for default value use the system tokens. ex.

--error-bg-color: var(--tap-pin-input-cell-error-bg-color, --tap-sys-color-surface-negative-light);

also use the system token naming pattern for naming component tokens. ex.
--tap-sys-color-surface-negative-light -> --tap-pin-input-cell-color-surface-negative

NIT: I think we should not define 2 different CSS properties for a single token. both --padding-lg and --tap-pin-input-cell-padding-large would have the same usage and one is redundant.

same comments as the pin-input-cell.style.ts

define the whole event instead of the event params is a better practice.
also, we need to export the types in index.ts

same as pin-input-cell types

remove please

I guess optional chaining is unnecessary here

event.keyCode is deprecated. use event.key instead.

pin-input should be a form control element using elementInternal. so we can use the browser native auto-fill

Take a look at with-form-associated Mixin and with-element-internals Mixin.

const BaseClass = withFormAssociated(withElementInternals(LitElement));

class PinInput extends BaseClass {}

To enhance simplicity and readability, consider moving most of the logic to the pin-input component. For instance, handling keyboard events could be consolidated within the pin-input element, rather than having both components engaged in event handling

export the types too.

We have a utility BaseEvent you can use to write your own custom events.

For naming conventions of custom events, I recommend omitting the component name, as the component is already encapsulated within its own directory.

Take a look at with-form-associated Mixin and with-element-internals Mixin.

const BaseClass = withFormAssociated(withElementInternals(LitElement));

class PinInput extends BaseClass {}