@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index322.js

@@ -1,157 +1,21 @@
-import { html, nothing } from "lit";
-const svgSearch = html`
-  <svg width="11" height="11" viewBox="0 0 16 16" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
-  </svg>`;
-const svgLogout = html`
-  <svg width="11" height="11" viewBox="0 0 14 14" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <path d="M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3"/>
-    <polyline points="10,4 12,7 10,10"/>
-    <line x1="4" y1="7" x2="12" y2="7"/>
-  </svg>`;
-const svgMenu = html`
-  <svg width="18" height="18" viewBox="0 0 16 16" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <line x1="2" y1="4" x2="14" y2="4"/>
-    <line x1="2" y1="8" x2="14" y2="8"/>
-    <line x1="2" y1="12" x2="14" y2="12"/>
-  </svg>`;
-const svgClose = html`
-  <svg width="18" height="18" viewBox="0 0 14 14" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <line x1="2" y1="2" x2="12" y2="12"/>
-    <line x1="12" y1="2" x2="2" y2="12"/>
-  </svg>`;
-function renderBadge(badge) {
-  if (badge === void 0 || badge === null || badge === "") return nothing;
-  if (badge === "dot") {
-    return html`<span class="sb-badge sb-badge--dot" aria-hidden="true"></span>`;
-  }
-  const n = typeof badge === "number" ? badge : parseInt(String(badge), 10);
-  const cls = !isNaN(n) && n > 9 || isNaN(n) ? "sb-badge--kaki" : "sb-badge--muted";
-  return html`<span class="sb-badge ${cls}">${badge}</span>`;
-}
-function renderHeader(p) {
-  const isGlitch = p.variant === "glitch";
-  const isKintsugi = p.variant === "kintsugi";
-  return html`
-    <div class="sb-header" part="header">
-      <div class="sb-logo-mark" part="logo-mark">
-        ${isKintsugi ? html`<span>${p.logoMark}</span>` : p.logoMark}
-      </div>
-      ${isGlitch ? html`<span class="sb-brand">⌗ ${p.brandName.toUpperCase()}</span>
-                <span class="sb-version">v0.1</span>` : html`<span class="sb-brand">${p.brandName}</span>`}
-    </div>
-  `;
-}
-function renderSearch(p) {
-  if (!p.showSearch) return nothing;
-  return html`
-    <div class="sb-search" part="search">
-      <div class="sb-search-inner">
-        ${svgSearch}
-        <input
-          class="sb-search-input"
-          type="search"
-          placeholder="${p.searchPlaceholder}"
-          aria-label="Buscar"
-          @input="${(e) => p.onSearchInput(e.target.value)}"
-        />
-        <span class="sb-search-kbd">⌘K</span>
-      </div>
-    </div>
-  `;
-}
-function renderNav(p) {
-  const isGlitch = p.variant === "glitch";
+import { nothing, html } from "lit";
+function renderQuote(ctx) {
   return html`
-    <nav class="sb-nav" part="nav" aria-label="Navegación principal">
-      <div class="sb-indicator" part="indicator"></div>
-
-      ${p.links.map((link) => html`
-        ${link.group ? html`
-          <div class="sb-group" part="group">
-            ${isGlitch ? `// ${link.group}` : link.group}
-          </div>
-        ` : nothing}
-
-        <button
-          class="sb-link ${link.id === p.active ? "is-active" : ""}"
-          part="link${link.id === p.active ? " link-active" : ""}"
-          data-id="${link.id}"
-          ?disabled="${link.disabled}"
-          aria-current="${link.id === p.active ? "page" : nothing}"
-          @click="${() => {
-    if (!link.disabled) p.onLinkClick(link.id);
-  }}"
-        >
-          <span class="sb-link-icon">
-            <lib-icon name="${link.icon}" size="sm"></lib-icon>
-          </span>
-
-          ${isGlitch ? html`<span class="sb-link-prefix">›</span>` : nothing}
+    <blockquote part="blockquote">
 
-          <span class="sb-link-label">${link.label}</span>
-
-          ${renderBadge(link.badge)}
-        </button>
-      `)}
-    </nav>
-  `;
-}
-function renderUser(p) {
-  const isDark = p.variant === "dark" || !p.variant;
-  return html`
-    <div class="sb-user" part="user">
-      <div class="sb-user-avatar" part="user-avatar">
-        ${p.userAvatar ? html`<img src="${p.userAvatar}" alt="${p.userName}">` : p.userInitials || p.userName.slice(0, 1)}
-      </div>
-
-      <div class="sb-user-info">
-        <div class="sb-user-name">${p.userName}</div>
-        ${p.userRole ? html`<div class="sb-user-role">${p.userRole}</div>` : nothing}
-      </div>
-
-      ${isDark ? html`<span class="sb-user-dot" aria-hidden="true"></span>` : p.showUserAction ? html`
-              <button
-                class="sb-user-action"
-                aria-label="Acción de usuario"
-                @click="${p.onUserAction}"
-              >${svgLogout}</button>` : nothing}
-    </div>
-  `;
-}
-function sidebarTemplate(p) {
-  return html`
-    <div
-      class="sb-overlay ${p.mobileOpen ? "is-open" : ""}"
-      @click="${p.onOverlayClick}"
-      aria-hidden="true"
-    ></div>
+      <p class="quote-text" part="text">
+        <!-- Línea 1: prop o slot -->
+        ${ctx.text ? html`${ctx.text}` : html`<slot></slot>`}
+        <!-- Línea 2: acento itálico -->
+        ${ctx.accent ? html`<em class="quote-accent" part="accent">${ctx.accent}</em>` : nothing}
+      </p>
 
-    <aside
-      class="sidebar
-        ${p.mobileOpen ? "is-open" : ""}
-        ${p.collapsed ? "is-collapsed" : ""}"
-      part="sidebar"
-    >
-      ${renderHeader(p)}
-      ${renderSearch(p)}
-      ${renderNav(p)}
-      ${renderUser(p)}
-    </aside>
+      ${ctx.cite ? html`<cite part="cite">${ctx.cite}</cite>` : nothing}
 
-    <button
-      class="sb-toggle"
-      aria-label="${p.mobileOpen ? "Cerrar menú" : "Abrir menú"}"
-      aria-expanded="${p.mobileOpen}"
-      @click="${p.onToggleClick}"
-    >${p.mobileOpen ? svgClose : svgMenu}</button>
+    </blockquote>
   `;
 }
 export {
-  sidebarTemplate
+  renderQuote
 };
 //# sourceMappingURL=index322.js.map

package/dist/index322.js.map

@@ -1 +1 @@
-{"version":3,"file":"index322.js","sources":["../src/components/organisms/sidebar/lib-sidebar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { SidebarLink } from '../../../types';\n\nexport interface SidebarTemplateProps {\n  /* Header */\n  logoMark:   string;\n  brandName:  string;\n  /* Search */\n  showSearch:          boolean;\n  searchPlaceholder:   string;\n  /* Nav */\n  links:  SidebarLink[];\n  active: string;\n  /* User footer */\n  userName:    string;\n  userRole:    string;\n  userAvatar:  string;\n  userInitials:string;\n  showUserAction: boolean;\n  /* State */\n  variant:    string;\n  collapsed:  boolean;\n  mobileOpen: boolean;\n  /* Handlers */\n  onLinkClick:   (id: string) => void;\n  onUserAction:  () => void;\n  onSearchInput: (q: string) => void;\n  onOverlayClick: () => void;\n  onToggleClick:  () => void;\n}\n\n/* ── SVG icons inline — no lib-icon dependency for shell elements ── */\nconst svgSearch = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n  </svg>`;\n\nconst svgLogout = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <path d=\"M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3\"/>\n    <polyline points=\"10,4 12,7 10,10\"/>\n    <line x1=\"4\" y1=\"7\" x2=\"12\" y2=\"7\"/>\n  </svg>`;\n\nconst svgMenu = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"4\" x2=\"14\" y2=\"4\"/>\n    <line x1=\"2\" y1=\"8\" x2=\"14\" y2=\"8\"/>\n    <line x1=\"2\" y1=\"12\" x2=\"14\" y2=\"12\"/>\n  </svg>`;\n\nconst svgClose = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\n/* ── Badge ── */\nfunction renderBadge(badge: string | number | undefined): TemplateResult | typeof nothing {\n  if (badge === undefined || badge === null || badge === '') return nothing;\n  if (badge === 'dot') {\n    return html`<span class=\"sb-badge sb-badge--dot\" aria-hidden=\"true\"></span>`;\n  }\n  const n = typeof badge === 'number' ? badge : parseInt(String(badge), 10);\n  const cls = (!isNaN(n) && n > 9) || isNaN(n) ? 'sb-badge--kaki' : 'sb-badge--muted';\n  return html`<span class=\"sb-badge ${cls}\">${badge}</span>`;\n}\n\n/* ── Header ── */\nfunction renderHeader(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n  const isKintsugi = p.variant === 'kintsugi';\n\n  return html`\n    <div class=\"sb-header\" part=\"header\">\n      <div class=\"sb-logo-mark\" part=\"logo-mark\">\n        ${isKintsugi\n          ? html`<span>${p.logoMark}</span>`\n          : p.logoMark}\n      </div>\n      ${isGlitch\n        ? html`<span class=\"sb-brand\">⌗ ${p.brandName.toUpperCase()}</span>\n                <span class=\"sb-version\">v0.1</span>`\n        : html`<span class=\"sb-brand\">${p.brandName}</span>`}\n    </div>\n  `;\n}\n\n/* ── Search ── */\nfunction renderSearch(p: SidebarTemplateProps): TemplateResult | typeof nothing {\n  if (!p.showSearch) return nothing;\n  return html`\n    <div class=\"sb-search\" part=\"search\">\n      <div class=\"sb-search-inner\">\n        ${svgSearch}\n        <input\n          class=\"sb-search-input\"\n          type=\"search\"\n          placeholder=\"${p.searchPlaceholder}\"\n          aria-label=\"Buscar\"\n          @input=\"${(e: Event): void =>\n            p.onSearchInput((e.target as HTMLInputElement).value)}\"\n        />\n        <span class=\"sb-search-kbd\">⌘K</span>\n      </div>\n    </div>\n  `;\n}\n\n/* ── Nav ── */\nfunction renderNav(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n\n  return html`\n    <nav class=\"sb-nav\" part=\"nav\" aria-label=\"Navegación principal\">\n      <div class=\"sb-indicator\" part=\"indicator\"></div>\n\n      ${p.links.map(link => html`\n        ${link.group ? html`\n          <div class=\"sb-group\" part=\"group\">\n            ${isGlitch ? `// ${link.group}` : link.group}\n          </div>\n        ` : nothing}\n\n        <button\n          class=\"sb-link ${link.id === p.active ? 'is-active' : ''}\"\n          part=\"link${link.id === p.active ? ' link-active' : ''}\"\n          data-id=\"${link.id}\"\n          ?disabled=\"${link.disabled}\"\n          aria-current=\"${link.id === p.active ? 'page' : nothing}\"\n          @click=\"${(): void => { if (!link.disabled) p.onLinkClick(link.id); }}\"\n        >\n          <span class=\"sb-link-icon\">\n            <lib-icon name=\"${link.icon}\" size=\"sm\"></lib-icon>\n          </span>\n\n          ${isGlitch\n            ? html`<span class=\"sb-link-prefix\">›</span>`\n            : nothing}\n\n          <span class=\"sb-link-label\">${link.label}</span>\n\n          ${renderBadge(link.badge)}\n        </button>\n      `)}\n    </nav>\n  `;\n}\n\n/* ── User footer ── */\nfunction renderUser(p: SidebarTemplateProps): TemplateResult {\n  const isDark = p.variant === 'dark' || !p.variant;\n\n  return html`\n    <div class=\"sb-user\" part=\"user\">\n      <div class=\"sb-user-avatar\" part=\"user-avatar\">\n        ${p.userAvatar\n          ? html`<img src=\"${p.userAvatar}\" alt=\"${p.userName}\">`\n          : p.userInitials || p.userName.slice(0, 1)}\n      </div>\n\n      <div class=\"sb-user-info\">\n        <div class=\"sb-user-name\">${p.userName}</div>\n        ${p.userRole ? html`<div class=\"sb-user-role\">${p.userRole}</div>` : nothing}\n      </div>\n\n      ${isDark\n        ? html`<span class=\"sb-user-dot\" aria-hidden=\"true\"></span>`\n        : p.showUserAction\n          ? html`\n              <button\n                class=\"sb-user-action\"\n                aria-label=\"Acción de usuario\"\n                @click=\"${p.onUserAction}\"\n              >${svgLogout}</button>`\n          : nothing}\n    </div>\n  `;\n}\n\n/* ── Template principal ── */\nexport function sidebarTemplate(p: SidebarTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"sb-overlay ${p.mobileOpen ? 'is-open' : ''}\"\n      @click=\"${p.onOverlayClick}\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <aside\n      class=\"sidebar\n        ${p.mobileOpen ? 'is-open' : ''}\n        ${p.collapsed  ? 'is-collapsed' : ''}\"\n      part=\"sidebar\"\n    >\n      ${renderHeader(p)}\n      ${renderSearch(p)}\n      ${renderNav(p)}\n      ${renderUser(p)}\n    </aside>\n\n    <button\n      class=\"sb-toggle\"\n      aria-label=\"${p.mobileOpen ? 'Cerrar menú' : 'Abrir menú'}\"\n      aria-expanded=\"${p.mobileOpen}\"\n      @click=\"${p.onToggleClick}\"\n    >${p.mobileOpen ? svgClose : svgMenu}</button>\n  `;\n}"],"names":[],"mappings":";AAgCA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,SAAS,YAAY,OAAqE;AACxF,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,GAAI,QAAO;AAClE,MAAI,UAAU,OAAO;AACnB,WAAO;AAAA,EACT;AACA,QAAM,IAAI,OAAO,UAAU,WAAW,QAAQ,SAAS,OAAO,KAAK,GAAG,EAAE;AACxE,QAAM,MAAO,CAAC,MAAM,CAAC,KAAK,IAAI,KAAM,MAAM,CAAC,IAAI,mBAAmB;AAClE,SAAO,6BAA6B,GAAG,KAAK,KAAK;AACnD;AAGA,SAAS,aAAa,GAAyC;AAC7D,QAAM,WAAW,EAAE,YAAY;AAC/B,QAAM,aAAa,EAAE,YAAY;AAEjC,SAAO;AAAA;AAAA;AAAA,UAGC,aACE,aAAa,EAAE,QAAQ,YACvB,EAAE,QAAQ;AAAA;AAAA,QAEd,WACE,gCAAgC,EAAE,UAAU,aAAa;AAAA,wDAEzD,8BAA8B,EAAE,SAAS,SAAS;AAAA;AAAA;AAG5D;AAGA,SAAS,aAAa,GAA0D;AAC9E,MAAI,CAAC,EAAE,WAAY,QAAO;AAC1B,SAAO;AAAA;AAAA;AAAA,UAGC,SAAS;AAAA;AAAA;AAAA;AAAA,yBAIM,EAAE,iBAAiB;AAAA;AAAA,oBAExB,CAAC,MACT,EAAE,cAAe,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjE;AAGA,SAAS,UAAU,GAAyC;AAC1D,QAAM,WAAW,EAAE,YAAY;AAE/B,SAAO;AAAA;AAAA;AAAA;AAAA,QAID,EAAE,MAAM,IAAI,CAAA,SAAQ;AAAA,UAClB,KAAK,QAAQ;AAAA;AAAA,cAET,WAAW,MAAM,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA;AAAA,YAE5C,OAAO;AAAA;AAAA;AAAA,2BAGQ,KAAK,OAAO,EAAE,SAAS,cAAc,EAAE;AAAA,sBAC5C,KAAK,OAAO,EAAE,SAAS,iBAAiB,EAAE;AAAA,qBAC3C,KAAK,EAAE;AAAA,uBACL,KAAK,QAAQ;AAAA,0BACV,KAAK,OAAO,EAAE,SAAS,SAAS,OAAO;AAAA,oBAC7C,MAAY;AAAE,QAAI,CAAC,KAAK,SAAU,GAAE,YAAY,KAAK,EAAE;AAAA,EAAG,CAAC;AAAA;AAAA;AAAA,8BAGjD,KAAK,IAAI;AAAA;AAAA;AAAA,YAG3B,WACE,8CACA,OAAO;AAAA;AAAA,wCAEmB,KAAK,KAAK;AAAA;AAAA,YAEtC,YAAY,KAAK,KAAK,CAAC;AAAA;AAAA,OAE5B,CAAC;AAAA;AAAA;AAGR;AAGA,SAAS,WAAW,GAAyC;AAC3D,QAAM,SAAS,EAAE,YAAY,UAAU,CAAC,EAAE;AAE1C,SAAO;AAAA;AAAA;AAAA,UAGC,EAAE,aACA,iBAAiB,EAAE,UAAU,UAAU,EAAE,QAAQ,OACjD,EAAE,gBAAgB,EAAE,SAAS,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,oCAIhB,EAAE,QAAQ;AAAA,UACpC,EAAE,WAAW,iCAAiC,EAAE,QAAQ,WAAW,OAAO;AAAA;AAAA;AAAA,QAG5E,SACE,6DACA,EAAE,iBACA;AAAA;AAAA;AAAA;AAAA,0BAIc,EAAE,YAAY;AAAA,iBACvB,SAAS,cACd,OAAO;AAAA;AAAA;AAGnB;AAGO,SAAS,gBAAgB,GAAyC;AACvE,SAAO;AAAA;AAAA,0BAEiB,EAAE,aAAa,YAAY,EAAE;AAAA,gBACvC,EAAE,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMtB,EAAE,aAAa,YAAY,EAAE;AAAA,UAC7B,EAAE,YAAa,iBAAiB,EAAE;AAAA;AAAA;AAAA,QAGpC,aAAa,CAAC,CAAC;AAAA,QACf,aAAa,CAAC,CAAC;AAAA,QACf,UAAU,CAAC,CAAC;AAAA,QACZ,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKD,EAAE,aAAa,gBAAgB,YAAY;AAAA,uBACxC,EAAE,UAAU;AAAA,gBACnB,EAAE,aAAa;AAAA,OACxB,EAAE,aAAa,WAAW,OAAO;AAAA;AAExC;"}
+{"version":3,"file":"index322.js","sources":["../src/components/atoms/quote/lib-quote.html.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport type { LibQuote } from './lib-quote.component';\n\nexport function renderQuote(ctx: LibQuote): TemplateResult {\n  return html`\n    <blockquote part=\"blockquote\">\n\n      <p class=\"quote-text\" part=\"text\">\n        <!-- Línea 1: prop o slot -->\n        ${ctx.text\n          ? html`${ctx.text}`\n          : html`<slot></slot>`\n        }\n        <!-- Línea 2: acento itálico -->\n        ${ctx.accent\n          ? html`<em class=\"quote-accent\" part=\"accent\">${ctx.accent}</em>`\n          : nothing\n        }\n      </p>\n\n      ${ctx.cite\n        ? html`<cite part=\"cite\">${ctx.cite}</cite>`\n        : nothing\n      }\n\n    </blockquote>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,YAAY,KAA+B;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC,IAAI,OACF,OAAO,IAAI,IAAI,KACf,mBACJ;AAAA;AAAA,UAEE,IAAI,SACF,8CAA8C,IAAI,MAAM,UACxD,OACJ;AAAA;AAAA;AAAA,QAGA,IAAI,OACF,yBAAyB,IAAI,IAAI,YACjC,OACJ;AAAA;AAAA;AAAA;AAIN;"}

package/dist/index323.js

@@ -1,4 +1,4 @@
-const componentCss = '@layer tokens,reset,components;@layer reset{:host{display:block;height:100%}*,*:before,*:after{box-sizing:border-box}a{text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none}}@layer components{.sidebar{width:var(--lib-sidebar-width, 240px);height:100vh;display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:var(--z-raised);overflow:hidden;transition:width var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);background:var(--color-washi-950);border-right:1px solid rgb(255,255,255,.07)}.sidebar.is-collapsed{width:64px}:host([variant="light"]) .sidebar{background:var(--bg-elevated);border-right:1px solid var(--border-subtle)}:host([variant="kintsugi"]) .sidebar{background:var(--color-washi-950);border-right:none}:host([variant="kintsugi"]) .sidebar:after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.3) 10%,var(--color-kaki-400) 30%,#F5D08A 50%,var(--color-kaki-400) 70%,rgb(184,90,30,.3) 90%,transparent 100%);background-size:100% 200%;animation:sb-kintsugi-seam 5s linear infinite;pointer-events:none;z-index:2}@keyframes sb-kintsugi-seam{0%{background-position:0 -100%}to{background-position:0 100%}}:host([variant="glitch"]) .sidebar{background:var(--color-washi-950);border-right:1px solid rgb(255,255,255,.06);animation:sb-glitch-border 7s steps(1) infinite}:host([variant="glitch"]) .sidebar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.015) 3px,rgb(255,255,255,.015) 4px);pointer-events:none;z-index:5;animation:sb-scanline-shift 7s steps(1) infinite}@keyframes sb-glitch-border{0%,88%,to{border-color:#ffffff0f;box-shadow:none}89%{border-color:#d9723466;box-shadow:-2px 0 #d9723433}90%{border-color:#4e94824d;box-shadow:2px 0 #4e948226}91%{border-color:#ffffff0f;box-shadow:none}}@keyframes sb-scanline-shift{0%,87%,to{opacity:1;transform:none}88%{transform:translateY(-3px);opacity:.7}89%{transform:translateY(2px);opacity:.9}90%{transform:none;opacity:1}}.sb-header{height:56px;padding:0 var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;border-bottom:1px solid rgb(255,255,255,.06);position:relative;z-index:1;overflow:hidden}:host([variant="light"]) .sb-header{border-bottom-color:var(--color-washi-100)}:host([variant="kintsugi"]) .sb-header{border-bottom-color:#b85a1e1f}.sb-logo-mark{width:28px;height:28px;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:1rem;font-weight:300;flex-shrink:0}:host([variant="dark"]) .sb-logo-mark,.sb-logo-mark{background:var(--color-kaki-500);color:#fff}:host([variant="kintsugi"]) .sb-logo-mark{position:relative;background:transparent;border:none;overflow:visible;border-radius:50%}:host([variant="kintsugi"]) .sb-logo-mark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:conic-gradient(var(--color-kaki-600),#F5D08A,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));animation:sb-logo-ring 4s linear infinite}:host([variant="kintsugi"]) .sb-logo-mark:after{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:var(--color-washi-950)}:host([variant="kintsugi"]) .sb-logo-mark span{position:relative;z-index:2;color:var(--color-kaki-400)}@keyframes sb-logo-ring{to{transform:rotate(360deg)}}.sb-brand{font-family:var(--lib-font-display);font-size:1.1rem;font-weight:300;letter-spacing:.08em;white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base) var(--ease-out),width var(--duration-slow) var(--ease-out);color:#faf7f4a6}:host([variant="light"]) .sb-brand{color:var(--text-primary)}:host([variant="kintsugi"]) .sb-brand{color:#faf7f480}:host([variant="glitch"]) .sb-brand{font-family:var(--lib-font-mono);font-size:.75rem;letter-spacing:.2em;color:var(--color-kaki-400)}.sidebar.is-collapsed .sb-brand{opacity:0;width:0;pointer-events:none}.sb-version{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.12em;color:#faf7f426;white-space:nowrap;transition:opacity var(--duration-base)}.sidebar.is-collapsed .sb-version{opacity:0;pointer-events:none}.sb-search{padding:var(--lib-space-sm) var(--lib-space-md);flex-shrink:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-base);max-height:52px}.sidebar.is-collapsed .sb-search{opacity:0;max-height:0;padding:0;pointer-events:none}.sb-search-inner{display:flex;align-items:center;gap:var(--lib-space-xs);border:1px solid rgb(255,255,255,.08);background:#ffffff0a;padding:0 var(--lib-space-sm);height:30px;transition:border-color var(--duration-base)}.sb-search-inner:focus-within{border-color:#ffffff2e}.sb-search-inner svg{flex-shrink:0;color:#faf7f440}.sb-search-input{flex:1;background:none;border:none;outline:none;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:#faf7f499;width:100%}.sb-search-input::placeholder{color:#faf7f433}.sb-search-kbd{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;color:#faf7f426;border:1px solid rgb(255,255,255,.1);padding:0 4px;white-space:nowrap;flex-shrink:0}.sb-nav{flex:1;padding:var(--lib-space-md) 0;display:flex;flex-direction:column;position:relative;z-index:1;overflow-y:auto;scrollbar-width:none}.sb-nav::-webkit-scrollbar{display:none}.sb-indicator{position:absolute;left:0;width:2px;background:var(--color-kaki-500);border-radius:0 2px 2px 0;pointer-events:none;opacity:0;transition:top .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),opacity var(--duration-base)}.sb-indicator.visible{opacity:1}:host([variant="kintsugi"]) .sb-indicator{background:var(--color-kaki-400)}.sidebar.is-collapsed .sb-indicator{display:none}.sb-group{padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:#faf7f42e;white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base),max-height var(--duration-slow),padding var(--duration-slow);max-height:32px}:host([variant="light"]) .sb-group{color:var(--color-washi-400)}:host([variant="kintsugi"]) .sb-group{color:#b85a1e59}:host([variant="glitch"]) .sb-group{color:#faf7f426;letter-spacing:.16em}.sidebar.is-collapsed .sb-group{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none}.sb-link{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);width:100%;text-align:left;border-left:2px solid transparent;background:transparent;cursor:pointer;position:relative;transition:color var(--duration-fast),background var(--duration-fast),border-color var(--duration-fast);font-family:var(--lib-font-body);font-size:var(--text-sm);color:#faf7f459}:host([variant="light"]) .sb-link{color:var(--color-washi-600)}:host([variant="kintsugi"]) .sb-link{color:#faf7f44d}:host([variant="glitch"]) .sb-link{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:#faf7f440;padding:.45rem var(--lib-space-md)}.sb-link:hover:not(.is-active,[disabled]){color:#faf7f4b3;background:#ffffff0a;border-left-color:#ffffff26}:host([variant="light"]) .sb-link:hover:not(.is-active,[disabled]){color:var(--color-washi-900);background:var(--color-washi-50);border-left-color:var(--color-washi-300)}:host([variant="kintsugi"]) .sb-link:hover:not(.is-active,[disabled]){color:#faf7f499;background:#b85a1e0d}:host([variant="glitch"]) .sb-link:hover:not(.is-active,[disabled]){color:#faf7f499;background:#ffffff08}.sb-link.is-active{color:var(--color-kaki-400);background:#b85a1e1a;border-left-color:var(--color-kaki-500)}:host([variant="light"]) .sb-link.is-active{color:var(--color-kaki-600);background:var(--color-kaki-50);border-left-color:var(--color-kaki-500)}:host([variant="kintsugi"]) .sb-link.is-active{color:var(--color-kaki-400);background:linear-gradient(90deg,rgb(184,90,30,.15),transparent);border-left-color:var(--color-kaki-400)}:host([variant="glitch"]) .sb-link.is-active{color:var(--color-kaki-400);background:#b85a1e14;border-left-color:var(--color-kaki-500)}.sb-link[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.sb-link-icon{display:flex;align-items:center;flex-shrink:0;font-size:15px;opacity:.7;transition:opacity var(--duration-base)}.sb-link.is-active .sb-link-icon{opacity:1}.sb-link-prefix{font-size:9px;flex-shrink:0;color:var(--color-kaki-400)}.sb-link:not(.is-active) .sb-link-prefix{opacity:.4;color:inherit}.sb-link-label{white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base),width var(--duration-slow) var(--ease-out)}.sb-badge{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;padding:1px 6px;letter-spacing:.1em;flex-shrink:0;transition:opacity var(--duration-base)}.sb-badge--kaki{background:var(--color-kaki-500);color:#fff}.sb-badge--muted{background:var(--color-washi-200);color:var(--color-washi-600)}:host([variant="kintsugi"]) .sb-badge--kaki{background:transparent;border:1px solid rgb(184,90,30,.3);color:var(--color-kaki-400)}.sb-badge--dot{width:6px;height:6px;border-radius:50%;background:var(--color-kaki-400);padding:0}:host([variant="glitch"]) .sb-badge--dot{animation:sb-glitch-pulse 2s ease-in-out infinite}@keyframes sb-glitch-pulse{0%,to{opacity:1}50%{opacity:.2}}.sidebar.is-collapsed .sb-link{position:relative;padding:0;height:44px;border-left-color:transparent}.sidebar.is-collapsed .sb-link.is-active{background:#b85a1e26;border-left-color:transparent}:host([variant="light"]) .sidebar.is-collapsed .sb-link.is-active{background:var(--color-kaki-50)}.sidebar.is-collapsed .sb-link-label,.sidebar.is-collapsed .sb-badge,.sidebar.is-collapsed .sb-link-prefix{display:none}.sidebar.is-collapsed .sb-link-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:17px;opacity:1}.sb-user{padding:var(--lib-space-md);border-top:1px solid rgb(255,255,255,.06);display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;overflow:hidden;position:relative;z-index:1;transition:padding var(--duration-slow)}:host([variant="light"]) .sb-user{border-top-color:var(--color-washi-100)}:host([variant="kintsugi"]) .sb-user{border-top-color:#b85a1e1f}:host([variant="glitch"]) .sb-user{border-top-color:#ffffff0d}.sidebar.is-collapsed .sb-user{justify-content:center;padding:var(--lib-space-sm)}.sb-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:.95rem;flex-shrink:0;overflow:hidden;cursor:pointer}.sb-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}:host([variant="dark"]) .sb-user-avatar,.sb-user-avatar{background:var(--color-kaki-500);color:#fff}:host([variant="kintsugi"]) .sb-user-avatar{background:#b85a1e40;border:1px solid rgb(184,90,30,.4);color:var(--color-kaki-400)}:host([variant="glitch"]) .sb-user-avatar{background:#b85a1e40;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400);font-family:var(--lib-font-mono);font-size:.75rem}.sb-user-info{min-width:0;flex:1;overflow:hidden;transition:opacity var(--duration-base),width var(--duration-slow)}.sidebar.is-collapsed .sb-user-info{opacity:0;width:0;pointer-events:none}.sb-user-name{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#faf7f48c}:host([variant="light"]) .sb-user-name{color:var(--color-washi-800)}:host([variant="kintsugi"]) .sb-user-name{color:#faf7f473}.sb-user-role{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;color:#faf7f433}:host([variant="light"]) .sb-user-role{color:var(--color-washi-400)}:host([variant="kintsugi"]) .sb-user-role{color:#b85a1e80}.sb-user-action{margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid rgb(255,255,255,.1);color:#faf7f44d;flex-shrink:0;transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base);cursor:pointer}.sb-user-action:hover{border-color:#fff3;background:#ffffff0d;color:#faf7f4b3}:host([variant="light"]) .sb-user-action{border-color:var(--color-washi-200);color:var(--color-washi-400)}:host([variant="light"]) .sb-user-action:hover{border-color:var(--color-washi-400);background:var(--color-washi-50);color:var(--color-washi-700)}.sb-user-dot{width:6px;height:6px;border-radius:50%;background:var(--color-celadon-400);flex-shrink:0;margin-left:auto}.sidebar.is-collapsed .sb-user-action,.sidebar.is-collapsed .sb-user-dot{display:none}.sb-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:calc(var(--z-raised) - 1);opacity:0;transition:opacity var(--duration-base)}.sb-toggle{display:none;position:fixed;bottom:var(--lib-space-lg);right:var(--lib-space-lg);z-index:var(--z-modal);width:44px;height:44px;background:var(--color-washi-900);color:var(--color-washi-50);align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}@media(max-width:768px){:host{height:auto}.sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;transform:translate(-100%);z-index:var(--z-modal);box-shadow:var(--shadow-xl)}.sidebar.is-open{transform:translate(0)}.sb-toggle{display:flex}.sb-overlay{display:block}.sb-overlay.is-open{opacity:1;pointer-events:auto}}@media(prefers-reduced-motion:reduce){.sidebar,.sb-indicator,:host([variant="kintsugi"]) .sidebar:after,:host([variant="kintsugi"]) .sb-logo-mark:before,:host([variant="glitch"]) .sidebar,:host([variant="glitch"]) .sidebar:before{animation:none!important;transition:none!important}}}';
+const componentCss = '@layer tokens,reset,components;@layer tokens{:host{display:block;--q-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--q-font-mono: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--q-text-color: rgb(250, 247, 244, .55);--q-accent-color: var(--color-kaki-400, #D97234);--q-cite-color: rgb(250, 247, 244, .18);--q-size: clamp(1.6rem, 3vw, 2.8rem)}:host([surface="light"]){--q-text-color: var(--color-washi-700, #5C4E42);--q-accent-color: var(--color-kaki-500, #B85A1E);--q-cite-color: var(--color-washi-400, #B8A99A)}:host([surface="washi"]){--q-text-color: var(--color-washi-800, #3D332A);--q-accent-color: var(--color-kaki-500, #B85A1E);--q-cite-color: var(--color-washi-500, #9A8878)}:host([size="sm"]){--q-size: clamp(1.2rem, 2vw, 1.8rem)}:host([size="md"]){--q-size: clamp(1.6rem, 3vw, 2.8rem)}:host([size="lg"]){--q-size: clamp(2rem, 4vw, 3.5rem)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{blockquote{margin:0;padding:0}.quote-text{font-family:var(--q-font-display);font-size:var(--q-size);font-weight:300;letter-spacing:-.02em;line-height:1.35;color:var(--q-text-color)}.quote-accent{display:block;font-style:italic;color:var(--q-accent-color);margin-top:.25rem}::slotted(*){font-family:var(--q-font-display);font-size:var(--q-size);font-weight:300;letter-spacing:-.02em;line-height:1.35;color:var(--q-text-color);display:block}cite{display:block;font-style:normal;font-family:var(--q-font-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--q-cite-color);margin-top:1.5rem}}';
 export {
   componentCss as default
 };

package/dist/index324.js

@@ -1,12 +1,34 @@
-import { html } from "lit";
-function stepperTemplate(props) {
+import { nothing, html } from "lit";
+function radioTemplate(props) {
   return html`
-    <div class="stepper-track" role="list" aria-label="Pasos del proceso">
-      <slot @slotchange=${props.handleSlotChange}></slot>
-    </div>
+    <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 {
-  stepperTemplate
+  radioTemplate
 };
 //# sourceMappingURL=index324.js.map

package/dist/index324.js.map

@@ -1 +1 @@
-{"version":3,"file":"index324.js","sources":["../src/components/organisms/stepper/lib-stepper.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibStepperOrientation = 'horizontal' | 'vertical';\nexport type LibStepperVariant     = 'default' | 'minimal' | 'kintsugi';\nexport type LibStepperSize        = 'sm' | 'md' | 'lg';\n\nexport interface StepperTemplateProps {\n  orientation: LibStepperOrientation;\n  handleSlotChange: (e: Event) => void;\n}\n\n/**\n * El stepper es únicamente el contenedor flex + slot.\n * Toda la lógica de estados y el dibujado visual vive en lib-step.\n * @layer components gestiona flex-direction vía :host([orientation=\"vertical\"]).\n */\nexport function stepperTemplate(props: StepperTemplateProps): TemplateResult {\n  return html`\n    <div class=\"stepper-track\" role=\"list\" aria-label=\"Pasos del proceso\">\n      <slot @slotchange=${props.handleSlotChange}></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA,0BAEiB,MAAM,gBAAgB;AAAA;AAAA;AAGhD;"}
+{"version":3,"file":"index324.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/index325.js

@@ -1,5 +1,5 @@
-const stepperCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.stepper-track{display:flex;flex-direction:row;align-items:flex-start;width:100%;position:relative}:host([orientation="vertical"]) .stepper-track{flex-direction:column}}';
+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 {
-  stepperCss as default
+  radioCss as default
 };
 //# sourceMappingURL=index325.js.map

package/dist/index326.js

@@ -1,97 +1,88 @@
 import { html, nothing } from "lit";
-const iconClose = html`
-  <svg viewBox="0 0 14 14" aria-hidden="true">
-    <line x1="2" y1="2" x2="12" y2="12"/>
-    <line x1="12" y1="2" x2="2" y2="12"/>
-  </svg>`;
-function drawerTemplate(ctx) {
-  const isHorizontal = ctx.placement === "right" || ctx.placement === "left";
-  const isGlitch = ctx.variant === "glitch" || ctx.variant === "glitch-dark";
-  const placementClass = `dr-${ctx.placement}`;
+const ICONS = {
+  star: {
+    regular: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M239.2,97.4A16.4,16.4,0,0,0,224.6,86l-59.4-4.1-22-55.5A16.4,16.4,0,0,0,128,16h0a16.4,16.4,0,0,0-15.2,10.4L90.8,82,31.4,86A16.5,16.5,0,0,0,16.8,97.4,16.8,16.8,0,0,0,22,115.5l45.4,38.4L52.5,212a16.4,16.4,0,0,0,6.4,17.3,16.7,16.7,0,0,0,18.2.5L128,198.8l51,31.1a16.1,16.1,0,0,0,8.5,2.4,16.5,16.5,0,0,0,9.7-3.1A16.4,16.4,0,0,0,203.5,212l-14.9-58.1L234,115.5A16.8,16.8,0,0,0,239.2,97.4Zm-15.4,5.9-45.4,38.4a8,8,0,0,0-2.6,8.2l14.9,58.1a.6.6,0,0,1-.3.7c-.1.1-.3.2-.5.1l-51-31.2a8,8,0,0,0-8.4,0l-51,31.1-.4-.1a.6.6,0,0,1-.3-.7l14.9-58.1a8,8,0,0,0-2.6-8.2L31.2,103.3l-.1-.4c.1-.3.2-.5.5-.6l59.3-4.1a8,8,0,0,0,6.8-5.1L119.7,38a.8.8,0,0,1,.6-.5h.2a.8.8,0,0,1,.6.5l21.9,55.2a8,8,0,0,0,6.8,5.1l59.3,4.1c.3.1.4.3.5.6A.7.7,0,0,1,223.8,103.3Z"/>
+    </svg>`,
+    fill: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34l13.49-58.54L21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"/>
+    </svg>`
+  },
+  heart: {
+    regular: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M178,32c-20.65,0-38.73,8.88-50,23.89C116.73,40.88,98.65,32,78,32A62.07,62.07,0,0,0,16,94c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,220.66,240,164,240,94A62.07,62.07,0,0,0,178,32ZM128,206.8C109.74,196.16,32,147.69,32,94A46.06,46.06,0,0,1,78,48c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,147.61,146.24,196.15,128,206.8Z"/>
+    </svg>`,
+    fill: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M240,94c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,220.66,16,164,16,94A62.07,62.07,0,0,1,78,32c20.65,0,38.73,8.88,50,23.89C139.27,40.88,157.35,32,178,32A62.07,62.07,0,0,1,240,94Z"/>
+    </svg>`
+  },
+  diamond: {
+    regular: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M235.32,104,211.31,56a16,16,0,0,0-14.31-8.05H59A16,16,0,0,0,44.69,56L20.68,104a16,16,0,0,0,2.62,18.51l96,96a16,16,0,0,0,17.4,3.37,15.93,15.93,0,0,0,5.26-3.38l96-96A16,16,0,0,0,235.32,104ZM59,64H197l21.33,42.67L128,213.32,37.67,106.67Z"/>
+    </svg>`,
+    fill: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M238,106.38,214,58.34A16.09,16.09,0,0,0,199.69,50H56.31A16.09,16.09,0,0,0,42,58.34L18,106.38a16,16,0,0,0,2.69,18.76l96,96a16,16,0,0,0,22.62,0l96-96A16,16,0,0,0,238,106.38Z"/>
+    </svg>`
+  }
+};
+function getIcon(name) {
+  return ICONS[name] ?? ICONS["star"];
+}
+function ratingTemplate(ctx) {
+  const { value, max, icon, readonly, showCount, count } = ctx;
+  const icons = getIcon(icon);
+  const display = ctx._hoverValue || value;
+  const items = Array.from({ length: max }, (_, i) => {
+    const pos = i + 1;
+    const isHalf = readonly && !Number.isInteger(value) && pos === Math.ceil(value);
+    const isFilled = pos <= Math.floor(display);
+    const isPreview = !readonly && pos > Math.floor(display) && pos <= ctx._hoverValue;
+    if (isHalf) {
+      return html`
+        <span
+          class="rt-item rt-item-half"
+          part="item item-half"
+          aria-hidden="true"
+        >
+          ${icons == null ? void 0 : icons.regular}
+          <span class="rt-half-fill">${icons == null ? void 0 : icons.fill}</span>
+        </span>
+      `;
+    }
+    return html`
+      <span
+        class="rt-item ${isFilled ? "is-filled" : ""} ${isPreview ? "is-preview" : ""}"
+        part="item${isFilled ? " item-filled" : ""}"
+        role="${readonly ? nothing : "button"}"
+        aria-label="${readonly ? nothing : `Valorar ${pos} de ${max}`}"
+        tabindex="${readonly ? nothing : "0"}"
+        @mouseenter="${() => ctx._onEnter(pos)}"
+        @click="${() => ctx._onClick(pos)}"
+        @keydown="${(e) => ctx._onKeyItem(e, pos)}"
+      >
+        ${isFilled || isPreview ? icons == null ? void 0 : icons.fill : icons == null ? void 0 : icons.regular}
+      </span>
+    `;
+  });
+  const numDisplay = showCount ? html`
+        <span class="rt-num" part="num">
+          <strong>${value > 0 ? value.toFixed(1) : "—"}</strong>
+          ${count != null ? html`<span style="margin-left:2px;">(${count})</span>` : nothing}
+        </span>` : nothing;
   return html`
-    <!-- Backdrop — click fuera cierra -->
     <div
-      class="dr-backdrop"
-      part="backdrop"
-      @click="${(e) => {
-    if (e.target.classList.contains("dr-backdrop")) ctx._close();
-  }}"
+      class="rt"
+      part="root"
+      role="${readonly ? "img" : "group"}"
+      aria-label="${readonly ? `Valoración: ${value} de ${max}` : `Valorar de 1 a ${max}`}"
+      @mouseleave="${() => ctx._onLeave()}"
     >
-      <!-- Panel -->
-      <div
-        class="dr ${placementClass}"
-        part="panel"
-        role="dialog"
-        aria-modal="true"
-        aria-label="${ctx.drawerLabel}"
-        tabindex="-1"
-      >
-        <!-- RGB ghost layers (glitch variants únicamente) -->
-        ${isGlitch ? html`
-          <div class="dr-rgb-r" aria-hidden="true"></div>
-          <div class="dr-rgb-b" aria-hidden="true"></div>
-        ` : nothing}
-
-        <!-- Handle bar — solo top / bottom -->
-        ${!isHorizontal ? html`
-          <div class="dr-handle" part="handle">
-            <div class="dr-handle-bar"></div>
-          </div>
-        ` : nothing}
-
-        <!-- Header -->
-        <div class="dr-header" part="header">
-          <div class="dr-title-block">
-
-            <!-- Eyebrow — slot o prop -->
-            ${ctx.eyebrow ? html`
-              <div class="dr-eyebrow" part="eyebrow">
-                <slot name="eyebrow">${ctx.eyebrow}</slot>
-              </div>
-            ` : html`
-              <slot name="eyebrow">
-                <div class="dr-eyebrow" part="eyebrow" style="display:none"></div>
-              </slot>
-            `}
-
-            <!-- Title — slot o prop -->
-            <div class="dr-title" part="title" id="dr-title-${ctx._uid}">
-              <slot name="title">${ctx.label}</slot>
-            </div>
-
-            <!-- Subtitle — slot o prop -->
-            ${ctx.subtitle ? html`
-              <div class="dr-subtitle" part="subtitle">
-                <slot name="subtitle">${ctx.subtitle}</slot>
-              </div>
-            ` : html`<slot name="subtitle"></slot>`}
-
-          </div>
-
-          <!-- Botón cerrar -->
-          <button
-            class="dr-close"
-            part="close-btn"
-            aria-label="Cerrar"
-            @click="${() => ctx._close()}"
-          >${iconClose}</button>
-        </div>
-
-        <!-- Body — slot default -->
-        <div class="dr-body" part="body">
-          <slot></slot>
-        </div>
-
-        <!-- Footer — slot footer (oculto si vacío via CSS) -->
-        <div class="dr-footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
-
-      </div>
+      ${items}
     </div>
+    ${numDisplay}
   `;
 }
 export {
-  drawerTemplate
+  ratingTemplate
 };
 //# sourceMappingURL=index326.js.map

package/dist/index326.js.map

@@ -1 +1 @@
-{"version":3,"file":"index326.js","sources":["../src/components/organisms/drawer/lib-drawer.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibDrawer } from './lib-drawer.component';\n\n/* ── SVG close (X) ── */\nconst iconClose: TemplateResult = html`\n  <svg viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\nexport function drawerTemplate(ctx: LibDrawer): TemplateResult {\n  const isHorizontal = ctx.placement === 'right' || ctx.placement === 'left';\n  const isGlitch     = ctx.variant === 'glitch' || ctx.variant === 'glitch-dark';\n\n  /* Clase CSS del panel según placement */\n  const placementClass = `dr-${ctx.placement}`;\n\n  return html`\n    <!-- Backdrop — click fuera cierra -->\n    <div\n      class=\"dr-backdrop\"\n      part=\"backdrop\"\n      @click=\"${(e: MouseEvent): void => {\n        if ((e.target as HTMLElement).classList.contains('dr-backdrop')) ctx._close();\n      }}\"\n    >\n      <!-- Panel -->\n      <div\n        class=\"dr ${placementClass}\"\n        part=\"panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"${ctx.drawerLabel}\"\n        tabindex=\"-1\"\n      >\n        <!-- RGB ghost layers (glitch variants únicamente) -->\n        ${isGlitch ? html`\n          <div class=\"dr-rgb-r\" aria-hidden=\"true\"></div>\n          <div class=\"dr-rgb-b\" aria-hidden=\"true\"></div>\n        ` : nothing}\n\n        <!-- Handle bar — solo top / bottom -->\n        ${!isHorizontal ? html`\n          <div class=\"dr-handle\" part=\"handle\">\n            <div class=\"dr-handle-bar\"></div>\n          </div>\n        ` : nothing}\n\n        <!-- Header -->\n        <div class=\"dr-header\" part=\"header\">\n          <div class=\"dr-title-block\">\n\n            <!-- Eyebrow — slot o prop -->\n            ${ctx.eyebrow ? html`\n              <div class=\"dr-eyebrow\" part=\"eyebrow\">\n                <slot name=\"eyebrow\">${ctx.eyebrow}</slot>\n              </div>\n            ` : html`\n              <slot name=\"eyebrow\">\n                <div class=\"dr-eyebrow\" part=\"eyebrow\" style=\"display:none\"></div>\n              </slot>\n            `}\n\n            <!-- Title — slot o prop -->\n            <div class=\"dr-title\" part=\"title\" id=\"dr-title-${ctx._uid}\">\n              <slot name=\"title\">${ctx.label}</slot>\n            </div>\n\n            <!-- Subtitle — slot o prop -->\n            ${ctx.subtitle ? html`\n              <div class=\"dr-subtitle\" part=\"subtitle\">\n                <slot name=\"subtitle\">${ctx.subtitle}</slot>\n              </div>\n            ` : html`<slot name=\"subtitle\"></slot>`}\n\n          </div>\n\n          <!-- Botón cerrar -->\n          <button\n            class=\"dr-close\"\n            part=\"close-btn\"\n            aria-label=\"Cerrar\"\n            @click=\"${(): void => ctx._close()}\"\n          >${iconClose}</button>\n        </div>\n\n        <!-- Body — slot default -->\n        <div class=\"dr-body\" part=\"body\">\n          <slot></slot>\n        </div>\n\n        <!-- Footer — slot footer (oculto si vacío via CSS) -->\n        <div class=\"dr-footer\" part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAAA;AAM3B,SAAS,eAAe,KAAgC;AAC7D,QAAM,eAAe,IAAI,cAAc,WAAW,IAAI,cAAc;AACpE,QAAM,WAAe,IAAI,YAAY,YAAY,IAAI,YAAY;AAGjE,QAAM,iBAAiB,MAAM,IAAI,SAAS;AAE1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKO,CAAC,MAAwB;AACjC,QAAK,EAAE,OAAuB,UAAU,SAAS,aAAa,OAAO,OAAA;AAAA,EACvE,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIa,cAAc;AAAA;AAAA;AAAA;AAAA,sBAIZ,IAAI,WAAW;AAAA;AAAA;AAAA;AAAA,UAI3B,WAAW;AAAA;AAAA;AAAA,YAGT,OAAO;AAAA;AAAA;AAAA,UAGT,CAAC,eAAe;AAAA;AAAA;AAAA;AAAA,YAId,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOL,IAAI,UAAU;AAAA;AAAA,uCAEW,IAAI,OAAO;AAAA;AAAA,gBAElC;AAAA;AAAA;AAAA;AAAA,aAIH;AAAA;AAAA;AAAA,8DAGiD,IAAI,IAAI;AAAA,mCACnC,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA,cAI9B,IAAI,WAAW;AAAA;AAAA,wCAEW,IAAI,QAAQ;AAAA;AAAA,gBAEpC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAS7B,MAAY,IAAI,QAAQ;AAAA,aACjC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBtB;"}
+{"version":3,"file":"index326.js","sources":["../src/components/atoms/rating/lib-rating.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibRating } from './lib-rating.component';\n\n/* ══════════════════════════════════════════════════════════\n   SVGs Phosphor-style — regular (outline) y fill\n   ══════════════════════════════════════════════════════════ */\n\nconst ICONS: Record<string, { regular: TemplateResult; fill: TemplateResult }> = {\n  star: {\n    regular: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M239.2,97.4A16.4,16.4,0,0,0,224.6,86l-59.4-4.1-22-55.5A16.4,16.4,0,0,0,128,16h0a16.4,16.4,0,0,0-15.2,10.4L90.8,82,31.4,86A16.5,16.5,0,0,0,16.8,97.4,16.8,16.8,0,0,0,22,115.5l45.4,38.4L52.5,212a16.4,16.4,0,0,0,6.4,17.3,16.7,16.7,0,0,0,18.2.5L128,198.8l51,31.1a16.1,16.1,0,0,0,8.5,2.4,16.5,16.5,0,0,0,9.7-3.1A16.4,16.4,0,0,0,203.5,212l-14.9-58.1L234,115.5A16.8,16.8,0,0,0,239.2,97.4Zm-15.4,5.9-45.4,38.4a8,8,0,0,0-2.6,8.2l14.9,58.1a.6.6,0,0,1-.3.7c-.1.1-.3.2-.5.1l-51-31.2a8,8,0,0,0-8.4,0l-51,31.1-.4-.1a.6.6,0,0,1-.3-.7l14.9-58.1a8,8,0,0,0-2.6-8.2L31.2,103.3l-.1-.4c.1-.3.2-.5.5-.6l59.3-4.1a8,8,0,0,0,6.8-5.1L119.7,38a.8.8,0,0,1,.6-.5h.2a.8.8,0,0,1,.6.5l21.9,55.2a8,8,0,0,0,6.8,5.1l59.3,4.1c.3.1.4.3.5.6A.7.7,0,0,1,223.8,103.3Z\"/>\n    </svg>`,\n    fill: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34l13.49-58.54L21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z\"/>\n    </svg>`,\n  },\n  heart: {\n    regular: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M178,32c-20.65,0-38.73,8.88-50,23.89C116.73,40.88,98.65,32,78,32A62.07,62.07,0,0,0,16,94c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,220.66,240,164,240,94A62.07,62.07,0,0,0,178,32ZM128,206.8C109.74,196.16,32,147.69,32,94A46.06,46.06,0,0,1,78,48c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,147.61,146.24,196.15,128,206.8Z\"/>\n    </svg>`,\n    fill: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M240,94c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,220.66,16,164,16,94A62.07,62.07,0,0,1,78,32c20.65,0,38.73,8.88,50,23.89C139.27,40.88,157.35,32,178,32A62.07,62.07,0,0,1,240,94Z\"/>\n    </svg>`,\n  },\n  diamond: {\n    regular: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M235.32,104,211.31,56a16,16,0,0,0-14.31-8.05H59A16,16,0,0,0,44.69,56L20.68,104a16,16,0,0,0,2.62,18.51l96,96a16,16,0,0,0,17.4,3.37,15.93,15.93,0,0,0,5.26-3.38l96-96A16,16,0,0,0,235.32,104ZM59,64H197l21.33,42.67L128,213.32,37.67,106.67Z\"/>\n    </svg>`,\n    fill: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M238,106.38,214,58.34A16.09,16.09,0,0,0,199.69,50H56.31A16.09,16.09,0,0,0,42,58.34L18,106.38a16,16,0,0,0,2.69,18.76l96,96a16,16,0,0,0,22.62,0l96-96A16,16,0,0,0,238,106.38Z\"/>\n    </svg>`,\n  },\n};\n\n/* ── Fallback al icono estrella si el icon prop no coincide ── */\nfunction getIcon(name: string): { regular: TemplateResult; fill: TemplateResult } | undefined {\n  return ICONS[name] ?? ICONS['star'];\n}\n\n/* ══════════════════════════════════════════════════════════\n   Template principal\n   ══════════════════════════════════════════════════════════ */\nexport function ratingTemplate(ctx: LibRating): TemplateResult {\n  const { value, max, icon, readonly, showCount, count } = ctx;\n  const icons = getIcon(icon);\n  const display = ctx._hoverValue || value;\n\n  /* Secuencia de items */\n  const items = Array.from({ length: max }, (_, i) => {\n    const pos = i + 1; // 1-indexed\n\n    /* Half-star: solo read-only, cuando value tiene .5 */\n    const isHalf = readonly && !Number.isInteger(value) && pos === Math.ceil(value);\n    const isFilled = pos <= Math.floor(display);\n    const isPreview = !readonly && pos > Math.floor(display) && pos <= ctx._hoverValue;\n\n    if (isHalf) {\n      return html`\n        <span\n          class=\"rt-item rt-item-half\"\n          part=\"item item-half\"\n          aria-hidden=\"true\"\n        >\n          ${icons?.regular}\n          <span class=\"rt-half-fill\">${icons?.fill}</span>\n        </span>\n      `;\n    }\n\n    return html`\n      <span\n        class=\"rt-item ${isFilled ? 'is-filled' : ''} ${isPreview ? 'is-preview' : ''}\"\n        part=\"item${isFilled ? ' item-filled' : ''}\"\n        role=\"${readonly ? nothing : 'button'}\"\n        aria-label=\"${readonly ? nothing : `Valorar ${pos} de ${max}`}\"\n        tabindex=\"${readonly ? nothing : '0'}\"\n        @mouseenter=\"${(): void => ctx._onEnter(pos)}\"\n        @click=\"${(): void => ctx._onClick(pos)}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._onKeyItem(e, pos)}\"\n      >\n        ${isFilled || isPreview ? icons?.fill : icons?.regular}\n      </span>\n    `;\n  });\n\n  /* Numeric display */\n  const numDisplay = showCount\n    ? html`\n        <span class=\"rt-num\" part=\"num\">\n          <strong>${value > 0 ? value.toFixed(1) : '—'}</strong>\n          ${count != null ? html`<span style=\"margin-left:2px;\">(${count})</span>` : nothing}\n        </span>`\n    : nothing;\n\n  return html`\n    <div\n      class=\"rt\"\n      part=\"root\"\n      role=\"${readonly ? 'img' : 'group'}\"\n      aria-label=\"${readonly\n        ? `Valoración: ${value} de ${max}`\n        : `Valorar de 1 a ${max}`}\"\n      @mouseleave=\"${(): void => ctx._onLeave()}\"\n    >\n      ${items}\n    </div>\n    ${numDisplay}\n  `;\n}"],"names":[],"mappings":";AAOA,MAAM,QAA2E;AAAA,EAC/E,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA;AAAA,IAGT,MAAM;AAAA;AAAA;AAAA,EAAA;AAAA,EAIR,OAAO;AAAA,IACL,SAAS;AAAA;AAAA;AAAA,IAGT,MAAM;AAAA;AAAA;AAAA,EAAA;AAAA,EAIR,SAAS;AAAA,IACP,SAAS;AAAA;AAAA;AAAA,IAGT,MAAM;AAAA;AAAA;AAAA,EAAA;AAIV;AAGA,SAAS,QAAQ,MAA6E;AAC5F,SAAO,MAAM,IAAI,KAAK,MAAM,MAAM;AACpC;AAKO,SAAS,eAAe,KAAgC;AAC7D,QAAM,EAAE,OAAO,KAAK,MAAM,UAAU,WAAW,UAAU;AACzD,QAAM,QAAQ,QAAQ,IAAI;AAC1B,QAAM,UAAU,IAAI,eAAe;AAGnC,QAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,IAAA,GAAO,CAAC,GAAG,MAAM;AAClD,UAAM,MAAM,IAAI;AAGhB,UAAM,SAAS,YAAY,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK;AAC9E,UAAM,WAAW,OAAO,KAAK,MAAM,OAAO;AAC1C,UAAM,YAAY,CAAC,YAAY,MAAM,KAAK,MAAM,OAAO,KAAK,OAAO,IAAI;AAEvE,QAAI,QAAQ;AACV,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMD,+BAAO,OAAO;AAAA,uCACa,+BAAO,IAAI;AAAA;AAAA;AAAA,IAG9C;AAEA,WAAO;AAAA;AAAA,yBAEc,WAAW,cAAc,EAAE,IAAI,YAAY,eAAe,EAAE;AAAA,oBACjE,WAAW,iBAAiB,EAAE;AAAA,gBAClC,WAAW,UAAU,QAAQ;AAAA,sBACvB,WAAW,UAAU,WAAW,GAAG,OAAO,GAAG,EAAE;AAAA,oBACjD,WAAW,UAAU,GAAG;AAAA,uBACrB,MAAY,IAAI,SAAS,GAAG,CAAC;AAAA,kBAClC,MAAY,IAAI,SAAS,GAAG,CAAC;AAAA,oBAC3B,CAAC,MAA2B,IAAI,WAAW,GAAG,GAAG,CAAC;AAAA;AAAA,UAE5D,YAAY,YAAY,+BAAO,OAAO,+BAAO,OAAO;AAAA;AAAA;AAAA,EAG5D,CAAC;AAGD,QAAM,aAAa,YACf;AAAA;AAAA,oBAEc,QAAQ,IAAI,MAAM,QAAQ,CAAC,IAAI,GAAG;AAAA,YAC1C,SAAS,OAAO,uCAAuC,KAAK,aAAa,OAAO;AAAA,mBAEtF;AAEJ,SAAO;AAAA;AAAA;AAAA;AAAA,cAIK,WAAW,QAAQ,OAAO;AAAA,oBACpB,WACV,eAAe,KAAK,OAAO,GAAG,KAC9B,kBAAkB,GAAG,EAAE;AAAA,qBACZ,MAAY,IAAI,UAAU;AAAA;AAAA,QAEvC,KAAK;AAAA;AAAA,MAEP,UAAU;AAAA;AAEhB;"}

package/dist/index327.js

@@ -1,5 +1,5 @@
-const drawerCss = '@layer tokens,reset,components;@layer reset{:host{display:contents}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@layer components{.dr-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;background:#1a140e00;pointer-events:none;transition:background var(--duration-slow) var(--ease-out)}:host([open]) .dr-backdrop{background:#1a140e73;pointer-events:auto}.dr{position:fixed;z-index:401;background:var(--bg-elevated);display:flex;flex-direction:column;will-change:transform;visibility:hidden;transition:transform var(--duration-slow) var(--ease-out),visibility 0ms var(--duration-slow)}:host([open]) .dr{visibility:visible;transform:translate(0);transition:transform var(--duration-slow) var(--ease-out),visibility 0ms 0ms}.dr-right{top:0;right:0;bottom:0;width:420px;transform:translate(100%);border-left:1px solid var(--border-subtle);box-shadow:-8px 0 48px #1a140e29}.dr-left{top:0;left:0;bottom:0;width:420px;transform:translate(-100%);border-right:1px solid var(--border-subtle);box-shadow:8px 0 48px #1a140e29}.dr-top{top:0;left:0;right:0;height:360px;transform:translateY(-100%);border-bottom:1px solid var(--border-subtle);box-shadow:0 8px 48px #1a140e29}.dr-bottom{bottom:0;left:0;right:0;height:360px;transform:translateY(100%);border-top:1px solid var(--border-subtle);box-shadow:0 -8px 48px #1a140e29}:host([placement="right"][size="sm"]) .dr,:host([placement="left"][size="sm"]) .dr{width:300px}:host([placement="right"][size="lg"]) .dr,:host([placement="left"][size="lg"]) .dr{width:560px}:host([placement="right"][size="xl"]) .dr,:host([placement="left"][size="xl"]) .dr{width:720px}:host([placement="right"][size="full"]) .dr,:host([placement="left"][size="full"]) .dr{width:100%}:host([placement="top"][size="sm"]) .dr,:host([placement="bottom"][size="sm"]) .dr{height:240px}:host([placement="top"][size="lg"]) .dr,:host([placement="bottom"][size="lg"]) .dr{height:480px}:host([placement="top"][size="full"]) .dr,:host([placement="bottom"][size="full"]) .dr{height:100%}.dr-right:before,.dr-left:before{content:"";position:absolute;top:50%;width:3px;height:32px;border-radius:999px;background:var(--color-washi-200);transform:translateY(-50%);pointer-events:none}.dr-right:before{left:var(--lib-space-sm)}.dr-left:before{right:var(--lib-space-sm)}.dr-handle{display:flex;justify-content:center;padding:var(--lib-space-sm) 0 var(--lib-space-xs);flex-shrink:0}.dr-handle-bar{width:36px;height:3px;background:var(--color-washi-300);border-radius:999px}.dr-header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;gap:var(--lib-space-md)}.dr-eyebrow{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-xs)}.dr-title{font-family:var(--lib-font-display);font-size:1.8rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1.1;color:var(--text-primary)}.dr-subtitle{font-family:var(--lib-font-body);font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);margin-top:var(--lib-space-sm);line-height:1.6}.dr-close{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border-subtle);cursor:pointer;color:var(--text-muted);margin-top:var(--lib-space-xs);transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base)}.dr-close:hover{border-color:var(--border-default);background:var(--bg-surface);color:var(--text-primary)}.dr-close:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dr-close svg{width:12px;height:12px;stroke-width:1.6;stroke:currentcolor;fill:none;stroke-linecap:round}.dr-body{flex:1;overflow:hidden auto;padding:var(--lib-space-lg)}.dr-body::-webkit-scrollbar{width:4px}.dr-body::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}.dr-body::-webkit-scrollbar-thumb:hover{background:var(--color-washi-500)}.dr-body::-webkit-scrollbar-track{background:transparent}:host([open]) .dr-body ::slotted(*:nth-child(1)){animation:dr-body-in var(--duration-slow) var(--ease-out) .12s both}:host([open]) .dr-body ::slotted(*:nth-child(2)){animation:dr-body-in var(--duration-slow) var(--ease-out) .16s both}:host([open]) .dr-body ::slotted(*:nth-child(3)){animation:dr-body-in var(--duration-slow) var(--ease-out) .2s both}:host([open]) .dr-body ::slotted(*:nth-child(4)){animation:dr-body-in var(--duration-slow) var(--ease-out) .24s both}:host([open]) .dr-body ::slotted(*:nth-child(n+5)){animation:dr-body-in var(--duration-slow) var(--ease-out) .28s both}@keyframes dr-body-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.dr-footer{border-top:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-lg);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);flex-shrink:0;background:var(--bg-base)}.dr-footer:not(:has(slot[name=footer] *)){display:none}:host([variant="dark"]) .dr{background:var(--color-washi-950);border-color:#ffffff12!important}:host([variant="dark"]) .dr-header{border-bottom-color:#ffffff12}:host([variant="dark"]) .dr-eyebrow{color:#faf7f438}:host([variant="dark"]) .dr-title{color:#faf7f4bf}:host([variant="dark"]) .dr-subtitle{color:#faf7f447}:host([variant="dark"]) .dr-close{border-color:#ffffff1a;color:#faf7f44d}:host([variant="dark"]) .dr-close:hover{border-color:#fff3;background:#ffffff0d;color:#faf7f4b3}:host([variant="dark"]) .dr-right:before,:host([variant="dark"]) .dr-left:before{background:#ffffff14}:host([variant="dark"]) .dr-footer{border-top-color:#ffffff12;background:#ffffff05}:host([variant="dark"]) .dr-handle-bar{background:#ffffff1f}:host([variant="dark"]) .dr-body::-webkit-scrollbar-thumb{background:#faf7f426}:host([variant="dark"]) .dr-body::-webkit-scrollbar-thumb:hover{background:#faf7f44d}:host([variant="kintsugi"]) .dr{border-color:#b85a1e4d!important}:host([variant="kintsugi"]) .dr-header{border-bottom-color:#b85a1e26}:host([variant="kintsugi"]) .dr-eyebrow{color:var(--color-kaki-400)}:host([variant="kintsugi"]) .dr-title{color:var(--color-kaki-600)}:host([variant="kintsugi"]) .dr-close{border-color:#b85a1e40;color:var(--color-kaki-500)}:host([variant="kintsugi"]) .dr-close:hover{background:var(--color-kaki-50);border-color:var(--color-kaki-400)}:host([variant="kintsugi"]) .dr-footer{background:var(--color-kaki-50);border-top-color:#b85a1e1f}:host([variant="kintsugi"]) .dr-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));background-size:100% 200%;animation:kintsugi-seam 3s ease-in-out infinite alternate}:host([variant="kintsugi"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="top"]) .dr:after,:host([variant="kintsugi"][placement="bottom"]) .dr:after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:200% 100%;animation:kintsugi-sweep 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="top"]) .dr:after{bottom:0}:host([variant="kintsugi"][placement="bottom"]) .dr:after{top:0}@keyframes kintsugi-seam{0%{background-position:0 -20%;opacity:.7}50%{background-position:0 50%;opacity:1}to{background-position:0 120%;opacity:.7}}@keyframes kintsugi-sweep{0%{background-position:-200% 0}to{background-position:200% 0}}:host([variant="kintsugi-dark"]) .dr{background:var(--color-washi-950);border-color:#b85a1e33!important}:host([variant="kintsugi-dark"]) .dr-header{border-bottom-color:#b85a1e26}:host([variant="kintsugi-dark"]) .dr-eyebrow{color:#d9723480}:host([variant="kintsugi-dark"]) .dr-title{color:var(--color-kaki-400)}:host([variant="kintsugi-dark"]) .dr-subtitle{color:#faf7f440}:host([variant="kintsugi-dark"]) .dr-close{border-color:#b85a1e33;color:#d9723480}:host([variant="kintsugi-dark"]) .dr-close:hover{background:#b85a1e14;border-color:var(--color-kaki-500);color:var(--color-kaki-400)}:host([variant="kintsugi-dark"]) .dr-footer{background:#b85a1e0a;border-top-color:#b85a1e1f}:host([variant="kintsugi-dark"]) .dr-right:before,:host([variant="kintsugi-dark"]) .dr-left:before{background:#b85a1e26}:host([variant="kintsugi-dark"]) .dr-body::-webkit-scrollbar-thumb{background:#b85a1e66}:host([variant="kintsugi-dark"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.5) 20%,rgb(245,208,138,.7) 50%,rgb(184,90,30,.5) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi-dark"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.5) 20%,rgb(245,208,138,.7) 50%,rgb(184,90,30,.5) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="glitch"]) .dr{animation:dr-glitch-slide 7s steps(1) infinite}:host([variant="glitch"][open]) .dr{animation:dr-flicker 7s steps(1) infinite}:host([variant="glitch"][open][placement="right"]) .dr{animation:dr-glitch-open-r var(--duration-slow) var(--ease-out) forwards,dr-glitch-slide 7s steps(1) infinite .6s}:host([variant="glitch"]) .dr-title{font-family:var(--lib-font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}:host([variant="glitch"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--color-washi-900);animation:dr-seam-glitch 7s steps(1) infinite;pointer-events:none}:host([variant="glitch"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--color-washi-900);animation:dr-seam-glitch 7s steps(1) infinite;pointer-events:none}:host([variant="glitch"]) .dr:before{content:""!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(0,0,0,.03) 3px,rgb(0,0,0,.03) 4px)!important;animation:dr-scanline 7s steps(1) infinite!important;pointer-events:none!important;z-index:10!important;width:auto!important;height:auto!important;border-radius:0!important}.dr-rgb-r,.dr-rgb-b{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9}:host([variant="glitch"]) .dr-rgb-r{background:#d9723414;animation:dr-rgb-r 7s steps(1) infinite;mix-blend-mode:screen}:host([variant="glitch"]) .dr-rgb-b{background:#4e94820f;animation:dr-rgb-b 7s steps(1) infinite 60ms;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr{background:var(--color-washi-950);border-color:#ffffff0f!important;animation:dr-glitch-slide 6s steps(1) infinite,dr-flicker 6s steps(1) infinite}:host([variant="glitch-dark"][open]) .dr{animation:dr-flicker 6s steps(1) infinite}:host([variant="glitch-dark"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:#faf7f44d;animation:dr-seam-glitch 6s steps(1) infinite;pointer-events:none}:host([variant="glitch-dark"]) .dr:before{content:""!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.02) 3px,rgb(255,255,255,.02) 4px)!important;animation:dr-scanline 6s steps(1) infinite!important;pointer-events:none!important;z-index:10!important;width:auto!important;height:auto!important}:host([variant="glitch-dark"]) .dr-rgb-r{background:#d972341f;animation:dr-rgb-r 6s steps(1) infinite;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr-rgb-b{background:#4e94821a;animation:dr-rgb-b 6s steps(1) infinite 80ms;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr-header{border-bottom-color:#ffffff12}:host([variant="glitch-dark"]) .dr-eyebrow{color:#faf7f433}:host([variant="glitch-dark"]) .dr-title{color:#faf7f4bf;font-family:var(--lib-font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}:host([variant="glitch-dark"]) .dr-subtitle{color:#faf7f440}:host([variant="glitch-dark"]) .dr-close{border-color:#ffffff1a;color:#faf7f44d}:host([variant="glitch-dark"]) .dr-close:hover{background:#ffffff0d;border-color:#fff3;color:#faf7f4b3}:host([variant="glitch-dark"]) .dr-footer{background:#ffffff05;border-top-color:#ffffff0f}:host([variant="glitch-dark"]) .dr-body::-webkit-scrollbar-thumb{background:#faf7f426}@keyframes dr-glitch-slide{0%,88%,to{transform:translate(0)}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:translate(-1px)}92%{transform:translate(0)}}@keyframes dr-glitch-open-r{0%{transform:translate(100%)}60%{transform:translate(-3px)}65%{transform:translate(2px)}70%{transform:translate(-1px)}to{transform:translate(0)}}@keyframes dr-seam-glitch{0%,85%,to{opacity:.3;height:100%;top:0}86%{opacity:1;height:60%;top:20%}87%{opacity:.6;height:80%;top:5%}88%{opacity:0}89%{opacity:1;height:40%;top:50%}90%{opacity:.3;height:100%;top:0}}@keyframes dr-scanline{0%{background-position:0 0;opacity:.04}89%{background-position:0 0;opacity:.04}90%{background-position:0 -4px;opacity:.12}91%{background-position:0 3px;opacity:.08}92%{background-position:0 0;opacity:.04}}@keyframes dr-rgb-r{0%,88%,to{opacity:0}89%{opacity:.15;transform:translate(-3px);clip-path:inset(20% 0 40% 0)}90%{opacity:.1;transform:translate(2px);clip-path:inset(60% 0 10% 0)}91%{opacity:0}}@keyframes dr-rgb-b{0%,88%,to{opacity:0}89%{opacity:.12;transform:translate(3px);clip-path:inset(50% 0 20% 0)}90%{opacity:.08;transform:translate(-2px);clip-path:inset(10% 0 60% 0)}91%{opacity:0}}@keyframes dr-flicker{0%,85%,to{opacity:1}89%{opacity:.8}89.5%{opacity:1}90%{opacity:.6}90.5%{opacity:1}}@media(prefers-reduced-motion:reduce){.dr{transition:visibility 0ms}:host([open]) .dr{transition:none}:host([variant="glitch"]) .dr,:host([variant="glitch-dark"]) .dr{animation:none}:host([variant="kintsugi"]) .dr:after,:host([variant="kintsugi-dark"]) .dr:after{animation:none}:host([open]) .dr-body ::slotted(*){animation:none}}}';
+const ratingCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;gap:var(--lib-space-sm);-webkit-user-select:none;user-select:none;--_gold: #C4922A;--_gold-light: #F0D080;--_gold-pale: #FAF0D0}*,*:before,*:after{box-sizing:border-box}}@layer components{@keyframes rt-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.rt{display:inline-flex;align-items:center;gap:3px;position:relative}.rt-item{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--color-washi-300);transition:color var(--duration-fast) var(--ease-default),transform var(--duration-base) var(--ease-bounce);line-height:1;flex-shrink:0}.rt-item svg{display:block;width:1em;height:1em}.rt-item:hover{transform:scale(1.15)}.rt-item.is-filled{color:var(--_gold)}.rt-item.is-preview{color:var(--_gold-light)}.rt-item.is-pop{animation:rt-pop .3s var(--ease-bounce) forwards}:host([readonly]) .rt-item,:host([readonly]) .rt-item:hover{cursor:default;pointer-events:none;transform:none}:host([disabled]) .rt{opacity:.4;pointer-events:none}:host([size="xs"]) .rt{gap:1px;font-size:12px}:host([size="sm"]) .rt{gap:2px;font-size:16px}:host([size="md"]) .rt,:host(:not([size])) .rt{gap:3px;font-size:22px}:host([size="lg"]) .rt{gap:4px;font-size:30px}:host([size="xl"]) .rt{gap:5px;font-size:40px}:host([color="kaki"]) .rt-item.is-filled{color:var(--color-kaki-500)}:host([color="kaki"]) .rt-item.is-preview{color:var(--color-kaki-400);opacity:.6}:host([color="washi"]) .rt-item.is-filled{color:var(--color-washi-900)}:host([color="washi"]) .rt-item.is-preview{color:var(--color-washi-600);opacity:.5}:host([color="celadon"]) .rt-item.is-filled{color:var(--color-celadon-500)}:host([color="celadon"]) .rt-item.is-preview{color:var(--color-celadon-400);opacity:.45}.rt-item-half{position:relative}.rt-half-fill{position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--_gold);display:flex;align-items:center;pointer-events:none}.rt-half-fill svg{width:1em;height:1em;flex-shrink:0}:host([color="kaki"]) .rt-half-fill{color:var(--color-kaki-500)}:host([color="washi"]) .rt-half-fill{color:var(--color-washi-900)}:host([color="celadon"]) .rt-half-fill{color:var(--color-celadon-500)}.rt-num{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap;line-height:1}.rt-num strong{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-primary)}@media(prefers-reduced-motion:reduce){.rt-item{transition:none}.rt-item.is-pop{animation:none}}}';
 export {
-  drawerCss as default
+  ratingCss as default
 };
 //# sourceMappingURL=index327.js.map