@m3e/core 1.0.0-rc.1

package/dist/src/shared/primitives/SlideElement.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eSlide_base: import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A carousel-like container used to horizontally cycle through slotted items.
+ *
+ * @example
+ * The following example illustrates the use of `m3e-slide` to cycle through content.
+ * In this example, `selected-index` is set to `1` so that "Content at index 1" is presented
+ * by the component.
+ * ```html
+ * <m3e-slide selected-index="1">
+ *  <div>Content at index 0</div>
+ *  <div>Content at index 1</div>
+ *  <div>Content at index 2</div>
+ *  <div>Content at index 3</div>
+ * </m3e-slide>
+ * ```
+ *
+ * @tag m3e-slide
+ *
+ * @attr selected-index - The zero-based index of the visible item.
+ *
+ * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.
+ */
+export declare class M3eSlide extends M3eSlide_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _items;
+    /**
+     * The zero-based index of the visible item.
+     * @default null
+     */
+    selectedIndex: number | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-slide": M3eSlide;
+    }
+}
+export {};
+//# sourceMappingURL=SlideElement.d.ts.map

package/dist/src/shared/primitives/SlideElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/SlideElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;;AAMvF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,QAAS,SAAQ,aAAwB;;IACpD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAsCpC;IAEF,eAAe,CAA2C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAa;IAE9F;;;OAGG;IACqE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5G,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAcrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/src/shared/primitives/StateLayerElement.d.ts

@@ -0,0 +1,77 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eStateLayerElement_base: import("../mixins/Constructor").Constructor<import("..").HtmlForMixin> & import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * @summary
+ * Provides focus and hover state layer treatment for an interactive element.
+ *
+ * @description
+ * The `m3e-state-layer` component is an absolute positioned element used to depict hover and focus overlays.
+ * The parenting element must be a relative positioned element.
+ *
+ * This element can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The state layer is displayed when the interactive element is either hovered or focused.  This can be disabled using
+ * the `disabled` attribute.
+ *
+ * @example
+ * The following example illustrates attaching a state layer to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-state-layer` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-state-layer for="myDiv"></m3e-state-layer>
+ * <div>
+ * ```
+ *
+ * @tag m3e-state-layer
+ *
+ * @attr disabled - Whether hover and focus event will not trigger the state layer.Whether hover and focus event will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
+ *
+ * @cssprop --m3e-state-layer-duration - Duration of state layer changes.
+ * @cssprop --m3e-state-layer-easing - Easing curve of state layer changes.
+ * @cssprop --m3e-state-layer-focus-color - Color on hover.
+ * @cssprop --m3e-state-layer-focus-opacity - Opacity on focus.
+ * @cssprop --m3e-state-layer-hover-color - Color on hover.
+ * @cssprop --m3e-state-layer-hover-opacity - Opacity on hover.
+ */
+export declare class M3eStateLayerElement extends M3eStateLayerElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _layer?;
+    /**
+     * Whether hover and focus event will not trigger the state layer. State layers can still
+     * be controlled manually using the `show` and `hide` methods.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Launches a manual state layer.
+     * @param {"hover" | "focused"} state The state of the layer to show.
+     */
+    show(state: "hover" | "focused"): void;
+    /**
+     * Hides the state layer.
+     * @param {"hover" | "focused"} state The state of the layer to hide.
+     */
+    hide(state: "hover" | "focused"): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-state-layer": M3eStateLayerElement;
+    }
+}
+export {};
+//# sourceMappingURL=StateLayerElement.d.ts.map

package/dist/src/shared/primitives/StateLayerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateLayerElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/StateLayerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;;AAQvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,oBAAqB,SAAQ,yBAAiC;;IACzE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkCpC;IAcF,eAAe,CAAkB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAc;IAEvE;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAItC;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAItC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAM3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAQvB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAyBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/shared/primitives/StateLayerToken.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Component design tokens that control the `M3eStateLayerElement`.
+ * @internal
+ */
+export declare const StateLayerToken: {
+    readonly hoverColor: import("lit").CSSResult;
+    readonly hoverOpacity: import("lit").CSSResult;
+    readonly focusColor: import("lit").CSSResult;
+    readonly focusOpacity: import("lit").CSSResult;
+    readonly duration: import("lit").CSSResult;
+    readonly easing: import("lit").CSSResult;
+};
+//# sourceMappingURL=StateLayerToken.d.ts.map

package/dist/src/shared/primitives/StateLayerToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateLayerToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/StateLayerToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC"}

package/dist/src/shared/primitives/TextOverflowElement.d.ts

@@ -0,0 +1,39 @@
+import { CSSResultGroup, LitElement } from "lit";
+/**
+ * @summary
+ * An inline container which presents an ellipsis when content overflows.
+ *
+ * @description
+ * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
+ * exceeds the available width. It's intended for use inside flex or otherwise
+ * constrained containers to preserve layout while providing predictable, single-line
+ * truncation behavior for long text.
+ *
+ * @example
+ * A typical usage inside a flex container where the heading and trailing actions are
+ * constrained, allowing the center text to truncate with an ellipsis.
+ *
+ * ```html
+ * <div style="display:flex;align-items:center;gap:12px;">
+ *   <m3e-icon name="menu"></m3e-icon>
+ *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
+ *   <m3e-icon name="more_vert"></m3e-icon>
+ * </div>
+ * ```
+ *
+ * @tag m3e-text-overflow
+ *
+ * @slot - Renders the content to truncate with an ellipsis.
+ */
+export declare class M3eTextOverflowElement extends LitElement {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-text-overflow": M3eTextOverflowElement;
+    }
+}
+//# sourceMappingURL=TextOverflowElement.d.ts.map

package/dist/src/shared/primitives/TextOverflowElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextOverflowElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/TextOverflowElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAepC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/dist/src/shared/primitives/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./CollapsibleElement";
+export * from "./ElevationElement";
+export * from "./ElevationLevel";
+export * from "./FocusRingElement";
+export * from "./PseudoCheckboxElement";
+export * from "./PseudoRadioElement";
+export * from "./RippleElement";
+export * from "./ScrollContainerElement";
+export * from "./ScrollDividers";
+export * from "./SlideElement";
+export * from "./StateLayerElement";
+export * from "./TextOverflowElement";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}

package/dist/src/shared/tokens/ColorToken.d.ts

@@ -0,0 +1,96 @@
+/** Design tokens that control color. */
+export declare const ColorToken: {
+    /** High-emphasis fills, texts, and icons against surface. */
+    readonly primary: import("lit").CSSResult;
+    /** Text and icons against primary. */
+    readonly onPrimary: import("lit").CSSResult;
+    /** Standout fill color against surface, for key components. */
+    readonly primaryContainer: import("lit").CSSResult;
+    /** Text and icons against primary container. */
+    readonly onPrimaryContainer: import("lit").CSSResult;
+    /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */
+    readonly primaryFixed: import("lit").CSSResult;
+    /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
+    readonly primaryFixedDim: import("lit").CSSResult;
+    /** Text and icons against fixed primary. */
+    readonly onPrimaryFixed: import("lit").CSSResult;
+    /** Lower-emphasis text and icons against fixed primary. */
+    readonly onPrimaryFixedVariant: import("lit").CSSResult;
+    /** Less prominent fills, text, and icons against surface. */
+    readonly secondary: import("lit").CSSResult;
+    /** Text and icons against secondary. */
+    readonly onSecondary: import("lit").CSSResult;
+    /** Less prominent fill color against surface, for recessive components. */
+    readonly secondaryContainer: import("lit").CSSResult;
+    /** Text and icons against secondary container. */
+    readonly onSecondaryContainer: import("lit").CSSResult;
+    /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */
+    readonly secondaryFixed: import("lit").CSSResult;
+    /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
+    readonly secondaryFixedDim: import("lit").CSSResult;
+    /** Text and icons against fixed secondary. */
+    readonly onSecondaryFixed: import("lit").CSSResult;
+    /** Lower-emphasis text and icons against fixed secondary. */
+    readonly onSecondaryFixedVariant: import("lit").CSSResult;
+    /** Complementary fills, text, and icons against surface. */
+    readonly tertiary: import("lit").CSSResult;
+    /** Text and icons against tertiary. */
+    readonly onTertiary: import("lit").CSSResult;
+    /** Complementary container color against surface. */
+    readonly tertiaryContainer: import("lit").CSSResult;
+    /** Text and icons against tertiary container. */
+    readonly onTertiaryContainer: import("lit").CSSResult;
+    /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */
+    readonly tertiaryFixed: import("lit").CSSResult;
+    /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
+    readonly tertiaryFixedDim: import("lit").CSSResult;
+    /** Text and icons against fixed tertiary. */
+    readonly onTertiaryFixed: import("lit").CSSResult;
+    /** Lower-emphasis text and icons against fixed tertiary. */
+    readonly onTertiaryFixedVariant: import("lit").CSSResult;
+    /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */
+    readonly error: import("lit").CSSResult;
+    /** Text and icons against error. */
+    readonly onError: import("lit").CSSResult;
+    /** Attention-grabbing fill color against surface. */
+    readonly errorContainer: import("lit").CSSResult;
+    /** Text and icons against error container. */
+    readonly onErrorContainer: import("lit").CSSResult;
+    /** Default color for backgrounds. */
+    readonly surface: import("lit").CSSResult;
+    /** Text and icons against any surface color. */
+    readonly onSurface: import("lit").CSSResult;
+    /** Lower-emphasis color for text and icons against any surface color. */
+    readonly onSurfaceVariant: import("lit").CSSResult;
+    /** Lowest-emphasis container color. */
+    readonly surfaceContainerLowest: import("lit").CSSResult;
+    /** Low-emphasis container color. */
+    readonly surfaceContainerLow: import("lit").CSSResult;
+    /** Default container color. */
+    readonly surfaceContainer: import("lit").CSSResult;
+    /** High-emphasis container color. */
+    readonly surfaceContainerHigh: import("lit").CSSResult;
+    /** Highest-emphasis container color. */
+    readonly surfaceContainerHighest: import("lit").CSSResult;
+    /** Dimmest surface color in light and dark themes. */
+    readonly surfaceDim: import("lit").CSSResult;
+    /** Brightest surface color in light and dark themes. */
+    readonly surfaceBright: import("lit").CSSResult;
+    /** Alternate surface color, can be used for active states. */
+    readonly surfaceVariant: import("lit").CSSResult;
+    /** Background fills for elements which contrast against surface. */
+    readonly inverseSurface: import("lit").CSSResult;
+    /** Text and icons against inverse surface. */
+    readonly inverseOnSurface: import("lit").CSSResult;
+    /** Primary text and icons against inverse surface. */
+    readonly inversePrimary: import("lit").CSSResult;
+    /** Important boundaries, such as a text field outline. */
+    readonly outline: import("lit").CSSResult;
+    /** Decorative elements, such as dividers. */
+    readonly outlineVariant: import("lit").CSSResult;
+    /** Elevation shadow color. */
+    readonly shadow: import("lit").CSSResult;
+    /** Backdrop which obscures underlying content. */
+    readonly scrim: import("lit").CSSResult;
+};
+//# sourceMappingURL=ColorToken.d.ts.map

package/dist/src/shared/tokens/ColorToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/tokens/ColorToken.ts"],"names":[],"mappings":"AAEA,wCAAwC;AACxC,eAAO,MAAM,UAAU;IACrB,6DAA6D;;IAG7D,sCAAsC;;IAGtC,+DAA+D;;IAG/D,gDAAgD;;IAGhD,kGAAkG;;IAGlG,2GAA2G;;IAG3G,4CAA4C;;IAG5C,2DAA2D;;IAG3D,6DAA6D;;IAG7D,wCAAwC;;IAGxC,2EAA2E;;IAG3E,kDAAkD;;IAGlD,mGAAmG;;IAGnG,4GAA4G;;IAG5G,8CAA8C;;IAG9C,6DAA6D;;IAG7D,4DAA4D;;IAG5D,uCAAuC;;IAGvC,qDAAqD;;IAGrD,iDAAiD;;IAGjD,kGAAkG;;IAGlG,2GAA2G;;IAG3G,6CAA6C;;IAG7C,4DAA4D;;IAG5D,+FAA+F;;IAG/F,oCAAoC;;IAGpC,qDAAqD;;IAGrD,8CAA8C;;IAG9C,qCAAqC;;IAGrC,gDAAgD;;IAGhD,yEAAyE;;IAGzE,uCAAuC;;IAGvC,oCAAoC;;IAGpC,+BAA+B;;IAG/B,qCAAqC;;IAGrC,wCAAwC;;IAGxC,sDAAsD;;IAGtD,wDAAwD;;IAGxD,8DAA8D;;IAG9D,oEAAoE;;IAGpE,8CAA8C;;IAG9C,sDAAsD;;IAGtD,0DAA0D;;IAG1D,6CAA6C;;IAG7C,8BAA8B;;IAG9B,kDAAkD;;CAE1C,CAAC"}

package/dist/src/shared/tokens/DensityToken.d.ts

@@ -0,0 +1,15 @@
+import { CSSResult } from "lit";
+/** Design tokens that control density. */
+export declare const DensityToken: {
+    /**
+     * Creates a CSS `calc` that calculates a dimension based on density.
+     * @param {number} minScale The minimum supported scale.
+     * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.
+     */
+    readonly calc: (minScale: number) => CSSResult;
+    /** Base density multiplier. */
+    readonly scale: CSSResult;
+    /** Spatial unit used to scale component dimensions based on density. */
+    readonly size: CSSResult;
+};
+//# sourceMappingURL=DensityToken.d.ts.map

package/dist/src/shared/tokens/DensityToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DensityToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/tokens/DensityToken.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAU3C,0CAA0C;AAC1C,eAAO,MAAM,YAAY;IAGvB;;;;OAIG;8BACY,MAAM,KAAG,SAAS;IAhBjC,+BAA+B;;IAG/B,wEAAwE;;CAgBhE,CAAC"}