@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index199.js.map

@@ -1 +1 @@
-{"version":3,"file":"index199.js","sources":["../src/components/atoms/avatar/lib-avatar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibAvatarSize  = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type LibAvatarShape = 'circle' | 'squircle' | 'square';\nexport type LibAvatarColor = 'washi' | 'kaki' | 'celadon' | 'dark';\n\nexport interface AvatarTemplateProps {\n  src: string;\n  name: string;\n  size: LibAvatarSize;\n  shape: LibAvatarShape;\n  color: LibAvatarColor;\n  showImage: boolean;\n  initials: string;\n  onError: () => void;\n}\n\n/** SVG de usuario por defecto cuando no hay imagen ni iniciales */\nconst defaultIconSvg = html`\n  <svg\n    class=\"avatar__icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n    <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n  </svg>\n`;\n\n/**\n * Plantilla para lib-avatar.\n *\n * Jerarquia de contenido:\n *  1. src + sin error -> imagen\n *  2. name            -> iniciales\n *  3. slot default    -> icono custom o SVG fallback\n *\n * avatar__status vive fuera del overflow:hidden para que\n * lib-status-dot no quede recortado.\n */\nexport function avatarTemplate(props: AvatarTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"avatar__wrapper\"\n      role=\"img\"\n      aria-label=\"${props.name || 'avatar'}\"\n    >\n      <div class=\"avatar__face\">\n\n        ${props.showImage\n          ? html`<img\n              class=\"avatar__img\"\n              src=\"${props.src}\"\n              alt=\"${props.name}\"\n              @error=${props.onError}\n            />`\n          : nothing}\n\n        ${!props.showImage && props.initials\n          ? html`<span class=\"avatar__initials\">${props.initials}</span>`\n          : nothing}\n\n        ${!props.showImage && !props.initials\n          ? html`<slot>${defaultIconSvg}</slot>`\n          : nothing}\n\n      </div>\n\n      <div class=\"avatar__status\">\n        <slot name=\"status\"></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAkBA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BhB,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIW,MAAM,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIhC,MAAM,YACJ;AAAA;AAAA,qBAES,MAAM,GAAG;AAAA,qBACT,MAAM,IAAI;AAAA,uBACR,MAAM,OAAO;AAAA,kBAExB,OAAO;AAAA;AAAA,UAET,CAAC,MAAM,aAAa,MAAM,WACxB,sCAAsC,MAAM,QAAQ,YACpD,OAAO;AAAA;AAAA,UAET,CAAC,MAAM,aAAa,CAAC,MAAM,WACzB,aAAa,cAAc,YAC3B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB;"}
+{"version":3,"file":"index199.js","sources":["../src/components/molecules/checkbox-card/lib-checkbox-card.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibCheckboxCard } from './lib-checkbox-card.component';\n\n/* SVG checkmark compartido */\nconst checkSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 12 12\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>`;\n\nexport function checkboxCardTemplate(ctx: LibCheckboxCard): TemplateResult {\n  const checkClass = [\n    'cc-check',\n    ctx.inputType === 'radio' || ctx.checkShape === 'pill' ? 'cc-check-pill' : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <label\n      class=\"cc\"\n      part=\"label\"\n      @click=\"${(e: MouseEvent): void => ctx._handleClick(e)}\"\n    >\n      <!-- Input nativo — hermano directo de .cc-body para :checked ~ -->\n      <input\n        class=\"cc-input\"\n        part=\"input\"\n        .type=\"${ctx.inputType}\"\n        .name=\"${ctx.name}\"\n        .value=\"${ctx.value}\"\n        .checked=\"${ctx.checked}\"\n        ?disabled=\"${ctx.disabled}\"\n        @change=\"${(e: Event): void => ctx._handleChange(e)}\"\n      />\n\n      <div class=\"cc-body\" part=\"body\">\n\n        <!-- Checkmark -->\n        <div class=\"${checkClass}\" part=\"check\">${checkSvg}</div>\n\n        <!-- Slot: icono -->\n        <slot name=\"icon\">\n          ${ctx._hasSlot('icon') ? '' : ''}\n        </slot>\n\n        <!-- Slot: badge -->\n        <slot name=\"badge\"></slot>\n\n        <!-- Slot: título -->\n        <slot name=\"title\">\n          ${ctx.cardTitle\n            ? html`<div class=\"cc-title\" part=\"title\">${ctx.cardTitle}</div>`\n            : ''}\n        </slot>\n\n        <!-- Slot: descripción -->\n        <slot name=\"desc\">\n          ${ctx.desc\n            ? html`<div class=\"cc-desc\" part=\"desc\">${ctx.desc}</div>`\n            : ''}\n        </slot>\n\n        <!-- Slot: precio -->\n        <slot name=\"price\"></slot>\n\n        <!-- Slot: divider -->\n        <slot name=\"divider\"></slot>\n\n        <!-- Slot: features -->\n        <slot name=\"features\"></slot>\n\n        <!-- Slot: imagen -->\n        <slot name=\"image\"></slot>\n\n        <!-- Slot: contenido libre (default) -->\n        <slot></slot>\n\n        <!-- Ripple layer -->\n        <div class=\"cc-ripple\" part=\"ripple\"></div>\n\n      </div>\n    </label>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,WAA2B;AAAA;AAAA;AAAA;AAK1B,SAAS,qBAAqB,KAAsC;AACzE,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,IAAI,cAAc,WAAW,IAAI,eAAe,SAAS,kBAAkB;AAAA,EAAA,EAC3E,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,CAAC,MAAwB,IAAI,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM3C,IAAI,SAAS;AAAA,iBACb,IAAI,IAAI;AAAA,kBACP,IAAI,KAAK;AAAA,oBACP,IAAI,OAAO;AAAA,qBACV,IAAI,QAAQ;AAAA,mBACd,CAAC,MAAmB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMrC,UAAU,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA,YAI9C,IAAI,SAAS,MAAM,IAAI,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ9B,IAAI,YACF,0CAA0C,IAAI,SAAS,WACvD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKJ,IAAI,OACF,wCAAwC,IAAI,IAAI,WAChD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBhB;"}

package/dist/index20.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
+import { rendercontentPillar } from "./index298.js";
+import componentCss from "./index299.js";
 import sharedTokens from "./index196.js";
-import cardStyles from "./index228.js";
-import { cardTemplate } from "./index229.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,58 +13,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibCard = class extends LitElement {
+let LibContentPillar = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "default";
-    this.accentColor = void 0;
     this.kanji = "";
-    this.clickable = false;
+    this.label = "";
+    this.description = "";
+    this.surface = "dark";
   }
   render() {
-    return cardTemplate({
-      variant: this.variant,
-      accentColor: this.accentColor,
-      kanji: this.kanji,
-      clickable: this.clickable,
-      onClick: (e) => this._onClick(e)
-    });
-  }
-  _onClick(e) {
-    if (!this.clickable) return;
-    this.dispatchEvent(
-      new CustomEvent("ui-lib-card-click", {
-        detail: { variant: this.variant, kanji: this.kanji, originalEvent: e },
-        bubbles: true,
-        composed: true
-      })
-    );
+    return rendercontentPillar(this);
   }
 };
-LibCard.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(cardStyles)}
-    `
+LibContentPillar.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(componentCss)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibCard.prototype, "variant", 2);
+  property({ type: String })
+], LibContentPillar.prototype, "kanji", 2);
 __decorateClass([
-  property({ type: String, attribute: "accent-color" })
-], LibCard.prototype, "accentColor", 2);
+  property({ type: String })
+], LibContentPillar.prototype, "label", 2);
 __decorateClass([
   property({ type: String })
-], LibCard.prototype, "kanji", 2);
+], LibContentPillar.prototype, "description", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCard.prototype, "clickable", 2);
-LibCard = __decorateClass([
-  customElement("lib-card")
-], LibCard);
+  property({ type: String, reflect: true })
+], LibContentPillar.prototype, "surface", 2);
+LibContentPillar = __decorateClass([
+  customElement("lib-content-pillar")
+], LibContentPillar);
 export {
-  LibCard
+  LibContentPillar
 };
 //# sourceMappingURL=index20.js.map

package/dist/index20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index20.js","sources":["../src/components/atoms/card/lib-card.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport sharedTokens from \"../../../styles/shared/tokens.css?inline\";\nimport cardStyles from \"./lib-card.css?inline\";\nimport { cardTemplate } from \"./lib-card.html\";\nimport type { LibCardVariant } from \"./lib-card.types\";\n\nexport type { LibCardVariant } from \"./lib-card.types\";\n\n/**\n * @element lib-card\n *\n * @attr {'default'|'inverse'|'accent'|'featured'|'kintsugi'|'glitch'|'celadon'|'washi'|'brutal'} variant\n *   - default   → superficie elevada neutra\n *   - inverse   → fondo washi-900 oscuro\n *   - accent    → borde izquierdo de color (`accent-color`)\n *   - featured  → fondo kaki degradado, título grande — pensado para 2 columnas en grid\n *   - kintsugi  → seam de oro animado en borde superior + hilo kintsugi-border en borde\n *   - glitch    → estética terminal CRT, scanlines, fuente mono\n *   - celadon   → acento verde-gris japonés para estados de éxito / énfasis secundario\n *   - washi     → paleta neutra cálida, superficie washi-50/100\n *   - brutal    → superficie clara, borde sólido ink, --lib-shadow-brutal; hover hunde el elemento en su sombra\n *\n * @attr {string}  accent-color - Color del borde (solo variante `accent`).\n * @attr {string}  kanji        - Carácter kanji decorativo de fondo (ej: \"渋\", \"金\", \"間\").\n *\n * @attr {boolean} clickable    - Si está presente, la card emite `ui-lib-card-click` al hacer clic\n * @slot tag    - Etiqueta o metadata en el header.\n * @slot title  - Título principal de la card.\n * @slot        - Cuerpo de la card (default slot).\n * @slot footer - Acciones o información en el footer.\n * @fires ui-lib-card-click - { variant, kanji, originalEvent } — solo cuando `clickable` es true.\n */\n@customElement(\"lib-card\")\nexport class LibCard extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(cardStyles)}\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: LibCardVariant = \"default\";\n\n  @property({ type: String, attribute: \"accent-color\" })\n  accentColor: string | undefined = undefined;\n\n  /** Carácter kanji decorativo mostrado como marca de agua en la esquina superior derecha */\n  @property({ type: String })\n  kanji = \"\";\n\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  override render(): TemplateResult {\n    return cardTemplate({\n      variant: this.variant,\n      accentColor: this.accentColor,\n      kanji: this.kanji,\n      clickable: this.clickable,\n      onClick: (e: MouseEvent) => this._onClick(e),\n    });\n  }\n\n  _onClick(e: MouseEvent): void {\n    if (!this.clickable) return;\n    this.dispatchEvent(\n      new CustomEvent(\"ui-lib-card-click\", {\n        detail: { variant: this.variant, kanji: this.kanji, originalEvent: e },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"lib-card\": LibCard;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkCO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,UAA0B;AAG1B,SAAA,cAAkC;AAIlC,SAAA,QAAQ;AAGR,SAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAyB;AAChC,WAAO,aAAa;AAAA,MAClB,SAAS,KAAK;AAAA,MACd,aAAa,KAAK;AAAA,MAClB,OAAO,KAAK;AAAA,MACZ,WAAW,KAAK;AAAA,MAChB,SAAS,CAAC,MAAkB,KAAK,SAAS,CAAC;AAAA,IAAA,CAC5C;AAAA,EACH;AAAA,EAEA,SAAS,GAAqB;AAC5B,QAAI,CAAC,KAAK,UAAW;AACrB,SAAK;AAAA,MACH,IAAI,YAAY,qBAAqB;AAAA,QACnC,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,OAAO,eAAe,EAAA;AAAA,QACnE,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AA3Ca,QACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,UAAU,CAAC;AAAA;AAE3B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,QAWX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GAb1C,QAcX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjBf,QAkBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApB/B,QAqBX,WAAA,aAAA,CAAA;AArBW,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}
+{"version":3,"file":"index20.js","sources":["../src/components/atoms/content-pillar/content-pillar.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { rendercontentPillar } from './content-pillar.html';\nimport componentCss from './content-pillar.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-content-pillar>` — Pilar filosófico con kanji, label y descripción.\n *\n * Patrón recurrente del sistema Shibui: kanji decorativo a la izquierda +\n * etiqueta en DM Mono + cuerpo de texto en Shippori Mincho.\n *\n * @tag lib-content-pillar\n *\n * @attr {string}           kanji       - Carácter kanji decorativo (ej: \"侘\", \"金\", \"間\").\n * @attr {string}           label       - Etiqueta en mono uppercase (ej: \"Wabi · Imperfección\").\n * @attr {string}           description - Texto de descripción inline.\n * @attr {'dark'|'light'}   surface     - Superficie sobre la que se muestra. Default: `dark`.\n *\n * @slot - Descripción como rich content (alternativa al atributo `description`).\n *\n * @csspart pillar      - Wrapper flex externo.\n * @csspart kanji       - El carácter kanji.\n * @csspart body        - Columna derecha (label + descripción).\n * @csspart label       - La etiqueta mono.\n * @csspart description - El párrafo de descripción.\n *\n * @example\n * <lib-content-pillar\n *   kanji=\"金\"\n *   label=\"Kintsugi · Cicatrices de oro\"\n *   description=\"Reparar con oro en lugar de ocultar.\"\n * ></lib-content-pillar>\n *\n * <!-- Con rich content -->\n * <lib-content-pillar kanji=\"間\" label=\"Ma · El espacio\">\n *   El silencio entre notas. El espacio vacío <em>es</em> presencia.\n * </lib-content-pillar>\n */\n@customElement('lib-content-pillar')\nexport class LibContentPillar extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Carácter kanji decorativo */\n  @property({ type: String })\n  kanji = '';\n\n  /** Etiqueta en DM Mono uppercase */\n  @property({ type: String })\n  label = '';\n\n  /** Descripción inline (alternativa al slot) */\n  @property({ type: String })\n  description = '';\n\n  /** Superficie de fondo */\n  @property({ type: String, reflect: true })\n  surface: 'dark' | 'light' = 'dark';\n\n  protected override render(): TemplateResult {\n    return rendercontentPillar(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-content-pillar': LibContentPillar;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,QAAQ;AAIR,SAAA,QAAQ;AAIR,SAAA,cAAc;AAId,SAAA,UAA4B;AAAA,EAAA;AAAA,EAET,SAAyB;AAC1C,WAAO,oBAAoB,IAAI;AAAA,EACjC;AACF;AA1Ba,iBAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,iBASX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZf,iBAaX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,iBAiBX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,iBAqBX,WAAA,WAAA,CAAA;AArBW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}

package/dist/index200.js

@@ -1,5 +1,5 @@
-const avatarCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{--avatar-size: 40px;--avatar-initials-size: var(--text-xs);--avatar-icon-size: 18px}:host([size="xs"]){--avatar-size: 24px;--avatar-initials-size: 8px;--avatar-icon-size: 10px}:host([size="sm"]){--avatar-size: 32px;--avatar-initials-size: 10px;--avatar-icon-size: 14px}:host([size="md"]){--avatar-size: 40px;--avatar-initials-size: var(--text-xs);--avatar-icon-size: 18px}:host([size="lg"]){--avatar-size: 56px;--avatar-initials-size: var(--text-sm);--avatar-icon-size: 24px}:host([size="xl"]){--avatar-size: 72px;--avatar-initials-size: var(--text-base);--avatar-icon-size: 30px}:host([size="2xl"]){--avatar-size: 96px;--avatar-initials-size: var(--text-md);--avatar-icon-size: 40px}.avatar__wrapper{position:relative;display:inline-flex;width:var(--avatar-size);height:var(--avatar-size);flex-shrink:0}.avatar__face{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full);border:1px solid var(--color-washi-300);background:var(--color-washi-200);-webkit-user-select:none;user-select:none}:host([shape="squircle"]) .avatar__face{border-radius:30%}:host([shape="square"]) .avatar__face{border-radius:var(--radius-md)}.avatar__img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}.avatar__initials{font-family:var(--lib-font-mono);font-size:var(--avatar-initials-size);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;line-height:1;color:var(--color-washi-700)}.avatar__icon{width:var(--avatar-icon-size);height:var(--avatar-icon-size);display:block;flex-shrink:0;color:var(--color-washi-500)}.avatar__status{position:absolute;bottom:0;right:0;transform:translate(20%,20%);z-index:var(--z-raised);display:flex}:host([color="kaki"]) .avatar__face{background:var(--color-kaki-100);border-color:var(--color-kaki-200)}:host([color="kaki"]) .avatar__initials{color:var(--color-kaki-600)}:host([color="kaki"]) .avatar__icon{color:var(--color-kaki-500)}:host([color="celadon"]) .avatar__face{background:var(--color-celadon-100);border-color:var(--color-celadon-200)}:host([color="celadon"]) .avatar__initials{color:var(--color-celadon-600)}:host([color="celadon"]) .avatar__icon{color:var(--color-celadon-500)}:host([color="dark"]) .avatar__face{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([color="dark"]) .avatar__initials{color:var(--color-washi-300)}:host([color="dark"]) .avatar__icon{color:var(--color-washi-500)}}';
+const checkboxCardCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.cc-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc{display:block;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.cc:focus-within .cc-body{outline:2px solid var(--color-kaki-400);outline-offset:2px}.cc-body{position:relative;border:1px solid var(--border-subtle);background:var(--bg-elevated);padding:var(--lib-space-lg);overflow:hidden;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.cc:hover .cc-body{border-color:var(--border-default);background:var(--bg-surface)}.cc:active .cc-body{transform:scale(.985)}.cc-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgb(255,255,255,.4) 0%,transparent 50%);opacity:0;pointer-events:none;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:before{opacity:1}.cc-body:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-kaki-400),transparent);opacity:0;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:after{opacity:1}.cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:var(--color-kaki-50)}.cc-check{position:absolute;top:var(--lib-space-md);right:var(--lib-space-md);width:18px;height:18px;border:1px solid var(--border-default);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2;pointer-events:none;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.cc-check svg{width:10px;height:10px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.5);transition:opacity var(--duration-base) var(--ease-bounce),transform var(--duration-base) var(--ease-bounce)}.cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}.cc-input:checked~.cc-body .cc-check svg{opacity:1;transform:scale(1)}.cc-check-pill{border-radius:999px}.cc-icon{margin-bottom:var(--lib-space-md);display:flex;align-items:center}.cc-icon svg,.cc-icon img{width:28px;height:28px;color:var(--text-muted);transition:color var(--duration-base)}.cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-500)}.cc-title{font-family:var(--lib-font-display);font-size:1.2rem;font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-primary);line-height:1.2;margin-bottom:var(--lib-space-xs);padding-right:var(--lib-space-xl)}.cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-600)}.cc-desc{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);line-height:1.7}.cc-input:checked~.cc-body .cc-desc{color:var(--text-secondary)}.cc-badge{display:inline-block;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--border-subtle);color:var(--text-muted);margin-bottom:var(--lib-space-sm);transition:border-color var(--duration-base),color var(--duration-base)}.cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e4d;color:var(--color-kaki-500)}.cc-price{font-family:var(--lib-font-display);font-size:2rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1;color:var(--text-primary);margin-top:var(--lib-space-md)}.cc-price sup{font-size:.9rem;vertical-align:super;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.06em}.cc-price sub{font-size:.65rem;vertical-align:baseline;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.08em}.cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-600)}.cc-divider{height:1px;background:var(--border-subtle);margin:var(--lib-space-md) 0;transition:background var(--duration-base)}.cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}.cc-features{list-style:none;display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cc-features li{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);display:flex;align-items:center;gap:var(--lib-space-sm)}.cc-features li:before{content:"";width:12px;height:1px;background:var(--border-default);flex-shrink:0;transition:background var(--duration-base),width var(--duration-base)}.cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400);width:14px}.cc-input:checked~.cc-body .cc-features li{color:var(--text-primary)}.cc-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.cc-ripple-dot{position:absolute;width:4px;height:4px;background:var(--color-kaki-400);border-radius:50%;transform:scale(0);opacity:.18;animation:cc-ripple .5s ease-out forwards}@keyframes cc-ripple{to{transform:scale(80);opacity:0}}:host([layout="horizontal"]) .cc-body{display:flex;align-items:center;gap:var(--lib-space-lg);padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="horizontal"]) .cc-icon{margin-bottom:0;flex-shrink:0}:host([layout="horizontal"]) .cc-content{flex:1;min-width:0}:host([layout="horizontal"]) .cc-title{margin-bottom:2px;font-size:1rem;padding-right:var(--lib-space-lg)}:host([layout="horizontal"]) .cc-check{top:50%;right:var(--lib-space-md);transform:translateY(-50%)}:host([layout="compact"]) .cc-body{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="compact"]) .cc-title{font-size:1rem}:host([color="celadon"]) .cc-input:checked~.cc-body{border-color:var(--color-celadon-500);background:var(--color-celadon-50)}:host([color="celadon"]) .cc-input:checked~.cc-body:after{background:linear-gradient(90deg,transparent,var(--color-celadon-400),transparent)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-celadon-500);background:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-title{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-badge{border-color:#3571644d;color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-celadon-400)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-divider{background:#35716433}:host([color="celadon"]) .cc-ripple-dot{background:var(--color-celadon-400)}:host([color="celadon"]) .cc:focus-within .cc-body{outline-color:var(--color-celadon-400)}:host([input-type="radio"]) .cc-check{border-radius:50%}:host([input-type="radio"]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([dark]) .cc-body{background:#ffffff0a;border-color:#ffffff14}:host([dark]) .cc:hover .cc-body{border-color:#ffffff26;background:#ffffff0f}:host([dark]) .cc-check{background:#ffffff0f;border-color:#ffffff24}:host([dark]) .cc-title{color:#faf7f4bf}:host([dark]) .cc-desc{color:#faf7f447}:host([dark]) .cc-badge{border-color:#ffffff1a;color:#faf7f44d}:host([dark]) .cc-divider{background:#ffffff14}:host([dark]) .cc-features li{color:#faf7f44d}:host([dark]) .cc-features li:before{background:#ffffff26}:host([dark]) .cc-price{color:#faf7f4bf}:host([dark]) .cc-price sup,:host([dark]) .cc-price sub{color:#faf7f44d}:host([dark]) .cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:#b85a1e14}:host([dark]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}:host([dark]) .cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-desc{color:#faf7f466}:host([dark]) .cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e59;color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}:host([dark]) .cc-input:checked~.cc-body .cc-features li{color:#faf7f48c}:host([dark]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-400)}:host([disabled]) .cc{pointer-events:none;opacity:.4}:host([disabled]) .cc-body{cursor:not-allowed}:host([error]) .cc-body{border-color:#c0392b66;background:#c0392b08}:host([error]) .cc:hover .cc-body{border-color:var(--color-error)}.cc-img-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(.4);transition:filter var(--duration-slow)}.cc-input:checked~.cc-body .cc-img-thumb{filter:grayscale(0)}.cc-img-content{padding:var(--lib-space-md) var(--lib-space-lg) var(--lib-space-lg)}:host([image]) .cc-body{padding:0}:host([image]) .cc-check{top:var(--lib-space-sm);right:var(--lib-space-sm);background:#ffffffd9}:host([image]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}}';
 export {
-  avatarCss as default
+  checkboxCardCss as default
 };
 //# sourceMappingURL=index200.js.map

package/dist/index201.js

@@ -1,19 +1,60 @@
 import { html } from "lit";
-import { styleMap as o } from "./index241.js";
-function skeletonTemplate(props) {
-  const inlineStyles = {};
-  if (props.width) inlineStyles["width"] = props.width;
-  if (props.height) inlineStyles["height"] = props.height;
+const removeSvg = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
+  </svg>`;
+function staticChip() {
   return html`
-    <div
-      class="sk"
-      style=${o(inlineStyles)}
-      aria-hidden="true"
-      role="presentation"
-    ></div>
-  `;
+    <span class="chip" part="chip" role="note" tabindex="-1">
+      <slot name="icon"></slot>
+      <slot></slot>
+    </span>`;
+}
+function toggleChip(ctx) {
+  return html`
+    <button
+      class="chip-toggle"
+      part="chip"
+      role="checkbox"
+      aria-checked="${ctx.selected}"
+      aria-label="${ctx.ariaLabel}"
+      @click="${() => ctx._handleToggle()}"
+      @keydown="${(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      ctx._handleToggle();
+    }
+  }}"
+    >
+      <slot name="icon"></slot>
+      <slot></slot>
+    </button>`;
+}
+function inputChip(ctx) {
+  return html`
+    <span class="chip-input" part="chip">
+      <slot name="avatar"></slot>
+      <slot name="icon"></slot>
+      <slot></slot>
+      <button
+        class="chip-remove"
+        part="remove"
+        type="button"
+        aria-label="Eliminar ${ctx.ariaLabel || ""}"
+        @click="${(e) => ctx._handleRemove(e)}"
+      >
+        ${removeSvg}
+      </button>
+    </span>`;
+}
+function chipTemplate(ctx) {
+  if (ctx.kind === "toggle") return toggleChip(ctx);
+  if (ctx.kind === "input") return inputChip(ctx);
+  return staticChip(
+    /*ctx*/
+  );
 }
 export {
-  skeletonTemplate
+  chipTemplate
 };
 //# sourceMappingURL=index201.js.map

package/dist/index201.js.map

@@ -1 +1 @@
-{"version":3,"file":"index201.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;"}
+{"version":3,"file":"index201.js","sources":["../src/components/molecules/chip/lib-chip.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibChip } from './lib-chip.component';\n\n/* SVG × para el botón de eliminar */\nconst removeSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/>\n  </svg>`;\n\n/* ── Familia STATIC ── */\nfunction staticChip(/*ctx: LibChip*/): TemplateResult {\n  return html`\n    <span class=\"chip\" part=\"chip\" role=\"note\" tabindex=\"-1\">\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </span>`;\n}\n\n/* ── Familia TOGGLE ── */\nfunction toggleChip(ctx: LibChip): TemplateResult {\n  return html`\n    <button\n      class=\"chip-toggle\"\n      part=\"chip\"\n      role=\"checkbox\"\n      aria-checked=\"${ctx.selected}\"\n      aria-label=\"${ctx.ariaLabel}\"\n      @click=\"${(): void => ctx._handleToggle()}\"\n      @keydown=\"${(e: KeyboardEvent): void => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          ctx._handleToggle();\n        }\n      }}\"\n    >\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </button>`;\n}\n\n/* ── Familia INPUT (removable) ── */\nfunction inputChip(ctx: LibChip): TemplateResult {\n  return html`\n    <span class=\"chip-input\" part=\"chip\">\n      <slot name=\"avatar\"></slot>\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n      <button\n        class=\"chip-remove\"\n        part=\"remove\"\n        type=\"button\"\n        aria-label=\"Eliminar ${ctx.ariaLabel || ''}\"\n        @click=\"${(e: MouseEvent): void => ctx._handleRemove(e)}\"\n      >\n        ${removeSvg}\n      </button>\n    </span>`;\n}\n\nexport function chipTemplate(ctx: LibChip): TemplateResult {\n  if (ctx.kind === 'toggle') return toggleChip(ctx);\n  if (ctx.kind === 'input')  return inputChip(ctx);\n  return staticChip(/*ctx*/);\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAMlC,SAAS,aAA6C;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAGA,SAAS,WAAW,KAA8B;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKa,IAAI,QAAQ;AAAA,oBACd,IAAI,SAAS;AAAA,gBACjB,MAAY,IAAI,eAAe;AAAA,kBAC7B,CAAC,MAA2B;AACtC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,UAAI,cAAA;AAAA,IACN;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAKP;AAGA,SAAS,UAAU,KAA8B;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BASsB,IAAI,aAAa,EAAE;AAAA,kBAChC,CAAC,MAAwB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA,UAErD,SAAS;AAAA;AAAA;AAGnB;AAEO,SAAS,aAAa,KAA8B;AACzD,MAAI,IAAI,SAAS,SAAU,QAAO,WAAW,GAAG;AAChD,MAAI,IAAI,SAAS,QAAU,QAAO,UAAU,GAAG;AAC/C,SAAO;AAAA;AAAA,EAAA;AACT;"}

package/dist/index202.js

@@ -1,5 +1,5 @@
-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)}}}';
+const chipCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.chip,.chip-toggle,.chip-input{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:9999px;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast)}.chip{padding:4px var(--lib-space-sm);background:var(--color-washi-100);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:default}.chip-toggle{padding:5px var(--lib-space-md);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);cursor:pointer;position:relative;overflow:hidden}.chip-toggle:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--bg-surface)}.chip-toggle:active{transform:scale(.96)}.chip-toggle:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}:host([selected]) .chip-toggle{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:var(--shadow-sm)}.chip-input{padding:4px 4px 4px var(--lib-space-sm);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);gap:var(--lib-space-sm)}.chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9999px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;padding:0;flex-shrink:0;transition:background var(--duration-fast),color var(--duration-fast)}.chip-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.chip-remove svg{width:10px;height:10px}.chip-input.is-entering{animation:chip-enter .25s var(--ease-bounce)}@keyframes chip-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.chip-input.is-removing{animation:chip-remove-anim .2s var(--ease-out) forwards}@keyframes chip-remove-anim{to{opacity:0;transform:scale(.8);max-width:0;padding:0;margin:0;border-width:0}}:host([size="xs"]) .chip{font-size:9px;padding:2px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-toggle{font-size:9px;padding:3px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-input{font-size:9px;padding:2px 2px 2px var(--lib-space-sm)}:host([size="xs"]) .chip-remove{width:14px;height:14px;font-size:10px}:host([size="xs"]) .chip-avatar{width:14px;height:14px;font-size:7px}:host([size="sm"]) .chip{font-size:10px;padding:3px var(--lib-space-sm)}:host([size="sm"]) .chip-toggle{font-size:10px;padding:4px var(--lib-space-sm)}:host([size="sm"]) .chip-input{font-size:10px;padding:3px 3px 3px var(--lib-space-sm)}:host([size="lg"]) .chip{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-toggle{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-input{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .chip-remove{width:22px;height:22px;font-size:14px}:host([size="lg"]) .chip-avatar{width:22px;height:22px;font-size:9px}:host([color="kaki"]) .chip{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:not(.chip-toggle-selected){background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:hover:not([selected]){border-color:var(--color-kaki-400)}:host([color="kaki"][selected]) .chip-toggle{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([color="kaki"]) .chip-input{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-remove:hover{background:var(--color-kaki-100);color:var(--color-kaki-600)}:host([color="celadon"]) .chip{background:var(--color-celadon-100);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-toggle{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"][selected]) .chip-toggle{background:var(--color-celadon-500);border-color:var(--color-celadon-500);color:#fff}:host([color="celadon"]) .chip-input{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-remove:hover{background:var(--color-celadon-100);color:var(--color-celadon-600)}:host([color="error"]) .chip,:host([color="error"]) .chip-input{background:var(--color-error-light);color:var(--color-error);border-color:var(--color-error-light)}:host([color="error"]) .chip-remove:hover{background:#ebc5bf;color:var(--color-error)}:host([color="info"]) .chip{background:var(--color-info-light, #D6E8F5);color:var(--color-info, #1A4A6E);border-color:var(--color-info-light, #D6E8F5)}:host([color="dark"]) .chip{background:var(--color-washi-900);color:var(--color-washi-300);border-color:var(--color-washi-800)}:host([color="dark"]) .chip-toggle{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-toggle:hover{border-color:var(--color-washi-500);color:var(--color-washi-100)}:host([color="dark"][selected]) .chip-toggle{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([color="dark"]) .chip-input{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-remove:hover{background:var(--color-washi-700);color:var(--color-washi-100)}:host([dot]) .chip:before,:host([dot]) .chip-toggle:before,:host([dot]) .chip-input:before{content:"";width:6px;height:6px;border-radius:9999px;background:currentcolor;flex-shrink:0;opacity:.7}.chip-avatar{width:18px;height:18px;border-radius:9999px;object-fit:cover;flex-shrink:0;background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--lib-font-mono);color:var(--text-secondary);overflow:hidden}.chip-icon{font-size:13px;display:inline-flex;align-items:center;flex-shrink:0;opacity:.7}.chip-icon svg{width:1em;height:1em}}';
 export {
-  skeletonCss as default
+  chipCss as default
 };
 //# sourceMappingURL=index202.js.map

package/dist/index203.js

@@ -1,5 +1,5 @@
-const textListCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.lst{list-style:none;display:flex;flex-direction:column;gap:var(--lib-space-sm)}.lst-item{display:flex;align-items:baseline;gap:var(--lib-space-sm);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);padding:var(--lib-space-xs) 0}.lst-item-text{flex:1}ul.lst .lst-item:before{content:"";width:4px;height:4px;border-radius:var(--radius-full);background:var(--color-washi-400);flex-shrink:0;margin-top:.55em}ol.lst{counter-reset:lst-counter}ol.lst .lst-item{counter-increment:lst-counter}ol.lst .lst-item:before{content:counter(lst-counter,decimal) ".";font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);flex-shrink:0;min-width:18px;margin-top:0}ol.lst.lst-ordered-roman .lst-item:before{content:counter(lst-counter,upper-roman) "."}ol.lst.lst-ordered-alpha .lst-item:before{content:counter(lst-counter,lower-alpha) "."}ul.lst.lst-kaki .lst-item:before{background:var(--color-kaki-400)}ul.lst.lst-dash .lst-item:before{content:"—";width:auto;height:auto;border-radius:0;background:none;font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);margin-top:0}ul.lst.lst-checked .lst-item:before{content:none}.lst-check-icon{display:flex;align-items:center;flex-shrink:0;font-size:14px;color:var(--color-celadon-500);margin-top:2px}.lst .lst{margin-left:var(--lib-space-md);margin-top:var(--lib-space-xs)}.lst .lst .lst-item:before{background:var(--color-washi-300);width:3px;height:3px}.lst.lst-sm .lst-item{font-size:var(--text-xs);gap:var(--lib-space-sm)}.lst.lst-lg .lst-item{font-size:var(--text-base);gap:var(--lib-space-md)}.lst-ui{list-style:none;display:flex;flex-direction:column;background:var(--bg-elevated)}.lst-ui.lst-bordered{border:1px solid var(--border-subtle)}.lst-ui.lst-inset{background:var(--bg-surface)}.lst-row{display:flex;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-md);position:relative;transition:background var(--duration-fast)}.lst-ui.lst-divided .lst-row{border-bottom:1px solid var(--border-subtle)}.lst-ui.lst-divided .lst-row:last-child{border-bottom:none}.lst-ui.lst-interactive .lst-row{cursor:pointer;-webkit-user-select:none;user-select:none}.lst-ui.lst-interactive .lst-row:hover{background:var(--bg-surface)}.lst-ui.lst-interactive .lst-row:active{background:var(--color-washi-200)}.lst-row.is-selected{background:var(--color-kaki-50)!important}.lst-row.is-selected .lst-row-label{color:var(--text-primary)}.lst-row.is-disabled{opacity:.38;cursor:not-allowed!important;pointer-events:none}.lst-row.is-danger .lst-row-label,.lst-row.is-danger .lst-row-icon{color:var(--color-error)}.lst-ui.lst-interactive .lst-row.is-danger:hover{background:#fff8f7}.lst-ui.lst-sm .lst-row{padding:var(--lib-space-sm) var(--lib-space-md);gap:var(--lib-space-sm)}.lst-ui.lst-lg .lst-row{padding:calc(var(--lib-space-md) + var(--lib-space-xs)) var(--lib-space-md);gap:var(--lib-space-md)}.lst-row-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);transition:color var(--duration-fast),background var(--duration-fast)}.lst-ui.lst-sm .lst-row-icon{width:28px;height:28px;font-size:14px}.lst-ui.lst-lg .lst-row-icon{width:44px;height:44px;font-size:22px}.lst-row-icon.icon-kaki{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.lst-row-icon.icon-celadon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.lst-row-icon.icon-error{background:#fff8f7;border-color:#f5c4bc;color:var(--color-error)}.lst-row-icon.icon-info{background:#d6e8f5;border-color:#d6e8f5;color:#1a4a6e}.lst-row-icon.icon-plain{background:transparent;border:none}.lst-row-icon.icon-round{border-radius:var(--radius-full)}.lst-row-avatar{width:36px;height:36px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:10px;background:var(--color-washi-200);color:var(--text-secondary)}.lst-ui.lst-sm .lst-row-avatar{width:28px;height:28px;font-size:8px}.lst-ui.lst-lg .lst-row-avatar{width:44px;height:44px;font-size:12px}.lst-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.lst-row-label{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}.lst-row-desc{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lst-ui.lst-lg .lst-row-label{font-size:var(--text-base)}.lst-ui.lst-sm .lst-row-label{font-size:var(--text-xs)}.lst-ui.lst-sm .lst-row-desc{font-size:9px}.lst-row-meta{flex-shrink:0;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);display:flex;align-items:center;gap:var(--lib-space-sm)}.lst-row-action{flex-shrink:0;font-size:16px;color:var(--text-muted);display:flex;align-items:center;transition:color var(--duration-fast),transform var(--duration-base)}.lst-ui.lst-interactive .lst-row:hover .lst-row-action{color:var(--text-secondary);transform:translate(2px)}.lst-badge{display:inline-flex;align-items:center;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:1px var(--lib-space-sm)}.lst-badge-default{background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-subtle)}.lst-badge-kaki{background:var(--color-kaki-50);color:var(--color-kaki-500);border:1px solid var(--color-kaki-100)}.lst-badge-celadon{background:var(--color-celadon-50);color:var(--color-celadon-500);border:1px solid var(--color-celadon-100)}.lst-badge-error{background:#fff8f7;color:var(--color-error);border:1px solid #F5C4BC}.lst-row-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:18px;border-radius:var(--radius-full);background:var(--color-washi-300);border:none;cursor:pointer;position:relative;flex-shrink:0;transition:background var(--duration-base)}.lst-row-toggle:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:var(--radius-full);background:var(--color-white);box-shadow:0 1px 3px #0003;transition:transform var(--duration-base) var(--ease-out)}.lst-row-toggle:checked{background:var(--color-washi-900)}.lst-row-toggle:checked:after{transform:translate(14px)}.lst-section-header{padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.lst-section-header:not(:first-child){border-top:1px solid var(--border-subtle);margin-top:var(--lib-space-xs)}.lst-sep{height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0;list-style:none}.lst-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--lib-space-sm) var(--lib-space-lg);align-items:baseline}.lst-dl.lst-dl-wide{grid-template-columns:180px 1fr}.lst-dl.lst-dl-stack{grid-template-columns:1fr;gap:var(--lib-space-md)}.lst-dl.lst-dl-divided .lst-dt,.lst-dl.lst-dl-divided .lst-dd{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--lib-space-sm);padding-top:var(--lib-space-sm)}.lst-dl.lst-dl-divided .lst-dt:first-of-type,.lst-dl.lst-dl-divided .lst-dd:first-of-type{padding-top:0}.lst-dl.lst-dl-stack .lst-dt{margin-bottom:calc(-1 * var(--lib-space-xs))}.lst-dt{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}.lst-dd{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug);margin:0}.lst-dd.lst-dd-mono{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}:host([dark]) ul.lst .lst-item:before{background:#312620}:host([dark]) ol.lst .lst-item:before{color:#2a1f19}:host([dark]) .lst-item{color:#6d6059}:host([dark]) .lst-ui{background:#0a0403}:host([dark]) .lst-ui.lst-bordered{border-color:#190f0a}:host([dark]) .lst-ui.lst-inset{background:#060201}:host([dark]) .lst-ui.lst-divided .lst-row{border-color:#150a06}:host([dark]) .lst-ui.lst-interactive .lst-row:hover{background:#150a06}:host([dark]) .lst-section-header{background:#060201;border-color:#150a06;color:#2a1f19}:host([dark]) .lst-sep{background:#150a06}:host([dark]) .lst-row-icon{background:#150a06;border-color:#1e130e;color:#362b25}:host([dark]) .lst-row-avatar{background:#1e130e;color:#51453e}:host([dark]) .lst-row-label{color:#7b6f67}:host([dark]) .lst-row-desc{color:#362b25}:host([dark]) .lst-row-meta{color:#312620}:host([dark]) .lst-row-action{color:#2a1f19}:host([dark]) .lst-row.is-selected{background:#190f0a!important}:host([dark]) .lst-row-toggle{background:#2a1f1a}:host([dark]) .lst-dt{color:#312620}:host([dark]) .lst-dd{color:#6d6059}:host([dark]) .lst-dd-mono{color:#574a43}:host([dark]) .lst-dl.lst-dl-divided .lst-dt,:host([dark]) .lst-dl.lst-dl-divided .lst-dd{border-color:#150a06}.lst-item.skeleton .lst-skeleton-line{display:inline-block;width:65%;height:.75rem;background:var(--color-washi-200);border-radius:var(--radius-sm);position:relative;overflow:hidden}.lst-item.skeleton .lst-skeleton-line:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,#fff0,#fff9,#fff0);animation:lst-shimmer 1.8s infinite}@keyframes lst-shimmer{to{transform:translate(100%)}}}';
+const pickerCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.cp{width:260px;background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-md);-webkit-user-select:none;user-select:none;flex-shrink:0}.cp-canvas{width:100%;height:160px;position:relative;cursor:crosshair;overflow:hidden}.cp-canvas:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff 0%,transparent 100%);pointer-events:none}.cp-canvas:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 0%,#000 100%);pointer-events:none}.cp-thumb{position:absolute;width:14px;height:14px;border-radius:var(--radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);z-index:2;pointer-events:none;transition:transform var(--duration-fast)}.cp-canvas:active .cp-thumb{transform:translate(-50%,-50%) scale(1.15)}.cp-sliders{display:flex;gap:var(--lib-space-sm);align-items:center;padding:var(--lib-space-sm) var(--lib-space-md) 0}.cp-preview-dot{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;border:1px solid rgb(0,0,0,.1);position:relative;overflow:hidden}.cp-preview-dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.cp-preview-color{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full)}.cp-sliders-stack{display:flex;flex-direction:column;gap:var(--lib-space-xs);flex:1}.cp-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border-radius:var(--radius-full);border:1px solid rgb(0,0,0,.08);outline:none;cursor:pointer}.cp-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:var(--radius-full);background:#fff;border:1px solid rgb(0,0,0,.25);box-shadow:0 1px 3px #0003;cursor:grab;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.cp-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15);box-shadow:0 2px 6px #00000040}.cp-range::-moz-range-thumb{width:14px;height:14px;border-radius:var(--radius-full);background:#fff;border:1px solid rgb(0,0,0,.25);box-shadow:0 1px 3px #0003;cursor:grab}.cp-range-hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.cp-alpha-wrap{position:relative;border-radius:var(--radius-full);overflow:hidden}.cp-alpha-checker{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#aaa 25%,transparent 25%),linear-gradient(-45deg,#aaa 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aaa 75%),linear-gradient(-45deg,transparent 75%,#aaa 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#eee;border-radius:var(--radius-full);border:1px solid rgb(0,0,0,.08)}.cp-alpha-checker .cp-range-alpha{position:relative;z-index:1;background:transparent;border:none}.cp-inputs-wrap{padding:var(--lib-space-sm) var(--lib-space-md);display:flex;gap:var(--lib-space-xs);align-items:flex-start;border-top:1px solid var(--border-subtle)}.cp-mode-btn{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:color var(--duration-fast);margin-top:4px;padding:0}.cp-mode-btn:hover{color:var(--text-primary)}.cp-input-group{display:flex;flex-direction:column;gap:0;min-width:0}.cp-input{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);background:var(--bg-base);border:1px solid var(--border-default);padding:var(--lib-space-xs) var(--lib-space-sm);outline:none;width:100%;transition:border-color var(--duration-base),box-shadow var(--duration-base);text-transform:uppercase}.cp-input:focus{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e17}.cp-input[type=number]{text-transform:none}.cp-input-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);display:block;text-align:center;margin-top:3px}.cp-saved{padding:var(--lib-space-xs) var(--lib-space-md) var(--lib-space-sm);border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:var(--lib-space-xs);flex-wrap:wrap}.cp-saved-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);width:100%}.cp-saved-add{width:20px;height:20px;border:1px dashed var(--border-default);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);cursor:pointer;background:transparent;transition:border-color var(--duration-fast),color var(--duration-fast),background var(--duration-fast);flex-shrink:0;line-height:1}.cp-saved-add:hover{border-color:var(--color-washi-700);color:var(--text-primary);background:var(--bg-surface)}.cp-actions{display:flex;gap:var(--lib-space-xs);padding:var(--lib-space-sm) var(--lib-space-md);border-top:1px solid var(--border-subtle);background:var(--bg-surface)}.cp-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:none;padding:var(--lib-space-xs) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base),color var(--duration-base);flex:1}.cp-btn-cancel{background:transparent;border:1px solid var(--border-default);color:var(--text-muted)}.cp-btn-cancel:hover{background:var(--color-washi-200);color:var(--text-primary)}.cp-btn-ok{background:var(--color-washi-900);color:var(--color-washi-50)}.cp-btn-ok:hover{background:var(--color-washi-800)}.cp-trigger-wrap{position:relative;display:inline-block}.cp-trigger{display:flex;align-items:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);padding:var(--lib-space-xs) var(--lib-space-sm);cursor:pointer;transition:border-color var(--duration-base),box-shadow var(--duration-base);outline:none}.cp-trigger:focus,.cp-trigger.is-open{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e17}.cp-trigger-dot{width:18px;height:18px;border:1px solid rgb(0,0,0,.1);flex-shrink:0;position:relative;overflow:hidden}.cp-trigger-dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.cp-trigger-color{position:absolute;top:0;right:0;bottom:0;left:0}.cp-trigger-wrap .cp{position:absolute;top:calc(100% + 6px);left:0;z-index:400;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.cp-trigger-wrap .cp.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.cp-swatches{display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cp-swatches-row{display:flex;gap:var(--lib-space-xs);align-items:center}.cp-swatches-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);width:52px;flex-shrink:0}.cp-swatch{width:24px;height:24px;border:1px solid rgb(0,0,0,.08);cursor:pointer;position:relative;flex-shrink:0;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.cp-swatch:hover{transform:scale(1.18);box-shadow:0 2px 8px #0000002e;z-index:1}.cp-swatch.is-selected:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px solid var(--color-washi-900)}.cp-swatch[data-name]:before{content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);white-space:nowrap;background:var(--color-washi-900);color:var(--color-washi-100);padding:2px var(--lib-space-xs);pointer-events:none;opacity:0;transition:opacity var(--duration-base);z-index:10}.cp-swatch[data-name]:hover:before{opacity:1}.cp-swatch-sm{width:18px;height:18px}.cp-swatch-lg{width:32px;height:32px}.cp-swatch-xl{width:48px;height:48px}:host([dark]) .cp{background:#0a0403;border-color:#1e130e;box-shadow:0 8px 32px #00000080}:host([dark]) .cp-input{background:#060201;border-color:#231813;color:#998c84}:host([dark]) .cp-input:focus{border-color:#6d6059}:host([dark]) .cp-input-label{color:#2a1f19}:host([dark]) .cp-saved{border-color:#190f0a}:host([dark]) .cp-saved-label{color:#2a1f19}:host([dark]) .cp-saved-add{border-color:#231813;color:#362b25}:host([dark]) .cp-saved-add:hover{background:#150a06;border-color:#51453e;color:#998c84}:host([dark]) .cp-actions{background:#060201;border-color:#190f0a}:host([dark]) .cp-btn-cancel{border-color:#231813;color:#433831}:host([dark]) .cp-btn-cancel:hover{background:#190f0a;color:#998c84}:host([dark]) .cp-mode-btn{color:#362b25}:host([dark]) .cp-mode-btn:hover{color:#998c84}:host([dark]) .cp-inputs-wrap{border-color:#190f0a}:host([dark]) .cp-trigger{background:#100704;border-color:#1e130e;color:#5f524c}:host([dark]) .cp-trigger:focus,:host([dark]) .cp-trigger.is-open{border-color:#6d6059}:host([dark]) .cp-swatch.is-selected:after{border-color:#998c84}:host([dark]) .cp-swatches-label{color:#312620}:host([disabled]){pointer-events:none;opacity:.5}}';
 export {
-  textListCss as default
+  pickerCss as default
 };
 //# sourceMappingURL=index203.js.map