@prioticket/design-system-web 1.0.0

package/dist/components/pd-fab.cjs.js

@@ -0,0 +1,119 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("lit"),e=require("lit/decorators.js");require("@material/web/fab/fab.js");require("@material/web/fab/branded-fab.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(n,r,s,i)=>{for(var t=i>1?void 0:i?m(r,s):r,d=n.length-1,l;d>=0;d--)(l=n[d])&&(t=(i?l(r,s,t):l(t))||t);return i&&t&&c(r,s,t),t};exports.PdFab=class extends a.LitElement{constructor(){super(...arguments),this.variant="primary",this.size="medium",this.icon="",this.label="",this.lowered=!1,this.disabled=!1,this.ariaLabel=""}getFabTemplate(){const r=this.icon?a.html`<md-icon slot="icon">${this.icon}</md-icon>`:a.html`<slot name="icon" slot="icon"></slot>`,s=!!this.label;return this.variant==="branded"?a.html`
+        <md-branded-fab
+          ?lowered=${this.lowered}
+          ?disabled=${this.disabled}
+          .size=${this.size}
+          .label=${this.label||a.nothing}
+          aria-label=${this.ariaLabel||this.label||a.nothing}
+          @click=${this._handleClick}
+        >
+          ${r}
+        </md-branded-fab>
+      `:a.html`
+      <md-fab
+        .variant=${this.variant}
+        .size=${this.size}
+        ?lowered=${this.lowered}
+        ?disabled=${this.disabled}
+        .label=${this.label||a.nothing}
+        aria-label=${this.ariaLabel||(s?a.nothing:this.label)||a.nothing}
+        @click=${this._handleClick}
+      >
+        ${r}
+      </md-fab>
+    `}render(){return this.getFabTemplate()}_handleClick(r){this.disabled||this.dispatchEvent(new CustomEvent("fab-click",{detail:{variant:this.variant,size:this.size,label:this.label,icon:this.icon},bubbles:!0}))}};exports.PdFab.styles=a.css`
+    :host {
+      display: inline-block;
+      --md-fab-container-shape: var(--md-sys-shape-corner-large);
+      --md-branded-fab-container-shape: var(--md-sys-shape-corner-large);
+    }
+
+    :host([size="small"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-small, 2.5rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-small, 2.5rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-small, 1.5rem);
+    }
+
+    :host([size="medium"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-medium, 3.5rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-medium, 3.5rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-medium, 1.5rem);
+    }
+
+    :host([size="large"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-large, 6rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-large, 6rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-large, 2.25rem);
+    }
+
+    :host([variant="surface"]) {
+      --md-fab-container-color: var(--md-sys-color-surface-container-high);
+      --md-fab-icon-color: var(--md-sys-color-primary);
+      --md-fab-label-text-color: var(--md-sys-color-primary);
+      --md-fab-hover-icon-color: var(--md-sys-color-primary-hover);
+      --md-fab-focus-icon-color: var(--md-sys-color-primary-focus);
+      --md-fab-pressed-icon-color: var(--md-sys-color-primary-pressed);
+    }
+
+    :host([variant="primary"]) {
+      --md-fab-container-color: var(--md-sys-color-primary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-primary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-primary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-primary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-primary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-primary-container-pressed);
+    }
+
+    :host([variant="secondary"]) {
+      --md-fab-container-color: var(--md-sys-color-secondary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-secondary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-secondary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-secondary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-secondary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-secondary-container-pressed);
+    }
+
+    :host([variant="tertiary"]) {
+      --md-fab-container-color: var(--md-sys-color-tertiary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-tertiary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-tertiary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-tertiary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-tertiary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-tertiary-container-pressed);
+    }
+
+    md-fab,
+    md-branded-fab {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+      --md-fab-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-fab-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-fab-label-text-weight: var(--md-sys-typescale-label-large-weight);
+      --md-branded-fab-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-branded-fab-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-branded-fab-label-text-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    md-fab:hover,
+    md-branded-fab:hover {
+      transform: scale(1.05);
+    }
+
+    md-fab:active,
+    md-branded-fab:active {
+      transform: scale(0.95);
+    }
+
+    :host([disabled]) md-fab,
+    :host([disabled]) md-branded-fab {
+      --md-fab-container-color: var(--md-sys-color-on-surface);
+      --md-fab-icon-color: var(--md-sys-color-surface);
+      --md-fab-label-text-color: var(--md-sys-color-surface);
+      opacity: var(--md-sys-state-disabled-container-opacity, 0.12);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) md-fab:hover,
+    :host([disabled]) md-branded-fab:hover {
+      transform: none;
+    }
+  `;o([e.property({type:String})],exports.PdFab.prototype,"variant",2);o([e.property({type:String})],exports.PdFab.prototype,"size",2);o([e.property({type:String})],exports.PdFab.prototype,"icon",2);o([e.property({type:String})],exports.PdFab.prototype,"label",2);o([e.property({type:Boolean})],exports.PdFab.prototype,"lowered",2);o([e.property({type:Boolean})],exports.PdFab.prototype,"disabled",2);o([e.property({type:String,attribute:"aria-label"})],exports.PdFab.prototype,"ariaLabel",2);exports.PdFab=o([e.customElement("pd-fab")],exports.PdFab);

package/dist/components/pd-fab.es.js

@@ -0,0 +1,179 @@
+import { css as b, LitElement as f, html as l, nothing as i } from "lit";
+import { property as o, customElement as y } from "lit/decorators.js";
+import "@material/web/fab/fab.js";
+import "@material/web/fab/branded-fab.js";
+import "@material/web/icon/icon.js";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (s, t, n, d) => {
+  for (var e = d > 1 ? void 0 : d ? v(t, n) : t, c = s.length - 1, m; c >= 0; c--)
+    (m = s[c]) && (e = (d ? m(t, n, e) : m(e)) || e);
+  return d && e && h(t, n, e), e;
+};
+let a = class extends f {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "medium", this.icon = "", this.label = "", this.lowered = !1, this.disabled = !1, this.ariaLabel = "";
+  }
+  getFabTemplate() {
+    const s = this.icon ? l`<md-icon slot="icon">${this.icon}</md-icon>` : l`<slot name="icon" slot="icon"></slot>`, t = !!this.label;
+    return this.variant === "branded" ? l`
+        <md-branded-fab
+          ?lowered=${this.lowered}
+          ?disabled=${this.disabled}
+          .size=${this.size}
+          .label=${this.label || i}
+          aria-label=${this.ariaLabel || this.label || i}
+          @click=${this._handleClick}
+        >
+          ${s}
+        </md-branded-fab>
+      ` : l`
+      <md-fab
+        .variant=${this.variant}
+        .size=${this.size}
+        ?lowered=${this.lowered}
+        ?disabled=${this.disabled}
+        .label=${this.label || i}
+        aria-label=${this.ariaLabel || (t ? i : this.label) || i}
+        @click=${this._handleClick}
+      >
+        ${s}
+      </md-fab>
+    `;
+  }
+  render() {
+    return this.getFabTemplate();
+  }
+  _handleClick(s) {
+    this.disabled || this.dispatchEvent(new CustomEvent("fab-click", {
+      detail: {
+        variant: this.variant,
+        size: this.size,
+        label: this.label,
+        icon: this.icon
+      },
+      bubbles: !0
+    }));
+  }
+};
+a.styles = b`
+    :host {
+      display: inline-block;
+      --md-fab-container-shape: var(--md-sys-shape-corner-large);
+      --md-branded-fab-container-shape: var(--md-sys-shape-corner-large);
+    }
+
+    :host([size="small"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-small, 2.5rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-small, 2.5rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-small, 1.5rem);
+    }
+
+    :host([size="medium"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-medium, 3.5rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-medium, 3.5rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-medium, 1.5rem);
+    }
+
+    :host([size="large"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-large, 6rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-large, 6rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-large, 2.25rem);
+    }
+
+    :host([variant="surface"]) {
+      --md-fab-container-color: var(--md-sys-color-surface-container-high);
+      --md-fab-icon-color: var(--md-sys-color-primary);
+      --md-fab-label-text-color: var(--md-sys-color-primary);
+      --md-fab-hover-icon-color: var(--md-sys-color-primary-hover);
+      --md-fab-focus-icon-color: var(--md-sys-color-primary-focus);
+      --md-fab-pressed-icon-color: var(--md-sys-color-primary-pressed);
+    }
+
+    :host([variant="primary"]) {
+      --md-fab-container-color: var(--md-sys-color-primary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-primary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-primary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-primary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-primary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-primary-container-pressed);
+    }
+
+    :host([variant="secondary"]) {
+      --md-fab-container-color: var(--md-sys-color-secondary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-secondary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-secondary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-secondary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-secondary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-secondary-container-pressed);
+    }
+
+    :host([variant="tertiary"]) {
+      --md-fab-container-color: var(--md-sys-color-tertiary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-tertiary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-tertiary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-tertiary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-tertiary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-tertiary-container-pressed);
+    }
+
+    md-fab,
+    md-branded-fab {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+      --md-fab-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-fab-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-fab-label-text-weight: var(--md-sys-typescale-label-large-weight);
+      --md-branded-fab-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-branded-fab-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-branded-fab-label-text-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    md-fab:hover,
+    md-branded-fab:hover {
+      transform: scale(1.05);
+    }
+
+    md-fab:active,
+    md-branded-fab:active {
+      transform: scale(0.95);
+    }
+
+    :host([disabled]) md-fab,
+    :host([disabled]) md-branded-fab {
+      --md-fab-container-color: var(--md-sys-color-on-surface);
+      --md-fab-icon-color: var(--md-sys-color-surface);
+      --md-fab-label-text-color: var(--md-sys-color-surface);
+      opacity: var(--md-sys-state-disabled-container-opacity, 0.12);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) md-fab:hover,
+    :host([disabled]) md-branded-fab:hover {
+      transform: none;
+    }
+  `;
+r([
+  o({ type: String })
+], a.prototype, "variant", 2);
+r([
+  o({ type: String })
+], a.prototype, "size", 2);
+r([
+  o({ type: String })
+], a.prototype, "icon", 2);
+r([
+  o({ type: String })
+], a.prototype, "label", 2);
+r([
+  o({ type: Boolean })
+], a.prototype, "lowered", 2);
+r([
+  o({ type: Boolean })
+], a.prototype, "disabled", 2);
+r([
+  o({ type: String, attribute: "aria-label" })
+], a.prototype, "ariaLabel", 2);
+a = r([
+  y("pd-fab")
+], a);
+export {
+  a as PdFab
+};

package/dist/components/pd-icon-button.cjs.js

@@ -0,0 +1,159 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("lit"),l=require("lit/decorators.js");require("@material/web/iconbutton/icon-button.js");require("@material/web/iconbutton/filled-icon-button.js");require("@material/web/iconbutton/filled-tonal-icon-button.js");require("@material/web/iconbutton/outlined-icon-button.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,r=(a,t,o,e)=>{for(var i=e>1?void 0:e?u(t,o):t,c=a.length-1,s;c>=0;c--)(s=a[c])&&(i=(e?s(t,o,i):s(i))||i);return e&&i&&d(t,o,i),i};exports.PdIconButton=class extends n.LitElement{constructor(){super(...arguments),this.variant="standard",this.icon="",this.selectedIcon="",this.disabled=!1,this.toggle=!1,this.selected=!1,this.href="",this.target="",this.ariaLabel="",this.ariaLabelSelected=""}getIconButtonTemplate(){const t=this.icon?n.html`<md-icon>${this.icon}</md-icon>`:n.html`<slot></slot>`,o=this.selectedIcon?n.html`<md-icon slot="selected">${this.selectedIcon}</md-icon>`:n.nothing,e={disabled:this.disabled,toggle:this.toggle,selected:this.selected,href:this.href||n.nothing,target:this.target||n.nothing,"aria-label":this.ariaLabel||n.nothing,"aria-label-selected":this.ariaLabelSelected||n.nothing};switch(this.variant){case"filled":return n.html`
+          <md-filled-icon-button
+            ?disabled=${e.disabled}
+            ?toggle=${e.toggle}
+            ?selected=${e.selected}
+            .href=${e.href}
+            .target=${e.target}
+            aria-label=${e["aria-label"]}
+            aria-label-selected=${e["aria-label-selected"]}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @click=${this._handleClick}
+          >
+            ${t}
+            ${o}
+          </md-filled-icon-button>
+        `;case"tonal":return n.html`
+          <md-filled-tonal-icon-button
+            ?disabled=${e.disabled}
+            ?toggle=${e.toggle}
+            ?selected=${e.selected}
+            .href=${e.href}
+            .target=${e.target}
+            aria-label=${e["aria-label"]}
+            aria-label-selected=${e["aria-label-selected"]}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @click=${this._handleClick}
+          >
+            ${t}
+            ${o}
+          </md-filled-tonal-icon-button>
+        `;case"outlined":return n.html`
+          <md-outlined-icon-button
+            ?disabled=${e.disabled}
+            ?toggle=${e.toggle}
+            ?selected=${e.selected}
+            .href=${e.href}
+            .target=${e.target}
+            aria-label=${e["aria-label"]}
+            aria-label-selected=${e["aria-label-selected"]}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @click=${this._handleClick}
+          >
+            ${t}
+            ${o}
+          </md-outlined-icon-button>
+        `;default:return n.html`
+          <md-icon-button
+            ?disabled=${e.disabled}
+            ?toggle=${e.toggle}
+            ?selected=${e.selected}
+            .href=${e.href}
+            .target=${e.target}
+            aria-label=${e["aria-label"]}
+            aria-label-selected=${e["aria-label-selected"]}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @click=${this._handleClick}
+          >
+            ${t}
+            ${o}
+          </md-icon-button>
+        `}}render(){return this.getIconButtonTemplate()}_handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("icon-button-click",{detail:{variant:this.variant,selected:this.selected,toggle:this.toggle},bubbles:!0}))}_handleInput(t){if(this.disabled)return;const o=t.target;this.selected=o.selected,this.dispatchEvent(new CustomEvent("input",{detail:{selected:o.selected,variant:this.variant},bubbles:!0}))}_handleChange(t){if(this.disabled)return;const o=t.target;this.selected=o.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:o.selected,variant:this.variant},bubbles:!0}))}};exports.PdIconButton.styles=n.css`
+    :host {
+      display: inline-block;
+      --md-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+      --md-filled-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+      --md-filled-tonal-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+      --md-outlined-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+    }
+
+    :host([variant="standard"]) {
+      --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-icon-button-hover-icon-color: var(--md-sys-color-on-surface-variant-hover);
+      --md-icon-button-focus-icon-color: var(--md-sys-color-on-surface-variant-focus);
+      --md-icon-button-pressed-icon-color: var(--md-sys-color-on-surface-variant-pressed);
+      --md-icon-button-selected-icon-color: var(--md-sys-color-primary);
+      --md-icon-button-selected-hover-icon-color: var(--md-sys-color-primary-hover);
+      --md-icon-button-selected-focus-icon-color: var(--md-sys-color-primary-focus);
+      --md-icon-button-selected-pressed-icon-color: var(--md-sys-color-primary-pressed);
+    }
+
+    :host([variant="filled"]) {
+      --md-filled-icon-button-container-color: var(--md-sys-color-primary);
+      --md-filled-icon-button-icon-color: var(--md-sys-color-on-primary);
+      --md-filled-icon-button-hover-container-color: var(--md-sys-color-primary-hover);
+      --md-filled-icon-button-focus-container-color: var(--md-sys-color-primary-focus);
+      --md-filled-icon-button-pressed-container-color: var(--md-sys-color-primary-pressed);
+      --md-filled-icon-button-selected-container-color: var(--md-sys-color-primary);
+      --md-filled-icon-button-toggle-selected-container-color: var(--md-sys-color-primary);
+      --md-filled-icon-button-toggle-unselected-container-color: var(--md-sys-color-surface-container-highest);
+      --md-filled-icon-button-toggle-unselected-icon-color: var(--md-sys-color-primary);
+    }
+
+    :host([variant="tonal"]) {
+      --md-filled-tonal-icon-button-container-color: var(--md-sys-color-secondary-container);
+      --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-on-secondary-container);
+      --md-filled-tonal-icon-button-hover-container-color: var(--md-sys-color-secondary-container-hover);
+      --md-filled-tonal-icon-button-focus-container-color: var(--md-sys-color-secondary-container-focus);
+      --md-filled-tonal-icon-button-pressed-container-color: var(--md-sys-color-secondary-container-pressed);
+      --md-filled-tonal-icon-button-selected-container-color: var(--md-sys-color-secondary-container);
+      --md-filled-tonal-icon-button-toggle-selected-container-color: var(--md-sys-color-secondary-container);
+      --md-filled-tonal-icon-button-toggle-unselected-container-color: var(--md-sys-color-surface-container-highest);
+      --md-filled-tonal-icon-button-toggle-unselected-icon-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    :host([variant="outlined"]) {
+      --md-outlined-icon-button-outline-color: var(--md-sys-color-outline);
+      --md-outlined-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-outlined-icon-button-hover-icon-color: var(--md-sys-color-on-surface-variant-hover);
+      --md-outlined-icon-button-focus-icon-color: var(--md-sys-color-on-surface-variant-focus);
+      --md-outlined-icon-button-pressed-icon-color: var(--md-sys-color-on-surface-variant-pressed);
+      --md-outlined-icon-button-selected-container-color: var(--md-sys-color-inverse-surface);
+      --md-outlined-icon-button-selected-icon-color: var(--md-sys-color-inverse-on-surface);
+      --md-outlined-icon-button-selected-outline-color: var(--md-sys-color-outline);
+    }
+
+    md-icon-button,
+    md-filled-icon-button,
+    md-filled-tonal-icon-button,
+    md-outlined-icon-button {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+      --md-icon-button-state-layer-shape: var(--md-sys-shape-corner-full);
+      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-full);
+      --md-filled-tonal-icon-button-container-shape: var(--md-sys-shape-corner-full);
+      --md-outlined-icon-button-container-shape: var(--md-sys-shape-corner-full);
+    }
+
+    md-icon-button:hover,
+    md-filled-icon-button:hover,
+    md-filled-tonal-icon-button:hover,
+    md-outlined-icon-button:hover {
+      transform: scale(1.05);
+    }
+
+    md-icon-button:active,
+    md-filled-icon-button:active,
+    md-filled-tonal-icon-button:active,
+    md-outlined-icon-button:active {
+      transform: scale(0.95);
+    }
+
+    :host([disabled]) md-icon-button,
+    :host([disabled]) md-filled-icon-button,
+    :host([disabled]) md-filled-tonal-icon-button,
+    :host([disabled]) md-outlined-icon-button {
+      opacity: var(--md-sys-state-disabled-container-opacity, 0.38);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) md-icon-button:hover,
+    :host([disabled]) md-filled-icon-button:hover,
+    :host([disabled]) md-filled-tonal-icon-button:hover,
+    :host([disabled]) md-outlined-icon-button:hover {
+      transform: none;
+    }
+  `;r([l.property({type:String})],exports.PdIconButton.prototype,"variant",2);r([l.property({type:String})],exports.PdIconButton.prototype,"icon",2);r([l.property({type:String,attribute:"selected-icon"})],exports.PdIconButton.prototype,"selectedIcon",2);r([l.property({type:Boolean})],exports.PdIconButton.prototype,"disabled",2);r([l.property({type:Boolean})],exports.PdIconButton.prototype,"toggle",2);r([l.property({type:Boolean})],exports.PdIconButton.prototype,"selected",2);r([l.property({type:String})],exports.PdIconButton.prototype,"href",2);r([l.property({type:String})],exports.PdIconButton.prototype,"target",2);r([l.property({type:String,attribute:"aria-label"})],exports.PdIconButton.prototype,"ariaLabel",2);r([l.property({type:String,attribute:"aria-label-selected"})],exports.PdIconButton.prototype,"ariaLabelSelected",2);exports.PdIconButton=r([l.customElement("pd-icon-button")],exports.PdIconButton);