@m3e/web 2.2.1 → 2.3.0

package/dist/src/split-pane/SplitPaneElement.d.ts

@@ -0,0 +1,163 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/web/core";
+import { Direction } from "@m3e/web/core/bidi";
+import { SplitPaneOrientation } from "./SplitPaneOrientation";
+declare const M3eSplitPaneElement_base: 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").ReconnectedCallbackMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * A dual-view layout that separates content with a movable drag handle.
+ * @description
+ * The `m3e-split-pane` component delivers a Material 3-inspired split view with a
+ * movable drag handle, enabling responsive layout composition and pane resizing.
+ * It supports keyboard interaction, adaptive orientation, and optional detent snapping
+ * for consistent, accessible content distribution.
+ *
+ * @example
+ * The following example illustrates the basic use of the `m3e-split-pane` with start and end content.
+ * In this example, the start pane occupies 25% of the available width.
+ * ```html
+ * <m3e-split-pane value="25">
+ *  <m3e-card slot="start"></m3e-card>
+ *  <m3e-card slot="end"></m3e-card>
+ * </m3e-split-pane>
+ * ```
+ *
+ * @example
+ * The next example demonstrates minimum and maximum constraints, where the start pane
+ * may shrink to 25% but cannot grow beyond 50% of the available space.
+ * ```html
+ * <m3e-split-pane value="25" min="25" max="50">
+ *  <m3e-card slot="start"></m3e-card>
+ *  <m3e-card slot="end"></m3e-card>
+ * </m3e-split-pane>
+ * ```
+ *
+ * @example
+ * The next example demonstrates percentage‑based detents, allowing the drag handle to snap at
+ * 0%, 25%, 50%, 75%, and 100% of the available space.
+ * ```html
+ * <m3e-split-pane value="50" detents="0 25 50 75 100">
+ *  <m3e-card slot="start"></m3e-card>
+ *  <m3e-card slot="end"></m3e-card>
+ * </m3e-split-pane>
+ * ```
+ *
+ * @tag m3e-split-pane
+ *
+ * @slot start - Renders content at the logical start side of the pane.
+ * @slot end - Renders content at the logical end side of the pane.
+ *
+ * @attr detents - Detents (discrete sizes) the start pane can snap to.
+ * @attr label - The accessible label given to the moveable drag handle.
+ * @attr max - A fractional value, between 0 and 100, indicating the maximum size of the start pane.
+ * @attr min - A fractional value, between 0 and 100, indicating the minimum size of the start pane.
+ * @attr orientation - The orientation of the split.
+ * @attr step - A fractional value, between 0 and 100, indicating the increment by which to adjust the value when resized via keyboard.
+ * @attr value - A fractional value, between 0 and 100, indicating the size of the start pane.
+ * @attr wrap-detents - Whether cycling through detents will wrap.
+ *
+ * @fires input - Fired continuously while the user adjusts the drag handle.
+ * @fires change - Fired when the user finishes adjusting the drag handle.
+ *
+ * @cssprop --m3e-split-pane-drag-handle-hover-color - Color used for the drag handle hover state.
+ * @cssprop --m3e-split-pane-drag-handle-hover-opacity - Opacity used for the drag handle hover state.
+ * @cssprop --m3e-split-pane-drag-handle-focus-color - Color used for the drag handle focus state.
+ * @cssprop --m3e-split-pane-drag-handle-focus-opacity - Opacity used for the drag handle focus state.
+ * @cssprop --m3e-split-pane-drag-handle-color - Background color of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-shape - Corner shape of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-color - Background color of the drag handle when pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-shape - Corner shape of the drag handle when pressed.
+ * @cssprop --m3e-split-pane-drag-handle-container-width - Width of the drag handle container.
+ * @cssprop --m3e-split-pane-drag-handle-width - Thickness of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-height - Length of the drag handle when not pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-width - Thickness of the drag handle when pressed.
+ * @cssprop --m3e-split-pane-drag-handle-pressed-height - Length of the drag handle when pressed.
+ */
+export declare class M3eSplitPaneElement extends M3eSplitPaneElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ _orientation?: Exclude<SplitPaneOrientation, "auto">;
+    /** @private */ private _base;
+    /** @private */ private _dragHandle;
+    /**
+     * A fractional value, between 0 and 100, indicating the size of the start pane.
+     * @default 50
+     */
+    value: number;
+    /**
+     * A fractional value, between 0 and 100, indicating the minimum size of the start pane.
+     * @default 0
+     */
+    min: number;
+    /**
+     * A fractional value, between 0 and 100, indicating the maximum size of the start pane.
+     * @default 100
+     */
+    max: number;
+    /**
+     * A fractional value, between 0 and 100, indicating the increment by which to adjust the value when resized via keyboard.
+     * @default 1
+     */
+    step: number;
+    /**
+     * Detents (discrete sizes) the start pane can snap to.
+     * @default []
+     */
+    detents: string[];
+    /**
+     * Whether cycling through detents will wrap.
+     * @default false
+     */
+    wrapDetents: boolean;
+    /**
+     * The orientation of the split.
+     * @default "horizontal"
+     */
+    orientation: SplitPaneOrientation;
+    /**
+     * The accessible label given to the movable drag handle.
+     * @default "Resize panes"
+     */
+    label: string;
+    /** A function used to generates human readable text for the accessible value (`aria-valuetext`) of the drag handle. */
+    valueFormatter?: (value: number, orientation: Omit<SplitPaneOrientation, "auto">, dir: Direction) => string | undefined;
+    /** The current orientation of the split. */
+    get currentOrientation(): Exclude<SplitPaneOrientation, "auto">;
+    /** @inheritdoc */
+    get [formValue](): string | File | FormData | null;
+    /**
+     * Moves the drag handle to the collapsed position. If detents exist, snaps to the collapsed detent.
+     * If no detents exist, moves to the minimum allowed value.
+     */
+    collapse(): void;
+    /**
+     * Moves the drag handle to the expanded position. If detents exist, snaps to the expanded detent.
+     * If no detents exist, moves to the maximum allowed value.
+     */
+    expand(): void;
+    /**
+     * Moves the drag handle to the specified position. If detents exist, snaps to the closest detent.
+     * If no detents exist, moves to the specified value.
+     * @param {number} value A fractional value, between 0 and 100, indicating the size of the start pane.
+     */
+    snapToValue(value: number): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    reconnectedCallback(): void;
+    /** @inheritdoc */
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-split-pane": M3eSplitPaneElement;
+    }
+}
+export {};
+//# sourceMappingURL=SplitPaneElement.d.ts.map

package/dist/src/split-pane/SplitPaneElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPaneElement.d.ts","sourceRoot":"","sources":["../../../src/split-pane/SplitPaneElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAIvF,OAAO,EAQL,SAAS,EAQV,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,SAAS,EAAqB,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,mBAAoB,SAAQ,wBAA0E;;IAUjH,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAqHpC;IAEF,eAAe,CAAU,YAAY,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;IAG9E,eAAe,CAAiB,OAAO,CAAC,KAAK,CAAe;IAC5D,eAAe,CAAwB,OAAO,CAAC,WAAW,CAAe;IA6BzE;;;OAGG;IACyB,KAAK,SAAM;IAEvC;;;OAGG;IACyB,GAAG,SAAK;IAEpC;;;OAGG;IACyB,GAAG,SAAO;IAEtC;;;OAGG;IACyB,IAAI,SAAK;IAErC;;;OAGG;IAC2E,OAAO,EAAE,MAAM,EAAE,CAAM;IAErG;;;OAGG;IACqD,WAAW,UAAS;IAE5E;;;OAGG;IACS,WAAW,EAAE,oBAAoB,CAAgB;IAE7D;;;OAGG;IACS,KAAK,EAAE,MAAM,CAAkB;IAE3C,uHAAuH;IAC3G,cAAc,CAAC,EAAE,CAC3B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAC/C,GAAG,EAAE,SAAS,KACX,MAAM,GAAG,SAAS,CA0BrB;IAEF,4CAA4C;IAC5C,IAAI,kBAAkB,IAAI,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAE9D;IAED,kBAAkB;IAClB,IAAa,CAAC,SAAS,CAAC,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAE1D;IAED;;;OAGG;IACH,QAAQ,IAAI,IAAI;IAIhB;;;OAGG;IACH,MAAM,IAAI,IAAI;IAId;;;;OAIG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAUpC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOpE,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAgbrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/dist/src/split-pane/SplitPaneOrientation.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible layout orientations of a split pane. */
+export type SplitPaneOrientation = "horizontal" | "vertical" | "auto";
+//# sourceMappingURL=SplitPaneOrientation.d.ts.map

package/dist/src/split-pane/SplitPaneOrientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPaneOrientation.d.ts","sourceRoot":"","sources":["../../../src/split-pane/SplitPaneOrientation.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC"}

package/dist/src/split-pane/index.d.ts

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

package/dist/src/split-pane/index.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/web",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Platform-native Web Components for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -48,10 +48,12 @@
     "segmented-button",
     "select",
     "shape",
+    "skeleton",
     "slide-group",
     "slider",
     "snackbar",
     "split-button",
+    "split-pane",
     "stepper",
     "switch",
     "tabs",
@@ -231,6 +233,10 @@
       "types": "./dist/src/shape/index.d.ts",
       "default": "./dist/shape.js"
     },
+    "./skeleton": {
+      "types": "./dist/src/skeleton/index.d.ts",
+      "default": "./dist/skeleton.js"
+    },
     "./slide-group": {
       "types": "./dist/src/slide-group/index.d.ts",
       "default": "./dist/slide-group.js"
@@ -247,6 +253,10 @@
       "types": "./dist/src/split-button/index.d.ts",
       "default": "./dist/split-button.js"
     },
+    "./split-pane": {
+      "types": "./dist/src/split-pane/index.d.ts",
+      "default": "./dist/split-pane.js"
+    },
     "./stepper": {
       "types": "./dist/src/stepper/index.d.ts",
       "default": "./dist/stepper.js"