@m3e/expansion-panel 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/src/ExpansionPanelElement.d.ts

@@ -1,9 +1,8 @@
 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> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+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;
 /**
- * @summary
  * An expandable details-summary view.
  *
  * @description
@@ -32,7 +31,7 @@ declare const M3eExpansionPanelElement_base: import("node_modules/@m3e/core/dist
  * @tag m3e-expansion-panel
  *
  * @slot - Renders the detail of the panel.
- * @slot actions- Renders the actions bar 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.
  *

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;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"}
+{"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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@m3e/expansion-panel",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "Expansion Panel for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
-  "homepage": "https://matraic.github.io/m3e/",
+  "homepage": "https://matraic.github.io/m3e/#/components/expansion-panel.html",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/matraic/m3e.git"
@@ -28,7 +28,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.1",
+    "@m3e/core": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {

package/cem.config.mjs

@@ -1,16 +0,0 @@
-import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
-
-export default {
-  globs: ["src/**/*.ts"],
-  exclude: ["src/**/*.spec.ts"],
-  packagejson: true,
-  outdir: "dist",
-  litelement: true,
-  plugins: [
-    customElementVsCodePlugin({
-      outdir: "dist",
-      htmlFileName: "html-custom-data.json",
-      cssFileName: "css-custom-data.json",
-    }),
-  ],
-};

package/demo/index.html

@@ -1,60 +0,0 @@
-<!doctype html>
-<html lang="en" style="overflow-y: auto">
-  <head>
-    <title>Expansion Panel for M3E</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Expansion Panel for M3E" />
-    <base href="./" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
-      rel="stylesheet"
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
-          "@m3e/core": "../../core/dist/index.min.js"
-        }
-      }
-    </script>
-    <script type="module" src="../../button/dist/index.min.js"></script>
-    <script type="module" src="../../theme/dist/index.min.js"></script>
-    <script type="module" src="../dist/index.min.js"></script>
-    <style>
-      body {
-        font-family: "Roboto";
-      }
-      *:not(:defined) {
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <m3e-theme strong-focus>
-      <m3e-accordion>
-        <m3e-expansion-panel>
-          <span slot="header">Expansion panel 1 title</span>
-          <div>I am content for the first expansion panel</div>
-        </m3e-expansion-panel>
-        <m3e-expansion-panel disabled>
-          <span slot="header">Expansion panel 2 title</span>
-          <div>I am content for the second expansion panel</div>
-        </m3e-expansion-panel>
-        <m3e-expansion-panel>
-          <span slot="header">Expansion panel 2 title</span>
-          <div>I am content for the third expansion panel</div>
-          <div slot="actions">
-            <m3e-button>Action</m3e-button>
-          </div>
-        </m3e-expansion-panel>
-      </m3e-accordion>
-    </m3e-theme>
-  </body>
-</html>

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/AccordionElement.ts

@@ -1,115 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { DesignToken, Role } from "@m3e/core";
-
-import { M3eExpansionPanelElement } from "./ExpansionPanelElement";
-
-/**
- * @summary
- * Combines multiple expansion panels in to an accordion.
- *
- * @description
- * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.
- * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming
- * and shape control for grouped layouts. The accordion manages open/close state across its child panels,
- * enabling interactive disclosure patterns for complex content.
- *
- * @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-accordion
- *
- * @slot - Renders the panels of the accordion.
- *
- * @attr multi - Whether multiple expansion panels can be open at the same time.
- */
-@customElement("m3e-accordion")
-export class M3eAccordionElement extends Role(LitElement, "none") {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: block;
-    }
-    ::slotted(m3e-expansion-panel) {
-      --m3e-expansion-panel-container-color: ${DesignToken.color.surfaceContainerLow};
-      --m3e-expansion-panel-elevation: ${DesignToken.elevation.level2};
-      --m3e-expansion-panel-open-shape: ${DesignToken.shape.corner.medium};
-      --_expansion-panel-open-spacing: 1rem;
-    }
-    ::slotted(m3e-expansion-panel:first-of-type:last-of-type) {
-      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.medium};
-    }
-    ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {
-      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium}
-        ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none};
-    }
-    ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {
-      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none}
-        ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium};
-    }
-  `;
-
-  /** @private */ #panels: Array<M3eExpansionPanelElement> = [];
-
-  /**
-   * Whether multiple expansion panels can be open at the same time.
-   * @default false
-   */
-  @property({ type: Boolean }) multi = false;
-
-  /** The panels of the accordion. */
-  get panels() {
-    return this.#panels;
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<slot @slotchange="${this.#handleSlotChange}" @opening="${this.#handleOpening}"></slot>`;
-  }
-
-  /** @private */
-  #handleSlotChange() {
-    this.#panels = [...this.querySelectorAll("m3e-expansion-panel")];
-
-    if (this.multi) {
-      return;
-    }
-
-    let alreadyOpen = false;
-    for (const panel of this.#panels.filter((x) => !x.open)) {
-      if (alreadyOpen) {
-        panel.open = false;
-      }
-      alreadyOpen = true;
-    }
-  }
-
-  /** @private */
-  #handleOpening(e: Event): void {
-    if (!this.multi) {
-      for (const panel of this.#panels.filter((x) => x !== e.target && x.open)) {
-        panel.open = false;
-      }
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-accordion": M3eAccordionElement;
-  }
-}

package/src/ExpansionHeaderElement.ts

@@ -1,99 +0,0 @@
-import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-
-import {
-  AttachInternals,
-  Disabled,
-  Focusable,
-  KeyboardClick,
-  M3eFocusRingElement,
-  M3eStateLayerElement,
-  Role,
-} from "@m3e/core";
-
-import { ExpansionTogglePosition } from "./ExpansionTogglePosition";
-import { ExpansionToggleDirection } from "./ExpansionToggleDirection";
-
-import { ExpansionHeaderStyle } from "./styles";
-
-/**
- * A button used to toggle the expanded state of an expansion panel.
- *
- * @tag m3e-expansion-header
- *
- * @slot - Renders the content of the header.
- * @slot toggle-icon - Renders the icon of the expansion toggle.
- *
- * @attr hide-toggle - Whether to hide the expansion toggle.
- * @attr toggle-direction - The direction of the expansion toggle.
- * @attr toggle-position - The position of the expansion toggle.
- *
- * @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.
- */
-@customElement("m3e-expansion-header")
-export class M3eExpansionHeaderElement extends KeyboardClick(
-  Focusable(Disabled(AttachInternals(Role(LitElement, "button"), true)))
-) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = ExpansionHeaderStyle;
-
-  /** @private */ @query(".focus-ring") private readonly _focusRing?: M3eFocusRingElement;
-  /** @private */ @query(".state-layer") private readonly _stateLayer?: M3eStateLayerElement;
-
-  /**
-   * The direction of the expansion toggle.
-   * @default "vertical"
-   */
-  @property({ attribute: "toggle-direction", reflect: true }) toggleDirection: ExpansionToggleDirection = "vertical";
-
-  /**
-   * The position of the expansion toggle.
-   * @default "after"
-   */
-  @property({ attribute: "toggle-position", reflect: true }) togglePosition: ExpansionTogglePosition = "after";
-
-  /**
-   * Whether to hide the expansion toggle.
-   * @default false
-   */
-  @property({ attribute: "hide-toggle", type: Boolean, reflect: true }) hideToggle = false;
-
-  /** @inheritdoc */
-  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
-    super.firstUpdated(_changedProperties);
-    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
-      <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
-      ${this.togglePosition === "before" ? this.#renderToggle() : nothing}
-      <div class="content">
-        <slot></slot>
-      </div>
-      ${this.togglePosition === "after" ? this.#renderToggle() : nothing}`;
-  }
-
-  /** @private */
-  #renderToggle(): unknown {
-    return html`<div class="toggle" aria-hidden="true">
-      <slot name="toggle-icon"></slot>
-    </div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-expansion-header": M3eExpansionHeaderElement;
-  }
-}

package/src/ExpansionPanelElement.ts

@@ -1,260 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
-
-import { CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-
-import { AttachInternals, Disabled, EventAttribute, Role } from "@m3e/core";
-
-import { ExpansionTogglePosition } from "./ExpansionTogglePosition";
-import { ExpansionToggleDirection } from "./ExpansionToggleDirection";
-
-import { ExpansionPanelStyle } from "./styles";
-import { M3eExpansionHeaderElement } from "./ExpansionHeaderElement";
-
-/**
- * @summary
- * 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.
- */
-@customElement("m3e-expansion-panel")
-export class M3eExpansionPanelElement extends EventAttribute(
-  Disabled(AttachInternals(Role(LitElement, "none"), true)),
-  "opening",
-  "opened",
-  "closing",
-  "closed"
-) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = ExpansionPanelStyle;
-
-  /** @private */ private static __nextId = 0;
-  /** @private */ #id = M3eExpansionPanelElement.__nextId++;
-  /** @private */ #contentId = `m3e-expansion-panel-${this.#id}-content`;
-  /** @private */ #headerId = `m3e-expansion-panel-${this.#id}-header`;
-
-  /** @private */ @query("m3e-expansion-header") private readonly _header?: M3eExpansionHeaderElement;
-
-  /**
-   * Whether the panel is expanded.
-   * @default false
-   */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /**
-   * The direction of the expansion toggle.
-   * @default "vertical"
-   */
-  @property({ attribute: "toggle-direction", reflect: true }) toggleDirection: ExpansionToggleDirection = "vertical";
-
-  /**
-   * The position of the expansion toggle.
-   * @default "after"
-   */
-  @property({ attribute: "toggle-position", reflect: true }) togglePosition: ExpansionTogglePosition = "after";
-
-  /**
-   * Whether to hide the expansion toggle.
-   * @default false
-   */
-  @property({ attribute: "hide-toggle", type: Boolean, reflect: true }) hideToggle = false;
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html` <m3e-expansion-header
-        id="${this.#headerId}"
-        toggle-direction="${this.toggleDirection}"
-        toggle-position="${this.togglePosition}"
-        ?hide-toggle="${this.hideToggle}"
-        ?disabled="${this.disabled}"
-        aria-expanded="${this.open}"
-        aria-controls="${this.#contentId}"
-        @click="${this.#handleHeaderClick}"
-        @keydown="${this.#handleKeyDown}"
-      >
-        <div slot="toggle-icon" class="toggle">
-          <slot name="toggle-icon">${this.#renderToggleIcon()}</slot>
-        </div>
-        <slot name="header"></slot>
-      </m3e-expansion-header>
-      <m3e-collapsible
-        id="${this.#contentId}"
-        role="region"
-        aria-labelledby="${this.#headerId}"
-        aria-hidden="${!this.open}"
-        ?open="${this.open}"
-        @opening="${this.#handleCollapsibleEvent}"
-        @opened="${this.#handleCollapsibleEvent}"
-        @closing="${this.#handleCollapsibleEvent}"
-        @closed="${this.#handleCollapsibleEvent}"
-      >
-        <div class="content">
-          <slot></slot>
-        </div>
-        <slot name="actions"></slot>
-      </m3e-collapsible>`;
-  }
-
-  /** @private */
-  #renderToggleIcon(): unknown {
-    return this.toggleDirection === "vertical"
-      ? html`<svg viewBox="0 -960 960 960" fill="currentColor">
-          <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
-        </svg>`
-      : html`<svg viewBox="0 -960 960 960" fill="currentColor">
-          <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
-        </svg>`;
-  }
-
-  /** @private */
-  #handleHeaderClick() {
-    this.open = !this.open;
-  }
-
-  /** @private */
-  #handleKeyDown(e: KeyboardEvent): void {
-    switch (e.key) {
-      case "ArrowUp":
-        {
-          e.preventDefault();
-          const accordion = this.closest("m3e-accordion");
-          if (accordion) {
-            const panels = [...accordion.panels].reverse();
-            const index = panels.indexOf(this);
-            (
-              panels.find((x, i) => !x.disabled && i > index) ?? panels.find((x, i) => !x.disabled && i < index)
-            )?._header?.focus();
-          } else {
-            this.open = false;
-          }
-        }
-
-        break;
-
-      case "ArrowDown":
-        {
-          e.preventDefault();
-          const accordion = this.closest("m3e-accordion");
-          if (accordion) {
-            const index = accordion.panels.indexOf(this);
-            (
-              accordion.panels.find((x, i) => !x.disabled && i > index) ??
-              accordion.panels.find((x, i) => !x.disabled && i < index)
-            )?._header?.focus();
-          } else {
-            this.open = true;
-          }
-        }
-
-        break;
-    }
-  }
-
-  /** @private */
-  #handleCollapsibleEvent(e: Event): void {
-    e.stopPropagation();
-    this.dispatchEvent(new Event(e.type, { bubbles: true }));
-  }
-}
-
-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;
-  }
-}

package/src/ExpansionToggleDirection.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible directions of an expansion toggle. */
-export type ExpansionToggleDirection = "vertical" | "horizontal";

package/src/ExpansionTogglePosition.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible positions of an expansion toggle. */
-export type ExpansionTogglePosition = "before" | "after";

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./AccordionElement";
-export * from "./ExpansionHeaderElement";
-export * from "./ExpansionPanelElement";
-export * from "./ExpansionToggleDirection";
-export * from "./ExpansionTogglePosition";