@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,99 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("lit"),l=require("lit/decorators.js");require("@material/web/button/filled-button.js");require("@material/web/button/outlined-button.js");require("@material/web/button/text-button.js");require("@material/web/button/elevated-button.js");require("@material/web/button/filled-tonal-button.js");require("@material/web/icon/icon.js");var m=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(a,i,o,t)=>{for(var n=t>1?void 0:t?h(i,o):i,r=a.length-1,d;r>=0;r--)(d=a[r])&&(n=(t?d(i,o,n):d(n))||n);return t&&n&&m(i,o,n),n};exports.PdButton=class extends e.LitElement{constructor(){super(...arguments),this.variant="filled",this.size="medium",this.icon="",this.iconTrailing=!1,this.disabled=!1}getButtonTemplate(){const i=this.iconTrailing?"trailing-icon":"icon",o=this.icon?e.html`<md-icon slot="${i}">${this.icon}</md-icon>`:"",t=e.html`${this.iconTrailing?"":o}<slot></slot>${this.iconTrailing?o:""}`;switch(this.variant){case"outlined":return e.html`<md-outlined-button ?disabled=${this.disabled}>${t}</md-outlined-button>`;case"text":return e.html`<md-text-button ?disabled=${this.disabled}>${t}</md-text-button>`;case"elevated":return e.html`<md-elevated-button ?disabled=${this.disabled}>${t}</md-elevated-button>`;case"tonal":return e.html`<md-filled-tonal-button ?disabled=${this.disabled}>${t}</md-filled-tonal-button>`;default:return e.html`<md-filled-button ?disabled=${this.disabled}>${t}</md-filled-button>`}}render(){return this.getButtonTemplate()}};exports.PdButton.styles=e.css`
+    :host {
+      display: inline-flex;
+      /* We set a default shape for ALL Prioticket buttons. */
+      --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-filled-tonal-button-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    /* We target the inner Material Web buttons to apply our specific styles. */
+    md-filled-button,
+    md-outlined-button,
+    md-text-button,
+    md-elevated-button,
+    md-filled-tonal-button {
+      width: 100%;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* --- Size Variant Logic --- */
+    :host([size='xsmall']) md-filled-button,
+    :host([size='xsmall']) md-outlined-button,
+    :host([size='xsmall']) md-text-button,
+    :host([size='xsmall']) md-elevated-button,
+    :host([size='xsmall']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      font-size: var(--md-sys-typescale-label-small-size);
+      font-weight: var(--md-sys-typescale-label-small-weight);
+    }
+
+    :host([size='small']) md-filled-button,
+    :host([size='small']) md-outlined-button,
+    :host([size='small']) md-text-button,
+    :host([size='small']) md-elevated-button,
+    :host([size='small']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      font-weight: var(--md-sys-typescale-label-medium-weight);
+    }
+
+    :host([size='medium']) md-filled-button,
+    :host([size='medium']) md-outlined-button,
+    :host([size='medium']) md-text-button,
+    :host([size='medium']) md-elevated-button,
+    :host([size='medium']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      font-size: var(--md-sys-typescale-label-large-size);
+      font-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    :host([size='large']) md-filled-button,
+    :host([size='large']) md-outlined-button,
+    :host([size='large']) md-text-button,
+    :host([size='large']) md-elevated-button,
+    :host([size='large']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      font-size: var(--md-sys-typescale-title-small-size);
+      font-weight: var(--md-sys-typescale-title-small-weight);
+    }
+    
+    :host([size='xlarge']) md-filled-button,
+    :host([size='xlarge']) md-outlined-button,
+    :host([size='xlarge']) md-text-button,
+    :host([size='xlarge']) md-elevated-button,
+    :host([size='xlarge']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      font-weight: var(--md-sys-typescale-title-medium-weight);
+    }
+
+    /* --- Icon Logic --- */
+    /* The ::slotted selector allows us to style content passed into the slot */
+    ::slotted(span) {
+      display: inline-block;
+    }
+  `;s([l.property({type:String})],exports.PdButton.prototype,"variant",2);s([l.property({type:String,reflect:!0})],exports.PdButton.prototype,"size",2);s([l.property({type:String})],exports.PdButton.prototype,"icon",2);s([l.property({type:Boolean,attribute:"icon-trailing"})],exports.PdButton.prototype,"iconTrailing",2);s([l.property({type:Boolean,reflect:!0})],exports.PdButton.prototype,"disabled",2);exports.PdButton=s([l.customElement("pd-button")],exports.PdButton);

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

@@ -0,0 +1,156 @@
+import { css as h, LitElement as u, html as o } from "lit";
+import { property as l, customElement as b } from "lit/decorators.js";
+import "@material/web/button/filled-button.js";
+import "@material/web/button/outlined-button.js";
+import "@material/web/button/text-button.js";
+import "@material/web/button/elevated-button.js";
+import "@material/web/button/filled-tonal-button.js";
+import "@material/web/icon/icon.js";
+var c = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (a, n, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? g(n, t) : n, d = a.length - 1, m; d >= 0; d--)
+    (m = a[d]) && (i = (r ? m(n, t, i) : m(i)) || i);
+  return r && i && c(n, t, i), i;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "filled", this.size = "medium", this.icon = "", this.iconTrailing = !1, this.disabled = !1;
+  }
+  getButtonTemplate() {
+    const a = this.iconTrailing ? "trailing-icon" : "icon", n = this.icon ? o`<md-icon slot="${a}">${this.icon}</md-icon>` : "", t = o`${this.iconTrailing ? "" : n}<slot></slot>${this.iconTrailing ? n : ""}`;
+    switch (this.variant) {
+      case "outlined":
+        return o`<md-outlined-button ?disabled=${this.disabled}>${t}</md-outlined-button>`;
+      case "text":
+        return o`<md-text-button ?disabled=${this.disabled}>${t}</md-text-button>`;
+      case "elevated":
+        return o`<md-elevated-button ?disabled=${this.disabled}>${t}</md-elevated-button>`;
+      case "tonal":
+        return o`<md-filled-tonal-button ?disabled=${this.disabled}>${t}</md-filled-tonal-button>`;
+      default:
+        return o`<md-filled-button ?disabled=${this.disabled}>${t}</md-filled-button>`;
+    }
+  }
+  render() {
+    return this.getButtonTemplate();
+  }
+};
+e.styles = h`
+    :host {
+      display: inline-flex;
+      /* We set a default shape for ALL Prioticket buttons. */
+      --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-filled-tonal-button-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    /* We target the inner Material Web buttons to apply our specific styles. */
+    md-filled-button,
+    md-outlined-button,
+    md-text-button,
+    md-elevated-button,
+    md-filled-tonal-button {
+      width: 100%;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* --- Size Variant Logic --- */
+    :host([size='xsmall']) md-filled-button,
+    :host([size='xsmall']) md-outlined-button,
+    :host([size='xsmall']) md-text-button,
+    :host([size='xsmall']) md-elevated-button,
+    :host([size='xsmall']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      font-size: var(--md-sys-typescale-label-small-size);
+      font-weight: var(--md-sys-typescale-label-small-weight);
+    }
+
+    :host([size='small']) md-filled-button,
+    :host([size='small']) md-outlined-button,
+    :host([size='small']) md-text-button,
+    :host([size='small']) md-elevated-button,
+    :host([size='small']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      font-weight: var(--md-sys-typescale-label-medium-weight);
+    }
+
+    :host([size='medium']) md-filled-button,
+    :host([size='medium']) md-outlined-button,
+    :host([size='medium']) md-text-button,
+    :host([size='medium']) md-elevated-button,
+    :host([size='medium']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      font-size: var(--md-sys-typescale-label-large-size);
+      font-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    :host([size='large']) md-filled-button,
+    :host([size='large']) md-outlined-button,
+    :host([size='large']) md-text-button,
+    :host([size='large']) md-elevated-button,
+    :host([size='large']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      font-size: var(--md-sys-typescale-title-small-size);
+      font-weight: var(--md-sys-typescale-title-small-weight);
+    }
+    
+    :host([size='xlarge']) md-filled-button,
+    :host([size='xlarge']) md-outlined-button,
+    :host([size='xlarge']) md-text-button,
+    :host([size='xlarge']) md-elevated-button,
+    :host([size='xlarge']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      font-weight: var(--md-sys-typescale-title-medium-weight);
+    }
+
+    /* --- Icon Logic --- */
+    /* The ::slotted selector allows us to style content passed into the slot */
+    ::slotted(span) {
+      display: inline-block;
+    }
+  `;
+s([
+  l({ type: String })
+], e.prototype, "variant", 2);
+s([
+  l({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+s([
+  l({ type: String })
+], e.prototype, "icon", 2);
+s([
+  l({ type: Boolean, attribute: "icon-trailing" })
+], e.prototype, "iconTrailing", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = s([
+  b("pd-button")
+], e);
+export {
+  e as PdButton
+};

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

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),i=require("lit/decorators.js");var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(s,r,o,a)=>{for(var e=a>1?void 0:a?p(r,o):r,c=s.length-1,l;c>=0;c--)(l=s[c])&&(e=(a?l(r,o,e):l(e))||e);return a&&e&&n(r,o,e),e};exports.PdCard=class extends t.LitElement{constructor(){super(...arguments),this.variant="elevated",this.clickable=!1}render(){const r=`card ${this.variant}${this.clickable?" clickable":""}`;return t.html`
+      <div class="${r}" @click=${this.clickable?this._handleClick:void 0}>
+        <slot></slot>
+      </div>
+    `}_handleClick(){this.clickable&&this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0}))}};exports.PdCard.styles=t.css`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .card {
+      border-radius: var(--md-sys-shape-corner-small, 5px);
+      padding: 16px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .card.elevated {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      box-shadow: 
+        0px 1px 2px rgba(0, 0, 0, 0.3),
+        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+    }
+
+    .card.filled {
+      background: var(--md-sys-color-surface-variant, #f3f3f3);
+      color: var(--md-sys-color-on-surface-variant, #000000);
+    }
+
+    .card.outlined {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      border: 1px solid var(--md-sys-color-outline, #cccccc);
+    }
+
+    .card.clickable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .card.clickable:hover {
+      filter: brightness(0.95);
+    }
+
+    .card.clickable.elevated:hover {
+      box-shadow: 
+        0px 2px 6px 2px rgba(0, 0, 0, 0.15),
+        0px 1px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    .card.clickable:active {
+      filter: brightness(0.9);
+    }
+
+    /* Material Web Components will use --md-* design tokens directly */
+    /* Tokens will be provided by separate theme file with --md-* naming */
+  `;d([i.property({type:String})],exports.PdCard.prototype,"variant",2);d([i.property({type:Boolean})],exports.PdCard.prototype,"clickable",2);exports.PdCard=d([i.customElement("pd-card")],exports.PdCard);

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

@@ -0,0 +1,93 @@
+import { css as n, LitElement as p, html as f } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (a, s, l, o) => {
+  for (var e = o > 1 ? void 0 : o ? m(s, l) : s, c = a.length - 1, t; c >= 0; c--)
+    (t = a[c]) && (e = (o ? t(s, l, e) : t(e)) || e);
+  return o && e && b(s, l, e), e;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "elevated", this.clickable = !1;
+  }
+  render() {
+    const a = `card ${this.variant}${this.clickable ? " clickable" : ""}`;
+    return f`
+      <div class="${a}" @click=${this.clickable ? this._handleClick : void 0}>
+        <slot></slot>
+      </div>
+    `;
+  }
+  _handleClick() {
+    this.clickable && this.dispatchEvent(new CustomEvent("click", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+r.styles = n`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .card {
+      border-radius: var(--md-sys-shape-corner-small, 5px);
+      padding: 16px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .card.elevated {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      box-shadow: 
+        0px 1px 2px rgba(0, 0, 0, 0.3),
+        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+    }
+
+    .card.filled {
+      background: var(--md-sys-color-surface-variant, #f3f3f3);
+      color: var(--md-sys-color-on-surface-variant, #000000);
+    }
+
+    .card.outlined {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      border: 1px solid var(--md-sys-color-outline, #cccccc);
+    }
+
+    .card.clickable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .card.clickable:hover {
+      filter: brightness(0.95);
+    }
+
+    .card.clickable.elevated:hover {
+      box-shadow: 
+        0px 2px 6px 2px rgba(0, 0, 0, 0.15),
+        0px 1px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    .card.clickable:active {
+      filter: brightness(0.9);
+    }
+
+    /* Material Web Components will use --md-* design tokens directly */
+    /* Tokens will be provided by separate theme file with --md-* naming */
+  `;
+i([
+  d({ type: String })
+], r.prototype, "variant", 2);
+i([
+  d({ type: Boolean })
+], r.prototype, "clickable", 2);
+r = i([
+  v("pd-card")
+], r);
+export {
+  r as PdCard
+};

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

@@ -0,0 +1,85 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),r=require("lit/decorators.js");require("@material/web/checkbox/checkbox.js");var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,o=(c,t,e,i)=>{for(var a=i>1?void 0:i?d(t,e):t,n=c.length-1,l;n>=0;n--)(l=c[n])&&(a=(i?l(t,e,a):l(a))||a);return i&&a&&h(t,e,a),a};exports.PdCheckbox=class extends s.LitElement{constructor(){super(...arguments),this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.required=!1,this.value="",this.name="",this.label="",this.touchTarget=!1}render(){const t=this.label||"Checkbox",e=this.touchTarget?"wrapper":void 0,i=`checkbox-${Math.random().toString(36).substr(2,9)}`;return this.label?s.html`
+      <label class="checkbox-label" for=${i}>
+        <md-checkbox
+          id=${i}
+          ?checked=${this.checked}
+          ?indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          touch-target=${e||"wrapper"}
+          aria-label=${t}
+          .value=${this.value}
+          .name=${this.name}
+          @change=${this._handleChange}
+          @input=${this._handleInput}
+        ></md-checkbox>
+        <span class="label-text">${this.label}</span>
+      </label>
+    `:s.html`
+      <md-checkbox
+        ?checked=${this.checked}
+        ?indeterminate=${this.indeterminate}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        touch-target=${e||"wrapper"}
+        aria-label=${t}
+        .value=${this.value}
+        .name=${this.name}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
+      ></md-checkbox>
+    `}_handleChange(t){const e=t.target;this.checked=e.checked,this.indeterminate=e.indeterminate,this.dispatchEvent(new CustomEvent("change",{detail:{checked:e.checked,indeterminate:e.indeterminate,value:e.value},bubbles:!0}))}_handleInput(t){const e=t.target;this.checked=e.checked,this.indeterminate=e.indeterminate,this.dispatchEvent(new CustomEvent("input",{detail:{checked:e.checked,indeterminate:e.indeterminate,value:e.value},bubbles:!0}))}};exports.PdCheckbox.styles=s.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      /* Essential Material Design tokens only */
+      --md-checkbox-selected-container-color: var(--md-sys-color-primary);
+      --md-checkbox-selected-icon-color: var(--md-sys-color-on-primary);
+      --md-checkbox-unselected-outline-color: var(--md-sys-color-outline);
+      --md-checkbox-container-size: 18px;
+      --md-checkbox-icon-size: 16px;
+    }
+
+    .checkbox-label {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      gap: var(--md-sys-spacing-200);
+      user-select: none;
+    }
+
+    .checkbox-label:has(md-checkbox[disabled]) {
+      cursor: default;
+      color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+
+    .label-text {
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+    }
+
+    md-checkbox {
+      /* Explicit size for the checkbox component */
+      width: 18px;
+      height: 18px;
+      /* Ensure the checkbox maintains its size */
+      min-width: 18px;
+      min-height: 18px;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Error state styling */
+    :host([error]) {
+      --md-checkbox-unselected-outline-color: var(--md-sys-color-error);
+    }
+
+    :host([error]) .label-text {
+      color: var(--md-sys-color-error);
+    }
+  `;o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"checked",2);o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"indeterminate",2);o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"disabled",2);o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"required",2);o([r.property({type:String})],exports.PdCheckbox.prototype,"value",2);o([r.property({type:String})],exports.PdCheckbox.prototype,"name",2);o([r.property({type:String})],exports.PdCheckbox.prototype,"label",2);o([r.property({type:Boolean,attribute:"touch-target"})],exports.PdCheckbox.prototype,"touchTarget",2);exports.PdCheckbox=o([r.customElement("pd-checkbox")],exports.PdCheckbox);

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

@@ -0,0 +1,154 @@
+import { css as d, LitElement as m, html as h } from "lit";
+import { property as r, customElement as p } from "lit/decorators.js";
+import "@material/web/checkbox/checkbox.js";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (a, e, o, c) => {
+  for (var s = c > 1 ? void 0 : c ? b(e, o) : e, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (s = (c ? l(e, o, s) : l(s)) || s);
+  return c && s && u(e, o, s), s;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.value = "", this.name = "", this.label = "", this.touchTarget = !1;
+  }
+  render() {
+    const a = this.label || "Checkbox", e = this.touchTarget ? "wrapper" : void 0, o = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return this.label ? h`
+      <label class="checkbox-label" for=${o}>
+        <md-checkbox
+          id=${o}
+          ?checked=${this.checked}
+          ?indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          touch-target=${e || "wrapper"}
+          aria-label=${a}
+          .value=${this.value}
+          .name=${this.name}
+          @change=${this._handleChange}
+          @input=${this._handleInput}
+        ></md-checkbox>
+        <span class="label-text">${this.label}</span>
+      </label>
+    ` : h`
+      <md-checkbox
+        ?checked=${this.checked}
+        ?indeterminate=${this.indeterminate}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        touch-target=${e || "wrapper"}
+        aria-label=${a}
+        .value=${this.value}
+        .name=${this.name}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
+      ></md-checkbox>
+    `;
+  }
+  _handleChange(a) {
+    const e = a.target;
+    this.checked = e.checked, this.indeterminate = e.indeterminate, this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        checked: e.checked,
+        indeterminate: e.indeterminate,
+        value: e.value
+      },
+      bubbles: !0
+    }));
+  }
+  _handleInput(a) {
+    const e = a.target;
+    this.checked = e.checked, this.indeterminate = e.indeterminate, this.dispatchEvent(new CustomEvent("input", {
+      detail: {
+        checked: e.checked,
+        indeterminate: e.indeterminate,
+        value: e.value
+      },
+      bubbles: !0
+    }));
+  }
+};
+t.styles = d`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      /* Essential Material Design tokens only */
+      --md-checkbox-selected-container-color: var(--md-sys-color-primary);
+      --md-checkbox-selected-icon-color: var(--md-sys-color-on-primary);
+      --md-checkbox-unselected-outline-color: var(--md-sys-color-outline);
+      --md-checkbox-container-size: 18px;
+      --md-checkbox-icon-size: 16px;
+    }
+
+    .checkbox-label {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      gap: var(--md-sys-spacing-200);
+      user-select: none;
+    }
+
+    .checkbox-label:has(md-checkbox[disabled]) {
+      cursor: default;
+      color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+
+    .label-text {
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+    }
+
+    md-checkbox {
+      /* Explicit size for the checkbox component */
+      width: 18px;
+      height: 18px;
+      /* Ensure the checkbox maintains its size */
+      min-width: 18px;
+      min-height: 18px;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Error state styling */
+    :host([error]) {
+      --md-checkbox-unselected-outline-color: var(--md-sys-color-error);
+    }
+
+    :host([error]) .label-text {
+      color: var(--md-sys-color-error);
+    }
+  `;
+i([
+  r({ type: Boolean })
+], t.prototype, "checked", 2);
+i([
+  r({ type: Boolean })
+], t.prototype, "indeterminate", 2);
+i([
+  r({ type: Boolean })
+], t.prototype, "disabled", 2);
+i([
+  r({ type: Boolean })
+], t.prototype, "required", 2);
+i([
+  r({ type: String })
+], t.prototype, "value", 2);
+i([
+  r({ type: String })
+], t.prototype, "name", 2);
+i([
+  r({ type: String })
+], t.prototype, "label", 2);
+i([
+  r({ type: Boolean, attribute: "touch-target" })
+], t.prototype, "touchTarget", 2);
+t = i([
+  p("pd-checkbox")
+], t);
+export {
+  t as PdCheckbox
+};