@mellow.io/ds 0.1.0

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,61 @@
+import { css as t } from "lit";
+const e = t`
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .popover-content {
+    position: absolute;
+    z-index: 20;
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: #ffffff;
+    border: 1px solid #f5eddf;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    font-family: system-ui, sans-serif;
+    font-size: 14px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .popover-content.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ---- Placements ---- */
+
+  .popover-content.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+
+  .popover-content.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+
+  .popover-content.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+
+  .popover-content.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+`;
+export {
+  e as popoverStyles
+};
+//# sourceMappingURL=popover.styles.js.map

package/dist/components/popover/popover.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.styles.js","sources":["../../../src/components/popover/popover.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const popoverStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .popover-content {\n    position: absolute;\n    z-index: 20;\n    padding: 12px 16px;\n    border-radius: 8px;\n    background: #ffffff;\n    border: 1px solid #f5eddf;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n    font-family: system-ui, sans-serif;\n    font-size: 14px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease;\n  }\n\n  .popover-content.open {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* ---- Placements ---- */\n\n  .popover-content.top {\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    margin-bottom: 8px;\n  }\n\n  .popover-content.bottom {\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    margin-top: 8px;\n  }\n\n  .popover-content.left {\n    right: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: 8px;\n  }\n\n  .popover-content.right {\n    left: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    margin-left: 8px;\n  }\n`\n"],"names":["popoverStyles","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;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/index.d.ts

@@ -0,0 +1,9 @@
+export { MellowProgress } from './progress.js';
+export type { ProgressSize } from './progress.js';
+export { MellowStepper } from './stepper.js';
+export { MellowStepperDots } from './stepper-dots.js';
+export { MellowStep } from './step.js';
+export type { StepState, StepSize } from './step.js';
+export { MellowStepTimeline } from './step-timeline.js';
+export type { StepTimelineDirection, StepTimelinePosition } from './step-timeline.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AACvD,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA"}

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

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export declare class MellowProgress extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: number;
+    max: number;
+    size: ProgressSize;
+    label: string;
+    private get percentage();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-progress': MellowProgress;
+    }
+}
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAI/C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7C,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAmB;IAGzC,KAAK,SAAI;IAGT,GAAG,SAAM;IAGT,IAAI,EAAE,YAAY,CAAO;IAGzB,KAAK,SAAK;IAEV,OAAO,KAAK,UAAU,GAErB;IAEQ,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAA;KAClC;CACF"}

package/dist/components/progress/progress.js

@@ -0,0 +1,57 @@
+import { LitElement as v, nothing as h, html as n } from "lit";
+import { property as i, customElement as u } from "lit/decorators.js";
+import { progressStyles as c } from "./progress.styles.js";
+var b = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (t, a, p, l) => {
+  for (var e = l > 1 ? void 0 : l ? d(a, p) : a, o = t.length - 1, m; o >= 0; o--)
+    (m = t[o]) && (e = (l ? m(a, p, e) : m(e)) || e);
+  return l && e && b(a, p, e), e;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.value = 0, this.max = 100, this.size = "md", this.label = "";
+  }
+  get percentage() {
+    return Math.min(100, Math.max(0, this.value / this.max * 100));
+  }
+  render() {
+    const t = this.percentage;
+    return n`
+      <div
+        class="wrapper"
+        role="progressbar"
+        aria-valuenow=${this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-label=${this.label || "Progress"}
+      >
+        ${this.label ? n`<div class="label">
+              <span>${this.label}</span>
+              <span>${Math.round(t)}%</span>
+            </div>` : h}
+        <div class="track">
+          <div class="bar" style="width: ${t}%"></div>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [c];
+s([
+  i({ type: Number })
+], r.prototype, "value", 2);
+s([
+  i({ type: Number })
+], r.prototype, "max", 2);
+s([
+  i({ reflect: !0 })
+], r.prototype, "size", 2);
+s([
+  i()
+], r.prototype, "label", 2);
+r = s([
+  u("mellow-progress")
+], r);
+export {
+  r as MellowProgress
+};
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":["../../../src/components/progress/progress.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { progressStyles } from './progress.styles.js'\n\nexport type ProgressSize = 'sm' | 'md' | 'lg'\n\n@customElement('mellow-progress')\nexport class MellowProgress extends LitElement {\n  static override styles = [progressStyles]\n\n  @property({ type: Number })\n  value = 0\n\n  @property({ type: Number })\n  max = 100\n\n  @property({ reflect: true })\n  size: ProgressSize = 'md'\n\n  @property()\n  label = ''\n\n  private get percentage(): number {\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100))\n  }\n\n  override render() {\n    const pct = this.percentage\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"progressbar\"\n        aria-valuenow=${this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-label=${this.label || 'Progress'}\n      >\n        ${this.label\n          ? html`<div class=\"label\">\n              <span>${this.label}</span>\n              <span>${Math.round(pct)}%</span>\n            </div>`\n          : nothing}\n        <div class=\"track\">\n          <div class=\"bar\" style=\"width: ${pct}%\"></div>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-progress': MellowProgress\n  }\n}\n"],"names":["MellowProgress","LitElement","pct","html","nothing","progressStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAOO,IAAMA,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,QAAQ,GAGR,KAAA,MAAM,KAGN,KAAA,OAAqB,MAGrB,KAAA,QAAQ;AAAA,EAAA;AAAA,EAER,IAAY,aAAqB;AAC/B,WAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,KAAK,QAAQ,KAAK,MAAO,GAAG,CAAC;AAAA,EACjE;AAAA,EAES,SAAS;AAChB,UAAMC,IAAM,KAAK;AAEjB,WAAOC;AAAA;AAAA;AAAA;AAAA,wBAIa,KAAK,KAAK;AAAA;AAAA,wBAEV,KAAK,GAAG;AAAA,qBACX,KAAK,SAAS,UAAU;AAAA;AAAA,UAEnC,KAAK,QACHA;AAAA,sBACU,KAAK,KAAK;AAAA,sBACV,KAAK,MAAMD,CAAG,CAAC;AAAA,sBAEzBE,CAAO;AAAA;AAAA,2CAEwBF,CAAG;AAAA;AAAA;AAAA;AAAA,EAI5C;AACF;AA3CaF,EACK,SAAS,CAACK,CAAc;AAGxCC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfP,EAIX,WAAA,SAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfP,EAOX,WAAA,OAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAThBP,EAUX,WAAA,QAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAA;AAAS,GAZCP,EAaX,WAAA,SAAA,CAAA;AAbWA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}

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

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

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

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

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

@@ -0,0 +1,57 @@
+import { css as e } from "lit";
+const o = e`
+  :host {
+    display: block;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-1, 4px);
+  }
+
+  .track {
+    width: 100%;
+    border-radius: var(--mellow-radius-1, 4px);
+    background: var(--mellow-bg-secondary, #ede2d6);
+    overflow: hidden;
+  }
+
+  .bar {
+    height: 100%;
+    border-radius: var(--mellow-radius-1, 4px);
+    background: var(--mellow-border-primary, #d3b69e);
+    transition: width 300ms ease;
+  }
+
+  /* ---- Sizes ---- */
+
+  :host([size='sm']) .track {
+    height: 4px;
+  }
+
+  .track,
+  :host([size='md']) .track {
+    height: 6px;
+  }
+
+  :host([size='lg']) .track {
+    height: 8px;
+  }
+
+  /* ---- Label ---- */
+
+  .label {
+    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);
+    color: var(--mellow-text-secondary, #8a8686);
+    display: flex;
+    justify-content: space-between;
+  }
+`;
+export {
+  o as progressStyles
+};
+//# sourceMappingURL=progress.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.styles.js","sources":["../../../src/components/progress/progress.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const progressStyles = css`\n  :host {\n    display: block;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-1, 4px);\n  }\n\n  .track {\n    width: 100%;\n    border-radius: var(--mellow-radius-1, 4px);\n    background: var(--mellow-bg-secondary, #ede2d6);\n    overflow: hidden;\n  }\n\n  .bar {\n    height: 100%;\n    border-radius: var(--mellow-radius-1, 4px);\n    background: var(--mellow-border-primary, #d3b69e);\n    transition: width 300ms ease;\n  }\n\n  /* ---- Sizes ---- */\n\n  :host([size='sm']) .track {\n    height: 4px;\n  }\n\n  .track,\n  :host([size='md']) .track {\n    height: 6px;\n  }\n\n  :host([size='lg']) .track {\n    height: 8px;\n  }\n\n  /* ---- Label ---- */\n\n  .label {\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    color: var(--mellow-text-secondary, #8a8686);\n    display: flex;\n    justify-content: space-between;\n  }\n`\n"],"names":["progressStyles","css"],"mappings":";AAEO,MAAMA,IAAiBC;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/step-timeline.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export type StepTimelineDirection = 'horizontal' | 'vertical';
+export type StepTimelinePosition = 'first' | 'middle' | 'last' | 'universal';
+export declare class MellowStepTimeline extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Direction of the timeline layout. */
+    direction: StepTimelineDirection;
+    /** Position within a vertical timeline (determines connector lines). */
+    position: StepTimelinePosition;
+    /** Step title text. */
+    title: string;
+    /** Step subtitle text. */
+    subtitle: string;
+    private get _showConnectorBefore();
+    private get _showConnectorAfter();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-step-timeline': MellowStepTimeline;
+    }
+}
+//# sourceMappingURL=step-timeline.d.ts.map

package/dist/components/progress/step-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-timeline.d.ts","sourceRoot":"","sources":["../../../src/components/progress/step-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAI/C,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC7D,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAE5E,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAAuB;IAE7C,wCAAwC;IAExC,SAAS,EAAE,qBAAqB,CAAe;IAE/C,wEAAwE;IAExE,QAAQ,EAAE,oBAAoB,CAAc;IAE5C,uBAAuB;IAEd,KAAK,SAAK;IAEnB,0BAA0B;IAE1B,QAAQ,SAAK;IAEb,OAAO,KAAK,oBAAoB,GAE/B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEQ,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAA;KAC3C;CACF"}

package/dist/components/progress/step-timeline.js

@@ -0,0 +1,52 @@
+import { LitElement as u, nothing as l, html as i } from "lit";
+import { property as n, customElement as a } from "lit/decorators.js";
+import { stepTimelineStyles as d } from "./step-timeline.styles.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (v, r, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? m(r, p) : r, c = v.length - 1, h; c >= 0; c--)
+    (h = v[c]) && (t = (o ? h(r, p, t) : h(t)) || t);
+  return o && t && f(r, p, t), t;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.direction = "horizontal", this.position = "universal", this.title = "", this.subtitle = "";
+  }
+  get _showConnectorBefore() {
+    return this.direction === "vertical" && this.position !== "first" && this.position !== "universal";
+  }
+  get _showConnectorAfter() {
+    return this.direction === "vertical" && this.position !== "last" && this.position !== "universal";
+  }
+  render() {
+    return i`
+      <div class="divider">
+        ${this._showConnectorBefore ? i`<div class="connector-before"></div>` : l}
+        <div class="dot"></div>
+        ${this._showConnectorAfter ? i`<div class="connector-after"></div>` : l}
+      </div>
+      <div class="text">
+        ${this.title ? i`<p class="title">${this.title}</p>` : l}
+        ${this.subtitle ? i`<p class="subtitle">${this.subtitle}</p>` : l}
+      </div>
+    `;
+  }
+};
+e.styles = [d];
+s([
+  n({ reflect: !0 })
+], e.prototype, "direction", 2);
+s([
+  n({ reflect: !0 })
+], e.prototype, "position", 2);
+s([
+  n({ attribute: "title" })
+], e.prototype, "title", 2);
+s([
+  n()
+], e.prototype, "subtitle", 2);
+e = s([
+  a("mellow-step-timeline")
+], e);
+export {
+  e as MellowStepTimeline
+};
+//# sourceMappingURL=step-timeline.js.map

package/dist/components/progress/step-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-timeline.js","sources":["../../../src/components/progress/step-timeline.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { stepTimelineStyles } from './step-timeline.styles.js'\n\nexport type StepTimelineDirection = 'horizontal' | 'vertical'\nexport type StepTimelinePosition = 'first' | 'middle' | 'last' | 'universal'\n\n@customElement('mellow-step-timeline')\nexport class MellowStepTimeline extends LitElement {\n  static override styles = [stepTimelineStyles]\n\n  /** Direction of the timeline layout. */\n  @property({ reflect: true })\n  direction: StepTimelineDirection = 'horizontal'\n\n  /** Position within a vertical timeline (determines connector lines). */\n  @property({ reflect: true })\n  position: StepTimelinePosition = 'universal'\n\n  /** Step title text. */\n  @property({ attribute: 'title' })\n  override title = ''\n\n  /** Step subtitle text. */\n  @property()\n  subtitle = ''\n\n  private get _showConnectorBefore(): boolean {\n    return this.direction === 'vertical' && this.position !== 'first' && this.position !== 'universal'\n  }\n\n  private get _showConnectorAfter(): boolean {\n    return this.direction === 'vertical' && this.position !== 'last' && this.position !== 'universal'\n  }\n\n  override render() {\n    return html`\n      <div class=\"divider\">\n        ${this._showConnectorBefore\n          ? html`<div class=\"connector-before\"></div>`\n          : nothing}\n        <div class=\"dot\"></div>\n        ${this._showConnectorAfter\n          ? html`<div class=\"connector-after\"></div>`\n          : nothing}\n      </div>\n      <div class=\"text\">\n        ${this.title\n          ? html`<p class=\"title\">${this.title}</p>`\n          : nothing}\n        ${this.subtitle\n          ? html`<p class=\"subtitle\">${this.subtitle}</p>`\n          : nothing}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-step-timeline': MellowStepTimeline\n  }\n}\n"],"names":["MellowStepTimeline","LitElement","html","nothing","stepTimelineStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAQO,IAAMA,IAAN,cAAiCC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,YAAmC,cAInC,KAAA,WAAiC,aAIjC,KAAS,QAAQ,IAIjB,KAAA,WAAW;AAAA,EAAA;AAAA,EAEX,IAAY,uBAAgC;AAC1C,WAAO,KAAK,cAAc,cAAc,KAAK,aAAa,WAAW,KAAK,aAAa;AAAA,EACzF;AAAA,EAEA,IAAY,sBAA+B;AACzC,WAAO,KAAK,cAAc,cAAc,KAAK,aAAa,UAAU,KAAK,aAAa;AAAA,EACxF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,UAED,KAAK,uBACHA,0CACAC,CAAO;AAAA;AAAA,UAET,KAAK,sBACHD,yCACAC,CAAO;AAAA;AAAA;AAAA,UAGT,KAAK,QACHD,qBAAwB,KAAK,KAAK,SAClCC,CAAO;AAAA,UACT,KAAK,WACHD,wBAA2B,KAAK,QAAQ,SACxCC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAhDaH,EACK,SAAS,CAACI,CAAkB;AAI5CC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAJhBN,EAKX,WAAA,aAAA,CAAA;AAIAK,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GARhBN,EASX,WAAA,YAAA,CAAA;AAISK,EAAA;AAAA,EADRC,EAAS,EAAE,WAAW,QAAA,CAAS;AAAA,GAZrBN,EAaF,WAAA,SAAA,CAAA;AAITK,EAAA;AAAA,EADCC,EAAA;AAAS,GAhBCN,EAiBX,WAAA,YAAA,CAAA;AAjBWA,IAANK,EAAA;AAAA,EADNE,EAAc,sBAAsB;AAAA,GACxBP,CAAA;"}

package/dist/components/progress/step-timeline.styles.d.ts

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

package/dist/components/progress/step-timeline.styles.d.ts.map

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

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

@@ -0,0 +1,137 @@
+import { css as e } from "lit";
+const t = e`
+  :host {
+    display: flex;
+    gap: var(--mellow-space-2, 8px);
+    align-items: flex-start;
+  }
+
+  /* ---- Divider column ---- */
+
+  .divider {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-0, 0px);
+    align-items: center;
+    align-self: stretch;
+    flex-shrink: 0;
+  }
+
+  /* Horizontal variant: dot is top-aligned */
+  :host([direction='horizontal']) .divider {
+    padding-top: var(--mellow-space-2, 8px);
+    padding-right: var(--mellow-space-0, 0px);
+  }
+
+  /* Vertical variant: dot is centered, with connector lines */
+  :host([direction='vertical']) .divider {
+    padding-right: var(--mellow-space-1-5, 6px);
+    width: 12px;
+    justify-content: center;
+  }
+
+  :host([direction='vertical'][position='first']) .divider {
+    padding-top: var(--mellow-space-2, 8px);
+  }
+
+  :host([direction='vertical'][position='middle']) .divider,
+  :host([direction='vertical'][position='last']) .divider {
+    padding-top: var(--mellow-space-0, 0px);
+  }
+
+  /* ---- Dot ---- */
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--mellow-text-primary, #232222);
+  }
+
+  /* ---- Connector lines (vertical only) ---- */
+
+  .connector-before,
+  .connector-after {
+    display: none;
+  }
+
+  :host([direction='vertical']) .connector-before,
+  :host([direction='vertical']) .connector-after {
+    display: block;
+    width: 1px;
+    min-height: 1px;
+    min-width: 1px;
+    background: var(--mellow-border-secondary, #ead8be);
+  }
+
+  /* First: no top connector, bottom connector grows */
+  :host([direction='vertical'][position='first']) .connector-before {
+    display: none;
+  }
+
+  :host([direction='vertical'][position='first']) .connector-after {
+    flex: 1 0 0;
+  }
+
+  /* Middle: both connectors */
+  :host([direction='vertical'][position='middle']) .connector-before {
+    height: 8px;
+    flex-shrink: 0;
+  }
+
+  :host([direction='vertical'][position='middle']) .connector-after {
+    flex: 1 0 0;
+  }
+
+  /* Last: top connector only, no bottom */
+  :host([direction='vertical'][position='last']) .connector-before {
+    height: 8px;
+    flex-shrink: 0;
+  }
+
+  :host([direction='vertical'][position='last']) .connector-after {
+    display: none;
+  }
+
+  /* Horizontal: no connectors */
+  :host([direction='horizontal']) .connector-before,
+  :host([direction='horizontal']) .connector-after {
+    display: none;
+  }
+
+  /* ---- Text ---- */
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-0-5, 2px);
+    align-items: flex-start;
+    padding-bottom: var(--mellow-space-3, 12px);
+    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;
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .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 {
+  t as stepTimelineStyles
+};
+//# sourceMappingURL=step-timeline.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-timeline.styles.js","sources":["../../../src/components/progress/step-timeline.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const stepTimelineStyles = css`\n  :host {\n    display: flex;\n    gap: var(--mellow-space-2, 8px);\n    align-items: flex-start;\n  }\n\n  /* ---- Divider column ---- */\n\n  .divider {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-0, 0px);\n    align-items: center;\n    align-self: stretch;\n    flex-shrink: 0;\n  }\n\n  /* Horizontal variant: dot is top-aligned */\n  :host([direction='horizontal']) .divider {\n    padding-top: var(--mellow-space-2, 8px);\n    padding-right: var(--mellow-space-0, 0px);\n  }\n\n  /* Vertical variant: dot is centered, with connector lines */\n  :host([direction='vertical']) .divider {\n    padding-right: var(--mellow-space-1-5, 6px);\n    width: 12px;\n    justify-content: center;\n  }\n\n  :host([direction='vertical'][position='first']) .divider {\n    padding-top: var(--mellow-space-2, 8px);\n  }\n\n  :host([direction='vertical'][position='middle']) .divider,\n  :host([direction='vertical'][position='last']) .divider {\n    padding-top: var(--mellow-space-0, 0px);\n  }\n\n  /* ---- Dot ---- */\n\n  .dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    background: var(--mellow-text-primary, #232222);\n  }\n\n  /* ---- Connector lines (vertical only) ---- */\n\n  .connector-before,\n  .connector-after {\n    display: none;\n  }\n\n  :host([direction='vertical']) .connector-before,\n  :host([direction='vertical']) .connector-after {\n    display: block;\n    width: 1px;\n    min-height: 1px;\n    min-width: 1px;\n    background: var(--mellow-border-secondary, #ead8be);\n  }\n\n  /* First: no top connector, bottom connector grows */\n  :host([direction='vertical'][position='first']) .connector-before {\n    display: none;\n  }\n\n  :host([direction='vertical'][position='first']) .connector-after {\n    flex: 1 0 0;\n  }\n\n  /* Middle: both connectors */\n  :host([direction='vertical'][position='middle']) .connector-before {\n    height: 8px;\n    flex-shrink: 0;\n  }\n\n  :host([direction='vertical'][position='middle']) .connector-after {\n    flex: 1 0 0;\n  }\n\n  /* Last: top connector only, no bottom */\n  :host([direction='vertical'][position='last']) .connector-before {\n    height: 8px;\n    flex-shrink: 0;\n  }\n\n  :host([direction='vertical'][position='last']) .connector-after {\n    display: none;\n  }\n\n  /* Horizontal: no connectors */\n  :host([direction='horizontal']) .connector-before,\n  :host([direction='horizontal']) .connector-after {\n    display: none;\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    padding-bottom: var(--mellow-space-3, 12px);\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    color: var(--mellow-text-primary, #232222);\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":["stepTimelineStyles","css"],"mappings":";AAEO,MAAMA,IAAqBC;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/step.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export type StepState = 'completed' | 'current' | 'further';
+export type StepSize = 'desktop' | 'mobile';
+export declare class MellowStep extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Step state. */
+    state: StepState;
+    /** Display size. */
+    size: StepSize;
+    /** Step title text. */
+    title: string;
+    /** Step subtitle text. */
+    subtitle: string;
+    /** Whether to show the connecting line before this step. */
+    showLine: boolean;
+    private get defaultIcon();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-step': MellowStep;
+    }
+}
+//# sourceMappingURL=step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/progress/step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAIpD,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAC3D,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AAuB3C,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAe;IAErC,kBAAkB;IAElB,KAAK,EAAE,SAAS,CAAY;IAE5B,oBAAoB;IAEpB,IAAI,EAAE,QAAQ,CAAY;IAE1B,uBAAuB;IAEvB,KAAK,SAAK;IAEV,0BAA0B;IAE1B,QAAQ,SAAK;IAEb,4DAA4D;IAE5D,QAAQ,UAAO;IAEf,OAAO,KAAK,WAAW,GAStB;IAEQ,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/progress/step.js

@@ -0,0 +1,76 @@
+import { svg as d, LitElement as u, nothing as p, html as l } from "lit";
+import { property as r, customElement as a } from "lit/decorators.js";
+import { stepStyles as v } from "./step.styles.js";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (w, i, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? g(i, n) : i, c = w.length - 1, h; c >= 0; c--)
+    (h = w[c]) && (e = (o ? h(i, n, e) : h(e)) || e);
+  return o && e && f(i, n, e), e;
+};
+const m = d`
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="10" r="9" fill="#5e8b7f" stroke="#5e8b7f" stroke-width="2"/>
+    <path d="M6 10l3 3 5-5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, k = d`
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="10" r="9" fill="#e27f00" stroke="#e27f00" stroke-width="2"/>
+    <path d="M6 10l3 3 5-5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, x = d`
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="10" r="9" fill="#ede2d6" stroke="#d1d0d0" stroke-width="2"/>
+    <path d="M6 10l3 3 5-5" stroke="#8a8686" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.state = "further", this.size = "desktop", this.title = "", this.subtitle = "", this.showLine = !0;
+  }
+  get defaultIcon() {
+    switch (this.state) {
+      case "completed":
+        return m;
+      case "current":
+        return k;
+      default:
+        return x;
+    }
+  }
+  render() {
+    return l`
+      ${this.showLine ? l`<div class="line"><div class="line-bar"></div></div>` : p}
+      <div class="icon-frame">
+        <div class="icon">
+          <slot name="icon">${this.defaultIcon}</slot>
+        </div>
+      </div>
+      <div class="text">
+        ${this.title ? l`<p class="title">${this.title}</p>` : p}
+        ${this.subtitle ? l`<p class="subtitle">${this.subtitle}</p>` : p}
+      </div>
+    `;
+  }
+};
+t.styles = [v];
+s([
+  r({ reflect: !0 })
+], t.prototype, "state", 2);
+s([
+  r({ reflect: !0 })
+], t.prototype, "size", 2);
+s([
+  r()
+], t.prototype, "title", 2);
+s([
+  r()
+], t.prototype, "subtitle", 2);
+s([
+  r({ type: Boolean, attribute: "show-line" })
+], t.prototype, "showLine", 2);
+t = s([
+  a("mellow-step")
+], t);
+export {
+  t as MellowStep
+};
+//# sourceMappingURL=step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sources":["../../../src/components/progress/step.ts"],"sourcesContent":["import { LitElement, html, svg, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { stepStyles } from './step.styles.js'\n\nexport type StepState = 'completed' | 'current' | 'further'\nexport type StepSize = 'desktop' | 'mobile'\n\nconst completedIcon = svg`\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#5e8b7f\" stroke=\"#5e8b7f\" stroke-width=\"2\"/>\n    <path d=\"M6 10l3 3 5-5\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\nconst currentIcon = svg`\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#e27f00\" stroke=\"#e27f00\" stroke-width=\"2\"/>\n    <path d=\"M6 10l3 3 5-5\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\nconst furtherIcon = svg`\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#ede2d6\" stroke=\"#d1d0d0\" stroke-width=\"2\"/>\n    <path d=\"M6 10l3 3 5-5\" stroke=\"#8a8686\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\n@customElement('mellow-step')\nexport class MellowStep extends LitElement {\n  static override styles = [stepStyles]\n\n  /** Step state. */\n  @property({ reflect: true })\n  state: StepState = 'further'\n\n  /** Display size. */\n  @property({ reflect: true })\n  size: StepSize = 'desktop'\n\n  /** Step title text. */\n  @property()\n  title = ''\n\n  /** Step subtitle text. */\n  @property()\n  subtitle = ''\n\n  /** Whether to show the connecting line before this step. */\n  @property({ type: Boolean, attribute: 'show-line' })\n  showLine = true\n\n  private get defaultIcon() {\n    switch (this.state) {\n      case 'completed':\n        return completedIcon\n      case 'current':\n        return currentIcon\n      default:\n        return furtherIcon\n    }\n  }\n\n  override render() {\n    return html`\n      ${this.showLine\n        ? html`<div class=\"line\"><div class=\"line-bar\"></div></div>`\n        : nothing}\n      <div class=\"icon-frame\">\n        <div class=\"icon\">\n          <slot name=\"icon\">${this.defaultIcon}</slot>\n        </div>\n      </div>\n      <div class=\"text\">\n        ${this.title\n          ? html`<p class=\"title\">${this.title}</p>`\n          : nothing}\n        ${this.subtitle\n          ? html`<p class=\"subtitle\">${this.subtitle}</p>`\n          : nothing}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-step': MellowStep\n  }\n}\n"],"names":["completedIcon","svg","currentIcon","furtherIcon","MellowStep","LitElement","html","nothing","stepStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAOA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhBC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA,GAOdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,IAAMG,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,QAAmB,WAInB,KAAA,OAAiB,WAIjB,KAAA,QAAQ,IAIR,KAAA,WAAW,IAIX,KAAA,WAAW;AAAA,EAAA;AAAA,EAEX,IAAY,cAAc;AACxB,YAAQ,KAAK,OAAA;AAAA,MACX,KAAK;AACH,eAAOL;AAAA,MACT,KAAK;AACH,eAAOE;AAAA,MACT;AACE,eAAOC;AAAA,IAAA;AAAA,EAEb;AAAA,EAES,SAAS;AAChB,WAAOG;AAAA,QACH,KAAK,WACHA,0DACAC,CAAO;AAAA;AAAA;AAAA,8BAGa,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,UAIpC,KAAK,QACHD,qBAAwB,KAAK,KAAK,SAClCC,CAAO;AAAA,UACT,KAAK,WACHD,wBAA2B,KAAK,QAAQ,SACxCC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAtDaH,EACK,SAAS,CAACI,CAAU;AAIpCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAJhBN,EAKX,WAAA,SAAA,CAAA;AAIAK,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GARhBN,EASX,WAAA,QAAA,CAAA;AAIAK,EAAA;AAAA,EADCC,EAAA;AAAS,GAZCN,EAaX,WAAA,SAAA,CAAA;AAIAK,EAAA;AAAA,EADCC,EAAA;AAAS,GAhBCN,EAiBX,WAAA,YAAA,CAAA;AAIAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GApBxCN,EAqBX,WAAA,YAAA,CAAA;AArBWA,IAANK,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfP,CAAA;"}

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

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

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

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