@mellow.io/ds 0.1.0

package/dist/components/grid/grid.styles.js

@@ -0,0 +1,57 @@
+import { css as a } from "lit";
+const t = a`
+  :host {
+    display: grid;
+    box-sizing: border-box;
+  }
+
+  /* ---- Gap ---- */
+
+  :host([gap='none']) {
+    gap: 0;
+  }
+
+  :host([gap='xs']) {
+    gap: var(--mellow-space-1, 4px);
+  }
+
+  :host([gap='sm']) {
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  :host([gap='md']),
+  :host(:not([gap])) {
+    gap: var(--mellow-space-3, 12px);
+  }
+
+  :host([gap='lg']) {
+    gap: var(--mellow-space-5, 20px);
+  }
+
+  :host([gap='xl']) {
+    gap: var(--mellow-space-6, 24px);
+  }
+
+  /* ---- Align ---- */
+
+  :host([align='start']) {
+    align-items: start;
+  }
+
+  :host([align='center']) {
+    align-items: center;
+  }
+
+  :host([align='end']) {
+    align-items: end;
+  }
+
+  :host,
+  :host([align='stretch']) {
+    align-items: stretch;
+  }
+`;
+export {
+  t as gridStyles
+};
+//# sourceMappingURL=grid.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.styles.js","sources":["../../../src/components/grid/grid.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const gridStyles = css`\n  :host {\n    display: grid;\n    box-sizing: border-box;\n  }\n\n  /* ---- Gap ---- */\n\n  :host([gap='none']) {\n    gap: 0;\n  }\n\n  :host([gap='xs']) {\n    gap: var(--mellow-space-1, 4px);\n  }\n\n  :host([gap='sm']) {\n    gap: var(--mellow-space-2, 8px);\n  }\n\n  :host([gap='md']),\n  :host(:not([gap])) {\n    gap: var(--mellow-space-3, 12px);\n  }\n\n  :host([gap='lg']) {\n    gap: var(--mellow-space-5, 20px);\n  }\n\n  :host([gap='xl']) {\n    gap: var(--mellow-space-6, 24px);\n  }\n\n  /* ---- Align ---- */\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host,\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n`\n"],"names":["gridStyles","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;"}

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

@@ -0,0 +1,3 @@
+export { MellowGrid } from './grid.js';
+export type { GridGap, GridAlign } from './grid.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/icon/icon-registry.d.ts

@@ -0,0 +1,3 @@
+export declare function registerIcon(name: string, svg: string): void;
+export declare function getIcon(name: string): string | undefined;
+//# sourceMappingURL=icon-registry.d.ts.map

package/dist/components/icon/icon-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-registry.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAExD"}

package/dist/components/icon/icon-registry.js

@@ -0,0 +1,12 @@
+const e = /* @__PURE__ */ new Map();
+function r(t, n) {
+  e.set(t, n);
+}
+function o(t) {
+  return e.get(t);
+}
+export {
+  o as getIcon,
+  r as registerIcon
+};
+//# sourceMappingURL=icon-registry.js.map

package/dist/components/icon/icon-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.js","sources":["../../../src/components/icon/icon-registry.ts"],"sourcesContent":["const registry = new Map<string, string>()\n\nexport function registerIcon(name: string, svg: string): void {\n  registry.set(name, svg)\n}\n\nexport function getIcon(name: string): string | undefined {\n  return registry.get(name)\n}\n"],"names":["registry","registerIcon","name","svg","getIcon"],"mappings":"AAAA,MAAMA,wBAAe,IAAA;AAEd,SAASC,EAAaC,GAAcC,GAAmB;AAC5D,EAAAH,EAAS,IAAIE,GAAMC,CAAG;AACxB;AAEO,SAASC,EAAQF,GAAkC;AACxD,SAAOF,EAAS,IAAIE,CAAI;AAC1B;"}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, nothing } from 'lit';
+export type IconSize = 'sm' | 'md' | 'lg' | 'xl';
+export declare class MellowIcon extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    size: IconSize;
+    label: string;
+    updated(changedProperties: Map<string, unknown>): void;
+    connectedCallback(): void;
+    private _updateAccessibility;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-icon': MellowIcon;
+    }
+}
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAA;AAM/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAe;IAGrC,IAAI,SAAK;IAGT,IAAI,EAAE,QAAQ,CAAO;IAGrB,KAAK,SAAK;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,oBAAoB;IAYnB,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/icon/icon.js

@@ -0,0 +1,45 @@
+import { LitElement as p, nothing as m, html as u } from "lit";
+import { property as c, customElement as b } from "lit/decorators.js";
+import { unsafeHTML as h } from "lit/directives/unsafe-html.js";
+import { iconStyles as f } from "./icon.styles.js";
+import { getIcon as d } from "./icon-registry.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, i, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(i, o) : i, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (t = (s ? n(i, o, t) : n(t)) || t);
+  return s && t && v(i, o, t), t;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.size = "md", this.label = "";
+  }
+  updated(e) {
+    e.has("label") && this._updateAccessibility();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._updateAccessibility();
+  }
+  _updateAccessibility() {
+    this.label ? (this.setAttribute("role", "img"), this.setAttribute("aria-label", this.label), this.removeAttribute("aria-hidden")) : (this.removeAttribute("role"), this.removeAttribute("aria-label"), this.setAttribute("aria-hidden", "true"));
+  }
+  render() {
+    const e = d(this.name);
+    return e ? u`${h(e)}` : m;
+  }
+};
+r.styles = [f];
+l([
+  c({ reflect: !0 })
+], r.prototype, "name", 2);
+l([
+  c({ reflect: !0 })
+], r.prototype, "size", 2);
+l([
+  c()
+], r.prototype, "label", 2);
+r = l([
+  b("mellow-icon")
+], r);
+export {
+  r as MellowIcon
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../src/components/icon/icon.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { iconStyles } from './icon.styles.js'\nimport { getIcon } from './icon-registry.js'\n\nexport type IconSize = 'sm' | 'md' | 'lg' | 'xl'\n\n@customElement('mellow-icon')\nexport class MellowIcon extends LitElement {\n  static override styles = [iconStyles]\n\n  @property({ reflect: true })\n  name = ''\n\n  @property({ reflect: true })\n  size: IconSize = 'md'\n\n  @property()\n  label = ''\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('label')) {\n      this._updateAccessibility()\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this._updateAccessibility()\n  }\n\n  private _updateAccessibility(): void {\n    if (this.label) {\n      this.setAttribute('role', 'img')\n      this.setAttribute('aria-label', this.label)\n      this.removeAttribute('aria-hidden')\n    } else {\n      this.removeAttribute('role')\n      this.removeAttribute('aria-label')\n      this.setAttribute('aria-hidden', 'true')\n    }\n  }\n\n  override render() {\n    const svg = getIcon(this.name)\n\n    if (!svg) {\n      return nothing\n    }\n\n    return html`${unsafeHTML(svg)}`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-icon': MellowIcon\n  }\n}\n"],"names":["MellowIcon","LitElement","changedProperties","svg","getIcon","html","unsafeHTML","nothing","iconStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;AASO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,OAAiB,MAGjB,KAAA,QAAQ;AAAA,EAAA;AAAA,EAEC,QAAQC,GAA+C;AAC9D,IAAIA,EAAkB,IAAI,OAAO,KAC/B,KAAK,qBAAA;AAAA,EAET;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,uBAA6B;AACnC,IAAI,KAAK,SACP,KAAK,aAAa,QAAQ,KAAK,GAC/B,KAAK,aAAa,cAAc,KAAK,KAAK,GAC1C,KAAK,gBAAgB,aAAa,MAElC,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,YAAY,GACjC,KAAK,aAAa,eAAe,MAAM;AAAA,EAE3C;AAAA,EAES,SAAS;AAChB,UAAMC,IAAMC,EAAQ,KAAK,IAAI;AAE7B,WAAKD,IAIEE,IAAOC,EAAWH,CAAG,CAAC,KAHpBI;AAAA,EAIX;AACF;AA5CaP,EACK,SAAS,CAACQ,CAAU;AAGpCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAHhBV,EAIX,WAAA,QAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBV,EAOX,WAAA,QAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAA;AAAS,GATCV,EAUX,WAAA,SAAA,CAAA;AAVWA,IAANS,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfX,CAAA;"}

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

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

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

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

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,46 @@
+import { css as i } from "lit";
+const h = i`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  /* ---- Sizes ---- */
+
+  :host([size='sm']) {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([size='md']) {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='lg']) {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([size='xl']) {
+    width: 32px;
+    height: 32px;
+  }
+
+  /* ---- SVG ---- */
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+`;
+export {
+  h as iconStyles
+};
+//# sourceMappingURL=icon.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.styles.js","sources":["../../../src/components/icon/icon.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const iconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n  }\n\n  /* ---- Sizes ---- */\n\n  :host([size='sm']) {\n    width: 16px;\n    height: 16px;\n  }\n\n  :host([size='md']) {\n    width: 20px;\n    height: 20px;\n  }\n\n  :host([size='lg']) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([size='xl']) {\n    width: 32px;\n    height: 32px;\n  }\n\n  /* ---- SVG ---- */\n\n  svg {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n  }\n`\n"],"names":["iconStyles","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;"}

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

@@ -0,0 +1,4 @@
+export { MellowIcon } from './icon.js';
+export type { IconSize } from './icon.js';
+export { registerIcon, getIcon } from './icon-registry.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { MellowInput } from './input.js';
+export type { InputType, InputSize } from './input.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/input/input.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+export type InputSize = 'sm' | 'md' | 'xl';
+export declare class MellowInput extends LitElement {
+    static styles: import("lit").CSSResult[];
+    type: InputType;
+    size: InputSize;
+    value: string;
+    placeholder: string;
+    label: string;
+    error: string;
+    helper: string;
+    disabled: boolean;
+    required: boolean;
+    clearable: boolean;
+    private _focused;
+    private _input;
+    private _handleInput;
+    private _handleChange;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClear;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-input': MellowInput;
+    }
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAKpD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAA;AAC3F,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAQ1C,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAgB;IAGtC,IAAI,EAAE,SAAS,CAAS;IAGxB,IAAI,EAAE,SAAS,CAAO;IAGtB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IASV,KAAK,SAAK;IAGV,MAAM,SAAK;IAGX,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,SAAS,UAAQ;IAGjB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,MAAM,CAAmB;IAEjC,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAgBX,MAAM;CA2ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

package/dist/components/input/input.js

@@ -0,0 +1,133 @@
+import { svg as d, LitElement as c, nothing as p, html as o } from "lit";
+import { property as l, state as v, query as b, customElement as f } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { inputStyles as _ } from "./input.styles.js";
+var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, i, u, a) => {
+  for (var s = a > 1 ? void 0 : a ? $(i, u) : i, h = r.length - 1, n; h >= 0; h--)
+    (n = r[h]) && (s = (a ? n(i, u, s) : n(s)) || s);
+  return a && s && y(i, u, s), s;
+};
+const w = d`
+  <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+`;
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.type = "text", this.size = "sm", this.value = "", this.placeholder = "", this.label = "", this.error = "", this.helper = "", this.disabled = !1, this.required = !1, this.clearable = !1, this._focused = !1;
+  }
+  _handleInput() {
+    this.value = this._input.value, this.dispatchEvent(new CustomEvent("mellow-input", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleChange() {
+    this.value = this._input.value, this.dispatchEvent(new CustomEvent("mellow-change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleFocus() {
+    this._focused = !0;
+  }
+  _handleBlur() {
+    this._focused = !1;
+  }
+  _handleClear() {
+    this.value = "", this._input.value = "", this._input.focus(), this.dispatchEvent(new CustomEvent("mellow-input", {
+      detail: { value: "" },
+      bubbles: !0,
+      composed: !0
+    })), this.dispatchEvent(new CustomEvent("mellow-change", {
+      detail: { value: "" },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const r = this.error || this.helper ? "helper-text" : void 0, i = {
+      "input-container": !0,
+      focused: this._focused
+    };
+    return o`
+      <div class="wrapper">
+        ${this.label ? o`<label class="label" for="input">${this.label}</label>` : p}
+        <div class="input-helper">
+          <div class=${m(i)}>
+            <slot name="icon-start"></slot>
+            <input
+              id="input"
+              .type=${this.type}
+              .value=${this.value}
+              placeholder=${this.placeholder}
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              aria-invalid=${this.error ? "true" : "false"}
+              aria-describedby=${r ?? p}
+              @input=${this._handleInput}
+              @change=${this._handleChange}
+              @focus=${this._handleFocus}
+              @blur=${this._handleBlur}
+            />
+            ${this.clearable && this.value ? o`<button class="clear-btn" @click=${this._handleClear} aria-label="Clear" type="button">${w}</button>` : p}
+            <slot name="icon-end"></slot>
+          </div>
+          ${this.error ? o`<div class="helper" id="helper-text" role="alert">${this.error}</div>` : this.helper ? o`<div class="helper" id="helper-text">${this.helper}</div>` : p}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [_];
+t([
+  l()
+], e.prototype, "type", 2);
+t([
+  l({ reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  l()
+], e.prototype, "value", 2);
+t([
+  l()
+], e.prototype, "placeholder", 2);
+t([
+  l()
+], e.prototype, "label", 2);
+t([
+  l({
+    reflect: !0,
+    converter: {
+      fromAttribute: (r) => r ?? "",
+      toAttribute: (r) => r || null
+    }
+  })
+], e.prototype, "error", 2);
+t([
+  l()
+], e.prototype, "helper", 2);
+t([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+t([
+  l({ type: Boolean })
+], e.prototype, "clearable", 2);
+t([
+  v()
+], e.prototype, "_focused", 2);
+t([
+  b("input")
+], e.prototype, "_input", 2);
+e = t([
+  f("mellow-input")
+], e);
+export {
+  e as MellowInput
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { LitElement, html, svg, nothing } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { inputStyles } from './input.styles.js'\n\nexport type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\nexport type InputSize = 'sm' | 'md' | 'xl'\n\nconst clearIcon = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n  </svg>\n`\n\n@customElement('mellow-input')\nexport class MellowInput extends LitElement {\n  static override styles = [inputStyles]\n\n  @property()\n  type: InputType = 'text'\n\n  @property({ reflect: true })\n  size: InputSize = 'sm'\n\n  @property()\n  value = ''\n\n  @property()\n  placeholder = ''\n\n  @property()\n  label = ''\n\n  @property({\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => value ?? '',\n      toAttribute: (value: string) => value || null,\n    },\n  })\n  error = ''\n\n  @property()\n  helper = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ type: Boolean, reflect: true })\n  required = false\n\n  @property({ type: Boolean })\n  clearable = false\n\n  @state()\n  private _focused = false\n\n  @query('input')\n  private _input!: HTMLInputElement\n\n  private _handleInput(): void {\n    this.value = this._input.value\n    this.dispatchEvent(new CustomEvent('mellow-input', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleChange(): void {\n    this.value = this._input.value\n    this.dispatchEvent(new CustomEvent('mellow-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleFocus(): void {\n    this._focused = true\n  }\n\n  private _handleBlur(): void {\n    this._focused = false\n  }\n\n  private _handleClear(): void {\n    this.value = ''\n    this._input.value = ''\n    this._input.focus()\n    this.dispatchEvent(new CustomEvent('mellow-input', {\n      detail: { value: '' },\n      bubbles: true,\n      composed: true,\n    }))\n    this.dispatchEvent(new CustomEvent('mellow-change', {\n      detail: { value: '' },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  override render() {\n    const helperId = this.error || this.helper ? 'helper-text' : undefined\n    const containerClasses = {\n      'input-container': true,\n      'focused': this._focused,\n    }\n\n    return html`\n      <div class=\"wrapper\">\n        ${this.label\n          ? html`<label class=\"label\" for=\"input\">${this.label}</label>`\n          : nothing}\n        <div class=\"input-helper\">\n          <div class=${classMap(containerClasses)}>\n            <slot name=\"icon-start\"></slot>\n            <input\n              id=\"input\"\n              .type=${this.type}\n              .value=${this.value}\n              placeholder=${this.placeholder}\n              ?disabled=${this.disabled}\n              ?required=${this.required}\n              aria-invalid=${this.error ? 'true' : 'false'}\n              aria-describedby=${helperId ?? nothing}\n              @input=${this._handleInput}\n              @change=${this._handleChange}\n              @focus=${this._handleFocus}\n              @blur=${this._handleBlur}\n            />\n            ${this.clearable && this.value\n              ? html`<button class=\"clear-btn\" @click=${this._handleClear} aria-label=\"Clear\" type=\"button\">${clearIcon}</button>`\n              : nothing}\n            <slot name=\"icon-end\"></slot>\n          </div>\n          ${this.error\n            ? html`<div class=\"helper\" id=\"helper-text\" role=\"alert\">${this.error}</div>`\n            : this.helper\n              ? html`<div class=\"helper\" id=\"helper-text\">${this.helper}</div>`\n              : nothing}\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-input': MellowInput\n  }\n}\n"],"names":["clearIcon","svg","MellowInput","LitElement","helperId","containerClasses","html","nothing","classMap","inputStyles","__decorateClass","property","value","state","query","customElement"],"mappings":";;;;;;;;;AAQA,MAAMA,IAAYC;AAAA;AAAA;AAAA;AAAA;AAOX,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAkB,QAGlB,KAAA,OAAkB,MAGlB,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGd,KAAA,QAAQ,IASR,KAAA,QAAQ,IAGR,KAAA,SAAS,IAGT,KAAA,WAAW,IAGX,KAAA,WAAW,IAGX,KAAA,YAAY,IAGZ,KAAQ,WAAW;AAAA,EAAA;AAAA,EAKX,eAAqB;AAC3B,SAAK,QAAQ,KAAK,OAAO,OACzB,KAAK,cAAc,IAAI,YAAY,gBAAgB;AAAA,MACjD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,gBAAsB;AAC5B,SAAK,QAAQ,KAAK,OAAO,OACzB,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAqB;AAC3B,SAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,cAAoB;AAC1B,SAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,eAAqB;AAC3B,SAAK,QAAQ,IACb,KAAK,OAAO,QAAQ,IACpB,KAAK,OAAO,MAAA,GACZ,KAAK,cAAc,IAAI,YAAY,gBAAgB;AAAA,MACjD,QAAQ,EAAE,OAAO,GAAA;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC,GACF,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAO,GAAA;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAMC,IAAW,KAAK,SAAS,KAAK,SAAS,gBAAgB,QACvDC,IAAmB;AAAA,MACvB,mBAAmB;AAAA,MACnB,SAAW,KAAK;AAAA,IAAA;AAGlB,WAAOC;AAAA;AAAA,UAED,KAAK,QACHA,qCAAwC,KAAK,KAAK,aAClDC,CAAO;AAAA;AAAA,uBAEIC,EAASH,CAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAI3B,KAAK,IAAI;AAAA,uBACR,KAAK,KAAK;AAAA,4BACL,KAAK,WAAW;AAAA,0BAClB,KAAK,QAAQ;AAAA,0BACb,KAAK,QAAQ;AAAA,6BACV,KAAK,QAAQ,SAAS,OAAO;AAAA,iCACzBD,KAAYG,CAAO;AAAA,uBAC7B,KAAK,YAAY;AAAA,wBAChB,KAAK,aAAa;AAAA,uBACnB,KAAK,YAAY;AAAA,sBAClB,KAAK,WAAW;AAAA;AAAA,cAExB,KAAK,aAAa,KAAK,QACrBD,qCAAwC,KAAK,YAAY,qCAAqCN,CAAS,cACvGO,CAAO;AAAA;AAAA;AAAA,YAGX,KAAK,QACHD,sDAAyD,KAAK,KAAK,WACnE,KAAK,SACHA,yCAA4C,KAAK,MAAM,WACvDC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIrB;AACF;AAlIaL,EACK,SAAS,CAACO,CAAW;AAGrCC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCT,EAIX,WAAA,QAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBT,EAOX,WAAA,QAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAA;AAAS,GATCT,EAUX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAA;AAAS,GAZCT,EAaX,WAAA,eAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAA;AAAS,GAfCT,EAgBX,WAAA,SAAA,CAAA;AASAQ,EAAA;AAAA,EAPCC,EAAS;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,MACT,eAAe,CAACC,MAAyBA,KAAS;AAAA,MAClD,aAAa,CAACA,MAAkBA,KAAS;AAAA,IAAA;AAAA,EAC3C,CACD;AAAA,GAxBUV,EAyBX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAA;AAAS,GA3BCT,EA4BX,WAAA,UAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9B/BT,EA+BX,WAAA,YAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjC/BT,EAkCX,WAAA,YAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApChBT,EAqCX,WAAA,aAAA,CAAA;AAGQQ,EAAA;AAAA,EADPG,EAAA;AAAM,GAvCIX,EAwCH,WAAA,YAAA,CAAA;AAGAQ,EAAA;AAAA,EADPI,EAAM,OAAO;AAAA,GA1CHZ,EA2CH,WAAA,UAAA,CAAA;AA3CGA,IAANQ,EAAA;AAAA,EADNK,EAAc,cAAc;AAAA,GAChBb,CAAA;"}

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

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

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

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

package/dist/components/input/input.styles.js

@@ -0,0 +1,211 @@
+import { css as e } from "lit";
+const r = e`
+  :host {
+    display: block;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  /* Label */
+  .label {
+    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-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  :host([error]) .label {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  /* Input + Helper wrapper */
+  .input-helper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-1, 4px);
+  }
+
+  /* Input container */
+  .input-container {
+    display: flex;
+    align-items: center;
+    border-radius: var(--mellow-radius-2, 8px);
+    border: var(--mellow-stroke-border, 1px) solid var(--mellow-border-input, white);
+    background: var(--mellow-bg-surface-primary, white);
+    transition: border-color 150ms ease;
+  }
+
+  /* ---- Size: sm (32px) ---- */
+  .input-container {
+    height: 32px;
+    padding: 1px var(--mellow-space-2-5, 11px);
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  :host([size='sm']) .input-container {
+    height: 32px;
+    padding: 1px var(--mellow-space-2-5, 11px);
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  :host([size='sm']) input {
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+  }
+
+  :host([size='sm']) ::slotted([slot='icon-start']) {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* ---- Size: md (42px) ---- */
+  :host([size='md']) .input-container {
+    height: 42px;
+    padding: 1px var(--mellow-space-3, 13px);
+    gap: var(--mellow-space-2-5, 10px);
+  }
+
+  :host([size='md']) input {
+    font-size: var(--mellow-font-size-16, 16px);
+    line-height: var(--mellow-line-height-22, 22px);
+  }
+
+  :host([size='md']) ::slotted([slot='icon-start']) {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* ---- Size: xl (52px) ---- */
+  :host([size='xl']) .input-container {
+    height: 52px;
+    padding: 1px var(--mellow-space-3-5, 15px);
+    gap: var(--mellow-space-3, 12px);
+  }
+
+  :host([size='xl']) input {
+    font-size: var(--mellow-font-size-16, 16px);
+    line-height: var(--mellow-line-height-22, 22px);
+  }
+
+  :host([size='xl']) ::slotted([slot='icon-start']) {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* ---- State: hover ---- */
+  .input-container:hover {
+    border-color: var(--mellow-border-secondary, #ead8be);
+  }
+
+  /* ---- State: focused ---- */
+  .input-container.focused {
+    border-color: var(--mellow-border-brand, #ff6f23);
+  }
+
+  /* ---- State: error ---- */
+  :host([error]) .input-container {
+    border-color: var(--mellow-border-danger, #db4933);
+    background: var(--mellow-bg-surface-danger, rgba(246, 132, 115, 0.16));
+  }
+
+  /* ---- State: disabled ---- */
+  :host([disabled]) .input-container {
+    border-color: var(--mellow-border-tertiary, #f5eddf);
+    background: var(--mellow-bg-surface-tertiary, #f5eddf);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .input-container:hover {
+    border-color: var(--mellow-border-tertiary, #f5eddf);
+  }
+
+  /* Native input */
+  input {
+    flex: 1 0 0;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    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-primary, #232222);
+    padding: 0;
+  }
+
+  input::placeholder {
+    color: var(--mellow-text-tertiary, #d1d0d0);
+  }
+
+  :host([error]) input {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  :host([error]) input::placeholder {
+    color: var(--mellow-text-danger-300, #fbb1a6);
+  }
+
+  :host([disabled]) input {
+    color: var(--mellow-text-secondary, #8a8686);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) input::placeholder {
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  /* Helper / Error text */
+  .helper {
+    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-12, 12px);
+    line-height: var(--mellow-line-height-14, 14px);
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  :host([error]) .helper {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  /* Icon slots */
+  ::slotted([slot='icon-start']) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  ::slotted([slot='icon-end']) {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  /* Clear button */
+  .clear-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  .clear-btn:hover {
+    color: var(--mellow-text-primary, #232222);
+  }
+`;
+export {
+  r as inputStyles
+};
+//# sourceMappingURL=input.styles.js.map