@m3e/card 1.0.6 → 1.1.0

package/dist/index.min.js

@@ -36,238 +36,5 @@ const D={attribute:!0,type:String,converter:R,reflect:!1,hasChanged:M},q=(e=D,t,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function N(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const V=e("var(--m3e-card-padding, 1rem)"),B=e(`var(--m3e-card-shape, ${r.shape.corner.medium});`),W={filled:{textColor:e(`var(--m3e-filled-card-text-color, ${r.color.onSurface})`),containerColor:e(`var(--m3e-filled-card-container-color, ${r.color.surfaceContainerHighest})`),containerElevation:e(`var(--m3e-filled-card-container-elevation, ${r.elevation.level0})`),disabled:{textColor:e(`var(--m3e-filled-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-filled-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-filled-card-disabled-image-opacity, 38%)"),containerColor:e(`var(--m3e-filled-card-disabled-container-color, ${r.color.surfaceVariant})`),containerElevation:e(`var(--m3e-filled-card-disabled-container-elevation, ${r.elevation.level0})`),containerElevationColor:e(`var(--m3e-filled-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)"),containerOpacity:e("var(--m3e-filled-card-disabled-container-opacity, 38%)")},hover:{textColor:e(`var(--m3e-filled-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-hover-container-elevation, ${r.elevation.level1})`)},focus:{textColor:e(`var(--m3e-filled-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-focus-container-elevation, ${r.elevation.level0})`)},pressed:{textColor:e(`var(--m3e-filled-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-pressed-container-elevation, ${r.elevation.level0})`)}},elevated:{textColor:e(`var(--m3e-elevated-card-text-color, ${r.color.onSurface})`),containerColor:e(`var(--m3e-elevated-card-container-color, ${r.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-card-container-elevation, ${r.elevation.level1})`),disabled:{textColor:e(`var(--m3e-elevated-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-elevated-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-elevated-card-disabled-image-opacity, 38%)"),containerColor:e(`var(--m3e-elevated-card-disabled-container-color, ${r.color.surface})`),containerElevation:e(`var(--m3e-elevated-card-disabled-container-elevation, ${r.elevation.level1})`),containerElevationColor:e(`var(--m3e-elevated-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)"),containerOpacity:e("var(--m3e-elevated-card-disabled-container-opacity, 38%)")},hover:{textColor:e(`var(--m3e-elevated-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-hover-container-elevation, ${r.elevation.level2})`)},focus:{textColor:e(`var(--m3e-elevated-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-focus-container-elevation, ${r.elevation.level1})`)},pressed:{textColor:e(`var(--m3e-elevated-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-pressed-container-elevation, ${r.elevation.level1})`)}},outlined:{textColor:e(`var(--m3e-outlined-card-text-color, ${r.color.onSurface})`),containerElevation:e(`var(--m3e-outlined-card-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-outline-color, ${r.color.outlineVariant})`),outlineThickness:e("var(--m3e-outlined-card-outline-thickness, 1px)"),disabled:{textColor:e(`var(--m3e-outlined-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-outlined-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-outlined-card-disabled-image-opacity, 38%)"),containerElevation:e(`var(--m3e-outlined-card-disabled-container-elevation, ${r.elevation.level0})`),containerElevationColor:e(`var(--m3e-outlined-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-card-disabled-outline-color, ${r.color.outline})`),outlineOpacity:e("var(--m3e-outlined-card-disabled-outline-opacity, 12%)")},hover:{textColor:e(`var(--m3e-outlined-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-hover-container-elevation, ${r.elevation.level1})`),outlineColor:e(`var(--m3e-outlined-card-hover-outline-color, ${r.color.outlineVariant})`)},focus:{textColor:e(`var(--m3e-outlined-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-focus-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-focus-outline-color, ${r.color.onSurface})`)},pressed:{textColor:e(`var(--m3e-outlined-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-pressed-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-pressed-outline-color, ${r.color.outlineVariant})`)}}},K=t`
-  :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: ${B};
-    transition: ${e(`background-color ${r.motion.duration.short4} ${r.motion.easing.standard},\n      border-color ${r.motion.duration.short4} ${r.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;
-  }
-  :host([orientation="vertical"]) ::slotted([slot="content"]) {
-    margin-inline: ${V};
-  }
-  :host([orientation="vertical"]) ::slotted([slot="content"]:first-child) {
-    margin-block-start: ${V};
-  }
-  :host([orientation="vertical"]) ::slotted([slot="content"]:last-child) {
-    margin-block-end: ${V};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="content"]) {
-    margin-block: ${V};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="content"]:first-child) {
-    margin-inline-start: ${V};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="content"]:last-child) {
-    margin-inline-end: ${V};
-  }
-  :host([orientation="vertical"]) ::slotted([slot="header"]:not(img):not(video)) {
-    margin-inline: ${V};
-    margin-block-start: ${V};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="header"]:not(img):not(video)) {
-    margin-inline-start: ${V};
-    margin-block: ${V};
-  }
-  ::slotted(img),
-  ::slotted(video) {
-    inset: 0;
-    object-fit: cover;
-  }
-  ::slotted(img[slot="header"]),
-  ::slotted(video[slot="header"]) {
-    border-radius: ${B};
-  }
-  ::slotted([slot="actions"]) {
-    margin-inline: ${V};
-    margin-block: ${V};
-  }
-  ::slotted([slot="actions"][end]) {
-    justify-content: flex-end;
-  }
-  :host([orientation="vertical"]) ::slotted([slot="footer"]) {
-    margin-inline: ${V};
-    margin-block-end: ${V};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="footer"]) {
-    margin-block: ${V};
-    margin-inline-end: ${V};
-  }
-  ::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;
-  }
-  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: ${W.outlined.outlineThickness??e("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 G(o){return t`
-    :host([variant="${e(o)}"]) .base {
-      background-color: ${W[o].containerColor??e("unset")};
-      box-shadow: ${W[o].containerElevation??e("unset")};
-      border-width: ${W[o].outlineThickness??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]) .base {
-      --m3e-state-layer-hover-color: ${W[o].hover.stateLayerColor};
-      --m3e-state-layer-hover-opacity: ${W[o].hover.stateLayerOpacity};
-      --m3e-state-layer-focus-color: ${W[o].focus.stateLayerColor};
-      --m3e-state-layer-focus-opacity: ${W[o].focus.stateLayerOpacity};
-      --m3e-ripple-color: ${W[o].pressed.stateLayerColor};
-      --m3e-ripple-opacity: ${W[o].pressed.stateLayerOpacity};
-      --m3e-elevation-level: ${W[o].containerElevation??e("unset")};
-      --m3e-elevation-hover-level: ${W[o].hover.containerElevation??e("unset")};
-      --m3e-elevation-focus-level: ${W[o].focus.containerElevation??e("unset")};
-      --m3e-elevation-pressed-level: ${W[o].pressed.containerElevation??e("unset")};
-    }
-    :host([variant="${e(o)}"]) .base {
-      border-color: ${W[o].outlineColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]:focus .base) {
-      border-color: ${W[o].focus.outlineColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]:hover .base) {
-      border-color: ${W[o].hover.outlineColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]) .base.pressed {
-      border-color: ${W[o].pressed.outlineColor??e("unset")};
-    }
-    :host([variant="${e(o)}"]) .base {
-      color: ${W[o].textColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]:focus) .base {
-      color: ${W[o].focus.textColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]:hover) .base {
-      color: ${W[o].hover.textColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]) .base.pressed {
-      color: ${W[o].pressed.textColor??e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]:disabled) .base,
-    :host([actionable][variant="${e(o)}"][disabled-interactive]) .base {
-      --m3e-elevation-level: ${W[o].disabled.containerElevation??e("unset")};
-      --m3e-elevation-color: color-mix(
-        in srgb,
-        ${W[o].disabled.containerElevationColor}
-          ${W[o].disabled.containerElevationOpacity},
-        transparent
-      );
-      color: color-mix(
-        in srgb,
-        ${W[o].disabled.textColor} ${W[o].disabled.textOpacity},
-        transparent
-      );
-      background-color: ${W[o].disabled.containerColor&&W[o].disabled.containerOpacity?e(`color-mix(\n        in srgb,\n        ${W[o].disabled.containerColor} ${W[o].disabled.containerOpacity},\n        transparent\n      )`):e("unset")};
-      border-color: ${W[o].disabled.outlineColor&&W[o].disabled.outlineOpacity?e(`color-mix(\n        in srgb,\n        ${W[o].disabled.outlineColor} ${W[o].disabled.outlineOpacity},\n        transparent\n      )`):e("unset")};
-    }
-    :host([actionable][variant="${e(o)}"]:disabled) ::slotted(img),
-    :host([actionable][variant="${e(o)}"][disabled-interactive]) ::slotted(img),
-    :host([actionable][variant="${e(o)}"]:disabled) ::slotted(video),
-    :host([actionable][variant="${e(o)}"][disabled-interactive]) ::slotted(video) {
-      opacity: ${W[o].disabled.imageOpacity};
-    }
-  `}const H=[G("filled"),G("elevated"),G("outlined")];var J,F,Q;let X=class extends(i(s(n(l(c(d(h(o),!0))))))){constructor(){super(),J.add(this),F.set(this,e=>b(this,J,"m",Q).call(this,e)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new v(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",b(this,F,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",b(this,F,"f"))}render(){return a`<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[p]()}
-      <slot name="header"></slot>
-      <slot name="content"><slot></slot></slot>
-      <slot name="actions"></slot>
-      <slot name="footer"></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")}};F=new WeakMap,J=new WeakSet,Q=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},X.styles=[H,K],u([N(".base")],X.prototype,"_base",void 0),u([N(".elevation")],X.prototype,"_elevation",void 0),u([N(".focus-ring")],X.prototype,"_focusRing",void 0),u([N(".state-layer")],X.prototype,"_stateLayer",void 0),u([N(".ripple")],X.prototype,"_ripple",void 0),u([I({type:Boolean})],X.prototype,"inline",void 0),u([I({type:Boolean})],X.prototype,"actionable",void 0),u([I({reflect:!0})],X.prototype,"variant",void 0),u([I({reflect:!0})],X.prototype,"orientation",void 0),X=u([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-card")],X);export{X as M3eCardElement};
+function N(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const V=e("var(--m3e-card-padding, 1rem)"),B=e(`var(--m3e-card-shape, ${r.shape.corner.medium});`),W={filled:{textColor:e(`var(--m3e-filled-card-text-color, ${r.color.onSurface})`),containerColor:e(`var(--m3e-filled-card-container-color, ${r.color.surfaceContainerHighest})`),containerElevation:e(`var(--m3e-filled-card-container-elevation, ${r.elevation.level0})`),disabled:{textColor:e(`var(--m3e-filled-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-filled-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-filled-card-disabled-image-opacity, 38%)"),containerColor:e(`var(--m3e-filled-card-disabled-container-color, ${r.color.surfaceVariant})`),containerElevation:e(`var(--m3e-filled-card-disabled-container-elevation, ${r.elevation.level0})`),containerElevationColor:e(`var(--m3e-filled-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)"),containerOpacity:e("var(--m3e-filled-card-disabled-container-opacity, 38%)")},hover:{textColor:e(`var(--m3e-filled-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-hover-container-elevation, ${r.elevation.level1})`)},focus:{textColor:e(`var(--m3e-filled-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-focus-container-elevation, ${r.elevation.level0})`)},pressed:{textColor:e(`var(--m3e-filled-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-pressed-container-elevation, ${r.elevation.level0})`)}},elevated:{textColor:e(`var(--m3e-elevated-card-text-color, ${r.color.onSurface})`),containerColor:e(`var(--m3e-elevated-card-container-color, ${r.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-card-container-elevation, ${r.elevation.level1})`),disabled:{textColor:e(`var(--m3e-elevated-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-elevated-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-elevated-card-disabled-image-opacity, 38%)"),containerColor:e(`var(--m3e-elevated-card-disabled-container-color, ${r.color.surface})`),containerElevation:e(`var(--m3e-elevated-card-disabled-container-elevation, ${r.elevation.level1})`),containerElevationColor:e(`var(--m3e-elevated-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)"),containerOpacity:e("var(--m3e-elevated-card-disabled-container-opacity, 38%)")},hover:{textColor:e(`var(--m3e-elevated-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-hover-container-elevation, ${r.elevation.level2})`)},focus:{textColor:e(`var(--m3e-elevated-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-focus-container-elevation, ${r.elevation.level1})`)},pressed:{textColor:e(`var(--m3e-elevated-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-pressed-container-elevation, ${r.elevation.level1})`)}},outlined:{textColor:e(`var(--m3e-outlined-card-text-color, ${r.color.onSurface})`),containerElevation:e(`var(--m3e-outlined-card-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-outline-color, ${r.color.outlineVariant})`),outlineThickness:e("var(--m3e-outlined-card-outline-thickness, 1px)"),disabled:{textColor:e(`var(--m3e-outlined-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-outlined-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-outlined-card-disabled-image-opacity, 38%)"),containerElevation:e(`var(--m3e-outlined-card-disabled-container-elevation, ${r.elevation.level0})`),containerElevationColor:e(`var(--m3e-outlined-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-card-disabled-outline-color, ${r.color.outline})`),outlineOpacity:e("var(--m3e-outlined-card-disabled-outline-opacity, 12%)")},hover:{textColor:e(`var(--m3e-outlined-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-hover-container-elevation, ${r.elevation.level1})`),outlineColor:e(`var(--m3e-outlined-card-hover-outline-color, ${r.color.outlineVariant})`)},focus:{textColor:e(`var(--m3e-outlined-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-focus-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-focus-outline-color, ${r.color.onSurface})`)},pressed:{textColor:e(`var(--m3e-outlined-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-pressed-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-pressed-outline-color, ${r.color.outlineVariant})`)}}},K=t`: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: ${B}; transition: ${e(`background-color ${r.motion.duration.short4} ${r.motion.easing.standard},\n      border-color ${r.motion.duration.short4} ${r.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; } :host([orientation="vertical"]) ::slotted([slot="content"]) { margin-inline: ${V}; } :host([orientation="vertical"]) ::slotted([slot="content"]:first-child) { margin-block-start: ${V}; } :host([orientation="vertical"]) ::slotted([slot="content"]:last-child) { margin-block-end: ${V}; } :host([orientation="horizontal"]) ::slotted([slot="content"]) { margin-block: ${V}; } :host([orientation="horizontal"]) ::slotted([slot="content"]:first-child) { margin-inline-start: ${V}; } :host([orientation="horizontal"]) ::slotted([slot="content"]:last-child) { margin-inline-end: ${V}; } :host([orientation="vertical"]) ::slotted([slot="header"]:not(img):not(video)) { margin-inline: ${V}; margin-block-start: ${V}; } :host([orientation="horizontal"]) ::slotted([slot="header"]:not(img):not(video)) { margin-inline-start: ${V}; margin-block: ${V}; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${B}; } ::slotted([slot="actions"]) { margin-inline: ${V}; margin-block: ${V}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } :host([orientation="vertical"]) ::slotted([slot="footer"]) { margin-inline: ${V}; margin-block-end: ${V}; } :host([orientation="horizontal"]) ::slotted([slot="footer"]) { margin-block: ${V}; margin-inline-end: ${V}; } ::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; } 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: ${W.outlined.outlineThickness??e("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 G(o){return t`:host([variant="${e(o)}"]) .base { background-color: ${W[o].containerColor??e("unset")}; box-shadow: ${W[o].containerElevation??e("unset")}; border-width: ${W[o].outlineThickness??e("unset")}; } :host([actionable][variant="${e(o)}"]) .base { --m3e-state-layer-hover-color: ${W[o].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${W[o].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${W[o].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${W[o].focus.stateLayerOpacity}; --m3e-ripple-color: ${W[o].pressed.stateLayerColor}; --m3e-ripple-opacity: ${W[o].pressed.stateLayerOpacity}; --m3e-elevation-level: ${W[o].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${W[o].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${W[o].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${W[o].pressed.containerElevation??e("unset")}; } :host([variant="${e(o)}"]) .base { border-color: ${W[o].outlineColor??e("unset")}; } :host([actionable][variant="${e(o)}"]:focus .base) { border-color: ${W[o].focus.outlineColor??e("unset")}; } :host([actionable][variant="${e(o)}"]:hover .base) { border-color: ${W[o].hover.outlineColor??e("unset")}; } :host([actionable][variant="${e(o)}"]) .base.pressed { border-color: ${W[o].pressed.outlineColor??e("unset")}; } :host([variant="${e(o)}"]) .base { color: ${W[o].textColor??e("unset")}; } :host([actionable][variant="${e(o)}"]:focus) .base { color: ${W[o].focus.textColor??e("unset")}; } :host([actionable][variant="${e(o)}"]:hover) .base { color: ${W[o].hover.textColor??e("unset")}; } :host([actionable][variant="${e(o)}"]) .base.pressed { color: ${W[o].pressed.textColor??e("unset")}; } :host([actionable][variant="${e(o)}"]:disabled) .base, :host([actionable][variant="${e(o)}"][disabled-interactive]) .base { --m3e-elevation-level: ${W[o].disabled.containerElevation??e("unset")}; --m3e-elevation-color: color-mix( in srgb, ${W[o].disabled.containerElevationColor} ${W[o].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${W[o].disabled.textColor} ${W[o].disabled.textOpacity}, transparent ); background-color: ${W[o].disabled.containerColor&&W[o].disabled.containerOpacity?e(`color-mix(\n        in srgb,\n        ${W[o].disabled.containerColor} ${W[o].disabled.containerOpacity},\n        transparent\n      )`):e("unset")}; border-color: ${W[o].disabled.outlineColor&&W[o].disabled.outlineOpacity?e(`color-mix(\n        in srgb,\n        ${W[o].disabled.outlineColor} ${W[o].disabled.outlineOpacity},\n        transparent\n      )`):e("unset")}; } :host([actionable][variant="${e(o)}"]:disabled) ::slotted(img), :host([actionable][variant="${e(o)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${e(o)}"]:disabled) ::slotted(video), :host([actionable][variant="${e(o)}"][disabled-interactive]) ::slotted(video) { opacity: ${W[o].disabled.imageOpacity}; }`}const H=[G("filled"),G("elevated"),G("outlined")];var J,F,Q;let X=class extends(i(s(n(l(c(d(h(o),!0))))))){constructor(){super(),J.add(this),F.set(this,e=>b(this,J,"m",Q).call(this,e)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new v(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",b(this,F,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",b(this,F,"f"))}render(){return a`<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[p]()}<slot name="header"></slot><slot name="content"><slot></slot></slot><slot name="actions"></slot><slot name="footer"></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")}};F=new WeakMap,J=new WeakSet,Q=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},X.styles=[H,K],u([N(".base")],X.prototype,"_base",void 0),u([N(".elevation")],X.prototype,"_elevation",void 0),u([N(".focus-ring")],X.prototype,"_focusRing",void 0),u([N(".state-layer")],X.prototype,"_stateLayer",void 0),u([N(".ripple")],X.prototype,"_ripple",void 0),u([I({type:Boolean})],X.prototype,"inline",void 0),u([I({type:Boolean})],X.prototype,"actionable",void 0),u([I({reflect:!0})],X.prototype,"variant",void 0),u([I({reflect:!0})],X.prototype,"orientation",void 0),X=u([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-card")],X);export{X as M3eCardElement};
 //# sourceMappingURL=index.min.js.map