@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index256.js

@@ -1,5 +1,5 @@
-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}}}';
+const sliderCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.rs{--rs-thumb-size: 20px;--rs-track-h: 4px;--rs-fill-color: var(--color-washi-900);--rs-track-bg: var(--color-washi-200);display:flex;flex-direction:column;gap:var(--lib-space-sm);width:100%}.rs-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-md)}.rs-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}.rs-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);min-width:2.5rem;text-align:right;transition:color var(--duration-fast)}.rs-value-unit{color:var(--text-muted);font-size:10px;margin-left:1px}.rs-track-wrap{position:relative;height:var(--rs-thumb-size);display:flex;align-items:center}.rs-track{position:absolute;left:0;right:0;height:var(--rs-track-h);background:var(--rs-track-bg);border-radius:var(--radius-full);overflow:hidden;pointer-events:none}.rs-fill{position:absolute;left:0;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);transition:width var(--duration-fast),background var(--duration-base);pointer-events:none}.rs-fill-dual{position:absolute;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);pointer-events:none;transition:left var(--duration-fast),right var(--duration-fast)}.rs input[type=range]{position:absolute;left:0;right:0;width:100%;height:var(--rs-thumb-size);margin:0;padding:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;pointer-events:auto}.rs input[type=range]::-webkit-slider-runnable-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-moz-range-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm),0 0 0 0 transparent;cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base),transform var(--duration-fast);margin-top:calc((var(--rs-track-h) - var(--rs-thumb-size)) / 2)}.rs input[type=range]::-moz-range-thumb{width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm);cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base)}.rs input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-sm),0 0 0 3px var(--color-ink-10)}.rs input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15);box-shadow:var(--shadow-md)}:host([size="sm"]) .rs{--rs-thumb-size: 14px;--rs-track-h: 3px;gap:var(--lib-space-xs)}:host([size="sm"]) .rs-label{font-size:10px}:host([size="sm"]) .rs-value{font-size:10px}:host([size="lg"]) .rs{--rs-thumb-size: 26px;--rs-track-h: 8px;gap:var(--lib-space-md)}:host([size="lg"]) .rs-label{font-size:var(--text-sm)}:host([size="lg"]) .rs-value{font-size:var(--text-sm)}:host([tone="kaki"]) .rs{--rs-fill-color: var(--color-kaki-500)}:host([tone="celadon"]) .rs{--rs-fill-color: var(--color-celadon-500)}:host([tone="error"]) .rs{--rs-fill-color: var(--color-error)}:host([tone="washi"]) .rs{--rs-fill-color: var(--color-washi-700)}:host([tone="dark"]) .rs{--rs-track-bg: oklch(20% .02 45deg);--rs-fill-color: oklch(65% .02 55deg)}:host([tone="dark"]) .rs-label{color:#574a43}:host([tone="dark"]) .rs-value{color:#998c84}:host([tone="dark"]) .rs-limit{color:#312620}:host([tone="dark"]) .rs-mark{background:#231813}:host([tone="dark"]) .rs-mark.is-filled{background:#998c84}:host([tone="dark"]) .rs-mark-label{color:#312620}:host([tone="dark"]) .rs input[type=range]::-webkit-slider-thumb{background:#0c0604;border-color:#8a7d75}:host([tone="dark"]) .rs input[type=range]::-moz-range-thumb{background:#0c0604;border-color:#8a7d75}:host([disabled]) .rs{opacity:.38;pointer-events:none}:host([disabled]) .rs input[type=range]{cursor:not-allowed}.rs-limits{display:flex;justify-content:space-between;margin-top:calc(-1 * var(--lib-space-xs))}.rs-limit{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.rs-marks{position:relative;height:10px;margin-top:calc(-1 * var(--lib-space-sm));pointer-events:none}.rs-mark{position:absolute;top:0;transform:translate(-50%);width:1px;height:5px;background:var(--border-default)}.rs-mark.is-filled{background:var(--rs-fill-color)}.rs-mark-label{position:absolute;top:7px;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}.rs-tooltip-wrap{position:absolute;top:0;height:100%;display:flex;align-items:flex-start;pointer-events:none;transform:translate(-50%)}.rs-tooltip-bubble{position:absolute;bottom:calc(100% + var(--lib-space-sm));left:0;transform:translate(-50%);background:var(--color-washi-900);color:var(--color-washi-50);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);padding:2px var(--lib-space-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--duration-base)}.rs-tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-washi-900)}.rs-track-wrap:hover .rs-tooltip-bubble{opacity:1}:host([dual]) .rs-track{overflow:visible}:host([dual]) .rs-track-wrap{overflow:visible}:host([dual]) .rs input[type=range]{pointer-events:none}:host([dual]) .rs input[type=range]::-webkit-slider-thumb{pointer-events:auto}:host([dual]) .rs input[type=range]::-moz-range-thumb{pointer-events:auto}:host([dual]) .rs .rs-input-max{z-index:1}:host([vertical]) .rs{width:auto;align-items:center}:host([vertical]) .rs-vert-wrap{position:relative;width:var(--rs-thumb-size);height:160px;flex-shrink:0}:host([vertical][size="sm"]) .rs-vert-wrap{height:120px}:host([vertical][size="lg"]) .rs-vert-wrap{height:200px}:host([vertical]) .rs-track-wrap{position:absolute;top:50%;left:50%;width:160px;height:var(--rs-thumb-size);transform:translate(-50%,-50%) rotate(-90deg)}:host([vertical][size="sm"]) .rs-track-wrap{width:120px}:host([vertical][size="lg"]) .rs-track-wrap{width:200px}:host([vertical]) .rs-label-row{flex-direction:column;align-items:center;gap:2px;width:auto}:host([vertical]) .rs-label-row .rs-label{text-align:center}:host([vertical]) .rs-label-row .rs-value{min-width:auto;text-align:center}@media(prefers-reduced-motion:reduce){.rs-fill,.rs-fill-dual{transition:none}.rs input[type=range]::-webkit-slider-thumb{transition:none}}}';
 export {
-  componentCss as default
+  sliderCss as default
 };
 //# sourceMappingURL=index256.js.map

package/dist/index257.js

@@ -1,8 +1,5 @@
-import { html } from "lit";
-function staggerTemplate() {
-  return html`<slot></slot>`;
-}
+const segmentedCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:inline-block;vertical-align:middle}:host([full]){display:block;width:100%}}@layer components{.seg{display:inline-flex;align-items:stretch;position:relative;-webkit-user-select:none;user-select:none}.seg-thumb{position:absolute;top:0;bottom:0;left:0;pointer-events:none;z-index:1;transition:transform var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-out)}.seg-option{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:color var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}.seg-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.seg-badge-dot{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-family:var(--lib-font-mono);letter-spacing:0;line-height:1;background:var(--color-kaki-500);color:var(--color-white);border-radius:var(--radius-full)}.seg-option.is-active .seg-badge-dot{background:#ffffff4d}.seg-option.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}:host([disabled]) .seg{opacity:.55;pointer-events:none}:host([full]) .seg{width:100%}:host([full]) .seg-option{flex:1}:host([icon-only]) .seg-option{min-width:44px;padding:var(--lib-space-sm)}:host([variant="outline"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="outline"]) .seg-thumb{background:var(--color-washi-900);top:3px;bottom:3px}:host([variant="outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="outline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="outline"]) .seg-option.is-active{color:var(--color-washi-50)}:host([variant="underline"]) .seg{background:transparent;border-bottom:1px solid var(--border-subtle);gap:0;padding:0}:host([variant="underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-500);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-bottom:2px solid transparent}:host([variant="underline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="underline"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="pill"]) .seg{background:var(--color-washi-100);border:1px solid var(--border-subtle);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="pill"]) .seg-thumb{background:var(--bg-elevated);border-radius:var(--radius-full);top:4px;bottom:4px;box-shadow:0 1px 4px var(--color-ink-20)}:host([variant="pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-radius:var(--radius-full);min-width:80px}:host([variant="pill"]) .seg-option:hover{color:var(--text-primary)}:host([variant="pill"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg{background:transparent;gap:0}:host([variant="ghost"]) .seg-thumb{display:none}:host([variant="ghost"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);border-right:1px solid var(--border-subtle)}:host([variant="ghost"]) .seg-option:last-child{border-right:none}:host([variant="ghost"]) .seg-option:hover{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active:after{content:"";position:absolute;bottom:-1px;left:var(--lib-space-md);right:var(--lib-space-md);height:1px;background:var(--color-kaki-500)}:host([variant="kaki"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="kaki"]) .seg-option:hover{color:var(--text-primary)}:host([variant="kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="celadon"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="celadon"]) .seg-thumb{background:var(--color-celadon-500);top:3px;bottom:3px}:host([variant="celadon"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="celadon"]) .seg-option:hover{color:var(--text-primary)}:host([variant="celadon"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-outline"]) .seg{border:1px solid rgb(255,255,255,.1);background:#ffffff0a;padding:3px;gap:0}:host([variant="dark-outline"]) .seg-thumb{background:#faf7f41f;top:3px;bottom:3px}:host([variant="dark-outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f447;min-width:80px}:host([variant="dark-outline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-outline"]) .seg-option.is-active{color:#faf7f4cc}:host([variant="dark-pill"]) .seg{background:#ffffff0f;border:1px solid rgb(255,255,255,.07);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="dark-pill"]) .seg-thumb{background:#faf7f41f;border-radius:var(--radius-full);top:4px;bottom:4px}:host([variant="dark-pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447;border-radius:var(--radius-full);min-width:80px}:host([variant="dark-pill"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-pill"]) .seg-option.is-active{color:#faf7f4d9}:host([variant="dark-kaki"]) .seg{border:1px solid rgb(255,255,255,.07);background:#ffffff08;padding:3px;gap:0}:host([variant="dark-kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="dark-kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f44d;min-width:80px}:host([variant="dark-kaki"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-underline"]) .seg{background:transparent;border-bottom:1px solid rgb(255,255,255,.07);gap:0;padding:0}:host([variant="dark-underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-400);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="dark-underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447}:host([variant="dark-underline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-underline"]) .seg-option.is-active{color:#faf7f4cc}:host([size="sm"]) .seg-option{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px;min-width:60px}:host([size="sm"][variant="pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="dark-pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="dark-pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="outline"]) .seg{padding:2px}:host([size="sm"][variant="outline"]) .seg-thumb{top:2px;bottom:2px}:host([size="sm"][variant="kaki"]) .seg{padding:2px}:host([size="sm"][variant="kaki"]) .seg-thumb{top:2px;bottom:2px}:host([size="lg"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-lg);font-size:.75rem;min-width:100px}:host([size="lg"][variant="pill"]) .seg{padding:5px}:host([size="lg"][variant="pill"]) .seg-thumb{top:5px;bottom:5px}:host([size="lg"][variant="dark-pill"]) .seg{padding:5px}:host([size="lg"][variant="dark-pill"]) .seg-thumb{top:5px;bottom:5px}:host([glitch]) .seg-option.is-active:before,:host([glitch]) .seg-option.is-active:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:0}:host([glitch]) .seg-option.is-active:before{color:var(--color-kaki-400);mix-blend-mode:screen}:host([glitch]) .seg-option.is-active:after{color:var(--color-celadon-400);mix-blend-mode:screen}:host([glitch]) .seg-option.glitch-on:before{opacity:.7;animation:seg-glitch-a .24s steps(1) infinite}:host([glitch]) .seg-option.glitch-on:after{opacity:.5;animation:seg-glitch-b .24s steps(1) infinite;animation-delay:30ms}@keyframes seg-glitch-a{0%{clip-path:inset(30% 0 50% 0);transform:translate(-2px)}50%{clip-path:inset(60% 0 10% 0);transform:translate(2px)}}@keyframes seg-glitch-b{0%{clip-path:inset(50% 0 20% 0);transform:translate(2px)}50%{clip-path:inset(10% 0 60% 0);transform:translate(-2px)}}.seg-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.seg-ripple-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:currentcolor;transform:scale(0);opacity:.25;animation:seg-ripple .36s ease-out forwards}@keyframes seg-ripple{to{transform:scale(40);opacity:0}}}';
 export {
-  staggerTemplate
+  segmentedCss as default
 };
 //# sourceMappingURL=index257.js.map

package/dist/index257.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index257.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index258.js

@@ -1,5 +1,75 @@
-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}}}";
+import { nothing, html } from "lit";
+import { map as o } from "./index264.js";
+function segmentedTemplate(props) {
+  const {
+    options,
+    value,
+    variant,
+    size,
+    full,
+    iconOnly,
+    disabled,
+    glitch,
+    thumbStyle,
+    onSelect
+  } = props;
+  const isGhost = variant === "ghost";
+  const trackCls = [
+    "seg",
+    `seg-${variant}`,
+    size !== "md" ? `seg-${size}` : "",
+    full ? "seg-full" : "",
+    iconOnly ? "seg-icon-only" : "",
+    glitch ? "seg-glitch" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <div
+      class="${trackCls}"
+      role="radiogroup"
+      aria-disabled="${disabled}"
+    >
+      <!-- Thumb — indicador animado de selección -->
+      ${isGhost ? nothing : html`<div class="seg-thumb" style="${thumbStyle}"></div>`}
+
+      <!-- Opciones -->
+      ${o(options, (opt) => {
+    const isActive = opt.value === value;
+    const isDisabled = opt.disabled ?? false;
+    const optCls = [
+      "seg-option",
+      isActive ? "is-active" : "",
+      isDisabled ? "is-disabled" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+          <div
+            class="${optCls}"
+            role="radio"
+            aria-checked="${isActive}"
+            aria-disabled="${isDisabled}"
+            data-label="${opt.label}"
+            data-value="${opt.value}"
+            @click="${(e) => {
+      if (disabled || isDisabled) return;
+      onSelect(opt, e);
+    }}"
+          >
+            <!-- Icono Phosphor (slot reutilizando lib-icon) -->
+            ${opt.icon ? html`<span class="seg-icon">
+                  <lib-icon name="${opt.icon}" size="xs"></lib-icon>
+                </span>` : nothing}
+
+            <!-- Label — oculto si icon-only -->
+            ${iconOnly ? nothing : html`<span class="seg-label">${opt.label}</span>`}
+
+            <!-- Badge numérico opcional -->
+            ${opt.badge != null ? html`<span class="seg-badge-dot">${opt.badge}</span>` : nothing}
+          </div>
+        `;
+  })}
+    </div>
+  `;
+}
 export {
-  staggerCss as default
+  segmentedTemplate
 };
 //# sourceMappingURL=index258.js.map

package/dist/index258.js.map

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

package/dist/index259.js

@@ -1,12 +1,100 @@
-import { html } from "lit";
-function stepperTemplate(props) {
+import { nothing, html } from "lit";
+function selectTemplate(props) {
+  const {
+    label,
+    placeholder,
+    hint,
+    errorMessage,
+    required,
+    optional,
+    open,
+    error,
+    selectedLabel,
+    hasSelection,
+    multi,
+    selectedCount,
+    searchable,
+    searchQuery,
+    visibleCount,
+    onTriggerClick,
+    onSearchInput,
+    onConfirm
+  } = props;
+  const labelTpl = label ? html`
+        <label class="sel-label">
+          ${label}
+          ${required ? html`<span class="sel-label-req" aria-hidden="true">*</span>` : nothing}
+          ${optional ? html`<span class="sel-label-opt">(opcional)</span>` : nothing}
+        </label>` : nothing;
+  const hintTpl = error && errorMessage ? html`<span class="sel-hint is-error">${errorMessage}</span>` : hint ? html`<span class="sel-hint">${hint}</span>` : nothing;
+  const triggerValueTpl = multi ? selectedCount > 0 ? html`
+          <span class="sel-trigger-value">
+            ${selectedCount} seleccionada${selectedCount !== 1 ? "s" : ""}
+            <span class="sel-trigger-count">${selectedCount}</span>
+          </span>` : html`<span class="sel-trigger-value is-placeholder">${placeholder}</span>` : hasSelection ? html`<span class="sel-trigger-value">${selectedLabel}</span>` : html`<span class="sel-trigger-value is-placeholder">${placeholder}</span>`;
+  const searchTpl = searchable ? html`
+        <div class="sel-panel-search">
+          <span class="sel-panel-search-icon" aria-hidden="true"></span>
+          <input
+            type="text"
+            placeholder="Buscar…"
+            .value="${searchQuery}"
+            @input="${onSearchInput}"
+            autocomplete="off"
+            aria-label="Buscar opciones"
+          >
+        </div>` : nothing;
+  const footerTpl = multi ? html`
+        <div class="sel-panel-footer">
+          <span class="sel-panel-footer-text">
+            ${selectedCount} seleccionada${selectedCount !== 1 ? "s" : ""}
+          </span>
+          <button
+            class="sel-panel-footer-btn"
+            type="button"
+            @click="${onConfirm}"
+          >Confirmar</button>
+        </div>` : nothing;
+  const emptyTpl = searchable && searchQuery && visibleCount === 0 ? html`<div class="sel-panel-empty">Sin resultados</div>` : nothing;
   return html`
-    <div class="stepper-track" role="list" aria-label="Pasos del proceso">
-      <slot @slotchange=${props.handleSlotChange}></slot>
+    <div class="sel-field">
+
+      ${labelTpl}
+
+      <div class="sel-custom">
+        <button
+          class="sel-trigger"
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded="${open}"
+          @click="${onTriggerClick}"
+        >
+          ${triggerValueTpl}
+          <span class="sel-trigger-chevron" aria-hidden="true"></span>
+        </button>
+
+        <div
+          class="sel-panel"
+          role="listbox"
+          aria-multiselectable="${multi}"
+        >
+          ${searchTpl}
+
+          <div class="sel-panel-list">
+            <slot></slot>
+            ${emptyTpl}
+          </div>
+
+          ${footerTpl}
+        </div>
+      </div>
+
+      ${hintTpl}
+
     </div>
   `;
 }
 export {
-  stepperTemplate
+  selectTemplate
 };
 //# sourceMappingURL=index259.js.map

package/dist/index259.js.map

@@ -1 +1 @@
-{"version":3,"file":"index259.js","sources":["../src/components/organisms/stepper/lib-stepper.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibStepperOrientation = 'horizontal' | 'vertical';\nexport type LibStepperVariant     = 'default' | 'minimal' | 'kintsugi';\nexport type LibStepperSize        = 'sm' | 'md' | 'lg';\n\nexport interface StepperTemplateProps {\n  orientation: LibStepperOrientation;\n  handleSlotChange: (e: Event) => void;\n}\n\n/**\n * El stepper es únicamente el contenedor flex + slot.\n * Toda la lógica de estados y el dibujado visual vive en lib-step.\n * @layer components gestiona flex-direction vía :host([orientation=\"vertical\"]).\n */\nexport function stepperTemplate(props: StepperTemplateProps): TemplateResult {\n  return html`\n    <div class=\"stepper-track\" role=\"list\" aria-label=\"Pasos del proceso\">\n      <slot @slotchange=${props.handleSlotChange}></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA,0BAEiB,MAAM,gBAAgB;AAAA;AAAA;AAGhD;"}
+{"version":3,"file":"index259.js","sources":["../src/components/molecules/select/lib-select.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { SelectSize, SelectVariant } from './lib-select.types';\n\nexport interface SelectTemplateProps {\n  /* Field meta */\n  label:        string;\n  placeholder:  string;\n  hint:         string;\n  errorMessage: string;\n  required:     boolean;\n  optional:     boolean;\n\n  /* State */\n  open:         boolean;\n  disabled:     boolean;\n  error:        boolean;\n  dark:         boolean;\n\n  /* Appearance */\n  size:         SelectSize;\n  variant:      SelectVariant;\n\n  /* Single selection */\n  selectedLabel:       string;\n  hasSelection:        boolean;\n\n  /* Multi selection */\n  multi:               boolean;\n  selectedCount:       number;\n\n  /* Searchable */\n  searchable:          boolean;\n  searchQuery:         string;\n  visibleCount:        number;\n\n  /* Handlers */\n  onTriggerClick:      (e: Event) => void;\n  onSearchInput:       (e: Event) => void;\n  onConfirm:           () => void;\n}\n\n/**\n * Template para lib-select.\n * Las opciones son elementos slotted — lib-select-option hijos en el light DOM.\n */\nexport function selectTemplate(props: SelectTemplateProps): TemplateResult {\n  const {\n    label, placeholder, hint, errorMessage,\n    required, optional,\n    open, error,\n    selectedLabel, hasSelection,\n    multi, selectedCount,\n    searchable, searchQuery, visibleCount,\n    onTriggerClick, onSearchInput, onConfirm,\n  } = props;\n\n  /* ── Label section ── */\n  const labelTpl = label\n    ? html`\n        <label class=\"sel-label\">\n          ${label}\n          ${required ? html`<span class=\"sel-label-req\" aria-hidden=\"true\">*</span>` : nothing}\n          ${optional ? html`<span class=\"sel-label-opt\">(opcional)</span>` : nothing}\n        </label>`\n    : nothing;\n\n  /* ── Hint / error message ── */\n  const hintTpl = error && errorMessage\n    ? html`<span class=\"sel-hint is-error\">${errorMessage}</span>`\n    : hint\n      ? html`<span class=\"sel-hint\">${hint}</span>`\n      : nothing;\n\n  /* ── Trigger value display ── */\n  const triggerValueTpl = multi\n    ? selectedCount > 0\n      ? html`\n          <span class=\"sel-trigger-value\">\n            ${selectedCount} seleccionada${selectedCount !== 1 ? 's' : ''}\n            <span class=\"sel-trigger-count\">${selectedCount}</span>\n          </span>`\n      : html`<span class=\"sel-trigger-value is-placeholder\">${placeholder}</span>`\n    : hasSelection\n      ? html`<span class=\"sel-trigger-value\">${selectedLabel}</span>`\n      : html`<span class=\"sel-trigger-value is-placeholder\">${placeholder}</span>`;\n\n  /* ── Search row ── */\n  const searchTpl = searchable\n    ? html`\n        <div class=\"sel-panel-search\">\n          <span class=\"sel-panel-search-icon\" aria-hidden=\"true\"></span>\n          <input\n            type=\"text\"\n            placeholder=\"Buscar…\"\n            .value=\"${searchQuery}\"\n            @input=\"${onSearchInput}\"\n            autocomplete=\"off\"\n            aria-label=\"Buscar opciones\"\n          >\n        </div>`\n    : nothing;\n\n  /* ── Panel footer for multi ── */\n  const footerTpl = multi\n    ? html`\n        <div class=\"sel-panel-footer\">\n          <span class=\"sel-panel-footer-text\">\n            ${selectedCount} seleccionada${selectedCount !== 1 ? 's' : ''}\n          </span>\n          <button\n            class=\"sel-panel-footer-btn\"\n            type=\"button\"\n            @click=\"${onConfirm}\"\n          >Confirmar</button>\n        </div>`\n    : nothing;\n\n  /* ── Empty state when search yields 0 results ── */\n  const emptyTpl = searchable && searchQuery && visibleCount === 0\n    ? html`<div class=\"sel-panel-empty\">Sin resultados</div>`\n    : nothing;\n\n  return html`\n    <div class=\"sel-field\">\n\n      ${labelTpl}\n\n      <div class=\"sel-custom\">\n        <button\n          class=\"sel-trigger\"\n          type=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"${open}\"\n          @click=\"${onTriggerClick}\"\n        >\n          ${triggerValueTpl}\n          <span class=\"sel-trigger-chevron\" aria-hidden=\"true\"></span>\n        </button>\n\n        <div\n          class=\"sel-panel\"\n          role=\"listbox\"\n          aria-multiselectable=\"${multi}\"\n        >\n          ${searchTpl}\n\n          <div class=\"sel-panel-list\">\n            <slot></slot>\n            ${emptyTpl}\n          </div>\n\n          ${footerTpl}\n        </div>\n      </div>\n\n      ${hintTpl}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AA6CO,SAAS,eAAe,OAA4C;AACzE,QAAM;AAAA,IACJ;AAAA,IAAO;AAAA,IAAa;AAAA,IAAM;AAAA,IAC1B;AAAA,IAAU;AAAA,IACV;AAAA,IAAM;AAAA,IACN;AAAA,IAAe;AAAA,IACf;AAAA,IAAO;AAAA,IACP;AAAA,IAAY;AAAA,IAAa;AAAA,IACzB;AAAA,IAAgB;AAAA,IAAe;AAAA,EAAA,IAC7B;AAGJ,QAAM,WAAW,QACb;AAAA;AAAA,YAEM,KAAK;AAAA,YACL,WAAW,gEAAgE,OAAO;AAAA,YAClF,WAAW,sDAAsD,OAAO;AAAA,oBAE9E;AAGJ,QAAM,UAAU,SAAS,eACrB,uCAAuC,YAAY,YACnD,OACE,8BAA8B,IAAI,YAClC;AAGN,QAAM,kBAAkB,QACpB,gBAAgB,IACd;AAAA;AAAA,cAEM,aAAa,gBAAgB,kBAAkB,IAAI,MAAM,EAAE;AAAA,8CAC3B,aAAa;AAAA,qBAEnD,sDAAsD,WAAW,YACnE,eACE,uCAAuC,aAAa,YACpD,sDAAsD,WAAW;AAGvE,QAAM,YAAY,aACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMgB,WAAW;AAAA,sBACX,aAAa;AAAA;AAAA;AAAA;AAAA,kBAK7B;AAGJ,QAAM,YAAY,QACd;AAAA;AAAA;AAAA,cAGQ,aAAa,gBAAgB,kBAAkB,IAAI,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKnD,SAAS;AAAA;AAAA,kBAGzB;AAGJ,QAAM,WAAW,cAAc,eAAe,iBAAiB,IAC3D,0DACA;AAEJ,SAAO;AAAA;AAAA;AAAA,QAGD,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOW,IAAI;AAAA,oBACX,cAAc;AAAA;AAAA,YAEtB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAOO,KAAK;AAAA;AAAA,YAE3B,SAAS;AAAA;AAAA;AAAA;AAAA,cAIP,QAAQ;AAAA;AAAA;AAAA,YAGV,SAAS;AAAA;AAAA;AAAA;AAAA,QAIb,OAAO;AAAA;AAAA;AAAA;AAIf;"}

package/dist/index260.js

@@ -1,5 +1,5 @@
-const stepperCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.stepper-track{display:flex;flex-direction:row;align-items:flex-start;width:100%;position:relative}:host([orientation="vertical"]) .stepper-track{flex-direction:column}}';
+const selectCss = `@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.sel-field{display:flex;flex-direction:column;gap:var(--lib-space-xs);width:100%}.sel-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary);display:flex;align-items:center;gap:var(--lib-space-xs);-webkit-user-select:none;user-select:none}.sel-label-req{color:var(--color-error);font-size:14px;line-height:1}.sel-label-opt{font-size:9px;letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase}.sel-hint{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.sel-hint.is-error{color:var(--color-error);display:flex;align-items:center;gap:var(--lib-space-xs)}.sel-hint.is-ok{color:var(--color-celadon-500);display:flex;align-items:center;gap:var(--lib-space-xs)}.sel-custom{position:relative;width:100%}.sel-trigger{display:flex;align-items:center;gap:var(--lib-space-sm);width:100%;padding:var(--lib-space-sm) var(--lib-space-md);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-none);cursor:pointer;text-align:left;outline:none;transition:border-color var(--duration-base) var(--ease-default),background var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default);-webkit-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.sel-trigger:hover:not([disabled]){background:var(--bg-surface);border-color:var(--border-strong)}.sel-trigger:focus-visible{border-color:var(--color-washi-800);box-shadow:0 0 0 3px #1a140e14;outline:none}:host([open]) .sel-trigger{border-color:var(--color-washi-800);box-shadow:0 0 0 3px #1a140e14}:host([disabled]) .sel-trigger{opacity:.38;cursor:not-allowed;pointer-events:none;background:var(--bg-surface)}:host([error]) .sel-trigger{border-color:var(--color-error-border, #C44030);background:var(--color-error-light, #F5DDD9);color:var(--color-error)}:host([error][open]) .sel-trigger{box-shadow:0 0 0 3px #8c2a1a1f}.sel-trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:var(--lib-space-sm);line-height:var(--leading-snug)}.sel-trigger-value.is-placeholder{color:var(--text-muted)}.sel-trigger-count{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);background:var(--color-washi-900);color:var(--color-washi-50);padding:1px 6px;border-radius:var(--radius-full);flex-shrink:0}.sel-trigger-chevron{flex-shrink:0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-muted);transition:transform var(--duration-slow) var(--ease-default);pointer-events:none}:host([open]) .sel-trigger-chevron{transform:rotate(180deg);border-top-color:var(--text-primary)}:host([variant="filled"]) .sel-trigger{background:var(--bg-surface);border-color:transparent}:host([variant="filled"]) .sel-trigger:hover:not([disabled]){background:var(--color-washi-200);border-color:transparent}:host([variant="filled"][open]) .sel-trigger{background:var(--bg-elevated);border-color:var(--color-washi-800)}:host([variant="ghost"]) .sel-trigger{background:transparent;border:none;border-bottom:1px solid var(--border-default);border-radius:0;padding-left:0}:host([variant="ghost"]) .sel-trigger:hover:not([disabled]){background:transparent;border-bottom-color:var(--border-strong)}:host([variant="ghost"][open]) .sel-trigger{box-shadow:0 1px 0 0 var(--color-washi-800);border-bottom-color:var(--color-washi-800)}:host([size="sm"]) .sel-trigger{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:var(--text-xs)}:host([size="sm"]) .sel-label{font-size:10px}:host([size="lg"]) .sel-trigger{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-base)}.sel-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:100%;z-index:var(--z-toast, 300);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:0 8px 24px #1a140e1f,0 2px 6px #1a140e12;opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s var(--ease-default),transform .2s var(--ease-default)}:host([open]) .sel-panel{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.sel-panel-search{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);color:var(--text-muted)}.sel-panel-search-icon{font-size:14px;flex-shrink:0;display:flex;align-items:center;color:var(--text-muted)}.sel-panel-search-icon:before{content:"";display:block;width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%239A8878' d='M229.66 218.34l-50.07-50.07a88.19 88.19 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.31ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}.sel-panel-search input{flex:1;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);background:transparent;border:none;outline:none}.sel-panel-search input::placeholder{color:var(--text-muted)}.sel-panel-list{max-height:240px;overflow-y:auto;overscroll-behavior:contain}.sel-panel-list::-webkit-scrollbar{width:4px}.sel-panel-list::-webkit-scrollbar-track{background:transparent}.sel-panel-list::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}.sel-group-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs)}.sel-sep{height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0}.sel-option{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);position:relative}.sel-option:hover{background:var(--bg-surface)}.sel-option.is-selected{background:var(--color-washi-100)}.sel-option.is-focused{background:var(--bg-surface)}.sel-option.is-disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.sel-option.is-hidden{display:none}.sel-option-icon{font-size:16px;color:var(--text-muted);flex-shrink:0;display:flex}.sel-option:hover .sel-option-icon,.sel-option.is-selected .sel-option-icon{color:var(--text-secondary)}.sel-option-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.sel-option-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug)}.sel-option-desc{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.sel-option:hover .sel-option-label,.sel-option.is-selected .sel-option-label{color:var(--text-primary)}.sel-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.sel-option-check{margin-left:auto;flex-shrink:0;width:14px;height:14px;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23221C16' d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}.sel-option.is-selected .sel-option-check{opacity:1}.sel-panel-footer{padding:var(--lib-space-sm) var(--lib-space-md);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--lib-space-sm)}.sel-panel-footer-text{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide)}.sel-panel-footer-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-xs) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base) var(--ease-default)}.sel-panel-footer-btn:hover{background:var(--color-washi-800)}.sel-panel-empty{padding:var(--lib-space-lg) var(--lib-space-md);text-align:center;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}:host([dark]) .sel-label{color:#574a43}:host([dark]) .sel-hint{color:#3c302a}:host([dark]) .sel-trigger{background:#100704;border-color:#231813;color:#998c84}:host([dark]) .sel-trigger:hover:not([disabled]){background:#150a06;border-color:#372b26}:host([dark][open]) .sel-trigger{border-color:#6d6059;box-shadow:0 0 0 3px #ffffff0d}:host([dark]) .sel-trigger-chevron{border-top-color:#433831}:host([dark][open]) .sel-trigger-chevron{border-top-color:#998c84}:host([dark]) .sel-trigger-value.is-placeholder{color:#3c302a}:host([dark]) .sel-panel{background:#0c0402;border-color:#1e130e}:host([dark]) .sel-panel-search{border-color:#190f0a}:host([dark]) .sel-panel-search input{color:#a99b93}:host([dark]) .sel-group-label{color:#312620}:host([dark]) .sel-sep{background:#190f0a}:host([dark]) .sel-option:hover{background:#150a06}:host([dark]) .sel-option.is-selected{background:#190f0a}:host([dark]) .sel-option-label{color:#7b6f67}:host([dark]) .sel-option:hover .sel-option-label{color:#b9aba2}:host([dark]) .sel-option.is-selected .sel-option-label{color:#c8bbb2}:host([dark]) .sel-option-desc{color:#362b25}:host([dark]) .sel-option-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23FAF7F4' d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E")}:host([dark]) .sel-panel-footer{border-color:#190f0a}:host([dark]) .sel-panel-footer-text{color:#362b25}}`;
 export {
-  stepperCss as default
+  selectCss as default
 };
 //# sourceMappingURL=index260.js.map

package/dist/index261.js

@@ -1,5 +1,74 @@
-const timelineCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.tl{display:flex;flex-direction:column;gap:0}.tl-item{display:grid;grid-template-columns:40px 1fr;gap:0 var(--lib-space-md);position:relative}.tl-spine{display:flex;flex-direction:column;align-items:center;position:relative}.tl-node{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform var(--duration-base),box-shadow var(--duration-base)}.tl-node-dot{background:var(--bg-elevated);border:2px solid var(--color-washi-700)}.tl-node-dot:after{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-washi-700)}.tl-node-icon{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary)}.tl-node-avatar{background:var(--color-washi-200);border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:9px;color:var(--text-secondary)}.nd-kaki.tl-node-dot{border-color:var(--color-kaki-500)}.nd-kaki.tl-node-dot:after{background:var(--color-kaki-500)}.nd-kaki.tl-node-icon{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.nd-kaki.tl-node-avatar{background:var(--color-kaki-100);border-color:var(--color-kaki-100);color:var(--color-kaki-600)}.nd-celadon.tl-node-dot{border-color:var(--color-celadon-500)}.nd-celadon.tl-node-dot:after{background:var(--color-celadon-500)}.nd-celadon.tl-node-icon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.nd-celadon.tl-node-avatar{background:var(--color-celadon-100);border-color:var(--color-celadon-100);color:var(--color-celadon-600)}.nd-error.tl-node-dot{border-color:var(--color-error)}.nd-error.tl-node-dot:after{background:var(--color-error)}.nd-error.tl-node-icon{background:#fff8f7;border-color:#f5c4bc;color:var(--color-error)}.nd-muted.tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.nd-muted.tl-node-dot:after{background:var(--color-washi-300)}.nd-muted.tl-node-icon{background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-muted)}@keyframes tl-pulse{0%{box-shadow:0 0 #b85a1e59}70%{box-shadow:0 0 0 8px #b85a1e00}to{box-shadow:0 0 #b85a1e00}}.tl-item.is-active .tl-node-dot{border-color:var(--color-kaki-500);animation:tl-pulse 2s infinite}.tl-item.is-active .tl-node-dot:after{background:var(--color-kaki-500)}.tl-item.is-active .tl-title{color:var(--text-primary)}.tl-item.is-done .tl-node-dot{background:var(--color-washi-900);border-color:var(--color-washi-900)}.tl-item.is-done .tl-node-dot:after{display:none}.tl-item.is-done .tl-node-dot:before{content:"";width:6px;height:10px;border-right:2px solid var(--color-white);border-bottom:2px solid var(--color-white);transform:rotate(45deg) translate(-1px,-2px)}.tl-item.is-error .tl-node-dot{background:var(--color-error);border-color:var(--color-error)}.tl-item.is-error .tl-node-dot:after{display:none}.tl-item.is-error .tl-node-dot:before{content:"!";font-family:var(--lib-font-mono);font-size:11px;font-weight:700;color:var(--color-white);line-height:1}.tl-item.is-error .tl-title{color:var(--color-error)}.tl-item.is-pending .tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.tl-item.is-pending .tl-node-dot:after{background:var(--color-washi-300);width:6px;height:6px}.tl-item.is-pending .tl-title{color:var(--text-muted)}.tl-item.is-pending .tl-body{opacity:.5}.tl-line{width:1px;flex:1;background:var(--border-default);margin:var(--lib-space-xs) 0;min-height:var(--lib-space-lg);position:relative;overflow:hidden}.tl-line.dashed{background:repeating-linear-gradient(to bottom,var(--border-default) 0,var(--border-default) 4px,transparent 4px,transparent 8px)}.tl-line.progress{background:var(--border-subtle)}.tl-line.progress:after{content:"";position:absolute;top:0;left:0;right:0;height:var(--tl-progress, 0%);background:var(--color-kaki-500);transition:height var(--duration-slower) var(--ease-out)}.tl-content{padding-bottom:var(--lib-space-lg);padding-top:2px}.tl-item:last-child .tl-content{padding-bottom:0}.tl-timestamp{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);margin-bottom:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);line-height:1;padding-top:6px}.tl-timestamp-dot{width:4px;height:4px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.tl-title{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-snug);margin-bottom:var(--lib-space-sm)}.tl-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);opacity:.85}.tl-body p{margin-bottom:var(--lib-space-sm)}.tl-body p:last-child{margin-bottom:0}.tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lib-space-sm);margin-top:var(--lib-space-sm)}.tl-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-md);margin-top:var(--lib-space-xs)}.tl-item.is-active .tl-card{border-color:var(--color-kaki-200);background:var(--color-kaki-50)}.tl-item.is-done .tl-card{background:var(--bg-surface)}.tl-item.is-error .tl-card{border-color:#c44030;background:#fff8f7}.tl-item.is-pending .tl-card{background:var(--bg-surface);opacity:.6}.tl-media{margin-top:var(--lib-space-md);border-top:1px solid var(--border-subtle);padding-top:var(--lib-space-md);display:flex;gap:var(--lib-space-sm);flex-wrap:wrap}.tl-media-thumb{width:64px;height:48px;background:var(--border-subtle);border:1px solid var(--border-default);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted)}.tl-badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:2px var(--lib-space-sm)}.tl-badge:before{content:"";width:4px;height:4px;border-radius:var(--radius-full);background:currentcolor;opacity:.65;flex-shrink:0}.tl-badge-default{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle)}.tl-badge-kaki{color:var(--color-kaki-500);background:var(--color-kaki-50);border:1px solid var(--color-kaki-100)}.tl-badge-celadon{color:var(--color-celadon-500);background:var(--color-celadon-50);border:1px solid var(--color-celadon-100)}.tl-badge-error{color:var(--color-error);background:#fff8f7;border:1px solid #F5C4BC}.tl-avatar{width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:7px;color:var(--text-secondary);border:1px solid var(--border-subtle);flex-shrink:0}.tl-item.is-collapsed .tl-body,.tl-item.is-collapsed .tl-media,.tl-item.is-collapsed .tl-card-body{display:none}.tl-item.is-collapsed .tl-content{padding-bottom:var(--lib-space-md)}.tl-expand-btn{background:none;border:none;cursor:pointer;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);padding:0;margin-top:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);transition:color var(--duration-fast)}.tl-expand-btn:hover{color:var(--text-primary)}:host([size="sm"]) .tl-item{grid-template-columns:28px 1fr}:host([size="sm"]) .tl-node{width:20px;height:20px}:host([size="sm"]) .tl-node-dot:after{width:6px;height:6px}:host([size="sm"]) .tl-node-icon{font-size:11px}:host([size="sm"]) .tl-node-avatar{font-size:7px}:host([size="sm"]) .tl-line{min-height:var(--lib-space-md)}:host([size="sm"]) .tl-content{padding-bottom:var(--lib-space-md)}:host([size="sm"]) .tl-timestamp{font-size:9px;padding-top:2px}:host([size="sm"]) .tl-title{font-size:var(--text-sm)}:host([size="sm"]) .tl-body{font-size:var(--text-xs)}:host([size="sm"]) .tl-card{padding:var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .tl-item{grid-template-columns:48px 1fr;gap:0 var(--lib-space-md)}:host([size="lg"]) .tl-node{width:36px;height:36px}:host([size="lg"]) .tl-node-dot:after{width:10px;height:10px}:host([size="lg"]) .tl-node-icon{font-size:18px}:host([size="lg"]) .tl-line{min-height:var(--lib-space-lg)}:host([size="lg"]) .tl-content{padding-bottom:var(--lib-space-xl);padding-top:4px}:host([size="lg"]) .tl-timestamp{font-size:11px;padding-top:8px}:host([size="lg"]) .tl-title{font-size:var(--text-md)}:host([size="lg"]) .tl-body{font-size:var(--text-sm)}:host([size="lg"]) .tl-card{padding:var(--lib-space-md) var(--lib-space-lg)}}';
+import { nothing, html } from "lit";
+import { unsafeHTML as o } from "./index353.js";
+function renderBadge(item) {
+  return item.badge != null ? html`<span class="tb-badge">${item.badge}</span>` : nothing;
+}
+function renderTab(item, context) {
+  const isActive = context.active === item.id;
+  const isDisabled = item.disabled === true;
+  return html`
+    ${item.group ? html`<div class="tb-label">${item.group}</div>` : nothing}
+    <button
+      id="tab-${item.id}"
+      class="tb-tab ${isActive ? "is-active" : ""} ${isDisabled ? "is-disabled" : ""}"
+      role="tab"
+      aria-selected="${isActive}"
+      aria-controls="panel-${item.id}"
+      tabindex="${isActive ? "0" : "-1"}"
+      data-id="${item.id}"
+      data-label="${item.label}"
+      ?disabled="${isDisabled}"
+      @click="${(e) => context._handleClick(e)}"
+    >
+      ${item.icon ? html`${o(item.icon)}` : nothing}
+      ${item.label}
+      ${renderBadge(item)}
+    </button>
+  `;
+}
+function renderPanel(item, context) {
+  const isActive = context.active === item.id;
+  return html`
+    <div
+      class="tb-panel ${isActive ? "is-active" : ""}"
+      role="tabpanel"
+      id="panel-${item.id}"
+      aria-labelledby="tab-${item.id}"
+    >
+      <slot name="${item.id}"></slot>
+    </div>
+  `;
+}
+function tabsTemplate(context) {
+  const tabs = context.items ?? [];
+  const showInk = !["pill", "card", "outline", "vertical"].includes(context.variant);
+  return html`
+    <div class="tb" part="root">
+
+      <!-- Tab list -->
+      <div
+        class="tb-list"
+        part="list"
+        role="tablist"
+        aria-label="${context.ariaLabel || nothing}"
+        
+        @keydown="${(e) => context._handleKey(e)}"
+      >
+        ${tabs.map((item) => renderTab(item, context))}
+      </div>
+
+      <!-- Ink bar (posicionada por JS, solo para variantes underline) -->
+      ${showInk ? html`<div class="tb-ink" part="ink" style="left:${context._inkLeft}px;width:${context._inkWidth}px;"></div>` : nothing}
+
+      <!-- Panels -->
+      <div class="tb-panels" part="panels">
+        ${tabs.map((item) => renderPanel(item, context))}
+      </div>
+
+    </div>
+  `;
+}
 export {
-  timelineCss as default
+  tabsTemplate
 };
 //# sourceMappingURL=index261.js.map

package/dist/index261.js.map

@@ -1 +1 @@
-{"version":3,"file":"index261.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index261.js","sources":["../src/components/molecules/tabs/lib-tabs.html.ts"],"sourcesContent":["import { html, TemplateResult, nothing } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { LibTabs } from './lib-tabs.component';\nimport type { TabItem, TabsVariant } from './lib-tabs.types';\n\n/* ── Badge ── */\nfunction renderBadge(item: TabItem): TemplateResult | typeof nothing {\n  return item.badge != null\n    ? html`<span class=\"tb-badge\">${item.badge}</span>`\n    : nothing;\n}\n\n/* ── Tab button ── */\nfunction renderTab(item: TabItem, context: LibTabs): TemplateResult {\n  const isActive   = context.active === item.id;\n  const isDisabled = item.disabled === true;\n\n  return html`\n    ${item.group\n      ? html`<div class=\"tb-label\">${item.group}</div>`\n      : nothing}\n    <button\n      id=\"tab-${item.id}\"\n      class=\"tb-tab ${isActive ? 'is-active' : ''} ${isDisabled ? 'is-disabled' : ''}\"\n      role=\"tab\"\n      aria-selected=\"${isActive}\"\n      aria-controls=\"panel-${item.id}\"\n      tabindex=\"${isActive ? '0' : '-1'}\"\n      data-id=\"${item.id}\"\n      data-label=\"${item.label}\"\n      ?disabled=\"${isDisabled}\"\n      @click=\"${(e:Event):void=> context._handleClick(e as CustomEvent)}\"\n    >\n      ${item.icon ? html`${unsafeHTML(item.icon)}` : nothing}\n      ${item.label}\n      ${renderBadge(item)}\n    </button>\n  `;\n}\n\n/* ── Panel ── */\nfunction renderPanel(item: TabItem, context: LibTabs): TemplateResult {\n  const isActive = context.active === item.id;\n  return html`\n    <div\n      class=\"tb-panel ${isActive ? 'is-active' : ''}\"\n      role=\"tabpanel\"\n      id=\"panel-${item.id}\"\n      aria-labelledby=\"tab-${item.id}\"\n    >\n      <slot name=\"${item.id}\"></slot>\n    </div>\n  `;\n}\n\n/* ── Main template ── */\nexport function tabsTemplate(context: LibTabs): TemplateResult {\n  const tabs = (context.items ?? []) as TabItem[];\n\n  /* La ink bar solo aplica en underline (y sus modificadores kintsugi/glitch) */\n  const showInk = !(['pill', 'card', 'outline', 'vertical'] as TabsVariant[]).includes(context.variant);\n\n  return html`\n    <div class=\"tb\" part=\"root\">\n\n      <!-- Tab list -->\n      <div\n        class=\"tb-list\"\n        part=\"list\"\n        role=\"tablist\"\n        aria-label=\"${context.ariaLabel || nothing}\"\n        \n        @keydown=\"${(e: KeyboardEvent): void => context._handleKey(e)}\"\n      >\n        ${tabs.map(item => renderTab(item, context))}\n      </div>\n\n      <!-- Ink bar (posicionada por JS, solo para variantes underline) -->\n      ${showInk\n        ? html`<div class=\"tb-ink\" part=\"ink\" style=\"left:${context._inkLeft}px;width:${context._inkWidth}px;\"></div>`\n        : nothing}\n\n      <!-- Panels -->\n      <div class=\"tb-panels\" part=\"panels\">\n        ${tabs.map(item => renderPanel(item, context))}\n      </div>\n\n    </div>\n  `;\n}"],"names":["unsafeHTML"],"mappings":";;AAMA,SAAS,YAAY,MAAgD;AACnE,SAAO,KAAK,SAAS,OACjB,8BAA8B,KAAK,KAAK,YACxC;AACN;AAGA,SAAS,UAAU,MAAe,SAAkC;AAClE,QAAM,WAAa,QAAQ,WAAW,KAAK;AAC3C,QAAM,aAAa,KAAK,aAAa;AAErC,SAAO;AAAA,MACH,KAAK,QACH,6BAA6B,KAAK,KAAK,WACvC,OAAO;AAAA;AAAA,gBAEC,KAAK,EAAE;AAAA,sBACD,WAAW,cAAc,EAAE,IAAI,aAAa,gBAAgB,EAAE;AAAA;AAAA,uBAE7D,QAAQ;AAAA,6BACF,KAAK,EAAE;AAAA,kBAClB,WAAW,MAAM,IAAI;AAAA,iBACtB,KAAK,EAAE;AAAA,oBACJ,KAAK,KAAK;AAAA,mBACX,UAAU;AAAA,gBACb,CAAC,MAAgB,QAAQ,aAAa,CAAgB,CAAC;AAAA;AAAA,QAE/D,KAAK,OAAO,OAAOA,EAAW,KAAK,IAAI,CAAC,KAAK,OAAO;AAAA,QACpD,KAAK,KAAK;AAAA,QACV,YAAY,IAAI,CAAC;AAAA;AAAA;AAGzB;AAGA,SAAS,YAAY,MAAe,SAAkC;AACpE,QAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,SAAO;AAAA;AAAA,wBAEe,WAAW,cAAc,EAAE;AAAA;AAAA,kBAEjC,KAAK,EAAE;AAAA,6BACI,KAAK,EAAE;AAAA;AAAA,oBAEhB,KAAK,EAAE;AAAA;AAAA;AAG3B;AAGO,SAAS,aAAa,SAAkC;AAC7D,QAAM,OAAQ,QAAQ,SAAS,CAAA;AAG/B,QAAM,UAAU,CAAE,CAAC,QAAQ,QAAQ,WAAW,UAAU,EAAoB,SAAS,QAAQ,OAAO;AAEpG,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQa,QAAQ,aAAa,OAAO;AAAA;AAAA,oBAE9B,CAAC,MAA2B,QAAQ,WAAW,CAAC,CAAC;AAAA;AAAA,UAE3D,KAAK,IAAI,CAAA,SAAQ,UAAU,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,QAI5C,UACE,kDAAkD,QAAQ,QAAQ,YAAY,QAAQ,SAAS,gBAC/F,OAAO;AAAA;AAAA;AAAA;AAAA,UAIP,KAAK,IAAI,CAAA,SAAQ,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAKtD;"}

package/dist/index262.js

@@ -1,95 +1,5 @@
-import { html, nothing } from "lit";
-import { styleMap as o } from "./index267.js";
-function timelineItemTemplate(props) {
-  const {
-    nodeType,
-    nodeColor,
-    icon,
-    avatar,
-    status,
-    lineVariant,
-    lineProgress,
-    hideLine,
-    timestamp,
-    title,
-    body,
-    card,
-    collapsed,
-    collapsible,
-    onToggleCollapse
-  } = props;
-  const itemCls = [
-    "tl-item",
-    status !== "default" ? `is-${status}` : "",
-    collapsed ? "is-collapsed" : ""
-  ].filter(Boolean).join(" ");
-  const nodeTypeCls = `tl-node-${nodeType}`;
-  const nodeColorCls = nodeColor !== "default" ? `nd-${nodeColor}` : "";
-  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();
-  const nodeInner = nodeType === "icon" ? html`<lib-icon name="${icon}" size="xs"></lib-icon>` : nodeType === "avatar" ? html`${avatar}` : nothing;
-  const lineCls = [
-    "tl-line",
-    lineVariant === "dashed" ? "dashed" : "",
-    lineVariant === "progress" ? "progress" : ""
-  ].filter(Boolean).join(" ");
-  const lineStyles = lineVariant === "progress" ? o({ "--tl-progress": `${lineProgress}%` }) : nothing;
-  const contentInner = card ? html`
-        <div class="tl-card">
-          ${title ? html`<p class="tl-title">${title}</p>` : nothing}
-          <div class="tl-card-body">
-            ${body ? html`<div class="tl-body">${body}</div>` : nothing}
-            <!-- slot por defecto para contenido libre dentro de la card -->
-            <slot></slot>
-            <!-- slot meta: badges, avatares, etc. -->
-            <div class="tl-meta">
-              <slot name="meta"></slot>
-            </div>
-            <!-- slot media: imágenes adjuntas -->
-            <slot name="media"></slot>
-          </div>
-        </div>` : html`
-        ${title ? html`<p class="tl-title">${title}</p>` : nothing}
-        ${body ? html`<div class="tl-body">${body}</div>` : html`<div class="tl-body"><slot></slot></div>`}
-        <div class="tl-meta">
-          <slot name="meta"></slot>
-        </div>`;
-  return html`
-    <div class="${itemCls}" role="listitem">
-
-      <!-- ── Spine: nodo + línea ── -->
-      <div class="tl-spine">
-        <div class="${nodeCls}">${nodeInner}</div>
-        ${hideLine ? nothing : html`<div class="${lineCls}" style="${lineStyles}"></div>`}
-      </div>
-
-      <!-- ── Content ── -->
-      <div class="tl-content">
-        ${timestamp ? html`
-              <div class="tl-timestamp">
-                <span class="tl-timestamp-dot"></span>
-                ${timestamp}
-              </div>` : nothing}
-
-        ${contentInner}
-
-        ${collapsible ? html`
-              <button
-                class="tl-expand-btn"
-                aria-expanded="${!collapsed}"
-                @click="${onToggleCollapse}"
-              >
-                <lib-icon
-                  name="${collapsed ? "caret-down" : "caret-up"}"
-                  size="xs"
-                ></lib-icon>
-                ${collapsed ? "Mostrar más" : "Mostrar menos"}
-              </button>` : nothing}
-      </div>
-
-    </div>
-  `;
-}
+const tabsCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.tb{position:relative}.tb-list{display:flex;align-items:flex-end;position:relative;gap:0}.tb-tab{position:relative;display:inline-flex;align-items:center;gap:var(--lib-space-xs);padding:var(--lib-space-md) var(--lib-space-xl);height:44px;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-washi-400);background:none;border:none;cursor:pointer;white-space:nowrap;transition:color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);outline:none;flex-shrink:0;-webkit-user-select:none;user-select:none}.tb-tab:hover{color:var(--color-washi-700)}.tb-tab.is-active{color:var(--color-washi-900)}.tb-tab:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:-2px}.tb-tab.is-disabled{opacity:.35;pointer-events:none}.tb-tab svg{width:13px;height:13px;stroke:currentcolor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.tb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-family:var(--lib-font-mono);letter-spacing:0;background:var(--color-washi-200);color:var(--color-washi-600);border-radius:999px;transition:background var(--duration-base),color var(--duration-base)}.tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}.tb-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-washi-400);padding:0 var(--lib-space-xl) var(--lib-space-md)}.tb-label+.tb-label,.tb-label:not(:first-child){margin-top:var(--lib-space-2xl)}:host([size="sm"]) .tb-tab{height:36px;padding:var(--lib-space-xs) var(--lib-space-lg);font-size:10px}:host([size="lg"]) .tb-tab{height:52px;padding:var(--lib-space-lg) var(--lib-space-2xl);letter-spacing:.18em}.tb-panels{position:relative}.tb-panel{display:none}.tb-panel.is-active{display:block;animation:tb-in var(--duration-slow) var(--ease-out) both}@keyframes tb-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}:host([variant="underline"]) .tb-list{border-bottom:1px solid var(--color-washi-200);gap:var(--lib-space-xs)}:host([variant="underline"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="underline"]) .tb-tab.is-active{color:var(--color-kaki-600)}.tb-ink{position:absolute;bottom:0;height:2px;background:var(--color-kaki-500);transition:left var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-bounce);pointer-events:none;z-index:2}:host([variant="underline"][color="celadon"]) .tb-tab.is-active{color:var(--color-celadon-500)}:host([variant="underline"][color="celadon"]) .tb-ink{background:var(--color-celadon-500)}:host([variant="underline"][color="celadon"]) .tb-tab.is-active .tb-badge{background:var(--color-celadon-500)}:host([variant="pill"]) .tb-list{gap:var(--lib-space-xs);padding:var(--lib-space-xs);background:var(--color-washi-100);border:1px solid var(--color-washi-200);display:inline-flex}:host([variant="pill"]) .tb-tab{border-radius:2px;height:36px;padding:var(--lib-space-xs) var(--lib-space-lg)}:host([variant="pill"]) .tb-tab.is-active{background:#fff;color:var(--color-washi-900);box-shadow:0 1px 4px #1a140e1a}:host([variant="pill"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="pill"]) .tb-ink{display:none}:host([variant="pill"][color="kaki"]) .tb-tab.is-active{background:var(--color-kaki-500);color:#fff}:host([variant="pill"][color="kaki"]) .tb-tab.is-active .tb-badge{background:#ffffff4d;color:#fff}:host([variant="pill"][color="celadon"]) .tb-tab.is-active{background:var(--color-celadon-500);color:#fff}:host([variant="pill"][round]) .tb-list{border-radius:999px}:host([variant="pill"][round]) .tb-tab{border-radius:999px}:host([variant="card"]) .tb-list{gap:2px;align-items:flex-end}:host([variant="card"]) .tb-tab{border:1px solid transparent;border-bottom:none;background:var(--color-washi-100);color:var(--color-washi-400);height:40px;margin-bottom:-1px;padding:0 var(--lib-space-xl);border-radius:2px 2px 0 0}:host([variant="card"]) .tb-tab:hover{background:var(--color-washi-50);color:var(--color-washi-700)}:host([variant="card"]) .tb-tab.is-active{background:#fff;color:var(--color-washi-900);border-color:var(--color-washi-200);border-bottom-color:#fff;z-index:1;height:44px}:host([variant="card"]) .tb-panels{border:1px solid var(--color-washi-200);background:#fff;padding:var(--lib-space-2xl)}:host([variant="card"]) .tb-ink{display:none}:host([variant="outline"]) .tb-list{border-bottom:1px solid var(--color-washi-200);gap:var(--lib-space-xs)}:host([variant="outline"]) .tb-tab{border:1px solid transparent;border-bottom:none;margin-bottom:-1px}:host([variant="outline"]) .tb-tab.is-active{border-color:var(--color-washi-200);border-bottom-color:var(--color-washi-50);background:var(--color-washi-50);color:var(--color-washi-900)}:host([variant="outline"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="outline"]) .tb-ink{display:none}:host([variant="vertical"]) .tb{display:grid;grid-template-columns:180px 1fr;gap:0;align-items:start}:host([variant="vertical"]) .tb-list{flex-direction:column;align-items:stretch;border-right:1px solid var(--color-washi-200);border-bottom:none;gap:0;padding:var(--lib-space-xs) 0;grid-column:1;grid-row:1}:host([variant="vertical"]) .tb-ink{display:none}:host([variant="vertical"]) .tb-panels{padding:var(--lib-space-xs) 0 var(--lib-space-xs) var(--lib-space-2xl);grid-column:2;grid-row:1}:host([variant="vertical"]) .tb-tab{height:auto;padding:var(--lib-space-md) var(--lib-space-xl);text-align:left;border-left:2px solid transparent;border-radius:0;justify-content:flex-start}:host([variant="vertical"]) .tb-tab:hover{border-left-color:var(--color-washi-300)}:host([variant="vertical"]) .tb-tab.is-active{border-left-color:var(--color-kaki-500);color:var(--color-kaki-600);background:var(--color-kaki-50)}:host([variant="vertical"]) .tb-panel.is-active{animation:tb-in-h var(--duration-slow) var(--ease-out) both}@keyframes tb-in-h{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:none}}:host([variant="vertical"]) .tb-label{padding:0 var(--lib-space-xl) var(--lib-space-md)}:host([dark]){background:var(--color-washi-950)}:host([dark]) .tb-tab{color:#faf7f440}:host([dark]) .tb-tab:hover{color:#faf7f499}:host([dark]) .tb-tab:focus-visible{outline-color:var(--color-kaki-400)}:host([dark]) .tb-badge{background:#ffffff1a;color:#faf7f466}:host([dark]) .tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}:host([dark]) .tb-panels{color:#faf7f499}:host([dark]) .tb-label{color:#faf7f42e}:host([dark][variant="underline"]) .tb-list{border-bottom-color:#ffffff14}:host([dark][variant="underline"]) .tb-tab.is-active{color:var(--color-kaki-400)}:host([dark][variant="underline"]) .tb-ink{background:var(--color-kaki-400)}:host([dark][variant="pill"]) .tb-list{background:#ffffff0a;border-color:#ffffff12}:host([dark][variant="pill"]) .tb-tab.is-active{background:#ffffff17;color:#faf7f4cc;box-shadow:0 1px 4px #0000004d}:host([dark][variant="pill"][color="kaki"]) .tb-tab.is-active{background:var(--color-kaki-500);color:#fff}:host([dark][variant="card"]) .tb-tab{background:#ffffff08;border-color:transparent}:host([dark][variant="card"]) .tb-tab.is-active{background:#ffffff12;border-color:#ffffff14;border-bottom-color:var(--color-washi-950);color:#faf7f4bf}:host([dark][variant="card"]) .tb-panels{background:#ffffff0a;border-color:#ffffff14}:host([dark][variant="vertical"]) .tb-list{border-right-color:#ffffff14}:host([dark][variant="vertical"]) .tb-tab.is-active{border-left-color:var(--color-kaki-500);color:var(--color-kaki-400);background:#b85a1e1a}@keyframes kintsugi-ink{0%{background-position:0% 0}to{background-position:200% 0}}:host([kintsugi][variant="underline"]) .tb-ink{background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-400) 25%,#F5D08A 50%,var(--color-kaki-400) 75%,var(--color-kaki-600) 100%);background-size:200% 100%;animation:kintsugi-ink 3s linear infinite}:host([kintsugi]) .tb-tab.is-active{color:var(--color-kaki-600)}:host([kintsugi]) .tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}:host([kintsugi][variant="pill"]) .tb-tab.is-active{background:linear-gradient(90deg,var(--color-kaki-600),var(--color-kaki-400),#F5D08A,var(--color-kaki-400),var(--color-kaki-600));background-size:200% 100%;animation:kintsugi-ink 3s linear infinite;color:#fff}:host([kintsugi][dark][variant="underline"]) .tb-ink{background:linear-gradient(90deg,#b85a1e66,#d97234b3,#f5d08ae6,#d97234b3,#b85a1e66);background-size:200% 100%;animation:kintsugi-ink 3.5s linear infinite}:host([kintsugi][dark]) .tb-tab.is-active{color:var(--color-kaki-400)}@keyframes tb-glitch-x{0%,88%,to{transform:translate(0)}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:translate(0)}}@keyframes tb-glitch-r{0%,88%,to{opacity:0}89%{opacity:.6;transform:translate(-2px);clip-path:inset(20% 0 50% 0)}90%{opacity:.4;transform:translate(1px);clip-path:inset(55% 0 10% 0)}91%{opacity:0}}@keyframes tb-glitch-b{0%,88%,to{opacity:0}89%{opacity:.5;transform:translate(2px);clip-path:inset(50% 0 20% 0)}90%{opacity:.3;transform:translate(-1px);clip-path:inset(10% 0 60% 0)}91%{opacity:0}}@keyframes tb-glitch-flicker{0%,85%,to{opacity:1}89%{opacity:.7}89.5%{opacity:1}90%{opacity:.5}90.5%{opacity:1}}:host([glitch]) .tb-tab.is-active{animation:tb-glitch-x 6s steps(1) infinite,tb-glitch-flicker 6s steps(1) infinite;position:relative}:host([glitch]) .tb-tab.is-active:before,:host([glitch]) .tb-tab.is-active:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:inherit;letter-spacing:inherit;text-transform:uppercase;pointer-events:none;padding:inherit}:host([glitch]) .tb-tab.is-active:before{color:#d97234b3;animation:tb-glitch-r 6s steps(1) infinite}:host([glitch]) .tb-tab.is-active:after{color:#4e948299;animation:tb-glitch-b 6s steps(1) infinite;animation-delay:60ms}:host([glitch][variant="underline"]) .tb-ink{background:var(--color-washi-900);animation:tb-glitch-flicker 6s steps(1) infinite!important}:host([glitch][dark]) .tb-tab.is-active:before{color:#d97234cc}:host([glitch][dark]) .tb-tab.is-active:after{color:#4e9482b3}:host([glitch][dark][variant="underline"]) .tb-ink{background:#faf7f499}:host([scroll]) .tb-list{overflow:auto hidden;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap}:host([scroll]) .tb-list::-webkit-scrollbar{display:none}:host([full]) .tb-list{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}:host([full]) .tb-tab{justify-content:center}}';
 export {
-  timelineItemTemplate
+  tabsCss as default
 };
 //# sourceMappingURL=index262.js.map

package/dist/index262.js.map

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