@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index303.js.map

@@ -1 +1 @@
-{"version":3,"file":"index303.js","sources":["../src/components/molecules/color-picker/lib-color-picker.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { ColorPickerVariant, ColorInputMode, SwatchRow, SwatchColor } from './lib-color-picker.types';\n\n/* ── Icono ↺ inline para el mode button ── */\nconst ROTATE_SVG = html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M10 2.5A4.5 4.5 0 1 0 11 6\"/>\n  <path d=\"M10 .5v2h2\"/>\n</svg>`;\n\n/* ── Caret-down para trigger ── */\nconst CARET_SVG = html`<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M2 4l3 3 3-3\"/>\n</svg>`;\n\n/* ────────────────────────────────────────────\n   Interfaces de props para cada sub-sección\n   ──────────────────────────────────────────── */\n\nexport interface PickerPanelProps {\n  hex:          string;\n  r: number; g: number; b: number;\n  h: number; s: number; l: number;\n  alpha:        number;   // 0–100\n  inputMode:    ColorInputMode;\n  savedColors:  string[];\n  showAlpha:    boolean;\n  /** Callbacks */\n  onCanvasMousedown: (e: MouseEvent) => void;\n  onHueInput:        (e: Event) => void;\n  onAlphaInput:      (e: Event) => void;\n  onModeToggle:      () => void;\n  onHexInput:        (e: Event) => void;\n  onRgbInput:        (rIdx: 0|1|2, e: Event) => void;\n  onHslInput:        (cIdx: 0|1|2, e: Event) => void;\n  onAlphaNumInput:   (e: Event) => void;\n  onSaveColor:       () => void;\n  onSavedClick:      (hex: string) => void;\n  onCancel:          () => void;\n  onApply:           () => void;\n}\n\nexport interface SwatchGridProps {\n  rows:     SwatchRow[];\n  selected: string;\n  onSelect: (color: SwatchColor) => void;\n}\n\n/* ────────────────────────────────────────────\n   Swatch grid template\n   ──────────────────────────────────────────── */\nexport function swatchGridTemplate(props: SwatchGridProps): TemplateResult {\n  const { rows, selected, onSelect } = props;\n  return html`\n    <div class=\"cp-swatches\">\n      ${rows.map(row => html`\n        <div class=\"cp-swatches-row\">\n          <span class=\"cp-swatches-label\">${row.label}</span>\n          ${row.colors.map(c => html`\n            <div\n              class=\"cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? 'is-selected' : ''}\"\n              style=\"background:${c.value};\"\n              data-name=\"${c.name ?? ''}\"\n              @click=\"${(): void => onSelect(c)}\"\n              role=\"button\"\n              aria-label=\"${c.name ?? c.value}\"\n            ></div>\n          `)}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Picker panel template (canvas + sliders + inputs + saved + actions)\n   ──────────────────────────────────────────── */\nexport function pickerPanelTemplate(p: PickerPanelProps): TemplateResult {\n  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;\n\n  /* Thumb position: x = saturation %, y = inverted lightness % */\n  const thumbX = s;\n  const thumbY = 100 - l;\n\n  const cssColor = alpha < 100\n    ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  const alphaGradient =\n    `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;\n\n  /* Inputs según el modo */\n  const inputsBlock: TemplateResult = inputMode === 'hex'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:3\">\n          <input class=\"cp-input\" type=\"text\" .value=\"${hex}\" maxlength=\"7\"\n            @input=\"${p.onHexInput}\">\n          <span class=\"cp-input-label\">HEX</span>\n        </div>\n        ${showAlpha ? html`\n          <div class=\"cp-input-group\" style=\"flex:1\">\n            <input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\"\n              @input=\"${p.onAlphaNumInput}\">\n            <span class=\"cp-input-label\">A%</span>\n          </div>` : nothing}\n      `\n    : inputMode === 'rgb'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(r)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(0, e)}\"><span class=\"cp-input-label\">R</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(g)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(1, e)}\"><span class=\"cp-input-label\">G</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(b)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(2, e)}\"><span class=\"cp-input-label\">B</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `\n    : html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(h)}\" min=\"0\" max=\"360\" @input=\"${(e: Event): void => p.onHslInput(0, e)}\"><span class=\"cp-input-label\">H</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(s)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(1, e)}\"><span class=\"cp-input-label\">S%</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(l)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(2, e)}\"><span class=\"cp-input-label\">L%</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `;\n\n  return html`\n    <!-- Canvas 2D -->\n    <div class=\"cp-canvas\"\n      style=\"background: hsl(${h},100%,50%);\"\n      @mousedown=\"${p.onCanvasMousedown}\"\n    >\n      <div class=\"cp-thumb\"\n        style=\"left:${thumbX}%;top:${thumbY}%;background:${cssColor};\"\n      ></div>\n    </div>\n\n    <!-- Sliders -->\n    <div class=\"cp-sliders\">\n      <div class=\"cp-preview-dot\">\n        <div class=\"cp-preview-color\" style=\"background:${cssColor};\"></div>\n      </div>\n      <div class=\"cp-sliders-stack\">\n        <input type=\"range\" class=\"cp-range cp-range-hue\"\n          min=\"0\" max=\"360\" .value=\"${String(h)}\"\n          @input=\"${p.onHueInput}\">\n        ${showAlpha ? html`\n          <div class=\"cp-alpha-wrap\" style=\"height:10px;\">\n            <div class=\"cp-alpha-checker\">\n              <input type=\"range\" class=\"cp-range cp-range-alpha\"\n                min=\"0\" max=\"100\" .value=\"${String(Math.round(alpha))}\"\n                style=\"background:${alphaGradient};\"\n                @input=\"${p.onAlphaInput}\">\n            </div>\n          </div>` : nothing}\n      </div>\n    </div>\n\n    <!-- Inputs -->\n    <div class=\"cp-inputs-wrap\">\n      <button class=\"cp-mode-btn\" title=\"Cambiar modo\" @click=\"${p.onModeToggle}\">\n        ${ROTATE_SVG}\n      </button>\n      <div style=\"display:flex;gap:var(--lib-space-xs);flex:1;\">\n        ${inputsBlock}\n      </div>\n    </div>\n\n    <!-- Saved colors -->\n    <div class=\"cp-saved\">\n      <span class=\"cp-saved-label\">Guardados</span>\n      ${savedColors.map(sc => html`\n        <div class=\"cp-swatch cp-swatch-sm\"\n          style=\"background:${sc};\"\n          data-name=\"${sc}\"\n          @click=\"${(): void => p.onSavedClick(sc)}\"\n        ></div>\n      `)}\n      <button class=\"cp-saved-add\" title=\"Guardar color actual\" @click=\"${p.onSaveColor}\">+</button>\n    </div>\n\n    <!-- Actions -->\n    <div class=\"cp-actions\">\n      <button class=\"cp-btn cp-btn-cancel\" @click=\"${p.onCancel}\">Cancelar</button>\n      <button class=\"cp-btn cp-btn-ok\" @click=\"${p.onApply}\">Aplicar</button>\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Root template — inline vs trigger\n   ──────────────────────────────────────────── */\n\nexport interface ColorPickerRootProps extends PickerPanelProps {\n  variant:    ColorPickerVariant;\n  label:      string;\n  panelOpen:  boolean;\n  onTriggerClick: () => void;\n}\n\nexport function colorPickerTemplate(props: ColorPickerRootProps): TemplateResult {\n  const { variant, /*label,*/ hex, alpha, panelOpen, onTriggerClick } = props;\n\n  const panel = html`\n    <div class=\"cp ${variant === 'trigger' && panelOpen ? 'is-open' : ''}\">\n      ${pickerPanelTemplate(props)}\n    </div>\n  `;\n\n  if (variant === 'inline') {\n    return panel;\n  }\n\n  /* Trigger variant — botón + panel flotante */\n  const cssColor = alpha < 100\n    ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  return html`\n    <div class=\"cp-trigger-wrap\">\n      <button\n        class=\"cp-trigger ${panelOpen ? 'is-open' : ''}\"\n        @click=\"${onTriggerClick}\"\n        aria-expanded=\"${panelOpen}\"\n        aria-haspopup=\"true\"\n      >\n        <div class=\"cp-trigger-dot\">\n          <div class=\"cp-trigger-color\" style=\"background:${cssColor};\"></div>\n        </div>\n        <span>${hex.toUpperCase()}</span>\n        ${CARET_SVG}\n      </button>\n      ${panel}\n    </div>\n  `;\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index303.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index304.js

@@ -1,46 +1,30 @@
-const SHIBUI_SWATCHES = [
-  {
-    label: "washi",
-    colors: [
-      { value: "#FAF7F4", name: "washi-50" },
-      { value: "#F2EDE6", name: "washi-100" },
-      { value: "#E5DDD3", name: "washi-200" },
-      { value: "#D3C8BC", name: "washi-300" },
-      { value: "#B8A99A", name: "washi-400" },
-      { value: "#9A8878", name: "washi-500" },
-      { value: "#7A6A5C", name: "washi-600" },
-      { value: "#5C4E42", name: "washi-700" },
-      { value: "#3D332A", name: "washi-800" },
-      { value: "#221C16", name: "washi-900" },
-      { value: "#120E0A", name: "washi-950" }
-    ]
-  },
-  {
-    label: "kaki",
-    colors: [
-      { value: "#FDF3EC", name: "kaki-50" },
-      { value: "#FAE2CC", name: "kaki-100" },
-      { value: "#F5C89A", name: "kaki-200" },
-      { value: "#EBAA66", name: "kaki-300" },
-      { value: "#D97234", name: "kaki-400" },
-      { value: "#B85A1E", name: "kaki-500" },
-      { value: "#8C4115", name: "kaki-600" }
-    ]
-  },
-  {
-    label: "celadón",
-    colors: [
-      { value: "#EFF5F3", name: "celadon-50" },
-      { value: "#D3E8E1", name: "celadon-100" },
-      { value: "#A8D0C5", name: "celadon-200" },
-      { value: "#76B3A5", name: "celadon-300" },
-      { value: "#4D8E82", name: "celadon-400" },
-      { value: "#357164", name: "celadon-500" },
-      { value: "#245249", name: "celadon-600" }
-    ]
+import { html } from "lit";
+function dividerCenter(props) {
+  if (props.ornament === "dot") {
+    return html`<span class="dv__ornament dv__ornament--dot"></span>`;
   }
-];
+  if (props.ornament === "diamond") {
+    return html`<span class="dv__ornament dv__ornament--diamond"></span>`;
+  }
+  if (props.hasSlotContent) {
+    return html`
+      <span class="dv__label dv__label--${props.labelStyle}">
+        <slot @slotchange="${props.onSlotChange}"></slot>
+      </span>
+    `;
+  }
+  return html`<slot @slotchange="${props.onSlotChange}" style="display:none"></slot>`;
+}
+function dividerTemplate(props) {
+  return html`
+    <div class="dv">
+      <span class="dv__line"></span>
+      ${dividerCenter(props)}
+      <span class="dv__line"></span>
+    </div>
+  `;
+}
 export {
-  SHIBUI_SWATCHES
+  dividerTemplate
 };
 //# sourceMappingURL=index304.js.map

package/dist/index304.js.map

@@ -1 +1 @@
-{"version":3,"file":"index304.js","sources":["../src/components/molecules/color-picker/lib-color-picker.types.ts"],"sourcesContent":["/** Modo de visualización del componente */\nexport type ColorPickerVariant = 'inline' | 'trigger';\n\n/** Modo de los inputs de texto */\nexport type ColorInputMode = 'hex' | 'rgb' | 'hsl';\n\n/** Fila de swatches para el swatch-grid */\nexport interface SwatchRow {\n  label: string;\n  colors: SwatchColor[];\n}\n\nexport interface SwatchColor {\n  value: string;   // hex\n  name?: string;   // tooltip\n}\n\n/** Props internas del estado de color (HSL + alpha) */\nexport interface ColorState {\n  h: number;       // 0–360\n  s: number;       // 0–100\n  l: number;       // 0–100\n  alpha: number;   // 0–100\n}\n\n/** Paleta Shibui por defecto para el swatch grid */\nexport const SHIBUI_SWATCHES: SwatchRow[] = [\n  {\n    label: 'washi',\n    colors: [\n      { value: '#FAF7F4', name: 'washi-50' },\n      { value: '#F2EDE6', name: 'washi-100' },\n      { value: '#E5DDD3', name: 'washi-200' },\n      { value: '#D3C8BC', name: 'washi-300' },\n      { value: '#B8A99A', name: 'washi-400' },\n      { value: '#9A8878', name: 'washi-500' },\n      { value: '#7A6A5C', name: 'washi-600' },\n      { value: '#5C4E42', name: 'washi-700' },\n      { value: '#3D332A', name: 'washi-800' },\n      { value: '#221C16', name: 'washi-900' },\n      { value: '#120E0A', name: 'washi-950' },\n    ],\n  },\n  {\n    label: 'kaki',\n    colors: [\n      { value: '#FDF3EC', name: 'kaki-50' },\n      { value: '#FAE2CC', name: 'kaki-100' },\n      { value: '#F5C89A', name: 'kaki-200' },\n      { value: '#EBAA66', name: 'kaki-300' },\n      { value: '#D97234', name: 'kaki-400' },\n      { value: '#B85A1E', name: 'kaki-500' },\n      { value: '#8C4115', name: 'kaki-600' },\n    ],\n  },\n  {\n    label: 'celadón',\n    colors: [\n      { value: '#EFF5F3', name: 'celadon-50' },\n      { value: '#D3E8E1', name: 'celadon-100' },\n      { value: '#A8D0C5', name: 'celadon-200' },\n      { value: '#76B3A5', name: 'celadon-300' },\n      { value: '#4D8E82', name: 'celadon-400' },\n      { value: '#357164', name: 'celadon-500' },\n      { value: '#245249', name: 'celadon-600' },\n    ],\n  },\n];"],"names":[],"mappings":"AA0BO,MAAM,kBAA+B;AAAA,EAC1C;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,IAAY;AAAA,EACxC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,UAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,IAAW;AAAA,EACvC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,aAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,IAAc;AAAA,EAC1C;AAEJ;"}
+{"version":3,"file":"index304.js","sources":["../src/components/atoms/divider/lib-divider.component.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibDividerStyle     = 'hairline' | 'default' | 'strong' | 'heavy' | 'dashed' | 'dotted' | 'gradient';\nexport type LibDividerColor     = 'default' | 'kaki' | 'celadon';\nexport type LibDividerAlign     = 'left' | 'center' | 'right';\nexport type LibDividerOrnament  = 'none' | 'dot' | 'diamond';\nexport type LibDividerLabelStyle = 'mono' | 'display' | 'kanji';\nexport type LibDividerOrientation = 'horizontal' | 'vertical';\n\nexport interface DividerTemplateProps {\n  orientation: LibDividerOrientation;\n  style: LibDividerStyle;\n  color: LibDividerColor;\n  align: LibDividerAlign;\n  ornament: LibDividerOrnament;\n  labelStyle: LibDividerLabelStyle;\n  hasSlotContent: boolean;\n  onSlotChange: (e: Event) => void;\n}\n\n/**\n * Renderiza el contenido central del divider:\n *   - ornament (dot / diamond) si está activo\n *   - slot con label si hay contenido slotado\n *   - nada si es una línea pura\n *\n * Las dos .dv-line siempre se renderizan.\n * La alineación izquierda/derecha la gestiona CSS via :host([align]).\n */\nfunction dividerCenter(props: DividerTemplateProps): TemplateResult | typeof nothing {\n  if (props.ornament === 'dot') {\n    return html`<span class=\"dv__ornament dv__ornament--dot\"></span>`;\n  }\n  if (props.ornament === 'diamond') {\n    return html`<span class=\"dv__ornament dv__ornament--diamond\"></span>`;\n  }\n  if (props.hasSlotContent) {\n    return html`\n      <span class=\"dv__label dv__label--${props.labelStyle}\">\n        <slot @slotchange=\"${props.onSlotChange}\"></slot>\n      </span>\n    `;\n  }\n  // Slot vacío — lo mantenemos para detectar cambios futuros\n  return html`<slot @slotchange=\"${props.onSlotChange}\" style=\"display:none\"></slot>`;\n}\n\nexport function dividerTemplate(props: DividerTemplateProps): TemplateResult {\n  return html`\n    <div class=\"dv\">\n      <span class=\"dv__line\"></span>\n      ${dividerCenter(props)}\n      <span class=\"dv__line\"></span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AA6BA,SAAS,cAAc,OAA8D;AACnF,MAAI,MAAM,aAAa,OAAO;AAC5B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,aAAa,WAAW;AAChC,WAAO;AAAA,EACT;AACA,MAAI,MAAM,gBAAgB;AACxB,WAAO;AAAA,0CAC+B,MAAM,UAAU;AAAA,6BAC7B,MAAM,YAAY;AAAA;AAAA;AAAA,EAG7C;AAEA,SAAO,0BAA0B,MAAM,YAAY;AACrD;AAEO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA;AAAA,QAGD,cAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAI5B;"}

package/dist/index305.js

@@ -1,84 +1,5 @@
-import { html, nothing } from "lit";
-const chevronLeft = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/>
-  </svg>`;
-const chevronRight = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
-  </svg>`;
-function buildPageSequence(current, total, siblings) {
-  if (total <= 1) return [1];
-  const left = Math.max(2, current - siblings);
-  const right = Math.min(total - 1, current + siblings);
-  const pages = [1];
-  if (left > 2) pages.push(null);
-  for (let i = left; i <= right; i++) pages.push(i);
-  if (right < total - 1) pages.push(null);
-  if (total > 1) pages.push(total);
-  return pages;
-}
-function paginationTemplate(ctx) {
-  const total = ctx.totalPages;
-  const current = ctx.currentPage;
-  const sequence = buildPageSequence(current, total, ctx.siblings);
-  const infoText = ctx.showInfo ? (() => {
-    const from = (current - 1) * ctx.itemsPerPage + 1;
-    const to = Math.min(current * ctx.itemsPerPage, ctx.totalItems);
-    return html`
-          <span class="pg-info" part="info">
-            ${from}–${to} de ${ctx.totalItems}
-          </span>`;
-  })() : nothing;
-  return html`
-    <nav class="pg" part="root" aria-label="${ctx.ariaLabel}">
-
-      ${ctx.showInfo ? infoText : nothing}
-
-      <!-- ← Anterior -->
-      <button
-        class="pg-btn pg-btn--nav"
-        part="btn-prev"
-        ?disabled="${current === 1}"
-        aria-label="Página anterior"
-        @click="${() => ctx._changePage(current - 1)}"
-      >
-        ${chevronLeft}
-        ${ctx.size !== "sm" ? html`<span>Ant</span>` : nothing}
-      </button>
-
-      <!-- Números -->
-      <div class="pg-numbers" part="numbers" role="list">
-        ${sequence.map(
-    (page) => page === null ? html`<span class="pg-ellipsis" role="listitem" aria-hidden="true">…</span>` : html`
-              <button
-                class="pg-btn ${page === current ? "pg-btn--active" : ""}"
-                part="btn-page${page === current ? " btn-page-active" : ""}"
-                role="listitem"
-                aria-label="Página ${page}"
-                aria-current="${page === current ? "page" : nothing}"
-                ?disabled="${page === current}"
-                @click="${() => ctx._changePage(page)}"
-              >${page}</button>`
-  )}
-      </div>
-
-      <!-- → Siguiente -->
-      <button
-        class="pg-btn pg-btn--nav"
-        part="btn-next"
-        ?disabled="${current === total}"
-        aria-label="Página siguiente"
-        @click="${() => ctx._changePage(current + 1)}"
-      >
-        ${ctx.size !== "sm" ? html`<span>Sig</span>` : nothing}
-        ${chevronRight}
-      </button>
-
-    </nav>
-  `;
-}
+const dividerCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}:host([orientation="vertical"]){display:inline-flex;width:auto;height:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.dv{display:flex;align-items:center;width:100%;gap:var(--lib-space-md)}:host([orientation="vertical"]) .dv{flex-direction:column;width:auto;height:100%;gap:var(--lib-space-sm)}.dv__line{flex:1;min-width:0;min-height:0;height:1px;width:auto;background:var(--border-subtle)}:host([orientation="vertical"]) .dv__line{height:auto;width:1px}:host([style-variant="default"]) .dv__line{background:var(--border-default)}:host([style-variant="strong"]) .dv__line{height:2px;background:var(--border-strong)}:host([style-variant="heavy"]) .dv__line{height:4px;background:var(--color-washi-900)}:host([style-variant="dashed"]) .dv__line{background:none;border-top:1px dashed var(--border-default);height:0}:host([style-variant="dotted"]) .dv__line{background:none;border-top:1px dotted var(--color-washi-400);height:0}:host([style-variant="gradient"]) .dv__line{background:linear-gradient(to right,transparent 0%,var(--border-default) 20%,var(--border-default) 80%,transparent 100%)}:host([orientation="vertical"][style-variant="default"]) .dv__line{background:var(--border-default)}:host([orientation="vertical"][style-variant="strong"]) .dv__line{width:2px;background:var(--border-strong);height:auto}:host([orientation="vertical"][style-variant="dashed"]) .dv__line{background:none;border-left:1px dashed var(--border-default);width:0}:host([orientation="vertical"][style-variant="gradient"]) .dv__line{background:linear-gradient(to bottom,transparent 0%,var(--border-default) 20%,var(--border-default) 80%,transparent 100%)}:host([color="kaki"]) .dv__line{background:var(--color-kaki-500);height:2px}:host([color="celadon"]) .dv__line{background:var(--color-celadon-500);height:2px}:host([align="left"]) .dv__line:first-child{max-width:24px}:host([align="right"]) .dv__line:last-child{max-width:24px}.dv__ornament{flex-shrink:0}.dv__ornament--dot{width:5px;height:5px;border-radius:var(--radius-full);background:var(--color-washi-400)}.dv__ornament--diamond{width:6px;height:6px;background:var(--color-washi-400);transform:rotate(45deg)}:host([color="kaki"]) .dv__ornament{background:var(--color-kaki-500)}:host([color="celadon"]) .dv__ornament{background:var(--color-celadon-500)}.dv__label{flex-shrink:0;white-space:nowrap;line-height:1}.dv__label--mono{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}.dv__label--display{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-secondary);text-transform:none;font-style:italic}.dv__label--kanji{font-family:var(--lib-font-display);font-size:1.25rem;color:var(--color-washi-300);line-height:1;text-transform:none}:host([color="kaki"]) .dv__label--mono{color:var(--color-kaki-500)}}';
 export {
-  paginationTemplate
+  dividerCss as default
 };
 //# sourceMappingURL=index305.js.map

package/dist/index305.js.map

@@ -1 +1 @@
-{"version":3,"file":"index305.js","sources":["../src/components/molecules/pagination/lib-pagination.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibPagination } from './lib-pagination.component';\n\n/* ── Chevrons inline — sin dependencia de lib-icon ── */\nconst chevronLeft: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"/>\n  </svg>`;\n\nconst chevronRight: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"/>\n  </svg>`;\n\n/**\n * Genera la secuencia de páginas con ellipsis.\n *\n * Ejemplo (current=5, total=10, siblings=1):\n *   [1] … [4][5][6] … [10]\n *\n * Retorna un array de números o null (null = ellipsis).\n */\nfunction buildPageSequence(current: number, total: number, siblings: number): (number | null)[] {\n  if (total <= 1) return [1];\n\n  const left  = Math.max(2, current - siblings);\n  const right = Math.min(total - 1, current + siblings);\n\n  const pages: (number | null)[] = [1];\n\n  if (left > 2)        pages.push(null);           // ellipsis izquierdo\n  for (let i = left; i <= right; i++) pages.push(i);\n  if (right < total - 1) pages.push(null);         // ellipsis derecho\n  if (total > 1) pages.push(total);\n\n  return pages;\n}\n\nexport function paginationTemplate(ctx: LibPagination): TemplateResult {\n  const total   = ctx.totalPages;\n  const current = ctx.currentPage;\n  const sequence = buildPageSequence(current, total, ctx.siblings);\n\n  /* Info de resultados */\n  const infoText = ctx.showInfo\n    ? (():TemplateResult => {\n        const from = (current - 1) * ctx.itemsPerPage + 1;\n        const to   = Math.min(current * ctx.itemsPerPage, ctx.totalItems);\n        return html`\n          <span class=\"pg-info\" part=\"info\">\n            ${from}–${to} de ${ctx.totalItems}\n          </span>`;\n      })()\n    : nothing;\n\n  return html`\n    <nav class=\"pg\" part=\"root\" aria-label=\"${ctx.ariaLabel}\">\n\n      ${ctx.showInfo ? infoText : nothing}\n\n      <!-- ← Anterior -->\n      <button\n        class=\"pg-btn pg-btn--nav\"\n        part=\"btn-prev\"\n        ?disabled=\"${current === 1}\"\n        aria-label=\"Página anterior\"\n        @click=\"${(): void => ctx._changePage(current - 1)}\"\n      >\n        ${chevronLeft}\n        ${ctx.size !== 'sm' ? html`<span>Ant</span>` : nothing}\n      </button>\n\n      <!-- Números -->\n      <div class=\"pg-numbers\" part=\"numbers\" role=\"list\">\n        ${sequence.map((page, /*idx*/) =>\n          page === null\n            ? html`<span class=\"pg-ellipsis\" role=\"listitem\" aria-hidden=\"true\">…</span>`\n            : html`\n              <button\n                class=\"pg-btn ${page === current ? 'pg-btn--active' : ''}\"\n                part=\"btn-page${page === current ? ' btn-page-active' : ''}\"\n                role=\"listitem\"\n                aria-label=\"Página ${page}\"\n                aria-current=\"${page === current ? 'page' : nothing}\"\n                ?disabled=\"${page === current}\"\n                @click=\"${(): void => ctx._changePage(page as number)}\"\n              >${page}</button>`\n        )}\n      </div>\n\n      <!-- → Siguiente -->\n      <button\n        class=\"pg-btn pg-btn--nav\"\n        part=\"btn-next\"\n        ?disabled=\"${current === total}\"\n        aria-label=\"Página siguiente\"\n        @click=\"${(): void => ctx._changePage(current + 1)}\"\n      >\n        ${ctx.size !== 'sm' ? html`<span>Sig</span>` : nothing}\n        ${chevronRight}\n      </button>\n\n    </nav>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,cAA8B;AAAA;AAAA;AAAA;AAKpC,MAAM,eAA+B;AAAA;AAAA;AAAA;AAarC,SAAS,kBAAkB,SAAiB,OAAe,UAAqC;AAC9F,MAAI,SAAS,EAAG,QAAO,CAAC,CAAC;AAEzB,QAAM,OAAQ,KAAK,IAAI,GAAG,UAAU,QAAQ;AAC5C,QAAM,QAAQ,KAAK,IAAI,QAAQ,GAAG,UAAU,QAAQ;AAEpD,QAAM,QAA2B,CAAC,CAAC;AAEnC,MAAI,OAAO,EAAU,OAAM,KAAK,IAAI;AACpC,WAAS,IAAI,MAAM,KAAK,OAAO,IAAK,OAAM,KAAK,CAAC;AAChD,MAAI,QAAQ,QAAQ,EAAG,OAAM,KAAK,IAAI;AACtC,MAAI,QAAQ,EAAG,OAAM,KAAK,KAAK;AAE/B,SAAO;AACT;AAEO,SAAS,mBAAmB,KAAoC;AACrE,QAAM,QAAU,IAAI;AACpB,QAAM,UAAU,IAAI;AACpB,QAAM,WAAW,kBAAkB,SAAS,OAAO,IAAI,QAAQ;AAG/D,QAAM,WAAW,IAAI,YAChB,MAAqB;AACpB,UAAM,QAAQ,UAAU,KAAK,IAAI,eAAe;AAChD,UAAM,KAAO,KAAK,IAAI,UAAU,IAAI,cAAc,IAAI,UAAU;AAChE,WAAO;AAAA;AAAA,cAED,IAAI,IAAI,EAAE,OAAO,IAAI,UAAU;AAAA;AAAA,EAEvC,OACA;AAEJ,SAAO;AAAA,8CACqC,IAAI,SAAS;AAAA;AAAA,QAEnD,IAAI,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMpB,YAAY,CAAC;AAAA;AAAA,kBAEhB,MAAY,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,UAEhD,WAAW;AAAA,UACX,IAAI,SAAS,OAAO,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpD,SAAS;AAAA,IAAI,CAAC,SACd,SAAS,OACL,8EACA;AAAA;AAAA,gCAEkB,SAAS,UAAU,mBAAmB,EAAE;AAAA,gCACxC,SAAS,UAAU,qBAAqB,EAAE;AAAA;AAAA,qCAErC,IAAI;AAAA,gCACT,SAAS,UAAU,SAAS,OAAO;AAAA,6BACtC,SAAS,OAAO;AAAA,0BACnB,MAAY,IAAI,YAAY,IAAc,CAAC;AAAA,iBACpD,IAAI;AAAA,EAAA,CACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOY,YAAY,KAAK;AAAA;AAAA,kBAEpB,MAAY,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,UAEhD,IAAI,SAAS,OAAO,yBAAyB,OAAO;AAAA,UACpD,YAAY;AAAA;AAAA;AAAA;AAAA;AAKtB;"}
+{"version":3,"file":"index305.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index306.js

@@ -1,5 +1,13 @@
-const paginationCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@layer components{.pg{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);flex-wrap:wrap}.pg-numbers{display:flex;align-items:center;gap:var(--lib-space-xs)}.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);min-width:var(--_pg-size, 32px);height:var(--_pg-size, 32px);padding:0 var(--lib-space-sm);white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}.pg-btn:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.pg-btn:active:not(:disabled){transform:scale(.96)}.pg-btn--active{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);cursor:default}.pg-btn:disabled{opacity:.35;cursor:not-allowed}.pg-btn--nav{padding:0 var(--lib-space-md)}.pg-btn--nav svg{width:10px;height:10px;flex-shrink:0}.pg-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--_pg-size, 32px);height:var(--_pg-size, 32px);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);-webkit-user-select:none;user-select:none}:host([size="sm"]){--_pg-size: 26px}:host([size="sm"]) .pg-btn{font-size:10px;padding:0 var(--lib-space-xs)}:host([size="sm"]) .pg-btn--nav{padding:0 var(--lib-space-sm)}:host([size="sm"]) .pg-ellipsis{font-size:10px}:host([size="md"]){--_pg-size: 32px}:host([size="lg"]){--_pg-size: 40px}:host([size="lg"]) .pg-btn{font-size:var(--text-sm);letter-spacing:var(--tracking-wider);padding:0 var(--lib-space-md)}:host([size="lg"]) .pg-btn--nav{padding:0 calc(var(--lib-space-md) + var(--lib-space-xs))}:host([variant="outline"]) .pg-btn{background:transparent}:host([variant="outline"]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface)}:host([variant="outline"]) .pg-btn--active{background:transparent;border-color:var(--color-washi-900);color:var(--color-washi-900)}:host([variant="ghost"]) .pg-btn{background:transparent;border-color:transparent}:host([variant="ghost"]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface);border-color:transparent}:host([variant="ghost"]) .pg-btn--active{background:var(--bg-surface);border-color:transparent;color:var(--text-primary);font-weight:500}.pg-info{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}:host([dark]) .pg-btn{background:var(--color-washi-800);border-color:var(--color-washi-700);color:var(--color-washi-400)}:host([dark]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--color-washi-700);border-color:var(--color-washi-600);color:var(--color-washi-100)}:host([dark]) .pg-btn--active{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([dark]) .pg-ellipsis{color:var(--color-washi-600)}:host([dark]) .pg-info{color:var(--color-washi-600)}}';
+import { nothing, html } from "lit";
+function renderEyebrow(ctx) {
+  return html`
+    <span class="eb" part="base">
+      <slot></slot>
+      ${ctx.num ? html`<span class="eb-num-badge" part="badge">${ctx.num}</span>` : nothing}
+    </span>
+  `;
+}
 export {
-  paginationCss as default
+  renderEyebrow
 };
 //# sourceMappingURL=index306.js.map

package/dist/index306.js.map

@@ -1 +1 @@
-{"version":3,"file":"index306.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index306.js","sources":["../src/components/atoms/eyebrow/lib-eyebrow.html.ts"],"sourcesContent":["import { html, type TemplateResult, nothing } from 'lit';\nimport type { LibEyebrow } from './lib-eyebrow.component';\n\nexport function renderEyebrow(ctx: LibEyebrow): TemplateResult {\n  return html`\n    <span class=\"eb\" part=\"base\">\n      <slot></slot>\n      ${ctx.num\n        ? html`<span class=\"eb-num-badge\" part=\"badge\">${ctx.num}</span>`\n        : nothing\n      }\n    </span>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,cAAc,KAAiC;AAC7D,SAAO;AAAA;AAAA;AAAA,QAGD,IAAI,MACF,+CAA+C,IAAI,GAAG,YACtD,OACJ;AAAA;AAAA;AAGN;"}

package/dist/index307.js

@@ -1,74 +1,5 @@
-import { nothing, html } from "lit";
-import { unsafeHTML as o } from "./index357.js";
-function renderBadge(item) {
-  return item.badge != null ? html`<span class="tb-badge">${item.badge}</span>` : nothing;
-}
-function renderTab(item, context) {
-  const isActive = context.active === item.id;
-  const isDisabled = item.disabled === true;
-  return html`
-    ${item.group ? html`<div class="tb-label">${item.group}</div>` : nothing}
-    <button
-      id="tab-${item.id}"
-      class="tb-tab ${isActive ? "is-active" : ""} ${isDisabled ? "is-disabled" : ""}"
-      role="tab"
-      aria-selected="${isActive}"
-      aria-controls="panel-${item.id}"
-      tabindex="${isActive ? "0" : "-1"}"
-      data-id="${item.id}"
-      data-label="${item.label}"
-      ?disabled="${isDisabled}"
-      @click="${(e) => context._handleClick(e)}"
-    >
-      ${item.icon ? html`${o(item.icon)}` : nothing}
-      ${item.label}
-      ${renderBadge(item)}
-    </button>
-  `;
-}
-function renderPanel(item, context) {
-  const isActive = context.active === item.id;
-  return html`
-    <div
-      class="tb-panel ${isActive ? "is-active" : ""}"
-      role="tabpanel"
-      id="panel-${item.id}"
-      aria-labelledby="tab-${item.id}"
-    >
-      <slot name="${item.id}"></slot>
-    </div>
-  `;
-}
-function tabsTemplate(context) {
-  const tabs = context.items ?? [];
-  const showInk = !["pill", "card", "outline", "vertical"].includes(context.variant);
-  return html`
-    <div class="tb" part="root">
-
-      <!-- Tab list -->
-      <div
-        class="tb-list"
-        part="list"
-        role="tablist"
-        aria-label="${context.ariaLabel || nothing}"
-        
-        @keydown="${(e) => context._handleKey(e)}"
-      >
-        ${tabs.map((item) => renderTab(item, context))}
-      </div>
-
-      <!-- Ink bar (posicionada por JS, solo para variantes underline) -->
-      ${showInk ? html`<div class="tb-ink" part="ink" style="left:${context._inkLeft}px;width:${context._inkWidth}px;"></div>` : nothing}
-
-      <!-- Panels -->
-      <div class="tb-panels" part="panels">
-        ${tabs.map((item) => renderPanel(item, context))}
-      </div>
-
-    </div>
-  `;
-}
+const componentCss = '@layer tokens,reset,components;@layer tokens{:host{--eb-font: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--eb-size: .65rem;--eb-tracking: .24em;--eb-color: rgb(184, 90, 30, .55);--eb-line-w: 28px;--eb-line-w-hover: 40px;--eb-line-grad: linear-gradient(90deg, var(--color-kaki-400, #D97234), transparent);--eb-line-grad-r: linear-gradient(270deg, var(--color-kaki-400, #D97234), transparent);--eb-dot-size: 5px;--eb-dot-color: var(--color-kaki-400, #D97234);--eb-num-color: rgb(184, 90, 30, .3);--eb-num-border: rgb(184, 90, 30, .18);--eb-dur-slow: .38s;--eb-ease-out: cubic-bezier(0, 0, .2, 1)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{:host{display:inline-flex}.eb{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--eb-font);font-size:var(--eb-size);letter-spacing:var(--eb-tracking);text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--eb-color)}.eb:before{content:"";display:block;width:var(--eb-line-w);height:1px;flex-shrink:0;background:var(--eb-line-grad);transition:width var(--eb-dur-slow) var(--eb-ease-out)}.eb:hover:before{width:var(--eb-line-w-hover)}:host([line="right"]) .eb{flex-direction:row-reverse}:host([line="right"]) .eb:before{background:var(--eb-line-grad-r)}:host([line="both"]) .eb:after{content:"";display:block;width:var(--eb-line-w);height:1px;flex-shrink:0;background:var(--eb-line-grad-r);transition:width var(--eb-dur-slow) var(--eb-ease-out)}:host([line="both"]) .eb:hover:after{width:var(--eb-line-w-hover)}:host([line="none"]) .eb:before,:host([line="none"]) .eb:after{display:none}:host([color="washi"]) .eb{--eb-color: var(--color-washi-400, #B8A99A);--eb-line-grad: linear-gradient(90deg, var(--color-washi-400, #B8A99A), transparent);--eb-line-grad-r: linear-gradient(270deg, var(--color-washi-400, #B8A99A), transparent)}:host([color="celadon"]) .eb{--eb-color: rgb(78, 148, 130, .6);--eb-line-grad: linear-gradient(90deg, var(--color-celadon-400, #4E9482), transparent);--eb-line-grad-r: linear-gradient(270deg, var(--color-celadon-400, #4E9482), transparent)}:host([color="white"]) .eb{--eb-color: rgb(250, 247, 244, .35);--eb-line-grad: linear-gradient(90deg, rgb(250, 247, 244, .4), transparent);--eb-line-grad-r: linear-gradient(270deg, rgb(250, 247, 244, .4), transparent)}:host([color="muted"]) .eb{--eb-color: rgb(250, 247, 244, .15);--eb-line-grad: linear-gradient(90deg, rgb(250, 247, 244, .15), transparent);--eb-line-grad-r: linear-gradient(270deg, rgb(250, 247, 244, .15), transparent)}:host([color="dark"]) .eb{--eb-color: rgb(184, 90, 30, .45);--eb-line-grad: linear-gradient(90deg, rgb(184, 90, 30, .5), transparent);--eb-line-grad-r: linear-gradient(270deg, rgb(184, 90, 30, .5), transparent)}:host([size="sm"]) .eb{--eb-size: .58rem;--eb-tracking: .18em;--eb-line-w: 20px}:host([size="lg"]) .eb{--eb-size: .75rem;--eb-tracking: .2em;--eb-line-w: 36px}:host([dot]) .eb:before{width:var(--eb-dot-size)!important;height:var(--eb-dot-size);border-radius:50%;background:var(--eb-dot-color)!important;animation:none!important}:host([dot][color="celadon"]) .eb:before{--eb-dot-color: var(--color-celadon-400, #4E9482)}:host([dot][color="washi"]) .eb:before{--eb-dot-color: var(--color-washi-400, #B8A99A)}:host([dot][color="white"]) .eb:before{--eb-dot-color: rgb(250, 247, 244, .4)}:host([dot]) .eb:hover:before{width:var(--eb-dot-size)!important}.eb-num-badge{display:inline-block;font-family:var(--eb-font);font-size:.58rem;letter-spacing:.12em;color:var(--eb-num-color);border:1px solid var(--eb-num-border);padding:0 5px;line-height:1.6;flex-shrink:0}@keyframes eb-gold{0%{background-position:-200% 0}to{background-position:200% 0}}:host([effect="kintsugi"]) .eb{background:linear-gradient(90deg,var(--color-kaki-600, #8C4115),#F5D08A,var(--color-kaki-400, #D97234),#F5D08A,var(--color-kaki-600, #8C4115));background-size:200% 100%;animation:eb-gold 4s linear infinite;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;color:transparent}:host([effect="kintsugi"]) .eb:before{background:linear-gradient(90deg,var(--color-kaki-400, #D97234),#F5D08A,transparent);background-size:200% 100%;animation:eb-gold 4s linear infinite}:host([effect="kintsugi"][line="right"]) .eb:before,:host([effect="kintsugi"][line="both"]) .eb:after{background:linear-gradient(270deg,var(--color-kaki-400, #D97234),#F5D08A,transparent);background-size:200% 100%;animation:eb-gold 4s linear infinite}@keyframes eb-glitch{0%,88%,to{transform:none;opacity:1}89%{transform:translate(-2px);opacity:.7}90%{transform:translate(2px);opacity:.9}91%{transform:none;opacity:1}}@keyframes eb-flicker{0%,87%,to{opacity:1}88%{opacity:.4}89%{opacity:1}90%{opacity:.2}90.5%{opacity:1}}:host([effect="glitch"]) .eb{color:#faf7f440;animation:eb-glitch 6s steps(1) infinite,eb-flicker 6s steps(1) infinite}:host([effect="glitch"]) .eb:before{background:linear-gradient(90deg,rgb(250,247,244,.25),transparent)}}';
 export {
-  tabsTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index307.js.map

package/dist/index307.js.map

@@ -1 +1 @@
-{"version":3,"file":"index307.js","sources":["../src/components/molecules/tabs/lib-tabs.html.ts"],"sourcesContent":["import { html, TemplateResult, nothing } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { LibTabs } from './lib-tabs.component';\nimport type { TabItem, TabsVariant } from './lib-tabs.types';\n\n/* ── Badge ── */\nfunction renderBadge(item: TabItem): TemplateResult | typeof nothing {\n  return item.badge != null\n    ? html`<span class=\"tb-badge\">${item.badge}</span>`\n    : nothing;\n}\n\n/* ── Tab button ── */\nfunction renderTab(item: TabItem, context: LibTabs): TemplateResult {\n  const isActive   = context.active === item.id;\n  const isDisabled = item.disabled === true;\n\n  return html`\n    ${item.group\n      ? html`<div class=\"tb-label\">${item.group}</div>`\n      : nothing}\n    <button\n      id=\"tab-${item.id}\"\n      class=\"tb-tab ${isActive ? 'is-active' : ''} ${isDisabled ? 'is-disabled' : ''}\"\n      role=\"tab\"\n      aria-selected=\"${isActive}\"\n      aria-controls=\"panel-${item.id}\"\n      tabindex=\"${isActive ? '0' : '-1'}\"\n      data-id=\"${item.id}\"\n      data-label=\"${item.label}\"\n      ?disabled=\"${isDisabled}\"\n      @click=\"${(e:Event):void=> context._handleClick(e as CustomEvent)}\"\n    >\n      ${item.icon ? html`${unsafeHTML(item.icon)}` : nothing}\n      ${item.label}\n      ${renderBadge(item)}\n    </button>\n  `;\n}\n\n/* ── Panel ── */\nfunction renderPanel(item: TabItem, context: LibTabs): TemplateResult {\n  const isActive = context.active === item.id;\n  return html`\n    <div\n      class=\"tb-panel ${isActive ? 'is-active' : ''}\"\n      role=\"tabpanel\"\n      id=\"panel-${item.id}\"\n      aria-labelledby=\"tab-${item.id}\"\n    >\n      <slot name=\"${item.id}\"></slot>\n    </div>\n  `;\n}\n\n/* ── Main template ── */\nexport function tabsTemplate(context: LibTabs): TemplateResult {\n  const tabs = (context.items ?? []) as TabItem[];\n\n  /* La ink bar solo aplica en underline (y sus modificadores kintsugi/glitch) */\n  const showInk = !(['pill', 'card', 'outline', 'vertical'] as TabsVariant[]).includes(context.variant);\n\n  return html`\n    <div class=\"tb\" part=\"root\">\n\n      <!-- Tab list -->\n      <div\n        class=\"tb-list\"\n        part=\"list\"\n        role=\"tablist\"\n        aria-label=\"${context.ariaLabel || nothing}\"\n        \n        @keydown=\"${(e: KeyboardEvent): void => context._handleKey(e)}\"\n      >\n        ${tabs.map(item => renderTab(item, context))}\n      </div>\n\n      <!-- Ink bar (posicionada por JS, solo para variantes underline) -->\n      ${showInk\n        ? html`<div class=\"tb-ink\" part=\"ink\" style=\"left:${context._inkLeft}px;width:${context._inkWidth}px;\"></div>`\n        : nothing}\n\n      <!-- Panels -->\n      <div class=\"tb-panels\" part=\"panels\">\n        ${tabs.map(item => renderPanel(item, context))}\n      </div>\n\n    </div>\n  `;\n}"],"names":["unsafeHTML"],"mappings":";;AAMA,SAAS,YAAY,MAAgD;AACnE,SAAO,KAAK,SAAS,OACjB,8BAA8B,KAAK,KAAK,YACxC;AACN;AAGA,SAAS,UAAU,MAAe,SAAkC;AAClE,QAAM,WAAa,QAAQ,WAAW,KAAK;AAC3C,QAAM,aAAa,KAAK,aAAa;AAErC,SAAO;AAAA,MACH,KAAK,QACH,6BAA6B,KAAK,KAAK,WACvC,OAAO;AAAA;AAAA,gBAEC,KAAK,EAAE;AAAA,sBACD,WAAW,cAAc,EAAE,IAAI,aAAa,gBAAgB,EAAE;AAAA;AAAA,uBAE7D,QAAQ;AAAA,6BACF,KAAK,EAAE;AAAA,kBAClB,WAAW,MAAM,IAAI;AAAA,iBACtB,KAAK,EAAE;AAAA,oBACJ,KAAK,KAAK;AAAA,mBACX,UAAU;AAAA,gBACb,CAAC,MAAgB,QAAQ,aAAa,CAAgB,CAAC;AAAA;AAAA,QAE/D,KAAK,OAAO,OAAOA,EAAW,KAAK,IAAI,CAAC,KAAK,OAAO;AAAA,QACpD,KAAK,KAAK;AAAA,QACV,YAAY,IAAI,CAAC;AAAA;AAAA;AAGzB;AAGA,SAAS,YAAY,MAAe,SAAkC;AACpE,QAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,SAAO;AAAA;AAAA,wBAEe,WAAW,cAAc,EAAE;AAAA;AAAA,kBAEjC,KAAK,EAAE;AAAA,6BACI,KAAK,EAAE;AAAA;AAAA,oBAEhB,KAAK,EAAE;AAAA;AAAA;AAG3B;AAGO,SAAS,aAAa,SAAkC;AAC7D,QAAM,OAAQ,QAAQ,SAAS,CAAA;AAG/B,QAAM,UAAU,CAAE,CAAC,QAAQ,QAAQ,WAAW,UAAU,EAAoB,SAAS,QAAQ,OAAO;AAEpG,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQa,QAAQ,aAAa,OAAO;AAAA;AAAA,oBAE9B,CAAC,MAA2B,QAAQ,WAAW,CAAC,CAAC;AAAA;AAAA,UAE3D,KAAK,IAAI,CAAA,SAAQ,UAAU,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,QAI5C,UACE,kDAAkD,QAAQ,QAAQ,YAAY,QAAQ,SAAS,gBAC/F,OAAO;AAAA;AAAA;AAAA;AAAA,UAIP,KAAK,IAAI,CAAA,SAAQ,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAKtD;"}
+{"version":3,"file":"index307.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index308.js

@@ -1,5 +1,5 @@
-const tabsCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.tb{position:relative}.tb-list{display:flex;align-items:flex-end;position:relative;gap:0}.tb-tab{position:relative;display:inline-flex;align-items:center;gap:var(--lib-space-xs);padding:var(--lib-space-md) var(--lib-space-xl);height:44px;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-washi-400);background:none;border:none;cursor:pointer;white-space:nowrap;transition:color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);outline:none;flex-shrink:0;-webkit-user-select:none;user-select:none}.tb-tab:hover{color:var(--color-washi-700)}.tb-tab.is-active{color:var(--color-washi-900)}.tb-tab:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:-2px}.tb-tab.is-disabled{opacity:.35;pointer-events:none}.tb-tab svg{width:13px;height:13px;stroke:currentcolor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.tb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-family:var(--lib-font-mono);letter-spacing:0;background:var(--color-washi-200);color:var(--color-washi-600);border-radius:999px;transition:background var(--duration-base),color var(--duration-base)}.tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}.tb-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-washi-400);padding:0 var(--lib-space-xl) var(--lib-space-md)}.tb-label+.tb-label,.tb-label:not(:first-child){margin-top:var(--lib-space-2xl)}:host([size="sm"]) .tb-tab{height:36px;padding:var(--lib-space-xs) var(--lib-space-lg);font-size:10px}:host([size="lg"]) .tb-tab{height:52px;padding:var(--lib-space-lg) var(--lib-space-2xl);letter-spacing:.18em}.tb-panels{position:relative}.tb-panel{display:none}.tb-panel.is-active{display:block;animation:tb-in var(--duration-slow) var(--ease-out) both}@keyframes tb-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}:host([variant="underline"]) .tb-list{border-bottom:1px solid var(--color-washi-200);gap:var(--lib-space-xs)}:host([variant="underline"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="underline"]) .tb-tab.is-active{color:var(--color-kaki-600)}.tb-ink{position:absolute;bottom:0;height:2px;background:var(--color-kaki-500);transition:left var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-bounce);pointer-events:none;z-index:2}:host([variant="underline"][color="celadon"]) .tb-tab.is-active{color:var(--color-celadon-500)}:host([variant="underline"][color="celadon"]) .tb-ink{background:var(--color-celadon-500)}:host([variant="underline"][color="celadon"]) .tb-tab.is-active .tb-badge{background:var(--color-celadon-500)}:host([variant="pill"]) .tb-list{gap:var(--lib-space-xs);padding:var(--lib-space-xs);background:var(--color-washi-100);border:1px solid var(--color-washi-200);display:inline-flex}:host([variant="pill"]) .tb-tab{border-radius:2px;height:36px;padding:var(--lib-space-xs) var(--lib-space-lg)}:host([variant="pill"]) .tb-tab.is-active{background:#fff;color:var(--color-washi-900);box-shadow:0 1px 4px #1a140e1a}:host([variant="pill"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="pill"]) .tb-ink{display:none}:host([variant="pill"][color="kaki"]) .tb-tab.is-active{background:var(--color-kaki-500);color:#fff}:host([variant="pill"][color="kaki"]) .tb-tab.is-active .tb-badge{background:#ffffff4d;color:#fff}:host([variant="pill"][color="celadon"]) .tb-tab.is-active{background:var(--color-celadon-500);color:#fff}:host([variant="pill"][round]) .tb-list{border-radius:999px}:host([variant="pill"][round]) .tb-tab{border-radius:999px}:host([variant="card"]) .tb-list{gap:2px;align-items:flex-end}:host([variant="card"]) .tb-tab{border:1px solid transparent;border-bottom:none;background:var(--color-washi-100);color:var(--color-washi-400);height:40px;margin-bottom:-1px;padding:0 var(--lib-space-xl);border-radius:2px 2px 0 0}:host([variant="card"]) .tb-tab:hover{background:var(--color-washi-50);color:var(--color-washi-700)}:host([variant="card"]) .tb-tab.is-active{background:#fff;color:var(--color-washi-900);border-color:var(--color-washi-200);border-bottom-color:#fff;z-index:1;height:44px}:host([variant="card"]) .tb-panels{border:1px solid var(--color-washi-200);background:#fff;padding:var(--lib-space-2xl)}:host([variant="card"]) .tb-ink{display:none}:host([variant="outline"]) .tb-list{border-bottom:1px solid var(--color-washi-200);gap:var(--lib-space-xs)}:host([variant="outline"]) .tb-tab{border:1px solid transparent;border-bottom:none;margin-bottom:-1px}:host([variant="outline"]) .tb-tab.is-active{border-color:var(--color-washi-200);border-bottom-color:var(--color-washi-50);background:var(--color-washi-50);color:var(--color-washi-900)}:host([variant="outline"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="outline"]) .tb-ink{display:none}:host([variant="vertical"]) .tb{display:grid;grid-template-columns:180px 1fr;gap:0;align-items:start}:host([variant="vertical"]) .tb-list{flex-direction:column;align-items:stretch;border-right:1px solid var(--color-washi-200);border-bottom:none;gap:0;padding:var(--lib-space-xs) 0;grid-column:1;grid-row:1}:host([variant="vertical"]) .tb-ink{display:none}:host([variant="vertical"]) .tb-panels{padding:var(--lib-space-xs) 0 var(--lib-space-xs) var(--lib-space-2xl);grid-column:2;grid-row:1}:host([variant="vertical"]) .tb-tab{height:auto;padding:var(--lib-space-md) var(--lib-space-xl);text-align:left;border-left:2px solid transparent;border-radius:0;justify-content:flex-start}:host([variant="vertical"]) .tb-tab:hover{border-left-color:var(--color-washi-300)}:host([variant="vertical"]) .tb-tab.is-active{border-left-color:var(--color-kaki-500);color:var(--color-kaki-600);background:var(--color-kaki-50)}:host([variant="vertical"]) .tb-panel.is-active{animation:tb-in-h var(--duration-slow) var(--ease-out) both}@keyframes tb-in-h{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:none}}:host([variant="vertical"]) .tb-label{padding:0 var(--lib-space-xl) var(--lib-space-md)}:host([dark]){background:var(--color-washi-950)}:host([dark]) .tb-tab{color:#faf7f440}:host([dark]) .tb-tab:hover{color:#faf7f499}:host([dark]) .tb-tab:focus-visible{outline-color:var(--color-kaki-400)}:host([dark]) .tb-badge{background:#ffffff1a;color:#faf7f466}:host([dark]) .tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}:host([dark]) .tb-panels{color:#faf7f499}:host([dark]) .tb-label{color:#faf7f42e}:host([dark][variant="underline"]) .tb-list{border-bottom-color:#ffffff14}:host([dark][variant="underline"]) .tb-tab.is-active{color:var(--color-kaki-400)}:host([dark][variant="underline"]) .tb-ink{background:var(--color-kaki-400)}:host([dark][variant="pill"]) .tb-list{background:#ffffff0a;border-color:#ffffff12}:host([dark][variant="pill"]) .tb-tab.is-active{background:#ffffff17;color:#faf7f4cc;box-shadow:0 1px 4px #0000004d}:host([dark][variant="pill"][color="kaki"]) .tb-tab.is-active{background:var(--color-kaki-500);color:#fff}:host([dark][variant="card"]) .tb-tab{background:#ffffff08;border-color:transparent}:host([dark][variant="card"]) .tb-tab.is-active{background:#ffffff12;border-color:#ffffff14;border-bottom-color:var(--color-washi-950);color:#faf7f4bf}:host([dark][variant="card"]) .tb-panels{background:#ffffff0a;border-color:#ffffff14}:host([dark][variant="vertical"]) .tb-list{border-right-color:#ffffff14}:host([dark][variant="vertical"]) .tb-tab.is-active{border-left-color:var(--color-kaki-500);color:var(--color-kaki-400);background:#b85a1e1a}@keyframes kintsugi-ink{0%{background-position:0% 0}to{background-position:200% 0}}:host([kintsugi][variant="underline"]) .tb-ink{background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-400) 25%,#F5D08A 50%,var(--color-kaki-400) 75%,var(--color-kaki-600) 100%);background-size:200% 100%;animation:kintsugi-ink 3s linear infinite}:host([kintsugi]) .tb-tab.is-active{color:var(--color-kaki-600)}:host([kintsugi]) .tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}:host([kintsugi][variant="pill"]) .tb-tab.is-active{background:linear-gradient(90deg,var(--color-kaki-600),var(--color-kaki-400),#F5D08A,var(--color-kaki-400),var(--color-kaki-600));background-size:200% 100%;animation:kintsugi-ink 3s linear infinite;color:#fff}:host([kintsugi][dark][variant="underline"]) .tb-ink{background:linear-gradient(90deg,#b85a1e66,#d97234b3,#f5d08ae6,#d97234b3,#b85a1e66);background-size:200% 100%;animation:kintsugi-ink 3.5s linear infinite}:host([kintsugi][dark]) .tb-tab.is-active{color:var(--color-kaki-400)}@keyframes tb-glitch-x{0%,88%,to{transform:translate(0)}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:translate(0)}}@keyframes tb-glitch-r{0%,88%,to{opacity:0}89%{opacity:.6;transform:translate(-2px);clip-path:inset(20% 0 50% 0)}90%{opacity:.4;transform:translate(1px);clip-path:inset(55% 0 10% 0)}91%{opacity:0}}@keyframes tb-glitch-b{0%,88%,to{opacity:0}89%{opacity:.5;transform:translate(2px);clip-path:inset(50% 0 20% 0)}90%{opacity:.3;transform:translate(-1px);clip-path:inset(10% 0 60% 0)}91%{opacity:0}}@keyframes tb-glitch-flicker{0%,85%,to{opacity:1}89%{opacity:.7}89.5%{opacity:1}90%{opacity:.5}90.5%{opacity:1}}:host([glitch]) .tb-tab.is-active{animation:tb-glitch-x 6s steps(1) infinite,tb-glitch-flicker 6s steps(1) infinite;position:relative}:host([glitch]) .tb-tab.is-active:before,:host([glitch]) .tb-tab.is-active:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:inherit;letter-spacing:inherit;text-transform:uppercase;pointer-events:none;padding:inherit}:host([glitch]) .tb-tab.is-active:before{color:#d97234b3;animation:tb-glitch-r 6s steps(1) infinite}:host([glitch]) .tb-tab.is-active:after{color:#4e948299;animation:tb-glitch-b 6s steps(1) infinite;animation-delay:60ms}:host([glitch][variant="underline"]) .tb-ink{background:var(--color-washi-900);animation:tb-glitch-flicker 6s steps(1) infinite!important}:host([glitch][dark]) .tb-tab.is-active:before{color:#d97234cc}:host([glitch][dark]) .tb-tab.is-active:after{color:#4e9482b3}:host([glitch][dark][variant="underline"]) .tb-ink{background:#faf7f499}:host([scroll]) .tb-list{overflow:auto hidden;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap}:host([scroll]) .tb-list::-webkit-scrollbar{display:none}:host([full]) .tb-list{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}:host([full]) .tb-tab{justify-content:center}}';
+const iconStyles = ":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}.icon-wrapper{display:flex;width:var(--lib-icon-size, 1em);height:var(--lib-icon-size, 1em);color:currentcolor}svg{display:block;width:100%!important;height:100%!important;fill:currentcolor}.variant-primary{color:var(--lib-color-primary)}.variant-secondary{color:var(--lib-color-secondary)}.variant-success{color:var(--lib-color-success)}.variant-danger{color:var(--lib-color-danger)}";
 export {
-  tabsCss as default
+  iconStyles as default
 };
 //# sourceMappingURL=index308.js.map

package/dist/index309.js

@@ -1,5 +1,22 @@
-const modalCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:contents}.mo-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal, 500);background:#120e0aa6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--lib-space-lg);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-out)}:host([open]) .mo-backdrop{opacity:1;pointer-events:auto}.mo-panel-wrap{position:relative;width:100%;max-width:560px;max-height:calc(100vh - var(--lib-space-lg) * 2);display:flex;flex-direction:column;transform:scale(.95) translateY(8px);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .mo-panel-wrap{transform:scale(1) translateY(0)}.mo-panel-wrap.mo-slide-up{transform:translateY(40px)}:host([open]) .mo-panel-wrap.mo-slide-up{transform:translateY(0)}.mo-panel-wrap.mo-slide-down{transform:translateY(-40px)}:host([open]) .mo-panel-wrap.mo-slide-down{transform:translateY(0)}.mo-panel-wrap.mo-xs{max-width:280px}.mo-panel-wrap.mo-sm{max-width:420px}.mo-panel-wrap.mo-lg{max-width:720px}.mo-panel-wrap.mo-xl{max-width:920px}.mo-panel-wrap.mo-full{max-width:100vw;max-height:100vh;height:100vh;margin:0}.mo-panel-wrap.mo-full .mo-panel{max-height:100vh;height:100vh;border:none}.mo-panel{background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:0 20px 60px #1a140e2e,0 4px 16px #1a140e1a;display:flex;flex-direction:column;max-height:calc(100vh - var(--lib-space-lg) * 2);overflow:hidden}.mo-panel.is-editorial .mo-header{border-bottom:none;padding-bottom:0}.mo-panel.is-editorial .mo-title{font-size:2.5rem;letter-spacing:var(--tracking-tight)}.mo-panel.is-editorial .mo-body{padding-top:var(--lib-space-sm)}.mo-panel.is-danger .mo-header{border-bottom-color:#f5ddd9;background:#f5ddd9}.mo-panel.is-danger .mo-title{color:var(--color-error)}.mo-panel.is-danger .mo-footer{border-top-color:#f5ddd9;background:#fef5f3}.mo-header{display:flex;align-items:flex-start;gap:var(--lib-space-md);padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-elevated)}.mo-header-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-muted)}.mo-header-icon.is-kaki{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.mo-header-icon.is-celadon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.mo-header-icon.is-error{background:#f5ddd9;border-color:#f5ddd9;color:var(--color-error)}.mo-header-icon.is-info{background:#d6e8f5;border-color:#d6e8f5;color:#1a4a6e}.mo-header-text{flex:1;min-width:0}.mo-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-primary)}.mo-subtitle{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);margin-top:var(--lib-space-xs)}.mo-close{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;line-height:1;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);margin-top:-2px;margin-right:-4px}.mo-close:hover{background:var(--bg-surface);color:var(--text-primary)}.mo-body{flex:1;overflow-y:auto;padding:var(--lib-space-lg);scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent}.mo-body::-webkit-scrollbar{width:4px}.mo-body::-webkit-scrollbar-track{background:transparent}.mo-body::-webkit-scrollbar-thumb{background:var(--color-washi-300)}.mo-footer{display:flex;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-lg);border-top:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-surface)}.mo-footer-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-right:auto}.mo-panel-wrap.mo-dark .mo-panel{background:#0c0604;border-color:#1e130e;box-shadow:0 20px 60px #0000008c,0 4px 16px #0000004d}.mo-panel-wrap.mo-dark .mo-header{background:#0c0604;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-title{color:#c8bbb2}.mo-panel-wrap.mo-dark .mo-subtitle{color:#312620}.mo-panel-wrap.mo-dark .mo-close{color:#362b25}.mo-panel-wrap.mo-dark .mo-close:hover{background:#190f0a;color:#998c84}.mo-panel-wrap.mo-dark .mo-footer{background:#060201;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-footer-info{color:#312620}.mo-panel-wrap.mo-dark .mo-header-icon{background:#190f0a;border-color:#231813;color:#433831}@media(max-width:768px){.mo-backdrop{padding:var(--lib-space-md)}.mo-panel-wrap{max-height:calc(100vh - var(--lib-space-md) * 2)}}}";
+import { html } from "lit";
+function kbdTemplate(props) {
+  const { size, variant, pressed, onDown, onUp, onLeave } = props;
+  const variantClass = variant !== "default" ? ` kbd-${variant}` : "";
+  const pressedClass = pressed ? " is-pressed" : "";
+  const cls = `kbd kbd-${size}${variantClass}${pressedClass}`;
+  return html`
+    <kbd
+      class=${cls}
+      role="img"
+      @mousedown=${onDown}
+      @mouseup=${onUp}
+      @mouseleave=${onLeave}
+    >
+      <slot></slot>
+    </kbd>
+  `;
+}
 export {
-  modalCss as default
+  kbdTemplate
 };
 //# sourceMappingURL=index309.js.map

package/dist/index309.js.map

@@ -1 +1 @@
-{"version":3,"file":"index309.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index309.js","sources":["../src/components/atoms/kbd/lib-kbd.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibKbdSize, LibKbdVariant } from './lib-kbd.component';\n\nexport interface KbdTemplateProps {\n  size:     LibKbdSize;\n  variant:  LibKbdVariant;\n  pressed:  boolean;\n  onDown:   () => void;\n  onUp:     () => void;\n  onLeave:  () => void;\n}\n\n/**\n * Template de lib-kbd.\n *\n * Estructura:\n *   kbd.kbd.kbd-{size}[.kbd-{variant}][.is-pressed]\n *     slot\n *\n * El `border-bottom` de 3px simula la pared lateral física.\n * `.is-pressed` reduce ese borde a 1px y añade translateY(1px)\n * — efecto pulsación real.\n */\nexport function kbdTemplate(props: KbdTemplateProps): TemplateResult {\n  const { size, variant, pressed, onDown, onUp, onLeave } = props;\n\n  const variantClass = variant !== 'default' ? ` kbd-${variant}` : '';\n  const pressedClass = pressed ? ' is-pressed' : '';\n  const cls          = `kbd kbd-${size}${variantClass}${pressedClass}`;\n\n  return html`\n    <kbd\n      class=${cls}\n      role=\"img\"\n      @mousedown=${onDown}\n      @mouseup=${onUp}\n      @mouseleave=${onLeave}\n    >\n      <slot></slot>\n    </kbd>\n  `;\n}"],"names":[],"mappings":";AAuBO,SAAS,YAAY,OAAyC;AACnE,QAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,MAAM,YAAY;AAE1D,QAAM,eAAe,YAAY,YAAY,QAAQ,OAAO,KAAK;AACjE,QAAM,eAAe,UAAU,gBAAgB;AAC/C,QAAM,MAAe,WAAW,IAAI,GAAG,YAAY,GAAG,YAAY;AAElE,SAAO;AAAA;AAAA,cAEK,GAAG;AAAA;AAAA,mBAEE,MAAM;AAAA,iBACR,IAAI;AAAA,oBACD,OAAO;AAAA;AAAA;AAAA;AAAA;AAK3B;"}

package/dist/index31.js

@@ -1,25 +1,110 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { visuallyHiddenTemplate } from "./index246.js";
-import styles from "./index247.js";
+import { property, customElement } from "lit/decorators.js";
+import { progressTemplate } from "./index318.js";
+import progressCss from "./index319.js";
+import sharedTokens from "./index196.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 = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibVisuallyHidden = class extends LitElement {
+let LibProgress = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.max = 100;
+    this.size = "md";
+    this.tone = "default";
+    this.indeterminate = false;
+    this.striped = false;
+    this.square = false;
+    this.label = "";
+    this.valueLabel = "";
+    this.sub = "";
+    this.showValue = false;
+    this.segments = "";
+    this.ariaLabel = null;
+  }
   render() {
-    return visuallyHiddenTemplate();
+    const percent = this.indeterminate ? 100 : Math.min(Math.max(this.value / (this.max || 100) * 100, 0), 100);
+    let parsedSegments = [];
+    if (this.segments) {
+      try {
+        parsedSegments = JSON.parse(this.segments);
+      } catch {
+        console.warn("[lib-progress] Invalid JSON in `segments` prop.");
+      }
+    }
+    return progressTemplate({
+      percent,
+      size: this.size,
+      tone: this.tone,
+      indeterminate: this.indeterminate,
+      striped: this.striped,
+      square: this.square,
+      label: this.label,
+      valueLabel: this.valueLabel,
+      sub: this.sub,
+      showValue: this.showValue,
+      segments: parsedSegments,
+      ariaLabel: this.ariaLabel ?? this.label,
+      rawValue: this.value,
+      max: this.max
+    });
   }
 };
-LibVisuallyHidden.styles = [css`${unsafeCSS(styles)}`];
-LibVisuallyHidden = __decorateClass([
-  customElement("lib-visually-hidden")
-], LibVisuallyHidden);
+LibProgress.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(progressCss)}`
+];
+__decorateClass([
+  property({ type: Number })
+], LibProgress.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], LibProgress.prototype, "max", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibProgress.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibProgress.prototype, "tone", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibProgress.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibProgress.prototype, "striped", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibProgress.prototype, "square", 2);
+__decorateClass([
+  property({ type: String })
+], LibProgress.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, attribute: "value-label" })
+], LibProgress.prototype, "valueLabel", 2);
+__decorateClass([
+  property({ type: String })
+], LibProgress.prototype, "sub", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-value" })
+], LibProgress.prototype, "showValue", 2);
+__decorateClass([
+  property({ type: String })
+], LibProgress.prototype, "segments", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibProgress.prototype, "ariaLabel", 2);
+LibProgress = __decorateClass([
+  customElement("lib-progress")
+], LibProgress);
 export {
-  LibVisuallyHidden
+  LibProgress
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/components/atoms/visually-hidden/lib-visually-hidden.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, unsafeCSS } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { visuallyHiddenTemplate } from './lib-visually-hidden.html';\nimport styles from './lib-visually-hidden.css?inline';\n\n@customElement('lib-visually-hidden')\nexport class LibVisuallyHidden extends LitElement {\n  static override styles = [css`${unsafeCSS(styles)}`];\n\n  protected override render(): TemplateResult {\n    return visuallyHiddenTemplate();\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;AAMO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAG7B,SAAyB;AAC1C,WAAO,uBAAA;AAAA,EACT;AACF;AANa,kBACK,SAAS,CAAC,MAAM,UAAU,MAAM,CAAC,EAAE;AADxC,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
+{"version":3,"file":"index31.js","sources":["../src/components/atoms/progress/lib-progress.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { progressTemplate } from './lib-progress.html';\nimport progressCss from './lib-progress.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { ProgressSize, ProgressTone, ProgressSegment } from './lib-progress.types';\n\n/**\n * @element lib-progress\n *\n * Barra de progreso lineal del sistema Shibui.\n *\n * Modos:\n *  - Simple bar          → valor 0-100 con prop `value`\n *  - Con meta            → añade `label` y/o `value-label`\n *  - Multi-segmento      → prop `segments` (JSON)\n *\n * @attr value          — Valor actual (0–max). Default 0.\n * @attr max            — Valor máximo. Default 100.\n * @attr size           — xs · sm · md · lg · xl. Default md.\n * @attr tone           — default · kaki · celadon · error. Default default.\n * @attr indeterminate  — Duración desconocida; animación continua.\n * @attr striped        — Relleno con diagonales sutiles.\n * @attr square         — Bordes rectos (radius-sm) en lugar de full.\n * @attr label          — Etiqueta sobre la barra.\n * @attr value-label    — Texto libre junto al label (ej: \"3.4 MB / 7 MB\").\n * @attr show-value     — Muestra el % calculado junto al label (ignorado si value-label está presente).\n * @attr sub            — Texto secundario bajo la barra (DM Mono, 10px).\n * @attr segments       — JSON: ProgressSegment[]. Activa modo multi-segmento.\n */\n@customElement('lib-progress')\nexport class LibProgress extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(progressCss)}`,\n  ];\n\n  /* ── Bar config ── */\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) max   = 100;\n\n  @property({ type: String, reflect: true }) size: ProgressSize = 'md';\n  @property({ type: String, reflect: true }) tone: ProgressTone = 'default';\n\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n  @property({ type: Boolean, reflect: true }) striped       = false;\n  @property({ type: Boolean, reflect: true }) square        = false;\n\n  /* ── Meta ── */\n  @property({ type: String }) label       = '';\n  @property({ type: String, attribute: 'value-label' }) valueLabel = '';\n  @property({ type: String }) sub         = '';\n  @property({ type: Boolean, attribute: 'show-value' }) showValue  = false;\n\n  /* ── Multi-segment (JSON string) ── */\n  @property({ type: String }) segments = '';\n\n  /* ── a11y ── */\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null;\n\n  override render(): TemplateResult {\n    const percent = this.indeterminate\n      ? 100\n      : Math.min(Math.max((this.value / (this.max || 100)) * 100, 0), 100);\n\n    let parsedSegments: ProgressSegment[] = [];\n    if (this.segments) {\n      try {\n        parsedSegments = JSON.parse(this.segments) as ProgressSegment[];\n      } catch {\n        console.warn('[lib-progress] Invalid JSON in `segments` prop.');\n      }\n    }\n\n    return progressTemplate({\n      percent,\n      size:          this.size,\n      tone:          this.tone,\n      indeterminate: this.indeterminate,\n      striped:       this.striped,\n      square:        this.square,\n\n      label:      this.label,\n      valueLabel: this.valueLabel,\n      sub:        this.sub,\n      showValue:  this.showValue,\n\n      segments: parsedSegments,\n\n      ariaLabel: this.ariaLabel ?? this.label,\n      rawValue:  this.value,\n      max:       this.max,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-progress': LibProgress;\n  }\n}"],"names":[],"mappings":"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"}