@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index310.js

@@ -1,84 +1,5 @@
-import { nothing, html } from "lit";
-function panelWrapClass(p) {
-  const classes = ["mo-panel-wrap"];
-  if (p.size !== "md") classes.push(`mo-${p.size}`);
-  if (p._animate === "slide-up") classes.push("mo-slide-up");
-  if (p._animate === "slide-down") classes.push("mo-slide-down");
-  if (p.dark) classes.push("mo-dark");
-  return classes.join(" ");
-}
-function panelClass(variant) {
-  const classes = ["mo-panel"];
-  if (variant === "editorial") classes.push("is-editorial");
-  if (variant === "danger") classes.push("is-danger");
-  return classes.join(" ");
-}
-function iconClass(tone) {
-  const classes = ["mo-header-icon"];
-  if (tone !== "default") classes.push(`is-${tone}`);
-  return classes.join(" ");
-}
-function modalTemplate(p) {
-  return html`
-    <div
-      class="mo-backdrop"
-      part="backdrop"
-      @click="${p.onBackdropClick}"
-    >
-      <div
-        class="${panelWrapClass(p)}"
-        part="panel-wrap"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="mo-title"
-        @click="${(e) => e.stopPropagation()}"
-      >
-        <div class="${panelClass(p.variant)}" part="panel">
-
-          <!-- ── HEADER ── -->
-          <div class="mo-header" part="header">
-
-            <!-- Ícono opcional — tone prop activa el wrapper -->
-            ${p.iconTone !== null ? html`
-              <div class="${iconClass(p.iconTone)}" part="icon">
-                <slot name="icon"></slot>
-              </div>
-            ` : nothing}
-
-            <!-- Título y subtítulo -->
-            <div class="mo-header-text">
-              <h2 id="mo-title" class="mo-title">${p.heading}</h2>
-              ${p.subtitle ? html`<p class="mo-subtitle">${p.subtitle}</p>` : nothing}
-            </div>
-
-            <!-- Botón de cierre -->
-            <button
-              class="mo-close"
-              part="close-btn"
-              aria-label="Cerrar"
-              @click="${p.onClose}"
-            >×</button>
-          </div>
-
-          <!-- ── BODY — slot default ── -->
-          <div class="mo-body" part="body">
-            <slot></slot>
-          </div>
-
-          <!-- ── FOOTER ── -->
-          <div class="mo-footer" part="footer">
-            ${p.footerInfo ? html`
-              <span class="mo-footer-info">${p.footerInfo}</span>
-            ` : nothing}
-            <slot name="footer"></slot>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  `;
-}
+const kbdCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:baseline}*,*:before,*:after{box-sizing:border-box}}@layer components{.kbd{display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-weight:var(--weight-regular);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:default;vertical-align:baseline;line-height:1;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);border-bottom-width:3px;border-radius:var(--radius-sm);box-shadow:0 1px 0 0 var(--color-washi-300),inset 0 1px #fffc;transition:transform var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}.kbd.is-pressed,.kbd:active{transform:translateY(1px);border-bottom-width:1px;box-shadow:0 0 0 0 transparent,inset 0 1px 2px var(--color-ink-20);background:var(--bg-surface)}:host([size="lg"]) .kbd.is-pressed,:host([size="lg"]) .kbd:active{transform:translateY(2px);border-bottom-width:2px}:host([size="xs"]) .kbd{font-size:9px;letter-spacing:.04em;padding:1px 5px;min-width:18px;height:18px;border-bottom-width:2px}:host([size="sm"]) .kbd{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:2px var(--lib-space-sm);min-width:22px;height:22px}:host([size="md"]) .kbd{font-size:var(--text-sm);letter-spacing:var(--tracking-wide);padding:3px var(--lib-space-sm);min-width:28px;height:28px}:host([size="lg"]) .kbd{font-size:var(--text-base);letter-spacing:var(--tracking-wide);padding:var(--lib-space-sm) var(--lib-space-md);min-width:36px;height:36px;border-bottom-width:4px}:host([variant="dark"]) .kbd{background:var(--color-washi-800);color:var(--color-washi-100);border-color:var(--color-washi-900);border-bottom-color:var(--color-washi-950);box-shadow:0 1px 0 0 var(--color-washi-950),inset 0 1px #ffffff14}:host([variant="dark"]) .kbd.is-pressed,:host([variant="dark"]) .kbd:active{background:var(--color-washi-900);box-shadow:inset 0 1px 3px #0006}:host([variant="ghost"]) .kbd{background:transparent;color:var(--text-secondary);border-color:var(--border-default);border-bottom-color:var(--border-strong, var(--color-washi-500));box-shadow:none}:host([variant="ghost"]) .kbd.is-pressed,:host([variant="ghost"]) .kbd:active{background:var(--bg-surface)}:host([variant="kaki"]) .kbd{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-400);border-bottom-color:var(--color-kaki-500);box-shadow:0 1px 0 0 var(--color-kaki-500),inset 0 1px #fff9}:host([variant="celadon"]) .kbd{background:var(--color-celadon-100);color:var(--color-celadon-600);border-color:var(--color-celadon-500);border-bottom-color:var(--color-celadon-600);box-shadow:0 1px 0 0 var(--color-celadon-600),inset 0 1px #ffffff80}@media(prefers-reduced-motion:reduce){.kbd{transition:none}}}';
 export {
-  modalTemplate
+  kbdCss as default
 };
 //# sourceMappingURL=index310.js.map

package/dist/index310.js.map

@@ -1 +1 @@
-{"version":3,"file":"index310.js","sources":["../src/components/molecules/modal/lib-modal.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { ModalAnimate, ModalIconTone, ModalSize, ModalVariant } from './lib-modal.types';\n\nexport interface ModalTemplateProps {\n  /* Estado */\n  open:             boolean;\n  /* Panel */\n  size:             ModalSize;\n  variant:          ModalVariant;\n  _animate:          ModalAnimate;\n  dark:             boolean;\n  /* Header */\n  heading:          string;\n  subtitle:         string;\n  iconTone:         ModalIconTone | null;\n  /* Footer */\n  footerInfo:       string;\n  /* Handlers */\n  onClose:          () => void;\n  onBackdropClick:  (e: MouseEvent) => void;\n}\n\n/** Clases del contenedor del panel (.mo-panel-wrap). */\nfunction panelWrapClass(p: ModalTemplateProps): string {\n  const classes = ['mo-panel-wrap'];\n  if (p.size !== 'md')         classes.push(`mo-${p.size}`);\n  if (p._animate === 'slide-up')   classes.push('mo-slide-up');\n  if (p._animate === 'slide-down') classes.push('mo-slide-down');\n  if (p.dark)                  classes.push('mo-dark');\n  return classes.join(' ');\n}\n\n/** Clases del panel (.mo-panel). */\nfunction panelClass(variant: ModalVariant): string {\n  const classes = ['mo-panel'];\n  if (variant === 'editorial') classes.push('is-editorial');\n  if (variant === 'danger')    classes.push('is-danger');\n  return classes.join(' ');\n}\n\n/** Clases del ícono de header. */\nfunction iconClass(tone: ModalIconTone): string {\n  const classes = ['mo-header-icon'];\n  if (tone !== 'default') classes.push(`is-${tone}`);\n  return classes.join(' ');\n}\n\nexport function modalTemplate(p: ModalTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"mo-backdrop\"\n      part=\"backdrop\"\n      @click=\"${p.onBackdropClick}\"\n    >\n      <div\n        class=\"${panelWrapClass(p)}\"\n        part=\"panel-wrap\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"mo-title\"\n        @click=\"${(e: MouseEvent):void => e.stopPropagation()}\"\n      >\n        <div class=\"${panelClass(p.variant)}\" part=\"panel\">\n\n          <!-- ── HEADER ── -->\n          <div class=\"mo-header\" part=\"header\">\n\n            <!-- Ícono opcional — tone prop activa el wrapper -->\n            ${p.iconTone !== null ? html`\n              <div class=\"${iconClass(p.iconTone)}\" part=\"icon\">\n                <slot name=\"icon\"></slot>\n              </div>\n            ` : nothing}\n\n            <!-- Título y subtítulo -->\n            <div class=\"mo-header-text\">\n              <h2 id=\"mo-title\" class=\"mo-title\">${p.heading}</h2>\n              ${p.subtitle ? html`<p class=\"mo-subtitle\">${p.subtitle}</p>` : nothing}\n            </div>\n\n            <!-- Botón de cierre -->\n            <button\n              class=\"mo-close\"\n              part=\"close-btn\"\n              aria-label=\"Cerrar\"\n              @click=\"${p.onClose}\"\n            >×</button>\n          </div>\n\n          <!-- ── BODY — slot default ── -->\n          <div class=\"mo-body\" part=\"body\">\n            <slot></slot>\n          </div>\n\n          <!-- ── FOOTER ── -->\n          <div class=\"mo-footer\" part=\"footer\">\n            ${p.footerInfo ? html`\n              <span class=\"mo-footer-info\">${p.footerInfo}</span>\n            ` : nothing}\n            <slot name=\"footer\"></slot>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAuBA,SAAS,eAAe,GAA+B;AACrD,QAAM,UAAU,CAAC,eAAe;AAChC,MAAI,EAAE,SAAS,KAAc,SAAQ,KAAK,MAAM,EAAE,IAAI,EAAE;AACxD,MAAI,EAAE,aAAa,WAAc,SAAQ,KAAK,aAAa;AAC3D,MAAI,EAAE,aAAa,aAAc,SAAQ,KAAK,eAAe;AAC7D,MAAI,EAAE,KAAuB,SAAQ,KAAK,SAAS;AACnD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,WAAW,SAA+B;AACjD,QAAM,UAAU,CAAC,UAAU;AAC3B,MAAI,YAAY,YAAa,SAAQ,KAAK,cAAc;AACxD,MAAI,YAAY,SAAa,SAAQ,KAAK,WAAW;AACrD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,UAAU,MAA6B;AAC9C,QAAM,UAAU,CAAC,gBAAgB;AACjC,MAAI,SAAS,UAAW,SAAQ,KAAK,MAAM,IAAI,EAAE;AACjD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,SAAS,cAAc,GAAuC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,EAAE,eAAe;AAAA;AAAA;AAAA,iBAGhB,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhB,CAAC,MAAuB,EAAE,iBAAiB;AAAA;AAAA,sBAEvC,WAAW,EAAE,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAM7B,EAAE,aAAa,OAAO;AAAA,4BACR,UAAU,EAAE,QAAQ,CAAC;AAAA;AAAA;AAAA,gBAGjC,OAAO;AAAA;AAAA;AAAA;AAAA,mDAI4B,EAAE,OAAO;AAAA,gBAC5C,EAAE,WAAW,8BAA8B,EAAE,QAAQ,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ7D,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWnB,EAAE,aAAa;AAAA,6CACgB,EAAE,UAAU;AAAA,gBACzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB;"}
+{"version":3,"file":"index310.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index311.js

@@ -1,5 +1,5 @@
-const treeSelectCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{:host{display:block;position:relative}:host([disabled]){opacity:.38;pointer-events:none;cursor:not-allowed}.ts-wrap{position:relative;display:inline-flex;flex-direction:column;min-width:260px;width:100%}.ts-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--lib-space-sm);padding:calc(var(--lib-spacing-unit) * 3) var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-default);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default);border-radius:var(--lib-radius-md)}.ts-trigger:hover{border-color:var(--border-strong)}:host([open]) .ts-trigger{border-color:var(--color-washi-800);box-shadow:0 0 0 3px var(--color-ink-10)}.ts-trigger-label{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ts-trigger-label.is-placeholder{color:var(--text-muted)}.ts-trigger-count{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--bg-elevated);background:var(--color-kaki-500);padding:2px 6px;border-radius:var(--radius-full);flex-shrink:0;line-height:1.4}.ts-trigger-chevron{flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .ts-trigger-chevron{transform:rotate(180deg)}.ts-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;min-width:260px;background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);z-index:var(--z-overlay);display:flex;flex-direction:column;max-height:340px;border-radius:var(--lib-radius-md);opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top;pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}:host([open]) .ts-dropdown{opacity:1;transform:none;pointer-events:auto}.ts-search-wrap{padding:calc(var(--lib-spacing-unit) * 3) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:calc(var(--lib-spacing-unit) * 3);flex-shrink:0}.ts-search-icon{color:var(--text-muted);flex-shrink:0}.ts-search{flex:1;border:none;outline:none;background:transparent;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary)}.ts-search::placeholder{color:var(--text-muted)}.ts-tree{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent}.ts-node{display:flex;flex-direction:column}.ts-node-row{display:flex;align-items:center;padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;min-height:34px;transition:background var(--duration-fast);gap:0;position:relative}.ts-node-row:hover{background:var(--color-washi-100)}.ts-node-row.is-selected{background:var(--color-kaki-50)}.ts-node-row.is-selected:hover{background:var(--color-kaki-100)}.ts-indent{display:flex;align-items:stretch;flex-shrink:0}.ts-indent-unit{width:20px;position:relative;flex-shrink:0}.ts-indent-unit:before{content:"";position:absolute;left:9px;top:-50%;bottom:-50%;width:1px;background:var(--border-subtle)}.ts-indent-unit.ts-indent-no-line:before{display:none}.ts-indent-unit.ts-indent-last:after{content:"";position:absolute;left:9px;top:50%;width:11px;height:1px;background:var(--border-subtle)}.ts-indent-unit.ts-indent-last-child:before{bottom:50%}.ts-toggle{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-default);background:var(--bg-elevated);margin-right:var(--lib-space-sm);position:relative;cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast)}.ts-toggle:hover{border-color:var(--border-strong);background:var(--color-washi-100)}.ts-toggle-icon{width:8px;height:8px;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out);flex-shrink:0}.ts-node.is-expanded>.ts-node-row .ts-toggle-icon{transform:rotate(90deg)}.ts-toggle-spacer{width:18px;flex-shrink:0;margin-right:var(--lib-space-sm)}.ts-checkbox{width:14px;height:14px;flex-shrink:0;border:1px solid var(--border-default);background:var(--bg-elevated);margin-right:calc(var(--lib-spacing-unit) * 3);display:flex;align-items:center;justify-content:center;transition:border-color var(--duration-base),background var(--duration-base);position:relative;border-radius:var(--lib-radius-sm)}.ts-node-row.is-selected .ts-checkbox{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}.ts-node-row.is-indeterminate .ts-checkbox{background:var(--bg-elevated);border-color:var(--color-kaki-400)}.ts-checkbox-check{display:none;width:8px;height:8px;color:var(--color-white);flex-shrink:0;stroke:var(--color-white)}.ts-node-row.is-selected .ts-checkbox-check{display:block}.ts-checkbox-dash{display:none;width:8px;height:1.5px;background:var(--color-kaki-400);flex-shrink:0}.ts-node-row.is-indeterminate .ts-checkbox-dash{display:block}:host(:not([multi])) .ts-checkbox{display:none}.ts-node-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--duration-fast)}.ts-node-row.is-selected .ts-node-label{color:var(--color-kaki-600)}.ts-node-label mark{background:var(--color-kaki-100);color:var(--color-kaki-600);border-radius:1px;padding:0 1px}.ts-node-badge{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-left:var(--lib-space-sm);flex-shrink:0}.ts-node-row.is-selected .ts-node-badge{color:var(--color-kaki-400)}.ts-children{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-slow) var(--ease-out)}.ts-node.is-expanded>.ts-children{grid-template-rows:1fr}.ts-children-inner{overflow:hidden}.ts-footer{border-top:1px solid var(--border-subtle);padding:calc(var(--lib-spacing-unit) * 3) var(--lib-space-md);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--bg-surface)}.ts-footer-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.ts-footer-actions{display:flex;gap:var(--lib-space-md)}.ts-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:none;background:transparent;cursor:pointer;padding:var(--lib-space-xs) var(--lib-space-sm);color:var(--text-muted);transition:color var(--duration-base)}.ts-btn:hover{color:var(--text-primary)}.ts-btn-confirm{background:var(--color-washi-900);color:var(--color-washi-50);padding:var(--lib-space-xs) var(--lib-space-md);transition:background var(--duration-base)}.ts-btn-confirm:hover{background:var(--color-kaki-500)}.ts-empty{padding:var(--lib-space-xl) var(--lib-space-md);text-align:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted)}.ts-tags{display:flex;flex-wrap:wrap;gap:var(--lib-space-sm);margin-top:calc(var(--lib-spacing-unit) * 3);min-height:26px}.ts-tag{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:2px calc(var(--lib-spacing-unit) * 3);background:var(--color-kaki-50);border:1px solid var(--color-kaki-200);color:var(--color-kaki-600);display:flex;align-items:center;gap:var(--lib-space-sm);cursor:default;transition:background var(--duration-fast)}.ts-tag:hover{background:var(--color-kaki-100)}.ts-tag-remove{cursor:pointer;color:var(--color-kaki-400);line-height:1;font-size:11px;transition:color var(--duration-fast)}.ts-tag-remove:hover{color:var(--color-kaki-600)}:host([inline]){display:flex;flex-direction:column}.ts-inline{border:1px solid var(--border-subtle);background:var(--bg-elevated);max-height:360px;display:flex;flex-direction:column;border-radius:var(--lib-radius-md)}.ts-inline .ts-tree{flex:1}.ts-inline .ts-search-wrap,.ts-inline .ts-footer{flex-shrink:0}}';
+const labelStyles = ":host{display:inline-block;margin-bottom:var(--lib-space-xs, 4px)}label{display:flex;align-items:center;gap:4px;font-family:var(--lib-font-family);font-size:var(--lib-font-size-sm);font-weight:600;color:var(--lib-color-text);cursor:pointer}.required-indicator{color:var(--lib-color-danger);font-weight:700}";
 export {
-  treeSelectCss as default
+  labelStyles as default
 };
 //# sourceMappingURL=index311.js.map

package/dist/index312.js

@@ -1,5 +1,45 @@
-const groupCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:stretch;vertical-align:middle;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{.bg-wrap{display:inline-flex;align-items:stretch;position:relative}:host([block]){display:flex;width:100%}:host([block]) .bg-wrap{display:flex;width:100%}:host([block]) ::slotted(lib-button){flex:1}:host([orientation="vertical"]) .bg-wrap{flex-direction:column;align-items:stretch}:host([orientation="vertical"][block]) .bg-wrap{width:100%}}:host(lib-button-sep){display:inline-flex;flex-shrink:0;align-self:stretch;width:1px;background:var(--border-default);position:relative;z-index:1}:host(lib-button-sep[dark]){background:#ffffff1a}@layer reset{:host(lib-button-split){display:inline-flex;align-items:stretch;position:relative;vertical-align:middle}}@layer components{.split-wrap{display:inline-flex;align-items:stretch;position:relative}.split-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:190px;background:var(--bg-elevated);border:1px solid var(--border-subtle);box-shadow:0 8px 24px #1a140e1a;z-index:50;display:none;opacity:0;transform:translateY(-4px);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.split-menu.is-open{opacity:1;transform:none}.split-menu-item,.split-menu ::slotted(button){display:flex;width:100%;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);background:none;border:none;border-bottom:1px solid var(--color-washi-100);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;text-align:left;transition:background var(--duration-fast),color var(--duration-fast)}.split-menu-item:last-child,.split-menu ::slotted(button:last-child){border-bottom:none}.split-menu-item:hover,.split-menu ::slotted(button:hover){background:var(--bg-base);color:var(--text-primary)}.split-menu-item:disabled,.split-menu ::slotted(button:disabled){opacity:.38;cursor:not-allowed}:host([dark]) .split-menu{background:var(--color-washi-800);border-color:#ffffff14;box-shadow:0 8px 24px #0000004d}:host([dark]) .split-menu-item,:host([dark]) .split-menu ::slotted(button){border-bottom-color:#ffffff0d;color:#faf7f473}:host([dark]) .split-menu-item:hover,:host([dark]) .split-menu ::slotted(button:hover){background:#ffffff12;color:#faf7f4d9}}';
+import { svg, nothing, html } from "lit";
+const iconUp = svg`
+  <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true">
+    <polygon points="5,1 9,9 1,9"/>
+  </svg>`;
+const iconDown = svg`
+  <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true">
+    <polygon points="5,9 9,1 1,1"/>
+  </svg>`;
+const iconFlat = svg`
+  <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
+       stroke="currentColor" stroke-width="1.8"
+       stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <line x1="1" y1="5" x2="9" y2="5"/>
+  </svg>`;
+const DELTA_ICON = {
+  up: iconUp,
+  down: iconDown,
+  flat: iconFlat
+};
+function counterTemplate(props) {
+  const { size, tone, label, delta, deltaDir } = props;
+  const toneClass = tone !== "default" ? `cnt-${tone}` : "";
+  return html`
+    <div class="cnt cnt-${size} ${toneClass}">
+      <div class="cnt-row" part="row"></div>
+
+      ${label || delta ? html`
+        <div class="cnt-meta">
+          ${label ? html`<span class="cnt-label">${label}</span>` : nothing}
+          ${delta ? html`
+            <span class="cnt-delta cnt-delta-${deltaDir}" aria-label="Variación ${deltaDir}">
+              ${DELTA_ICON[deltaDir]}
+              ${delta}
+            </span>
+          ` : nothing}
+        </div>
+      ` : nothing}
+    </div>
+  `;
+}
 export {
-  groupCss as default
+  counterTemplate
 };
 //# sourceMappingURL=index312.js.map

package/dist/index312.js.map

@@ -1 +1 @@
-{"version":3,"file":"index312.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index312.js","sources":["../src/components/atoms/lib-counter/lib-counter.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\n\nexport type LibCounterSize     = 'sm' | 'md' | 'lg' | 'xl';\nexport type LibCounterTone     = 'default' | 'kaki' | 'celadon' | 'error' | 'muted' | 'on-dark';\nexport type LibCounterDeltaDir = 'up' | 'down' | 'flat';\n\nexport interface CounterTemplateProps {\n  size:     LibCounterSize;\n  tone:     LibCounterTone;\n  label:    string;\n  delta:    string;\n  deltaDir: LibCounterDeltaDir;\n}\n\n/* ── Delta icons — inline SVG, sin dependencia Phosphor ── */\nconst iconUp = svg`\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" aria-hidden=\"true\">\n    <polygon points=\"5,1 9,9 1,9\"/>\n  </svg>`;\n\nconst iconDown = svg`\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" aria-hidden=\"true\">\n    <polygon points=\"5,9 9,1 1,1\"/>\n  </svg>`;\n\nconst iconFlat = svg`\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.8\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <line x1=\"1\" y1=\"5\" x2=\"9\" y2=\"5\"/>\n  </svg>`;\n\nconst DELTA_ICON: Record<LibCounterDeltaDir, TemplateResult> = {\n  up:   iconUp,\n  down: iconDown,\n  flat: iconFlat,\n};\n\n/**\n * Shell estático de lib-counter.\n *\n * El .cnt-row se construye y anima enteramente por el motor\n * imperativo en LibCounter.updated(). El template solo provee\n * el contenedor y la fila de metadatos.\n *\n * Estructura:\n *   div.cnt.cnt-{size}[.cnt-{tone}]\n *     div.cnt-row[part=\"row\"]       ← dígitos, construidos vía DOM\n *     div.cnt-meta                  ← label + delta (opcionales)\n */\nexport function counterTemplate(props: CounterTemplateProps): TemplateResult {\n  const { size, tone, label, delta, deltaDir } = props;\n  const toneClass = tone !== 'default' ? `cnt-${tone}` : '';\n\n  return html`\n    <div class=\"cnt cnt-${size} ${toneClass}\">\n      <div class=\"cnt-row\" part=\"row\"></div>\n\n      ${label || delta ? html`\n        <div class=\"cnt-meta\">\n          ${label ? html`<span class=\"cnt-label\">${label}</span>` : nothing}\n          ${delta ? html`\n            <span class=\"cnt-delta cnt-delta-${deltaDir}\" aria-label=\"Variación ${deltaDir}\">\n              ${DELTA_ICON[deltaDir]}\n              ${delta}\n            </span>\n          ` : nothing}\n        </div>\n      ` : nothing}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAeA,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjB,MAAM,aAAyD;AAAA,EAC7D,IAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAcO,SAAS,gBAAgB,OAA6C;AAC3E,QAAM,EAAE,MAAM,MAAM,OAAO,OAAO,aAAa;AAC/C,QAAM,YAAY,SAAS,YAAY,OAAO,IAAI,KAAK;AAEvD,SAAO;AAAA,0BACiB,IAAI,IAAI,SAAS;AAAA;AAAA;AAAA,QAGnC,SAAS,QAAQ;AAAA;AAAA,YAEb,QAAQ,+BAA+B,KAAK,YAAY,OAAO;AAAA,YAC/D,QAAQ;AAAA,+CAC2B,QAAQ,2BAA2B,QAAQ;AAAA,gBAC1E,WAAW,QAAQ,CAAC;AAAA,gBACpB,KAAK;AAAA;AAAA,cAEP,OAAO;AAAA;AAAA,UAEX,OAAO;AAAA;AAAA;AAGjB;"}

package/dist/index313.js

@@ -1,77 +1,5 @@
-import { svg, html } from "lit";
-const CARET = svg`
-  <svg width="9" height="9" viewBox="0 0 10 10" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="2,3 5,7 8,3"/>
-  </svg>`;
-function buttonGroupTemplate() {
-  return html`
-    <div class="bg-wrap" part="group">
-      <slot></slot>
-    </div>
-  `;
-}
-function buttonSplitTemplate(p) {
-  const { label, variant, size, dark, disabled, menuOpen, items } = p;
-  const arrowKintsugi = variant === "accent" || variant === "primary";
-  const menuItems = items.length > 0 ? html`${items.map((item) => html`
-        <button
-          class="split-menu-item"
-          ?disabled="${item.disabled ?? false}"
-          data-value="${item.value}"
-        >${item.label}</button>
-      `)}` : html`<slot name="menu"></slot>`;
-  return html`
-    <div class="split-wrap" part="split">
-
-      <!-- Acción principal: lib-button posición "first" -->
-      <lib-button
-        part="main"
-        variant="${variant}"
-        size="${size}"
-        ?dark="${dark}"
-        ?disabled="${disabled}"
-        group-pos="first"
-        group-shape="rounded"
-        @click="${p.onMainClick}"
-      >
-        <slot slot="prefix" name="prefix"></slot>
-        ${label}
-        <slot slot="suffix" name="suffix"></slot>
-      </lib-button>
-
-      <!-- Flecha: lib-button posición "last", icon-only -->
-      <lib-button
-        part="arrow"
-        variant="${variant}"
-        size="${size}"
-        ?dark="${dark}"
-        ?disabled="${disabled}"
-        group-pos="last"
-        group-shape="rounded"
-        icon-only
-        ?kintsugi="${arrowKintsugi}"
-        aria-label="Más opciones"
-        aria-haspopup="true"
-        aria-expanded="${menuOpen ? "true" : "false"}"
-        @click="${p.onArrowClick}"
-      >${CARET}</lib-button>
-
-      <!-- Menú desplegable -->
-      <div
-        class="split-menu ${menuOpen ? "is-open" : ""}"
-        part="menu"
-        style="${menuOpen ? "display:block" : "display:none"}"
-        role="menu"
-      >
-        ${menuItems}
-      </div>
-
-    </div>
-  `;
-}
+const counterCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box}}@layer components{.cnt{display:inline-flex;flex-direction:column;gap:0}.cnt-row{display:inline-flex;align-items:baseline;gap:0;font-family:var(--lib-font-display);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:1;color:var(--text-primary)}.cnt-prefix,.cnt-suffix{font-family:var(--lib-font-mono);letter-spacing:var(--tracking-wide);color:var(--text-muted);line-height:1;align-self:flex-end;padding-bottom:.05em}.cnt-sep{line-height:1;color:var(--text-muted);padding:0 1px}.cnt-digit{position:relative;overflow:hidden;height:1em;display:inline-block;vertical-align:bottom}.cnt-digit-inner{display:flex;flex-direction:column;will-change:transform;transition:transform .7s cubic-bezier(.16,1,.3,1)}.cnt-digit-inner span{display:block;height:1em;line-height:1em;text-align:center}:host([size="sm"]) .cnt-row{font-size:2rem}:host([size="md"]) .cnt-row{font-size:3.5rem}:host([size="lg"]) .cnt-row{font-size:5rem}:host([size="xl"]) .cnt-row{font-size:7rem}:host([size="sm"]) .cnt-prefix,:host([size="sm"]) .cnt-suffix{font-size:.85rem}:host([size="md"]) .cnt-prefix,:host([size="md"]) .cnt-suffix{font-size:1.1rem}:host([size="lg"]) .cnt-prefix,:host([size="lg"]) .cnt-suffix{font-size:1.4rem}:host([size="xl"]) .cnt-prefix,:host([size="xl"]) .cnt-suffix{font-size:1.8rem}:host([tone="kaki"]) .cnt-row{color:var(--color-kaki-500)}:host([tone="celadon"]) .cnt-row{color:var(--color-celadon-500)}:host([tone="error"]) .cnt-row{color:var(--color-error)}:host([tone="muted"]) .cnt-row{color:var(--text-muted)}:host([tone="on-dark"]) .cnt-row{color:#d3c0b1}:host([tone="on-dark"]) .cnt-prefix,:host([tone="on-dark"]) .cnt-suffix,:host([tone="on-dark"]) .cnt-sep{color:#433831}:host([tone="on-dark"]) .cnt-label{color:#362b25}.cnt-meta{display:flex;align-items:center;gap:var(--lib-space-sm);margin-top:var(--lib-space-xs)}.cnt-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}.cnt-delta{display:inline-flex;align-items:center;gap:2px;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:1px 6px;border-radius:var(--radius-full);line-height:1.6}.cnt-delta-up{background:var(--color-celadon-100);color:var(--color-celadon-600)}.cnt-delta-down{background:var(--color-error-light, #F5DDD9);color:var(--color-error)}.cnt-delta-flat{background:var(--color-washi-100);color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.cnt-digit-inner{transition:none}}}';
 export {
-  buttonGroupTemplate,
-  buttonSplitTemplate
+  counterCss as default
 };
 //# sourceMappingURL=index313.js.map

package/dist/index313.js.map

@@ -1 +1 @@
-{"version":3,"file":"index313.js","sources":["../src/components/molecules/button-group/lib-button-group.html.ts"],"sourcesContent":["import { html, svg, TemplateResult } from 'lit';\nimport type { LibVariant, LibSize } from '../../../types';\nimport type { SplitMenuItem } from './lib-button-group.types';\n\n/* ── Caret SVG (va dentro del slot del lib-button flecha) ── */\nconst CARET = svg`\n  <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"2,3 5,7 8,3\"/>\n  </svg>`;\n\n/* ────────────────────────────────────────────\n   Group template\n   ──────────────────────────────────────────── */\nexport function buttonGroupTemplate(): TemplateResult {\n  return html`\n    <div class=\"bg-wrap\" part=\"group\">\n      <slot></slot>\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Split template — compone dos lib-button\n   ──────────────────────────────────────────── */\nexport interface SplitTemplateProps {\n  label:       string;\n  variant:     LibVariant;\n  size:        LibSize;\n  dark:        boolean;\n  disabled:    boolean;\n  menuOpen:    boolean;\n  items:       SplitMenuItem[];\n  onMainClick: (e: Event) => void;\n  onArrowClick:(e: Event) => void;\n}\n\nexport function buttonSplitTemplate(p: SplitTemplateProps): TemplateResult {\n  const { label, variant, size, dark, disabled, menuOpen, items } = p;\n\n  /* Kintsugi en el arrow solo para variantes sólidas (accent/primary) */\n  const arrowKintsugi = variant === 'accent' || variant === 'primary';\n\n  const menuItems: TemplateResult = items.length > 0\n    ? html`${items.map(item => html`\n        <button\n          class=\"split-menu-item\"\n          ?disabled=\"${item.disabled ?? false}\"\n          data-value=\"${item.value}\"\n        >${item.label}</button>\n      `)}`\n    : html`<slot name=\"menu\"></slot>`;\n\n  return html`\n    <div class=\"split-wrap\" part=\"split\">\n\n      <!-- Acción principal: lib-button posición \"first\" -->\n      <lib-button\n        part=\"main\"\n        variant=\"${variant}\"\n        size=\"${size}\"\n        ?dark=\"${dark}\"\n        ?disabled=\"${disabled}\"\n        group-pos=\"first\"\n        group-shape=\"rounded\"\n        @click=\"${p.onMainClick}\"\n      >\n        <slot slot=\"prefix\" name=\"prefix\"></slot>\n        ${label}\n        <slot slot=\"suffix\" name=\"suffix\"></slot>\n      </lib-button>\n\n      <!-- Flecha: lib-button posición \"last\", icon-only -->\n      <lib-button\n        part=\"arrow\"\n        variant=\"${variant}\"\n        size=\"${size}\"\n        ?dark=\"${dark}\"\n        ?disabled=\"${disabled}\"\n        group-pos=\"last\"\n        group-shape=\"rounded\"\n        icon-only\n        ?kintsugi=\"${arrowKintsugi}\"\n        aria-label=\"Más opciones\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${menuOpen ? 'true' : 'false'}\"\n        @click=\"${p.onArrowClick}\"\n      >${CARET}</lib-button>\n\n      <!-- Menú desplegable -->\n      <div\n        class=\"split-menu ${menuOpen ? 'is-open' : ''}\"\n        part=\"menu\"\n        style=\"${menuOpen ? 'display:block' : 'display:none'}\"\n        role=\"menu\"\n      >\n        ${menuItems}\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAKA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AASP,SAAS,sBAAsC;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAiBO,SAAS,oBAAoB,GAAuC;AACzE,QAAM,EAAE,OAAO,SAAS,MAAM,MAAM,UAAU,UAAU,UAAU;AAGlE,QAAM,gBAAgB,YAAY,YAAY,YAAY;AAE1D,QAAM,YAA4B,MAAM,SAAS,IAC7C,OAAO,MAAM,IAAI,CAAA,SAAQ;AAAA;AAAA;AAAA,uBAGR,KAAK,YAAY,KAAK;AAAA,wBACrB,KAAK,KAAK;AAAA,WACvB,KAAK,KAAK;AAAA,OACd,CAAC,KACF;AAEJ,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMU,OAAO;AAAA,gBACV,IAAI;AAAA,iBACH,IAAI;AAAA,qBACA,QAAQ;AAAA;AAAA;AAAA,kBAGX,EAAE,WAAW;AAAA;AAAA;AAAA,UAGrB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOI,OAAO;AAAA,gBACV,IAAI;AAAA,iBACH,IAAI;AAAA,qBACA,QAAQ;AAAA;AAAA;AAAA;AAAA,qBAIR,aAAa;AAAA;AAAA;AAAA,yBAGT,WAAW,SAAS,OAAO;AAAA,kBAClC,EAAE,YAAY;AAAA,SACvB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIc,WAAW,YAAY,EAAE;AAAA;AAAA,iBAEpC,WAAW,kBAAkB,cAAc;AAAA;AAAA;AAAA,UAGlD,SAAS;AAAA;AAAA;AAAA;AAAA;AAKnB;"}
+{"version":3,"file":"index313.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index314.js

@@ -1,77 +1,35 @@
-import { html } from "lit";
-const checkSvg = html`
-  <svg viewBox="0 0 12 12">
-    <polyline points="2,6 5,9 10,3"/>
+import { svg, nothing, html } from "lit";
+const spinnerSvg = svg`
+  <svg class="spinner" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M8 2a6 6 0 1 0 6 6" opacity="0.3"/>
+    <path d="M14 8a6 6 0 0 0-6-6"/>
   </svg>`;
-function checkboxCardTemplate(ctx) {
-  const checkClass = [
-    "cc-check",
-    ctx.inputType === "radio" || ctx.checkShape === "pill" ? "cc-check-pill" : ""
-  ].filter(Boolean).join(" ");
+function buttonLiquidTemplate(ctx) {
+  const { loading, disabled } = ctx;
   return html`
-    <label
-      class="cc"
-      part="label"
-      @click="${(e) => ctx._handleClick(e)}"
+    <button
+      class="btn"
+      part="button"
+      ?disabled="${disabled || loading}"
+      aria-disabled="${disabled || loading}"
+      aria-busy="${loading ? "true" : nothing}"
+      @mouseenter="${(e) => ctx._onMouseEnter(e)}"
+      @mouseleave="${() => ctx._onMouseLeave()}"
+      @mousedown="${(e) => ctx._onMouseDown(e)}"
     >
-      <!-- Input nativo — hermano directo de .cc-body para :checked ~ -->
-      <input
-        class="cc-input"
-        part="input"
-        .type="${ctx.inputType}"
-        .name="${ctx.name}"
-        .value="${ctx.value}"
-        .checked="${ctx.checked}"
-        ?disabled="${ctx.disabled}"
-        @change="${(e) => ctx._handleChange(e)}"
-      />
+      <!-- Canvas inyectado por el componente en firstUpdated -->
 
-      <div class="cc-body" part="body">
-
-        <!-- Checkmark -->
-        <div class="${checkClass}" part="check">${checkSvg}</div>
-
-        <!-- Slot: icono -->
-        <slot name="icon">
-          ${ctx._hasSlot("icon") ? "" : ""}
-        </slot>
-
-        <!-- Slot: badge -->
-        <slot name="badge"></slot>
-
-        <!-- Slot: título -->
-        <slot name="title">
-          ${ctx.cardTitle ? html`<div class="cc-title" part="title">${ctx.cardTitle}</div>` : ""}
-        </slot>
-
-        <!-- Slot: descripción -->
-        <slot name="desc">
-          ${ctx.desc ? html`<div class="cc-desc" part="desc">${ctx.desc}</div>` : ""}
-        </slot>
-
-        <!-- Slot: precio -->
-        <slot name="price"></slot>
-
-        <!-- Slot: divider -->
-        <slot name="divider"></slot>
-
-        <!-- Slot: features -->
-        <slot name="features"></slot>
-
-        <!-- Slot: imagen -->
-        <slot name="image"></slot>
-
-        <!-- Slot: contenido libre (default) -->
+      <span class="btn-inner" part="inner">
+        ${loading ? spinnerSvg : nothing}
+        <slot name="prefix"></slot>
         <slot></slot>
-
-        <!-- Ripple layer -->
-        <div class="cc-ripple" part="ripple"></div>
-
-      </div>
-    </label>
+        <slot name="suffix"></slot>
+      </span>
+    </button>
   `;
 }
 export {
-  checkboxCardTemplate
+  buttonLiquidTemplate
 };
 //# sourceMappingURL=index314.js.map

package/dist/index314.js.map

@@ -1 +1 @@
-{"version":3,"file":"index314.js","sources":["../src/components/molecules/checkbox-card/lib-checkbox-card.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibCheckboxCard } from './lib-checkbox-card.component';\n\n/* SVG checkmark compartido */\nconst checkSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 12 12\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>`;\n\nexport function checkboxCardTemplate(ctx: LibCheckboxCard): TemplateResult {\n  const checkClass = [\n    'cc-check',\n    ctx.inputType === 'radio' || ctx.checkShape === 'pill' ? 'cc-check-pill' : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <label\n      class=\"cc\"\n      part=\"label\"\n      @click=\"${(e: MouseEvent): void => ctx._handleClick(e)}\"\n    >\n      <!-- Input nativo — hermano directo de .cc-body para :checked ~ -->\n      <input\n        class=\"cc-input\"\n        part=\"input\"\n        .type=\"${ctx.inputType}\"\n        .name=\"${ctx.name}\"\n        .value=\"${ctx.value}\"\n        .checked=\"${ctx.checked}\"\n        ?disabled=\"${ctx.disabled}\"\n        @change=\"${(e: Event): void => ctx._handleChange(e)}\"\n      />\n\n      <div class=\"cc-body\" part=\"body\">\n\n        <!-- Checkmark -->\n        <div class=\"${checkClass}\" part=\"check\">${checkSvg}</div>\n\n        <!-- Slot: icono -->\n        <slot name=\"icon\">\n          ${ctx._hasSlot('icon') ? '' : ''}\n        </slot>\n\n        <!-- Slot: badge -->\n        <slot name=\"badge\"></slot>\n\n        <!-- Slot: título -->\n        <slot name=\"title\">\n          ${ctx.cardTitle\n            ? html`<div class=\"cc-title\" part=\"title\">${ctx.cardTitle}</div>`\n            : ''}\n        </slot>\n\n        <!-- Slot: descripción -->\n        <slot name=\"desc\">\n          ${ctx.desc\n            ? html`<div class=\"cc-desc\" part=\"desc\">${ctx.desc}</div>`\n            : ''}\n        </slot>\n\n        <!-- Slot: precio -->\n        <slot name=\"price\"></slot>\n\n        <!-- Slot: divider -->\n        <slot name=\"divider\"></slot>\n\n        <!-- Slot: features -->\n        <slot name=\"features\"></slot>\n\n        <!-- Slot: imagen -->\n        <slot name=\"image\"></slot>\n\n        <!-- Slot: contenido libre (default) -->\n        <slot></slot>\n\n        <!-- Ripple layer -->\n        <div class=\"cc-ripple\" part=\"ripple\"></div>\n\n      </div>\n    </label>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,WAA2B;AAAA;AAAA;AAAA;AAK1B,SAAS,qBAAqB,KAAsC;AACzE,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,IAAI,cAAc,WAAW,IAAI,eAAe,SAAS,kBAAkB;AAAA,EAAA,EAC3E,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,CAAC,MAAwB,IAAI,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM3C,IAAI,SAAS;AAAA,iBACb,IAAI,IAAI;AAAA,kBACP,IAAI,KAAK;AAAA,oBACP,IAAI,OAAO;AAAA,qBACV,IAAI,QAAQ;AAAA,mBACd,CAAC,MAAmB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMrC,UAAU,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA,YAI9C,IAAI,SAAS,MAAM,IAAI,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ9B,IAAI,YACF,0CAA0C,IAAI,SAAS,WACvD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKJ,IAAI,OACF,wCAAwC,IAAI,IAAI,WAChD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBhB;"}
+{"version":3,"file":"index314.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.html.ts"],"sourcesContent":["import { html, svg, nothing, TemplateResult } from 'lit';\nimport type { LibButtonLiquid } from './lib-liquid-button.component';\n\n/* ── Spinner SVG ── */\nconst spinnerSvg: TemplateResult = svg`\n  <svg class=\"spinner\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <path d=\"M8 2a6 6 0 1 0 6 6\" opacity=\"0.3\"/>\n    <path d=\"M14 8a6 6 0 0 0-6-6\"/>\n  </svg>`;\n\n/* ── Main template ── */\nexport function buttonLiquidTemplate(ctx: LibButtonLiquid): TemplateResult {\n  const { loading, disabled } = ctx;\n\n  return html`\n    <button\n      class=\"btn\"\n      part=\"button\"\n      ?disabled=\"${disabled || loading}\"\n      aria-disabled=\"${disabled || loading}\"\n      aria-busy=\"${loading ? 'true' : nothing}\"\n      @mouseenter=\"${(e: MouseEvent): void => ctx._onMouseEnter(e)}\"\n      @mouseleave=\"${(): void => ctx._onMouseLeave()}\"\n      @mousedown=\"${(e: MouseEvent): void => ctx._onMouseDown(e)}\"\n    >\n      <!-- Canvas inyectado por el componente en firstUpdated -->\n\n      <span class=\"btn-inner\" part=\"inner\">\n        ${loading ? spinnerSvg : nothing}\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </span>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,SAAS,qBAAqB,KAAsC;AACzE,QAAM,EAAE,SAAS,SAAA,IAAa;AAE9B,SAAO;AAAA;AAAA;AAAA;AAAA,mBAIU,YAAY,OAAO;AAAA,uBACf,YAAY,OAAO;AAAA,mBACvB,UAAU,SAAS,OAAO;AAAA,qBACxB,CAAC,MAAwB,IAAI,cAAc,CAAC,CAAC;AAAA,qBAC7C,MAAY,IAAI,eAAe;AAAA,oBAChC,CAAC,MAAwB,IAAI,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtD,UAAU,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC;"}

package/dist/index315.js

@@ -1,5 +1,5 @@
-const checkboxCardCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.cc-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc{display:block;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.cc:focus-within .cc-body{outline:2px solid var(--color-kaki-400);outline-offset:2px}.cc-body{position:relative;border:1px solid var(--border-subtle);background:var(--bg-elevated);padding:var(--lib-space-lg);overflow:hidden;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.cc:hover .cc-body{border-color:var(--border-default);background:var(--bg-surface)}.cc:active .cc-body{transform:scale(.985)}.cc-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgb(255,255,255,.4) 0%,transparent 50%);opacity:0;pointer-events:none;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:before{opacity:1}.cc-body:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-kaki-400),transparent);opacity:0;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:after{opacity:1}.cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:var(--color-kaki-50)}.cc-check{position:absolute;top:var(--lib-space-md);right:var(--lib-space-md);width:18px;height:18px;border:1px solid var(--border-default);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2;pointer-events:none;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.cc-check svg{width:10px;height:10px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.5);transition:opacity var(--duration-base) var(--ease-bounce),transform var(--duration-base) var(--ease-bounce)}.cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}.cc-input:checked~.cc-body .cc-check svg{opacity:1;transform:scale(1)}.cc-check-pill{border-radius:999px}.cc-icon{margin-bottom:var(--lib-space-md);display:flex;align-items:center}.cc-icon svg,.cc-icon img{width:28px;height:28px;color:var(--text-muted);transition:color var(--duration-base)}.cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-500)}.cc-title{font-family:var(--lib-font-display);font-size:1.2rem;font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-primary);line-height:1.2;margin-bottom:var(--lib-space-xs);padding-right:var(--lib-space-xl)}.cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-600)}.cc-desc{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);line-height:1.7}.cc-input:checked~.cc-body .cc-desc{color:var(--text-secondary)}.cc-badge{display:inline-block;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--border-subtle);color:var(--text-muted);margin-bottom:var(--lib-space-sm);transition:border-color var(--duration-base),color var(--duration-base)}.cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e4d;color:var(--color-kaki-500)}.cc-price{font-family:var(--lib-font-display);font-size:2rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1;color:var(--text-primary);margin-top:var(--lib-space-md)}.cc-price sup{font-size:.9rem;vertical-align:super;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.06em}.cc-price sub{font-size:.65rem;vertical-align:baseline;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.08em}.cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-600)}.cc-divider{height:1px;background:var(--border-subtle);margin:var(--lib-space-md) 0;transition:background var(--duration-base)}.cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}.cc-features{list-style:none;display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cc-features li{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);display:flex;align-items:center;gap:var(--lib-space-sm)}.cc-features li:before{content:"";width:12px;height:1px;background:var(--border-default);flex-shrink:0;transition:background var(--duration-base),width var(--duration-base)}.cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400);width:14px}.cc-input:checked~.cc-body .cc-features li{color:var(--text-primary)}.cc-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.cc-ripple-dot{position:absolute;width:4px;height:4px;background:var(--color-kaki-400);border-radius:50%;transform:scale(0);opacity:.18;animation:cc-ripple .5s ease-out forwards}@keyframes cc-ripple{to{transform:scale(80);opacity:0}}:host([layout="horizontal"]) .cc-body{display:flex;align-items:center;gap:var(--lib-space-lg);padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="horizontal"]) .cc-icon{margin-bottom:0;flex-shrink:0}:host([layout="horizontal"]) .cc-content{flex:1;min-width:0}:host([layout="horizontal"]) .cc-title{margin-bottom:2px;font-size:1rem;padding-right:var(--lib-space-lg)}:host([layout="horizontal"]) .cc-check{top:50%;right:var(--lib-space-md);transform:translateY(-50%)}:host([layout="compact"]) .cc-body{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="compact"]) .cc-title{font-size:1rem}:host([color="celadon"]) .cc-input:checked~.cc-body{border-color:var(--color-celadon-500);background:var(--color-celadon-50)}:host([color="celadon"]) .cc-input:checked~.cc-body:after{background:linear-gradient(90deg,transparent,var(--color-celadon-400),transparent)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-celadon-500);background:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-title{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-badge{border-color:#3571644d;color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-celadon-400)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-divider{background:#35716433}:host([color="celadon"]) .cc-ripple-dot{background:var(--color-celadon-400)}:host([color="celadon"]) .cc:focus-within .cc-body{outline-color:var(--color-celadon-400)}:host([input-type="radio"]) .cc-check{border-radius:50%}:host([input-type="radio"]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([dark]) .cc-body{background:#ffffff0a;border-color:#ffffff14}:host([dark]) .cc:hover .cc-body{border-color:#ffffff26;background:#ffffff0f}:host([dark]) .cc-check{background:#ffffff0f;border-color:#ffffff24}:host([dark]) .cc-title{color:#faf7f4bf}:host([dark]) .cc-desc{color:#faf7f447}:host([dark]) .cc-badge{border-color:#ffffff1a;color:#faf7f44d}:host([dark]) .cc-divider{background:#ffffff14}:host([dark]) .cc-features li{color:#faf7f44d}:host([dark]) .cc-features li:before{background:#ffffff26}:host([dark]) .cc-price{color:#faf7f4bf}:host([dark]) .cc-price sup,:host([dark]) .cc-price sub{color:#faf7f44d}:host([dark]) .cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:#b85a1e14}:host([dark]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}:host([dark]) .cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-desc{color:#faf7f466}:host([dark]) .cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e59;color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}:host([dark]) .cc-input:checked~.cc-body .cc-features li{color:#faf7f48c}:host([dark]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-400)}:host([disabled]) .cc{pointer-events:none;opacity:.4}:host([disabled]) .cc-body{cursor:not-allowed}:host([error]) .cc-body{border-color:#c0392b66;background:#c0392b08}:host([error]) .cc:hover .cc-body{border-color:var(--color-error)}.cc-img-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(.4);transition:filter var(--duration-slow)}.cc-input:checked~.cc-body .cc-img-thumb{filter:grayscale(0)}.cc-img-content{padding:var(--lib-space-md) var(--lib-space-lg) var(--lib-space-lg)}:host([image]) .cc-body{padding:0}:host([image]) .cc-check{top:var(--lib-space-sm);right:var(--lib-space-sm);background:#ffffffd9}:host([image]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}}';
+const liquidCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;border:none;padding:var(--lib-space-sm) var(--lib-space-lg);white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .2s ease,transform .1s ease;border-radius:0;outline:none;width:100%}.btn:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.btn:active:not(:disabled,.is-loading){transform:translateY(1px)}:host([disabled]) .btn,.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.btn-inner{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--lib-space-xs);pointer-events:none}.spinner{display:inline-block;width:11px;height:11px;flex-shrink:0;animation:lbl-spin .9s linear infinite}@keyframes lbl-spin{to{transform:rotate(360deg)}}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-xl);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([block]){display:flex;width:100%}:host([variant="ink"]) .btn{background:var(--color-washi-900);color:var(--color-washi-100)}:host([variant="washi"]) .btn{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}:host([variant="kaki"]) .btn{background:var(--color-kaki-400);color:#fff}:host([variant="celadon"]) .btn{background:var(--color-celadon-500);color:#fff}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary);border:none}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border:1px solid var(--color-error)}:host([variant="ghost"][dark]) .btn{color:var(--color-washi-400)}}';
 export {
-  checkboxCardCss as default
+  liquidCss as default
 };
 //# sourceMappingURL=index315.js.map

package/dist/index316.js

@@ -1,20 +1,12 @@
-import { renderClassic } from "./index353.js";
-import { renderCentered } from "./index354.js";
-import { renderMega } from "./index355.js";
-import { renderAppBar } from "./index356.js";
-function headerTemplate(ctx) {
-  switch (ctx.variant) {
-    case "centered":
-      return renderCentered(ctx);
-    case "mega":
-      return renderMega(ctx);
-    case "app-bar":
-      return renderAppBar(ctx);
-    default:
-      return renderClassic(ctx);
-  }
-}
+const LIQUID_PALETTES = {
+  ink: { water: [184, 90, 30], ripple: [255, 180, 100] },
+  washi: { water: [34, 28, 22], ripple: [90, 72, 56] },
+  kaki: { water: [140, 65, 21], ripple: [255, 220, 180] },
+  celadon: { water: [36, 82, 73], ripple: [160, 220, 200] },
+  ghost: { water: [184, 165, 146], ripple: [140, 120, 100] },
+  danger: { water: [140, 42, 26], ripple: [220, 100, 80] }
+};
 export {
-  headerTemplate
+  LIQUID_PALETTES
 };
 //# sourceMappingURL=index316.js.map

package/dist/index316.js.map

@@ -1 +1 @@
-{"version":3,"file":"index316.js","sources":["../src/components/molecules/header/lib-header.html.ts"],"sourcesContent":["import { TemplateResult } from 'lit';\nimport type { LibHeader } from './lib-header.component';\n\nimport { renderClassic  } from './templates/header-classic.html';\nimport { renderCentered } from './templates/header-centered.html';\nimport { renderMega     } from './templates/header-mega.html';\nimport { renderAppBar   } from './templates/header-app-bar.html';\n\n/**\n * Dispatcher principal del componente lib-header.\n *\n * No contiene lógica de presentación propia.\n * Cada variante vive en su propio fichero dentro de /templates.\n *\n * Variantes → fichero\n * ───────────────────────────────────────────────────────────\n * classic · dark · transparent · kintsugi\n * glitch · minimal · shrink              → header-classic.html.ts\n * centered                               → header-centered.html.ts\n * mega                                   → header-mega.html.ts\n * app-bar                                → header-app-bar.html.ts\n *\n * Helpers compartidos (logo, links, actions, SVGs) → header-shared.html.ts\n * Móvil (hamburger + drawer)                       → header-mobile.html.ts\n */\nexport function headerTemplate(ctx: LibHeader): TemplateResult {\n  switch (ctx.variant) {\n    case 'centered': return renderCentered(ctx);\n    case 'mega':     return renderMega(ctx);\n    case 'app-bar':  return renderAppBar(ctx);\n    default:         return renderClassic(ctx);\n  }\n}"],"names":[],"mappings":";;;;AAyBO,SAAS,eAAe,KAAgC;AAC7D,UAAQ,IAAI,SAAA;AAAA,IACV,KAAK;AAAY,aAAO,eAAe,GAAG;AAAA,IAC1C,KAAK;AAAY,aAAO,WAAW,GAAG;AAAA,IACtC,KAAK;AAAY,aAAO,aAAa,GAAG;AAAA,IACxC;AAAiB,aAAO,cAAc,GAAG;AAAA,EAAA;AAE7C;"}
+{"version":3,"file":"index316.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.types.ts"],"sourcesContent":["export type LiquidVariant = 'ink' | 'washi' | 'kaki' | 'celadon' | 'ghost' | 'danger';\nexport type LiquidSize    = 'sm' | 'md' | 'lg';\n\n/** Parámetros RGB de la física del agua — uno por variante */\nexport interface LiquidPalette {\n  /** Color del cuerpo de agua (fill) */\n  water: [number, number, number];\n  /** Color de los anillos de impacto (ripple) */\n  ripple: [number, number, number];\n}\n\nexport const LIQUID_PALETTES: Record<LiquidVariant, LiquidPalette> = {\n  ink:     { water: [184, 90,  30],  ripple: [255, 180, 100] },\n  washi:   { water: [34,  28,  22],  ripple: [90,  72,  56]  },\n  kaki:    { water: [140, 65,  21],  ripple: [255, 220, 180] },\n  celadon: { water: [36,  82,  73],  ripple: [160, 220, 200] },\n  ghost:   { water: [184, 165, 146], ripple: [140, 120, 100] },\n  danger:  { water: [140, 42,  26],  ripple: [220, 100, 80]  },\n};"],"names":[],"mappings":"AAWO,MAAM,kBAAwD;AAAA,EACnE,KAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,OAAS,EAAE,OAAO,CAAC,IAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,IAAK,IAAK,EAAE,EAAA;AAAA,EACxD,MAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,SAAS,EAAE,OAAO,CAAC,IAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,OAAS,EAAE,OAAO,CAAC,KAAK,KAAK,GAAG,GAAG,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,QAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,EAAE,EAAA;AAC1D;"}

package/dist/index317.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 styles = ":host{display:inline-block;touch-action:none}.magnetic-wrapper{display:inline-block;will-change:transform;transition:transform .3s cubic-bezier(.23,1,.32,1)}";
 export {
-  headerCss as default
+  styles as default
 };
 //# sourceMappingURL=index317.js.map