@m3e/list 1.1.6 → 1.1.8

package/dist/src/ListOptionElement.d.ts

@@ -0,0 +1,127 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { M3eListItemElement } from "./ListItemElement";
+declare const M3eListOptionElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").SelectedMixin> & 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> & typeof M3eListItemElement;
+/**
+ * A selectable option in a list.
+ *
+ * @description
+ * The `m3e-list-option` component represents a selectable item within a list container. It extends
+ * the base `m3e-list-item` functionality with selection state management, providing visual feedback
+ * for selected and unselected states. The component is designed for use with `m3e-selection-list`
+ * and supports rich content through multiple slots, comprehensive styling via CSS custom properties,
+ * and accessible interactions following Material 3 design principles.
+ *
+ * @tag m3e-list-option
+ *
+ * @slot - Renders the content of the list item.
+ * @slot leading - Renders the leading content of the list item.
+ * @slot overline - Renders the overline of the list item.
+ * @slot supporting-text - Renders the supporting text of the list item.
+ * @slot trailing - Renders the trailing content of the list item.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr selected - Whether the element is selected.
+ *
+ * @fires input - Emitted when the selected state changes.
+ * @fires change - Emitted when the selected state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
+ * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
+ * @cssprop --m3e-list-item-padding-block - Vertical padding for the list item.
+ * @cssprop --m3e-list-item-height - Minimum height of the list item.
+ * @cssprop --m3e-list-item-font-size - Font size for main content.
+ * @cssprop --m3e-list-item-font-weight - Font weight for main content.
+ * @cssprop --m3e-list-item-line-height - Line height for main content.
+ * @cssprop --m3e-list-item-tracking - Letter spacing for main content.
+ * @cssprop --m3e-list-item-overline-font-size - Font size for overline slot.
+ * @cssprop --m3e-list-item-overline-font-weight - Font weight for overline slot.
+ * @cssprop --m3e-list-item-overline-line-height - Line height for overline slot.
+ * @cssprop --m3e-list-item-overline-tracking - Letter spacing for overline slot.
+ * @cssprop --m3e-list-item-supporting-text-font-size - Font size for supporting text slot.
+ * @cssprop --m3e-list-item-supporting-text-font-weight - Font weight for supporting text slot.
+ * @cssprop --m3e-list-item-supporting-text-line-height - Line height for supporting text slot.
+ * @cssprop --m3e-list-item-supporting-text-tracking - Letter spacing for supporting text slot.
+ * @cssprop --m3e-list-item-trailing-text-font-size - Font size for trailing supporting text slot.
+ * @cssprop --m3e-list-item-trailing-text-font-weight - Font weight for trailing supporting text slot.
+ * @cssprop --m3e-list-item-trailing-text-line-height - Line height for trailing supporting text slot.
+ * @cssprop --m3e-list-item-trailing-text-tracking - Letter spacing for trailing supporting text slot.
+ * @cssprop --m3e-list-item-icon-size - Size for leading/trailing icons.
+ * @cssprop --m3e-list-item-label-text-color - Color for the main content.
+ * @cssprop --m3e-list-item-overline-color - Color for the overline slot.
+ * @cssprop --m3e-list-item-supporting-text-color - Color for the supporting text slot.
+ * @cssprop --m3e-list-item-leading-color - Color for the leading content.
+ * @cssprop --m3e-list-item-trailing-color - Color for the trailing content.
+ * @cssprop --m3e-list-item-container-color - Background color of the list item.
+ * @cssprop --m3e-list-item-container-shape - Border radius of the list item.
+ * @cssprop --m3e-list-item-hover-container-shape - Border radius of the list item on hover.
+ * @cssprop --m3e-list-item-focus-container-shape - Border radius of the list item on focus.
+ * @cssprop --m3e-list-item-video-width - Width of the video slot.
+ * @cssprop --m3e-list-item-video-height - Height of the video slot.
+ * @cssprop --m3e-list-item-video-shape - Border radius of the video slot.
+ * @cssprop --m3e-list-item-image-width - Width of the image slot.
+ * @cssprop --m3e-list-item-image-height - Height of the image slot.
+ * @cssprop --m3e-list-item-image-shape - Border radius of the image slot.
+ * @cssprop --m3e-list-item-disabled-container-color - Background color of the list item when disabled.
+ * @cssprop --m3e-list-item-disabled-label-text-color - Color for the main content when disabled.
+ * @cssprop --m3e-list-item-disabled-label-text-opacity - Opacity for the main content when disabled.
+ * @cssprop --m3e-list-item-disabled-overline-color - Color for the overline slot when disabled.
+ * @cssprop --m3e-list-item-disabled-overline-opacity - Opacity for the overline slot when disabled.
+ * @cssprop --m3e-list-item-disabled-supporting-text-color - Color for the supporting text slot when disabled.
+ * @cssprop --m3e-list-item-disabled-supporting-text-opacity - Opacity for the supporting text slot when disabled.
+ * @cssprop --m3e-list-item-disabled-leading-color - Color for the leading icon when disabled.
+ * @cssprop --m3e-list-item-disabled-leading-opacity - Opacity for the leading icon when disabled.
+ * @cssprop --m3e-list-item-disabled-trailing-color - Color for the trailing icon when disabled.
+ * @cssprop --m3e-list-item-disabled-trailing-opacity - Opacity for the trailing icon when disabled.
+ * @cssprop --m3e-list-item-hover-state-layer-color - Color for the hover state layer.
+ * @cssprop --m3e-list-item-hover-state-layer-opacity - Opacity for the hover state layer.
+ * @cssprop --m3e-list-item-focus-state-layer-color - Color for the focus state layer.
+ * @cssprop --m3e-list-item-focus-state-layer-opacity - Opacity for the focus state layer.
+ * @cssprop --m3e-list-item-pressed-state-layer-color - Color for the pressed state layer.
+ * @cssprop --m3e-list-item-pressed-state-layer-opacity - Opacity for the pressed state layer.
+ * @cssprop --m3e-list-item-selected-label-text-color - Selected color for the main content.
+ * @cssprop --m3e-list-item-selected-overline-color - Selected color for the overline slot.
+ * @cssprop --m3e-list-item-selected-supporting-text-color - Selected color for the supporting text slot.
+ * @cssprop --m3e-list-item-selected-leading-color - Selected color for the leading content.
+ * @cssprop --m3e-list-item-selected-trailing-color - Selected color for the trailing content.
+ * @cssprop --m3e-list-item-selected-container-color - Selected background color of the list item.
+ * @cssprop --m3e-list-item-selected-container-shape - Selected border radius of the list item.
+ * @cssprop --m3e-list-item-selected-disabled-container-color - Selected background color when disabled.
+ * @cssprop --m3e-list-item-selected-disabled-container-opacity - Selected opacity when disabled.
+ * @cssprop --m3e-list-item-selected-hover-state-layer-color - Color for the hover state layer when selected.
+ * @cssprop --m3e-list-item-selected-hover-state-layer-opacity - Opacity for the hover state layer when selected.
+ * @cssprop --m3e-list-item-selected-focus-state-layer-color - Color for the focus state layer when selected.
+ * @cssprop --m3e-list-item-selected-focus-state-layer-opacity - Opacity for the focus state layer when selected.
+ * @cssprop --m3e-list-item-selected-pressed-state-layer-color - Color for the pressed state layer when selected.
+ * @cssprop --m3e-list-item-selected-pressed-state-layer-opacity - Opacity for the pressed state layer when selected.
+ * @cssprop --m3e-list-item-three-line-top-offset - Top offset for media in three line items.
+ * @cssprop --m3e-list-item-disabled-media-opacity - Opacity for media when disabled.
+ */
+export declare class M3eListOptionElement extends M3eListOptionElement_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 option. */
+    get value(): string;
+    set value(value: string);
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-list-option": M3eListOptionElement;
+    }
+}
+export {};
+//# sourceMappingURL=ListOptionElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListOptionElement.d.ts","sourceRoot":"","sources":["../../src/ListOptionElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAO,cAAc,EAAQ,MAAM,KAAK,CAAC;AAmBhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,qBACa,oBAAqB,SAAQ,yBAEzC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkGpC;IAKF,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;IAI9E,qDAAqD;IACrD,IAAgB,KAAK,IAGJ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,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;IAYxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAuCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/ListVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of a list. */
+export type ListVariant = "standard" | "segmented";
+//# sourceMappingURL=ListVariant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListVariant.d.ts","sourceRoot":"","sources":["../../src/ListVariant.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC"}

package/dist/src/SelectionListElement.d.ts

@@ -0,0 +1,77 @@
+import { PropertyValues } from "lit";
+import { formValue } from "@m3e/core";
+import { SelectionManager, selectionManager } from "@m3e/core/a11y";
+import { M3eListElement } from "./ListElement";
+import { M3eListOptionElement } from "./ListOptionElement";
+declare const M3eSelectionListElement_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 M3eListElement;
+/**
+ * A list of selectable options.
+ *
+ * @description
+ * The `m3e-selection-list` component provides a container for managing selectable list items with
+ * single or multi-select capabilities. It implements robust keyboard navigation, form association,
+ * and state management for both individual options and the list as a whole. The component supports
+ * flexible layout, custom theming via CSS custom properties, and comprehensive accessibility features
+ * including aria roles, roving tabindex management, and semantic event handling following Material 3
+ * design principles.
+ *
+ * @tag m3e-selection-list
+ *
+ * @slot - Renders the items of the list.
+ *
+ * @attr hide-selection-indicator - Whether to hide the selection indicator.
+ * @attr multi - Whether multiple items can be selected.
+ * @attr variant - The appearance variant of the list.
+ *
+ * @fires input - Emitted when the selected state of an option changes.
+ * @fires change - Emitted when the selected state of an option changes.
+ *
+ * @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
+ * @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.
+ * @cssprop --m3e-segmented-list-segment-gap - Gap between list items in segmented variant.
+ * @cssprop --m3e-segmented-list-container-shape - Border radius of the segmented list container.
+ * @cssprop --m3e-segmented-list-item-container-color - Background color of items in segmented variant.
+ * @cssprop --m3e-segmented-list-item-disabled-container-color - Background color of disabled items in segmented variant.
+ * @cssprop --m3e-segmented-list-item-container-shape - Border radius of items in segmented variant.
+ * @cssprop --m3e-segmented-list-item-hover-container-shape - Border radius of items in segmented variant on hover.
+ * @cssprop --m3e-segmented-list-item-focus-container-shape - Border radius of items in segmented variant on focus.
+ * @cssprop --m3e-segmented-list-item-selected-container-shape - Border radius of items in segmented variant when selected.
+ */
+export declare class M3eSelectionListElement extends M3eSelectionListElement_base {
+    #private;
+    /** @private */
+    readonly [selectionManager]: SelectionManager<M3eListOptionElement>;
+    /**
+     * Whether multiple items can be selected.
+     * @default false
+     */
+    multi: boolean;
+    /**
+     * Whether to hide the selection indicator.
+     * @default false
+     */
+    hideSelectionIndicator: boolean;
+    /** The options of the list. */
+    get options(): readonly M3eListOptionElement[];
+    /** The selected option(s) of the list. */
+    get selected(): readonly M3eListOptionElement[];
+    /** The selected (enabled) value(s) of the set. */
+    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 */
+    notifyItemsChange(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-selection-list": M3eSelectionListElement;
+    }
+}
+export {};
+//# sourceMappingURL=SelectionListElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionListElement.d.ts","sourceRoot":"","sources":["../../src/SelectionListElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAoD,SAAS,EAA2B,MAAM,WAAW,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,uBAAwB,SAAQ,4BAE5C;;IAIC,eAAe;IACf,QAAQ,CAAC,CAAC,gBAAgB,CAAC,yCAGE;IAE7B;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;OAGG;IACiE,sBAAsB,UAAS;IAEnG,+BAA+B;IAC/B,IAAI,OAAO,IAAI,SAAS,oBAAoB,EAAE,CAE7C;IAED,0CAA0C;IAC1C,IAAI,QAAQ,IAAI,SAAS,oBAAoB,EAAE,CAE9C;IAED,kDAAkD;IAClD,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;IAOlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAwBxE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;CAiBnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/dist/src/index.d.ts

@@ -1,3 +1,11 @@
+export * from "./ActionListElement";
+export * from "./ExpandableListItemElement";
+export * from "./ListActionElement";
 export * from "./ListElement";
+export * from "./ListItemButtonElement";
+export * from "./ListItemContentType";
 export * from "./ListItemElement";
+export * from "./ListOptionElement";
+export * from "./ListVariant";
+export * from "./SelectionListElement";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/list",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "List for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "^1.1.3",
+    "@m3e/core": "^1.1.7",
     "lit": "^3.3.0"
   },
   "customElements": "dist/custom-elements.json"