[proposal] disconnect addon-end slot disabled state in form fields

[DRiFTy17]

Proposal

Forge form fields (text-field, select, chip-field) all provide a common addon-end slot currently. When disabled, this slot inherits the disabled background-color and pointer-events styles. This presents two problems: 1) interactive elements placed within the slot appear visually disabled even if they aren't and 2) it can be confusing for developers if they assume those slotted interactive elements are disabled when they should technically be responsible for synchronizing the disabled state.

The proposal here is to disconnect the addon-slot from receiving the disabled state styles that are applied to the <input> and leading and trailing slots. This will require some adjustment to the default DOM structure and styles.

Benefits

• Allowing for a design pattern to have the field be disabled while still allowing access to actions provided in the addon-end slot.
• The addon-end slot would now become truly an "addon" and the slotted content would now be more obvious for developers to control the disabled state themselves.

Caveats

• Introduces a breaking change because developers may be relying on that slot to appear disabled currently. We would provide guidance telling developers to use the trailing slot instead.

[DRiFTy17]

An example implementation of this can be seen here:
https://stackblitz.com/edit/angular-ivy-mgwmxz

This demo is based on @tylertech/[email protected] and uses CSS shadow parts to override the internals to achieve this design.

It's also worth noting that we needed to provide a class on the <forge-text-field> host element when the <input> is disabled so that we could target that state independently. While this won't be necessary once this proposal is implemented, ideally we should also update the form field components to add/remove state-based data-* attributes to the host elements automatically to make this more convenient for developers in future customizations.