@universal-material/web 3.0.0 → 3.0.2

package/button/icon-button.d.ts

@@ -1,7 +1,7 @@
 import { CSSResult, HTMLTemplateResult, nothing } from 'lit';
-import '../ripple/ripple';
+import '../ripple/ripple.js';
 import { ButtonBase } from './button-base';
-export declare class IconButton extends ButtonBase {
+export declare class UmIconButton extends ButtonBase {
     static styles: CSSResult | CSSResult[];
     variant: 'standard' | 'filled' | 'tonal' | 'outlined';
     /**
@@ -20,7 +20,6 @@ export declare class IconButton extends ButtonBase {
      * The `aria-label` of the button when the button is toggleable and selected.
      */
     ariaLabelSelected: string;
-    type: 'submit' | 'button' | 'reset';
     private readonly selectedIcons;
     protected renderContent(): HTMLTemplateResult;
     protected handleClick(_: UIEvent): void;
@@ -29,7 +28,7 @@ export declare class IconButton extends ButtonBase {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-icon-button': IconButton;
+        'u-icon-button': UmIconButton;
     }
 }
 //# sourceMappingURL=icon-button.d.ts.map

package/button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAQ,kBAAkB,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAGtE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CA2E7C;IAEyB,OAAO,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAc;IAE9F;;;OAGG;IACwB,MAAM,UAAS;IAEiC,gBAAgB,UAAS;IAEpG;;;;OAIG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IAC2C,iBAAiB,SAAM;IAE5D,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAGxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;cAE5B,aAAa,IAAI,kBAAkB;cAUnC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAMvC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAMvD,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,UAAU,CAAC;KAC7B;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,kBAAkB,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,qBACa,YAAa,SAAQ,UAAU;IAE1C,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAA8B;IAElD,OAAO,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAc;IAE9F;;;OAGG;IACwB,MAAM,UAAS;IAEiC,gBAAgB,UAAS;IAEpG;;;;OAIG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IAC2C,iBAAiB,SAAM;IAGrE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;cAE5B,aAAa,IAAI,kBAAkB;cAUnC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAMvC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAMvD,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/button/icon-button.js

@@ -4,11 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-import '../ripple/ripple';
+import '../ripple/ripple.js';
 import { ButtonBase } from './button-base';
-let IconButton = class IconButton extends ButtonBase {
+import { styles as buttonBaseStyles } from './button-base.styles';
+import { styles } from './icon-button.styles';
+let UmIconButton = class UmIconButton extends ButtonBase {
     constructor() {
         super(...arguments);
         this.variant = 'standard';
@@ -28,7 +30,6 @@ let IconButton = class IconButton extends ButtonBase {
          * The `aria-label` of the button when the button is toggleable and selected.
          */
         this.ariaLabelSelected = '';
-        this.type = 'button';
     }
     renderContent() {
         return html `
@@ -52,102 +53,27 @@ let IconButton = class IconButton extends ButtonBase {
         this.hasSelectionIcon = this.selectedIcons.length > 0;
     }
 };
-IconButton.styles = [
-    ButtonBase.styles,
-    css `
-  
-      :host {
-        --_surface-container-highest-color: var(--u-surface-container-highest-color, #e6e0e9);
-        
-        width: var(--u-icon-button-size, 2.5rem);
-        height: var(--u-icon-button-size, 2.5rem);
-        border-radius: var(--u-icon-button-shape, 9999px);
-        font-family: var(--u-font-family-base, system-ui);
-        
-      }
-
-      .icon {
-        display: inline-block;
-        width: var(--u-icon-button-icon-size, 1.5rem);
-        height: var(--u-icon-button-icon-size, 1.5rem);
-        font-size: var(--u-icon-button-icon-size, 1.5rem);
-        line-height: var(--u-icon-button-icon-size, 1.5rem);
-      }
-      
-      .icon.icon-selected {
-        display: none;
-      }
-      
-      :host([selected]) .icon:not(.icon-selected) {
-        display: none;
-      }
-      
-      :host([selected]) .icon.icon-selected {
-        display: inline-block;
-      }
-
-      :host([variant="filled"]) {
-        background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));
-        color: var(--u-filled-icon-button-unselected-text-color, var(--_primary-color));
-      }
-
-      :host([variant="tonal"]) {
-        background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));
-        color: var(--u-tonal-icon-button-unselected-text-color, var(--u-on-surface-variant-color, #49454f));
-      }
-      
-      :host([selected][variant="filled"]),
-      :host([variant="filled"]:not([has-selection-icon])) {
-        background-color: var(--u-filled-icon-button-background-color, var(--_primary-color));
-        color: var(--u-filled-icon-button-text-color, var(--u-on-primary-color, #fff));
-      }
-  
-      :host([selected][variant="tonal"]),
-      :host([variant="tonal"]:not([has-selection-icon])) {
-        background-color: var(--u-tonal-icon-button-background-color, var(--u-secondary-container-color, #e8def8));
-        color: var(--u-tonal-icon-button-text-color, var(--u-on-secondary-container-color, #1d192b));
-      }
-
-      :host([variant="standard"]),
-      :host([variant="outlined"]) {
-        color: var(--u-on-surface-variant-color, #49454f);
-      }
-  
-      :host([variant="outlined"]) {
-        border: 1px solid var(--u-outline-color, #79747e);
-      }
-
-      :host([selected][variant="outlined"]) {
-        border: none;
-        background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-inverse-surface-color, #322f35));
-        color: var(--u-outlined-icon-button-selected-text-color, var(--u-inverse-on-surface-color, #f5eff7));
-      }
-
-      :host([selected][variant="standard"]) {
-        color: var(--u-standard-icon-button-selected-text-color, var(--_primary-color));
-      }
-    `
-];
+UmIconButton.styles = [buttonBaseStyles, styles];
 __decorate([
     property({ reflect: true })
-], IconButton.prototype, "variant", void 0);
+], UmIconButton.prototype, "variant", void 0);
 __decorate([
     property({ type: Boolean })
-], IconButton.prototype, "toggle", void 0);
+], UmIconButton.prototype, "toggle", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-selection-icon', reflect: true })
-], IconButton.prototype, "hasSelectionIcon", void 0);
+], UmIconButton.prototype, "hasSelectionIcon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], IconButton.prototype, "selected", void 0);
+], UmIconButton.prototype, "selected", void 0);
 __decorate([
     property({ attribute: 'aria-label-selected' })
-], IconButton.prototype, "ariaLabelSelected", void 0);
+], UmIconButton.prototype, "ariaLabelSelected", void 0);
 __decorate([
     queryAssignedElements({ slot: 'selected', flatten: true })
-], IconButton.prototype, "selectedIcons", void 0);
-IconButton = __decorate([
+], UmIconButton.prototype, "selectedIcons", void 0);
+UmIconButton = __decorate([
     customElement('u-icon-button')
-], IconButton);
-export { IconButton };
+], UmIconButton);
+export { UmIconButton };
 //# sourceMappingURL=icon-button.js.map

package/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,GAAG,EAAa,IAAI,EAA8B,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAEjF,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA+EsB,YAAO,GAAiD,UAAU,CAAC;QAE9F;;;WAGG;QACwB,WAAM,GAAG,KAAK,CAAC;QAEiC,qBAAgB,GAAG,KAAK,CAAC;QAEpG;;;;WAIG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;WAEG;QAC2C,sBAAiB,GAAG,EAAE,CAAC;QAE5D,SAAI,GAAkC,QAAQ,CAAC;IA8B1D,CAAC;IAzBoB,aAAa;QAE9B,OAAO,IAAI,CAAA;;;6CAG8B,IAAI,CAAC,gBAAgB;;KAE7D,CAAC;IACJ,CAAC;IAEkB,WAAW,CAAC,CAAU;QACvC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAEQ,YAAY;QACnB,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,KAAK,CAAC,YAAY,EAAE;YAChD,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACxD,CAAC;;AAhIe,iBAAM,GAA4B;IACrC,UAAU,CAAC,MAAM;IAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;CACF,AA3EqB,CA2EpB;AAEyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAoE;AAMnE;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAgB;AAEiC;IAA1E,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAA0B;AAO1D;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAKb;IAA7C,QAAQ,CAAC,EAAC,SAAS,EAAE,qBAAqB,EAAC,CAAC;qDAAwB;AAKpD;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACV;AAxGpC,UAAU;IADtB,aAAa,CAAC,eAAe,CAAC;GAClB,UAAU,CAmItB","sourcesContent":["import {css, CSSResult, html, HTMLTemplateResult, nothing} from 'lit';\nimport {customElement, property, queryAssignedElements} from 'lit/decorators.js';\n\nimport '../ripple/ripple';\nimport {ButtonBase} from './button-base';\n\n@customElement('u-icon-button')\nexport class IconButton extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [\n    <CSSResult>ButtonBase.styles,\n    css`\n  \n      :host {\n        --_surface-container-highest-color: var(--u-surface-container-highest-color, #e6e0e9);\n        \n        width: var(--u-icon-button-size, 2.5rem);\n        height: var(--u-icon-button-size, 2.5rem);\n        border-radius: var(--u-icon-button-shape, 9999px);\n        font-family: var(--u-font-family-base, system-ui);\n        \n      }\n\n      .icon {\n        display: inline-block;\n        width: var(--u-icon-button-icon-size, 1.5rem);\n        height: var(--u-icon-button-icon-size, 1.5rem);\n        font-size: var(--u-icon-button-icon-size, 1.5rem);\n        line-height: var(--u-icon-button-icon-size, 1.5rem);\n      }\n      \n      .icon.icon-selected {\n        display: none;\n      }\n      \n      :host([selected]) .icon:not(.icon-selected) {\n        display: none;\n      }\n      \n      :host([selected]) .icon.icon-selected {\n        display: inline-block;\n      }\n\n      :host([variant=\"filled\"]) {\n        background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n        color: var(--u-filled-icon-button-unselected-text-color, var(--_primary-color));\n      }\n\n      :host([variant=\"tonal\"]) {\n        background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n        color: var(--u-tonal-icon-button-unselected-text-color, var(--u-on-surface-variant-color, #49454f));\n      }\n      \n      :host([selected][variant=\"filled\"]),\n      :host([variant=\"filled\"]:not([has-selection-icon])) {\n        background-color: var(--u-filled-icon-button-background-color, var(--_primary-color));\n        color: var(--u-filled-icon-button-text-color, var(--u-on-primary-color, #fff));\n      }\n  \n      :host([selected][variant=\"tonal\"]),\n      :host([variant=\"tonal\"]:not([has-selection-icon])) {\n        background-color: var(--u-tonal-icon-button-background-color, var(--u-secondary-container-color, #e8def8));\n        color: var(--u-tonal-icon-button-text-color, var(--u-on-secondary-container-color, #1d192b));\n      }\n\n      :host([variant=\"standard\"]),\n      :host([variant=\"outlined\"]) {\n        color: var(--u-on-surface-variant-color, #49454f);\n      }\n  \n      :host([variant=\"outlined\"]) {\n        border: 1px solid var(--u-outline-color, #79747e);\n      }\n\n      :host([selected][variant=\"outlined\"]) {\n        border: none;\n        background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-inverse-surface-color, #322f35));\n        color: var(--u-outlined-icon-button-selected-text-color, var(--u-inverse-on-surface-color, #f5eff7));\n      }\n\n      :host([selected][variant=\"standard\"]) {\n        color: var(--u-standard-icon-button-selected-text-color, var(--_primary-color));\n      }\n    `\n  ];\n\n  @property({reflect: true}) variant: 'standard' | 'filled' | 'tonal' | 'outlined' = 'standard';\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  @property({type: Boolean, attribute: 'has-selection-icon', reflect: true}) hasSelectionIcon = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the selected icon, or the default icon If no `slot=\"selected\"`\n   * icon is provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n  override type: 'submit' | 'button' | 'reset' = 'button';\n\n  @queryAssignedElements({slot: 'selected', flatten: true})\n  private readonly selectedIcons!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n\n    return html`\n      <span class=\"icon\" aria-hidden=\"true\"><slot></slot></span>\n      <span class=\"icon icon-selected\" aria-hidden=\"true\">\n        <slot name=\"selected\" @slotchange=\"${this.handleSlotChange}\"></slot>\n      </span>\n    `;\n  }\n\n  protected override handleClick(_: UIEvent): void {\n    if (this.toggle) {\n      this.selected = !this.selected;\n    }\n  }\n\n  override getAriaLabel(): string | null | typeof nothing {\n    return this.selected\n      ? this.ariaLabelSelected || super.getAriaLabel()\n      : super.getAriaLabel();\n  }\n\n  private handleSlotChange() {\n    this.hasSelectionIcon = this.selectedIcons.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-icon-button': IconButton;\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAa,IAAI,EAA+B,MAAM,KAAK,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIsB,YAAO,GAAiD,UAAU,CAAC;QAE9F;;;WAGG;QACwB,WAAM,GAAG,KAAK,CAAC;QAEiC,qBAAgB,GAAG,KAAK,CAAC;QAEpG;;;;WAIG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;WAEG;QAC2C,sBAAiB,GAAG,EAAE,CAAC;IA8BvE,CAAC;IAzBoB,aAAa;QAE9B,OAAO,IAAI,CAAA;;;6CAG8B,IAAI,CAAC,gBAAgB;;KAE7D,CAAC;IACJ,CAAC;IAEkB,WAAW,CAAC,CAAU;QACvC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAEQ,YAAY;QACnB,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,KAAK,CAAC,YAAY,EAAE;YAChD,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACxD,CAAC;;AAnDe,mBAAM,GAA4B,CAAC,gBAAgB,EAAE,MAAM,CAAC,AAAtD,CAAuD;AAElD;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAoE;AAMnE;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAgB;AAEiC;IAA1E,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sDAA0B;AAO1D;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAkB;AAKb;IAA7C,QAAQ,CAAC,EAAC,SAAS,EAAE,qBAAqB,EAAC,CAAC;uDAAwB;AAGpD;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDACV;AA3BpC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAsDxB","sourcesContent":["import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport '../ripple/ripple.js';\nimport { ButtonBase } from './button-base';\nimport { styles as buttonBaseStyles } from './button-base.styles';\nimport { styles } from './icon-button.styles';\n\n@customElement('u-icon-button')\nexport class UmIconButton extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];\n\n  @property({reflect: true}) variant: 'standard' | 'filled' | 'tonal' | 'outlined' = 'standard';\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  @property({type: Boolean, attribute: 'has-selection-icon', reflect: true}) hasSelectionIcon = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the selected icon, or the default icon If no `slot=\"selected\"`\n   * icon is provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n  @queryAssignedElements({slot: 'selected', flatten: true})\n  private readonly selectedIcons!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n\n    return html`\n      <span class=\"icon\" aria-hidden=\"true\"><slot></slot></span>\n      <span class=\"icon icon-selected\" aria-hidden=\"true\">\n        <slot name=\"selected\" @slotchange=\"${this.handleSlotChange}\"></slot>\n      </span>\n    `;\n  }\n\n  protected override handleClick(_: UIEvent): void {\n    if (this.toggle) {\n      this.selected = !this.selected;\n    }\n  }\n\n  override getAriaLabel(): string | null | typeof nothing {\n    return this.selected\n      ? this.ariaLabelSelected || super.getAriaLabel()\n      : super.getAriaLabel();\n  }\n\n  private handleSlotChange() {\n    this.hasSelectionIcon = this.selectedIcons.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-icon-button': UmIconButton;\n  }\n}\n"]}

package/button/icon-button.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=icon-button.styles.d.ts.map

package/button/icon-button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmElB,CAAC"}

package/button/icon-button.styles.js

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_surface-container-highest-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));
+    width: var(--u-icon-button-size, 2.5rem);
+    height: var(--u-icon-button-size, 2.5rem);
+    border-radius: var(--u-icon-button-shape-corner, 9999px);
+    font-family: var(--u-font-family-base, system-ui);
+  }
+
+  .icon {
+    display: inline-block;
+    width: var(--u-icon-button-icon-size, 1.5rem);
+    height: var(--u-icon-button-icon-size, 1.5rem);
+    font-size: var(--u-icon-button-icon-size, 1.5rem);
+    line-height: var(--u-icon-button-icon-size, 1.5rem);
+  }
+  .icon.icon-selected {
+    display: none;
+  }
+
+  :host([selected]) .icon:not(.icon-selected) {
+    display: none;
+  }
+  :host([selected]) .icon.icon-selected {
+    display: inline-block;
+  }
+
+  :host([variant=filled]) {
+    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));
+    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));
+  }
+
+  :host([variant=tonal]) {
+    background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));
+    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  :host([selected][variant=filled]),
+  :host([variant=filled]:not([has-selection-icon])) {
+    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));
+    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
+  }
+
+  :host([selected][variant=tonal]),
+  :host([variant=tonal]:not([has-selection-icon])) {
+    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+
+  :host([variant=standard]),
+  :host([variant=outlined]) {
+    color: var(--u-color-on-surface-variant, rgb(73, 69, 79));
+  }
+
+  :host([variant=outlined]) {
+    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));
+  }
+
+  :host([selected][variant=outlined]) {
+    border: none;
+    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
+    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-inverse-on-surface, rgb(245, 239, 247)));
+  }
+
+  :host([selected][variant=standard]) {
+    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));
+  }
+`;
+//# sourceMappingURL=icon-button.styles.js.map

package/button/icon-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_surface-container-highest-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--u-icon-button-size, 2.5rem);\n    height: var(--u-icon-button-size, 2.5rem);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family-base, system-ui);\n  }\n\n  .icon {\n    display: inline-block;\n    width: var(--u-icon-button-icon-size, 1.5rem);\n    height: var(--u-icon-button-icon-size, 1.5rem);\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n    line-height: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-inverse-on-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n  }\n`;\n"]}

package/card/card-content.d.ts

@@ -1,11 +1,13 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
-export declare class CardContent extends LitElement {
-    static styles: import("lit").CSSResult;
+export declare class UmCardContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    hasContent: boolean;
     render(): HTMLTemplateResult;
+    private handleSlotChange;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-card-content': CardContent;
+        'u-card-content': UmCardContent;
     }
 }
 //# sourceMappingURL=card-content.d.ts.map

package/card/card-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.d.ts","sourceRoot":"","sources":["../../src/card/card-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAG9D,qBACa,WAAY,SAAQ,UAAU;IAEzC,OAAgB,MAAM,0BAKpB;IAEO,MAAM,IAAI,kBAAkB;CAGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}
+{"version":3,"file":"card-content.d.ts","sourceRoot":"","sources":["../../src/card/card-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAM3D,qBACa,aAAc,SAAQ,UAAU;IAE3C,OAAgB,MAAM,4BAAwB;IAEsB,UAAU,UAAS;IAE9E,MAAM,IAAI,kBAAkB;IAKrC,OAAO,CAAC,gBAAgB;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/card/card-content.js

@@ -4,21 +4,41 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let CardContent = class CardContent extends LitElement {
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles';
+import { styles } from './card-content.styles';
+let UmCardContent = class UmCardContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasContent = false;
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `
+      <slot @slotchange="${this.handleSlotChange}"></slot>`;
     }
-};
-CardContent.styles = css `
-    :host {
-      display: block;
-      padding: var(--u-card-padding, 16px);
+    handleSlotChange(e) {
+        const slot = e.target;
+        this.hasContent = slot.assignedElements({ flatten: true }).length > 0;
+        if (this.hasContent) {
+            return;
+        }
+        const nodes = slot.assignedNodes({ flatten: true });
+        for (const node of nodes) {
+            if (node.nodeValue?.trim()) {
+                this.hasContent = true;
+                return;
+            }
+        }
+        this.hasContent = false;
     }
-  `;
-CardContent = __decorate([
+};
+UmCardContent.styles = [baseStyles, styles];
+__decorate([
+    property({ type: Boolean, attribute: 'has-content', reflect: true })
+], UmCardContent.prototype, "hasContent", void 0);
+UmCardContent = __decorate([
     customElement('u-card-content')
-], CardContent);
-export { CardContent };
+], UmCardContent);
+export { UmCardContent };
 //# sourceMappingURL=card-content.js.map

package/card/card-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../src/card/card-content.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAqB,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAShC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATe,kBAAM,GAAG,GAAG,CAAA;;;;;GAK3B,AALqB,CAKpB;AAPS,WAAW;IADvB,aAAa,CAAC,gBAAgB,CAAC;GACnB,WAAW,CAYvB","sourcesContent":["import {HTMLTemplateResult, LitElement, css, html} from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('u-card-content')\nexport class CardContent extends LitElement {\n\n  static override styles = css`\n    :host {\n      display: block;\n      padding: var(--u-card-padding, 16px);\n    }\n  `;\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-card-content': CardContent;\n  }\n}\n"]}
+{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../src/card/card-content.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAsB,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAI+D,eAAU,GAAG,KAAK,CAAC;IA2BzF,CAAC;IAzBU,MAAM;QACb,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,gBAAgB,WAAW,CAAC;IAC1D,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,IAAI,GAAoB,CAAC,CAAC,MAAM,CAAC;QAEvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QAEpE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAElD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;;AA5Be,oBAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;AAEsB;IAAnE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAoB;AAJ5E,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA+BzB","sourcesContent":["import { HTMLTemplateResult, LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './card-content.styles';\n\n@customElement('u-card-content')\nexport class UmCardContent extends LitElement {\n\n  static override styles = [baseStyles, styles];\n\n  @property({type: Boolean, attribute: 'has-content', reflect: true}) hasContent = false;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <slot @slotchange=\"${this.handleSlotChange}\"></slot>`;\n  }\n\n  private handleSlotChange(e: Event) {\n    const slot = <HTMLSlotElement>e.target;\n\n    this.hasContent = slot.assignedElements({flatten: true}).length > 0;\n\n    if (this.hasContent) {\n      return;\n    }\n\n    const nodes = slot.assignedNodes({flatten: true});\n\n    for (const node of nodes) {\n      if (node.nodeValue?.trim()) {\n        this.hasContent = true;\n        return;\n      }\n    }\n\n    this.hasContent = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-card-content': UmCardContent;\n  }\n}\n"]}

package/card/card-content.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=card-content.styles.d.ts.map

package/card/card-content.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.styles.d.ts","sourceRoot":"","sources":["../../src/card/card-content.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAYlB,CAAC"}

package/card/card-content.styles.js

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  :host(:has(slot > *)) {
+    display: none;
+  }
+
+  :host([has-content]) {
+    padding: var(--u-card-padding, 16px);
+  }
+`;
+//# sourceMappingURL=card-content.styles.js.map

package/card/card-content.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.styles.js","sourceRoot":"","sources":["../../src/card/card-content.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n`;\n"]}

package/card/card-media.d.ts

@@ -1,12 +1,12 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
-export declare class CardMedia extends LitElement {
-    static styles: import("lit").CSSResult;
+export declare class UmCardMedia extends LitElement {
+    static styles: import("lit").CSSResult[];
     wide: boolean;
     render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-card-media': CardMedia;
+        'u-card-media': UmCardMedia;
     }
 }
 //# sourceMappingURL=card-media.d.ts.map

package/card/card-media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-media.d.ts","sourceRoot":"","sources":["../../src/card/card-media.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAG9D,qBACa,SAAU,SAAQ,UAAU;IAEvC,OAAgB,MAAM,0BAUpB;IAEwC,IAAI,UAAS;IAE9C,MAAM,IAAI,kBAAkB;CAItC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
+{"version":3,"file":"card-media.d.ts","sourceRoot":"","sources":["../../src/card/card-media.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAM3D,qBACa,WAAY,SAAQ,UAAU;IAEzC,OAAgB,MAAM,4BAAwB;IAEJ,IAAI,UAAS;IAE9C,MAAM,IAAI,kBAAkB;CAItC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/card/card-media.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, css, html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-let CardMedia = class CardMedia extends LitElement {
+import { styles as baseStyles } from '../shared/base.styles';
+import { styles } from './card-media.styles';
+let UmCardMedia = class UmCardMedia extends LitElement {
     constructor() {
         super(...arguments);
         this.wide = false;
@@ -16,22 +18,12 @@ let CardMedia = class CardMedia extends LitElement {
       <slot></slot>`;
     }
 };
-CardMedia.styles = css `
-    :host {
-      display: block;
-      aspect-ratio: 1;
-      border-radius: var(--u-card-shape, var(--u-shape-corner-medium, 12px));
-    }
-
-    :host([wide]) {
-      aspect-ratio: 16/9;
-    }
-  `;
+UmCardMedia.styles = [baseStyles, styles];
 __decorate([
     property({ type: Boolean, reflect: true })
-], CardMedia.prototype, "wide", void 0);
-CardMedia = __decorate([
+], UmCardMedia.prototype, "wide", void 0);
+UmCardMedia = __decorate([
     customElement('u-card-media')
-], CardMedia);
-export { CardMedia };
+], UmCardMedia);
+export { UmCardMedia };
 //# sourceMappingURL=card-media.js.map

package/card/card-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-media.js","sourceRoot":"","sources":["../../src/card/card-media.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAqB,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAGnD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAcqC,SAAI,GAAG,KAAK,CAAC;IAMzD,CAAC;IAJU,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,CAAC;IACnB,CAAC;;AAjBe,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAU3B,AAVqB,CAUpB;AAEwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAc;AAd5C,SAAS;IADrB,aAAa,CAAC,cAAc,CAAC;GACjB,SAAS,CAoBrB","sourcesContent":["import {HTMLTemplateResult, LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\n@customElement('u-card-media')\nexport class CardMedia extends LitElement {\n\n  static override styles = css`\n    :host {\n      display: block;\n      aspect-ratio: 1;\n      border-radius: var(--u-card-shape, var(--u-shape-corner-medium, 12px));\n    }\n\n    :host([wide]) {\n      aspect-ratio: 16/9;\n    }\n  `;\n\n  @property({type: Boolean, reflect: true}) wide = false;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-card-media': CardMedia;\n  }\n}\n"]}
+{"version":3,"file":"card-media.js","sourceRoot":"","sources":["../../src/card/card-media.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAsB,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIqC,SAAI,GAAG,KAAK,CAAC;IAMzD,CAAC;IAJU,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,CAAC;IACnB,CAAC;;AAPe,kBAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;AAEJ;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAc;AAJ5C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAUvB","sourcesContent":["import { HTMLTemplateResult, LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './card-media.styles';\n\n@customElement('u-card-media')\nexport class UmCardMedia extends LitElement {\n\n  static override styles = [baseStyles, styles];\n\n  @property({type: Boolean, reflect: true}) wide = false;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-card-media': UmCardMedia;\n  }\n}\n"]}

package/card/card-media.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=card-media.styles.d.ts.map

package/card/card-media.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-media.styles.d.ts","sourceRoot":"","sources":["../../src/card/card-media.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAUlB,CAAC"}

package/card/card-media.styles.js

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    aspect-ratio: 1;
+    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));
+  }
+
+  :host([wide]) {
+    aspect-ratio: 16/9;
+  }
+`;
+//# sourceMappingURL=card-media.styles.js.map

package/card/card-media.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-media.styles.js","sourceRoot":"","sources":["../../src/card/card-media.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;CAUzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    aspect-ratio: 1;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([wide]) {\n    aspect-ratio: 16/9;\n  }\n`;\n"]}

package/card/card.d.ts

@@ -1,15 +1,18 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
-import './card-content';
-import './card-media';
-import '../elevation/elevation';
-export declare class Card extends LitElement {
-    static styles: import("lit").CSSResult;
+import './card-content.js';
+import './card-media.js';
+import '../elevation/elevation.js';
+export declare class UmCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The Card variant to render.
+     */
     variant: 'filled' | 'elevated' | 'outlined';
     render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-card': Card;
+        'u-card': UmCard;
     }
 }
 //# sourceMappingURL=card.d.ts.map

package/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAG9D,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,wBAAwB,CAAC;AAEhC,qBACa,IAAK,SAAQ,UAAU;IAElC,OAAgB,MAAM,0BAuBpB;IAEyB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAc;IAE3E,MAAM,IAAI,kBAAkB;CAGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,2BAA2B,CAAC;AAEnC,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAgB,MAAM,4BAAwB;IAE9C;;OAEG;IACwB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAc;IAE3E,MAAM,IAAI,kBAAkB;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}

package/card/card.js

@@ -4,49 +4,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, css, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import './card-content';
-import './card-media';
-import '../elevation/elevation';
-let Card = class Card extends LitElement {
+import { styles as baseStyles } from '../shared/base.styles';
+import { styles } from './card.styles';
+import './card-content.js';
+import './card-media.js';
+import '../elevation/elevation.js';
+let UmCard = class UmCard extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * The Card variant to render.
+         */
         this.variant = 'elevated';
     }
     render() {
-        return html `<u-elevation></u-elevation><slot></slot>`;
+        return html `
+      <u-elevation></u-elevation>
+      <slot name="before-content"></slot>
+      <u-card-content>
+        <slot></slot>
+      </u-card-content>
+      <slot name="after-content"></slot>`;
     }
 };
-Card.styles = css `
-    :host {
-      display: block;
-      position: relative;
-      border-radius: var(--u-card-shape, var(--u-shape-corner-medium, 12px));
-    }
-
-    :host(:not(:first-child)) {
-      margin-top: 8px;
-    }
-    
-    :host([variant=elevated]) {
-      background-color: var(--u-surface-container-low-color);
-      --u-elevation-level: var(--u-elevated-card-elevation-level, 1);
-    }
-    
-    :host([variant=filled]) {
-      background-color: var(--u-surface-container-highest-color);
-    }
-    
-    :host([variant=outlined]) {
-      border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-outline-variant-color, #cac4d0));
-    }
-  `;
+UmCard.styles = [baseStyles, styles];
 __decorate([
     property({ reflect: true })
-], Card.prototype, "variant", void 0);
-Card = __decorate([
+], UmCard.prototype, "variant", void 0);
+UmCard = __decorate([
     customElement('u-card')
-], Card);
-export { Card };
+], UmCard);
+export { UmCard };
 //# sourceMappingURL=card.js.map

package/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAqB,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,wBAAwB,CAAC;AAGzB,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;QA2BsB,YAAO,GAAuC,UAAU,CAAC;IAKtF,CAAC;IAHU,MAAM;QACb,OAAO,IAAI,CAAA,0CAA0C,CAAC;IACxD,CAAC;;AA7Be,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;GAuB3B,AAvBqB,CAuBpB;AAEyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;qCAA0D;AA3BzE,IAAI;IADhB,aAAa,CAAC,QAAQ,CAAC;GACX,IAAI,CAgChB","sourcesContent":["import {HTMLTemplateResult, LitElement, css, html} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './card-content';\nimport './card-media';\nimport '../elevation/elevation';\n\n@customElement('u-card')\nexport class Card extends LitElement {\n\n  static override styles = css`\n    :host {\n      display: block;\n      position: relative;\n      border-radius: var(--u-card-shape, var(--u-shape-corner-medium, 12px));\n    }\n\n    :host(:not(:first-child)) {\n      margin-top: 8px;\n    }\n    \n    :host([variant=elevated]) {\n      background-color: var(--u-surface-container-low-color);\n      --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n    }\n    \n    :host([variant=filled]) {\n      background-color: var(--u-surface-container-highest-color);\n    }\n    \n    :host([variant=outlined]) {\n      border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-outline-variant-color, #cac4d0));\n    }\n  `;\n\n  @property({reflect: true}) variant: 'filled' | 'elevated' | 'outlined' = 'elevated';\n\n  override render(): HTMLTemplateResult {\n    return html`<u-elevation></u-elevation><slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-card': Card;\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,2BAA2B,CAAC;AAG5B,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIL;;WAEG;QACwB,YAAO,GAAuC,UAAU,CAAC;IAWtF,CAAC;IATU,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;yCAM0B,CAAC;IACxC,CAAC;;AAfe,aAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;AAKnB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA0D;AAPzE,MAAM;IADlB,aAAa,CAAC,QAAQ,CAAC;GACX,MAAM,CAkBlB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './card.styles';\nimport './card-content.js';\nimport './card-media.js';\nimport '../elevation/elevation.js';\n\n@customElement('u-card')\nexport class UmCard extends LitElement {\n\n  static override styles = [baseStyles, styles];\n\n  /**\n   * The Card variant to render.\n   */\n  @property({reflect: true}) variant: 'filled' | 'elevated' | 'outlined' = 'elevated';\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <u-elevation></u-elevation>\n      <slot name=\"before-content\"></slot>\n      <u-card-content>\n        <slot></slot>\n      </u-card-content>\n      <slot name=\"after-content\"></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-card': UmCard;\n  }\n}\n"]}