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

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": []
-}