@m3e/expansion-panel 1.0.0-rc.1

package/src/styles/ExpansionPanelStyle.ts

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,28 @@
+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

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

package/tsconfig.json

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