@vialiq/web-components 0.0.1

package/button/index.d.ts

@@ -0,0 +1,2 @@
+export { ViButton } from './vi-button.js';
+//# sourceMappingURL=index.d.ts.map

package/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/web-components/src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/button/vi-button.d.ts

@@ -0,0 +1,33 @@
+import { type TemplateResult } from 'lit';
+import { ViElement, type ViVariant } from '../base/vi-element.js';
+/**
+ * vi-button
+ * Self-styled button component using Flux UI token fallbacks.
+ *
+ * @element vi-button
+ * @attr variant - Button variant: primary, secondary, danger
+ * @attr disabled - Disabled state: prevents click events
+ */
+export declare class ViButton extends ViElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Button variant: primary, secondary, danger.
+     * PUBLIC — users set this as <vi-button variant="primary">
+     * @attr
+     */
+    accessor variant: ViVariant;
+    /**
+     * Disabled state: prevents click events/opacity.
+     * PUBLIC — users set this as <vi-button disabled>
+     * @attr
+     */
+    accessor disabled: boolean;
+    private onClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-button': ViButton;
+    }
+}
+//# sourceMappingURL=vi-button.d.ts.map

package/button/vi-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vi-button.d.ts","sourceRoot":"","sources":["../../../../../../../libs/web-components/src/button/vi-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlE;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,0BAAmC;IAEzD;;;;OAIG;IACwC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAa;IAEnF;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAS;IAEtE,OAAO,CAAC,OAAO;IAON,MAAM,IAAI,cAAc;CAOlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/button/vi-button.js

@@ -0,0 +1,46 @@
+import { unsafeCSS as H, css as J, html as K } from "lit";
+import { V as L, t as Q, n as E } from "../property-Bgga_R54.js";
+const R = '@charset "UTF-8";@layer reset,components,utilities;:host{display:inline-block;--vi-button-surface-primary-background-color: var(--vi-color-primary, #0066cc);--vi-button-surface-primary-text-color: var(--vi-color-grey-100, #f3f4f6);--vi-button-surface-secondary-background-color: var(--vi-color-secondary, #f0f4f8);--vi-button-surface-secondary-text-color: var(--vi-color-foreground, #111827);--vi-button-surface-danger-background-color: var(--vi-color-error, #ef4444);--vi-button-surface-danger-text-color: var(--vi-color-grey-100, #f3f4f6);--vi-button-shape-border-radius: var(--vi-border-radius-md, 4px);--vi-button-spacing-padding-inline: var(--vi-spacing-md, 24px);--vi-button-spacing-padding-block: var(--vi-spacing-sm, 16px);--vi-button-typography-font-size: var(--vi-font-size-base, 16px);--vi-button-typography-font-weight: var(--vi-font-weight-semibold, 600);--vi-button-effect-transition-duration: .16s}:host([variant=primary]) .button{background-color:var(--vi-button-surface-primary-background-color, var(--vi-color-primary, #0066cc));color:var(--vi-button-surface-primary-text-color, var(--vi-color-grey-100, #f3f4f6))}:host([variant=secondary]) .button{background-color:var(--vi-button-surface-secondary-background-color, var(--vi-color-secondary, #f0f4f8));color:var(--vi-button-surface-secondary-text-color, var(--vi-color-foreground, #111827));border-color:var(--vi-color-border, #e5e7eb)}:host([variant=danger]) .button{background-color:var(--vi-button-surface-danger-background-color, var(--vi-color-error, #ef4444));color:var(--vi-button-surface-danger-text-color, var(--vi-color-grey-100, #f3f4f6))}:host([disabled]) .button,.button:disabled{opacity:.6;cursor:not-allowed}.button:hover:not(:disabled){opacity:.92}';
+var X = Object.create, x = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, $ = (r, t) => (t = Symbol[r]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + r), f = (r) => {
+  throw TypeError(r);
+}, A = (r, t, o) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o, F = (r, t) => x(r, "name", { value: t, configurable: !0 }), Z = (r) => [, , , X(r?.[$("metadata")] ?? null)], T = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], _ = (r) => r !== void 0 && typeof r != "function" ? f("Function expected") : r, j = (r, t, o, s, a) => ({ kind: T[r], name: t, metadata: s, addInitializer: (i) => o._ ? f("Already initialized") : a.push(_(i || null)) }), rr = (r, t) => A(t, $("metadata"), r[3]), h = (r, t, o, s) => {
+  for (var a = 0, i = r[t >> 1], u = i && i.length; a < u; a++) t & 1 ? i[a].call(o) : s = i[a].call(o, s);
+  return s;
+}, C = (r, t, o, s, a, i) => {
+  var u, c, I, b, g, e = t & 7, y = !!(t & 8), l = !!(t & 16), k = e > 3 ? r.length + 1 : e ? y ? 1 : 2 : 0, V = T[e + 5], B = e > 3 && (r[k - 1] = []), q = r[k] || (r[k] = []), v = e && (!l && !y && (a = a.prototype), e < 5 && (e > 3 || !l) && Y(e < 4 ? a : { get [o]() {
+    return M(this, i);
+  }, set [o](n) {
+    return W(this, i, n);
+  } }, o));
+  e ? l && e < 4 && F(i, (e > 2 ? "set " : e > 1 ? "get " : "") + o) : F(a, o);
+  for (var m = s.length - 1; m >= 0; m--)
+    b = j(e, o, I = {}, r[3], q), e && (b.static = y, b.private = l, g = b.access = { has: l ? (n) => or(a, n) : (n) => o in n }, e ^ 3 && (g.get = l ? (n) => (e ^ 1 ? M : er)(n, a, e ^ 4 ? i : v.get) : (n) => n[o]), e > 2 && (g.set = l ? (n, S) => W(n, a, S, e ^ 4 ? i : v.set) : (n, S) => n[o] = S)), c = (0, s[m])(e ? e < 4 ? l ? i : v[V] : e > 4 ? void 0 : { get: v.get, set: v.set } : a, b), I._ = 1, e ^ 4 || c === void 0 ? _(c) && (e > 4 ? B.unshift(c) : e ? l ? i = c : v[V] = c : a = c) : typeof c != "object" || c === null ? f("Object expected") : (_(u = c.get) && (v.get = u), _(u = c.set) && (v.set = u), _(u = c.init) && B.unshift(u));
+  return e || rr(r, a), v && x(a, o, v), l ? e ^ 4 ? i : v : a;
+}, tr = (r, t, o) => A(r, t + "", o), z = (r, t, o) => t.has(r) || f("Cannot " + o), or = (r, t) => Object(t) !== t ? f('Cannot use the "in" operator on this value') : r.has(t), M = (r, t, o) => (z(r, t, "read from private field"), o ? o.call(r) : t.get(r)), D = (r, t, o) => t.has(r) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, o), W = (r, t, o, s) => (z(r, t, "write to private field"), s ? s.call(r, o) : t.set(r, o), o), er = (r, t, o) => (z(r, t, "access private method"), o), G, N, w, U, d, O, P;
+U = [Q("vi-button")];
+class p extends (w = L, N = [E({ type: String, reflect: !0 })], G = [E({ type: Boolean, reflect: !0 })], w) {
+  constructor() {
+    super(...arguments), D(this, O, h(d, 8, this, "primary")), h(d, 11, this), D(this, P, h(d, 12, this, !1)), h(d, 15, this);
+  }
+  onClick(t) {
+    this.disabled && (t.preventDefault(), t.stopImmediatePropagation());
+  }
+  render() {
+    return K`
+      <button class="button" type="button" ?disabled=${this.disabled} @click=${this.onClick}>
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+d = Z(w);
+O = /* @__PURE__ */ new WeakMap();
+P = /* @__PURE__ */ new WeakMap();
+C(d, 4, "variant", N, p, O);
+C(d, 4, "disabled", G, p, P);
+p = C(d, 0, "ViButton", U, p);
+tr(p, "styles", J`${H(R)}`);
+h(d, 1, p);
+export {
+  p as ViButton
+};

package/icons/registry.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Icon Registry
+ *
+ * A Map-based store for SvgIconDef objects sourced from @vi/icons.
+ * Icons must be explicitly registered before <vi-icon> can render them.
+ * Only the icons you register end up in your bundle — full tree-shaking.
+ *
+ * Usage:
+ *   import { registerIcons } from '@vi/web-components';
+ *   import { checkIcon } from '@vi/icons/check';
+ *
+ *   registerIcons([checkIcon]);
+ *   // <vi-icon name="check"></vi-icon>
+ */
+import type { SvgIconDef } from '@vi/icons';
+export type { SvgIconDef };
+/**
+ * Register one or more icons. Call this before using <vi-icon>.
+ */
+export declare function registerIcons(icons: SvgIconDef | SvgIconDef[]): void;
+/**
+ * Look up a registered icon by name.
+ */
+export declare function getIcon(name: string): SvgIconDef | undefined;
+//# sourceMappingURL=registry.d.ts.map

package/icons/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../../../../libs/web-components/src/icons/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,YAAY,EAAE,UAAU,EAAE,CAAC;AAI3B;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,CAKpE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAE5D"}

package/icons/registry.js

@@ -0,0 +1,13 @@
+const n = /* @__PURE__ */ new Map();
+function o(t) {
+  const e = Array.isArray(t) ? t : [t];
+  for (const r of e)
+    n.set(r.name, r);
+}
+function s(t) {
+  return n.get(t);
+}
+export {
+  s as getIcon,
+  o as registerIcons
+};

package/icons/vi-icon.d.ts

@@ -0,0 +1,43 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+/**
+ * vi-icon
+ *
+ * Renders a named SVG icon from the registry. Icons must be registered first
+ * by importing their individual modules e.g.:
+ *   import '@vi/web-components/icons/check';
+ *
+ * @element vi-icon
+ * @attr name  - The icon name to render (must be registered)
+ * @attr size  - Width/height in px (default: 24)
+ * @attr label - Accessible label; omit for decorative icons
+ */
+export declare class ViIcon extends ViElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The registered icon name to render.
+     * @attr
+     */
+    accessor name: string;
+    /**
+     * Size in pixels applied as a CSS custom property.
+     * @attr
+     */
+    accessor size: number;
+    /**
+     * Accessible label. When set the SVG gets role="img" + aria-label.
+     * When omitted the icon is treated as decorative (aria-hidden).
+     * @attr
+     */
+    accessor label: string;
+    private accessor _icon;
+    updated(changedProperties: PropertyValues): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-icon': ViIcon;
+    }
+}
+//# sourceMappingURL=vi-icon.d.ts.map

package/icons/vi-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vi-icon.d.ts","sourceRoot":"","sources":["../../../../../../../libs/web-components/src/icons/vi-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;;;;;;;GAWG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,0BAkBpB;IAEF;;;OAGG;IACwC,QAAQ,CAAC,IAAI,SAAM;IAE9D;;;OAGG;IACyB,QAAQ,CAAC,IAAI,SAAM;IAE/C;;;;OAIG;IACyB,QAAQ,CAAC,KAAK,SAAM;IAEvC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqC;IAE3D,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAUhD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMrD,MAAM,IAAI,cAAc;CAoBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/icons/vi-icon.js

@@ -0,0 +1,327 @@
+import { nothing as wt, html as L, css as Ct } from "lit";
+import { n as k, V as Mt, t as Tt } from "../property-Bgga_R54.js";
+import { getIcon as et } from "./registry.js";
+function St(i) {
+  return k({ ...i, state: !0, attribute: !1 });
+}
+const F = globalThis, it = (i) => i, O = F.trustedTypes, st = O ? O.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, pt = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, $t = "?" + m, It = `<${$t}>`, N = document, U = () => N.createComment(""), S = (i) => i === null || typeof i != "object" && typeof i != "function", Z = Array.isArray, zt = (i) => Z(i) || typeof i?.[Symbol.iterator] == "function", R = `[ 	
+\f\r]`, M = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, nt = /-->/g, rt = />/g, x = RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ot = /'/g, ht = /"/g, ut = /^(?:script|style|textarea|title)$/i, b = /* @__PURE__ */ Symbol.for("lit-noChange"), d = /* @__PURE__ */ Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), H = N.createTreeWalker(N, 129);
+function At(i, t) {
+  if (!Z(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return st !== void 0 ? st.createHTML(t) : t;
+}
+const Et = (i, t) => {
+  const e = i.length - 1, n = [];
+  let s, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", h = M;
+  for (let l = 0; l < e; l++) {
+    const a = i[l];
+    let c, _, o = -1, u = 0;
+    for (; u < a.length && (h.lastIndex = u, _ = h.exec(a), _ !== null); ) u = h.lastIndex, h === M ? _[1] === "!--" ? h = nt : _[1] !== void 0 ? h = rt : _[2] !== void 0 ? (ut.test(_[2]) && (s = RegExp("</" + _[2], "g")), h = x) : _[3] !== void 0 && (h = x) : h === x ? _[0] === ">" ? (h = s ?? M, o = -1) : _[1] === void 0 ? o = -2 : (o = h.lastIndex - _[2].length, c = _[1], h = _[3] === void 0 ? x : _[3] === '"' ? ht : ot) : h === ht || h === ot ? h = x : h === nt || h === rt ? h = M : (h = x, s = void 0);
+    const p = h === x && i[l + 1].startsWith("/>") ? " " : "";
+    r += h === M ? a + It : o >= 0 ? (n.push(c), a.slice(0, o) + pt + a.slice(o) + m + p) : a + m + (o === -2 ? l : p);
+  }
+  return [At(i, r + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
+};
+class I {
+  constructor({ strings: t, _$litType$: e }, n) {
+    let s;
+    this.parts = [];
+    let r = 0, h = 0;
+    const l = t.length - 1, a = this.parts, [c, _] = Et(t, e);
+    if (this.el = I.createElement(c, n), H.currentNode = this.el.content, e === 2 || e === 3) {
+      const o = this.el.content.firstChild;
+      o.replaceWith(...o.childNodes);
+    }
+    for (; (s = H.nextNode()) !== null && a.length < l; ) {
+      if (s.nodeType === 1) {
+        if (s.hasAttributes()) for (const o of s.getAttributeNames()) if (o.endsWith(pt)) {
+          const u = _[h++], p = s.getAttribute(o).split(m), g = /([.?@])?(.*)/.exec(u);
+          a.push({ type: 1, index: r, name: g[2], strings: p, ctor: g[1] === "." ? Ot : g[1] === "?" ? Ut : g[1] === "@" ? Pt : W }), s.removeAttribute(o);
+        } else o.startsWith(m) && (a.push({ type: 6, index: r }), s.removeAttribute(o));
+        if (ut.test(s.tagName)) {
+          const o = s.textContent.split(m), u = o.length - 1;
+          if (u > 0) {
+            s.textContent = O ? O.emptyScript : "";
+            for (let p = 0; p < u; p++) s.append(o[p], U()), H.nextNode(), a.push({ type: 2, index: ++r });
+            s.append(o[u], U());
+          }
+        }
+      } else if (s.nodeType === 8) if (s.data === $t) a.push({ type: 2, index: r });
+      else {
+        let o = -1;
+        for (; (o = s.data.indexOf(m, o + 1)) !== -1; ) a.push({ type: 7, index: r }), o += m.length - 1;
+      }
+      r++;
+    }
+  }
+  static createElement(t, e) {
+    const n = N.createElement("template");
+    return n.innerHTML = t, n;
+  }
+}
+function w(i, t, e = i, n) {
+  if (t === b) return t;
+  let s = n !== void 0 ? e._$Co?.[n] : e._$Cl;
+  const r = S(t) ? void 0 : t._$litDirective$;
+  return s?.constructor !== r && (s?._$AO?.(!1), r === void 0 ? s = void 0 : (s = new r(i), s._$AT(i, e, n)), n !== void 0 ? (e._$Co ??= [])[n] = s : e._$Cl = s), s !== void 0 && (t = w(i, s._$AS(i, t.values), s, n)), t;
+}
+class kt {
+  constructor(t, e) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t) {
+    const { el: { content: e }, parts: n } = this._$AD, s = (t?.creationScope ?? N).importNode(e, !0);
+    H.currentNode = s;
+    let r = H.nextNode(), h = 0, l = 0, a = n[0];
+    for (; a !== void 0; ) {
+      if (h === a.index) {
+        let c;
+        a.type === 2 ? c = new P(r, r.nextSibling, this, t) : a.type === 1 ? c = new a.ctor(r, a.name, a.strings, this, t) : a.type === 6 && (c = new Wt(r, this, t)), this._$AV.push(c), a = n[++l];
+      }
+      h !== a?.index && (r = H.nextNode(), h++);
+    }
+    return H.currentNode = N, s;
+  }
+  p(t) {
+    let e = 0;
+    for (const n of this._$AV) n !== void 0 && (n.strings !== void 0 ? (n._$AI(t, n, e), e += n.strings.length - 2) : n._$AI(t[e])), e++;
+  }
+}
+class P {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(t, e, n, s) {
+    this.type = 2, this._$AH = d, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = n, this.options = s, this._$Cv = s?.isConnected ?? !0;
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode;
+    const e = this._$AM;
+    return e !== void 0 && t?.nodeType === 11 && (t = e.parentNode), t;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t, e = this) {
+    t = w(this, t, e), S(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== b && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : zt(t) ? this.k(t) : this._(t);
+  }
+  O(t) {
+    return this._$AA.parentNode.insertBefore(t, this._$AB);
+  }
+  T(t) {
+    this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
+  }
+  _(t) {
+    this._$AH !== d && S(this._$AH) ? this._$AA.nextSibling.data = t : this.T(N.createTextNode(t)), this._$AH = t;
+  }
+  $(t) {
+    const { values: e, _$litType$: n } = t, s = typeof n == "number" ? this._$AC(t) : (n.el === void 0 && (n.el = I.createElement(At(n.h, n.h[0]), this.options)), n);
+    if (this._$AH?._$AD === s) this._$AH.p(e);
+    else {
+      const r = new kt(s, this), h = r.u(this.options);
+      r.p(e), this.T(h), this._$AH = r;
+    }
+  }
+  _$AC(t) {
+    let e = at.get(t.strings);
+    return e === void 0 && at.set(t.strings, e = new I(t)), e;
+  }
+  k(t) {
+    Z(this._$AH) || (this._$AH = [], this._$AR());
+    const e = this._$AH;
+    let n, s = 0;
+    for (const r of t) s === e.length ? e.push(n = new P(this.O(U()), this.O(U()), this, this.options)) : n = e[s], n._$AI(r), s++;
+    s < e.length && (this._$AR(n && n._$AB.nextSibling, s), e.length = s);
+  }
+  _$AR(t = this._$AA.nextSibling, e) {
+    for (this._$AP?.(!1, !0, e); t !== this._$AB; ) {
+      const n = it(t).nextSibling;
+      it(t).remove(), t = n;
+    }
+  }
+  setConnected(t) {
+    this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
+  }
+}
+class W {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t, e, n, s, r) {
+    this.type = 1, this._$AH = d, this._$AN = void 0, this.element = t, this.name = e, this._$AM = s, this.options = r, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(new String()), this.strings = n) : this._$AH = d;
+  }
+  _$AI(t, e = this, n, s) {
+    const r = this.strings;
+    let h = !1;
+    if (r === void 0) t = w(this, t, e, 0), h = !S(t) || t !== this._$AH && t !== b, h && (this._$AH = t);
+    else {
+      const l = t;
+      let a, c;
+      for (t = r[0], a = 0; a < r.length - 1; a++) c = w(this, l[n + a], e, a), c === b && (c = this._$AH[a]), h ||= !S(c) || c !== this._$AH[a], c === d ? t = d : t !== d && (t += (c ?? "") + r[a + 1]), this._$AH[a] = c;
+    }
+    h && !s && this.j(t);
+  }
+  j(t) {
+    t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  }
+}
+class Ot extends W {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t) {
+    this.element[this.name] = t === d ? void 0 : t;
+  }
+}
+class Ut extends W {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== d);
+  }
+}
+class Pt extends W {
+  constructor(t, e, n, s, r) {
+    super(t, e, n, s, r), this.type = 5;
+  }
+  _$AI(t, e = this) {
+    if ((t = w(this, t, e, 0) ?? d) === b) return;
+    const n = this._$AH, s = t === d && n !== d || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, r = t !== d && (n === d || s);
+    s && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
+  }
+  handleEvent(t) {
+    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
+  }
+}
+class Wt {
+  constructor(t, e, n) {
+    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = n;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t) {
+    w(this, t);
+  }
+}
+const Vt = F.litHtmlPolyfillSupport;
+Vt?.(I, P), (F.litHtmlVersions ??= []).push("3.3.2");
+const Dt = { CHILD: 2 }, Lt = (i) => (...t) => ({ _$litDirective$: i, values: t });
+class Rt {
+  constructor(t) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, e, n) {
+    this._$Ct = t, this._$AM = e, this._$Ci = n;
+  }
+  _$AS(t, e) {
+    return this.update(t, e);
+  }
+  update(t, e) {
+    return this.render(...e);
+  }
+}
+class B extends Rt {
+  constructor(t) {
+    if (super(t), this.it = d, t.type !== Dt.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(t) {
+    if (t === d || t == null) return this._t = void 0, this.it = t;
+    if (t === b) return t;
+    if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (t === this.it) return this._t;
+    this.it = t;
+    const e = [t];
+    return e.raw = e, this._t = { _$litType$: this.constructor.resultType, strings: e, values: [] };
+  }
+}
+B.directiveName = "unsafeHTML", B.resultType = 1;
+const lt = Lt(B);
+var Bt = Object.create, G = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, vt = (i, t) => (t = Symbol[i]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + i), C = (i) => {
+  throw TypeError(i);
+}, ft = (i, t, e) => t in i ? G(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, ct = (i, t) => G(i, "name", { value: t, configurable: !0 }), Ft = (i) => [, , , Bt(i?.[vt("metadata")] ?? null)], gt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], T = (i) => i !== void 0 && typeof i != "function" ? C("Function expected") : i, Zt = (i, t, e, n, s) => ({ kind: gt[i], name: t, metadata: n, addInitializer: (r) => e._ ? C("Already initialized") : s.push(T(r || null)) }), Gt = (i, t) => ft(t, vt("metadata"), i[3]), f = (i, t, e, n) => {
+  for (var s = 0, r = i[t >> 1], h = r && r.length; s < h; s++) t & 1 ? r[s].call(e) : n = r[s].call(e, n);
+  return n;
+}, z = (i, t, e, n, s, r) => {
+  var h, l, a, c, _, o = t & 7, u = !!(t & 8), p = !!(t & 16), g = o > 3 ? i.length + 1 : o ? u ? 1 : 2 : 0, Y = gt[o + 5], tt = o > 3 && (i[g - 1] = []), bt = i[g] || (i[g] = []), v = o && (!p && !u && (s = s.prototype), o < 5 && (o > 3 || !p) && jt(o < 4 ? s : { get [e]() {
+    return _t(this, r);
+  }, set [e](A) {
+    return dt(this, r, A);
+  } }, e));
+  o ? p && o < 4 && ct(r, (o > 2 ? "set " : o > 1 ? "get " : "") + e) : ct(s, e);
+  for (var V = n.length - 1; V >= 0; V--)
+    c = Zt(o, e, a = {}, i[3], bt), o && (c.static = u, c.private = p, _ = c.access = { has: p ? (A) => Jt(s, A) : (A) => e in A }, o ^ 3 && (_.get = p ? (A) => (o ^ 1 ? _t : Kt)(A, s, o ^ 4 ? r : v.get) : (A) => A[e]), o > 2 && (_.set = p ? (A, D) => dt(A, s, D, o ^ 4 ? r : v.set) : (A, D) => A[e] = D)), l = (0, n[V])(o ? o < 4 ? p ? r : v[Y] : o > 4 ? void 0 : { get: v.get, set: v.set } : s, c), a._ = 1, o ^ 4 || l === void 0 ? T(l) && (o > 4 ? tt.unshift(l) : o ? p ? r = l : v[Y] = l : s = l) : typeof l != "object" || l === null ? C("Object expected") : (T(h = l.get) && (v.get = h), T(h = l.set) && (v.set = h), T(h = l.init) && tt.unshift(h));
+  return o || Gt(i, s), v && G(s, e, v), p ? o ^ 4 ? r : v : s;
+}, qt = (i, t, e) => ft(i, t + "", e), q = (i, t, e) => t.has(i) || C("Cannot " + e), Jt = (i, t) => Object(t) !== t ? C('Cannot use the "in" operator on this value') : i.has(t), _t = (i, t, e) => (q(i, t, "read from private field"), e ? e.call(i) : t.get(i)), E = (i, t, e) => t.has(i) ? C("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), dt = (i, t, e, n) => (q(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), Kt = (i, t, e) => (q(i, t, "access private method"), e), mt, yt, xt, Ht, j, Nt, $, J, K, Q, X;
+Nt = [Tt("vi-icon")];
+class y extends (j = Mt, Ht = [k({ type: String, reflect: !0 })], xt = [k({ type: Number })], yt = [k({ type: String })], mt = [St()], j) {
+  constructor() {
+    super(...arguments), E(this, J, f($, 8, this, "")), f($, 11, this), E(this, K, f($, 12, this, 24)), f($, 15, this), E(this, Q, f($, 16, this, "")), f($, 19, this), E(this, X, f($, 20, this)), f($, 23, this);
+  }
+  updated(t) {
+    super.updated(t), t.has("name") && (this._icon = et(this.name)), t.has("size") && this.style.setProperty("--vi-icon-size", `${this.size}px`);
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._icon = et(this.name), this.style.setProperty("--vi-icon-size", `${this.size}px`);
+  }
+  render() {
+    return this._icon ? this.label ? L`
+        <span role="img" aria-label=${this.label}>
+          ${lt(this._icon.data)}
+        </span>
+      ` : L`
+      <span aria-hidden="true">
+        ${lt(this._icon.data)}
+      </span>
+    ` : L`${wt}`;
+  }
+}
+$ = Ft(j);
+J = /* @__PURE__ */ new WeakMap();
+K = /* @__PURE__ */ new WeakMap();
+Q = /* @__PURE__ */ new WeakMap();
+X = /* @__PURE__ */ new WeakMap();
+z($, 4, "name", Ht, y, J);
+z($, 4, "size", xt, y, K);
+z($, 4, "label", yt, y, Q);
+z($, 4, "_icon", mt, y, X);
+y = z($, 0, "ViIcon", Nt, y);
+qt(y, "styles", Ct`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--vi-icon-size, 24px);
+      height: var(--vi-icon-size, 24px);
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `);
+f($, 1, y);
+export {
+  y as ViIcon
+};

package/index.d.ts

@@ -0,0 +1,7 @@
+export { ViElement } from './base/vi-element.js';
+export type { ViVariant } from './base/vi-element.js';
+export { ViButton } from './button/vi-button.js';
+export { ViIcon } from './icons/vi-icon.js';
+export { registerIcons, getIcon } from './icons/registry.js';
+export type { SvgIconDef } from './icons/registry.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,11 @@
+import { V as e } from "./property-Bgga_R54.js";
+import { ViButton as m } from "./button/vi-button.js";
+import { ViIcon as f } from "./icons/vi-icon.js";
+import { getIcon as p, registerIcons as x } from "./icons/registry.js";
+export {
+  m as ViButton,
+  e as ViElement,
+  f as ViIcon,
+  p as getIcon,
+  x as registerIcons
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vialiq/web-components",
+  "version": "0.0.1",
+  "type": "module",
+  "sideEffects": true,
+  "description": "Lit web component library built on @vi/flux-ui design tokens",
+  "license": "MIT",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./button": {
+      "import": "./button/vi-button.js",
+      "types": "./button/vi-button.d.ts"
+    },
+    "./icons/vi-icon": {
+      "import": "./icons/vi-icon.js",
+      "types": "./icons/vi-icon.d.ts"
+    },
+    "./icons/registry": {
+      "import": "./icons/registry.js",
+      "types": "./icons/registry.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "@vialiq/icons": "^0.0.1"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "lit",
+    "design-system",
+    "microfrontend",
+    "flux-ui"
+  ],
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "index.js.map",
+    "button/",
+    "icons/",
+    "README.md"
+  ]
+}