@universal-material/web 3.0.0

package/button/fab.js

@@ -0,0 +1,144 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ButtonBase } from './button-base';
+let FabButton = class FabButton extends ButtonBase {
+    constructor() {
+        super(...arguments);
+        this.color = 'primary';
+        this.size = 'medium';
+        this.label = null;
+        this.lowered = false;
+    }
+    get extended() {
+        return !!this.label;
+    }
+    renderContent() {
+        const labelTag = html `<span>${this.label}</span>`;
+        return html `
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
+      ${this.label ? labelTag : nothing}
+    `;
+    }
+};
+FabButton.styles = [
+    ButtonBase.styles,
+    css `
+      :host {
+        aspect-ratio: 1;
+        --u-elevation-level: var(--u-fab-button-elevation-level, 3);
+      }
+
+      :host([lowered]) {
+        --u-elevation-level: var(--u-fab-button-elevation-level, 1);
+      }
+
+      @media (hover: hover) {
+        :host(:hover:not(:focus-within):not(:active)) {
+          --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
+        }
+
+        :host(:hover:not(:focus-within):not(:active)[lowered]) {
+          --u-elevation-level: var(--u-fab-button-elevation-level, 2);
+        }
+      }
+
+      @media (hover: hover) {
+        :host(:hover:not(:focus-within):not(:active)) {
+          --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
+        }
+      }
+
+      :host([size="small"]) {
+        width: var(--u-fab-button-small-size, 40px);
+        border-radius: var(--u-fab-button-medium-shape, var(--u-shape-corner-medium, 12px));
+      }
+      
+      :host([size="large"]) {
+        width: var(--u-fab-button-medium-size, 96px);
+        border-radius: var(--u-fab-button-medium-shape, var(--u-shape-corner-extra-large, 28px));
+      }
+
+      :host([extended]),
+      :host([size="medium"]) {
+        width: var(--u-fab-button-medium-size, 56px);
+        border-radius: var(--u-fab-button-medium-shape, var(--u-shape-corner-large, 16px));
+      }
+
+      :host([size="large"]) .icon {
+        font-size: var(--u-fab-button-icon-size, 2rem);
+      }
+
+      :host([extended]),
+      :host([size="small"]) .icon,
+      :host([size="medium"]) .icon {
+        font-size: var(--u-fab-button-icon-size, 1.5rem);
+      }
+
+      :host([extended]) {
+        width: auto;
+        height: var(--u-extended-fab-button-height, 56px);
+        aspect-ratio: auto;
+        min-width: var(--u-extended-fab-button-min-width, 80px);
+      }
+
+      :host([extended]) .button {
+        padding-inline: var(--u-extended-fab-button-padding, 16px 24px);
+      }
+
+      :host([extended]) .icon {
+        margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);
+      }
+
+      :host([color="primary"]) {
+        background-color: var(--u-fab-button-primary-background-color, var(--u-primary-container-color, #eaddff));
+        color: var(--u-fab-button-primary-text-color, var(--u-on-primary-container-color, #21005d));        
+      }
+
+      :host([color="secondary"]) {
+        background-color: var(--u-fab-button-secondary-background-color, var(--u-secondary-container-color, #e8def8));
+        color: var(--u-fab-button-secondary-text-color, var(--u-on-secondary-container-color, #1d192b));        
+      }
+
+      :host([color="tertiary"]) {
+        background-color: var(--u-fab-button-tertiary-background-color, var(--u-tertiary-container-color, #ffd8e4));
+        color: var(--u-fab-button-tertiary-text-color, var(--u-on-tertiary-container-color, #31111d));
+      }
+
+      :host([color="branded"]),
+      :host([color="surface"]) {
+        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-high-color, #ece6f0));
+        color: var(--u-fab-button-surface-text-color, var(--_primary-color));
+      }
+
+      :host([color="branded"][lowered]),
+      :host([color="surface"][lowered]) {
+        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-low-color, #ece6f0));
+      }
+    `
+];
+__decorate([
+    property({ reflect: true })
+], FabButton.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], FabButton.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], FabButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FabButton.prototype, "lowered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FabButton.prototype, "extended", null);
+FabButton = __decorate([
+    customElement('u-fab')
+], FabButton);
+export { FabButton };
+//# sourceMappingURL=fab.js.map

package/button/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,GAAG,EAAa,IAAI,EAAsB,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAGlC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmGsB,UAAK,GAAiE,SAAS,CAAC;QAChF,SAAI,GAAiC,QAAQ,CAAC;QAC9C,UAAK,GAAkB,IAAI,CAAC;QACb,YAAO,GAAG,KAAK,CAAC;IAc5D,CAAC;IAZC,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAEkB,aAAa;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAA,SAAS,IAAI,CAAC,KAAK,SAAS,CAAC;QAElD,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;KAClC,CAAC;IACJ,CAAC;;AAjHe,gBAAM,GAA4B;IACrC,UAAU,CAAC,MAAM;IAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,AA/FqB,CA+FpB;AAEyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiF;AAChF;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA+C;AAC9C;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAA6B;AACb;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiB;AAE1D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAGxC;AA1GU,SAAS;IADrB,aAAa,CAAC,OAAO,CAAC;GACV,SAAS,CAoHrB","sourcesContent":["import {css, CSSResult, html, HTMLTemplateResult, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {ButtonBase} from './button-base';\n\n@customElement('u-fab')\nexport class FabButton extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [\n    <CSSResult>ButtonBase.styles,\n    css`\n      :host {\n        aspect-ratio: 1;\n        --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n      }\n\n      :host([lowered]) {\n        --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n      }\n\n      @media (hover: hover) {\n        :host(:hover:not(:focus-within):not(:active)) {\n          --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n        }\n\n        :host(:hover:not(:focus-within):not(:active)[lowered]) {\n          --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n        }\n      }\n\n      @media (hover: hover) {\n        :host(:hover:not(:focus-within):not(:active)) {\n          --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n        }\n      }\n\n      :host([size=\"small\"]) {\n        width: var(--u-fab-button-small-size, 40px);\n        border-radius: var(--u-fab-button-medium-shape, var(--u-shape-corner-medium, 12px));\n      }\n      \n      :host([size=\"large\"]) {\n        width: var(--u-fab-button-medium-size, 96px);\n        border-radius: var(--u-fab-button-medium-shape, var(--u-shape-corner-extra-large, 28px));\n      }\n\n      :host([extended]),\n      :host([size=\"medium\"]) {\n        width: var(--u-fab-button-medium-size, 56px);\n        border-radius: var(--u-fab-button-medium-shape, var(--u-shape-corner-large, 16px));\n      }\n\n      :host([size=\"large\"]) .icon {\n        font-size: var(--u-fab-button-icon-size, 2rem);\n      }\n\n      :host([extended]),\n      :host([size=\"small\"]) .icon,\n      :host([size=\"medium\"]) .icon {\n        font-size: var(--u-fab-button-icon-size, 1.5rem);\n      }\n\n      :host([extended]) {\n        width: auto;\n        height: var(--u-extended-fab-button-height, 56px);\n        aspect-ratio: auto;\n        min-width: var(--u-extended-fab-button-min-width, 80px);\n      }\n\n      :host([extended]) .button {\n        padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n      }\n\n      :host([extended]) .icon {\n        margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n      }\n\n      :host([color=\"primary\"]) {\n        background-color: var(--u-fab-button-primary-background-color, var(--u-primary-container-color, #eaddff));\n        color: var(--u-fab-button-primary-text-color, var(--u-on-primary-container-color, #21005d));        \n      }\n\n      :host([color=\"secondary\"]) {\n        background-color: var(--u-fab-button-secondary-background-color, var(--u-secondary-container-color, #e8def8));\n        color: var(--u-fab-button-secondary-text-color, var(--u-on-secondary-container-color, #1d192b));        \n      }\n\n      :host([color=\"tertiary\"]) {\n        background-color: var(--u-fab-button-tertiary-background-color, var(--u-tertiary-container-color, #ffd8e4));\n        color: var(--u-fab-button-tertiary-text-color, var(--u-on-tertiary-container-color, #31111d));\n      }\n\n      :host([color=\"branded\"]),\n      :host([color=\"surface\"]) {\n        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-high-color, #ece6f0));\n        color: var(--u-fab-button-surface-text-color, var(--_primary-color));\n      }\n\n      :host([color=\"branded\"][lowered]),\n      :host([color=\"surface\"][lowered]) {\n        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-low-color, #ece6f0));\n      }\n    `\n  ];\n\n  @property({reflect: true}) color: 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded' = 'primary';\n  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\n  @property({reflect: true}) label: string | null = null;\n  @property({type: Boolean, reflect: true}) lowered = false;\n  @property({type: Boolean, reflect: true})\n  get extended(): boolean {\n    return !!this.label;\n  }\n\n  protected override renderContent(): HTMLTemplateResult {\n    const labelTag = html`<span>${this.label}</span>`;\n\n    return html`\n      <span class=\"icon\" aria-hidden=\"true\"><slot name=\"icon\"></slot></span>\n      ${this.label ? labelTag : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab': FabButton;\n  }\n}\n"]}

package/button/icon-button.d.ts

@@ -0,0 +1,35 @@
+import { CSSResult, HTMLTemplateResult, nothing } from 'lit';
+import '../ripple/ripple';
+import { ButtonBase } from './button-base';
+export declare class IconButton extends ButtonBase {
+    static styles: CSSResult | CSSResult[];
+    variant: 'standard' | 'filled' | 'tonal' | 'outlined';
+    /**
+     * When true, the button will toggle between selected and unselected
+     * states
+     */
+    toggle: boolean;
+    hasSelectionIcon: boolean;
+    /**
+     * Sets the selected state. When false, displays the default icon. When true,
+     * displays the selected icon, or the default icon If no `slot="selected"`
+     * icon is provided.
+     */
+    selected: boolean;
+    /**
+     * 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;
+    getAriaLabel(): string | null | typeof nothing;
+    private handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-icon-button': IconButton;
+    }
+}
+//# sourceMappingURL=icon-button.d.ts.map

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

@@ -0,0 +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"}

package/button/icon-button.js

@@ -0,0 +1,153 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import '../ripple/ripple';
+import { ButtonBase } from './button-base';
+let IconButton = class IconButton extends ButtonBase {
+    constructor() {
+        super(...arguments);
+        this.variant = 'standard';
+        /**
+         * When true, the button will toggle between selected and unselected
+         * states
+         */
+        this.toggle = false;
+        this.hasSelectionIcon = false;
+        /**
+         * Sets the selected state. When false, displays the default icon. When true,
+         * displays the selected icon, or the default icon If no `slot="selected"`
+         * icon is provided.
+         */
+        this.selected = false;
+        /**
+         * The `aria-label` of the button when the button is toggleable and selected.
+         */
+        this.ariaLabelSelected = '';
+        this.type = 'button';
+    }
+    renderContent() {
+        return html `
+      <span class="icon" aria-hidden="true"><slot></slot></span>
+      <span class="icon icon-selected" aria-hidden="true">
+        <slot name="selected" @slotchange="${this.handleSlotChange}"></slot>
+      </span>
+    `;
+    }
+    handleClick(_) {
+        if (this.toggle) {
+            this.selected = !this.selected;
+        }
+    }
+    getAriaLabel() {
+        return this.selected
+            ? this.ariaLabelSelected || super.getAriaLabel()
+            : super.getAriaLabel();
+    }
+    handleSlotChange() {
+        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));
+      }
+    `
+];
+__decorate([
+    property({ reflect: true })
+], IconButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconButton.prototype, "toggle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-selection-icon', reflect: true })
+], IconButton.prototype, "hasSelectionIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IconButton.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: 'aria-label-selected' })
+], IconButton.prototype, "ariaLabelSelected", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'selected', flatten: true })
+], IconButton.prototype, "selectedIcons", void 0);
+IconButton = __decorate([
+    customElement('u-icon-button')
+], IconButton);
+export { IconButton };
+//# sourceMappingURL=icon-button.js.map

package/button/icon-button.js.map

@@ -0,0 +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"]}

package/card/button-set.d.ts

@@ -0,0 +1,11 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class ButtonSet extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-button-set': ButtonSet;
+    }
+}
+//# sourceMappingURL=button-set.d.ts.map

package/card/button-set.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-set.d.ts","sourceRoot":"","sources":["../../src/card/button-set.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAG9D,qBACa,SAAU,SAAQ,UAAU;IAEvC,OAAgB,MAAM,0BAOpB;IACO,MAAM,IAAI,kBAAkB;CAGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/card/button-set.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 ButtonSet = class ButtonSet extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ButtonSet.styles = css `
+    :host {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  `;
+ButtonSet = __decorate([
+    customElement('u-button-set')
+], ButtonSet);
+export { ButtonSet };
+//# sourceMappingURL=button-set.js.map

package/card/button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-set.js","sourceRoot":"","sources":["../../src/card/button-set.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,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAU9B,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVe,gBAAM,GAAG,GAAG,CAAA;;;;;;;GAO3B,AAPqB,CAOpB;AATS,SAAS;IADrB,aAAa,CAAC,cAAc,CAAC;GACjB,SAAS,CAarB","sourcesContent":["import {HTMLTemplateResult, LitElement, css, html} from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('u-button-set')\nexport class ButtonSet extends LitElement {\n\n  static override styles = css`\n    :host {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n  `;\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-set': ButtonSet;\n  }\n}\n"]}

package/card/card-content.d.ts

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

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

@@ -0,0 +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"}

package/card/card-content.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+CardContent.styles = css `
+    :host {
+      display: block;
+      padding: var(--u-card-padding, 16px);
+    }
+  `;
+CardContent = __decorate([
+    customElement('u-card-content')
+], CardContent);
+export { CardContent };
+//# sourceMappingURL=card-content.js.map

package/card/card-content.js.map

@@ -0,0 +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"]}

package/card/card-media.d.ts

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

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

@@ -0,0 +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"}

package/card/card-media.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, property } from 'lit/decorators.js';
+let CardMedia = class CardMedia extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.wide = false;
+    }
+    render() {
+        return html `
+      <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;
+    }
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CardMedia.prototype, "wide", void 0);
+CardMedia = __decorate([
+    customElement('u-card-media')
+], CardMedia);
+export { CardMedia };
+//# sourceMappingURL=card-media.js.map

package/card/card-media.js.map

@@ -0,0 +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"]}

package/card/card.d.ts

@@ -0,0 +1,15 @@
+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;
+    variant: 'filled' | 'elevated' | 'outlined';
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-card': Card;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

package/card/card.d.ts.map

@@ -0,0 +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"}

package/card/card.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, property } from 'lit/decorators.js';
+import './card-content';
+import './card-media';
+import '../elevation/elevation';
+let Card = class Card extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'elevated';
+    }
+    render() {
+        return html `<u-elevation></u-elevation><slot></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));
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], Card.prototype, "variant", void 0);
+Card = __decorate([
+    customElement('u-card')
+], Card);
+export { Card };
+//# sourceMappingURL=card.js.map

package/card/card.js.map

@@ -0,0 +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"]}

package/divider/divider.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class Divider extends LitElement {
+    static styles: import("lit").CSSResult;
+    noMargin: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-divider': Divider;
+    }
+}
+//# sourceMappingURL=divider.d.ts.map

package/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/divider/divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,UAAU,EAAC,MAAM,KAAK,CAAC;AAGpC,qBACa,OAAQ,SAAQ,UAAU;IAErC,OAAgB,MAAM,0BAYpB;IAEgE,QAAQ,UAAS;CACpF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}