@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index34.js.map

@@ -1 +1 @@
-{"version":3,"file":"index34.js","sources":["../src/components/atoms/kbd/lib-kbd.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { kbdTemplate } from './lib-kbd.html';\nimport kbdCss from './lib-kbd.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type LibKbdSize    = 'xs' | 'sm' | 'md' | 'lg';\nexport type LibKbdVariant = 'default' | 'dark' | 'ghost' | 'kaki' | 'celadon';\n\n/**\n * @element lib-kbd\n *\n * Representa una tecla de teclado física.\n * El `border-bottom` de 3px simula la pared lateral de la tecla.\n * El estado `pressed` produce un desplazamiento físico de 1-2px.\n *\n * @slot (default) — el símbolo o texto de la tecla (⌘, K, Ctrl…)\n *\n * @example — tecla individual\n * <lib-kbd>⌘</lib-kbd>\n *\n * @example — combo (el consumer compone las teclas)\n * <lib-kbd size=\"sm\">⌘</lib-kbd>\n * <span>+</span>\n * <lib-kbd size=\"sm\">K</lib-kbd>\n *\n * @example — pressed programático\n * <lib-kbd pressed>Space</lib-kbd>\n */\n@customElement('lib-kbd')\nexport class LibKbd extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(kbdCss)}`,\n  ];\n\n  /** Tamaño de la tecla. */\n  @property({ type: String, reflect: true })\n  size: LibKbdSize = 'md';\n\n  /** Variante visual de color. */\n  @property({ type: String, reflect: true })\n  variant: LibKbdVariant = 'default';\n\n  /**\n   * Estado pressed programático.\n   * El componente también gestiona pressed internamente\n   * via mousedown/mouseup para la interacción del usuario.\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /** Estado interno de pulsación por ratón (no expuesto como atributo). */\n  @state()\n  private _pointerPressed = false;\n\n  override render(): TemplateResult {\n    return kbdTemplate({\n      size:    this.size,\n      variant: this.variant,\n      pressed: this.pressed || this._pointerPressed,\n      onDown:  this._onPointerDown.bind(this),\n      onUp:    this._onPointerUp.bind(this),\n      onLeave: this._onPointerLeave.bind(this),\n    });\n  }\n\n  private _onPointerDown(): void {\n    this._pointerPressed = true;\n  }\n\n  private _onPointerUp(): void {\n    this._pointerPressed = false;\n  }\n\n  private _onPointerLeave(): void {\n    this._pointerPressed = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-kbd': LibKbd;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,SAAN,cAAqB,WAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,OAAmB;AAInB,SAAA,UAAyB;AAQzB,SAAA,UAAU;AAIV,SAAQ,kBAAkB;AAAA,EAAA;AAAA,EAEjB,SAAyB;AAChC,WAAO,YAAY;AAAA,MACjB,MAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,KAAK,WAAW,KAAK;AAAA,MAC9B,QAAS,KAAK,eAAe,KAAK,IAAI;AAAA,MACtC,MAAS,KAAK,aAAa,KAAK,IAAI;AAAA,MACpC,SAAS,KAAK,gBAAgB,KAAK,IAAI;AAAA,IAAA,CACxC;AAAA,EACH;AAAA,EAEQ,iBAAuB;AAC7B,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,eAAqB;AAC3B,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,kBAAkB;AAAA,EACzB;AACF;AAhDa,OACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,MAAM,CAAC;AACzB;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,OAQX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAX9B,OAYX,WAAA,WAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,OAoBX,WAAA,WAAA,CAAA;AAIQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAvBI,OAwBH,WAAA,mBAAA,CAAA;AAxBG,SAAN,gBAAA;AAAA,EADN,cAAc,SAAS;AAAA,GACX,MAAA;"}
+{"version":3,"file":"index34.js","sources":["../src/components/atoms/radio/lib-radio.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibRadioSize, LibRadioVariant } from './lib-radio.html';\nimport { radioTemplate } from './lib-radio.html';\nimport radioCss from './lib-radio.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport interface RadioChangeDetail {\n  checked: boolean;\n  value: string;\n}\n\n/**\n * @element lib-radio\n *\n * Control de seleccion unica. Debe usarse dentro de un grupo\n * con el mismo atributo `name` para que el navegador gestione\n * la exclusividad de forma nativa.\n *\n * @slot - Contenido de label alternativo (cuando no se usan props label/sublabel)\n *\n * @fires change - Emitido al seleccionar el radio.\n *   detail: { checked: boolean, value: string }\n *\n * @example\n * <lib-radio name=\"plan\" value=\"starter\" label=\"Starter\"></lib-radio>\n * <lib-radio name=\"plan\" value=\"pro\"     label=\"Pro\" checked></lib-radio>\n * <lib-radio name=\"plan\" value=\"ent\"     label=\"Enterprise\" disabled></lib-radio>\n */\n@customElement('lib-radio')\nexport class LibRadio extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(radioCss)}`,\n  ];\n\n  private _radioId: string;\n\n  constructor() {\n    super();\n    this._radioId = generateUniqueId('lib-radio-');\n  }\n\n  /** Estado seleccionado */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Nombre del grupo. Radios con el mismo name forman un grupo\n   * de seleccion unica gestionado por el navegador.\n   */\n  @property({ type: String })\n  name = '';\n\n  /** Valor enviado en el evento change */\n  @property({ type: String })\n  value = '';\n\n  /** Texto principal del label */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario bajo el label */\n  @property({ type: String })\n  sublabel = '';\n\n  /** Tamano del radio */\n  @property({ type: String, reflect: true })\n  size: LibRadioSize = 'md';\n\n  /** Variante de color */\n  @property({ type: String, reflect: true })\n  variant: LibRadioVariant = 'default';\n\n  private _handleChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n\n    this.dispatchEvent(\n      new CustomEvent<RadioChangeDetail>('change', {\n        detail: { checked: this.checked, value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return radioTemplate({\n      radioId: this._radioId,\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      disabled: this.disabled,\n      label: this.label,\n      sublabel: this.sublabel,\n      size: this.size,\n      variant: this.variant,\n      onChange: this._handleChange.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-radio': LibRadio;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAQvC,cAAc;AACZ,UAAA;AAMF,SAAA,UAAU;AAIV,SAAA,WAAW;AAOX,SAAA,OAAO;AAIP,SAAA,QAAQ;AAIR,SAAA,QAAQ;AAIR,SAAA,WAAW;AAIX,SAAA,OAAqB;AAIrB,SAAA,UAA2B;AApCzB,SAAK,WAAW,iBAAiB,YAAY;AAAA,EAC/C;AAAA,EAqCQ,cAAc,GAAgB;AACpC,UAAM,QAAQ,EAAE;AAChB,SAAK,UAAU,MAAM;AAErB,SAAK;AAAA,MACH,IAAI,YAA+B,UAAU;AAAA,QAC3C,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,MAAA;AAAA,QAC7C,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,WAAO,cAAc;AAAA,MACnB,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,MACX,SAAS,KAAK;AAAA,MACd,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AA3Ea,SACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,QAAQ,CAAC;AAC3B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAd/B,SAeX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,SAmBX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBf,SA0BX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Bf,SA8BX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCf,SAkCX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf,SAsCX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAzC9B,SA0CX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7C9B,SA8CX,WAAA,WAAA,CAAA;AA9CW,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/index340.js

@@ -1,24 +1,52 @@
-import { html } from "lit";
-function horizontalScrollTemplate(ctx) {
+import { svg, nothing, html } from "lit";
+const iconCheck = svg`
+  <svg class="step-icon" viewBox="0 0 12 12" aria-hidden="true">
+    <polyline points="2,6 5,9 10,3"/>
+  </svg>
+`;
+const iconError = svg`
+  <svg class="step-icon" viewBox="0 0 14 14" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       aria-hidden="true">
+    <line x1="7" y1="3" x2="7" y2="7.5"/>
+    <circle cx="7" cy="10" r="0.75" fill="currentColor" stroke="none"/>
+  </svg>
+`;
+function nodeContent(props) {
+  if (props.status === "completed") return iconCheck;
+  if (props.status === "error") return iconError;
+  return html`${props.index}`;
+}
+function stepTemplate(props) {
+  const isVertical = props.orientation === "vertical";
   return html`
-    <div class="sticky-wrapper" part="wrapper">
-
-      <div class="horizontal-content" part="content">
-        <slot></slot>
-      </div>
-
-      <div class="progress-bar" part="progress-bar" ?hidden="${!ctx.showProgress}">
-        <div class="progress-fill" part="progress-fill"></div>
+    <div
+      class="step-inner"
+      role="listitem"
+      aria-current=${props.status === "active" ? "step" : nothing}
+    >
+      <div class="step-node" aria-hidden="true">
+        ${nodeContent(props)}
       </div>
 
-      <span class="counter" part="counter" ?hidden="${!ctx.showProgress}">
-        0%
-      </span>
+      ${!props.last ? html`<div class="step-connector" aria-hidden="true"></div>` : nothing}
 
+      ${isVertical ? html`
+          <div class="step-body">
+            <p class="step-title">${props.label}</p>
+            ${props.sub ? html`<p class="step-sub">${props.sub}</p>` : nothing}
+            <div class="step-content"><slot></slot></div>
+          </div>
+        ` : html`
+          <div class="step-text">
+            <span class="step-label">${props.label}</span>
+            ${props.sub ? html`<span class="step-sub">${props.sub}</span>` : nothing}
+          </div>
+        `}
     </div>
   `;
 }
 export {
-  horizontalScrollTemplate
+  stepTemplate
 };
 //# sourceMappingURL=index340.js.map

package/dist/index340.js.map

@@ -1 +1 @@
-{"version":3,"file":"index340.js","sources":["../src/components/organisms/horizontal-scroll-section/lib-horizontal-scroll-section.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibHorizontalScrollSection } from './lib-horizontal-scroll-section.component';\n\nexport function horizontalScrollTemplate(ctx: LibHorizontalScrollSection): TemplateResult {\n  return html`\n    <div class=\"sticky-wrapper\" part=\"wrapper\">\n\n      <div class=\"horizontal-content\" part=\"content\">\n        <slot></slot>\n      </div>\n\n      <div class=\"progress-bar\" part=\"progress-bar\" ?hidden=\"${!ctx.showProgress}\">\n        <div class=\"progress-fill\" part=\"progress-fill\"></div>\n      </div>\n\n      <span class=\"counter\" part=\"counter\" ?hidden=\"${!ctx.showProgress}\">\n        0%\n      </span>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,yBAAyB,KAAiD;AACxF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAOsD,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA,sDAI1B,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvE;"}
+{"version":3,"file":"index340.js","sources":["../src/components/atoms/step/lib-step.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\nimport type { LibStepStatus, LibStepOrientation } from './lib-step.types';\n\nexport type { LibStepStatus, LibStepOrientation } from './lib-step.types';\nexport type { LibStepVariant, LibStepSize } from './lib-step.types';\n\nexport interface StepTemplateProps {\n  index:       number;\n  status:      LibStepStatus;\n  label:       string;\n  sub:         string;\n  last:        boolean;\n  orientation: LibStepOrientation;\n}\n\n/* ── SVG icons ─────────────────────────────────────────────── */\nconst iconCheck = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>\n`;\n\nconst iconError = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 14 14\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n       aria-hidden=\"true\">\n    <line x1=\"7\" y1=\"3\" x2=\"7\" y2=\"7.5\"/>\n    <circle cx=\"7\" cy=\"10\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/>\n  </svg>\n`;\n\nfunction nodeContent(props: StepTemplateProps): TemplateResult {\n  if (props.status === 'completed') return iconCheck;\n  if (props.status === 'error')     return iconError;\n  return html`${props.index}`;\n}\n\n/**\n * Template para lib-step.\n *\n * Estructura (orientación horizontal):\n *   .step-node     — círculo/cuadrado con número o icono\n *   .step-connector— línea que conecta con el siguiente paso (oculta en [last])\n *   .step-text     — label + sub\n *\n * Estructura (orientación vertical):\n *   .step-node\n *   .step-connector (vertical)\n *   .step-body\n *     .step-title\n *     .step-content  ← <slot> para contenido descriptivo\n */\nexport function stepTemplate(props: StepTemplateProps): TemplateResult {\n  const isVertical = props.orientation === 'vertical';\n\n  return html`\n    <div\n      class=\"step-inner\"\n      role=\"listitem\"\n      aria-current=${props.status === 'active' ? 'step' : nothing}\n    >\n      <div class=\"step-node\" aria-hidden=\"true\">\n        ${nodeContent(props)}\n      </div>\n\n      ${!props.last ? html`<div class=\"step-connector\" aria-hidden=\"true\"></div>` : nothing}\n\n      ${isVertical\n        ? html`\n          <div class=\"step-body\">\n            <p class=\"step-title\">${props.label}</p>\n            ${props.sub ? html`<p class=\"step-sub\">${props.sub}</p>` : nothing}\n            <div class=\"step-content\"><slot></slot></div>\n          </div>\n        `\n        : html`\n          <div class=\"step-text\">\n            <span class=\"step-label\">${props.label}</span>\n            ${props.sub ? html`<span class=\"step-sub\">${props.sub}</span>` : nothing}\n          </div>\n        `\n      }\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,SAAS,YAAY,OAA0C;AAC7D,MAAI,MAAM,WAAW,YAAa,QAAO;AACzC,MAAI,MAAM,WAAW,QAAa,QAAO;AACzC,SAAO,OAAO,MAAM,KAAK;AAC3B;AAiBO,SAAS,aAAa,OAA0C;AACrE,QAAM,aAAa,MAAM,gBAAgB;AAEzC,SAAO;AAAA;AAAA;AAAA;AAAA,qBAIY,MAAM,WAAW,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA,UAGvD,YAAY,KAAK,CAAC;AAAA;AAAA;AAAA,QAGpB,CAAC,MAAM,OAAO,8DAA8D,OAAO;AAAA;AAAA,QAEnF,aACE;AAAA;AAAA,oCAE0B,MAAM,KAAK;AAAA,cACjC,MAAM,MAAM,2BAA2B,MAAM,GAAG,SAAS,OAAO;AAAA;AAAA;AAAA,YAIpE;AAAA;AAAA,uCAE6B,MAAM,KAAK;AAAA,cACpC,MAAM,MAAM,8BAA8B,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA,SAG9E;AAAA;AAAA;AAGN;"}

package/dist/index341.js

@@ -1,5 +1,5 @@
-const sectionCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{height:var(--_scroll-height, 300vh)}.sticky-wrapper{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;background:var(--bg-base)}.horizontal-content{display:flex;gap:var(--_gap, calc(var(--lib-space-xl) * 2));padding:0 calc(var(--_padding-inline, 10) * 1vw);will-change:transform}::slotted(*){flex-shrink:0}.progress-bar{position:absolute;bottom:var(--lib-space-xl);left:calc(var(--_padding-inline, 10) * 1vw);width:calc(100% - (var(--_padding-inline, 10) * 2vw));height:1px;background:var(--border-subtle)}.progress-fill{height:100%;width:0%;background:var(--color-washi-900);transition:width 80ms linear}.counter{position:absolute;bottom:calc(var(--lib-space-xl) + 16px);right:calc(var(--_padding-inline, 10) * 1vw);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);-webkit-user-select:none;user-select:none}}";
+const stepCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;flex:1;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.step-inner{display:flex;flex-direction:column;align-items:center;position:relative}.step-node{width:32px;height:32px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);position:relative;z-index:1;flex-shrink:0;transition:background var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}.step-icon{width:12px;height:12px;stroke:currentcolor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}.step-text{margin-top:var(--lib-space-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--lib-space-xs)}.step-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase;transition:color var(--duration-base) var(--ease-default)}.step-sub{font-family:var(--lib-font-body);font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-snug)}.step-connector{position:absolute;top:15px;left:calc(50% + 16px);width:calc(100% - 32px);height:1px;background:var(--border-default);transition:background var(--duration-slow) var(--ease-out);pointer-events:none}:host([status="active"]) .step-node{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:0 0 0 4px var(--color-washi-100)}:host([status="active"]) .step-label{color:var(--text-primary)}:host([status="completed"]) .step-node{background:var(--color-washi-700);border-color:var(--color-washi-700);color:var(--color-washi-50)}:host([status="completed"]) .step-label{color:var(--text-secondary)}:host([status="completed"]) .step-connector{background:var(--color-washi-700)}:host([status="error"]) .step-node{background:var(--color-error-subtle);border-color:var(--color-error);color:var(--color-error)}:host([status="error"]) .step-label{color:var(--color-error)}:host([size="sm"]) .step-node{width:24px;height:24px;font-size:9px}:host([size="sm"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([size="sm"]) .step-label{font-size:9px}:host([size="lg"]) .step-node{width:40px;height:40px;font-size:var(--text-sm)}:host([size="lg"]) .step-connector{top:19px;left:calc(50% + 20px);width:calc(100% - 40px)}:host([variant="minimal"]) .step-node{width:24px;height:24px;border-radius:var(--radius-none);background:transparent;font-size:9px}:host([variant="minimal"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([variant="minimal"][status="active"]) .step-node{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:var(--color-white);box-shadow:none}:host([variant="minimal"][status="active"]) .step-label{color:var(--color-kaki-500)}:host([variant="minimal"][status="completed"]) .step-node{background:transparent;border-color:var(--color-washi-700);color:var(--color-washi-700)}:host([variant="kintsugi"][status="completed"]) .step-node{background:var(--color-washi-900);border:none;color:var(--color-washi-200)}:host([variant="kintsugi"][status="completed"]) .step-node: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);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}:host([variant="kintsugi"][status="active"]) .step-node{background:var(--color-washi-950);border:none;color:var(--color-washi-200);box-shadow:0 0 0 4px #6d4d3e1a}:host([variant="kintsugi"][status="active"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1.5px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:kintsugi-pulse 2.5s ease-in-out infinite}@keyframes kintsugi-pulse{0%,to{opacity:.7}50%{opacity:1}}:host([variant="kintsugi"][status="completed"]) .step-connector{background:linear-gradient(90deg,#66503f80,#866c534d)}:host([variant="kintsugi"]) .step-label{color:var(--color-washi-700)}:host([variant="kintsugi"][status="active"]) .step-label{color:var(--color-washi-100)}:host([variant="kintsugi"][status="completed"]) .step-label{color:var(--color-washi-500)}:host([variant="kintsugi"]) .step-node{background:var(--color-washi-950);border-color:var(--color-washi-800);color:var(--color-washi-700)}:host([variant="kintsugi"]) .step-connector{background:var(--color-washi-800)}:host([orientation="vertical"]){flex:none}:host([orientation="vertical"]) .step-inner{flex-direction:row;align-items:flex-start;gap:var(--lib-space-lg)}:host([orientation="vertical"]) .step-connector{position:absolute;left:15px;top:32px;bottom:0;width:1px;height:auto}:host([orientation="vertical"][size="sm"]) .step-connector{left:11px;top:24px}:host([orientation="vertical"][size="lg"]) .step-connector{left:19px;top:40px}.step-body{padding-bottom:var(--lib-space-xl);flex:1}.step-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);line-height:32px;transition:color var(--duration-base) var(--ease-default)}:host([orientation="vertical"][status="active"]) .step-title{color:var(--text-primary)}:host([orientation="vertical"][status="completed"]) .step-title{color:var(--text-secondary)}:host([orientation="vertical"][status="error"]) .step-title{color:var(--color-error)}.step-content{margin-top:var(--lib-space-sm);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:420px}:host([variant="brutal"]) .step-node{border-radius:0;background:var(--color-washi-50);border:2px solid var(--color-ink-100);color:var(--color-ink-100);box-shadow:var(--lib-shadow-brutal)}:host([variant="brutal"][status="active"]) .step-node{background:var(--color-ink-100);border-color:var(--color-ink-100);color:var(--color-washi-50);box-shadow:var(--lib-shadow-brutal)}:host([variant="brutal"][status="completed"]) .step-node{background:var(--color-ink-100);border-color:var(--color-ink-100);color:var(--color-washi-50);box-shadow:2px 2px 0 0 var(--lib-shibui-ink)}:host([variant="brutal"][status="error"]) .step-node{background:var(--color-washi-50);border-color:var(--color-error);color:var(--color-error);box-shadow:4px 4px 0 0 var(--color-error)}:host([variant="brutal"]) .step-connector{background:var(--color-ink-100);height:2px}:host([variant="brutal"][status="completed"]) .step-connector{background:var(--color-ink-100)}:host([variant="brutal"]) .step-label{color:var(--color-ink-100);letter-spacing:var(--tracking-widest)}:host([variant="brutal"][status="active"]) .step-label{color:var(--color-ink-100);font-weight:var(--weight-semibold)}:host([variant="brutal"][status="completed"]) .step-label{color:var(--text-secondary)}:host([variant="brutal"][status="error"]) .step-label{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.step-node,.step-connector,.step-label{transition:none}:host([variant="kintsugi"][status="active"]) .step-node:after{animation:none}}}';
 export {
-  sectionCss as default
+  stepCss as default
 };
 //# sourceMappingURL=index341.js.map

package/dist/index342.js

@@ -1,87 +1,29 @@
-import { svg, html, nothing } from "lit";
-const iconPrev = svg`
-  <svg viewBox="0 0 16 16" fill="none"
-       stroke="currentColor" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="10,3 5,8 10,13"/>
-  </svg>`;
-const iconNext = svg`
-  <svg viewBox="0 0 16 16" fill="none"
-       stroke="currentColor" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="6,3 11,8 6,13"/>
-  </svg>`;
-function carouselTemplate(props) {
-  const {
-    mode,
-    current,
-    total,
-    peek,
-    arrows,
-    dots,
-    counter,
-    loop,
-    handlePrev,
-    handleNext,
-    handleDot,
-    handleSlot,
-    handleThumb,
-    handleKey
-  } = props;
-  const prevDisabled = !loop && current === 0;
-  const nextDisabled = !loop && current === total - 1;
-  const counterHtml = peek > 1 ? html`<span>${current + 1}</span>&thinsp;–&thinsp;<span>${Math.min(current + peek, total)}</span> / ${total}` : html`<span>${current + 1}</span> / ${total}`;
+import { nothing, html } from "lit";
+function switchTemplate(props) {
   return html`
-    <div
-      class="cr"
-      tabindex="0"
-      role="region"
-      aria-label="Carousel"
-      @keydown=${handleKey}
-    >
-      <div class="cr-track" part="track">
-        <slot @slotchange=${handleSlot}></slot>
-      </div>
-
-      ${arrows && mode === "slide" ? html`
-        <button
-          class="cr-arrow cr-arrow-prev ${prevDisabled ? "is-disabled" : ""}"
-          ?disabled=${prevDisabled}
-          aria-label="Anterior"
-          @click=${handlePrev}
-        >${iconPrev}</button>
-
-        <button
-          class="cr-arrow cr-arrow-next ${nextDisabled ? "is-disabled" : ""}"
-          ?disabled=${nextDisabled}
-          aria-label="Siguiente"
-          @click=${handleNext}
-        >${iconNext}</button>
+    <label class="sw" for=${props.switchId}>
+      <input
+        id=${props.switchId}
+        class="sw-input"
+        type="checkbox"
+        ?checked=${props.checked}
+        ?disabled=${props.disabled}
+        aria-checked=${props.checked ? "true" : "false"}
+        @change=${props.handleChange}
+      >
+      <span class="sw-track" aria-hidden="true">
+        <span class="sw-thumb"></span>
+      </span>
+      ${props.label ? html`
+        <span class="sw-label">
+          <span class="sw-label-text">${props.label}</span>
+          ${props.sub ? html`<span class="sw-label-sub">${props.sub}</span>` : nothing}
+        </span>
       ` : nothing}
-    </div>
-
-    ${dots && total > 1 ? html`
-      <div class="cr-dots" role="tablist" aria-label="Navegación por slides">
-        ${Array.from({ length: total }, (_, i) => html`
-          <button
-            class="cr-dot ${i === current ? "is-active" : ""}"
-            role="tab"
-            aria-selected=${i === current ? "true" : "false"}
-            aria-label="Ir a slide ${i + 1}"
-            @click=${() => handleDot(i)}
-          ></button>
-        `)}
-      </div>
-    ` : nothing}
-
-    ${counter && total > 1 ? html`
-      <p class="cr-counter">${counterHtml}</p>
-    ` : nothing}
-
-    <slot name="thumbnail" @slotchange=${handleThumb}></slot>
+    </label>
   `;
 }
 export {
-  carouselTemplate
+  switchTemplate
 };
 //# sourceMappingURL=index342.js.map

package/dist/index342.js.map

@@ -1 +1 @@
-{"version":3,"file":"index342.js","sources":["../src/components/organisms/carousel/lib-carousel.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\n\nexport type LibCarouselMode = 'slide' | 'fade';\n\nexport interface CarouselTemplateProps {\n  mode:          LibCarouselMode;\n  current:       number;\n  total:         number;\n  peek:          number;\n  arrows:        boolean;\n  dots:          boolean;\n  counter:       boolean;\n  loop:          boolean;\n  handlePrev:    () => void;\n  handleNext:    () => void;\n  handleDot:     (i: number) => void;\n  handleSlot:    (e: Event) => void;\n  handleThumb:   (e: Event) => void;\n  handleKey:     (e: KeyboardEvent) => void;\n}\n\n/** SVG chevron left */\nconst iconPrev = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"10,3 5,8 10,13\"/>\n  </svg>`;\n\n/** SVG chevron right */\nconst iconNext = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"6,3 11,8 6,13\"/>\n  </svg>`;\n\n/**\n * Template para lib-carousel.\n *\n * Estructura:\n *   div.cr                      ← raíz, maneja keydown\n *     div.cr-track              ← contenedor deslizante\n *       slot                    ← slides del consumer\n *   button.cr-arrow-prev        ← (condicional)\n *   button.cr-arrow-next        ← (condicional)\n *   div.cr-dots                 ← (condicional)\n *   p.cr-counter                ← (condicional)\n *   slot[name=\"thumbnail\"]      ← tira de miniaturas (condicional)\n */\nexport function carouselTemplate(props: CarouselTemplateProps): TemplateResult {\n  const {\n    mode, current, total, peek, arrows, dots, counter, loop,\n    handlePrev, handleNext, handleDot, handleSlot, handleThumb, handleKey,\n  } = props;\n\n  const prevDisabled = !loop && current === 0;\n  const nextDisabled = !loop && current === total - 1;\n\n  // Counter text: \"2 / 6\" para peek=1, \"1 – 3 / 6\" para peek>1\n  const counterHtml = peek > 1\n    ? html`<span>${current + 1}</span>&thinsp;–&thinsp;<span>${Math.min(current + peek, total)}</span> / ${total}`\n    : html`<span>${current + 1}</span> / ${total}`;\n\n  return html`\n    <div\n      class=\"cr\"\n      tabindex=\"0\"\n      role=\"region\"\n      aria-label=\"Carousel\"\n      @keydown=${handleKey}\n    >\n      <div class=\"cr-track\" part=\"track\">\n        <slot @slotchange=${handleSlot}></slot>\n      </div>\n\n      ${arrows && mode === 'slide' ? html`\n        <button\n          class=\"cr-arrow cr-arrow-prev ${prevDisabled ? 'is-disabled' : ''}\"\n          ?disabled=${prevDisabled}\n          aria-label=\"Anterior\"\n          @click=${handlePrev}\n        >${iconPrev}</button>\n\n        <button\n          class=\"cr-arrow cr-arrow-next ${nextDisabled ? 'is-disabled' : ''}\"\n          ?disabled=${nextDisabled}\n          aria-label=\"Siguiente\"\n          @click=${handleNext}\n        >${iconNext}</button>\n      ` : nothing}\n    </div>\n\n    ${dots && total > 1 ? html`\n      <div class=\"cr-dots\" role=\"tablist\" aria-label=\"Navegación por slides\">\n        ${Array.from({ length: total }, (_, i) => html`\n          <button\n            class=\"cr-dot ${i === current ? 'is-active' : ''}\"\n            role=\"tab\"\n            aria-selected=${i === current ? 'true' : 'false'}\n            aria-label=\"Ir a slide ${i + 1}\"\n            @click=${():void => handleDot(i)}\n          ></button>\n        `)}\n      </div>\n    ` : nothing}\n\n    ${counter && total > 1 ? html`\n      <p class=\"cr-counter\">${counterHtml}</p>\n    ` : nothing}\n\n    <slot name=\"thumbnail\" @slotchange=${handleThumb}></slot>\n  `;\n}"],"names":[],"mappings":";AAsBA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBV,SAAS,iBAAiB,OAA8C;AAC7E,QAAM;AAAA,IACJ;AAAA,IAAM;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAM;AAAA,IAAS;AAAA,IACnD;AAAA,IAAY;AAAA,IAAY;AAAA,IAAW;AAAA,IAAY;AAAA,IAAa;AAAA,EAAA,IAC1D;AAEJ,QAAM,eAAe,CAAC,QAAQ,YAAY;AAC1C,QAAM,eAAe,CAAC,QAAQ,YAAY,QAAQ;AAGlD,QAAM,cAAc,OAAO,IACvB,aAAa,UAAU,CAAC,iCAAiC,KAAK,IAAI,UAAU,MAAM,KAAK,CAAC,aAAa,KAAK,KAC1G,aAAa,UAAU,CAAC,aAAa,KAAK;AAE9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMQ,SAAS;AAAA;AAAA;AAAA,4BAGE,UAAU;AAAA;AAAA;AAAA,QAG9B,UAAU,SAAS,UAAU;AAAA;AAAA,0CAEK,eAAe,gBAAgB,EAAE;AAAA,sBACrD,YAAY;AAAA;AAAA,mBAEf,UAAU;AAAA,WAClB,QAAQ;AAAA;AAAA;AAAA,0CAGuB,eAAe,gBAAgB,EAAE;AAAA,sBACrD,YAAY;AAAA;AAAA,mBAEf,UAAU;AAAA,WAClB,QAAQ;AAAA,UACT,OAAO;AAAA;AAAA;AAAA,MAGX,QAAQ,QAAQ,IAAI;AAAA;AAAA,UAEhB,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,GAAG,MAAM;AAAA;AAAA,4BAEtB,MAAM,UAAU,cAAc,EAAE;AAAA;AAAA,4BAEhC,MAAM,UAAU,SAAS,OAAO;AAAA,qCACvB,IAAI,CAAC;AAAA,qBACrB,MAAW,UAAU,CAAC,CAAC;AAAA;AAAA,SAEnC,CAAC;AAAA;AAAA,QAEF,OAAO;AAAA;AAAA,MAET,WAAW,QAAQ,IAAI;AAAA,8BACC,WAAW;AAAA,QACjC,OAAO;AAAA;AAAA,yCAE0B,WAAW;AAAA;AAEpD;"}
+{"version":3,"file":"index342.js","sources":["../src/components/atoms/switch/lib-switch.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibSwitchVariant = 'default' | 'kintsugi';\nexport type LibSwitchSize    = 'sm' | 'md' | 'lg';\n\nexport interface SwitchTemplateProps {\n  switchId:  string;\n  checked:   boolean;\n  disabled:  boolean;\n  label:     string;\n  sub:       string;\n  handleChange: (e: Event) => void;\n}\n\n/**\n * Template para lib-switch.\n *\n * Estructura:\n *   label.sw\n *     input[type=checkbox]  — oculto, accesible\n *     span.sw-track\n *       span.sw-thumb\n *     span.sw-label          — (opcional) si hay label\n *       span.sw-label-text\n *       span.sw-label-sub    — (opcional) si hay sub\n *\n * El estado visual (checked, disabled, variant, size) se controla\n * íntegramente desde :host([attr]) en el CSS — el template es estático.\n */\nexport function switchTemplate(props: SwitchTemplateProps): TemplateResult {\n  return html`\n    <label class=\"sw\" for=${props.switchId}>\n      <input\n        id=${props.switchId}\n        class=\"sw-input\"\n        type=\"checkbox\"\n        ?checked=${props.checked}\n        ?disabled=${props.disabled}\n        aria-checked=${props.checked ? 'true' : 'false'}\n        @change=${props.handleChange}\n      >\n      <span class=\"sw-track\" aria-hidden=\"true\">\n        <span class=\"sw-thumb\"></span>\n      </span>\n      ${props.label ? html`\n        <span class=\"sw-label\">\n          <span class=\"sw-label-text\">${props.label}</span>\n          ${props.sub ? html`<span class=\"sw-label-sub\">${props.sub}</span>` : nothing}\n        </span>\n      ` : nothing}\n    </label>\n  `;\n}"],"names":[],"mappings":";AA6BO,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA,4BACmB,MAAM,QAAQ;AAAA;AAAA,aAE7B,MAAM,QAAQ;AAAA;AAAA;AAAA,mBAGR,MAAM,OAAO;AAAA,oBACZ,MAAM,QAAQ;AAAA,uBACX,MAAM,UAAU,SAAS,OAAO;AAAA,kBACrC,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,QAK5B,MAAM,QAAQ;AAAA;AAAA,wCAEkB,MAAM,KAAK;AAAA,YACvC,MAAM,MAAM,kCAAkC,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA,UAE5E,OAAO;AAAA;AAAA;AAGjB;"}

package/dist/index343.js

@@ -1,5 +1,5 @@
-const carouselCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}button{font:inherit}}@layer components{.cr{position:relative;width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;outline:none}.cr:focus-visible{outline:2px solid var(--color-washi-700);outline-offset:2px}.cr-track{display:flex;transition:transform var(--duration-slow) var(--ease-out);will-change:transform}::slotted(*){flex:0 0 100%;min-width:0}:host([peek="2"]) .cr-track{gap:var(--lib-space-md)}:host([peek="2"]) ::slotted(*){flex:0 0 calc(50% - 8px)}:host([peek="3"]) .cr-track{gap:var(--lib-space-md)}:host([peek="3"]) ::slotted(*){flex:0 0 calc(33.333% - 11px)}:host([peek="4"]) .cr-track{gap:var(--lib-space-sm)}:host([peek="4"]) ::slotted(*){flex:0 0 calc(25% - 6px)}.cr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-raised);width:40px;height:40px;border:1px solid var(--border-default);background:#faf7f4e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce);border-radius:var(--radius-none)}.cr-arrow svg{width:16px;height:16px;flex-shrink:0}.cr-arrow:hover:not(.is-disabled){background:var(--bg-elevated);border-color:var(--border-strong, var(--color-washi-500));transform:translateY(-50%) scale(1.05)}.cr-arrow.is-disabled{opacity:.3;pointer-events:none}.cr-arrow-prev{left:var(--lib-space-md)}.cr-arrow-next{right:var(--lib-space-md)}.cr-dots{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);padding-top:var(--lib-space-md)}.cr-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-washi-300);border:none;cursor:pointer;padding:0;transition:width var(--duration-slow) var(--ease-bounce),background var(--duration-base) var(--ease-default);flex-shrink:0}.cr-dot.is-active{width:20px;background:var(--color-washi-900)}.cr-counter{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);text-align:center;padding-top:var(--lib-space-sm)}.cr-counter span{color:var(--text-primary)}:host([mode="fade"]) .cr-track{transition:none;position:relative}:host([mode="fade"]) ::slotted(*){position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity var(--duration-slow) var(--ease-out);pointer-events:none}:host([mode="fade"]) ::slotted(.is-active){position:relative;opacity:1;pointer-events:auto}slot[name=thumbnail]{display:flex;gap:var(--lib-space-xs);padding-top:var(--lib-space-sm);overflow-x:auto;scrollbar-width:none}slot[name=thumbnail]::-webkit-scrollbar{display:none}::slotted([slot="thumbnail"]){width:64px;height:48px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default);opacity:.5}::slotted([slot="thumbnail"].is-active){border-color:var(--color-washi-900);opacity:1}@media(max-width:640px){:host([peek="2"]) ::slotted(*),:host([peek="3"]) ::slotted(*),:host([peek="4"]) ::slotted(*){flex:0 0 calc(80% - 8px)}}@media(prefers-reduced-motion:reduce){.cr-track{transition:none}.cr-dot{transition:background var(--duration-base)}:host([mode="fade"]) ::slotted(*){transition:none}}}';
+const switchCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.sw{display:inline-flex;align-items:center;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.sw-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.sw-track{position:relative;flex-shrink:0;width:40px;height:24px;border-radius:var(--radius-full);background:var(--color-washi-300);transition:background var(--duration-base) var(--ease-default),box-shadow var(--duration-slow) var(--ease-out)}.sw-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--radius-full);background:var(--color-white);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-bounce),width var(--duration-base) var(--ease-default),background var(--duration-slow) var(--ease-default)}.sw-label{display:flex;flex-direction:column;gap:2px}.sw-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-base) var(--ease-default)}.sw-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([checked]) .sw-track{background:var(--color-washi-900)}:host([checked]) .sw-thumb{transform:translate(16px)}.sw:hover .sw-thumb{width:22px}:host([checked]) .sw:hover .sw-thumb{transform:translate(12px)}:host([disabled]){pointer-events:none}:host([disabled]) .sw{opacity:.35;cursor:not-allowed}.sw-input:focus-visible~.sw-track{outline:2px solid var(--color-washi-700);outline-offset:2px}:host([size="sm"]) .sw-track{width:30px;height:18px}:host([size="sm"]) .sw-thumb{width:12px;height:12px;top:2px;left:2px}:host([size="sm"][checked]) .sw-thumb{transform:translate(12px)}:host([size="sm"]) .sw:hover .sw-thumb{width:15px}:host([size="sm"][checked]) .sw:hover .sw-thumb{transform:translate(9px)}:host([size="lg"]) .sw-track{width:52px;height:30px}:host([size="lg"]) .sw-thumb{width:22px;height:22px;top:3px;left:3px}:host([size="lg"][checked]) .sw-thumb{transform:translate(22px)}:host([size="lg"]) .sw:hover .sw-thumb{width:27px}:host([size="lg"][checked]) .sw:hover .sw-thumb{transform:translate(17px)}@keyframes kin-pulse{0%,to{opacity:.45}50%{opacity:1}}@keyframes kin-pulse-on{0%,to{opacity:.7}50%{opacity:1}}@keyframes kin-thumb-glow{0%,to{box-shadow:0 0 6px 1px #be96324d}50%{box-shadow:0 0 14px 3px #be96328c}}:host([variant="kintsugi"]){--gold-bright: oklch(80% .09 78deg);--gold-mid: oklch(72% .06 68deg);--gold-deep: oklch(62% .05 60deg)}:host([variant="kintsugi"]) .sw-track{background:#0c0402;overflow:visible}:host([variant="kintsugi"]) .sw-track:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full);padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:kin-pulse 3.5s ease-in-out infinite}:host([variant="kintsugi"]) .sw-thumb{background:#221812;box-shadow:none}:host([variant="kintsugi"][checked]) .sw-track{background:#1e0d01}:host([variant="kintsugi"][checked]) .sw-track:before{animation:kin-pulse-on 2.4s ease-in-out infinite}:host([variant="kintsugi"][checked]) .sw-thumb{background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold-mid) 60%,var(--gold-deep) 100%);animation:kin-thumb-glow 2.4s ease-in-out infinite}:host([variant="kintsugi"]) .sw-input:focus-visible~.sw-track:before{opacity:1;animation:none}:host([variant="kintsugi"]) .sw-label-text{color:#afa299}:host([variant="kintsugi"]) .sw-label-sub{color:#51453e}:host([variant="kintsugi"][checked]) .sw-label-text{color:#dfcab2}@media(prefers-reduced-motion:reduce){.sw-thumb,.sw-track{transition:none}:host([variant="kintsugi"]) .sw-track:before,:host([variant="kintsugi"][checked]) .sw-track:before,:host([variant="kintsugi"][checked]) .sw-thumb{animation:none}}}';
 export {
-  carouselCss as default
+  switchCss as default
 };
 //# sourceMappingURL=index343.js.map

package/dist/index344.js

@@ -1,21 +1,5 @@
-import { html } from "lit";
-function bentoGridTemplate(ctx) {
-  return html`
-    <div
-      class="bento-grid"
-      part="grid"
-      role="presentation"
-      style="
-        --_columns: ${ctx.columns};
-        --_gap: var(--lib-space-${ctx.gap});
-        --_row-height: ${ctx.rowHeight};
-      "
-    >
-      <slot></slot>
-    </div>
-  `;
-}
+const glitchCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-block;cursor:default}.tg-inner{position:relative;display:inline-block}:host([variant="slice"]) .tg-inner:before,:host([variant="slice"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="slice"]) .tg-inner:before{color:var(--color-kaki-500);mix-blend-mode:multiply}:host([variant="slice"]) .tg-inner:after{color:var(--color-celadon-400);mix-blend-mode:multiply}:host([variant="slice"]:hover) .tg-inner:before,:host([variant="slice"][active]) .tg-inner:before,:host([variant="slice"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-slice-before .42s steps(1) infinite}:host([variant="slice"]:hover) .tg-inner:after,:host([variant="slice"][active]) .tg-inner:after,:host([variant="slice"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-slice-after .42s steps(1) infinite;animation-delay:60ms}@keyframes tg-slice-before{0%{clip-path:inset(14% 0 72% 0);transform:translate(-3px)}10%{clip-path:inset(52% 0 32% 0);transform:translate(2px)}20%{clip-path:inset(8% 0 82% 0);transform:translate(-4px)}30%{clip-path:inset(66% 0 12% 0);transform:translate(3px)}40%{clip-path:inset(33% 0 44% 0);transform:translate(-2px)}50%{clip-path:inset(0% 0 90% 0);transform:translate(4px)}60%{clip-path:inset(78% 0 8% 0);transform:translate(-3px)}70%{clip-path:inset(22% 0 60% 0);transform:translate(2px)}80%{clip-path:inset(44% 0 38% 0);transform:translate(-4px)}90%{clip-path:inset(60% 0 18% 0);transform:translate(3px)}to{clip-path:inset(10% 0 75% 0);transform:translate(-2px)}}@keyframes tg-slice-after{0%{clip-path:inset(64% 0 20% 0);transform:translate(3px)}10%{clip-path:inset(28% 0 56% 0);transform:translate(-4px)}20%{clip-path:inset(76% 0 6% 0);transform:translate(2px)}30%{clip-path:inset(12% 0 70% 0);transform:translate(-3px)}40%{clip-path:inset(88% 0 4% 0);transform:translate(4px)}50%{clip-path:inset(40% 0 48% 0);transform:translate(-2px)}60%{clip-path:inset(6% 0 84% 0);transform:translate(3px)}70%{clip-path:inset(55% 0 30% 0);transform:translate(-4px)}80%{clip-path:inset(18% 0 66% 0);transform:translate(2px)}90%{clip-path:inset(82% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(36% 0 50% 0);transform:translate(4px)}}:host([variant="scan"]) .tg-inner:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--color-kaki-500);opacity:0;clip-path:inset(0 100% 0 0)}:host([variant="scan"]:hover) .tg-inner:before,:host([variant="scan"][active]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) forwards}:host([variant="scan"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-scan-sweep{0%{clip-path:inset(0% 100% 0 0);transform:translate(0)}30%{clip-path:inset(0% 0% 0 0);transform:translate(4px)}60%{clip-path:inset(0% 0% 0 0);transform:translate(-2px)}80%{clip-path:inset(0% 0% 0 0);transform:translate(0)}90%{clip-path:inset(0% 0% 0 0);transform:translate(0);opacity:1}to{clip-path:inset(0% 0% 0 0);opacity:0}}:host([variant="shift"]) .tg-inner:before,:host([variant="shift"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;color:inherit}:host([variant="shift"]:hover) .tg-inner:before,:host([variant="shift"][active]) .tg-inner:before,:host([variant="shift"][trigger="always"]) .tg-inner:before{opacity:.55;color:var(--color-kaki-400);animation:tg-shift-a .38s steps(1) infinite}:host([variant="shift"]:hover) .tg-inner:after,:host([variant="shift"][active]) .tg-inner:after,:host([variant="shift"][trigger="always"]) .tg-inner:after{opacity:.35;color:var(--color-celadon-500);animation:tg-shift-b .38s steps(1) infinite;animation-delay:.1s}@keyframes tg-shift-a{0%{transform:translate(-2px,1px);clip-path:inset(20% 0 55% 0)}20%{transform:translate(2px);clip-path:inset(60% 0 10% 0)}40%{transform:translate(-1px,-1px);clip-path:inset(5% 0 70% 0)}60%{transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}80%{transform:translate(-2px);clip-path:inset(75% 0 5% 0)}to{transform:translate(1px,-1px);clip-path:inset(30% 0 45% 0)}}@keyframes tg-shift-b{0%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}20%{transform:translate(-2px,1px);clip-path:inset(10% 0 65% 0)}40%{transform:translate(2px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(-3px,-1px);clip-path:inset(25% 0 50% 0)}80%{transform:translate(1px,1px);clip-path:inset(80% 0 5% 0)}to{transform:translate(-2px);clip-path:inset(35% 0 40% 0)}}:host([variant="decode"]) .char{display:inline-block;will-change:transform}:host([variant="decode"]) .char.is-scrambling{color:var(--color-kaki-500);animation:tg-char-jitter 60ms steps(1) infinite}@keyframes tg-char-jitter{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}:host([variant="redact"]) .tg-inner:before{content:"";position:absolute;top:0;right:-3px;bottom:0;left:-3px;background:var(--color-washi-900);transform:scaleX(0);transform-origin:left;pointer-events:none}:host([variant="redact"]:hover) .tg-inner:before,:host([variant="redact"][active]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) forwards}:host([variant="redact"][trigger="always"]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-redact{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}41%{transform:scaleX(1);transform-origin:right}80%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}:host([variant="noise"]) .tg-inner:before,:host([variant="noise"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="noise"]) .tg-inner:before{color:#9a614dcc}:host([variant="noise"]) .tg-inner:after{color:#487d73b3}:host([variant="noise"]:hover) .tg-inner:before,:host([variant="noise"][active]) .tg-inner:before,:host([variant="noise"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-noise-a .28s steps(1) infinite}:host([variant="noise"]:hover) .tg-inner:after,:host([variant="noise"][active]) .tg-inner:after,:host([variant="noise"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-noise-b .28s steps(1) infinite;animation-delay:40ms}@keyframes tg-noise-a{0%{clip-path:inset(18% 0 60% 0);transform:translate(-4px,1px) skew(-1deg)}14%{clip-path:inset(72% 0 8% 0);transform:translate(3px,-2px) skew(2deg)}28%{clip-path:inset(36% 0 40% 0);transform:translate(-2px,2px) skew(-2deg)}42%{clip-path:inset(5% 0 80% 0);transform:translate(4px) skew(1deg)}57%{clip-path:inset(55% 0 22% 0);transform:translate(-3px,-1px) skew(-1deg)}71%{clip-path:inset(85% 0 5% 0);transform:translate(2px,2px) skew(2deg)}85%{clip-path:inset(28% 0 50% 0);transform:translate(-4px,-2px) skew(-2deg)}to{clip-path:inset(48% 0 30% 0);transform:translate(3px,1px) skew(1deg)}}@keyframes tg-noise-b{0%{clip-path:inset(62% 0 18% 0);transform:translate(4px,-1px) skew(2deg)}14%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,2px) skew(-1deg)}28%{clip-path:inset(80% 0 8% 0);transform:translate(2px,-2px) skew(1deg)}42%{clip-path:inset(30% 0 42% 0);transform:translate(-4px,1px) skew(-2deg)}57%{clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px) skew(2deg)}71%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,2px) skew(-1deg)}85%{clip-path:inset(70% 0 12% 0);transform:translate(4px,-2px) skew(1deg)}to{clip-path:inset(22% 0 58% 0);transform:translate(-3px,1px) skew(-2deg)}}@media(prefers-reduced-motion:reduce){.tg-inner:before,.tg-inner:after{animation:none!important;opacity:0!important}.char.is-scrambling{animation:none!important;color:inherit}}}';
 export {
-  bentoGridTemplate
+  glitchCss as default
 };
 //# sourceMappingURL=index344.js.map

package/dist/index344.js.map

@@ -1 +1 @@
-{"version":3,"file":"index344.js","sources":["../src/components/organisms/bento-grid/lib-bento-grid.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibBentoGrid } from './lib-bento-grid.component';\n\nexport function bentoGridTemplate(ctx: LibBentoGrid): TemplateResult {\n  return html`\n    <div\n      class=\"bento-grid\"\n      part=\"grid\"\n      role=\"presentation\"\n      style=\"\n        --_columns: ${ctx.columns};\n        --_gap: var(--lib-space-${ctx.gap});\n        --_row-height: ${ctx.rowHeight};\n      \"\n    >\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,kBAAkB,KAAmC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMa,IAAI,OAAO;AAAA,kCACC,IAAI,GAAG;AAAA,yBAChB,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;"}
+{"version":3,"file":"index344.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index345.js

@@ -1,5 +1,19 @@
-const gridCss = "@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}}}";
+import { html } from "lit";
+function textGlitchTemplate(props) {
+  if (props.variant === "decode") {
+    return html`
+      <span class="tg-inner" data-text="${props.text}">
+        ${[...props.text].map(
+      (ch) => html`<span class="char" data-original="${ch}">${ch}</span>`
+    )}
+      </span>
+    `;
+  }
+  return html`
+    <span class="tg-inner" data-text="${props.text}">${props.text}</span>
+  `;
+}
 export {
-  gridCss as default
+  textGlitchTemplate
 };
 //# sourceMappingURL=index345.js.map

package/dist/index345.js.map

@@ -1 +1 @@
-{"version":3,"file":"index345.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index345.js","sources":["../src/components/atoms/text-glitch/lib-text-glitch.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { TextGlitchVariant } from './lib-text-glitch.component';\n\nexport interface TextGlitchTemplateProps {\n  text: string;\n  variant: TextGlitchVariant;\n}\n\n/**\n * Template de lib-text-glitch.\n *\n * Para `decode`: renderiza un <span class=\"char\"> por cada carácter Unicode\n * (usando spread de string — correcto para emoji y kanji multibyte).\n * El JS del componente manipula estos spans directamente sin pasar por Lit.\n *\n * Para el resto de variantes: texto plano dentro del wrapper con data-text,\n * que los ::before/::after leen con attr(data-text).\n */\nexport function textGlitchTemplate(props: TextGlitchTemplateProps): TemplateResult {\n  if (props.variant === 'decode') {\n    return html`\n      <span class=\"tg-inner\" data-text=\"${props.text}\">\n        ${[...props.text].map(\n          ch => html`<span class=\"char\" data-original=\"${ch}\">${ch}</span>`\n        )}\n      </span>\n    `;\n  }\n\n  return html`\n    <span class=\"tg-inner\" data-text=\"${props.text}\">${props.text}</span>\n  `;\n}"],"names":[],"mappings":";AAkBO,SAAS,mBAAmB,OAAgD;AACjF,MAAI,MAAM,YAAY,UAAU;AAC9B,WAAO;AAAA,0CAC+B,MAAM,IAAI;AAAA,UAC1C,CAAC,GAAG,MAAM,IAAI,EAAE;AAAA,MAChB,CAAA,OAAM,yCAAyC,EAAE,KAAK,EAAE;AAAA,IAAA,CACzD;AAAA;AAAA;AAAA,EAGP;AAEA,SAAO;AAAA,wCAC+B,MAAM,IAAI,KAAK,MAAM,IAAI;AAAA;AAEjE;"}