@shibui-ui/ui 1.5.5

package/dist/index204.js

@@ -0,0 +1,179 @@
+import { html, nothing } from "lit";
+import { map as o } from "./index301.js";
+function renderContentItem(item, marker) {
+  return html`
+    <li class="lst-item">
+      ${marker === "check" ? html`
+            <span class="lst-check-icon" style="${item.checked === false ? "color:var(--color-washi-300)" : ""}">
+              <lib-icon
+                name="${item.checked === false ? "circle" : "check-circle"}"
+                weight="${item.checked === false ? "regular" : "fill"}"
+                size="sm"
+              ></lib-icon>
+            </span>` : nothing}
+
+      <span class="lst-item-text">${item.label}</span>
+
+      ${item.children && item.children.length ? html`
+            <ul class="lst">
+              ${o(
+    item.children,
+    (child) => renderContentItem(child, marker)
+  )}
+            </ul>` : nothing}
+    </li>
+  `;
+}
+function renderUiItem(item, interactive, onRowClick, onToggle) {
+  if (item.type === "separator") {
+    return html`<li class="lst-sep" role="separator"></li>`;
+  }
+  if (item.type === "header") {
+    const h = item;
+    return html`<li class="lst-section-header">${h.label}</li>`;
+  }
+  const row = item;
+  const rowCls = [
+    "lst-row",
+    row.selected ? "is-selected" : "",
+    row.disabled ? "is-disabled" : "",
+    row.danger ? "is-danger" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <li
+      class="${rowCls}"
+      role="${interactive ? "button" : "listitem"}"
+      tabindex="${interactive && !row.disabled ? "0" : "-1"}"
+      aria-selected="${row.selected ?? false}"
+      aria-disabled="${row.disabled ?? false}"
+      @click="${() => {
+    if (!row.disabled) onRowClick(row);
+  }}"
+      @keydown="${(e) => {
+    if ((e.key === "Enter" || e.key === " ") && !row.disabled) {
+      e.preventDefault();
+      onRowClick(row);
+    }
+  }}"
+    >
+      <!-- Icon o Avatar -->
+      ${row.avatar ? html`<div class="lst-row-avatar">${row.avatar}</div>` : row.icon ? html`
+              <div class="lst-row-icon ${row.iconVariant ? `icon-${row.iconVariant}` : ""}">
+                <lib-icon name="${row.icon}" size="sm"></lib-icon>
+              </div>` : nothing}
+
+      <!-- Body -->
+      <div class="lst-row-body">
+        <span class="lst-row-label">${row.label}</span>
+        ${row.desc ? html`<span class="lst-row-desc">${row.desc}</span>` : nothing}
+      </div>
+
+      <!-- Meta -->
+      ${row.meta ? html`<span class="lst-row-meta">${row.meta}</span>` : nothing}
+
+      <!-- Badge -->
+      ${row.badge ? html`
+            <span class="lst-badge lst-badge-${row.badge.variant ?? "default"}">
+              ${row.badge.label}
+            </span>` : nothing}
+
+      <!-- Toggle -->
+      ${row.toggle != null ? html`
+            <input
+              type="checkbox"
+              class="lst-row-toggle"
+              .checked="${row.toggle}"
+              @click="${(e) => {
+    e.stopPropagation();
+    const target = e.currentTarget;
+    onToggle(row, target.checked);
+  }}"
+              aria-label="${row.label}"
+            />` : nothing}
+
+      <!-- Chevron -->
+      ${row.chevron ? html`
+            <span class="lst-row-action">
+              <lib-icon name="caret-right" size="sm"></lib-icon>
+            </span>` : nothing}
+    </li>
+  `;
+}
+function renderDlItem(item) {
+  return html`
+    <dt class="lst-dt">${item.term}</dt>
+    <dd class="lst-dd ${item.mono ? "lst-dd-mono" : ""}">${item.description}</dd>
+  `;
+}
+function textListTemplate(props) {
+  const {
+    family,
+    contentItems,
+    marker,
+    counter,
+    size,
+    uiItems,
+    divided,
+    bordered,
+    inset,
+    interactive,
+    dark,
+    dlItems,
+    dlLayout,
+    dlDivided,
+    onRowClick,
+    onToggle
+  } = props;
+  if (family === "ul" || family === "ol") {
+    const trackCls = [
+      "lst",
+      size !== "md" ? `lst-${size}` : "",
+      marker === "kaki" ? "lst-kaki" : "",
+      marker === "dash" ? "lst-dash" : "",
+      marker === "check" ? "lst-checked" : "",
+      family === "ol" && counter === "roman" ? "lst-ordered-roman" : "",
+      family === "ol" && counter === "alpha" ? "lst-ordered-alpha" : ""
+    ].filter(Boolean).join(" ");
+    const items = html`
+      ${o(contentItems, (item) => renderContentItem(item, marker))}
+    `;
+    return family === "ol" ? html`<ol class="${trackCls}">${items}</ol>` : html`<ul class="${trackCls}">${items}</ul>`;
+  }
+  if (family === "ui") {
+    const trackCls = [
+      "lst-ui",
+      divided ? "lst-divided" : "",
+      bordered ? "lst-bordered" : "",
+      inset ? "lst-inset" : "",
+      interactive ? "lst-interactive" : "",
+      dark ? "lst-dark" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+      <ul
+        class="${trackCls}"
+        role="${interactive ? "listbox" : "list"}"
+      >
+        ${o(
+      uiItems,
+      (item) => renderUiItem(item, interactive, onRowClick, onToggle)
+    )}
+      </ul>
+    `;
+  }
+  const dlCls = [
+    "lst-dl",
+    dlLayout === "wide" ? "lst-dl-wide" : "",
+    dlLayout === "stack" ? "lst-dl-stack" : "",
+    dlDivided ? "lst-dl-divided" : "",
+    dark ? "lst-dark" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <dl class="${dlCls}">
+      ${o(dlItems, (item) => renderDlItem(item))}
+    </dl>
+  `;
+}
+export {
+  textListTemplate
+};
+//# sourceMappingURL=index204.js.map

package/dist/index204.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index204.js","sources":["../src/components/atoms/text-list/lib-text-list.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  TextListTemplateProps,\n  ContentItem,\n  UiItem,\n  UiRow,\n  UiSectionHeader,\n  DlItem,\n} from './lib-text-list.types';\n\n/* ================================================================\n   HELPERS — Content List\n   ================================================================ */\n\nfunction renderContentItem(\n  item: ContentItem,\n  marker: TextListTemplateProps['marker'],\n): TemplateResult {\n  return html`\n    <li class=\"lst-item\">\n      ${marker === 'check'\n        ? html`\n            <span class=\"lst-check-icon\" style=\"${item.checked === false ? 'color:var(--color-washi-300)' : ''}\">\n              <lib-icon\n                name=\"${item.checked === false ? 'circle' : 'check-circle'}\"\n                weight=\"${item.checked === false ? 'regular' : 'fill'}\"\n                size=\"sm\"\n              ></lib-icon>\n            </span>`\n        : nothing}\n\n      <span class=\"lst-item-text\">${item.label}</span>\n\n      ${item.children && item.children.length\n        ? html`\n            <ul class=\"lst\">\n              ${map(item.children, (child: ContentItem) =>\n                renderContentItem(child, marker)\n              )}\n            </ul>`\n        : nothing}\n    </li>\n  `;\n}\n\n/* ================================================================\n   HELPERS — UI List\n   ================================================================ */\n\nfunction renderUiItem(\n  item: UiItem,\n  interactive: boolean,\n  onRowClick: (r: UiRow) => void,\n  onToggle: (r: UiRow, v: boolean) => void,\n): TemplateResult {\n  /* Separator */\n  if (item.type === 'separator') {\n    return html`<li class=\"lst-sep\" role=\"separator\"></li>`;\n  }\n\n  /* Section header */\n  if (item.type === 'header') {\n    const h = item as UiSectionHeader;\n    return html`<li class=\"lst-section-header\">${h.label}</li>`;\n  }\n\n  /* Row */\n  const row = item as UiRow;\n  const rowCls = [\n    'lst-row',\n    row.selected ? 'is-selected' : '',\n    row.disabled ? 'is-disabled' : '',\n    row.danger   ? 'is-danger'   : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <li\n      class=\"${rowCls}\"\n      role=\"${interactive ? 'button' : 'listitem'}\"\n      tabindex=\"${interactive && !row.disabled ? '0' : '-1'}\"\n      aria-selected=\"${row.selected ?? false}\"\n      aria-disabled=\"${row.disabled ?? false}\"\n      @click=\"${(): void => { if (!row.disabled) onRowClick(row); }}\"\n      @keydown=\"${(e: KeyboardEvent): void => {\n        if ((e.key === 'Enter' || e.key === ' ') && !row.disabled) {\n          e.preventDefault();\n          onRowClick(row);\n        }\n      }}\"\n    >\n      <!-- Icon o Avatar -->\n      ${row.avatar\n        ? html`<div class=\"lst-row-avatar\">${row.avatar}</div>`\n        : row.icon\n          ? html`\n              <div class=\"lst-row-icon ${row.iconVariant ? `icon-${row.iconVariant}` : ''}\">\n                <lib-icon name=\"${row.icon}\" size=\"sm\"></lib-icon>\n              </div>`\n          : nothing}\n\n      <!-- Body -->\n      <div class=\"lst-row-body\">\n        <span class=\"lst-row-label\">${row.label}</span>\n        ${row.desc ? html`<span class=\"lst-row-desc\">${row.desc}</span>` : nothing}\n      </div>\n\n      <!-- Meta -->\n      ${row.meta ? html`<span class=\"lst-row-meta\">${row.meta}</span>` : nothing}\n\n      <!-- Badge -->\n      ${row.badge\n        ? html`\n            <span class=\"lst-badge lst-badge-${row.badge.variant ?? 'default'}\">\n              ${row.badge.label}\n            </span>`\n        : nothing}\n\n      <!-- Toggle -->\n      ${row.toggle != null\n        ? html`\n            <input\n              type=\"checkbox\"\n              class=\"lst-row-toggle\"\n              .checked=\"${row.toggle}\"\n              @click=\"${(e: Event): void => {\n                e.stopPropagation();\n                const target = e.currentTarget as HTMLInputElement;\n                onToggle(row, target.checked);\n              }}\"\n              aria-label=\"${row.label}\"\n            />`\n        : nothing}\n\n      <!-- Chevron -->\n      ${row.chevron\n        ? html`\n            <span class=\"lst-row-action\">\n              <lib-icon name=\"caret-right\" size=\"sm\"></lib-icon>\n            </span>`\n        : nothing}\n    </li>\n  `;\n}\n\n/* ================================================================\n   HELPERS — Description List\n   ================================================================ */\n\nfunction renderDlItem(item: DlItem): TemplateResult {\n  return html`\n    <dt class=\"lst-dt\">${item.term}</dt>\n    <dd class=\"lst-dd ${item.mono ? 'lst-dd-mono' : ''}\">${item.description}</dd>\n  `;\n}\n\n/* ================================================================\n   TEMPLATE PRINCIPAL\n   ================================================================ */\n\nexport function textListTemplate(props: TextListTemplateProps): TemplateResult {\n  const {\n    family, contentItems, marker, counter, size,\n    uiItems, divided, bordered, inset, interactive, dark,\n    dlItems, dlLayout, dlDivided,\n    onRowClick, onToggle,\n  } = props;\n\n  /* ── CONTENT LIST ── */\n  if (family === 'ul' || family === 'ol') {\n    const trackCls = [\n      'lst',\n      size !== 'md'   ? `lst-${size}`            : '',\n      marker === 'kaki'    ? 'lst-kaki'    : '',\n      marker === 'dash'    ? 'lst-dash'    : '',\n      marker === 'check'   ? 'lst-checked' : '',\n      family === 'ol' && counter === 'roman' ? 'lst-ordered-roman' : '',\n      family === 'ol' && counter === 'alpha' ? 'lst-ordered-alpha' : '',\n    ].filter(Boolean).join(' ');\n\n    const items = html`\n      ${map(contentItems, (item: ContentItem) => renderContentItem(item, marker))}\n    `;\n\n    return family === 'ol'\n      ? html`<ol class=\"${trackCls}\">${items}</ol>`\n      : html`<ul class=\"${trackCls}\">${items}</ul>`;\n  }\n\n  /* ── UI LIST ── */\n  if (family === 'ui') {\n    const trackCls = [\n      'lst-ui',\n      divided     ? 'lst-divided'     : '',\n      bordered    ? 'lst-bordered'    : '',\n      inset       ? 'lst-inset'       : '',\n      interactive ? 'lst-interactive' : '',\n      dark        ? 'lst-dark'        : '',\n    ].filter(Boolean).join(' ');\n\n    return html`\n      <ul\n        class=\"${trackCls}\"\n        role=\"${interactive ? 'listbox' : 'list'}\"\n      >\n        ${map(uiItems, (item: UiItem) =>\n          renderUiItem(item, interactive, onRowClick, onToggle)\n        )}\n      </ul>\n    `;\n  }\n\n  /* ── DESCRIPTION LIST ── */\n  const dlCls = [\n    'lst-dl',\n    dlLayout === 'wide'  ? 'lst-dl-wide'    : '',\n    dlLayout === 'stack' ? 'lst-dl-stack'   : '',\n    dlDivided            ? 'lst-dl-divided' : '',\n    dark                 ? 'lst-dark'       : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <dl class=\"${dlCls}\">\n      ${map(dlItems, (item: DlItem) => renderDlItem(item))}\n    </dl>\n  `;\n}"],"names":["map"],"mappings":"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"}

package/dist/index205.js

@@ -0,0 +1,27 @@
+import { html } from "lit";
+const ICON_SIZE = {
+  sm: "xs",
+  md: "sm",
+  lg: "sm",
+  xl: "md"
+};
+function closeButtonTemplate(props) {
+  return html`
+    <button
+      type="button"
+      class="close-btn"
+      aria-label="${props.ariaLabel}"
+      ?disabled="${props.disabled}"
+      @click="${props.onClick}"
+    >
+      <lib-icon
+        name="${props.icon}"
+        size="${ICON_SIZE[props.size]}"
+      ></lib-icon>
+    </button>
+  `;
+}
+export {
+  closeButtonTemplate
+};
+//# sourceMappingURL=index205.js.map

package/dist/index205.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index205.js","sources":["../src/components/atoms/close-button/lib-close-button.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibCloseVariant =\n  | 'ghost'\n  | 'subtle'\n  | 'outlined'\n  | 'filled'\n  | 'filled-round'\n  | 'danger'\n  | 'on-dark';\n\nexport type LibCloseSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type LibCloseIcon = 'x' | 'x-circle' | 'x-square';\n\n/** Maps component size → lib-icon size prop */\nconst ICON_SIZE: Record<LibCloseSize, string> = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n};\n\nexport interface CloseButtonTemplateProps {\n  variant: LibCloseVariant;\n  size: LibCloseSize;\n  icon: LibCloseIcon;\n  disabled: boolean;\n  ariaLabel: string;\n  onClick: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-close-button.\n *\n * Renderiza un <button> con lib-icon interno.\n * La variante y el tamaño se aplican via :host() selectors en CSS.\n */\nexport function closeButtonTemplate(props: CloseButtonTemplateProps): TemplateResult {\n  return html`\n    <button\n      type=\"button\"\n      class=\"close-btn\"\n      aria-label=\"${props.ariaLabel}\"\n      ?disabled=\"${props.disabled}\"\n      @click=\"${props.onClick}\"\n    >\n      <lib-icon\n        name=\"${props.icon}\"\n        size=\"${ICON_SIZE[props.size]}\"\n      ></lib-icon>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAeA,MAAM,YAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiBO,SAAS,oBAAoB,OAAiD;AACnF,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIW,MAAM,SAAS;AAAA,mBAChB,MAAM,QAAQ;AAAA,gBACjB,MAAM,OAAO;AAAA;AAAA;AAAA,gBAGb,MAAM,IAAI;AAAA,gBACV,UAAU,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAIrC;"}

package/dist/index206.js

@@ -0,0 +1,5 @@
+const closeButtonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.close-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;color:var(--text-muted);line-height:1;outline:none;transition:color var(--duration-fast) var(--ease-default),background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce),opacity var(--duration-base)}.close-btn:disabled{opacity:.35;pointer-events:none;cursor:not-allowed}.close-btn:focus-visible{box-shadow:0 0 0 3px var(--color-ink-20)}:host([size="sm"]) .close-btn{width:24px;height:24px}:host([size="md"]) .close-btn{width:32px;height:32px}:host([size="lg"]) .close-btn{width:40px;height:40px}:host([size="xl"]) .close-btn{width:48px;height:48px}:host([variant="ghost"]) .close-btn{color:var(--text-muted);border-radius:var(--radius-sm)}:host([variant="ghost"]) .close-btn:hover{color:var(--text-primary);background:var(--color-washi-200)}:host([variant="ghost"]) .close-btn:active{transform:scale(.88)}:host([variant="subtle"]) .close-btn{color:var(--text-secondary);border-radius:var(--radius-full)}:host([variant="subtle"]) .close-btn:hover{color:var(--text-primary);background:var(--color-washi-200);transform:rotate(90deg)}:host([variant="subtle"]) .close-btn:active{transform:rotate(90deg) scale(.88);background:var(--color-washi-300)}:host([variant="outlined"]) .close-btn{color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm)}:host([variant="outlined"]) .close-btn:hover{color:var(--text-primary);background:var(--bg-surface);border-color:var(--border-strong)}:host([variant="outlined"]) .close-btn:active{transform:scale(.9)}:host([variant="filled"]) .close-btn{color:var(--bg-elevated);background:var(--color-washi-800);border-radius:var(--radius-sm)}:host([variant="filled"]) .close-btn:hover{background:var(--color-washi-900);transform:scale(1.05)}:host([variant="filled"]) .close-btn:active{transform:scale(.9)}:host([variant="filled-round"]) .close-btn{color:var(--bg-elevated);background:var(--color-washi-800);border-radius:var(--radius-full)}:host([variant="filled-round"]) .close-btn:hover{background:var(--color-washi-900);transform:rotate(90deg) scale(1.08)}:host([variant="filled-round"]) .close-btn:active{transform:rotate(90deg) scale(.9)}:host([variant="danger"]) .close-btn{color:var(--color-error);border-radius:var(--radius-sm)}:host([variant="danger"]) .close-btn:hover{color:var(--color-error);background:#651f241a}:host([variant="danger"]) .close-btn:active{transform:scale(.88)}:host([variant="danger"]) .close-btn:focus-visible{box-shadow:0 0 0 3px #651f2426}:host([variant="on-dark"]) .close-btn{color:#ffffff73;border-radius:var(--radius-full)}:host([variant="on-dark"]) .close-btn:hover{color:#ffffffe6;background:#ffffff1a;transform:rotate(90deg)}:host([variant="on-dark"]) .close-btn:active{transform:rotate(90deg) scale(.88)}:host([variant="on-dark"]) .close-btn:focus-visible{box-shadow:0 0 0 3px #fff3}@media(prefers-reduced-motion:reduce){.close-btn{transition:none}}}';
+export {
+  closeButtonCss as default
+};
+//# sourceMappingURL=index206.js.map

package/dist/index206.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index206.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index207.js

@@ -0,0 +1,14 @@
+import { html } from "lit";
+function glassCardTemplate(_props) {
+  return html`
+    <div class="glass-card">
+      <div class="glass-card__slot">
+        <slot></slot>
+      </div>
+    </div>
+  `;
+}
+export {
+  glassCardTemplate
+};
+//# sourceMappingURL=index207.js.map

package/dist/index207.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index207.js","sources":["../src/components/atoms/glass-card/lib-glass-card.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibGlassVariant   = 'paper' | 'water' | 'kaki';\nexport type LibGlassIntensity = 'low' | 'md' | 'high';\n\nexport interface GlassCardTemplateProps {\n  variant:   LibGlassVariant;\n  intensity: LibGlassIntensity;\n}\n\n/**\n * Template del glass card.\n *\n * Estructura de capas (de abajo a arriba):\n *   1. .glass-card       — backdrop-filter + background tintado\n *   2. ::before (CSS)    — reflexión de luz (--lib-glass-shine)\n *   3. .glass-card__slot — slot del contenido, z-index: 1\n */\nexport function glassCardTemplate(_props: GlassCardTemplateProps): TemplateResult {\n  return html`\n    <div class=\"glass-card\">\n      <div class=\"glass-card__slot\">\n        <slot></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAkBO,SAAS,kBAAkB,QAAgD;AAChF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOT;"}

package/dist/index208.js

@@ -0,0 +1,5 @@
+const glassCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.glass-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);transition:box-shadow var(--duration-slow) var(--ease-default),transform var(--duration-slow) var(--ease-default)}.glass-card:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-2px)}.glass-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}.glass-card__slot{position:relative;z-index:1}:host([variant="water"]) .glass-card{background:var(--lib-glass-bg-water)}:host([variant="kaki"]) .glass-card{background:var(--lib-glass-bg-kaki)}:host([intensity="low"]) .glass-card{background:oklch(98% .01 60deg / var(--lib-glass-opacity-low));-webkit-backdrop-filter:blur(var(--lib-glass-blur-low)) saturate(var(--lib-glass-saturate-amount));backdrop-filter:blur(var(--lib-glass-blur-low)) saturate(var(--lib-glass-saturate-amount))}:host([intensity="high"]) .glass-card{background:oklch(98% .01 60deg / var(--lib-glass-opacity-high));-webkit-backdrop-filter:blur(var(--lib-glass-blur-high)) saturate(var(--lib-glass-saturate-amount));backdrop-filter:blur(var(--lib-glass-blur-high)) saturate(var(--lib-glass-saturate-amount))}:host([variant="water"][intensity="low"]) .glass-card{background:oklch(55% .06 210deg / var(--lib-glass-opacity-low))}:host([variant="water"][intensity="high"]) .glass-card{background:oklch(55% .06 210deg / var(--lib-glass-opacity-high))}:host([variant="kaki"][intensity="low"]) .glass-card{background:oklch(45% .05 45deg / var(--lib-glass-opacity-low))}:host([variant="kaki"][intensity="high"]) .glass-card{background:oklch(45% .05 45deg / var(--lib-glass-opacity-high))}}';
+export {
+  glassCss as default
+};
+//# sourceMappingURL=index208.js.map

package/dist/index208.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index208.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index209.js

@@ -0,0 +1,94 @@
+import { nothing, html } from "lit";
+const SEGMENT_TONE_CLASS = {
+  default: "seg-default",
+  kaki: "seg-kaki",
+  celadon: "seg-celadon",
+  error: "seg-error",
+  muted: "seg-muted"
+};
+const SEGMENT_TONE_VAR = {
+  default: "var(--color-washi-900)",
+  kaki: "var(--color-kaki-500)",
+  celadon: "var(--color-celadon-500)",
+  error: "var(--color-error)",
+  muted: "var(--color-washi-300)"
+};
+function segmentColor(seg) {
+  if (seg.color) return seg.color;
+  const tone = seg.tone ?? "default";
+  return SEGMENT_TONE_VAR[tone];
+}
+function segmentClass(seg) {
+  if (seg.color) return "";
+  return SEGMENT_TONE_CLASS[seg.tone ?? "default"];
+}
+function multiBarTpl(props) {
+  const hasLegend = props.segments.some((s) => s.label);
+  return html`
+    <div class="pb-multi">
+      ${props.segments.map((seg) => html`
+        <div
+          class="pb-segment ${segmentClass(seg)}"
+          style="
+            width: ${seg.percent}%;
+            ${seg.color ? `background: ${seg.color};` : ""}
+          "
+        ></div>
+      `)}
+    </div>
+
+    ${hasLegend ? html`
+      <div class="pb-legend">
+        ${props.segments.filter((s) => s.label).map((seg) => html`
+          <div class="pb-legend-item">
+            <div
+              class="pb-legend-dot"
+              style="background: ${segmentColor(seg)};"
+            ></div>
+            <span class="pb-legend-text">${seg.label}</span>
+          </div>
+        `)}
+      </div>` : nothing}
+  `;
+}
+function singleBarTpl(props) {
+  const showInnerValue = props.size === "xl" && props.showValue && !props.indeterminate;
+  return html`
+    <div
+      class="pb"
+      role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="${props.max}"
+      aria-valuenow="${props.indeterminate ? nothing : props.rawValue}"
+      aria-label="${props.ariaLabel || nothing}"
+    >
+      <div class="pb-fill" style="width: ${props.indeterminate ? 100 : props.percent}%">
+        ${showInnerValue ? html`<span class="pb-inner-value">${Math.round(props.percent)}%</span>` : nothing}
+      </div>
+    </div>
+  `;
+}
+function progressTemplate(props) {
+  const isMulti = props.segments.length > 0;
+  const hasMeta = !!(props.label || props.valueLabel);
+  const showPercent = !isMulti && props.showValue && !props.indeterminate && props.size !== "xl";
+  const displayValue = props.valueLabel ? props.valueLabel : showPercent ? `${Math.round(props.percent)}%` : nothing;
+  const barTpl = isMulti ? multiBarTpl(props) : singleBarTpl(props);
+  if (hasMeta) {
+    return html`
+      <div class="pb-wrap">
+        <div class="pb-header">
+          <span class="pb-label">${props.label}</span>
+          ${displayValue !== nothing ? html`<span class="pb-value">${displayValue}</span>` : nothing}
+        </div>
+        ${barTpl}
+        ${props.sub ? html`<span class="pb-sub">${props.sub}</span>` : nothing}
+      </div>
+    `;
+  }
+  return html`${barTpl}`;
+}
+export {
+  progressTemplate
+};
+//# sourceMappingURL=index209.js.map

package/dist/index209.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index209.js","sources":["../src/components/atoms/progress/lib-progress.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { ProgressTemplateProps, ProgressSegment, ProgressSegmentTone } from './lib-progress.types';\n\n/* ── Tone → CSS class for segments ── */\nconst SEGMENT_TONE_CLASS: Record<ProgressSegmentTone, string> = {\n  default: 'seg-default',\n  kaki:    'seg-kaki',\n  celadon: 'seg-celadon',\n  error:   'seg-error',\n  muted:   'seg-muted',\n};\n\n/* ── Tone → CSS variable for legend dot ── */\nconst SEGMENT_TONE_VAR: Record<ProgressSegmentTone, string> = {\n  default: 'var(--color-washi-900)',\n  kaki:    'var(--color-kaki-500)',\n  celadon: 'var(--color-celadon-500)',\n  error:   'var(--color-error)',\n  muted:   'var(--color-washi-300)',\n};\n\nfunction segmentColor(seg: ProgressSegment): string {\n  if (seg.color) return seg.color;\n  const tone = seg.tone ?? 'default';\n  return SEGMENT_TONE_VAR[tone];\n}\n\nfunction segmentClass(seg: ProgressSegment): string {\n  if (seg.color) return '';\n  return SEGMENT_TONE_CLASS[seg.tone ?? 'default'];\n}\n\n/* ── Multi-segment bar ── */\nfunction multiBarTpl(props: ProgressTemplateProps): TemplateResult {\n  const hasLegend = props.segments.some(s => s.label);\n\n  return html`\n    <div class=\"pb-multi\">\n      ${props.segments.map(seg => html`\n        <div\n          class=\"pb-segment ${segmentClass(seg)}\"\n          style=\"\n            width: ${seg.percent}%;\n            ${seg.color ? `background: ${seg.color};` : ''}\n          \"\n        ></div>\n      `)}\n    </div>\n\n    ${hasLegend ? html`\n      <div class=\"pb-legend\">\n        ${props.segments.filter(s => s.label).map(seg => html`\n          <div class=\"pb-legend-item\">\n            <div\n              class=\"pb-legend-dot\"\n              style=\"background: ${segmentColor(seg)};\"\n            ></div>\n            <span class=\"pb-legend-text\">${seg.label}</span>\n          </div>\n        `)}\n      </div>` : nothing}\n  `;\n}\n\n/* ── Single bar ── */\nfunction singleBarTpl(props: ProgressTemplateProps): TemplateResult {\n  const showInnerValue = props.size === 'xl' && props.showValue && !props.indeterminate;\n\n  return html`\n    <div\n      class=\"pb\"\n      role=\"progressbar\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"${props.max}\"\n      aria-valuenow=\"${props.indeterminate ? nothing : props.rawValue}\"\n      aria-label=\"${props.ariaLabel || nothing}\"\n    >\n      <div class=\"pb-fill\" style=\"width: ${props.indeterminate ? 100 : props.percent}%\">\n        ${showInnerValue\n          ? html`<span class=\"pb-inner-value\">${Math.round(props.percent)}%</span>`\n          : nothing}\n      </div>\n    </div>\n  `;\n}\n\n/**\n * Template para lib-progress.\n * Renderiza la barra con o sin meta (label/value/sub).\n * Si segments.length > 0 → modo multi-segmento.\n */\nexport function progressTemplate(props: ProgressTemplateProps): TemplateResult {\n  const isMulti     = props.segments.length > 0;\n  const hasMeta     = !!(props.label || props.valueLabel);\n  const showPercent = !isMulti && props.showValue && !props.indeterminate && props.size !== 'xl';\n\n  const displayValue = props.valueLabel\n    ? props.valueLabel\n    : showPercent\n      ? `${Math.round(props.percent)}%`\n      : nothing;\n\n  const barTpl = isMulti ? multiBarTpl(props) : singleBarTpl(props);\n\n  /* With meta wrapper */\n  if (hasMeta) {\n    return html`\n      <div class=\"pb-wrap\">\n        <div class=\"pb-header\">\n          <span class=\"pb-label\">${props.label}</span>\n          ${displayValue !== nothing\n            ? html`<span class=\"pb-value\">${displayValue}</span>`\n            : nothing}\n        </div>\n        ${barTpl}\n        ${props.sub ? html`<span class=\"pb-sub\">${props.sub}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  /* Plain bar */\n  return html`${barTpl}`;\n}"],"names":[],"mappings":";AAIA,MAAM,qBAA0D;AAAA,EAC9D,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AACX;AAGA,MAAM,mBAAwD;AAAA,EAC5D,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AACX;AAEA,SAAS,aAAa,KAA8B;AAClD,MAAI,IAAI,MAAO,QAAO,IAAI;AAC1B,QAAM,OAAO,IAAI,QAAQ;AACzB,SAAO,iBAAiB,IAAI;AAC9B;AAEA,SAAS,aAAa,KAA8B;AAClD,MAAI,IAAI,MAAO,QAAO;AACtB,SAAO,mBAAmB,IAAI,QAAQ,SAAS;AACjD;AAGA,SAAS,YAAY,OAA8C;AACjE,QAAM,YAAY,MAAM,SAAS,KAAK,CAAA,MAAK,EAAE,KAAK;AAElD,SAAO;AAAA;AAAA,QAED,MAAM,SAAS,IAAI,CAAA,QAAO;AAAA;AAAA,8BAEJ,aAAa,GAAG,CAAC;AAAA;AAAA,qBAE1B,IAAI,OAAO;AAAA,cAClB,IAAI,QAAQ,eAAe,IAAI,KAAK,MAAM,EAAE;AAAA;AAAA;AAAA,OAGnD,CAAC;AAAA;AAAA;AAAA,MAGF,YAAY;AAAA;AAAA,UAER,MAAM,SAAS,OAAO,CAAA,MAAK,EAAE,KAAK,EAAE,IAAI,CAAA,QAAO;AAAA;AAAA;AAAA;AAAA,mCAItB,aAAa,GAAG,CAAC;AAAA;AAAA,2CAET,IAAI,KAAK;AAAA;AAAA,SAE3C,CAAC;AAAA,gBACM,OAAO;AAAA;AAEvB;AAGA,SAAS,aAAa,OAA8C;AAClE,QAAM,iBAAiB,MAAM,SAAS,QAAQ,MAAM,aAAa,CAAC,MAAM;AAExE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKc,MAAM,GAAG;AAAA,uBACT,MAAM,gBAAgB,UAAU,MAAM,QAAQ;AAAA,oBACjD,MAAM,aAAa,OAAO;AAAA;AAAA,2CAEH,MAAM,gBAAgB,MAAM,MAAM,OAAO;AAAA,UAC1E,iBACE,oCAAoC,KAAK,MAAM,MAAM,OAAO,CAAC,aAC7D,OAAO;AAAA;AAAA;AAAA;AAInB;AAOO,SAAS,iBAAiB,OAA8C;AAC7E,QAAM,UAAc,MAAM,SAAS,SAAS;AAC5C,QAAM,UAAc,CAAC,EAAE,MAAM,SAAS,MAAM;AAC5C,QAAM,cAAc,CAAC,WAAW,MAAM,aAAa,CAAC,MAAM,iBAAiB,MAAM,SAAS;AAE1F,QAAM,eAAe,MAAM,aACvB,MAAM,aACN,cACE,GAAG,KAAK,MAAM,MAAM,OAAO,CAAC,MAC5B;AAEN,QAAM,SAAS,UAAU,YAAY,KAAK,IAAI,aAAa,KAAK;AAGhE,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA,mCAGwB,MAAM,KAAK;AAAA,YAClC,iBAAiB,UACf,8BAA8B,YAAY,YAC1C,OAAO;AAAA;AAAA,UAEX,MAAM;AAAA,UACN,MAAM,MAAM,4BAA4B,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA;AAAA,EAG5E;AAGA,SAAO,OAAO,MAAM;AACtB;"}

package/dist/index21.js

@@ -0,0 +1,50 @@
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import sharedTokens from "./index196.js";
+import labelStyles from "./index230.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibLabel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.htmlFor = "";
+    this.required = false;
+  }
+  render() {
+    return html`
+      <label for="${this.htmlFor}">
+        <slot></slot>
+        ${this.required ? html`<span class="required-indicator" aria-hidden="true">*</span>` : ""}
+      </label>
+    `;
+  }
+};
+LibLabel.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(labelStyles)}
+    `
+];
+__decorateClass([
+  property({ type: String })
+], LibLabel.prototype, "htmlFor", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LibLabel.prototype, "required", 2);
+LibLabel = __decorateClass([
+  customElement("lib-label")
+], LibLabel);
+export {
+  LibLabel
+};
+//# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index21.js","sources":["../src/components/atoms/label/lib-label.component.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport labelStyles from './lib-label.css?inline';\n\n@customElement('lib-label')\nexport class LibLabel extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(labelStyles)}\n    `,\n  ];\n\n  /** ID del input al que va asociado (para accesibilidad) */\n  @property({ type: String }) htmlFor: string = '';\n\n  /** Muestra un indicador visual de campo obligatorio */\n  @property({ type: Boolean }) required: boolean = false;\n\n  protected override render(): TemplateResult {\n    return html`\n      <label for=\"${this.htmlFor}\">\n        <slot></slot>\n        ${this.required ? html`<span class=\"required-indicator\" aria-hidden=\"true\">*</span>` : ''}\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWuB,SAAA,UAAkB;AAGjB,SAAA,WAAoB;AAAA,EAAA;AAAA,EAE9B,SAAyB;AAC1C,WAAO;AAAA,oBACS,KAAK,OAAO;AAAA;AAAA,UAEtB,KAAK,WAAW,qEAAqE,EAAE;AAAA;AAAA;AAAA,EAG/F;AACF;AAxBa,SACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,WAAW,CAAC;AAAA;AAE5B;AAG4B,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,SAWiB,WAAA,WAAA,CAAA;AAGC,gBAAA;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAdhB,SAckB,WAAA,YAAA,CAAA;AAdlB,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/index210.js

@@ -0,0 +1,5 @@
+const progressCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.pb-wrap{display:flex;flex-direction:column;gap:var(--lib-space-xs);width:100%}.pb-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-sm)}.pb-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-snug)}.pb-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);flex-shrink:0}.pb-sub{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}:host([tone="error"]) .pb-label{color:var(--color-error)}:host([tone="error"]) .pb-value{color:var(--color-error)}:host([tone="error"]) .pb-sub{color:var(--color-error)}:host([tone="celadon"]) .pb-value{color:var(--color-celadon-600)}.pb{width:100%;background:var(--color-washi-200);border-radius:var(--radius-full);overflow:hidden;position:relative}:host([size="xs"]) .pb{height:2px}:host([size="sm"]) .pb{height:4px}:host([size="md"]) .pb,.pb{height:8px}:host([size="lg"]) .pb{height:12px}:host([size="xl"]) .pb{height:20px}:host([tone="kaki"]) .pb{background:var(--color-kaki-100)}:host([tone="celadon"]) .pb{background:var(--color-celadon-100)}:host([tone="error"]) .pb{background:var(--color-error-light, #F5DDD9)}:host([square]) .pb,:host([square]) .pb-fill{border-radius:var(--radius-sm)}.pb-fill{height:100%;border-radius:var(--radius-full);background:var(--color-washi-900);transition:width .6s var(--ease-default);position:relative;overflow:hidden}:host([square]) .pb-fill{border-radius:var(--radius-sm)}:host([tone="kaki"]) .pb-fill{background:var(--color-kaki-500)}:host([tone="celadon"]) .pb-fill{background:var(--color-celadon-500)}:host([tone="error"]) .pb-fill{background:var(--color-error)}:host([striped]) .pb-fill{background-image:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgb(255,255,255,.18) 6px,rgb(255,255,255,.18) 12px)}.pb-inner-value{display:flex;align-items:center;height:100%;padding-left:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);color:#ffffffb3;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes pb-slide{0%{left:-40%;width:40%}50%{left:30%;width:60%}to{left:110%;width:40%}}:host([indeterminate]) .pb-fill{width:100%!important;background:transparent}:host([indeterminate]) .pb-fill:after{content:"";position:absolute;top:0;bottom:0;width:40%;background:var(--color-washi-900);border-radius:var(--radius-full);animation:pb-slide 1.6s cubic-bezier(.4,0,.6,1) infinite}:host([indeterminate][tone="kaki"]) .pb-fill:after{background:var(--color-kaki-500)}:host([indeterminate][tone="celadon"]) .pb-fill:after{background:var(--color-celadon-500)}:host([indeterminate][tone="error"]) .pb-fill:after{background:var(--color-error)}:host([indeterminate][square]) .pb-fill:after{border-radius:var(--radius-sm)}.pb-multi{display:flex;width:100%;border-radius:var(--radius-full);overflow:hidden;gap:2px;background:transparent}:host([size="xs"]) .pb-multi{height:2px}:host([size="sm"]) .pb-multi{height:4px}:host([size="md"]) .pb-multi,.pb-multi{height:8px}:host([size="lg"]) .pb-multi{height:12px}:host([size="xl"]) .pb-multi{height:20px}:host([square]) .pb-multi{border-radius:var(--radius-sm)}.pb-segment{height:100%;transition:width .6s var(--ease-default);flex-shrink:0}.pb-segment:first-child{border-radius:var(--radius-full) 0 0 var(--radius-full)}.pb-segment:last-child{border-radius:0 var(--radius-full) var(--radius-full) 0}.pb-segment:only-child{border-radius:var(--radius-full)}:host([square]) .pb-segment:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}:host([square]) .pb-segment:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}:host([square]) .pb-segment:only-child{border-radius:var(--radius-sm)}.seg-default{background:var(--color-washi-900)}.seg-kaki{background:var(--color-kaki-500)}.seg-celadon{background:var(--color-celadon-500)}.seg-error{background:var(--color-error)}.seg-muted{background:var(--color-washi-300);flex:1}.pb-legend{display:flex;gap:var(--lib-space-md);flex-wrap:wrap;margin-top:var(--lib-space-sm)}.pb-legend-item{display:flex;align-items:center;gap:var(--lib-space-xs)}.pb-legend-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.pb-legend-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}}';
+export {
+  progressCss as default
+};
+//# sourceMappingURL=index210.js.map

package/dist/index210.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index210.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index211.js

@@ -0,0 +1,44 @@
+import { html } from "lit";
+const chevronSvg = html`
+  <svg
+    class="accordion-item__icon"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="3,5 8,11 13,5"/>
+  </svg>
+`;
+function accordionItemTemplate(props) {
+  return html`
+    <div class="accordion-item__root">
+
+      <button
+        class="accordion-item__trigger"
+        type="button"
+        aria-expanded="${props.open ? "true" : "false"}"
+        @click=${props.onToggle}
+      >
+        <span class="accordion-item__label">${props.label}</span>
+        ${chevronSvg}
+      </button>
+
+      <div class="accordion-item__body">
+        <div class="accordion-item__body-inner">
+          <div class="accordion-item__content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  `;
+}
+export {
+  accordionItemTemplate
+};
+//# sourceMappingURL=index211.js.map

package/dist/index211.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index211.js","sources":["../src/components/atoms/accordion-item/lib-accordion-item.component.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport interface AccordionItemTemplateProps {\n  label: string;\n  open: boolean;\n  onToggle: () => void;\n}\n\n/** Chevron SVG — rota 180deg via CSS cuando open */\nconst chevronSvg = html`\n  <svg\n    class=\"accordion-item__icon\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"3,5 8,11 13,5\"/>\n  </svg>\n`;\n\n/**\n * Plantilla para lib-accordion-item.\n *\n * La animacion de apertura usa grid-template-rows: 0fr -> 1fr\n * para evitar calcular alturas dinamicas.\n *\n * El slot default recibe el contenido colapsable.\n */\nexport function accordionItemTemplate(props: AccordionItemTemplateProps): TemplateResult {\n  return html`\n    <div class=\"accordion-item__root\">\n\n      <button\n        class=\"accordion-item__trigger\"\n        type=\"button\"\n        aria-expanded=\"${props.open ? 'true' : 'false'}\"\n        @click=${props.onToggle}\n      >\n        <span class=\"accordion-item__label\">${props.label}</span>\n        ${chevronSvg}\n      </button>\n\n      <div class=\"accordion-item__body\">\n        <div class=\"accordion-item__body-inner\">\n          <div class=\"accordion-item__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AASA,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBZ,SAAS,sBAAsB,OAAmD;AACvF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMgB,MAAM,OAAO,SAAS,OAAO;AAAA,iBACrC,MAAM,QAAQ;AAAA;AAAA,8CAEe,MAAM,KAAK;AAAA,UAC/C,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAapB;"}

package/dist/index212.js

@@ -0,0 +1,5 @@
+const accordionItemCss = "@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{--accordion-item-trigger-px: var(--lib-space-md);--accordion-item-content-px: var(--lib-space-md);--accordion-item-trigger-hover-bg: var(--bg-surface);--accordion-item-body-bg: var(--bg-elevated);--accordion-item-trigger-bg: var(--bg-elevated);--accordion-item-accent-border: 2px solid transparent;--accordion-item-label-color: var(--text-primary);--accordion-item-icon-color: var(--text-muted);--accordion-item-content-border: var(--border-subtle);--accordion-item-content-color: var(--text-secondary)}.accordion-item__root{border-bottom:1px solid var(--border-subtle);border-left:var(--accordion-item-accent-border);transition:border-color var(--duration-slow) var(--ease-out),background var(--duration-base) var(--ease-default)}.accordion-item__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--lib-space-md);padding:var(--lib-space-sm) var(--accordion-item-trigger-px);padding-block:var(--space-5, 1.25rem);background:var(--accordion-item-trigger-bg);border:none;cursor:pointer;text-align:left;transition:background var(--duration-base) var(--ease-default)}.accordion-item__trigger:hover{background:var(--accordion-item-trigger-hover-bg)}.accordion-item__label{font-family:var(--lib-font-body);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--accordion-item-label-color);line-height:var(--leading-snug)}.accordion-item__icon{flex-shrink:0;width:16px;height:16px;color:var(--accordion-item-icon-color);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .accordion-item__icon{transform:rotate(180deg)}.accordion-item__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-slow) var(--ease-out);background:var(--accordion-item-body-bg)}:host([open]) .accordion-item__body{grid-template-rows:1fr}.accordion-item__body-inner{overflow:hidden}.accordion-item__content{padding-inline:var(--accordion-item-content-px);padding-bottom:var(--lib-space-md);font-size:var(--text-sm);color:var(--accordion-item-content-color);line-height:var(--leading-relaxed);border-top:1px solid var(--accordion-item-content-border)}.accordion-item__content ::slotted(*){margin:0;padding-top:var(--lib-space-md)}@media(prefers-reduced-motion:reduce){.accordion-item__body,.accordion-item__icon,.accordion-item__trigger{transition:none}}}";
+export {
+  accordionItemCss as default
+};
+//# sourceMappingURL=index212.js.map

package/dist/index212.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index212.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index213.js

@@ -0,0 +1,9 @@
+let uniqueIdCounter = 0;
+function generateUniqueId(prefix = "lib-id-") {
+  uniqueIdCounter++;
+  return `${prefix}${uniqueIdCounter}`;
+}
+export {
+  generateUniqueId
+};
+//# sourceMappingURL=index213.js.map

package/dist/index213.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index213.js","sources":["../src/core/a11y.ts"],"sourcesContent":["/**\n * Accessibility (a11y) Utilities - Pillar 5\n *\n * This module provides utility functions to help ensure accessibility\n * for UI components. It includes helpers for generating unique IDs\n * and retrieving ARIA attributes.\n *\n * All functions here are pure TypeScript logic, with no direct DOM manipulation\n * beyond reading attributes, and are framework-agnostic.\n */\n\nlet uniqueIdCounter = 0;\n\n/**\n * Generates a unique ID for a component or element.\n * Useful for associating elements via ARIA attributes (e.g., `aria-labelledby`, `aria-describedby`).\n * @param prefix An optional prefix for the ID. Defaults to 'lib-id-'.\n * @returns A unique ID string.\n */\nexport function generateUniqueId(prefix: string = 'lib-id-'): string {\n  uniqueIdCounter++;\n  return `${prefix}${uniqueIdCounter}`;\n}\n\n/**\n * Retrieves the `aria-label` attribute from an HTMLElement.\n * Provides a default fallback if `aria-label` is not explicitly set.\n * This function is meant to be used in conjunction with components that may not always have a visual label.\n * @param element The HTMLElement to check for `aria-label`.\n * @param defaultValue A fallback value to use if `aria-label` is not found.\n * @returns The value of `aria-label` or the `defaultValue`.\n */\nexport function getAriaLabel(element: HTMLElement, defaultValue: string = ''): string {\n  return element.getAttribute('aria-label') || defaultValue;\n}\n"],"names":[],"mappings":"AAWA,IAAI,kBAAkB;AAQf,SAAS,iBAAiB,SAAiB,WAAmB;AACnE;AACA,SAAO,GAAG,MAAM,GAAG,eAAe;AACpC;"}

package/dist/index214.js

@@ -0,0 +1,5 @@
+const tooltipCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}.tip-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.tip-bubble{position:absolute;z-index:var(--z-tooltip, 400);background:var(--color-washi-900);color:var(--color-washi-100);font-family:var(--lib-font-mono);font-size:11px;letter-spacing:var(--tracking-wide);line-height:var(--leading-snug);padding:var(--lib-space-sm) var(--lib-space-md);max-width:220px;width:max-content;pointer-events:none;white-space:normal;opacity:0;transform-origin:center;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);transition-delay:0ms}.tip-wrap:hover .tip-bubble,.tip-wrap:focus-within .tip-bubble{transition-delay:.3s}.tip-instant .tip-bubble,.tip-instant:hover .tip-bubble,.tip-instant:focus-within .tip-bubble{transition-delay:0ms}.tip-wrap:hover .tip-bubble,.tip-wrap:focus-within .tip-bubble,.tip-wrap.is-open .tip-bubble{opacity:1}.tip-sm .tip-bubble{font-size:10px;padding:var(--lib-space-xs) var(--lib-space-sm);max-width:160px;letter-spacing:var(--tracking-wider)}.tip-lg .tip-bubble{font-size:var(--text-xs);font-family:var(--lib-font-body);padding:var(--lib-space-md) var(--lib-space-md);max-width:300px;letter-spacing:0;line-height:var(--leading-normal)}.tip-bubble:after{content:"";position:absolute;width:0;height:0;border:5px solid transparent;pointer-events:none}.tip-wrap[data-pos=top] .tip-bubble,.tip-wrap:not([data-pos]) .tip-bubble{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px)}.tip-wrap[data-pos=top]:hover .tip-bubble,.tip-wrap[data-pos=top]:focus-within .tip-bubble,.tip-wrap[data-pos=top].is-open .tip-bubble,.tip-wrap:not([data-pos]):hover .tip-bubble,.tip-wrap:not([data-pos]):focus-within .tip-bubble,.tip-wrap:not([data-pos]).is-open .tip-bubble{transform:translate(-50%) translateY(0)}.tip-wrap[data-pos=top] .tip-bubble:after,.tip-wrap:not([data-pos]) .tip-bubble:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--color-washi-900)}.tip-wrap[data-pos=bottom] .tip-bubble{top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(-4px)}.tip-wrap[data-pos=bottom]:hover .tip-bubble,.tip-wrap[data-pos=bottom]:focus-within .tip-bubble,.tip-wrap[data-pos=bottom].is-open .tip-bubble{transform:translate(-50%) translateY(0)}.tip-wrap[data-pos=bottom] .tip-bubble:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--color-washi-900)}.tip-wrap[data-pos=left] .tip-bubble{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(4px)}.tip-wrap[data-pos=left]:hover .tip-bubble,.tip-wrap[data-pos=left]:focus-within .tip-bubble,.tip-wrap[data-pos=left].is-open .tip-bubble{transform:translateY(-50%) translate(0)}.tip-wrap[data-pos=left] .tip-bubble:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--color-washi-900)}.tip-wrap[data-pos=right] .tip-bubble{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(-4px)}.tip-wrap[data-pos=right]:hover .tip-bubble,.tip-wrap[data-pos=right]:focus-within .tip-bubble,.tip-wrap[data-pos=right].is-open .tip-bubble{transform:translateY(-50%) translate(0)}.tip-wrap[data-pos=right] .tip-bubble:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--color-washi-900)}.tip-wrap[data-pos=top-start] .tip-bubble{bottom:calc(100% + 8px);left:0;transform:translateY(4px)}.tip-wrap[data-pos=top-start]:hover .tip-bubble,.tip-wrap[data-pos=top-start]:focus-within .tip-bubble,.tip-wrap[data-pos=top-start].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=top-start] .tip-bubble:after{top:100%;left:var(--lib-space-md);border-top-color:var(--color-washi-900)}.tip-wrap[data-pos=top-end] .tip-bubble{bottom:calc(100% + 8px);right:0;transform:translateY(4px)}.tip-wrap[data-pos=top-end]:hover .tip-bubble,.tip-wrap[data-pos=top-end]:focus-within .tip-bubble,.tip-wrap[data-pos=top-end].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=top-end] .tip-bubble:after{top:100%;right:var(--lib-space-md);border-top-color:var(--color-washi-900)}.tip-wrap[data-pos=bottom-start] .tip-bubble{top:calc(100% + 8px);left:0;transform:translateY(-4px)}.tip-wrap[data-pos=bottom-start]:hover .tip-bubble,.tip-wrap[data-pos=bottom-start]:focus-within .tip-bubble,.tip-wrap[data-pos=bottom-start].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=bottom-start] .tip-bubble:after{bottom:100%;left:var(--lib-space-md);border-bottom-color:var(--color-washi-900)}.tip-wrap[data-pos=bottom-end] .tip-bubble{top:calc(100% + 8px);right:0;transform:translateY(-4px)}.tip-wrap[data-pos=bottom-end]:hover .tip-bubble,.tip-wrap[data-pos=bottom-end]:focus-within .tip-bubble,.tip-wrap[data-pos=bottom-end].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=bottom-end] .tip-bubble:after{bottom:100%;right:var(--lib-space-md);border-bottom-color:var(--color-washi-900)}.tip-light .tip-bubble{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);box-shadow:var(--shadow-md)}.tip-light[data-pos=top] .tip-bubble:after,.tip-light:not([data-pos]) .tip-bubble:after{border-top-color:var(--bg-elevated)}.tip-light[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--bg-elevated)}.tip-light[data-pos=left] .tip-bubble:after{border-left-color:var(--bg-elevated)}.tip-light[data-pos=right] .tip-bubble:after{border-right-color:var(--bg-elevated)}.tip-light[data-pos=top-start] .tip-bubble:after{border-top-color:var(--bg-elevated)}.tip-light[data-pos=top-end] .tip-bubble:after{border-top-color:var(--bg-elevated)}.tip-light[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--bg-elevated)}.tip-light[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--bg-elevated)}.tip-kaki .tip-bubble{background:var(--color-kaki-500);color:var(--color-white)}.tip-kaki[data-pos=top] .tip-bubble:after,.tip-kaki:not([data-pos]) .tip-bubble:after{border-top-color:var(--color-kaki-500)}.tip-kaki[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--color-kaki-500)}.tip-kaki[data-pos=left] .tip-bubble:after{border-left-color:var(--color-kaki-500)}.tip-kaki[data-pos=right] .tip-bubble:after{border-right-color:var(--color-kaki-500)}.tip-kaki[data-pos=top-start] .tip-bubble:after{border-top-color:var(--color-kaki-500)}.tip-kaki[data-pos=top-end] .tip-bubble:after{border-top-color:var(--color-kaki-500)}.tip-kaki[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--color-kaki-500)}.tip-kaki[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--color-kaki-500)}.tip-error .tip-bubble{background:var(--color-error);color:var(--color-white)}.tip-error[data-pos=top] .tip-bubble:after,.tip-error:not([data-pos]) .tip-bubble:after{border-top-color:var(--color-error)}.tip-error[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--color-error)}.tip-error[data-pos=left] .tip-bubble:after{border-left-color:var(--color-error)}.tip-error[data-pos=right] .tip-bubble:after{border-right-color:var(--color-error)}.tip-error[data-pos=top-start] .tip-bubble:after{border-top-color:var(--color-error)}.tip-error[data-pos=top-end] .tip-bubble:after{border-top-color:var(--color-error)}.tip-error[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--color-error)}.tip-error[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--color-error)}.tip-celadon .tip-bubble{background:var(--color-celadon-500);color:var(--color-white)}.tip-celadon[data-pos=top] .tip-bubble:after,.tip-celadon:not([data-pos]) .tip-bubble:after{border-top-color:var(--color-celadon-500)}.tip-celadon[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--color-celadon-500)}.tip-celadon[data-pos=left] .tip-bubble:after{border-left-color:var(--color-celadon-500)}.tip-celadon[data-pos=right] .tip-bubble:after{border-right-color:var(--color-celadon-500)}.tip-celadon[data-pos=top-start] .tip-bubble:after{border-top-color:var(--color-celadon-500)}.tip-celadon[data-pos=top-end] .tip-bubble:after{border-top-color:var(--color-celadon-500)}.tip-celadon[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--color-celadon-500)}.tip-celadon[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--color-celadon-500)}::slotted(.tip-title),.tip-title{font-family:var(--lib-font-display);font-size:var(--text-md);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:inherit;display:block;margin-bottom:var(--lib-space-xs)}::slotted(.tip-body),.tip-body{font-family:var(--lib-font-body);font-size:var(--text-xs);color:inherit;opacity:.75;line-height:var(--leading-normal);display:block}::slotted(.tip-kbd),.tip-kbd{display:inline-flex;align-items:center;gap:2px;margin-top:var(--lib-space-sm)}.tip-bubble kbd{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);background:#ffffff1f;border:1px solid rgb(255,255,255,.18);padding:1px var(--lib-space-sm);color:inherit;line-height:1.6}.tip-light .tip-bubble kbd{background:var(--bg-surface);border-color:var(--border-default);color:var(--text-secondary)}::slotted(.tip-sep),.tip-sep{height:1px;background:#ffffff1f;margin:var(--lib-space-sm) 0;display:block}.tip-light .tip-sep,.tip-light ::slotted(.tip-sep){background:var(--border-subtle)}}';
+export {
+  tooltipCss as default
+};
+//# sourceMappingURL=index214.js.map

package/dist/index214.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index214.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index215.js

@@ -0,0 +1,38 @@
+import { nothing, html } from "lit";
+function wrapperClass(props) {
+  const parts = ["tip-wrap"];
+  if (props.size !== "md") parts.push(`tip-${props.size}`);
+  if (props.variant !== "dark") parts.push(`tip-${props.variant}`);
+  if (props.instant) parts.push("tip-instant");
+  if (props.open) parts.push("is-open");
+  return parts.join(" ");
+}
+function tooltipTemplate(props) {
+  return html`
+    <div
+      class="${wrapperClass(props)}"
+      data-pos="${props.position}"
+      part="wrapper"
+    >
+      <!-- Trigger — el consumidor pone aquí su elemento -->
+      <slot aria-describedby="${props.tipId}"></slot>
+
+      <!-- Burbuja flotante -->
+      <span
+        id="${props.tipId}"
+        class="tip-bubble"
+        role="tooltip"
+        part="bubble"
+      >
+        <!-- Texto simple via prop -->
+        ${props.content ? props.content : nothing}
+        <!-- Contenido rico via slot nombrado -->
+        <slot name="content"></slot>
+      </span>
+    </div>
+  `;
+}
+export {
+  tooltipTemplate
+};
+//# sourceMappingURL=index215.js.map

package/dist/index215.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index215.js","sources":["../src/components/atoms/tooltip/lib-tooltip.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { TooltipPosition, TooltipVariant, TooltipSize } from './lib-tooltip.component';\n\nexport interface TooltipTemplateProps {\n  position: TooltipPosition;\n  variant:  TooltipVariant;\n  size:     TooltipSize;\n  instant:  boolean;\n  open:     boolean;\n  content:  string;\n  tipId:    string;\n}\n\n/** Calcula las clases del wrapper a partir de las props. */\nfunction wrapperClass(props: TooltipTemplateProps): string {\n  const parts = ['tip-wrap'];\n  if (props.size    !== 'md')   parts.push(`tip-${props.size}`);\n  if (props.variant !== 'dark') parts.push(`tip-${props.variant}`);\n  if (props.instant)            parts.push('tip-instant');\n  if (props.open)               parts.push('is-open');\n  return parts.join(' ');\n}\n\nexport function tooltipTemplate(props: TooltipTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"${wrapperClass(props)}\"\n      data-pos=\"${props.position}\"\n      part=\"wrapper\"\n    >\n      <!-- Trigger — el consumidor pone aquí su elemento -->\n      <slot aria-describedby=\"${props.tipId}\"></slot>\n\n      <!-- Burbuja flotante -->\n      <span\n        id=\"${props.tipId}\"\n        class=\"tip-bubble\"\n        role=\"tooltip\"\n        part=\"bubble\"\n      >\n        <!-- Texto simple via prop -->\n        ${props.content ? props.content : nothing}\n        <!-- Contenido rico via slot nombrado -->\n        <slot name=\"content\"></slot>\n      </span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAcA,SAAS,aAAa,OAAqC;AACzD,QAAM,QAAQ,CAAC,UAAU;AACzB,MAAI,MAAM,SAAY,KAAQ,OAAM,KAAK,OAAO,MAAM,IAAI,EAAE;AAC5D,MAAI,MAAM,YAAY,OAAQ,OAAM,KAAK,OAAO,MAAM,OAAO,EAAE;AAC/D,MAAI,MAAM,QAAoB,OAAM,KAAK,aAAa;AACtD,MAAI,MAAM,KAAoB,OAAM,KAAK,SAAS;AAClD,SAAO,MAAM,KAAK,GAAG;AACvB;AAEO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA,eAEM,aAAa,KAAK,CAAC;AAAA,kBAChB,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,gCAIA,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,cAI7B,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMf,MAAM,UAAU,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjD;"}