@mellow.io/ds 0.1.0

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

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

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,67 @@
+import { css as t } from "lit";
+const e = t`
+  :host {
+    display: inline-flex;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--mellow-avatar-bg, #f5eddf);
+    color: var(--mellow-avatar-color, #5c5c5c);
+    font-family: var(--mellow-font-family-body, system-ui, sans-serif);
+    font-weight: 500;
+  }
+
+  /* ---- Sizes ---- */
+
+  :host([size='sm']) .avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+
+  .avatar,
+  :host([size='md']) .avatar {
+    width: 40px;
+    height: 40px;
+    font-size: 14px;
+  }
+
+  :host([size='lg']) .avatar {
+    width: 56px;
+    height: 56px;
+    font-size: 20px;
+  }
+
+  /* ---- Image ---- */
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* ---- Initials ---- */
+
+  .initials {
+    text-transform: uppercase;
+  }
+
+  /* ---- Fallback icon ---- */
+
+  .fallback-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60%;
+    height: 60%;
+  }
+`;
+export {
+  e as avatarStyles
+};
+//# sourceMappingURL=avatar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.js","sources":["../../../src/components/avatar/avatar.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const avatarStyles = css`\n  :host {\n    display: inline-flex;\n  }\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    overflow: hidden;\n    background: var(--mellow-avatar-bg, #f5eddf);\n    color: var(--mellow-avatar-color, #5c5c5c);\n    font-family: var(--mellow-font-family-body, system-ui, sans-serif);\n    font-weight: 500;\n  }\n\n  /* ---- Sizes ---- */\n\n  :host([size='sm']) .avatar {\n    width: 32px;\n    height: 32px;\n    font-size: 12px;\n  }\n\n  .avatar,\n  :host([size='md']) .avatar {\n    width: 40px;\n    height: 40px;\n    font-size: 14px;\n  }\n\n  :host([size='lg']) .avatar {\n    width: 56px;\n    height: 56px;\n    font-size: 20px;\n  }\n\n  /* ---- Image ---- */\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* ---- Initials ---- */\n\n  .initials {\n    text-transform: uppercase;\n  }\n\n  /* ---- Fallback icon ---- */\n\n  .fallback-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 60%;\n    height: 60%;\n  }\n`\n"],"names":["avatarStyles","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;"}

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

@@ -0,0 +1,3 @@
+export { MellowAvatar } from './avatar.js';
+export type { AvatarSize } from './avatar.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export type BadgeVariant = 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'archive';
+export type BadgeSize = 's' | 'm';
+export declare class MellowBadge extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variant: BadgeVariant;
+    size: BadgeSize;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-badge': MellowBadge;
+    }
+}
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAI/C,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAA;AAEb,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,CAAA;AAEjC,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAgB;IAGtC,OAAO,EAAE,YAAY,CAAY;IAGjC,IAAI,EAAE,SAAS,CAAM;IAEZ,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

package/dist/components/badge/badge.js

@@ -0,0 +1,36 @@
+import { LitElement as c, html as i } from "lit";
+import { property as m, customElement as f } from "lit/decorators.js";
+import { badgeStyles as u } from "./badge.styles.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (a, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? _(r, o) : r, l = a.length - 1, n; l >= 0; l--)
+    (n = a[l]) && (e = (s ? n(r, o, e) : n(e)) || e);
+  return s && e && v(r, o, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "default", this.size = "s";
+  }
+  render() {
+    return i`
+      <span class="content">
+        <slot name="icon-start"></slot>
+        <slot></slot>
+        <slot name="icon-end"></slot>
+      </span>
+    `;
+  }
+};
+t.styles = [u];
+p([
+  m({ reflect: !0 })
+], t.prototype, "variant", 2);
+p([
+  m({ reflect: !0 })
+], t.prototype, "size", 2);
+t = p([
+  f("mellow-badge")
+], t);
+export {
+  t as MellowBadge
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { badgeStyles } from './badge.styles.js'\n\nexport type BadgeVariant =\n  | 'default'\n  | 'secondary'\n  | 'accent'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'archive'\n\nexport type BadgeSize = 's' | 'm'\n\n@customElement('mellow-badge')\nexport class MellowBadge extends LitElement {\n  static override styles = [badgeStyles]\n\n  @property({ reflect: true })\n  variant: BadgeVariant = 'default'\n\n  @property({ reflect: true })\n  size: BadgeSize = 's'\n\n  override render() {\n    return html`\n      <span class=\"content\">\n        <slot name=\"icon-start\"></slot>\n        <slot></slot>\n        <slot name=\"icon-end\"></slot>\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-badge': MellowBadge\n  }\n}\n"],"names":["MellowBadge","LitElement","html","badgeStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAgBO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAAwB,WAGxB,KAAA,OAAkB;AAAA,EAAA;AAAA,EAET,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOT;AACF;AAlBaF,EACK,SAAS,CAACG,CAAW;AAGrCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAHhBL,EAIX,WAAA,WAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBL,EAOX,WAAA,QAAA,CAAA;AAPWA,IAANI,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBN,CAAA;"}

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

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

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

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

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,106 @@
+import { css as o } from "lit";
+const r = o`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-medium, 500);
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mellow-space-1-5, 6px);
+  }
+
+  /* ---- Sizes ---- */
+
+  :host,
+  :host([size='s']) {
+    height: 26px;
+    padding: var(--mellow-space-1-5, 6px) var(--mellow-space-2, 8px);
+    font-size: var(--mellow-font-size-12, 12px);
+    line-height: var(--mellow-line-height-14, 14px);
+    border-radius: var(--mellow-radius-2-5, 10px);
+    gap: var(--mellow-space-1, 4px);
+  }
+
+  :host([size='m']) {
+    height: 32px;
+    padding: var(--mellow-space-1-5, 6px) var(--mellow-space-2, 8px);
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    border-radius: var(--mellow-radius-3, 12px);
+    gap: var(--mellow-space-1, 4px);
+  }
+
+  /* ---- Variants ---- */
+
+  :host,
+  :host([variant='default']) {
+    background-color: var(--mellow-colors-pearl-bush-400-24, rgba(193, 148, 118, 0.24));
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  :host([variant='secondary']) {
+    background-color: var(--mellow-colors-pearl-bush-400-12, rgba(193, 148, 118, 0.12));
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  :host([variant='accent']) {
+    background-color: var(--mellow-colors-orange-400-16, rgba(252, 147, 86, 0.16));
+    color: var(--mellow-text-brand, #ff6f23);
+  }
+
+  :host([variant='success']) {
+    background-color: var(--mellow-bg-surface-success, rgba(94, 139, 127, 0.12));
+    color: var(--mellow-text-success, #5e8b7f);
+  }
+
+  :host([variant='warning']) {
+    background-color: var(--mellow-bg-surface-warning, rgba(255, 202, 27, 0.16));
+    color: var(--mellow-text-warning, #e27f00);
+  }
+
+  :host([variant='error']) {
+    background-color: var(--mellow-bg-surface-danger, rgba(246, 132, 115, 0.16));
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  :host([variant='archive']) {
+    background-color: var(--mellow-colors-shark-950-8, rgba(35, 34, 34, 0.08));
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  /* ---- Icon slots ---- */
+
+  ::slotted([slot='icon-start']),
+  ::slotted([slot='icon-end']) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: clip;
+  }
+
+  :host([size='s']) ::slotted([slot='icon-start']),
+  :host([size='s']) ::slotted([slot='icon-end']),
+  ::slotted([slot='icon-start']),
+  ::slotted([slot='icon-end']) {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([size='m']) ::slotted([slot='icon-start']),
+  :host([size='m']) ::slotted([slot='icon-end']) {
+    width: 20px;
+    height: 20px;
+  }
+`;
+export {
+  r as badgeStyles
+};
+//# sourceMappingURL=badge.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.js","sources":["../../../src/components/badge/badge.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const badgeStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\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    white-space: nowrap;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--mellow-space-1-5, 6px);\n  }\n\n  /* ---- Sizes ---- */\n\n  :host,\n  :host([size='s']) {\n    height: 26px;\n    padding: var(--mellow-space-1-5, 6px) var(--mellow-space-2, 8px);\n    font-size: var(--mellow-font-size-12, 12px);\n    line-height: var(--mellow-line-height-14, 14px);\n    border-radius: var(--mellow-radius-2-5, 10px);\n    gap: var(--mellow-space-1, 4px);\n  }\n\n  :host([size='m']) {\n    height: 32px;\n    padding: var(--mellow-space-1-5, 6px) var(--mellow-space-2, 8px);\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n    border-radius: var(--mellow-radius-3, 12px);\n    gap: var(--mellow-space-1, 4px);\n  }\n\n  /* ---- Variants ---- */\n\n  :host,\n  :host([variant='default']) {\n    background-color: var(--mellow-colors-pearl-bush-400-24, rgba(193, 148, 118, 0.24));\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  :host([variant='secondary']) {\n    background-color: var(--mellow-colors-pearl-bush-400-12, rgba(193, 148, 118, 0.12));\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  :host([variant='accent']) {\n    background-color: var(--mellow-colors-orange-400-16, rgba(252, 147, 86, 0.16));\n    color: var(--mellow-text-brand, #ff6f23);\n  }\n\n  :host([variant='success']) {\n    background-color: var(--mellow-bg-surface-success, rgba(94, 139, 127, 0.12));\n    color: var(--mellow-text-success, #5e8b7f);\n  }\n\n  :host([variant='warning']) {\n    background-color: var(--mellow-bg-surface-warning, rgba(255, 202, 27, 0.16));\n    color: var(--mellow-text-warning, #e27f00);\n  }\n\n  :host([variant='error']) {\n    background-color: var(--mellow-bg-surface-danger, rgba(246, 132, 115, 0.16));\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  :host([variant='archive']) {\n    background-color: var(--mellow-colors-shark-950-8, rgba(35, 34, 34, 0.08));\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  /* ---- Icon slots ---- */\n\n  ::slotted([slot='icon-start']),\n  ::slotted([slot='icon-end']) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    overflow: clip;\n  }\n\n  :host([size='s']) ::slotted([slot='icon-start']),\n  :host([size='s']) ::slotted([slot='icon-end']),\n  ::slotted([slot='icon-start']),\n  ::slotted([slot='icon-end']) {\n    width: 16px;\n    height: 16px;\n  }\n\n  :host([size='m']) ::slotted([slot='icon-start']),\n  :host([size='m']) ::slotted([slot='icon-end']) {\n    width: 20px;\n    height: 20px;\n  }\n`\n"],"names":["badgeStyles","css"],"mappings":";AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowBadge } from './badge.js';
+export type { BadgeVariant, BadgeSize } from './badge.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class MellowBreadcrumbItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    href: string;
+    current: boolean;
+    /** @internal Whether to show the separator before this item */
+    showSeparator: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-breadcrumb-item': MellowBreadcrumbItem;
+    }
+}
+//# sourceMappingURL=breadcrumb-item.d.ts.map

package/dist/components/breadcrumb/breadcrumb-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAI/C,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,4BAAyB;IAG/C,IAAI,SAAK;IAGT,OAAO,UAAQ;IAEf,+DAA+D;IAE/D,aAAa,UAAQ;IAEZ,iBAAiB,IAAI,IAAI;IAKzB,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAA;KAC/C;CACF"}

package/dist/components/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,37 @@
+import { LitElement as u, html as a, nothing as i } from "lit";
+import { property as h, customElement as m } from "lit/decorators.js";
+import { breadcrumbItemStyles as f } from "./breadcrumb.styles.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (s, r, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? y(r, n) : r, p = s.length - 1, c; p >= 0; p--)
+    (c = s[p]) && (e = (o ? c(r, n, e) : c(e)) || e);
+  return o && e && b(r, n, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.href = "", this.current = !1, this.showSeparator = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "listitem");
+  }
+  render() {
+    const s = this.showSeparator ? a`<span class="separator" aria-hidden="true">/</span>` : i, r = this.href ? a`<a href=${this.href} aria-current=${this.current ? "page" : i}><slot></slot></a>` : a`<span class="link" aria-current=${this.current ? "page" : i}><slot></slot></span>`;
+    return a`${s}${r}`;
+  }
+};
+t.styles = [f];
+l([
+  h()
+], t.prototype, "href", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], t.prototype, "current", 2);
+l([
+  h({ type: Boolean, attribute: !1 })
+], t.prototype, "showSeparator", 2);
+t = l([
+  m("mellow-breadcrumb-item")
+], t);
+export {
+  t as MellowBreadcrumbItem
+};
+//# sourceMappingURL=breadcrumb-item.js.map

package/dist/components/breadcrumb/breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../src/components/breadcrumb/breadcrumb-item.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { breadcrumbItemStyles } from './breadcrumb.styles.js'\n\n@customElement('mellow-breadcrumb-item')\nexport class MellowBreadcrumbItem extends LitElement {\n  static override styles = [breadcrumbItemStyles]\n\n  @property()\n  href = ''\n\n  @property({ type: Boolean, reflect: true })\n  current = false\n\n  /** @internal Whether to show the separator before this item */\n  @property({ type: Boolean, attribute: false })\n  showSeparator = false\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'listitem')\n  }\n\n  override render() {\n    const separator = this.showSeparator\n      ? html`<span class=\"separator\" aria-hidden=\"true\">/</span>`\n      : nothing\n\n    const link = this.href\n      ? html`<a href=${this.href} aria-current=${this.current ? 'page' : nothing}><slot></slot></a>`\n      : html`<span class=\"link\" aria-current=${this.current ? 'page' : nothing}><slot></slot></span>`\n\n    return html`${separator}${link}`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-breadcrumb-item': MellowBreadcrumbItem\n  }\n}\n"],"names":["MellowBreadcrumbItem","LitElement","separator","html","nothing","link","breadcrumbItemStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAKO,IAAMA,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,UAAU,IAIV,KAAA,gBAAgB;AAAA,EAAA;AAAA,EAEP,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,UAAU;AAAA,EACtC;AAAA,EAES,SAAS;AAChB,UAAMC,IAAY,KAAK,gBACnBC,yDACAC,GAEEC,IAAO,KAAK,OACdF,YAAe,KAAK,IAAI,iBAAiB,KAAK,UAAU,SAASC,CAAO,uBACxED,oCAAuC,KAAK,UAAU,SAASC,CAAO;AAE1E,WAAOD,IAAOD,CAAS,GAAGG,CAAI;AAAA,EAChC;AACF;AA7BaL,EACK,SAAS,CAACM,CAAoB;AAG9CC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCR,EAIX,WAAA,QAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/BR,EAOX,WAAA,WAAA,CAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,IAAO;AAAA,GAVlCR,EAWX,WAAA,iBAAA,CAAA;AAXWA,IAANO,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BT,CAAA;"}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class MellowBreadcrumb extends LitElement {
+    static styles: import("lit").CSSResult[];
+    firstUpdated(): void;
+    private _syncSeparators;
+    private _handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-breadcrumb': MellowBreadcrumb;
+    }
+}
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAAqB;IAElC,YAAY,IAAI,IAAI;IAI7B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,iBAAiB;IAIhB,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAA;KACtC;CACF"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,40 @@
+import { LitElement as n, html as c } from "lit";
+import { customElement as i } from "lit/decorators.js";
+import { breadcrumbStyles as h } from "./breadcrumb.styles.js";
+var b = Object.getOwnPropertyDescriptor, p = (r, e, m, s) => {
+  for (var t = s > 1 ? void 0 : s ? b(e, m) : e, l = r.length - 1, o; l >= 0; l--)
+    (o = r[l]) && (t = o(t) || t);
+  return t;
+};
+let a = class extends n {
+  firstUpdated() {
+    this._syncSeparators();
+  }
+  _syncSeparators() {
+    const r = Array.from(
+      this.querySelectorAll("mellow-breadcrumb-item")
+    );
+    for (let e = 0; e < r.length; e++)
+      r[e].showSeparator = e > 0;
+  }
+  _handleSlotChange() {
+    this._syncSeparators();
+  }
+  render() {
+    return c`
+      <nav aria-label="Breadcrumb">
+        <ol class="breadcrumb-list">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </ol>
+      </nav>
+    `;
+  }
+};
+a.styles = [h];
+a = p([
+  i("mellow-breadcrumb")
+], a);
+export {
+  a as MellowBreadcrumb
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { breadcrumbStyles } from './breadcrumb.styles.js'\nimport type { MellowBreadcrumbItem } from './breadcrumb-item.js'\n\n@customElement('mellow-breadcrumb')\nexport class MellowBreadcrumb extends LitElement {\n  static override styles = [breadcrumbStyles]\n\n  override firstUpdated(): void {\n    this._syncSeparators()\n  }\n\n  private _syncSeparators(): void {\n    const items = Array.from(\n      this.querySelectorAll<MellowBreadcrumbItem>('mellow-breadcrumb-item'),\n    )\n    for (let i = 0; i < items.length; i++) {\n      items[i].showSeparator = i > 0\n    }\n  }\n\n  private _handleSlotChange(): void {\n    this._syncSeparators()\n  }\n\n  override render() {\n    return html`\n      <nav aria-label=\"Breadcrumb\">\n        <ol class=\"breadcrumb-list\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </ol>\n      </nav>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-breadcrumb': MellowBreadcrumb\n  }\n}\n"],"names":["MellowBreadcrumb","LitElement","items","i","html","breadcrumbStyles","__decorateClass","customElement"],"mappings":";;;;;;;;AAMO,IAAMA,IAAN,cAA+BC,EAAW;AAAA,EAGtC,eAAqB;AAC5B,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,kBAAwB;AAC9B,UAAMC,IAAQ,MAAM;AAAA,MAClB,KAAK,iBAAuC,wBAAwB;AAAA,IAAA;AAEtE,aAASC,IAAI,GAAGA,IAAID,EAAM,QAAQC;AAChC,MAAAD,EAAMC,CAAC,EAAE,gBAAgBA,IAAI;AAAA,EAEjC;AAAA,EAEQ,oBAA0B;AAChC,SAAK,gBAAA;AAAA,EACP;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,8BAGmB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAIlD;AACF;AA7BaJ,EACK,SAAS,CAACK,CAAgB;AAD/BL,IAANM,EAAA;AAAA,EADNC,EAAc,mBAAmB;AAAA,GACrBP,CAAA;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.styles.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAmB5B,CAAA;AAED,eAAO,MAAM,oBAAoB,yBA+BhC,CAAA"}

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,57 @@
+import { css as e } from "lit";
+const r = e`
+  :host {
+    display: block;
+  }
+
+  nav {
+    display: flex;
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: var(--mellow-space-1, 4px);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: var(--mellow-font-family-body, system-ui, sans-serif);
+    font-size: var(--mellow-font-size-14, 14px);
+  }
+`, o = e`
+  :host {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .separator {
+    color: var(--mellow-text-tertiary, #d1d0d0);
+    margin: 0 var(--mellow-space-1, 4px);
+    user-select: none;
+  }
+
+  a,
+  .link {
+    color: var(--mellow-text-secondary, #767676);
+    text-decoration: none;
+    font: inherit;
+  }
+
+  a:hover,
+  .link:hover {
+    color: var(--mellow-text-primary, #232222);
+    text-decoration: underline;
+  }
+
+  :host([current]) a,
+  :host([current]) .link {
+    color: var(--mellow-text-primary, #232222);
+    font-weight: 500;
+    pointer-events: none;
+  }
+`;
+export {
+  o as breadcrumbItemStyles,
+  r as breadcrumbStyles
+};
+//# sourceMappingURL=breadcrumb.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.styles.js","sources":["../../../src/components/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const breadcrumbStyles = css`\n  :host {\n    display: block;\n  }\n\n  nav {\n    display: flex;\n  }\n\n  .breadcrumb-list {\n    display: flex;\n    align-items: center;\n    gap: var(--mellow-space-1, 4px);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-family: var(--mellow-font-family-body, system-ui, sans-serif);\n    font-size: var(--mellow-font-size-14, 14px);\n  }\n`\n\nexport const breadcrumbItemStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .separator {\n    color: var(--mellow-text-tertiary, #d1d0d0);\n    margin: 0 var(--mellow-space-1, 4px);\n    user-select: none;\n  }\n\n  a,\n  .link {\n    color: var(--mellow-text-secondary, #767676);\n    text-decoration: none;\n    font: inherit;\n  }\n\n  a:hover,\n  .link:hover {\n    color: var(--mellow-text-primary, #232222);\n    text-decoration: underline;\n  }\n\n  :host([current]) a,\n  :host([current]) .link {\n    color: var(--mellow-text-primary, #232222);\n    font-weight: 500;\n    pointer-events: none;\n  }\n`\n"],"names":["breadcrumbStyles","css","breadcrumbItemStyles"],"mappings":";AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBnBC,IAAuBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowBreadcrumb } from './breadcrumb.js';
+export { MellowBreadcrumbItem } from './breadcrumb-item.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA"}

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export type ButtonVariant = 'primary' | 'secondary' | 'brand' | 'link';
+export type ButtonSize = 'xs' | 'md' | 'xl';
+export declare class MellowButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    click(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-button': MellowButton;
+    }
+}
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAI3C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AACtE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAS3C,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAAiB;IAGvC,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,UAAU,CAAO;IAGvB,QAAQ,UAAQ;IAGhB,OAAO,UAAQ;IAEN,KAAK,IAAI,IAAI;IAMb,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

package/dist/components/button/button.js

@@ -0,0 +1,58 @@
+import { svg as d, LitElement as u, html as c } from "lit";
+import { property as i, customElement as h } from "lit/decorators.js";
+import { buttonStyles as f } from "./button.styles.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (p, o, l, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(o, l) : o, n = p.length - 1, a; n >= 0; n--)
+    (a = p[n]) && (t = (r ? a(o, l, t) : a(t)) || t);
+  return r && t && m(o, l, t), t;
+};
+const b = d`
+  <svg viewBox="0 0 20 20" fill="none" width="20" height="20">
+    <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2" opacity="0.25" />
+    <path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+  </svg>
+`;
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1;
+  }
+  click() {
+    !this.disabled && !this.loading && super.click();
+  }
+  render() {
+    return c`
+      <button
+        ?disabled=${this.disabled || this.loading}
+        part="button"
+        aria-busy=${this.loading ? "true" : "false"}
+      >
+        <span class="content" style=${this.loading ? "visibility: hidden" : ""}>
+          <slot name="icon-start"></slot>
+          <slot></slot>
+          <slot name="icon-end"></slot>
+        </span>
+        ${this.loading ? c`<span class="spinner-overlay"><span class="spinner">${b}</span></span>` : ""}
+      </button>
+    `;
+  }
+};
+e.styles = [f];
+s([
+  i({ reflect: !0 })
+], e.prototype, "variant", 2);
+s([
+  i({ reflect: !0 })
+], e.prototype, "size", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+e = s([
+  h("mellow-button")
+], e);
+export {
+  e as MellowButton
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { LitElement, html, svg } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { buttonStyles } from './button.styles.js'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'brand' | 'link'\nexport type ButtonSize = 'xs' | 'md' | 'xl'\n\nconst spinnerIcon = svg`\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" width=\"20\" height=\"20\">\n    <circle cx=\"10\" cy=\"10\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.25\" />\n    <path d=\"M10 2a8 8 0 0 1 8 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n  </svg>\n`\n\n@customElement('mellow-button')\nexport class MellowButton extends LitElement {\n  static override styles = [buttonStyles]\n\n  @property({ reflect: true })\n  variant: ButtonVariant = 'primary'\n\n  @property({ reflect: true })\n  size: ButtonSize = 'md'\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ type: Boolean, reflect: true })\n  loading = false\n\n  override click(): void {\n    if (!this.disabled && !this.loading) {\n      super.click()\n    }\n  }\n\n  override render() {\n    return html`\n      <button\n        ?disabled=${this.disabled || this.loading}\n        part=\"button\"\n        aria-busy=${this.loading ? 'true' : 'false'}\n      >\n        <span class=\"content\" style=${this.loading ? 'visibility: hidden' : ''}>\n          <slot name=\"icon-start\"></slot>\n          <slot></slot>\n          <slot name=\"icon-end\"></slot>\n        </span>\n        ${this.loading\n          ? html`<span class=\"spinner-overlay\"><span class=\"spinner\">${spinnerIcon}</span></span>`\n          : ''}\n      </button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-button': MellowButton\n  }\n}\n"],"names":["spinnerIcon","svg","MellowButton","LitElement","html","buttonStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAOA,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAAyB,WAGzB,KAAA,OAAmB,MAGnB,KAAA,WAAW,IAGX,KAAA,UAAU;AAAA,EAAA;AAAA,EAED,QAAc;AACrB,IAAI,CAAC,KAAK,YAAY,CAAC,KAAK,WAC1B,MAAM,MAAA;AAAA,EAEV;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,oBAES,KAAK,YAAY,KAAK,OAAO;AAAA;AAAA,oBAE7B,KAAK,UAAU,SAAS,OAAO;AAAA;AAAA,sCAEb,KAAK,UAAU,uBAAuB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpE,KAAK,UACHA,wDAA2DJ,CAAW,mBACtE,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAvCaE,EACK,SAAS,CAACG,CAAY;AAGtCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAHhBL,EAIX,WAAA,WAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBL,EAOX,WAAA,QAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BL,EAUX,WAAA,YAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BL,EAaX,WAAA,WAAA,CAAA;AAbWA,IAANI,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBN,CAAA;"}

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

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

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

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