@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index332.js

@@ -1,62 +1,21 @@
-import { noChange as E } from "./index358.js";
-import { directive as e, Directive as i, PartType as t } from "./index359.js";
-import { getCommittedValue as M, setChildPartValue as u$1, insertPart as v, removePart as h, setCommittedValue as p } from "./index360.js";
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const u = (e2, s, t2) => {
-  const r = /* @__PURE__ */ new Map();
-  for (let l = s; l <= t2; l++) r.set(e2[l], l);
-  return r;
-}, c = e(class extends i {
-  constructor(e2) {
-    if (super(e2), e2.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
-  }
-  dt(e2, s, t2) {
-    let r;
-    void 0 === t2 ? t2 = s : void 0 !== s && (r = s);
-    const l = [], o = [];
-    let i2 = 0;
-    for (const s2 of e2) l[i2] = r ? r(s2, i2) : i2, o[i2] = t2(s2, i2), i2++;
-    return { values: o, keys: l };
-  }
-  render(e2, s, t2) {
-    return this.dt(e2, s, t2).values;
-  }
-  update(s, [t2, r, c2]) {
-    const d = M(s), { values: p$1, keys: a } = this.dt(t2, r, c2);
-    if (!Array.isArray(d)) return this.ut = a, p$1;
-    const h$1 = this.ut ?? (this.ut = []), v$1 = [];
-    let m, y, x = 0, j = d.length - 1, k = 0, w = p$1.length - 1;
-    for (; x <= j && k <= w; ) if (null === d[x]) x++;
-    else if (null === d[j]) j--;
-    else if (h$1[x] === a[k]) v$1[k] = u$1(d[x], p$1[k]), x++, k++;
-    else if (h$1[j] === a[w]) v$1[w] = u$1(d[j], p$1[w]), j--, w--;
-    else if (h$1[x] === a[w]) v$1[w] = u$1(d[x], p$1[w]), v(s, v$1[w + 1], d[x]), x++, w--;
-    else if (h$1[j] === a[k]) v$1[k] = u$1(d[j], p$1[k]), v(s, d[x], d[j]), j--, k++;
-    else if (void 0 === m && (m = u(a, k, w), y = u(h$1, x, j)), m.has(h$1[x])) if (m.has(h$1[j])) {
-      const e2 = y.get(a[k]), t3 = void 0 !== e2 ? d[e2] : null;
-      if (null === t3) {
-        const e3 = v(s, d[x]);
-        u$1(e3, p$1[k]), v$1[k] = e3;
-      } else v$1[k] = u$1(t3, p$1[k]), v(s, d[x], t3), d[e2] = null;
-      k++;
-    } else h(d[j]), j--;
-    else h(d[x]), x++;
-    for (; k <= w; ) {
-      const e2 = v(s, v$1[w + 1]);
-      u$1(e2, p$1[k]), v$1[k++] = e2;
-    }
-    for (; x <= j; ) {
-      const e2 = d[x++];
-      null !== e2 && h(e2);
-    }
-    return this.ut = a, p(s, v$1), E;
-  }
-});
+import { html } from "lit";
+function selectOptionTemplate(props) {
+  return html`
+    <div
+      class="option"
+      role="option"
+      aria-selected="${props.selected}"
+      aria-disabled="${props.disabled}"
+      @click="${props.handleClick}"
+    >
+      <span class="option-label">
+        <slot></slot>
+      </span>
+      <span class="option-check" aria-hidden="true"></span>
+    </div>
+  `;
+}
 export {
-  c as repeat
+  selectOptionTemplate
 };
 //# sourceMappingURL=index332.js.map

package/dist/index332.js.map

@@ -1 +1 @@
-{"version":3,"file":"index332.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js"],"sourcesContent":["import{noChange as e}from\"../lit-html.js\";import{directive as s,Directive as t,PartType as r}from\"../directive.js\";import{getCommittedValue as l,setChildPartValue as o,insertPart as i,removePart as n,setCommittedValue as f}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=s(class extends t{constructor(e){if(super(e),e.type!==r.CHILD)throw Error(\"repeat() can only be used in text expressions\")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return{values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=l(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v=[];let m,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v[k]=o(d[x],p[k]),x++,k++;else if(h[j]===a[w])v[w]=o(d[j],p[w]),j--,w--;else if(h[x]===a[w])v[w]=o(d[x],p[w]),i(s,v[w+1],d[x]),x++,w--;else if(h[j]===a[k])v[k]=o(d[j],p[k]),i(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=i(s,d[x]);o(e,p[k]),v[k]=e}else v[k]=o(t,p[k]),i(s,d[x],t),d[e]=null;k++}else n(d[j]),j--;else n(d[x]),x++;for(;k<=w;){const e=i(s,v[w+1]);o(e,p[k]),v[k++]=e}for(;x<=j;){const e=d[x++];null!==e&&n(e)}return this.ut=a,f(s,v),e}});export{c as repeat};\n//# sourceMappingURL=repeat.js.map\n"],"names":["e","t","s","r","i","c","l","p","h","v","o","n","f"],"mappings":";;;AACA;AAAA;AAAA;AAAA;AAAA;AAKK,MAAC,IAAE,CAACA,IAAE,GAAEC,OAAI;AAAC,QAAM,IAAE,oBAAI;AAAI,WAAQ,IAAE,GAAE,KAAGA,IAAE,IAAI,GAAE,IAAID,GAAE,CAAC,GAAE,CAAC;AAAE,SAAO;AAAC,GAAE,IAAEE,EAAE,cAAcD,EAAC;AAAA,EAAC,YAAYD,IAAE;AAAC,QAAG,MAAMA,EAAC,GAAEA,GAAE,SAAOG,EAAE,MAAM,OAAM,MAAM,+CAA+C;AAAA,EAAC;AAAA,EAAC,GAAGH,IAAE,GAAEC,IAAE;AAAC,QAAI;AAAE,eAASA,KAAEA,KAAE,IAAE,WAAS,MAAI,IAAE;AAAG,UAAM,IAAE,IAAG,IAAE,CAAA;AAAG,QAAIG,KAAE;AAAE,eAAUF,MAAKF,GAAE,GAAEI,EAAC,IAAE,IAAE,EAAEF,IAAEE,EAAC,IAAEA,IAAE,EAAEA,EAAC,IAAEH,GAAEC,IAAEE,EAAC,GAAEA;AAAI,WAAM,EAAC,QAAO,GAAE,MAAK,EAAC;AAAA,EAAC;AAAA,EAAC,OAAOJ,IAAE,GAAEC,IAAE;AAAC,WAAO,KAAK,GAAGD,IAAE,GAAEC,EAAC,EAAE;AAAA,EAAM;AAAA,EAAC,OAAO,GAAE,CAACA,IAAE,GAAEI,EAAC,GAAE;AAAC,UAAM,IAAEC,EAAE,CAAC,GAAE,EAAC,QAAOC,KAAE,MAAK,EAAC,IAAE,KAAK,GAAGN,IAAE,GAAEI,EAAC;AAAE,QAAG,CAAC,MAAM,QAAQ,CAAC,EAAE,QAAO,KAAK,KAAG,GAAEE;AAAE,UAAMC,MAAE,KAAK,OAAL,KAAK,KAAK,KAAGC,MAAE,CAAA;AAAG,QAAI,GAAE,GAAE,IAAE,GAAE,IAAE,EAAE,SAAO,GAAE,IAAE,GAAE,IAAEF,IAAE,SAAO;AAAE,WAAK,KAAG,KAAG,KAAG,IAAG,KAAG,SAAO,EAAE,CAAC,EAAE;AAAA,aAAY,SAAO,EAAE,CAAC,EAAE;AAAA,aAAYC,IAAE,CAAC,MAAI,EAAE,CAAC,EAAEC,KAAE,CAAC,IAAEC,IAAE,EAAE,CAAC,GAAEH,IAAE,CAAC,CAAC,GAAE,KAAI;AAAA,aAAYC,IAAE,CAAC,MAAI,EAAE,CAAC,EAAEC,KAAE,CAAC,IAAEC,IAAE,EAAE,CAAC,GAAEH,IAAE,CAAC,CAAC,GAAE,KAAI;AAAA,aAAYC,IAAE,CAAC,MAAI,EAAE,CAAC,EAAEC,KAAE,CAAC,IAAEC,IAAE,EAAE,CAAC,GAAEH,IAAE,CAAC,CAAC,GAAEH,EAAE,GAAEK,IAAE,IAAE,CAAC,GAAE,EAAE,CAAC,CAAC,GAAE,KAAI;AAAA,aAAYD,IAAE,CAAC,MAAI,EAAE,CAAC,EAAEC,KAAE,CAAC,IAAEC,IAAE,EAAE,CAAC,GAAEH,IAAE,CAAC,CAAC,GAAEH,EAAE,GAAE,EAAE,CAAC,GAAE,EAAE,CAAC,CAAC,GAAE,KAAI;AAAA,aAAY,WAAS,MAAI,IAAE,EAAE,GAAE,GAAE,CAAC,GAAE,IAAE,EAAEI,KAAE,GAAE,CAAC,IAAG,EAAE,IAAIA,IAAE,CAAC,CAAC,EAAE,KAAG,EAAE,IAAIA,IAAE,CAAC,CAAC,GAAE;AAAC,YAAMR,KAAE,EAAE,IAAI,EAAE,CAAC,CAAC,GAAEC,KAAE,WAASD,KAAE,EAAEA,EAAC,IAAE;AAAK,UAAG,SAAOC,IAAE;AAAC,cAAMD,KAAEI,EAAE,GAAE,EAAE,CAAC,CAAC;AAAEM,YAAEV,IAAEO,IAAE,CAAC,CAAC,GAAEE,IAAE,CAAC,IAAET;AAAA,MAAC,MAAMS,KAAE,CAAC,IAAEC,IAAET,IAAEM,IAAE,CAAC,CAAC,GAAEH,EAAE,GAAE,EAAE,CAAC,GAAEH,EAAC,GAAE,EAAED,EAAC,IAAE;AAAK;AAAA,IAAG,MAAMW,GAAE,EAAE,CAAC,CAAC,GAAE;AAAA,QAASA,GAAE,EAAE,CAAC,CAAC,GAAE;AAAI,WAAK,KAAG,KAAG;AAAC,YAAMX,KAAEI,EAAE,GAAEK,IAAE,IAAE,CAAC,CAAC;AAAEC,UAAEV,IAAEO,IAAE,CAAC,CAAC,GAAEE,IAAE,GAAG,IAAET;AAAA,IAAC;AAAC,WAAK,KAAG,KAAG;AAAC,YAAMA,KAAE,EAAE,GAAG;AAAE,eAAOA,MAAGW,EAAEX,EAAC;AAAA,IAAC;AAAC,WAAO,KAAK,KAAG,GAAEY,EAAE,GAAEH,GAAC,GAAET;AAAAA,EAAC;AAAC,CAAC;","x_google_ignoreList":[0]}
+{"version":3,"file":"index332.js","sources":["../src/components/atoms/select-option/lib-select-option.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { SelectOptionTemplateProps } from './lib-select-option.types';\n\nexport function selectOptionTemplate(props: SelectOptionTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"option\"\n      role=\"option\"\n      aria-selected=\"${props.selected}\"\n      aria-disabled=\"${props.disabled}\"\n      @click=\"${props.handleClick}\"\n    >\n      <span class=\"option-label\">\n        <slot></slot>\n      </span>\n      <span class=\"option-check\" aria-hidden=\"true\"></span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,qBAAqB,OAAkD;AACrF,SAAO;AAAA;AAAA;AAAA;AAAA,uBAIc,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,gBACrB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC;"}

package/dist/index333.js

@@ -1,5 +1,5 @@
-const toastManagerCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{position:fixed;top:var(--lib-space-lg);right:var(--lib-space-lg);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--lib-space-sm);width:340px;pointer-events:none}::slotted(lib-alert),lib-alert{pointer-events:auto;animation:tm-in var(--duration-slow) var(--ease-out) forwards}@keyframes tm-in{0%{transform:translate(calc(100% + var(--lib-space-lg)));opacity:0}to{transform:translate(0);opacity:1}}lib-alert.is-leaving{animation:tm-out var(--duration-base) var(--ease-default) forwards;pointer-events:none}@keyframes tm-out{0%{transform:translate(0);opacity:1;max-height:200px;margin-bottom:0}to{transform:translate(calc(100% + var(--lib-space-lg)));opacity:0;max-height:0;margin-bottom:calc(-1 * var(--lib-space-sm))}}}";
+const optionCss = `@layer tokens,reset,components;@layer reset{:host{display:block}:host:is([search-hidden]){display:none}*,*:before,*:after{box-sizing:border-box}}@layer components{.option{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}:host(:not([disabled],[selected]):hover) .option{background:var(--bg-surface)}:host([selected]) .option{background:var(--color-washi-100)}:host([disabled]) .option{opacity:.38;cursor:not-allowed;pointer-events:none}.option-label{flex:1;min-width:0;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}:host(:hover) .option-label{color:var(--text-primary)}:host([selected]) .option-label{color:var(--text-primary)}:host([disabled]) .option-label{color:var(--text-muted)}.option-check{flex-shrink:0;width:14px;height:14px;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23221C16' d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;transition:opacity var(--duration-fast) var(--ease-default)}:host([selected]) .option-check{opacity:1}}`;
 export {
-  toastManagerCss as default
+  optionCss as default
 };
 //# sourceMappingURL=index333.js.map

package/dist/index334.js

@@ -1,12 +1,19 @@
 import { html } from "lit";
-function parallaxTemplate(_ctx) {
+import { styleMap as o } from "./index267.js";
+function skeletonTemplate(props) {
+  const inlineStyles = {};
+  if (props.width) inlineStyles["width"] = props.width;
+  if (props.height) inlineStyles["height"] = props.height;
   return html`
-    <div class="parallax-wrapper" part="wrapper">
-      <slot></slot>
-    </div>
+    <div
+      class="sk"
+      style=${o(inlineStyles)}
+      aria-hidden="true"
+      role="presentation"
+    ></div>
   `;
 }
 export {
-  parallaxTemplate
+  skeletonTemplate
 };
 //# sourceMappingURL=index334.js.map

package/dist/index334.js.map

@@ -1 +1 @@
-{"version":3,"file":"index334.js","sources":["../src/components/organisms/parallax-container/lib-parallax.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxContainer } from './lib-parallax.component';\n\n// _ctx disponible para futuras extensiones del template (slot named, etc.)\nexport function parallaxTemplate(_ctx: LibParallaxContainer): TemplateResult {\n  return html`\n    <div class=\"parallax-wrapper\" part=\"wrapper\">\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIO,SAAS,iBAAiB,MAA4C;AAC3E,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;"}
+{"version":3,"file":"index334.js","sources":["../src/components/atoms/skeleton/lib-skeleton.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nexport type LibSkeletonShape = \n  | 'line'    // 13px — texto corrido\n  | 'title'   // 22px — encabezado secundario\n  | 'h1'      // 36px — encabezado principal\n  | 'avatar'  // border-radius full — imagen circular\n  | 'icon'    // border-radius sm — icono cuadrado\n  | 'btn'     // 36px — botón / input\n  | 'badge'   // 20px, radius sm — etiqueta\n  | 'pill'    // 22px, radius full — chip\n  | 'img'     // 160px — imagen rectangular\n  | 'rect';   // sin altura propia — bloque libre\n\nexport type LibSkeletonAnimation = 'shimmer' | 'wave' | 'pulse';\nexport type LibSkeletonSurface   = 'light' | 'dark' | 'kaki';\n\nexport interface SkeletonTemplateProps {\n  shape:     LibSkeletonShape;\n  animation: LibSkeletonAnimation;\n  surface:   LibSkeletonSurface;\n  width:     string;\n  height:    string;\n}\n\n/**\n * Renderiza un único bloque skeleton.\n * La forma, animación y superficie se controlan vía clases CSS\n * que mapean a :host([shape]) / :host([animation]) / :host([surface]).\n * Width y height opcionales se aplican como inline style.\n */\nexport function skeletonTemplate(props: SkeletonTemplateProps): TemplateResult {\n  const inlineStyles: Record<string, string> = {};\n  if (props.width)  inlineStyles['width']  = props.width;\n  if (props.height) inlineStyles['height'] = props.height;\n\n  return html`\n    <div\n      class=\"sk\"\n      style=${styleMap(inlineStyles)}\n      aria-hidden=\"true\"\n      role=\"presentation\"\n    ></div>\n  `;\n}"],"names":["styleMap"],"mappings":";;AAgCO,SAAS,iBAAiB,OAA8C;AAC7E,QAAM,eAAuC,CAAA;AAC7C,MAAI,MAAM,MAAQ,cAAa,OAAO,IAAK,MAAM;AACjD,MAAI,MAAM,OAAQ,cAAa,QAAQ,IAAI,MAAM;AAEjD,SAAO;AAAA;AAAA;AAAA,cAGKA,EAAS,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAKpC;"}

package/dist/index335.js

@@ -1,5 +1,5 @@
-const parallaxCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;overflow:hidden;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.parallax-wrapper{position:relative;width:100%;height:100%}:host([visible]) ::slotted(*){will-change:transform}@media(prefers-reduced-motion:reduce){::slotted(*){will-change:auto!important;transform:none!important}}}";
+const skeletonCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.sk{display:block;width:100%;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--color-washi-200) 25%,var(--color-washi-100) 50%,var(--color-washi-200) 75%);background-size:300% 100%;animation:sk-shimmer 1.8s ease-in-out infinite}@keyframes sk-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes sk-pulse{0%,to{opacity:1}50%{opacity:.4}}:host([animation="wave"]) .sk{animation-duration:2.4s;animation-timing-function:cubic-bezier(.4,0,.6,1)}:host([animation="pulse"]) .sk{background:var(--color-washi-200);animation:sk-pulse 1.8s ease-in-out infinite}:host([surface="dark"]) .sk{background:linear-gradient(90deg,var(--color-washi-800) 25%,var(--color-washi-700) 50%,var(--color-washi-800) 75%);background-size:300% 100%;animation:sk-shimmer 1.8s ease-in-out infinite}:host([surface="dark"][animation="wave"]) .sk{animation-duration:2.4s;animation-timing-function:cubic-bezier(.4,0,.6,1)}:host([surface="dark"][animation="pulse"]) .sk{background:var(--color-washi-700);animation:sk-pulse 1.8s ease-in-out infinite}:host([surface="kaki"]) .sk{background:linear-gradient(90deg,var(--color-kaki-200) 25%,var(--color-kaki-100) 50%,var(--color-kaki-200) 75%);background-size:300% 100%;animation:sk-shimmer 1.8s ease-in-out infinite}:host([surface="kaki"][animation="wave"]) .sk{animation-duration:2.4s;animation-timing-function:cubic-bezier(.4,0,.6,1)}:host([surface="kaki"][animation="pulse"]) .sk{background:var(--color-kaki-200);animation:sk-pulse 1.8s ease-in-out infinite}:host([shape="line"]) .sk{height:13px}:host([shape="title"]) .sk{height:22px}:host([shape="h1"]) .sk{height:36px}:host([shape="avatar"]) .sk{border-radius:var(--radius-full)}:host([shape="icon"]) .sk{border-radius:var(--radius-sm)}:host([shape="btn"]) .sk{height:36px}:host([shape="badge"]) .sk{height:20px;border-radius:var(--radius-sm)}:host([shape="pill"]) .sk{height:22px;border-radius:var(--radius-full)}:host([shape="img"]) .sk{height:160px}:host([shape="rect"]) .sk{border-radius:var(--radius-sm)}@media(prefers-reduced-motion:reduce){.sk{animation:none;background:var(--color-washi-200);background-size:unset}:host([surface="dark"]) .sk{background:var(--color-washi-700)}:host([surface="kaki"]) .sk{background:var(--color-kaki-200)}}}';
 export {
-  parallaxCss as default
+  skeletonCss as default
 };
 //# sourceMappingURL=index335.js.map

package/dist/index336.js

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

package/dist/index336.js.map

@@ -1 +1 @@
-{"version":3,"file":"index336.js","sources":["../src/components/organisms/parallax-text/lib-parallax-text-stack.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxTextStack } from './lib-parallax-text-stack.component';\n\nexport function parallaxTextStackTemplate(ctx: LibParallaxTextStack): TemplateResult {\n  return html`\n    <div class=\"pts-container\" part=\"container\">\n      ${ctx.lines.map((line, i) => html`\n        <span\n          class=\"pts-layer ${i % 2 === 0 ? 'pts-layer--outline' : 'pts-layer--italic'}\"\n          part=\"layer layer-${i % 2 === 0 ? 'outline' : 'italic'}\"\n          aria-hidden=\"${i > 0}\"\n        >${line}</span>\n      `)}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,0BAA0B,KAA2C;AACnF,SAAO;AAAA;AAAA,QAED,IAAI,MAAM,IAAI,CAAC,MAAM,MAAM;AAAA;AAAA,6BAEN,IAAI,MAAM,IAAI,uBAAuB,mBAAmB;AAAA,8BACvD,IAAI,MAAM,IAAI,YAAY,QAAQ;AAAA,yBACvC,IAAI,CAAC;AAAA,WACnB,IAAI;AAAA,OACR,CAAC;AAAA;AAAA;AAGR;"}
+{"version":3,"file":"index336.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index337.js

@@ -1,5 +1,91 @@
-const stackCss = '@layer tokens,reset,components;@layer reset{:host{display:block;padding:10vh 0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pts-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md)}.pts-layer{display:block;will-change:transform;transition:transform var(--duration-fast) var(--ease-out);white-space:nowrap;line-height:.9;text-transform:uppercase;-webkit-user-select:none;user-select:none}:host([size="sm"]) .pts-layer{font-size:clamp(2rem,6vw,4rem)}:host([size="md"]) .pts-layer{font-size:clamp(3rem,8vw,6rem)}:host([size="lg"]) .pts-layer,:host(:not([size])) .pts-layer{font-size:clamp(4rem,10vw,8rem)}:host([size="xl"]) .pts-layer{font-size:clamp(5rem,13vw,10rem)}:host([size="2xl"]) .pts-layer{font-size:clamp(6rem,16vw,14rem)}.pts-layer--outline{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);-webkit-text-stroke:1px var(--text-primary);color:transparent}.pts-layer--italic{font-family:var(--lib-font-body);font-style:italic;font-weight:400;letter-spacing:var(--tracking-tight);color:var(--text-primary)}:host([color="muted"]) .pts-layer--outline{-webkit-text-stroke-color:var(--text-muted)}:host([color="muted"]) .pts-layer--italic{color:var(--text-muted)}:host([color="kaki"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-kaki-500)}:host([color="kaki"]) .pts-layer--italic{color:var(--color-kaki-500)}:host([color="celadon"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-celadon-500)}:host([color="celadon"]) .pts-layer--italic{color:var(--color-celadon-500)}@media(prefers-reduced-motion:reduce){.pts-layer{transition:none;transform:none!important}}}';
+import { html, svg } from "lit";
+function ensoStroke(tone, dark) {
+  if (dark) {
+    if (tone === "kaki") {
+      return { blur: "oklch(70% 0.14 60)", main: "oklch(68% 0.13 60)", bopacity: 0.3 };
+    }
+    return { blur: "oklch(88% 0.01 60)", main: "oklch(88% 0.01 60)", bopacity: 0.2 };
+  }
+  if (tone === "kaki") return { blur: "oklch(55% 0.08 45)", main: "oklch(50% 0.07 45)", bopacity: 0.25 };
+  if (tone === "celadon") return { blur: "oklch(50% 0.06 180)", main: "oklch(48% 0.06 180)", bopacity: 0.25 };
+  return { blur: "oklch(25% 0.02 45)", main: "oklch(25% 0.02 45)", bopacity: 0.25 };
+}
+function ensoWidths(size) {
+  if (size === "sm") return { blur: 2.5, main: 2, feStd: 1.5 };
+  if (size === "lg") return { blur: 3.5, main: 3, feStd: 2 };
+  return { blur: 3, main: 2.5, feStd: 1.5 };
+}
+function ensoTemplate(props) {
+  const stroke = ensoStroke(props.tone, props.dark);
+  const w = ensoWidths(props.size);
+  const fid = "sp-enso-blur";
+  return html`
+    ${svg`
+      <svg viewBox="0 0 48 48" fill="none" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="${fid}">
+            <feGaussianBlur stdDeviation="${w.feStd}" result="blur"/>
+            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+          </filter>
+        </defs>
+        <!-- blur halo layer -->
+        <circle
+          cx="24" cy="24" r="18"
+          stroke="${stroke.blur}"
+          stroke-width="${w.blur}"
+          stroke-linecap="round"
+          stroke-dasharray="95 18"
+          fill="none"
+          opacity="${stroke.bopacity}"
+          filter="url(#${fid})"
+        />
+        <!-- crisp layer -->
+        <circle
+          cx="24" cy="24" r="18"
+          stroke="${stroke.main}"
+          stroke-width="${w.main}"
+          stroke-linecap="round"
+          stroke-dasharray="95 18"
+          fill="none"
+        />
+      </svg>
+    `}
+  `;
+}
+function sumiTemplate() {
+  return html`
+    <div class="sp-sumi-wrap">
+      <div class="sp-sumi"></div>
+    </div>
+  `;
+}
+function kintsugiTemplate() {
+  return html`<div class="sp-kintsugi"></div>`;
+}
+function shizukuTemplate(size) {
+  const cls = `sp-shizuku sp-shizuku--${size}`;
+  return html`
+    <div class="${cls}">
+      <span></span><span></span><span></span>
+      <span></span><span></span><span></span>
+    </div>
+  `;
+}
+function spinnerTemplate(props) {
+  const inner = props.variant === "sumi" ? sumiTemplate() : props.variant === "kintsugi" ? kintsugiTemplate() : props.variant === "shizuku" ? shizukuTemplate(props.size) : ensoTemplate(props);
+  return html`
+    <div
+      role="status"
+      aria-label="${props.label}"
+      aria-live="polite"
+    >
+      ${inner}
+      <!-- Visually hidden label for screen readers -->
+      <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;">${props.label}</span>
+    </div>
+  `;
+}
 export {
-  stackCss as default
+  spinnerTemplate
 };
 //# sourceMappingURL=index337.js.map

package/dist/index337.js.map

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

package/dist/index338.js

@@ -1,5 +1,27 @@
-const timelineCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.tl{display:flex;flex-direction:column;gap:0}.tl-item{display:grid;grid-template-columns:40px 1fr;gap:0 var(--lib-space-md);position:relative}.tl-spine{display:flex;flex-direction:column;align-items:center;position:relative}.tl-node{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform var(--duration-base),box-shadow var(--duration-base)}.tl-node-dot{background:var(--bg-elevated);border:2px solid var(--color-washi-700)}.tl-node-dot:after{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-washi-700)}.tl-node-icon{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary)}.tl-node-avatar{background:var(--color-washi-200);border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:9px;color:var(--text-secondary)}.nd-kaki.tl-node-dot{border-color:var(--color-kaki-500)}.nd-kaki.tl-node-dot:after{background:var(--color-kaki-500)}.nd-kaki.tl-node-icon{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.nd-kaki.tl-node-avatar{background:var(--color-kaki-100);border-color:var(--color-kaki-100);color:var(--color-kaki-600)}.nd-celadon.tl-node-dot{border-color:var(--color-celadon-500)}.nd-celadon.tl-node-dot:after{background:var(--color-celadon-500)}.nd-celadon.tl-node-icon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.nd-celadon.tl-node-avatar{background:var(--color-celadon-100);border-color:var(--color-celadon-100);color:var(--color-celadon-600)}.nd-error.tl-node-dot{border-color:var(--color-error)}.nd-error.tl-node-dot:after{background:var(--color-error)}.nd-error.tl-node-icon{background:#fff8f7;border-color:#f5c4bc;color:var(--color-error)}.nd-muted.tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.nd-muted.tl-node-dot:after{background:var(--color-washi-300)}.nd-muted.tl-node-icon{background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-muted)}@keyframes tl-pulse{0%{box-shadow:0 0 #b85a1e59}70%{box-shadow:0 0 0 8px #b85a1e00}to{box-shadow:0 0 #b85a1e00}}.tl-item.is-active .tl-node-dot{border-color:var(--color-kaki-500);animation:tl-pulse 2s infinite}.tl-item.is-active .tl-node-dot:after{background:var(--color-kaki-500)}.tl-item.is-active .tl-title{color:var(--text-primary)}.tl-item.is-done .tl-node-dot{background:var(--color-washi-900);border-color:var(--color-washi-900)}.tl-item.is-done .tl-node-dot:after{display:none}.tl-item.is-done .tl-node-dot:before{content:"";width:6px;height:10px;border-right:2px solid var(--color-white);border-bottom:2px solid var(--color-white);transform:rotate(45deg) translate(-1px,-2px)}.tl-item.is-error .tl-node-dot{background:var(--color-error);border-color:var(--color-error)}.tl-item.is-error .tl-node-dot:after{display:none}.tl-item.is-error .tl-node-dot:before{content:"!";font-family:var(--lib-font-mono);font-size:11px;font-weight:700;color:var(--color-white);line-height:1}.tl-item.is-error .tl-title{color:var(--color-error)}.tl-item.is-pending .tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.tl-item.is-pending .tl-node-dot:after{background:var(--color-washi-300);width:6px;height:6px}.tl-item.is-pending .tl-title{color:var(--text-muted)}.tl-item.is-pending .tl-body{opacity:.5}.tl-line{width:1px;flex:1;background:var(--border-default);margin:var(--lib-space-xs) 0;min-height:var(--lib-space-lg);position:relative;overflow:hidden}.tl-line.dashed{background:repeating-linear-gradient(to bottom,var(--border-default) 0,var(--border-default) 4px,transparent 4px,transparent 8px)}.tl-line.progress{background:var(--border-subtle)}.tl-line.progress:after{content:"";position:absolute;top:0;left:0;right:0;height:var(--tl-progress, 0%);background:var(--color-kaki-500);transition:height var(--duration-slower) var(--ease-out)}.tl-content{padding-bottom:var(--lib-space-lg);padding-top:2px}.tl-item:last-child .tl-content{padding-bottom:0}.tl-timestamp{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);margin-bottom:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);line-height:1;padding-top:6px}.tl-timestamp-dot{width:4px;height:4px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.tl-title{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-snug);margin-bottom:var(--lib-space-sm)}.tl-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);opacity:.85}.tl-body p{margin-bottom:var(--lib-space-sm)}.tl-body p:last-child{margin-bottom:0}.tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lib-space-sm);margin-top:var(--lib-space-sm)}.tl-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-md);margin-top:var(--lib-space-xs)}.tl-item.is-active .tl-card{border-color:var(--color-kaki-200);background:var(--color-kaki-50)}.tl-item.is-done .tl-card{background:var(--bg-surface)}.tl-item.is-error .tl-card{border-color:#c44030;background:#fff8f7}.tl-item.is-pending .tl-card{background:var(--bg-surface);opacity:.6}.tl-media{margin-top:var(--lib-space-md);border-top:1px solid var(--border-subtle);padding-top:var(--lib-space-md);display:flex;gap:var(--lib-space-sm);flex-wrap:wrap}.tl-media-thumb{width:64px;height:48px;background:var(--border-subtle);border:1px solid var(--border-default);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted)}.tl-badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:2px var(--lib-space-sm)}.tl-badge:before{content:"";width:4px;height:4px;border-radius:var(--radius-full);background:currentcolor;opacity:.65;flex-shrink:0}.tl-badge-default{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle)}.tl-badge-kaki{color:var(--color-kaki-500);background:var(--color-kaki-50);border:1px solid var(--color-kaki-100)}.tl-badge-celadon{color:var(--color-celadon-500);background:var(--color-celadon-50);border:1px solid var(--color-celadon-100)}.tl-badge-error{color:var(--color-error);background:#fff8f7;border:1px solid #F5C4BC}.tl-avatar{width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:7px;color:var(--text-secondary);border:1px solid var(--border-subtle);flex-shrink:0}.tl-item.is-collapsed .tl-body,.tl-item.is-collapsed .tl-media,.tl-item.is-collapsed .tl-card-body{display:none}.tl-item.is-collapsed .tl-content{padding-bottom:var(--lib-space-md)}.tl-expand-btn{background:none;border:none;cursor:pointer;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);padding:0;margin-top:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);transition:color var(--duration-fast)}.tl-expand-btn:hover{color:var(--text-primary)}:host([size="sm"]) .tl-item{grid-template-columns:28px 1fr}:host([size="sm"]) .tl-node{width:20px;height:20px}:host([size="sm"]) .tl-node-dot:after{width:6px;height:6px}:host([size="sm"]) .tl-node-icon{font-size:11px}:host([size="sm"]) .tl-node-avatar{font-size:7px}:host([size="sm"]) .tl-line{min-height:var(--lib-space-md)}:host([size="sm"]) .tl-content{padding-bottom:var(--lib-space-md)}:host([size="sm"]) .tl-timestamp{font-size:9px;padding-top:2px}:host([size="sm"]) .tl-title{font-size:var(--text-sm)}:host([size="sm"]) .tl-body{font-size:var(--text-xs)}:host([size="sm"]) .tl-card{padding:var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .tl-item{grid-template-columns:48px 1fr;gap:0 var(--lib-space-md)}:host([size="lg"]) .tl-node{width:36px;height:36px}:host([size="lg"]) .tl-node-dot:after{width:10px;height:10px}:host([size="lg"]) .tl-node-icon{font-size:18px}:host([size="lg"]) .tl-line{min-height:var(--lib-space-lg)}:host([size="lg"]) .tl-content{padding-bottom:var(--lib-space-xl);padding-top:4px}:host([size="lg"]) .tl-timestamp{font-size:11px;padding-top:8px}:host([size="lg"]) .tl-title{font-size:var(--text-md)}:host([size="lg"]) .tl-body{font-size:var(--text-sm)}:host([size="lg"]) .tl-card{padding:var(--lib-space-md) var(--lib-space-lg)}}';
+import { nothing, html } from "lit";
+const LABEL_TEXT = {
+  online: "Online",
+  away: "Away",
+  busy: "Busy",
+  offline: "Offline"
+};
+function statusDotTemplate(props) {
+  return html`
+    <span class="sd-root">
+      <span
+        class="sd-wrap"
+        role="img"
+        aria-label=${LABEL_TEXT[props.status]}
+      >
+        <span class="sd ${props.bordered ? "sd--bordered" : ""}"></span>
+      </span>
+      ${props.label ? html`
+        <span class="sd-label">${LABEL_TEXT[props.status]}</span>
+      ` : nothing}
+    </span>
+  `;
+}
 export {
-  timelineCss as default
+  statusDotTemplate
 };
 //# sourceMappingURL=index338.js.map

package/dist/index338.js.map

@@ -1 +1 @@
-{"version":3,"file":"index338.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index338.js","sources":["../src/components/atoms/status-dot/lib-status-dot.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibStatusDotStatus = 'online' | 'away' | 'busy' | 'offline';\nexport type LibStatusDotSize   = 'sm' | 'md' | 'lg';\n\nconst LABEL_TEXT: Record<LibStatusDotStatus, string> = {\n  online:  'Online',\n  away:    'Away',\n  busy:    'Busy',\n  offline: 'Offline',\n};\n\nexport interface StatusDotTemplateProps {\n  status:   LibStatusDotStatus;\n  size:     LibStatusDotSize;\n  bordered: boolean;\n  label:    boolean;\n}\n\n/**\n * Renderiza el wrapper con el punto central y, opcionalmente, el label inline.\n *\n * Estructura:\n *   .sd-wrap   — posiciona los anillos (::before / ::after) para online·mizu\n *     .sd      — el punto coloreado y animado\n *   .sd-label  — (opcional) texto inline con color del estado\n */\nexport function statusDotTemplate(props: StatusDotTemplateProps): TemplateResult {\n  return html`\n    <span class=\"sd-root\">\n      <span\n        class=\"sd-wrap\"\n        role=\"img\"\n        aria-label=${LABEL_TEXT[props.status]}\n      >\n        <span class=\"sd ${props.bordered ? 'sd--bordered' : ''}\"></span>\n      </span>\n      ${props.label ? html`\n        <span class=\"sd-label\">${LABEL_TEXT[props.status]}</span>\n      ` : nothing}\n    </span>\n  `;\n}"],"names":[],"mappings":";AAKA,MAAM,aAAiD;AAAA,EACrD,QAAS;AAAA,EACT,MAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AACX;AAiBO,SAAS,kBAAkB,OAA+C;AAC/E,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,WAAW,MAAM,MAAM,CAAC;AAAA;AAAA,0BAEnB,MAAM,WAAW,iBAAiB,EAAE;AAAA;AAAA,QAEtD,MAAM,QAAQ;AAAA,iCACW,WAAW,MAAM,MAAM,CAAC;AAAA,UAC/C,OAAO;AAAA;AAAA;AAGjB;"}

package/dist/index339.js

@@ -1,95 +1,5 @@
-import { html, nothing } from "lit";
-import { styleMap as o } from "./index241.js";
-function timelineItemTemplate(props) {
-  const {
-    nodeType,
-    nodeColor,
-    icon,
-    avatar,
-    status,
-    lineVariant,
-    lineProgress,
-    hideLine,
-    timestamp,
-    title,
-    body,
-    card,
-    collapsed,
-    collapsible,
-    onToggleCollapse
-  } = props;
-  const itemCls = [
-    "tl-item",
-    status !== "default" ? `is-${status}` : "",
-    collapsed ? "is-collapsed" : ""
-  ].filter(Boolean).join(" ");
-  const nodeTypeCls = `tl-node-${nodeType}`;
-  const nodeColorCls = nodeColor !== "default" ? `nd-${nodeColor}` : "";
-  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();
-  const nodeInner = nodeType === "icon" ? html`<lib-icon name="${icon}" size="xs"></lib-icon>` : nodeType === "avatar" ? html`${avatar}` : nothing;
-  const lineCls = [
-    "tl-line",
-    lineVariant === "dashed" ? "dashed" : "",
-    lineVariant === "progress" ? "progress" : ""
-  ].filter(Boolean).join(" ");
-  const lineStyles = lineVariant === "progress" ? o({ "--tl-progress": `${lineProgress}%` }) : nothing;
-  const contentInner = card ? html`
-        <div class="tl-card">
-          ${title ? html`<p class="tl-title">${title}</p>` : nothing}
-          <div class="tl-card-body">
-            ${body ? html`<div class="tl-body">${body}</div>` : nothing}
-            <!-- slot por defecto para contenido libre dentro de la card -->
-            <slot></slot>
-            <!-- slot meta: badges, avatares, etc. -->
-            <div class="tl-meta">
-              <slot name="meta"></slot>
-            </div>
-            <!-- slot media: imágenes adjuntas -->
-            <slot name="media"></slot>
-          </div>
-        </div>` : html`
-        ${title ? html`<p class="tl-title">${title}</p>` : nothing}
-        ${body ? html`<div class="tl-body">${body}</div>` : html`<div class="tl-body"><slot></slot></div>`}
-        <div class="tl-meta">
-          <slot name="meta"></slot>
-        </div>`;
-  return html`
-    <div class="${itemCls}" role="listitem">
-
-      <!-- ── Spine: nodo + línea ── -->
-      <div class="tl-spine">
-        <div class="${nodeCls}">${nodeInner}</div>
-        ${hideLine ? nothing : html`<div class="${lineCls}" style="${lineStyles}"></div>`}
-      </div>
-
-      <!-- ── Content ── -->
-      <div class="tl-content">
-        ${timestamp ? html`
-              <div class="tl-timestamp">
-                <span class="tl-timestamp-dot"></span>
-                ${timestamp}
-              </div>` : nothing}
-
-        ${contentInner}
-
-        ${collapsible ? html`
-              <button
-                class="tl-expand-btn"
-                aria-expanded="${!collapsed}"
-                @click="${onToggleCollapse}"
-              >
-                <lib-icon
-                  name="${collapsed ? "caret-down" : "caret-up"}"
-                  size="xs"
-                ></lib-icon>
-                ${collapsed ? "Mostrar más" : "Mostrar menos"}
-              </button>` : nothing}
-      </div>
-
-    </div>
-  `;
-}
+const statusDotCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.sd-root{display:inline-flex;align-items:center;gap:var(--lib-space-sm)}.sd-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sd-wrap:before,.sd-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full);opacity:0;pointer-events:none}.sd{width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-washi-400);position:relative;z-index:1;flex-shrink:0}:host([size="sm"]) .sd{width:6px;height:6px}:host([size="md"]) .sd{width:10px;height:10px}:host([size="lg"]) .sd{width:14px;height:14px}.sd--bordered{box-shadow:0 0 0 2px var(--bg-elevated)}.sd-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary);line-height:1}@keyframes mizu-ring-a{0%{transform:scale(1);opacity:.5}to{transform:scale(2.8);opacity:0}}@keyframes mizu-ring-b{0%{transform:scale(1);opacity:.35}to{transform:scale(2.2);opacity:0}}@keyframes iki{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}@keyframes hayai{0%,to{opacity:1}40%{opacity:.3}60%{opacity:.3}}:host([status="online"]) .sd{background:var(--color-celadon-500)}:host([status="online"]) .sd-wrap:before{background:var(--color-celadon-400);animation:mizu-ring-a 2.6s cubic-bezier(0,.55,.45,1) infinite}:host([status="online"]) .sd-wrap:after{background:var(--color-celadon-400);animation:mizu-ring-b 2.6s cubic-bezier(0,.55,.45,1) .9s infinite}:host([status="online"]) .sd-label{color:var(--color-celadon-600)}:host([status="away"]) .sd{background:var(--color-kaki-500);animation:iki 3s ease-in-out infinite}:host([status="away"]) .sd-label{color:var(--color-kaki-500)}:host([status="busy"]) .sd{background:var(--color-error);animation:hayai 1.1s ease-in-out infinite}:host([status="busy"]) .sd-label{color:var(--color-error)}:host([status="offline"]) .sd{background:var(--color-washi-400)}:host([status="offline"]) .sd-label{color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.sd-wrap:before,.sd-wrap:after{animation:none;opacity:0}.sd{animation:none}}}';
 export {
-  timelineItemTemplate
+  statusDotCss as default
 };
 //# sourceMappingURL=index339.js.map

package/dist/index339.js.map

@@ -1 +1 @@
-{"version":3,"file":"index339.js","sources":["../src/components/organisms/timeline/lib-timeline-item.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { TimelineItemTemplateProps } from './lib-timeline-item.types';\n\nexport function timelineItemTemplate(props: TimelineItemTemplateProps): TemplateResult {\n  const {\n    nodeType, nodeColor, icon, avatar,\n    status, lineVariant, lineProgress, hideLine,\n    timestamp, title, body, card, collapsed, collapsible,\n    onToggleCollapse,\n  } = props;\n\n  /* ── Clases del ítem raíz ── */\n  const itemCls = [\n    'tl-item',\n    status !== 'default' ? `is-${status}` : '',\n    collapsed ? 'is-collapsed' : '',\n  ].filter(Boolean).join(' ');\n\n  /* ── Clases del nodo ── */\n  const nodeTypeCls = `tl-node-${nodeType}`;\n  const nodeColorCls = nodeColor !== 'default' ? `nd-${nodeColor}` : '';\n  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();\n\n  /* ── Nodo interior ── */\n  const nodeInner = nodeType === 'icon'\n    ? html`<lib-icon name=\"${icon}\" size=\"xs\"></lib-icon>`\n    : nodeType === 'avatar'\n      ? html`${avatar}`\n      : nothing; /* dot — nodo gestionado por CSS ::before/::after */\n\n  /* ── Línea ── */\n  const lineCls = [\n    'tl-line',\n    lineVariant === 'dashed'   ? 'dashed'   : '',\n    lineVariant === 'progress' ? 'progress' : '',\n  ].filter(Boolean).join(' ');\n\n  const lineStyles = lineVariant === 'progress'\n    ? styleMap({ '--tl-progress': `${lineProgress}%` } as Record<string, string>)\n    : nothing;\n\n  /* ── Contenido ── */\n  const contentInner: TemplateResult = card\n    ? html`\n        <div class=\"tl-card\">\n          ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n          <div class=\"tl-card-body\">\n            ${body ? html`<div class=\"tl-body\">${body}</div>` : nothing}\n            <!-- slot por defecto para contenido libre dentro de la card -->\n            <slot></slot>\n            <!-- slot meta: badges, avatares, etc. -->\n            <div class=\"tl-meta\">\n              <slot name=\"meta\"></slot>\n            </div>\n            <!-- slot media: imágenes adjuntas -->\n            <slot name=\"media\"></slot>\n          </div>\n        </div>`\n    : html`\n        ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n        ${body\n          ? html`<div class=\"tl-body\">${body}</div>`\n          : html`<div class=\"tl-body\"><slot></slot></div>`}\n        <div class=\"tl-meta\">\n          <slot name=\"meta\"></slot>\n        </div>`;\n\n  return html`\n    <div class=\"${itemCls}\" role=\"listitem\">\n\n      <!-- ── Spine: nodo + línea ── -->\n      <div class=\"tl-spine\">\n        <div class=\"${nodeCls}\">${nodeInner}</div>\n        ${hideLine\n          ? nothing\n          : html`<div class=\"${lineCls}\" style=\"${lineStyles}\"></div>`}\n      </div>\n\n      <!-- ── Content ── -->\n      <div class=\"tl-content\">\n        ${timestamp\n          ? html`\n              <div class=\"tl-timestamp\">\n                <span class=\"tl-timestamp-dot\"></span>\n                ${timestamp}\n              </div>`\n          : nothing}\n\n        ${contentInner}\n\n        ${collapsible\n          ? html`\n              <button\n                class=\"tl-expand-btn\"\n                aria-expanded=\"${!collapsed}\"\n                @click=\"${onToggleCollapse}\"\n              >\n                <lib-icon\n                  name=\"${collapsed ? 'caret-down' : 'caret-up'}\"\n                  size=\"xs\"\n                ></lib-icon>\n                ${collapsed ? 'Mostrar más' : 'Mostrar menos'}\n              </button>`\n          : nothing}\n      </div>\n\n    </div>\n  `;\n}"],"names":["styleMap"],"mappings":";;AAIO,SAAS,qBAAqB,OAAkD;AACrF,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAW;AAAA,IAAM;AAAA,IAC3B;AAAA,IAAQ;AAAA,IAAa;AAAA,IAAc;AAAA,IACnC;AAAA,IAAW;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAW;AAAA,IACzC;AAAA,EAAA,IACE;AAGJ,QAAM,UAAU;AAAA,IACd;AAAA,IACA,WAAW,YAAY,MAAM,MAAM,KAAK;AAAA,IACxC,YAAY,iBAAiB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,cAAc,WAAW,QAAQ;AACvC,QAAM,eAAe,cAAc,YAAY,MAAM,SAAS,KAAK;AACnE,QAAM,UAAU,WAAW,WAAW,IAAI,YAAY,GAAG,KAAA;AAGzD,QAAM,YAAY,aAAa,SAC3B,uBAAuB,IAAI,4BAC3B,aAAa,WACX,OAAO,MAAM,KACb;AAGN,QAAM,UAAU;AAAA,IACd;AAAA,IACA,gBAAgB,WAAa,WAAa;AAAA,IAC1C,gBAAgB,aAAa,aAAa;AAAA,EAAA,EAC1C,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,aAAa,gBAAgB,aAC/BA,EAAS,EAAE,iBAAiB,GAAG,YAAY,IAAA,CAA+B,IAC1E;AAGJ,QAAM,eAA+B,OACjC;AAAA;AAAA,YAEM,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA;AAAA,cAEtD,OAAO,4BAA4B,IAAI,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAWjE;AAAA,UACI,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA,UACxD,OACE,4BAA4B,IAAI,WAChC,8CAA8C;AAAA;AAAA;AAAA;AAKxD,SAAO;AAAA,kBACS,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIH,OAAO,KAAK,SAAS;AAAA,UACjC,WACE,UACA,mBAAmB,OAAO,YAAY,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAK5D,YACE;AAAA;AAAA;AAAA,kBAGM,SAAS;AAAA,wBAEf,OAAO;AAAA;AAAA,UAET,YAAY;AAAA;AAAA,UAEZ,cACE;AAAA;AAAA;AAAA,iCAGqB,CAAC,SAAS;AAAA,0BACjB,gBAAgB;AAAA;AAAA;AAAA,0BAGhB,YAAY,eAAe,UAAU;AAAA;AAAA;AAAA,kBAG7C,YAAY,gBAAgB,eAAe;AAAA,2BAEjD,OAAO;AAAA;AAAA;AAAA;AAAA;AAKnB;"}
+{"version":3,"file":"index339.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index34.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { kbdTemplate } from "./index252.js";
-import kbdCss from "./index253.js";
+import { property, customElement } from "lit/decorators.js";
+import { generateUniqueId } from "./index210.js";
+import { radioTemplate } from "./index324.js";
+import radioCss from "./index325.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,54 +14,77 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibKbd = class extends LitElement {
+let LibRadio = class extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.label = "";
+    this.sublabel = "";
     this.size = "md";
     this.variant = "default";
-    this.pressed = false;
-    this._pointerPressed = false;
+    this._radioId = generateUniqueId("lib-radio-");
+  }
+  _handleChange(e) {
+    const input = e.target;
+    this.checked = input.checked;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked, value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
-    return kbdTemplate({
+    return radioTemplate({
+      radioId: this._radioId,
+      name: this.name,
+      value: this.value,
+      checked: this.checked,
+      disabled: this.disabled,
+      label: this.label,
+      sublabel: this.sublabel,
       size: this.size,
       variant: this.variant,
-      pressed: this.pressed || this._pointerPressed,
-      onDown: this._onPointerDown.bind(this),
-      onUp: this._onPointerUp.bind(this),
-      onLeave: this._onPointerLeave.bind(this)
+      onChange: this._handleChange.bind(this)
     });
   }
-  _onPointerDown() {
-    this._pointerPressed = true;
-  }
-  _onPointerUp() {
-    this._pointerPressed = false;
-  }
-  _onPointerLeave() {
-    this._pointerPressed = false;
-  }
 };
-LibKbd.styles = [
+LibRadio.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(kbdCss)}`
+  css`${unsafeCSS(radioCss)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibKbd.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibKbd.prototype, "variant", 2);
+  property({ type: Boolean, reflect: true })
+], LibRadio.prototype, "checked", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibKbd.prototype, "pressed", 2);
+], LibRadio.prototype, "disabled", 2);
 __decorateClass([
-  state()
-], LibKbd.prototype, "_pointerPressed", 2);
-LibKbd = __decorateClass([
-  customElement("lib-kbd")
-], LibKbd);
+  property({ type: String })
+], LibRadio.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], LibRadio.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], LibRadio.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibRadio.prototype, "sublabel", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibRadio.prototype, "variant", 2);
+LibRadio = __decorateClass([
+  customElement("lib-radio")
+], LibRadio);
 export {
-  LibKbd
+  LibRadio
 };
 //# sourceMappingURL=index34.js.map