@erplora/outfitkit 0.1.1

package/dist/ok-avatar-group.js

@@ -0,0 +1,158 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _OkAvatarGroup = class _OkAvatarGroup2 extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.avatars = [];
+    this.max = 0;
+    this.size = "md";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: inline-flex;
+      width: auto;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --size: 28px;
+      --font-size: 11px;
+      --overlap: 8px;
+
+      --avatar-bg: var(--ok-color-step-150, var(--ion-color-step-150, #e9edf1));
+      --avatar-fg: var(--ok-color-step-650, var(--ion-color-step-650, #4a5560));
+      --avatar-line: var(--ok-border-color, var(--ion-border-color, #d7dde3));
+      /* El ring usa el color de fondo del contenedor para "recortar" el solape. */
+      --ring-color: var(--ok-background-color, var(--ion-background-color, #ffffff));
+
+      --brand-bg: var(--ok-color-primary, var(--ion-color-primary, #3880ff));
+      --brand-fg: var(--ok-color-primary-contrast, var(--ion-color-primary-contrast, #fff));
+      --success-bg: var(--ok-color-success, var(--ion-color-success, #2dd36f));
+      --success-fg: var(--ok-color-success-contrast, var(--ion-color-success-contrast, #fff));
+      --warning-bg: var(--ok-color-warning, var(--ion-color-warning, #ffc409));
+      --warning-fg: var(--ok-color-warning-contrast, var(--ion-color-warning-contrast, #000));
+      --danger-bg: var(--ok-color-danger, var(--ion-color-danger, #eb445a));
+      --danger-fg: var(--ok-color-danger-contrast, var(--ion-color-danger-contrast, #fff));
+      --info-bg: var(--ok-color-tertiary, var(--ion-color-tertiary, #5260ff));
+      --info-fg: var(--ok-color-tertiary-contrast, var(--ion-color-tertiary-contrast, #fff));
+    }
+
+    .stack {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .avatar {
+      box-sizing: border-box;
+      display: inline-grid;
+      place-items: center;
+      width: var(--size);
+      height: var(--size);
+      border-radius: 50%;
+      background: var(--avatar-bg);
+      color: var(--avatar-fg);
+      font-size: var(--font-size);
+      font-weight: 600;
+      line-height: 1;
+      letter-spacing: -0.02em;
+      overflow: hidden;
+      flex-shrink: 0;
+      border: 1px solid var(--avatar-line);
+      user-select: none;
+    }
+
+    .avatar:not(:first-child) {
+      margin-left: calc(-1 * var(--overlap));
+      /* Ring del color de fondo para separar visualmente los solapes. */
+      box-shadow: 0 0 0 2px var(--ring-color);
+    }
+
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    /* Tonos (solo aplican cuando se pintan iniciales). */
+    .avatar.tone-brand { background: var(--brand-bg); color: var(--brand-fg); border-color: transparent; }
+    .avatar.tone-success { background: var(--success-bg); color: var(--success-fg); border-color: transparent; }
+    .avatar.tone-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: transparent; }
+    .avatar.tone-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; }
+    .avatar.tone-info { background: var(--info-bg); color: var(--info-fg); border-color: transparent; }
+
+    /* Globo de overflow "+N": reusa el look de avatar con fondo neutro. */
+    .more {
+      font-variant-numeric: tabular-nums;
+      cursor: default;
+    }
+  `;
+  }
+  static {
+    this.SIZES = {
+      xs: [20, 9, 6],
+      sm: [24, 10, 7],
+      md: [28, 11, 8],
+      lg: [36, 13, 10]
+    };
+  }
+  /** Devuelve las iniciales normalizadas (máx 3 chars, mayúsculas). */
+  initialsOf(item) {
+    return (item.initials ?? "").trim().slice(0, 3).toUpperCase();
+  }
+  renderAvatar(item) {
+    const label = item.label ?? item.initials ?? "";
+    const toneClass = item.tone && item.tone !== "neutral" ? `tone-${item.tone}` : "";
+    return html`
+      <span class="avatar ${toneClass}" role="img" aria-label=${label || "avatar"} title=${label}>
+        ${item.src ? html`<img src=${item.src} alt=${label} loading="lazy" />` : this.initialsOf(item)}
+      </span>
+    `;
+  }
+  render() {
+    const [dim, font, defOverlap] = _OkAvatarGroup2.SIZES[this.size] ?? _OkAvatarGroup2.SIZES.md;
+    const overlap = this.overlap ?? defOverlap;
+    const vars = `--size:${dim}px;--font-size:${font}px;--overlap:${overlap}px`;
+    const list = Array.isArray(this.avatars) ? this.avatars : [];
+    const limit = this.max > 0 ? this.max : list.length;
+    const visible = list.slice(0, limit);
+    const hidden = list.length - visible.length;
+    return html`
+      <div class="stack" style=${vars} role="group" aria-label="Grupo de avatares">
+        ${visible.map((a) => this.renderAvatar(a))}
+        ${hidden > 0 ? html`<span
+              class="avatar more"
+              role="img"
+              aria-label=${`${hidden} más`}
+              title=${`${hidden} más`}
+              >+${hidden}</span
+            >` : null}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], _OkAvatarGroup.prototype, "avatars");
+__decorateClass([
+  property({ type: Number })
+], _OkAvatarGroup.prototype, "max");
+__decorateClass([
+  property({ reflect: true })
+], _OkAvatarGroup.prototype, "size");
+__decorateClass([
+  property({ type: Number })
+], _OkAvatarGroup.prototype, "overlap");
+let OkAvatarGroup = _OkAvatarGroup;
+define("ok-avatar-group", OkAvatarGroup);
+export {
+  OkAvatarGroup
+};

package/dist/ok-avatar.js

@@ -0,0 +1,179 @@
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkAvatar extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.size = "md";
+    this.shape = "circle";
+    this.tone = "primary";
+    this.imgFailed = false;
+    this.onImgError = () => {
+      this.imgFailed = true;
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex.
+         --tone-color se reasigna por JS (CSSOM) cuando tone='auto'. */
+      --tone-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --background: var(--ok-avatar-bg, color-mix(in srgb, var(--tone-color) 18%, transparent));
+      --color: var(--ok-avatar-color, var(--tone-color));
+      --size: var(--ok-avatar-size, 32px);
+      --border-radius: 50%;
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Inline: el avatar es un elemento de línea (topbar, celdas de tabla, listados). */
+      display: inline-flex;
+      vertical-align: middle;
+      font-family: var(--font);
+      box-sizing: border-box;
+    }
+
+    /* Tamaños predefinidos (--ok-avatar-size libre los sobrescribe). */
+    :host([size='xs']) { --size: var(--ok-avatar-size, 20px); }
+    :host([size='sm']) { --size: var(--ok-avatar-size, 24px); }
+    :host([size='md']) { --size: var(--ok-avatar-size, 32px); }
+    :host([size='lg']) { --size: var(--ok-avatar-size, 44px); }
+
+    :host([shape='rounded']) {
+      --border-radius: var(--ok-radius, var(--ion-border-radius, 8px));
+    }
+
+    .wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--size);
+      height: var(--size);
+      border-radius: var(--border-radius);
+      background: var(--background);
+      color: var(--color);
+      font-size: calc(var(--size) * 0.4);
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      line-height: 1;
+      text-decoration: none;
+      user-select: none;
+      overflow: visible; /* el punto de estado sobresale; la imagen recorta por su propio radius */
+    }
+    a.wrap { cursor: pointer; }
+    a.wrap:focus-visible {
+      outline: 2px solid var(--tone-color);
+      outline-offset: 2px;
+    }
+
+    .initials {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      overflow: hidden;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      object-fit: cover;
+    }
+
+    /* Punto de estado (abajo-derecha), con anillo del color de la superficie. */
+    .status {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: calc(var(--size) * 0.28);
+      height: calc(var(--size) * 0.28);
+      border-radius: 50%;
+      box-shadow: 0 0 0 2px var(--ok-surface, var(--ion-background-color, #fff));
+      background: var(--ok-medium, var(--ion-color-medium, #5f5f5f));
+    }
+    :host([status='online']) .status { background: var(--ok-success, var(--ion-color-success, #2dd55b)); }
+    :host([status='busy'])   .status { background: var(--ok-danger, var(--ion-color-danger, #c5000f)); }
+    /* offline → medium (default ya aplicado arriba). */
+  `;
+  }
+  // Iniciales: 1ª letra de las dos primeras palabras del nombre; fallback 1ª letra del email.
+  initials() {
+    const words = (this.name ?? "").trim().split(/\s+/).filter(Boolean);
+    if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+    if (words.length === 1) return words[0][0].toUpperCase();
+    const mail = (this.email ?? "").trim();
+    return mail ? mail[0].toUpperCase() : "?";
+  }
+  // Hash estable (djb2) → tono HSL determinista por nombre/email (para tone='auto').
+  autoHue() {
+    const key = (this.name || this.email || "").trim().toLowerCase();
+    let h = 5381;
+    for (let i = 0; i < key.length; i++) h = (h << 5) + h + key.charCodeAt(i) | 0;
+    return Math.abs(h) % 360;
+  }
+  willUpdate(changed) {
+    if (changed.has("src")) this.imgFailed = false;
+    if (changed.has("tone") || changed.has("name") || changed.has("email")) {
+      if (this.tone === "auto") {
+        this.style.setProperty("--tone-color", `hsl(${this.autoHue()} 55% 42%)`);
+      } else {
+        this.style.removeProperty("--tone-color");
+      }
+    }
+  }
+  render() {
+    const label = this.name || this.email || "";
+    const showImg = !!this.src && !this.imgFailed;
+    const content = html`
+      <slot>
+        ${showImg ? html`<img src=${this.src} alt=${label} @error=${this.onImgError} />` : html`<span class="initials" aria-hidden="true">${this.initials()}</span>`}
+      </slot>
+      ${this.status ? html`<span class="status" part="status"></span>` : null}
+    `;
+    return this.href ? html`<a class="wrap" part="avatar" href=${this.href} title=${label} aria-label=${label}>${content}</a>` : html`<span class="wrap" part="avatar" role="img" title=${label} aria-label=${label}>${content}</span>`;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], OkAvatar.prototype, "name");
+__decorateClass([
+  property({ type: String })
+], OkAvatar.prototype, "email");
+__decorateClass([
+  property({ type: String })
+], OkAvatar.prototype, "src");
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkAvatar.prototype, "size");
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkAvatar.prototype, "shape");
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkAvatar.prototype, "tone");
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkAvatar.prototype, "status");
+__decorateClass([
+  property({ type: String })
+], OkAvatar.prototype, "href");
+__decorateClass([
+  state()
+], OkAvatar.prototype, "imgFailed");
+define("ok-avatar", OkAvatar);
+export {
+  OkAvatar
+};

package/dist/ok-bar-list.js

@@ -0,0 +1,189 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const SEMANTIC = /* @__PURE__ */ new Set(["brand", "leaf", "warn", "info", "danger"]);
+class OkBarList extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.valueFormat = "number";
+    this.locale = "";
+    this.currency = "EUR";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+
+      /* Tokens propios estilo Ionic: --ok-* → --ion-* → hex. */
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #6b7280));
+      --value-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --track-bg: var(--ok-color-step-100, var(--ion-color-step-100, #e5e7eb));
+
+      /* Variantes de color del relleno. */
+      --bar-brand: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --bar-leaf: var(--ok-success, var(--ion-color-success, #2dd36f));
+      --bar-warn: var(--ok-warning, var(--ion-color-warning, #ffc409));
+      --bar-info: var(--ok-tertiary, var(--ion-color-tertiary, #5260ff));
+      --bar-danger: var(--ok-danger, var(--ion-color-danger, #eb445a));
+
+      /* Geometría del track. */
+      --track-height: 8px;
+      --track-radius: 4px;
+      --label-width: 110px;
+      --value-width: 60px;
+    }
+
+    .bars {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: var(--label-width) 1fr var(--value-width);
+      gap: 10px;
+      align-items: center;
+      font-size: 0.75rem;
+    }
+
+    .label {
+      color: var(--label-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .track {
+      height: var(--track-height);
+      background: var(--track-bg);
+      border-radius: var(--track-radius);
+      overflow: hidden;
+      position: relative;
+    }
+
+    .fill {
+      height: 100%;
+      border-radius: var(--track-radius);
+      background: var(--bar-brand);
+      transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+      min-width: 2px;
+    }
+
+    .value {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      color: var(--value-color);
+      font-weight: 700;
+      white-space: nowrap;
+    }
+
+    /* En móvil estrecho compactamos la columna de etiqueta. */
+    @media (max-width: 420px) {
+      .row {
+        --label-width: 80px;
+        --value-width: 52px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fill {
+        transition: none;
+      }
+    }
+  `;
+  }
+  // Tope efectivo de la escala: prop `max` o el máximo de los valores (mínimo 1 para evitar /0).
+  get scaleMax() {
+    if (this.max != null && this.max > 0) return this.max;
+    const values = (this.items ?? []).map((i) => i.value);
+    return Math.max(1, ...values);
+  }
+  // Devuelve el background CSS del relleno según el color del ítem.
+  fillColor(color) {
+    if (!color) return "var(--bar-brand)";
+    if (SEMANTIC.has(color)) return `var(--bar-${color})`;
+    return color;
+  }
+  // Formatea el valor según value-format usando Intl nativo.
+  formatValue(value) {
+    const locale = this.locale || void 0;
+    switch (this.valueFormat) {
+      case "compact":
+        return new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+      case "currency":
+        return new Intl.NumberFormat(locale, {
+          style: "currency",
+          currency: this.currency,
+          maximumFractionDigits: 0
+        }).format(value);
+      case "percent":
+        return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(value);
+      case "number":
+      default:
+        return new Intl.NumberFormat(locale).format(value);
+    }
+  }
+  render() {
+    const items = this.items ?? [];
+    const max = this.scaleMax;
+    return html`
+      <div class="bars" role="list">
+        ${items.map((item) => {
+      const pct = Math.max(0, Math.min(100, item.value / max * 100));
+      const formatted = this.formatValue(item.value);
+      return html`
+            <div class="row" role="listitem">
+              <span class="label" title=${item.label}>${item.label}</span>
+              <div
+                class="track"
+                role="progressbar"
+                aria-label=${item.label}
+                aria-valuemin="0"
+                aria-valuemax=${max}
+                aria-valuenow=${item.value}
+                aria-valuetext=${formatted}
+              >
+                <div class="fill" style=${`width:${pct}%;background:${this.fillColor(item.color)}`}></div>
+              </div>
+              <span class="value">${formatted}</span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkBarList.prototype, "items");
+__decorateClass([
+  property({ type: Number })
+], OkBarList.prototype, "max");
+__decorateClass([
+  property({ attribute: "value-format" })
+], OkBarList.prototype, "valueFormat");
+__decorateClass([
+  property()
+], OkBarList.prototype, "locale");
+__decorateClass([
+  property()
+], OkBarList.prototype, "currency");
+define("ok-bar-list", OkBarList);
+export {
+  OkBarList
+};

package/dist/ok-bento-item.js

@@ -0,0 +1,168 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkBentoItem extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.cols = 2;
+    this.rows = 1;
+    this.tone = "default";
+    this.glass = false;
+    this.interactive = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      grid-column: span var(--cols, 2);
+      grid-row: span var(--rows, 1);
+      min-width: 0;
+      --color: var(--ok-text, var(--ion-text-color, #18181b));
+      --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.6));
+      --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
+      --border: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.1));
+      --radius: var(--ok-radius, 16px);
+      --accent: var(--ion-color-primary, #1496d6);
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    }
+    @media (max-width: 560px) {
+      :host { grid-column: 1 / -1; grid-row: auto; }
+    }
+    .cell {
+      box-sizing: border-box;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+      padding: var(--pad, clamp(1.1rem, 2vw, 1.6rem));
+      color: var(--color);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+      position: relative;
+      transition: transform var(--ok-transition, 160ms ease), box-shadow var(--ok-transition, 160ms ease),
+        border-color var(--ok-transition, 160ms ease);
+    }
+    /* Tinte de acento por tono */
+    :host([tone='primary']) { --accent: var(--ion-color-primary, #1496d6); }
+    :host([tone='success']) { --accent: var(--ion-color-success, #2dd36f); }
+    :host([tone='warning']) { --accent: var(--ion-color-warning, #ffc409); }
+    :host([tone='danger']) { --accent: var(--ion-color-danger, #eb445a); }
+    :host([tone]:not([tone='default'])) .cell {
+      background: color-mix(in oklab, var(--accent) 7%, var(--surface));
+      border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
+    }
+    /* Cristal esmerilado (acento, no toda la UI) */
+    :host([glass]) .cell {
+      background: color-mix(in oklab, var(--surface) 62%, transparent);
+      -webkit-backdrop-filter: blur(14px) saturate(1.4);
+      backdrop-filter: blur(14px) saturate(1.4);
+      border-color: color-mix(in oklab, var(--color) 12%, transparent);
+      box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 14%, transparent);
+    }
+    :host([interactive]) .cell { cursor: pointer; }
+    :host([interactive]) .cell:hover {
+      transform: translateY(-3px);
+      border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
+      box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--accent) 60%, transparent);
+    }
+    a.cell { text-decoration: none; color: inherit; }
+    .ico {
+      display: inline-grid;
+      place-items: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 12px;
+      color: var(--accent);
+      background: color-mix(in oklab, var(--accent) 14%, transparent);
+      font-size: 1.25rem;
+    }
+    /* Glifo via máscara CSS sobre la SVG del API de Iconify (funciona en Shadow DOM). */
+    .glyph {
+      width: 1.35rem;
+      height: 1.35rem;
+      background-color: currentColor;
+      -webkit-mask: var(--u) center / contain no-repeat;
+      mask: var(--u) center / contain no-repeat;
+    }
+    .eyebrow {
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+    .title {
+      margin: 0;
+      font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
+      font-weight: 620;
+      letter-spacing: -0.015em;
+      line-height: 1.2;
+    }
+    ::slotted(p) { margin: 0; color: var(--muted); line-height: 1.55; }
+  `;
+  }
+  updated() {
+    this.style.setProperty("--cols", String(this.cols));
+    this.style.setProperty("--rows", String(this.rows));
+  }
+  /** "lucide:box" → "https://api.iconify.design/lucide/box.svg". */
+  iconUrl(name) {
+    const i = name.indexOf(":");
+    const prefix = i === -1 ? "lucide" : name.slice(0, i);
+    const icon = i === -1 ? name : name.slice(i + 1);
+    return `https://api.iconify.design/${prefix}/${icon}.svg`;
+  }
+  body() {
+    return html`
+      ${this.icon ? html`<span class="ico"><i class="glyph" style="--u:url('${this.iconUrl(this.icon)}')"></i></span>` : null}
+      ${this.eyebrow ? html`<span class="eyebrow">${this.eyebrow}</span>` : null}
+      ${this.heading ? html`<h3 class="title">${this.heading}</h3>` : null}
+      <slot></slot>
+    `;
+  }
+  render() {
+    return this.href ? html`<a class="cell" href=${this.href}>${this.body()}</a>` : html`<div class="cell">${this.body()}</div>`;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkBentoItem.prototype, "cols");
+__decorateClass([
+  property({ type: Number })
+], OkBentoItem.prototype, "rows");
+__decorateClass([
+  property({ reflect: true })
+], OkBentoItem.prototype, "tone");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkBentoItem.prototype, "glass");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkBentoItem.prototype, "interactive");
+__decorateClass([
+  property()
+], OkBentoItem.prototype, "href");
+__decorateClass([
+  property()
+], OkBentoItem.prototype, "icon");
+__decorateClass([
+  property()
+], OkBentoItem.prototype, "eyebrow");
+__decorateClass([
+  property()
+], OkBentoItem.prototype, "heading");
+define("ok-bento-item", OkBentoItem);
+export {
+  OkBentoItem
+};