@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index23.js

@@ -0,0 +1,95 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { generateUniqueId } from "./index213.js";
+import buttonCss from "./index232.js";
+import sharedTokens from "./index196.js";
+import { buttonTemplate } from "./index233.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibButton = class extends LitElement {
+  constructor() {
+    super();
+    this.variant = "primary";
+    this.size = "md";
+    this.disabled = false;
+    this.glass = false;
+    this.type = "button";
+    this.customPadding = null;
+    this.ariaLabel = null;
+    this._buttonId = generateUniqueId("lib-button-");
+  }
+  /**
+   * Implementación del renderizado siguiendo la regla de tipado explícito.
+   */
+  render() {
+    return buttonTemplate({
+      buttonId: this._buttonId,
+      type: this.type,
+      disabled: this.disabled,
+      ariaLabel: this.ariaLabel ?? void 0,
+      handleClick: this._handleClick.bind(this),
+      variant: this.variant,
+      size: this.size,
+      glass: this.glass,
+      customPadding: this.customPadding ?? void 0
+    });
+  }
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-click", {
+        detail: { originalEvent: event, timestamp: Date.now() },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+LibButton.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(buttonCss)}
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButton.prototype, "glass", 2);
+__decorateClass([
+  property({ type: String })
+], LibButton.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, attribute: "custom-padding" })
+], LibButton.prototype, "customPadding", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibButton.prototype, "ariaLabel", 2);
+LibButton = __decorateClass([
+  customElement("lib-button")
+], LibButton);
+export {
+  LibButton
+};
+//# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index23.js","sources":["../src/components/atoms/button/lib-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSize, LibVariant, UiClickEventDetail } from '../../../types';\nimport buttonCss from './lib-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { buttonTemplate } from './lib-button.html';\n\n/**\n * @tag lib-button\n * @element lib-button\n * @fires ui-lib-click - Evento personalizado disparado al hacer clic.\n * @event lib-click\n * @csspart button - El elemento <button> nativo.\n */\n@customElement('lib-button')\nexport class LibButton extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(buttonCss)}\n    `\n  ];\n\n  private _buttonId: string;\n\n  constructor() {\n    super();\n    this._buttonId = generateUniqueId('lib-button-');\n  }\n\n  /**\n * @type {\"default\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"accent\"}\n */\n  @property({ type: String, reflect: true })\n  variant: LibVariant = 'primary';\n\n  /**\n * @type {\"sm\" | \"md\" | \"lg\" | \"xl\"}\n */\n  @property({ type: String, reflect: true })\n  size: LibSize = 'md';\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n/**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  glass = false;\n\n  /**\n * @type {'button' | 'submit' | 'reset'}\n */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'custom-padding' })\n  customPadding: string | null = null;\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Implementación del renderizado siguiendo la regla de tipado explícito.\n   */\n  override render(): TemplateResult {\n    return buttonTemplate({\n      buttonId: this._buttonId,\n      type: this.type,\n      disabled: this.disabled,\n      ariaLabel: this.ariaLabel ?? undefined,\n      handleClick: this._handleClick.bind(this),\n      variant: this.variant,\n      size: this.size,\n      glass:this.glass,\n      customPadding: this.customPadding ?? undefined,\n    });\n  }\n\n  private _handleClick(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<UiClickEventDetail>('ui-lib-click', {\n        detail: { originalEvent: event, timestamp: Date.now() },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button': LibButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAYxC,cAAc;AACZ,UAAA;AAQF,SAAA,UAAsB;AAMtB,SAAA,OAAgB;AAMhB,SAAA,WAAW;AAMX,SAAA,QAAQ;AAMR,SAAA,OAAsC;AAMtC,SAAA,gBAA+B;AAM/B,SAAS,YAA2B;AA3ClC,SAAK,YAAY,iBAAiB,aAAa;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EA+CS,SAAyB;AAChC,WAAO,eAAe;AAAA,MACpB,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,WAAW,KAAK,aAAa;AAAA,MAC7B,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,MACxC,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,OAAM,KAAK;AAAA,MACX,eAAe,KAAK,iBAAiB;AAAA,IAAA,CACtC;AAAA,EACH;AAAA,EAEQ,aAAa,OAAoB;AACvC,QAAI,KAAK,UAAU;AACjB,YAAM,eAAA;AACN,YAAM,gBAAA;AACN;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAgC,gBAAgB;AAAA,QAClD,QAAQ,EAAE,eAAe,OAAO,WAAW,KAAK,MAAI;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AA3Fa,UACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,SAAS,CAAC;AAAA;AAE1B;AAaA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,UAqBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,UA2BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAhC/B,UAiCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtC/B,UAuCX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Cf,UA6CX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GAlD5C,UAmDX,WAAA,iBAAA,CAAA;AAMS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAxDxC,UAyDF,WAAA,aAAA,CAAA;AAzDE,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/index230.js

@@ -0,0 +1,5 @@
+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 {
+  labelStyles as default
+};
+//# sourceMappingURL=index230.js.map

package/dist/index230.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index230.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index231.js

@@ -0,0 +1,5 @@
+const iconStyles = ":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}.icon-wrapper{display:flex;width:var(--lib-icon-size, 1em);height:var(--lib-icon-size, 1em);color:currentcolor}svg{display:block;width:100%!important;height:100%!important;fill:currentcolor}.variant-primary{color:var(--lib-color-primary)}.variant-secondary{color:var(--lib-color-secondary)}.variant-success{color:var(--lib-color-success)}.variant-danger{color:var(--lib-color-danger)}";
+export {
+  iconStyles as default
+};
+//# sourceMappingURL=index231.js.map

package/dist/index231.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index231.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index232.js

@@ -0,0 +1,5 @@
+const buttonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-sm) var(--lib-space-md);width:100%;border:var(--lib-border-width) solid transparent;border-radius:var(--radius-none);background:transparent;cursor:pointer;outline:none;text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.btn ::slotted(*){position:relative;z-index:1}.btn:active:not(:disabled){transform:translateY(1px)}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([disabled]) .btn{opacity:.38;cursor:not-allowed;pointer-events:none}:host([variant="primary"]) .btn{background:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="primary"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-kaki-400);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);z-index:0}:host([variant="primary"]) .btn:hover{box-shadow:var(--shadow-md)}:host([variant="primary"]) .btn:hover:after{transform:scaleX(1)}:host([variant="secondary"]) .btn{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}:host([variant="secondary"]) .btn:hover{background:var(--color-washi-900);color:var(--color-washi-50);border-color:var(--color-washi-900)}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .btn:hover{color:var(--text-primary);background:var(--color-ink-10)}:host([variant="accent"]) .btn{background:var(--color-kaki-400);color:var(--color-white)}:host([variant="accent"]) .btn:hover{background:var(--color-kaki-500);box-shadow:var(--shadow-md)}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border-color:var(--color-error)}:host([variant="danger"]) .btn:hover{background:var(--color-error);color:var(--color-white)}:host([glass]) .btn{border-radius:var(--radius-md);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);background:var(--lib-glass-bg);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow)}:host([glass]) .btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}:host([glass]) .btn:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-1px)}:host([glass][variant="primary"]) .btn{background:var(--lib-glass-bg-water);border-color:#ffffff40}:host([glass][variant="accent"]) .btn{background:var(--lib-glass-bg-kaki);border-color:#6d4d3e59}:host([glass][variant="primary"]) .btn:after{display:none}}';
+export {
+  buttonCss as default
+};
+//# sourceMappingURL=index232.js.map

package/dist/index232.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index232.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index233.js

@@ -0,0 +1,22 @@
+import { nothing, html } from "lit";
+function buttonTemplate(props) {
+  return html`
+    <button
+      id="${props.buttonId}"
+      type="${props.type}"
+      ?disabled="${props.disabled}"
+      aria-label="${props.ariaLabel ?? nothing}"
+      style="${props.customPadding ? `padding: ${props.customPadding}` : nothing}"
+      @click="${props.handleClick}"
+      class="btn"
+    >
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    </button>
+  `;
+}
+export {
+  buttonTemplate
+};
+//# sourceMappingURL=index233.js.map

package/dist/index233.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index233.js","sources":["../src/components/atoms/button/lib-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibSize, LibVariant } from '../../../types';\n\nexport interface ButtonTemplateProps {\n  buttonId: string;\n  type: 'button' | 'submit' | 'reset';\n  disabled: boolean;\n  ariaLabel?: string | undefined;\n  handleClick: (event: Event) => void;\n  variant: LibVariant;\n  size: LibSize;\n  glass: boolean;\n  customPadding?: string | undefined;\n}\n    \n/**\n * Plantilla base para el componente lib-button.\n * Renderiza un único <button> estilizado vía :host() selectors.\n */\nexport function buttonTemplate(props: ButtonTemplateProps): TemplateResult {\n  return html`\n    <button\n      id=\"${props.buttonId}\"\n      type=\"${props.type}\"\n      ?disabled=\"${props.disabled}\"\n      aria-label=\"${props.ariaLabel ?? nothing}\"\n      style=\"${props.customPadding ? `padding: ${props.customPadding}` : nothing}\"\n      @click=\"${props.handleClick}\"\n      class=\"btn\"\n    >\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAmBO,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA;AAAA,YAEG,MAAM,QAAQ;AAAA,cACZ,MAAM,IAAI;AAAA,mBACL,MAAM,QAAQ;AAAA,oBACb,MAAM,aAAa,OAAO;AAAA,eAC/B,MAAM,gBAAgB,YAAY,MAAM,aAAa,KAAK,OAAO;AAAA,gBAChE,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC;"}

package/dist/index234.js

@@ -0,0 +1,5 @@
+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 {
+  styles as default
+};
+//# sourceMappingURL=index234.js.map

package/dist/index234.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index234.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index235.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+function spotlightCardTemplate(props) {
+  return html`
+    <div
+      class="spotlight"
+      @mousemove=${props.onMouseMove}
+      @mouseleave=${props.onMouseLeave}
+    >
+      <div class="spotlight__layer"></div>
+      <div class="spotlight__slot">
+        <slot></slot>
+      </div>
+    </div>
+  `;
+}
+export {
+  spotlightCardTemplate
+};
+//# sourceMappingURL=index235.js.map

package/dist/index235.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index235.js","sources":["../src/components/atoms/spotlight-card/lib-spotlight-card.component.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibSpotlightVariant = 'kaki' | 'water' | 'white';\n\nexport interface SpotlightCardTemplateProps {\n  spotlight:      LibSpotlightVariant;\n  kintsugi:       boolean;\n  onMouseMove:    (e: MouseEvent) => void;\n  onMouseLeave:   () => void;\n}\n\n/**\n * Template del spotlight card.\n *\n * Arquitectura de capas (de abajo a arriba):\n *   1. .spotlight__layer  — gradiente radial reactivo al cursor (z-index 1)\n *   2. ::after (CSS)      — hilo kintsugi en el borde, solo si [kintsugi] (z-index 2)\n *   3. .spotlight__slot   — contenido slotado (z-index 3)\n *\n * El gradiente del spotlight se actualiza vía CSS custom properties\n * --lib-spotlight-x / --lib-spotlight-y actualizadas en el mousemove handler.\n */\nexport function spotlightCardTemplate(props: SpotlightCardTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"spotlight\"\n      @mousemove=${props.onMouseMove}\n      @mouseleave=${props.onMouseLeave}\n    >\n      <div class=\"spotlight__layer\"></div>\n      <div class=\"spotlight__slot\">\n        <slot></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAsBO,SAAS,sBAAsB,OAAmD;AACvF,SAAO;AAAA;AAAA;AAAA,mBAGU,MAAM,WAAW;AAAA,oBAChB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC;"}

package/dist/index236.js

@@ -0,0 +1,5 @@
+const spotlightCss = '@layer tokens,reset,components;@layer reset{:host{display:block;--lib-spotlight-x: 50%;--lib-spotlight-y: 50%}*,*:before,*:after{box-sizing:border-box}}@layer components{.spotlight{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#0b181c;border:1px solid oklch(100% 0 0deg / .08);cursor:crosshair;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.spotlight:hover{border-color:#ffffff26;box-shadow:0 8px 32px #0006}:host([kintsugi]) .spotlight{background:#190f0a}:host([kintsugi]) .spotlight:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}.spotlight__layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;background:var(--lib-spotlight-gradient);opacity:0;transition:opacity var(--duration-base) var(--ease-default);z-index:1}.spotlight:hover .spotlight__layer{opacity:1}:host([spotlight="water"]) .spotlight__layer{background:var(--lib-spotlight-gradient-water)}:host([spotlight="white"]) .spotlight__layer{background:var(--lib-spotlight-gradient-white)}.spotlight__slot{position:relative;z-index:3}}';
+export {
+  spotlightCss as default
+};
+//# sourceMappingURL=index236.js.map

package/dist/index236.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index236.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index237.js

@@ -0,0 +1,45 @@
+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 {
+  counterTemplate
+};
+//# sourceMappingURL=index237.js.map

package/dist/index237.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index237.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/index238.js

@@ -0,0 +1,5 @@
+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 {
+  counterCss as default
+};
+//# sourceMappingURL=index238.js.map

package/dist/index238.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index238.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index239.js

@@ -0,0 +1,30 @@
+import { html } from "lit";
+function dividerCenter(props) {
+  if (props.ornament === "dot") {
+    return html`<span class="dv__ornament dv__ornament--dot"></span>`;
+  }
+  if (props.ornament === "diamond") {
+    return html`<span class="dv__ornament dv__ornament--diamond"></span>`;
+  }
+  if (props.hasSlotContent) {
+    return html`
+      <span class="dv__label dv__label--${props.labelStyle}">
+        <slot @slotchange="${props.onSlotChange}"></slot>
+      </span>
+    `;
+  }
+  return html`<slot @slotchange="${props.onSlotChange}" style="display:none"></slot>`;
+}
+function dividerTemplate(props) {
+  return html`
+    <div class="dv">
+      <span class="dv__line"></span>
+      ${dividerCenter(props)}
+      <span class="dv__line"></span>
+    </div>
+  `;
+}
+export {
+  dividerTemplate
+};
+//# sourceMappingURL=index239.js.map

package/dist/index239.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index239.js","sources":["../src/components/atoms/divider/lib-divider.component.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibDividerStyle     = 'hairline' | 'default' | 'strong' | 'heavy' | 'dashed' | 'dotted' | 'gradient';\nexport type LibDividerColor     = 'default' | 'kaki' | 'celadon';\nexport type LibDividerAlign     = 'left' | 'center' | 'right';\nexport type LibDividerOrnament  = 'none' | 'dot' | 'diamond';\nexport type LibDividerLabelStyle = 'mono' | 'display' | 'kanji';\nexport type LibDividerOrientation = 'horizontal' | 'vertical';\n\nexport interface DividerTemplateProps {\n  orientation: LibDividerOrientation;\n  style: LibDividerStyle;\n  color: LibDividerColor;\n  align: LibDividerAlign;\n  ornament: LibDividerOrnament;\n  labelStyle: LibDividerLabelStyle;\n  hasSlotContent: boolean;\n  onSlotChange: (e: Event) => void;\n}\n\n/**\n * Renderiza el contenido central del divider:\n *   - ornament (dot / diamond) si está activo\n *   - slot con label si hay contenido slotado\n *   - nada si es una línea pura\n *\n * Las dos .dv-line siempre se renderizan.\n * La alineación izquierda/derecha la gestiona CSS via :host([align]).\n */\nfunction dividerCenter(props: DividerTemplateProps): TemplateResult | typeof nothing {\n  if (props.ornament === 'dot') {\n    return html`<span class=\"dv__ornament dv__ornament--dot\"></span>`;\n  }\n  if (props.ornament === 'diamond') {\n    return html`<span class=\"dv__ornament dv__ornament--diamond\"></span>`;\n  }\n  if (props.hasSlotContent) {\n    return html`\n      <span class=\"dv__label dv__label--${props.labelStyle}\">\n        <slot @slotchange=\"${props.onSlotChange}\"></slot>\n      </span>\n    `;\n  }\n  // Slot vacío — lo mantenemos para detectar cambios futuros\n  return html`<slot @slotchange=\"${props.onSlotChange}\" style=\"display:none\"></slot>`;\n}\n\nexport function dividerTemplate(props: DividerTemplateProps): TemplateResult {\n  return html`\n    <div class=\"dv\">\n      <span class=\"dv__line\"></span>\n      ${dividerCenter(props)}\n      <span class=\"dv__line\"></span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AA6BA,SAAS,cAAc,OAA8D;AACnF,MAAI,MAAM,aAAa,OAAO;AAC5B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,aAAa,WAAW;AAChC,WAAO;AAAA,EACT;AACA,MAAI,MAAM,gBAAgB;AACxB,WAAO;AAAA,0CAC+B,MAAM,UAAU;AAAA,6BAC7B,MAAM,YAAY;AAAA;AAAA;AAAA,EAG7C;AAEA,SAAO,0BAA0B,MAAM,YAAY;AACrD;AAEO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA;AAAA,QAGD,cAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAI5B;"}

package/dist/index24.js

@@ -0,0 +1,55 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import styles from "./index234.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibMagnetic = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.shift = 0.4;
+  }
+  render() {
+    return html`
+      <div 
+        class="magnetic-wrapper"
+        @mousemove=${this._handleMouseMove}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+  _handleMouseMove(e) {
+    const { left, top, width, height } = this.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    const deltaX = (e.clientX - centerX) * this.shift;
+    const deltaY = (e.clientY - centerY) * this.shift;
+    this._wrapper.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+  }
+  _handleMouseLeave() {
+    this._wrapper.style.transform = `translate(0px, 0px)`;
+  }
+};
+LibMagnetic.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Number })
+], LibMagnetic.prototype, "shift", 2);
+__decorateClass([
+  query(".magnetic-wrapper")
+], LibMagnetic.prototype, "_wrapper", 2);
+LibMagnetic = __decorateClass([
+  customElement("lib-magnetic")
+], LibMagnetic);
+export {
+  LibMagnetic
+};
+//# sourceMappingURL=index24.js.map

package/dist/index24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index24.js","sources":["../src/components/atoms/magnetic/lib-magnetic.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport styles from './lib-magnetic.css?inline';\n\n@customElement('lib-magnetic')\nexport class LibMagnetic extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  /**\n   * Intensidad del efecto (0.1 a 1). \n   * Valores más altos hacen que el elemento siga más de cerca al ratón.\n   */\n  @property({ type: Number }) shift = 0.4;\n\n  @query('.magnetic-wrapper') _wrapper!: HTMLElement;\n\n  override render():TemplateResult {\n    return html`\n      <div \n        class=\"magnetic-wrapper\"\n        @mousemove=${this._handleMouseMove}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private _handleMouseMove(e: MouseEvent):void {\n    const { left, top, width, height } = this.getBoundingClientRect();\n    \n    // Calculamos la distancia del cursor respecto al centro del elemento\n    const centerX = left + width / 2;\n    const centerY = top + height / 2;\n    \n    const deltaX = (e.clientX - centerX) * this.shift;\n    const deltaY = (e.clientY - centerY) * this.shift;\n\n    this._wrapper.style.transform = `translate(${deltaX}px, ${deltaY}px)`;\n  }\n\n  private _handleMouseLeave():void {\n    // Retorno suave a la posición inicial\n    this._wrapper.style.transform = `translate(0px, 0px)`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-magnetic': LibMagnetic;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;AAKO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOuB,SAAA,QAAQ;AAAA,EAAA;AAAA,EAI3B,SAAwB;AAC/B,WAAO;AAAA;AAAA;AAAA,qBAGU,KAAK,gBAAgB;AAAA,sBACpB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C;AAAA,EAEQ,iBAAiB,GAAoB;AAC3C,UAAM,EAAE,MAAM,KAAK,OAAO,OAAA,IAAW,KAAK,sBAAA;AAG1C,UAAM,UAAU,OAAO,QAAQ;AAC/B,UAAM,UAAU,MAAM,SAAS;AAE/B,UAAM,UAAU,EAAE,UAAU,WAAW,KAAK;AAC5C,UAAM,UAAU,EAAE,UAAU,WAAW,KAAK;AAE5C,SAAK,SAAS,MAAM,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,EAClE;AAAA,EAEQ,oBAAyB;AAE/B,SAAK,SAAS,MAAM,YAAY;AAAA,EAClC;AACF;AAxCa,YACK,SAAS,UAAU,MAAM;AAMb,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,YAOiB,WAAA,SAAA,CAAA;AAEA,gBAAA;AAAA,EAA3B,MAAM,mBAAmB;AAAA,GATf,YASiB,WAAA,YAAA,CAAA;AATjB,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/index240.js

@@ -0,0 +1,5 @@
+const dividerCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}:host([orientation="vertical"]){display:inline-flex;width:auto;height:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.dv{display:flex;align-items:center;width:100%;gap:var(--lib-space-md)}:host([orientation="vertical"]) .dv{flex-direction:column;width:auto;height:100%;gap:var(--lib-space-sm)}.dv__line{flex:1;min-width:0;min-height:0;height:1px;width:auto;background:var(--border-subtle)}:host([orientation="vertical"]) .dv__line{height:auto;width:1px}:host([style-variant="default"]) .dv__line{background:var(--border-default)}:host([style-variant="strong"]) .dv__line{height:2px;background:var(--border-strong)}:host([style-variant="heavy"]) .dv__line{height:4px;background:var(--color-washi-900)}:host([style-variant="dashed"]) .dv__line{background:none;border-top:1px dashed var(--border-default);height:0}:host([style-variant="dotted"]) .dv__line{background:none;border-top:1px dotted var(--color-washi-400);height:0}:host([style-variant="gradient"]) .dv__line{background:linear-gradient(to right,transparent 0%,var(--border-default) 20%,var(--border-default) 80%,transparent 100%)}:host([orientation="vertical"][style-variant="default"]) .dv__line{background:var(--border-default)}:host([orientation="vertical"][style-variant="strong"]) .dv__line{width:2px;background:var(--border-strong);height:auto}:host([orientation="vertical"][style-variant="dashed"]) .dv__line{background:none;border-left:1px dashed var(--border-default);width:0}:host([orientation="vertical"][style-variant="gradient"]) .dv__line{background:linear-gradient(to bottom,transparent 0%,var(--border-default) 20%,var(--border-default) 80%,transparent 100%)}:host([color="kaki"]) .dv__line{background:var(--color-kaki-500);height:2px}:host([color="celadon"]) .dv__line{background:var(--color-celadon-500);height:2px}:host([align="left"]) .dv__line:first-child{max-width:24px}:host([align="right"]) .dv__line:last-child{max-width:24px}.dv__ornament{flex-shrink:0}.dv__ornament--dot{width:5px;height:5px;border-radius:var(--radius-full);background:var(--color-washi-400)}.dv__ornament--diamond{width:6px;height:6px;background:var(--color-washi-400);transform:rotate(45deg)}:host([color="kaki"]) .dv__ornament{background:var(--color-kaki-500)}:host([color="celadon"]) .dv__ornament{background:var(--color-celadon-500)}.dv__label{flex-shrink:0;white-space:nowrap;line-height:1}.dv__label--mono{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}.dv__label--display{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-secondary);text-transform:none;font-style:italic}.dv__label--kanji{font-family:var(--lib-font-display);font-size:1.25rem;color:var(--color-washi-300);line-height:1;text-transform:none}:host([color="kaki"]) .dv__label--mono{color:var(--color-kaki-500)}}';
+export {
+  dividerCss as default
+};
+//# sourceMappingURL=index240.js.map

package/dist/index240.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index240.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index241.js

@@ -0,0 +1,37 @@
+import { noChange as E } from "./index358.js";
+import { directive as e, Directive as i$1, PartType as t } from "./index359.js";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const n = "important", i = " !" + n, o = e(class extends i$1 {
+  constructor(t$1) {
+    var _a;
+    if (super(t$1), t$1.type !== t.ATTRIBUTE || "style" !== t$1.name || ((_a = t$1.strings) == null ? void 0 : _a.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+  }
+  render(t2) {
+    return Object.keys(t2).reduce((e2, r) => {
+      const s = t2[r];
+      return null == s ? e2 : e2 + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
+  }
+  update(e2, [r]) {
+    const { style: s } = e2.element;
+    if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+    for (const t2 of this.ft) null == r[t2] && (this.ft.delete(t2), t2.includes("-") ? s.removeProperty(t2) : s[t2] = null);
+    for (const t2 in r) {
+      const e3 = r[t2];
+      if (null != e3) {
+        this.ft.add(t2);
+        const r2 = "string" == typeof e3 && e3.endsWith(i);
+        t2.includes("-") || r2 ? s.setProperty(t2, r2 ? e3.slice(0, -11) : e3, r2 ? n : "") : s[t2] = e3;
+      }
+    }
+    return E;
+  }
+});
+export {
+  o as styleMap
+};
+//# sourceMappingURL=index241.js.map

package/dist/index241.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index241.js","sources":["../../../node_modules/lit-html/directives/style-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n"],"names":["r","t","s","e"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIQ,MAAC,IAAE,aAAY,IAAE,OAAK,GAAE,IAAE,EAAE,cAAcA,IAAC;AAAA,EAAC,YAAYC,KAAE;;AAAC,QAAG,MAAMA,GAAC,GAAEA,IAAE,SAAOC,EAAE,aAAW,YAAUD,IAAE,UAAMA,SAAE,YAAFA,mBAAW,UAAO,EAAE,OAAM,MAAM,4GAA4G;AAAA,EAAC;AAAA,EAAC,OAAOA,IAAE;AAAC,WAAO,OAAO,KAAKA,EAAC,EAAE,OAAO,CAACE,IAAE,MAAI;AAAC,YAAM,IAAEF,GAAE,CAAC;AAAE,aAAO,QAAM,IAAEE,KAAEA,KAAE,GAAG,IAAE,EAAE,SAAS,GAAG,IAAE,IAAE,EAAE,QAAQ,qCAAoC,KAAK,EAAE,YAAW,CAAE,IAAI,CAAC;AAAA,IAAG,GAAE,EAAE;AAAA,EAAC;AAAA,EAAC,OAAOA,IAAE,CAAC,CAAC,GAAE;AAAC,UAAK,EAAC,OAAM,EAAC,IAAEA,GAAE;AAAQ,QAAG,WAAS,KAAK,GAAG,QAAO,KAAK,KAAG,IAAI,IAAI,OAAO,KAAK,CAAC,CAAC,GAAE,KAAK,OAAO,CAAC;AAAE,eAAUF,MAAK,KAAK,GAAG,SAAM,EAAEA,EAAC,MAAI,KAAK,GAAG,OAAOA,EAAC,GAAEA,GAAE,SAAS,GAAG,IAAE,EAAE,eAAeA,EAAC,IAAE,EAAEA,EAAC,IAAE;AAAM,eAAUA,MAAK,GAAE;AAAC,YAAME,KAAE,EAAEF,EAAC;AAAE,UAAG,QAAME,IAAE;AAAC,aAAK,GAAG,IAAIF,EAAC;AAAE,cAAMD,KAAE,YAAU,OAAOG,MAAGA,GAAE,SAAS,CAAC;AAAE,QAAAF,GAAE,SAAS,GAAG,KAAGD,KAAE,EAAE,YAAYC,IAAED,KAAEG,GAAE,MAAM,GAAE,GAAG,IAAEA,IAAEH,KAAE,IAAE,EAAE,IAAE,EAAEC,EAAC,IAAEE;AAAA,MAAC;AAAA,IAAC;AAAC,WAAOF;AAAAA,EAAC;AAAC,CAAC;","x_google_ignoreList":[0]}

package/dist/index242.js

@@ -0,0 +1,17 @@
+import { html } from "lit";
+const rippleTemplate = (ripples) => {
+  return html`
+    ${ripples.map((r) => html`
+      <span class="ripple" style="
+        width: ${r.size}px;
+        height: ${r.size}px;
+        left: ${r.x}px;
+        top: ${r.y}px;
+      "></span>
+    `)}
+  `;
+};
+export {
+  rippleTemplate
+};
+//# sourceMappingURL=index242.js.map

package/dist/index242.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index242.js","sources":["../src/components/atoms/ripple/lib-ripple.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { RippleEffect } from './lib-ripple.component';\n\nexport const rippleTemplate = (ripples: RippleEffect[]): TemplateResult => {\n  return html`\n    ${ripples.map(r => html`\n      <span class=\"ripple\" style=\"\n        width: ${r.size}px;\n        height: ${r.size}px;\n        left: ${r.x}px;\n        top: ${r.y}px;\n      \"></span>\n    `)}\n  `;\n};"],"names":[],"mappings":";AAGO,MAAM,iBAAiB,CAAC,YAA4C;AACzE,SAAO;AAAA,MACH,QAAQ,IAAI,CAAA,MAAK;AAAA;AAAA,iBAEN,EAAE,IAAI;AAAA,kBACL,EAAE,IAAI;AAAA,gBACR,EAAE,CAAC;AAAA,eACJ,EAAE,CAAC;AAAA;AAAA,KAEb,CAAC;AAAA;AAEN;"}

package/dist/index243.js

@@ -0,0 +1,5 @@
+const styles = "@layer components{:host{display:block;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:10}.ripple{position:absolute;border-radius:50%;background-color:var(--lib-ripple-color, orange);opacity:.2;transform:scale(0);animation:ripple-animation var(--duration-slower, .6s) var(--ease-out) forwards;pointer-events:none}@keyframes ripple-animation{to{transform:scale(1);opacity:0}}}";
+export {
+  styles as default
+};
+//# sourceMappingURL=index243.js.map

package/dist/index243.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index243.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index244.js

@@ -0,0 +1,12 @@
+import { html } from "lit";
+const aspectRatioTemplate = () => {
+  return html`
+    <div class="aspect-ratio-container">
+      <slot></slot>
+    </div>
+  `;
+};
+export {
+  aspectRatioTemplate
+};
+//# sourceMappingURL=index244.js.map

package/dist/index244.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index244.js","sources":["../src/components/atoms/aspect-ratio/lib-aspect-ratio.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport const aspectRatioTemplate = (): TemplateResult => {\n  return html`\n    <div class=\"aspect-ratio-container\">\n      <slot></slot>\n    </div>\n  `;\n};"],"names":[],"mappings":";AAEO,MAAM,sBAAsB,MAAsB;AACvD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;"}

package/dist/index245.js

@@ -0,0 +1,5 @@
+const styles = "@layer components{:host{display:block;width:100%}.aspect-ratio-container{position:relative;width:100%;aspect-ratio:var(--lib-aspect-ratio, 1 / 1)}::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}}";
+export {
+  styles as default
+};
+//# sourceMappingURL=index245.js.map

package/dist/index245.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index245.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index246.js

@@ -0,0 +1,8 @@
+import { html } from "lit";
+const visuallyHiddenTemplate = () => {
+  return html`<slot></slot>`;
+};
+export {
+  visuallyHiddenTemplate
+};
+//# sourceMappingURL=index246.js.map

package/dist/index246.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index246.js","sources":["../src/components/atoms/visually-hidden/lib-visually-hidden.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport const visuallyHiddenTemplate = (): TemplateResult => {\n  return html`<slot></slot>`;\n};"],"names":[],"mappings":";AAEO,MAAM,yBAAyB,MAAsB;AAC1D,SAAO;AACT;"}

package/dist/index247.js

@@ -0,0 +1,5 @@
+const styles = "@layer components{:host{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}}";
+export {
+  styles as default
+};
+//# sourceMappingURL=index247.js.map

package/dist/index247.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index247.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index248.js

@@ -0,0 +1,39 @@
+import { html, nothing } from "lit";
+const checkSvg = html`
+  <svg class="checkbox__check" viewBox="0 0 10 10" aria-hidden="true">
+    <polyline points="1.5,5 4,7.5 8.5,2"/>
+  </svg>
+`;
+const dashEl = html`<span class="checkbox__dash" aria-hidden="true"></span>`;
+function checkboxTemplate(props) {
+  return html`
+    <label class="checkbox">
+
+      <input
+        class="checkbox__input"
+        type="checkbox"
+        .checked="${props.checked}"
+        .indeterminate="${props.indeterminate}"
+        ?disabled="${props.disabled}"
+        value="${props.value}"
+        @change="${props.onChange}"
+      />
+
+      <span class="checkbox__box">
+        ${props.indeterminate ? dashEl : checkSvg}
+      </span>
+
+      ${props.label || props.sublabel ? html`
+            <span class="checkbox__label">
+              ${props.label ? html`<span class="checkbox__label-text">${props.label}</span>` : nothing}
+              ${props.sublabel ? html`<span class="checkbox__label-sub">${props.sublabel}</span>` : nothing}
+            </span>
+          ` : html`<slot></slot>`}
+
+    </label>
+  `;
+}
+export {
+  checkboxTemplate
+};
+//# sourceMappingURL=index248.js.map

package/dist/index248.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index248.js","sources":["../src/components/atoms/checkbox/lib-checkbox.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibCheckboxSize    = 'sm' | 'md' | 'lg';\nexport type LibCheckboxVariant = 'default' | 'kaki' | 'error';\n\nexport interface CheckboxTemplateProps {\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n  label: string;\n  sublabel: string;\n  value: string;\n  size: LibCheckboxSize;\n  variant: LibCheckboxVariant;\n  onChange: (e: Event) => void;\n}\n\n/** SVG check — polyline del styleguide, animado con ease-bounce */\nconst checkSvg = html`\n  <svg class=\"checkbox__check\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n    <polyline points=\"1.5,5 4,7.5 8.5,2\"/>\n  </svg>\n`;\n\n/** SVG dash — estado indeterminate */\nconst dashEl = html`<span class=\"checkbox__dash\" aria-hidden=\"true\"></span>`;\n\n/**\n * Plantilla para lib-checkbox.\n *\n * Estructura:\n *   label.checkbox\n *     input[type=checkbox]  (capa de interaccion, invisible)\n *     span.checkbox__box    (visual: box + check/dash)\n *     span.checkbox__label  (label-text + sublabel opcional)\n */\nexport function checkboxTemplate(props: CheckboxTemplateProps): TemplateResult {\n  return html`\n    <label class=\"checkbox\">\n\n      <input\n        class=\"checkbox__input\"\n        type=\"checkbox\"\n        .checked=\"${props.checked}\"\n        .indeterminate=\"${props.indeterminate}\"\n        ?disabled=\"${props.disabled}\"\n        value=\"${props.value}\"\n        @change=\"${props.onChange}\"\n      />\n\n      <span class=\"checkbox__box\">\n        ${props.indeterminate ? dashEl : checkSvg}\n      </span>\n\n      ${props.label || props.sublabel\n        ? html`\n            <span class=\"checkbox__label\">\n              ${props.label\n                ? html`<span class=\"checkbox__label-text\">${props.label}</span>`\n                : nothing}\n              ${props.sublabel\n                ? html`<span class=\"checkbox__label-sub\">${props.sublabel}</span>`\n                : nothing}\n            </span>\n          `\n        : html`<slot></slot>`}\n\n    </label>\n  `;\n}"],"names":[],"mappings":";AAkBA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAOjB,MAAM,SAAS;AAWR,SAAS,iBAAiB,OAA8C;AAC7E,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMW,MAAM,OAAO;AAAA,0BACP,MAAM,aAAa;AAAA,qBACxB,MAAM,QAAQ;AAAA,iBAClB,MAAM,KAAK;AAAA,mBACT,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIvB,MAAM,gBAAgB,SAAS,QAAQ;AAAA;AAAA;AAAA,QAGzC,MAAM,SAAS,MAAM,WACnB;AAAA;AAAA,gBAEM,MAAM,QACJ,0CAA0C,MAAM,KAAK,YACrD,OAAO;AAAA,gBACT,MAAM,WACJ,yCAAyC,MAAM,QAAQ,YACvD,OAAO;AAAA;AAAA,cAGf,mBAAmB;AAAA;AAAA;AAAA;AAI7B;"}

package/dist/index249.js

@@ -0,0 +1,5 @@
+const checkboxCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box}}@layer components{.checkbox{display:inline-flex;align-items:flex-start;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none}:host([disabled]) .checkbox{cursor:not-allowed;opacity:.4;pointer-events:none}.checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}.checkbox__box{width:18px;height:18px;flex-shrink:0;margin-top:2px;border:1px solid var(--border-default);background:var(--bg-elevated);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.checkbox:hover .checkbox__box{border-color:var(--border-strong)}.checkbox__input:focus-visible~.checkbox__box,.checkbox:focus-within .checkbox__box{box-shadow:0 0 0 3px var(--color-ink-20);border-color:var(--color-washi-700)}:host([checked]) .checkbox__box{background:var(--color-washi-900);border-color:var(--color-washi-900)}:host([indeterminate]) .checkbox__box{background:var(--color-washi-900);border-color:var(--color-washi-900)}.checkbox__check{width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([checked]) .checkbox__check{opacity:1;transform:scale(1)}.checkbox__dash{width:8px;height:2px;background:#fff;border-radius:1px;opacity:0;transform:scaleX(.4);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([indeterminate]) .checkbox__dash{opacity:1;transform:scaleX(1)}.checkbox__label{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.checkbox__label-text{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);line-height:var(--leading-snug);transition:color var(--duration-fast)}.checkbox__label-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);line-height:var(--leading-snug)}:host([size="sm"]) .checkbox__box{width:14px;height:14px}:host([size="sm"]) .checkbox__check{width:8px;height:8px;stroke-width:2.5}:host([size="sm"]) .checkbox__dash{width:6px;height:1.5px}:host([size="sm"]) .checkbox__label-text{font-size:var(--text-sm)}:host([size="lg"]) .checkbox__box{width:22px;height:22px}:host([size="lg"]) .checkbox__check{width:13px;height:13px}:host([size="lg"]) .checkbox__dash{width:10px;height:2.5px}:host([size="lg"]) .checkbox__label-text{font-size:var(--text-md)}:host([variant="kaki"][checked]) .checkbox__box,:host([variant="kaki"][indeterminate]) .checkbox__box{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([variant="kaki"]) .checkbox:hover .checkbox__box{border-color:var(--color-kaki-400)}:host([variant="kaki"]) .checkbox:focus-within .checkbox__box{box-shadow:0 0 0 3px #6d4d3e1f;border-color:var(--color-kaki-500)}:host([variant="error"]) .checkbox__box{border-color:var(--color-error)}:host([variant="error"]) .checkbox:hover .checkbox__box{border-color:var(--color-error)}:host([variant="error"]) .checkbox__label-text{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.checkbox__box,.checkbox__check,.checkbox__dash{transition:none}}}';
+export {
+  checkboxCss as default
+};
+//# sourceMappingURL=index249.js.map

package/dist/index249.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index249.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}