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

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

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]",
@@ -2097,6 +2100,57 @@
               "description": "The selected value(s) of the set.",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "#handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateChipRole",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -2135,20 +2189,6 @@
                 "module": "../core/src/shared/mixins/FormAssociated.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "Labelled",
-                "module": "../core/src/shared/mixins/Labelled.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "dirty",
@@ -2937,27 +2977,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 +3483,7 @@
               "type": {
                 "text": "readonly string[] | null"
               },
-              "description": "The selected values of the set.",
+              "description": "The values of the set.",
               "readonly": true
             },
             {
@@ -4588,6 +4607,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 +4665,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 +5931,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 +6228,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",
@@ -6761,6 +6775,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -6810,16 +6829,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -6834,6 +6843,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

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.
@@ -601,7 +623,7 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * @cssprop --m3e-chip-unselected-leading-icon-color - Leading icon color in unselected state.
  * @cssprop --m3e-chip-unselected-trailing-icon-color - Trailing icon color in unselected state.
  */
-let M3eFilterChipElement = class M3eFilterChipElement extends Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(M3eChipElement, "option"), true)))))) {
+let M3eFilterChipElement = class M3eFilterChipElement extends Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(M3eChipElement, "radio"), true)))))) {
     constructor() {
         super(...arguments);
         _M3eFilterChipElement_instances.add(this);
@@ -761,7 +783,7 @@ M3eFilterChipElement = __decorate([
     t$2("m3e-filter-chip")
 ], M3eFilterChipElement);
 
-var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _a;
+var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a;
 /**
  * A container that organizes filter chips into a cohesive group, enabling selection and
  * deselection of values used to refine content or trigger contextual behavior.
@@ -799,7 +821,7 @@ var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_handleSlotChang
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
-let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled(Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, "listbox"))))))) {
+let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled(Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, "radiogroup"))))))) {
     constructor() {
         super(...arguments);
         _M3eFilterChipSetElement_instances.add(this);
@@ -860,10 +882,15 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled(Dir
             this[selectionManager].disabled = this.disabled;
         }
         if (changedProperties.has("multi")) {
-            this.ariaMultiSelectable = `${this.multi}`;
+            this.role = this.multi ? "group" : "radiogroup";
+            __classPrivateFieldGet(this, _M3eFilterChipSetElement_instances, "m", _M3eFilterChipSetElement_updateChipRole).call(this);
             this[selectionManager].multi = this.multi;
             this[selectionManager].disableRovingTabIndex(this.multi);
         }
+        if (changedProperties.has("multi") || changedProperties.has("disabled")) {
+            // aria-disabled is not supported on radiogroup roles.
+            this.ariaDisabled = this.multi && this.disabled ? "true" : null;
+        }
         if (changedProperties.has("hideSelectionIndicator")) {
             this.chips.forEach((x) => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
         }
@@ -880,6 +907,7 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled(Dir
 _M3eFilterChipSetElement_handleSlotChange = function _M3eFilterChipSetElement_handleSlotChange() {
     const { added } = this[selectionManager].setItems([...this.querySelectorAll("m3e-filter-chip")]);
     added.forEach((x) => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+    __classPrivateFieldGet(this, _M3eFilterChipSetElement_instances, "m", _M3eFilterChipSetElement_updateChipRole).call(this);
 };
 _M3eFilterChipSetElement_handleKeyDown = function _M3eFilterChipSetElement_handleKeyDown(e) {
     if (!this.multi) {
@@ -890,6 +918,9 @@ _M3eFilterChipSetElement_handleChange = function _M3eFilterChipSetElement_handle
     e.stopPropagation();
     this.dispatchEvent(new Event("change", { bubbles: true }));
 };
+_M3eFilterChipSetElement_updateChipRole = function _M3eFilterChipSetElement_updateChipRole() {
+    this.chips.forEach((x) => (x.role = this.multi ? "button" : "radio"));
+};
 __decorate([
     n$1({ type: Boolean })
 ], M3eFilterChipSetElement.prototype, "multi", void 0);
@@ -922,6 +953,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 +1251,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 +1425,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 +1469,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([