@shibui-ui/ui 1.5.5

package/dist/index303.js

@@ -0,0 +1,165 @@
+import { html, nothing } from "lit";
+const ROTATE_SVG = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor"
+  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 2.5A4.5 4.5 0 1 0 11 6"/>
+  <path d="M10 .5v2h2"/>
+</svg>`;
+const CARET_SVG = html`<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M2 4l3 3 3-3"/>
+</svg>`;
+function swatchGridTemplate(props) {
+  const { rows, selected, onSelect } = props;
+  return html`
+    <div class="cp-swatches">
+      ${rows.map((row) => html`
+        <div class="cp-swatches-row">
+          <span class="cp-swatches-label">${row.label}</span>
+          ${row.colors.map((c) => html`
+            <div
+              class="cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? "is-selected" : ""}"
+              style="background:${c.value};"
+              data-name="${c.name ?? ""}"
+              @click="${() => onSelect(c)}"
+              role="button"
+              aria-label="${c.name ?? c.value}"
+            ></div>
+          `)}
+        </div>
+      `)}
+    </div>
+  `;
+}
+function pickerPanelTemplate(p) {
+  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;
+  const thumbX = s;
+  const thumbY = 100 - l;
+  const cssColor = alpha < 100 ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})` : hex;
+  const alphaGradient = `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;
+  const inputsBlock = inputMode === "hex" ? html`
+        <div class="cp-input-group" style="flex:3">
+          <input class="cp-input" type="text" .value="${hex}" maxlength="7"
+            @input="${p.onHexInput}">
+          <span class="cp-input-label">HEX</span>
+        </div>
+        ${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}
+      ` : inputMode === "rgb" ? html`
+        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(r)}" min="0" max="255" @input="${(e) => p.onRgbInput(0, e)}"><span class="cp-input-label">R</span></div>
+        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(g)}" min="0" max="255" @input="${(e) => p.onRgbInput(1, e)}"><span class="cp-input-label">G</span></div>
+        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(b)}" min="0" max="255" @input="${(e) => p.onRgbInput(2, e)}"><span class="cp-input-label">B</span></div>
+        ${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}
+      ` : html`
+        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(h)}" min="0" max="360" @input="${(e) => p.onHslInput(0, e)}"><span class="cp-input-label">H</span></div>
+        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(s)}" min="0" max="100" @input="${(e) => p.onHslInput(1, e)}"><span class="cp-input-label">S%</span></div>
+        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(l)}" min="0" max="100" @input="${(e) => p.onHslInput(2, e)}"><span class="cp-input-label">L%</span></div>
+        ${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}
+      `;
+  return html`
+    <!-- Canvas 2D -->
+    <div class="cp-canvas"
+      style="background: hsl(${h},100%,50%);"
+      @mousedown="${p.onCanvasMousedown}"
+    >
+      <div class="cp-thumb"
+        style="left:${thumbX}%;top:${thumbY}%;background:${cssColor};"
+      ></div>
+    </div>
+
+    <!-- Sliders -->
+    <div class="cp-sliders">
+      <div class="cp-preview-dot">
+        <div class="cp-preview-color" style="background:${cssColor};"></div>
+      </div>
+      <div class="cp-sliders-stack">
+        <input type="range" class="cp-range cp-range-hue"
+          min="0" max="360" .value="${String(h)}"
+          @input="${p.onHueInput}">
+        ${showAlpha ? html`
+          <div class="cp-alpha-wrap" style="height:10px;">
+            <div class="cp-alpha-checker">
+              <input type="range" class="cp-range cp-range-alpha"
+                min="0" max="100" .value="${String(Math.round(alpha))}"
+                style="background:${alphaGradient};"
+                @input="${p.onAlphaInput}">
+            </div>
+          </div>` : nothing}
+      </div>
+    </div>
+
+    <!-- Inputs -->
+    <div class="cp-inputs-wrap">
+      <button class="cp-mode-btn" title="Cambiar modo" @click="${p.onModeToggle}">
+        ${ROTATE_SVG}
+      </button>
+      <div style="display:flex;gap:var(--lib-space-xs);flex:1;">
+        ${inputsBlock}
+      </div>
+    </div>
+
+    <!-- Saved colors -->
+    <div class="cp-saved">
+      <span class="cp-saved-label">Guardados</span>
+      ${savedColors.map((sc) => html`
+        <div class="cp-swatch cp-swatch-sm"
+          style="background:${sc};"
+          data-name="${sc}"
+          @click="${() => p.onSavedClick(sc)}"
+        ></div>
+      `)}
+      <button class="cp-saved-add" title="Guardar color actual" @click="${p.onSaveColor}">+</button>
+    </div>
+
+    <!-- Actions -->
+    <div class="cp-actions">
+      <button class="cp-btn cp-btn-cancel" @click="${p.onCancel}">Cancelar</button>
+      <button class="cp-btn cp-btn-ok" @click="${p.onApply}">Aplicar</button>
+    </div>
+  `;
+}
+function colorPickerTemplate(props) {
+  const {
+    variant,
+    /*label,*/
+    hex,
+    alpha,
+    panelOpen,
+    onTriggerClick
+  } = props;
+  const panel = html`
+    <div class="cp ${variant === "trigger" && panelOpen ? "is-open" : ""}">
+      ${pickerPanelTemplate(props)}
+    </div>
+  `;
+  if (variant === "inline") {
+    return panel;
+  }
+  const cssColor = alpha < 100 ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})` : hex;
+  return html`
+    <div class="cp-trigger-wrap">
+      <button
+        class="cp-trigger ${panelOpen ? "is-open" : ""}"
+        @click="${onTriggerClick}"
+        aria-expanded="${panelOpen}"
+        aria-haspopup="true"
+      >
+        <div class="cp-trigger-dot">
+          <div class="cp-trigger-color" style="background:${cssColor};"></div>
+        </div>
+        <span>${hex.toUpperCase()}</span>
+        ${CARET_SVG}
+      </button>
+      ${panel}
+    </div>
+  `;
+}
+export {
+  colorPickerTemplate,
+  pickerPanelTemplate,
+  swatchGridTemplate
+};
+//# sourceMappingURL=index303.js.map

package/dist/index303.js.map

@@ -0,0 +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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"}

package/dist/index304.js

@@ -0,0 +1,46 @@
+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" }
+    ]
+  }
+];
+export {
+  SHIBUI_SWATCHES
+};
+//# sourceMappingURL=index304.js.map

package/dist/index304.js.map

@@ -0,0 +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;"}

package/dist/index305.js

@@ -0,0 +1,84 @@
+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>
+  `;
+}
+export {
+  paginationTemplate
+};
+//# sourceMappingURL=index305.js.map

package/dist/index305.js.map

@@ -0,0 +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;"}

package/dist/index306.js

@@ -0,0 +1,5 @@
+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)}}';
+export {
+  paginationCss as default
+};
+//# sourceMappingURL=index306.js.map

package/dist/index306.js.map

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

package/dist/index307.js

@@ -0,0 +1,74 @@
+import { nothing, html } from "lit";
+import { unsafeHTML as o } from "./index353.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>
+  `;
+}
+export {
+  tabsTemplate
+};
+//# sourceMappingURL=index307.js.map

package/dist/index307.js.map

@@ -0,0 +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;"}

package/dist/index308.js

@@ -0,0 +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}}';
+export {
+  tabsCss as default
+};
+//# sourceMappingURL=index308.js.map

package/dist/index308.js.map

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

package/dist/index309.js

@@ -0,0 +1,5 @@
+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)}}}";
+export {
+  modalCss as default
+};
+//# sourceMappingURL=index309.js.map

package/dist/index309.js.map

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

package/dist/index31.js

@@ -0,0 +1,25 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { visuallyHiddenTemplate } from "./index246.js";
+import styles from "./index247.js";
+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;
+  return result;
+};
+let LibVisuallyHidden = class extends LitElement {
+  render() {
+    return visuallyHiddenTemplate();
+  }
+};
+LibVisuallyHidden.styles = [css`${unsafeCSS(styles)}`];
+LibVisuallyHidden = __decorateClass([
+  customElement("lib-visually-hidden")
+], LibVisuallyHidden);
+export {
+  LibVisuallyHidden
+};
+//# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -0,0 +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;"}

package/dist/index310.js

@@ -0,0 +1,84 @@
+import { nothing, html } from "lit";
+function panelWrapClass(p) {
+  const classes = ["mo-panel-wrap"];
+  if (p.size !== "md") classes.push(`mo-${p.size}`);
+  if (p._animate === "slide-up") classes.push("mo-slide-up");
+  if (p._animate === "slide-down") classes.push("mo-slide-down");
+  if (p.dark) classes.push("mo-dark");
+  return classes.join(" ");
+}
+function panelClass(variant) {
+  const classes = ["mo-panel"];
+  if (variant === "editorial") classes.push("is-editorial");
+  if (variant === "danger") classes.push("is-danger");
+  return classes.join(" ");
+}
+function iconClass(tone) {
+  const classes = ["mo-header-icon"];
+  if (tone !== "default") classes.push(`is-${tone}`);
+  return classes.join(" ");
+}
+function modalTemplate(p) {
+  return html`
+    <div
+      class="mo-backdrop"
+      part="backdrop"
+      @click="${p.onBackdropClick}"
+    >
+      <div
+        class="${panelWrapClass(p)}"
+        part="panel-wrap"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mo-title"
+        @click="${(e) => e.stopPropagation()}"
+      >
+        <div class="${panelClass(p.variant)}" part="panel">
+
+          <!-- ── HEADER ── -->
+          <div class="mo-header" part="header">
+
+            <!-- Ícono opcional — tone prop activa el wrapper -->
+            ${p.iconTone !== null ? html`
+              <div class="${iconClass(p.iconTone)}" part="icon">
+                <slot name="icon"></slot>
+              </div>
+            ` : nothing}
+
+            <!-- Título y subtítulo -->
+            <div class="mo-header-text">
+              <h2 id="mo-title" class="mo-title">${p.heading}</h2>
+              ${p.subtitle ? html`<p class="mo-subtitle">${p.subtitle}</p>` : nothing}
+            </div>
+
+            <!-- Botón de cierre -->
+            <button
+              class="mo-close"
+              part="close-btn"
+              aria-label="Cerrar"
+              @click="${p.onClose}"
+            >×</button>
+          </div>
+
+          <!-- ── BODY — slot default ── -->
+          <div class="mo-body" part="body">
+            <slot></slot>
+          </div>
+
+          <!-- ── FOOTER ── -->
+          <div class="mo-footer" part="footer">
+            ${p.footerInfo ? html`
+              <span class="mo-footer-info">${p.footerInfo}</span>
+            ` : nothing}
+            <slot name="footer"></slot>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  `;
+}
+export {
+  modalTemplate
+};
+//# sourceMappingURL=index310.js.map