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

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";

package/src/styles/ExpansionHeaderStyle.ts

@@ -1,85 +0,0 @@
-import { css, unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-import { ExpansionHeaderToken } from "./ExpansionHeaderToken";
-
-/**
- * Styles for `M3eExpansionHeaderElement`.
- * @internal
- */
-export const ExpansionHeaderStyle = css`
-  :host {
-    display: flex;
-    border-radius: inherit;
-    outline: none;
-    position: relative;
-    height: ${ExpansionHeaderToken.collapsedHeight};
-    padding-inline-start: ${ExpansionHeaderToken.paddingLeft};
-    padding-inline-end: ${ExpansionHeaderToken.paddingRight};
-    font-size: ${ExpansionHeaderToken.fontSize};
-    font-weight: ${ExpansionHeaderToken.fontWeight};
-    line-height: ${ExpansionHeaderToken.lineHeight};
-    letter-spacing: ${ExpansionHeaderToken.tracking};
-    transition: ${unsafeCSS(`height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)};
-
-    column-gap: ${ExpansionHeaderToken.spacing};
-  }
-  :host(:not(:disabled)) {
-    cursor: pointer;
-  }
-  :host([aria-expanded="true"]) {
-    height: ${ExpansionHeaderToken.expandedHeight};
-  }
-  :host(:not(:focus-visible)) .state-layer {
-    --m3e-state-layer-focus-color: transparent;
-  }
-  :host([aria-expanded="true"]) .state-layer {
-    --m3e-state-layer-hover-color: transparent;
-  }
-  :host([aria-expanded="true"]) [part="background"],
-  .content {
-    flex: 1 1 auto;
-    display: flex;
-    align-items: center;
-  }
-  .toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    font-size: ${ExpansionHeaderToken.toggleIconSize};
-    transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)};
-  }
-  :host([toggle-direction="vertical"][aria-expanded="true"]) .toggle {
-    transform: rotate(180deg);
-  }
-  :host([toggle-direction="horizontal"][aria-expanded="true"]) .toggle {
-    transform: rotate(90deg);
-  }
-  :host([toggle-position="before"]) .toggle {
-    margin-inline-start: calc(0px - ${ExpansionHeaderToken.spacing});
-  }
-  :host([toggle-position="after"]) .toggle {
-    margin-inline-end: calc(0px - ${ExpansionHeaderToken.spacing});
-  }
-  :host([hide-toggle]) .toggle {
-    display: none;
-  }
-  ::slotted([slot="toggle-icon"]) {
-    font-size: inherit !important;
-    flex: none;
-  }
-  ::slotted(svg[slot="toggle-icon"]) {
-    width: 1em;
-    height: 1em;
-  }
-  @media (prefers-reduced-motion) {
-    :host,
-    .toggle {
-      transition: none;
-    }
-  }
-`;

package/src/styles/ExpansionHeaderToken.ts

@@ -1,24 +0,0 @@
-import { unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-/**
- * Component design tokens for `M3eExpansionHeaderElement`.
- * @internal
- */
-export const ExpansionHeaderToken = {
-  collapsedHeight: unsafeCSS("var(--m3e-expansion-header-collapsed-height, 3rem)"),
-  expandedHeight: unsafeCSS("var(--m3e-expansion-header-expanded-height, 4rem)"),
-  paddingLeft: unsafeCSS("var(--m3e-expansion-header-padding-left, 1.5rem)"),
-  paddingRight: unsafeCSS("var(--m3e-expansion-header-padding-right, 1.5rem)"),
-  spacing: unsafeCSS("var(--m3e-expansion-header-spacing, 0.5rem)"),
-  toggleIconSize: unsafeCSS("var(--m3e-expansion-header-toggle-icon-size, 1.5rem)"),
-  fontSize: unsafeCSS(`var(--m3e-expansion-header-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),
-  fontWeight: unsafeCSS(
-    `var(--m3e-expansion-header-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`
-  ),
-  lineHeight: unsafeCSS(
-    `var(--m3e-expansion-header-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`
-  ),
-  tracking: unsafeCSS(`var(--m3e-expansion-header-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),
-} as const;

package/src/styles/ExpansionPanelStyle.ts

@@ -1,85 +0,0 @@
-import { css, unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-import { ExpansionPanelToken } from "./ExpansionPanelToken";
-import { ExpansionHeaderToken } from "./ExpansionHeaderToken";
-
-/**
- * Styles for `M3eExpansionPanelElement`.
- * @internal
- */
-export const ExpansionPanelStyle = css`
-  :host {
-    display: block;
-    background-color: ${ExpansionPanelToken.containerColor};
-    transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)};
-  }
-  :host(:not(:disabled)) {
-    color: ${ExpansionPanelToken.textColor};
-  }
-  :host(:disabled) {
-    color: color-mix(
-      in srgb,
-      ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity},
-      transparent
-    );
-  }
-  :host(:not([open])) {
-    box-shadow: ${ExpansionPanelToken.collapsedElevation};
-    border-radius: ${ExpansionPanelToken.collapsedShape};
-  }
-  :host([open]) {
-    box-shadow: ${ExpansionPanelToken.expandedElevation};
-    border-radius: ${ExpansionPanelToken.expandedShape};
-    margin-block: ${ExpansionPanelToken.expandedSpace};
-  }
-  .toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: ${ExpansionHeaderToken.toggleIconSize};
-  }
-  ::slotted([slot="toggle-icon"]) {
-    font-size: inherit !important;
-    flex: none;
-  }
-  .toggle svg,
-  ::slotted(svg[slot="toggle-icon"]) {
-    width: 1em;
-    height: 1em;
-  }
-  .content {
-    padding: ${ExpansionPanelToken.contentPadding};
-  }
-  ::slotted([slot="actions"]) {
-    flex: none;
-    display: flex;
-    align-items: center;
-    column-gap: ${ExpansionPanelToken.actionsSpacing};
-    padding: ${ExpansionPanelToken.actionsPadding};
-    border-top-style: solid;
-    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};
-    border-top-color: ${ExpansionPanelToken.actionsDividerColor};
-  }
-  ::slotted([slot="actions"][end]) {
-    justify-content: flex-end;
-  }
-  @media (prefers-reduced-motion) {
-    :host {
-      transition: none;
-    }
-  }
-  @media (forced-colors: active) {
-    :host {
-      border: 1px solid CanvasText;
-    }
-    :host(:disabled) {
-      color: GrayText;
-    }
-    ::slotted([slot="actions"]) {
-      border-top-color: GrayText;
-    }
-  }
-`;

package/src/styles/ExpansionPanelToken.ts

@@ -1,28 +0,0 @@
-import { unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-/**
- * Component design tokens for `M3eExpansionPanelElement`.
- * @internal
- */
-export const ExpansionPanelToken = {
-  textColor: unsafeCSS(`var(--m3e-expansion-panel-text-color, ${DesignToken.color.onSurface})`),
-  disabledTextColor: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-color, ${DesignToken.color.onSurface})`),
-  disabledTextOpacity: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-opacity, 38%)`),
-  containerColor: unsafeCSS("var(--m3e-expansion-panel-container-color)"),
-  collapsedElevation: unsafeCSS("var(--m3e-expansion-panel-elevation)"),
-  collapsedShape: unsafeCSS("var(--m3e-expansion-panel-shape)"),
-  expandedElevation: unsafeCSS("var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))"),
-  expandedShape: unsafeCSS("var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))"),
-  expandedSpace: unsafeCSS("var(--_expansion-panel-open-spacing)"),
-  contentPadding: unsafeCSS("var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)"),
-  actionsSpacing: unsafeCSS("var(--m3e-expansion-panel-actions-spacing, 0.5rem)"),
-  actionsPadding: unsafeCSS("var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)"),
-  actionsDividerThickness: unsafeCSS(
-    "var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))"
-  ),
-  actionsDividerColor: unsafeCSS(
-    `var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${DesignToken.color.outlineVariant}))`
-  ),
-} as const;

package/src/styles/index.ts

@@ -1,2 +0,0 @@
-export * from "./ExpansionHeaderStyle";
-export * from "./ExpansionPanelStyle";

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist/src"
-  },
-  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
-  "exclude": []
-}