@shibui-ui/ui 1.25.0 → 1.25.1

package/dist/index223.js

@@ -1,5 +1,136 @@
-const timelineCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.tl{display:flex;flex-direction:column;gap:0}.tl-item{display:grid;grid-template-columns:40px 1fr;gap:0 var(--lib-space-md);position:relative}.tl-spine{display:flex;flex-direction:column;align-items:center;position:relative}.tl-node{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform var(--duration-base),box-shadow var(--duration-base)}.tl-node-dot{background:var(--bg-elevated);border:2px solid var(--color-washi-700)}.tl-node-dot:after{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-washi-700)}.tl-node-icon{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary)}.tl-node-avatar{background:var(--color-washi-200);border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:9px;color:var(--text-secondary)}.nd-kaki.tl-node-dot{border-color:var(--color-kaki-500)}.nd-kaki.tl-node-dot:after{background:var(--color-kaki-500)}.nd-kaki.tl-node-icon{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.nd-kaki.tl-node-avatar{background:var(--color-kaki-100);border-color:var(--color-kaki-100);color:var(--color-kaki-600)}.nd-celadon.tl-node-dot{border-color:var(--color-celadon-500)}.nd-celadon.tl-node-dot:after{background:var(--color-celadon-500)}.nd-celadon.tl-node-icon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.nd-celadon.tl-node-avatar{background:var(--color-celadon-100);border-color:var(--color-celadon-100);color:var(--color-celadon-600)}.nd-error.tl-node-dot{border-color:var(--color-error)}.nd-error.tl-node-dot:after{background:var(--color-error)}.nd-error.tl-node-icon{background:#fff8f7;border-color:#f5c4bc;color:var(--color-error)}.nd-muted.tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.nd-muted.tl-node-dot:after{background:var(--color-washi-300)}.nd-muted.tl-node-icon{background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-muted)}@keyframes tl-pulse{0%{box-shadow:0 0 #b85a1e59}70%{box-shadow:0 0 0 8px #b85a1e00}to{box-shadow:0 0 #b85a1e00}}.tl-item.is-active .tl-node-dot{border-color:var(--color-kaki-500);animation:tl-pulse 2s infinite}.tl-item.is-active .tl-node-dot:after{background:var(--color-kaki-500)}.tl-item.is-active .tl-title{color:var(--text-primary)}.tl-item.is-done .tl-node-dot{background:var(--color-washi-900);border-color:var(--color-washi-900)}.tl-item.is-done .tl-node-dot:after{display:none}.tl-item.is-done .tl-node-dot:before{content:"";width:6px;height:10px;border-right:2px solid var(--color-white);border-bottom:2px solid var(--color-white);transform:rotate(45deg) translate(-1px,-2px)}.tl-item.is-error .tl-node-dot{background:var(--color-error);border-color:var(--color-error)}.tl-item.is-error .tl-node-dot:after{display:none}.tl-item.is-error .tl-node-dot:before{content:"!";font-family:var(--lib-font-mono);font-size:11px;font-weight:700;color:var(--color-white);line-height:1}.tl-item.is-error .tl-title{color:var(--color-error)}.tl-item.is-pending .tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.tl-item.is-pending .tl-node-dot:after{background:var(--color-washi-300);width:6px;height:6px}.tl-item.is-pending .tl-title{color:var(--text-muted)}.tl-item.is-pending .tl-body{opacity:.5}.tl-line{width:1px;flex:1;background:var(--border-default);margin:var(--lib-space-xs) 0;min-height:var(--lib-space-lg);position:relative;overflow:hidden}.tl-line.dashed{background:repeating-linear-gradient(to bottom,var(--border-default) 0,var(--border-default) 4px,transparent 4px,transparent 8px)}.tl-line.progress{background:var(--border-subtle)}.tl-line.progress:after{content:"";position:absolute;top:0;left:0;right:0;height:var(--tl-progress, 0%);background:var(--color-kaki-500);transition:height var(--duration-slower) var(--ease-out)}.tl-content{padding-bottom:var(--lib-space-lg);padding-top:2px}.tl-item:last-child .tl-content{padding-bottom:0}.tl-timestamp{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);margin-bottom:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);line-height:1;padding-top:6px}.tl-timestamp-dot{width:4px;height:4px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.tl-title{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-snug);margin-bottom:var(--lib-space-sm)}.tl-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);opacity:.85}.tl-body p{margin-bottom:var(--lib-space-sm)}.tl-body p:last-child{margin-bottom:0}.tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lib-space-sm);margin-top:var(--lib-space-sm)}.tl-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-md);margin-top:var(--lib-space-xs)}.tl-item.is-active .tl-card{border-color:var(--color-kaki-200);background:var(--color-kaki-50)}.tl-item.is-done .tl-card{background:var(--bg-surface)}.tl-item.is-error .tl-card{border-color:#c44030;background:#fff8f7}.tl-item.is-pending .tl-card{background:var(--bg-surface);opacity:.6}.tl-media{margin-top:var(--lib-space-md);border-top:1px solid var(--border-subtle);padding-top:var(--lib-space-md);display:flex;gap:var(--lib-space-sm);flex-wrap:wrap}.tl-media-thumb{width:64px;height:48px;background:var(--border-subtle);border:1px solid var(--border-default);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted)}.tl-badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:2px var(--lib-space-sm)}.tl-badge:before{content:"";width:4px;height:4px;border-radius:var(--radius-full);background:currentcolor;opacity:.65;flex-shrink:0}.tl-badge-default{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle)}.tl-badge-kaki{color:var(--color-kaki-500);background:var(--color-kaki-50);border:1px solid var(--color-kaki-100)}.tl-badge-celadon{color:var(--color-celadon-500);background:var(--color-celadon-50);border:1px solid var(--color-celadon-100)}.tl-badge-error{color:var(--color-error);background:#fff8f7;border:1px solid #F5C4BC}.tl-avatar{width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:7px;color:var(--text-secondary);border:1px solid var(--border-subtle);flex-shrink:0}.tl-item.is-collapsed .tl-body,.tl-item.is-collapsed .tl-media,.tl-item.is-collapsed .tl-card-body{display:none}.tl-item.is-collapsed .tl-content{padding-bottom:var(--lib-space-md)}.tl-expand-btn{background:none;border:none;cursor:pointer;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);padding:0;margin-top:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);transition:color var(--duration-fast)}.tl-expand-btn:hover{color:var(--text-primary)}:host([size="sm"]) .tl-item{grid-template-columns:28px 1fr}:host([size="sm"]) .tl-node{width:20px;height:20px}:host([size="sm"]) .tl-node-dot:after{width:6px;height:6px}:host([size="sm"]) .tl-node-icon{font-size:11px}:host([size="sm"]) .tl-node-avatar{font-size:7px}:host([size="sm"]) .tl-line{min-height:var(--lib-space-md)}:host([size="sm"]) .tl-content{padding-bottom:var(--lib-space-md)}:host([size="sm"]) .tl-timestamp{font-size:9px;padding-top:2px}:host([size="sm"]) .tl-title{font-size:var(--text-sm)}:host([size="sm"]) .tl-body{font-size:var(--text-xs)}:host([size="sm"]) .tl-card{padding:var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .tl-item{grid-template-columns:48px 1fr;gap:0 var(--lib-space-md)}:host([size="lg"]) .tl-node{width:36px;height:36px}:host([size="lg"]) .tl-node-dot:after{width:10px;height:10px}:host([size="lg"]) .tl-node-icon{font-size:18px}:host([size="lg"]) .tl-line{min-height:var(--lib-space-lg)}:host([size="lg"]) .tl-content{padding-bottom:var(--lib-space-xl);padding-top:4px}:host([size="lg"]) .tl-timestamp{font-size:11px;padding-top:8px}:host([size="lg"]) .tl-title{font-size:var(--text-md)}:host([size="lg"]) .tl-body{font-size:var(--text-sm)}:host([size="lg"]) .tl-card{padding:var(--lib-space-md) var(--lib-space-lg)}}';
+import { nothing, html } from "lit";
+function renderValue(v, unit) {
+  return html`${v}${unit ? html`<span class="rs-value-unit">${unit}</span>` : nothing}`;
+}
+function renderMarks(marks, pct) {
+  if (!marks.length) return html``;
+  return html`
+    <div class="rs-marks">
+      ${marks.map((m) => html`
+        <div
+          class="rs-mark ${m.pct <= pct ? "is-filled" : ""}"
+          style="left: ${m.pct}%"
+        >
+          ${m.label ? html`<span class="rs-mark-label">${m.label}</span>` : nothing}
+        </div>
+      `)}
+    </div>
+  `;
+}
+function renderLimits(show, low, high) {
+  if (!show) return html``;
+  return html`
+    <div class="rs-limits">
+      <span class="rs-limit">${low}</span>
+      <span class="rs-limit">${high}</span>
+    </div>
+  `;
+}
+function renderTooltip(show, pct, value, unit) {
+  if (!show) return html``;
+  return html`
+    <div class="rs-tooltip-wrap" style="left: ${pct}%">
+      <span class="rs-tooltip-bubble">${value}${unit}</span>
+    </div>
+  `;
+}
+function renderTrack(p) {
+  if (p.dual) {
+    return html`
+      <div class="rs-track-wrap">
+        <div class="rs-track">
+          <div
+            class="rs-fill-dual"
+            style="left: ${p.minPct}%; right: ${100 - p.maxPct}%"
+          ></div>
+        </div>
+        <input
+          type="range"
+          class="rs-input-min"
+          min=${p.min} max=${p.max} step=${p.step}
+          .value=${String(p.valueMin)}
+          ?disabled=${p.disabled}
+          aria-label="Mínimo"
+          @input=${p.onInputMin}
+        >
+        <input
+          type="range"
+          class="rs-input-max"
+          min=${p.min} max=${p.max} step=${p.step}
+          .value=${String(p.valueMax)}
+          ?disabled=${p.disabled}
+          aria-label="Máximo"
+          @input=${p.onInputMax}
+        >
+      </div>
+    `;
+  }
+  if (p.vertical) {
+    return html`
+      <div class="rs-vert-wrap">
+        <div class="rs-track-wrap">
+          <div class="rs-track">
+            <div class="rs-fill" style="width: ${p.pct}%"></div>
+          </div>
+          <input
+            type="range"
+            min=${p.min} max=${p.max} step=${p.step}
+            .value=${String(p.value)}
+            ?disabled=${p.disabled}
+            @input=${p.onInput}
+          >
+        </div>
+      </div>
+    `;
+  }
+  return html`
+    <div class="rs-track-wrap">
+      <div class="rs-track">
+        <div class="rs-fill" style="width: ${p.pct}%"></div>
+      </div>
+      <input
+        type="range"
+        min=${p.min} max=${p.max} step=${p.step}
+        .value=${String(p.value)}
+        ?disabled=${p.disabled}
+        @input=${p.onInput}
+      >
+      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}
+    </div>
+  `;
+}
+function rangeSliderTemplate(p) {
+  const valueDisplay = p.dual ? html`<span class="rs-value">
+        ${p.valueMin} — ${p.valueMax}
+        ${p.unit ? html`<span class="rs-value-unit">${p.unit}</span>` : nothing}
+      </span>` : html`<span class="rs-value">${renderValue(p.value, p.unit)}</span>`;
+  return html`
+    <div class="rs">
+
+      ${!p.vertical && (p.label || p.dual) ? html`
+        <div class="rs-label-row">
+          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
+          ${valueDisplay}
+        </div>
+      ` : nothing}
+
+      ${renderTrack(p)}
+
+      ${p.vertical ? html`
+        <div class="rs-label-row">
+          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
+          ${valueDisplay}
+        </div>
+      ` : nothing}
+
+      ${renderMarks(p.marks, p.pct)}
+
+      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}
+
+    </div>
+  `;
+}
 export {
-  timelineCss as default
+  rangeSliderTemplate
 };
 //# sourceMappingURL=index223.js.map

package/dist/index223.js.map

@@ -1 +1 @@
-{"version":3,"file":"index223.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index223.js","sources":["../src/components/molecules/range-slider/lib-range-slider.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { RsSize, RsTone, RsMark } from './lib-range-slider.component';\n\nexport interface RangeSliderTemplateProps {\n  /* sizing / modes */\n  size:     RsSize;\n  tone:     RsTone;\n  dual:     boolean;\n  vertical: boolean;\n  disabled: boolean;\n  tooltip:  boolean;\n\n  /* range attrs */\n  min:  number;\n  max:  number;\n  step: number;\n\n  /* values */\n  value:    number;   // single mode\n  valueMin: number;   // dual low\n  valueMax: number;   // dual high\n\n  /* computed pcts (0–100) */\n  pct:    number;     // single fill\n  minPct: number;     // dual fill left\n  maxPct: number;     // dual fill right\n\n  /* display */\n  label:        string;\n  unit:         string;\n  showLimits:   boolean;\n  limitMinText: string;\n  limitMaxText: string;\n  marks:        RsMark[];\n\n  /* handlers */\n  onInput:    (e: Event) => void;\n  onInputMin: (e: Event) => void;\n  onInputMax: (e: Event) => void;\n}\n\n/* ── Value display ───────────────────────────────────────── */\nfunction renderValue(v: number | string, unit: string): TemplateResult {\n  return html`${v}${unit ? html`<span class=\"rs-value-unit\">${unit}</span>` : nothing}`;\n}\n\n/* ── Marks ───────────────────────────────────────────────── */\nfunction renderMarks(marks: RsMark[], pct: number): TemplateResult {\n  if (!marks.length) return html``;\n  return html`\n    <div class=\"rs-marks\">\n      ${marks.map(m => html`\n        <div\n          class=\"rs-mark ${m.pct <= pct ? 'is-filled' : ''}\"\n          style=\"left: ${m.pct}%\"\n        >\n          ${m.label ? html`<span class=\"rs-mark-label\">${m.label}</span>` : nothing}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ── Limits ──────────────────────────────────────────────── */\nfunction renderLimits(show: boolean, low: string, high: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-limits\">\n      <span class=\"rs-limit\">${low}</span>\n      <span class=\"rs-limit\">${high}</span>\n    </div>\n  `;\n}\n\n/* ── Tooltip ─────────────────────────────────────────────── */\nfunction renderTooltip(show: boolean, pct: number, value: number, unit: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-tooltip-wrap\" style=\"left: ${pct}%\">\n      <span class=\"rs-tooltip-bubble\">${value}${unit}</span>\n    </div>\n  `;\n}\n\n/* ── Track content ───────────────────────────────────────── */\nfunction renderTrack(p: RangeSliderTemplateProps): TemplateResult {\n  if (p.dual) {\n    return html`\n      <div class=\"rs-track-wrap\">\n        <div class=\"rs-track\">\n          <div\n            class=\"rs-fill-dual\"\n            style=\"left: ${p.minPct}%; right: ${100 - p.maxPct}%\"\n          ></div>\n        </div>\n        <input\n          type=\"range\"\n          class=\"rs-input-min\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMin)}\n          ?disabled=${p.disabled}\n          aria-label=\"Mínimo\"\n          @input=${p.onInputMin}\n        >\n        <input\n          type=\"range\"\n          class=\"rs-input-max\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMax)}\n          ?disabled=${p.disabled}\n          aria-label=\"Máximo\"\n          @input=${p.onInputMax}\n        >\n      </div>\n    `;\n  }\n\n  if (p.vertical) {\n    return html`\n      <div class=\"rs-vert-wrap\">\n        <div class=\"rs-track-wrap\">\n          <div class=\"rs-track\">\n            <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n          </div>\n          <input\n            type=\"range\"\n            min=${p.min} max=${p.max} step=${p.step}\n            .value=${String(p.value)}\n            ?disabled=${p.disabled}\n            @input=${p.onInput}\n          >\n        </div>\n      </div>\n    `;\n  }\n\n  /* single horizontal */\n  return html`\n    <div class=\"rs-track-wrap\">\n      <div class=\"rs-track\">\n        <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n      </div>\n      <input\n        type=\"range\"\n        min=${p.min} max=${p.max} step=${p.step}\n        .value=${String(p.value)}\n        ?disabled=${p.disabled}\n        @input=${p.onInput}\n      >\n      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}\n    </div>\n  `;\n}\n\n/**\n * Template principal de lib-range-slider.\n */\nexport function rangeSliderTemplate(p: RangeSliderTemplateProps): TemplateResult {\n  /* Dual value display: \"120 — 480 €\" */\n  const valueDisplay = p.dual\n    ? html`<span class=\"rs-value\">\n        ${p.valueMin} — ${p.valueMax}\n        ${p.unit ? html`<span class=\"rs-value-unit\">${p.unit}</span>` : nothing}\n      </span>`\n    : html`<span class=\"rs-value\">${renderValue(p.value, p.unit)}</span>`;\n\n  return html`\n    <div class=\"rs\">\n\n      ${!p.vertical && (p.label || p.dual) ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderTrack(p)}\n\n      ${p.vertical ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderMarks(p.marks, p.pct)}\n\n      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}\n\n    </div>\n  `;\n}"],"names":[],"mappings":"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"}

package/dist/index224.js

@@ -1,95 +1,5 @@
-import { html, nothing } from "lit";
-import { styleMap as o } from "./index267.js";
-function timelineItemTemplate(props) {
-  const {
-    nodeType,
-    nodeColor,
-    icon,
-    avatar,
-    status,
-    lineVariant,
-    lineProgress,
-    hideLine,
-    timestamp,
-    title,
-    body,
-    card,
-    collapsed,
-    collapsible,
-    onToggleCollapse
-  } = props;
-  const itemCls = [
-    "tl-item",
-    status !== "default" ? `is-${status}` : "",
-    collapsed ? "is-collapsed" : ""
-  ].filter(Boolean).join(" ");
-  const nodeTypeCls = `tl-node-${nodeType}`;
-  const nodeColorCls = nodeColor !== "default" ? `nd-${nodeColor}` : "";
-  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();
-  const nodeInner = nodeType === "icon" ? html`<lib-icon name="${icon}" size="xs"></lib-icon>` : nodeType === "avatar" ? html`${avatar}` : nothing;
-  const lineCls = [
-    "tl-line",
-    lineVariant === "dashed" ? "dashed" : "",
-    lineVariant === "progress" ? "progress" : ""
-  ].filter(Boolean).join(" ");
-  const lineStyles = lineVariant === "progress" ? o({ "--tl-progress": `${lineProgress}%` }) : nothing;
-  const contentInner = card ? html`
-        <div class="tl-card">
-          ${title ? html`<p class="tl-title">${title}</p>` : nothing}
-          <div class="tl-card-body">
-            ${body ? html`<div class="tl-body">${body}</div>` : nothing}
-            <!-- slot por defecto para contenido libre dentro de la card -->
-            <slot></slot>
-            <!-- slot meta: badges, avatares, etc. -->
-            <div class="tl-meta">
-              <slot name="meta"></slot>
-            </div>
-            <!-- slot media: imágenes adjuntas -->
-            <slot name="media"></slot>
-          </div>
-        </div>` : html`
-        ${title ? html`<p class="tl-title">${title}</p>` : nothing}
-        ${body ? html`<div class="tl-body">${body}</div>` : html`<div class="tl-body"><slot></slot></div>`}
-        <div class="tl-meta">
-          <slot name="meta"></slot>
-        </div>`;
-  return html`
-    <div class="${itemCls}" role="listitem">
-
-      <!-- ── Spine: nodo + línea ── -->
-      <div class="tl-spine">
-        <div class="${nodeCls}">${nodeInner}</div>
-        ${hideLine ? nothing : html`<div class="${lineCls}" style="${lineStyles}"></div>`}
-      </div>
-
-      <!-- ── Content ── -->
-      <div class="tl-content">
-        ${timestamp ? html`
-              <div class="tl-timestamp">
-                <span class="tl-timestamp-dot"></span>
-                ${timestamp}
-              </div>` : nothing}
-
-        ${contentInner}
-
-        ${collapsible ? html`
-              <button
-                class="tl-expand-btn"
-                aria-expanded="${!collapsed}"
-                @click="${onToggleCollapse}"
-              >
-                <lib-icon
-                  name="${collapsed ? "caret-down" : "caret-up"}"
-                  size="xs"
-                ></lib-icon>
-                ${collapsed ? "Mostrar más" : "Mostrar menos"}
-              </button>` : nothing}
-      </div>
-
-    </div>
-  `;
-}
+const sliderCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.rs{--rs-thumb-size: 20px;--rs-track-h: 4px;--rs-fill-color: var(--color-washi-900);--rs-track-bg: var(--color-washi-200);display:flex;flex-direction:column;gap:var(--lib-space-sm);width:100%}.rs-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-md)}.rs-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}.rs-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);min-width:2.5rem;text-align:right;transition:color var(--duration-fast)}.rs-value-unit{color:var(--text-muted);font-size:10px;margin-left:1px}.rs-track-wrap{position:relative;height:var(--rs-thumb-size);display:flex;align-items:center}.rs-track{position:absolute;left:0;right:0;height:var(--rs-track-h);background:var(--rs-track-bg);border-radius:var(--radius-full);overflow:hidden;pointer-events:none}.rs-fill{position:absolute;left:0;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);transition:width var(--duration-fast),background var(--duration-base);pointer-events:none}.rs-fill-dual{position:absolute;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);pointer-events:none;transition:left var(--duration-fast),right var(--duration-fast)}.rs input[type=range]{position:absolute;left:0;right:0;width:100%;height:var(--rs-thumb-size);margin:0;padding:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;pointer-events:auto}.rs input[type=range]::-webkit-slider-runnable-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-moz-range-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm),0 0 0 0 transparent;cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base),transform var(--duration-fast);margin-top:calc((var(--rs-track-h) - var(--rs-thumb-size)) / 2)}.rs input[type=range]::-moz-range-thumb{width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm);cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base)}.rs input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-sm),0 0 0 3px var(--color-ink-10)}.rs input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15);box-shadow:var(--shadow-md)}:host([size="sm"]) .rs{--rs-thumb-size: 14px;--rs-track-h: 3px;gap:var(--lib-space-xs)}:host([size="sm"]) .rs-label{font-size:10px}:host([size="sm"]) .rs-value{font-size:10px}:host([size="lg"]) .rs{--rs-thumb-size: 26px;--rs-track-h: 8px;gap:var(--lib-space-md)}:host([size="lg"]) .rs-label{font-size:var(--text-sm)}:host([size="lg"]) .rs-value{font-size:var(--text-sm)}:host([tone="kaki"]) .rs{--rs-fill-color: var(--color-kaki-500)}:host([tone="celadon"]) .rs{--rs-fill-color: var(--color-celadon-500)}:host([tone="error"]) .rs{--rs-fill-color: var(--color-error)}:host([tone="washi"]) .rs{--rs-fill-color: var(--color-washi-700)}:host([tone="dark"]) .rs{--rs-track-bg: oklch(20% .02 45deg);--rs-fill-color: oklch(65% .02 55deg)}:host([tone="dark"]) .rs-label{color:#574a43}:host([tone="dark"]) .rs-value{color:#998c84}:host([tone="dark"]) .rs-limit{color:#312620}:host([tone="dark"]) .rs-mark{background:#231813}:host([tone="dark"]) .rs-mark.is-filled{background:#998c84}:host([tone="dark"]) .rs-mark-label{color:#312620}:host([tone="dark"]) .rs input[type=range]::-webkit-slider-thumb{background:#0c0604;border-color:#8a7d75}:host([tone="dark"]) .rs input[type=range]::-moz-range-thumb{background:#0c0604;border-color:#8a7d75}:host([disabled]) .rs{opacity:.38;pointer-events:none}:host([disabled]) .rs input[type=range]{cursor:not-allowed}.rs-limits{display:flex;justify-content:space-between;margin-top:calc(-1 * var(--lib-space-xs))}.rs-limit{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.rs-marks{position:relative;height:10px;margin-top:calc(-1 * var(--lib-space-sm));pointer-events:none}.rs-mark{position:absolute;top:0;transform:translate(-50%);width:1px;height:5px;background:var(--border-default)}.rs-mark.is-filled{background:var(--rs-fill-color)}.rs-mark-label{position:absolute;top:7px;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}.rs-tooltip-wrap{position:absolute;top:0;height:100%;display:flex;align-items:flex-start;pointer-events:none;transform:translate(-50%)}.rs-tooltip-bubble{position:absolute;bottom:calc(100% + var(--lib-space-sm));left:0;transform:translate(-50%);background:var(--color-washi-900);color:var(--color-washi-50);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);padding:2px var(--lib-space-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--duration-base)}.rs-tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-washi-900)}.rs-track-wrap:hover .rs-tooltip-bubble{opacity:1}:host([dual]) .rs-track{overflow:visible}:host([dual]) .rs-track-wrap{overflow:visible}:host([dual]) .rs input[type=range]{pointer-events:none}:host([dual]) .rs input[type=range]::-webkit-slider-thumb{pointer-events:auto}:host([dual]) .rs input[type=range]::-moz-range-thumb{pointer-events:auto}:host([dual]) .rs .rs-input-max{z-index:1}:host([vertical]) .rs{width:auto;align-items:center}:host([vertical]) .rs-vert-wrap{position:relative;width:var(--rs-thumb-size);height:160px;flex-shrink:0}:host([vertical][size="sm"]) .rs-vert-wrap{height:120px}:host([vertical][size="lg"]) .rs-vert-wrap{height:200px}:host([vertical]) .rs-track-wrap{position:absolute;top:50%;left:50%;width:160px;height:var(--rs-thumb-size);transform:translate(-50%,-50%) rotate(-90deg)}:host([vertical][size="sm"]) .rs-track-wrap{width:120px}:host([vertical][size="lg"]) .rs-track-wrap{width:200px}:host([vertical]) .rs-label-row{flex-direction:column;align-items:center;gap:2px;width:auto}:host([vertical]) .rs-label-row .rs-label{text-align:center}:host([vertical]) .rs-label-row .rs-value{min-width:auto;text-align:center}@media(prefers-reduced-motion:reduce){.rs-fill,.rs-fill-dual{transition:none}.rs input[type=range]::-webkit-slider-thumb{transition:none}}}';
 export {
-  timelineItemTemplate
+  sliderCss as default
 };
 //# sourceMappingURL=index224.js.map

package/dist/index224.js.map

@@ -1 +1 @@
-{"version":3,"file":"index224.js","sources":["../src/components/organisms/timeline/lib-timeline-item.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { TimelineItemTemplateProps } from './lib-timeline-item.types';\n\nexport function timelineItemTemplate(props: TimelineItemTemplateProps): TemplateResult {\n  const {\n    nodeType, nodeColor, icon, avatar,\n    status, lineVariant, lineProgress, hideLine,\n    timestamp, title, body, card, collapsed, collapsible,\n    onToggleCollapse,\n  } = props;\n\n  /* ── Clases del ítem raíz ── */\n  const itemCls = [\n    'tl-item',\n    status !== 'default' ? `is-${status}` : '',\n    collapsed ? 'is-collapsed' : '',\n  ].filter(Boolean).join(' ');\n\n  /* ── Clases del nodo ── */\n  const nodeTypeCls = `tl-node-${nodeType}`;\n  const nodeColorCls = nodeColor !== 'default' ? `nd-${nodeColor}` : '';\n  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();\n\n  /* ── Nodo interior ── */\n  const nodeInner = nodeType === 'icon'\n    ? html`<lib-icon name=\"${icon}\" size=\"xs\"></lib-icon>`\n    : nodeType === 'avatar'\n      ? html`${avatar}`\n      : nothing; /* dot — nodo gestionado por CSS ::before/::after */\n\n  /* ── Línea ── */\n  const lineCls = [\n    'tl-line',\n    lineVariant === 'dashed'   ? 'dashed'   : '',\n    lineVariant === 'progress' ? 'progress' : '',\n  ].filter(Boolean).join(' ');\n\n  const lineStyles = lineVariant === 'progress'\n    ? styleMap({ '--tl-progress': `${lineProgress}%` } as Record<string, string>)\n    : nothing;\n\n  /* ── Contenido ── */\n  const contentInner: TemplateResult = card\n    ? html`\n        <div class=\"tl-card\">\n          ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n          <div class=\"tl-card-body\">\n            ${body ? html`<div class=\"tl-body\">${body}</div>` : nothing}\n            <!-- slot por defecto para contenido libre dentro de la card -->\n            <slot></slot>\n            <!-- slot meta: badges, avatares, etc. -->\n            <div class=\"tl-meta\">\n              <slot name=\"meta\"></slot>\n            </div>\n            <!-- slot media: imágenes adjuntas -->\n            <slot name=\"media\"></slot>\n          </div>\n        </div>`\n    : html`\n        ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n        ${body\n          ? html`<div class=\"tl-body\">${body}</div>`\n          : html`<div class=\"tl-body\"><slot></slot></div>`}\n        <div class=\"tl-meta\">\n          <slot name=\"meta\"></slot>\n        </div>`;\n\n  return html`\n    <div class=\"${itemCls}\" role=\"listitem\">\n\n      <!-- ── Spine: nodo + línea ── -->\n      <div class=\"tl-spine\">\n        <div class=\"${nodeCls}\">${nodeInner}</div>\n        ${hideLine\n          ? nothing\n          : html`<div class=\"${lineCls}\" style=\"${lineStyles}\"></div>`}\n      </div>\n\n      <!-- ── Content ── -->\n      <div class=\"tl-content\">\n        ${timestamp\n          ? html`\n              <div class=\"tl-timestamp\">\n                <span class=\"tl-timestamp-dot\"></span>\n                ${timestamp}\n              </div>`\n          : nothing}\n\n        ${contentInner}\n\n        ${collapsible\n          ? html`\n              <button\n                class=\"tl-expand-btn\"\n                aria-expanded=\"${!collapsed}\"\n                @click=\"${onToggleCollapse}\"\n              >\n                <lib-icon\n                  name=\"${collapsed ? 'caret-down' : 'caret-up'}\"\n                  size=\"xs\"\n                ></lib-icon>\n                ${collapsed ? 'Mostrar más' : 'Mostrar menos'}\n              </button>`\n          : nothing}\n      </div>\n\n    </div>\n  `;\n}"],"names":["styleMap"],"mappings":";;AAIO,SAAS,qBAAqB,OAAkD;AACrF,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAW;AAAA,IAAM;AAAA,IAC3B;AAAA,IAAQ;AAAA,IAAa;AAAA,IAAc;AAAA,IACnC;AAAA,IAAW;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAW;AAAA,IACzC;AAAA,EAAA,IACE;AAGJ,QAAM,UAAU;AAAA,IACd;AAAA,IACA,WAAW,YAAY,MAAM,MAAM,KAAK;AAAA,IACxC,YAAY,iBAAiB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,cAAc,WAAW,QAAQ;AACvC,QAAM,eAAe,cAAc,YAAY,MAAM,SAAS,KAAK;AACnE,QAAM,UAAU,WAAW,WAAW,IAAI,YAAY,GAAG,KAAA;AAGzD,QAAM,YAAY,aAAa,SAC3B,uBAAuB,IAAI,4BAC3B,aAAa,WACX,OAAO,MAAM,KACb;AAGN,QAAM,UAAU;AAAA,IACd;AAAA,IACA,gBAAgB,WAAa,WAAa;AAAA,IAC1C,gBAAgB,aAAa,aAAa;AAAA,EAAA,EAC1C,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,aAAa,gBAAgB,aAC/BA,EAAS,EAAE,iBAAiB,GAAG,YAAY,IAAA,CAA+B,IAC1E;AAGJ,QAAM,eAA+B,OACjC;AAAA;AAAA,YAEM,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA;AAAA,cAEtD,OAAO,4BAA4B,IAAI,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAWjE;AAAA,UACI,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA,UACxD,OACE,4BAA4B,IAAI,WAChC,8CAA8C;AAAA;AAAA;AAAA;AAKxD,SAAO;AAAA,kBACS,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIH,OAAO,KAAK,SAAS;AAAA,UACjC,WACE,UACA,mBAAmB,OAAO,YAAY,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAK5D,YACE;AAAA;AAAA;AAAA,kBAGM,SAAS;AAAA,wBAEf,OAAO;AAAA;AAAA,UAET,YAAY;AAAA;AAAA,UAEZ,cACE;AAAA;AAAA;AAAA,iCAGqB,CAAC,SAAS;AAAA,0BACjB,gBAAgB;AAAA;AAAA;AAAA,0BAGhB,YAAY,eAAe,UAAU;AAAA;AAAA;AAAA,kBAG7C,YAAY,gBAAgB,eAAe;AAAA,2BAEjD,OAAO;AAAA;AAAA;AAAA;AAAA;AAKnB;"}
+{"version":3,"file":"index224.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index225.js

@@ -1,62 +1,5 @@
-import { noChange as E } from "./index358.js";
-import { directive as e, Directive as i, PartType as t } from "./index359.js";
-import { getCommittedValue as M, setChildPartValue as u$1, insertPart as v, removePart as h, setCommittedValue as p } from "./index360.js";
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const u = (e2, s, t2) => {
-  const r = /* @__PURE__ */ new Map();
-  for (let l = s; l <= t2; l++) r.set(e2[l], l);
-  return r;
-}, c = e(class extends i {
-  constructor(e2) {
-    if (super(e2), e2.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
-  }
-  dt(e2, s, t2) {
-    let r;
-    void 0 === t2 ? t2 = s : void 0 !== s && (r = s);
-    const l = [], o = [];
-    let i2 = 0;
-    for (const s2 of e2) l[i2] = r ? r(s2, i2) : i2, o[i2] = t2(s2, i2), i2++;
-    return { values: o, keys: l };
-  }
-  render(e2, s, t2) {
-    return this.dt(e2, s, t2).values;
-  }
-  update(s, [t2, r, c2]) {
-    const d = M(s), { values: p$1, keys: a } = this.dt(t2, r, c2);
-    if (!Array.isArray(d)) return this.ut = a, p$1;
-    const h$1 = this.ut ?? (this.ut = []), v$1 = [];
-    let m, y, x = 0, j = d.length - 1, k = 0, w = p$1.length - 1;
-    for (; x <= j && k <= w; ) if (null === d[x]) x++;
-    else if (null === d[j]) j--;
-    else if (h$1[x] === a[k]) v$1[k] = u$1(d[x], p$1[k]), x++, k++;
-    else if (h$1[j] === a[w]) v$1[w] = u$1(d[j], p$1[w]), j--, w--;
-    else if (h$1[x] === a[w]) v$1[w] = u$1(d[x], p$1[w]), v(s, v$1[w + 1], d[x]), x++, w--;
-    else if (h$1[j] === a[k]) v$1[k] = u$1(d[j], p$1[k]), v(s, d[x], d[j]), j--, k++;
-    else if (void 0 === m && (m = u(a, k, w), y = u(h$1, x, j)), m.has(h$1[x])) if (m.has(h$1[j])) {
-      const e2 = y.get(a[k]), t3 = void 0 !== e2 ? d[e2] : null;
-      if (null === t3) {
-        const e3 = v(s, d[x]);
-        u$1(e3, p$1[k]), v$1[k] = e3;
-      } else v$1[k] = u$1(t3, p$1[k]), v(s, d[x], t3), d[e2] = null;
-      k++;
-    } else h(d[j]), j--;
-    else h(d[x]), x++;
-    for (; k <= w; ) {
-      const e2 = v(s, v$1[w + 1]);
-      u$1(e2, p$1[k]), v$1[k++] = e2;
-    }
-    for (; x <= j; ) {
-      const e2 = d[x++];
-      null !== e2 && h(e2);
-    }
-    return this.ut = a, p(s, v$1), E;
-  }
-});
+const segmentedCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:inline-block;vertical-align:middle}:host([full]){display:block;width:100%}}@layer components{.seg{display:inline-flex;align-items:stretch;position:relative;-webkit-user-select:none;user-select:none}.seg-thumb{position:absolute;top:0;bottom:0;left:0;pointer-events:none;z-index:1;transition:transform var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-out)}.seg-option{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:color var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}.seg-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.seg-badge-dot{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;line-height:1;background:var(--color-kaki-500);color:var(--color-white);border-radius:var(--radius-full)}.seg-option.is-active .seg-badge-dot{background:#ffffff4d}.seg-option.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}:host([disabled]) .seg{opacity:.55;pointer-events:none}:host([full]) .seg{width:100%}:host([full]) .seg-option{flex:1}:host([icon-only]) .seg-option{min-width:44px;padding:var(--lib-space-sm)}:host([variant="outline"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="outline"]) .seg-thumb{background:var(--color-washi-900);top:3px;bottom:3px}:host([variant="outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="outline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="outline"]) .seg-option.is-active{color:var(--color-washi-50)}:host([variant="underline"]) .seg{background:transparent;border-bottom:1px solid var(--border-subtle);gap:0;padding:0}:host([variant="underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-500);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-bottom:2px solid transparent}:host([variant="underline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="underline"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="pill"]) .seg{background:var(--color-washi-100);border:1px solid var(--border-subtle);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="pill"]) .seg-thumb{background:var(--bg-elevated);border-radius:var(--radius-full);top:4px;bottom:4px;box-shadow:0 1px 4px var(--color-ink-20)}:host([variant="pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-radius:var(--radius-full);min-width:80px}:host([variant="pill"]) .seg-option:hover{color:var(--text-primary)}:host([variant="pill"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg{background:transparent;gap:0}:host([variant="ghost"]) .seg-thumb{display:none}:host([variant="ghost"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);border-right:1px solid var(--border-subtle)}:host([variant="ghost"]) .seg-option:last-child{border-right:none}:host([variant="ghost"]) .seg-option:hover{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active:after{content:"";position:absolute;bottom:-1px;left:var(--lib-space-md);right:var(--lib-space-md);height:1px;background:var(--color-kaki-500)}:host([variant="kaki"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="kaki"]) .seg-option:hover{color:var(--text-primary)}:host([variant="kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="celadon"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="celadon"]) .seg-thumb{background:var(--color-celadon-500);top:3px;bottom:3px}:host([variant="celadon"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="celadon"]) .seg-option:hover{color:var(--text-primary)}:host([variant="celadon"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-outline"]) .seg{border:1px solid rgb(255,255,255,.1);background:#ffffff0a;padding:3px;gap:0}:host([variant="dark-outline"]) .seg-thumb{background:#faf7f41f;top:3px;bottom:3px}:host([variant="dark-outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f447;min-width:80px}:host([variant="dark-outline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-outline"]) .seg-option.is-active{color:#faf7f4cc}:host([variant="dark-pill"]) .seg{background:#ffffff0f;border:1px solid rgb(255,255,255,.07);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="dark-pill"]) .seg-thumb{background:#faf7f41f;border-radius:var(--radius-full);top:4px;bottom:4px}:host([variant="dark-pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447;border-radius:var(--radius-full);min-width:80px}:host([variant="dark-pill"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-pill"]) .seg-option.is-active{color:#faf7f4d9}:host([variant="dark-kaki"]) .seg{border:1px solid rgb(255,255,255,.07);background:#ffffff08;padding:3px;gap:0}:host([variant="dark-kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="dark-kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f44d;min-width:80px}:host([variant="dark-kaki"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-underline"]) .seg{background:transparent;border-bottom:1px solid rgb(255,255,255,.07);gap:0;padding:0}:host([variant="dark-underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-400);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="dark-underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447}:host([variant="dark-underline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-underline"]) .seg-option.is-active{color:#faf7f4cc}:host([size="sm"]) .seg-option{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px;min-width:60px}:host([size="sm"][variant="pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="dark-pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="dark-pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="outline"]) .seg{padding:2px}:host([size="sm"][variant="outline"]) .seg-thumb{top:2px;bottom:2px}:host([size="sm"][variant="kaki"]) .seg{padding:2px}:host([size="sm"][variant="kaki"]) .seg-thumb{top:2px;bottom:2px}:host([size="lg"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-lg);font-size:.75rem;min-width:100px}:host([size="lg"][variant="pill"]) .seg{padding:5px}:host([size="lg"][variant="pill"]) .seg-thumb{top:5px;bottom:5px}:host([size="lg"][variant="dark-pill"]) .seg{padding:5px}:host([size="lg"][variant="dark-pill"]) .seg-thumb{top:5px;bottom:5px}:host([glitch]) .seg-option.is-active:before,:host([glitch]) .seg-option.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:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:0}:host([glitch]) .seg-option.is-active:before{color:var(--color-kaki-400);mix-blend-mode:screen}:host([glitch]) .seg-option.is-active:after{color:var(--color-celadon-400);mix-blend-mode:screen}:host([glitch]) .seg-option.glitch-on:before{opacity:.7;animation:seg-glitch-a .24s steps(1) infinite}:host([glitch]) .seg-option.glitch-on:after{opacity:.5;animation:seg-glitch-b .24s steps(1) infinite;animation-delay:30ms}@keyframes seg-glitch-a{0%{clip-path:inset(30% 0 50% 0);transform:translate(-2px)}50%{clip-path:inset(60% 0 10% 0);transform:translate(2px)}}@keyframes seg-glitch-b{0%{clip-path:inset(50% 0 20% 0);transform:translate(2px)}50%{clip-path:inset(10% 0 60% 0);transform:translate(-2px)}}.seg-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.seg-ripple-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:currentcolor;transform:scale(0);opacity:.25;animation:seg-ripple .36s ease-out forwards}@keyframes seg-ripple{to{transform:scale(40);opacity:0}}}';
 export {
-  c as repeat
+  segmentedCss as default
 };
 //# sourceMappingURL=index225.js.map

package/dist/index225.js.map

@@ -1 +1 @@
-{"version":3,"file":"index225.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js"],"sourcesContent":["import{noChange as e}from\"../lit-html.js\";import{directive as s,Directive as t,PartType as r}from\"../directive.js\";import{getCommittedValue as l,setChildPartValue as o,insertPart as i,removePart as n,setCommittedValue as f}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=s(class extends t{constructor(e){if(super(e),e.type!==r.CHILD)throw Error(\"repeat() can only be used in text expressions\")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return{values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=l(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v=[];let m,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v[k]=o(d[x],p[k]),x++,k++;else if(h[j]===a[w])v[w]=o(d[j],p[w]),j--,w--;else if(h[x]===a[w])v[w]=o(d[x],p[w]),i(s,v[w+1],d[x]),x++,w--;else if(h[j]===a[k])v[k]=o(d[j],p[k]),i(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=i(s,d[x]);o(e,p[k]),v[k]=e}else v[k]=o(t,p[k]),i(s,d[x],t),d[e]=null;k++}else n(d[j]),j--;else n(d[x]),x++;for(;k<=w;){const e=i(s,v[w+1]);o(e,p[k]),v[k++]=e}for(;x<=j;){const e=d[x++];null!==e&&n(e)}return this.ut=a,f(s,v),e}});export{c as repeat};\n//# sourceMappingURL=repeat.js.map\n"],"names":["e","t","s","r","i","c","l","p","h","v","o","n","f"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index225.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index226.js

@@ -1,5 +1,75 @@
-const toastManagerCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{position:fixed;top:var(--lib-space-lg);right:var(--lib-space-lg);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--lib-space-sm);width:340px;pointer-events:none}::slotted(lib-alert),lib-alert{pointer-events:auto;animation:tm-in var(--duration-slow) var(--ease-out) forwards}@keyframes tm-in{0%{transform:translate(calc(100% + var(--lib-space-lg)));opacity:0}to{transform:translate(0);opacity:1}}lib-alert.is-leaving{animation:tm-out var(--duration-base) var(--ease-default) forwards;pointer-events:none}@keyframes tm-out{0%{transform:translate(0);opacity:1;max-height:200px;margin-bottom:0}to{transform:translate(calc(100% + var(--lib-space-lg)));opacity:0;max-height:0;margin-bottom:calc(-1 * var(--lib-space-sm))}}}";
+import { nothing, html } from "lit";
+import { map as o } from "./index232.js";
+function segmentedTemplate(props) {
+  const {
+    options,
+    value,
+    variant,
+    size,
+    full,
+    iconOnly,
+    disabled,
+    glitch,
+    thumbStyle,
+    onSelect
+  } = props;
+  const isGhost = variant === "ghost";
+  const trackCls = [
+    "seg",
+    `seg-${variant}`,
+    size !== "md" ? `seg-${size}` : "",
+    full ? "seg-full" : "",
+    iconOnly ? "seg-icon-only" : "",
+    glitch ? "seg-glitch" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <div
+      class="${trackCls}"
+      role="radiogroup"
+      aria-disabled="${disabled}"
+    >
+      <!-- Thumb — indicador animado de selección -->
+      ${isGhost ? nothing : html`<div class="seg-thumb" style="${thumbStyle}"></div>`}
+
+      <!-- Opciones -->
+      ${o(options, (opt) => {
+    const isActive = opt.value === value;
+    const isDisabled = opt.disabled ?? false;
+    const optCls = [
+      "seg-option",
+      isActive ? "is-active" : "",
+      isDisabled ? "is-disabled" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+          <div
+            class="${optCls}"
+            role="radio"
+            aria-checked="${isActive}"
+            aria-disabled="${isDisabled}"
+            data-label="${opt.label}"
+            data-value="${opt.value}"
+            @click="${(e) => {
+      if (disabled || isDisabled) return;
+      onSelect(opt, e);
+    }}"
+          >
+            <!-- Icono Phosphor (slot reutilizando lib-icon) -->
+            ${opt.icon ? html`<span class="seg-icon">
+                  <lib-icon name="${opt.icon}" size="xs"></lib-icon>
+                </span>` : nothing}
+
+            <!-- Label — oculto si icon-only -->
+            ${iconOnly ? nothing : html`<span class="seg-label">${opt.label}</span>`}
+
+            <!-- Badge numérico opcional -->
+            ${opt.badge != null ? html`<span class="seg-badge-dot">${opt.badge}</span>` : nothing}
+          </div>
+        `;
+  })}
+    </div>
+  `;
+}
 export {
-  toastManagerCss as default
+  segmentedTemplate
 };
 //# sourceMappingURL=index226.js.map

package/dist/index226.js.map

@@ -1 +1 @@
-{"version":3,"file":"index226.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index226.js","sources":["../src/components/molecules/segmented-control/lib-segmented-control.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type { SegmentedOption, SegmentedTemplateProps } from './lib-segmented-control.types';\n\n/**\n * Template del componente lib-segmented-control.\n *\n * El thumb se posiciona via `style` calculado en el componente\n * (offsetLeft / offsetWidth del option activo).\n * La variante ghost oculta el thumb con CSS y usa un ::after de línea.\n */\nexport function segmentedTemplate(props: SegmentedTemplateProps): TemplateResult {\n  const {\n    options, value, variant, size, full,\n    iconOnly, disabled, glitch, thumbStyle, onSelect,\n  } = props;\n\n  const isGhost      = variant === 'ghost';\n  //const isUnderline  = variant === 'underline' || variant === 'dark-underline';\n  //const isPill       = variant === 'pill' || variant === 'dark-pill';\n\n  const trackCls = [\n    'seg',\n    `seg-${variant}`,\n    size !== 'md' ? `seg-${size}` : '',\n    full     ? 'seg-full'      : '',\n    iconOnly ? 'seg-icon-only' : '',\n    glitch   ? 'seg-glitch'    : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <div\n      class=\"${trackCls}\"\n      role=\"radiogroup\"\n      aria-disabled=\"${disabled}\"\n    >\n      <!-- Thumb — indicador animado de selección -->\n      ${isGhost ? nothing : html`<div class=\"seg-thumb\" style=\"${thumbStyle}\"></div>`}\n\n      <!-- Opciones -->\n      ${map(options, (opt: SegmentedOption) => {\n        const isActive   = opt.value === value;\n        const isDisabled = opt.disabled ?? false;\n\n        const optCls = [\n          'seg-option',\n          isActive   ? 'is-active'   : '',\n          isDisabled ? 'is-disabled' : '',\n        ].filter(Boolean).join(' ');\n\n        return html`\n          <div\n            class=\"${optCls}\"\n            role=\"radio\"\n            aria-checked=\"${isActive}\"\n            aria-disabled=\"${isDisabled}\"\n            data-label=\"${opt.label}\"\n            data-value=\"${opt.value}\"\n            @click=\"${(e: MouseEvent): void => {\n              if (disabled || isDisabled) return;\n              onSelect(opt, e);\n            }}\"\n          >\n            <!-- Icono Phosphor (slot reutilizando lib-icon) -->\n            ${opt.icon\n              ? html`<span class=\"seg-icon\">\n                  <lib-icon name=\"${opt.icon}\" size=\"xs\"></lib-icon>\n                </span>`\n              : nothing}\n\n            <!-- Label — oculto si icon-only -->\n            ${iconOnly\n              ? nothing\n              : html`<span class=\"seg-label\">${opt.label}</span>`}\n\n            <!-- Badge numérico opcional -->\n            ${opt.badge != null\n              ? html`<span class=\"seg-badge-dot\">${opt.badge}</span>`\n              : nothing}\n          </div>\n        `;\n      })}\n    </div>\n  `;\n}"],"names":["map"],"mappings":";;AAWO,SAAS,kBAAkB,OAA+C;AAC/E,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAA,IACtC;AAEJ,QAAM,UAAe,YAAY;AAIjC,QAAM,WAAW;AAAA,IACf;AAAA,IACA,OAAO,OAAO;AAAA,IACd,SAAS,OAAO,OAAO,IAAI,KAAK;AAAA,IAChC,OAAW,aAAkB;AAAA,IAC7B,WAAW,kBAAkB;AAAA,IAC7B,SAAW,eAAkB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA,eAEM,QAAQ;AAAA;AAAA,uBAEA,QAAQ;AAAA;AAAA;AAAA,QAGvB,UAAU,UAAU,qCAAqC,UAAU,UAAU;AAAA;AAAA;AAAA,QAG7EA,EAAI,SAAS,CAAC,QAAyB;AACvC,UAAM,WAAa,IAAI,UAAU;AACjC,UAAM,aAAa,IAAI,YAAY;AAEnC,UAAM,SAAS;AAAA,MACb;AAAA,MACA,WAAa,cAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,IAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,WAAO;AAAA;AAAA,qBAEM,MAAM;AAAA;AAAA,4BAEC,QAAQ;AAAA,6BACP,UAAU;AAAA,0BACb,IAAI,KAAK;AAAA,0BACT,IAAI,KAAK;AAAA,sBACb,CAAC,MAAwB;AACjC,UAAI,YAAY,WAAY;AAC5B,eAAS,KAAK,CAAC;AAAA,IACjB,CAAC;AAAA;AAAA;AAAA,cAGC,IAAI,OACF;AAAA,oCACoB,IAAI,IAAI;AAAA,2BAE5B,OAAO;AAAA;AAAA;AAAA,cAGT,WACE,UACA,+BAA+B,IAAI,KAAK,SAAS;AAAA;AAAA;AAAA,cAGnD,IAAI,SAAS,OACX,mCAAmC,IAAI,KAAK,YAC5C,OAAO;AAAA;AAAA;AAAA,EAGjB,CAAC,CAAC;AAAA;AAAA;AAGR;"}