@mellow.io/ds 0.1.0

package/dist/components/button/button.styles.js

@@ -0,0 +1,185 @@
+import { css as t } from "lit";
+const e = t`
+  :host {
+    display: inline-block;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border: none;
+    cursor: pointer;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-regular, 400);
+    text-align: center;
+    letter-spacing: 0;
+    transition: background-color 150ms ease;
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    outline-offset: 2px;
+  }
+
+  /* ---- Sizes ---- */
+
+  :host([size='xs']) button {
+    height: 32px;
+    padding: 0 var(--mellow-space-3, 12px);
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    gap: var(--mellow-space-2, 8px);
+    border-radius: var(--mellow-radius-1-5, 6px);
+  }
+
+  button,
+  :host([size='md']) button {
+    height: 42px;
+    padding: 0 var(--mellow-space-5, 20px);
+    font-size: var(--mellow-font-size-16, 16px);
+    line-height: var(--mellow-line-height-22, 22px);
+    gap: var(--mellow-space-2, 8px);
+    border-radius: var(--mellow-radius-2, 8px);
+  }
+
+  :host([size='xl']) button {
+    height: 52px;
+    padding: 0 var(--mellow-space-6, 24px);
+    font-size: var(--mellow-font-size-18, 18px);
+    line-height: var(--mellow-line-height-24, 24px);
+    gap: var(--mellow-space-2, 8px);
+    border-radius: var(--mellow-radius-2-5, 10px);
+  }
+
+  /* ---- Variants ---- */
+
+  /* Primary (default) */
+  :host([variant='primary']) button,
+  button {
+    background-color: var(--mellow-button-primary-default, #232222);
+    color: var(--mellow-text-inverse, #ffffff);
+  }
+  :host([variant='primary']) button:hover:not(:disabled),
+  button:hover:not(:disabled) {
+    background-color: var(--mellow-button-primary-hovered, #000000);
+  }
+  :host([variant='primary']) button:active:not(:disabled),
+  button:active:not(:disabled) {
+    background-color: var(--mellow-button-primary-pressed, #000000);
+  }
+
+  /* Secondary */
+  :host([variant='secondary']) button {
+    background-color: var(--mellow-button-secondary-default, #ede2d6);
+    color: var(--mellow-text-primary, #232222);
+  }
+  :host([variant='secondary']) button:hover:not(:disabled) {
+    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);
+  }
+  :host([variant='secondary']) button:active:not(:disabled) {
+    background-color: var(--mellow-button-secondary-pressed, #d3b69e);
+  }
+
+  /* Brand */
+  :host([variant='brand']) button {
+    background-color: var(--mellow-button-brand-default, #ff6f23);
+    color: var(--mellow-text-inverse, #ffffff);
+  }
+  :host([variant='brand']) button:hover:not(:disabled) {
+    background-color: var(--mellow-button-brand-hovered, #f04706);
+  }
+  :host([variant='brand']) button:active:not(:disabled) {
+    background-color: var(--mellow-button-brand-pressed, #c73307);
+  }
+
+  /* Link (transparent) */
+  :host([variant='link']) button {
+    background-color: transparent;
+    color: var(--mellow-text-brand, #ff6f23);
+  }
+  :host([variant='link']) button:hover:not(:disabled) {
+    background-color: var(--mellow-button-transparent-hovered, rgba(35, 34, 34, 0.04));
+  }
+  :host([variant='link']) button:active:not(:disabled) {
+    background-color: var(--mellow-button-transparent-pressed, rgba(35, 34, 34, 0.08));
+  }
+
+  /* ---- States ---- */
+
+  button:disabled {
+    opacity: 0.48;
+    cursor: not-allowed;
+  }
+
+  /* ---- Icon slots ---- */
+
+  ::slotted([slot='icon-start']),
+  ::slotted([slot='icon-end']),
+  .spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: clip;
+  }
+
+  /* Icon sizes per button size */
+  ::slotted([slot='icon-start']),
+  ::slotted([slot='icon-end']),
+  .spinner {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='xs']) ::slotted([slot='icon-start']),
+  :host([size='xs']) ::slotted([slot='icon-end']),
+  :host([size='xs']) .spinner {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([size='xl']) ::slotted([slot='icon-start']),
+  :host([size='xl']) ::slotted([slot='icon-end']),
+  :host([size='xl']) .spinner {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* ---- Loading ---- */
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+  }
+
+  .spinner-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* ---- Icon-only ---- */
+
+  :host([icon-only]) button {
+    padding: 0;
+    aspect-ratio: 1;
+  }
+`;
+export {
+  e as buttonStyles
+};
+//# sourceMappingURL=button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.js","sources":["../../../src/components/button/button.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    border: none;\n    cursor: pointer;\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    text-align: center;\n    letter-spacing: 0;\n    transition: background-color 150ms ease;\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);\n    outline-offset: 2px;\n  }\n\n  /* ---- Sizes ---- */\n\n  :host([size='xs']) button {\n    height: 32px;\n    padding: 0 var(--mellow-space-3, 12px);\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n    gap: var(--mellow-space-2, 8px);\n    border-radius: var(--mellow-radius-1-5, 6px);\n  }\n\n  button,\n  :host([size='md']) button {\n    height: 42px;\n    padding: 0 var(--mellow-space-5, 20px);\n    font-size: var(--mellow-font-size-16, 16px);\n    line-height: var(--mellow-line-height-22, 22px);\n    gap: var(--mellow-space-2, 8px);\n    border-radius: var(--mellow-radius-2, 8px);\n  }\n\n  :host([size='xl']) button {\n    height: 52px;\n    padding: 0 var(--mellow-space-6, 24px);\n    font-size: var(--mellow-font-size-18, 18px);\n    line-height: var(--mellow-line-height-24, 24px);\n    gap: var(--mellow-space-2, 8px);\n    border-radius: var(--mellow-radius-2-5, 10px);\n  }\n\n  /* ---- Variants ---- */\n\n  /* Primary (default) */\n  :host([variant='primary']) button,\n  button {\n    background-color: var(--mellow-button-primary-default, #232222);\n    color: var(--mellow-text-inverse, #ffffff);\n  }\n  :host([variant='primary']) button:hover:not(:disabled),\n  button:hover:not(:disabled) {\n    background-color: var(--mellow-button-primary-hovered, #000000);\n  }\n  :host([variant='primary']) button:active:not(:disabled),\n  button:active:not(:disabled) {\n    background-color: var(--mellow-button-primary-pressed, #000000);\n  }\n\n  /* Secondary */\n  :host([variant='secondary']) button {\n    background-color: var(--mellow-button-secondary-default, #ede2d6);\n    color: var(--mellow-text-primary, #232222);\n  }\n  :host([variant='secondary']) button:hover:not(:disabled) {\n    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);\n  }\n  :host([variant='secondary']) button:active:not(:disabled) {\n    background-color: var(--mellow-button-secondary-pressed, #d3b69e);\n  }\n\n  /* Brand */\n  :host([variant='brand']) button {\n    background-color: var(--mellow-button-brand-default, #ff6f23);\n    color: var(--mellow-text-inverse, #ffffff);\n  }\n  :host([variant='brand']) button:hover:not(:disabled) {\n    background-color: var(--mellow-button-brand-hovered, #f04706);\n  }\n  :host([variant='brand']) button:active:not(:disabled) {\n    background-color: var(--mellow-button-brand-pressed, #c73307);\n  }\n\n  /* Link (transparent) */\n  :host([variant='link']) button {\n    background-color: transparent;\n    color: var(--mellow-text-brand, #ff6f23);\n  }\n  :host([variant='link']) button:hover:not(:disabled) {\n    background-color: var(--mellow-button-transparent-hovered, rgba(35, 34, 34, 0.04));\n  }\n  :host([variant='link']) button:active:not(:disabled) {\n    background-color: var(--mellow-button-transparent-pressed, rgba(35, 34, 34, 0.08));\n  }\n\n  /* ---- States ---- */\n\n  button:disabled {\n    opacity: 0.48;\n    cursor: not-allowed;\n  }\n\n  /* ---- Icon slots ---- */\n\n  ::slotted([slot='icon-start']),\n  ::slotted([slot='icon-end']),\n  .spinner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    overflow: clip;\n  }\n\n  /* Icon sizes per button size */\n  ::slotted([slot='icon-start']),\n  ::slotted([slot='icon-end']),\n  .spinner {\n    width: 20px;\n    height: 20px;\n  }\n\n  :host([size='xs']) ::slotted([slot='icon-start']),\n  :host([size='xs']) ::slotted([slot='icon-end']),\n  :host([size='xs']) .spinner {\n    width: 16px;\n    height: 16px;\n  }\n\n  :host([size='xl']) ::slotted([slot='icon-start']),\n  :host([size='xl']) ::slotted([slot='icon-end']),\n  :host([size='xl']) .spinner {\n    width: 24px;\n    height: 24px;\n  }\n\n  /* ---- Loading ---- */\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  .spinner-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner {\n    animation: spin 0.8s linear infinite;\n  }\n\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n\n  /* ---- Icon-only ---- */\n\n  :host([icon-only]) button {\n    padding: 0;\n    aspect-ratio: 1;\n  }\n`\n"],"names":["buttonStyles","css"],"mappings":";AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/button/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowButton } from './button.js';
+export type { ButtonVariant, ButtonSize } from './button.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/card/card.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardSize = 'compact' | 'large';
+export declare class MellowCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variant: CardVariant;
+    size: CardSize;
+    heading: string;
+    subtitle: string;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-card': MellowCard;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAI/C,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAA;AAC5D,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAA;AAE1C,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAe;IAGrC,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAY;IAG1B,OAAO,SAAK;IAGZ,QAAQ,SAAK;IAGb,QAAQ,UAAQ;IAEP,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/card/card.js

@@ -0,0 +1,62 @@
+import { LitElement as h, nothing as n, html as o } from "lit";
+import { property as r, customElement as v } from "lit/decorators.js";
+import { cardStyles as u } from "./card.styles.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (i, a, d, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(a, d) : a, p = i.length - 1, c; p >= 0; p--)
+    (c = i[p]) && (t = (l ? c(a, d, t) : c(t)) || t);
+  return l && t && m(a, d, t), t;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "elevated", this.size = "compact", this.heading = "", this.subtitle = "", this.disabled = !1;
+  }
+  render() {
+    const i = this.heading || this.subtitle;
+    return o`
+      <div class="card" part="card" role="region">
+        <div class="content">
+          ${i ? o`
+              <div class="header" part="header">
+                <div class="header-icon">
+                  <slot name="icon"></slot>
+                </div>
+                <div class="header-text">
+                  ${this.heading ? o`<p class="header-title">${this.heading}</p>` : n}
+                  ${this.subtitle ? o`<p class="header-subtitle">${this.subtitle}</p>` : n}
+                </div>
+                <div class="header-actions">
+                  <slot name="actions"></slot>
+                </div>
+              </div>
+            ` : n}
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [u];
+s([
+  r({ reflect: !0 })
+], e.prototype, "variant", 2);
+s([
+  r({ reflect: !0 })
+], e.prototype, "size", 2);
+s([
+  r()
+], e.prototype, "heading", 2);
+s([
+  r()
+], e.prototype, "subtitle", 2);
+s([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = s([
+  v("mellow-card")
+], e);
+export {
+  e as MellowCard
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../src/components/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cardStyles } from './card.styles.js'\n\nexport type CardVariant = 'elevated' | 'outlined' | 'filled'\nexport type CardSize = 'compact' | 'large'\n\n@customElement('mellow-card')\nexport class MellowCard extends LitElement {\n  static override styles = [cardStyles]\n\n  @property({ reflect: true })\n  variant: CardVariant = 'elevated'\n\n  @property({ reflect: true })\n  size: CardSize = 'compact'\n\n  @property()\n  heading = ''\n\n  @property()\n  subtitle = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  override render() {\n    const hasHeader = this.heading || this.subtitle\n    return html`\n      <div class=\"card\" part=\"card\" role=\"region\">\n        <div class=\"content\">\n          ${hasHeader\n            ? html`\n              <div class=\"header\" part=\"header\">\n                <div class=\"header-icon\">\n                  <slot name=\"icon\"></slot>\n                </div>\n                <div class=\"header-text\">\n                  ${this.heading\n                    ? html`<p class=\"header-title\">${this.heading}</p>`\n                    : nothing}\n                  ${this.subtitle\n                    ? html`<p class=\"header-subtitle\">${this.subtitle}</p>`\n                    : nothing}\n                </div>\n                <div class=\"header-actions\">\n                  <slot name=\"actions\"></slot>\n                </div>\n              </div>\n            `\n            : nothing}\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-card': MellowCard\n  }\n}\n"],"names":["MellowCard","LitElement","hasHeader","html","nothing","cardStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAQO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAAuB,YAGvB,KAAA,OAAiB,WAGjB,KAAA,UAAU,IAGV,KAAA,WAAW,IAGX,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAS;AAChB,UAAMC,IAAY,KAAK,WAAW,KAAK;AACvC,WAAOC;AAAA;AAAA;AAAA,YAGCD,IACEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMM,KAAK,UACHA,4BAA+B,KAAK,OAAO,SAC3CC,CAAO;AAAA,oBACT,KAAK,WACHD,+BAAkC,KAAK,QAAQ,SAC/CC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnB;AACF;AAlDaJ,EACK,SAAS,CAACK,CAAU;AAGpCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAHhBP,EAIX,WAAA,WAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBP,EAOX,WAAA,QAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAA;AAAS,GATCP,EAUX,WAAA,WAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAA;AAAS,GAZCP,EAaX,WAAA,YAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/BP,EAgBX,WAAA,YAAA,CAAA;AAhBWA,IAANM,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfR,CAAA;"}

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

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

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

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

package/dist/components/card/card.styles.js

@@ -0,0 +1,129 @@
+import { css as e } from "lit";
+const r = e`
+  :host {
+    display: block;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+  }
+
+  .card {
+    border-radius: var(--mellow-space-5, 20px);
+    overflow: hidden;
+  }
+
+  /* ---- Variants ---- */
+
+  /* Elevated (default) */
+  :host([variant='elevated']) .card,
+  .card {
+    background: var(--mellow-colors-bg-surface-primary, #ffffff);
+  }
+
+  /* Outlined */
+  :host([variant='outlined']) .card {
+    background: var(--mellow-colors-bg-surface-primary, #ffffff);
+    border: 1px solid var(--mellow-colors-merino-100, #f5eddf);
+  }
+
+  /* Filled */
+  :host([variant='filled']) .card {
+    background: var(--mellow-colors-bg-surface-tertiary, #f5eddf);
+  }
+
+  /* ---- Size ---- */
+
+  :host([size='compact']) .card,
+  .card {
+    padding: var(--mellow-space-5, 20px);
+  }
+
+  :host([size='large']) .card {
+    padding: var(--mellow-space-6, 24px) var(--mellow-space-6, 24px) var(--mellow-space-4, 16px);
+  }
+
+  /* ---- Inner layout ---- */
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-5, 20px);
+    align-items: flex-start;
+  }
+
+  /* ---- Header ---- */
+
+  .header {
+    display: flex;
+    gap: var(--mellow-space-3, 12px);
+    align-items: center;
+    width: 100%;
+  }
+
+  .header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    flex-shrink: 0;
+    border-radius: var(--mellow-radii-xl, 12px);
+    background: var(--mellow-colors-bg-secondary-translucent, rgba(228, 211, 196, 0.64));
+    padding: 9px;
+    box-sizing: border-box;
+  }
+
+  .header-icon ::slotted(*) {
+    width: 24px;
+    height: 24px;
+  }
+
+  .header-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    min-width: 0;
+    justify-content: center;
+  }
+
+  .header-title {
+    font-size: var(--mellow-typography-font-size-md, 18px);
+    font-weight: var(--mellow-typography-font-weight-medium, 500);
+    line-height: var(--mellow-typography-line-height-md, 24px);
+    color: var(--mellow-colors-shark-950, #232222);
+    margin: 0;
+  }
+
+  .header-subtitle {
+    font-size: var(--mellow-typography-font-size-sm, 14px);
+    font-weight: var(--mellow-typography-font-weight-regular, 400);
+    line-height: var(--mellow-typography-line-height-sm, 18px);
+    color: var(--mellow-colors-shark-400, #8a8686);
+    margin: 0;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--mellow-space-3, 12px);
+    flex-shrink: 0;
+  }
+
+  /* ---- Body ---- */
+
+  .body {
+    width: 100%;
+  }
+
+  /* ---- Disabled state ---- */
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .card {
+    background: var(--mellow-colors-bg-surface-tertiary, #f5eddf);
+  }
+`;
+export {
+  r as cardStyles
+};
+//# sourceMappingURL=card.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.js","sources":["../../../src/components/card/card.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const cardStyles = css`\n  :host {\n    display: block;\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n  }\n\n  .card {\n    border-radius: var(--mellow-space-5, 20px);\n    overflow: hidden;\n  }\n\n  /* ---- Variants ---- */\n\n  /* Elevated (default) */\n  :host([variant='elevated']) .card,\n  .card {\n    background: var(--mellow-colors-bg-surface-primary, #ffffff);\n  }\n\n  /* Outlined */\n  :host([variant='outlined']) .card {\n    background: var(--mellow-colors-bg-surface-primary, #ffffff);\n    border: 1px solid var(--mellow-colors-merino-100, #f5eddf);\n  }\n\n  /* Filled */\n  :host([variant='filled']) .card {\n    background: var(--mellow-colors-bg-surface-tertiary, #f5eddf);\n  }\n\n  /* ---- Size ---- */\n\n  :host([size='compact']) .card,\n  .card {\n    padding: var(--mellow-space-5, 20px);\n  }\n\n  :host([size='large']) .card {\n    padding: var(--mellow-space-6, 24px) var(--mellow-space-6, 24px) var(--mellow-space-4, 16px);\n  }\n\n  /* ---- Inner layout ---- */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-5, 20px);\n    align-items: flex-start;\n  }\n\n  /* ---- Header ---- */\n\n  .header {\n    display: flex;\n    gap: var(--mellow-space-3, 12px);\n    align-items: center;\n    width: 100%;\n  }\n\n  .header-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 42px;\n    height: 42px;\n    flex-shrink: 0;\n    border-radius: var(--mellow-radii-xl, 12px);\n    background: var(--mellow-colors-bg-secondary-translucent, rgba(228, 211, 196, 0.64));\n    padding: 9px;\n    box-sizing: border-box;\n  }\n\n  .header-icon ::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  .header-text {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    min-width: 0;\n    justify-content: center;\n  }\n\n  .header-title {\n    font-size: var(--mellow-typography-font-size-md, 18px);\n    font-weight: var(--mellow-typography-font-weight-medium, 500);\n    line-height: var(--mellow-typography-line-height-md, 24px);\n    color: var(--mellow-colors-shark-950, #232222);\n    margin: 0;\n  }\n\n  .header-subtitle {\n    font-size: var(--mellow-typography-font-size-sm, 14px);\n    font-weight: var(--mellow-typography-font-weight-regular, 400);\n    line-height: var(--mellow-typography-line-height-sm, 18px);\n    color: var(--mellow-colors-shark-400, #8a8686);\n    margin: 0;\n  }\n\n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--mellow-space-3, 12px);\n    flex-shrink: 0;\n  }\n\n  /* ---- Body ---- */\n\n  .body {\n    width: 100%;\n  }\n\n  /* ---- Disabled state ---- */\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .card {\n    background: var(--mellow-colors-bg-surface-tertiary, #f5eddf);\n  }\n`\n"],"names":["cardStyles","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;"}

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

@@ -0,0 +1,3 @@
+export { MellowCard } from './card.js';
+export type { CardVariant, CardSize } from './card.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/checkbox/checkbox.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAiBpD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7C,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAmB;IAGzC,OAAO,UAAQ;IAGf,aAAa,UAAQ;IAGrB,QAAQ,UAAQ;IAGhB,IAAI,EAAE,YAAY,CAAO;IAEhB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAS/D,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY,CAGnB;IAED,OAAO,CAAC,cAAc,CAKrB;IAED,OAAO,CAAC,OAAO;IAUN,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAA;KAClC;CACF"}

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,83 @@
+import { svg as p, LitElement as u, nothing as l, html as o } from "lit";
+import { property as c, customElement as k } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { checkboxStyles as b } from "./checkbox.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, n, d, r) => {
+  for (var t = r > 1 ? void 0 : r ? v(n, d) : n, a = e.length - 1, h; a >= 0; a--)
+    (h = e[a]) && (t = (r ? h(n, d, t) : h(t)) || t);
+  return r && t && f(n, d, t), t;
+};
+const _ = p`
+  <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M3.5 8l3 3 6-6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, w = p`
+  <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M4 8h8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </svg>
+`;
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.size = "lg", this._handleClick = () => {
+      this.disabled || this._toggle();
+    }, this._handleKeydown = (e) => {
+      e.key === " " && (this.disabled || (e.preventDefault(), this._toggle()));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "checkbox"), this._updateAriaChecked(), this._updateTabindex(), this.addEventListener("click", this._handleClick), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  updated(e) {
+    (e.has("checked") || e.has("indeterminate")) && this._updateAriaChecked(), e.has("disabled") && this._updateTabindex();
+  }
+  _updateAriaChecked() {
+    this.indeterminate ? this.setAttribute("aria-checked", "mixed") : this.setAttribute("aria-checked", String(this.checked));
+  }
+  _updateTabindex() {
+    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+  }
+  _toggle() {
+    this.checked = !this.checked, this.indeterminate = !1, this.dispatchEvent(new CustomEvent("mellow-change", {
+      detail: { checked: this.checked },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const e = {
+      box: !0,
+      checked: this.checked && !this.indeterminate,
+      indeterminate: this.indeterminate
+    };
+    return o`
+      <div class=${m(e)}>
+        ${this.checked && !this.indeterminate ? o`<span class="check-icon">${_}</span>` : l}
+        ${this.indeterminate ? o`<span class="indeterminate-icon">${w}</span>` : l}
+      </div>
+      <span class="label-text"><slot></slot></span>
+    `;
+  }
+};
+i.styles = [b];
+s([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "checked", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "indeterminate", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+s([
+  c({ reflect: !0 })
+], i.prototype, "size", 2);
+i = s([
+  k("mellow-checkbox")
+], i);
+export {
+  i as MellowCheckbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html, svg, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { checkboxStyles } from './checkbox.styles.js'\n\nconst checkIcon = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M3.5 8l3 3 6-6.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\nconst indeterminateIcon = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M4 8h8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n  </svg>\n`\n\nexport type CheckboxSize = 'lg' | 'md' | 'sm'\n\n@customElement('mellow-checkbox')\nexport class MellowCheckbox extends LitElement {\n  static override styles = [checkboxStyles]\n\n  @property({ type: Boolean, reflect: true })\n  checked = false\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ reflect: true })\n  size: CheckboxSize = 'lg'\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'checkbox')\n    this._updateAriaChecked()\n    this._updateTabindex()\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 updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('checked') || changedProperties.has('indeterminate')) {\n      this._updateAriaChecked()\n    }\n    if (changedProperties.has('disabled')) {\n      this._updateTabindex()\n    }\n  }\n\n  private _updateAriaChecked(): void {\n    if (this.indeterminate) {\n      this.setAttribute('aria-checked', 'mixed')\n    } else {\n      this.setAttribute('aria-checked', String(this.checked))\n    }\n  }\n\n  private _updateTabindex(): void {\n    this.setAttribute('tabindex', this.disabled ? '-1' : '0')\n  }\n\n  private _handleClick = (): void => {\n    if (this.disabled) return\n    this._toggle()\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key !== ' ') return\n    if (this.disabled) return\n    e.preventDefault()\n    this._toggle()\n  }\n\n  private _toggle(): void {\n    this.checked = !this.checked\n    this.indeterminate = false\n    this.dispatchEvent(new CustomEvent('mellow-change', {\n      detail: { checked: this.checked },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  override render() {\n    const boxClasses = {\n      'box': true,\n      'checked': this.checked && !this.indeterminate,\n      'indeterminate': this.indeterminate,\n    }\n\n    return html`\n      <div class=${classMap(boxClasses)}>\n        ${this.checked && !this.indeterminate\n          ? html`<span class=\"check-icon\">${checkIcon}</span>`\n          : nothing}\n        ${this.indeterminate\n          ? html`<span class=\"indeterminate-icon\">${indeterminateIcon}</span>`\n          : nothing}\n      </div>\n      <span class=\"label-text\"><slot></slot></span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-checkbox': MellowCheckbox\n  }\n}\n"],"names":["checkIcon","svg","indeterminateIcon","MellowCheckbox","LitElement","changedProperties","boxClasses","html","classMap","nothing","checkboxStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAKA,MAAMA,IAAYC;AAAA;AAAA;AAAA;AAAA,GAMZC,IAAoBD;AAAA;AAAA;AAAA;AAAA;AASnB,IAAME,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAAU,IAGV,KAAA,gBAAgB,IAGhB,KAAA,WAAW,IAGX,KAAA,OAAqB,MAsCrB,KAAQ,eAAe,MAAY;AACjC,MAAI,KAAK,YACT,KAAK,QAAA;AAAA,IACP,GAEA,KAAQ,iBAAiB,CAAC,MAA2B;AACnD,MAAI,EAAE,QAAQ,QACV,KAAK,aACT,EAAE,eAAA,GACF,KAAK,QAAA;AAAA,IACP;AAAA,EAAA;AAAA,EA9CS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,UAAU,GACpC,KAAK,mBAAA,GACL,KAAK,gBAAA,GACL,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,QAAQC,GAA+C;AAC9D,KAAIA,EAAkB,IAAI,SAAS,KAAKA,EAAkB,IAAI,eAAe,MAC3E,KAAK,mBAAA,GAEHA,EAAkB,IAAI,UAAU,KAClC,KAAK,gBAAA;AAAA,EAET;AAAA,EAEQ,qBAA2B;AACjC,IAAI,KAAK,gBACP,KAAK,aAAa,gBAAgB,OAAO,IAEzC,KAAK,aAAa,gBAAgB,OAAO,KAAK,OAAO,CAAC;AAAA,EAE1D;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,aAAa,YAAY,KAAK,WAAW,OAAO,GAAG;AAAA,EAC1D;AAAA,EAcQ,UAAgB;AACtB,SAAK,UAAU,CAAC,KAAK,SACrB,KAAK,gBAAgB,IACrB,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,SAAS,KAAK,QAAA;AAAA,MACxB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAMC,IAAa;AAAA,MACjB,KAAO;AAAA,MACP,SAAW,KAAK,WAAW,CAAC,KAAK;AAAA,MACjC,eAAiB,KAAK;AAAA,IAAA;AAGxB,WAAOC;AAAA,mBACQC,EAASF,CAAU,CAAC;AAAA,UAC7B,KAAK,WAAW,CAAC,KAAK,gBACpBC,6BAAgCP,CAAS,YACzCS,CAAO;AAAA,UACT,KAAK,gBACHF,qCAAwCL,CAAiB,YACzDO,CAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AA5FaN,EACK,SAAS,CAACO,CAAc;AAGxCC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAH/BT,EAIX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/BT,EAOX,WAAA,iBAAA,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,iBAAiB;AAAA,GACnBV,CAAA;"}

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

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

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

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