@mellow.io/ds 0.1.0

package/dist/components/progress/step.styles.js

@@ -0,0 +1,137 @@
+import { css as e } from "lit";
+const i = e`
+  :host {
+    display: flex;
+    gap: var(--mellow-space-2, 8px);
+    align-items: flex-start;
+  }
+
+  /* ---- Line ---- */
+
+  .line {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-shrink: 0;
+  }
+
+  :host([size='desktop']) .line {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 40px;
+  }
+
+  :host([size='mobile']) .line {
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .line-bar {
+    height: 2px;
+    border-radius: var(--mellow-radius-full, 9999px);
+    width: 100%;
+  }
+
+  :host([size='mobile']) .line-bar {
+    width: 20px;
+    transform: rotate(-72deg);
+  }
+
+  :host([state='completed']) .line-bar {
+    background: var(--mellow-border-success, #5e8b7f);
+  }
+
+  :host([state='current']) .line-bar {
+    background: var(--mellow-icon-warning, #e27f00);
+  }
+
+  :host([state='further']) .line-bar {
+    background: var(--mellow-icon-tertiary, #d1d0d0);
+  }
+
+  /* ---- Icon ---- */
+
+  .icon-frame {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    flex-shrink: 0;
+  }
+
+  :host([size='mobile']) .icon-frame {
+    height: 22px;
+    align-items: center;
+    padding: 0;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: clip;
+  }
+
+  ::slotted([slot='icon']) {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* ---- Default badge-check icons (inline SVG) ---- */
+
+  .icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* ---- Text ---- */
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-0-5, 2px);
+    align-items: flex-start;
+    flex-shrink: 0;
+  }
+
+  .title {
+    margin: 0;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-medium, 500);
+    font-size: var(--mellow-font-size-16, 16px);
+    line-height: var(--mellow-line-height-22, 22px);
+    letter-spacing: 0;
+  }
+
+  :host([state='completed']) .title {
+    color: var(--mellow-text-success, #5e8b7f);
+  }
+
+  :host([state='current']) .title {
+    color: var(--mellow-text-warning, #e27f00);
+  }
+
+  :host([state='further']) .title {
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  .subtitle {
+    margin: 0;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-regular, 400);
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    letter-spacing: 0;
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+`;
+export {
+  i as stepStyles
+};
+//# sourceMappingURL=step.styles.js.map

package/dist/components/progress/step.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.styles.js","sources":["../../../src/components/progress/step.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const stepStyles = css`\n  :host {\n    display: flex;\n    gap: var(--mellow-space-2, 8px);\n    align-items: flex-start;\n  }\n\n  /* ---- Line ---- */\n\n  .line {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex-shrink: 0;\n  }\n\n  :host([size='desktop']) .line {\n    padding-top: 10px;\n    padding-bottom: 10px;\n    width: 40px;\n  }\n\n  :host([size='mobile']) .line {\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .line-bar {\n    height: 2px;\n    border-radius: var(--mellow-radius-full, 9999px);\n    width: 100%;\n  }\n\n  :host([size='mobile']) .line-bar {\n    width: 20px;\n    transform: rotate(-72deg);\n  }\n\n  :host([state='completed']) .line-bar {\n    background: var(--mellow-border-success, #5e8b7f);\n  }\n\n  :host([state='current']) .line-bar {\n    background: var(--mellow-icon-warning, #e27f00);\n  }\n\n  :host([state='further']) .line-bar {\n    background: var(--mellow-icon-tertiary, #d1d0d0);\n  }\n\n  /* ---- Icon ---- */\n\n  .icon-frame {\n    display: flex;\n    align-items: flex-start;\n    padding-top: 1px;\n    padding-bottom: 1px;\n    flex-shrink: 0;\n  }\n\n  :host([size='mobile']) .icon-frame {\n    height: 22px;\n    align-items: center;\n    padding: 0;\n  }\n\n  .icon {\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: clip;\n  }\n\n  ::slotted([slot='icon']) {\n    width: 20px;\n    height: 20px;\n  }\n\n  /* ---- Default badge-check icons (inline SVG) ---- */\n\n  .icon svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  /* ---- Text ---- */\n\n  .text {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-0-5, 2px);\n    align-items: flex-start;\n    flex-shrink: 0;\n  }\n\n  .title {\n    margin: 0;\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-weight: var(--mellow-font-weight-medium, 500);\n    font-size: var(--mellow-font-size-16, 16px);\n    line-height: var(--mellow-line-height-22, 22px);\n    letter-spacing: 0;\n  }\n\n  :host([state='completed']) .title {\n    color: var(--mellow-text-success, #5e8b7f);\n  }\n\n  :host([state='current']) .title {\n    color: var(--mellow-text-warning, #e27f00);\n  }\n\n  :host([state='further']) .title {\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  .subtitle {\n    margin: 0;\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-weight: var(--mellow-font-weight-regular, 400);\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n    letter-spacing: 0;\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n`\n"],"names":["stepStyles","css"],"mappings":";AAEO,MAAMA,IAAaC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/progress/stepper-dots.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export declare class MellowStepperDots extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Current step (0-based). Dots up to and including this index are filled. */
+    current: number;
+    /** Total number of dots. Must be at least 3. */
+    totalSteps: number;
+    /** Accessible label for the stepper. */
+    label: string;
+    private get clampedTotal();
+    private get clampedCurrent();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-stepper-dots': MellowStepperDots;
+    }
+}
+//# sourceMappingURL=stepper-dots.d.ts.map

package/dist/components/progress/stepper-dots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-dots.d.ts","sourceRoot":"","sources":["../../../src/components/progress/stepper-dots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAAsB;IAE5C,8EAA8E;IAE9E,OAAO,SAAI;IAEX,gDAAgD;IAEhD,UAAU,SAAI;IAEd,wCAAwC;IAExC,KAAK,SAAK;IAEV,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,cAAc,GAEzB;IAEQ,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAA;KACzC;CACF"}

package/dist/components/progress/stepper-dots.js

@@ -0,0 +1,60 @@
+import { LitElement as u, html as n } from "lit";
+import { property as i, customElement as c } from "lit/decorators.js";
+import { map as d } from "lit/directives/map.js";
+import { stepperDotsStyles as h } from "./stepper-dots.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (s, e, a, r) => {
+  for (var t = r > 1 ? void 0 : r ? v(e, a) : e, p = s.length - 1, m; p >= 0; p--)
+    (m = s[p]) && (t = (r ? m(e, a, t) : m(t)) || t);
+  return r && t && f(e, a, t), t;
+};
+let l = class extends u {
+  constructor() {
+    super(...arguments), this.current = 0, this.totalSteps = 7, this.label = "";
+  }
+  get clampedTotal() {
+    return Math.max(3, this.totalSteps);
+  }
+  get clampedCurrent() {
+    return Math.min(Math.max(0, this.current), this.clampedTotal - 1);
+  }
+  render() {
+    const s = this.clampedTotal, e = this.clampedCurrent, a = Array.from({ length: s }, (r, t) => t);
+    return n`
+      <div
+        role="progressbar"
+        aria-valuenow=${e}
+        aria-valuemin="0"
+        aria-valuemax=${s - 1}
+        aria-label=${this.label || "Progress"}
+        style="display: contents"
+      >
+        ${d(
+      a,
+      (r) => n`
+            <div
+              class="dot"
+              ?data-filled=${r <= e}
+            ></div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+l.styles = [h];
+o([
+  i({ type: Number, reflect: !0 })
+], l.prototype, "current", 2);
+o([
+  i({ type: Number, reflect: !0, attribute: "total-steps" })
+], l.prototype, "totalSteps", 2);
+o([
+  i()
+], l.prototype, "label", 2);
+l = o([
+  c("mellow-stepper-dots")
+], l);
+export {
+  l as MellowStepperDots
+};
+//# sourceMappingURL=stepper-dots.js.map

package/dist/components/progress/stepper-dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-dots.js","sources":["../../../src/components/progress/stepper-dots.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { map } from 'lit/directives/map.js'\nimport { stepperDotsStyles } from './stepper-dots.styles.js'\n\n@customElement('mellow-stepper-dots')\nexport class MellowStepperDots extends LitElement {\n  static override styles = [stepperDotsStyles]\n\n  /** Current step (0-based). Dots up to and including this index are filled. */\n  @property({ type: Number, reflect: true })\n  current = 0\n\n  /** Total number of dots. Must be at least 3. */\n  @property({ type: Number, reflect: true, attribute: 'total-steps' })\n  totalSteps = 7\n\n  /** Accessible label for the stepper. */\n  @property()\n  label = ''\n\n  private get clampedTotal(): number {\n    return Math.max(3, this.totalSteps)\n  }\n\n  private get clampedCurrent(): number {\n    return Math.min(Math.max(0, this.current), this.clampedTotal - 1)\n  }\n\n  override render() {\n    const total = this.clampedTotal\n    const current = this.clampedCurrent\n    const dots = Array.from({ length: total }, (_, i) => i)\n\n    return html`\n      <div\n        role=\"progressbar\"\n        aria-valuenow=${current}\n        aria-valuemin=\"0\"\n        aria-valuemax=${total - 1}\n        aria-label=${this.label || 'Progress'}\n        style=\"display: contents\"\n      >\n        ${map(\n          dots,\n          (i) => html`\n            <div\n              class=\"dot\"\n              ?data-filled=${i <= current}\n            ></div>\n          `\n        )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-stepper-dots': MellowStepperDots\n  }\n}\n"],"names":["MellowStepperDots","LitElement","total","current","dots","_","i","html","map","stepperDotsStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAMO,IAAMA,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,UAAU,GAIV,KAAA,aAAa,GAIb,KAAA,QAAQ;AAAA,EAAA;AAAA,EAER,IAAY,eAAuB;AACjC,WAAO,KAAK,IAAI,GAAG,KAAK,UAAU;AAAA,EACpC;AAAA,EAEA,IAAY,iBAAyB;AACnC,WAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,GAAG,KAAK,eAAe,CAAC;AAAA,EAClE;AAAA,EAES,SAAS;AAChB,UAAMC,IAAQ,KAAK,cACbC,IAAU,KAAK,gBACfC,IAAO,MAAM,KAAK,EAAE,QAAQF,KAAS,CAACG,GAAGC,MAAMA,CAAC;AAEtD,WAAOC;AAAA;AAAA;AAAA,wBAGaJ,CAAO;AAAA;AAAA,wBAEPD,IAAQ,CAAC;AAAA,qBACZ,KAAK,SAAS,UAAU;AAAA;AAAA;AAAA,UAGnCM;AAAA,MACAJ;AAAA,MACA,CAACE,MAAMC;AAAA;AAAA;AAAA,6BAGYD,KAAKH,CAAO;AAAA;AAAA;AAAA,IAAA,CAGhC;AAAA;AAAA;AAAA,EAGP;AACF;AAjDaH,EACK,SAAS,CAACS,CAAiB;AAI3CC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BX,EAKX,WAAA,WAAA,CAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,eAAe;AAAA,GARxDX,EASX,WAAA,cAAA,CAAA;AAIAU,EAAA;AAAA,EADCC,EAAA;AAAS,GAZCX,EAaX,WAAA,SAAA,CAAA;AAbWA,IAANU,EAAA;AAAA,EADNE,EAAc,qBAAqB;AAAA,GACvBZ,CAAA;"}

package/dist/components/progress/stepper-dots.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const stepperDotsStyles: import("lit").CSSResult;
+//# sourceMappingURL=stepper-dots.styles.d.ts.map

package/dist/components/progress/stepper-dots.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-dots.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress/stepper-dots.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAuB7B,CAAA"}

package/dist/components/progress/stepper-dots.styles.js

@@ -0,0 +1,29 @@
+import { css as e } from "lit";
+const o = e`
+  :host {
+    display: flex;
+    gap: var(--mellow-space-1, 4px);
+    height: 6px;
+    align-items: center;
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--mellow-radius-1, 4px);
+    flex-shrink: 0;
+    transition: background-color 300ms ease;
+  }
+
+  .dot[data-filled] {
+    background: var(--mellow-border-primary, #d3b69e);
+  }
+
+  .dot:not([data-filled]) {
+    background: var(--mellow-bg-secondary, #ede2d6);
+  }
+`;
+export {
+  o as stepperDotsStyles
+};
+//# sourceMappingURL=stepper-dots.styles.js.map

package/dist/components/progress/stepper-dots.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-dots.styles.js","sources":["../../../src/components/progress/stepper-dots.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const stepperDotsStyles = css`\n  :host {\n    display: flex;\n    gap: var(--mellow-space-1, 4px);\n    height: 6px;\n    align-items: center;\n  }\n\n  .dot {\n    width: 6px;\n    height: 6px;\n    border-radius: var(--mellow-radius-1, 4px);\n    flex-shrink: 0;\n    transition: background-color 300ms ease;\n  }\n\n  .dot[data-filled] {\n    background: var(--mellow-border-primary, #d3b69e);\n  }\n\n  .dot:not([data-filled]) {\n    background: var(--mellow-bg-secondary, #ede2d6);\n  }\n`\n"],"names":["stepperDotsStyles","css"],"mappings":";AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/progress/stepper.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export declare class MellowStepper extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Current step (0-based). Segments up to and including this index are filled. */
+    current: number;
+    /** Total number of steps / segments. Must be at least 2. */
+    totalSteps: number;
+    /** Accessible label for the stepper. */
+    label: string;
+    private get clampedTotal();
+    private get clampedCurrent();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-stepper': MellowStepper;
+    }
+}
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/progress/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/components/progress/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAAkB;IAExC,kFAAkF;IAElF,OAAO,SAAI;IAEX,4DAA4D;IAE5D,UAAU,SAAI;IAEd,wCAAwC;IAExC,KAAK,SAAK;IAEV,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,cAAc,GAEzB;IAEQ,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

package/dist/components/progress/stepper.js

@@ -0,0 +1,60 @@
+import { LitElement as u, html as i } from "lit";
+import { property as n, customElement as c } from "lit/decorators.js";
+import { map as h } from "lit/directives/map.js";
+import { stepperStyles as f } from "./stepper.styles.js";
+var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, o = (a, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? d(e, s) : e, p = a.length - 1, m; p >= 0; p--)
+    (m = a[p]) && (t = (r ? m(e, s, t) : m(t)) || t);
+  return r && t && v(e, s, t), t;
+};
+let l = class extends u {
+  constructor() {
+    super(...arguments), this.current = 0, this.totalSteps = 7, this.label = "";
+  }
+  get clampedTotal() {
+    return Math.max(2, this.totalSteps);
+  }
+  get clampedCurrent() {
+    return Math.min(Math.max(0, this.current), this.clampedTotal - 1);
+  }
+  render() {
+    const a = this.clampedTotal, e = this.clampedCurrent, s = Array.from({ length: a }, (r, t) => t);
+    return i`
+      <div
+        role="progressbar"
+        aria-valuenow=${e}
+        aria-valuemin="0"
+        aria-valuemax=${a - 1}
+        aria-label=${this.label || "Progress"}
+        style="display: contents"
+      >
+        ${h(
+      s,
+      (r) => i`
+            <div
+              class="segment"
+              ?data-filled=${r <= e}
+            ></div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+l.styles = [f];
+o([
+  n({ type: Number, reflect: !0 })
+], l.prototype, "current", 2);
+o([
+  n({ type: Number, reflect: !0, attribute: "total-steps" })
+], l.prototype, "totalSteps", 2);
+o([
+  n()
+], l.prototype, "label", 2);
+l = o([
+  c("mellow-stepper")
+], l);
+export {
+  l as MellowStepper
+};
+//# sourceMappingURL=stepper.js.map

package/dist/components/progress/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../src/components/progress/stepper.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { map } from 'lit/directives/map.js'\nimport { stepperStyles } from './stepper.styles.js'\n\n@customElement('mellow-stepper')\nexport class MellowStepper extends LitElement {\n  static override styles = [stepperStyles]\n\n  /** Current step (0-based). Segments up to and including this index are filled. */\n  @property({ type: Number, reflect: true })\n  current = 0\n\n  /** Total number of steps / segments. Must be at least 2. */\n  @property({ type: Number, reflect: true, attribute: 'total-steps' })\n  totalSteps = 7\n\n  /** Accessible label for the stepper. */\n  @property()\n  label = ''\n\n  private get clampedTotal(): number {\n    return Math.max(2, this.totalSteps)\n  }\n\n  private get clampedCurrent(): number {\n    return Math.min(Math.max(0, this.current), this.clampedTotal - 1)\n  }\n\n  override render() {\n    const total = this.clampedTotal\n    const current = this.clampedCurrent\n    const segments = Array.from({ length: total }, (_, i) => i)\n\n    return html`\n      <div\n        role=\"progressbar\"\n        aria-valuenow=${current}\n        aria-valuemin=\"0\"\n        aria-valuemax=${total - 1}\n        aria-label=${this.label || 'Progress'}\n        style=\"display: contents\"\n      >\n        ${map(\n          segments,\n          (i) => html`\n            <div\n              class=\"segment\"\n              ?data-filled=${i <= current}\n            ></div>\n          `\n        )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-stepper': MellowStepper\n  }\n}\n"],"names":["MellowStepper","LitElement","total","current","segments","_","i","html","map","stepperStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAMO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,UAAU,GAIV,KAAA,aAAa,GAIb,KAAA,QAAQ;AAAA,EAAA;AAAA,EAER,IAAY,eAAuB;AACjC,WAAO,KAAK,IAAI,GAAG,KAAK,UAAU;AAAA,EACpC;AAAA,EAEA,IAAY,iBAAyB;AACnC,WAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,GAAG,KAAK,eAAe,CAAC;AAAA,EAClE;AAAA,EAES,SAAS;AAChB,UAAMC,IAAQ,KAAK,cACbC,IAAU,KAAK,gBACfC,IAAW,MAAM,KAAK,EAAE,QAAQF,KAAS,CAACG,GAAGC,MAAMA,CAAC;AAE1D,WAAOC;AAAA;AAAA;AAAA,wBAGaJ,CAAO;AAAA;AAAA,wBAEPD,IAAQ,CAAC;AAAA,qBACZ,KAAK,SAAS,UAAU;AAAA;AAAA;AAAA,UAGnCM;AAAA,MACAJ;AAAA,MACA,CAACE,MAAMC;AAAA;AAAA;AAAA,6BAGYD,KAAKH,CAAO;AAAA;AAAA;AAAA,IAAA,CAGhC;AAAA;AAAA;AAAA,EAGP;AACF;AAjDaH,EACK,SAAS,CAACS,CAAa;AAIvCC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BX,EAKX,WAAA,WAAA,CAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,eAAe;AAAA,GARxDX,EASX,WAAA,cAAA,CAAA;AAIAU,EAAA;AAAA,EADCC,EAAA;AAAS,GAZCX,EAaX,WAAA,SAAA,CAAA;AAbWA,IAANU,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBZ,CAAA;"}

package/dist/components/progress/stepper.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const stepperStyles: import("lit").CSSResult;
+//# sourceMappingURL=stepper.styles.d.ts.map

package/dist/components/progress/stepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAyBzB,CAAA"}

package/dist/components/progress/stepper.styles.js

@@ -0,0 +1,31 @@
+import { css as e } from "lit";
+const a = e`
+  :host {
+    display: flex;
+    gap: var(--mellow-space-1-5, 6px);
+    height: 6px;
+    align-items: center;
+    width: 100%;
+  }
+
+  .segment {
+    flex: 1 0 0;
+    height: 6px;
+    min-height: 1px;
+    min-width: 1px;
+    border-radius: var(--mellow-radius-1, 4px);
+    transition: background-color 300ms ease;
+  }
+
+  .segment[data-filled] {
+    background: var(--mellow-border-primary, #d3b69e);
+  }
+
+  .segment:not([data-filled]) {
+    background: var(--mellow-bg-secondary, #ede2d6);
+  }
+`;
+export {
+  a as stepperStyles
+};
+//# sourceMappingURL=stepper.styles.js.map

package/dist/components/progress/stepper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.styles.js","sources":["../../../src/components/progress/stepper.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const stepperStyles = css`\n  :host {\n    display: flex;\n    gap: var(--mellow-space-1-5, 6px);\n    height: 6px;\n    align-items: center;\n    width: 100%;\n  }\n\n  .segment {\n    flex: 1 0 0;\n    height: 6px;\n    min-height: 1px;\n    min-width: 1px;\n    border-radius: var(--mellow-radius-1, 4px);\n    transition: background-color 300ms ease;\n  }\n\n  .segment[data-filled] {\n    background: var(--mellow-border-primary, #d3b69e);\n  }\n\n  .segment:not([data-filled]) {\n    background: var(--mellow-bg-secondary, #ede2d6);\n  }\n`\n"],"names":["stepperStyles","css"],"mappings":";AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/radio/index.d.ts

@@ -0,0 +1,4 @@
+export { MellowRadio } from './radio.js';
+export type { RadioSize } from './radio.js';
+export { MellowRadioGroup } from './radio-group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/radio/radio-group.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class MellowRadioGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    value: string;
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _getRadios;
+    private _getEnabledRadios;
+    private _syncRadios;
+    private _selectRadio;
+    private _handleClick;
+    private _handleKeydown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-radio-group': MellowRadioGroup;
+    }
+}
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAAqB;IAG3C,IAAI,SAAK;IAGT,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAEP,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM/D,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY,CAKnB;IAED,OAAO,CAAC,cAAc,CAsBrB;IAEQ,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF"}

package/dist/components/radio/radio-group.js

@@ -0,0 +1,77 @@
+import { LitElement as c, html as h } from "lit";
+import { property as d, customElement as u } from "lit/decorators.js";
+import { radioGroupStyles as p } from "./radio.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, o, s) => {
+  for (var i = s > 1 ? void 0 : s ? v(t, o) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (i = (s ? n(t, o, i) : n(i)) || i);
+  return s && i && f(t, o, i), i;
+};
+let l = class extends c {
+  constructor() {
+    super(...arguments), this.name = "", this.value = "", this.disabled = !1, this._handleClick = (e) => {
+      if (this.disabled) return;
+      const t = e.target.closest("mellow-radio");
+      !t || t.disabled || this._selectRadio(t);
+    }, this._handleKeydown = (e) => {
+      if (this.disabled) return;
+      const t = e.key === "ArrowDown" || e.key === "ArrowRight", o = e.key === "ArrowUp" || e.key === "ArrowLeft";
+      if (!t && !o) return;
+      e.preventDefault();
+      const s = this._getEnabledRadios();
+      if (s.length === 0) return;
+      const i = s.findIndex((n) => n.value === this.value);
+      let r;
+      i === -1 ? r = 0 : t ? r = (i + 1) % s.length : r = (i - 1 + s.length) % s.length, this._selectRadio(s[r]);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "radiogroup"), this.addEventListener("click", this._handleClick), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  firstUpdated() {
+    this._syncRadios();
+  }
+  updated(e) {
+    e.has("value") && this._syncRadios();
+  }
+  _getRadios() {
+    return Array.from(this.querySelectorAll("mellow-radio"));
+  }
+  _getEnabledRadios() {
+    return this._getRadios().filter((e) => !e.disabled && !this.disabled);
+  }
+  _syncRadios() {
+    const e = this._getRadios();
+    for (const t of e)
+      t.checked = t.value === this.value;
+  }
+  _selectRadio(e) {
+    this.value = e.value, this._syncRadios(), e.focus(), this.dispatchEvent(new CustomEvent("mellow-change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return h`<slot></slot>`;
+  }
+};
+l.styles = [p];
+a([
+  d()
+], l.prototype, "name", 2);
+a([
+  d()
+], l.prototype, "value", 2);
+a([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+l = a([
+  u("mellow-radio-group")
+], l);
+export {
+  l as MellowRadioGroup
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/components/radio/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":["../../../src/components/radio/radio-group.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { radioGroupStyles } from './radio.styles.js'\nimport type { MellowRadio } from './radio.js'\n\n@customElement('mellow-radio-group')\nexport class MellowRadioGroup extends LitElement {\n  static override styles = [radioGroupStyles]\n\n  @property()\n  name = ''\n\n  @property()\n  value = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'radiogroup')\n    this.addEventListener('click', this._handleClick)\n    this.addEventListener('keydown', this._handleKeydown)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('click', this._handleClick)\n    this.removeEventListener('keydown', this._handleKeydown)\n  }\n\n  override firstUpdated(): void {\n    this._syncRadios()\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('value')) {\n      this._syncRadios()\n    }\n  }\n\n  private _getRadios(): MellowRadio[] {\n    return Array.from(this.querySelectorAll('mellow-radio'))\n  }\n\n  private _getEnabledRadios(): MellowRadio[] {\n    return this._getRadios().filter(r => !r.disabled && !this.disabled)\n  }\n\n  private _syncRadios(): void {\n    const radios = this._getRadios()\n    for (const radio of radios) {\n      radio.checked = radio.value === this.value\n    }\n  }\n\n  private _selectRadio(radio: MellowRadio): void {\n    this.value = radio.value\n    this._syncRadios()\n    radio.focus()\n    this.dispatchEvent(new CustomEvent('mellow-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) return\n    const target = (e.target as Element).closest('mellow-radio') as MellowRadio | null\n    if (!target || target.disabled) return\n    this._selectRadio(target)\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (this.disabled) return\n    const isNext = e.key === 'ArrowDown' || e.key === 'ArrowRight'\n    const isPrev = e.key === 'ArrowUp' || e.key === 'ArrowLeft'\n    if (!isNext && !isPrev) return\n\n    e.preventDefault()\n    const enabled = this._getEnabledRadios()\n    if (enabled.length === 0) return\n\n    const currentIndex = enabled.findIndex(r => r.value === this.value)\n    let nextIndex: number\n\n    if (currentIndex === -1) {\n      nextIndex = 0\n    } else if (isNext) {\n      nextIndex = (currentIndex + 1) % enabled.length\n    } else {\n      nextIndex = (currentIndex - 1 + enabled.length) % enabled.length\n    }\n\n    this._selectRadio(enabled[nextIndex])\n  }\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-radio-group': MellowRadioGroup\n  }\n}\n"],"names":["MellowRadioGroup","LitElement","target","isNext","isPrev","enabled","currentIndex","r","nextIndex","changedProperties","radios","radio","html","radioGroupStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAMO,IAAMA,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,QAAQ,IAGR,KAAA,WAAW,IAmDX,KAAQ,eAAe,CAAC,MAAmB;AACzC,UAAI,KAAK,SAAU;AACnB,YAAMC,IAAU,EAAE,OAAmB,QAAQ,cAAc;AAC3D,MAAI,CAACA,KAAUA,EAAO,YACtB,KAAK,aAAaA,CAAM;AAAA,IAC1B,GAEA,KAAQ,iBAAiB,CAAC,MAA2B;AACnD,UAAI,KAAK,SAAU;AACnB,YAAMC,IAAS,EAAE,QAAQ,eAAe,EAAE,QAAQ,cAC5CC,IAAS,EAAE,QAAQ,aAAa,EAAE,QAAQ;AAChD,UAAI,CAACD,KAAU,CAACC,EAAQ;AAExB,QAAE,eAAA;AACF,YAAMC,IAAU,KAAK,kBAAA;AACrB,UAAIA,EAAQ,WAAW,EAAG;AAE1B,YAAMC,IAAeD,EAAQ,UAAU,OAAKE,EAAE,UAAU,KAAK,KAAK;AAClE,UAAIC;AAEJ,MAAIF,MAAiB,KACnBE,IAAY,IACHL,IACTK,KAAaF,IAAe,KAAKD,EAAQ,SAEzCG,KAAaF,IAAe,IAAID,EAAQ,UAAUA,EAAQ,QAG5D,KAAK,aAAaA,EAAQG,CAAS,CAAC;AAAA,IACtC;AAAA,EAAA;AAAA,EA9ES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,YAAY,GACtC,KAAK,iBAAiB,SAAS,KAAK,YAAY,GAChD,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,SAAS,KAAK,YAAY,GACnD,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAES,eAAqB;AAC5B,SAAK,YAAA;AAAA,EACP;AAAA,EAES,QAAQC,GAA+C;AAC9D,IAAIA,EAAkB,IAAI,OAAO,KAC/B,KAAK,YAAA;AAAA,EAET;AAAA,EAEQ,aAA4B;AAClC,WAAO,MAAM,KAAK,KAAK,iBAAiB,cAAc,CAAC;AAAA,EACzD;AAAA,EAEQ,oBAAmC;AACzC,WAAO,KAAK,aAAa,OAAO,CAAAF,MAAK,CAACA,EAAE,YAAY,CAAC,KAAK,QAAQ;AAAA,EACpE;AAAA,EAEQ,cAAoB;AAC1B,UAAMG,IAAS,KAAK,WAAA;AACpB,eAAWC,KAASD;AAClB,MAAAC,EAAM,UAAUA,EAAM,UAAU,KAAK;AAAA,EAEzC;AAAA,EAEQ,aAAaA,GAA0B;AAC7C,SAAK,QAAQA,EAAM,OACnB,KAAK,YAAA,GACLA,EAAM,MAAA,GACN,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAiCS,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AA/FaZ,EACK,SAAS,CAACa,CAAgB;AAG1CC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCf,EAIX,WAAA,QAAA,CAAA;AAGAc,EAAA;AAAA,EADCC,EAAA;AAAS,GANCf,EAOX,WAAA,SAAA,CAAA;AAGAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/Bf,EAUX,WAAA,YAAA,CAAA;AAVWA,IAANc,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBhB,CAAA;"}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export type RadioSize = 'lg' | 'md' | 'sm';
+export declare class MellowRadio extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    size: RadioSize;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _updateAriaChecked;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-radio': MellowRadio;
+    }
+}
+//# sourceMappingURL=radio.d.ts.map

package/dist/components/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAgB;IAGtC,KAAK,SAAK;IAGV,OAAO,UAAQ;IAGf,QAAQ,UAAQ;IAGhB,IAAI,EAAE,SAAS,CAAO;IAEb,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM/D,OAAO,CAAC,kBAAkB;IAIjB,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

package/dist/components/radio/radio.js

@@ -0,0 +1,55 @@
+import { LitElement as h, nothing as n, html as p } from "lit";
+import { property as l, customElement as u } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { radioStyles as m } from "./radio.styles.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (r, c, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? b(c, i) : c, a = r.length - 1, d; a >= 0; a--)
+    (d = r[a]) && (e = (o ? d(c, i, e) : d(e)) || e);
+  return o && e && v(c, i, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.value = "", this.checked = !1, this.disabled = !1, this.size = "lg";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "radio"), this._updateAriaChecked();
+  }
+  updated(r) {
+    r.has("checked") && this._updateAriaChecked();
+  }
+  _updateAriaChecked() {
+    this.setAttribute("aria-checked", String(this.checked));
+  }
+  render() {
+    const r = {
+      "radio-circle": !0,
+      checked: this.checked
+    };
+    return p`
+      <div class=${f(r)}>
+        ${this.checked ? p`<div class="radio-dot"></div>` : n}
+      </div>
+      <span class="label-text"><slot></slot></span>
+    `;
+  }
+};
+t.styles = [m];
+s([
+  l()
+], t.prototype, "value", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+s([
+  l({ reflect: !0 })
+], t.prototype, "size", 2);
+t = s([
+  u("mellow-radio")
+], t);
+export {
+  t as MellowRadio
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { radioStyles } from './radio.styles.js'\n\nexport type RadioSize = 'lg' | 'md' | 'sm'\n\n@customElement('mellow-radio')\nexport class MellowRadio extends LitElement {\n  static override styles = [radioStyles]\n\n  @property()\n  value = ''\n\n  @property({ type: Boolean, reflect: true })\n  checked = false\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ reflect: true })\n  size: RadioSize = 'lg'\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'radio')\n    this._updateAriaChecked()\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('checked')) {\n      this._updateAriaChecked()\n    }\n  }\n\n  private _updateAriaChecked(): void {\n    this.setAttribute('aria-checked', String(this.checked))\n  }\n\n  override render() {\n    const circleClasses = {\n      'radio-circle': true,\n      'checked': this.checked,\n    }\n\n    return html`\n      <div class=${classMap(circleClasses)}>\n        ${this.checked ? html`<div class=\"radio-dot\"></div>` : nothing}\n      </div>\n      <span class=\"label-text\"><slot></slot></span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-radio': MellowRadio\n  }\n}\n"],"names":["MellowRadio","LitElement","changedProperties","circleClasses","html","classMap","nothing","radioStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAQO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,QAAQ,IAGR,KAAA,UAAU,IAGV,KAAA,WAAW,IAGX,KAAA,OAAkB;AAAA,EAAA;AAAA,EAET,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,OAAO,GACjC,KAAK,mBAAA;AAAA,EACP;AAAA,EAES,QAAQC,GAA+C;AAC9D,IAAIA,EAAkB,IAAI,SAAS,KACjC,KAAK,mBAAA;AAAA,EAET;AAAA,EAEQ,qBAA2B;AACjC,SAAK,aAAa,gBAAgB,OAAO,KAAK,OAAO,CAAC;AAAA,EACxD;AAAA,EAES,SAAS;AAChB,UAAMC,IAAgB;AAAA,MACpB,gBAAgB;AAAA,MAChB,SAAW,KAAK;AAAA,IAAA;AAGlB,WAAOC;AAAA,mBACQC,EAASF,CAAa,CAAC;AAAA,UAChC,KAAK,UAAUC,mCAAsCE,CAAO;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA5CaN,EACK,SAAS,CAACO,CAAW;AAGrCC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCT,EAIX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/BT,EAOX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BT,EAUX,WAAA,YAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAZhBT,EAaX,WAAA,QAAA,CAAA;AAbWA,IAANQ,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBV,CAAA;"}

package/dist/components/radio/radio.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const radioStyles: import("lit").CSSResult;
+export declare const radioGroupStyles: import("lit").CSSResult;
+//# sourceMappingURL=radio.styles.d.ts.map

package/dist/components/radio/radio.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAuGvB,CAAA;AAED,eAAO,MAAM,gBAAgB,yBAO5B,CAAA"}