@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,268 @@
+import { css as m, LitElement as b, html as a, nothing as s } from "lit";
+import { property as i, customElement as h } from "lit/decorators.js";
+import "@material/web/iconbutton/icon-button.js";
+import "@material/web/iconbutton/filled-icon-button.js";
+import "@material/web/iconbutton/filled-tonal-icon-button.js";
+import "@material/web/iconbutton/outlined-icon-button.js";
+import "@material/web/icon/icon.js";
+var v = Object.defineProperty, p = Object.getOwnPropertyDescriptor, l = (n, t, e, c) => {
+  for (var r = c > 1 ? void 0 : c ? p(t, e) : t, d = n.length - 1, u; d >= 0; d--)
+    (u = n[d]) && (r = (c ? u(t, e, r) : u(r)) || r);
+  return c && r && v(t, e, r), r;
+};
+let o = class extends b {
+  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 n = this.icon ? a`<md-icon>${this.icon}</md-icon>` : a`<slot></slot>`, t = this.selectedIcon ? a`<md-icon slot="selected">${this.selectedIcon}</md-icon>` : s, e = {
+      disabled: this.disabled,
+      toggle: this.toggle,
+      selected: this.selected,
+      href: this.href || s,
+      target: this.target || s,
+      "aria-label": this.ariaLabel || s,
+      "aria-label-selected": this.ariaLabelSelected || s
+    };
+    switch (this.variant) {
+      case "filled":
+        return a`
+          <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}
+          >
+            ${n}
+            ${t}
+          </md-filled-icon-button>
+        `;
+      case "tonal":
+        return a`
+          <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}
+          >
+            ${n}
+            ${t}
+          </md-filled-tonal-icon-button>
+        `;
+      case "outlined":
+        return a`
+          <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}
+          >
+            ${n}
+            ${t}
+          </md-outlined-icon-button>
+        `;
+      default:
+        return a`
+          <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}
+          >
+            ${n}
+            ${t}
+          </md-icon-button>
+        `;
+    }
+  }
+  render() {
+    return this.getIconButtonTemplate();
+  }
+  _handleClick(n) {
+    this.disabled || this.dispatchEvent(new CustomEvent("icon-button-click", {
+      detail: {
+        variant: this.variant,
+        selected: this.selected,
+        toggle: this.toggle
+      },
+      bubbles: !0
+    }));
+  }
+  _handleInput(n) {
+    if (this.disabled) return;
+    const t = n.target;
+    this.selected = t.selected, this.dispatchEvent(new CustomEvent("input", {
+      detail: {
+        selected: t.selected,
+        variant: this.variant
+      },
+      bubbles: !0
+    }));
+  }
+  _handleChange(n) {
+    if (this.disabled) return;
+    const t = n.target;
+    this.selected = t.selected, this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        selected: t.selected,
+        variant: this.variant
+      },
+      bubbles: !0
+    }));
+  }
+};
+o.styles = m`
+    :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;
+    }
+  `;
+l([
+  i({ type: String })
+], o.prototype, "variant", 2);
+l([
+  i({ type: String })
+], o.prototype, "icon", 2);
+l([
+  i({ type: String, attribute: "selected-icon" })
+], o.prototype, "selectedIcon", 2);
+l([
+  i({ type: Boolean })
+], o.prototype, "disabled", 2);
+l([
+  i({ type: Boolean })
+], o.prototype, "toggle", 2);
+l([
+  i({ type: Boolean })
+], o.prototype, "selected", 2);
+l([
+  i({ type: String })
+], o.prototype, "href", 2);
+l([
+  i({ type: String })
+], o.prototype, "target", 2);
+l([
+  i({ type: String, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
+l([
+  i({ type: String, attribute: "aria-label-selected" })
+], o.prototype, "ariaLabelSelected", 2);
+o = l([
+  h("pd-icon-button")
+], o);
+export {
+  o as PdIconButton
+};

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

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),e=require("lit/decorators.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,m=Object.getOwnPropertyDescriptor,i=(n,o,t,s)=>{for(var r=s>1?void 0:s?m(o,t):o,a=n.length-1,c;a>=0;a--)(c=n[a])&&(r=(s?c(o,t,r):c(r))||r);return s&&r&&d(o,t,r),r};exports.PdIcon=class extends l.LitElement{constructor(){super(...arguments),this.name="",this.size="medium",this.variant="filled"}render(){return l.html`
+      <md-icon class="icon ${this.size}">
+        ${this.name}
+      </md-icon>
+    `}};exports.PdIcon.styles=l.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon {
+      color: var(--md-sys-color-on-surface, #000000);
+      transition: color var(--md-sys-transition-duration, 0.2s) ease;
+      user-select: none;
+    }
+    
+    .icon.small {
+      font-size: var(--md-sys-icon-size-small, 18px);
+      width: var(--md-sys-icon-size-small, 18px);
+      height: var(--md-sys-icon-size-small, 18px);
+    }
+    
+    .icon.medium {
+      font-size: var(--md-sys-icon-size-medium, 24px);
+      width: var(--md-sys-icon-size-medium, 24px);
+      height: var(--md-sys-icon-size-medium, 24px);
+    }
+    
+    .icon.large {
+      font-size: var(--md-sys-icon-size-large, 32px);
+      width: var(--md-sys-icon-size-large, 32px);
+      height: var(--md-sys-icon-size-large, 32px);
+    }
+
+    /* Clickable state */
+    :host([clickable]) .icon {
+      cursor: pointer;
+      border-radius: var(--md-sys-shape-corner-small, 4px);
+      padding: var(--md-sys-padding-200, 8px);
+      transition: background-color var(--md-sys-transition-duration, 0.2s) ease, color var(--md-sys-transition-duration, 0.2s) ease;
+    }
+
+    :host([clickable]) .icon:hover {
+      background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));
+    }
+
+    :host([clickable]) .icon:active {
+      background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));
+    }
+
+    /* Color variants */
+    :host([color="primary"]) .icon {
+      color: var(--md-sys-color-primary, #6750a4);
+    }
+
+    :host([color="secondary"]) .icon {
+      color: var(--md-sys-color-secondary, #625b71);
+    }
+
+    :host([color="error"]) .icon {
+      color: var(--md-sys-color-error, #ba1a1a);
+    }
+
+    :host([color="success"]) .icon {
+      color: var(--md-sys-color-tertiary, #7d5260);
+    }
+
+    /* Material Web Components will use --md-* design tokens directly */
+    /* Tokens will be provided by separate theme file with --md-* naming */
+  `;i([e.property({type:String})],exports.PdIcon.prototype,"name",2);i([e.property({type:String})],exports.PdIcon.prototype,"size",2);i([e.property({type:String})],exports.PdIcon.prototype,"variant",2);exports.PdIcon=i([e.customElement("pd-icon")],exports.PdIcon);

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

@@ -0,0 +1,102 @@
+import { css as m, LitElement as d, html as p } from "lit";
+import { property as c, customElement as y } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+var v = Object.defineProperty, h = Object.getOwnPropertyDescriptor, i = (l, s, t, e) => {
+  for (var r = e > 1 ? void 0 : e ? h(s, t) : s, a = l.length - 1, n; a >= 0; a--)
+    (n = l[a]) && (r = (e ? n(s, t, r) : n(r)) || r);
+  return e && r && v(s, t, r), r;
+};
+let o = class extends d {
+  constructor() {
+    super(...arguments), this.name = "", this.size = "medium", this.variant = "filled";
+  }
+  render() {
+    return p`
+      <md-icon class="icon ${this.size}">
+        ${this.name}
+      </md-icon>
+    `;
+  }
+};
+o.styles = m`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon {
+      color: var(--md-sys-color-on-surface, #000000);
+      transition: color var(--md-sys-transition-duration, 0.2s) ease;
+      user-select: none;
+    }
+    
+    .icon.small {
+      font-size: var(--md-sys-icon-size-small, 18px);
+      width: var(--md-sys-icon-size-small, 18px);
+      height: var(--md-sys-icon-size-small, 18px);
+    }
+    
+    .icon.medium {
+      font-size: var(--md-sys-icon-size-medium, 24px);
+      width: var(--md-sys-icon-size-medium, 24px);
+      height: var(--md-sys-icon-size-medium, 24px);
+    }
+    
+    .icon.large {
+      font-size: var(--md-sys-icon-size-large, 32px);
+      width: var(--md-sys-icon-size-large, 32px);
+      height: var(--md-sys-icon-size-large, 32px);
+    }
+
+    /* Clickable state */
+    :host([clickable]) .icon {
+      cursor: pointer;
+      border-radius: var(--md-sys-shape-corner-small, 4px);
+      padding: var(--md-sys-padding-200, 8px);
+      transition: background-color var(--md-sys-transition-duration, 0.2s) ease, color var(--md-sys-transition-duration, 0.2s) ease;
+    }
+
+    :host([clickable]) .icon:hover {
+      background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));
+    }
+
+    :host([clickable]) .icon:active {
+      background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));
+    }
+
+    /* Color variants */
+    :host([color="primary"]) .icon {
+      color: var(--md-sys-color-primary, #6750a4);
+    }
+
+    :host([color="secondary"]) .icon {
+      color: var(--md-sys-color-secondary, #625b71);
+    }
+
+    :host([color="error"]) .icon {
+      color: var(--md-sys-color-error, #ba1a1a);
+    }
+
+    :host([color="success"]) .icon {
+      color: var(--md-sys-color-tertiary, #7d5260);
+    }
+
+    /* Material Web Components will use --md-* design tokens directly */
+    /* Tokens will be provided by separate theme file with --md-* naming */
+  `;
+i([
+  c({ type: String })
+], o.prototype, "name", 2);
+i([
+  c({ type: String })
+], o.prototype, "size", 2);
+i([
+  c({ type: String })
+], o.prototype, "variant", 2);
+o = i([
+  y("pd-icon")
+], o);
+export {
+  o as PdIcon
+};

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

@@ -0,0 +1,108 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),e=require("lit/decorators.js");require("@material/web/list/list.js");require("@material/web/list/list-item.js");require("@material/web/divider/divider.js");require("@material/web/icon/icon.js");var m=Object.defineProperty,p=Object.getOwnPropertyDescriptor,i=(a,s,n,l)=>{for(var r=l>1?void 0:l?p(s,n):s,d=a.length-1,o;d>=0;d--)(o=a[d])&&(r=(l?o(s,n,r):o(r))||r);return l&&r&&m(s,n,r),r};exports.PdList=class extends t.LitElement{constructor(){super(...arguments),this.role="list",this.tabindex=-1}render(){return t.html`
+      <md-list
+        role=${this.role}
+        tabindex=${this.tabindex}
+      >
+        <slot></slot>
+      </md-list>
+    `}};exports.PdList.styles=t.css`
+    :host {
+      display: block;
+      --md-list-container-color: var(--md-sys-color-surface);
+    }
+
+    md-list {
+      background-color: var(--md-sys-color-surface);
+      border-radius: var(--md-sys-shape-corner-small);
+      overflow: hidden;
+    }
+  `;i([e.property({type:String})],exports.PdList.prototype,"role",2);i([e.property({type:Number})],exports.PdList.prototype,"tabindex",2);exports.PdList=i([e.customElement("pd-list")],exports.PdList);exports.PdListItem=class extends t.LitElement{constructor(){super(...arguments),this.type="text",this.headline="",this.supportingText="",this.trailingSupportingText="",this.href="",this.target="",this.disabled=!1,this.icon="",this.trailingIcon="",this.avatar="",this.image=""}getListItemTemplate(){const s=this.headline?t.html`<div slot="headline">${this.headline}</div>`:t.html`<slot name="headline" slot="headline"></slot>`,n=this.supportingText?t.html`<div slot="supporting-text">${this.supportingText}</div>`:t.html`<slot name="supporting-text" slot="supporting-text"></slot>`,l=this.trailingSupportingText?t.html`<div slot="trailing-supporting-text">${this.trailingSupportingText}</div>`:t.html`<slot name="trailing-supporting-text" slot="trailing-supporting-text"></slot>`,r=this.icon?t.html`<md-icon slot="start">${this.icon}</md-icon>`:this.avatar?t.html`<img slot="start" src="${this.avatar}" class="avatar" alt="" />`:this.image?t.html`<img slot="start" src="${this.image}" class="image" alt="" />`:t.html`<slot name="start" slot="start"></slot>`,d=this.trailingIcon?t.html`<md-icon slot="end">${this.trailingIcon}</md-icon>`:t.html`<slot name="end" slot="end"></slot>`,o={disabled:this.disabled,tabindex:this.tabindex,href:this.href||t.nothing,target:this.target||t.nothing};return t.html`
+      <md-list-item
+        .type=${this.type}
+        ?disabled=${o.disabled}
+        .tabindex=${o.tabindex}
+        .href=${o.href}
+        .target=${o.target}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        ${r}
+        ${s}
+        ${n}
+        ${l}
+        ${d}
+      </md-list-item>
+    `}render(){return this.getListItemTemplate()}_handleClick(s){this.disabled||this.dispatchEvent(new CustomEvent("list-item-click",{detail:{type:this.type,headline:this.headline,href:this.href},bubbles:!0}))}_handleKeydown(s){this.disabled||(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._handleClick(s))}};exports.PdListItem.styles=t.css`
+    :host {
+      display: block;
+      --md-list-item-list-item-container-color: var(--md-sys-color-surface);
+      --md-list-item-list-item-label-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-container-shape: var(--md-sys-shape-corner-none);
+    }
+
+    md-list-item {
+      --md-list-item-label-text-font: var(--md-sys-typescale-body-large-font);
+      --md-list-item-label-text-size: var(--md-sys-typescale-body-large-size);
+      --md-list-item-label-text-weight: var(--md-sys-typescale-body-large-weight);
+      --md-list-item-label-text-line-height: var(--md-sys-typescale-body-large-line-height);
+      --md-list-item-supporting-text-font: var(--md-sys-typescale-body-medium-font);
+      --md-list-item-supporting-text-size: var(--md-sys-typescale-body-medium-size);
+      --md-list-item-supporting-text-weight: var(--md-sys-typescale-body-medium-weight);
+      --md-list-item-supporting-text-line-height: var(--md-sys-typescale-body-medium-line-height);
+      --md-list-item-trailing-supporting-text-font: var(--md-sys-typescale-label-small-font);
+      --md-list-item-trailing-supporting-text-size: var(--md-sys-typescale-label-small-size);
+      --md-list-item-trailing-supporting-text-weight: var(--md-sys-typescale-label-small-weight);
+      --md-list-item-trailing-supporting-text-line-height: var(--md-sys-typescale-label-small-line-height);
+      transition: background-color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+    }
+
+    md-list-item:hover {
+      --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-hover, var(--md-sys-color-surface-variant));
+    }
+
+    md-list-item:focus {
+      --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-focus, var(--md-sys-color-surface-variant));
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: var(--md-sys-shape-corner-full);
+      object-fit: cover;
+    }
+
+    .image {
+      width: 56px;
+      height: 56px;
+      border-radius: var(--md-sys-shape-corner-small);
+      object-fit: cover;
+    }
+
+    :host([disabled]) md-list-item {
+      --md-list-item-list-item-label-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-supporting-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-leading-icon-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-trailing-icon-color: var(--md-sys-color-on-surface);
+      opacity: var(--md-sys-state-disabled-content-opacity, 0.38);
+      cursor: not-allowed;
+    }
+  `;i([e.property({type:String})],exports.PdListItem.prototype,"type",2);i([e.property({type:String})],exports.PdListItem.prototype,"headline",2);i([e.property({type:String,attribute:"supporting-text"})],exports.PdListItem.prototype,"supportingText",2);i([e.property({type:String,attribute:"trailing-supporting-text"})],exports.PdListItem.prototype,"trailingSupportingText",2);i([e.property({type:String})],exports.PdListItem.prototype,"href",2);i([e.property({type:String})],exports.PdListItem.prototype,"target",2);i([e.property({type:Boolean})],exports.PdListItem.prototype,"disabled",2);i([e.property({type:String})],exports.PdListItem.prototype,"icon",2);i([e.property({type:String,attribute:"trailing-icon"})],exports.PdListItem.prototype,"trailingIcon",2);i([e.property({type:String})],exports.PdListItem.prototype,"avatar",2);i([e.property({type:String})],exports.PdListItem.prototype,"image",2);i([e.property({type:Number})],exports.PdListItem.prototype,"tabindex",2);exports.PdListItem=i([e.customElement("pd-list-item")],exports.PdListItem);exports.PdListDivider=class extends t.LitElement{constructor(){super(...arguments),this.inset=!1,this.role="separator"}render(){return t.html`
+      <md-divider
+        ?inset=${this.inset}
+        role=${this.role}
+      ></md-divider>
+    `}};exports.PdListDivider.styles=t.css`
+    :host {
+      display: block;
+      --md-divider-color: var(--md-sys-color-outline-variant);
+      --md-divider-thickness: 1px;
+    }
+
+    md-divider {
+      margin: var(--md-sys-spacing-100, 4px) 0;
+    }
+  `;i([e.property({type:Boolean})],exports.PdListDivider.prototype,"inset",2);i([e.property({type:String})],exports.PdListDivider.prototype,"role",2);exports.PdListDivider=i([e.customElement("pd-list-divider")],exports.PdListDivider);