@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),r=require("lit/decorators.js");require("@material/web/progress/circular-progress.js");require("@material/web/progress/linear-progress.js");var n=Object.defineProperty,c=Object.getOwnPropertyDescriptor,e=(a,t,p,i)=>{for(var s=i>1?void 0:i?c(t,p):t,l=a.length-1,d;l>=0;l--)(d=a[l])&&(s=(i?d(t,p,s):d(s))||s);return i&&s&&n(t,p,s),s};exports.PdProgress=class extends o.LitElement{constructor(){super(...arguments),this.type="linear",this.max=1,this.indeterminate=!1,this.visible=!0,this.size="medium",this.ariaLabel=""}render(){return this.type==="circular"?o.html`
+        <md-circular-progress
+          .value=${this.indeterminate?void 0:this.value}
+          ?indeterminate=${this.indeterminate}
+          aria-label=${this.ariaLabel||"Progress indicator"}
+        ></md-circular-progress>
+      `:o.html`
+      <md-linear-progress
+        .value=${this.indeterminate?void 0:this.value}
+        .max=${this.max}
+        .buffer=${this.buffer}
+        ?indeterminate=${this.indeterminate}
+        aria-label=${this.ariaLabel||"Progress indicator"}
+      ></md-linear-progress>
+    `}};exports.PdProgress.styles=o.css`
+    :host {
+      display: inline-block;
+    }
+
+    :host([type="linear"]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([type="circular"]) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    md-linear-progress {
+      width: 100%;
+      /* Apply Prioticket design system tokens */
+      --md-linear-progress-active-indicator-color: var(--md-sys-color-primary);
+      --md-linear-progress-track-color: var(--md-sys-color-outline-variant);
+      --md-linear-progress-active-indicator-height: 4px;
+      --md-linear-progress-track-height: 4px;
+      --md-linear-progress-track-shape: var(--md-sys-shape-corner-full);
+      
+      /* Buffer progress styling */
+      --md-linear-progress-buffer-color: var(--md-sys-color-surface-container-high);
+    }
+
+    md-circular-progress {
+      /* Apply Prioticket design system tokens */
+      --md-circular-progress-color: var(--md-sys-color-primary);
+      --md-circular-progress-active-indicator-color: var(--md-sys-color-primary);
+      --md-circular-progress-size: var(--pd-progress-size, 48px);
+    }
+
+    /* Size variants for circular progress */
+    :host([size="small"]) md-circular-progress {
+      --md-circular-progress-size: 24px;
+      --pd-progress-size: 24px;
+    }
+
+    :host([size="medium"]) md-circular-progress {
+      --md-circular-progress-size: 48px;
+      --pd-progress-size: 48px;
+    }
+
+    :host([size="large"]) md-circular-progress {
+      --md-circular-progress-size: 64px;
+      --pd-progress-size: 64px;
+    }
+
+    /* Hidden state */
+    :host([hidden]),
+    :host(:not([visible])) {
+      display: none !important;
+    }
+  `;e([r.property({type:String})],exports.PdProgress.prototype,"type",2);e([r.property({type:Number})],exports.PdProgress.prototype,"value",2);e([r.property({type:Number})],exports.PdProgress.prototype,"max",2);e([r.property({type:Number})],exports.PdProgress.prototype,"buffer",2);e([r.property({type:Boolean})],exports.PdProgress.prototype,"indeterminate",2);e([r.property({type:Boolean,reflect:!0})],exports.PdProgress.prototype,"visible",2);e([r.property({type:String})],exports.PdProgress.prototype,"size",2);e([r.property({type:String,attribute:"aria-label"})],exports.PdProgress.prototype,"ariaLabel",2);exports.PdProgress=e([r.customElement("pd-progress")],exports.PdProgress);

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

@@ -0,0 +1,119 @@
+import { css as m, LitElement as d, html as c } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
+import "@material/web/progress/circular-progress.js";
+import "@material/web/progress/linear-progress.js";
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (n, t, a, o) => {
+  for (var i = o > 1 ? void 0 : o ? y(t, a) : t, p = n.length - 1, l; p >= 0; p--)
+    (l = n[p]) && (i = (o ? l(t, a, i) : l(i)) || i);
+  return o && i && g(t, a, i), i;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.type = "linear", this.max = 1, this.indeterminate = !1, this.visible = !0, this.size = "medium", this.ariaLabel = "";
+  }
+  render() {
+    return this.type === "circular" ? c`
+        <md-circular-progress
+          .value=${this.indeterminate ? void 0 : this.value}
+          ?indeterminate=${this.indeterminate}
+          aria-label=${this.ariaLabel || "Progress indicator"}
+        ></md-circular-progress>
+      ` : c`
+      <md-linear-progress
+        .value=${this.indeterminate ? void 0 : this.value}
+        .max=${this.max}
+        .buffer=${this.buffer}
+        ?indeterminate=${this.indeterminate}
+        aria-label=${this.ariaLabel || "Progress indicator"}
+      ></md-linear-progress>
+    `;
+  }
+};
+r.styles = m`
+    :host {
+      display: inline-block;
+    }
+
+    :host([type="linear"]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([type="circular"]) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    md-linear-progress {
+      width: 100%;
+      /* Apply Prioticket design system tokens */
+      --md-linear-progress-active-indicator-color: var(--md-sys-color-primary);
+      --md-linear-progress-track-color: var(--md-sys-color-outline-variant);
+      --md-linear-progress-active-indicator-height: 4px;
+      --md-linear-progress-track-height: 4px;
+      --md-linear-progress-track-shape: var(--md-sys-shape-corner-full);
+      
+      /* Buffer progress styling */
+      --md-linear-progress-buffer-color: var(--md-sys-color-surface-container-high);
+    }
+
+    md-circular-progress {
+      /* Apply Prioticket design system tokens */
+      --md-circular-progress-color: var(--md-sys-color-primary);
+      --md-circular-progress-active-indicator-color: var(--md-sys-color-primary);
+      --md-circular-progress-size: var(--pd-progress-size, 48px);
+    }
+
+    /* Size variants for circular progress */
+    :host([size="small"]) md-circular-progress {
+      --md-circular-progress-size: 24px;
+      --pd-progress-size: 24px;
+    }
+
+    :host([size="medium"]) md-circular-progress {
+      --md-circular-progress-size: 48px;
+      --pd-progress-size: 48px;
+    }
+
+    :host([size="large"]) md-circular-progress {
+      --md-circular-progress-size: 64px;
+      --pd-progress-size: 64px;
+    }
+
+    /* Hidden state */
+    :host([hidden]),
+    :host(:not([visible])) {
+      display: none !important;
+    }
+  `;
+e([
+  s({ type: String })
+], r.prototype, "type", 2);
+e([
+  s({ type: Number })
+], r.prototype, "value", 2);
+e([
+  s({ type: Number })
+], r.prototype, "max", 2);
+e([
+  s({ type: Number })
+], r.prototype, "buffer", 2);
+e([
+  s({ type: Boolean })
+], r.prototype, "indeterminate", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "visible", 2);
+e([
+  s({ type: String })
+], r.prototype, "size", 2);
+e([
+  s({ type: String, attribute: "aria-label" })
+], r.prototype, "ariaLabel", 2);
+r = e([
+  u("pd-progress")
+], r);
+export {
+  r as PdProgress
+};

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

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),e=require("lit/decorators.js");require("@material/web/radio/radio.js");var u=Object.defineProperty,n=Object.getOwnPropertyDescriptor,t=(l,a,r,i)=>{for(var d=i>1?void 0:i?n(a,r):a,o=l.length-1,p;o>=0;o--)(p=l[o])&&(d=(i?p(a,r,d):p(d))||d);return i&&d&&u(a,r,d),d};exports.PdRadio=class extends s.LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.name="",this.value="",this.ariaLabel="",this.ariaDescribedby="",this.required=!1}render(){return s.html`
+      <md-radio
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        name=${this.name}
+        value=${this.value}
+        aria-label=${this.ariaLabel}
+        aria-describedby=${this.ariaDescribedby}
+        ?required=${this.required}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      ></md-radio>
+    `}handleChange(a){const r=a.target;this.checked=r.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}handleInput(a){const r=a.target;this.checked=r.checked,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}};t([e.query("md-radio")],exports.PdRadio.prototype,"radio",2);t([e.property({type:Boolean,reflect:!0})],exports.PdRadio.prototype,"checked",2);t([e.property({type:Boolean,reflect:!0})],exports.PdRadio.prototype,"disabled",2);t([e.property({type:String})],exports.PdRadio.prototype,"name",2);t([e.property({type:String})],exports.PdRadio.prototype,"value",2);t([e.property({type:String,attribute:"aria-label"})],exports.PdRadio.prototype,"ariaLabel",2);t([e.property({type:String,attribute:"aria-describedby"})],exports.PdRadio.prototype,"ariaDescribedby",2);t([e.property({type:Boolean})],exports.PdRadio.prototype,"required",2);exports.PdRadio=t([e.customElement("pd-radio")],exports.PdRadio);exports.PdRadioGroup=class extends s.LitElement{constructor(){super(...arguments),this.name="",this.value="",this.disabled=!1,this.required=!1,this.ariaLabel="",this.ariaLabelledby=""}render(){return s.html`
+      <div
+        role="radiogroup"
+        aria-label=${this.ariaLabel}
+        aria-labelledby=${this.ariaLabelledby}
+        aria-required=${this.required?"true":"false"}
+        @change=${this.handleChange}
+      >
+        <slot></slot>
+      </div>
+    `}firstUpdated(){this.updateRadioButtons()}updated(a){(a.has("name")||a.has("value")||a.has("disabled"))&&this.updateRadioButtons()}updateRadioButtons(){this.querySelectorAll("pd-radio").forEach(r=>{const i=r;this.name&&(i.name=this.name),i.disabled=this.disabled||i.disabled,i.checked=i.value===this.value,i.required=this.required})}handleChange(a){const r=a.target;r.checked&&(this.value=r.value,this.querySelectorAll("pd-radio").forEach(d=>{const o=d;o!==r&&o.name===r.name&&(o.checked=!1)}),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}})))}};exports.PdRadioGroup.styles=s.css`
+    :host {
+      display: block;
+    }
+
+    div[role="radiogroup"] {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  `;t([e.property({type:String})],exports.PdRadioGroup.prototype,"name",2);t([e.property({type:String})],exports.PdRadioGroup.prototype,"value",2);t([e.property({type:Boolean,reflect:!0})],exports.PdRadioGroup.prototype,"disabled",2);t([e.property({type:Boolean})],exports.PdRadioGroup.prototype,"required",2);t([e.property({type:String,attribute:"aria-label"})],exports.PdRadioGroup.prototype,"ariaLabel",2);t([e.property({type:String,attribute:"aria-labelledby"})],exports.PdRadioGroup.prototype,"ariaLabelledby",2);exports.PdRadioGroup=t([e.customElement("pd-radio-group")],exports.PdRadioGroup);

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

@@ -0,0 +1,153 @@
+import { css as b, LitElement as p, html as u } from "lit";
+import { query as y, property as i, customElement as c } from "lit/decorators.js";
+import "@material/web/radio/radio.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (a, t, r, l) => {
+  for (var s = l > 1 ? void 0 : l ? v(t, r) : t, h = a.length - 1, n; h >= 0; h--)
+    (n = a[h]) && (s = (l ? n(t, r, s) : n(s)) || s);
+  return l && s && m(t, r, s), s;
+};
+let d = class extends p {
+  constructor() {
+    super(...arguments), this.checked = !1, this.disabled = !1, this.name = "", this.value = "", this.ariaLabel = "", this.ariaDescribedby = "", this.required = !1;
+  }
+  render() {
+    return u`
+      <md-radio
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        name=${this.name}
+        value=${this.value}
+        aria-label=${this.ariaLabel}
+        aria-describedby=${this.ariaDescribedby}
+        ?required=${this.required}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      ></md-radio>
+    `;
+  }
+  handleChange(a) {
+    const t = a.target;
+    this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { checked: this.checked, value: this.value }
+    }));
+  }
+  handleInput(a) {
+    const t = a.target;
+    this.checked = t.checked, this.dispatchEvent(new CustomEvent("input", {
+      bubbles: !0,
+      composed: !0,
+      detail: { checked: this.checked, value: this.value }
+    }));
+  }
+};
+e([
+  y("md-radio")
+], d.prototype, "radio", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], d.prototype, "checked", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], d.prototype, "disabled", 2);
+e([
+  i({ type: String })
+], d.prototype, "name", 2);
+e([
+  i({ type: String })
+], d.prototype, "value", 2);
+e([
+  i({ type: String, attribute: "aria-label" })
+], d.prototype, "ariaLabel", 2);
+e([
+  i({ type: String, attribute: "aria-describedby" })
+], d.prototype, "ariaDescribedby", 2);
+e([
+  i({ type: Boolean })
+], d.prototype, "required", 2);
+d = e([
+  c("pd-radio")
+], d);
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.value = "", this.disabled = !1, this.required = !1, this.ariaLabel = "", this.ariaLabelledby = "";
+  }
+  render() {
+    return u`
+      <div
+        role="radiogroup"
+        aria-label=${this.ariaLabel}
+        aria-labelledby=${this.ariaLabelledby}
+        aria-required=${this.required ? "true" : "false"}
+        @change=${this.handleChange}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+  firstUpdated() {
+    this.updateRadioButtons();
+  }
+  updated(a) {
+    (a.has("name") || a.has("value") || a.has("disabled")) && this.updateRadioButtons();
+  }
+  updateRadioButtons() {
+    this.querySelectorAll("pd-radio").forEach((t) => {
+      const r = t;
+      this.name && (r.name = this.name), r.disabled = this.disabled || r.disabled, r.checked = r.value === this.value, r.required = this.required;
+    });
+  }
+  handleChange(a) {
+    const t = a.target;
+    t.checked && (this.value = t.value, this.querySelectorAll("pd-radio").forEach((l) => {
+      const s = l;
+      s !== t && s.name === t.name && (s.checked = !1);
+    }), this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    })));
+  }
+};
+o.styles = b`
+    :host {
+      display: block;
+    }
+
+    div[role="radiogroup"] {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  `;
+e([
+  i({ type: String })
+], o.prototype, "name", 2);
+e([
+  i({ type: String })
+], o.prototype, "value", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+e([
+  i({ type: Boolean })
+], o.prototype, "required", 2);
+e([
+  i({ type: String, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
+e([
+  i({ type: String, attribute: "aria-labelledby" })
+], o.prototype, "ariaLabelledby", 2);
+o = e([
+  c("pd-radio-group")
+], o);
+export {
+  d as PdRadio,
+  o as PdRadioGroup
+};

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

@@ -0,0 +1,135 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),s=require("lit/decorators.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,n=(d,r,e,t)=>{for(var o=t>1?void 0:t?m(r,e):r,i=d.length-1,a;i>=0;i--)(a=d[i])&&(o=(t?a(r,e,o):a(o))||o);return t&&o&&c(r,e,o),o};exports.PdSegmentedButton=class extends l.LitElement{constructor(){super(...arguments),this.multiSelect=!1,this.size="medium",this.disabled=!1,this.selectedValues=[],this._segments=[]}connectedCallback(){super.connectedCallback(),this.addEventListener("segment-click",this._handleSegmentClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("segment-click",this._handleSegmentClick)}firstUpdated(){this._updateSegments()}_updateSegments(){const r=this.querySelectorAll("pd-segment-item");this._segments=Array.from(r),this._segments.forEach((e,t)=>{e.disabled=this.disabled||e.disabled,e.setAttribute("data-segment-index",t.toString()),this.selectedValues.includes(e.value)&&(e.selected=!0)})}_handleSegmentClick(r){if(this.disabled)return;const e=r.target,t=e.value;this.multiSelect?this.selectedValues.indexOf(t)>-1?(this.selectedValues=this.selectedValues.filter(i=>i!==t),e.selected=!1):(this.selectedValues=[...this.selectedValues,t],e.selected=!0):this.selectedValues[0]===t?(this.selectedValues=[],e.selected=!1):(this._segments.forEach(o=>o.selected=!1),this.selectedValues=[t],e.selected=!0),this.dispatchEvent(new CustomEvent("selectionchange",{detail:{selectedValues:this.selectedValues,multiSelect:this.multiSelect},bubbles:!0,composed:!0}))}render(){return l.html`
+      <div class="segmented-button" role="group">
+        <slot @slotchange=${this._updateSegments}></slot>
+      </div>
+    `}};exports.PdSegmentedButton.styles=l.css`
+    :host {
+      display: inline-flex;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .segmented-button {
+      display: inline-flex;
+      border-radius: var(--md-segmented-button-shape, var(--md-sys-shape-corner-small, 20px));
+      border: 1px solid var(--md-sys-color-outline, #79747e);
+      overflow: hidden;
+      background: var(--md-sys-color-surface, #fef7ff);
+    }
+
+    :host([disabled]) .segmented-button {
+      border-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+
+    /* Size variants */
+    :host([size='small']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+    }
+
+    :host([size='medium']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+    }
+
+    :host([size='large']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+    }
+
+    ::slotted(pd-segment-item) {
+      border-right: 1px solid var(--md-sys-color-outline, #79747e);
+    }
+
+    ::slotted(pd-segment-item:last-child) {
+      border-right: none;
+    }
+
+    :host([disabled]) ::slotted(pd-segment-item) {
+      border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+  `;n([s.property({type:Boolean,attribute:"multi-select"})],exports.PdSegmentedButton.prototype,"multiSelect",2);n([s.property({type:String,reflect:!0})],exports.PdSegmentedButton.prototype,"size",2);n([s.property({type:Boolean,reflect:!0})],exports.PdSegmentedButton.prototype,"disabled",2);n([s.property({type:Array})],exports.PdSegmentedButton.prototype,"selectedValues",2);n([s.state()],exports.PdSegmentedButton.prototype,"_segments",2);exports.PdSegmentedButton=n([s.customElement("pd-segmented-button")],exports.PdSegmentedButton);exports.PdSegmentItem=class extends l.LitElement{constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1,this.icon="",this.iconOnly=!1}_handleClick(){this.disabled||this.dispatchEvent(new CustomEvent("segment-click",{detail:{value:this.value},bubbles:!0,composed:!0}))}render(){return l.html`
+      <button
+        class="segment ${this.selected?"selected":""} ${this.iconOnly?"icon-only":""}"
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        aria-pressed=${this.selected}
+      >
+        ${this.icon?l.html`<md-icon class="segment-icon">${this.icon}</md-icon>`:""}
+        ${this.iconOnly?"":l.html`<span class="segment-label"><slot></slot></span>`}
+      </button>
+    `}};exports.PdSegmentItem.styles=l.css`
+    :host {
+      display: inline-flex;
+    }
+
+    .segment {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--md-sys-spacing-200, 8px);
+      padding: 0 var(--md-sys-spacing-400, 16px);
+      height: var(--md-segmented-button-container-height, 2.5rem);
+      border: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface, #1d1b20);
+      font-family: inherit;
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      font-weight: var(--md-sys-typescale-label-large-weight, 500);
+      cursor: pointer;
+      transition: all 150ms ease-in-out;
+      position: relative;
+      outline: none;
+      min-width: 48px;
+    }
+
+    .segment.icon-only {
+      padding: 0;
+      width: var(--md-segmented-button-container-height, 2.5rem);
+    }
+
+    .segment:hover:not(:disabled) {
+      background: var(--md-sys-color-on-surface-opacity-08, rgba(29, 27, 32, 0.08));
+    }
+
+    .segment:focus-visible {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+
+    .segment:active:not(:disabled) {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+
+    .segment.selected {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      color: var(--md-sys-color-on-secondary-container, #1d192b);
+    }
+
+    .segment.selected:hover:not(:disabled) {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      filter: brightness(0.95);
+    }
+
+    .segment:disabled {
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+      cursor: not-allowed;
+    }
+
+    .segment.selected:disabled {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+    }
+
+    .segment-icon {
+      --md-icon-size: 18px;
+    }
+
+    .segment-label {
+      white-space: nowrap;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .segment {
+        transition: none;
+      }
+    }
+  `;n([s.property({type:String})],exports.PdSegmentItem.prototype,"value",2);n([s.property({type:Boolean,reflect:!0})],exports.PdSegmentItem.prototype,"selected",2);n([s.property({type:Boolean,reflect:!0})],exports.PdSegmentItem.prototype,"disabled",2);n([s.property({type:String})],exports.PdSegmentItem.prototype,"icon",2);n([s.property({type:Boolean,attribute:"icon-only"})],exports.PdSegmentItem.prototype,"iconOnly",2);exports.PdSegmentItem=n([s.customElement("pd-segment-item")],exports.PdSegmentItem);