@material/web 1.0.0-pre.6 → 1.0.0-pre.8

package/button/lib/_tonal-button.scss

@@ -7,19 +7,28 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-tonal-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
 
   @each $token, $value in $tokens {
-    --md-tonal-button-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-tonal-button-#{$token}: #{$value};
+    }
   }
 }
 
@@ -28,7 +37,25 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-tonal-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-tonal-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-tonal-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-tonal-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-tonal-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 }

package/button/lib/button.d.ts

@@ -5,19 +5,12 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-import { MdRipple } from '../../ripple/ripple.js';
-import { ARIAExpanded, ARIAHasPopup } from '../../types/aria.js';
-import { ButtonState } from './state.js';
+import { LitElement, nothing, TemplateResult } from 'lit';
 /**
  * A button component.
  */
-export declare abstract class Button extends LitElement implements ButtonState {
+export declare abstract class Button extends LitElement {
     static shadowRootOptions: ShadowRootInit;
-    ariaExpanded: ARIAExpanded;
-    ariaHasPopup: ARIAHasPopup;
-    ariaLabel: string;
     /**
      * Whether or not the button is disabled.
      */
@@ -38,12 +31,6 @@ export declare abstract class Button extends LitElement implements ButtonState {
      * _Note:_ Link buttons cannot have trailing icons.
      */
     trailingIcon: boolean;
-    /**
-     * The button's visible label.
-     *
-     * @deprecated Set text as content of the button instead.
-     */
-    label: string;
     /**
      * Whether to display the icon or not.
      */
@@ -54,30 +41,29 @@ export declare abstract class Button extends LitElement implements ButtonState {
      * submissions.
      */
     preventClickDefault: boolean;
-    protected buttonElement: HTMLElement;
-    protected ripple: Promise<MdRipple | null>;
-    protected showFocusRing: boolean;
-    protected showRipple: boolean;
-    protected assignedIcons: HTMLElement[];
+    private readonly buttonElement;
+    private readonly ripple;
+    private showRipple;
+    private readonly assignedIcons;
     constructor();
-    private readonly handleActivationClick;
     focus(): void;
     blur(): void;
-    protected readonly getRipple: () => Promise<MdRipple>;
-    protected render(): TemplateResult;
-    protected getRenderClasses(): ClassInfo;
-    protected renderTouchTarget(): TemplateResult;
-    protected renderElevation(): TemplateResult;
-    protected renderRipple: () => TemplateResult<1>;
-    protected renderOutline(): TemplateResult;
-    protected renderFocusRing(): TemplateResult;
-    protected renderLabel(): TemplateResult;
-    protected renderLeadingIcon(): TemplateResult | string;
-    protected renderTrailingIcon(): TemplateResult | string;
-    protected renderIcon(): TemplateResult;
-    protected handlePointerDown(e: PointerEvent): void;
-    protected handleClick(e: MouseEvent): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    protected handleSlotChange(): void;
+    protected render(): TemplateResult<2 | 1>;
+    protected getRenderClasses(): {
+        'md3-button--icon-leading': boolean;
+        'md3-button--icon-trailing': boolean;
+    };
+    protected renderElevation(): TemplateResult | typeof nothing;
+    protected renderOutline(): TemplateResult | typeof nothing;
+    private renderTouchTarget;
+    private readonly handleActivationClick;
+    private readonly getRipple;
+    private readonly renderRipple;
+    private renderFocusRing;
+    private renderLabel;
+    private renderLeadingIcon;
+    private renderTrailingIcon;
+    private renderIcon;
+    private handleClick;
+    private handleSlotChange;
 }

package/button/lib/button.js

@@ -3,19 +3,17 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-// This is required for @ariaProperty
-// tslint:disable:no-new-decorators
+var _a;
+import { __decorate } from "tslib";
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { html, LitElement, nothing } from 'lit';
+import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 import { html as staticHtml, literal } from 'lit/static-html.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { dispatchActivationClick, isActivationClick } from '../../controller/events.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
 /**
  * A button component.
@@ -34,13 +32,6 @@ export class Button extends LitElement {
          * _Note:_ Link buttons cannot have trailing icons.
          */
         this.trailingIcon = false;
-        // TODO(b/272598771): remove label property
-        /**
-         * The button's visible label.
-         *
-         * @deprecated Set text as content of the button instead.
-         */
-        this.label = '';
         /**
          * Whether to display the icon or not.
          */
@@ -51,10 +42,9 @@ export class Button extends LitElement {
          * submissions.
          */
         this.preventClickDefault = false;
-        this.showFocusRing = false;
         this.showRipple = false;
         this.handleActivationClick = (event) => {
-            if (!isActivationClick((event))) {
+            if (!isActivationClick((event)) || !this.buttonElement) {
                 return;
             }
             this.focus();
@@ -67,30 +57,31 @@ export class Button extends LitElement {
         this.renderRipple = () => {
             return html `<md-ripple class="md3-button__ripple" ?disabled="${this.disabled}"></md-ripple>`;
         };
-        this.addEventListener('click', this.handleActivationClick);
+        if (!isServer) {
+            this.addEventListener('click', this.handleActivationClick);
+        }
     }
     focus() {
-        this.buttonElement.focus();
+        this.buttonElement?.focus();
     }
     blur() {
-        this.buttonElement.blur();
+        this.buttonElement?.blur();
     }
     render() {
         // Link buttons may not be disabled
         const isDisabled = this.disabled && !this.href;
         const button = this.href ? literal `a` : literal `button`;
+        // Needed for closure conformance
+        const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
         return staticHtml `
       <${button}
         class="md3-button ${classMap(this.getRenderClasses())}"
         ?disabled=${isDisabled}
-        aria-label="${this.ariaLabel || nothing}"
-        aria-haspopup="${this.ariaHasPopup || nothing}"
-        aria-expanded="${this.ariaExpanded || nothing}"
+        aria-label="${ariaLabel || nothing}"
+        aria-haspopup="${ariaHasPopup || nothing}"
+        aria-expanded="${ariaExpanded || nothing}"
         href=${this.href || nothing}
         target=${this.target || nothing}
-        @pointerdown="${this.handlePointerDown}"
-        @focus="${this.handleFocus}"
-        @blur="${this.handleBlur}"
         @click="${this.handleClick}"
         ${ripple(this.getRipple)}
       >
@@ -102,7 +93,7 @@ export class Button extends LitElement {
         ${this.renderLeadingIcon()}
         ${this.renderLabel()}
         ${this.renderTrailingIcon()}
-      </${button}}>`;
+      </${button}>`;
     }
     getRenderClasses() {
         return {
@@ -110,114 +101,74 @@ export class Button extends LitElement {
             'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,
         };
     }
+    renderElevation() {
+        return nothing;
+    }
+    renderOutline() {
+        return nothing;
+    }
     renderTouchTarget() {
         return html `
       <span class="md3-button__touch"></span>
     `;
     }
-    renderElevation() {
-        return html ``;
-    }
-    renderOutline() {
-        return html ``;
-    }
     renderFocusRing() {
-        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+        return html `<md-focus-ring></md-focus-ring>`;
     }
     renderLabel() {
-        // TODO(b/272598771): remove the ternary when label property is removed
-        return html `<span class="md3-button__label">${this.label ? this.label : html `<slot></slot>`}</span>`;
+        return html `<span class="md3-button__label"><slot></slot></span>`;
     }
     renderLeadingIcon() {
-        return this.trailingIcon ? '' : this.renderIcon();
+        return this.trailingIcon ? nothing : this.renderIcon();
     }
     renderTrailingIcon() {
-        return this.trailingIcon ? this.renderIcon() : '';
+        return this.trailingIcon ? this.renderIcon() : nothing;
     }
     renderIcon() {
         return html `<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
     }
-    handlePointerDown(e) {
-        pointerPress();
-        this.showFocusRing = shouldShowStrongFocus();
-    }
     handleClick(e) {
         if (this.preventClickDefault) {
             e.preventDefault();
         }
     }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    handleBlur() {
-        this.showFocusRing = false;
-    }
     handleSlotChange() {
         this.hasIcon = this.assignedIcons.length > 0;
     }
 }
+_a = Button;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 Button.shadowRootOptions = { mode: 'open', delegatesFocus: true };
 __decorate([
-    property({ type: String, attribute: 'data-aria-expanded', noAccessor: true }),
-    ariaProperty,
-    __metadata("design:type", String)
-], Button.prototype, "ariaExpanded", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-has-popup', noAccessor: true }),
-    ariaProperty,
-    __metadata("design:type", String)
-], Button.prototype, "ariaHasPopup", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    ariaProperty,
-    __metadata("design:type", String)
-], Button.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], Button.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property()
 ], Button.prototype, "href", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property()
 ], Button.prototype, "target", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'trailingicon' }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, attribute: 'trailingicon' })
 ], Button.prototype, "trailingIcon", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], Button.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Button.prototype, "hasIcon", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Button.prototype, "preventClickDefault", void 0);
 __decorate([
-    query('.md3-button'),
-    __metadata("design:type", HTMLElement)
+    query('.md3-button')
 ], Button.prototype, "buttonElement", void 0);
 __decorate([
-    queryAsync('md-ripple'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple')
 ], Button.prototype, "ripple", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
-], Button.prototype, "showFocusRing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Button.prototype, "showRipple", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'icon', flatten: true }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ slot: 'icon', flatten: true })
 ], Button.prototype, "assignedIcons", void 0);
 //# sourceMappingURL=button.js.map

package/button/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAExpanded, ARIAHasPopup} from '../../types/aria.js';\n\nimport {ButtonState} from './state.js';\n\n/**\n * A button component.\n */\nexport abstract class Button extends LitElement implements ButtonState {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property({type: String, attribute: 'data-aria-expanded', noAccessor: true})\n  @ariaProperty\n  override ariaExpanded!: ARIAExpanded;\n\n  @property({type: String, attribute: 'data-aria-has-popup', noAccessor: true})\n  @ariaProperty\n  override ariaHasPopup!: ARIAHasPopup;\n\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  @ariaProperty\n  override ariaLabel!: string;\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property({type: String}) href?: string;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property({type: String}) target?: string;\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n  // TODO(b/272598771): remove label property\n  /**\n   * The button's visible label.\n   *\n   * @deprecated Set text as content of the button instead.\n   */\n  @property({type: String}) label = '';\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Whether `preventDefault()` should be called on the underlying button.\n   * Useful for preventing certain native functionalities like preventing form\n   * submissions.\n   */\n  @property({type: Boolean}) preventClickDefault = false;\n\n  @query('.md3-button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  protected assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleActivationClick);\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick((event))) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  override focus() {\n    this.buttonElement.focus();\n  }\n\n  override blur() {\n    this.buttonElement.blur();\n  }\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected override render(): TemplateResult {\n    // Link buttons may not be disabled\n    const isDisabled = this.disabled && !this.href;\n\n    const button = this.href ? literal`a` : literal`button`;\n    return staticHtml`\n      <${button}\n        class=\"md3-button ${classMap(this.getRenderClasses())}\"\n        ?disabled=${isDisabled}\n        aria-label=\"${this.ariaLabel || nothing}\"\n        aria-haspopup=\"${this.ariaHasPopup || nothing}\"\n        aria-expanded=\"${this.ariaExpanded || nothing}\"\n        href=${this.href || nothing}\n        target=${this.target || nothing}\n        @pointerdown=\"${this.handlePointerDown}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @click=\"${this.handleClick}\"\n        ${ripple(this.getRipple)}\n      >\n        ${this.renderFocusRing()}\n        ${this.renderElevation()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderOutline()}\n        ${this.renderTouchTarget()}\n        ${this.renderLeadingIcon()}\n        ${this.renderLabel()}\n        ${this.renderTrailingIcon()}\n      </${button}}>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,\n      'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,\n    };\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`\n      <span class=\"md3-button__touch\"></span>\n    `;\n  }\n\n  protected renderElevation(): TemplateResult {\n    return html``;\n  }\n\n  protected renderRipple = () => {\n    return html`<md-ripple class=\"md3-button__ripple\" ?disabled=\"${\n        this.disabled}\"></md-ripple>`;\n  };\n\n  protected renderOutline(): TemplateResult {\n    return html``;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  protected renderLabel(): TemplateResult {\n    // TODO(b/272598771): remove the ternary when label property is removed\n    return html`<span class=\"md3-button__label\">${\n        this.label ? this.label : html`<slot></slot>`}</span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult|string {\n    return this.trailingIcon ? '' : this.renderIcon();\n  }\n\n  protected renderTrailingIcon(): TemplateResult|string {\n    return this.trailingIcon ? this.renderIcon() : '';\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${\n        this.handleSlotChange}\"></slot>`;\n  }\n\n  protected handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleClick(e: MouseEvent) {\n    if (this.preventClickDefault) {\n      e.preventDefault();\n    }\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  protected handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * A button component.\n */\nexport abstract class Button extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href?: string;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target?: string;\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Whether `preventDefault()` should be called on the underlying button.\n   * Useful for preventing certain native functionalities like preventing form\n   * submissions.\n   */\n  @property({type: Boolean}) preventClickDefault = false;\n\n  @query('.md3-button') private readonly buttonElement!: HTMLElement|null;\n\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n  @state() private showRipple = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected override render() {\n    // Link buttons may not be disabled\n    const isDisabled = this.disabled && !this.href;\n\n    const button = this.href ? literal`a` : literal`button`;\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return staticHtml`\n      <${button}\n        class=\"md3-button ${classMap(this.getRenderClasses())}\"\n        ?disabled=${isDisabled}\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        href=${this.href || nothing}\n        target=${this.target || nothing}\n        @click=\"${this.handleClick}\"\n        ${ripple(this.getRipple)}\n      >\n        ${this.renderFocusRing()}\n        ${this.renderElevation()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderOutline()}\n        ${this.renderTouchTarget()}\n        ${this.renderLeadingIcon()}\n        ${this.renderLabel()}\n        ${this.renderTrailingIcon()}\n      </${button}>`;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,\n      'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,\n    };\n  }\n\n  protected renderElevation(): TemplateResult|typeof nothing {\n    return nothing;\n  }\n\n  protected renderOutline(): TemplateResult|typeof nothing {\n    return nothing;\n  }\n\n  private renderTouchTarget() {\n    return html`\n      <span class=\"md3-button__touch\"></span>\n    `;\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick((event)) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple class=\"md3-button__ripple\" ?disabled=\"${\n        this.disabled}\"></md-ripple>`;\n  };\n\n  private renderFocusRing() {\n    return html`<md-focus-ring></md-focus-ring>`;\n  }\n\n  private renderLabel() {\n    return html`<span class=\"md3-button__label\"><slot></slot></span>`;\n  }\n\n  private renderLeadingIcon() {\n    return this.trailingIcon ? nothing : this.renderIcon();\n  }\n\n  private renderTrailingIcon() {\n    return this.trailingIcon ? this.renderIcon() : nothing;\n  }\n\n  private renderIcon() {\n    return html`<slot name=\"icon\" @slotchange=\"${\n        this.handleSlotChange}\"></slot>`;\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.preventClickDefault) {\n      e.preventDefault();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}

package/button/lib/elevated-button.d.ts

@@ -4,13 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../../elevation/elevation.js';
-import { TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
 import { Button } from './button.js';
 /**
  * An elevated button component.
  */
 export declare class ElevatedButton extends Button {
-    protected getRenderClasses(): ClassInfo;
-    protected renderElevation(): TemplateResult;
+    protected getRenderClasses(): {
+        'md3-button--elevated': boolean;
+        'md3-button--icon-leading': boolean;
+        'md3-button--icon-trailing': boolean;
+    };
+    protected renderElevation(): import("lit-html").TemplateResult<1>;
 }

package/button/lib/elevated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n/**\n * An elevated button component.\n */\nexport class ElevatedButton extends Button {\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--elevated': true,\n    };\n  }\n\n  protected override renderElevation(): TemplateResult {\n    return html`<md-elevation></md-elevation>`;\n  }\n}\n"]}
+{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * An elevated button component.\n */\nexport class ElevatedButton extends Button {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--elevated': true,\n    };\n  }\n\n  protected override renderElevation() {\n    return html`<md-elevation></md-elevation>`;\n  }\n}\n"]}

package/button/lib/elevated-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-button-container-shape, 9999px);--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px);--_container-shape-start-start: var( --md-elevated-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-elevated-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-elevated-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-elevated-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=elevated-styles.css.map */
 `;
 //# sourceMappingURL=elevated-styles.css.js.map

package/button/lib/elevated-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}
+{"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-button-container-shape, 9999px);--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px);--_container-shape-start-start: var( --md-elevated-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-elevated-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-elevated-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-elevated-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}

package/button/lib/filled-button.d.ts

@@ -4,13 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../../elevation/elevation.js';
-import { TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
 import { Button } from './button.js';
 /**
  * A filled button component.
  */
 export declare class FilledButton extends Button {
-    protected getRenderClasses(): ClassInfo;
-    protected renderElevation(): TemplateResult;
+    protected getRenderClasses(): {
+        'md3-button--filled': boolean;
+        'md3-button--icon-leading': boolean;
+        'md3-button--icon-trailing': boolean;
+    };
+    protected renderElevation(): import("lit-html").TemplateResult<1>;
 }

package/button/lib/filled-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IACnB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oBAAoB,EAAE,IAAI;SAC3B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n/**\n * A filled button component.\n */\nexport class FilledButton extends Button {\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--filled': true,\n    };\n  }\n\n  protected override renderElevation(): TemplateResult {\n    return html`<md-elevation></md-elevation>`;\n  }\n}\n"]}
+{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IACnB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oBAAoB,EAAE,IAAI;SAC3B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * A filled button component.\n */\nexport class FilledButton extends Button {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--filled': true,\n    };\n  }\n\n  protected override renderElevation() {\n    return html`<md-elevation></md-elevation>`;\n  }\n}\n"]}

package/button/lib/filled-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, 9999px));--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=filled-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-button-container-shape, 9999px);--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px);--_container-shape-start-start: var( --md-filled-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map

package/button/lib/filled-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, 9999px));--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
+{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-button-container-shape, 9999px);--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px);--_container-shape-start-start: var( --md-filled-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

package/button/lib/outlined-button.d.ts

@@ -3,13 +3,15 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
 import { Button } from './button.js';
 /**
  * An outlined button component.
  */
 export declare class OutlinedButton extends Button {
-    protected getRenderClasses(): ClassInfo;
-    protected renderOutline(): TemplateResult;
+    protected getRenderClasses(): {
+        'md3-button--outlined': boolean;
+        'md3-button--icon-leading': boolean;
+        'md3-button--icon-trailing': boolean;
+    };
+    protected renderOutline(): import("lit-html").TemplateResult<1>;
 }

package/button/lib/outlined-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA,2CAA2C,CAAC;IACzD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n/**\n * An outlined button component.\n */\nexport class OutlinedButton extends Button {\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--outlined': true,\n    };\n  }\n\n  protected override renderOutline(): TemplateResult {\n    return html`<span class=\"md3-button__outline\"></span>`;\n  }\n}\n"]}
+{"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA,2CAA2C,CAAC;IACzD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * An outlined button component.\n */\nexport class OutlinedButton extends Button {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--outlined': true,\n    };\n  }\n\n  protected override renderOutline() {\n    return html`<span class=\"md3-button__outline\"></span>`;\n  }\n}\n"]}