@m3e/segmented-button 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/custom-elements.json

@@ -1885,25 +1885,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",
@@ -2201,6 +2182,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/src/ButtonSegmentElement.d.ts

@@ -0,0 +1,105 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eButtonSegmentElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").CheckedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A option that can be selected within a segmented button.
+ *
+ * @description
+ * The `m3e-button-segment` component represents a single selectable option within a segmented button group.
+ * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility
+ * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback
+ * based on their position and state.
+ *
+ * @example
+ * The following example illustrates a single-select segmented button with four segments.
+ * ```html
+ * <m3e-segmented-button>
+ *  <m3e-button-segment checked>8 oz</m3e-button-segment>
+ *  <m3e-button-segment>12 oz</m3e-button-segment>
+ *  <m3e-button-segment>16 oz</m3e-button-segment>
+ *  <m3e-button-segment>20 oz</m3e-button-segment>
+ * </m3e-segmented-button>
+ * ```
+ * @example
+ * The next example illustrates a multiselect segmented button designated using the `multi` attribute.
+ * ```html
+ * <m3e-segmented-button multi>
+ *  <m3e-button-segment checked>$</m3e-button-segment>
+ *  <m3e-button-segment checked>$$</m3e-button-segment>
+ *  <m3e-button-segment>$$$</m3e-button-segment>
+ *  <m3e-button-segment>$$$$</m3e-button-segment>
+ * </m3e-segmented-button>
+ * ```
+ *
+ * @tag m3e-button-segment
+ *
+ * @slot - Renders the label of the option.
+ * @slot icon - Renders an icon before the option's label.
+ *
+ * @attr checked - Whether the element is checked.
+ * @attr disabled - Whether the element is disabled.
+ * @attr value - A string representing the value of the segment.
+ *
+ * @fires input - Emitted when the checked state changes.
+ * @fires change - Emitted when the checked state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-segmented-button-height - Total height of the segmented button.
+ * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button’s border.
+ * @cssprop --m3e-segmented-button-outline-color - Color of the button’s border.
+ * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.
+ * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.
+ * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.
+ * @cssprop --m3e-segmented-button-font-size - Font size of the label text.
+ * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.
+ * @cssprop --m3e-segmented-button-line-height - Line height of the label text.
+ * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.
+ * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.
+ * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.
+ * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.
+ * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.
+ * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.
+ * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.
+ * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.
+ * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.
+ * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.
+ * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.
+ * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.
+ * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.
+ * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.
+ * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.
+ * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.
+ * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.
+ * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.
+ * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.
+ * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.
+ */
+export declare class M3eButtonSegmentElement extends M3eButtonSegmentElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _focusRing?;
+    /** @private */ private readonly _stateLayer?;
+    /** @private */ private readonly _ripple?;
+    /**
+     * A string representing the value of the segment.
+     * @default "on"
+     */
+    value: string;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-button-segment": M3eButtonSegmentElement;
+    }
+}
+export {};
+//# sourceMappingURL=ButtonSegmentElement.d.ts.map

package/dist/src/ButtonSegmentElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSegmentElement.d.ts","sourceRoot":"","sources":["../../src/ButtonSegmentElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;;AAmBvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,uBAAwB,SAAQ,4BAE5C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA4LpC;IAEF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAG9E;;;OAGG;IACS,KAAK,SAAQ;IAEzB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAwCxE,kBAAkB;IACT,MAAM,IAAI,OAAO;CA0C3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/dist/src/SegmentedButtonElement.d.ts

@@ -0,0 +1,88 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/core";
+import { SelectionManager, selectionManager } from "@m3e/core/a11y";
+import { M3eButtonSegmentElement } from "./ButtonSegmentElement";
+declare const M3eSegmentedButtonElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LabelledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormAssociatedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A button that allows a user to select from a limited set of options.
+ *
+ * @description
+ * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.
+ * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and
+ * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback
+ * based on interaction state and input modality. Segments are visually unified but independently interactive.
+ *
+ * @example
+ * The following example illustrates a single-select segmented button with four segments.
+ * ```html
+ * <m3e-segmented-button>
+ *  <m3e-button-segment checked>8 oz</m3e-button-segment>
+ *  <m3e-button-segment>12 oz</m3e-button-segment>
+ *  <m3e-button-segment>16 oz</m3e-button-segment>
+ *  <m3e-button-segment>20 oz</m3e-button-segment>
+ * </m3e-segmented-button>
+ * ```
+ * @example
+ * The next example illustrates a multiselect segmented button designated using the `multi` attribute.
+ * ```html
+ * <m3e-segmented-button multi>
+ *  <m3e-button-segment checked>$</m3e-button-segment>
+ *  <m3e-button-segment checked>$$</m3e-button-segment>
+ *  <m3e-button-segment>$$$</m3e-button-segment>
+ *  <m3e-button-segment>$$$$</m3e-button-segment>
+ * </m3e-segmented-button>
+ * ```
+ *
+ * @tag m3e-segmented-button
+ *
+ * @slot - Renders the segments of the button.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr hide-selection-indicator - Whether to hide the selection indicator.
+ * @attr multi - Whether multiple options can be selected.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ *
+ * @fires input - Emitted when the checked state of a segment changes.
+ * @fires change - Emitted when the checked state of a segment changes.
+ *
+ * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.
+ * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.
+ */
+export declare class M3eSegmentedButtonElement extends M3eSegmentedButtonElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal */
+    readonly [selectionManager]: SelectionManager<M3eButtonSegmentElement>;
+    /**
+     * Whether multiple options can be selected.
+     * @default false
+     */
+    multi: boolean;
+    /**
+     * Whether to hide the selection indicator.
+     * @default false
+     */
+    hideSelectionIndicator: boolean;
+    /** The segments of the button. */
+    get segments(): readonly M3eButtonSegmentElement[];
+    /** The selected segment(s) of the button. */
+    get selected(): readonly M3eButtonSegmentElement[];
+    /** The selected value(s) of the button. */
+    get value(): string | readonly string[] | null;
+    /** @inheritdoc @internal */
+    get [formValue](): string | FormData | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-segmented-button": M3eSegmentedButtonElement;
+    }
+}
+export {};
+//# sourceMappingURL=SegmentedButtonElement.d.ts.map

package/dist/src/SegmentedButtonElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButtonElement.d.ts","sourceRoot":"","sources":["../../src/SegmentedButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5E,OAAO,EAML,SAAS,EAIV,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,yBAA0B,SAAQ,8BAE9C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAuBpC;IAEF,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,4CAE6C;IAExE;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;OAGG;IACiE,sBAAsB,UAAS;IAEnG,kCAAkC;IAClC,IAAI,QAAQ,IAAI,SAAS,uBAAuB,EAAE,CAEjD;IAED,6CAA6C;IAC7C,IAAI,QAAQ,IAAI,SAAS,uBAAuB,EAAE,CAEjD;IAED,2CAA2C;IAC3C,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAU7C;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,6BAUvB;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAMlC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAkBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA0BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ButtonSegmentElement";
+export * from "./SegmentedButtonElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/segmented-button",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Segmented Button for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {