@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index251.js

@@ -1,5 +1,12 @@
-const radioCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.radio{display:inline-flex;align-items:flex-start;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none}:host([disabled]) .radio{cursor:not-allowed;opacity:.4;pointer-events:none}.radio__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}.radio__circle{width:18px;height:18px;flex-shrink:0;margin-top:2px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.radio:hover .radio__circle{border-color:var(--border-strong)}.radio__input:focus-visible~.radio__circle,.radio:focus-within .radio__circle{box-shadow:0 0 0 3px var(--color-ink-20);border-color:var(--color-washi-700)}.radio__dot{width:8px;height:8px;border-radius:var(--radius-full);background:#fff;transform:scale(0);transition:transform var(--duration-base) var(--ease-bounce)}:host([checked]) .radio__circle{background:var(--color-washi-900);border-color:var(--color-washi-900)}:host([checked]) .radio__dot{transform:scale(1)}.radio__label{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.radio__label-text{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);line-height:var(--leading-snug)}.radio__label-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);line-height:var(--leading-snug)}:host([size="sm"]) .radio__circle{width:14px;height:14px}:host([size="sm"]) .radio__dot{width:6px;height:6px}:host([size="sm"]) .radio__label-text{font-size:var(--text-sm)}:host([size="lg"]) .radio__circle{width:22px;height:22px}:host([size="lg"]) .radio__dot{width:10px;height:10px}:host([size="lg"]) .radio__label-text{font-size:var(--text-md)}:host([variant="kaki"][checked]) .radio__circle{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([variant="kaki"]) .radio:hover .radio__circle{border-color:var(--color-kaki-400)}:host([variant="kaki"]) .radio:focus-within .radio__circle{box-shadow:0 0 0 3px #6d4d3e1f;border-color:var(--color-kaki-500)}:host([variant="error"]) .radio__circle{border-color:var(--color-error)}:host([variant="error"]) .radio:hover .radio__circle{border-color:var(--color-error)}:host([variant="error"]) .radio__label-text{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.radio__circle,.radio__dot{transition:none}}}';
+import { html } from "lit";
+function parallaxTemplate(_ctx) {
+  return html`
+    <div class="parallax-wrapper" part="wrapper">
+      <slot></slot>
+    </div>
+  `;
+}
 export {
-  radioCss as default
+  parallaxTemplate
 };
 //# sourceMappingURL=index251.js.map

package/dist/index251.js.map

@@ -1 +1 @@
-{"version":3,"file":"index251.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index251.js","sources":["../src/components/organisms/parallax-container/lib-parallax.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxContainer } from './lib-parallax.component';\n\n// _ctx disponible para futuras extensiones del template (slot named, etc.)\nexport function parallaxTemplate(_ctx: LibParallaxContainer): TemplateResult {\n  return html`\n    <div class=\"parallax-wrapper\" part=\"wrapper\">\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIO,SAAS,iBAAiB,MAA4C;AAC3E,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;"}

package/dist/index252.js

@@ -1,22 +1,5 @@
-import { html } from "lit";
-function kbdTemplate(props) {
-  const { size, variant, pressed, onDown, onUp, onLeave } = props;
-  const variantClass = variant !== "default" ? ` kbd-${variant}` : "";
-  const pressedClass = pressed ? " is-pressed" : "";
-  const cls = `kbd kbd-${size}${variantClass}${pressedClass}`;
-  return html`
-    <kbd
-      class=${cls}
-      role="img"
-      @mousedown=${onDown}
-      @mouseup=${onUp}
-      @mouseleave=${onLeave}
-    >
-      <slot></slot>
-    </kbd>
-  `;
-}
+const parallaxCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;overflow:hidden;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.parallax-wrapper{position:relative;width:100%;height:100%}:host([visible]) ::slotted(*){will-change:transform}@media(prefers-reduced-motion:reduce){::slotted(*){will-change:auto!important;transform:none!important}}}";
 export {
-  kbdTemplate
+  parallaxCss as default
 };
 //# sourceMappingURL=index252.js.map

package/dist/index252.js.map

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

package/dist/index253.js

@@ -1,5 +1,18 @@
-const kbdCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:baseline}*,*:before,*:after{box-sizing:border-box}}@layer components{.kbd{display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-weight:var(--weight-regular);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:default;vertical-align:baseline;line-height:1;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);border-bottom-width:3px;border-radius:var(--radius-sm);box-shadow:0 1px 0 0 var(--color-washi-300),inset 0 1px #fffc;transition:transform var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}.kbd.is-pressed,.kbd:active{transform:translateY(1px);border-bottom-width:1px;box-shadow:0 0 0 0 transparent,inset 0 1px 2px var(--color-ink-20);background:var(--bg-surface)}:host([size="lg"]) .kbd.is-pressed,:host([size="lg"]) .kbd:active{transform:translateY(2px);border-bottom-width:2px}:host([size="xs"]) .kbd{font-size:9px;letter-spacing:.04em;padding:1px 5px;min-width:18px;height:18px;border-bottom-width:2px}:host([size="sm"]) .kbd{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:2px var(--lib-space-sm);min-width:22px;height:22px}:host([size="md"]) .kbd{font-size:var(--text-sm);letter-spacing:var(--tracking-wide);padding:3px var(--lib-space-sm);min-width:28px;height:28px}:host([size="lg"]) .kbd{font-size:var(--text-base);letter-spacing:var(--tracking-wide);padding:var(--lib-space-sm) var(--lib-space-md);min-width:36px;height:36px;border-bottom-width:4px}:host([variant="dark"]) .kbd{background:var(--color-washi-800);color:var(--color-washi-100);border-color:var(--color-washi-900);border-bottom-color:var(--color-washi-950);box-shadow:0 1px 0 0 var(--color-washi-950),inset 0 1px #ffffff14}:host([variant="dark"]) .kbd.is-pressed,:host([variant="dark"]) .kbd:active{background:var(--color-washi-900);box-shadow:inset 0 1px 3px #0006}:host([variant="ghost"]) .kbd{background:transparent;color:var(--text-secondary);border-color:var(--border-default);border-bottom-color:var(--border-strong, var(--color-washi-500));box-shadow:none}:host([variant="ghost"]) .kbd.is-pressed,:host([variant="ghost"]) .kbd:active{background:var(--bg-surface)}:host([variant="kaki"]) .kbd{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-400);border-bottom-color:var(--color-kaki-500);box-shadow:0 1px 0 0 var(--color-kaki-500),inset 0 1px #fff9}:host([variant="celadon"]) .kbd{background:var(--color-celadon-100);color:var(--color-celadon-600);border-color:var(--color-celadon-500);border-bottom-color:var(--color-celadon-600);box-shadow:0 1px 0 0 var(--color-celadon-600),inset 0 1px #ffffff80}@media(prefers-reduced-motion:reduce){.kbd{transition:none}}}';
+import { html } from "lit";
+function parallaxTextStackTemplate(ctx) {
+  return html`
+    <div class="pts-container" part="container">
+      ${ctx.lines.map((line, i) => html`
+        <span
+          class="pts-layer ${i % 2 === 0 ? "pts-layer--outline" : "pts-layer--italic"}"
+          part="layer layer-${i % 2 === 0 ? "outline" : "italic"}"
+          aria-hidden="${i > 0}"
+        >${line}</span>
+      `)}
+    </div>
+  `;
+}
 export {
-  kbdCss as default
+  parallaxTextStackTemplate
 };
 //# sourceMappingURL=index253.js.map

package/dist/index253.js.map

@@ -1 +1 @@
-{"version":3,"file":"index253.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index253.js","sources":["../src/components/organisms/parallax-text/lib-parallax-text-stack.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxTextStack } from './lib-parallax-text-stack.component';\n\nexport function parallaxTextStackTemplate(ctx: LibParallaxTextStack): TemplateResult {\n  return html`\n    <div class=\"pts-container\" part=\"container\">\n      ${ctx.lines.map((line, i) => html`\n        <span\n          class=\"pts-layer ${i % 2 === 0 ? 'pts-layer--outline' : 'pts-layer--italic'}\"\n          part=\"layer layer-${i % 2 === 0 ? 'outline' : 'italic'}\"\n          aria-hidden=\"${i > 0}\"\n        >${line}</span>\n      `)}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,0BAA0B,KAA2C;AACnF,SAAO;AAAA;AAAA,QAED,IAAI,MAAM,IAAI,CAAC,MAAM,MAAM;AAAA;AAAA,6BAEN,IAAI,MAAM,IAAI,uBAAuB,mBAAmB;AAAA,8BACvD,IAAI,MAAM,IAAI,YAAY,QAAQ;AAAA,yBACvC,IAAI,CAAC;AAAA,WACnB,IAAI;AAAA,OACR,CAAC;AAAA;AAAA;AAGR;"}

package/dist/index254.js

@@ -1,5 +1,5 @@
-const spinnerCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}@keyframes sp-rotate{to{transform:rotate(360deg)}}@keyframes sp-rotate-reverse{to{transform:rotate(-360deg)}}:host([variant="enso"]) svg,:host(:not([variant])) svg{display:block;animation:sp-rotate 2.2s cubic-bezier(.5,.1,.5,.9) infinite}:host([variant="enso"][size="sm"]) svg,:host(:not([variant])[size="sm"]) svg{width:24px;height:24px}:host([variant="enso"][size="md"]) svg,:host(:not([variant])[size="md"]) svg,:host([variant="enso"]:not([size])) svg,:host(:not([variant],[size])) svg{width:48px;height:48px}:host([variant="enso"][size="lg"]) svg,:host(:not([variant])[size="lg"]) svg{width:72px;height:72px}.sp-sumi-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.sp-sumi{border-radius:50%;filter:blur(.6px);animation:sp-rotate 1.6s linear infinite;background:conic-gradient(from 0deg,#2a1f1a00,#2a1f1a14 8.33%,#2a1f1a40 25%,#2a1f1aa6,#2a1f1aeb 75%,#2a1f1a 86.11%,#2a1f1a33 95.83%,#2a1f1a00);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][tone="celadon"]) .sp-sumi{background:conic-gradient(from 0deg,#487d7300,#487d7314 8.33%,#487d734d 27.78%,#487d73b3,#487d73 83.33%,#487d7326 97.22%,#487d7300);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark]) .sp-sumi{background:conic-gradient(from 0deg,#fef7f200,#fef7f214 8.33%,#fef7f240 25%,#fef7f2a6,#fef7f2eb 75%,#fef7f2 86.11%,#fef7f233 95.83%,#fef7f200);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark][tone="kaki"]) .sp-sumi{background:conic-gradient(from 0deg,#c47c3b00,#c47c3b1a 8.33%,#c47c3b4d 27.78%,#c47c3bbf,#c47c3b 83.33%,#c47c3b26 97.22%,#c47c3b00);filter:blur(.5px) drop-shadow(0 0 4px oklch(65% .12 60deg / .4));mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][size="sm"]) .sp-sumi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="sumi"]:not([size])) .sp-sumi,:host([variant="sumi"][size="md"]) .sp-sumi{width:48px;height:48px}:host([variant="sumi"][size="lg"]) .sp-sumi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-kintsugi{border-radius:50%;background:conic-gradient(from 0deg,#6d4d3e00,#7f594426 11.11%,#a36b4480,#c47c3b 61.11%,#d28425,#ad704099 88.89%,#6d4d3e00);mask:radial-gradient(circle at center,transparent 56%,black 57%);filter:blur(.4px) drop-shadow(0 0 4px oklch(65% .12 60deg / .5));animation:sp-rotate 2s cubic-bezier(.4,0,.6,1) infinite}:host([variant="kintsugi"][dark]) .sp-kintsugi{background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,#ea8e00,#ec9100 73.61%,#f19600 80.56%,#ea9100d9,#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,color(xyz 0.438 0.369 0.044),color(xyz 0.452 0.381 0.039) 73.61%,color(xyz 0.481 0.404 0.028) 80.56%,color(xyz 0.447 0.377 0.036 / 0.85),#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);filter:blur(.3px) drop-shadow(0 0 6px oklch(70% .14 62deg / .6))}:host([variant="kintsugi"][size="sm"]) .sp-kintsugi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="kintsugi"]:not([size])) .sp-kintsugi,:host([variant="kintsugi"][size="md"]) .sp-kintsugi{width:48px;height:48px}:host([variant="kintsugi"][size="lg"]) .sp-kintsugi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-shizuku{position:relative;border-radius:50%;animation:sp-rotate 1.8s linear infinite}.sp-shizuku span{position:absolute;border-radius:50%;background:#2a1f1a;top:50%;left:50%;transform-origin:0 0}:host([variant="shizuku"][tone="kaki"]) .sp-shizuku span,:host([variant="shizuku"][dark]) .sp-shizuku span{background:#c47c3b}.sp-shizuku.sp-shizuku--md{width:48px;height:48px}.sp-shizuku.sp-shizuku--md span{margin:-3px}.sp-shizuku.sp-shizuku--md span:nth-child(1){width:7px;height:7px;transform:rotate(0) translate(18px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--md span:nth-child(2){width:5.5px;height:5.5px;transform:rotate(60deg) translate(18px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--md span:nth-child(3){width:4px;height:4px;transform:rotate(115deg) translate(18px) translateY(-50%);opacity:.48}.sp-shizuku.sp-shizuku--md span:nth-child(4){width:3px;height:3px;transform:rotate(160deg) translate(18px) translateY(-50%);opacity:.28}.sp-shizuku.sp-shizuku--md span:nth-child(5){width:2px;height:2px;transform:rotate(200deg) translate(18px) translateY(-50%);opacity:.13}.sp-shizuku.sp-shizuku--md span:nth-child(6){width:1.5px;height:1.5px;transform:rotate(235deg) translate(18px) translateY(-50%);opacity:.06}.sp-shizuku.sp-shizuku--sm{width:24px;height:24px}.sp-shizuku.sp-shizuku--sm span{margin:-1.5px}.sp-shizuku.sp-shizuku--sm span:nth-child(1){width:4px;height:4px;transform:rotate(0) translate(9px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--sm span:nth-child(2){width:3px;height:3px;transform:rotate(60deg) translate(9px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--sm span:nth-child(3){width:2px;height:2px;transform:rotate(115deg) translate(9px) translateY(-50%);opacity:.45}.sp-shizuku.sp-shizuku--sm span:nth-child(4){width:1.5px;height:1.5px;transform:rotate(160deg) translate(9px) translateY(-50%);opacity:.25}.sp-shizuku.sp-shizuku--sm span:nth-child(5){width:1px;height:1px;transform:rotate(200deg) translate(9px) translateY(-50%);opacity:.1}.sp-shizuku.sp-shizuku--sm span:nth-child(6){width:1px;height:1px;transform:rotate(235deg) translate(9px) translateY(-50%);opacity:.05}.sp-shizuku.sp-shizuku--lg{width:72px;height:72px}.sp-shizuku.sp-shizuku--lg span{margin:-4.5px}.sp-shizuku.sp-shizuku--lg span:nth-child(1){width:10px;height:10px;transform:rotate(0) translate(27px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--lg span:nth-child(2){width:8px;height:8px;transform:rotate(55deg) translate(27px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--lg span:nth-child(3){width:6px;height:6px;transform:rotate(105deg) translate(27px) translateY(-50%);opacity:.5}.sp-shizuku.sp-shizuku--lg span:nth-child(4){width:4.5px;height:4.5px;transform:rotate(148deg) translate(27px) translateY(-50%);opacity:.3}.sp-shizuku.sp-shizuku--lg span:nth-child(5){width:3px;height:3px;transform:rotate(185deg) translate(27px) translateY(-50%);opacity:.15}.sp-shizuku.sp-shizuku--lg span:nth-child(6){width:2px;height:2px;transform:rotate(218deg) translate(27px) translateY(-50%);opacity:.06}@media(prefers-reduced-motion:reduce){:host([variant="enso"]) svg,:host(:not([variant])) svg,.sp-sumi,.sp-kintsugi,.sp-shizuku{animation:none}}}';
+const stackCss = '@layer tokens,reset,components;@layer reset{:host{display:block;padding:10vh 0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pts-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md)}.pts-layer{display:block;will-change:transform;transition:transform var(--duration-fast) var(--ease-out);white-space:nowrap;line-height:.9;text-transform:uppercase;-webkit-user-select:none;user-select:none}:host([size="sm"]) .pts-layer{font-size:clamp(2rem,6vw,4rem)}:host([size="md"]) .pts-layer{font-size:clamp(3rem,8vw,6rem)}:host([size="lg"]) .pts-layer,:host(:not([size])) .pts-layer{font-size:clamp(4rem,10vw,8rem)}:host([size="xl"]) .pts-layer{font-size:clamp(5rem,13vw,10rem)}:host([size="2xl"]) .pts-layer{font-size:clamp(6rem,16vw,14rem)}.pts-layer--outline{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);-webkit-text-stroke:1px var(--text-primary);color:transparent}.pts-layer--italic{font-family:var(--lib-font-body);font-style:italic;font-weight:400;letter-spacing:var(--tracking-tight);color:var(--text-primary)}:host([color="muted"]) .pts-layer--outline{-webkit-text-stroke-color:var(--text-muted)}:host([color="muted"]) .pts-layer--italic{color:var(--text-muted)}:host([color="kaki"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-kaki-500)}:host([color="kaki"]) .pts-layer--italic{color:var(--color-kaki-500)}:host([color="celadon"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-celadon-500)}:host([color="celadon"]) .pts-layer--italic{color:var(--color-celadon-500)}@media(prefers-reduced-motion:reduce){.pts-layer{transition:none;transform:none!important}}}';
 export {
-  spinnerCss as default
+  stackCss as default
 };
 //# sourceMappingURL=index254.js.map

package/dist/index255.js

@@ -1,91 +1,157 @@
-import { html, svg } from "lit";
-function ensoStroke(tone, dark) {
-  if (dark) {
-    if (tone === "kaki") {
-      return { blur: "oklch(70% 0.14 60)", main: "oklch(68% 0.13 60)", bopacity: 0.3 };
-    }
-    return { blur: "oklch(88% 0.01 60)", main: "oklch(88% 0.01 60)", bopacity: 0.2 };
+import { html, nothing } from "lit";
+const svgSearch = html`
+  <svg width="11" height="11" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
+  </svg>`;
+const svgLogout = html`
+  <svg width="11" height="11" viewBox="0 0 14 14" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <path d="M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3"/>
+    <polyline points="10,4 12,7 10,10"/>
+    <line x1="4" y1="7" x2="12" y2="7"/>
+  </svg>`;
+const svgMenu = html`
+  <svg width="18" height="18" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <line x1="2" y1="4" x2="14" y2="4"/>
+    <line x1="2" y1="8" x2="14" y2="8"/>
+    <line x1="2" y1="12" x2="14" y2="12"/>
+  </svg>`;
+const svgClose = html`
+  <svg width="18" height="18" viewBox="0 0 14 14" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <line x1="2" y1="2" x2="12" y2="12"/>
+    <line x1="12" y1="2" x2="2" y2="12"/>
+  </svg>`;
+function renderBadge(badge) {
+  if (badge === void 0 || badge === null || badge === "") return nothing;
+  if (badge === "dot") {
+    return html`<span class="sb-badge sb-badge--dot" aria-hidden="true"></span>`;
   }
-  if (tone === "kaki") return { blur: "oklch(55% 0.08 45)", main: "oklch(50% 0.07 45)", bopacity: 0.25 };
-  if (tone === "celadon") return { blur: "oklch(50% 0.06 180)", main: "oklch(48% 0.06 180)", bopacity: 0.25 };
-  return { blur: "oklch(25% 0.02 45)", main: "oklch(25% 0.02 45)", bopacity: 0.25 };
+  const n = typeof badge === "number" ? badge : parseInt(String(badge), 10);
+  const cls = !isNaN(n) && n > 9 || isNaN(n) ? "sb-badge--kaki" : "sb-badge--muted";
+  return html`<span class="sb-badge ${cls}">${badge}</span>`;
 }
-function ensoWidths(size) {
-  if (size === "sm") return { blur: 2.5, main: 2, feStd: 1.5 };
-  if (size === "lg") return { blur: 3.5, main: 3, feStd: 2 };
-  return { blur: 3, main: 2.5, feStd: 1.5 };
-}
-function ensoTemplate(props) {
-  const stroke = ensoStroke(props.tone, props.dark);
-  const w = ensoWidths(props.size);
-  const fid = "sp-enso-blur";
+function renderHeader(p) {
+  const isGlitch = p.variant === "glitch";
+  const isKintsugi = p.variant === "kintsugi";
   return html`
-    ${svg`
-      <svg viewBox="0 0 48 48" fill="none" aria-hidden="true" focusable="false">
-        <defs>
-          <filter id="${fid}">
-            <feGaussianBlur stdDeviation="${w.feStd}" result="blur"/>
-            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-          </filter>
-        </defs>
-        <!-- blur halo layer -->
-        <circle
-          cx="24" cy="24" r="18"
-          stroke="${stroke.blur}"
-          stroke-width="${w.blur}"
-          stroke-linecap="round"
-          stroke-dasharray="95 18"
-          fill="none"
-          opacity="${stroke.bopacity}"
-          filter="url(#${fid})"
-        />
-        <!-- crisp layer -->
-        <circle
-          cx="24" cy="24" r="18"
-          stroke="${stroke.main}"
-          stroke-width="${w.main}"
-          stroke-linecap="round"
-          stroke-dasharray="95 18"
-          fill="none"
-        />
-      </svg>
-    `}
+    <div class="sb-header" part="header">
+      <div class="sb-logo-mark" part="logo-mark">
+        ${isKintsugi ? html`<span>${p.logoMark}</span>` : p.logoMark}
+      </div>
+      ${isGlitch ? html`<span class="sb-brand">⌗ ${p.brandName.toUpperCase()}</span>
+                <span class="sb-version">v0.1</span>` : html`<span class="sb-brand">${p.brandName}</span>`}
+    </div>
   `;
 }
-function sumiTemplate() {
+function renderSearch(p) {
+  if (!p.showSearch) return nothing;
   return html`
-    <div class="sp-sumi-wrap">
-      <div class="sp-sumi"></div>
+    <div class="sb-search" part="search">
+      <div class="sb-search-inner">
+        ${svgSearch}
+        <input
+          class="sb-search-input"
+          type="search"
+          placeholder="${p.searchPlaceholder}"
+          aria-label="Buscar"
+          @input="${(e) => p.onSearchInput(e.target.value)}"
+        />
+        <span class="sb-search-kbd">⌘K</span>
+      </div>
     </div>
   `;
 }
-function kintsugiTemplate() {
-  return html`<div class="sp-kintsugi"></div>`;
+function renderNav(p) {
+  const isGlitch = p.variant === "glitch";
+  return html`
+    <nav class="sb-nav" part="nav" aria-label="Navegación principal">
+      <div class="sb-indicator" part="indicator"></div>
+
+      ${p.links.map((link) => html`
+        ${link.group ? html`
+          <div class="sb-group" part="group">
+            ${isGlitch ? `// ${link.group}` : link.group}
+          </div>
+        ` : nothing}
+
+        <button
+          class="sb-link ${link.id === p.active ? "is-active" : ""}"
+          part="link${link.id === p.active ? " link-active" : ""}"
+          data-id="${link.id}"
+          ?disabled="${link.disabled}"
+          aria-current="${link.id === p.active ? "page" : nothing}"
+          @click="${() => {
+    if (!link.disabled) p.onLinkClick(link.id);
+  }}"
+        >
+          <span class="sb-link-icon">
+            <lib-icon name="${link.icon}" size="sm"></lib-icon>
+          </span>
+
+          ${isGlitch ? html`<span class="sb-link-prefix">›</span>` : nothing}
+
+          <span class="sb-link-label">${link.label}</span>
+
+          ${renderBadge(link.badge)}
+        </button>
+      `)}
+    </nav>
+  `;
 }
-function shizukuTemplate(size) {
-  const cls = `sp-shizuku sp-shizuku--${size}`;
+function renderUser(p) {
+  const isDark = p.variant === "dark" || !p.variant;
   return html`
-    <div class="${cls}">
-      <span></span><span></span><span></span>
-      <span></span><span></span><span></span>
+    <div class="sb-user" part="user">
+      <div class="sb-user-avatar" part="user-avatar">
+        ${p.userAvatar ? html`<img src="${p.userAvatar}" alt="${p.userName}">` : p.userInitials || p.userName.slice(0, 1)}
+      </div>
+
+      <div class="sb-user-info">
+        <div class="sb-user-name">${p.userName}</div>
+        ${p.userRole ? html`<div class="sb-user-role">${p.userRole}</div>` : nothing}
+      </div>
+
+      ${isDark ? html`<span class="sb-user-dot" aria-hidden="true"></span>` : p.showUserAction ? html`
+              <button
+                class="sb-user-action"
+                aria-label="Acción de usuario"
+                @click="${p.onUserAction}"
+              >${svgLogout}</button>` : nothing}
     </div>
   `;
 }
-function spinnerTemplate(props) {
-  const inner = props.variant === "sumi" ? sumiTemplate() : props.variant === "kintsugi" ? kintsugiTemplate() : props.variant === "shizuku" ? shizukuTemplate(props.size) : ensoTemplate(props);
+function sidebarTemplate(p) {
   return html`
     <div
-      role="status"
-      aria-label="${props.label}"
-      aria-live="polite"
+      class="sb-overlay ${p.mobileOpen ? "is-open" : ""}"
+      @click="${p.onOverlayClick}"
+      aria-hidden="true"
+    ></div>
+
+    <aside
+      class="sidebar
+        ${p.mobileOpen ? "is-open" : ""}
+        ${p.collapsed ? "is-collapsed" : ""}"
+      part="sidebar"
     >
-      ${inner}
-      <!-- Visually hidden label for screen readers -->
-      <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;">${props.label}</span>
-    </div>
+      ${renderHeader(p)}
+      ${renderSearch(p)}
+      ${renderNav(p)}
+      ${renderUser(p)}
+    </aside>
+
+    <button
+      class="sb-toggle"
+      aria-label="${p.mobileOpen ? "Cerrar menú" : "Abrir menú"}"
+      aria-expanded="${p.mobileOpen}"
+      @click="${p.onToggleClick}"
+    >${p.mobileOpen ? svgClose : svgMenu}</button>
   `;
 }
 export {
-  spinnerTemplate
+  sidebarTemplate
 };
 //# sourceMappingURL=index255.js.map

package/dist/index255.js.map

@@ -1 +1 @@
-{"version":3,"file":"index255.js","sources":["../src/components/atoms/spinner/lib-spinner.html.ts"],"sourcesContent":["import { html, svg, TemplateResult } from 'lit';\nimport type { SpinnerVariant, SpinnerSize, SpinnerTone } from './lib-spinner.component';\n\nexport interface SpinnerTemplateProps {\n  variant: SpinnerVariant;\n  size:    SpinnerSize;\n  tone:    SpinnerTone;\n  dark:    boolean;\n  label:   string;\n}\n\n/* ── Stroke configs per tone+dark ──────────────────────────── */\ntype StrokeConfig = {\n  blur:  string;  /* blur circle stroke color */\n  main:  string;  /* main circle stroke color */\n  bopacity: number; /* blur circle opacity */\n};\n\nfunction ensoStroke(tone: SpinnerTone, dark: boolean): StrokeConfig {\n  if (dark) {\n    if (tone === 'kaki') {\n      return { blur: 'oklch(70% 0.14 60)', main: 'oklch(68% 0.13 60)', bopacity: 0.30 };\n    }\n    /* ink / celadon → paper on dark */\n    return { blur: 'oklch(88% 0.01 60)', main: 'oklch(88% 0.01 60)', bopacity: 0.20 };\n  }\n  if (tone === 'kaki')    return { blur: 'oklch(55% 0.08 45)', main: 'oklch(50% 0.07 45)', bopacity: 0.25 };\n  if (tone === 'celadon') return { blur: 'oklch(50% 0.06 180)', main: 'oklch(48% 0.06 180)', bopacity: 0.25 };\n  /* default: ink */\n  return { blur: 'oklch(25% 0.02 45)', main: 'oklch(25% 0.02 45)', bopacity: 0.25 };\n}\n\ntype StrokeWidth = { blur: number; main: number; feStd: number; };\nfunction ensoWidths(size: SpinnerSize): StrokeWidth {\n  if (size === 'sm') return { blur: 2.5, main: 2,   feStd: 1.5 };\n  if (size === 'lg') return { blur: 3.5, main: 3,   feStd: 2.0 };\n  return              { blur: 3,   main: 2.5, feStd: 1.5 }; /* md */\n}\n\n/* ── Enso ───────────────────────────────────────────────────── */\nfunction ensoTemplate(props: SpinnerTemplateProps): TemplateResult {\n  const stroke = ensoStroke(props.tone, props.dark);\n  const w      = ensoWidths(props.size);\n  /* Each shadow DOM is isolated → filter IDs are collision-free */\n  const fid    = 'sp-enso-blur';\n\n  return html`\n    ${svg`\n      <svg viewBox=\"0 0 48 48\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\">\n        <defs>\n          <filter id=\"${fid}\">\n            <feGaussianBlur stdDeviation=\"${w.feStd}\" result=\"blur\"/>\n            <feMerge><feMergeNode in=\"blur\"/><feMergeNode in=\"SourceGraphic\"/></feMerge>\n          </filter>\n        </defs>\n        <!-- blur halo layer -->\n        <circle\n          cx=\"24\" cy=\"24\" r=\"18\"\n          stroke=\"${stroke.blur}\"\n          stroke-width=\"${w.blur}\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"95 18\"\n          fill=\"none\"\n          opacity=\"${stroke.bopacity}\"\n          filter=\"url(#${fid})\"\n        />\n        <!-- crisp layer -->\n        <circle\n          cx=\"24\" cy=\"24\" r=\"18\"\n          stroke=\"${stroke.main}\"\n          stroke-width=\"${w.main}\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"95 18\"\n          fill=\"none\"\n        />\n      </svg>\n    `}\n  `;\n}\n\n/* ── Sumi ───────────────────────────────────────────────────── */\nfunction sumiTemplate(): TemplateResult {\n  return html`\n    <div class=\"sp-sumi-wrap\">\n      <div class=\"sp-sumi\"></div>\n    </div>\n  `;\n}\n\n/* ── Kintsugi ───────────────────────────────────────────────── */\nfunction kintsugiTemplate(): TemplateResult {\n  return html`<div class=\"sp-kintsugi\"></div>`;\n}\n\n/* ── Shizuku ────────────────────────────────────────────────── */\nfunction shizukuTemplate(size: SpinnerSize): TemplateResult {\n  const cls = `sp-shizuku sp-shizuku--${size}`;\n  return html`\n    <div class=\"${cls}\">\n      <span></span><span></span><span></span>\n      <span></span><span></span><span></span>\n    </div>\n  `;\n}\n\n/* ── Root ───────────────────────────────────────────────────── */\nexport function spinnerTemplate(props: SpinnerTemplateProps): TemplateResult {\n  const inner: TemplateResult =\n    props.variant === 'sumi'     ? sumiTemplate() :\n    props.variant === 'kintsugi' ? kintsugiTemplate() :\n    props.variant === 'shizuku'  ? shizukuTemplate(props.size) :\n    ensoTemplate(props);\n\n  return html`\n    <div\n      role=\"status\"\n      aria-label=\"${props.label}\"\n      aria-live=\"polite\"\n    >\n      ${inner}\n      <!-- Visually hidden label for screen readers -->\n      <span style=\"position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;\">${props.label}</span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAkBA,SAAS,WAAW,MAAmB,MAA6B;AAClE,MAAI,MAAM;AACR,QAAI,SAAS,QAAQ;AACnB,aAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,IAAA;AAAA,IAC7E;AAEA,WAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,IAAA;AAAA,EAC7E;AACA,MAAI,SAAS,OAAW,QAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,KAAA;AACnG,MAAI,SAAS,UAAW,QAAO,EAAE,MAAM,uBAAuB,MAAM,uBAAuB,UAAU,KAAA;AAErG,SAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,KAAA;AAC7E;AAGA,SAAS,WAAW,MAAgC;AAClD,MAAI,SAAS,KAAM,QAAO,EAAE,MAAM,KAAK,MAAM,GAAK,OAAO,IAAA;AACzD,MAAI,SAAS,KAAM,QAAO,EAAE,MAAM,KAAK,MAAM,GAAK,OAAO,EAAA;AACzD,SAAoB,EAAE,MAAM,GAAK,MAAM,KAAK,OAAO,IAAA;AACrD;AAGA,SAAS,aAAa,OAA6C;AACjE,QAAM,SAAS,WAAW,MAAM,MAAM,MAAM,IAAI;AAChD,QAAM,IAAS,WAAW,MAAM,IAAI;AAEpC,QAAM,MAAS;AAEf,SAAO;AAAA,MACH;AAAA;AAAA;AAAA,wBAGkB,GAAG;AAAA,4CACiB,EAAE,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAO/B,OAAO,IAAI;AAAA,0BACL,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIX,OAAO,QAAQ;AAAA,yBACX,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKR,OAAO,IAAI;AAAA,0BACL,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM3B;AAAA;AAEL;AAGA,SAAS,eAA+B;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAGA,SAAS,mBAAmC;AAC1C,SAAO;AACT;AAGA,SAAS,gBAAgB,MAAmC;AAC1D,QAAM,MAAM,0BAA0B,IAAI;AAC1C,SAAO;AAAA,kBACS,GAAG;AAAA;AAAA;AAAA;AAAA;AAKrB;AAGO,SAAS,gBAAgB,OAA6C;AAC3E,QAAM,QACJ,MAAM,YAAY,SAAa,iBAC/B,MAAM,YAAY,aAAa,qBAC/B,MAAM,YAAY,YAAa,gBAAgB,MAAM,IAAI,IACzD,aAAa,KAAK;AAEpB,SAAO;AAAA;AAAA;AAAA,oBAGW,MAAM,KAAK;AAAA;AAAA;AAAA,QAGvB,KAAK;AAAA;AAAA,oHAEuG,MAAM,KAAK;AAAA;AAAA;AAG/H;"}
+{"version":3,"file":"index255.js","sources":["../src/components/organisms/sidebar/lib-sidebar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { SidebarLink } from '../../../types';\n\nexport interface SidebarTemplateProps {\n  /* Header */\n  logoMark:   string;\n  brandName:  string;\n  /* Search */\n  showSearch:          boolean;\n  searchPlaceholder:   string;\n  /* Nav */\n  links:  SidebarLink[];\n  active: string;\n  /* User footer */\n  userName:    string;\n  userRole:    string;\n  userAvatar:  string;\n  userInitials:string;\n  showUserAction: boolean;\n  /* State */\n  variant:    string;\n  collapsed:  boolean;\n  mobileOpen: boolean;\n  /* Handlers */\n  onLinkClick:   (id: string) => void;\n  onUserAction:  () => void;\n  onSearchInput: (q: string) => void;\n  onOverlayClick: () => void;\n  onToggleClick:  () => void;\n}\n\n/* ── SVG icons inline — no lib-icon dependency for shell elements ── */\nconst svgSearch = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n  </svg>`;\n\nconst svgLogout = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <path d=\"M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3\"/>\n    <polyline points=\"10,4 12,7 10,10\"/>\n    <line x1=\"4\" y1=\"7\" x2=\"12\" y2=\"7\"/>\n  </svg>`;\n\nconst svgMenu = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"4\" x2=\"14\" y2=\"4\"/>\n    <line x1=\"2\" y1=\"8\" x2=\"14\" y2=\"8\"/>\n    <line x1=\"2\" y1=\"12\" x2=\"14\" y2=\"12\"/>\n  </svg>`;\n\nconst svgClose = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\n/* ── Badge ── */\nfunction renderBadge(badge: string | number | undefined): TemplateResult | typeof nothing {\n  if (badge === undefined || badge === null || badge === '') return nothing;\n  if (badge === 'dot') {\n    return html`<span class=\"sb-badge sb-badge--dot\" aria-hidden=\"true\"></span>`;\n  }\n  const n = typeof badge === 'number' ? badge : parseInt(String(badge), 10);\n  const cls = (!isNaN(n) && n > 9) || isNaN(n) ? 'sb-badge--kaki' : 'sb-badge--muted';\n  return html`<span class=\"sb-badge ${cls}\">${badge}</span>`;\n}\n\n/* ── Header ── */\nfunction renderHeader(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n  const isKintsugi = p.variant === 'kintsugi';\n\n  return html`\n    <div class=\"sb-header\" part=\"header\">\n      <div class=\"sb-logo-mark\" part=\"logo-mark\">\n        ${isKintsugi\n          ? html`<span>${p.logoMark}</span>`\n          : p.logoMark}\n      </div>\n      ${isGlitch\n        ? html`<span class=\"sb-brand\">⌗ ${p.brandName.toUpperCase()}</span>\n                <span class=\"sb-version\">v0.1</span>`\n        : html`<span class=\"sb-brand\">${p.brandName}</span>`}\n    </div>\n  `;\n}\n\n/* ── Search ── */\nfunction renderSearch(p: SidebarTemplateProps): TemplateResult | typeof nothing {\n  if (!p.showSearch) return nothing;\n  return html`\n    <div class=\"sb-search\" part=\"search\">\n      <div class=\"sb-search-inner\">\n        ${svgSearch}\n        <input\n          class=\"sb-search-input\"\n          type=\"search\"\n          placeholder=\"${p.searchPlaceholder}\"\n          aria-label=\"Buscar\"\n          @input=\"${(e: Event): void =>\n            p.onSearchInput((e.target as HTMLInputElement).value)}\"\n        />\n        <span class=\"sb-search-kbd\">⌘K</span>\n      </div>\n    </div>\n  `;\n}\n\n/* ── Nav ── */\nfunction renderNav(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n\n  return html`\n    <nav class=\"sb-nav\" part=\"nav\" aria-label=\"Navegación principal\">\n      <div class=\"sb-indicator\" part=\"indicator\"></div>\n\n      ${p.links.map(link => html`\n        ${link.group ? html`\n          <div class=\"sb-group\" part=\"group\">\n            ${isGlitch ? `// ${link.group}` : link.group}\n          </div>\n        ` : nothing}\n\n        <button\n          class=\"sb-link ${link.id === p.active ? 'is-active' : ''}\"\n          part=\"link${link.id === p.active ? ' link-active' : ''}\"\n          data-id=\"${link.id}\"\n          ?disabled=\"${link.disabled}\"\n          aria-current=\"${link.id === p.active ? 'page' : nothing}\"\n          @click=\"${(): void => { if (!link.disabled) p.onLinkClick(link.id); }}\"\n        >\n          <span class=\"sb-link-icon\">\n            <lib-icon name=\"${link.icon}\" size=\"sm\"></lib-icon>\n          </span>\n\n          ${isGlitch\n            ? html`<span class=\"sb-link-prefix\">›</span>`\n            : nothing}\n\n          <span class=\"sb-link-label\">${link.label}</span>\n\n          ${renderBadge(link.badge)}\n        </button>\n      `)}\n    </nav>\n  `;\n}\n\n/* ── User footer ── */\nfunction renderUser(p: SidebarTemplateProps): TemplateResult {\n  const isDark = p.variant === 'dark' || !p.variant;\n\n  return html`\n    <div class=\"sb-user\" part=\"user\">\n      <div class=\"sb-user-avatar\" part=\"user-avatar\">\n        ${p.userAvatar\n          ? html`<img src=\"${p.userAvatar}\" alt=\"${p.userName}\">`\n          : p.userInitials || p.userName.slice(0, 1)}\n      </div>\n\n      <div class=\"sb-user-info\">\n        <div class=\"sb-user-name\">${p.userName}</div>\n        ${p.userRole ? html`<div class=\"sb-user-role\">${p.userRole}</div>` : nothing}\n      </div>\n\n      ${isDark\n        ? html`<span class=\"sb-user-dot\" aria-hidden=\"true\"></span>`\n        : p.showUserAction\n          ? html`\n              <button\n                class=\"sb-user-action\"\n                aria-label=\"Acción de usuario\"\n                @click=\"${p.onUserAction}\"\n              >${svgLogout}</button>`\n          : nothing}\n    </div>\n  `;\n}\n\n/* ── Template principal ── */\nexport function sidebarTemplate(p: SidebarTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"sb-overlay ${p.mobileOpen ? 'is-open' : ''}\"\n      @click=\"${p.onOverlayClick}\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <aside\n      class=\"sidebar\n        ${p.mobileOpen ? 'is-open' : ''}\n        ${p.collapsed  ? 'is-collapsed' : ''}\"\n      part=\"sidebar\"\n    >\n      ${renderHeader(p)}\n      ${renderSearch(p)}\n      ${renderNav(p)}\n      ${renderUser(p)}\n    </aside>\n\n    <button\n      class=\"sb-toggle\"\n      aria-label=\"${p.mobileOpen ? 'Cerrar menú' : 'Abrir menú'}\"\n      aria-expanded=\"${p.mobileOpen}\"\n      @click=\"${p.onToggleClick}\"\n    >${p.mobileOpen ? svgClose : svgMenu}</button>\n  `;\n}"],"names":[],"mappings":";AAgCA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,SAAS,YAAY,OAAqE;AACxF,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,GAAI,QAAO;AAClE,MAAI,UAAU,OAAO;AACnB,WAAO;AAAA,EACT;AACA,QAAM,IAAI,OAAO,UAAU,WAAW,QAAQ,SAAS,OAAO,KAAK,GAAG,EAAE;AACxE,QAAM,MAAO,CAAC,MAAM,CAAC,KAAK,IAAI,KAAM,MAAM,CAAC,IAAI,mBAAmB;AAClE,SAAO,6BAA6B,GAAG,KAAK,KAAK;AACnD;AAGA,SAAS,aAAa,GAAyC;AAC7D,QAAM,WAAW,EAAE,YAAY;AAC/B,QAAM,aAAa,EAAE,YAAY;AAEjC,SAAO;AAAA;AAAA;AAAA,UAGC,aACE,aAAa,EAAE,QAAQ,YACvB,EAAE,QAAQ;AAAA;AAAA,QAEd,WACE,gCAAgC,EAAE,UAAU,aAAa;AAAA,wDAEzD,8BAA8B,EAAE,SAAS,SAAS;AAAA;AAAA;AAG5D;AAGA,SAAS,aAAa,GAA0D;AAC9E,MAAI,CAAC,EAAE,WAAY,QAAO;AAC1B,SAAO;AAAA;AAAA;AAAA,UAGC,SAAS;AAAA;AAAA;AAAA;AAAA,yBAIM,EAAE,iBAAiB;AAAA;AAAA,oBAExB,CAAC,MACT,EAAE,cAAe,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjE;AAGA,SAAS,UAAU,GAAyC;AAC1D,QAAM,WAAW,EAAE,YAAY;AAE/B,SAAO;AAAA;AAAA;AAAA;AAAA,QAID,EAAE,MAAM,IAAI,CAAA,SAAQ;AAAA,UAClB,KAAK,QAAQ;AAAA;AAAA,cAET,WAAW,MAAM,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA;AAAA,YAE5C,OAAO;AAAA;AAAA;AAAA,2BAGQ,KAAK,OAAO,EAAE,SAAS,cAAc,EAAE;AAAA,sBAC5C,KAAK,OAAO,EAAE,SAAS,iBAAiB,EAAE;AAAA,qBAC3C,KAAK,EAAE;AAAA,uBACL,KAAK,QAAQ;AAAA,0BACV,KAAK,OAAO,EAAE,SAAS,SAAS,OAAO;AAAA,oBAC7C,MAAY;AAAE,QAAI,CAAC,KAAK,SAAU,GAAE,YAAY,KAAK,EAAE;AAAA,EAAG,CAAC;AAAA;AAAA;AAAA,8BAGjD,KAAK,IAAI;AAAA;AAAA;AAAA,YAG3B,WACE,8CACA,OAAO;AAAA;AAAA,wCAEmB,KAAK,KAAK;AAAA;AAAA,YAEtC,YAAY,KAAK,KAAK,CAAC;AAAA;AAAA,OAE5B,CAAC;AAAA;AAAA;AAGR;AAGA,SAAS,WAAW,GAAyC;AAC3D,QAAM,SAAS,EAAE,YAAY,UAAU,CAAC,EAAE;AAE1C,SAAO;AAAA;AAAA;AAAA,UAGC,EAAE,aACA,iBAAiB,EAAE,UAAU,UAAU,EAAE,QAAQ,OACjD,EAAE,gBAAgB,EAAE,SAAS,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,oCAIhB,EAAE,QAAQ;AAAA,UACpC,EAAE,WAAW,iCAAiC,EAAE,QAAQ,WAAW,OAAO;AAAA;AAAA;AAAA,QAG5E,SACE,6DACA,EAAE,iBACA;AAAA;AAAA;AAAA;AAAA,0BAIc,EAAE,YAAY;AAAA,iBACvB,SAAS,cACd,OAAO;AAAA;AAAA;AAGnB;AAGO,SAAS,gBAAgB,GAAyC;AACvE,SAAO;AAAA;AAAA,0BAEiB,EAAE,aAAa,YAAY,EAAE;AAAA,gBACvC,EAAE,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMtB,EAAE,aAAa,YAAY,EAAE;AAAA,UAC7B,EAAE,YAAa,iBAAiB,EAAE;AAAA;AAAA;AAAA,QAGpC,aAAa,CAAC,CAAC;AAAA,QACf,aAAa,CAAC,CAAC;AAAA,QACf,UAAU,CAAC,CAAC;AAAA,QACZ,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKD,EAAE,aAAa,gBAAgB,YAAY;AAAA,uBACxC,EAAE,UAAU;AAAA,gBACnB,EAAE,aAAa;AAAA,OACxB,EAAE,aAAa,WAAW,OAAO;AAAA;AAExC;"}

package/dist/index256.js

@@ -1,14 +1,5 @@
-import { html } from "lit";
-function bentoItemTemplate(_ctx) {
-  return html`
-    <div class="bento-item" part="item">
-      <div class="content" part="content">
-        <slot></slot>
-      </div>
-    </div>
-  `;
-}
+const componentCss = '@layer tokens,reset,components;@layer reset{:host{display:block;height:100%}*,*:before,*:after{box-sizing:border-box}a{text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none}}@layer components{.sidebar{width:var(--lib-sidebar-width, 240px);height:100vh;display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:var(--z-raised);overflow:hidden;transition:width var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);background:var(--color-washi-950);border-right:1px solid rgb(255,255,255,.07)}.sidebar.is-collapsed{width:64px}:host([variant="light"]) .sidebar{background:var(--bg-elevated);border-right:1px solid var(--border-subtle)}:host([variant="kintsugi"]) .sidebar{background:var(--color-washi-950);border-right:none}:host([variant="kintsugi"]) .sidebar:after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.3) 10%,var(--color-kaki-400) 30%,#F5D08A 50%,var(--color-kaki-400) 70%,rgb(184,90,30,.3) 90%,transparent 100%);background-size:100% 200%;animation:sb-kintsugi-seam 5s linear infinite;pointer-events:none;z-index:2}@keyframes sb-kintsugi-seam{0%{background-position:0 -100%}to{background-position:0 100%}}:host([variant="glitch"]) .sidebar{background:var(--color-washi-950);border-right:1px solid rgb(255,255,255,.06);animation:sb-glitch-border 7s steps(1) infinite}:host([variant="glitch"]) .sidebar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.015) 3px,rgb(255,255,255,.015) 4px);pointer-events:none;z-index:5;animation:sb-scanline-shift 7s steps(1) infinite}@keyframes sb-glitch-border{0%,88%,to{border-color:#ffffff0f;box-shadow:none}89%{border-color:#d9723466;box-shadow:-2px 0 #d9723433}90%{border-color:#4e94824d;box-shadow:2px 0 #4e948226}91%{border-color:#ffffff0f;box-shadow:none}}@keyframes sb-scanline-shift{0%,87%,to{opacity:1;transform:none}88%{transform:translateY(-3px);opacity:.7}89%{transform:translateY(2px);opacity:.9}90%{transform:none;opacity:1}}.sb-header{height:56px;padding:0 var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;border-bottom:1px solid rgb(255,255,255,.06);position:relative;z-index:1;overflow:hidden}:host([variant="light"]) .sb-header{border-bottom-color:var(--color-washi-100)}:host([variant="kintsugi"]) .sb-header{border-bottom-color:#b85a1e1f}.sb-logo-mark{width:28px;height:28px;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:1rem;font-weight:300;flex-shrink:0}:host([variant="dark"]) .sb-logo-mark,.sb-logo-mark{background:var(--color-kaki-500);color:#fff}:host([variant="kintsugi"]) .sb-logo-mark{position:relative;background:transparent;border:none;overflow:visible;border-radius:50%}:host([variant="kintsugi"]) .sb-logo-mark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:conic-gradient(var(--color-kaki-600),#F5D08A,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));animation:sb-logo-ring 4s linear infinite}:host([variant="kintsugi"]) .sb-logo-mark:after{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:var(--color-washi-950)}:host([variant="kintsugi"]) .sb-logo-mark span{position:relative;z-index:2;color:var(--color-kaki-400)}@keyframes sb-logo-ring{to{transform:rotate(360deg)}}.sb-brand{font-family:var(--lib-font-display);font-size:1.1rem;font-weight:300;letter-spacing:.08em;white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base) var(--ease-out),width var(--duration-slow) var(--ease-out);color:#faf7f4a6}:host([variant="light"]) .sb-brand{color:var(--text-primary)}:host([variant="kintsugi"]) .sb-brand{color:#faf7f480}:host([variant="glitch"]) .sb-brand{font-family:var(--lib-font-mono);font-size:.75rem;letter-spacing:.2em;color:var(--color-kaki-400)}.sidebar.is-collapsed .sb-brand{opacity:0;width:0;pointer-events:none}.sb-version{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.12em;color:#faf7f426;white-space:nowrap;transition:opacity var(--duration-base)}.sidebar.is-collapsed .sb-version{opacity:0;pointer-events:none}.sb-search{padding:var(--lib-space-sm) var(--lib-space-md);flex-shrink:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-base);max-height:52px}.sidebar.is-collapsed .sb-search{opacity:0;max-height:0;padding:0;pointer-events:none}.sb-search-inner{display:flex;align-items:center;gap:var(--lib-space-xs);border:1px solid rgb(255,255,255,.08);background:#ffffff0a;padding:0 var(--lib-space-sm);height:30px;transition:border-color var(--duration-base)}.sb-search-inner:focus-within{border-color:#ffffff2e}.sb-search-inner svg{flex-shrink:0;color:#faf7f440}.sb-search-input{flex:1;background:none;border:none;outline:none;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:#faf7f499;width:100%}.sb-search-input::placeholder{color:#faf7f433}.sb-search-kbd{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;color:#faf7f426;border:1px solid rgb(255,255,255,.1);padding:0 4px;white-space:nowrap;flex-shrink:0}.sb-nav{flex:1;padding:var(--lib-space-md) 0;display:flex;flex-direction:column;position:relative;z-index:1;overflow-y:auto;scrollbar-width:none}.sb-nav::-webkit-scrollbar{display:none}.sb-indicator{position:absolute;left:0;width:2px;background:var(--color-kaki-500);border-radius:0 2px 2px 0;pointer-events:none;opacity:0;transition:top .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),opacity var(--duration-base)}.sb-indicator.visible{opacity:1}:host([variant="kintsugi"]) .sb-indicator{background:var(--color-kaki-400)}.sidebar.is-collapsed .sb-indicator{display:none}.sb-group{padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:#faf7f42e;white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base),max-height var(--duration-slow),padding var(--duration-slow);max-height:32px}:host([variant="light"]) .sb-group{color:var(--color-washi-400)}:host([variant="kintsugi"]) .sb-group{color:#b85a1e59}:host([variant="glitch"]) .sb-group{color:#faf7f426;letter-spacing:.16em}.sidebar.is-collapsed .sb-group{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none}.sb-link{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);width:100%;text-align:left;border-left:2px solid transparent;background:transparent;cursor:pointer;position:relative;transition:color var(--duration-fast),background var(--duration-fast),border-color var(--duration-fast);font-family:var(--lib-font-body);font-size:var(--text-sm);color:#faf7f459}:host([variant="light"]) .sb-link{color:var(--color-washi-600)}:host([variant="kintsugi"]) .sb-link{color:#faf7f44d}:host([variant="glitch"]) .sb-link{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:#faf7f440;padding:.45rem var(--lib-space-md)}.sb-link:hover:not(.is-active,[disabled]){color:#faf7f4b3;background:#ffffff0a;border-left-color:#ffffff26}:host([variant="light"]) .sb-link:hover:not(.is-active,[disabled]){color:var(--color-washi-900);background:var(--color-washi-50);border-left-color:var(--color-washi-300)}:host([variant="kintsugi"]) .sb-link:hover:not(.is-active,[disabled]){color:#faf7f499;background:#b85a1e0d}:host([variant="glitch"]) .sb-link:hover:not(.is-active,[disabled]){color:#faf7f499;background:#ffffff08}.sb-link.is-active{color:var(--color-kaki-400);background:#b85a1e1a;border-left-color:var(--color-kaki-500)}:host([variant="light"]) .sb-link.is-active{color:var(--color-kaki-600);background:var(--color-kaki-50);border-left-color:var(--color-kaki-500)}:host([variant="kintsugi"]) .sb-link.is-active{color:var(--color-kaki-400);background:linear-gradient(90deg,rgb(184,90,30,.15),transparent);border-left-color:var(--color-kaki-400)}:host([variant="glitch"]) .sb-link.is-active{color:var(--color-kaki-400);background:#b85a1e14;border-left-color:var(--color-kaki-500)}.sb-link[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.sb-link-icon{display:flex;align-items:center;flex-shrink:0;font-size:15px;opacity:.7;transition:opacity var(--duration-base)}.sb-link.is-active .sb-link-icon{opacity:1}.sb-link-prefix{font-size:9px;flex-shrink:0;color:var(--color-kaki-400)}.sb-link:not(.is-active) .sb-link-prefix{opacity:.4;color:inherit}.sb-link-label{white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base),width var(--duration-slow) var(--ease-out)}.sb-badge{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;padding:1px 6px;letter-spacing:.1em;flex-shrink:0;transition:opacity var(--duration-base)}.sb-badge--kaki{background:var(--color-kaki-500);color:#fff}.sb-badge--muted{background:var(--color-washi-200);color:var(--color-washi-600)}:host([variant="kintsugi"]) .sb-badge--kaki{background:transparent;border:1px solid rgb(184,90,30,.3);color:var(--color-kaki-400)}.sb-badge--dot{width:6px;height:6px;border-radius:50%;background:var(--color-kaki-400);padding:0}:host([variant="glitch"]) .sb-badge--dot{animation:sb-glitch-pulse 2s ease-in-out infinite}@keyframes sb-glitch-pulse{0%,to{opacity:1}50%{opacity:.2}}.sidebar.is-collapsed .sb-link{position:relative;padding:0;height:44px;border-left-color:transparent}.sidebar.is-collapsed .sb-link.is-active{background:#b85a1e26;border-left-color:transparent}:host([variant="light"]) .sidebar.is-collapsed .sb-link.is-active{background:var(--color-kaki-50)}.sidebar.is-collapsed .sb-link-label,.sidebar.is-collapsed .sb-badge,.sidebar.is-collapsed .sb-link-prefix{display:none}.sidebar.is-collapsed .sb-link-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:17px;opacity:1}.sb-user{padding:var(--lib-space-md);border-top:1px solid rgb(255,255,255,.06);display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;overflow:hidden;position:relative;z-index:1;transition:padding var(--duration-slow)}:host([variant="light"]) .sb-user{border-top-color:var(--color-washi-100)}:host([variant="kintsugi"]) .sb-user{border-top-color:#b85a1e1f}:host([variant="glitch"]) .sb-user{border-top-color:#ffffff0d}.sidebar.is-collapsed .sb-user{justify-content:center;padding:var(--lib-space-sm)}.sb-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:.95rem;flex-shrink:0;overflow:hidden;cursor:pointer}.sb-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}:host([variant="dark"]) .sb-user-avatar,.sb-user-avatar{background:var(--color-kaki-500);color:#fff}:host([variant="kintsugi"]) .sb-user-avatar{background:#b85a1e40;border:1px solid rgb(184,90,30,.4);color:var(--color-kaki-400)}:host([variant="glitch"]) .sb-user-avatar{background:#b85a1e40;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400);font-family:var(--lib-font-mono);font-size:.75rem}.sb-user-info{min-width:0;flex:1;overflow:hidden;transition:opacity var(--duration-base),width var(--duration-slow)}.sidebar.is-collapsed .sb-user-info{opacity:0;width:0;pointer-events:none}.sb-user-name{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#faf7f48c}:host([variant="light"]) .sb-user-name{color:var(--color-washi-800)}:host([variant="kintsugi"]) .sb-user-name{color:#faf7f473}.sb-user-role{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;color:#faf7f433}:host([variant="light"]) .sb-user-role{color:var(--color-washi-400)}:host([variant="kintsugi"]) .sb-user-role{color:#b85a1e80}.sb-user-action{margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid rgb(255,255,255,.1);color:#faf7f44d;flex-shrink:0;transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base);cursor:pointer}.sb-user-action:hover{border-color:#fff3;background:#ffffff0d;color:#faf7f4b3}:host([variant="light"]) .sb-user-action{border-color:var(--color-washi-200);color:var(--color-washi-400)}:host([variant="light"]) .sb-user-action:hover{border-color:var(--color-washi-400);background:var(--color-washi-50);color:var(--color-washi-700)}.sb-user-dot{width:6px;height:6px;border-radius:50%;background:var(--color-celadon-400);flex-shrink:0;margin-left:auto}.sidebar.is-collapsed .sb-user-action,.sidebar.is-collapsed .sb-user-dot{display:none}.sb-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:calc(var(--z-raised) - 1);opacity:0;transition:opacity var(--duration-base)}.sb-toggle{display:none;position:fixed;bottom:var(--lib-space-lg);right:var(--lib-space-lg);z-index:var(--z-modal);width:44px;height:44px;background:var(--color-washi-900);color:var(--color-washi-50);align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}@media(max-width:768px){:host{height:auto}.sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;transform:translate(-100%);z-index:var(--z-modal);box-shadow:var(--shadow-xl)}.sidebar.is-open{transform:translate(0)}.sb-toggle{display:flex}.sb-overlay{display:block}.sb-overlay.is-open{opacity:1;pointer-events:auto}}@media(prefers-reduced-motion:reduce){.sidebar,.sb-indicator,:host([variant="kintsugi"]) .sidebar:after,:host([variant="kintsugi"]) .sb-logo-mark:before,:host([variant="glitch"]) .sidebar,:host([variant="glitch"]) .sidebar:before{animation:none!important;transition:none!important}}}';
 export {
-  bentoItemTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index256.js.map

package/dist/index256.js.map

@@ -1 +1 @@
-{"version":3,"file":"index256.js","sources":["../src/components/atoms/bento-item/lib-bento-item.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibBentoItem } from './lib-bento-item.component';\n\nexport function bentoItemTemplate(_ctx: LibBentoItem): TemplateResult {\n  return html`\n    <div class=\"bento-item\" part=\"item\">\n      <div class=\"content\" part=\"content\">\n        <slot></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,kBAAkB,MAAoC;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOT;"}
+{"version":3,"file":"index256.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index257.js

@@ -1,5 +1,8 @@
-const itemCss = "@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.bento-item{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background:var(--bg-elevated);border-radius:var(--lib-radius-lg);border:1px solid var(--border-subtle);overflow:hidden}:host([interactive]) .bento-item{cursor:pointer;transition:transform var(--duration-slow) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-slow) var(--ease-default)}:host([interactive]) .bento-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}:host([interactive]) .bento-item:active{transform:translateY(-1px)}.content{padding:var(--lib-space-md);height:100%;display:flex;flex-direction:column}:host([flush]) .content{padding:0}@media(prefers-reduced-motion:reduce){:host([interactive]) .bento-item{transition:border-color var(--duration-base)}:host([interactive]) .bento-item:hover{transform:none}}}";
+import { html } from "lit";
+function staggerTemplate() {
+  return html`<slot></slot>`;
+}
 export {
-  itemCss as default
+  staggerTemplate
 };
 //# sourceMappingURL=index257.js.map

package/dist/index257.js.map

@@ -1 +1 @@
-{"version":3,"file":"index257.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index257.js","sources":["../src/components/organisms/stagger/lib-stagger-container.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport function staggerTemplate(): TemplateResult {\n  return html`<slot></slot>`;\n}"],"names":[],"mappings":";AAEO,SAAS,kBAAkC;AAChD,SAAO;AACT;"}

package/dist/index258.js

@@ -1,81 +1,5 @@
-import { html, nothing, svg } from "lit";
-function renderDots(p) {
-  const current = Math.round(p.progress / 100 * p.dotsCount);
-  return html`
-    ${Array.from({ length: p.dotsCount }, (_, i) => {
-    const done = i < current - 1;
-    const active = i === current - 1;
-    return html`
-        <span
-          class="rp-dot ${done ? "is-done" : ""} ${active ? "is-current" : ""}"
-          aria-hidden="true"
-        ></span>
-      `;
-  })}
-  `;
-}
-function renderRing(p) {
-  const r = p.ringSize / 2 - 3;
-  const circumference = 2 * Math.PI * r;
-  const offset = circumference * (1 - p.progress / 100);
-  return html`
-    ${svg`
-      <svg
-        class="rp-ring-svg"
-        width="${p.ringSize}"
-        height="${p.ringSize}"
-        viewBox="0 0 ${p.ringSize} ${p.ringSize}"
-        role="img"
-        aria-label="Progreso de lectura: ${p.progress}%"
-      >
-        <circle
-          class="rp-ring-track"
-          cx="${p.ringSize / 2}"
-          cy="${p.ringSize / 2}"
-          r="${r}"
-        />
-        <circle
-          class="rp-ring-fill"
-          cx="${p.ringSize / 2}"
-          cy="${p.ringSize / 2}"
-          r="${r}"
-          stroke-dasharray="${circumference}"
-          stroke-dashoffset="${offset}"
-        />
-      </svg>
-    `}
-  `;
-}
-function readingProgressTemplate(p) {
-  if (p.variant === "bar" || p.variant === "line" || p.variant === "vertical") {
-    return html`
-      <span
-        role="progressbar"
-        aria-label="Progreso de lectura"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow="${p.progress}"
-        style="display:none"
-      ></span>
-    `;
-  }
-  if (p.variant === "dots") {
-    return html`
-      <span role="progressbar" aria-label="Progreso de lectura" aria-valuenow="${p.progress}" aria-valuemin="0" aria-valuemax="100" style="display:contents">
-        ${renderDots(p)}
-      </span>
-    `;
-  }
-  if (p.variant === "ring") {
-    return html`
-      <span role="progressbar" aria-label="Progreso de lectura" aria-valuenow="${p.progress}" aria-valuemin="0" aria-valuemax="100" style="display:contents">
-        ${renderRing(p)}
-      </span>
-    `;
-  }
-  return nothing;
-}
+const staggerCss = "@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{::slotted(*){opacity:0;transform:var(--_stagger-from, translateY(var(--lib-space-lg)));transition:opacity var(--_stagger-duration, var(--duration-slow)) var(--_stagger-ease, var(--ease-out)),transform var(--_stagger-duration, var(--duration-slow)) var(--_stagger-ease, var(--ease-out));transition-delay:var(--_stagger-delay, 0ms);will-change:opacity,transform}:host([visible]) ::slotted(*){opacity:1;transform:none}@media(prefers-reduced-motion:reduce){::slotted(*){transition:none;opacity:1;transform:none}}}";
 export {
-  readingProgressTemplate
+  staggerCss as default
 };
 //# sourceMappingURL=index258.js.map

package/dist/index258.js.map

@@ -1 +1 @@
-{"version":3,"file":"index258.js","sources":["../src/components/atoms/reading-progress/lib-reading-progress.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\nimport { ReadingProgressVariant } from './lib-reading-progress.component';\n\nexport interface ReadingProgressTemplateProps {\n  variant:    ReadingProgressVariant;\n  progress:   number;   /* 0 – 100 */\n  dotsCount:  number;\n  ringSize:   number;\n}\n\n/* ── DOTS ──────────────────────────────────────────────── */\nfunction renderDots(p: ReadingProgressTemplateProps): TemplateResult {\n  const current = Math.round((p.progress / 100) * p.dotsCount);\n  return html`\n    ${Array.from({ length: p.dotsCount }, (_, i) => {\n      const done = i < current - 1;\n      const active = i === current - 1;\n      return html`\n        <span\n          class=\"rp-dot ${done ? 'is-done' : ''} ${active ? 'is-current' : ''}\"\n          aria-hidden=\"true\"\n        ></span>\n      `;\n    })}\n  `;\n}\n\n/* ── RING ──────────────────────────────────────────────── */\nfunction renderRing(p: ReadingProgressTemplateProps): TemplateResult {\n  const r            = (p.ringSize / 2) - 3;   /* margen para stroke-width:2 */\n  const circumference = 2 * Math.PI * r;\n  const offset        = circumference * (1 - p.progress / 100);\n\n  return html`\n    ${svg`\n      <svg\n        class=\"rp-ring-svg\"\n        width=\"${p.ringSize}\"\n        height=\"${p.ringSize}\"\n        viewBox=\"0 0 ${p.ringSize} ${p.ringSize}\"\n        role=\"img\"\n        aria-label=\"Progreso de lectura: ${p.progress}%\"\n      >\n        <circle\n          class=\"rp-ring-track\"\n          cx=\"${p.ringSize / 2}\"\n          cy=\"${p.ringSize / 2}\"\n          r=\"${r}\"\n        />\n        <circle\n          class=\"rp-ring-fill\"\n          cx=\"${p.ringSize / 2}\"\n          cy=\"${p.ringSize / 2}\"\n          r=\"${r}\"\n          stroke-dasharray=\"${circumference}\"\n          stroke-dashoffset=\"${offset}\"\n        />\n      </svg>\n    `}\n  `;\n}\n\n/* ── Template principal ─────────────────────────────────── */\nexport function readingProgressTemplate(\n  p: ReadingProgressTemplateProps,\n): TemplateResult {\n  /* bar + line + vertical → el host ES el elemento visual (CSS en :host)\n     Solo necesitamos el aria progressbar */\n  if (p.variant === 'bar' || p.variant === 'line' || p.variant === 'vertical') {\n    return html`\n      <span\n        role=\"progressbar\"\n        aria-label=\"Progreso de lectura\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${p.progress}\"\n        style=\"display:none\"\n      ></span>\n    `;\n  }\n\n  if (p.variant === 'dots') {\n    return html`\n      <span role=\"progressbar\" aria-label=\"Progreso de lectura\" aria-valuenow=\"${p.progress}\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"display:contents\">\n        ${renderDots(p)}\n      </span>\n    `;\n  }\n\n  if (p.variant === 'ring') {\n    return html`\n      <span role=\"progressbar\" aria-label=\"Progreso de lectura\" aria-valuenow=\"${p.progress}\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"display:contents\">\n        ${renderRing(p)}\n      </span>\n    `;\n  }\n\n  return nothing as unknown as TemplateResult;\n}"],"names":[],"mappings":";AAWA,SAAS,WAAW,GAAiD;AACnE,QAAM,UAAU,KAAK,MAAO,EAAE,WAAW,MAAO,EAAE,SAAS;AAC3D,SAAO;AAAA,MACH,MAAM,KAAK,EAAE,QAAQ,EAAE,UAAA,GAAa,CAAC,GAAG,MAAM;AAC9C,UAAM,OAAO,IAAI,UAAU;AAC3B,UAAM,SAAS,MAAM,UAAU;AAC/B,WAAO;AAAA;AAAA,0BAEa,OAAO,YAAY,EAAE,IAAI,SAAS,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIzE,CAAC,CAAC;AAAA;AAEN;AAGA,SAAS,WAAW,GAAiD;AACnE,QAAM,IAAgB,EAAE,WAAW,IAAK;AACxC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAgB,iBAAiB,IAAI,EAAE,WAAW;AAExD,SAAO;AAAA,MACH;AAAA;AAAA;AAAA,iBAGW,EAAE,QAAQ;AAAA,kBACT,EAAE,QAAQ;AAAA,uBACL,EAAE,QAAQ,IAAI,EAAE,QAAQ;AAAA;AAAA,2CAEJ,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIrC,EAAE,WAAW,CAAC;AAAA,gBACd,EAAE,WAAW,CAAC;AAAA,eACf,CAAC;AAAA;AAAA;AAAA;AAAA,gBAIA,EAAE,WAAW,CAAC;AAAA,gBACd,EAAE,WAAW,CAAC;AAAA,eACf,CAAC;AAAA,8BACc,aAAa;AAAA,+BACZ,MAAM;AAAA;AAAA;AAAA,KAGhC;AAAA;AAEL;AAGO,SAAS,wBACd,GACgB;AAGhB,MAAI,EAAE,YAAY,SAAS,EAAE,YAAY,UAAU,EAAE,YAAY,YAAY;AAC3E,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIjC;AAEA,MAAI,EAAE,YAAY,QAAQ;AACxB,WAAO;AAAA,iFACsE,EAAE,QAAQ;AAAA,UACjF,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrB;AAEA,MAAI,EAAE,YAAY,QAAQ;AACxB,WAAO;AAAA,iFACsE,EAAE,QAAQ;AAAA,UACjF,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrB;AAEA,SAAO;AACT;"}
+{"version":3,"file":"index258.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}