@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index15.js

@@ -1,133 +1,32 @@
-import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { ratingTemplate } from "./index218.js";
-import ratingCss from "./index219.js";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import gridCss from "./index289.js";
 import sharedTokens from "./index196.js";
-var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = decorator(result) || result;
   return result;
 };
-let LibRating = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.value = 0;
-    this.max = 5;
-    this.size = "md";
-    this.color = "gold";
-    this.icon = "star";
-    this.readonly = false;
-    this.disabled = false;
-    this.showCount = false;
-    this.count = null;
-    this._hoverValue = 0;
-    this._popTimer = null;
-  }
-  /* ════════════════════════════════════════
-     Manejadores de eventos (llamados desde html.ts)
-     ════════════════════════════════════════ */
-  _onEnter(pos) {
-    if (this.readonly || this.disabled) return;
-    this._hoverValue = pos;
-  }
-  _onLeave() {
-    this._hoverValue = 0;
-  }
-  _onClick(pos) {
-    if (this.readonly || this.disabled) return;
-    const prev = this.value;
-    this.value = this.value === pos ? 0 : pos;
-    this._triggerPop(pos);
-    this.dispatchEvent(new CustomEvent("ui-lib-rating-change", {
-      detail: { value: this.value, prev },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  _onKeyItem(e, pos) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      this._onClick(pos);
-    }
-    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-      e.preventDefault();
-      this._focusItem(pos + 1);
-    }
-    if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-      e.preventDefault();
-      this._focusItem(pos - 1);
-    }
-  }
-  /* ── Focus al item por posición ── */
-  _focusItem(pos) {
-    var _a, _b;
-    const clamped = Math.min(Math.max(1, pos), this.max);
-    const items = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".rt-item:not(.rt-item-half)");
-    (_b = items == null ? void 0 : items[clamped - 1]) == null ? void 0 : _b.focus();
-  }
-  /* ── Añade clase is-pop y la quita tras la animación ── */
-  _triggerPop(pos) {
-    var _a;
-    if (this._popTimer) clearTimeout(this._popTimer);
-    const items = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".rt-item");
-    items == null ? void 0 : items.forEach((el, idx) => {
-      if (idx + 1 <= pos) el.classList.add("is-pop");
-    });
-    this._popTimer = setTimeout(() => {
-      items == null ? void 0 : items.forEach((el) => el.classList.remove("is-pop"));
-    }, 350);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._popTimer) clearTimeout(this._popTimer);
-  }
+let LibComponentGrid = class extends LitElement {
   render() {
-    return ratingTemplate(this);
+    return html`
+      <div class="grid" part="grid">
+        <slot></slot>
+      </div>
+    `;
   }
 };
-LibRating.styles = [
+LibComponentGrid.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(ratingCss)}`
+  css`${unsafeCSS(gridCss)}`
 ];
-__decorateClass([
-  property({ type: Number, reflect: true })
-], LibRating.prototype, "value", 2);
-__decorateClass([
-  property({ type: Number })
-], LibRating.prototype, "max", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibRating.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibRating.prototype, "color", 2);
-__decorateClass([
-  property({ type: String })
-], LibRating.prototype, "icon", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRating.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRating.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-count" })
-], LibRating.prototype, "showCount", 2);
-__decorateClass([
-  property({ type: Number })
-], LibRating.prototype, "count", 2);
-__decorateClass([
-  state()
-], LibRating.prototype, "_hoverValue", 2);
-LibRating = __decorateClass([
-  customElement("lib-rating")
-], LibRating);
+LibComponentGrid = __decorateClass([
+  customElement("lib-component-grid")
+], LibComponentGrid);
 export {
-  LibRating
+  LibComponentGrid
 };
 //# sourceMappingURL=index15.js.map

package/dist/index15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index15.js","sources":["../src/components/atoms/rating/lib-rating.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ratingTemplate } from './lib-rating.html';\nimport ratingCss from './lib-rating.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { RatingSize, RatingColor, RatingIcon } from './lib-rating.types';\n\n/**\n * lib-rating — Shibui UI · SG-19\n *\n * @prop value       — Valor actual (0–max). Soporta decimales en readonly para half-star.\n * @prop max         — Máximo de items (default 5)\n * @prop size        — 'xs' | 'sm' | 'md'(default) | 'lg' | 'xl'\n * @prop color       — 'gold'(default) | 'kaki' | 'washi' | 'celadon'\n * @prop icon        — 'star'(default) | 'heart' | 'diamond'\n * @prop readonly    — Solo display, sin interacción\n * @prop disabled    — Opacity 0.4, sin interacción\n * @prop show-count  — Muestra el valor numérico junto a las estrellas\n * @prop count       — Número de reseñas a mostrar junto al valor numérico\n *\n * @fires ui-lib-rating-change — { detail: { value: number, prev: number } }\n */\n@customElement('lib-rating')\nexport class LibRating extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(ratingCss)}`,\n  ];\n\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  @property({ type: Number })\n  max = 5;\n\n  @property({ type: String, reflect: true })\n  size: RatingSize = 'md';\n\n  @property({ type: String, reflect: true })\n  color: RatingColor = 'gold';\n\n  @property({ type: String })\n  icon: RatingIcon = 'star';\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, attribute: 'show-count' })\n  showCount = false;\n\n  @property({ type: Number })\n  count: number | null = null;\n\n  /* ── Estado interno de hover ── */\n  @state() _hoverValue = 0;\n\n  /* ── ID del timeout de pop animation ── */\n  private _popTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /* ════════════════════════════════════════\n     Manejadores de eventos (llamados desde html.ts)\n     ════════════════════════════════════════ */\n\n  _onEnter(pos: number): void {\n    if (this.readonly || this.disabled) return;\n    this._hoverValue = pos;\n  }\n\n  _onLeave(): void {\n    this._hoverValue = 0;\n  }\n\n  _onClick(pos: number): void {\n    if (this.readonly || this.disabled) return;\n\n    /* Toggle: clic en la estrella activa → reset a 0 */\n    const prev = this.value;\n    this.value = this.value === pos ? 0 : pos;\n\n    /* Animación pop */\n    this._triggerPop(pos);\n\n    this.dispatchEvent(new CustomEvent('ui-lib-rating-change', {\n      detail: { value: this.value, prev },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  _onKeyItem(e: KeyboardEvent, pos: number): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._onClick(pos);\n    }\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._focusItem(pos + 1);\n    }\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._focusItem(pos - 1);\n    }\n  }\n\n  /* ── Focus al item por posición ── */\n  private _focusItem(pos: number): void {\n    const clamped = Math.min(Math.max(1, pos), this.max);\n    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.rt-item:not(.rt-item-half)');\n    items?.[clamped - 1]?.focus();\n  }\n\n  /* ── Añade clase is-pop y la quita tras la animación ── */\n  private _triggerPop(pos: number): void {\n    if (this._popTimer) clearTimeout(this._popTimer);\n\n    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.rt-item');\n    items?.forEach((el, idx) => {\n      if (idx + 1 <= pos) el.classList.add('is-pop');\n    });\n\n    this._popTimer = setTimeout(() => {\n      items?.forEach(el => el.classList.remove('is-pop'));\n    }, 350);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._popTimer) clearTimeout(this._popTimer);\n  }\n\n  protected override render(): TemplateResult {\n    return ratingTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-rating': LibRating;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,QAAQ;AAGR,SAAA,MAAM;AAGN,SAAA,OAAmB;AAGnB,SAAA,QAAqB;AAGrB,SAAA,OAAmB;AAGnB,SAAA,WAAW;AAGX,SAAA,WAAW;AAGX,SAAA,YAAY;AAGZ,SAAA,QAAuB;AAGd,SAAA,cAAc;AAGvB,SAAQ,YAAkD;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM1D,SAAS,KAAmB;AAC1B,QAAI,KAAK,YAAY,KAAK,SAAU;AACpC,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,WAAiB;AACf,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,SAAS,KAAmB;AAC1B,QAAI,KAAK,YAAY,KAAK,SAAU;AAGpC,UAAM,OAAO,KAAK;AAClB,SAAK,QAAQ,KAAK,UAAU,MAAM,IAAI;AAGtC,SAAK,YAAY,GAAG;AAEpB,SAAK,cAAc,IAAI,YAAY,wBAAwB;AAAA,MACzD,QAAQ,EAAE,OAAO,KAAK,OAAO,KAAA;AAAA,MAC7B,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEA,WAAW,GAAkB,KAAmB;AAC9C,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,WAAK,SAAS,GAAG;AAAA,IACnB;AACA,QAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,WAAW;AACjD,QAAE,eAAA;AACF,WAAK,WAAW,MAAM,CAAC;AAAA,IACzB;AACA,QAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa;AAClD,QAAE,eAAA;AACF,WAAK,WAAW,MAAM,CAAC;AAAA,IACzB;AAAA,EACF;AAAA;AAAA,EAGQ,WAAW,KAAmB;;AACpC,UAAM,UAAU,KAAK,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG;AACnD,UAAM,SAAQ,UAAK,eAAL,mBAAiB,iBAA8B;AAC7D,yCAAQ,UAAU,OAAlB,mBAAsB;AAAA,EACxB;AAAA;AAAA,EAGQ,YAAY,KAAmB;;AACrC,QAAI,KAAK,UAAW,cAAa,KAAK,SAAS;AAE/C,UAAM,SAAQ,UAAK,eAAL,mBAAiB,iBAA8B;AAC7D,mCAAO,QAAQ,CAAC,IAAI,QAAQ;AAC1B,UAAI,MAAM,KAAK,IAAK,IAAG,UAAU,IAAI,QAAQ;AAAA,IAC/C;AAEA,SAAK,YAAY,WAAW,MAAM;AAChC,qCAAO,QAAQ,CAAA,OAAM,GAAG,UAAU,OAAO,QAAQ;AAAA,IACnD,GAAG,GAAG;AAAA,EACR;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,QAAI,KAAK,UAAW,cAAa,KAAK,SAAS;AAAA,EACjD;AAAA,EAEmB,SAAyB;AAC1C,WAAO,eAAe,IAAI;AAAA,EAC5B;AACF;AAjHa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,UAOX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,UAUX,WAAA,OAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,UAaX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,UAgBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBf,UAmBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArB/B,UAsBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAxB/B,UAyBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GA3BzC,UA4BX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Bf,UA+BX,WAAA,SAAA,CAAA;AAGS,gBAAA;AAAA,EAAR,MAAA;AAAM,GAlCI,UAkCF,WAAA,eAAA,CAAA;AAlCE,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index15.js","sources":["../src/components/atoms/card/card-grid/lib-card-grid.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport gridCss from './lib-card-grid.css?inline';\nimport sharedTokens from '../../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-component-grid>` — Grid contenedor de `<lib-component-card>`.\n *\n * Gestiona el layout CSS Grid y aplica automáticamente `grid-column: span 2`\n * a las tarjetas con el atributo `featured`.\n *\n * @tag lib-component-grid\n *\n * @slot - Acepta uno o más `<lib-component-card>`.\n *\n * @cssprop --cg-cols   - Grid template columns. Default: `repeat(auto-fill, minmax(280px, 1fr))`.\n * @cssprop --cg-gap    - Gap entre celdas. Default: `1.5px`.\n *\n * @example\n * <lib-component-grid>\n *   <lib-component-card featured num=\"✦ Kintsugi\" name=\"La cicatriz\" name-accent=\"de oro\">\n *     <div slot=\"preview\">...</div>\n *   </lib-component-card>\n *   <lib-component-card num=\"01–05\" name=\"Buttons\" .tags=${[...]}>\n *     <div slot=\"preview\">...</div>\n *   </lib-component-card>\n * </lib-component-grid>\n */\n@customElement('lib-component-grid')\nexport class LibComponentGrid extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(gridCss)}`,\n  ];\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"grid\" part=\"grid\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-component-grid': LibComponentGrid;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;AA6BO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAO5B,SAAyB;AAC1C,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAda,iBAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AALW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}

package/dist/index16.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { progressCircleTemplate } from "./index220.js";
-import progressCss from "./index221.js";
+import { checkboxTemplate } from "./index290.js";
+import checkboxCss from "./index291.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,68 +13,76 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibProgressCircle = class extends LitElement {
+let LibCheckbox = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.value = 0;
-    this.max = 100;
+    this.checked = false;
+    this.disabled = false;
+    this.indeterminate = false;
+    this.label = "";
+    this.sublabel = "";
+    this.value = "";
     this.size = "md";
-    this.strokeWidth = null;
     this.variant = "default";
+  }
+  _handleChange(e) {
+    const input = e.target;
+    this.checked = input.checked;
     this.indeterminate = false;
-    this.bare = false;
-    this.sub = "";
-    this.icon = null;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked, value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
-    return progressCircleTemplate({
+    return checkboxTemplate({
+      checked: this.checked,
+      disabled: this.disabled,
+      indeterminate: this.indeterminate,
+      label: this.label,
+      sublabel: this.sublabel,
       value: this.value,
-      max: this.max,
       size: this.size,
-      strokeWidth: this.strokeWidth,
       variant: this.variant,
-      indeterminate: this.indeterminate,
-      bare: this.bare,
-      sub: this.sub,
-      icon: this.icon
+      onChange: this._handleChange.bind(this)
     });
   }
 };
-LibProgressCircle.styles = [
+LibCheckbox.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(progressCss)}`
+  css`${unsafeCSS(checkboxCss)}`
 ];
 __decorateClass([
-  property({ type: Number })
-], LibProgressCircle.prototype, "value", 2);
-__decorateClass([
-  property({ type: Number })
-], LibProgressCircle.prototype, "max", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibProgressCircle.prototype, "size", 2);
-__decorateClass([
-  property({ type: Number, attribute: "stroke-width" })
-], LibProgressCircle.prototype, "strokeWidth", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibProgressCircle.prototype, "variant", 2);
+  property({ type: Boolean, reflect: true })
+], LibCheckbox.prototype, "checked", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibProgressCircle.prototype, "indeterminate", 2);
+], LibCheckbox.prototype, "disabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibProgressCircle.prototype, "bare", 2);
+], LibCheckbox.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: String })
+], LibCheckbox.prototype, "label", 2);
 __decorateClass([
   property({ type: String })
-], LibProgressCircle.prototype, "sub", 2);
+], LibCheckbox.prototype, "sublabel", 2);
 __decorateClass([
   property({ type: String })
-], LibProgressCircle.prototype, "icon", 2);
-LibProgressCircle = __decorateClass([
-  customElement("lib-progress-circle")
-], LibProgressCircle);
+], LibCheckbox.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCheckbox.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCheckbox.prototype, "variant", 2);
+LibCheckbox = __decorateClass([
+  customElement("lib-checkbox")
+], LibCheckbox);
 export {
-  LibProgressCircle
+  LibCheckbox
 };
 //# sourceMappingURL=index16.js.map

package/dist/index16.js.map

@@ -1 +1 @@
-{"version":3,"file":"index16.js","sources":["../src/components/atoms/progress-circle/lib-progress-circle.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibProgressCircleSize, LibProgressCircleVariant } from './lib-progress-circle.component.html';\nimport { progressCircleTemplate } from './lib-progress-circle.component.html';\nimport progressCss from './lib-progress-circle.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-progress-circle\n *\n * Indicador de progreso circular basado en SVG stroke-dashoffset.\n * Cinco tamaños semánticos, cuatro colores, variante indeterminate.\n *\n * @example — uso básico\n * <lib-progress-circle value=\"72\"></lib-progress-circle>\n *\n * @example — kaki con subtítulo\n * <lib-progress-circle value=\"61\" variant=\"kaki\" sub=\"61 GB\"></lib-progress-circle>\n *\n * @example — celadon completado con icono\n * <lib-progress-circle value=\"100\" variant=\"celadon\" icon=\"check\" size=\"lg\"></lib-progress-circle>\n *\n * @example — indeterminate\n * <lib-progress-circle indeterminate variant=\"kaki\"></lib-progress-circle>\n *\n * @example — sin label (bare)\n * <lib-progress-circle value=\"38\" size=\"xs\" bare></lib-progress-circle>\n */\n@customElement('lib-progress-circle')\nexport class LibProgressCircle extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(progressCss)}`,\n  ];\n\n  /** Valor actual */\n  @property({ type: Number })\n  value = 0;\n\n  /** Valor máximo */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * Tamaño semántico del círculo.\n   * Mapea a dimensiones fijas con strokeWidth proporcional:\n   * - xs : 40px  · stroke 3  (sin label)\n   * - sm : 64px  · stroke 4\n   * - md : 96px  · stroke 6  (default)\n   * - lg : 128px · stroke 7\n   * - xl : 176px · stroke 6\n   */\n  @property({ type: String, reflect: true })\n  size: LibProgressCircleSize = 'md';\n\n  /**\n   * Sobreescribe el strokeWidth por defecto del tamaño.\n   * null → usa el valor canónico del tamaño seleccionado.\n   */\n  @property({ type: Number, attribute: 'stroke-width' })\n  strokeWidth: number | null = null;\n\n  /**\n   * Paleta de color del arco.\n   * El track toma automáticamente el tono -100 de cada variante.\n   * - default : washi-900 (tinta)\n   * - kaki    : persimmon orgánico\n   * - celadon : jade sereno\n   * - error   : estado crítico\n   */\n  @property({ type: String, reflect: true })\n  variant: LibProgressCircleVariant = 'default';\n\n  /**\n   * Modo de carga de duración desconocida.\n   * El arco es un segmento corto que rota continuamente.\n   * Ignora `value`, `bare`, `sub` e `icon`.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /** Oculta el label central (solo muestra el arco) */\n  @property({ type: Boolean, reflect: true })\n  bare = false;\n\n  /** Subtítulo bajo el valor numérico. Oculto en xs. */\n  @property({ type: String })\n  sub = '';\n\n  /**\n   * Icono SVG en el centro en lugar del texto numérico.\n   * - 'check' : polyline checkmark en color de la variante\n   * - null    : muestra el valor (default)\n   */\n  @property({ type: String })\n  icon: 'check' | null = null;\n\n  override render(): TemplateResult {\n    return progressCircleTemplate({\n      value:         this.value,\n      max:           this.max,\n      size:          this.size,\n      strokeWidth:   this.strokeWidth,\n      variant:       this.variant,\n      indeterminate: this.indeterminate,\n      bare:          this.bare,\n      sub:           this.sub,\n      icon:          this.icon,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-progress-circle': LibProgressCircle;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6BO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAIR,SAAA,MAAM;AAYN,SAAA,OAA8B;AAO9B,SAAA,cAA6B;AAW7B,SAAA,UAAoC;AAQpC,SAAA,gBAAgB;AAIhB,SAAA,OAAO;AAIP,SAAA,MAAM;AAQN,SAAA,OAAuB;AAAA,EAAA;AAAA,EAEd,SAAyB;AAChC,WAAO,uBAAuB;AAAA,MAC5B,OAAe,KAAK;AAAA,MACpB,KAAe,KAAK;AAAA,MACpB,MAAe,KAAK;AAAA,MACpB,aAAe,KAAK;AAAA,MACpB,SAAe,KAAK;AAAA,MACpB,eAAe,KAAK;AAAA,MACpB,MAAe,KAAK;AAAA,MACpB,KAAe,KAAK;AAAA,MACpB,MAAe,KAAK;AAAA,IAAA,CACrB;AAAA,EACH;AACF;AAjFa,kBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,kBAQX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,kBAYX,WAAA,OAAA,CAAA;AAYA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAvB9B,kBAwBX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GA9B1C,kBA+BX,WAAA,eAAA,CAAA;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAzC9B,kBA0CX,WAAA,WAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAjD/B,kBAkDX,WAAA,iBAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArD/B,kBAsDX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzDf,kBA0DX,WAAA,OAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjEf,kBAkEX,WAAA,QAAA,CAAA;AAlEW,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
+{"version":3,"file":"index16.js","sources":["../src/components/atoms/checkbox/lib-checkbox.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibCheckboxSize, LibCheckboxVariant } from './lib-checkbox.html';\nimport { checkboxTemplate } from './lib-checkbox.html';\nimport checkboxCss from './lib-checkbox.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport interface CheckboxChangeDetail {\n  checked: boolean;\n  value: string;\n}\n\n/**\n * @element lib-checkbox\n *\n * Control de seleccion multiple con soporte para indeterminate.\n *\n * @slot - Contenido de label alternativo (cuando no se usa prop label)\n *\n * @fires change - Emitido al cambiar el estado.\n *   detail: { checked: boolean, value: string }\n *\n * @example\n * <lib-checkbox label=\"Aceptar terminos\" value=\"terms\"></lib-checkbox>\n * <lib-checkbox label=\"Seleccion parcial\" indeterminate></lib-checkbox>\n * <lib-checkbox label=\"Acento kaki\" variant=\"kaki\" checked></lib-checkbox>\n */\n@customElement('lib-checkbox')\nexport class LibCheckbox extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(checkboxCss)}`,\n  ];\n\n  /** Estado marcado */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Estado indeterminate — seleccion parcial de grupo.\n   * Muestra un dash en lugar del check.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /** Texto principal del label */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario bajo el label */\n  @property({ type: String })\n  sublabel = '';\n\n  /** Valor enviado en el evento change */\n  @property({ type: String })\n  value = '';\n\n  /** Tamano del checkbox */\n  @property({ type: String, reflect: true })\n  size: LibCheckboxSize = 'md';\n\n  /** Variante de color */\n  @property({ type: String, reflect: true })\n  variant: LibCheckboxVariant = 'default';\n\n  private _handleChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.indeterminate = false; // el click resuelve el estado indeterminate\n\n    this.dispatchEvent(\n      new CustomEvent<CheckboxChangeDetail>('change', {\n        detail: { checked: this.checked, value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return checkboxTemplate({\n      checked: this.checked,\n      disabled: this.disabled,\n      indeterminate: this.indeterminate,\n      label: this.label,\n      sublabel: this.sublabel,\n      value: this.value,\n      size: this.size,\n      variant: this.variant,\n      onChange: this._handleChange.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-checkbox': LibCheckbox;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4BO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,UAAU;AAIV,SAAA,WAAW;AAOX,SAAA,gBAAgB;AAIhB,SAAA,QAAQ;AAIR,SAAA,WAAW;AAIX,SAAA,QAAQ;AAIR,SAAA,OAAwB;AAIxB,SAAA,UAA8B;AAAA,EAAA;AAAA,EAEtB,cAAc,GAAgB;AACpC,UAAM,QAAQ,EAAE;AAChB,SAAK,UAAU,MAAM;AACrB,SAAK,gBAAgB;AAErB,SAAK;AAAA,MACH,IAAI,YAAkC,UAAU;AAAA,QAC9C,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,MAAA;AAAA,QAC7C,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,WAAO,iBAAiB;AAAA,MACtB,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,eAAe,KAAK;AAAA,MACpB,OAAO,KAAK;AAAA,MACZ,UAAU,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,SAAS,KAAK;AAAA,MACd,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AApEa,YACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,YAQX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAX/B,YAYX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,YAmBX,WAAA,iBAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBf,YAuBX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Bf,YA2BX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Bf,YA+BX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,YAmCX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtC9B,YAuCX,WAAA,WAAA,CAAA;AAvCW,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/index17.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { badgeTemplate } from "./index222.js";
-import badgeCss from "./index223.js";
+import "./index25.js";
+import { closeButtonTemplate } from "./index292.js";
+import closeButtonCss from "./index293.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,47 +14,62 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibBadge = class extends LitElement {
+let LibCloseButton = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "default";
+    this.variant = "ghost";
     this.size = "md";
-    this.dot = false;
-    this.pill = false;
+    this.icon = "x";
+    this.disabled = false;
+    this.ariaLabel = "Cerrar";
+  }
+  _handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("lib-close", {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
-    return badgeTemplate({
+    return closeButtonTemplate({
       variant: this.variant,
       size: this.size,
-      dot: this.dot,
-      pill: this.pill
+      icon: this.icon,
+      disabled: this.disabled,
+      ariaLabel: this.ariaLabel ?? "Cerrar",
+      onClick: this._handleClick.bind(this)
     });
   }
 };
-LibBadge.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(badgeCss)}
-    `
+LibCloseButton.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(closeButtonCss)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibBadge.prototype, "variant", 2);
+], LibCloseButton.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibBadge.prototype, "size", 2);
+], LibCloseButton.prototype, "size", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibBadge.prototype, "dot", 2);
+  property({ type: String })
+], LibCloseButton.prototype, "icon", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibBadge.prototype, "pill", 2);
-LibBadge = __decorateClass([
-  customElement("lib-badge")
-], LibBadge);
+], LibCloseButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibCloseButton.prototype, "ariaLabel", 2);
+LibCloseButton = __decorateClass([
+  customElement("lib-close-button")
+], LibCloseButton);
 export {
-  LibBadge
+  LibCloseButton
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/atoms/badge/lib-badge.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibBadgeVariant, LibBadgeSize } from './lib-badge.html';\nimport { badgeTemplate } from './lib-badge.html';\nimport badgeCss from './lib-badge.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-badge\n *\n * Indicador visual compacto para estado, notificaciones o etiquetas.\n *\n * @slot - Contenido del badge (texto o icono)\n * @csspart badge - El elemento <span> raíz del badge\n *\n * @example\n * <lib-badge variant=\"success\" dot>Activo</lib-badge>\n * <lib-badge variant=\"error\">Error</lib-badge>\n * <lib-badge variant=\"accent\" pill>Nuevo</lib-badge>\n */\n@customElement('lib-badge')\nexport class LibBadge extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(badgeCss)}\n    `,\n  ];\n\n  /** Variante visual del badge */\n  @property({ type: String, reflect: true })\n  variant: LibBadgeVariant = 'default';\n\n  /** Tamaño del badge */\n  @property({ type: String, reflect: true })\n  size: LibBadgeSize = 'md';\n\n  /** Muestra un punto indicador de color a la izquierda del texto */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  /** Aplica border-radius completo (estilo píldora) */\n  @property({ type: Boolean, reflect: true })\n  pill = false;\n\n  override render(): TemplateResult {\n    return badgeTemplate({\n      variant: this.variant,\n      size: this.size,\n      dot: this.dot,\n      pill: this.pill,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-badge': LibBadge;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAYL,SAAA,UAA2B;AAI3B,SAAA,OAAqB;AAIrB,SAAA,MAAM;AAIN,SAAA,OAAO;AAAA,EAAA;AAAA,EAEE,SAAyB;AAChC,WAAO,cAAc;AAAA,MACnB,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,KAAK,KAAK;AAAA,MACV,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA,EACH;AACF;AAlCa,SACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,QAAQ,CAAC;AAAA;AAEzB;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAX9B,SAYX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,SAgBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,SAoBX,WAAA,OAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAvB/B,SAwBX,WAAA,QAAA,CAAA;AAxBW,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}
+{"version":3,"file":"index17.js","sources":["../src/components/atoms/close-button/lib-close-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../../atoms/icon/lib-icon.component';\nimport type { LibCloseVariant, LibCloseSize, LibCloseIcon } from './lib-close-button.html';\nimport { closeButtonTemplate } from './lib-close-button.html';\nimport closeButtonCss from './lib-close-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n\n/**\n * @element lib-close-button\n *\n * Boton de cierre reutilizable. Emite `lib-close` al hacer click.\n * Usado en chips, toasts, modales, alert banners y superficies oscuras.\n *\n * @fires lib-close - Emitido al hacer click. Sin detail.\n *\n * @example\n * <lib-close-button variant=\"ghost\" size=\"md\"></lib-close-button>\n * <lib-close-button variant=\"subtle\" size=\"lg\"></lib-close-button>\n * <lib-close-button variant=\"on-dark\" size=\"md\"></lib-close-button>\n */\n@customElement('lib-close-button')\nexport class LibCloseButton extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(closeButtonCss)}`,\n  ];\n\n  /** Variante visual */\n  @property({ type: String, reflect: true })\n  variant: LibCloseVariant = 'ghost';\n\n  /** Tamaño: sm (24px) · md (32px) · lg (40px) · xl (48px) */\n  @property({ type: String, reflect: true })\n  size: LibCloseSize = 'md';\n\n  /**\n   * Icono Phosphor a mostrar.\n   * x → simple · x-circle → con circulo · x-square → con cuadrado\n   */\n  @property({ type: String })\n  icon: LibCloseIcon = 'x';\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Texto accesible del boton */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = 'Cerrar';\n\n  private _handleClick(e: Event): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('lib-close', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return closeButtonTemplate({\n      variant: this.variant,\n      size: this.size,\n      icon: this.icon,\n      disabled: this.disabled,\n      ariaLabel: this.ariaLabel ?? 'Cerrar',\n      onClick: this._handleClick.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-close-button': LibCloseButton;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,UAA2B;AAI3B,SAAA,OAAqB;AAOrB,SAAA,OAAqB;AAIrB,SAAA,WAAW;AAIX,SAAS,YAA2B;AAAA,EAAA;AAAA,EAE5B,aAAa,GAAgB;AACnC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF,QAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,WAAO,oBAAoB;AAAA,MACzB,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,WAAW,KAAK,aAAa;AAAA,MAC7B,SAAS,KAAK,aAAa,KAAK,IAAI;AAAA,IAAA,CACrC;AAAA,EACH;AACF;AAtDa,eACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,cAAc,CAAC;AACjC;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,eAQX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAX9B,eAYX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBf,eAmBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtB/B,eAuBX,WAAA,YAAA,CAAA;AAIS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA1BxC,eA2BF,WAAA,aAAA,CAAA;AA3BE,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

package/dist/index18.js

@@ -1,8 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { generateUniqueId } from "./index213.js";
-import { switchTemplate } from "./index224.js";
-import switchCss from "./index225.js";
+import { property, state, customElement } from "lit/decorators.js";
+import { codeBlockTemplate } from "./index294.js";
+import codeBlockCss from "./index295.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,65 +13,93 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibSwitch = class extends LitElement {
+let LibCodeBlock = class extends LitElement {
   constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
+    super(...arguments);
+    this.code = "";
+    this.language = "bash";
+    this.filename = "";
+    this.copyable = true;
     this.variant = "default";
-    this.size = "md";
-    this.label = "";
-    this.sub = "";
-    this._switchId = generateUniqueId("lib-switch-");
+    this._copied = false;
+    this._copyTimeout = null;
   }
-  render() {
-    return switchTemplate({
-      switchId: this._switchId,
-      checked: this.checked,
-      disabled: this.disabled,
-      label: this.label,
-      sub: this.sub,
-      handleChange: this._handleChange.bind(this)
+  _handleCopy() {
+    const content = this.code || this._getSlotText();
+    if (!content) return;
+    navigator.clipboard.writeText(content).then(() => {
+      this._copied = true;
+      if (this._copyTimeout) clearTimeout(this._copyTimeout);
+      this._copyTimeout = setTimeout(() => {
+        this._copied = false;
+      }, 2e3);
+    }).catch(() => {
+      const ta = document.createElement("textarea");
+      ta.value = content;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      this._copied = true;
+      if (this._copyTimeout) clearTimeout(this._copyTimeout);
+      this._copyTimeout = setTimeout(() => {
+        this._copied = false;
+      }, 2e3);
     });
   }
-  _handleChange(e) {
-    const input = e.target;
-    this.checked = input.checked;
-    this.dispatchEvent(
-      new CustomEvent("ui-lib-change", {
-        detail: { checked: this.checked },
-        bubbles: true,
-        composed: true
-      })
-    );
+  _getSlotText() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    if (!slot) return "";
+    return slot.assignedNodes({ flatten: true }).map((node) => node.textContent ?? "").join("");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._copyTimeout) clearTimeout(this._copyTimeout);
+  }
+  render() {
+    return codeBlockTemplate({
+      code: this.code,
+      language: this.language,
+      filename: this.filename,
+      copyable: this.copyable,
+      copied: this._copied,
+      onCopy: () => this._handleCopy()
+    });
   }
 };
-LibSwitch.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(switchCss)}`
+LibCodeBlock.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(codeBlockCss)}
+    `
 ];
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSwitch.prototype, "checked", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSwitch.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibSwitch.prototype, "variant", 2);
+  property({ type: String })
+], LibCodeBlock.prototype, "code", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibSwitch.prototype, "size", 2);
+], LibCodeBlock.prototype, "language", 2);
 __decorateClass([
   property({ type: String })
-], LibSwitch.prototype, "label", 2);
+], LibCodeBlock.prototype, "filename", 2);
 __decorateClass([
-  property({ type: String })
-], LibSwitch.prototype, "sub", 2);
-LibSwitch = __decorateClass([
-  customElement("lib-switch")
-], LibSwitch);
+  property({ type: Boolean, reflect: true })
+], LibCodeBlock.prototype, "copyable", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCodeBlock.prototype, "variant", 2);
+__decorateClass([
+  state()
+], LibCodeBlock.prototype, "_copied", 2);
+LibCodeBlock = __decorateClass([
+  customElement("lib-code-block")
+], LibCodeBlock);
 export {
-  LibSwitch
+  LibCodeBlock
 };
 //# sourceMappingURL=index18.js.map