@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/components-csr/md-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdBreadcrumbsCss","MdBreadcrumbs","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","expandLabel","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","density","expanded","itemCount","toggleExpanded","setExpanded","componentWillLoad","refreshItems","componentDidLoad","main","el","shadowRoot","querySelector","addEventListener","onCollapseConfigChange","items","collectItems","length","forEach","item","i","itemIndex","itemTotal","manualOverride","some","it","current","applyVisibility","result","children","child","tagName","push","collapsed","style","removeProperty","before","Math","max","after","fromStart","fromEnd","order","next","mdExpand","emit","expand","collapse","renderSeparator","key","h","class","part","render","showCollapseToggle","Host","role","type","onClick","viewBox","width","height","fill","cx","cy","r"],"sources":["src/components/md-breadcrumbs/md-breadcrumbs.css?tag=md-breadcrumbs&encapsulation=shadow","src/components/md-breadcrumbs/md-breadcrumbs.tsx"],"sourcesContent":["/* ==========================================================\n   md-breadcrumbs — AWC UI breadcrumb trail\n   MD3 Expressive Navigation: token-driven, RTL-ready, with a\n   staggered fade-and-slide entrance and a tonal overflow button\n   that gets the standard MD3 icon-button treatment.\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-breadcrumbs-gap              Gap between items / separators\n     --md-breadcrumbs-separator-color  Separator glyph colour\n     --md-breadcrumbs-text-color       Item label colour (resting)\n     --md-breadcrumbs-stagger          Per-item entrance delay\n\n   CSS PARTS:\n     list             The <ol> element.\n     separator        Every separator glyph slot.\n     overflow         The \"…\" collapse list item.\n     overflow-button  The button inside the overflow item.\n\n   SLOTS:\n     (default)        md-breadcrumb-item children\n\n   For a custom-glyph separator, set the `separator` prop to any\n   string (›, →, »…) or override `::part(separator)` from the\n   light DOM to render a background-image / pseudo-element SVG.\n   ========================================================== */\n\n:host {\n  --_gap: var(--md-breadcrumbs-gap, calc(8px + var(--md-sys-density-scale, 0) * 2px));\n  --_separator-color: var(--md-breadcrumbs-separator-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_text-color: var(--md-breadcrumbs-text-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_stagger: var(--md-breadcrumbs-stagger, 40ms);\n\n  /* MD3 motion tokens. */\n  --_in-duration: var(--md-sys-motion-spring-spatial-default-duration, 500ms);\n  --_in-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_state-duration: var(--md-sys-motion-spring-effects-default-duration, 200ms);\n  --_state-easing: var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));\n\n  display: block;\n  inline-size: 100%;\n  box-sizing: border-box;\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  color: var(--_text-color);\n}\n\n.md-breadcrumbs__list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 var(--_gap);\n}\n\n/* ==========================================================\n   1. STAGGERED ENTRANCE\n   Each visible item enters with a soft fade + horizontal slide.\n   We pre-bake delays for up to 12 items so the stagger reads\n   without any JS measurement. The animation is \"one-shot\": it\n   doesn't replay on re-render because Stencil reuses the slot\n   nodes.\n   ========================================================== */\n\n@keyframes md-breadcrumb-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n::slotted(md-breadcrumb-item) {\n  animation: md-breadcrumb-enter var(--_in-duration) var(--_in-easing) both;\n}\n\n/* Stagger first 12 items via nth-of-type. After that the\n   delay caps so the trail never feels slow. */\n::slotted(md-breadcrumb-item:nth-of-type(1))  { animation-delay: calc(var(--_stagger) * 0); }\n::slotted(md-breadcrumb-item:nth-of-type(2))  { animation-delay: calc(var(--_stagger) * 1); }\n::slotted(md-breadcrumb-item:nth-of-type(3))  { animation-delay: calc(var(--_stagger) * 2); }\n::slotted(md-breadcrumb-item:nth-of-type(4))  { animation-delay: calc(var(--_stagger) * 3); }\n::slotted(md-breadcrumb-item:nth-of-type(5))  { animation-delay: calc(var(--_stagger) * 4); }\n::slotted(md-breadcrumb-item:nth-of-type(6))  { animation-delay: calc(var(--_stagger) * 5); }\n::slotted(md-breadcrumb-item:nth-of-type(7))  { animation-delay: calc(var(--_stagger) * 6); }\n::slotted(md-breadcrumb-item:nth-of-type(8))  { animation-delay: calc(var(--_stagger) * 7); }\n::slotted(md-breadcrumb-item:nth-of-type(9))  { animation-delay: calc(var(--_stagger) * 8); }\n::slotted(md-breadcrumb-item:nth-of-type(10)) { animation-delay: calc(var(--_stagger) * 9); }\n::slotted(md-breadcrumb-item:nth-of-type(11)) { animation-delay: calc(var(--_stagger) * 10); }\n::slotted(md-breadcrumb-item:nth-of-type(12)) { animation-delay: calc(var(--_stagger) * 11); }\n\n/* RTL: slide in from the opposite side. */\n:host([dir=\"rtl\"]) {\n  /* re-define the keyframe via a class so we don't override\n     the global definition for LTR consumers. */\n}\n:host([dir=\"rtl\"]) ::slotted(md-breadcrumb-item),\n:host-context([dir=\"rtl\"]) ::slotted(md-breadcrumb-item) {\n  animation-name: md-breadcrumb-enter-rtl;\n}\n\n@keyframes md-breadcrumb-enter-rtl {\n  from {\n    opacity: 0;\n    transform: translateX(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n/* ==========================================================\n   2. OVERFLOW BUTTON\n   Standard MD3 icon-button. Spring scale on press.\n   ========================================================== */\n\n.md-breadcrumbs__overflow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-gap-xs, 4px);\n  /* Sit between the \"before\" group (order:0, default) and the\n     \"after\" group (order:2, set inline by the parent's\n     `applyVisibility`). The flex container's `gap` handles spacing\n     on either side, and the leading separator inside this <li>\n     plus the next \"after\" item's own leading separator complete\n     the visual \"Home / … / 3-Person\" pattern. */\n  order: 1;\n}\n\n.md-breadcrumbs__overflow-btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 32px;\n  block-size: 32px;\n  border: none;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: transparent;\n  color: var(--md-sys-color-on-surface-variant, #49454F);\n  cursor: pointer;\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    transform var(--_state-duration) var(--_state-easing);\n}\n\n.md-breadcrumbs__overflow-btn:hover {\n  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454F) 8%, transparent);\n}\n\n.md-breadcrumbs__overflow-btn:focus-visible {\n  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454F) 12%, transparent);\n  outline: 3px solid var(--md-sys-color-secondary, #625B71);\n  outline-offset: 2px;\n}\n\n.md-breadcrumbs__overflow-btn:active {\n  transform: scale(0.94);\n}\n\n/* ==========================================================\n   3. SEPARATOR\n   ========================================================== */\n\n.md-breadcrumbs__separator {\n  display: inline-flex;\n  align-items: center;\n  color: var(--_separator-color);\n  /* Matches md-breadcrumb-item's separator so the two never disagree. */\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  user-select: none;\n  pointer-events: none;\n}\n\n/* ── RTL: bidi-safe glyph handling ── */\n:host([dir=\"rtl\"]) .md-breadcrumbs__separator,\n:host-context([dir=\"rtl\"]) .md-breadcrumbs__separator {\n  unicode-bidi: plaintext;\n}\n\n/* ==========================================================\n   4. REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  ::slotted(md-breadcrumb-item) {\n    animation: none !important;\n  }\n  .md-breadcrumbs__overflow-btn {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   5. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-breadcrumbs__separator {\n    color: GrayText;\n  }\n  .md-breadcrumbs__overflow-btn {\n    border: 1px solid CanvasText;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n/**\n * Detail payload emitted by `md-breadcrumbs`'s `mdExpand` event when the\n * collapsed middle section is revealed (or, less commonly, re-collapsed\n * via the `collapse()` method).\n */\nexport interface MdBreadcrumbsExpandDetail {\n  /** New expanded state — `true` means the full trail is now visible. */\n  expanded: boolean;\n  /** Total number of crumbs in the trail. */\n  itemCount: number;\n}\n\n@Component({\n  tag: 'md-breadcrumbs',\n  styleUrl: 'md-breadcrumbs.css',\n  shadow: true,\n})\nexport class MdBreadcrumbs {\n  @Element() el!: HTMLElement;\n\n  /** Accessible name. Defaults to \"Breadcrumb\". */\n  @Prop() label: string = 'Breadcrumb';\n\n  /**\n   * Accessible name for the overflow (\"…\") toggle button. Surface this\n   * in your i18n layer so screen-reader users in non-English locales hear\n   * a localized announcement when collapsing is in effect.\n   */\n  @Prop({ attribute: 'expand-label' }) expandLabel: string = 'Show full breadcrumb trail';\n\n  /**\n   * Separator glyph placed between items. Use any single character\n   * or short string (e.g. `/`, `›`, `→`, `»`). For SVG / icon\n   * separators, override `::part(separator)` from the light DOM\n   * with a CSS `background-image` — see readme.\n   */\n  @Prop() separator: string = '/';\n\n  /**\n   * When the number of crumbs exceeds `maxItems`, the middle ones\n   * collapse behind an \"…\" toggle. Set to `0` to disable collapsing.\n   */\n  @Prop({ attribute: 'max-items' }) maxItems: number = 0;\n\n  /**\n   * How many items to ALWAYS show at the start of the trail when\n   * collapsed. Default 1.\n   */\n  @Prop({ attribute: 'items-before-collapse' }) itemsBeforeCollapse: number = 1;\n\n  /**\n   * How many items to ALWAYS show at the end of the trail when\n   * collapsed. Default 2.\n   */\n  @Prop({ attribute: 'items-after-collapse' }) itemsAfterCollapse: number = 2;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * Fires when the user reveals the full breadcrumb trail by activating\n   * the overflow (\"…\") toggle, or when consumers programmatically call\n   * `expand()` / `collapse()`. Not cancelable — the visibility change\n   * has already happened. Use it for analytics or to react to a user\n   * who wants to see the full path.\n   *\n   * Bubbles + composed, so consumers outside the shadow tree (the typical\n   * case) receive it.\n   */\n  @Event({ bubbles: true, composed: true })\n  mdExpand!: EventEmitter<MdBreadcrumbsExpandDetail>;\n\n  @State() private expanded: boolean = false;\n  @State() private itemCount = 0;\n\n  componentWillLoad() {\n    // Seed itemCount + collapsed/index/total props on items BEFORE the\n    // first render so we don't trigger Stencil's \"state changed during\n    // componentDidLoad\" warning. Light-DOM children are accessible at\n    // this lifecycle, only the shadowRoot is not.\n    this.refreshItems();\n  }\n\n  componentDidLoad() {\n    const main = this.el.shadowRoot?.querySelector(\n      'slot:not([name])',\n    ) as HTMLSlotElement | null;\n    main?.addEventListener('slotchange', () => this.refreshItems());\n  }\n\n  @Watch('maxItems')\n  @Watch('itemsBeforeCollapse')\n  @Watch('itemsAfterCollapse')\n  onCollapseConfigChange() {\n    this.refreshItems();\n  }\n\n  private refreshItems() {\n    const items = this.collectItems();\n    this.itemCount = items.length;\n    items.forEach((item, i) => {\n      item.itemIndex = i;\n      item.itemTotal = items.length;\n    });\n    // Auto-promote the last item to current unless a non-last item\n    // has been explicitly marked current by the consumer.\n    const manualOverride = items.some(\n      (it, i) => it.current && i !== items.length - 1,\n    );\n    if (!manualOverride && items.length > 0) {\n      items.forEach((it, i) => {\n        it.current = i === items.length - 1;\n      });\n    }\n    this.applyVisibility(items);\n  }\n\n  private collectItems(): HTMLMdBreadcrumbItemElement[] {\n    // Iterate direct children manually instead of using\n    // `:scope > md-breadcrumb-item` — the latter isn't supported by\n    // Stencil's mock-doc test environment, and the manual loop is\n    // also slightly cheaper at runtime.\n    const result: HTMLMdBreadcrumbItemElement[] = [];\n    const children = this.el.children;\n    for (let i = 0; i < children.length; i += 1) {\n      const child = children[i];\n      if (child.tagName === 'MD-BREADCRUMB-ITEM') {\n        result.push(child as HTMLMdBreadcrumbItemElement);\n      }\n    }\n    return result;\n  }\n\n  private applyVisibility(items: HTMLMdBreadcrumbItemElement[]) {\n    if (\n      this.expanded ||\n      this.maxItems <= 0 ||\n      items.length <= this.maxItems\n    ) {\n      // No collapsing — clear any previously-set CSS order so the\n      // items lay out in their natural DOM sequence.\n      items.forEach((it) => {\n        it.collapsed = false;\n        it.style.removeProperty('order');\n      });\n      return;\n    }\n    const before = Math.max(0, this.itemsBeforeCollapse);\n    const after = Math.max(1, this.itemsAfterCollapse);\n    items.forEach((it, i) => {\n      const fromStart = i < before;\n      const fromEnd = i >= items.length - after;\n      it.collapsed = !(fromStart || fromEnd);\n      // Position before-items at order:0 (default), after-items at\n      // order:2 so the overflow toggle (order:1, set in CSS) lands\n      // visually between them. Collapsed items use `display:none`\n      // so their order doesn't matter.\n      if (fromEnd) {\n        it.style.order = '2';\n      } else {\n        it.style.removeProperty('order');\n      }\n    });\n  }\n\n  private toggleExpanded = () => {\n    this.setExpanded(!this.expanded);\n  };\n\n  private setExpanded(next: boolean) {\n    if (this.expanded === next) return;\n    this.expanded = next;\n    this.applyVisibility(this.collectItems());\n    this.mdExpand.emit({ expanded: next, itemCount: this.itemCount });\n  }\n\n  /**\n   * Programmatically reveal the full breadcrumb trail. Has no effect when\n   * `maxItems` is `0` (collapsing disabled) or when the trail is already\n   * expanded. Emits `mdExpand` when the state changes.\n   */\n  @Method()\n  async expand(): Promise<void> {\n    this.setExpanded(true);\n  }\n\n  /**\n   * Programmatically re-collapse the trail to the configured\n   * before/after window. Has no effect when collapsing is disabled or\n   * when the trail is already collapsed. Emits `mdExpand` when the state\n   * changes.\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    this.setExpanded(false);\n  }\n\n  private renderSeparator(key: number) {\n    // Custom visuals can be supplied via `::part(separator)` styling\n    // (e.g. `content: ''` + `background-image`) — see readme. We don't\n    // expose a `<slot name=\"separator\">` because a single named slot\n    // can only project content into one shadow-tree position, and a\n    // breadcrumb trail needs visually-identical separators between\n    // every pair of items.\n    return (\n      <span\n        class=\"md-breadcrumbs__separator\"\n        part={`separator separator-${key}`}\n        aria-hidden=\"true\"\n      >\n        {this.separator}\n      </span>\n    );\n  }\n\n  render() {\n    const showCollapseToggle =\n      this.maxItems > 0 &&\n      this.itemCount > this.maxItems &&\n      !this.expanded;\n\n    return (\n      <Host class=\"md-breadcrumbs\" role=\"navigation\" aria-label={this.label}>\n        <ol class=\"md-breadcrumbs__list\" part=\"list\">\n          {/* Slot stays in flow; we visually insert separators around it\n              via `::slotted` and the data-attrs the parent maintains. */}\n          <slot></slot>\n          {showCollapseToggle && (\n            <li class=\"md-breadcrumbs__overflow\" part=\"overflow\">\n              {/* Render the leading separator only when there's an\n                  item to the LEFT of the overflow (i.e. a \"before\"\n                  item). When `items-before-collapse=0`, the overflow\n                  is the very first thing in the trail, so a leading\n                  separator would dangle. The trailing separator is\n                  intentionally NOT rendered here — the first \"after\"\n                  item already renders its own leading separator\n                  (because its `itemIndex > 0`), which serves as the\n                  separator between the overflow toggle and the\n                  resumed trail. */}\n              {Math.max(0, this.itemsBeforeCollapse) > 0\n                ? this.renderSeparator(-2)\n                : null}\n              <button\n                type=\"button\"\n                class=\"md-breadcrumbs__overflow-btn\"\n                part=\"overflow-button\"\n                aria-label={this.expandLabel}\n                aria-expanded={this.expanded ? 'true' : 'false'}\n                onClick={this.toggleExpanded}\n              >\n                <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\" aria-hidden=\"true\">\n                  <circle cx=\"6\" cy=\"12\" r=\"1.6\"/>\n                  <circle cx=\"12\" cy=\"12\" r=\"1.6\"/>\n                  <circle cx=\"18\" cy=\"12\" r=\"1.6\"/>\n                </svg>\n              </button>\n            </li>\n          )}\n        </ol>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-button-group.js

@@ -0,0 +1,2 @@
+import{p as t,H as o,c as n,h as e,d as s,t as r}from"./p-bSpXNc5J.js";const d=()=>`:host{--_gap:var(--md-button-group-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));--_width:var(--md-button-group-width, auto);--_min-width:var(--md-button-group-min-width, auto);--_max-width:var(--md-button-group-max-width, none);--_height:var(--md-button-group-height, auto);--_min-height:var(--md-button-group-min-height, auto);--_max-height:var(--md-button-group-max-height, none);display:inline-flex;align-items:stretch;flex-wrap:nowrap;box-sizing:border-box;vertical-align:middle;inline-size:var(--_width);min-inline-size:var(--_min-width);max-inline-size:var(--_max-width);block-size:var(--_height);min-block-size:var(--_min-height);max-block-size:var(--_max-height)}::slotted(md-button),::slotted(md-icon-button){flex-shrink:0;--md-button-min-height:var(--md-button-group-max-height, var(--md-button-group-_unset));max-block-size:var(--_max-height)}:host(.md-button-group--full-width){display:flex;--_width:100%}:host(.md-button-group--full-width) ::slotted(md-button),:host(.md-button-group--full-width) ::slotted(md-icon-button){flex:1 1 0}:host(.md-button-group--connected.md-button-group--xs) ::slotted(md-button),:host(.md-button-group--connected.md-button-group--xs) ::slotted(md-icon-button),:host(.md-button-group--connected.md-button-group--sm) ::slotted(md-button),:host(.md-button-group--connected.md-button-group--sm) ::slotted(md-icon-button){min-width:48px}:host(.md-button-group--connected.md-button-group--xs){--_c-inner:4px;--_c-sel:16px;--_c-press:2px}:host(.md-button-group--connected.md-button-group--sm){--_c-inner:8px;--_c-sel:20px;--_c-press:4px}:host(.md-button-group--connected.md-button-group--md){--_c-inner:8px;--_c-sel:24px;--_c-press:4px}:host(.md-button-group--connected.md-button-group--lg){--_c-inner:16px;--_c-sel:28px;--_c-press:8px}:host(.md-button-group--connected.md-button-group--xl){--_c-inner:20px;--_c-sel:48px;--_c-press:12px}:host(.md-button-group--connected.md-button-group--round.md-button-group--xs){--_c-outer-btn:16px}:host(.md-button-group--connected.md-button-group--round.md-button-group--sm){--_c-outer-btn:20px}:host(.md-button-group--connected.md-button-group--round.md-button-group--md){--_c-outer-btn:24px}:host(.md-button-group--connected.md-button-group--round.md-button-group--lg){--_c-outer-btn:28px}:host(.md-button-group--connected.md-button-group--round.md-button-group--xl){--_c-outer-btn:48px}:host(.md-button-group--connected.md-button-group--round.md-button-group--xs){--_c-outer-icon:16px}:host(.md-button-group--connected.md-button-group--round.md-button-group--sm){--_c-outer-icon:20px}:host(.md-button-group--connected.md-button-group--round.md-button-group--md){--_c-outer-icon:28px}:host(.md-button-group--connected.md-button-group--round.md-button-group--lg){--_c-outer-icon:48px}:host(.md-button-group--connected.md-button-group--round.md-button-group--xl){--_c-outer-icon:68px}:host(.md-button-group--connected.md-button-group--square){--_c-outer-btn:var(--_c-inner);--_c-outer-icon:var(--_c-inner)}:host(.md-button-group--connected) ::slotted(md-button[connected-right]:not([connected-left])){border-start-start-radius:var(--_c-outer-btn) !important;border-end-start-radius:var(--_c-outer-btn) !important;border-start-end-radius:var(--_c-inner) !important;border-end-end-radius:var(--_c-inner) !important}:host(.md-button-group--connected) ::slotted(md-icon-button[connected-right]:not([connected-left])){border-start-start-radius:var(--_c-outer-icon) !important;border-end-start-radius:var(--_c-outer-icon) !important;border-start-end-radius:var(--_c-inner) !important;border-end-end-radius:var(--_c-inner) !important}:host(.md-button-group--connected) ::slotted(md-button[connected-left]:not([connected-right])){border-start-start-radius:var(--_c-inner) !important;border-end-start-radius:var(--_c-inner) !important;border-start-end-radius:var(--_c-outer-btn) !important;border-end-end-radius:var(--_c-outer-btn) !important}:host(.md-button-group--connected) ::slotted(md-icon-button[connected-left]:not([connected-right])){border-start-start-radius:var(--_c-inner) !important;border-end-start-radius:var(--_c-inner) !important;border-start-end-radius:var(--_c-outer-icon) !important;border-end-end-radius:var(--_c-outer-icon) !important}:host(.md-button-group--connected) ::slotted([connected-left][connected-right]){border-radius:var(--_c-inner) !important}:host(.md-button-group--connected) ::slotted(md-button.md-button--selected[connected-right]:not([connected-left])),:host(.md-button-group--connected) ::slotted(md-button.md-button--selected[connected-left]:not([connected-right])),:host(.md-button-group--connected) ::slotted(md-button.md-button--selected[connected-left][connected-right]),:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--selected[connected-right]:not([connected-left])),:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--selected[connected-left]:not([connected-right])),:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--selected[connected-left][connected-right]){border-radius:var(--_c-sel) !important}:host(.md-button-group--connected) ::slotted(md-button.md-button--pressed[connected-right]:not([connected-left])),:host(.md-button-group--connected) ::slotted(md-button.md-button--pressed[connected-left]:not([connected-right])),:host(.md-button-group--connected) ::slotted(md-button.md-button--pressed[connected-left][connected-right]),:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--pressed[connected-right]:not([connected-left])),:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--pressed[connected-left]:not([connected-right])),:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--pressed[connected-left][connected-right]){border-radius:var(--_c-press) !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}@media (forced-colors: active){:host{forced-color-adjust:none}}:host(.md-button-group--xs){--_gap:var(--md-button-group-gap, max(10px, calc(18px + var(--md-sys-density-scale, 0) * 2px)))}:host(.md-button-group--sm){--_gap:var(--md-button-group-gap, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)))}:host(.md-button-group--connected){--_gap:var(--md-button-group-gap, 2px)}:host{gap:var(--_gap)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const i={xs:3,sm:4,md:5,lg:6,xl:8};const u=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdSelectionChange=n(this,"mdSelectionChange",7);this.variant="standard";this.size="sm";this.shape="round";this.selectionMode="single-select";this.required=false;this.fullWidth=false;this.density=0;this.motionAnimations=[];this.onGroupPointerDown=t=>{if(this.variant!=="standard")return;const o=t.target.closest("md-button, md-icon-button");if(o&&this.shouldMotion(o))this.runMotion(o)};this.onGroupKeyDown=t=>{if(this.variant!=="standard")return;if(t.key!=="Enter"&&t.key!==" ")return;const o=t.target.closest("md-button, md-icon-button");if(o&&this.shouldMotion(o))this.runMotion(o)};this.previousValues=[];this.onGroupClick=t=>{const o=t.target.closest?.("md-button, md-icon-button");if(!o)return;const n=this.getChildren();if(!n.includes(o))return;if(this.selectionMode==="single-select"){for(const t of n){if(t!==o)t.selected=false}}if(this.required){const t=n.some((t=>t.selected));if(!t){o.selected=true}}const e=this.collectSelectedValues(n);const s=new Set(this.previousValues);const r=new Set(e);const d=e.filter((t=>!s.has(t)));const i=this.previousValues.filter((t=>!r.has(t)));this.previousValues=e;this.activeChild=o;this.updateRovingTabindex();this.mdSelectionChange.emit({values:e,added:d,removed:i,originalEvent:t})};this.onArrowNav=t=>{const o=t.key;if(o!=="ArrowLeft"&&o!=="ArrowRight"&&o!=="Home"&&o!=="End")return;const n=this.getChildren().filter((t=>!t.disabled));if(n.length===0)return;const e=t.target.closest("md-button, md-icon-button");const s=e?n.indexOf(e):-1;const r=this.resolveDirection()==="rtl";let d=s;if(o==="Home"){d=0}else if(o==="End"){d=n.length-1}else{const t=o==="ArrowRight"!==r;const e=t?1:-1;d=s<0?t?0:n.length-1:(s+e+n.length)%n.length}const i=n[d];if(!i||i===e)return;t.preventDefault();this.activeChild=i;this.updateRovingTabindex();i.focus()};this.activeChild=null;this.onFocusIn=t=>{const o=t.target?.closest?.("md-button, md-icon-button");if(!o)return;if(o===this.activeChild)return;const n=this.getChildren();if(!n.includes(o))return;this.activeChild=o;this.updateRovingTabindex()}}onPropsChange(){this.syncChildren();this.updateRovingTabindex()}componentDidLoad(){this.observeSlot();this.syncChildren();this.updateRovingTabindex();this.el.addEventListener("click",this.onGroupClick);this.el.addEventListener("keydown",this.onArrowNav);this.el.addEventListener("focusin",this.onFocusIn);if(this.variant==="standard"){this.el.addEventListener("pointerdown",this.onGroupPointerDown);this.el.addEventListener("keydown",this.onGroupKeyDown,true)}}disconnectedCallback(){this.observer?.disconnect();this.el.removeEventListener("click",this.onGroupClick);this.el.removeEventListener("keydown",this.onArrowNav);this.el.removeEventListener("focusin",this.onFocusIn);this.el.removeEventListener("pointerdown",this.onGroupPointerDown);this.el.removeEventListener("keydown",this.onGroupKeyDown,true)}observeSlot(){if(typeof MutationObserver==="undefined")return;this.observer=new MutationObserver((()=>{this.syncChildren();this.updateRovingTabindex()}));this.observer.observe(this.el,{childList:true})}shouldMotion(t){if(!t.selected)return true;if(this.required)return false;return true}runMotion(t){const o=this.getChildren();const n=o.indexOf(t);if(n===-1)return;for(const t of this.motionAnimations){t.cancel()}this.motionAnimations=[];const e=i[this.size];const s=n>0;const r=n<o.length-1;const d=(s?1:0)+(r?1:0);if(d===0)return;const u=e/d;const c="cubic-bezier(0.2, 0, 0, 1)";const h=400;const a=150/h;for(let t=0;t<o.length;t++){const s=t===n;const r=t===n-1||t===n+1;if(!s&&!r)continue;const d=o[t];const i=s?e:-u;let m;if(d.tagName==="MD-BUTTON"){const t=getComputedStyle(d);const o=parseFloat(t.paddingLeft);const n=parseFloat(t.paddingRight);const e=`${Math.max(0,o+i)}px`;const s=`${Math.max(0,n+i)}px`;const r=`${o}px`;const u=`${n}px`;m=d.animate([{offset:0,paddingLeft:r,paddingRight:u,easing:c},{offset:a,paddingLeft:e,paddingRight:s,easing:c},{offset:1,paddingLeft:r,paddingRight:u}],{duration:h})}else{const t=parseFloat(getComputedStyle(d).width);const o=`${Math.max(0,t+i*2)}px`;const n=`${t}px`;m=d.animate([{offset:0,width:n,easing:c},{offset:a,width:o,easing:c},{offset:1,width:n}],{duration:h})}this.motionAnimations.push(m)}}collectSelectedValues(t){return t.filter((t=>t.selected)).map((t=>t.value||""))}componentWillLoad(){this.previousValues=this.collectSelectedValues(this.getChildren())}updateRovingTabindex(){const t=this.getChildren();if(t.length===0)return;let o=null;if(this.activeChild&&t.includes(this.activeChild)&&!this.activeChild.disabled){o=this.activeChild}if(!o&&this.selectionMode==="single-select"){o=t.find((t=>t.selected&&!t.disabled))||null}if(!o){o=t.find((t=>!t.disabled))||t[0]}this.activeChild=o;for(const n of t){n.groupTabindex=n===o?0:-1}}resolveDirection(){let t=this.el;while(t){const o=t.getAttribute?.("dir");if(o==="rtl"||o==="ltr")return o;t=t.parentElement}return"ltr"}getChildren(){return Array.from(this.el.querySelectorAll("md-button, md-icon-button"))}syncChildren(){const t=this.getChildren();const o=t.length;if(o===0)return;for(let n=0;n<o;n++){const e=t[n];e.toggle=true;e.shape=this.shape;e.size=this.size;if(this.variant==="connected"){e.connectedLeft=n>0;e.connectedRight=n<o-1}else{e.connectedLeft=false;e.connectedRight=false}}}render(){const t=this.selectionMode==="single-select";return e(s,{key:"afbb0014a97b31452f8a75ec35ea68c247851977",class:{"md-button-group":true,[`md-button-group--${this.variant}`]:true,[`md-button-group--${this.size}`]:true,[`md-button-group--${this.shape}`]:true,"md-button-group--full-width":this.fullWidth},role:t?"radiogroup":"group","aria-orientation":t?"horizontal":undefined},e("slot",{key:"26bc5eb1cbecfdf27571b4d929b22c47ca34f902"}))}get el(){return this}static get watchers(){return{variant:[{onPropsChange:0}],size:[{onPropsChange:0}],shape:[{onPropsChange:0}],selectionMode:[{onPropsChange:0}],required:[{onPropsChange:0}]}}static get style(){return d()}},[257,"md-button-group",{variant:[1],size:[1],shape:[1],selectionMode:[1,"selection-mode"],required:[4],fullWidth:[516,"full-width"],density:[514]},undefined,{variant:[{onPropsChange:0}],size:[{onPropsChange:0}],shape:[{onPropsChange:0}],selectionMode:[{onPropsChange:0}],required:[{onPropsChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["md-button-group"];t.forEach((t=>{switch(t){case"md-button-group":if(!customElements.get(r(t))){customElements.define(r(t),u)}break}}))}c();const h=u;const a=c;export{h as MdButtonGroup,a as defineCustomElement};
+//# sourceMappingURL=md-button-group.js.map

package/dist/components-csr/md-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdButtonGroupCss","EXPAND_PX","xs","sm","md","lg","xl","MdButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","shape","selectionMode","required","fullWidth","density","motionAnimations","onGroupPointerDown","e","target","closest","shouldMotion","runMotion","onGroupKeyDown","key","previousValues","onGroupClick","children","getChildren","includes","child","selected","anySelected","some","c","nextValues","collectSelectedValues","previousSet","Set","nextSet","added","filter","v","has","removed","activeChild","updateRovingTabindex","mdSelectionChange","emit","values","originalEvent","onArrowNav","disabled","length","active","currentIndex","indexOf","isRtl","resolveDirection","nextIndex","forward","delta","next","preventDefault","focus","onFocusIn","onPropsChange","syncChildren","componentDidLoad","observeSlot","el","addEventListener","disconnectedCallback","observer","disconnect","removeEventListener","MutationObserver","observe","childList","index","anim","cancel","hasLeft","hasRight","neighborCount","neighborDelta","ease","totalMs","peakOffset","i","isActive","isNeighbor","tagName","cs","getComputedStyle","pl","parseFloat","paddingLeft","pr","paddingRight","peakL","Math","max","peakR","baseL","baseR","animate","offset","easing","duration","w","width","peakW","baseW","push","map","value","componentWillLoad","find","groupTabindex","node","dir","getAttribute","parentElement","Array","from","querySelectorAll","total","toggle","connectedLeft","connectedRight","render","useRadioGroup","h","Host","class","role","undefined"],"sources":["src/components/md-button-group/md-button-group.css?tag=md-button-group&encapsulation=shadow","src/components/md-button-group/md-button-group.tsx"],"sourcesContent":["/* ==========================================================\n   md-button-group — Material Design 3 Button Group\n   Spec: https://m3.material.io/components/button-groups/specs\n\n   Two variants:\n     standard  — separate buttons with size-dependent gap\n     connected — fused buttons with 2px gap and shared shape\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-button-group-gap         Override default gap\n     --md-button-group-width       Explicit inline-size (defaults to auto)\n     --md-button-group-min-width   Minimum inline-size\n     --md-button-group-max-width   Maximum inline-size\n     --md-button-group-height      Explicit block-size (defaults to auto)\n     --md-button-group-min-height  Minimum block-size\n     --md-button-group-max-height  Maximum block-size\n\n   ATTRIBUTES:\n     full-width                    Stretch group to 100% and split children\n                                   equally (flex: 1 1 0)\n\n   ========================================================== */\n\n:host {\n  /* Gap between buttons. Previously computed in TSX and written as an INLINE\n     style, which meant density could not reach it (it stayed 12px while the\n     buttons shrank 40 -> 24) and the documented --md-button-group-gap override\n     never applied, since an inline style outranks any rule. Now in CSS, so both\n     work. Each size halves across the density range, matching the taper the\n     buttons themselves use. */\n  --_gap: var(--md-button-group-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  --_width: var(--md-button-group-width, auto);\n  --_min-width: var(--md-button-group-min-width, auto);\n  --_max-width: var(--md-button-group-max-width, none);\n  --_height: var(--md-button-group-height, auto);\n  --_min-height: var(--md-button-group-min-height, auto);\n  --_max-height: var(--md-button-group-max-height, none);\n\n  display: inline-flex;\n  align-items: stretch;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  vertical-align: middle;\n\n  inline-size: var(--_width);\n  min-inline-size: var(--_min-width);\n  max-inline-size: var(--_max-width);\n  block-size: var(--_height);\n  min-block-size: var(--_min-height);\n  max-block-size: var(--_max-height);\n}\n\n/* Ensure slotted children don't shrink below their min-width.\n   `align-items: stretch` on the host (above) handles the cross-axis:\n   when the group has an explicit `--md-button-group-height`, every\n   child grows to fill it; when it doesn't, the group sizes to the\n   tallest child and stretch keeps every child the same height. */\n::slotted(md-button),\n::slotted(md-icon-button) {\n  flex-shrink: 0;\n  /* Make --md-button-group-max-height actually bind. The group already sets\n     max-block-size on itself, but each child carries its own min-block-size\n     from its size tier, and per CSS min-height beats max-height — so the buttons\n     pushed straight through the ceiling and out of the group (an lg group capped\n     at 40px still rendered 96px buttons).\n\n     Capping the child's min-height is the only thing that works, but it must\n     apply ONLY when a ceiling is set. The inner `var(--md-button-group-_unset)`\n     is deliberately a property nobody defines: with no ceiling the substitution\n     fails, --md-button-min-height computes to guaranteed-invalid, and\n     md-button's own `var(--md-button-min-height, <tier height>)` falls back to\n     its natural height. With a ceiling, the child's floor becomes that ceiling.\n     That keeps the tier heights defined in exactly one place — md-button — with\n     no copy here to go stale. */\n  --md-button-min-height: var(--md-button-group-max-height, var(--md-button-group-_unset));\n  max-block-size: var(--_max-height);\n}\n\n/* ==========================================================\n   FULL-WIDTH — group spans 100%, children split it evenly\n   ========================================================== */\n:host(.md-button-group--full-width) {\n  display: flex;\n  --_width: 100%;\n}\n\n:host(.md-button-group--full-width) ::slotted(md-button),\n:host(.md-button-group--full-width) ::slotted(md-icon-button) {\n  /* Equal share of the inline axis. The intrinsic min-content of each\n     button (or the connected-XS/SM 48px touch-target floor) stays in\n     effect, so very narrow containers overflow rather than producing\n     undersized tap targets. */\n  flex: 1 1 0;\n}\n\n/* ==========================================================\n   CONNECTED — minimum 48px target area for XS / SM\n   ========================================================== */\n:host(.md-button-group--connected.md-button-group--xs) ::slotted(md-button),\n:host(.md-button-group--connected.md-button-group--xs) ::slotted(md-icon-button),\n:host(.md-button-group--connected.md-button-group--sm) ::slotted(md-button),\n:host(.md-button-group--connected.md-button-group--sm) ::slotted(md-icon-button) {\n  min-width: 48px;\n}\n\n/* ==========================================================\n   CONNECTED — per-corner border-radius\n   ::slotted() !important beats :host() rules inside the\n   child shadow DOM (outer-context important > inner-context).\n\n   Outer radius must be the exact pill value (height/2) per size\n   and per component type — NOT 9999px — because CSS clamps all\n   corner radii proportionally when adjacent radii exceed the\n   element's dimensions.\n   ========================================================== */\n\n/* ── Tokens ────────────────────────────────────────────── */\n\n/* Inner-corner resting (spec: XS 4, SM 8, MD 8, LG 16, XL 20) */\n/* Selected = pill value (height/2) so button morphs to fully rounded */\n:host(.md-button-group--connected.md-button-group--xs) { --_c-inner: 4px; --_c-sel: 16px; --_c-press: 2px;  }\n:host(.md-button-group--connected.md-button-group--sm) { --_c-inner: 8px; --_c-sel: 20px; --_c-press: 4px;  }\n:host(.md-button-group--connected.md-button-group--md) { --_c-inner: 8px; --_c-sel: 24px; --_c-press: 4px;  }\n:host(.md-button-group--connected.md-button-group--lg) { --_c-inner: 16px; --_c-sel: 28px; --_c-press: 8px; }\n:host(.md-button-group--connected.md-button-group--xl) { --_c-inner: 20px; --_c-sel: 48px; --_c-press: 12px; }\n\n/* Outer pill radius — md-button (height/2, stays fixed during morph) */\n:host(.md-button-group--connected.md-button-group--round.md-button-group--xs) { --_c-outer-btn: 16px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--sm) { --_c-outer-btn: 20px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--md) { --_c-outer-btn: 24px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--lg) { --_c-outer-btn: 28px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--xl) { --_c-outer-btn: 48px; }\n\n/* Outer pill radius — md-icon-button (height/2) */\n:host(.md-button-group--connected.md-button-group--round.md-button-group--xs) { --_c-outer-icon: 16px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--sm) { --_c-outer-icon: 20px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--md) { --_c-outer-icon: 28px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--lg) { --_c-outer-icon: 48px; }\n:host(.md-button-group--connected.md-button-group--round.md-button-group--xl) { --_c-outer-icon: 68px; }\n\n/* Square: outer = inner (tracks state because each state uses its own inner var) */\n:host(.md-button-group--connected.md-button-group--square) { --_c-outer-btn: var(--_c-inner); --_c-outer-icon: var(--_c-inner); }\n\n/* ── Resting ───────────────────────────────────────────── */\n\n/* `connected-left` / `connected-right` reflect *DOM-order* siblings, not\n   physical sides — the group sets `connected-right` whenever a child has\n   a next-sibling (i.e. an inline-end neighbor) and `connected-left` when\n   it has a previous-sibling (an inline-start neighbor). The corner radii\n   below must therefore use *logical* properties so they flip with\n   `dir=\"rtl\"` and the outer pill always lands on the free outer edge. */\n\n/* First DOM child (only inline-end neighbor): outer corners on inline-start, inner on inline-end. */\n:host(.md-button-group--connected) ::slotted(md-button[connected-right]:not([connected-left])) {\n  border-start-start-radius: var(--_c-outer-btn) !important;\n  border-end-start-radius: var(--_c-outer-btn) !important;\n  border-start-end-radius: var(--_c-inner) !important;\n  border-end-end-radius: var(--_c-inner) !important;\n}\n:host(.md-button-group--connected) ::slotted(md-icon-button[connected-right]:not([connected-left])) {\n  border-start-start-radius: var(--_c-outer-icon) !important;\n  border-end-start-radius: var(--_c-outer-icon) !important;\n  border-start-end-radius: var(--_c-inner) !important;\n  border-end-end-radius: var(--_c-inner) !important;\n}\n/* Last DOM child (only inline-start neighbor): inner corners on inline-start, outer on inline-end. */\n:host(.md-button-group--connected) ::slotted(md-button[connected-left]:not([connected-right])) {\n  border-start-start-radius: var(--_c-inner) !important;\n  border-end-start-radius: var(--_c-inner) !important;\n  border-start-end-radius: var(--_c-outer-btn) !important;\n  border-end-end-radius: var(--_c-outer-btn) !important;\n}\n:host(.md-button-group--connected) ::slotted(md-icon-button[connected-left]:not([connected-right])) {\n  border-start-start-radius: var(--_c-inner) !important;\n  border-end-start-radius: var(--_c-inner) !important;\n  border-start-end-radius: var(--_c-outer-icon) !important;\n  border-end-end-radius: var(--_c-outer-icon) !important;\n}\n/* Middle children (both neighbors): all corners inner — direction-agnostic. */\n:host(.md-button-group--connected) ::slotted([connected-left][connected-right]) {\n  border-radius: var(--_c-inner) !important;\n}\n\n/* ── Selected — all corners morph to rounded ──────────── */\n\n:host(.md-button-group--connected) ::slotted(md-button.md-button--selected[connected-right]:not([connected-left])),\n:host(.md-button-group--connected) ::slotted(md-button.md-button--selected[connected-left]:not([connected-right])),\n:host(.md-button-group--connected) ::slotted(md-button.md-button--selected[connected-left][connected-right]),\n:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--selected[connected-right]:not([connected-left])),\n:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--selected[connected-left]:not([connected-right])),\n:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--selected[connected-left][connected-right]) {\n  border-radius: var(--_c-sel) !important;\n}\n\n/* ── Pressed — all corners morph to more square ──────── */\n\n:host(.md-button-group--connected) ::slotted(md-button.md-button--pressed[connected-right]:not([connected-left])),\n:host(.md-button-group--connected) ::slotted(md-button.md-button--pressed[connected-left]:not([connected-right])),\n:host(.md-button-group--connected) ::slotted(md-button.md-button--pressed[connected-left][connected-right]),\n:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--pressed[connected-right]:not([connected-left])),\n:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--pressed[connected-left]:not([connected-right])),\n:host(.md-button-group--connected) ::slotted(md-icon-button.md-icon-button--pressed[connected-left][connected-right]) {\n  border-radius: var(--_c-press) !important;\n}\n\n/* ==========================================================\n   REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   FORCED COLORS — Windows High Contrast\n   ========================================================== */\n@media (forced-colors: active) {\n  :host {\n    forced-color-adjust: none;\n  }\n}\n\n/* ── Gap per size (standard) and the connected hairline ── */\n:host(.md-button-group--xs) {\n  --_gap: var(--md-button-group-gap, max(10px, calc(18px + var(--md-sys-density-scale, 0) * 2px)));\n}\n\n:host(.md-button-group--sm) {\n  --_gap: var(--md-button-group-gap, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)));\n}\n\n/* md / lg / xl all sit on the 8px default declared on :host. */\n\n/* Connected buttons are FUSED — the 2px is a seam, not spacing, so it does not\n   taper; shrinking it would close the join and blur the shared shape. */\n:host(.md-button-group--connected) {\n  --_gap: var(--md-button-group-gap, 2px);\n}\n\n:host {\n  gap: var(--_gap);\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { ToggleableElement } from '../../utils/types';\n\n/**\n * Pixel delta per side for the active button in standard mode.\n * Neighbors absorb the same total so the group width stays constant.\n */\nconst EXPAND_PX: Record<string, number> = {\n  xs: 3, sm: 4, md: 5, lg: 6, xl: 8,\n};\n\n/**\n * Detail payload emitted by `md-button-group`'s `mdSelectionChange` event\n * when the set of selected child buttons changes due to a user activation.\n *\n * The detail is a structured object so consumers can react to the\n * specific delta (which value was just added or removed) instead of\n * diffing the previous selection themselves.\n */\nexport interface MdButtonGroupChangeDetail {\n  /** Snapshot of every selected `value` after this change. */\n  values: string[];\n  /** Values newly added by this change (usually 0 or 1 entries). */\n  added: string[];\n  /** Values newly removed by this change (usually 0 or 1 entries). */\n  removed: string[];\n  /** The original click event that triggered the change. */\n  originalEvent: MouseEvent;\n}\n\n@Component({\n  tag: 'md-button-group',\n  styleUrl: 'md-button-group.css',\n  shadow: true,\n})\nexport class MdButtonGroup {\n  @Element() el!: HTMLElement;\n\n  /** Standard groups add padding between buttons; connected groups fuse them together */\n  @Prop() variant: 'standard' | 'connected' = 'standard';\n\n  /** Button size — controls gap (standard) and inner corner radii (connected) */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Default shape applied to all child buttons */\n  @Prop() shape: 'round' | 'square' = 'round';\n\n  /** Selection mode */\n  @Prop() selectionMode: 'single-select' | 'multi-select' = 'single-select';\n\n  /** When true, at least one button must remain selected */\n  @Prop() required: boolean = false;\n\n  /**\n   * When `true` the group stretches to 100% of its container's inline-size\n   * and its children share that space equally (`flex: 1 1 0`). Combine with\n   * the `--md-button-group-width` / `--md-button-group-max-width` CSS custom\n   * properties for fine-grained control over the final size.\n   */\n  @Prop({ reflect: true, attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * Fires every time a user activation toggles the selection state of\n   * a child button. The detail object describes both the new selection\n   * snapshot (`values`) and the diff from the previous selection\n   * (`added`, `removed`), plus the underlying `originalEvent`.\n   *\n   * Distinct from each child button's own `mdChange` (which fires per\n   * individual button toggle); the group's `mdSelectionChange` fires\n   * once per user activation and reports the *group-level* state.\n   *\n   * Bubbles and is composed so listeners outside the shadow tree\n   * receive it.\n   *\n   * @example\n   * ```ts\n   * group.addEventListener('mdSelectionChange', (e: CustomEvent<MdButtonGroupChangeDetail>) => {\n   *   console.log('now selected:', e.detail.values);\n   *   console.log('just added:', e.detail.added);\n   *   console.log('just removed:', e.detail.removed);\n   * });\n   * ```\n   */\n  @Event({ bubbles: true, composed: true })\n  mdSelectionChange!: EventEmitter<MdButtonGroupChangeDetail>;\n\n  private motionAnimations: Animation[] = [];\n\n  @Watch('variant')\n  @Watch('size')\n  @Watch('shape')\n  @Watch('selectionMode')\n  @Watch('required')\n  onPropsChange() {\n    this.syncChildren();\n    this.updateRovingTabindex();\n  }\n\n  componentDidLoad() {\n    this.observeSlot();\n    this.syncChildren();\n    this.updateRovingTabindex();\n    this.el.addEventListener('click', this.onGroupClick);\n    this.el.addEventListener('keydown', this.onArrowNav);\n    this.el.addEventListener('focusin', this.onFocusIn);\n    if (this.variant === 'standard') {\n      this.el.addEventListener('pointerdown', this.onGroupPointerDown);\n      this.el.addEventListener('keydown', this.onGroupKeyDown, true);\n    }\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.el.removeEventListener('click', this.onGroupClick);\n    this.el.removeEventListener('keydown', this.onArrowNav);\n    this.el.removeEventListener('focusin', this.onFocusIn);\n    this.el.removeEventListener('pointerdown', this.onGroupPointerDown);\n    this.el.removeEventListener('keydown', this.onGroupKeyDown, true);\n  }\n\n  private observer?: MutationObserver;\n\n  private observeSlot() {\n    if (typeof MutationObserver === 'undefined') return;\n    this.observer = new MutationObserver(() => {\n      this.syncChildren();\n      this.updateRovingTabindex();\n    });\n    this.observer.observe(this.el, { childList: true });\n  }\n\n  // ── Standard variant: press motion via Web Animations API ──\n\n  private shouldMotion(target: HTMLElement): boolean {\n    if (!(target as ToggleableElement).selected) return true;\n    if (this.required) return false;\n    return true;\n  }\n\n  private onGroupPointerDown = (e: PointerEvent) => {\n    if (this.variant !== 'standard') return;\n    const target = (e.target as HTMLElement).closest('md-button, md-icon-button') as HTMLElement | null;\n    if (target && this.shouldMotion(target)) this.runMotion(target);\n  };\n\n  private onGroupKeyDown = (e: KeyboardEvent) => {\n    if (this.variant !== 'standard') return;\n    if (e.key !== 'Enter' && e.key !== ' ') return;\n    const target = (e.target as HTMLElement).closest('md-button, md-icon-button') as HTMLElement | null;\n    if (target && this.shouldMotion(target)) this.runMotion(target);\n  };\n\n  private runMotion(target: HTMLElement) {\n    const children = this.getChildren();\n    const index = children.indexOf(target);\n    if (index === -1) return;\n\n    for (const anim of this.motionAnimations) {\n      anim.cancel();\n    }\n    this.motionAnimations = [];\n\n    const active = EXPAND_PX[this.size];\n\n    const hasLeft = index > 0;\n    const hasRight = index < children.length - 1;\n    const neighborCount = (hasLeft ? 1 : 0) + (hasRight ? 1 : 0);\n    if (neighborCount === 0) return;\n\n    const neighborDelta = active / neighborCount;\n\n    // Same easing as md-icon-button shape morph press/release,\n    // using easing-standard for both to keep it crisp (no overshoot).\n    const ease = 'cubic-bezier(0.2, 0, 0, 1)';\n    const totalMs = 400;\n    const peakOffset = 150 / totalMs;\n\n    for (let i = 0; i < children.length; i++) {\n      const isActive = i === index;\n      const isNeighbor = i === index - 1 || i === index + 1;\n      if (!isActive && !isNeighbor) continue;\n\n      const child = children[i];\n      const delta = isActive ? active : -neighborDelta;\n\n      let anim: Animation;\n\n      if (child.tagName === 'MD-BUTTON') {\n        const cs = getComputedStyle(child);\n        const pl = parseFloat(cs.paddingLeft);\n        const pr = parseFloat(cs.paddingRight);\n        const peakL = `${Math.max(0, pl + delta)}px`;\n        const peakR = `${Math.max(0, pr + delta)}px`;\n        const baseL = `${pl}px`;\n        const baseR = `${pr}px`;\n\n        anim = child.animate(\n          [\n            { offset: 0,          paddingLeft: baseL, paddingRight: baseR, easing: ease },\n            { offset: peakOffset,  paddingLeft: peakL, paddingRight: peakR, easing: ease },\n            { offset: 1,          paddingLeft: baseL, paddingRight: baseR },\n          ],\n          { duration: totalMs },\n        );\n      } else {\n        const w = parseFloat(getComputedStyle(child).width);\n        const peakW = `${Math.max(0, w + delta * 2)}px`;\n        const baseW = `${w}px`;\n\n        anim = child.animate(\n          [\n            { offset: 0,          width: baseW, easing: ease },\n            { offset: peakOffset,  width: peakW, easing: ease },\n            { offset: 1,          width: baseW },\n          ],\n          { duration: totalMs },\n        );\n      }\n\n      this.motionAnimations.push(anim);\n    }\n  }\n\n  // ── Selection ──────────────────────────────────────────\n\n  /** Snapshot of the previous selection used to compute change diffs. */\n  private previousValues: string[] = [];\n\n  private collectSelectedValues(children: HTMLElement[]): string[] {\n    return children\n      .filter(c => (c as ToggleableElement).selected)\n      .map(c => (c as ToggleableElement).value || '');\n  }\n\n  componentWillLoad() {\n    // Seed the previous values so the first emitted diff is meaningful.\n    this.previousValues = this.collectSelectedValues(this.getChildren());\n  }\n\n  private onGroupClick = (e: MouseEvent) => {\n    const target = (e.target as HTMLElement).closest?.('md-button, md-icon-button') as HTMLElement | null;\n    if (!target) return;\n\n    const children = this.getChildren();\n    if (!children.includes(target)) return;\n\n    // The child already toggled its own selected state via its onClick.\n    if (this.selectionMode === 'single-select') {\n      for (const child of children) {\n        if (child !== target) (child as ToggleableElement).selected = false;\n      }\n    }\n\n    // Enforce required: if nothing is selected, re-select the clicked button.\n    if (this.required) {\n      const anySelected = children.some(c => (c as ToggleableElement).selected);\n      if (!anySelected) {\n        (target as ToggleableElement).selected = true;\n      }\n    }\n\n    const nextValues = this.collectSelectedValues(children);\n    const previousSet = new Set(this.previousValues);\n    const nextSet = new Set(nextValues);\n    const added = nextValues.filter(v => !previousSet.has(v));\n    const removed = this.previousValues.filter(v => !nextSet.has(v));\n\n    this.previousValues = nextValues;\n\n    // Selection change in single-select mode promotes the clicked button to\n    // the active roving-tabindex child so Tab returns here next time.\n    this.activeChild = target;\n    this.updateRovingTabindex();\n\n    this.mdSelectionChange.emit({\n      values: nextValues,\n      added,\n      removed,\n      originalEvent: e,\n    });\n  };\n\n  // ── Roving keyboard navigation (radiogroup / toolbar pattern) ──\n\n  /**\n   * ArrowLeft/Right move focus between buttons in the group; Home/End jump\n   * to the first/last. In RTL, Left/Right semantics swap so focus follows\n   * the visual flow. Disabled buttons are skipped.\n   */\n  private onArrowNav = (e: KeyboardEvent) => {\n    const key = e.key;\n    if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End') return;\n\n    const children = this.getChildren().filter(c => !(c as any).disabled);\n    if (children.length === 0) return;\n\n    const active = (e.target as HTMLElement).closest('md-button, md-icon-button') as HTMLElement | null;\n    const currentIndex = active ? children.indexOf(active) : -1;\n    const isRtl = this.resolveDirection() === 'rtl';\n\n    let nextIndex = currentIndex;\n    if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = children.length - 1;\n    } else {\n      const forward = (key === 'ArrowRight') !== isRtl;\n      const delta = forward ? 1 : -1;\n      nextIndex = currentIndex < 0\n        ? (forward ? 0 : children.length - 1)\n        : (currentIndex + delta + children.length) % children.length;\n    }\n\n    const next = children[nextIndex];\n    if (!next || next === active) return;\n\n    e.preventDefault();\n    this.activeChild = next;\n    this.updateRovingTabindex();\n    (next as HTMLElement).focus();\n  };\n\n  // ── Roving tabindex (one-stop Tab into the group) ──────\n\n  /**\n   * Tracks which child currently owns the group's single tab stop.\n   * Updated by focusin (user interaction), arrow-key navigation,\n   * and click-driven selection changes.\n   */\n  private activeChild: HTMLElement | null = null;\n\n  private onFocusIn = (e: FocusEvent) => {\n    const target = (e.target as HTMLElement)?.closest?.('md-button, md-icon-button') as HTMLElement | null;\n    if (!target) return;\n    if (target === this.activeChild) return;\n    const children = this.getChildren();\n    if (!children.includes(target)) return;\n    this.activeChild = target;\n    this.updateRovingTabindex();\n  };\n\n  /**\n   * Picks one child as the group's tab stop and sets `groupTabindex` on\n   * each: `0` for the active child, `-1` for the rest. Active child is:\n   *   1. the most recently focused/clicked child (if still in the group), or\n   *   2. the selected child in single-select mode, or\n   *   3. the first non-disabled child.\n   * Falls back to the first child if everything is disabled.\n   */\n  private updateRovingTabindex() {\n    const children = this.getChildren();\n    if (children.length === 0) return;\n\n    let active: HTMLElement | null = null;\n\n    if (this.activeChild && children.includes(this.activeChild) && !(this.activeChild as any).disabled) {\n      active = this.activeChild;\n    }\n\n    if (!active && this.selectionMode === 'single-select') {\n      active = children.find(c => (c as ToggleableElement).selected && !(c as any).disabled) || null;\n    }\n\n    if (!active) {\n      active = children.find(c => !(c as any).disabled) || children[0];\n    }\n\n    this.activeChild = active;\n\n    for (const child of children) {\n      (child as any).groupTabindex = child === active ? 0 : -1;\n    }\n  }\n\n  private resolveDirection(): 'ltr' | 'rtl' {\n    let node: HTMLElement | null = this.el;\n    while (node) {\n      const dir = node.getAttribute?.('dir');\n      if (dir === 'rtl' || dir === 'ltr') return dir;\n      node = node.parentElement;\n    }\n    return 'ltr';\n  }\n\n  // ── Child syncing ──────────────────────────────────────\n\n  private getChildren(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll('md-button, md-icon-button'));\n  }\n\n  private syncChildren() {\n    const children = this.getChildren();\n    const total = children.length;\n    if (total === 0) return;\n\n    for (let i = 0; i < total; i++) {\n      const child = children[i] as ToggleableElement;\n\n      child.toggle = true;\n      child.shape = this.shape;\n      child.size = this.size;\n\n      if (this.variant === 'connected') {\n        child.connectedLeft = i > 0;\n        child.connectedRight = i < total - 1;\n      } else {\n        child.connectedLeft = false;\n        child.connectedRight = false;\n      }\n    }\n  }\n\n  render() {\n    const useRadioGroup = this.selectionMode === 'single-select';\n\n    return (\n      <Host\n        class={{\n          'md-button-group': true,\n          [`md-button-group--${this.variant}`]: true,\n          [`md-button-group--${this.size}`]: true,\n          [`md-button-group--${this.shape}`]: true,\n          'md-button-group--full-width': this.fullWidth,\n        }}\n        role={useRadioGroup ? 'radiogroup' : 'group'}\n        // `aria-orientation` is only permitted on roles that support it.\n        // `radiogroup` does; the generic `group` role does not (axe\n        // `aria-allowed-attr`), so omit it in multi-select mode.\n        aria-orientation={useRadioGroup ? 'horizontal' : undefined}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-button.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p--OUYjgKN.js";const t=o;const p=s;export{t as MdButton,p as defineCustomElement};
+//# sourceMappingURL=md-button.js.map

package/dist/components-csr/md-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components-csr/md-card.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as a,h as r,d as i,t as d}from"./p-bSpXNc5J.js";import{t as s}from"./p-DYBUr7K_.js";import{d as o}from"./p-Hm3X1iai.js";const n=()=>`:host{--_container-color:var(--md-card-container-color, var(--md-sys-color-surface-container-low));--_container-shape:var(--md-card-container-shape, var(--md-sys-shape-corner-medium, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px))));--_container-elevation:var(--md-card-container-elevation, var(--md-sys-elevation-1));--_outline-color:var(--md-card-outline-color, var(--md-sys-color-outline-variant));--_outline-width:var(--md-card-outline-width, 1px);--_state-layer-color:var(--md-card-state-layer-color, var(--md-sys-color-on-surface));--_width:var(--md-card-width, auto);--_min-width:var(--md-card-min-width, auto);--_max-width:var(--md-card-max-width, none);--_height:var(--md-card-height, auto);--_min-height:var(--md-card-min-height, auto);--_max-height:var(--md-card-max-height, none);--_padding:var(--md-card-padding, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));--_gap:var(--md-card-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));display:flex;flex-direction:column;position:relative;box-sizing:border-box;overflow:hidden;padding:var(--_padding);gap:var(--_gap);inline-size:var(--_width);min-inline-size:var(--_min-width);max-inline-size:var(--_max-width);block-size:var(--_height);min-block-size:var(--_min-height);max-block-size:var(--_max-height);background-color:var(--_container-color);border-radius:var(--_container-shape);box-shadow:var(--_container-elevation);color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-medium-font-weight, 400);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);transition:box-shadow var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     background-color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-card--full-width){--_width:100%}:host(.md-card--full-height){--_height:100%}:host(.md-card--elevated){--_container-color:var(--md-card-container-color, var(--md-sys-color-surface-container-low));--_container-elevation:var(--md-card-container-elevation, var(--md-sys-elevation-1))}:host(.md-card--filled){--_container-color:var(--md-card-container-color, var(--md-sys-color-surface-container-highest));--_container-elevation:var(--md-card-container-elevation, var(--md-sys-elevation-0, none))}:host(.md-card--outlined){--_container-color:var(--md-card-container-color, var(--md-sys-color-surface));--_container-elevation:var(--md-card-container-elevation, var(--md-sys-elevation-0, none))}.md-card__outline{position:absolute;inset:0;border-radius:inherit;border:var(--_outline-width) solid var(--_outline-color);pointer-events:none}:host(.md-card--interactive){cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host(.md-card--draggable){cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}:host(.md-card--interactive.md-card--draggable){cursor:grab}:host(.md-card--dragged){cursor:grabbing}.md-card__state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;transition:opacity var(--md-sys-motion-duration-short1, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));pointer-events:none;z-index:1}:host(.md-card--interactive:hover) .md-card__state-layer,:host(.md-card--draggable:hover) .md-card__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(.md-card--interactive:focus-visible) .md-card__state-layer,:host(.md-card--draggable:focus-visible) .md-card__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}:host(.md-card--interactive:active) .md-card__state-layer,:host(.md-card--draggable:active) .md-card__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(.md-card--dragged) .md-card__state-layer{opacity:var(--md-sys-state-dragged-state-layer-opacity, 0.16)}:host(.md-card--elevated.md-card--interactive:hover),:host(.md-card--elevated.md-card--draggable:hover){--_container-elevation:var(--md-sys-elevation-2)}:host(.md-card--elevated.md-card--interactive:focus-visible),:host(.md-card--elevated.md-card--draggable:focus-visible){--_container-elevation:var(--md-sys-elevation-1)}:host(.md-card--elevated.md-card--interactive:active),:host(.md-card--elevated.md-card--draggable:active){--_container-elevation:var(--md-sys-elevation-1)}:host(.md-card--elevated.md-card--dragged){--_container-elevation:var(--md-sys-elevation-4)}:host(.md-card--filled.md-card--interactive:hover),:host(.md-card--filled.md-card--draggable:hover){--_container-elevation:var(--md-sys-elevation-1)}:host(.md-card--filled.md-card--interactive:focus-visible),:host(.md-card--filled.md-card--draggable:focus-visible){--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-card--filled.md-card--interactive:active),:host(.md-card--filled.md-card--draggable:active){--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-card--filled.md-card--dragged){--_container-elevation:var(--md-sys-elevation-3)}:host(.md-card--outlined.md-card--interactive:hover),:host(.md-card--outlined.md-card--draggable:hover){--_container-elevation:var(--md-sys-elevation-1)}:host(.md-card--outlined.md-card--interactive:focus-visible),:host(.md-card--outlined.md-card--draggable:focus-visible){--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-card--outlined.md-card--interactive:active),:host(.md-card--outlined.md-card--draggable:active){--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-card--outlined.md-card--dragged){--_container-elevation:var(--md-sys-elevation-3)}:host(.md-card--outlined.md-card--interactive:focus-visible) .md-card__outline,:host(.md-card--outlined.md-card--draggable:focus-visible) .md-card__outline{border-color:var(--md-sys-color-on-surface)}:host(.md-card--outlined.md-card--dragged) .md-card__outline{border-color:var(--md-sys-color-outline-variant)}:host(.md-card--interactive:focus-visible){outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}:host(.md-card--disabled){cursor:default;pointer-events:none;--_container-elevation:var(--md-sys-elevation-0, none) !important;--_container-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent)}:host(.md-card--disabled.md-card--outlined) .md-card__outline{border-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent)}:host(.md-card--disabled:hover) .md-card__state-layer,:host(.md-card--disabled:active) .md-card__state-layer,:host(.md-card--disabled:focus-visible) .md-card__state-layer{opacity:0}:host([soft-disabled]){cursor:default;pointer-events:auto;--_container-elevation:var(--md-sys-elevation-0, none) !important;--_container-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent)}:host([soft-disabled]) .md-card__state-layer{display:none}@media (prefers-reduced-motion: reduce){:host{transition:none}.md-card__state-layer{transition:none}}@media (forced-colors: active){:host{border:1px solid ButtonText;background-color:ButtonFace;color:ButtonText;forced-color-adjust:none}.md-card__outline{border-color:ButtonText}:host(.md-card--interactive:focus-visible){outline-color:Highlight}:host(.md-card--disabled){border-color:GrayText;color:GrayText;opacity:1}:host(.md-card--disabled) .md-card__outline{border-color:GrayText}.md-card__state-layer{display:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const c=e(class e extends t{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdClick=a(this,"mdClick",7);this.mdDragStart=a(this,"mdDragStart",7);this.mdDragMove=a(this,"mdDragMove",7);this.mdDragEnd=a(this,"mdDragEnd",7);this.variant="elevated";this.interactive=false;this.dragEnabled=false;this.disabled=false;this.softDisabled=false;this.ripple=true;this.fullWidth=false;this.fullHeight=false;this.density=0;this.dragging=false;this.hasInteractiveContent=false;this.startX=0;this.startY=0;this.dragStarted=false;this.suppressClick=false;this.contentObserver=null;this.onPointerDown=e=>{if(!this.dragEnabled||this.isDisabled||e.button!==0)return;this.startX=e.clientX;this.startY=e.clientY;this.dragStarted=false;this.el.setPointerCapture(e.pointerId);this.el.addEventListener("pointermove",this.onPointerMove);this.el.addEventListener("pointerup",this.onPointerUp);this.el.addEventListener("pointercancel",this.onPointerUp)};this.onPointerMove=t=>{const a=t.clientX-this.startX;const r=t.clientY-this.startY;if(!this.dragStarted){if(Math.abs(a)+Math.abs(r)<e.DRAG_THRESHOLD)return;this.dragStarted=true;this.dragging=true;this.el.style.zIndex="1000";this.mdDragStart.emit(this.buildDetail(t))}this.el.style.transform=`translate(${a}px, ${r}px)`;this.mdDragMove.emit(this.buildDetail(t))};this.onPointerUp=e=>{if(this.dragStarted){this.suppressClick=true;requestAnimationFrame((()=>{this.suppressClick=false}));this.mdDragEnd.emit(this.buildDetail(e))}this.resetDragVisuals();this.cleanupListeners()};this.handleClick=e=>{if(!this.interactive)return;if(this.suppressClick)return;if(this.isDisabled){e.preventDefault();return}this.mdClick.emit(e)};this.handleKeyDown=e=>{if(!this.interactive||this.isDisabled)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();s(this.el);this.el.click()}};this.detectInteractiveContent=()=>{const t=this.el.querySelectorAll(e.INTERACTIVE_CONTENT_SELECTOR).length>0;if(t!==this.hasInteractiveContent)this.hasInteractiveContent=t}}get isDisabled(){return this.disabled||this.softDisabled}connectedCallback(){this.el.addEventListener("pointerdown",this.onPointerDown)}componentWillLoad(){this.detectInteractiveContent()}componentDidLoad(){this.detectInteractiveContent();if(typeof MutationObserver!=="undefined"){this.contentObserver=new MutationObserver(this.detectInteractiveContent);this.contentObserver.observe(this.el,{childList:true,subtree:true})}}disconnectedCallback(){this.el.removeEventListener("pointerdown",this.onPointerDown);this.contentObserver?.disconnect();this.contentObserver=null;this.cancelDrag()}onDragEnabledChange(){if(!this.dragEnabled)this.cancelDrag()}buildDetail(e){return{clientX:e.clientX,clientY:e.clientY,offsetX:e.clientX-this.startX,offsetY:e.clientY-this.startY,startX:this.startX,startY:this.startY}}cancelDrag(){this.resetDragVisuals();this.cleanupListeners()}resetDragVisuals(){this.dragging=false;this.dragStarted=false;this.el.style.transform="";this.el.style.zIndex=""}cleanupListeners(){this.el.removeEventListener("pointermove",this.onPointerMove);this.el.removeEventListener("pointerup",this.onPointerUp);this.el.removeEventListener("pointercancel",this.onPointerUp)}render(){const e=this.isDisabled;const t=this.interactive&&!this.hasInteractiveContent;return r(i,{key:"bf9c73e3e7d290f2ef69cd392bdf2aaf214e3503",class:{"md-card":true,[`md-card--${this.variant}`]:true,"md-card--interactive":this.interactive,"md-card--draggable":this.dragEnabled,"md-card--disabled":this.interactive&&e,"md-card--dragged":this.dragging,"md-card--full-width":this.fullWidth,"md-card--full-height":this.fullHeight},role:t?"button":undefined,"aria-disabled":t&&e?"true":undefined,"aria-grabbed":this.dragEnabled?this.dragging?"true":"false":undefined,tabindex:t?this.disabled?"-1":"0":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},(this.interactive||this.dragEnabled)&&this.ripple&&r("md-ripple",{key:"73e11fe7916addea8967bb051bd8e5297f38502c",disabled:e}),(this.interactive||this.dragEnabled)&&r("span",{key:"af10e462142ac1fd5c492ac804f2721e21b24d8e",class:"md-card__state-layer",part:"state-layer","aria-hidden":"true"}),this.variant==="outlined"&&r("span",{key:"84d50d287ba601f79f15f0222a0b3b3a3c613ab8",class:"md-card__outline",part:"outline","aria-hidden":"true"}),r("slot",{key:"978ceb875d90c734bcdf5dd948e7c27140f4fff3",onSlotchange:this.detectInteractiveContent}))}get el(){return this}static get watchers(){return{dragEnabled:[{onDragEnabledChange:0}]}}static get style(){return n()}},[257,"md-card",{variant:[1],interactive:[516],dragEnabled:[516,"drag-enabled"],disabled:[516],softDisabled:[516,"soft-disabled"],ripple:[4],fullWidth:[516,"full-width"],fullHeight:[516,"full-height"],density:[514],dragging:[32],hasInteractiveContent:[32]},undefined,{dragEnabled:[{onDragEnabledChange:0}]}]);c.DRAG_THRESHOLD=5;c.INTERACTIVE_CONTENT_SELECTOR=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","audio[controls]","video[controls]","iframe",'[contenteditable="true"]','[contenteditable=""]','[role="button"]','[role="link"]','[role="checkbox"]','[role="radio"]','[role="switch"]','[role="tab"]','[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]','[role="option"]','[role="slider"]','[role="spinbutton"]','[role="textbox"]','[role="combobox"]','[role="searchbox"]',"md-button","md-icon-button","md-fab","md-checkbox","md-switch","md-radio","md-chip","md-select","md-multi-select","md-text-field","md-slider","md-segmented-button","md-menu-button","md-link","md-autocomplete"].join(",");function l(){if(typeof customElements==="undefined"){return}const e=["md-card","md-ripple"];e.forEach((e=>{switch(e){case"md-card":if(!customElements.get(d(e))){customElements.define(d(e),c)}break;case"md-ripple":if(!customElements.get(d(e))){o()}break}}))}l();const m=c;const h=l;export{m as MdCard,h as defineCustomElement};
+//# sourceMappingURL=md-card.js.map

package/dist/components-csr/md-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdCardCss","MdCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","interactive","dragEnabled","disabled","softDisabled","ripple","fullWidth","fullHeight","density","dragging","hasInteractiveContent","startX","startY","dragStarted","suppressClick","contentObserver","onPointerDown","e","isDisabled","button","clientX","clientY","el","setPointerCapture","pointerId","addEventListener","onPointerMove","onPointerUp","dx","dy","Math","abs","DRAG_THRESHOLD","style","zIndex","mdDragStart","emit","buildDetail","transform","mdDragMove","requestAnimationFrame","mdDragEnd","resetDragVisuals","cleanupListeners","handleClick","preventDefault","mdClick","handleKeyDown","key","triggerRipple","click","detectInteractiveContent","found","querySelectorAll","INTERACTIVE_CONTENT_SELECTOR","length","connectedCallback","componentWillLoad","componentDidLoad","MutationObserver","observe","childList","subtree","disconnectedCallback","removeEventListener","disconnect","cancelDrag","onDragEnabledChange","offsetX","offsetY","render","isEffectivelyDisabled","actsAsButton","h","Host","class","role","undefined","tabindex","onClick","onKeyDown","part","onSlotchange","join"],"sources":["src/components/md-card/md-card.css?tag=md-card&encapsulation=shadow","src/components/md-card/md-card.tsx"],"sourcesContent":["/* ==========================================================\n   md-card — Material Design 3 Card\n   Spec: https://m3.material.io/components/cards/specs\n\n   Three variants:\n     elevated  — surface-container-low + elevation 1\n     filled    — surface-container-highest + no elevation\n     outlined  — surface + outline-variant border + no elevation\n\n   Measurements (MD3 spec):\n     Shape:               12px corner radius (shape-corner-medium)\n     Left/right padding:  16px (applied to default slot via consumer)\n     Padding between:     8px max (layout concern of consumer)\n     Label text:          start-aligned\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-card-container-color       Container background\n     --md-card-container-shape       Border-radius override\n     --md-card-container-elevation   Box-shadow override\n     --md-card-outline-color         Outline color (outlined variant)\n     --md-card-outline-width         Outline width (outlined variant)\n     --md-card-state-layer-color     State layer color override\n     --md-card-width                 Explicit inline-size (default: auto)\n     --md-card-min-width             Minimum inline-size\n     --md-card-max-width             Maximum inline-size\n     --md-card-height                Explicit block-size (default: auto)\n     --md-card-min-height            Minimum block-size\n     --md-card-max-height            Maximum block-size\n\n   ATTRIBUTES:\n     full-width    Stretch the card to 100% of its container's inline-size\n     full-height   Stretch the card to 100% of its container's block-size\n\n   CSS PARTS:\n     state-layer   Hover/press overlay (interactive only)\n     outline       Border element (outlined variant only)\n\n   SLOTS:\n     (default)     Card content (images, text, actions, other components)\n   ========================================================== */\n\n:host {\n  --_container-color: var(--md-card-container-color, var(--md-sys-color-surface-container-low));\n  --_container-shape: var(--md-card-container-shape, var(--md-sys-shape-corner-medium, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px))));\n  --_container-elevation: var(--md-card-container-elevation, var(--md-sys-elevation-1));\n  --_outline-color: var(--md-card-outline-color, var(--md-sys-color-outline-variant));\n  --_outline-width: var(--md-card-outline-width, 1px);\n  --_state-layer-color: var(--md-card-state-layer-color, var(--md-sys-color-on-surface));\n\n  --_width: var(--md-card-width, auto);\n  --_min-width: var(--md-card-min-width, auto);\n  --_max-width: var(--md-card-max-width, none);\n  --_height: var(--md-card-height, auto);\n  --_min-height: var(--md-card-min-height, auto);\n  --_max-height: var(--md-card-max-height, none);\n\n  --_padding: var(--md-card-padding, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));\n  --_gap: var(--md-card-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: var(--_padding);\n  gap: var(--_gap);\n\n  inline-size: var(--_width);\n  min-inline-size: var(--_min-width);\n  max-inline-size: var(--_max-width);\n  block-size: var(--_height);\n  min-block-size: var(--_min-height);\n  max-block-size: var(--_max-height);\n\n  background-color: var(--_container-color);\n  border-radius: var(--_container-shape);\n  box-shadow: var(--_container-elevation);\n  color: var(--md-sys-color-on-surface);\n\n  /* MD3 body-medium typescale — set on :host so it inherits through to\n     slotted content (which lives in light DOM and only inherits from the\n     host element, not from shadow-DOM rules). Without this, slotted\n     headings / paragraphs fall back to the user-agent font (typically\n     Times) instead of the Roboto-based MD3 typescale.\n     NOTE: never use `--md-sys-typescale-*-font` for `font-family` — that\n     token is the `font` shorthand (e.g. `400 14px/20px Roboto, sans-serif`)\n     and is invalid for `font-family`, which silently kills the rule. */\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n\n  transition:\n    box-shadow var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    background-color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* ==========================================================\n   FULL-WIDTH / FULL-HEIGHT attributes\n   `100%` only resolves when the parent has a definite size on\n   that axis, so consumers must place the card inside a flex /\n   grid item or a sized block container. Combined with the\n   `--md-card-max-{width,height}` tokens this gives a fluid\n   \"fill but cap\" pattern useful in dashboards and grids.\n   ========================================================== */\n\n:host(.md-card--full-width) {\n  --_width: 100%;\n}\n\n:host(.md-card--full-height) {\n  --_height: 100%;\n}\n\n/* ==========================================================\n   1. VARIANTS\n   ========================================================== */\n\n/* Elevated (default) */\n:host(.md-card--elevated) {\n  --_container-color: var(--md-card-container-color, var(--md-sys-color-surface-container-low));\n  --_container-elevation: var(--md-card-container-elevation, var(--md-sys-elevation-1));\n}\n\n/* Filled */\n:host(.md-card--filled) {\n  --_container-color: var(--md-card-container-color, var(--md-sys-color-surface-container-highest));\n  --_container-elevation: var(--md-card-container-elevation, var(--md-sys-elevation-0, none));\n}\n\n/* Outlined */\n:host(.md-card--outlined) {\n  --_container-color: var(--md-card-container-color, var(--md-sys-color-surface));\n  --_container-elevation: var(--md-card-container-elevation, var(--md-sys-elevation-0, none));\n}\n\n/* ==========================================================\n   2. OUTLINE (outlined variant only)\n   ========================================================== */\n\n.md-card__outline {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: var(--_outline-width) solid var(--_outline-color);\n  pointer-events: none;\n}\n\n/* ==========================================================\n   3. INTERACTIVE & DRAGGABLE STATES\n   Interactive cards behave like buttons with state layers.\n   Draggable cards support native HTML drag-and-drop with\n   the dragged state layer and elevation changes.\n   ========================================================== */\n\n:host(.md-card--interactive) {\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n:host(.md-card--draggable) {\n  cursor: grab;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n}\n\n:host(.md-card--interactive.md-card--draggable) {\n  cursor: grab;\n}\n\n:host(.md-card--dragged) {\n  cursor: grabbing;\n}\n\n/* --- State layer --- */\n\n.md-card__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short1, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n  z-index: 1;\n}\n\n:host(.md-card--interactive:hover) .md-card__state-layer,\n:host(.md-card--draggable:hover) .md-card__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n:host(.md-card--interactive:focus-visible) .md-card__state-layer,\n:host(.md-card--draggable:focus-visible) .md-card__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n\n:host(.md-card--interactive:active) .md-card__state-layer,\n:host(.md-card--draggable:active) .md-card__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n:host(.md-card--dragged) .md-card__state-layer {\n  opacity: var(--md-sys-state-dragged-state-layer-opacity, 0.16);\n}\n\n/* --- Elevation changes for elevated cards (interactive / draggable) --- */\n\n:host(.md-card--elevated.md-card--interactive:hover),\n:host(.md-card--elevated.md-card--draggable:hover) {\n  --_container-elevation: var(--md-sys-elevation-2);\n}\n\n:host(.md-card--elevated.md-card--interactive:focus-visible),\n:host(.md-card--elevated.md-card--draggable:focus-visible) {\n  --_container-elevation: var(--md-sys-elevation-1);\n}\n\n:host(.md-card--elevated.md-card--interactive:active),\n:host(.md-card--elevated.md-card--draggable:active) {\n  --_container-elevation: var(--md-sys-elevation-1);\n}\n\n:host(.md-card--elevated.md-card--dragged) {\n  --_container-elevation: var(--md-sys-elevation-4);\n}\n\n/* --- Elevation changes for filled cards (interactive / draggable) --- */\n\n:host(.md-card--filled.md-card--interactive:hover),\n:host(.md-card--filled.md-card--draggable:hover) {\n  --_container-elevation: var(--md-sys-elevation-1);\n}\n\n:host(.md-card--filled.md-card--interactive:focus-visible),\n:host(.md-card--filled.md-card--draggable:focus-visible) {\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n:host(.md-card--filled.md-card--interactive:active),\n:host(.md-card--filled.md-card--draggable:active) {\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n:host(.md-card--filled.md-card--dragged) {\n  --_container-elevation: var(--md-sys-elevation-3);\n}\n\n/* --- Elevation changes for outlined cards (interactive / draggable) --- */\n\n:host(.md-card--outlined.md-card--interactive:hover),\n:host(.md-card--outlined.md-card--draggable:hover) {\n  --_container-elevation: var(--md-sys-elevation-1);\n}\n\n:host(.md-card--outlined.md-card--interactive:focus-visible),\n:host(.md-card--outlined.md-card--draggable:focus-visible) {\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n:host(.md-card--outlined.md-card--interactive:active),\n:host(.md-card--outlined.md-card--draggable:active) {\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n:host(.md-card--outlined.md-card--dragged) {\n  --_container-elevation: var(--md-sys-elevation-3);\n}\n\n/* --- Outline state for outlined cards (interactive / draggable) --- */\n\n:host(.md-card--outlined.md-card--interactive:focus-visible) .md-card__outline,\n:host(.md-card--outlined.md-card--draggable:focus-visible) .md-card__outline {\n  border-color: var(--md-sys-color-on-surface);\n}\n\n:host(.md-card--outlined.md-card--dragged) .md-card__outline {\n  border-color: var(--md-sys-color-outline-variant);\n}\n\n/* ==========================================================\n   4. FOCUS RING (interactive only)\n   ========================================================== */\n\n:host(.md-card--interactive:focus-visible) {\n  outline: 3px solid var(--md-sys-color-secondary);\n  outline-offset: 2px;\n}\n\n/* ==========================================================\n   5. DISABLED (interactive only)\n   ========================================================== */\n\n:host(.md-card--disabled) {\n  cursor: default;\n  pointer-events: none;\n  --_container-elevation: var(--md-sys-elevation-0, none) !important;\n  --_container-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-card--disabled.md-card--outlined) .md-card__outline {\n  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n:host(.md-card--disabled:hover) .md-card__state-layer,\n:host(.md-card--disabled:active) .md-card__state-layer,\n:host(.md-card--disabled:focus-visible) .md-card__state-layer {\n  opacity: 0;\n}\n\n/* Soft-disabled: disabled visuals but remains focusable */\n:host([soft-disabled]) {\n  cursor: default;\n  pointer-events: auto;\n  --_container-elevation: var(--md-sys-elevation-0, none) !important;\n  --_container-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host([soft-disabled]) .md-card__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   6. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .md-card__state-layer {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   7. FORCED COLORS — Windows High Contrast\n   ========================================================== */\n\n@media (forced-colors: active) {\n  :host {\n    border: 1px solid ButtonText;\n    background-color: ButtonFace;\n    color: ButtonText;\n    forced-color-adjust: none;\n  }\n\n  .md-card__outline {\n    border-color: ButtonText;\n  }\n\n  :host(.md-card--interactive:focus-visible) {\n    outline-color: Highlight;\n  }\n\n  :host(.md-card--disabled) {\n    border-color: GrayText;\n    color: GrayText;\n    opacity: 1;\n  }\n\n  :host(.md-card--disabled) .md-card__outline {\n    border-color: GrayText;\n  }\n\n  .md-card__state-layer {\n    display: none;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch } from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\n\nexport interface MdCardDragDetail {\n  /** Pointer X in viewport coordinates */\n  clientX: number;\n  /** Pointer Y in viewport coordinates */\n  clientY: number;\n  /** Horizontal distance from the drag start point */\n  offsetX: number;\n  /** Vertical distance from the drag start point */\n  offsetY: number;\n  /** X where the drag gesture began */\n  startX: number;\n  /** Y where the drag gesture began */\n  startY: number;\n}\n\n@Component({ tag: 'md-card', styleUrl: 'md-card.css', shadow: true })\nexport class MdCard {\n  @Element() el!: HTMLElement;\n\n  /** Visual style variant */\n  @Prop() variant: 'elevated' | 'filled' | 'outlined' = 'elevated';\n\n  /**\n   * Makes the card interactive (clickable, with ripple and state layers).\n   *\n   * When the card's own content has no focusable controls the host exposes\n   * `role=\"button\"` + `tabindex` and is keyboard-activatable. If the content\n   * *does* include its own focusable controls (buttons, links, form fields,\n   * interactive `md-*` components) the host does not claim `role=\"button\"` —\n   * that would be a `nested-interactive` a11y violation — and instead stays a\n   * plain container that is still mouse-clickable (emits `mdClick`) while the\n   * inner controls remain the keyboard tab stops.\n   */\n  @Prop({ reflect: true }) interactive: boolean = false;\n\n  /** Enables pointer-event-based drag on the card */\n  @Prop({ reflect: true, attribute: 'drag-enabled' }) dragEnabled: boolean = false;\n\n  /** Disables the card — only meaningful when interactive */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Soft-disabled: disabled visuals but remains focusable — only meaningful when interactive */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Whether the ripple effect is enabled when interactive */\n  @Prop() ripple: boolean = true;\n\n  /**\n   * When `true` the card stretches to 100% of its container's inline-size.\n   * Pair with the `--md-card-max-width` custom property to cap the fluid\n   * width (useful inside dashboards and responsive grids).\n   */\n  @Prop({ reflect: true, attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * When `true` the card stretches to 100% of its container's block-size.\n   * The parent must have a definite block-size (e.g. a fixed height row in\n   * a CSS grid, or a flex item with `align-items: stretch`) for `100%` to\n   * resolve.\n   */\n  @Prop({ reflect: true, attribute: 'full-height' }) fullHeight: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Emits when an interactive card is clicked or activated via keyboard */\n  @Event() mdClick: EventEmitter<MouseEvent>;\n\n  /** Emits once when a draggable card starts being dragged (after crossing the movement threshold) */\n  @Event() mdDragStart: EventEmitter<MdCardDragDetail>;\n\n  /** Emits continuously as a dragged card moves — use for drop-zone detection or position tracking */\n  @Event() mdDragMove: EventEmitter<MdCardDragDetail>;\n\n  /** Emits when a draggable card is released after dragging */\n  @Event() mdDragEnd: EventEmitter<MdCardDragDetail>;\n\n  @State() private dragging = false;\n\n  /**\n   * True when the default slot contains its own focusable/interactive\n   * descendants (buttons, links, form controls, or interactive `md-*`\n   * components).\n   *\n   * An interactive card that wraps such controls must NOT expose itself as a\n   * single `role=\"button\"`: a `button` has \"children presentational\" per\n   * WAI-ARIA, so nesting focusable content inside it is a `nested-interactive`\n   * violation and hides the inner controls from assistive tech. In that case\n   * the host degrades to a plain (still mouse-clickable) container and the\n   * inner controls remain the real tab stops — mirroring the `md-list-item`\n   * rule of keeping a container role \"rather than masquerading as a button\".\n   */\n  @State() private hasInteractiveContent = false;\n\n  private startX = 0;\n  private startY = 0;\n  private dragStarted = false;\n  private suppressClick = false;\n  private contentObserver: MutationObserver | null = null;\n\n  private static readonly DRAG_THRESHOLD = 5;\n\n  /**\n   * Widget-role focusables whose presence makes the host stop masquerading as\n   * a button. Covers the descendants axe's `nested-interactive` rule counts\n   * (native controls + explicit interactive ARIA roles), plus the library's\n   * own interactive components — those project their real focusable control\n   * into a shadow root, so a light-DOM native-focusable scan cannot see them\n   * and they must be matched by tag name.\n   */\n  private static readonly INTERACTIVE_CONTENT_SELECTOR = [\n    'a[href]', 'area[href]',\n    'button:not([disabled])',\n    'input:not([disabled]):not([type=\"hidden\"])',\n    'select:not([disabled])', 'textarea:not([disabled])',\n    'audio[controls]', 'video[controls]', 'iframe',\n    '[contenteditable=\"true\"]', '[contenteditable=\"\"]',\n    '[role=\"button\"]', '[role=\"link\"]', '[role=\"checkbox\"]', '[role=\"radio\"]',\n    '[role=\"switch\"]', '[role=\"tab\"]', '[role=\"menuitem\"]',\n    '[role=\"menuitemcheckbox\"]', '[role=\"menuitemradio\"]', '[role=\"option\"]',\n    '[role=\"slider\"]', '[role=\"spinbutton\"]', '[role=\"textbox\"]',\n    '[role=\"combobox\"]', '[role=\"searchbox\"]',\n    'md-button', 'md-icon-button', 'md-fab', 'md-checkbox', 'md-switch',\n    'md-radio', 'md-chip', 'md-select', 'md-multi-select', 'md-text-field',\n    'md-slider', 'md-segmented-button', 'md-menu-button', 'md-link',\n    'md-autocomplete',\n  ].join(',');\n\n  private get isDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('pointerdown', this.onPointerDown);\n  }\n\n  componentWillLoad() {\n    // Initial (deep) scan BEFORE the first render — querySelectorAll traverses\n    // the whole light-DOM subtree (present at connect time for declarative\n    // markup), so `hasInteractiveContent` is already settled when render() first\n    // computes `role`/`tabindex`. Doing this here (not in componentDidLoad)\n    // guarantees an interactive card wrapping focusable content NEVER paints a\n    // transient `role=\"button\"` around it — the nested-interactive window that a\n    // pre-hydration snapshot (SSR / jsdom, where `slotchange` hasn't fired yet)\n    // would otherwise catch — and avoids Stencil's \"state changed during\n    // componentDidLoad → extra re-render\" warning.\n    this.detectInteractiveContent();\n  }\n\n  componentDidLoad() {\n    // A late deep scan catches any focusable content that only became present\n    // between componentWillLoad and mount; the guard inside\n    // detectInteractiveContent makes this a no-op (no re-render) when the state\n    // is already correct.\n    this.detectInteractiveContent();\n    // slotchange only fires for top-level slottable add/remove; a MutationObserver\n    // (subtree) additionally catches controls added/removed deep inside slotted\n    // wrappers after mount. Matches the md-list-item light-DOM observer pattern.\n    if (typeof MutationObserver !== 'undefined') {\n      this.contentObserver = new MutationObserver(this.detectInteractiveContent);\n      this.contentObserver.observe(this.el, { childList: true, subtree: true });\n    }\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('pointerdown', this.onPointerDown);\n    this.contentObserver?.disconnect();\n    this.contentObserver = null;\n    this.cancelDrag();\n  }\n\n  @Watch('dragEnabled')\n  onDragEnabledChange() {\n    if (!this.dragEnabled) this.cancelDrag();\n  }\n\n  private onPointerDown = (e: PointerEvent) => {\n    if (!this.dragEnabled || this.isDisabled || e.button !== 0) return;\n\n    this.startX = e.clientX;\n    this.startY = e.clientY;\n    this.dragStarted = false;\n\n    this.el.setPointerCapture(e.pointerId);\n    this.el.addEventListener('pointermove', this.onPointerMove);\n    this.el.addEventListener('pointerup', this.onPointerUp);\n    this.el.addEventListener('pointercancel', this.onPointerUp);\n  };\n\n  private buildDetail(e: PointerEvent): MdCardDragDetail {\n    return {\n      clientX: e.clientX,\n      clientY: e.clientY,\n      offsetX: e.clientX - this.startX,\n      offsetY: e.clientY - this.startY,\n      startX: this.startX,\n      startY: this.startY,\n    };\n  }\n\n  private onPointerMove = (e: PointerEvent) => {\n    const dx = e.clientX - this.startX;\n    const dy = e.clientY - this.startY;\n\n    if (!this.dragStarted) {\n      if (Math.abs(dx) + Math.abs(dy) < MdCard.DRAG_THRESHOLD) return;\n      this.dragStarted = true;\n      this.dragging = true;\n      this.el.style.zIndex = '1000';\n      this.mdDragStart.emit(this.buildDetail(e));\n    }\n\n    this.el.style.transform = `translate(${dx}px, ${dy}px)`;\n    this.mdDragMove.emit(this.buildDetail(e));\n  };\n\n  private onPointerUp = (e: PointerEvent) => {\n    if (this.dragStarted) {\n      this.suppressClick = true;\n      requestAnimationFrame(() => { this.suppressClick = false; });\n      this.mdDragEnd.emit(this.buildDetail(e));\n    }\n\n    this.resetDragVisuals();\n    this.cleanupListeners();\n  };\n\n  private cancelDrag() {\n    this.resetDragVisuals();\n    this.cleanupListeners();\n  }\n\n  private resetDragVisuals() {\n    this.dragging = false;\n    this.dragStarted = false;\n    this.el.style.transform = '';\n    this.el.style.zIndex = '';\n  }\n\n  private cleanupListeners() {\n    this.el.removeEventListener('pointermove', this.onPointerMove);\n    this.el.removeEventListener('pointerup', this.onPointerUp);\n    this.el.removeEventListener('pointercancel', this.onPointerUp);\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (!this.interactive) return;\n    if (this.suppressClick) return;\n    if (this.isDisabled) { e.preventDefault(); return; }\n    this.mdClick.emit(e);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (!this.interactive || this.isDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      triggerRipple(this.el);\n      this.el.click();\n    }\n  };\n\n  /**\n   * Re-evaluate whether the slotted content contains its own focusable\n   * controls. `this.el.querySelectorAll` searches the light-DOM subtree (the\n   * slotted content) only — never the shadow root — so the card's internal\n   * state-layer / ripple / outline nodes are correctly ignored.\n   */\n  private detectInteractiveContent = () => {\n    const found =\n      this.el.querySelectorAll(MdCard.INTERACTIVE_CONTENT_SELECTOR).length > 0;\n    if (found !== this.hasInteractiveContent) this.hasInteractiveContent = found;\n  };\n\n  render() {\n    const isEffectivelyDisabled = this.isDisabled;\n\n    /* A card only exposes single `role=\"button\"` semantics when it is the sole\n       action — i.e. it does NOT wrap its own focusable controls. A button may\n       not contain focusable content (WAI-ARIA \"children presentational\"), so an\n       interactive card that holds buttons/links/form controls keeps a plain\n       container role instead of masquerading as one giant button. It stays\n       mouse-clickable (host `onClick` → `mdClick`) and visually interactive, but\n       the inner controls are the real keyboard tab stops. */\n    const actsAsButton = this.interactive && !this.hasInteractiveContent;\n\n    return (\n      <Host\n        class={{\n          'md-card': true,\n          [`md-card--${this.variant}`]: true,\n          'md-card--interactive': this.interactive,\n          'md-card--draggable': this.dragEnabled,\n          'md-card--disabled': this.interactive && isEffectivelyDisabled,\n          'md-card--dragged': this.dragging,\n          'md-card--full-width': this.fullWidth,\n          'md-card--full-height': this.fullHeight,\n        }}\n        role={actsAsButton ? 'button' : undefined}\n        aria-disabled={actsAsButton && isEffectivelyDisabled ? 'true' : undefined}\n        aria-grabbed={this.dragEnabled ? (this.dragging ? 'true' : 'false') : undefined}\n        tabindex={actsAsButton ? (this.disabled ? '-1' : '0') : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        {(this.interactive || this.dragEnabled) && this.ripple && <md-ripple disabled={isEffectivelyDisabled}></md-ripple>}\n        {(this.interactive || this.dragEnabled) && <span class=\"md-card__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>}\n        {this.variant === 'outlined' && <span class=\"md-card__outline\" part=\"outline\" aria-hidden=\"true\"></span>}\n        <slot onSlotchange={this.detectInteractiveContent} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-checkbox.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-DvXQXhgu.js";const t=o;const p=s;export{t as MdCheckbox,p as defineCustomElement};
+//# sourceMappingURL=md-checkbox.js.map

package/dist/components-csr/md-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components-csr/md-chip.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-C0DlKmRg.js";const t=o;const m=s;export{t as MdChip,m as defineCustomElement};
+//# sourceMappingURL=md-chip.js.map

package/dist/components-csr/md-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components-csr/md-color-picker.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as r,h as i,d as s,t as o}from"./p-bSpXNc5J.js";const a=(t,e,r)=>Math.max(e,Math.min(r,t));function n(t,e,r){const i=t/255;const s=e/255;const o=r/255;const a=Math.max(i,s,o);const n=Math.min(i,s,o);const l=a-n;let c=0;if(l!==0){switch(a){case i:c=(s-o)/l%6;break;case s:c=(o-i)/l+2;break;default:c=(i-s)/l+4}c*=60;if(c<0)c+=360}const h=a===0?0:l/a*100;const d=a*100;return{h:c,s:h,v:d}}function l(t,e,r){const i=e/100;const s=r/100;const o=s*i;const a=t/60;const n=o*(1-Math.abs(a%2-1));let l=0,c=0,h=0;if(a>=0&&a<1){l=o;c=n;h=0}else if(a<2){l=n;c=o;h=0}else if(a<3){l=0;c=o;h=n}else if(a<4){l=0;c=n;h=o}else if(a<5){l=n;c=0;h=o}else{l=o;c=0;h=n}const d=s-o;return{r:Math.round((l+d)*255),g:Math.round((c+d)*255),b:Math.round((h+d)*255)}}function c(t){const{r:e,g:r,b:i}=l(t.h,t.s,t.v);return{r:e,g:r,b:i,a:t.a}}function h(t,e,r){const i=t/255;const s=e/255;const o=r/255;const a=Math.max(i,s,o);const n=Math.min(i,s,o);const l=(a+n)/2;let c=0;let h=0;if(a!==n){const t=a-n;h=l>.5?t/(2-a-n):t/(a+n);switch(a){case i:c=(s-o)/t+(s<o?6:0);break;case s:c=(o-i)/t+2;break;default:c=(i-s)/t+4}c*=60}return{h:c,s:h*100,l:l*100}}function d(t){const{r:e,g:r,b:i}=l(t.h,t.s,t.v);return h(e,r,i)}function p(t,e,r){const i=(t%360+360)%360;const s=a(e,0,100)/100;const o=a(r,0,100)/100;const n=(1-Math.abs(2*o-1))*s;const l=n*(1-Math.abs(i/60%2-1));const c=o-n/2;let h=0;let d=0;let p=0;if(i<60){h=n;d=l}else if(i<120){h=l;d=n}else if(i<180){d=n;p=l}else if(i<240){d=l;p=n}else if(i<300){h=l;p=n}else{h=n;p=l}return{r:Math.round((h+c)*255),g:Math.round((d+c)*255),b:Math.round((p+c)*255)}}function u(t,e=false){const r=t=>a(Math.round(t),0,255).toString(16).padStart(2,"0");const i=`#${r(t.r)}${r(t.g)}${r(t.b)}`;if(!e&&t.a>=1)return i.toUpperCase();return`${i}${r(t.a*255)}`.toUpperCase()}function m(t,e=false){return u(c(t),e||t.a<1)}function f(t){if(!t)return null;const e=t.trim().replace(/^#/,"");const r=/^[0-9a-fA-F]+$/;if(!r.test(e))return null;let i=0,s=0,o=0,a=1;if(e.length===3){i=parseInt(e[0]+e[0],16);s=parseInt(e[1]+e[1],16);o=parseInt(e[2]+e[2],16)}else if(e.length===4){i=parseInt(e[0]+e[0],16);s=parseInt(e[1]+e[1],16);o=parseInt(e[2]+e[2],16);a=parseInt(e[3]+e[3],16)/255}else if(e.length===6){i=parseInt(e.slice(0,2),16);s=parseInt(e.slice(2,4),16);o=parseInt(e.slice(4,6),16)}else if(e.length===8){i=parseInt(e.slice(0,2),16);s=parseInt(e.slice(2,4),16);o=parseInt(e.slice(4,6),16);a=parseInt(e.slice(6,8),16)/255}else{return null}return{r:i,g:s,b:o,a}}function _(t){const e=t.trim().match(/^hsla?\(\s*([\d.]+)[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?(?:[\s,/]+([\d.%]+))?\s*\)$/i);if(!e)return null;const r=a(parseFloat(e[1]),0,360);const i=a(parseFloat(e[2]),0,100);const s=a(parseFloat(e[3]),0,100);const o=t=>{if(t==null)return 1;if(t.endsWith("%"))return a(parseFloat(t)/100,0,1);return a(parseFloat(t),0,1)};const{r:n,g:l,b:c}=p(r,i,s);return{r:n,g:l,b:c,a:o(e[4])}}function b(t){const e=t.trim().match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.%]+))?\s*\)$/i);if(!e)return null;const r=t=>{if(t.endsWith("%"))return a(parseFloat(t)/100*255,0,255);return a(parseFloat(t),0,255)};const i=t=>{if(t==null)return 1;if(t.endsWith("%"))return a(parseFloat(t)/100,0,1);return a(parseFloat(t),0,1)};return{r:Math.round(r(e[1])),g:Math.round(r(e[2])),b:Math.round(r(e[3])),a:i(e[4])}}function v(t){if(!t)return null;const e=t.trim();if(e.startsWith("#")||/^[0-9a-fA-F]{3,8}$/.test(e)){const t=f(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}const r=e.toLowerCase();if(r.startsWith("rgb")){const t=b(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}if(r.startsWith("hsl")){const t=_(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}return null}function g(t,e){const r=c(t);if(e==="rgb"){if(t.a<1){return`rgba(${r.r}, ${r.g}, ${r.b}, ${+t.a.toFixed(2)})`}return`rgb(${r.r}, ${r.g}, ${r.b})`}if(e==="hsl"){const{h:e,s:i,l:s}=h(r.r,r.g,r.b);if(t.a<1){return`hsla(${Math.round(e)}, ${Math.round(i)}%, ${Math.round(s)}%, ${+t.a.toFixed(2)})`}return`hsl(${Math.round(e)}, ${Math.round(i)}%, ${Math.round(s)}%)`}return m(t,t.a<1)}const k=()=>`:host{--_width:var(--md-color-picker-width, 296px);--_plate-height:var(--md-color-picker-plate-height, 176px);--_radius:var(--md-color-picker-radius, var(--md-sys-shape-corner-extra-large, 28px));--_surface:var(--md-color-picker-surface-color, var(--md-sys-color-surface-container-high, #ECE6F0));--_on-surface:var(--md-color-picker-on-surface, var(--md-sys-color-on-surface, #1C1B1F));--_outline:var(--md-color-picker-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_outline-strong:var(--md-color-picker-outline-strong, var(--md-sys-color-outline, #79747E));--_primary:var(--md-sys-color-primary, #6750A4);--_thumb-size:var(--md-color-picker-thumb-size, 18px);--_thumb-border:var(--md-color-picker-thumb-border, #FFFFFF);--_preset-size:var(--md-color-picker-preset-size, 32px);--_popover-elevation:var(--md-color-picker-popover-elevation, var(--md-sys-elevation-3, 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3)));--_state-easing:var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));--_state-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_spring-easing:var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90));--_spring-duration:var(--md-sys-motion-spring-spatial-fast-duration, 350ms);--_emphasized-decelerate:var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));--_emphasized-accelerate:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_popover-in-duration:var(--md-sys-motion-duration-medium2, 300ms);--_popover-out-duration:var(--md-sys-motion-duration-short4, 200ms);display:inline-block;box-sizing:border-box;direction:inherit;font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);color:var(--_on-surface)}:host(.md-color-picker--inline){inline-size:var(--_width)}.md-color-picker__popover{position:absolute;z-index:var(--md-sys-z-index-popup, 1000);margin-block-start:8px;inline-size:var(--_width);background:var(--_surface);color:var(--_on-surface);border-radius:var(--_radius);box-shadow:var(--_popover-elevation);padding:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box;transform-origin:top left;animation:md-color-picker-pop-in var(--_popover-in-duration) var(--_emphasized-decelerate) both}.md-color-picker__popover[data-state="closing"]{animation:md-color-picker-pop-out var(--_popover-out-duration) var(--_emphasized-accelerate) both}@keyframes md-color-picker-pop-in{from{opacity:0;transform:scale(0.8) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes md-color-picker-pop-out{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.95) translateY(-4px)}}:host([dir="rtl"]) .md-color-picker__popover,:host-context([dir="rtl"]) .md-color-picker__popover{transform-origin:top right}.md-color-picker__panel{display:flex;flex-direction:column;gap:max(4px, calc(14px + var(--md-sys-density-scale, 0) * 2px));inline-size:100%;background:var(--_surface);border-radius:var(--_radius);padding:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box}:host(.md-color-picker--popover) .md-color-picker__panel{padding:0;background:transparent}.md-color-picker__plate{position:relative;inline-size:100%;block-size:var(--_plate-height);border-radius:var(--md-sys-shape-corner-large, 16px);overflow:hidden;touch-action:none;cursor:crosshair}.md-color-picker__plate:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:2px}.md-color-picker__plate-saturation,.md-color-picker__plate-value{position:absolute;inset:0}.md-color-picker__plate-saturation{background:linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))}:host(:dir(rtl)) .md-color-picker__plate-saturation,:host([dir="rtl"]) .md-color-picker__plate-saturation,:host-context([dir="rtl"]) .md-color-picker__plate-saturation{background:linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0))}.md-color-picker__plate-value{background:linear-gradient(to top, #000000, rgba(0, 0, 0, 0))}.md-color-picker__thumb{position:absolute;inline-size:var(--_thumb-size);block-size:var(--_thumb-size);border-radius:50%;border:2px solid var(--_thumb-border);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.4),     var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3));margin-inline-start:calc(-0.5 * var(--_thumb-size));margin-block-start:calc(-0.5 * var(--_thumb-size));pointer-events:none;background-color:currentColor;transition:box-shadow var(--_state-duration) var(--_state-easing),     transform var(--_state-duration) var(--_state-easing)}.md-color-picker__plate:active .md-color-picker__thumb,.md-color-picker__hue:active .md-color-picker__thumb,.md-color-picker__alpha:active .md-color-picker__thumb{transform:scale(1.15);box-shadow:0 0 0 6px color-mix(in srgb, var(--_primary) 16%, transparent),     var(--md-sys-elevation-2, 0px 1px 2px rgba(0,0,0,0.3))}.md-color-picker__thumb--slider{inset-block-start:50%;margin-block-start:0;transform:translateY(-50%)}.md-color-picker__hue:active .md-color-picker__thumb--slider,.md-color-picker__alpha:active .md-color-picker__thumb--slider{transform:translateY(-50%) scale(1.15)}.md-color-picker__sliders{display:flex;gap:max(4px, calc(14px + var(--md-sys-density-scale, 0) * 2px));align-items:center}.md-color-picker__sliders-stack{flex:1;display:flex;flex-direction:column;gap:var(--md-sys-spacing-gap-md, 12px)}.md-color-picker__hue,.md-color-picker__alpha{position:relative;inline-size:100%;block-size:14px;border-radius:var(--md-sys-shape-corner-full, 9999px);touch-action:none;cursor:pointer;transition:box-shadow var(--_state-duration) var(--_state-easing)}.md-color-picker__hue{background:linear-gradient(     to right,     #ff0000 0%, #ffff00 17%, #00ff00 33%,     #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%   )}:host(:dir(rtl)) .md-color-picker__hue,:host([dir="rtl"]) .md-color-picker__hue,:host-context([dir="rtl"]) .md-color-picker__hue{background:linear-gradient(     to left,     #ff0000 0%, #ffff00 17%, #00ff00 33%,     #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%   )}.md-color-picker__alpha{background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),     linear-gradient(-45deg, #ccc 25%, transparent 25%),     linear-gradient(45deg, transparent 75%, #ccc 75%),     linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0}.md-color-picker__alpha-track{position:absolute;inset:0;border-radius:inherit}.md-color-picker__hue::before,.md-color-picker__alpha::before{content:'';position:absolute;inset-block:calc((100% - var(--_thumb-size)) / 2);inset-inline:calc(var(--_thumb-size) / -2)}.md-color-picker__hue:focus-visible,.md-color-picker__alpha:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:4px}.md-color-picker__hue:hover,.md-color-picker__alpha:hover{box-shadow:0 0 0 4px color-mix(in srgb, var(--_on-surface) 8%, transparent)}.md-color-picker__preview{flex-shrink:0;inline-size:40px;block-size:40px;border-radius:50%;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),     linear-gradient(-45deg, #ccc 25%, transparent 25%),     linear-gradient(45deg, transparent 75%, #ccc 75%),     linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0;border:1px solid var(--_outline);overflow:hidden;transition:transform var(--_spring-duration) var(--_spring-easing)}.md-color-picker__preview-inner{inline-size:100%;block-size:100%;transition:background-color var(--_state-duration) var(--_state-easing)}.md-color-picker__field{display:flex;flex-direction:column;gap:var(--md-sys-spacing-gap-xs, 4px);flex:1;min-inline-size:0}.md-color-picker__field label{font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-font-size, 11px);font-weight:var(--md-sys-typescale-label-small-font-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-letter-spacing, 0.5px);color:var(--md-sys-color-on-surface-variant, #49454F);text-transform:uppercase}.md-color-picker__field input{inline-size:100%;padding:var(--md-sys-spacing-inset-sm, 8px) 6px;border:1px solid var(--_outline);border-radius:var(--md-sys-shape-corner-extra-small, 4px);background:var(--md-sys-color-surface-container-lowest, #FFFFFF);color:var(--_on-surface);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;box-sizing:border-box;text-align:center;transition:border-color var(--_state-duration) var(--_state-easing),     box-shadow var(--_state-duration) var(--_state-easing)}.md-color-picker__field input:hover:not(:disabled){border-color:var(--_outline-strong)}.md-color-picker__field input:focus-visible{outline:none;border-color:var(--_primary);box-shadow:0 0 0 1px var(--_primary)}.md-color-picker__field input[aria-invalid="true"]{border-color:var(--md-sys-color-error, #B3261E)}.md-color-picker__field input[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 1px var(--md-sys-color-error, #B3261E)}.md-color-picker__field input:disabled{opacity:0.5;cursor:not-allowed}.md-color-picker__field--hex input{text-align:start;font-family:var(--md-sys-typescale-mono-font, ui-monospace, 'SF Mono', Menlo, monospace);letter-spacing:0.05em}.md-color-picker__inputs{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-color-picker__presets{display:flex;flex-wrap:wrap;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-color-picker__preset{position:relative;inline-size:var(--_preset-size);block-size:var(--_preset-size);border:1px solid var(--_outline);border-radius:50%;cursor:pointer;padding:0;transition:transform var(--_spring-duration) var(--_spring-easing),     box-shadow var(--_spring-duration) var(--_spring-easing)}.md-color-picker__preset:hover:not(:disabled){transform:scale(1.15) rotate(-4deg);box-shadow:var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3))}.md-color-picker__preset:active:not(:disabled){transform:scale(1.05) rotate(0deg)}.md-color-picker__preset:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:3px}.md-color-picker__preset[aria-selected="true"]{box-shadow:0 0 0 2px var(--_surface),     0 0 0 4px var(--_primary),     var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3));transform:scale(1.1)}.md-color-picker__preset[aria-selected="true"]:hover:not(:disabled){transform:scale(1.18)}:host(.md-color-picker--disabled) .md-color-picker__plate,:host(.md-color-picker--disabled) .md-color-picker__hue,:host(.md-color-picker--disabled) .md-color-picker__alpha{pointer-events:none;opacity:0.5}@media (prefers-reduced-motion: reduce){.md-color-picker__popover{animation-duration:0.01ms !important}.md-color-picker__preset,.md-color-picker__field input,.md-color-picker__thumb,.md-color-picker__preview,.md-color-picker__hue,.md-color-picker__alpha{transition-duration:0.01ms !important}.md-color-picker__preset:hover:not(:disabled){transform:scale(1.06)}}@media (forced-colors: active){.md-color-picker__field input,.md-color-picker__preset{border:1px solid CanvasText}.md-color-picker__plate,.md-color-picker__hue,.md-color-picker__alpha{forced-color-adjust:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const x=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdInput=r(this,"mdInput",7);this.mdChange=r(this,"mdChange",7);this.mdOpenChange=r(this,"mdOpenChange",7);this.variant="inline";this.value="#6750A4";this.format="hex";this.alpha=false;this.showHex=true;this.showInputs=true;this.disabled=false;this.presets="";this.ariaLabelProp="Color picker";this.open=false;this.dismissOnOutsideClick=false;this.density=0;this.hsva={h:268,s:53,v:64,a:1};this.hexInput="";this.hexInvalid=false;this.hasSlottedTrigger=false;this.pointerDragKind=null;this.uid=`md-color-picker-${Math.random().toString(36).slice(2,7)}`;this.wiredTrigger=null;this.lastEmitted="";this.onSatPointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.satRect=e.getBoundingClientRect();this.pointerDragKind="sat";this.updateSatFromPoint(t.clientX,t.clientY)};this.onSatPointerMove=t=>{if(this.pointerDragKind!=="sat"||!this.satRect)return;this.updateSatFromPoint(t.clientX,t.clientY)};this.onSatPointerUp=t=>{if(this.pointerDragKind!=="sat")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onSatKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?10:1;const r=this.isRtl();let{s:i,v:s}=this.hsva;let o=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"ArrowDown":s-=e;break;case"ArrowUp":s+=e;break;case"Home":i=0;break;case"End":i=100;break;case"PageDown":s=0;break;case"PageUp":s=100;break;default:o=false}if(!o)return;t.preventDefault();this.hsva={...this.hsva,s:Math.max(0,Math.min(100,i)),v:Math.max(0,Math.min(100,s))};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)};this.onHuePointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.hueRect=e.getBoundingClientRect();this.pointerDragKind="hue";this.updateHueFromPoint(t.clientX)};this.onHuePointerMove=t=>{if(this.pointerDragKind!=="hue"||!this.hueRect)return;this.updateHueFromPoint(t.clientX)};this.onHuePointerUp=t=>{if(this.pointerDragKind!=="hue")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onHueKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?15:1;const r=this.isRtl();let{h:i}=this.hsva;let s=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"Home":i=0;break;case"End":i=360;break;default:s=false}if(!s)return;t.preventDefault();i=(i%360+360)%360;this.hsva={...this.hsva,h:i};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)};this.onAlphaPointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.alphaRect=e.getBoundingClientRect();this.pointerDragKind="alpha";this.updateAlphaFromPoint(t.clientX)};this.onAlphaPointerMove=t=>{if(this.pointerDragKind!=="alpha"||!this.alphaRect)return;this.updateAlphaFromPoint(t.clientX)};this.onAlphaPointerUp=t=>{if(this.pointerDragKind!=="alpha")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onAlphaKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?.1:.01;const r=this.isRtl();let{a:i}=this.hsva;let s=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"Home":i=0;break;case"End":i=1;break;default:s=false}if(!s)return;t.preventDefault();i=Math.max(0,Math.min(1,i));this.hsva={...this.hsva,a:i};this.hexInput=m(this.hsva,true);this.hexInvalid=false;this.emit(true)};this.onHexInput=t=>{const e=t.target.value;this.hexInput=e;const r=v(e.startsWith("#")?e:`#${e}`);if(r){this.hsva=r;this.hexInvalid=false;this.emit(false)}else{this.hexInvalid=true}};this.onHexBlur=()=>{if(this.hexInvalid){this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false}this.emit(true)};this.onRgbChange=(t,e)=>{const r=e.target.value;const i=Math.max(0,Math.min(255,parseInt(r,10)||0));const s=c(this.hsva);this.rgbaFromChannels(t==="r"?i:s.r,t==="g"?i:s.g,t==="b"?i:s.b)};this.onHslChange=(t,e)=>{const r=e.target.value;const i=parseInt(r,10)||0;const s=d(this.hsva);const o=t==="h"?Math.max(0,Math.min(360,i)):s.h;const a=t==="s"?Math.max(0,Math.min(100,i)):s.s;const n=t==="l"?Math.max(0,Math.min(100,i)):s.l;const{r:l,g:c,b:h}=p(o,a,n);this.rgbaFromChannels(l,c,h)};this.onAlphaInputChange=t=>{const e=t.target.value;const r=Math.max(0,Math.min(1,parseFloat(e)||0));this.hsva={...this.hsva,a:r};this.hexInput=m(this.hsva,true);this.emit(true)};this.onPresetClick=t=>{if(this.disabled)return;this.applyValue(t,true);this.emit(true)};this.onPresetKeyDown=(t,e)=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();this.onPresetClick(e)}};this.toggleOpen=()=>{if(this.disabled)return;this.open=!this.open}}componentWillLoad(){this.applyValue(this.value,false);this.computeSlottedTrigger()}componentDidLoad(){this.syncOutsideClickListener();this.wireSlottedTrigger();const t=this.el.shadowRoot?.querySelector('slot[name="trigger"]');t?.addEventListener("slotchange",(()=>{this.computeSlottedTrigger();this.wireSlottedTrigger()}))}computeSlottedTrigger(){this.hasSlottedTrigger=this.el.querySelector('[slot="trigger"]')!==null;if(!this.hasSlottedTrigger&&this.variant==="popover"&&typeof console!=="undefined"){console.warn('[md-color-picker] variant="popover" needs a trigger: slot one into '+'`trigger` (e.g. <md-button slot="trigger">…</md-button>). Without it '+"there is nothing to open the panel.")}}wireSlottedTrigger(){const t=this.el.querySelector('[slot="trigger"]');if(!t||t===this.wiredTrigger){this.syncSlottedTriggerAria();return}this.wiredTrigger?.removeEventListener("click",this.toggleOpen);t.addEventListener("click",this.toggleOpen);this.wiredTrigger=t;this.syncSlottedTriggerAria()}syncSlottedTriggerAria(){const t=this.wiredTrigger;if(!t)return;t.setAttribute("aria-haspopup","dialog");t.setAttribute("aria-expanded",String(this.open))}onValueChange(t){if(t===this.lastEmitted)return;this.applyValue(t,false)}isRtl(){return typeof getComputedStyle==="function"&&getComputedStyle(this.el).direction==="rtl"}horizontalRatio(t,e){const r=e.width;if(r<=0)return 0;return this.isRtl()?(e.right-t)/r:(t-e.left)/r}horizontalGradientTo(){return this.isRtl()?"left":"right"}applyValue(t,e){const r=v(t);if(r){this.hsva=r;this.hexInput=m(r,this.alpha&&r.a<1);this.hexInvalid=false;if(e)this.emit()}else{this.hexInvalid=true}}emit(t=false){const e=g(this.hsva,this.format);if(e!==this.value){this.lastEmitted=e;this.value=e;this.mdInput.emit({value:e});if(t)this.mdChange.emit({value:e})}else if(t){this.mdChange.emit({value:e})}}updateSatFromPoint(t,e){if(!this.satRect)return;const r=this.horizontalRatio(t,this.satRect);const i=e-this.satRect.top;const s=Math.max(0,Math.min(100,r*100));const o=Math.max(0,Math.min(100,100-i/this.satRect.height*100));this.hsva={...this.hsva,s,v:o};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(false)}updateHueFromPoint(t){if(!this.hueRect)return;const e=Math.max(0,Math.min(1,this.horizontalRatio(t,this.hueRect)));const r=e*360;this.hsva={...this.hsva,h:r};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(false)}updateAlphaFromPoint(t){if(!this.alphaRect)return;const e=Math.max(0,Math.min(1,this.horizontalRatio(t,this.alphaRect)));this.hsva={...this.hsva,a:e};this.hexInput=m(this.hsva,true);this.hexInvalid=false;this.emit(false)}rgbaFromChannels(t,e,r){const i=`#${[t,e,r].map((t=>t.toString(16).padStart(2,"0"))).join("")}`;const s=v(i);if(s){this.hsva={...s,a:this.hsva.a};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)}}get parsedPresets(){const t=Array.isArray(this.presets)?this.presets:String(this.presets??"").split(",");return t.map((t=>String(t).trim())).filter(Boolean)}async show(){if(this.variant!=="popover"||this.disabled)return;this.open=true}async close(){if(this.variant!=="popover")return;this.open=false}onOpenChange(t){this.mdOpenChange.emit({open:t});this.syncOutsideClickListener();this.syncSlottedTriggerAria()}onVariantChange(){this.syncOutsideClickListener()}onDismissOnOutsideClickChange(){this.syncOutsideClickListener()}onDisabledChange(){this.syncOutsideClickListener()}disconnectedCallback(){this.removeOutsideClickHandler();this.wiredTrigger?.removeEventListener("click",this.toggleOpen);this.wiredTrigger=null}syncOutsideClickListener(){this.removeOutsideClickHandler();if(this.variant!=="popover"||!this.open||!this.dismissOnOutsideClick||this.disabled||typeof document==="undefined"){return}requestAnimationFrame((()=>{if(this.variant!=="popover"||!this.open||!this.dismissOnOutsideClick||this.disabled){return}this.attachOutsideClickHandler()}))}attachOutsideClickHandler(){this.outsideClickHandler=t=>{if(this.disabled||!this.open)return;const e=t.composedPath?t.composedPath():[];if(e.includes(this.el))return;const r=t.target;if(r&&this.el.contains(r))return;this.open=false};document.addEventListener("mousedown",this.outsideClickHandler,true)}removeOutsideClickHandler(){if(this.outsideClickHandler&&typeof document!=="undefined"){document.removeEventListener("mousedown",this.outsideClickHandler,true)}this.outsideClickHandler=undefined}onGlobalKeyDown(t){if(this.variant==="popover"&&this.open&&t.key==="Escape"){t.preventDefault();this.open=false}}renderSaturationPlate(){const t=this.hsva.h;const e=this.hsva.s;const r=this.hsva.v;const s=c({h:t,s:100,v:100,a:1});const o=`rgb(${s.r}, ${s.g}, ${s.b})`;return i("div",{class:"md-color-picker__plate",part:"plate",role:"application",tabindex:this.disabled?-1:0,"aria-label":"Saturation and brightness",style:{background:o},onPointerDown:this.onSatPointerDown,onPointerMove:this.onSatPointerMove,onPointerUp:this.onSatPointerUp,onPointerCancel:this.onSatPointerUp,onKeyDown:this.onSatKeyDown},i("div",{class:"md-color-picker__plate-saturation","aria-hidden":"true"}),i("div",{class:"md-color-picker__plate-value","aria-hidden":"true"}),i("div",{class:"md-color-picker__thumb",part:"thumb",style:{insetInlineStart:`${e}%`,insetBlockStart:`${100-r}%`,backgroundColor:m(this.hsva,false)}}))}renderHueSlider(){const t=this.hsva.h;const e=t/360;return i("div",{class:"md-color-picker__hue",part:"hue",role:"slider","aria-label":"Hue","aria-valuemin":"0","aria-valuemax":"360","aria-valuenow":Math.round(t),"aria-orientation":"horizontal","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onPointerDown:this.onHuePointerDown,onPointerMove:this.onHuePointerMove,onPointerUp:this.onHuePointerUp,onPointerCancel:this.onHuePointerUp,onKeyDown:this.onHueKeyDown},i("div",{class:"md-color-picker__thumb md-color-picker__thumb--slider",style:{insetInlineStart:`${e*100}%`,backgroundColor:m({h:t,s:100,v:100,a:1},false)}}))}renderAlphaSlider(){if(!this.alpha)return null;const t=this.hsva.a;const e=c({...this.hsva,a:1});const r=`linear-gradient(to ${this.horizontalGradientTo()}, rgba(${e.r}, ${e.g}, ${e.b}, 0), rgba(${e.r}, ${e.g}, ${e.b}, 1))`;return i("div",{class:"md-color-picker__alpha",part:"alpha",role:"slider","aria-label":"Opacity","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":+t.toFixed(2),"aria-orientation":"horizontal","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onPointerDown:this.onAlphaPointerDown,onPointerMove:this.onAlphaPointerMove,onPointerUp:this.onAlphaPointerUp,onPointerCancel:this.onAlphaPointerUp,onKeyDown:this.onAlphaKeyDown},i("div",{class:"md-color-picker__alpha-track",style:{backgroundImage:r}}),i("div",{class:"md-color-picker__thumb md-color-picker__thumb--slider",style:{insetInlineStart:`${t*100}%`,backgroundColor:m(this.hsva,true)}}))}renderHexInput(){if(!this.showHex)return null;return i("div",{class:"md-color-picker__field md-color-picker__field--hex",part:"field-hex"},i("label",{part:"label",htmlFor:`${this.uid}-hex`},"Hex"),i("input",{id:`${this.uid}-hex`,type:"text",value:this.hexInput,spellcheck:false,autoComplete:"off","aria-invalid":this.hexInvalid?"true":undefined,disabled:this.disabled,onInput:this.onHexInput,onBlur:this.onHexBlur,onKeyDown:t=>{if(t.key==="Enter"){t.target.blur()}}}))}renderAlphaField(){if(!this.alpha)return null;return i("div",{class:"md-color-picker__field",part:"field-a"},i("label",{htmlFor:`${this.uid}-a`},"A"),i("input",{id:`${this.uid}-a`,type:"number",min:"0",max:"1",step:"0.01",value:+this.hsva.a.toFixed(2),disabled:this.disabled,onChange:this.onAlphaInputChange}))}renderRgbInputs(){const t=c(this.hsva);return i("div",{class:"md-color-picker__inputs",part:"inputs"},i("div",{class:"md-color-picker__field",part:"field-r"},i("label",{htmlFor:`${this.uid}-r`},"R"),i("input",{id:`${this.uid}-r`,type:"number",min:"0",max:"255",step:"1",value:t.r,disabled:this.disabled,onChange:t=>this.onRgbChange("r",t)})),i("div",{class:"md-color-picker__field",part:"field-g"},i("label",{htmlFor:`${this.uid}-g`},"G"),i("input",{id:`${this.uid}-g`,type:"number",min:"0",max:"255",step:"1",value:t.g,disabled:this.disabled,onChange:t=>this.onRgbChange("g",t)})),i("div",{class:"md-color-picker__field",part:"field-b"},i("label",{htmlFor:`${this.uid}-b`},"B"),i("input",{id:`${this.uid}-b`,type:"number",min:"0",max:"255",step:"1",value:t.b,disabled:this.disabled,onChange:t=>this.onRgbChange("b",t)})),this.renderAlphaField())}renderHslInputs(){const t=d(this.hsva);return i("div",{class:"md-color-picker__inputs",part:"inputs"},i("div",{class:"md-color-picker__field",part:"field-h"},i("label",{htmlFor:`${this.uid}-h`},"H"),i("input",{id:`${this.uid}-h`,type:"number",min:"0",max:"360",step:"1",value:Math.round(t.h),disabled:this.disabled,onChange:t=>this.onHslChange("h",t)})),i("div",{class:"md-color-picker__field",part:"field-s"},i("label",{htmlFor:`${this.uid}-s`},"S"),i("input",{id:`${this.uid}-s`,type:"number",min:"0",max:"100",step:"1",value:Math.round(t.s),disabled:this.disabled,onChange:t=>this.onHslChange("s",t)})),i("div",{class:"md-color-picker__field",part:"field-l"},i("label",{htmlFor:`${this.uid}-l`},"L"),i("input",{id:`${this.uid}-l`,type:"number",min:"0",max:"100",step:"1",value:Math.round(t.l),disabled:this.disabled,onChange:t=>this.onHslChange("l",t)})),this.renderAlphaField())}renderChannelInputs(){if(!this.showInputs)return null;if(this.format==="hsl")return this.renderHslInputs();return this.renderRgbInputs()}renderPresets(){const t=this.parsedPresets;if(t.length===0)return null;return i("div",{class:"md-color-picker__presets",part:"presets",role:"listbox","aria-label":"Color presets"},t.map((t=>i("button",{key:t,type:"button",class:"md-color-picker__preset",part:"preset",role:"option","aria-label":t,"aria-selected":m(this.hsva,false).toLowerCase()===t.toLowerCase()?"true":"false",style:{backgroundColor:t},disabled:this.disabled,onClick:()=>this.onPresetClick(t),onKeyDown:e=>this.onPresetKeyDown(e,t)}))))}renderPanel(){return i("div",{class:"md-color-picker__panel",part:"panel"},this.renderSaturationPlate(),i("div",{class:"md-color-picker__sliders",part:"sliders"},i("div",{class:"md-color-picker__sliders-stack"},this.renderHueSlider(),this.renderAlphaSlider()),i("div",{class:"md-color-picker__preview",part:"preview",role:"img","aria-label":`Current colour ${g(this.hsva,this.format)}`},i("div",{class:"md-color-picker__preview-inner",style:{backgroundColor:m(this.hsva,true)}}))),this.renderHexInput(),this.renderChannelInputs(),this.renderPresets())}render(){m(this.hsva,true);if(this.variant==="popover"){return i(s,{class:{"md-color-picker":true,"md-color-picker--popover":true,"md-color-picker--open":this.open,"md-color-picker--disabled":this.disabled},"aria-label":this.ariaLabelProp},i("slot",{name:"trigger"}),this.open&&i("div",{class:"md-color-picker__popover",part:"popover",role:"dialog","aria-label":this.ariaLabelProp},this.renderPanel()))}return i(s,{class:{"md-color-picker":true,"md-color-picker--inline":true,"md-color-picker--disabled":this.disabled},role:"group","aria-label":this.ariaLabelProp},this.renderPanel())}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],open:[{onOpenChange:0}],variant:[{onVariantChange:0}],dismissOnOutsideClick:[{onDismissOnOutsideClickChange:0}],disabled:[{onDisabledChange:0}]}}static get style(){return k()}},[257,"md-color-picker",{variant:[513],value:[1537],format:[513],alpha:[516],showHex:[4,"show-hex"],showInputs:[4,"show-inputs"],disabled:[516],presets:[1],ariaLabelProp:[1,"aria-label"],open:[1540],dismissOnOutsideClick:[4,"dismiss-on-outside-click"],density:[514],hsva:[32],hexInput:[32],hexInvalid:[32],hasSlottedTrigger:[32],show:[64],close:[64]},[[8,"keydown","onGlobalKeyDown"]],{value:[{onValueChange:0}],open:[{onOpenChange:0}],variant:[{onVariantChange:0}],dismissOnOutsideClick:[{onDismissOnOutsideClickChange:0}],disabled:[{onDisabledChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["md-color-picker"];t.forEach((t=>{switch(t){case"md-color-picker":if(!customElements.get(o(t))){customElements.define(o(t),x)}break}}))}y();const w=x;const M=y;export{w as MdColorPicker,M as defineCustomElement};
+//# sourceMappingURL=md-color-picker.js.map