@m3e/web 2.0.0

package/dist/src/radio-group/RadioGroupElement.d.ts

@@ -0,0 +1,77 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
+import { M3eRadioElement } from "./RadioElement";
+declare const M3eRadioGroupElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").LabelledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").RequiredConstraintValidationMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DirtyMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").TouchedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").RequiredMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").ConstraintValidationMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").FormAssociatedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A container for a set of radio buttons.
+ *
+ * @description
+ * The `m3e-radio-group` component is a semantic container that orchestrates a set of `m3e-radio` elements.
+ * It provides accessible grouping, keyboard navigation, and validation logic for mutually exclusive selection.
+ * When marked as `required`, the group enforces selection constraints and reflects validation state, while
+ * delegating form submission to the checked radio. The group does not submit a value itself—it coordinates
+ * behavior, focus, and feedback across its radios.
+ *
+ * @example
+ * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.
+ * ```html
+ * <label for="rdg1">Radio group</label>
+ * <br />
+ * <m3e-radio-group id="rdg1">
+ *  <label><m3e-radio value="1"></m3e-radio> Value 1</label>
+ *  <label><m3e-radio value="2"></m3e-radio> Value 2</label>
+ *  <label><m3e-radio value="3"></m3e-radio> Value 3</label>
+ *  <label><m3e-radio value="4"></m3e-radio> Value 4</label>
+ * </m3e-radio-group>
+ * ```
+ *
+ * @tag m3e-radio-group
+ *
+ * @slot - Renders the radio buttons of the group.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr required - Whether the element is required.
+ *
+ * @fires change - Emitted when the checked state of a radio button changes.
+ */
+export declare class M3eRadioGroupElement extends M3eRadioGroupElement_base {
+    #private;
+    /** The list of attributes corresponding to the registered properties. */
+    static get observedAttributes(): string[];
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal */
+    readonly [selectionManager]: SelectionManager<M3eRadioElement>;
+    /** The radios in the group. */
+    get radios(): readonly M3eRadioElement[];
+    /** The selected radio. */
+    get selected(): M3eRadioElement | null;
+    /** The selected value of the radio group. */
+    get value(): string | null;
+    /** @inheritdoc */
+    markAsTouched(): void;
+    /** @inheritdoc */
+    markAsUntouched(): void;
+    /** @inheritdoc */
+    markAsDirty(): void;
+    /** @inheritdoc */
+    markAsPristine(): void;
+    /** Synchronizes property values when attributes change. */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-radio-group": M3eRadioGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=RadioGroupElement.d.ts.map

package/dist/src/radio-group/RadioGroupElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupElement.d.ts","sourceRoot":"","sources":["../../../src/radio-group/RadioGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB5E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,oBAAqB,SAAQ,yBAQzC;;IACC,yEAAyE;IACzE,WAAoB,kBAAkB,aAErC;IAED,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAKF,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,oCAKtB;IAEL,+BAA+B;IAC/B,IAAI,MAAM,IAAI,SAAS,eAAe,EAAE,CAEvC;IAED,0BAA0B;IAC1B,IAAI,QAAQ,IAAI,eAAe,GAAG,IAAI,CAErC;IAED,6CAA6C;IAC7C,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IAED,kBAAkB;IACT,aAAa,IAAI,IAAI;IAK9B,kBAAkB;IACT,eAAe,IAAI,IAAI;IAKhC,kBAAkB;IACT,WAAW,IAAI,IAAI;IAK5B,kBAAkB;IACT,cAAc,IAAI,IAAI;IAK/B,2DAA2D;IAClD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiBhG,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IASlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAYxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAuBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/radio-group/index.d.ts

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

package/dist/src/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}

package/dist/src/segmented-button/ButtonSegmentElement.d.ts

@@ -0,0 +1,105 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eButtonSegmentElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DirtyMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").TouchedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").CheckedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/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/segmented-button/ButtonSegmentElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSegmentElement.d.ts","sourceRoot":"","sources":["../../../src/segmented-button/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,CA6LpC;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/segmented-button/SegmentedButtonElement.d.ts

@@ -0,0 +1,90 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/web/core";
+import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
+import { M3eButtonSegmentElement } from "./ButtonSegmentElement";
+declare const M3eSegmentedButtonElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").LabelledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DirtyMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").TouchedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").FormAssociatedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/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 (enabled) value(s) of the button. */
+    get value(): string | readonly string[] | null;
+    /** @inheritdoc @internal */
+    get [formValue](): string | FormData | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): 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/segmented-button/SegmentedButtonElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButtonElement.d.ts","sourceRoot":"","sources":["../../../src/segmented-button/SegmentedButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5E,OAAO,EAML,SAAS,EAIV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,yBAA0B,SAAQ,8BAE9C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAiBpC;IAIF,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,4CAG6C;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,qDAAqD;IACrD,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;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAuBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA8BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/dist/src/segmented-button/index.d.ts

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

package/dist/src/segmented-button/index.d.ts.map

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

package/dist/src/select/SelectElement.d.ts

@@ -0,0 +1,119 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/web/core";
+import type { FormFieldControl } from "@m3e/web/form-field";
+import { M3eOptionElement } from "@m3e/web/option";
+declare const M3eSelectElement_base: import("../core/shared/mixins/Constructor").Constructor & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").LabelledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").RequiredConstraintValidationMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DirtyMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").TouchedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").RequiredMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").ConstraintValidationMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").FormAssociatedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * A form control that allows users to select a value from a set of predefined options.
+ *
+ * @description
+ * The `m3e-select` component follows Material Design 3 principles and provides a comprehensive
+ * selection interface for capturing user input. It supports both single and multiple selection modes,
+ * customizable validation states, and accessible keyboard navigation. The component integrates seamlessly
+ * with form field containers and dynamically positions its option list menu to ensure optimal viewport
+ * visibility. Selection changes are communicated through standard form events, enabling predictable integration
+ * with form submission and reactive state management systems.
+ *
+ * @example
+ * The following demonstrates a `m3e-select` component wrapped in a `m3e-form-field` with a slotted label.
+ * The label is associated with the select via the `for` and `id` attributes, ensuring accessible form semantics.
+ * Each `m3e-option` defines an option within the dropdown.
+ *
+ * ```html
+ * <m3e-form-field>
+ *   <label slot="label" for="select">Choose your favorite fruit</label>
+ *   <m3e-select id="select">
+ *     <m3e-option>Apples</m3e-option>
+ *     <m3e-option>Oranges</m3e-option>
+ *     <m3e-option>Bananas</m3e-option>
+ *     <m3e-option>Grapes</m3e-option>
+ *   </m3e-select>
+ * </m3e-form-field>
+ * ```
+ *
+ * @tag m3e-select
+ *
+ * @slot - Renders the options of the select.
+ * @slot arrow - Renders the dropdown arrow.
+ * @slot value - Renders the selected value(s).
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr hide-selection-indicator - Whether to hide the selection indicator for single select options.
+ * @attr multi - Whether multiple options can be selected.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr required - Whether the element is required.
+ *
+ * @fires input - Emitted when the selected state changes.
+ * @fires change - Emitted when the selected state changes.
+ *
+ * @cssprop --m3e-form-field-font-size - The font size of the select control.
+ * @cssprop --m3e-form-field-font-weight - The font weight of the select control.
+ * @cssprop --m3e-form-field-line-height - The line height of the select control.
+ * @cssprop --m3e-form-field-tracking - The letter spacing of the select control.
+ * @cssprop --m3e-select-container-shape - The corner radius of the select container.
+ * @cssprop --m3e-select-disabled-color - The text color when the select is disabled.
+ * @cssprop --m3e-select-disabled-color-opacity - The opacity level applied to the disabled text color.
+ * @cssprop --m3e-select-icon-size - The size of the dropdown arrow icon.
+ */
+export declare class M3eSelectElement extends M3eSelectElement_base implements FormFieldControl {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ static __nextId: number;
+    /** @private */ private readonly _listKeyManager;
+    /** @private */ private readonly _focusRing?;
+    constructor();
+    /**
+     * Whether to hide the selection indicator for single select options.
+     * @default false
+     */
+    hideSelectionIndicator: boolean;
+    /**
+     * Whether multiple options can be selected.
+     * @default false
+     */
+    multi: boolean;
+    /** The selected option(s). */
+    get selected(): readonly M3eOptionElement[];
+    /** The options that can be selected. */
+    get options(): readonly M3eOptionElement[];
+    /** The selected (enabled) value(s). */
+    get value(): string | readonly string[] | null;
+    /** @inheritdoc @internal */
+    get [formValue](): string | FormData | null;
+    /** @inheritdoc */
+    get shouldLabelFloat(): boolean;
+    /** @inheritdoc */
+    onContainerClick(): void;
+    /**
+     * Clears the value of the element.
+     * @param [restoreFocus=false] Whether to restore input focus.
+     */
+    clear(restoreFocus?: boolean): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+interface M3eSelectElementEventMap extends HTMLElementEventMap {
+    toggle: ToggleEvent;
+}
+export interface M3eSelectElement {
+    addEventListener<K extends keyof M3eSelectElementEventMap>(type: K, listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eSelectElementEventMap>(type: K, listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-select": M3eSelectElement;
+    }
+}
+export {};
+//# sourceMappingURL=SelectElement.d.ts.map

package/dist/src/select/SelectElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectElement.d.ts","sourceRoot":"","sources":["../../../src/select/SelectElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,EAYL,SAAS,EAOV,MAAM,eAAe,CAAC;AAIvB,OAAO,KAAK,EAAuB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAyB,MAAM,iBAAiB,CAAC;;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,gBACX,SAAQ,qBAWR,YAAW,gBAAgB;;IAE3B,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAgDpC;IAEF,eAAe,CAAC,MAAM,CAAC,QAAQ,SAAK;IAepC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAU3C;IAEL,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;;IAaxF;;;OAGG;IACiE,sBAAsB,UAAS;IAEnG;;;OAGG;IAC0B,KAAK,UAAS;IAE3C,8BAA8B;IAC9B,IAAI,QAAQ,IAAI,SAAS,gBAAgB,EAAE,CAE1C;IAED,wCAAwC;IACxC,IAAI,OAAO,IAAI,SAAS,gBAAgB,EAAE,CAEzC;IAED,uCAAuC;IACvC,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAU7C;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,6BAUvB;IAED,kBAAkB;IAClB,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAaD,kBAAkB;IAClB,gBAAgB,IAAI,IAAI;IAMxB;;;OAGG;IACH,KAAK,CAAC,YAAY,UAAQ,GAAG,IAAI;IAoBjC,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAWlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CA+RrC;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

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

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

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

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

package/dist/src/shape/ShapeElement.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+import { ShapeName } from "./ShapeName";
+/**
+ * A shape used to add emphasis and decorative flair.
+ *
+ * @description
+ * The `m3e-shape` component allows you to use abstract shapes thoughtfully to add emphasis and decorative flair,
+ * including built-in shape morphing.
+ *
+ * All shape names are sourced from the Material Shape library: `4-leaf-clover`, `4-sided-cookie`, `6-sided-cookie`,
+ * `7-sided-cookie`, `8-leaf-clover`, `9-sided-cookie`, `12-sided-cookie`, `arch`, `arrow`, `boom`, `bun`, `burst`,
+ * `circle`, `diamond`, `fan`, `flower`, `gem`, `ghost-ish`, `heart`, `hexagon`, `oval`, `pentagon`, `pill`, `pixel-circle`,
+ * `pixel-triangle`, `puffy`, `puffy-diamond`, `semicircle`, `slanted`, `soft-boom`, `soft-burst`, `square`, `sunny`,
+ * `triangle`, and `very-sunny`. Refer to the Material Shape library for visual references and details.
+ *
+ * @example
+ * The following example illustrates using the `m3e-shape` component to present the `sunny` shape.
+ * ```html
+ * <m3e-shape name="sunny"></m3e-shape>
+ * ```
+ *
+ * @tag m3e-shape
+ *
+ * @slot - Renders the clipped content of the shape.
+ *
+ * @attr name - The name of the shape.
+ *
+ * @cssprop --m3e-shape-size - Default size of the shape.
+ * @cssprop --m3e-shape-container-color - Container (background) color of the shape.
+ * @cssprop --m3e-shape-transition - Transition used to morph between shapes.
+ */
+export declare class M3eShapeElement extends LitElement {
+    /** The styles of the element. */
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The name of the shape.
+     * @default null
+     */
+    name: ShapeName | null;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-shape": M3eShapeElement;
+    }
+}
+//# sourceMappingURL=ShapeElement.d.ts.map

package/dist/src/shape/ShapeElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeElement.d.ts","sourceRoot":"","sources":["../../../src/shape/ShapeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,iCAAiC;IACjC,OAAgB,MAAM,iCAAgC;IAEtD;;;OAGG;IAC0B,IAAI,EAAE,SAAS,GAAG,IAAI,CAAQ;IAE3D,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/src/shape/ShapeName.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible names of a shape. */
+export type ShapeName = "4-leaf-clover" | "4-sided-cookie" | "6-sided-cookie" | "7-sided-cookie" | "8-leaf-clover" | "9-sided-cookie" | "12-sided-cookie" | "arch" | "arrow" | "boom" | "bun" | "burst" | "circle" | "diamond" | "fan" | "flower" | "gem" | "ghost-ish" | "heart" | "hexagon" | "oval" | "pentagon" | "pill" | "pixel-circle" | "pixel-triangle" | "puffy" | "puffy-diamond" | "semicircle" | "slanted" | "soft-boom" | "soft-burst" | "square" | "sunny" | "triangle" | "very-sunny";
+//# sourceMappingURL=ShapeName.d.ts.map

package/dist/src/shape/ShapeName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeName.d.ts","sourceRoot":"","sources":["../../../src/shape/ShapeName.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,MAAM,MAAM,SAAS,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,MAAM,GACN,OAAO,GACP,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,SAAS,GACT,KAAK,GACL,QAAQ,GACR,KAAK,GACL,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,MAAM,GACN,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,eAAe,GACf,YAAY,GACZ,SAAS,GACT,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,UAAU,GACV,YAAY,CAAC"}

package/dist/src/shape/ShapeNameStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from "lit";
+/**
+ * Name styles for `M3eShapeElement`.
+ * @internal
+ */
+export declare const ShapeNameStyle: CSSResultGroup;
+//# sourceMappingURL=ShapeNameStyle.d.ts.map

package/dist/src/shape/ShapeNameStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeNameStyle.d.ts","sourceRoot":"","sources":["../../../src/shape/ShapeNameStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,cAAc,EAAa,MAAM,KAAK,CAAC;AAchE;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,cAE5B,CAAC"}

package/dist/src/shape/ShapePolygon.d.ts

@@ -0,0 +1,8 @@
+import { CSSResult } from "lit";
+import { ShapeName } from "./ShapeName";
+/**
+ * Normalized polygons for each shape.
+ * @internal
+ */
+export declare const ShapePolygon: Record<ShapeName, CSSResult>;
+//# sourceMappingURL=ShapePolygon.d.ts.map

package/dist/src/shape/ShapePolygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapePolygon.d.ts","sourceRoot":"","sources":["../../../src/shape/ShapePolygon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAkFxC;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,CAAiB,CAAC"}

package/dist/src/shape/ShapeStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from "lit";
+/**
+ * Baseline styles for `M3eShapeElement`.
+ * @internal
+ */
+export declare const ShapeStyle: CSSResultGroup;
+//# sourceMappingURL=ShapeStyle.d.ts.map

package/dist/src/shape/ShapeStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeStyle.d.ts","sourceRoot":"","sources":["../../../src/shape/ShapeStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,cAiCxB,CAAC"}

package/dist/src/shape/ShapeToken.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Component design tokens that control the `M3eShapeElement` for all variants.
+ * @internal
+ */
+export declare const ShapeToken: {
+    /** Default size of the shape. */
+    readonly size: import("lit").CSSResult;
+    /** Container (background) color of the shape. */
+    readonly containerColor: import("lit").CSSResult;
+    /** Transition used to morph between shapes. */
+    readonly transition: import("lit").CSSResult;
+};
+//# sourceMappingURL=ShapeToken.d.ts.map

package/dist/src/shape/ShapeToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeToken.d.ts","sourceRoot":"","sources":["../../../src/shape/ShapeToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,UAAU;IACrB,iCAAiC;;IAGjC,iDAAiD;;IAGjD,+CAA+C;;CAEvC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shape/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}