@m3e/web 2.1.2 → 2.2.0

package/dist/card.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as a}from"tslib";import{unsafeCSS as t,css as o,LitElement as r,html as i}from"lit";import{query as l,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as d,FormSubmitter as v,Focusable as m,DisabledInteractive as h,Disabled as u,AttachInternals as b,PressedController as p,renderPseudoLink as y,hasAssignedNodes as f,customElement as $}from"@m3e/web/core";const x=t("var(--m3e-card-padding, 1rem)"),g=t(`var(--m3e-card-shape, ${c.shape.corner.medium});`),C={filled:{textColor:t(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerHighest}))`),containerElevation:t(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),disabled:{textColor:t(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surfaceVariant}))`),containerElevation:t(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`)},focus:{textColor:t(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`)},pressed:{textColor:t(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`)}},elevated:{textColor:t(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level1}))`),disabled:{textColor:t(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level1}))`),containerElevationColor:t(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level2}))`)},focus:{textColor:t(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level1}))`)},pressed:{textColor:t(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level1}))`)}},outlined:{textColor:t(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${c.color.outlineVariant}))`),outlineThickness:t("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),disabled:{textColor:t(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerElevation:t(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${c.color.outline}))`),outlineOpacity:t("var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))")},hover:{textColor:t(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`),outlineColor:t(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${c.color.outlineVariant}))`)},focus:{textColor:t(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${c.color.onSurface}))`)},pressed:{textColor:t(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${c.color.outlineVariant}))`)}}},L=o`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${g}; transition: ${t(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard},\n      border-color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${g}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${x}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${x}; margin-block-start: ${x}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${x}; margin-block: ${x}; } .has-actions slot[name="actions"] { margin-inline: ${x}; margin-block: ${x}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${x}; margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${x}; margin-inline-end: ${x}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${C.outlined.outlineThickness??t("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;function S(e){return o`:host([variant="${t(e)}"]) .base { background-color: ${C[e].containerColor??t("unset")}; box-shadow: ${C[e].containerElevation??t("unset")}; border-width: ${C[e].outlineThickness??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base { --m3e-state-layer-hover-color: ${C[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${C[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${C[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${C[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${C[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${C[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${C[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${C[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${C[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${C[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"]) .base { border-color: ${C[e].outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus .base) { border-color: ${C[e].focus.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover .base) { border-color: ${C[e].hover.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { border-color: ${C[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]) .base { color: ${C[e].textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus) .base { color: ${C[e].focus.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover) .base { color: ${C[e].hover.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { color: ${C[e].pressed.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) .base, :host([actionable][variant="${t(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${C[e].disabled.containerElevation??t("unset")}; --m3e-elevation-color: color-mix( in srgb, ${C[e].disabled.containerElevationColor} ${C[e].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${C[e].disabled.textColor} ${C[e].disabled.textOpacity}, transparent ); background-color: ${C[e].disabled.containerColor&&C[e].disabled.containerOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.containerColor} ${C[e].disabled.containerOpacity},\n        transparent\n      )`):t("unset")}; border-color: ${C[e].disabled.outlineColor&&C[e].disabled.outlineOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.outlineColor} ${C[e].disabled.outlineOpacity},\n        transparent\n      )`):t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) ::slotted(img), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${t(e)}"]:disabled) ::slotted(video), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(video) { opacity: ${C[e].disabled.imageOpacity}; }`}const O=[S("filled"),S("elevated"),S("outlined")];var E,k,w,z,_,I,q,R;let T=class extends(s(d(v(m(h(u(b(r),!0))))))){constructor(){super(),E.add(this),k.set(this,a=>e(this,E,"m",R).call(this,a)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new p(this,{isPressedKey:e=>" "===e,callback:e=>{!this.actionable||this.disabled||this.disabledInteractive||this._base?.classList.toggle("pressed",e)}})}connectedCallback(){this.hasAttribute("actionable")&&(this.role="button"),super.connectedCallback(),this.addEventListener("click",e(this,k,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",e(this,k,"f"))}render(){return i`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable||this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-ripple>${this[y]()}<slot name="header" @slotchange="${e(this,E,"m",w)}"></slot><slot name="content" @slotchange="${e(this,E,"m",z)}"><slot @slotchange="${e(this,E,"m",_)}"></slot></slot><slot name="actions" @slotchange="${e(this,E,"m",I)}"></slot><slot name="footer" @slotchange="${e(this,E,"m",q)}"></slot></div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this)),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}update(e){super.update(e),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}};k=new WeakMap,E=new WeakSet,w=function(e){const a=e.target.assignedNodes({flatten:!0}),t=this.shadowRoot?.querySelector(".base");t?.classList.toggle("has-header",a.length>0),t?.classList.toggle("has-header-media",a.some(e=>e instanceof HTMLElement&&("IMG"===e.tagName||"VIDEO"===e.tagName)))},z=function(){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content",null!==this.querySelector("[slot='content']"))},_=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default",f(e.target)&&null===this.querySelector("[slot='content']"))},I=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",f(e.target))},q=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer",f(e.target))},R=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},T.styles=[O,L],a([l(".base")],T.prototype,"_base",void 0),a([l(".elevation")],T.prototype,"_elevation",void 0),a([l(".focus-ring")],T.prototype,"_focusRing",void 0),a([l(".state-layer")],T.prototype,"_stateLayer",void 0),a([l(".ripple")],T.prototype,"_ripple",void 0),a([n({type:Boolean})],T.prototype,"inline",void 0),a([n({type:Boolean})],T.prototype,"actionable",void 0),a([n({reflect:!0})],T.prototype,"variant",void 0),a([n({reflect:!0})],T.prototype,"orientation",void 0),T=a([$("m3e-card")],T);export{T as M3eCardElement};
+import{__classPrivateFieldGet as e,__decorate as a}from"tslib";import{unsafeCSS as t,css as o,LitElement as r,html as i}from"lit";import{query as l,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as d,FormSubmitter as v,Focusable as m,DisabledInteractive as h,Disabled as u,AttachInternals as b,PressedController as p,renderPseudoLink as y,hasAssignedNodes as f,customElement as $}from"@m3e/web/core";const x=t("var(--m3e-card-padding, 1rem)"),g=t(`var(--m3e-card-shape, ${c.shape.corner.medium});`),C={filled:{textColor:t(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerHighest}))`),containerElevation:t(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),disabled:{textColor:t(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surfaceVariant}))`),containerElevation:t(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`)},focus:{textColor:t(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`)},pressed:{textColor:t(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`)}},elevated:{textColor:t(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level1}))`),disabled:{textColor:t(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level1}))`),containerElevationColor:t(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level2}))`)},focus:{textColor:t(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level1}))`)},pressed:{textColor:t(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level1}))`)}},outlined:{textColor:t(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${c.color.outlineVariant}))`),outlineThickness:t("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),disabled:{textColor:t(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerElevation:t(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${c.color.outline}))`),outlineOpacity:t("var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))")},hover:{textColor:t(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`),outlineColor:t(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${c.color.outlineVariant}))`)},focus:{textColor:t(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${c.color.onSurface}))`)},pressed:{textColor:t(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${c.color.outlineVariant}))`)}}},L=o`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${g}; transition: ${t(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard},\n      border-color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${g}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${x}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${x}; margin-block-start: ${x}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${x}; margin-block: ${x}; } .has-actions slot[name="actions"] { margin-inline: ${x}; margin-block: ${x}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${x}; margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${x}; margin-inline-end: ${x}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${C.outlined.outlineThickness??t("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;function S(e){return o`:host([variant="${t(e)}"]) .base { background-color: ${C[e].containerColor??t("unset")}; box-shadow: ${C[e].containerElevation??t("unset")}; border-width: ${C[e].outlineThickness??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base { --m3e-state-layer-hover-color: ${C[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${C[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${C[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${C[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${C[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${C[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${C[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${C[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${C[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${C[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"]) .base { border-color: ${C[e].outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus .base) { border-color: ${C[e].focus.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover .base) { border-color: ${C[e].hover.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { border-color: ${C[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]) .base { color: ${C[e].textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus) .base { color: ${C[e].focus.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover) .base { color: ${C[e].hover.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { color: ${C[e].pressed.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) .base, :host([actionable][variant="${t(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${C[e].disabled.containerElevation??t("unset")}; --m3e-elevation-color: color-mix( in srgb, ${C[e].disabled.containerElevationColor} ${C[e].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${C[e].disabled.textColor} ${C[e].disabled.textOpacity}, transparent ); background-color: ${C[e].disabled.containerColor&&C[e].disabled.containerOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.containerColor} ${C[e].disabled.containerOpacity},\n        transparent\n      )`):t("unset")}; border-color: ${C[e].disabled.outlineColor&&C[e].disabled.outlineOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.outlineColor} ${C[e].disabled.outlineOpacity},\n        transparent\n      )`):t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) ::slotted(img), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${t(e)}"]:disabled) ::slotted(video), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(video) { opacity: ${C[e].disabled.imageOpacity}; }`}const O=[S("filled"),S("elevated"),S("outlined")];var E,k,w,z,_,I,q,R;let T=class extends(s(d(v(m(h(u(b(r),!0))))))){constructor(){super(),E.add(this),k.set(this,a=>e(this,E,"m",R).call(this,a)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new p(this,{isPressedKey:e=>" "===e,callback:e=>{!this.actionable||this.disabled||this.disabledInteractive||this._base?.classList.toggle("pressed",e)}})}connectedCallback(){this.hasAttribute("actionable")&&(this.role="button"),super.connectedCallback(),this.addEventListener("click",e(this,k,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",e(this,k,"f"))}render(){return i`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable||this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-ripple>${this[y]()}<slot name="header" @slotchange="${e(this,E,"m",w)}"></slot><slot name="content" @slotchange="${e(this,E,"m",z)}"><slot @slotchange="${e(this,E,"m",_)}"></slot></slot><slot name="actions" @slotchange="${e(this,E,"m",I)}"></slot><slot name="footer" @slotchange="${e(this,E,"m",q)}"></slot></div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this)),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}update(e){super.update(e),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}};k=new WeakMap,E=new WeakSet,w=function(e){const a=e.target.assignedNodes({flatten:!0}),t=this.shadowRoot?.querySelector(".base");t?.classList.toggle("has-header",a.length>0),t?.classList.toggle("has-header-media",a.some(e=>e instanceof HTMLElement&&("IMG"===e.tagName||"VIDEO"===e.tagName)))},z=function(){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content",null!==this.querySelector("[slot='content']"))},_=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default",f(e.target)&&null===this.querySelector("[slot='content']"))},I=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",f(e.target))},q=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer",f(e.target))},R=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},T.styles=[O,L],a([l(".base")],T.prototype,"_base",void 0),a([l(".elevation")],T.prototype,"_elevation",void 0),a([l(".focus-ring")],T.prototype,"_focusRing",void 0),a([l(".state-layer")],T.prototype,"_stateLayer",void 0),a([l(".ripple")],T.prototype,"_ripple",void 0),a([n({type:Boolean,reflect:!0})],T.prototype,"inline",void 0),a([n({type:Boolean,reflect:!0})],T.prototype,"actionable",void 0),a([n({reflect:!0})],T.prototype,"variant",void 0),a([n({reflect:!0})],T.prototype,"orientation",void 0),T=a([$("m3e-card")],T);export{T as M3eCardElement};
 //# sourceMappingURL=card.min.js.map

package/dist/card.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.min.js","sources":["../../src/card/styles/CardToken.ts","../../src/card/styles/CardVariantToken.ts","../../src/card/styles/CardStyle.ts","../../src/card/styles/CardVariantStyle.ts","../../src/card/CardElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardToken = {\r\n  padding: unsafeCSS(\"var(--m3e-card-padding, 1rem)\"),\r\n  shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\n/** @private */\r\ntype _CardVariantToken = {\r\n  textColor: CSSResult;\r\n  containerColor: CSSResult;\r\n  containerElevation: CSSResult;\r\n  outlineColor?: CSSResult;\r\n  outlineThickness?: CSSResult;\r\n  disabled: {\r\n    textColor: CSSResult;\r\n    textOpacity: CSSResult;\r\n    imageOpacity: CSSResult;\r\n    containerColor?: CSSResult;\r\n    containerOpacity?: CSSResult;\r\n    containerElevation: CSSResult;\r\n    containerElevationColor: CSSResult;\r\n    containerElevationOpacity: CSSResult;\r\n    outlineColor?: CSSResult;\r\n    outlineOpacity?: CSSResult;\r\n  };\r\n  hover: {\r\n    textColor: CSSResult;\r\n    stateLayerColor: CSSResult;\r\n    stateLayerOpacity: CSSResult;\r\n    containerElevation?: CSSResult;\r\n    outlineColor?: CSSResult;\r\n  };\r\n  focus: {\r\n    textColor: CSSResult;\r\n    stateLayerColor: CSSResult;\r\n    stateLayerOpacity: CSSResult;\r\n    containerElevation?: CSSResult;\r\n    outlineColor?: CSSResult;\r\n  };\r\n  pressed: {\r\n    textColor: CSSResult;\r\n    stateLayerColor: CSSResult;\r\n    stateLayerOpacity: CSSResult;\r\n    containerElevation?: CSSResult;\r\n    outlineColor?: CSSResult;\r\n  };\r\n};\r\n\r\n/**\r\n * Component design tokens that control the appearance variants of `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantToken: Record<CardVariant, _CardVariantToken> = {\r\n  filled: {\r\n    textColor: unsafeCSS(\r\n      `var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n    ),\r\n    containerColor: unsafeCSS(\r\n      `var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`,\r\n    ),\r\n    containerElevation: unsafeCSS(\r\n      `var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n    ),\r\n    disabled: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      textOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n      ),\r\n      imageOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n      ),\r\n      containerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      containerElevationColor: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      containerElevationOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n      ),\r\n      containerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n      ),\r\n    },\r\n    hover: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n    },\r\n    focus: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n    },\r\n    pressed: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n    },\r\n  },\r\n  elevated: {\r\n    textColor: unsafeCSS(\r\n      `var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n    ),\r\n    containerColor: unsafeCSS(\r\n      `var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`,\r\n    ),\r\n    containerElevation: unsafeCSS(\r\n      `var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`,\r\n    ),\r\n    disabled: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      textOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n      ),\r\n      imageOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n      ),\r\n      containerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n      containerElevationColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      containerElevationOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n      ),\r\n      containerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n      ),\r\n    },\r\n    hover: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`,\r\n      ),\r\n    },\r\n    focus: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n    },\r\n    pressed: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n    },\r\n  },\r\n  outlined: {\r\n    textColor: unsafeCSS(\r\n      `var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n    ),\r\n    containerColor: unsafeCSS(\r\n      `var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surface}))`,\r\n    ),\r\n    containerElevation: unsafeCSS(\r\n      `var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n    ),\r\n    outlineColor: unsafeCSS(\r\n      `var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n    ),\r\n    outlineThickness: unsafeCSS(\"var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))\"),\r\n    disabled: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      textOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n      ),\r\n      imageOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      containerElevationColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      containerElevationOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`,\r\n      ),\r\n      outlineOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`,\r\n      ),\r\n    },\r\n    hover: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n      ),\r\n    },\r\n    focus: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n    },\r\n    pressed: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n      ),\r\n    },\r\n  },\r\n} as const;\r\n","import { css, CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardToken } from \"./CardToken\";\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardStyle: CSSResult = css`\r\n  :host {\r\n    outline: none;\r\n  }\r\n  :host(:not([inline])) {\r\n    display: block;\r\n  }\r\n  :host(:not([inline])) .base {\r\n    display: flex;\r\n  }\r\n  :host([inline]) {\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n  }\r\n  :host([inline]) .base {\r\n    display: inline-flex;\r\n  }\r\n  .base {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${CardToken.shape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host([actionable]) {\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host([actionable]:not(:disabled):not([disabled-interactive])) {\r\n    cursor: pointer;\r\n  }\r\n  :host([actionable][disabled-interactive]) {\r\n    cursor: not-allowed;\r\n  }\r\n  :host(:not([actionable])) .focus-ring,\r\n  :host(:not([actionable])) .state-layer,\r\n  :host(:not([actionable])) .ripple {\r\n    display: none;\r\n  }\r\n  :host([variant=\"outlined\"]) .base {\r\n    border-style: solid;\r\n  }\r\n  ::slotted([slot=\"content\"]) {\r\n    flex: 1 1 auto;\r\n  }\r\n  ::slotted(img),\r\n  ::slotted(video) {\r\n    inset: 0;\r\n    object-fit: cover;\r\n  }\r\n  ::slotted(img[slot=\"header\"]),\r\n  ::slotted(video[slot=\"header\"]) {\r\n    border-radius: ${CardToken.shape};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  ::slotted([slot=\"header\"]),\r\n  ::slotted([slot=\"actions\"]),\r\n  ::slotted([slot=\"footer\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  :host([orientation=\"vertical\"]) .base,\r\n  :host([orientation=\"horizontal\"]) ::slotted([slot=\"header\"]),\r\n  :host([orientation=\"horizontal\"]) ::slotted([slot=\"actions\"]),\r\n  :host([orientation=\"horizontal\"]) ::slotted([slot=\"footer\"]) {\r\n    flex-direction: column;\r\n  }\r\n  :host([orientation=\"horizontal\"]) .base,\r\n  :host([orientation=\"vertical\"]) ::slotted([slot=\"header\"]),\r\n  :host([orientation=\"vertical\"]) ::slotted([slot=\"actions\"]),\r\n  :host([orientation=\"vertical\"]) ::slotted([slot=\"footer\"]) {\r\n    flex-direction: row;\r\n  }\r\n  :host([orientation=\"horizontal\"]) ::slotted(img),\r\n  :host([orientation=\"horizontal\"]) ::slotted(video) {\r\n    aspect-ratio: 16 / 9;\r\n  }\r\n  .has-content:not(.has-default) slot[name=\"content\"],\r\n  .has-content.has-default slot:not([name]) {\r\n    display: inherit;\r\n    flex-direction: inherit;\r\n    flex: 1 1 auto;\r\n  }\r\n  .has-header slot[name=\"header\"],\r\n  .has-actions slot[name=\"actions\"],\r\n  .has-footer slot[name=\"footer\"] {\r\n    display: inherit;\r\n    flex-direction: inherit;\r\n    flex: none;\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n    margin-inline: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n    margin-block-start: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"])\r\n    .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n    slot[name=\"content\"] {\r\n    margin-block-end: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n    margin-block: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n    margin-inline-start: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"])\r\n    .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n    slot[name=\"content\"] {\r\n    margin-inline-end: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n    margin-inline: ${CardToken.padding};\r\n    margin-block-start: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n    margin-inline-start: ${CardToken.padding};\r\n    margin-block: ${CardToken.padding};\r\n  }\r\n  .has-actions slot[name=\"actions\"] {\r\n    margin-inline: ${CardToken.padding};\r\n    margin-block: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-footer slot[name=\"footer\"] {\r\n    margin-inline: ${CardToken.padding};\r\n    margin-block-end: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-footer slot[name=\"footer\"] {\r\n    margin-block: ${CardToken.padding};\r\n    margin-inline-end: ${CardToken.padding};\r\n  }\r\n  a {\r\n    all: unset;\r\n    display: block;\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    right: 0px;\r\n    bottom: 0px;\r\n    z-index: 1;\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n    :host([variant]) .base {\r\n      border-style: solid;\r\n      border-color: CanvasText;\r\n      border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant]:disabled) .base,\r\n    :host([actionable][variant][disabled-interactive]) .base {\r\n      color: GrayText;\r\n      border-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, CSSResult, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/** @private */\r\nfunction cardVariantStyle(variant: CardVariant): CSSResult {\r\n  return css`\r\n    :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS(\"unset\")};\r\n      box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n      border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};\r\n      --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};\r\n      --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};\r\n      --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};\r\n      --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};\r\n      --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};\r\n      --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus .base) {\r\n      border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover .base) {\r\n      border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n      border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      color: ${CardVariantToken[variant].textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus) .base {\r\n      color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover) .base {\r\n      color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n      color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) .base,\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) .base {\r\n      --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-color: color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.containerElevationColor}\r\n          ${CardVariantToken[variant].disabled.containerElevationOpacity},\r\n        transparent\r\n      );\r\n      color: color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},\r\n        transparent\r\n      );\r\n      background-color: ${CardVariantToken[variant].disabled.containerColor &&\r\n      CardVariantToken[variant].disabled.containerOpacity\r\n        ? unsafeCSS(`color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},\r\n        transparent\r\n      )`)\r\n        : unsafeCSS(\"unset\")};\r\n      border-color: ${CardVariantToken[variant].disabled.outlineColor &&\r\n      CardVariantToken[variant].disabled.outlineOpacity\r\n        ? unsafeCSS(`color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},\r\n        transparent\r\n      )`)\r\n        : unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(img),\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(img),\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(video),\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(video) {\r\n      opacity: ${CardVariantToken[variant].disabled.imageOpacity};\r\n    }\r\n  `;\r\n}\r\n\r\n/**\r\n * Appearance variant styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantStyle: CSSResultGroup = [\r\n  cardVariantStyle(\"filled\"),\r\n  cardVariantStyle(\"elevated\"),\r\n  cardVariantStyle(\"outlined\"),\r\n];\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  renderPseudoLink,\r\n  AttachInternals,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  FormSubmitter,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  PressedController,\r\n  KeyboardClick,\r\n  hasAssignedNodes,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"./CardVariant\";\r\n\r\nimport { CardStyle, CardVariantStyle } from \"./styles\";\r\nimport { CardOrientation } from \"./CardOrientation\";\r\n\r\n/**\r\n * A content container for text, images (or other media), and actions in the context of a single subject.\r\n *\r\n * @description\r\n * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,\r\n * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the\r\n * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),\r\n * and `elevated` (for depth and motion with shadow elevation).\r\n *\r\n * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be\r\n * presented inline with surrounding content using the `inline` attribute.\r\n *\r\n * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is\r\n * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default\r\n * slot for custom layouts.\r\n *\r\n * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states\r\n * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,\r\n * and a cohesive user experience in accordance with Material Design 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates each of the dedicated slots of a card.\r\n * ```html\r\n * <m3e-card>\r\n *  <div slot=\"header\">Header section</div>\r\n *  <div slot=\"content\">Content section</div>\r\n *  <div slot=\"actions\">Actions section</div>\r\n *  <div slot=\"footer\">Footer section</div>\r\n * </m3e-card>\r\n * ```\r\n *\r\n * @tag m3e-card\r\n *\r\n * @slot - Renders the content of the card without padding.\r\n * @slot header - Renders the header of the card.\r\n * @slot content - Renders the content of the card with padding.\r\n * @slot actions - Renders the actions of the card.\r\n * @slot footer - Renders the footer of the card.\r\n *\r\n * @attr actionable - Whether the card is \"actionable\" and will respond to use interaction.\r\n * @attr inline - Whether to present the card inline with surrounding content.\r\n * @attr orientation - The orientation of the card.\r\n * @attr variant - The appearance variant of the card.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-card-padding - Internal spacing for all slotted regions\r\n * @cssprop --m3e-card-shape - Corner radius of the card container.\r\n * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.\r\n * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.\r\n * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.\r\n * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.\r\n * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.\r\n * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.\r\n * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.\r\n * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.\r\n * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.\r\n * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.\r\n * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.\r\n * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.\r\n * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.\r\n * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.\r\n * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.\r\n * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.\r\n * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.\r\n * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.\r\n */\r\n@customElement(\"m3e-card\")\r\nexport class M3eCardElement extends KeyboardClick(\r\n  LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => {\r\n        if (this.actionable && !this.disabled && !this.disabledInteractive) {\r\n          this._base?.classList.toggle(\"pressed\", pressed);\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether to present the card inline with surrounding content.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) inline = false;\r\n\r\n  /**\r\n   * Whether the card is \"actionable\" and will respond to use interaction.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) actionable = false;\r\n\r\n  /**\r\n   * The appearance variant of the card.\r\n   * @default \"filled\"\r\n   */\r\n  @property({ reflect: true }) variant: CardVariant = \"filled\";\r\n\r\n  /**\r\n   * The orientation of the card.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: CardOrientation = \"vertical\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    if (this.hasAttribute(\"actionable\")) {\r\n      // If href is specified, the LinkButton mixin changes this to \"link\" if role is \"button\".\r\n      this.role = \"button\";\r\n    }\r\n\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._base?.classList.toggle(\"pressed\", false);\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation\r\n        class=\"elevation\"\r\n        ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n      ></m3e-elevation>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${!this.actionable || this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer\r\n        class=\"state-layer\"\r\n        ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n      ></m3e-state-layer>\r\n      <m3e-ripple\r\n        class=\"ripple\"\r\n        ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n      ></m3e-ripple>\r\n      ${this[renderPseudoLink]()}\r\n      <slot name=\"header\" @slotchange=\"${this.#handleHeaderSlotChange}\"></slot>\r\n      <slot name=\"content\" @slotchange=\"${this.#handleContentSlotChange}\">\r\n        <slot @slotchange=\"${this.#handleDefaultSlotChange}\"></slot>\r\n      </slot>\r\n      <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n      <slot name=\"footer\" @slotchange=\"${this.#handleFooterSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderSlotChange(e: Event): void {\r\n    const assignedNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true });\r\n    const base = this.shadowRoot?.querySelector(\".base\");\r\n    base?.classList.toggle(\"has-header\", assignedNodes.length > 0);\r\n    base?.classList.toggle(\r\n      \"has-header-media\",\r\n      assignedNodes.some((x) => x instanceof HTMLElement && (x.tagName === \"IMG\" || x.tagName === \"VIDEO\")),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleContentSlotChange(): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-content\", this.querySelector(\"[slot='content']\") !== null);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDefaultSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\r\n        \"has-default\",\r\n        hasAssignedNodes(e.target as HTMLSlotElement) && this.querySelector(\"[slot='content']\") === null,\r\n      );\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleFooterSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-footer\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n\r\n    if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n      this.removeAttribute(\"tabindex\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n      this.removeAttribute(\"tabindex\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled || this.disabledInteractive) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-card\": M3eCardElement;\r\n  }\r\n}\r\n"],"names":["CardToken","unsafeCSS","DesignToken","shape","corner","medium","CardVariantToken","filled","textColor","color","onSurface","containerColor","surfaceContainerHighest","containerElevation","elevation","level0","disabled","textOpacity","imageOpacity","surfaceVariant","containerElevationColor","containerElevationOpacity","containerOpacity","hover","stateLayerColor","stateLayerOpacity","state","hoverStateLayerOpacity","level1","focus","focusStateLayerOpacity","pressed","pressedStateLayerOpacity","elevated","surfaceContainerLow","surface","level2","outlined","outlineColor","outlineVariant","outlineThickness","outline","outlineOpacity","CardStyle","css","motion","duration","short4","easing","standard","cardVariantStyle","variant","CardVariantStyle","M3eCardElement","KeyboardClick","LinkButton","FormSubmitter","Focusable","DisabledInteractive","Disabled","AttachInternals","LitElement","constructor","super","_M3eCardElement_clickHandler","set","this","e","__classPrivateFieldGet","call","inline","actionable","orientation","PressedController","isPressedKey","key","callback","disabledInteractive","_base","classList","toggle","connectedCallback","hasAttribute","role","addEventListener","disconnectedCallback","removeEventListener","render","html","renderPseudoLink","_M3eCardElement_instances","_M3eCardElement_handleHeaderSlotChange","_M3eCardElement_handleContentSlotChange","_M3eCardElement_handleDefaultSlotChange","_M3eCardElement_handleActionsSlotChange","_M3eCardElement_handleFooterSlotChange","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","removeAttribute","update","changedProperties","assignedNodes","target","flatten","base","shadowRoot","querySelector","length","some","HTMLElement","tagName","hasAssignedNodes","preventDefault","stopImmediatePropagation","styles","__decorate","query","prototype","property","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"card.min.js","sources":["../../src/card/styles/CardToken.ts","../../src/card/styles/CardVariantToken.ts","../../src/card/styles/CardStyle.ts","../../src/card/styles/CardVariantStyle.ts","../../src/card/CardElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardToken = {\r\n  padding: unsafeCSS(\"var(--m3e-card-padding, 1rem)\"),\r\n  shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\n/** @private */\r\ntype _CardVariantToken = {\r\n  textColor: CSSResult;\r\n  containerColor: CSSResult;\r\n  containerElevation: CSSResult;\r\n  outlineColor?: CSSResult;\r\n  outlineThickness?: CSSResult;\r\n  disabled: {\r\n    textColor: CSSResult;\r\n    textOpacity: CSSResult;\r\n    imageOpacity: CSSResult;\r\n    containerColor?: CSSResult;\r\n    containerOpacity?: CSSResult;\r\n    containerElevation: CSSResult;\r\n    containerElevationColor: CSSResult;\r\n    containerElevationOpacity: CSSResult;\r\n    outlineColor?: CSSResult;\r\n    outlineOpacity?: CSSResult;\r\n  };\r\n  hover: {\r\n    textColor: CSSResult;\r\n    stateLayerColor: CSSResult;\r\n    stateLayerOpacity: CSSResult;\r\n    containerElevation?: CSSResult;\r\n    outlineColor?: CSSResult;\r\n  };\r\n  focus: {\r\n    textColor: CSSResult;\r\n    stateLayerColor: CSSResult;\r\n    stateLayerOpacity: CSSResult;\r\n    containerElevation?: CSSResult;\r\n    outlineColor?: CSSResult;\r\n  };\r\n  pressed: {\r\n    textColor: CSSResult;\r\n    stateLayerColor: CSSResult;\r\n    stateLayerOpacity: CSSResult;\r\n    containerElevation?: CSSResult;\r\n    outlineColor?: CSSResult;\r\n  };\r\n};\r\n\r\n/**\r\n * Component design tokens that control the appearance variants of `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantToken: Record<CardVariant, _CardVariantToken> = {\r\n  filled: {\r\n    textColor: unsafeCSS(\r\n      `var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n    ),\r\n    containerColor: unsafeCSS(\r\n      `var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`,\r\n    ),\r\n    containerElevation: unsafeCSS(\r\n      `var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n    ),\r\n    disabled: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      textOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n      ),\r\n      imageOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n      ),\r\n      containerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      containerElevationColor: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      containerElevationOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n      ),\r\n      containerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n      ),\r\n    },\r\n    hover: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n    },\r\n    focus: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n    },\r\n    pressed: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n    },\r\n  },\r\n  elevated: {\r\n    textColor: unsafeCSS(\r\n      `var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n    ),\r\n    containerColor: unsafeCSS(\r\n      `var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`,\r\n    ),\r\n    containerElevation: unsafeCSS(\r\n      `var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`,\r\n    ),\r\n    disabled: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      textOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n      ),\r\n      imageOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n      ),\r\n      containerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n      containerElevationColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      containerElevationOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n      ),\r\n      containerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n      ),\r\n    },\r\n    hover: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`,\r\n      ),\r\n    },\r\n    focus: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n    },\r\n    pressed: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n    },\r\n  },\r\n  outlined: {\r\n    textColor: unsafeCSS(\r\n      `var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n    ),\r\n    containerColor: unsafeCSS(\r\n      `var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surface}))`,\r\n    ),\r\n    containerElevation: unsafeCSS(\r\n      `var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n    ),\r\n    outlineColor: unsafeCSS(\r\n      `var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n    ),\r\n    outlineThickness: unsafeCSS(\"var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))\"),\r\n    disabled: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      textOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n      ),\r\n      imageOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      containerElevationColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      containerElevationOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`,\r\n      ),\r\n      outlineOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`,\r\n      ),\r\n    },\r\n    hover: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n      ),\r\n    },\r\n    focus: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n    },\r\n    pressed: {\r\n      textColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n      ),\r\n      stateLayerOpacity: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n      ),\r\n      containerElevation: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n      ),\r\n      outlineColor: unsafeCSS(\r\n        `var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n      ),\r\n    },\r\n  },\r\n} as const;\r\n","import { css, CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardToken } from \"./CardToken\";\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardStyle: CSSResult = css`\r\n  :host {\r\n    outline: none;\r\n  }\r\n  :host(:not([inline])) {\r\n    display: block;\r\n  }\r\n  :host(:not([inline])) .base {\r\n    display: flex;\r\n  }\r\n  :host([inline]) {\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n  }\r\n  :host([inline]) .base {\r\n    display: inline-flex;\r\n  }\r\n  .base {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${CardToken.shape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host([actionable]) {\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host([actionable]:not(:disabled):not([disabled-interactive])) {\r\n    cursor: pointer;\r\n  }\r\n  :host([actionable][disabled-interactive]) {\r\n    cursor: not-allowed;\r\n  }\r\n  :host(:not([actionable])) .focus-ring,\r\n  :host(:not([actionable])) .state-layer,\r\n  :host(:not([actionable])) .ripple {\r\n    display: none;\r\n  }\r\n  :host([variant=\"outlined\"]) .base {\r\n    border-style: solid;\r\n  }\r\n  ::slotted([slot=\"content\"]) {\r\n    flex: 1 1 auto;\r\n  }\r\n  ::slotted(img),\r\n  ::slotted(video) {\r\n    inset: 0;\r\n    object-fit: cover;\r\n  }\r\n  ::slotted(img[slot=\"header\"]),\r\n  ::slotted(video[slot=\"header\"]) {\r\n    border-radius: ${CardToken.shape};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  ::slotted([slot=\"header\"]),\r\n  ::slotted([slot=\"actions\"]),\r\n  ::slotted([slot=\"footer\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  :host([orientation=\"vertical\"]) .base,\r\n  :host([orientation=\"horizontal\"]) ::slotted([slot=\"header\"]),\r\n  :host([orientation=\"horizontal\"]) ::slotted([slot=\"actions\"]),\r\n  :host([orientation=\"horizontal\"]) ::slotted([slot=\"footer\"]) {\r\n    flex-direction: column;\r\n  }\r\n  :host([orientation=\"horizontal\"]) .base,\r\n  :host([orientation=\"vertical\"]) ::slotted([slot=\"header\"]),\r\n  :host([orientation=\"vertical\"]) ::slotted([slot=\"actions\"]),\r\n  :host([orientation=\"vertical\"]) ::slotted([slot=\"footer\"]) {\r\n    flex-direction: row;\r\n  }\r\n  :host([orientation=\"horizontal\"]) ::slotted(img),\r\n  :host([orientation=\"horizontal\"]) ::slotted(video) {\r\n    aspect-ratio: 16 / 9;\r\n  }\r\n  .has-content:not(.has-default) slot[name=\"content\"],\r\n  .has-content.has-default slot:not([name]) {\r\n    display: inherit;\r\n    flex-direction: inherit;\r\n    flex: 1 1 auto;\r\n  }\r\n  .has-header slot[name=\"header\"],\r\n  .has-actions slot[name=\"actions\"],\r\n  .has-footer slot[name=\"footer\"] {\r\n    display: inherit;\r\n    flex-direction: inherit;\r\n    flex: none;\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n    margin-inline: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n    margin-block-start: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"])\r\n    .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n    slot[name=\"content\"] {\r\n    margin-block-end: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n    margin-block: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n    margin-inline-start: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"])\r\n    .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n    slot[name=\"content\"] {\r\n    margin-inline-end: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n    margin-inline: ${CardToken.padding};\r\n    margin-block-start: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n    margin-inline-start: ${CardToken.padding};\r\n    margin-block: ${CardToken.padding};\r\n  }\r\n  .has-actions slot[name=\"actions\"] {\r\n    margin-inline: ${CardToken.padding};\r\n    margin-block: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"vertical\"]) .has-footer slot[name=\"footer\"] {\r\n    margin-inline: ${CardToken.padding};\r\n    margin-block-end: ${CardToken.padding};\r\n  }\r\n  :host([orientation=\"horizontal\"]) .has-footer slot[name=\"footer\"] {\r\n    margin-block: ${CardToken.padding};\r\n    margin-inline-end: ${CardToken.padding};\r\n  }\r\n  a {\r\n    all: unset;\r\n    display: block;\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    right: 0px;\r\n    bottom: 0px;\r\n    z-index: 1;\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n    :host([variant]) .base {\r\n      border-style: solid;\r\n      border-color: CanvasText;\r\n      border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant]:disabled) .base,\r\n    :host([actionable][variant][disabled-interactive]) .base {\r\n      color: GrayText;\r\n      border-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, CSSResult, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/** @private */\r\nfunction cardVariantStyle(variant: CardVariant): CSSResult {\r\n  return css`\r\n    :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS(\"unset\")};\r\n      box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n      border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};\r\n      --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};\r\n      --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};\r\n      --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};\r\n      --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};\r\n      --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};\r\n      --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus .base) {\r\n      border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover .base) {\r\n      border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n      border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n      color: ${CardVariantToken[variant].textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus) .base {\r\n      color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover) .base {\r\n      color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n      color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) .base,\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) .base {\r\n      --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS(\"unset\")};\r\n      --m3e-elevation-color: color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.containerElevationColor}\r\n          ${CardVariantToken[variant].disabled.containerElevationOpacity},\r\n        transparent\r\n      );\r\n      color: color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},\r\n        transparent\r\n      );\r\n      background-color: ${CardVariantToken[variant].disabled.containerColor &&\r\n      CardVariantToken[variant].disabled.containerOpacity\r\n        ? unsafeCSS(`color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},\r\n        transparent\r\n      )`)\r\n        : unsafeCSS(\"unset\")};\r\n      border-color: ${CardVariantToken[variant].disabled.outlineColor &&\r\n      CardVariantToken[variant].disabled.outlineOpacity\r\n        ? unsafeCSS(`color-mix(\r\n        in srgb,\r\n        ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},\r\n        transparent\r\n      )`)\r\n        : unsafeCSS(\"unset\")};\r\n    }\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(img),\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(img),\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(video),\r\n    :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(video) {\r\n      opacity: ${CardVariantToken[variant].disabled.imageOpacity};\r\n    }\r\n  `;\r\n}\r\n\r\n/**\r\n * Appearance variant styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantStyle: CSSResultGroup = [\r\n  cardVariantStyle(\"filled\"),\r\n  cardVariantStyle(\"elevated\"),\r\n  cardVariantStyle(\"outlined\"),\r\n];\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  renderPseudoLink,\r\n  AttachInternals,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  FormSubmitter,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  PressedController,\r\n  KeyboardClick,\r\n  hasAssignedNodes,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"./CardVariant\";\r\n\r\nimport { CardStyle, CardVariantStyle } from \"./styles\";\r\nimport { CardOrientation } from \"./CardOrientation\";\r\n\r\n/**\r\n * A content container for text, images (or other media), and actions in the context of a single subject.\r\n *\r\n * @description\r\n * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,\r\n * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the\r\n * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),\r\n * and `elevated` (for depth and motion with shadow elevation).\r\n *\r\n * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be\r\n * presented inline with surrounding content using the `inline` attribute.\r\n *\r\n * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is\r\n * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default\r\n * slot for custom layouts.\r\n *\r\n * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states\r\n * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,\r\n * and a cohesive user experience in accordance with Material Design 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates each of the dedicated slots of a card.\r\n * ```html\r\n * <m3e-card>\r\n *  <div slot=\"header\">Header section</div>\r\n *  <div slot=\"content\">Content section</div>\r\n *  <div slot=\"actions\">Actions section</div>\r\n *  <div slot=\"footer\">Footer section</div>\r\n * </m3e-card>\r\n * ```\r\n *\r\n * @tag m3e-card\r\n *\r\n * @slot - Renders the content of the card without padding.\r\n * @slot header - Renders the header of the card.\r\n * @slot content - Renders the content of the card with padding.\r\n * @slot actions - Renders the actions of the card.\r\n * @slot footer - Renders the footer of the card.\r\n *\r\n * @attr actionable - Whether the card is \"actionable\" and will respond to use interaction.\r\n * @attr inline - Whether to present the card inline with surrounding content.\r\n * @attr orientation - The orientation of the card.\r\n * @attr variant - The appearance variant of the card.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-card-padding - Internal spacing for all slotted regions\r\n * @cssprop --m3e-card-shape - Corner radius of the card container.\r\n * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.\r\n * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.\r\n * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.\r\n * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.\r\n * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.\r\n * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.\r\n * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.\r\n * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.\r\n * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.\r\n * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.\r\n * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.\r\n * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.\r\n * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.\r\n * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.\r\n * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.\r\n * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.\r\n * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.\r\n * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.\r\n */\r\n@customElement(\"m3e-card\")\r\nexport class M3eCardElement extends KeyboardClick(\r\n  LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => {\r\n        if (this.actionable && !this.disabled && !this.disabledInteractive) {\r\n          this._base?.classList.toggle(\"pressed\", pressed);\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether to present the card inline with surrounding content.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) inline = false;\r\n\r\n  /**\r\n   * Whether the card is \"actionable\" and will respond to use interaction.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) actionable = false;\r\n\r\n  /**\r\n   * The appearance variant of the card.\r\n   * @default \"filled\"\r\n   */\r\n  @property({ reflect: true }) variant: CardVariant = \"filled\";\r\n\r\n  /**\r\n   * The orientation of the card.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: CardOrientation = \"vertical\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    if (this.hasAttribute(\"actionable\")) {\r\n      // If href is specified, the LinkButton mixin changes this to \"link\" if role is \"button\".\r\n      this.role = \"button\";\r\n    }\r\n\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._base?.classList.toggle(\"pressed\", false);\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation\r\n        class=\"elevation\"\r\n        ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n      ></m3e-elevation>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${!this.actionable || this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer\r\n        class=\"state-layer\"\r\n        ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n      ></m3e-state-layer>\r\n      <m3e-ripple\r\n        class=\"ripple\"\r\n        ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n      ></m3e-ripple>\r\n      ${this[renderPseudoLink]()}\r\n      <slot name=\"header\" @slotchange=\"${this.#handleHeaderSlotChange}\"></slot>\r\n      <slot name=\"content\" @slotchange=\"${this.#handleContentSlotChange}\">\r\n        <slot @slotchange=\"${this.#handleDefaultSlotChange}\"></slot>\r\n      </slot>\r\n      <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n      <slot name=\"footer\" @slotchange=\"${this.#handleFooterSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderSlotChange(e: Event): void {\r\n    const assignedNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true });\r\n    const base = this.shadowRoot?.querySelector(\".base\");\r\n    base?.classList.toggle(\"has-header\", assignedNodes.length > 0);\r\n    base?.classList.toggle(\r\n      \"has-header-media\",\r\n      assignedNodes.some((x) => x instanceof HTMLElement && (x.tagName === \"IMG\" || x.tagName === \"VIDEO\")),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleContentSlotChange(): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-content\", this.querySelector(\"[slot='content']\") !== null);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDefaultSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\r\n        \"has-default\",\r\n        hasAssignedNodes(e.target as HTMLSlotElement) && this.querySelector(\"[slot='content']\") === null,\r\n      );\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleFooterSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-footer\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n\r\n    if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n      this.removeAttribute(\"tabindex\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n      this.removeAttribute(\"tabindex\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled || this.disabledInteractive) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-card\": M3eCardElement;\r\n  }\r\n}\r\n"],"names":["CardToken","unsafeCSS","DesignToken","shape","corner","medium","CardVariantToken","filled","textColor","color","onSurface","containerColor","surfaceContainerHighest","containerElevation","elevation","level0","disabled","textOpacity","imageOpacity","surfaceVariant","containerElevationColor","containerElevationOpacity","containerOpacity","hover","stateLayerColor","stateLayerOpacity","state","hoverStateLayerOpacity","level1","focus","focusStateLayerOpacity","pressed","pressedStateLayerOpacity","elevated","surfaceContainerLow","surface","level2","outlined","outlineColor","outlineVariant","outlineThickness","outline","outlineOpacity","CardStyle","css","motion","duration","short4","easing","standard","cardVariantStyle","variant","CardVariantStyle","M3eCardElement","KeyboardClick","LinkButton","FormSubmitter","Focusable","DisabledInteractive","Disabled","AttachInternals","LitElement","constructor","super","_M3eCardElement_clickHandler","set","this","e","__classPrivateFieldGet","call","inline","actionable","orientation","PressedController","isPressedKey","key","callback","disabledInteractive","_base","classList","toggle","connectedCallback","hasAttribute","role","addEventListener","disconnectedCallback","removeEventListener","render","html","renderPseudoLink","_M3eCardElement_instances","_M3eCardElement_handleHeaderSlotChange","_M3eCardElement_handleContentSlotChange","_M3eCardElement_handleDefaultSlotChange","_M3eCardElement_handleActionsSlotChange","_M3eCardElement_handleFooterSlotChange","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","removeAttribute","update","changedProperties","assignedNodes","target","flatten","base","shadowRoot","querySelector","length","some","HTMLElement","tagName","hasAssignedNodes","preventDefault","stopImmediatePropagation","styles","__decorate","query","prototype","property","type","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/chips.js

@@ -5,7 +5,7 @@
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
-import { AttachInternals, isDisabledMixin, isDisabledInteractiveMixin, isLinkButtonMixin, renderPseudoLink, setCustomState, hasAssignedNodes, getTextContent, DesignToken, customElement, FormSubmitter, LinkButton, KeyboardClick, Focusable, DisabledInteractive, Disabled, Role, Vertical, Selected, Labelled, Dirty, Touched, FormAssociated, formValue, EventAttribute, RequiredConstraintValidation, Required, ConstraintValidation } from '@m3e/web/core';
+import { AttachInternals, isDisabledMixin, isDisabledInteractiveMixin, isLinkButtonMixin, renderPseudoLink, setCustomState, hasAssignedNodes, getTextContent, DesignToken, customElement, FormSubmitter, LinkButton, KeyboardClick, Focusable, DisabledInteractive, Disabled, Role, Vertical, Selected, Labelled, Dirty, Touched, FormAssociated, formValue, EventAttribute, RequiredConstraintValidation, Required, ConstraintValidation, registerStyleSheet } from '@m3e/web/core';
 import { query, property } from 'lit/decorators.js';
 import { selectionManager, SelectionManager, ListManager, ListKeyManager } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -963,11 +963,7 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
   }
 };
 (() => {
-  if (typeof window !== "undefined") {
-    const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`.toString());
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
-  }
+  registerStyleSheet(css`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`);
 })();
 /** The styles of the element. */
 M3eInputChipSetElement.styles = [M3eChipSetElement.styles, css`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`];