@m3e/expansion-panel 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/src/ExpansionPanelElement.d.ts

@@ -0,0 +1,120 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { ExpansionTogglePosition } from "./ExpansionTogglePosition";
+import { ExpansionToggleDirection } from "./ExpansionToggleDirection";
+declare const M3eExpansionPanelElement_base: 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 LitElement;
+/**
+ * An expandable details-summary view.
+ *
+ * @description
+ * The `m3e-expansion-panel` component provides an accessible, animated details-summary view for
+ * organizing content in collapsible sections. It supports custom header, content, actions, and
+ * toggle icon slots, and offers configurable toggle position and direction. The panel responds to
+ * open/close states, emits lifecycle events, and supports rich theming via CSS custom properties
+ * for elevation, shape, spacing, and color.
+ *
+ * @example
+ * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.
+ *
+ * ```html
+ * <m3e-accordion>
+ *   <m3e-expansion-panel>
+ *     <span slot="header">Panel 1</span>
+ *     I am content for the first expansion panel
+ *   </m3e-expansion-panel>
+ *   <m3e-expansion-panel>
+ *     <span slot="header">Panel 2</span>
+ *     I am content for the second expansion panel
+ *   </m3e-expansion-panel>
+ * </m3e-accordion>
+ * ```
+ *
+ * @tag m3e-expansion-panel
+ *
+ * @slot - Renders the detail of the panel.
+ * @slot actions - Renders the actions bar of the panel.
+ * @slot header - Renders the header content.
+ * @slot toggle-icon - Renders the expansion toggle icon.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr hide-toggle - Whether to hide the expansion toggle.
+ * @attr open - Whether the panel is expanded.
+ * @attr toggle-direction - The direction of the expansion toggle.
+ * @attr toggle-position - The position of the expansion toggle.
+ *
+ * @fires opening - Emitted when the expansion panel begins to open.
+ * @fires opened - Emitted when the expansion panel has opened.
+ * @fires closing - Emitted when the expansion panel begins to close.
+ * @fires closed - Emitted when the expansion panel has closed.
+ *
+ * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
+ * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
+ * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.
+ * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.
+ * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.
+ * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).
+ * @cssprop --m3e-expansion-header-font-size - The font size of the header text.
+ * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.
+ * @cssprop --m3e-expansion-header-line-height - The line height of the header text.
+ * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.
+ * @cssprop --m3e-expansion-panel-text-color - Color of the panel's text content.
+ * @cssprop --m3e-expansion-panel-disabled-text-color - Color of the panel's text content, when disabled.
+ * @cssprop --m3e-expansion-panel-disabled-text-opacity - Opacity of the panel's text content, when disabled.
+ * @cssprop --m3e-expansion-panel-container-color - Background color of the panel container.
+ * @cssprop --m3e-expansion-panel-elevation - Elevation level when the panel is collapsed.
+ * @cssprop --m3e-expansion-panel-shape - Shape (e.g. border radius) of the panel when collapsed.
+ * @cssprop --m3e-expansion-panel-open-elevation - Elevation level when the panel is expanded.
+ * @cssprop --m3e-expansion-panel-open-shape - Shape (e.g. border radius) of the panel when expanded.
+ * @cssprop --m3e-expansion-panel-content-padding - Padding around the panel's content area.
+ * @cssprop --m3e-expansion-panel-actions-spacing - Spacing between action buttons or elements.
+ * @cssprop --m3e-expansion-panel-actions-padding - Padding around the actions section.
+ * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.
+ * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.
+ */
+export declare class M3eExpansionPanelElement extends M3eExpansionPanelElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @private */ private readonly _header?;
+    /**
+     * Whether the panel is expanded.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * The direction of the expansion toggle.
+     * @default "vertical"
+     */
+    toggleDirection: ExpansionToggleDirection;
+    /**
+     * The position of the expansion toggle.
+     * @default "after"
+     */
+    togglePosition: ExpansionTogglePosition;
+    /**
+     * Whether to hide the expansion toggle.
+     * @default false
+     */
+    hideToggle: boolean;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+interface M3eExpansionPanelElementEventMap extends HTMLElementEventMap {
+    opening: Event;
+    opened: Event;
+    closing: Event;
+    closed: Event;
+}
+export interface M3eExpansionPanelElement {
+    addEventListener<K extends keyof M3eExpansionPanelElementEventMap>(type: K, listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eExpansionPanelElementEventMap>(type: K, listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-expansion-panel": M3eExpansionPanelElement;
+    }
+}
+export {};
+//# sourceMappingURL=ExpansionPanelElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionPanelElement.d.ts","sourceRoot":"","sources":["../../src/ExpansionPanelElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAKtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBACa,wBAAyB,SAAQ,6BAM7C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAuB;IAE7D,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAK5C,eAAe,CAAgC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAA4B;IAEpG;;;OAGG;IACyC,IAAI,UAAS;IAEzD;;;OAGG;IACyD,eAAe,EAAE,wBAAwB,CAAc;IAEnH;;;OAGG;IACwD,cAAc,EAAE,uBAAuB,CAAW;IAE7G;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;cACC,MAAM,IAAI,OAAO;CA+FrC;AAED,UAAU,gCAAiC,SAAQ,mBAAmB;IACpE,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,CAAC,CAAC,SAAS,MAAM,gCAAgC,EAC/D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,EAAE,EAAE,gCAAgC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3F,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,gCAAgC,EAClE,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,EAAE,EAAE,gCAAgC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3F,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,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/dist/src/ExpansionToggleDirection.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible directions of an expansion toggle. */
+export type ExpansionToggleDirection = "vertical" | "horizontal";
+//# sourceMappingURL=ExpansionToggleDirection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionToggleDirection.d.ts","sourceRoot":"","sources":["../../src/ExpansionToggleDirection.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,YAAY,CAAC"}

package/dist/src/ExpansionTogglePosition.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible positions of an expansion toggle. */
+export type ExpansionTogglePosition = "before" | "after";
+//# sourceMappingURL=ExpansionTogglePosition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionTogglePosition.d.ts","sourceRoot":"","sources":["../../src/ExpansionTogglePosition.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./AccordionElement";
+export * from "./ExpansionHeaderElement";
+export * from "./ExpansionPanelElement";
+export * from "./ExpansionToggleDirection";
+export * from "./ExpansionTogglePosition";
+//# 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,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC"}

package/dist/src/styles/ExpansionHeaderStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for `M3eExpansionHeaderElement`.
+ * @internal
+ */
+export declare const ExpansionHeaderStyle: import("lit").CSSResult;
+//# sourceMappingURL=ExpansionHeaderStyle.d.ts.map

package/dist/src/styles/ExpansionHeaderStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionHeaderStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionHeaderStyle.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,yBA0EhC,CAAC"}

package/dist/src/styles/ExpansionHeaderToken.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Component design tokens for `M3eExpansionHeaderElement`.
+ * @internal
+ */
+export declare const ExpansionHeaderToken: {
+    readonly collapsedHeight: import("lit").CSSResult;
+    readonly expandedHeight: import("lit").CSSResult;
+    readonly paddingLeft: import("lit").CSSResult;
+    readonly paddingRight: import("lit").CSSResult;
+    readonly spacing: import("lit").CSSResult;
+    readonly toggleIconSize: import("lit").CSSResult;
+    readonly fontSize: import("lit").CSSResult;
+    readonly fontWeight: import("lit").CSSResult;
+    readonly lineHeight: import("lit").CSSResult;
+    readonly tracking: import("lit").CSSResult;
+};
+//# sourceMappingURL=ExpansionHeaderToken.d.ts.map

package/dist/src/styles/ExpansionHeaderToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionHeaderToken.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionHeaderToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAevB,CAAC"}

package/dist/src/styles/ExpansionPanelStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for `M3eExpansionPanelElement`.
+ * @internal
+ */
+export declare const ExpansionPanelStyle: import("lit").CSSResult;
+//# sourceMappingURL=ExpansionPanelStyle.d.ts.map

package/dist/src/styles/ExpansionPanelStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionPanelStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionPanelStyle.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,yBAyE/B,CAAC"}

package/dist/src/styles/ExpansionPanelToken.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Component design tokens for `M3eExpansionPanelElement`.
+ * @internal
+ */
+export declare const ExpansionPanelToken: {
+    readonly textColor: import("lit").CSSResult;
+    readonly disabledTextColor: import("lit").CSSResult;
+    readonly disabledTextOpacity: import("lit").CSSResult;
+    readonly containerColor: import("lit").CSSResult;
+    readonly collapsedElevation: import("lit").CSSResult;
+    readonly collapsedShape: import("lit").CSSResult;
+    readonly expandedElevation: import("lit").CSSResult;
+    readonly expandedShape: import("lit").CSSResult;
+    readonly expandedSpace: import("lit").CSSResult;
+    readonly contentPadding: import("lit").CSSResult;
+    readonly actionsSpacing: import("lit").CSSResult;
+    readonly actionsPadding: import("lit").CSSResult;
+    readonly actionsDividerThickness: import("lit").CSSResult;
+    readonly actionsDividerColor: import("lit").CSSResult;
+};
+//# sourceMappingURL=ExpansionPanelToken.d.ts.map

package/dist/src/styles/ExpansionPanelToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionPanelToken.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionPanelToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CAmBtB,CAAC"}

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/expansion-panel",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Expansion Panel for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {