@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index208.js

@@ -1,5 +1,36 @@
-const glassCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.glass-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);transition:box-shadow var(--duration-slow) var(--ease-default),transform var(--duration-slow) var(--ease-default)}.glass-card:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-2px)}.glass-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}.glass-card__slot{position:relative;z-index:1}:host([variant="water"]) .glass-card{background:var(--lib-glass-bg-water)}:host([variant="kaki"]) .glass-card{background:var(--lib-glass-bg-kaki)}:host([intensity="low"]) .glass-card{background:oklch(98% .01 60deg / var(--lib-glass-opacity-low));-webkit-backdrop-filter:blur(var(--lib-glass-blur-low)) saturate(var(--lib-glass-saturate-amount));backdrop-filter:blur(var(--lib-glass-blur-low)) saturate(var(--lib-glass-saturate-amount))}:host([intensity="high"]) .glass-card{background:oklch(98% .01 60deg / var(--lib-glass-opacity-high));-webkit-backdrop-filter:blur(var(--lib-glass-blur-high)) saturate(var(--lib-glass-saturate-amount));backdrop-filter:blur(var(--lib-glass-blur-high)) saturate(var(--lib-glass-saturate-amount))}:host([variant="water"][intensity="low"]) .glass-card{background:oklch(55% .06 210deg / var(--lib-glass-opacity-low))}:host([variant="water"][intensity="high"]) .glass-card{background:oklch(55% .06 210deg / var(--lib-glass-opacity-high))}:host([variant="kaki"][intensity="low"]) .glass-card{background:oklch(45% .05 45deg / var(--lib-glass-opacity-low))}:host([variant="kaki"][intensity="high"]) .glass-card{background:oklch(45% .05 45deg / var(--lib-glass-opacity-high))}}';
+import { html, nothing } from "lit";
+function emptyStateTemplate(props) {
+  const illustrationZone = props.kanji ? html`
+        <div class="es-illustration">
+          <span class="es-kanji">${props.kanji}</span>
+        </div>
+      ` : html`
+        <div class="es-illustration">
+          <div class="es-icon-wrap">
+            <slot name="illustration"></slot>
+          </div>
+        </div>
+      `;
+  return html`
+    <div class="es
+      ${props.layout === "inline" ? "es-inline" : ""}
+      ${props.size === "sm" ? "es-sm" : ""}
+      ${props.tone !== "neutral" ? `es-${props.tone}` : ""}
+      ${props.bordered ? "es-bordered" : ""}
+      ${props.ghost ? "es-ghost" : ""}
+    ">
+      ${illustrationZone}
+      <div class="es-body">
+        ${props.heading ? html`<h3 class="es-title">${props.heading}</h3>` : nothing}
+        ${props.description ? html`<p class="es-desc">${props.description}</p>` : nothing}
+        <div class="es-actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    </div>
+  `;
+}
 export {
-  glassCss as default
+  emptyStateTemplate
 };
 //# sourceMappingURL=index208.js.map

package/dist/index208.js.map

@@ -1 +1 @@
-{"version":3,"file":"index208.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index208.js","sources":["../src/components/molecules/empty-state/lib-empty-state.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibEmptyStateTone   = 'neutral' | 'kaki' | 'celadon' | 'error';\nexport type LibEmptyStateLayout = 'default' | 'inline';\nexport type LibEmptyStateSize   = 'sm' | 'md';\n\nexport interface EmptyStateTemplateProps {\n  heading:     string;\n  description: string;\n  kanji:       string;\n  tone:        LibEmptyStateTone;\n  layout:      LibEmptyStateLayout;\n  size:        LibEmptyStateSize;\n  bordered:    boolean;\n  ghost:       boolean;\n}\n\n/**\n * Template para lib-empty-state.\n *\n * Estructura (ambos layouts):\n *   div.es\n *     div.es-illustration     ← kanji | icon-wrap[slot=illustration]\n *     div.es-body\n *       h3.es-title\n *       p.es-desc\n *       div.es-actions\n *         slot[name=actions]\n *\n * La zona de ilustración se omite si no hay kanji ni slot.\n * El CSS diferencia .es-inline (row) de .es (column).\n */\nexport function emptyStateTemplate(props: EmptyStateTemplateProps): TemplateResult {\n  const illustrationZone = props.kanji\n    ? html`\n        <div class=\"es-illustration\">\n          <span class=\"es-kanji\">${props.kanji}</span>\n        </div>\n      `\n    : html`\n        <div class=\"es-illustration\">\n          <div class=\"es-icon-wrap\">\n            <slot name=\"illustration\"></slot>\n          </div>\n        </div>\n      `;\n\n  return html`\n    <div class=\"es\n      ${props.layout  === 'inline'  ? 'es-inline'  : ''}\n      ${props.size    === 'sm'      ? 'es-sm'      : ''}\n      ${props.tone    !== 'neutral' ? `es-${props.tone}` : ''}\n      ${props.bordered              ? 'es-bordered' : ''}\n      ${props.ghost                 ? 'es-ghost'   : ''}\n    \">\n      ${illustrationZone}\n      <div class=\"es-body\">\n        ${props.heading\n          ? html`<h3 class=\"es-title\">${props.heading}</h3>`\n          : nothing}\n        ${props.description\n          ? html`<p class=\"es-desc\">${props.description}</p>`\n          : nothing}\n        <div class=\"es-actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgCO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,mBAAmB,MAAM,QAC3B;AAAA;AAAA,mCAE6B,MAAM,KAAK;AAAA;AAAA,UAGxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ,SAAO;AAAA;AAAA,QAED,MAAM,WAAY,WAAY,cAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,OAAY,UAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,YAAY,MAAM,MAAM,IAAI,KAAK,EAAE;AAAA,QACrD,MAAM,WAAwB,gBAAgB,EAAE;AAAA,QAChD,MAAM,QAAwB,aAAe,EAAE;AAAA;AAAA,QAE/C,gBAAgB;AAAA;AAAA,UAEd,MAAM,UACJ,4BAA4B,MAAM,OAAO,UACzC,OAAO;AAAA,UACT,MAAM,cACJ,0BAA0B,MAAM,WAAW,SAC3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB;"}

package/dist/index209.js

@@ -1,94 +1,5 @@
-import { nothing, html } from "lit";
-const SEGMENT_TONE_CLASS = {
-  default: "seg-default",
-  kaki: "seg-kaki",
-  celadon: "seg-celadon",
-  error: "seg-error",
-  muted: "seg-muted"
-};
-const SEGMENT_TONE_VAR = {
-  default: "var(--color-washi-900)",
-  kaki: "var(--color-kaki-500)",
-  celadon: "var(--color-celadon-500)",
-  error: "var(--color-error)",
-  muted: "var(--color-washi-300)"
-};
-function segmentColor(seg) {
-  if (seg.color) return seg.color;
-  const tone = seg.tone ?? "default";
-  return SEGMENT_TONE_VAR[tone];
-}
-function segmentClass(seg) {
-  if (seg.color) return "";
-  return SEGMENT_TONE_CLASS[seg.tone ?? "default"];
-}
-function multiBarTpl(props) {
-  const hasLegend = props.segments.some((s) => s.label);
-  return html`
-    <div class="pb-multi">
-      ${props.segments.map((seg) => html`
-        <div
-          class="pb-segment ${segmentClass(seg)}"
-          style="
-            width: ${seg.percent}%;
-            ${seg.color ? `background: ${seg.color};` : ""}
-          "
-        ></div>
-      `)}
-    </div>
-
-    ${hasLegend ? html`
-      <div class="pb-legend">
-        ${props.segments.filter((s) => s.label).map((seg) => html`
-          <div class="pb-legend-item">
-            <div
-              class="pb-legend-dot"
-              style="background: ${segmentColor(seg)};"
-            ></div>
-            <span class="pb-legend-text">${seg.label}</span>
-          </div>
-        `)}
-      </div>` : nothing}
-  `;
-}
-function singleBarTpl(props) {
-  const showInnerValue = props.size === "xl" && props.showValue && !props.indeterminate;
-  return html`
-    <div
-      class="pb"
-      role="progressbar"
-      aria-valuemin="0"
-      aria-valuemax="${props.max}"
-      aria-valuenow="${props.indeterminate ? nothing : props.rawValue}"
-      aria-label="${props.ariaLabel || nothing}"
-    >
-      <div class="pb-fill" style="width: ${props.indeterminate ? 100 : props.percent}%">
-        ${showInnerValue ? html`<span class="pb-inner-value">${Math.round(props.percent)}%</span>` : nothing}
-      </div>
-    </div>
-  `;
-}
-function progressTemplate(props) {
-  const isMulti = props.segments.length > 0;
-  const hasMeta = !!(props.label || props.valueLabel);
-  const showPercent = !isMulti && props.showValue && !props.indeterminate && props.size !== "xl";
-  const displayValue = props.valueLabel ? props.valueLabel : showPercent ? `${Math.round(props.percent)}%` : nothing;
-  const barTpl = isMulti ? multiBarTpl(props) : singleBarTpl(props);
-  if (hasMeta) {
-    return html`
-      <div class="pb-wrap">
-        <div class="pb-header">
-          <span class="pb-label">${props.label}</span>
-          ${displayValue !== nothing ? html`<span class="pb-value">${displayValue}</span>` : nothing}
-        </div>
-        ${barTpl}
-        ${props.sub ? html`<span class="pb-sub">${props.sub}</span>` : nothing}
-      </div>
-    `;
-  }
-  return html`${barTpl}`;
-}
+const emptyStateCss = '@layer tokens,reset,components;@layer reset{:host{display:flex;width:100%;justify-content:center;align-items:center}*,*:before,*:after{box-sizing:border-box}}@layer components{.es{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--lib-space-xl) var(--lib-space-lg);gap:0;width:100%}.es-illustration{margin-bottom:var(--lib-space-lg);display:flex;align-items:center;justify-content:center;position:relative}.es-icon-wrap{width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-washi-100);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--color-washi-400);font-size:28px;flex-shrink:0}.es-kanji{font-family:var(--lib-font-display);font-size:6rem;line-height:1;color:var(--color-washi-200);-webkit-user-select:none;user-select:none;letter-spacing:var(--tracking-tight)}.es-body{display:flex;flex-direction:column;align-items:center;gap:0}.es-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-primary);margin-bottom:var(--lib-space-sm);line-height:var(--leading-snug)}.es-title em{font-style:italic;color:var(--text-muted)}.es-desc{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-relaxed);max-width:320px;margin:0 auto var(--lib-space-lg)}.es-actions{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);flex-wrap:wrap}::slotted([slot="actions"]){flex-shrink:0}:host([size="sm"]) .es{padding:var(--lib-space-lg) var(--lib-space-md)}:host([size="sm"]) .es-icon-wrap{width:48px;height:48px;font-size:20px}:host([size="sm"]) .es-illustration{margin-bottom:var(--lib-space-md)}:host([size="sm"]) .es-title{font-size:var(--text-xl);margin-bottom:var(--lib-space-xs)}:host([size="sm"]) .es-desc{font-size:var(--text-xs);margin-bottom:var(--lib-space-md)}:host([layout="inline"]) .es{flex-direction:row;text-align:left;padding:var(--lib-space-md) var(--lib-space-lg);gap:var(--lib-space-lg);align-items:center;justify-content:flex-start}:host([layout="inline"]) .es-illustration{margin-bottom:0;flex-shrink:0}:host([layout="inline"]) .es-body{align-items:flex-start;gap:var(--lib-space-xs)}:host([layout="inline"]) .es-title{font-size:var(--text-xl);margin-bottom:0}:host([layout="inline"]) .es-desc{margin:0;max-width:400px}:host([layout="inline"]) .es-actions{justify-content:flex-start;margin-top:var(--lib-space-sm)}:host([bordered]) .es{border:1px dashed var(--border-default);background:var(--bg-surface)}:host([ghost]) .es-icon-wrap{background:transparent;border:none;color:var(--color-washi-300);font-size:40px}:host([tone="kaki"]) .es-icon-wrap{background:var(--color-kaki-50);color:var(--color-kaki-500);border-color:var(--color-kaki-100)}:host([tone="celadon"]) .es-icon-wrap{background:var(--color-celadon-100);color:var(--color-celadon-500);border-color:var(--color-celadon-100)}:host([tone="error"]) .es-icon-wrap{background:#f5ddd9;color:var(--color-error);border-color:#f5ddd9}@media(max-width:640px){:host([layout="inline"]) .es{flex-direction:column;text-align:center}:host([layout="inline"]) .es-body{align-items:center}:host([layout="inline"]) .es-actions{justify-content:center}}}';
 export {
-  progressTemplate
+  emptyStateCss as default
 };
 //# sourceMappingURL=index209.js.map

package/dist/index209.js.map

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

package/dist/index21.js

@@ -1,7 +1,9 @@
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import "./index25.js";
+import { copyButtonTemplate } from "./index300.js";
+import copyButtonCss from "./index301.js";
 import sharedTokens from "./index196.js";
-import labelStyles from "./index230.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,39 +14,101 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibLabel = class extends LitElement {
+const COPIED_DURATION = 1800;
+let LibCopyButton = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.htmlFor = "";
-    this.required = false;
+    this._resetTimer = null;
+    this.value = "";
+    this.variant = "ghost";
+    this.size = "md";
+    this.iconOnly = false;
+    this.label = "Copiar";
+    this.successLabel = "Copiado";
+    this.tooltip = false;
+    this.disabled = false;
+    this._copied = false;
+  }
+  /** Refleja _copied como atributo para que los selectores CSS :host([copied]) funcionen */
+  updated(changed) {
+    if (changed.has("_copied")) {
+      this.toggleAttribute("copied", this._copied);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resetTimer) clearTimeout(this._resetTimer);
+  }
+  async _handleClick() {
+    if (!this.value || this.disabled || this._copied) return;
+    try {
+      await navigator.clipboard.writeText(this.value);
+      this._copied = true;
+      this.dispatchEvent(
+        new CustomEvent("lib-copy", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+      if (this._resetTimer) clearTimeout(this._resetTimer);
+      this._resetTimer = setTimeout(() => {
+        this._copied = false;
+      }, COPIED_DURATION);
+    } catch (err) {
+      console.error("[lib-copy-button] Error al copiar:", err);
+    }
   }
   render() {
-    return html`
-      <label for="${this.htmlFor}">
-        <slot></slot>
-        ${this.required ? html`<span class="required-indicator" aria-hidden="true">*</span>` : ""}
-      </label>
-    `;
+    return copyButtonTemplate({
+      value: this.value,
+      variant: this.variant,
+      size: this.size,
+      iconOnly: this.iconOnly,
+      label: this.label,
+      successLabel: this.successLabel,
+      tooltip: this.tooltip,
+      copied: this._copied,
+      disabled: this.disabled,
+      onClick: this._handleClick.bind(this)
+    });
   }
 };
-LibLabel.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(labelStyles)}
-    `
+LibCopyButton.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(copyButtonCss)}`
 ];
 __decorateClass([
   property({ type: String })
-], LibLabel.prototype, "htmlFor", 2);
+], LibCopyButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCopyButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCopyButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-only" })
+], LibCopyButton.prototype, "iconOnly", 2);
+__decorateClass([
+  property({ type: String })
+], LibCopyButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-label" })
+], LibCopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibCopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibCopyButton.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: Boolean })
-], LibLabel.prototype, "required", 2);
-LibLabel = __decorateClass([
-  customElement("lib-label")
-], LibLabel);
+  state()
+], LibCopyButton.prototype, "_copied", 2);
+LibCopyButton = __decorateClass([
+  customElement("lib-copy-button")
+], LibCopyButton);
 export {
-  LibLabel
+  LibCopyButton
 };
 //# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/atoms/label/lib-label.component.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport labelStyles from './lib-label.css?inline';\n\n@customElement('lib-label')\nexport class LibLabel extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(labelStyles)}\n    `,\n  ];\n\n  /** ID del input al que va asociado (para accesibilidad) */\n  @property({ type: String }) htmlFor: string = '';\n\n  /** Muestra un indicador visual de campo obligatorio */\n  @property({ type: Boolean }) required: boolean = false;\n\n  protected override render(): TemplateResult {\n    return html`\n      <label for=\"${this.htmlFor}\">\n        <slot></slot>\n        ${this.required ? html`<span class=\"required-indicator\" aria-hidden=\"true\">*</span>` : ''}\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWuB,SAAA,UAAkB;AAGjB,SAAA,WAAoB;AAAA,EAAA;AAAA,EAE9B,SAAyB;AAC1C,WAAO;AAAA,oBACS,KAAK,OAAO;AAAA;AAAA,UAEtB,KAAK,WAAW,qEAAqE,EAAE;AAAA;AAAA;AAAA,EAG/F;AACF;AAxBa,SACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,WAAW,CAAC;AAAA;AAE5B;AAG4B,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,SAWiB,WAAA,WAAA,CAAA;AAGC,gBAAA;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAdhB,SAckB,WAAA,YAAA,CAAA;AAdlB,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}
+{"version":3,"file":"index21.js","sources":["../src/components/atoms/copy-button/lib-copy-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../../atoms/icon/lib-icon.component';\nimport type { LibCopyVariant, LibCopySize } from './lib-copy-button.html';\nimport { copyButtonTemplate } from './lib-copy-button.html';\nimport copyButtonCss from './lib-copy-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/** Tiempo en ms que el estado copiado permanece activo */\nconst COPIED_DURATION = 1800;\n\n/**\n * @element lib-copy-button\n *\n * Boton que copia texto al portapapeles y confirma la accion\n * con un checkmark animado (crossfade idle/copied con ease-bounce).\n *\n * @fires lib-copy - Emitido al copiar con exito. detail: { value: string }\n *\n * @example\n * <lib-copy-button value=\"npm install @shibui-ui/ui\"></lib-copy-button>\n * <lib-copy-button value=\"sk-ant-api03-xyz\" variant=\"outlined\" tooltip></lib-copy-button>\n * <lib-copy-button value=\"copy me\" variant=\"ghost\" icon-only size=\"sm\"></lib-copy-button>\n */\n@customElement('lib-copy-button')\nexport class LibCopyButton extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(copyButtonCss)}`,\n  ];\n\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Texto que se copia al portapapeles */\n  @property({ type: String })\n  value = '';\n\n  /** Variante visual */\n  @property({ type: String, reflect: true })\n  variant: LibCopyVariant = 'ghost';\n\n  /** Tamaño */\n  @property({ type: String, reflect: true })\n  size: LibCopySize = 'md';\n\n  /** Modo icono-solo (sin label, cuadrado) */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /** Label en estado idle */\n  @property({ type: String })\n  label = 'Copiar';\n\n  /** Label en estado copiado */\n  @property({ type: String, attribute: 'success-label' })\n  successLabel = 'Copiado';\n\n  /** Muestra un tooltip \"Copiado\" al copiar */\n  @property({ type: Boolean, reflect: true })\n  tooltip = false;\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Estado interno — activa el crossfade y el tooltip */\n  @state()\n  private _copied = false;\n\n  /** Refleja _copied como atributo para que los selectores CSS :host([copied]) funcionen */\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('_copied')) {\n      this.toggleAttribute('copied', this._copied);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._resetTimer) clearTimeout(this._resetTimer);\n  }\n\n  private async _handleClick(): Promise<void> {\n    if (!this.value || this.disabled || this._copied) return;\n\n    try {\n      await navigator.clipboard.writeText(this.value);\n      this._copied = true;\n\n      this.dispatchEvent(\n        new CustomEvent('lib-copy', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n\n      if (this._resetTimer) clearTimeout(this._resetTimer);\n      this._resetTimer = setTimeout(() => {\n        this._copied = false;\n      }, COPIED_DURATION);\n\n    } catch (err) {\n      console.error('[lib-copy-button] Error al copiar:', err);\n    }\n  }\n\n  override render(): TemplateResult {\n    return copyButtonTemplate({\n      value: this.value,\n      variant: this.variant,\n      size: this.size,\n      iconOnly: this.iconOnly,\n      label: this.label,\n      successLabel: this.successLabel,\n      tooltip: this.tooltip,\n      copied: this._copied,\n      disabled: this.disabled,\n      onClick: this._handleClick.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-copy-button': LibCopyButton;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index210.js

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

package/dist/index210.js.map

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

package/dist/index211.js

@@ -1,44 +1,5 @@
-import { html } from "lit";
-const chevronSvg = html`
-  <svg
-    class="accordion-item__icon"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-  >
-    <polyline points="3,5 8,11 13,5"/>
-  </svg>
-`;
-function accordionItemTemplate(props) {
-  return html`
-    <div class="accordion-item__root">
-
-      <button
-        class="accordion-item__trigger"
-        type="button"
-        aria-expanded="${props.open ? "true" : "false"}"
-        @click=${props.onToggle}
-      >
-        <span class="accordion-item__label">${props.label}</span>
-        ${chevronSvg}
-      </button>
-
-      <div class="accordion-item__body">
-        <div class="accordion-item__body-inner">
-          <div class="accordion-item__content">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  `;
-}
+const uploaderCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.fu-root{display:flex;flex-direction:column;width:100%}.fu-zone{position:relative;border:1.5px dashed var(--border-default);background:var(--bg-elevated);padding:var(--lib-space-xl) var(--lib-space-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md);text-align:center;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),transform var(--duration-fast);width:100%}.fu-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone:hover{border-color:var(--border-strong);background:var(--bg-surface)}.fu-zone.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50);transform:scale(1.005)}.fu-zone.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-icon{font-size:40px;color:var(--text-muted);line-height:1;display:flex;transition:color var(--duration-base),transform var(--duration-slow) var(--ease-bounce)}.fu-zone:hover .fu-zone-icon,.fu-zone.is-dragover .fu-zone-icon{color:var(--color-kaki-400);transform:translateY(-3px) scale(1.08)}.fu-zone-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-primary)}.fu-zone-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}.fu-zone-sub span{color:var(--color-kaki-500);text-decoration:underline;text-underline-offset:2px}.fu-zone-hint{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-top:var(--lib-space-xs)}.fu-zone-sm{position:relative;border:1px dashed var(--border-default);background:var(--bg-elevated);padding:var(--lib-space-md) var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-md);cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);width:100%}.fu-zone-sm input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone-sm:hover,.fu-zone-sm.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50)}.fu-zone-sm.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-sm-icon{font-size:22px;color:var(--text-muted);flex-shrink:0;display:flex;transition:color var(--duration-base)}.fu-zone-sm:hover .fu-zone-sm-icon,.fu-zone-sm.is-dragover .fu-zone-sm-icon{color:var(--color-kaki-400)}.fu-zone-sm-text{display:flex;flex-direction:column;gap:2px}.fu-zone-sm-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--text-secondary);text-transform:uppercase}.fu-zone-sm-sub{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide)}.fu-zone-img{position:relative;border:1.5px dashed var(--border-default);background:var(--bg-surface);width:100%;aspect-ratio:16 / 7;overflow:hidden;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--lib-space-sm)}.fu-zone-img input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone-img:hover{border-color:var(--border-strong)}.fu-zone-img.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50)}.fu-zone-img.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--lib-space-sm);pointer-events:none}.fu-zone-img-preview{position:absolute;top:0;right:0;bottom:0;left:0;object-fit:cover;width:100%;height:100%;display:none}.fu-zone-img.has-preview .fu-zone-img-preview{display:block}.fu-zone-img.has-preview .fu-zone-img-placeholder{display:none}.fu-zone-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#221c1680;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);opacity:0;transition:opacity var(--duration-base);pointer-events:none}.fu-zone-img.has-preview:hover .fu-zone-img-overlay{opacity:1}.fu-zone-img-overlay-text{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-white)}.fu-progress-bar{height:2px;background:var(--border-subtle);width:100%;overflow:hidden;margin-top:-1px}.fu-progress-fill{height:100%;background:var(--color-kaki-400);transition:width 80ms linear}.fu-list{display:flex;flex-direction:column;gap:1px;width:100%}.fu-file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);position:relative;overflow:hidden;transition:background var(--duration-base);animation:fu-slide-in .25s var(--ease-out)}.fu-file:hover{background:var(--bg-surface)}.fu-file-prog-bg{position:absolute;left:0;top:0;bottom:0;background:var(--color-kaki-50);transition:width 80ms linear;pointer-events:none;z-index:0}.fu-file>*{position:relative;z-index:1}.fu-file-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);flex-shrink:0;transition:color var(--duration-base),background var(--duration-base)}.fu-file.is-done .fu-file-icon{color:var(--color-celadon-500);background:var(--color-celadon-50);border-color:var(--color-celadon-100)}.fu-file.is-error .fu-file-icon{color:var(--color-error);background:#fff8f7;border-color:#f5c4bc}.fu-ext{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}.fu-file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0;border:1px solid var(--border-subtle);display:block}.fu-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.fu-file-name{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fu-file-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);display:flex;align-items:center;gap:var(--lib-space-sm)}.fu-file-info-sep{width:3px;height:3px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.fu-file-actions{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0}.fu-file-pct{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-kaki-500);min-width:28px;text-align:right}.fu-status-done{color:var(--color-celadon-500);font-size:18px;display:flex}.fu-status-error{color:var(--color-error);font-size:18px;display:flex}.fu-file-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-full);transition:background var(--duration-fast),color var(--duration-fast);flex-shrink:0}.fu-file-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.fu-file.is-error .fu-file-remove:hover{background:#fff8f7;color:var(--color-error)}.fu-summary{display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-sm) var(--lib-space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-top:none}.fu-summary-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.fu-summary-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;background:var(--color-washi-900);color:var(--color-washi-50);border:none;padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base)}.fu-summary-btn:hover{background:var(--color-washi-800)}.fu-summary-btn:disabled{opacity:.38;cursor:not-allowed}.fu-spinner{width:16px;height:16px;border:2px solid var(--color-washi-200);border-top-color:var(--color-kaki-400);border-radius:var(--radius-full);animation:fu-spin .7s linear infinite;flex-shrink:0}@keyframes fu-slide-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes fu-spin{to{transform:rotate(360deg)}}}";
 export {
-  accordionItemTemplate
+  uploaderCss as default
 };
 //# sourceMappingURL=index211.js.map

package/dist/index211.js.map

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