docs(chips): Add trailing action doc

PiperOrigin-RevId: 300560764

packages/mdc-chips/trailingaction/README.md

@@ -0,0 +1,124 @@
+# Trailing Action
+
+The trailing action is used in removable input chips. It is a subcomponent of the chips and intended only for use in the context of a chip.
+
+## Basic Usage
+
+### HTML Structure
+
+```html
+<button class="mdc-chip-trailing-action"
+        aria-label="Remove chip"
+        tabindex="-1">
+  <span class="mdc-chip-trailing-action__ripple"></span>
+  <span class="mdc-chip-trailing-action__icon material-icons">close</span>
+</button>
+```
+
+### Styles
+
+```scss
+@use "@material/chips/mdc-chip-trailing-action";
+```
+
+## Variants
+
+### Non-navigable trailing action
+
+In some cases, the trailing action should be non-navigable. To accomplish this, swap the `aria-label` for `aria-hidden="true"`.
+
+```html
+<button class="mdc-chip-trailing-action"
+        aria-hidden="true"
+        tabindex="-1">
+  <span class="mdc-chip-trailing-action__icon material-icons">close</span>
+</button>
+```
+
+### Accessibility
+
+Material Design spec advises that touch targets should be at least 48 x 48 px.
+To meet this requirement, add the following to your trailing action:
+
+```html
+<button class="mdc-chip-trailing-action"
+        aria-label="Remove chip"
+        tabindex="-1">
+  <span class="mdc-chip-trailing-action__ripple"></span>
+  <span class="mdc-chip-trailing-action__touch"></span>
+  <span class="mdc-chip-trailing-action__icon material-icons">close</span>
+</button>
+```
+
+## Style Customization
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-chip-trailing-action` | Mandatory.
+`mdc-chip-trailing-action__icon` | Mandatory. Indicates the chip icon.
+`mdc-chip-trailing-action__ripple` | Mandatory. Indicates the chip ripple.
+`mdc-chip-trailing-action__touch` | Optional. Renders an accessible touch target.
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`color($color)` | Sets the trailing action color
+`size($size)` | Sets the trailing action size
+`horizontal-spacing($left, $right)` | Sets the trailing action horizontal spacing
+`touch-target-width($width)` | Sets the trailing action touch target width
+
+
+## `MDCChipTrailingAction` Methods
+
+Method Signature | Description
+--- | ---
+`removeFocus() => void` | Proxies to the foundation's `removeFocus` method
+`focus() => void` | Proxies to the foundation's `focus` method
+`isNavigable() => void` | Proxies to the foundation's `isNavigable` method
+
+##### Events
+
+Event Name | `event.detail` | Description
+--- | --- | ---
+`MDCChipTrailingAction:interaction` | `{trigger: InteractionTrigger}` | Indicates the trailing action was interacted with via mouse or keyboard
+`MDCChipTrailingAction:navigation` | `{key: string}` | Indicates a navigation event has occurred on a trailing action
+
+> _NOTE_: All of `MDCChipTrailingAction`'s emitted events bubble up through the DOM.
+
+## Usage within Web Frameworks
+
+If you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
+
+### `MDCChipTrailingActionAdapter`
+
+See [`component.ts`](component.ts) for a vanilla DOM implementations of the adapter API for reference.
+
+Method Signature | Description
+--- | ---
+`focus() => void` | Gives focus to the root element
+`getAttribute(attr: string) => string|null` | Returns the attribute value, if present
+`notifyInteraction(trigger: InteractionTrigger) => void` | Notifies the Chip  that the trailing action has been interacted with
+`notifyNavigation(key: string) => void` | Notifies the Chip that the trailing action was navigated
+`setAttribute(attr: string, value: string) => void` | Sets an attribute on the root to the given value
+
+### `MDCChipTrailingActionFoundation`
+
+Method Signature | Description
+--- | ---
+`removeFocus() => void` | Removes focus from the trailing action
+`focus() => void` | Gives focus to the trailing action
+`isNavigable() => boolean` | Returns the navigability of the trailing action
+`handleClick(evt: MouseEvent) => void` | Handles a click event on the root element
+`handleKeydown(evt: KeyboardEvent) => void` | Handles a keydown event on the root element
+
+#### `MDCChipTrailingActionFoundation` Event Handlers
+
+When wrapping the trailing action foundation, the following events must be bound to the indicated foundation methods:
+
+Events | Element Selector | Foundation Handler
+--- | --- | ---
+`click` | `.mdc-chip-trailing-action` (root) | `handleClick()`
+`keydown` | `.mdc-chip-trailing-action` (root) | `handleKeydown()`