@shibui-ui/ui 1.5.5

package/dist/index25.js

@@ -0,0 +1,58 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { spotlightCardTemplate } from "./index235.js";
+import spotlightCss from "./index236.js";
+import sharedTokens from "./index196.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 LibSpotlightCard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.spotlight = "kaki";
+    this.kintsugi = false;
+  }
+  render() {
+    return spotlightCardTemplate({
+      spotlight: this.spotlight,
+      kintsugi: this.kintsugi,
+      onMouseMove: this._handleMouseMove.bind(this),
+      onMouseLeave: this._handleMouseLeave.bind(this)
+    });
+  }
+  _handleMouseMove(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width * 100;
+    const y = (e.clientY - rect.top) / rect.height * 100;
+    this.style.setProperty("--lib-spotlight-x", `${x}%`);
+    this.style.setProperty("--lib-spotlight-y", `${y}%`);
+  }
+  _handleMouseLeave() {
+    this.style.setProperty("--lib-spotlight-x", "50%");
+    this.style.setProperty("--lib-spotlight-y", "50%");
+  }
+};
+LibSpotlightCard.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(spotlightCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibSpotlightCard.prototype, "spotlight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibSpotlightCard.prototype, "kintsugi", 2);
+LibSpotlightCard = __decorateClass([
+  customElement("lib-spotlight-card")
+], LibSpotlightCard);
+export {
+  LibSpotlightCard
+};
+//# sourceMappingURL=index25.js.map

package/dist/index25.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index25.js","sources":["../src/components/atoms/spotlight-card/lib-spotlight-card.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibSpotlightVariant } from './lib-spotlight-card.component.html';\nimport { spotlightCardTemplate } from './lib-spotlight-card.component.html';\nimport spotlightCss from './lib-spotlight-card.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-spotlight-card\n *\n * Contenedor con foco de luz reactivo al cursor (Kintsugi Digital).\n * El gradiente radial sigue al puntero actualizando\n * `--lib-spotlight-x` y `--lib-spotlight-y` en :host.\n *\n * Con `kintsugi` activo añade el hilo de oro en el borde\n * y cambia el fondo a un tono cálido oscuro.\n *\n * @slot - Contenido de la card.\n *\n * @example — spotlight kaki\n * <lib-spotlight-card>...</lib-spotlight-card>\n *\n * @example — spotlight water\n * <lib-spotlight-card spotlight=\"water\">...</lib-spotlight-card>\n *\n * @example — kintsugi border + spotlight kaki\n * <lib-spotlight-card kintsugi>...</lib-spotlight-card>\n */\n@customElement('lib-spotlight-card')\nexport class LibSpotlightCard extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(spotlightCss)}`,\n  ];\n\n  /**\n   * Color del foco de luz.\n   * - kaki  : orgánico cálido — oklch(45% 0.05 45)  [default]\n   * - water : azul sereno    — oklch(55% 0.06 210)\n   * - white : neutro         — oklch(100% 0 0)\n   *\n   * Nota: cuando `kintsugi` está activo el spotlight es siempre kaki.\n   */\n  @property({ type: String, reflect: true })\n  spotlight: LibSpotlightVariant = 'kaki';\n\n  /**\n   * Activa el hilo de oro en el borde (--lib-kintsugi-border)\n   * y cambia el fondo del contenedor a un tono cálido oscuro.\n   */\n  @property({ type: Boolean, reflect: true })\n  kintsugi = false;\n\n  override render(): TemplateResult {\n    return spotlightCardTemplate({\n      spotlight:    this.spotlight,\n      kintsugi:     this.kintsugi,\n      onMouseMove:  this._handleMouseMove.bind(this),\n      onMouseLeave: this._handleMouseLeave.bind(this),\n    });\n  }\n\n  private _handleMouseMove(e: MouseEvent): void {\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width)  * 100;\n    const y = ((e.clientY - rect.top)  / rect.height) * 100;\n\n    // Actualiza las custom properties en :host\n    // El radial-gradient del CSS las consume automáticamente\n    this.style.setProperty('--lib-spotlight-x', `${x}%`);\n    this.style.setProperty('--lib-spotlight-y', `${y}%`);\n  }\n\n  private _handleMouseLeave(): void {\n    // Resetea al centro — la layer se oculta vía CSS opacity: 0\n    this.style.setProperty('--lib-spotlight-x', '50%');\n    this.style.setProperty('--lib-spotlight-y', '50%');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-spotlight-card': LibSpotlightCard;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6BO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAeL,SAAA,YAAiC;AAOjC,SAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAyB;AAChC,WAAO,sBAAsB;AAAA,MAC3B,WAAc,KAAK;AAAA,MACnB,UAAc,KAAK;AAAA,MACnB,aAAc,KAAK,iBAAiB,KAAK,IAAI;AAAA,MAC7C,cAAc,KAAK,kBAAkB,KAAK,IAAI;AAAA,IAAA,CAC/C;AAAA,EACH;AAAA,EAEQ,iBAAiB,GAAqB;AAC5C,UAAM,OAAQ,EAAE,cAA8B,sBAAA;AAC9C,UAAM,KAAM,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAU;AACpD,UAAM,KAAM,EAAE,UAAU,KAAK,OAAQ,KAAK,SAAU;AAIpD,SAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AACnD,SAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AAAA,EACrD;AAAA,EAEQ,oBAA0B;AAEhC,SAAK,MAAM,YAAY,qBAAqB,KAAK;AACjD,SAAK,MAAM,YAAY,qBAAqB,KAAK;AAAA,EACnD;AACF;AAjDa,iBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAd9B,iBAeX,WAAA,aAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArB/B,iBAsBX,WAAA,YAAA,CAAA;AAtBW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}

package/dist/index250.js

@@ -0,0 +1,34 @@
+import { nothing, html } from "lit";
+function radioTemplate(props) {
+  return html`
+    <label class="radio">
+
+      <input
+        class="radio__input"
+        type="radio"
+        id="${props.radioId}"
+        name="${props.name}"
+        value="${props.value}"
+        .checked="${props.checked}"
+        ?disabled="${props.disabled}"
+        @change="${props.onChange}"
+      />
+
+      <span class="radio__circle">
+        <span class="radio__dot"></span>
+      </span>
+
+      ${props.label || props.sublabel ? html`
+            <span class="radio__label">
+              ${props.label ? html`<span class="radio__label-text">${props.label}</span>` : nothing}
+              ${props.sublabel ? html`<span class="radio__label-sub">${props.sublabel}</span>` : nothing}
+            </span>
+          ` : html`<slot></slot>`}
+
+    </label>
+  `;
+}
+export {
+  radioTemplate
+};
+//# sourceMappingURL=index250.js.map

package/dist/index250.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index250.js","sources":["../src/components/atoms/radio/lib-radio.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibRadioSize    = 'sm' | 'md' | 'lg';\nexport type LibRadioVariant = 'default' | 'kaki' | 'error';\n\nexport interface RadioTemplateProps {\n  radioId: string;\n  name: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  label: string;\n  sublabel: string;\n  size: LibRadioSize;\n  variant: LibRadioVariant;\n  onChange: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-radio.\n *\n * Estructura:\n *   label.radio\n *     input[type=radio]   (invisible, capa de interaccion)\n *     span.radio__circle  (visual: circulo + dot interior)\n *     span.radio__label   (label-text + sublabel opcional)\n */\nexport function radioTemplate(props: RadioTemplateProps): TemplateResult {\n  return html`\n    <label class=\"radio\">\n\n      <input\n        class=\"radio__input\"\n        type=\"radio\"\n        id=\"${props.radioId}\"\n        name=\"${props.name}\"\n        value=\"${props.value}\"\n        .checked=\"${props.checked}\"\n        ?disabled=\"${props.disabled}\"\n        @change=\"${props.onChange}\"\n      />\n\n      <span class=\"radio__circle\">\n        <span class=\"radio__dot\"></span>\n      </span>\n\n      ${props.label || props.sublabel\n        ? html`\n            <span class=\"radio__label\">\n              ${props.label\n                ? html`<span class=\"radio__label-text\">${props.label}</span>`\n                : nothing}\n              ${props.sublabel\n                ? html`<span class=\"radio__label-sub\">${props.sublabel}</span>`\n                : nothing}\n            </span>\n          `\n        : html`<slot></slot>`}\n\n    </label>\n  `;\n}"],"names":[],"mappings":";AA2BO,SAAS,cAAc,OAA2C;AACvE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMK,MAAM,OAAO;AAAA,gBACX,MAAM,IAAI;AAAA,iBACT,MAAM,KAAK;AAAA,oBACR,MAAM,OAAO;AAAA,qBACZ,MAAM,QAAQ;AAAA,mBAChB,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOzB,MAAM,SAAS,MAAM,WACnB;AAAA;AAAA,gBAEM,MAAM,QACJ,uCAAuC,MAAM,KAAK,YAClD,OAAO;AAAA,gBACT,MAAM,WACJ,sCAAsC,MAAM,QAAQ,YACpD,OAAO;AAAA;AAAA,cAGf,mBAAmB;AAAA;AAAA;AAAA;AAI7B;"}

package/dist/index251.js

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

package/dist/index251.js.map

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

package/dist/index252.js

@@ -0,0 +1,22 @@
+import { html } from "lit";
+function kbdTemplate(props) {
+  const { size, variant, pressed, onDown, onUp, onLeave } = props;
+  const variantClass = variant !== "default" ? ` kbd-${variant}` : "";
+  const pressedClass = pressed ? " is-pressed" : "";
+  const cls = `kbd kbd-${size}${variantClass}${pressedClass}`;
+  return html`
+    <kbd
+      class=${cls}
+      role="img"
+      @mousedown=${onDown}
+      @mouseup=${onUp}
+      @mouseleave=${onLeave}
+    >
+      <slot></slot>
+    </kbd>
+  `;
+}
+export {
+  kbdTemplate
+};
+//# sourceMappingURL=index252.js.map

package/dist/index252.js.map

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

package/dist/index253.js

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

package/dist/index253.js.map

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

package/dist/index254.js

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

package/dist/index254.js.map

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

package/dist/index255.js

@@ -0,0 +1,91 @@
+import { html, svg } from "lit";
+function ensoStroke(tone, dark) {
+  if (dark) {
+    if (tone === "kaki") {
+      return { blur: "oklch(70% 0.14 60)", main: "oklch(68% 0.13 60)", bopacity: 0.3 };
+    }
+    return { blur: "oklch(88% 0.01 60)", main: "oklch(88% 0.01 60)", bopacity: 0.2 };
+  }
+  if (tone === "kaki") return { blur: "oklch(55% 0.08 45)", main: "oklch(50% 0.07 45)", bopacity: 0.25 };
+  if (tone === "celadon") return { blur: "oklch(50% 0.06 180)", main: "oklch(48% 0.06 180)", bopacity: 0.25 };
+  return { blur: "oklch(25% 0.02 45)", main: "oklch(25% 0.02 45)", bopacity: 0.25 };
+}
+function ensoWidths(size) {
+  if (size === "sm") return { blur: 2.5, main: 2, feStd: 1.5 };
+  if (size === "lg") return { blur: 3.5, main: 3, feStd: 2 };
+  return { blur: 3, main: 2.5, feStd: 1.5 };
+}
+function ensoTemplate(props) {
+  const stroke = ensoStroke(props.tone, props.dark);
+  const w = ensoWidths(props.size);
+  const fid = "sp-enso-blur";
+  return html`
+    ${svg`
+      <svg viewBox="0 0 48 48" fill="none" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="${fid}">
+            <feGaussianBlur stdDeviation="${w.feStd}" result="blur"/>
+            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+          </filter>
+        </defs>
+        <!-- blur halo layer -->
+        <circle
+          cx="24" cy="24" r="18"
+          stroke="${stroke.blur}"
+          stroke-width="${w.blur}"
+          stroke-linecap="round"
+          stroke-dasharray="95 18"
+          fill="none"
+          opacity="${stroke.bopacity}"
+          filter="url(#${fid})"
+        />
+        <!-- crisp layer -->
+        <circle
+          cx="24" cy="24" r="18"
+          stroke="${stroke.main}"
+          stroke-width="${w.main}"
+          stroke-linecap="round"
+          stroke-dasharray="95 18"
+          fill="none"
+        />
+      </svg>
+    `}
+  `;
+}
+function sumiTemplate() {
+  return html`
+    <div class="sp-sumi-wrap">
+      <div class="sp-sumi"></div>
+    </div>
+  `;
+}
+function kintsugiTemplate() {
+  return html`<div class="sp-kintsugi"></div>`;
+}
+function shizukuTemplate(size) {
+  const cls = `sp-shizuku sp-shizuku--${size}`;
+  return html`
+    <div class="${cls}">
+      <span></span><span></span><span></span>
+      <span></span><span></span><span></span>
+    </div>
+  `;
+}
+function spinnerTemplate(props) {
+  const inner = props.variant === "sumi" ? sumiTemplate() : props.variant === "kintsugi" ? kintsugiTemplate() : props.variant === "shizuku" ? shizukuTemplate(props.size) : ensoTemplate(props);
+  return html`
+    <div
+      role="status"
+      aria-label="${props.label}"
+      aria-live="polite"
+    >
+      ${inner}
+      <!-- Visually hidden label for screen readers -->
+      <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;">${props.label}</span>
+    </div>
+  `;
+}
+export {
+  spinnerTemplate
+};
+//# sourceMappingURL=index255.js.map

package/dist/index255.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index255.js","sources":["../src/components/atoms/spinner/lib-spinner.html.ts"],"sourcesContent":["import { html, svg, TemplateResult } from 'lit';\nimport type { SpinnerVariant, SpinnerSize, SpinnerTone } from './lib-spinner.component';\n\nexport interface SpinnerTemplateProps {\n  variant: SpinnerVariant;\n  size:    SpinnerSize;\n  tone:    SpinnerTone;\n  dark:    boolean;\n  label:   string;\n}\n\n/* ── Stroke configs per tone+dark ──────────────────────────── */\ntype StrokeConfig = {\n  blur:  string;  /* blur circle stroke color */\n  main:  string;  /* main circle stroke color */\n  bopacity: number; /* blur circle opacity */\n};\n\nfunction ensoStroke(tone: SpinnerTone, dark: boolean): StrokeConfig {\n  if (dark) {\n    if (tone === 'kaki') {\n      return { blur: 'oklch(70% 0.14 60)', main: 'oklch(68% 0.13 60)', bopacity: 0.30 };\n    }\n    /* ink / celadon → paper on dark */\n    return { blur: 'oklch(88% 0.01 60)', main: 'oklch(88% 0.01 60)', bopacity: 0.20 };\n  }\n  if (tone === 'kaki')    return { blur: 'oklch(55% 0.08 45)', main: 'oklch(50% 0.07 45)', bopacity: 0.25 };\n  if (tone === 'celadon') return { blur: 'oklch(50% 0.06 180)', main: 'oklch(48% 0.06 180)', bopacity: 0.25 };\n  /* default: ink */\n  return { blur: 'oklch(25% 0.02 45)', main: 'oklch(25% 0.02 45)', bopacity: 0.25 };\n}\n\ntype StrokeWidth = { blur: number; main: number; feStd: number; };\nfunction ensoWidths(size: SpinnerSize): StrokeWidth {\n  if (size === 'sm') return { blur: 2.5, main: 2,   feStd: 1.5 };\n  if (size === 'lg') return { blur: 3.5, main: 3,   feStd: 2.0 };\n  return              { blur: 3,   main: 2.5, feStd: 1.5 }; /* md */\n}\n\n/* ── Enso ───────────────────────────────────────────────────── */\nfunction ensoTemplate(props: SpinnerTemplateProps): TemplateResult {\n  const stroke = ensoStroke(props.tone, props.dark);\n  const w      = ensoWidths(props.size);\n  /* Each shadow DOM is isolated → filter IDs are collision-free */\n  const fid    = 'sp-enso-blur';\n\n  return html`\n    ${svg`\n      <svg viewBox=\"0 0 48 48\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\">\n        <defs>\n          <filter id=\"${fid}\">\n            <feGaussianBlur stdDeviation=\"${w.feStd}\" result=\"blur\"/>\n            <feMerge><feMergeNode in=\"blur\"/><feMergeNode in=\"SourceGraphic\"/></feMerge>\n          </filter>\n        </defs>\n        <!-- blur halo layer -->\n        <circle\n          cx=\"24\" cy=\"24\" r=\"18\"\n          stroke=\"${stroke.blur}\"\n          stroke-width=\"${w.blur}\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"95 18\"\n          fill=\"none\"\n          opacity=\"${stroke.bopacity}\"\n          filter=\"url(#${fid})\"\n        />\n        <!-- crisp layer -->\n        <circle\n          cx=\"24\" cy=\"24\" r=\"18\"\n          stroke=\"${stroke.main}\"\n          stroke-width=\"${w.main}\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"95 18\"\n          fill=\"none\"\n        />\n      </svg>\n    `}\n  `;\n}\n\n/* ── Sumi ───────────────────────────────────────────────────── */\nfunction sumiTemplate(): TemplateResult {\n  return html`\n    <div class=\"sp-sumi-wrap\">\n      <div class=\"sp-sumi\"></div>\n    </div>\n  `;\n}\n\n/* ── Kintsugi ───────────────────────────────────────────────── */\nfunction kintsugiTemplate(): TemplateResult {\n  return html`<div class=\"sp-kintsugi\"></div>`;\n}\n\n/* ── Shizuku ────────────────────────────────────────────────── */\nfunction shizukuTemplate(size: SpinnerSize): TemplateResult {\n  const cls = `sp-shizuku sp-shizuku--${size}`;\n  return html`\n    <div class=\"${cls}\">\n      <span></span><span></span><span></span>\n      <span></span><span></span><span></span>\n    </div>\n  `;\n}\n\n/* ── Root ───────────────────────────────────────────────────── */\nexport function spinnerTemplate(props: SpinnerTemplateProps): TemplateResult {\n  const inner: TemplateResult =\n    props.variant === 'sumi'     ? sumiTemplate() :\n    props.variant === 'kintsugi' ? kintsugiTemplate() :\n    props.variant === 'shizuku'  ? shizukuTemplate(props.size) :\n    ensoTemplate(props);\n\n  return html`\n    <div\n      role=\"status\"\n      aria-label=\"${props.label}\"\n      aria-live=\"polite\"\n    >\n      ${inner}\n      <!-- Visually hidden label for screen readers -->\n      <span style=\"position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;\">${props.label}</span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAkBA,SAAS,WAAW,MAAmB,MAA6B;AAClE,MAAI,MAAM;AACR,QAAI,SAAS,QAAQ;AACnB,aAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,IAAA;AAAA,IAC7E;AAEA,WAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,IAAA;AAAA,EAC7E;AACA,MAAI,SAAS,OAAW,QAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,KAAA;AACnG,MAAI,SAAS,UAAW,QAAO,EAAE,MAAM,uBAAuB,MAAM,uBAAuB,UAAU,KAAA;AAErG,SAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,KAAA;AAC7E;AAGA,SAAS,WAAW,MAAgC;AAClD,MAAI,SAAS,KAAM,QAAO,EAAE,MAAM,KAAK,MAAM,GAAK,OAAO,IAAA;AACzD,MAAI,SAAS,KAAM,QAAO,EAAE,MAAM,KAAK,MAAM,GAAK,OAAO,EAAA;AACzD,SAAoB,EAAE,MAAM,GAAK,MAAM,KAAK,OAAO,IAAA;AACrD;AAGA,SAAS,aAAa,OAA6C;AACjE,QAAM,SAAS,WAAW,MAAM,MAAM,MAAM,IAAI;AAChD,QAAM,IAAS,WAAW,MAAM,IAAI;AAEpC,QAAM,MAAS;AAEf,SAAO;AAAA,MACH;AAAA;AAAA;AAAA,wBAGkB,GAAG;AAAA,4CACiB,EAAE,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAO/B,OAAO,IAAI;AAAA,0BACL,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIX,OAAO,QAAQ;AAAA,yBACX,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKR,OAAO,IAAI;AAAA,0BACL,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM3B;AAAA;AAEL;AAGA,SAAS,eAA+B;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAGA,SAAS,mBAAmC;AAC1C,SAAO;AACT;AAGA,SAAS,gBAAgB,MAAmC;AAC1D,QAAM,MAAM,0BAA0B,IAAI;AAC1C,SAAO;AAAA,kBACS,GAAG;AAAA;AAAA;AAAA;AAAA;AAKrB;AAGO,SAAS,gBAAgB,OAA6C;AAC3E,QAAM,QACJ,MAAM,YAAY,SAAa,iBAC/B,MAAM,YAAY,aAAa,qBAC/B,MAAM,YAAY,YAAa,gBAAgB,MAAM,IAAI,IACzD,aAAa,KAAK;AAEpB,SAAO;AAAA;AAAA;AAAA,oBAGW,MAAM,KAAK;AAAA;AAAA;AAAA,QAGvB,KAAK;AAAA;AAAA,oHAEuG,MAAM,KAAK;AAAA;AAAA;AAG/H;"}

package/dist/index256.js

@@ -0,0 +1,14 @@
+import { html } from "lit";
+function bentoItemTemplate(_ctx) {
+  return html`
+    <div class="bento-item" part="item">
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    </div>
+  `;
+}
+export {
+  bentoItemTemplate
+};
+//# sourceMappingURL=index256.js.map

package/dist/index256.js.map

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

package/dist/index257.js

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

package/dist/index257.js.map

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

package/dist/index258.js

@@ -0,0 +1,81 @@
+import { html, nothing, svg } from "lit";
+function renderDots(p) {
+  const current = Math.round(p.progress / 100 * p.dotsCount);
+  return html`
+    ${Array.from({ length: p.dotsCount }, (_, i) => {
+    const done = i < current - 1;
+    const active = i === current - 1;
+    return html`
+        <span
+          class="rp-dot ${done ? "is-done" : ""} ${active ? "is-current" : ""}"
+          aria-hidden="true"
+        ></span>
+      `;
+  })}
+  `;
+}
+function renderRing(p) {
+  const r = p.ringSize / 2 - 3;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference * (1 - p.progress / 100);
+  return html`
+    ${svg`
+      <svg
+        class="rp-ring-svg"
+        width="${p.ringSize}"
+        height="${p.ringSize}"
+        viewBox="0 0 ${p.ringSize} ${p.ringSize}"
+        role="img"
+        aria-label="Progreso de lectura: ${p.progress}%"
+      >
+        <circle
+          class="rp-ring-track"
+          cx="${p.ringSize / 2}"
+          cy="${p.ringSize / 2}"
+          r="${r}"
+        />
+        <circle
+          class="rp-ring-fill"
+          cx="${p.ringSize / 2}"
+          cy="${p.ringSize / 2}"
+          r="${r}"
+          stroke-dasharray="${circumference}"
+          stroke-dashoffset="${offset}"
+        />
+      </svg>
+    `}
+  `;
+}
+function readingProgressTemplate(p) {
+  if (p.variant === "bar" || p.variant === "line" || p.variant === "vertical") {
+    return html`
+      <span
+        role="progressbar"
+        aria-label="Progreso de lectura"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${p.progress}"
+        style="display:none"
+      ></span>
+    `;
+  }
+  if (p.variant === "dots") {
+    return html`
+      <span role="progressbar" aria-label="Progreso de lectura" aria-valuenow="${p.progress}" aria-valuemin="0" aria-valuemax="100" style="display:contents">
+        ${renderDots(p)}
+      </span>
+    `;
+  }
+  if (p.variant === "ring") {
+    return html`
+      <span role="progressbar" aria-label="Progreso de lectura" aria-valuenow="${p.progress}" aria-valuemin="0" aria-valuemax="100" style="display:contents">
+        ${renderRing(p)}
+      </span>
+    `;
+  }
+  return nothing;
+}
+export {
+  readingProgressTemplate
+};
+//# sourceMappingURL=index258.js.map

package/dist/index258.js.map

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

package/dist/index259.js

@@ -0,0 +1,5 @@
+const componentCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host([variant="bar"]),:host(:not([variant])){display:block;position:absolute;bottom:-1px;left:0;width:0%;height:2px;pointer-events:none;z-index:var(--z-raised);transition:width 80ms linear;background:var(--rp-color)}:host([variant="bar"]):after,:host(:not([variant])):after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:16px;height:5px;border-radius:var(--radius-full);background:var(--rp-glow);filter:blur(3px);opacity:0;transition:opacity var(--duration-slow)}:host([variant="bar"][active]):after,:host(:not([variant])[active]):after{opacity:1}:host([variant="line"]){display:block;position:absolute;bottom:0;left:0;width:0%;height:1px;pointer-events:none;z-index:var(--z-raised);transition:width 80ms linear;background:var(--rp-color);opacity:.6}:host([variant="dots"]){display:inline-flex;align-items:center;gap:5px}.rp-dot{width:5px;height:5px;border-radius:var(--radius-full);background:var(--border-default);transition:background var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out),opacity var(--duration-slow);flex-shrink:0}.rp-dot.is-done{background:var(--rp-color);transform:scale(1.2)}.rp-dot.is-current{background:var(--rp-color-light);transform:scale(1.4);box-shadow:0 0 0 2px var(--rp-glow)}:host([variant="ring"]){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.rp-ring-svg{display:block;transform:rotate(-90deg);overflow:visible}.rp-ring-track{fill:none;stroke:var(--border-subtle);stroke-width:2}.rp-ring-fill{fill:none;stroke:var(--rp-color);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 80ms linear}:host([variant="vertical"]){display:block;position:fixed;left:0;top:0;width:2px;height:0%;background:linear-gradient(to bottom,var(--rp-color),var(--rp-color-light));z-index:var(--z-modal);pointer-events:none;transition:height 80ms linear}:host([variant="vertical"]):after{content:"";position:absolute;bottom:-6px;left:-3px;width:8px;height:8px;border-radius:var(--radius-full);background:var(--rp-color-light);box-shadow:0 0 6px var(--rp-glow)}:host,:host([tone="kaki"]){--rp-color: var(--color-kaki-500);--rp-color-light: var(--color-kaki-400);--rp-glow: rgb(217, 114, 52, .25)}:host([tone="celadon"]){--rp-color: var(--color-celadon-500);--rp-color-light: var(--color-celadon-400);--rp-glow: rgb(53, 113, 100, .25)}:host([tone="ink"]){--rp-color: var(--color-washi-800);--rp-color-light: var(--color-washi-700);--rp-glow: rgb(61, 51, 42, .2)}:host([tone="kintsugi"]){--rp-color: var(--color-kaki-500);--rp-color-light: var(--color-kaki-300);--rp-glow: oklch(65% .1 50deg / .55)}:host([tone="kintsugi"][variant="bar"]),:host([tone="kintsugi"]:not([variant])){background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-500) 30%,var(--color-kaki-300) 65%,var(--color-kaki-400) 100%);height:3px}:host([tone="kintsugi"][variant="bar"]):before,:host([tone="kintsugi"]:not([variant])):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,oklch(92% .04 60deg / .75) 45%,oklch(98% .01 60deg / .9) 50%,oklch(92% .04 60deg / .75) 55%,transparent 100%);animation:rp-kintsugi-shimmer 3s cubic-bezier(.4,0,.6,1) infinite;pointer-events:none}:host([tone="kintsugi"][variant="bar"][active]):after,:host([tone="kintsugi"]:not([variant])[active]):after{width:24px;height:8px;background:#c07c56a6;filter:blur(5px)}:host([tone="kintsugi"][variant="line"]){background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-300) 60%,var(--color-kaki-500) 100%);opacity:.85;height:1.5px}:host([tone="kintsugi"][variant="vertical"]){background:linear-gradient(to bottom,var(--color-kaki-600) 0%,var(--color-kaki-400) 45%,var(--color-kaki-300) 75%,var(--color-kaki-500) 100%);width:3px}:host([tone="kintsugi"][variant="vertical"]):after{width:10px;height:10px;background:var(--color-kaki-300);box-shadow:0 0 8px #c07c56b3,0 0 16px #c07c5659}@keyframes rp-kintsugi-shimmer{0%{transform:translate(-120%);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(120%);opacity:0}}}';
+export {
+  componentCss as default
+};
+//# sourceMappingURL=index259.js.map

package/dist/index259.js.map

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