@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index204.js

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

package/dist/index204.js.map

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

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

package/dist/index205.js.map

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

@@ -1,5 +1,54 @@
-const closeButtonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.close-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;color:var(--text-muted);line-height:1;outline:none;transition:color var(--duration-fast) var(--ease-default),background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce),opacity var(--duration-base)}.close-btn:disabled{opacity:.35;pointer-events:none;cursor:not-allowed}.close-btn:focus-visible{box-shadow:0 0 0 3px var(--color-ink-20)}:host([size="sm"]) .close-btn{width:24px;height:24px}:host([size="md"]) .close-btn{width:32px;height:32px}:host([size="lg"]) .close-btn{width:40px;height:40px}:host([size="xl"]) .close-btn{width:48px;height:48px}:host([variant="ghost"]) .close-btn{color:var(--text-muted);border-radius:var(--radius-sm)}:host([variant="ghost"]) .close-btn:hover{color:var(--text-primary);background:var(--color-washi-200)}:host([variant="ghost"]) .close-btn:active{transform:scale(.88)}:host([variant="subtle"]) .close-btn{color:var(--text-secondary);border-radius:var(--radius-full)}:host([variant="subtle"]) .close-btn:hover{color:var(--text-primary);background:var(--color-washi-200);transform:rotate(90deg)}:host([variant="subtle"]) .close-btn:active{transform:rotate(90deg) scale(.88);background:var(--color-washi-300)}:host([variant="outlined"]) .close-btn{color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm)}:host([variant="outlined"]) .close-btn:hover{color:var(--text-primary);background:var(--bg-surface);border-color:var(--border-strong)}:host([variant="outlined"]) .close-btn:active{transform:scale(.9)}:host([variant="filled"]) .close-btn{color:var(--bg-elevated);background:var(--color-washi-800);border-radius:var(--radius-sm)}:host([variant="filled"]) .close-btn:hover{background:var(--color-washi-900);transform:scale(1.05)}:host([variant="filled"]) .close-btn:active{transform:scale(.9)}:host([variant="filled-round"]) .close-btn{color:var(--bg-elevated);background:var(--color-washi-800);border-radius:var(--radius-full)}:host([variant="filled-round"]) .close-btn:hover{background:var(--color-washi-900);transform:rotate(90deg) scale(1.08)}:host([variant="filled-round"]) .close-btn:active{transform:rotate(90deg) scale(.9)}:host([variant="danger"]) .close-btn{color:var(--color-error);border-radius:var(--radius-sm)}:host([variant="danger"]) .close-btn:hover{color:var(--color-error);background:#651f241a}:host([variant="danger"]) .close-btn:active{transform:scale(.88)}:host([variant="danger"]) .close-btn:focus-visible{box-shadow:0 0 0 3px #651f2426}:host([variant="on-dark"]) .close-btn{color:#ffffff73;border-radius:var(--radius-full)}:host([variant="on-dark"]) .close-btn:hover{color:#ffffffe6;background:#ffffff1a;transform:rotate(90deg)}:host([variant="on-dark"]) .close-btn:active{transform:rotate(90deg) scale(.88)}:host([variant="on-dark"]) .close-btn:focus-visible{box-shadow:0 0 0 3px #fff3}@media(prefers-reduced-motion:reduce){.close-btn{transition:none}}}';
+import { html } from "lit";
+const chevronSvg = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
+  </svg>`;
+function dropdownTemplate(ctx) {
+  return html`
+    <div class="dd" part="root">
+
+      <!-- ── Trigger ── -->
+      <button
+        class="dd-trigger"
+        part="trigger"
+        aria-haspopup="true"
+        aria-expanded="${ctx.open}"
+        aria-label="${ctx.ariaLabel || ctx.label}"
+        @click="${() => ctx._toggle()}"
+        @keydown="${(e) => ctx._handleTriggerKey(e)}"
+      >
+        <slot name="trigger">${ctx.label}</slot>
+        <span class="dd-chevron" part="chevron">${chevronSvg}</span>
+      </button>
+
+      <!-- ── Panel ── -->
+      <div
+        class="dd-menu"
+        part="menu"
+        role="menu"
+        style="${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ""}"
+        @keydown="${(e) => ctx._handleMenuKey(e)}"
+      >
+        <!-- Header opcional (búsqueda, título) -->
+        <div class="dd-header-wrap" part="header-wrap"
+          style="${ctx._hasSlot("header") ? "" : "display:none"}">
+          <slot name="header"></slot>
+        </div>
+
+        <!-- Contenido: items, separadores, grupos -->
+        <slot></slot>
+
+        <!-- Footer opcional (acciones, confirmación) -->
+        <div class="dd-footer-wrap" part="footer-wrap"
+          style="${ctx._hasSlot("footer") ? "" : "display:none"}">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+
+    </div>
+  `;
+}
 export {
-  closeButtonCss as default
+  dropdownTemplate
 };
 //# sourceMappingURL=index206.js.map

package/dist/index206.js.map

@@ -1 +1 @@
-{"version":3,"file":"index206.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index206.js","sources":["../src/components/molecules/dropdown/lib-dropdown.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibDropdown } from './lib-dropdown.component';\n\n/* Chevron SVG inline — no depende de Phosphor ni ninguna lib */\nconst chevronSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/>\n  </svg>`;\n\nexport function dropdownTemplate(ctx: LibDropdown): TemplateResult {\n  return html`\n    <div class=\"dd\" part=\"root\">\n\n      <!-- ── Trigger ── -->\n      <button\n        class=\"dd-trigger\"\n        part=\"trigger\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${ctx.open}\"\n        aria-label=\"${ctx.ariaLabel || ctx.label}\"\n        @click=\"${(): void => ctx._toggle()}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleTriggerKey(e)}\"\n      >\n        <slot name=\"trigger\">${ctx.label}</slot>\n        <span class=\"dd-chevron\" part=\"chevron\">${chevronSvg}</span>\n      </button>\n\n      <!-- ── Panel ── -->\n      <div\n        class=\"dd-menu\"\n        part=\"menu\"\n        role=\"menu\"\n        style=\"${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ''}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleMenuKey(e)}\"\n      >\n        <!-- Header opcional (búsqueda, título) -->\n        <div class=\"dd-header-wrap\" part=\"header-wrap\"\n          style=\"${ctx._hasSlot('header') ? '' : 'display:none'}\">\n          <slot name=\"header\"></slot>\n        </div>\n\n        <!-- Contenido: items, separadores, grupos -->\n        <slot></slot>\n\n        <!-- Footer opcional (acciones, confirmación) -->\n        <div class=\"dd-footer-wrap\" part=\"footer-wrap\"\n          style=\"${ctx._hasSlot('footer') ? '' : 'display:none'}\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAA6B;AAAA;AAAA;AAAA;AAK5B,SAAS,iBAAiB,KAAkC;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQgB,IAAI,IAAI;AAAA,sBACX,IAAI,aAAa,IAAI,KAAK;AAAA,kBAC9B,MAAY,IAAI,SAAS;AAAA,oBACvB,CAAC,MAA2B,IAAI,kBAAkB,CAAC,CAAC;AAAA;AAAA,+BAEzC,IAAI,KAAK;AAAA,kDACU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ3C,IAAI,WAAW,kBAAkB,IAAI,QAAQ,KAAK,EAAE;AAAA,oBACjD,CAAC,MAA2B,IAAI,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIlD,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAS5C,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;"}

package/dist/index207.js

@@ -1,14 +1,5 @@
-import { html } from "lit";
-function glassCardTemplate(_props) {
-  return html`
-    <div class="glass-card">
-      <div class="glass-card__slot">
-        <slot></slot>
-      </div>
-    </div>
-  `;
-}
+const dropdownCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.dd{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.dd-trigger{display:inline-flex;align-items:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);padding:calc(var(--lib-space-sm) + var(--lib-space-xs)) var(--lib-space-md);white-space:nowrap;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.dd-trigger:hover{background:var(--bg-surface);border-color:var(--border-strong)}:host([open]) .dd-trigger{background:var(--bg-surface);border-color:var(--color-washi-700)}.dd-trigger:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dd-chevron{display:flex;align-items:center;flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out);line-height:1}.dd-chevron svg{width:12px;height:12px}:host([open]) .dd-chevron{transform:rotate(180deg)}:host([variant="ghost"]) .dd-trigger{background:transparent;border-color:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .dd-trigger:hover{background:var(--bg-surface);border-color:transparent}:host([variant="ghost"][open]) .dd-trigger{background:var(--bg-surface);border-color:transparent}:host([variant="filled"]) .dd-trigger{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="filled"]) .dd-trigger:hover{background:var(--color-washi-800);border-color:var(--color-washi-800)}:host([variant="filled"]) .dd-chevron{color:var(--color-washi-400)}:host([variant="kaki"]) .dd-trigger{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([variant="kaki"]) .dd-trigger:hover{background:var(--color-kaki-600);border-color:var(--color-kaki-600)}:host([variant="kaki"]) .dd-chevron{color:#fff9}.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:300;min-width:var(--dd-min-width, 200px);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s var(--ease-out),transform .2s var(--ease-out)}:host([open]) .dd-menu{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}:host([align="right"]) .dd-menu{left:auto;right:0}::slotted(.dd-item){display:flex!important;align-items:center;gap:.75rem;width:100%;padding:.75rem var(--lib-space-md);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}::slotted(.dd-item:hover){background:var(--bg-surface);color:var(--text-primary)}::slotted(.dd-item.is-active){color:var(--text-primary);background:var(--color-washi-100)}::slotted(.dd-item.is-disabled){opacity:.38;cursor:not-allowed;pointer-events:none}::slotted(.dd-item.is-danger){color:var(--color-error)}::slotted(.dd-item.is-danger:hover){background:var(--color-error-light);color:var(--color-error)}::slotted(.dd-sep){display:block!important;height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0;border:none}::slotted(.dd-group-label){display:block!important;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding:.75rem var(--lib-space-md) var(--lib-space-xs)}.dd-header-wrap{border-bottom:1px solid var(--border-subtle)}.dd-footer-wrap{border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md)}.dd-scroll-wrap{max-height:220px;overflow-y:auto;overscroll-behavior:contain}.dd-scroll-wrap::-webkit-scrollbar{width:4px}.dd-scroll-wrap::-webkit-scrollbar-track{background:transparent}.dd-scroll-wrap::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}:host([dark]) .dd-menu{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([dark]) .dd-header-wrap{border-color:var(--color-washi-800)}:host([dark]) .dd-footer-wrap{border-color:var(--color-washi-800)}:host([dark]) ::slotted(.dd-item){color:var(--color-washi-400)}:host([dark]) ::slotted(.dd-item:hover){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-active){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-danger){color:#e87a6a}:host([dark]) ::slotted(.dd-item.is-danger:hover){background:#8c2a1a4d;color:#e87a6a}:host([dark]) ::slotted(.dd-sep){background:var(--color-washi-800)}:host([dark]) ::slotted(.dd-group-label){color:var(--color-washi-600)}}';
 export {
-  glassCardTemplate
+  dropdownCss as default
 };
 //# sourceMappingURL=index207.js.map

package/dist/index207.js.map

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