@shibui-ui/ui 1.25.0 → 1.25.1

package/dist/index246.js

@@ -1,5 +1,5 @@
-const headerCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;z-index:var(--z-overlay)}*,*:before,*:after{box-sizing:border-box}a{text-decoration:none}button{font:inherit;cursor:pointer;background:none;border:none}}@layer components{.hdr{width:100%;display:flex;align-items:center;position:relative;overflow:visible;transition:height var(--duration-slow) var(--ease-out),background var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out),backdrop-filter var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}:host([variant="classic"]) .hdr{height:64px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="dark"]) .hdr{height:64px;background:#120e0ad9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgb(255,255,255,.07);padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="centered"]) .hdr{height:64px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:1fr auto 1fr;padding:0 var(--lib-space-xl);gap:var(--lib-space-lg)}.hdr-announcement{height:36px;background:var(--color-kaki-50);border-bottom:1px solid rgb(184,90,30,.15);display:flex;align-items:center;justify-content:center;gap:var(--lib-space-md);padding:0 var(--lib-space-xl);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-kaki-600)}.hdr-announcement a{color:var(--color-kaki-500);text-decoration:underline;text-underline-offset:2px}:host([variant="transparent"]) .hdr{height:68px;background:transparent;border-bottom:1px solid transparent;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="transparent"][scrolled]) .hdr{background:#120e0ad1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:#ffffff12}:host([variant="kintsugi"]) .hdr{height:64px;background:var(--color-washi-950);border-bottom:none;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="kintsugi"]) .hdr:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgb(184,90,30,.4) 10%,var(--color-kaki-400) 30%,#F5D08A 50%,var(--color-kaki-400) 70%,rgb(184,90,30,.4) 90%,transparent);background-size:200% 100%;animation:hdr-kintsugi-seam 5s linear infinite;pointer-events:none}@keyframes hdr-kintsugi-seam{0%{background-position:-200% 0}to{background-position:200% 0}}:host([variant="glitch"]) .hdr{height:56px;background:var(--color-washi-950);border-bottom:1px solid rgb(255,255,255,.06);padding:0 var(--lib-space-lg);gap:var(--lib-space-xl);position:relative;overflow:hidden;animation:hdr-glitch 7s steps(1) infinite}:host([variant="glitch"]) .hdr:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.012) 3px,rgb(255,255,255,.012) 4px);pointer-events:none;z-index:5;animation:hdr-scanline-shift 7s steps(1) infinite}@keyframes hdr-glitch{0%,88%,to{transform:none}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:none}}@keyframes hdr-scanline-shift{0%,88%,to{opacity:1;transform:none}89%{transform:translateY(-3px);opacity:.7}90%{transform:translateY(2px);opacity:.9}91%{transform:none;opacity:1}}:host([variant="mega"]) .hdr{height:64px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:0 var(--lib-space-xl);gap:var(--lib-space-xl);z-index:var(--z-overlay)}.hdr-mega-panel{position:absolute;top:64px;left:0;right:0;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);box-shadow:0 12px 40px #1a140e1a;z-index:calc(var(--z-overlay) - 1);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.hdr-mega-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.hdr-mega-inner{max-width:1200px;margin:0 auto;padding:var(--lib-space-xl);display:grid;grid-template-columns:1fr 1fr 1fr 240px;gap:var(--lib-space-xl)}.hdr-mega-group-title{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-md)}.hdr-mega-link{display:block;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--color-washi-700);padding:var(--lib-space-xs) 0;transition:color var(--duration-fast)}.hdr-mega-link:hover{color:var(--color-kaki-500)}.hdr-mega-cta{background:var(--color-kaki-50);border:1px solid rgb(184,90,30,.15);padding:var(--lib-space-lg)}.hdr-mega-cta-label{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-kaki-500);margin-bottom:var(--lib-space-md)}.hdr-mega-cta-title{font-family:var(--lib-font-display);font-size:1.1rem;font-weight:300;color:var(--color-kaki-600);margin-bottom:var(--lib-space-sm);line-height:1.3}.hdr-mega-cta-desc{font-size:var(--text-xs);color:var(--color-kaki-600);line-height:1.7;margin-bottom:var(--lib-space-md)}.hdr-mega-overlay{position:absolute;top:64px;left:0;right:0;height:300px;background:#1a140e40;opacity:0;pointer-events:none;transition:opacity var(--duration-base);z-index:calc(var(--z-overlay) - 2)}.hdr-mega-overlay.is-open{opacity:1;pointer-events:auto}:host([variant="minimal"]) .hdr{height:60px;background:transparent;border-bottom:none;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="shrink"]) .hdr{height:72px;background:var(--bg-elevated);border-bottom:1px solid transparent;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="shrink"][shrunk]) .hdr{height:48px;border-bottom-color:var(--border-subtle);box-shadow:0 1px 8px #1a140e12}:host([variant="shrink"]) .hdr-logo-mark{width:36px;height:36px;font-size:1.3rem}:host([variant="shrink"][shrunk]) .hdr-logo-mark{width:26px;height:26px;font-size:.95rem}:host([variant="shrink"]) .hdr-brand-name{font-size:1.3rem;transition:font-size var(--duration-slow) var(--ease-out)}:host([variant="shrink"][shrunk]) .hdr-brand-name{font-size:1rem}.hdr-tagline{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);line-height:1;margin-top:3px;overflow:hidden;max-height:20px;opacity:1;transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-slow) var(--ease-out)}:host([variant="shrink"][shrunk]) .hdr-tagline{max-height:0;opacity:0}:host([variant="app-bar"]) .hdr{height:56px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:0 var(--lib-space-lg);gap:var(--lib-space-md)}:host([variant="app-bar"][compact]) .hdr{height:44px;background:#120e0ae6;border-bottom-color:#ffffff12}.hdr-breadcrumbs{display:flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;flex-shrink:0}.hdr-breadcrumb-link{color:var(--text-muted);text-transform:uppercase;transition:color var(--duration-fast)}.hdr-breadcrumb-link:hover{color:var(--text-primary)}.hdr-breadcrumb-sep{color:var(--color-washi-300)}.hdr-breadcrumb-current{color:var(--color-washi-700);text-transform:uppercase}:host([variant="app-bar"][compact]) .hdr-breadcrumb-link{color:#faf7f440}:host([variant="app-bar"][compact]) .hdr-breadcrumb-sep{color:#ffffff1f}:host([variant="app-bar"][compact]) .hdr-breadcrumb-current{color:#faf7f480}.hdr-search{display:flex;align-items:center;gap:var(--lib-space-xs);border:1px solid var(--border-subtle);background:var(--bg-base);height:32px;padding:0 var(--lib-space-sm);max-width:320px;flex:1}:host([variant="app-bar"][compact]) .hdr-search{border-color:#ffffff12;background:#ffffff08;height:26px;max-width:260px}.hdr-search input{flex:1;background:none;border:none;outline:none;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:var(--text-primary);width:100%}.hdr-search input::placeholder{color:var(--text-muted)}:host([variant="app-bar"][compact]) .hdr-search input{color:#faf7f499}.hdr-search-kbd{font-family:var(--lib-font-mono);font-size:7px;color:var(--color-washi-300);border:1px solid var(--color-washi-200);padding:0 4px;flex-shrink:0;margin-left:auto}:host([variant="app-bar"][compact]) .hdr-search-kbd{display:none}.hdr-notif{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);position:relative;flex-shrink:0;transition:color var(--duration-base)}.hdr-notif:hover{color:var(--text-primary)}.hdr-notif-dot{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--color-kaki-400);border:1px solid var(--bg-elevated)}:host([variant="app-bar"][compact]) .hdr-notif{width:26px;height:26px;color:#faf7f440}:host([variant="app-bar"][compact]) .hdr-notif:hover{color:#faf7f4b3}:host([variant="app-bar"][compact]) .hdr-notif-dot{border-color:#120e0ae6}.hdr-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:.9rem;cursor:pointer;flex-shrink:0}:host([variant="app-bar"][compact]) .hdr-avatar{width:26px;height:26px;font-size:.8rem;background:#b85a1e33;border:1px solid rgb(184,90,30,.25);color:var(--color-kaki-400)}.hdr-status{display:flex;align-items:center;gap:var(--lib-space-xs)}.hdr-status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-celadon-400);flex-shrink:0}.hdr-status-text{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.1em;color:#faf7f433}.hdr-logo{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;text-decoration:none;color:inherit}.hdr-logo-mark{width:30px;height:30px;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:1.1rem;font-weight:300;flex-shrink:0;transition:all var(--duration-slow) var(--ease-out)}:host([variant="dark"]) .hdr-logo-mark,:host([variant="transparent"]) .hdr-logo-mark{background:#b85a1e33;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400)}:host([variant="transparent"]) .hdr-logo-mark{background:#faf7f426;border:1px solid rgb(250,247,244,.25);color:#faf7f4cc}:host([variant="kintsugi"]) .hdr-logo-mark{position:relative;background:transparent;border:none;border-radius:50%;overflow:visible}:host([variant="kintsugi"]) .hdr-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:hdr-logo-ring 4s linear infinite}:host([variant="kintsugi"]) .hdr-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"]) .hdr-logo-mark-text{position:relative;z-index:2;color:var(--color-kaki-400)}@keyframes hdr-logo-ring{to{transform:rotate(360deg)}}.hdr-brand-name{font-family:var(--lib-font-display);font-size:1.2rem;font-weight:300;letter-spacing:.06em;white-space:nowrap}:host([variant="classic"]) .hdr-brand-name,:host([variant="mega"]) .hdr-brand-name,:host([variant="shrink"]) .hdr-brand-name{color:var(--color-washi-900)}:host([variant="dark"]) .hdr-brand-name{color:#faf7f499}:host([variant="transparent"]) .hdr-brand-name{color:#faf7f4bf;transition:color var(--duration-slow)}:host([variant="transparent"][scrolled]) .hdr-brand-name{color:#faf7f4a6}:host([variant="kintsugi"]) .hdr-brand-name{color:#faf7f480}:host([variant="centered"]) .hdr-brand-name{color:var(--color-washi-900);font-size:1.35rem;letter-spacing:.1em}:host([variant="minimal"]) .hdr-brand-name{font-family:var(--lib-font-display);font-size:1.4rem;letter-spacing:.12em;color:var(--color-washi-700)}.hdr-version{font-family:var(--lib-font-mono);font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:#b85a1e80;border:1px solid rgb(184,90,30,.2);padding:1px 5px;margin-left:2px}.hdr-logo-glitch{font-family:var(--lib-font-mono);font-size:.8rem;letter-spacing:.2em;color:var(--color-kaki-400);display:flex;align-items:center;gap:var(--lib-space-xs);text-decoration:none;position:relative;z-index:6;flex-shrink:0}.hdr-logo-glitch-badge{font-family:var(--lib-font-mono);font-size:7px;letter-spacing:.14em;color:#faf7f426;border:1px solid rgb(255,255,255,.08);padding:1px 4px}.hdr-nav{display:flex;align-items:center;gap:var(--lib-space-lg);flex:1}.hdr-nav--right{justify-content:flex-end}.hdr-link{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:4px;transition:opacity var(--duration-fast),color var(--duration-fast);white-space:nowrap}.hdr-link:hover{opacity:.7}:host([variant="classic"]) .hdr-link,:host([variant="centered"]) .hdr-link,:host([variant="mega"]) .hdr-link,:host([variant="shrink"]) .hdr-link{color:var(--color-washi-600)}:host([variant="dark"]) .hdr-link{color:#faf7f44d}:host([variant="transparent"]) .hdr-link{color:#faf7f48c;transition:color var(--duration-slow)}:host([variant="transparent"][scrolled]) .hdr-link{color:#faf7f473}:host([variant="kintsugi"]) .hdr-link{color:#faf7f447}:host([variant="kintsugi"]) .hdr-link:hover{opacity:1;color:var(--color-kaki-400)}:host([variant="glitch"]) .hdr-link{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.12em;text-transform:none;color:#faf7f438;position:relative;z-index:6}:host([variant="glitch"]) .hdr-link:hover{opacity:1;color:var(--color-kaki-400)}:host([variant="minimal"]) .hdr-link{font-family:var(--lib-font-body);font-size:var(--text-sm);letter-spacing:0;text-transform:none;color:var(--color-washi-500);position:relative;padding-bottom:2px}:host([variant="minimal"]) .hdr-link:hover{opacity:1;color:var(--color-washi-900)}:host([variant="minimal"]) .hdr-link.is-active{color:var(--color-washi-900)}:host([variant="minimal"]) .hdr-link.is-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--color-washi-700)}.hdr-link-chevron{transition:transform var(--duration-base)}.hdr-link.dd-open .hdr-link-chevron{transform:rotate(180deg)}.hdr-dd{position:relative;display:inline-block}.hdr-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;display:none;z-index:calc(var(--z-overlay) + 1);box-shadow:0 8px 32px #1a140e1f;background:var(--bg-elevated);border:1px solid var(--border-subtle)}.hdr-dd:hover .hdr-dd-menu{display:block}:host([variant="dark"]) .hdr-dd-menu{background:var(--color-washi-900);border-color:#ffffff1a}.hdr-dd-item{display:block;padding:var(--lib-space-sm) var(--lib-space-md);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-washi-500);transition:all var(--duration-fast)}.hdr-dd-item:hover{background:var(--bg-base);color:var(--color-washi-900)}.hdr-dd-item--divider{border-top:1px solid var(--color-washi-100)}:host([variant="dark"]) .hdr-dd-item{color:#faf7f459}:host([variant="dark"]) .hdr-dd-item:hover{background:#ffffff0f;color:#faf7f4cc}.hdr-actions{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;position:relative;z-index:6}.hdr-action{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;height:36px;padding:0 var(--lib-space-md);display:inline-flex;align-items:center;gap:var(--lib-space-xs);transition:all var(--duration-base);white-space:nowrap;text-decoration:none;cursor:pointer}.hdr-action--kaki{background:var(--color-kaki-500);color:#fff;border:1px solid var(--color-kaki-500)}.hdr-action--kaki:hover{background:var(--color-kaki-600)}.hdr-action--outline{background:transparent;color:var(--color-washi-600);border:1px solid var(--color-washi-300)}.hdr-action--outline:hover{border-color:var(--color-washi-500);color:var(--color-washi-900)}.hdr-action--ghost{background:transparent;color:#faf7f48c;border:1px solid rgb(255,255,255,.12)}.hdr-action--ghost:hover{border-color:#ffffff40;color:#faf7f4d9}.hdr-action--kintsugi{background:transparent;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400)}.hdr-action--kintsugi:hover{border-color:var(--color-kaki-400);background:#b85a1e14}.hdr-action--glitch{background:transparent;border:1px solid rgb(255,255,255,.1);color:#faf7f459;animation:hdr-glitch-cta 7s steps(1) infinite;height:30px}.hdr-action--glitch:hover{border-color:var(--color-kaki-400);color:var(--color-kaki-400)}@keyframes hdr-glitch-cta{0%,88%,to{box-shadow:none}89%{box-shadow:-2px 0 #d9723459,2px 0 #4e948240}90%{box-shadow:2px 0 #d972344d,-2px 0 #4e948233}91%{box-shadow:none}}.hdr-login{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;transition:opacity var(--duration-fast),color var(--duration-fast);text-decoration:none;white-space:nowrap}:host([variant="classic"]) .hdr-login,:host([variant="shrink"]) .hdr-login,:host([variant="mega"]) .hdr-login{color:var(--color-washi-500)}:host([variant="dark"]) .hdr-login{color:#faf7f440}:host([variant="transparent"]) .hdr-login{color:#faf7f466;transition:color var(--duration-slow)}:host([variant="kintsugi"]) .hdr-login{color:#faf7f433}.hdr-login:hover{opacity:.7}.hdr-contact{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-kaki-500);text-decoration:none;flex-shrink:0}.hdr-online{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.12em;color:#4e948299}.hdr-divider{width:1px;height:20px;background:var(--border-subtle);flex-shrink:0}:host([variant="app-bar"][compact]) .hdr-divider{background:#ffffff14;height:16px}.hdr-spacer{flex:1}@media(prefers-reduced-motion:reduce){:host([variant="kintsugi"]) .hdr:after,:host([variant="kintsugi"]) .hdr-logo-mark:before,:host([variant="glitch"]) .hdr,:host([variant="glitch"]) .hdr:before,.hdr-action--glitch{animation:none!important}.hdr{transition:none!important}}}.hdr-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;margin-left:auto;cursor:pointer;background:none;border:none;padding:0;z-index:6;position:relative}.hdr-mobile-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0806048c;z-index:calc(var(--z-overlay) + 1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:hdr-backdrop-in .2s var(--ease-out) both}.hdr-mobile-drawer{display:none;position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--color-washi-950, #120E0A);border-left:1px solid rgb(255,255,255,.07);z-index:calc(var(--z-overlay) + 2);flex-direction:column;overflow-y:auto;animation:hdr-drawer-in .24s var(--ease-out) both}.hdr-mobile-drawer.is-open{display:flex}.hdr-mobile-links{flex:1;padding:var(--lib-space-xl, 2rem) var(--lib-space-lg, 1.5rem);display:flex;flex-direction:column;gap:2px}.hdr-mobile-link{font-family:var(--lib-font-display, "Cormorant Garamond", serif);font-size:1.35rem;font-weight:300;letter-spacing:-.01em;color:#faf7f48c;text-decoration:none;padding:.5rem 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(255,255,255,.05);transition:color .16s}.hdr-mobile-link:hover{color:#faf7f4d9}.hdr-mobile-sub{display:flex;flex-direction:column;gap:2px;padding:var(--lib-space-xs, .25rem) 0 var(--lib-space-sm, .5rem) var(--lib-space-md, 1rem)}.hdr-mobile-sub-link{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#faf7f438;text-decoration:none;padding:.3rem 0;transition:color .16s}.hdr-mobile-sub-link:hover{color:var(--color-kaki-400, #D97234)}.hdr-mobile-col-title{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#faf7f426;margin:var(--lib-space-md, 1rem) 0 var(--lib-space-xs, .25rem)}.hdr-mobile-divider{height:1px;background:#ffffff12;margin:0 var(--lib-space-lg, 1.5rem)}.hdr-mobile-actions{padding:var(--lib-space-lg, 1.5rem);display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem)}.hdr-mobile-cta{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;background:var(--color-kaki-500, #B85A1E);color:#fff;border:1px solid var(--color-kaki-500, #B85A1E);padding:0 var(--lib-space-md, 1rem);height:40px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .16s}.hdr-mobile-cta:hover{background:var(--color-kaki-600, #8C4115)}.hdr-mobile-login{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#faf7f440;text-decoration:none;text-align:center;padding:var(--lib-space-xs, .25rem) 0;transition:color .16s}.hdr-mobile-login:hover{color:#faf7f499}.hdr-mobile-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-md, 1rem) var(--lib-space-lg, 1.5rem);border-top:1px solid rgb(255,255,255,.07);font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#faf7f41f}.hdr-mobile-close{background:none;border:none;color:#faf7f433;font-size:.8rem;cursor:pointer;padding:var(--lib-space-xs, .25rem);transition:color .16s}.hdr-mobile-close:hover{color:#faf7f499}@keyframes hdr-drawer-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes hdr-backdrop-in{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.hdr-burger{display:flex}.hdr-mobile-backdrop{display:block}.hdr-nav,.hdr-actions,.hdr-login,.hdr-contact,.hdr-online,.hdr-divider--desktop,.hdr-status--desktop,.hdr-actions--desktop{display:none!important}:host([variant="centered"]) .hdr{display:flex;grid-template-columns:unset}:host([variant="centered"]) .hdr-nav--centered-left{display:none!important}:host([variant="app-bar"]) .hdr-breadcrumbs{max-width:120px;overflow:hidden}:host([variant="app-bar"]) .hdr-breadcrumb-link,:host([variant="app-bar"]) .hdr-breadcrumb-sep{display:none}:host([variant="app-bar"]) .hdr-search{max-width:36px;overflow:hidden;padding:0 var(--lib-space-xs, .25rem)}:host([variant="app-bar"]) .hdr-search input,:host([variant="app-bar"]) .hdr-search-kbd{display:none}.hdr-mega-panel,.hdr-mega-overlay{display:none!important}:host([variant="classic"]) .hdr,:host([variant="dark"]) .hdr,:host([variant="centered"]) .hdr,:host([variant="mega"]) .hdr{height:56px}:host([variant="shrink"]) .hdr{height:56px}:host([variant="shrink"][shrunk]) .hdr{height:44px}}@media(prefers-reduced-motion:reduce){.hdr-mobile-drawer,.hdr-mobile-backdrop{animation:none}}';
+const drawerCss = '@layer tokens,reset,components;@layer reset{:host{display:contents}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@layer components{.dr-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;background:#1a140e00;pointer-events:none;transition:background var(--duration-slow) var(--ease-out)}:host([open]) .dr-backdrop{background:#1a140e73;pointer-events:auto}.dr{position:fixed;z-index:401;background:var(--bg-elevated);display:flex;flex-direction:column;will-change:transform;visibility:hidden;transition:transform var(--duration-slow) var(--ease-out),visibility 0ms var(--duration-slow)}:host([open]) .dr{visibility:visible;transform:translate(0);transition:transform var(--duration-slow) var(--ease-out),visibility 0ms 0ms}.dr-right{top:0;right:0;bottom:0;width:420px;transform:translate(100%);border-left:1px solid var(--border-subtle);box-shadow:-8px 0 48px #1a140e29}.dr-left{top:0;left:0;bottom:0;width:420px;transform:translate(-100%);border-right:1px solid var(--border-subtle);box-shadow:8px 0 48px #1a140e29}.dr-top{top:0;left:0;right:0;height:360px;transform:translateY(-100%);border-bottom:1px solid var(--border-subtle);box-shadow:0 8px 48px #1a140e29}.dr-bottom{bottom:0;left:0;right:0;height:360px;transform:translateY(100%);border-top:1px solid var(--border-subtle);box-shadow:0 -8px 48px #1a140e29}:host([placement="right"][size="sm"]) .dr,:host([placement="left"][size="sm"]) .dr{width:300px}:host([placement="right"][size="lg"]) .dr,:host([placement="left"][size="lg"]) .dr{width:560px}:host([placement="right"][size="xl"]) .dr,:host([placement="left"][size="xl"]) .dr{width:720px}:host([placement="right"][size="full"]) .dr,:host([placement="left"][size="full"]) .dr{width:100%}:host([placement="top"][size="sm"]) .dr,:host([placement="bottom"][size="sm"]) .dr{height:240px}:host([placement="top"][size="lg"]) .dr,:host([placement="bottom"][size="lg"]) .dr{height:480px}:host([placement="top"][size="full"]) .dr,:host([placement="bottom"][size="full"]) .dr{height:100%}.dr-right:before,.dr-left:before{content:"";position:absolute;top:50%;width:3px;height:32px;border-radius:999px;background:var(--color-washi-200);transform:translateY(-50%);pointer-events:none}.dr-right:before{left:var(--lib-space-sm)}.dr-left:before{right:var(--lib-space-sm)}.dr-handle{display:flex;justify-content:center;padding:var(--lib-space-sm) 0 var(--lib-space-xs);flex-shrink:0}.dr-handle-bar{width:36px;height:3px;background:var(--color-washi-300);border-radius:999px}.dr-header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;gap:var(--lib-space-md)}.dr-eyebrow{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-xs)}.dr-title{font-family:var(--lib-font-display);font-size:1.8rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1.1;color:var(--text-primary)}.dr-subtitle{font-family:var(--lib-font-body);font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);margin-top:var(--lib-space-sm);line-height:1.6}.dr-close{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border-subtle);cursor:pointer;color:var(--text-muted);margin-top:var(--lib-space-xs);transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base)}.dr-close:hover{border-color:var(--border-default);background:var(--bg-surface);color:var(--text-primary)}.dr-close:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dr-close svg{width:12px;height:12px;stroke-width:1.6;stroke:currentcolor;fill:none;stroke-linecap:round}.dr-body{flex:1;overflow:hidden auto;padding:var(--lib-space-lg)}.dr-body::-webkit-scrollbar{width:4px}.dr-body::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}.dr-body::-webkit-scrollbar-thumb:hover{background:var(--color-washi-500)}.dr-body::-webkit-scrollbar-track{background:transparent}:host([open]) .dr-body ::slotted(*:nth-child(1)){animation:dr-body-in var(--duration-slow) var(--ease-out) .12s both}:host([open]) .dr-body ::slotted(*:nth-child(2)){animation:dr-body-in var(--duration-slow) var(--ease-out) .16s both}:host([open]) .dr-body ::slotted(*:nth-child(3)){animation:dr-body-in var(--duration-slow) var(--ease-out) .2s both}:host([open]) .dr-body ::slotted(*:nth-child(4)){animation:dr-body-in var(--duration-slow) var(--ease-out) .24s both}:host([open]) .dr-body ::slotted(*:nth-child(n+5)){animation:dr-body-in var(--duration-slow) var(--ease-out) .28s both}@keyframes dr-body-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.dr-footer{border-top:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-lg);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);flex-shrink:0;background:var(--bg-base)}.dr-footer:not(:has(slot[name=footer] *)){display:none}:host([variant="dark"]) .dr{background:var(--color-washi-950);border-color:#ffffff12!important}:host([variant="dark"]) .dr-header{border-bottom-color:#ffffff12}:host([variant="dark"]) .dr-eyebrow{color:#faf7f438}:host([variant="dark"]) .dr-title{color:#faf7f4bf}:host([variant="dark"]) .dr-subtitle{color:#faf7f447}:host([variant="dark"]) .dr-close{border-color:#ffffff1a;color:#faf7f44d}:host([variant="dark"]) .dr-close:hover{border-color:#fff3;background:#ffffff0d;color:#faf7f4b3}:host([variant="dark"]) .dr-right:before,:host([variant="dark"]) .dr-left:before{background:#ffffff14}:host([variant="dark"]) .dr-footer{border-top-color:#ffffff12;background:#ffffff05}:host([variant="dark"]) .dr-handle-bar{background:#ffffff1f}:host([variant="dark"]) .dr-body::-webkit-scrollbar-thumb{background:#faf7f426}:host([variant="dark"]) .dr-body::-webkit-scrollbar-thumb:hover{background:#faf7f44d}:host([variant="kintsugi"]) .dr{border-color:#b85a1e4d!important}:host([variant="kintsugi"]) .dr-header{border-bottom-color:#b85a1e26}:host([variant="kintsugi"]) .dr-eyebrow{color:var(--color-kaki-400)}:host([variant="kintsugi"]) .dr-title{color:var(--color-kaki-600)}:host([variant="kintsugi"]) .dr-close{border-color:#b85a1e40;color:var(--color-kaki-500)}:host([variant="kintsugi"]) .dr-close:hover{background:var(--color-kaki-50);border-color:var(--color-kaki-400)}:host([variant="kintsugi"]) .dr-footer{background:var(--color-kaki-50);border-top-color:#b85a1e1f}:host([variant="kintsugi"]) .dr-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));background-size:100% 200%;animation:kintsugi-seam 3s ease-in-out infinite alternate}:host([variant="kintsugi"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="top"]) .dr:after,:host([variant="kintsugi"][placement="bottom"]) .dr:after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:200% 100%;animation:kintsugi-sweep 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="top"]) .dr:after{bottom:0}:host([variant="kintsugi"][placement="bottom"]) .dr:after{top:0}@keyframes kintsugi-seam{0%{background-position:0 -20%;opacity:.7}50%{background-position:0 50%;opacity:1}to{background-position:0 120%;opacity:.7}}@keyframes kintsugi-sweep{0%{background-position:-200% 0}to{background-position:200% 0}}:host([variant="kintsugi-dark"]) .dr{background:var(--color-washi-950);border-color:#b85a1e33!important}:host([variant="kintsugi-dark"]) .dr-header{border-bottom-color:#b85a1e26}:host([variant="kintsugi-dark"]) .dr-eyebrow{color:#d9723480}:host([variant="kintsugi-dark"]) .dr-title{color:var(--color-kaki-400)}:host([variant="kintsugi-dark"]) .dr-subtitle{color:#faf7f440}:host([variant="kintsugi-dark"]) .dr-close{border-color:#b85a1e33;color:#d9723480}:host([variant="kintsugi-dark"]) .dr-close:hover{background:#b85a1e14;border-color:var(--color-kaki-500);color:var(--color-kaki-400)}:host([variant="kintsugi-dark"]) .dr-footer{background:#b85a1e0a;border-top-color:#b85a1e1f}:host([variant="kintsugi-dark"]) .dr-right:before,:host([variant="kintsugi-dark"]) .dr-left:before{background:#b85a1e26}:host([variant="kintsugi-dark"]) .dr-body::-webkit-scrollbar-thumb{background:#b85a1e66}:host([variant="kintsugi-dark"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.5) 20%,rgb(245,208,138,.7) 50%,rgb(184,90,30,.5) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi-dark"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.5) 20%,rgb(245,208,138,.7) 50%,rgb(184,90,30,.5) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="glitch"]) .dr{animation:dr-glitch-slide 7s steps(1) infinite}:host([variant="glitch"][open]) .dr{animation:dr-flicker 7s steps(1) infinite}:host([variant="glitch"][open][placement="right"]) .dr{animation:dr-glitch-open-r var(--duration-slow) var(--ease-out) forwards,dr-glitch-slide 7s steps(1) infinite .6s}:host([variant="glitch"]) .dr-title{font-family:var(--lib-font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}:host([variant="glitch"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--color-washi-900);animation:dr-seam-glitch 7s steps(1) infinite;pointer-events:none}:host([variant="glitch"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--color-washi-900);animation:dr-seam-glitch 7s steps(1) infinite;pointer-events:none}:host([variant="glitch"]) .dr:before{content:""!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(0,0,0,.03) 3px,rgb(0,0,0,.03) 4px)!important;animation:dr-scanline 7s steps(1) infinite!important;pointer-events:none!important;z-index:10!important;width:auto!important;height:auto!important;border-radius:0!important}.dr-rgb-r,.dr-rgb-b{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9}:host([variant="glitch"]) .dr-rgb-r{background:#d9723414;animation:dr-rgb-r 7s steps(1) infinite;mix-blend-mode:screen}:host([variant="glitch"]) .dr-rgb-b{background:#4e94820f;animation:dr-rgb-b 7s steps(1) infinite 60ms;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr{background:var(--color-washi-950);border-color:#ffffff0f!important;animation:dr-glitch-slide 6s steps(1) infinite,dr-flicker 6s steps(1) infinite}:host([variant="glitch-dark"][open]) .dr{animation:dr-flicker 6s steps(1) infinite}:host([variant="glitch-dark"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:#faf7f44d;animation:dr-seam-glitch 6s steps(1) infinite;pointer-events:none}:host([variant="glitch-dark"]) .dr:before{content:""!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.02) 3px,rgb(255,255,255,.02) 4px)!important;animation:dr-scanline 6s steps(1) infinite!important;pointer-events:none!important;z-index:10!important;width:auto!important;height:auto!important}:host([variant="glitch-dark"]) .dr-rgb-r{background:#d972341f;animation:dr-rgb-r 6s steps(1) infinite;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr-rgb-b{background:#4e94821a;animation:dr-rgb-b 6s steps(1) infinite 80ms;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr-header{border-bottom-color:#ffffff12}:host([variant="glitch-dark"]) .dr-eyebrow{color:#faf7f433}:host([variant="glitch-dark"]) .dr-title{color:#faf7f4bf;font-family:var(--lib-font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}:host([variant="glitch-dark"]) .dr-subtitle{color:#faf7f440}:host([variant="glitch-dark"]) .dr-close{border-color:#ffffff1a;color:#faf7f44d}:host([variant="glitch-dark"]) .dr-close:hover{background:#ffffff0d;border-color:#fff3;color:#faf7f4b3}:host([variant="glitch-dark"]) .dr-footer{background:#ffffff05;border-top-color:#ffffff0f}:host([variant="glitch-dark"]) .dr-body::-webkit-scrollbar-thumb{background:#faf7f426}@keyframes dr-glitch-slide{0%,88%,to{transform:translate(0)}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:translate(-1px)}92%{transform:translate(0)}}@keyframes dr-glitch-open-r{0%{transform:translate(100%)}60%{transform:translate(-3px)}65%{transform:translate(2px)}70%{transform:translate(-1px)}to{transform:translate(0)}}@keyframes dr-seam-glitch{0%,85%,to{opacity:.3;height:100%;top:0}86%{opacity:1;height:60%;top:20%}87%{opacity:.6;height:80%;top:5%}88%{opacity:0}89%{opacity:1;height:40%;top:50%}90%{opacity:.3;height:100%;top:0}}@keyframes dr-scanline{0%{background-position:0 0;opacity:.04}89%{background-position:0 0;opacity:.04}90%{background-position:0 -4px;opacity:.12}91%{background-position:0 3px;opacity:.08}92%{background-position:0 0;opacity:.04}}@keyframes dr-rgb-r{0%,88%,to{opacity:0}89%{opacity:.15;transform:translate(-3px);clip-path:inset(20% 0 40% 0)}90%{opacity:.1;transform:translate(2px);clip-path:inset(60% 0 10% 0)}91%{opacity:0}}@keyframes dr-rgb-b{0%,88%,to{opacity:0}89%{opacity:.12;transform:translate(3px);clip-path:inset(50% 0 20% 0)}90%{opacity:.08;transform:translate(-2px);clip-path:inset(10% 0 60% 0)}91%{opacity:0}}@keyframes dr-flicker{0%,85%,to{opacity:1}89%{opacity:.8}89.5%{opacity:1}90%{opacity:.6}90.5%{opacity:1}}@media(prefers-reduced-motion:reduce){.dr{transition:visibility 0ms}:host([open]) .dr{transition:none}:host([variant="glitch"]) .dr,:host([variant="glitch-dark"]) .dr{animation:none}:host([variant="kintsugi"]) .dr:after,:host([variant="kintsugi-dark"]) .dr:after{animation:none}:host([open]) .dr-body ::slotted(*){animation:none}}}';
 export {
-  headerCss as default
+  drawerCss as default
 };
 //# sourceMappingURL=index246.js.map

package/dist/index247.js

@@ -1,5 +1,271 @@
-const inputStyles = "@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.input-group{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.input-label{font-family:var(--lib-font-mono);font-size:10px;font-weight:var(--weight-regular);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--border-default);display:flex;align-items:center;gap:var(--lib-space-xs)}.input-required{color:var(--color-error);font-size:var(--text-xs)}.input-wrapper{display:flex;align-items:center;gap:var(--lib-space-sm);padding:0 var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-none);min-height:42px;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.input-wrapper:focus-within{border-color:var(--color-washi-800);box-shadow:0 0 0 3px var(--color-ink-10)}input{flex:1;border:none;background:transparent;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);padding:var(--lib-space-sm) 0;outline:none;width:100%}input::placeholder{color:var(--border-strong)}::slotted(*){display:flex;align-items:center;color:var(--text-muted);font-size:var(--text-sm);flex-shrink:0}.input-password-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:var(--lib-space-xs);cursor:pointer;color:var(--text-muted);flex-shrink:0;transition:color var(--duration-base) var(--ease-default)}.input-password-toggle:hover{color:var(--text-primary)}.has-error .input-wrapper{border-color:var(--color-error)}.has-error .input-wrapper:focus-within{border-color:var(--color-error);box-shadow:0 0 0 3px #8c2a1a1a}.has-error .input-label{color:var(--color-error)}.input-error-message{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-error)}.is-disabled .input-wrapper{background:var(--bg-surface);border-color:var(--border-subtle);cursor:not-allowed}.is-disabled input{cursor:not-allowed;color:var(--text-muted)}.is-disabled .input-label{color:var(--text-muted)}}";
+import { html } from "lit";
+const ICON_GITHUB = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>`;
+const ICON_LINKEDIN = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>`;
+const ICON_EMAIL = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`;
+const ICON_RSS = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1" fill="currentColor" stroke="none"/></svg>`;
+const ICON_CHEVRON_DOWN = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+const ICON_ARROW_SM = html`<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>`;
+function renderSocial(ctx) {
+  return html`
+    <footer>
+      <div class="ft-inner">
+
+        <!-- Brand centered -->
+        <div style="text-align:center;margin-bottom:var(--lib-space-xl,2rem);">
+          <div class="ft-brand" style="font-size:2rem;">
+            ${ctx.brandName} <em>${ctx.brandKanji}</em>
+          </div>
+          <span class="ft-brand-sub">${ctx.brandSub}</span>
+        </div>
+
+        <!-- Social grid large -->
+        <div class="ft-social-grid">
+          <a href="${ctx.githubHref}" class="ft-social-cell" aria-label="GitHub" style="color:var(--color-washi-500,#9A8878);">
+            ${ICON_GITHUB}
+            <span class="ft-social-cell-label">GitHub</span>
+          </a>
+          <a href="${ctx.linkedinHref}" class="ft-social-cell" aria-label="LinkedIn" style="color:var(--color-washi-500,#9A8878);">
+            ${ICON_LINKEDIN}
+            <span class="ft-social-cell-label">LinkedIn</span>
+          </a>
+          <a href="mailto:${ctx.email}" class="ft-social-cell accent" aria-label="Email" style="color:var(--color-kaki-400,#D97234);">
+            ${ICON_EMAIL}
+            <span class="ft-social-cell-label">Email</span>
+          </a>
+          <a href="${ctx.rssHref}" class="ft-social-cell" aria-label="RSS" style="color:var(--color-washi-500,#9A8878);">
+            ${ICON_RSS}
+            <span class="ft-social-cell-label">RSS</span>
+          </a>
+        </div>
+
+        <!-- Nav + copyright -->
+        <div class="ft-nav-row">
+          <ul class="ft-nav-links">
+            ${(ctx.navLinks ?? []).map((link) => html`
+              <li>
+                <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+              </li>
+            `)}
+          </ul>
+          <p class="ft-copyright">© ${ctx.year} · ${ctx.brandName} DS · ${ctx.location}</p>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderAccordion(ctx) {
+  return html`
+    <footer>
+      <div class="ft-inner" style="max-width:480px;">
+
+        <!-- Brand + social row -->
+        <div class="ft-acc-brand-row">
+          <div class="ft-brand-dark">
+            ${ctx.brandName} <em>${ctx.brandKanji}</em>
+          </div>
+          <div class="ft-social-mini">
+            <a href="${ctx.githubHref}" class="ft-social-mini-btn" aria-label="GitHub">
+              ${ICON_GITHUB}
+            </a>
+            <a href="${ctx.linkedinHref}" class="ft-social-mini-btn" aria-label="LinkedIn">
+              ${ICON_LINKEDIN}
+            </a>
+            <a href="mailto:${ctx.email}" class="ft-social-mini-btn" aria-label="Email">
+              ${ICON_EMAIL}
+            </a>
+          </div>
+        </div>
+
+        <!-- Accordion columns -->
+        ${(ctx.columns ?? []).map((col) => html`
+          <div class="ft-acc-item">
+            <button
+              class="ft-acc-trigger"
+              @click=${(e) => ctx._toggleAccordion(e.currentTarget)}
+              aria-expanded="false"
+            >
+              ${col.heading}
+              <span class="ft-acc-arrow">${ICON_CHEVRON_DOWN}</span>
+            </button>
+            <div class="ft-acc-body">
+              <div class="ft-acc-body-inner">
+                ${(col.links ?? []).map((link) => html`<a href="${link.href}">${link.label}</a>`)}
+              </div>
+            </div>
+          </div>
+        `)}
+
+        <!-- Bottom bar -->
+        <div class="ft-bottom" style="border-top-color:rgba(255,255,255,.06);">
+          <p class="ft-copyright">© ${ctx.year} · ${ctx.brandName} · MIT</p>
+          <div style="display:flex;gap:var(--lib-space-md,1rem);">
+            ${(ctx.legalLinks ?? []).map((link) => html`
+              <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+            `)}
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderKintsugi(ctx) {
+  return html`
+    <footer style="position:relative;">
+
+      <!-- Gold seam -->
+      <div class="ft-kintsugi-seam" aria-hidden="true"></div>
+
+      <!-- Ring ornament -->
+      <div class="ft-kintsugi-ring" aria-hidden="true">
+        <div class="ft-kintsugi-ring-track"></div>
+        <span class="ft-kintsugi-symbol">✦</span>
+      </div>
+
+      <div class="ft-inner" style="padding-top:var(--lib-space-xl,2rem);">
+
+        <!-- Brand centered -->
+        <div style="text-align:center;margin-bottom:var(--lib-space-lg,1.5rem);">
+          <div class="ft-brand-dark" style="font-size:1.75rem;">
+            ${ctx.brandName} <em>${ctx.brandKanji}</em>
+          </div>
+          <span style="font-family:var(--lib-font-mono,'DM Mono',monospace);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,247,244,.18);display:block;margin-top:.375rem;">
+            ${ctx.brandSub}
+          </span>
+        </div>
+
+        <!-- Nav columns -->
+        <div class="ft-kintsugi-grid">
+          ${(ctx.columns ?? []).map((col) => html`
+            <div>
+              <div class="ft-kintsugi-col-head">${col.heading}</div>
+              <ul class="ft-kintsugi-col-links">
+                ${(col.links ?? []).map((link) => html`
+                  <li>
+                    <a href="${link.href}">
+                      <span class="ft-kintsugi-arrow">›</span>
+                      ${link.label}
+                    </a>
+                  </li>
+                `)}
+              </ul>
+            </div>
+          `)}
+        </div>
+
+        <!-- Bottom bar -->
+        <div class="ft-bottom" style="border-top-color:rgba(255,255,255,.06);">
+          <p class="ft-copyright">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE</p>
+          <div style="display:flex;gap:var(--lib-space-md,1rem);">
+            ${(ctx.legalLinks ?? []).map((link) => html`
+              <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+            `)}
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderGlitch(ctx) {
+  return html`
+    <footer style="position:relative;overflow:hidden;">
+
+      <!-- Texture layers -->
+      <div class="ft-glitch-scanlines" aria-hidden="true"></div>
+      <div class="ft-glitch-noise" aria-hidden="true"></div>
+
+      <div class="ft-inner">
+
+        <div class="ft-glitch-grid">
+
+          <!-- Col 1: brand + status -->
+          <div>
+            <!-- Status indicators -->
+            <div style="margin-bottom:var(--lib-space-md,1rem);">
+              <div class="ft-status-row">
+                <span class="ft-status-dot online"></span>
+                <span class="ft-status-text">System · online</span>
+              </div>
+              <div class="ft-status-row">
+                <span class="ft-status-dot pending"></span>
+                <span class="ft-status-text">Build · pending deploy</span>
+              </div>
+            </div>
+
+            <h2 class="ft-glitch-head">
+              ${ctx.brandName}<br>
+              <em>${ctx.brandKanji}</em><span class="ft-glitch-cursor"></span>
+            </h2>
+
+            <p class="ft-glitch-sub">
+              Design System · ${ctx.location}<br>
+              v${ctx.version} · ${ctx.year}
+            </p>
+          </div>
+
+          <!-- Col 2: modules -->
+          <div>
+            <div class="ft-glitch-modules-head">// modules</div>
+            <div class="ft-glitch-modules-links">
+              ${(ctx.navLinks ?? []).map((link) => html`
+                <a href="${link.href}">
+                  <span style="color:var(--color-kaki-400,#D97234);opacity:.6;">${ICON_ARROW_SM}</span>
+                  ${link.label}
+                </a>
+              `)}
+            </div>
+          </div>
+
+          <!-- Col 3: runtime -->
+          <div>
+            <div class="ft-glitch-modules-head">// runtime</div>
+            <div class="ft-glitch-runtime">
+              ${(ctx.runtimeLines ?? []).map((line) => html`
+                <div>
+                  <span class="key">${line.key.padEnd(5, " ")}</span>
+                  ${line.value.includes("0") && line.key === "deps" ? html`<span class="celadon">${line.value}</span>` : line.value}
+                </div>
+              `)}
+            </div>
+          </div>
+
+        </div>
+
+        <!-- Bottom mono bar -->
+        <div class="ft-bottom" style="border-top-color:rgba(255,255,255,.06);">
+          <p class="ft-copyright">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE · node ${ctx.nodeVersion}</p>
+          <div style="display:flex;gap:var(--lib-space-md,1rem);">
+            ${(ctx.legalLinks ?? []).map((link) => html`
+              <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+            `)}
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderFooter(ctx) {
+  switch (ctx.variant) {
+    case "social":
+      return renderSocial(ctx);
+    case "accordion":
+      return renderAccordion(ctx);
+    case "kintsugi":
+      return renderKintsugi(ctx);
+    case "glitch":
+      return renderGlitch(ctx);
+    default:
+      return renderSocial(ctx);
+  }
+}
 export {
-  inputStyles as default
+  renderAccordion,
+  renderFooter,
+  renderGlitch,
+  renderKintsugi,
+  renderSocial
 };
 //# sourceMappingURL=index247.js.map

package/dist/index247.js.map

@@ -1 +1 @@
-{"version":3,"file":"index247.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index247.js","sources":["../src/components/organisms/footer/lib-footer.html.ts"],"sourcesContent":["import { html, type TemplateResult } from 'lit';\nimport type { LibFooter } from './lib-footer.component';\n\n/* ── SVG helpers inline ── */\nconst ICON_GITHUB = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22\"/></svg>`;\nconst ICON_LINKEDIN = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z\"/><circle cx=\"4\" cy=\"4\" r=\"2\"/></svg>`;\nconst ICON_EMAIL = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"/><polyline points=\"22,6 12,13 2,6\"/></svg>`;\nconst ICON_RSS = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M4 11a9 9 0 019 9\"/><path d=\"M4 4a16 16 0 0116 16\"/><circle cx=\"5\" cy=\"19\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/></svg>`;\nconst ICON_CHEVRON_DOWN = html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>`;\nconst ICON_ARROW_SM = html`<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/><polyline points=\"12 5 19 12 12 19\"/></svg>`;\n\n/* ────────────────────────────────────────────────────────────\n   01 · SOCIAL PROMINENT\n   ──────────────────────────────────────────────────────────── */\nexport function renderSocial(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer>\n      <div class=\"ft-inner\">\n\n        <!-- Brand centered -->\n        <div style=\"text-align:center;margin-bottom:var(--lib-space-xl,2rem);\">\n          <div class=\"ft-brand\" style=\"font-size:2rem;\">\n            ${ctx.brandName} <em>${ctx.brandKanji}</em>\n          </div>\n          <span class=\"ft-brand-sub\">${ctx.brandSub}</span>\n        </div>\n\n        <!-- Social grid large -->\n        <div class=\"ft-social-grid\">\n          <a href=\"${ctx.githubHref}\" class=\"ft-social-cell\" aria-label=\"GitHub\" style=\"color:var(--color-washi-500,#9A8878);\">\n            ${ICON_GITHUB}\n            <span class=\"ft-social-cell-label\">GitHub</span>\n          </a>\n          <a href=\"${ctx.linkedinHref}\" class=\"ft-social-cell\" aria-label=\"LinkedIn\" style=\"color:var(--color-washi-500,#9A8878);\">\n            ${ICON_LINKEDIN}\n            <span class=\"ft-social-cell-label\">LinkedIn</span>\n          </a>\n          <a href=\"mailto:${ctx.email}\" class=\"ft-social-cell accent\" aria-label=\"Email\" style=\"color:var(--color-kaki-400,#D97234);\">\n            ${ICON_EMAIL}\n            <span class=\"ft-social-cell-label\">Email</span>\n          </a>\n          <a href=\"${ctx.rssHref}\" class=\"ft-social-cell\" aria-label=\"RSS\" style=\"color:var(--color-washi-500,#9A8878);\">\n            ${ICON_RSS}\n            <span class=\"ft-social-cell-label\">RSS</span>\n          </a>\n        </div>\n\n        <!-- Nav + copyright -->\n        <div class=\"ft-nav-row\">\n          <ul class=\"ft-nav-links\">\n            ${(ctx.navLinks ?? []).map(link => html`\n              <li>\n                <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n              </li>\n            `)}\n          </ul>\n          <p class=\"ft-copyright\">© ${ctx.year} · ${ctx.brandName} DS · ${ctx.location}</p>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   02 · ACCORDION MOBILE (dark)\n   ──────────────────────────────────────────────────────────── */\nexport function renderAccordion(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer>\n      <div class=\"ft-inner\" style=\"max-width:480px;\">\n\n        <!-- Brand + social row -->\n        <div class=\"ft-acc-brand-row\">\n          <div class=\"ft-brand-dark\">\n            ${ctx.brandName} <em>${ctx.brandKanji}</em>\n          </div>\n          <div class=\"ft-social-mini\">\n            <a href=\"${ctx.githubHref}\" class=\"ft-social-mini-btn\" aria-label=\"GitHub\">\n              ${ICON_GITHUB}\n            </a>\n            <a href=\"${ctx.linkedinHref}\" class=\"ft-social-mini-btn\" aria-label=\"LinkedIn\">\n              ${ICON_LINKEDIN}\n            </a>\n            <a href=\"mailto:${ctx.email}\" class=\"ft-social-mini-btn\" aria-label=\"Email\">\n              ${ICON_EMAIL}\n            </a>\n          </div>\n        </div>\n\n        <!-- Accordion columns -->\n        ${(ctx.columns ?? []).map(col => html`\n          <div class=\"ft-acc-item\">\n            <button\n              class=\"ft-acc-trigger\"\n              @click=${(e: Event):void => ctx._toggleAccordion(e.currentTarget as HTMLElement)}\n              aria-expanded=\"false\"\n            >\n              ${col.heading}\n              <span class=\"ft-acc-arrow\">${ICON_CHEVRON_DOWN}</span>\n            </button>\n            <div class=\"ft-acc-body\">\n              <div class=\"ft-acc-body-inner\">\n                ${(col.links ?? []).map(link => html`<a href=\"${link.href}\">${link.label}</a>`)}\n              </div>\n            </div>\n          </div>\n        `)}\n\n        <!-- Bottom bar -->\n        <div class=\"ft-bottom\" style=\"border-top-color:rgba(255,255,255,.06);\">\n          <p class=\"ft-copyright\">© ${ctx.year} · ${ctx.brandName} · MIT</p>\n          <div style=\"display:flex;gap:var(--lib-space-md,1rem);\">\n            ${(ctx.legalLinks ?? []).map(link => html`\n              <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n            `)}\n          </div>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   03 · KINTSUGI (dark + gold seam)\n   ──────────────────────────────────────────────────────────── */\nexport function renderKintsugi(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer style=\"position:relative;\">\n\n      <!-- Gold seam -->\n      <div class=\"ft-kintsugi-seam\" aria-hidden=\"true\"></div>\n\n      <!-- Ring ornament -->\n      <div class=\"ft-kintsugi-ring\" aria-hidden=\"true\">\n        <div class=\"ft-kintsugi-ring-track\"></div>\n        <span class=\"ft-kintsugi-symbol\">✦</span>\n      </div>\n\n      <div class=\"ft-inner\" style=\"padding-top:var(--lib-space-xl,2rem);\">\n\n        <!-- Brand centered -->\n        <div style=\"text-align:center;margin-bottom:var(--lib-space-lg,1.5rem);\">\n          <div class=\"ft-brand-dark\" style=\"font-size:1.75rem;\">\n            ${ctx.brandName} <em>${ctx.brandKanji}</em>\n          </div>\n          <span style=\"font-family:var(--lib-font-mono,'DM Mono',monospace);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,247,244,.18);display:block;margin-top:.375rem;\">\n            ${ctx.brandSub}\n          </span>\n        </div>\n\n        <!-- Nav columns -->\n        <div class=\"ft-kintsugi-grid\">\n          ${(ctx.columns ?? []).map(col => html`\n            <div>\n              <div class=\"ft-kintsugi-col-head\">${col.heading}</div>\n              <ul class=\"ft-kintsugi-col-links\">\n                ${(col.links ?? []).map(link => html`\n                  <li>\n                    <a href=\"${link.href}\">\n                      <span class=\"ft-kintsugi-arrow\">›</span>\n                      ${link.label}\n                    </a>\n                  </li>\n                `)}\n              </ul>\n            </div>\n          `)}\n        </div>\n\n        <!-- Bottom bar -->\n        <div class=\"ft-bottom\" style=\"border-top-color:rgba(255,255,255,.06);\">\n          <p class=\"ft-copyright\">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE</p>\n          <div style=\"display:flex;gap:var(--lib-space-md,1rem);\">\n            ${(ctx.legalLinks ?? []).map(link => html`\n              <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n            `)}\n          </div>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   04 · GLITCH TERMINAL (dark + scanlines + noise)\n   ──────────────────────────────────────────────────────────── */\nexport function renderGlitch(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer style=\"position:relative;overflow:hidden;\">\n\n      <!-- Texture layers -->\n      <div class=\"ft-glitch-scanlines\" aria-hidden=\"true\"></div>\n      <div class=\"ft-glitch-noise\" aria-hidden=\"true\"></div>\n\n      <div class=\"ft-inner\">\n\n        <div class=\"ft-glitch-grid\">\n\n          <!-- Col 1: brand + status -->\n          <div>\n            <!-- Status indicators -->\n            <div style=\"margin-bottom:var(--lib-space-md,1rem);\">\n              <div class=\"ft-status-row\">\n                <span class=\"ft-status-dot online\"></span>\n                <span class=\"ft-status-text\">System · online</span>\n              </div>\n              <div class=\"ft-status-row\">\n                <span class=\"ft-status-dot pending\"></span>\n                <span class=\"ft-status-text\">Build · pending deploy</span>\n              </div>\n            </div>\n\n            <h2 class=\"ft-glitch-head\">\n              ${ctx.brandName}<br>\n              <em>${ctx.brandKanji}</em><span class=\"ft-glitch-cursor\"></span>\n            </h2>\n\n            <p class=\"ft-glitch-sub\">\n              Design System · ${ctx.location}<br>\n              v${ctx.version} · ${ctx.year}\n            </p>\n          </div>\n\n          <!-- Col 2: modules -->\n          <div>\n            <div class=\"ft-glitch-modules-head\">// modules</div>\n            <div class=\"ft-glitch-modules-links\">\n              ${(ctx.navLinks ?? []).map(link => html`\n                <a href=\"${link.href}\">\n                  <span style=\"color:var(--color-kaki-400,#D97234);opacity:.6;\">${ICON_ARROW_SM}</span>\n                  ${link.label}\n                </a>\n              `)}\n            </div>\n          </div>\n\n          <!-- Col 3: runtime -->\n          <div>\n            <div class=\"ft-glitch-modules-head\">// runtime</div>\n            <div class=\"ft-glitch-runtime\">\n              ${(ctx.runtimeLines ?? []).map(line => html`\n                <div>\n                  <span class=\"key\">${line.key.padEnd(5, '\\u00A0')}</span>\n                  ${line.value.includes('0') && line.key === 'deps'\n                    ? html`<span class=\"celadon\">${line.value}</span>`\n                    : line.value\n                  }\n                </div>\n              `)}\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Bottom mono bar -->\n        <div class=\"ft-bottom\" style=\"border-top-color:rgba(255,255,255,.06);\">\n          <p class=\"ft-copyright\">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE · node ${ctx.nodeVersion}</p>\n          <div style=\"display:flex;gap:var(--lib-space-md,1rem);\">\n            ${(ctx.legalLinks ?? []).map(link => html`\n              <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n            `)}\n          </div>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   Dispatcher — decide qué template renderizar\n   ──────────────────────────────────────────────────────────── */\nexport function renderFooter(ctx: LibFooter): TemplateResult {\n  switch (ctx.variant) {\n    case 'social':    return renderSocial(ctx);\n    case 'accordion': return renderAccordion(ctx);\n    case 'kintsugi':  return renderKintsugi(ctx);\n    case 'glitch':    return renderGlitch(ctx);\n    default:          return renderSocial(ctx);\n  }\n}"],"names":[],"mappings":";AAIA,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,oBAAoB;AAC1B,MAAM,gBAAgB;AAKf,SAAS,aAAa,KAAgC;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOK,IAAI,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA,uCAEV,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,qBAK9B,IAAI,UAAU;AAAA,cACrB,WAAW;AAAA;AAAA;AAAA,qBAGJ,IAAI,YAAY;AAAA,cACvB,aAAa;AAAA;AAAA;AAAA,4BAGC,IAAI,KAAK;AAAA,cACvB,UAAU;AAAA;AAAA;AAAA,qBAGH,IAAI,OAAO;AAAA,cAClB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQP,IAAI,YAAY,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA;AAAA,2BAEpB,KAAK,IAAI,0BAA0B,KAAK,KAAK;AAAA;AAAA,aAE3D,CAAC;AAAA;AAAA,sCAEwB,IAAI,IAAI,MAAM,IAAI,SAAS,SAAS,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtF;AAKO,SAAS,gBAAgB,KAAgC;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOK,IAAI,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA;AAAA,uBAG1B,IAAI,UAAU;AAAA,gBACrB,WAAW;AAAA;AAAA,uBAEJ,IAAI,YAAY;AAAA,gBACvB,aAAa;AAAA;AAAA,8BAEC,IAAI,KAAK;AAAA,gBACvB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMf,IAAI,WAAW,CAAA,GAAI,IAAI,CAAA,QAAO;AAAA;AAAA;AAAA;AAAA,uBAIlB,CAAC,MAAkB,IAAI,iBAAiB,EAAE,aAA4B,CAAC;AAAA;AAAA;AAAA,gBAG9E,IAAI,OAAO;AAAA,2CACgB,iBAAiB;AAAA;AAAA;AAAA;AAAA,mBAIzC,IAAI,SAAS,CAAA,GAAI,IAAI,CAAA,SAAQ,gBAAgB,KAAK,IAAI,KAAK,KAAK,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,SAItF,CAAC;AAAA;AAAA;AAAA;AAAA,sCAI4B,IAAI,IAAI,MAAM,IAAI,SAAS;AAAA;AAAA,eAElD,IAAI,cAAc,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA,yBACxB,KAAK,IAAI,0BAA0B,KAAK,KAAK;AAAA,aACzD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd;AAKO,SAAS,eAAe,KAAgC;AAC7D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAiBK,IAAI,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA;AAAA,cAGnC,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMb,IAAI,WAAW,CAAA,GAAI,IAAI,CAAA,QAAO;AAAA;AAAA,kDAEO,IAAI,OAAO;AAAA;AAAA,mBAE1C,IAAI,SAAS,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA;AAAA,+BAEjB,KAAK,IAAI;AAAA;AAAA,wBAEhB,KAAK,KAAK;AAAA;AAAA;AAAA,iBAGjB,CAAC;AAAA;AAAA;AAAA,WAGP,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yCAK6B,IAAI,IAAI,MAAM,IAAI,UAAU,aAAa;AAAA;AAAA,eAEnE,IAAI,cAAc,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA,yBACxB,KAAK,IAAI,0BAA0B,KAAK,KAAK;AAAA,aACzD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd;AAKO,SAAS,aAAa,KAAgC;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBA0BO,IAAI,SAAS;AAAA,oBACT,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA,gCAIF,IAAI,QAAQ;AAAA,iBAC3B,IAAI,OAAO,MAAM,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQzB,IAAI,YAAY,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA,2BACtB,KAAK,IAAI;AAAA,kFAC8C,aAAa;AAAA,oBAC3E,KAAK,KAAK;AAAA;AAAA,eAEf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQC,IAAI,gBAAgB,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA;AAAA,sCAEf,KAAK,IAAI,OAAO,GAAG,GAAQ,CAAC;AAAA,oBAC9C,KAAK,MAAM,SAAS,GAAG,KAAK,KAAK,QAAQ,SACvC,6BAA6B,KAAK,KAAK,YACvC,KAAK,KACT;AAAA;AAAA,eAEH,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAQyB,IAAI,IAAI,MAAM,IAAI,UAAU,aAAa,yBAAyB,IAAI,WAAW;AAAA;AAAA,eAE3G,IAAI,cAAc,CAAA,GAAI,IAAI,CAAA,SAAQ;AAAA,yBACxB,KAAK,IAAI,0BAA0B,KAAK,KAAK;AAAA,aACzD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd;AAKO,SAAS,aAAa,KAAgC;AAC3D,UAAQ,IAAI,SAAA;AAAA,IACV,KAAK;AAAa,aAAO,aAAa,GAAG;AAAA,IACzC,KAAK;AAAa,aAAO,gBAAgB,GAAG;AAAA,IAC5C,KAAK;AAAa,aAAO,eAAe,GAAG;AAAA,IAC3C,KAAK;AAAa,aAAO,aAAa,GAAG;AAAA,IACzC;AAAkB,aAAO,aAAa,GAAG;AAAA,EAAA;AAE7C;"}

package/dist/index248.js

@@ -1,69 +1,5 @@
-import { nothing, html } from "lit";
-function inputTemplate(props) {
-  const inputType = props.type === "password" && props.showPassword ? "text" : props.type;
-  return html`
-    <div class="input-group ${props.error ? "has-error" : ""} ${props.disabled ? "is-disabled" : ""}">
-
-      ${props.label ? html`
-        <label
-          class="input-label"
-          for="${props.uuid}"
-        >
-          ${props.label}
-          ${props.required ? html`<span class="input-required" aria-hidden="true">*</span>` : nothing}
-        </label>
-      ` : nothing}
-
-      <div class="input-wrapper">
-        <slot name="prefix"></slot>
-
-        <input
-          id="${props.uuid}"
-          type="${inputType}"
-          placeholder="${props.placeholder}"
-          ?required="${props.required}"
-          ?disabled="${props.disabled}"
-          aria-invalid="${props.error}"
-          aria-describedby="${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}"
-          .value="${props.value}"
-          @input="${props.handleInput}"
-        />
-
-        ${props.type === "password" ? html`
-          <button
-            class="input-password-toggle"
-            type="button"
-            @click="${props.handleTogglePassword}"
-            aria-label="${props.showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}"
-          >
-            ${props.showPassword ? html`
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
-                <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
-                <line x1="1" y1="1" x2="23" y2="23"/>
-              </svg>
-            ` : html`
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                <circle cx="12" cy="12" r="3"/>
-              </svg>
-            `}
-          </button>
-        ` : nothing}
-
-        <slot name="suffix"></slot>
-      </div>
-
-      ${props.error && props.errorMessage ? html`
-        <span class="input-error-message" id="${props.uuid}-error" role="alert">
-          ${props.errorMessage}
-        </span>
-      ` : nothing}
-
-    </div>
-  `;
-}
+const componentCss = `@layer tokens,reset,components;@layer tokens{:host{display:block;--ft-pad-x: var(--lib-space-xl, 2rem);--ft-pad-y: var(--lib-space-xl, 2rem);--ft-max-width: 1200px;--ft-bg: var(--color-washi-50, #FAF7F4);--ft-border: var(--color-washi-200, #E5DDD3);--ft-text: var(--color-washi-900, #221C16);--ft-text-muted: var(--color-washi-400, #B8A99A);--ft-text-faint: var(--color-washi-300, #D3C8BC);--ft-accent: var(--color-kaki-500, #B85A1E);--ft-accent-hover: var(--color-kaki-600, #8C4115);--ft-link: var(--color-washi-400, #B8A99A);--ft-link-hover: var(--color-washi-900, #221C16);--ft-gold-start: rgb(184, 90, 30, .4);--ft-gold-mid: #F5D08A;--ft-gold-end: rgb(184, 90, 30, .4);--ft-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--ft-font-mono: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--ft-dur-base: .22s;--ft-dur-slow: .38s;--ft-ease-out: cubic-bezier(0, 0, .2, 1)}:host([variant="accordion"]),:host([variant="kintsugi"]),:host([variant="glitch"]){--ft-bg: var(--color-washi-950, #120E0A);--ft-border: rgb(255, 255, 255, .07);--ft-text: rgb(250, 247, 244, .85);--ft-text-muted: rgb(250, 247, 244, .35);--ft-text-faint: rgb(250, 247, 244, .12);--ft-link: rgb(250, 247, 244, .22);--ft-link-hover: rgb(250, 247, 244, .85)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none;color:inherit}ul,ol{list-style:none}button{cursor:pointer;background:none;border:none;font-family:inherit}}@layer components{footer{background:var(--ft-bg);border-top:1px solid var(--ft-border)}.ft-inner{max-width:var(--ft-max-width);margin:0 auto;padding:var(--ft-pad-y) var(--ft-pad-x)}.ft-label-mono{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ft-text-muted)}.ft-link-mono{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ft-link);text-decoration:none;transition:color var(--ft-dur-base) var(--ft-ease-out);display:inline-block}.ft-link-mono:hover{color:var(--ft-link-hover)}.ft-brand{font-family:var(--ft-font-display);font-weight:300;letter-spacing:.15em;color:var(--color-washi-800, #3D332A);line-height:1}.ft-brand em{font-style:italic;color:var(--ft-accent)}.ft-brand-sub{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ft-text-muted);margin-top:.375rem;display:block}.ft-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--lib-space-md, 1rem);border-top:1px solid var(--ft-border);padding-top:var(--lib-space-lg, 1.5rem);margin-top:var(--lib-space-lg, 1.5rem)}.ft-copyright{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.12em;color:var(--ft-text-faint)}:host([variant="social"]) footer{background:#fff}.ft-social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-washi-200, #E5DDD3);max-width:640px;margin:0 auto var(--lib-space-xl, 2rem)}.ft-social-cell{background:#fff;padding:var(--lib-space-xl, 2rem) var(--lib-space-lg, 1.5rem);display:flex;flex-direction:column;align-items:center;gap:var(--lib-space-md, 1rem);transition:background var(--ft-dur-base);text-decoration:none}.ft-social-cell:hover{background:var(--color-washi-50, #FAF7F4)}.ft-social-cell.accent:hover{background:var(--color-kaki-50, #FDF3EC)}.ft-social-cell svg{width:22px;height:22px}.ft-social-cell-label{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ft-text-muted)}.ft-social-cell.accent .ft-social-cell-label{color:var(--ft-accent)}.ft-nav-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--lib-space-md, 1rem);border-top:1px solid var(--color-washi-100, #F2EDE6);padding-top:var(--lib-space-lg, 1.5rem)}.ft-nav-links{display:flex;gap:var(--lib-space-lg, 1.5rem)}.ft-acc-brand-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--lib-space-lg, 1.5rem);border-bottom:1px solid var(--ft-border);margin-bottom:var(--lib-space-md, 1rem)}.ft-brand-dark{font-family:var(--ft-font-display);font-weight:300;font-size:1.25rem;letter-spacing:.15em;color:#faf7f48c}.ft-brand-dark em{font-style:italic;color:var(--ft-accent)}.ft-social-mini{display:flex;gap:var(--lib-space-sm, .5rem)}.ft-social-mini-btn{width:32px;height:32px;border:1px solid rgb(255,255,255,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:border-color var(--ft-dur-base);color:#faf7f44d}.ft-social-mini-btn:hover{border-color:#ffffff4d;color:#faf7f4cc}.ft-social-mini-btn svg{width:13px;height:13px;stroke:currentcolor;fill:none;stroke-width:1.6;stroke-linecap:round}.ft-acc-item{border-bottom:1px solid rgb(255,255,255,.06)}.ft-acc-trigger{width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-md, 1rem) 0;cursor:pointer;font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#faf7f459;transition:color var(--ft-dur-base)}.ft-acc-trigger:hover{color:#faf7f4b3}.ft-acc-arrow{width:14px;height:14px;transition:transform var(--ft-dur-base) var(--ft-ease-out);flex-shrink:0}.ft-acc-arrow svg{width:14px;height:14px;stroke:currentcolor;fill:none;stroke-width:1.4;stroke-linecap:round}.ft-acc-body{overflow:hidden;max-height:0;transition:max-height var(--ft-dur-slow) var(--ft-ease-out)}.ft-acc-body-inner{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem);padding-bottom:var(--lib-space-md, 1rem)}.ft-acc-body-inner a{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.1em;color:#faf7f438;text-decoration:none;transition:color var(--ft-dur-base)}.ft-acc-body-inner a:hover{color:var(--ft-accent)}.ft-kintsugi-seam{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ft-gold-start) 15%,var(--ft-accent) 35%,var(--ft-gold-mid) 50%,var(--ft-accent) 65%,var(--ft-gold-end) 85%,transparent);background-size:200% 100%;animation:kintsugi-seam 5s linear infinite}.ft-kintsugi-ring{position:absolute;top:-28px;left:50%;transform:translate(-50%);width:56px;height:56px;display:flex;align-items:center;justify-content:center}.ft-kintsugi-ring-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1px solid transparent;border-top-color:#f5d08a99;border-right-color:#b85a1e4d;animation:kintsugi-ring 8s linear infinite}.ft-kintsugi-symbol{font-family:var(--ft-font-display);font-size:1.25rem;color:#faf7f426}.ft-kintsugi-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--lib-space-xl, 2rem);padding-top:var(--lib-space-xl, 2rem)}.ft-kintsugi-col-head{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#faf7f426;margin-bottom:var(--lib-space-md, 1rem)}.ft-kintsugi-col-links{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem)}.ft-kintsugi-col-links a{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.1em;color:#faf7f438;text-decoration:none;display:flex;align-items:center;gap:var(--lib-space-xs, .25rem);transition:color var(--ft-dur-base)}.ft-kintsugi-col-links a:hover{color:var(--color-kaki-400, #D97234)}.ft-kintsugi-arrow{color:var(--ft-accent);opacity:.6;flex-shrink:0}:host([variant="glitch"]) footer{position:relative;overflow:hidden;animation:glitch-border 7s ease-in-out infinite}.ft-glitch-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(250,247,244,.015) 3px,rgb(250,247,244,.015) 4px);pointer-events:none;animation:scanshift 7s ease-in-out infinite}.ft-glitch-noise{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none}.ft-glitch-cursor{display:inline-block;width:1px;height:.85em;background:var(--ft-accent);vertical-align:middle;margin-left:2px;animation:cursor-blink 1s step-end infinite;opacity:.8}.ft-glitch-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--lib-space-xl, 2rem);padding-top:var(--lib-space-lg, 1.5rem)}.ft-glitch-head{font-family:var(--ft-font-display);font-size:1.5rem;font-weight:300;color:#faf7f466;line-height:1.2;letter-spacing:-.02em;margin-bottom:var(--lib-space-md, 1rem)}.ft-glitch-head em{font-style:italic;color:var(--ft-accent)}.ft-glitch-sub{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.12em;color:#faf7f42e;line-height:2}.ft-glitch-modules-head{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#faf7f426;margin-bottom:var(--lib-space-md, 1rem)}.ft-glitch-modules-links{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem)}.ft-glitch-modules-links a{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.1em;color:#faf7f438;text-decoration:none;display:flex;align-items:center;gap:var(--lib-space-xs, .25rem);transition:color var(--ft-dur-base)}.ft-glitch-modules-links a:hover{color:var(--color-kaki-400, #D97234)}.ft-glitch-runtime{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.08em;color:#faf7f42e;line-height:2.2}.ft-glitch-runtime span.key{color:#faf7f41a}.ft-glitch-runtime span.celadon{color:var(--color-celadon-400, #4E9482)}.ft-status-row{display:flex;align-items:center;gap:var(--lib-space-sm, .5rem);margin-bottom:var(--lib-space-sm, .5rem)}.ft-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ft-status-dot.online{background:var(--color-celadon-400, #4E9482);animation:status-pulse 1.4s ease-in-out infinite}.ft-status-dot.pending{background:var(--color-kaki-400, #D97234);animation:status-pulse 1.4s ease-in-out infinite 1s}.ft-status-text{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.12em;color:#faf7f433}@keyframes kintsugi-seam{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes kintsugi-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glitch-border{0%,88%,to{box-shadow:none;opacity:1}89%{box-shadow:-2px 0 #d9723466,2px 0 #4e94824d;transform:translate(-2px)}90%{box-shadow:2px 0 #d972344d,-2px 0 #4e948233;transform:translate(2px)}91%{box-shadow:none;transform:none}}@keyframes scan-shift{0%,88%,to{opacity:1;transform:none}89%{transform:translateY(-3px);opacity:.7}90%{transform:translateY(2px);opacity:.9}91%{transform:none;opacity:1}}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes cursor-blink{0%,to{opacity:.8}50%{opacity:0}}@media(max-width:768px){.ft-kintsugi-grid{grid-template-columns:1fr 1fr}.ft-glitch-grid{grid-template-columns:1fr}.ft-social-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.ft-kintsugi-grid,.ft-social-grid{grid-template-columns:1fr}}}`;
 export {
-  inputTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index248.js.map

package/dist/index248.js.map

@@ -1 +1 @@
-{"version":3,"file":"index248.js","sources":["../src/components/molecules/input/lib-input.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport interface InputTemplateProps {\n  uuid: string;\n  type: 'text' | 'email' | 'password';\n  label: string;\n  placeholder: string;\n  required: boolean;\n  disabled: boolean;\n  error: boolean;\n  errorMessage: string;\n  value: string;\n  showPassword: boolean;\n  handleInput: (e: InputEvent) => void;\n  handleTogglePassword: () => void;\n}\n\n/**\n * Plantilla base para el componente lib-input.\n * Renderiza un campo de texto con label, slots prefix/suffix y estado de error.\n */\nexport function inputTemplate(props: InputTemplateProps): TemplateResult {\n  const inputType = props.type === 'password' && props.showPassword ? 'text' : props.type;\n\n  return html`\n    <div class=\"input-group ${props.error ? 'has-error' : ''} ${props.disabled ? 'is-disabled' : ''}\">\n\n      ${props.label ? html`\n        <label\n          class=\"input-label\"\n          for=\"${props.uuid}\"\n        >\n          ${props.label}\n          ${props.required ? html`<span class=\"input-required\" aria-hidden=\"true\">*</span>` : nothing}\n        </label>\n      ` : nothing}\n\n      <div class=\"input-wrapper\">\n        <slot name=\"prefix\"></slot>\n\n        <input\n          id=\"${props.uuid}\"\n          type=\"${inputType}\"\n          placeholder=\"${props.placeholder}\"\n          ?required=\"${props.required}\"\n          ?disabled=\"${props.disabled}\"\n          aria-invalid=\"${props.error}\"\n          aria-describedby=\"${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}\"\n          .value=\"${props.value}\"\n          @input=\"${props.handleInput}\"\n        />\n\n        ${props.type === 'password' ? html`\n          <button\n            class=\"input-password-toggle\"\n            type=\"button\"\n            @click=\"${props.handleTogglePassword}\"\n            aria-label=\"${props.showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}\"\n          >\n            ${props.showPassword ? html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"/>\n                <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        ` : nothing}\n\n        <slot name=\"suffix\"></slot>\n      </div>\n\n      ${props.error && props.errorMessage ? html`\n        <span class=\"input-error-message\" id=\"${props.uuid}-error\" role=\"alert\">\n          ${props.errorMessage}\n        </span>\n      ` : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAqBO,SAAS,cAAc,OAA2C;AACvE,QAAM,YAAY,MAAM,SAAS,cAAc,MAAM,eAAe,SAAS,MAAM;AAEnF,SAAO;AAAA,8BACqB,MAAM,QAAQ,cAAc,EAAE,IAAI,MAAM,WAAW,gBAAgB,EAAE;AAAA;AAAA,QAE3F,MAAM,QAAQ;AAAA;AAAA;AAAA,iBAGL,MAAM,IAAI;AAAA;AAAA,YAEf,MAAM,KAAK;AAAA,YACX,MAAM,WAAW,iEAAiE,OAAO;AAAA;AAAA,UAE3F,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMD,MAAM,IAAI;AAAA,kBACR,SAAS;AAAA,yBACF,MAAM,WAAW;AAAA,uBACnB,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,0BACX,MAAM,KAAK;AAAA,8BACP,MAAM,SAAS,MAAM,eAAe,GAAG,MAAM,IAAI,WAAW,OAAO;AAAA,oBAC7E,MAAM,KAAK;AAAA,oBACX,MAAM,WAAW;AAAA;AAAA;AAAA,UAG3B,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA,sBAIhB,MAAM,oBAAoB;AAAA,0BACtB,MAAM,eAAe,uBAAuB,oBAAoB;AAAA;AAAA,cAE5E,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMnB;AAAA;AAAA;AAAA;AAAA;AAAA,aAKH;AAAA;AAAA,YAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKX,MAAM,SAAS,MAAM,eAAe;AAAA,gDACI,MAAM,IAAI;AAAA,YAC9C,MAAM,YAAY;AAAA;AAAA,UAEpB,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index248.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index249.js

@@ -1,35 +1,24 @@
-import { nothing, html } from "lit";
-const DEFAULT_HEADING = {
-  default: "Default",
-  info: "Info",
-  warning: "Warning",
-  error: "Error",
-  success: "Success"
-};
-function alertTemplate(props) {
-  const displayHeading = props.heading || DEFAULT_HEADING[props.type];
+import { html } from "lit";
+function horizontalScrollTemplate(ctx) {
   return html`
-    <div class="alert" role="alert" aria-live="polite">
+    <div class="sticky-wrapper" part="wrapper">
+
+      <div class="horizontal-content" part="content">
+        <slot></slot>
+      </div>
 
-      <div class="alert-content">
-        <p class="alert-title">${displayHeading}</p>
-        <div class="alert-body">
-          <slot></slot>
-        </div>
+      <div class="progress-bar" part="progress-bar" ?hidden="${!ctx.showProgress}">
+        <div class="progress-fill" part="progress-fill"></div>
       </div>
 
-      ${props.closable ? html`
-            <button
-              class="alert-close"
-              type="button"
-              aria-label="Cerrar alerta"
-              @click="${props.handleClose}"
-            >×</button>` : nothing}
+      <span class="counter" part="counter" ?hidden="${!ctx.showProgress}">
+        0%
+      </span>
 
     </div>
   `;
 }
 export {
-  alertTemplate
+  horizontalScrollTemplate
 };
 //# sourceMappingURL=index249.js.map

package/dist/index249.js.map

@@ -1 +1 @@
-{"version":3,"file":"index249.js","sources":["../src/components/molecules/lib-alert/lib-alert.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { AlertTemplateProps, AlertType } from './lib-alert.types';\n\n/** Auto-generated heading per type if none is provided. */\nconst DEFAULT_HEADING: Record<AlertType, string> = {\n  default: 'Default',\n  info:    'Info',\n  warning: 'Warning',\n  error:   'Error',\n  success: 'Success',\n};\n\n/**\n * Template para lib-alert.\n * Estructura: borde izquierdo · [heading DM Mono] · slot (cuerpo) · [botón cerrar]\n */\nexport function alertTemplate(props: AlertTemplateProps): TemplateResult {\n  const displayHeading = props.heading || DEFAULT_HEADING[props.type];\n\n  return html`\n    <div class=\"alert\" role=\"alert\" aria-live=\"polite\">\n\n      <div class=\"alert-content\">\n        <p class=\"alert-title\">${displayHeading}</p>\n        <div class=\"alert-body\">\n          <slot></slot>\n        </div>\n      </div>\n\n      ${props.closable\n        ? html`\n            <button\n              class=\"alert-close\"\n              type=\"button\"\n              aria-label=\"Cerrar alerta\"\n              @click=\"${props.handleClose}\"\n            >×</button>`\n        : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,kBAA6C;AAAA,EACjD,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAMO,SAAS,cAAc,OAA2C;AACvE,QAAM,iBAAiB,MAAM,WAAW,gBAAgB,MAAM,IAAI;AAElE,SAAO;AAAA;AAAA;AAAA;AAAA,iCAIwB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMvC,MAAM,WACJ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKc,MAAM,WAAW;AAAA,2BAE/B,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index249.js","sources":["../src/components/organisms/horizontal-scroll-section/lib-horizontal-scroll-section.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibHorizontalScrollSection } from './lib-horizontal-scroll-section.component';\n\nexport function horizontalScrollTemplate(ctx: LibHorizontalScrollSection): TemplateResult {\n  return html`\n    <div class=\"sticky-wrapper\" part=\"wrapper\">\n\n      <div class=\"horizontal-content\" part=\"content\">\n        <slot></slot>\n      </div>\n\n      <div class=\"progress-bar\" part=\"progress-bar\" ?hidden=\"${!ctx.showProgress}\">\n        <div class=\"progress-fill\" part=\"progress-fill\"></div>\n      </div>\n\n      <span class=\"counter\" part=\"counter\" ?hidden=\"${!ctx.showProgress}\">\n        0%\n      </span>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,yBAAyB,KAAiD;AACxF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAOsD,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA,sDAI1B,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvE;"}

package/dist/index250.js

@@ -1,5 +1,5 @@
-const alertCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.alert{padding:var(--lib-space-md) var(--lib-space-lg);border-left:2px solid;display:flex;gap:var(--lib-space-md);align-items:flex-start;width:100%;transition:opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-default)}.alert-content{flex:1;min-width:0}.alert-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:var(--lib-space-xs);line-height:var(--leading-snug)}.alert-body{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.alert-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;opacity:.5;color:inherit;transition:opacity var(--duration-fast) var(--ease-default);font-size:16px;line-height:1;font-family:var(--lib-font-mono)}.alert-close:hover{opacity:1}:host([type="default"]) .alert,.alert{background:var(--bg-surface);border-color:var(--border-strong)}:host([type="default"]) .alert-title{color:var(--text-secondary)}:host([type="default"]) .alert-body{color:var(--text-secondary)}:host([type="info"]) .alert{background:var(--color-celadon-50);border-color:var(--color-celadon-400)}:host([type="info"]) .alert-title{color:var(--color-celadon-600)}:host([type="info"]) .alert-body{color:var(--color-celadon-500)}:host([type="warning"]) .alert{background:#fffbf0;border-color:var(--color-warning)}:host([type="warning"]) .alert-title{color:var(--color-warning)}:host([type="warning"]) .alert-body{color:#6b5010}:host([type="error"]) .alert{background:#fff8f7;border-color:var(--color-error)}:host([type="error"]) .alert-title{color:var(--color-error)}:host([type="error"]) .alert-body{color:#6b2015}:host([type="success"]) .alert{background:#f5faf6;border-color:var(--color-success)}:host([type="success"]) .alert-title{color:var(--color-success)}:host([type="success"]) .alert-body{color:#1e4a2a}:host([glass]) .alert{background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);border-left-width:2px;box-shadow:var(--lib-glass-shadow);position:relative;overflow:hidden}:host([glass]) .alert:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-glass-shine);pointer-events:none}:host([glass]) .alert-title,:host([glass]) .alert-body{color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow);position:relative;z-index:1}:host([glass]) .alert-close{color:var(--lib-glass-text);position:relative;z-index:1}}';
+const sectionCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{height:var(--_scroll-height, 300vh)}.sticky-wrapper{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;background:var(--bg-base)}.horizontal-content{display:flex;gap:var(--_gap, calc(var(--lib-space-xl) * 2));padding:0 calc(var(--_padding-inline, 10) * 1vw);will-change:transform}::slotted(*){flex-shrink:0}.progress-bar{position:absolute;bottom:var(--lib-space-xl);left:calc(var(--_padding-inline, 10) * 1vw);width:calc(100% - (var(--_padding-inline, 10) * 2vw));height:1px;background:var(--border-subtle)}.progress-fill{height:100%;width:0%;background:var(--color-washi-900);transition:width 80ms linear}.counter{position:absolute;bottom:calc(var(--lib-space-xl) + 16px);right:calc(var(--_padding-inline, 10) * 1vw);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);-webkit-user-select:none;user-select:none}}";
 export {
-  alertCss as default
+  sectionCss as default
 };
 //# sourceMappingURL=index250.js.map