@m3e/chips 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/custom-elements.json

@@ -404,6 +404,21 @@
           "tagName": "m3e-assist-chip",
           "customElement": true,
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "AttachInternals",
+                "module": "../core/src/shared/mixins/AttachInternals.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -447,18 +462,6 @@
                 "module": "../core/src/shared/mixins/LinkButton.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "formAssociated",
-              "static": true,
-              "readonly": true,
-              "default": "formAssociated",
-              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
-              "inheritedFrom": {
-                "name": "AttachInternals",
-                "module": "../core/src/shared/mixins/AttachInternals.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "[_internals]",
@@ -2937,27 +2940,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "EventAttribute",
-                "module": "../core/src/shared/mixins/EventAttribute.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "[_suppressedEventHandler]",
@@ -3464,7 +3446,7 @@
               "type": {
                 "text": "readonly string[] | null"
               },
-              "description": "The selected values of the set.",
+              "description": "The values of the set.",
               "readonly": true
             },
             {
@@ -4588,6 +4570,21 @@
           "tagName": "m3e-suggestion-chip",
           "customElement": true,
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "AttachInternals",
+                "module": "../core/src/shared/mixins/AttachInternals.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -4631,18 +4628,6 @@
                 "module": "../core/src/shared/mixins/LinkButton.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "formAssociated",
-              "static": true,
-              "readonly": true,
-              "default": "formAssociated",
-              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
-              "inheritedFrom": {
-                "name": "AttachInternals",
-                "module": "../core/src/shared/mixins/AttachInternals.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "[_internals]",
@@ -5909,25 +5894,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -6225,6 +6191,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",

package/dist/index.js

@@ -268,6 +268,16 @@ M3eChipElement.styles = css `
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    a {
+      all: unset;
+      display: block;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      z-index: 1;
+    }
     :host([variant="elevated"]) .base {
       background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow});
 
@@ -541,6 +551,18 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual
  * differentiation and contextual emphasis.
  *
+ * @example
+ * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that
+ * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.
+ * ```html
+ * <m3e-filter-chip-set aria-label="Filter by topic">
+ *  <m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
+ *  <m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
+ *  <m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
+ *  <m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
+ * </m3e-filter-chip-set>
+ * ```
+ *
  * @tag m3e-filter-chip
  *
  * @slot - Renders the label of the chip.
@@ -922,6 +944,19 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * and manage discrete values such as tags or keywords. It supports expressive styling, accessibility,
  * keyboard interaction, and appearance variants including `elevated` and `outlined`.
  *
+ * @example
+ * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.
+ * In this example, the `input` slot specifies the `input` element used to add input chips and the
+ * field label's `for` attribute targets the `input` element to provide an accessible label.
+ * ```html
+ * <m3e-form-field>
+ *  <label slot="label" for="keywords">Keywords</label>
+ *  <m3e-input-chip-set aria-label="Enter keywords">
+ *    <input id="keywords" slot="input" placeholder="New keyword..." />
+ *  </m3e-input-chip-set>
+ * </m3e-form-field>
+ * ```
+ *
  * @tag m3e-input-chip
  *
  * @slot - Renders the label of the chip.
@@ -1207,7 +1242,7 @@ let M3eInputChipSetElement = class M3eInputChipSetElement extends RequiredConstr
         // validating required state on change to support form-field integration.
         return [...this.querySelectorAll("m3e-input-chip")];
     }
-    /** The selected values of the set. */
+    /** The values of the set. */
     get value() {
         const values = this.chips.map((x) => x.value);
         return values.length == 0 ? null : values;
@@ -1381,6 +1416,29 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
         }
     }
 };
+(() => {
+    const lightDomStyle = new CSSStyleSheet();
+    lightDomStyle.replaceSync(css `
+        m3e-input-chip-set [slot="input"]::placeholder {
+          user-select: none;
+          color: currentColor;
+          transition: opacity ${DesignToken.motion.duration.extraLong1};
+        }
+        m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder {
+          opacity: 0;
+          transition: 0s;
+        }
+        m3e-input-chip-set:hover [slot="input"]::placeholder {
+          transition: 0s;
+        }
+        @media (prefers-reduced-motion) {
+          m3e-input-chip-set [slot="input"]::placeholder {
+            transition: none !important;
+          }
+        }
+      `.toString());
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
+})();
 /** The styles of the element. */
 M3eInputChipSetElement.styles = [
     M3eChipSetElement.styles,
@@ -1402,27 +1460,10 @@ M3eInputChipSetElement.styles = [
       ::slotted(m3e-input-chip) {
         min-width: 0;
       }
-      ::slotted([slot="input"])::placeholder {
-        user-select: none;
-        color: currentColor;
-        transition: opacity ${DesignToken.motion.duration.extraLong1};
-      }
-      :host(:not(:focus-within)) ::slotted([slot="input"])::placeholder {
-        opacity: 0;
-        transition: 0s;
-      }
-      :host(:hover) ::slotted([slot="input"])::placeholder {
-        transition: 0s;
-      }
       span[role="row"],
       span[role="gridcell"] {
         display: contents;
       }
-      @media (prefers-reduced-motion) {
-        ::slotted([slot="input"])::placeholder {
-          transition: none !important;
-        }
-      }
     `,
 ];
 M3eInputChipSetElement = __decorate([