@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index298.js.map

@@ -1 +1 @@
-{"version":3,"file":"index298.js","sources":["../src/components/molecules/input/lib-input.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport interface InputTemplateProps {\n  uuid: string;\n  type: 'text' | 'email' | 'password';\n  label: string;\n  placeholder: string;\n  required: boolean;\n  disabled: boolean;\n  error: boolean;\n  errorMessage: string;\n  value: string;\n  showPassword: boolean;\n  handleInput: (e: InputEvent) => void;\n  handleTogglePassword: () => void;\n}\n\n/**\n * Plantilla base para el componente lib-input.\n * Renderiza un campo de texto con label, slots prefix/suffix y estado de error.\n */\nexport function inputTemplate(props: InputTemplateProps): TemplateResult {\n  const inputType = props.type === 'password' && props.showPassword ? 'text' : props.type;\n\n  return html`\n    <div class=\"input-group ${props.error ? 'has-error' : ''} ${props.disabled ? 'is-disabled' : ''}\">\n\n      ${props.label ? html`\n        <label\n          class=\"input-label\"\n          for=\"${props.uuid}\"\n        >\n          ${props.label}\n          ${props.required ? html`<span class=\"input-required\" aria-hidden=\"true\">*</span>` : nothing}\n        </label>\n      ` : nothing}\n\n      <div class=\"input-wrapper\">\n        <slot name=\"prefix\"></slot>\n\n        <input\n          id=\"${props.uuid}\"\n          type=\"${inputType}\"\n          placeholder=\"${props.placeholder}\"\n          ?required=\"${props.required}\"\n          ?disabled=\"${props.disabled}\"\n          aria-invalid=\"${props.error}\"\n          aria-describedby=\"${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}\"\n          .value=\"${props.value}\"\n          @input=\"${props.handleInput}\"\n        />\n\n        ${props.type === 'password' ? html`\n          <button\n            class=\"input-password-toggle\"\n            type=\"button\"\n            @click=\"${props.handleTogglePassword}\"\n            aria-label=\"${props.showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}\"\n          >\n            ${props.showPassword ? html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"/>\n                <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        ` : nothing}\n\n        <slot name=\"suffix\"></slot>\n      </div>\n\n      ${props.error && props.errorMessage ? html`\n        <span class=\"input-error-message\" id=\"${props.uuid}-error\" role=\"alert\">\n          ${props.errorMessage}\n        </span>\n      ` : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAqBO,SAAS,cAAc,OAA2C;AACvE,QAAM,YAAY,MAAM,SAAS,cAAc,MAAM,eAAe,SAAS,MAAM;AAEnF,SAAO;AAAA,8BACqB,MAAM,QAAQ,cAAc,EAAE,IAAI,MAAM,WAAW,gBAAgB,EAAE;AAAA;AAAA,QAE3F,MAAM,QAAQ;AAAA;AAAA;AAAA,iBAGL,MAAM,IAAI;AAAA;AAAA,YAEf,MAAM,KAAK;AAAA,YACX,MAAM,WAAW,iEAAiE,OAAO;AAAA;AAAA,UAE3F,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMD,MAAM,IAAI;AAAA,kBACR,SAAS;AAAA,yBACF,MAAM,WAAW;AAAA,uBACnB,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,0BACX,MAAM,KAAK;AAAA,8BACP,MAAM,SAAS,MAAM,eAAe,GAAG,MAAM,IAAI,WAAW,OAAO;AAAA,oBAC7E,MAAM,KAAK;AAAA,oBACX,MAAM,WAAW;AAAA;AAAA;AAAA,UAG3B,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA,sBAIhB,MAAM,oBAAoB;AAAA,0BACtB,MAAM,eAAe,uBAAuB,oBAAoB;AAAA;AAAA,cAE5E,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMnB;AAAA;AAAA;AAAA;AAAA;AAAA,aAKH;AAAA;AAAA,YAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKX,MAAM,SAAS,MAAM,eAAe;AAAA,gDACI,MAAM,IAAI;AAAA,YAC9C,MAAM,YAAY;AAAA;AAAA,UAEpB,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index298.js","sources":["../src/components/atoms/content-pillar/content-pillar.html.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport type { LibContentPillar } from './content-pillar.component';\n\nexport function rendercontentPillar(ctx: LibContentPillar): TemplateResult {\n  return html`\n    <div class=\"pillar\" part=\"pillar\">\n\n      ${ctx.kanji\n        ? html`<div class=\"pillar-kanji\" part=\"kanji\" aria-hidden=\"true\">${ctx.kanji}</div>`\n        : nothing\n      }\n\n      <div class=\"pillar-body\" part=\"body\">\n        ${ctx.label\n          ? html`<p class=\"pillar-label\" part=\"label\">${ctx.label}</p>`\n          : nothing\n        }\n\n        ${ctx.description\n          ? html`<p class=\"pillar-desc\" part=\"description\">${ctx.description}</p>`\n          : html`<slot></slot>`\n        }\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,oBAAoB,KAAuC;AACzE,SAAO;AAAA;AAAA;AAAA,QAGD,IAAI,QACF,iEAAiE,IAAI,KAAK,WAC1E,OACJ;AAAA;AAAA;AAAA,UAGI,IAAI,QACF,4CAA4C,IAAI,KAAK,SACrD,OACJ;AAAA;AAAA,UAEE,IAAI,cACF,iDAAiD,IAAI,WAAW,SAChE,mBACJ;AAAA;AAAA;AAAA;AAAA;AAKR;"}

package/dist/index299.js

@@ -1,136 +1,5 @@
-import { nothing, html } from "lit";
-function renderValue(v, unit) {
-  return html`${v}${unit ? html`<span class="rs-value-unit">${unit}</span>` : nothing}`;
-}
-function renderMarks(marks, pct) {
-  if (!marks.length) return html``;
-  return html`
-    <div class="rs-marks">
-      ${marks.map((m) => html`
-        <div
-          class="rs-mark ${m.pct <= pct ? "is-filled" : ""}"
-          style="left: ${m.pct}%"
-        >
-          ${m.label ? html`<span class="rs-mark-label">${m.label}</span>` : nothing}
-        </div>
-      `)}
-    </div>
-  `;
-}
-function renderLimits(show, low, high) {
-  if (!show) return html``;
-  return html`
-    <div class="rs-limits">
-      <span class="rs-limit">${low}</span>
-      <span class="rs-limit">${high}</span>
-    </div>
-  `;
-}
-function renderTooltip(show, pct, value, unit) {
-  if (!show) return html``;
-  return html`
-    <div class="rs-tooltip-wrap" style="left: ${pct}%">
-      <span class="rs-tooltip-bubble">${value}${unit}</span>
-    </div>
-  `;
-}
-function renderTrack(p) {
-  if (p.dual) {
-    return html`
-      <div class="rs-track-wrap">
-        <div class="rs-track">
-          <div
-            class="rs-fill-dual"
-            style="left: ${p.minPct}%; right: ${100 - p.maxPct}%"
-          ></div>
-        </div>
-        <input
-          type="range"
-          class="rs-input-min"
-          min=${p.min} max=${p.max} step=${p.step}
-          .value=${String(p.valueMin)}
-          ?disabled=${p.disabled}
-          aria-label="Mínimo"
-          @input=${p.onInputMin}
-        >
-        <input
-          type="range"
-          class="rs-input-max"
-          min=${p.min} max=${p.max} step=${p.step}
-          .value=${String(p.valueMax)}
-          ?disabled=${p.disabled}
-          aria-label="Máximo"
-          @input=${p.onInputMax}
-        >
-      </div>
-    `;
-  }
-  if (p.vertical) {
-    return html`
-      <div class="rs-vert-wrap">
-        <div class="rs-track-wrap">
-          <div class="rs-track">
-            <div class="rs-fill" style="width: ${p.pct}%"></div>
-          </div>
-          <input
-            type="range"
-            min=${p.min} max=${p.max} step=${p.step}
-            .value=${String(p.value)}
-            ?disabled=${p.disabled}
-            @input=${p.onInput}
-          >
-        </div>
-      </div>
-    `;
-  }
-  return html`
-    <div class="rs-track-wrap">
-      <div class="rs-track">
-        <div class="rs-fill" style="width: ${p.pct}%"></div>
-      </div>
-      <input
-        type="range"
-        min=${p.min} max=${p.max} step=${p.step}
-        .value=${String(p.value)}
-        ?disabled=${p.disabled}
-        @input=${p.onInput}
-      >
-      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}
-    </div>
-  `;
-}
-function rangeSliderTemplate(p) {
-  const valueDisplay = p.dual ? html`<span class="rs-value">
-        ${p.valueMin} — ${p.valueMax}
-        ${p.unit ? html`<span class="rs-value-unit">${p.unit}</span>` : nothing}
-      </span>` : html`<span class="rs-value">${renderValue(p.value, p.unit)}</span>`;
-  return html`
-    <div class="rs">
-
-      ${!p.vertical && (p.label || p.dual) ? html`
-        <div class="rs-label-row">
-          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
-          ${valueDisplay}
-        </div>
-      ` : nothing}
-
-      ${renderTrack(p)}
-
-      ${p.vertical ? html`
-        <div class="rs-label-row">
-          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
-          ${valueDisplay}
-        </div>
-      ` : nothing}
-
-      ${renderMarks(p.marks, p.pct)}
-
-      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}
-
-    </div>
-  `;
-}
+const componentCss = '@layer tokens,reset,components;@layer tokens{:host{display:block;--pp-kanji-color: rgb(184, 90, 30, .35);--pp-label-color: rgb(184, 90, 30, .5);--pp-desc-color: rgb(250, 247, 244, .25);--pp-kanji-size: 2rem;--pp-kanji-width: 2.5rem;--pp-gap: 1.25rem;--pp-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--pp-font-mono: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--pp-font-body: var(--lib-font-body, "Shippori Mincho", serif)}:host([surface="light"]){--pp-kanji-color: rgb(184, 90, 30, .25);--pp-label-color: var(--color-kaki-500, #B85A1E);--pp-desc-color: var(--color-washi-600, #7A6A5C)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.pillar{display:flex;gap:var(--pp-gap);align-items:flex-start}.pillar-kanji{font-family:var(--pp-font-display);font-size:var(--pp-kanji-size);font-weight:300;color:var(--pp-kanji-color);line-height:1;flex-shrink:0;width:var(--pp-kanji-width);text-align:center;-webkit-user-select:none;user-select:none}.pillar-body{display:flex;flex-direction:column;gap:.35rem}.pillar-label{font-family:var(--pp-font-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pp-label-color);line-height:1}.pillar-desc{font-family:var(--pp-font-body);font-size:.82rem;color:var(--pp-desc-color);line-height:1.8}::slotted(*){font-family:var(--pp-font-body);font-size:.82rem;color:var(--pp-desc-color);line-height:1.8;margin:0}}';
 export {
-  rangeSliderTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index299.js.map

package/dist/index299.js.map

@@ -1 +1 @@
-{"version":3,"file":"index299.js","sources":["../src/components/molecules/range-slider/lib-range-slider.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { RsSize, RsTone, RsMark } from './lib-range-slider.component';\n\nexport interface RangeSliderTemplateProps {\n  /* sizing / modes */\n  size:     RsSize;\n  tone:     RsTone;\n  dual:     boolean;\n  vertical: boolean;\n  disabled: boolean;\n  tooltip:  boolean;\n\n  /* range attrs */\n  min:  number;\n  max:  number;\n  step: number;\n\n  /* values */\n  value:    number;   // single mode\n  valueMin: number;   // dual low\n  valueMax: number;   // dual high\n\n  /* computed pcts (0–100) */\n  pct:    number;     // single fill\n  minPct: number;     // dual fill left\n  maxPct: number;     // dual fill right\n\n  /* display */\n  label:        string;\n  unit:         string;\n  showLimits:   boolean;\n  limitMinText: string;\n  limitMaxText: string;\n  marks:        RsMark[];\n\n  /* handlers */\n  onInput:    (e: Event) => void;\n  onInputMin: (e: Event) => void;\n  onInputMax: (e: Event) => void;\n}\n\n/* ── Value display ───────────────────────────────────────── */\nfunction renderValue(v: number | string, unit: string): TemplateResult {\n  return html`${v}${unit ? html`<span class=\"rs-value-unit\">${unit}</span>` : nothing}`;\n}\n\n/* ── Marks ───────────────────────────────────────────────── */\nfunction renderMarks(marks: RsMark[], pct: number): TemplateResult {\n  if (!marks.length) return html``;\n  return html`\n    <div class=\"rs-marks\">\n      ${marks.map(m => html`\n        <div\n          class=\"rs-mark ${m.pct <= pct ? 'is-filled' : ''}\"\n          style=\"left: ${m.pct}%\"\n        >\n          ${m.label ? html`<span class=\"rs-mark-label\">${m.label}</span>` : nothing}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ── Limits ──────────────────────────────────────────────── */\nfunction renderLimits(show: boolean, low: string, high: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-limits\">\n      <span class=\"rs-limit\">${low}</span>\n      <span class=\"rs-limit\">${high}</span>\n    </div>\n  `;\n}\n\n/* ── Tooltip ─────────────────────────────────────────────── */\nfunction renderTooltip(show: boolean, pct: number, value: number, unit: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-tooltip-wrap\" style=\"left: ${pct}%\">\n      <span class=\"rs-tooltip-bubble\">${value}${unit}</span>\n    </div>\n  `;\n}\n\n/* ── Track content ───────────────────────────────────────── */\nfunction renderTrack(p: RangeSliderTemplateProps): TemplateResult {\n  if (p.dual) {\n    return html`\n      <div class=\"rs-track-wrap\">\n        <div class=\"rs-track\">\n          <div\n            class=\"rs-fill-dual\"\n            style=\"left: ${p.minPct}%; right: ${100 - p.maxPct}%\"\n          ></div>\n        </div>\n        <input\n          type=\"range\"\n          class=\"rs-input-min\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMin)}\n          ?disabled=${p.disabled}\n          aria-label=\"Mínimo\"\n          @input=${p.onInputMin}\n        >\n        <input\n          type=\"range\"\n          class=\"rs-input-max\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMax)}\n          ?disabled=${p.disabled}\n          aria-label=\"Máximo\"\n          @input=${p.onInputMax}\n        >\n      </div>\n    `;\n  }\n\n  if (p.vertical) {\n    return html`\n      <div class=\"rs-vert-wrap\">\n        <div class=\"rs-track-wrap\">\n          <div class=\"rs-track\">\n            <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n          </div>\n          <input\n            type=\"range\"\n            min=${p.min} max=${p.max} step=${p.step}\n            .value=${String(p.value)}\n            ?disabled=${p.disabled}\n            @input=${p.onInput}\n          >\n        </div>\n      </div>\n    `;\n  }\n\n  /* single horizontal */\n  return html`\n    <div class=\"rs-track-wrap\">\n      <div class=\"rs-track\">\n        <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n      </div>\n      <input\n        type=\"range\"\n        min=${p.min} max=${p.max} step=${p.step}\n        .value=${String(p.value)}\n        ?disabled=${p.disabled}\n        @input=${p.onInput}\n      >\n      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}\n    </div>\n  `;\n}\n\n/**\n * Template principal de lib-range-slider.\n */\nexport function rangeSliderTemplate(p: RangeSliderTemplateProps): TemplateResult {\n  /* Dual value display: \"120 — 480 €\" */\n  const valueDisplay = p.dual\n    ? html`<span class=\"rs-value\">\n        ${p.valueMin} — ${p.valueMax}\n        ${p.unit ? html`<span class=\"rs-value-unit\">${p.unit}</span>` : nothing}\n      </span>`\n    : html`<span class=\"rs-value\">${renderValue(p.value, p.unit)}</span>`;\n\n  return html`\n    <div class=\"rs\">\n\n      ${!p.vertical && (p.label || p.dual) ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderTrack(p)}\n\n      ${p.vertical ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderMarks(p.marks, p.pct)}\n\n      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AA0CA,SAAS,YAAY,GAAoB,MAA8B;AACrE,SAAO,OAAO,CAAC,GAAG,OAAO,mCAAmC,IAAI,YAAY,OAAO;AACrF;AAGA,SAAS,YAAY,OAAiB,KAA6B;AACjE,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SAAO;AAAA;AAAA,QAED,MAAM,IAAI,CAAA,MAAK;AAAA;AAAA,2BAEI,EAAE,OAAO,MAAM,cAAc,EAAE;AAAA,yBACjC,EAAE,GAAG;AAAA;AAAA,YAElB,EAAE,QAAQ,mCAAmC,EAAE,KAAK,YAAY,OAAO;AAAA;AAAA,OAE5E,CAAC;AAAA;AAAA;AAGR;AAGA,SAAS,aAAa,MAAe,KAAa,MAA8B;AAC9E,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO;AAAA;AAAA,+BAEsB,GAAG;AAAA,+BACH,IAAI;AAAA;AAAA;AAGnC;AAGA,SAAS,cAAc,MAAe,KAAa,OAAe,MAA8B;AAC9F,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO;AAAA,gDACuC,GAAG;AAAA,wCACX,KAAK,GAAG,IAAI;AAAA;AAAA;AAGpD;AAGA,SAAS,YAAY,GAA6C;AAChE,MAAI,EAAE,MAAM;AACV,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKgB,EAAE,MAAM,aAAa,MAAM,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAM9C,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,mBAC9B,OAAO,EAAE,QAAQ,CAAC;AAAA,sBACf,EAAE,QAAQ;AAAA;AAAA,mBAEb,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKf,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,mBAC9B,OAAO,EAAE,QAAQ,CAAC;AAAA,sBACf,EAAE,QAAQ;AAAA;AAAA,mBAEb,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7B;AAEA,MAAI,EAAE,UAAU;AACd,WAAO;AAAA;AAAA;AAAA;AAAA,iDAIsC,EAAE,GAAG;AAAA;AAAA;AAAA;AAAA,kBAIpC,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,qBAC9B,OAAO,EAAE,KAAK,CAAC;AAAA,wBACZ,EAAE,QAAQ;AAAA,qBACb,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5B;AAGA,SAAO;AAAA;AAAA;AAAA,6CAGoC,EAAE,GAAG;AAAA;AAAA;AAAA;AAAA,cAIpC,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,iBAC9B,OAAO,EAAE,KAAK,CAAC;AAAA,oBACZ,EAAE,QAAQ;AAAA,iBACb,EAAE,OAAO;AAAA;AAAA,QAElB,cAAc,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC;AAAA;AAAA;AAGxD;AAKO,SAAS,oBAAoB,GAA6C;AAE/E,QAAM,eAAe,EAAE,OACnB;AAAA,UACI,EAAE,QAAQ,MAAM,EAAE,QAAQ;AAAA,UAC1B,EAAE,OAAO,mCAAmC,EAAE,IAAI,YAAY,OAAO;AAAA,iBAEzE,8BAA8B,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC;AAE9D,SAAO;AAAA;AAAA;AAAA,QAGD,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ;AAAA;AAAA,YAEjC,EAAE,QAAQ,8BAA8B,EAAE,KAAK,YAAY,OAAO;AAAA,YAClE,YAAY;AAAA;AAAA,UAEd,OAAO;AAAA;AAAA,QAET,YAAY,CAAC,CAAC;AAAA;AAAA,QAEd,EAAE,WAAW;AAAA;AAAA,YAET,EAAE,QAAQ,8BAA8B,EAAE,KAAK,YAAY,OAAO;AAAA,YAClE,YAAY;AAAA;AAAA,UAEd,OAAO;AAAA;AAAA,QAET,YAAY,EAAE,OAAO,EAAE,GAAG,CAAC;AAAA;AAAA,QAE3B,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,CAAC;AAAA;AAAA;AAAA;AAIlE;"}
+{"version":3,"file":"index299.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index30.js

@@ -1,8 +1,6 @@
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { styleMap as o } from "./index241.js";
-import { aspectRatioTemplate } from "./index244.js";
-import styles from "./index245.js";
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import styles from "./index317.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,30 +11,45 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibAspectRatio = class extends LitElement {
+let LibMagnetic = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.ratio = "1/1";
+    this.shift = 0.4;
   }
   render() {
-    const hostStyles = {
-      "--lib-aspect-ratio": this.ratio
-    };
     return html`
-      <div style=${o(hostStyles)}>
-        ${aspectRatioTemplate()}
+      <div 
+        class="magnetic-wrapper"
+        @mousemove=${this._handleMouseMove}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        <slot></slot>
       </div>
     `;
   }
+  _handleMouseMove(e) {
+    const { left, top, width, height } = this.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    const deltaX = (e.clientX - centerX) * this.shift;
+    const deltaY = (e.clientY - centerY) * this.shift;
+    this._wrapper.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+  }
+  _handleMouseLeave() {
+    this._wrapper.style.transform = `translate(0px, 0px)`;
+  }
 };
-LibAspectRatio.styles = [css`${unsafeCSS(styles)}`];
+LibMagnetic.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Number })
+], LibMagnetic.prototype, "shift", 2);
 __decorateClass([
-  property({ type: String })
-], LibAspectRatio.prototype, "ratio", 2);
-LibAspectRatio = __decorateClass([
-  customElement("lib-aspect-ratio")
-], LibAspectRatio);
+  query(".magnetic-wrapper")
+], LibMagnetic.prototype, "_wrapper", 2);
+LibMagnetic = __decorateClass([
+  customElement("lib-magnetic")
+], LibMagnetic);
 export {
-  LibAspectRatio
+  LibMagnetic
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":["../src/components/atoms/aspect-ratio/lib-aspect-ratio.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { aspectRatioTemplate } from './lib-aspect-ratio.html';\nimport styles from './lib-aspect-ratio.css?inline';\n\n@customElement('lib-aspect-ratio')\nexport class LibAspectRatio extends LitElement {\n  static override styles = [css`${unsafeCSS(styles)}`];\n\n  /**\n   * El ratio deseado. Ejemplos: \"16/9\", \"4/3\", \"1/1\", \"21/9\"\n   * @type {string}\n   */\n  @property({ type: String }) ratio = '1/1';\n\n  protected override render(): TemplateResult {\n    // Inyectamos el ratio directamente en el estilo del host\n    const hostStyles = {\n      '--lib-aspect-ratio': this.ratio\n    };\n\n    return html`\n      <div style=${styleMap(hostStyles)}>\n        ${aspectRatioTemplate()}\n      </div>\n    `;\n  }\n}"],"names":["styleMap"],"mappings":";;;;;;;;;;;;;;;AAOO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOuB,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEjB,SAAyB;AAE1C,UAAM,aAAa;AAAA,MACjB,sBAAsB,KAAK;AAAA,IAAA;AAG7B,WAAO;AAAA,mBACQA,EAAS,UAAU,CAAC;AAAA,UAC7B,qBAAqB;AAAA;AAAA;AAAA,EAG7B;AACF;AArBa,eACK,SAAS,CAAC,MAAM,UAAU,MAAM,CAAC,EAAE;AAMvB,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,eAOiB,WAAA,SAAA,CAAA;AAPjB,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
+{"version":3,"file":"index30.js","sources":["../src/components/atoms/magnetic/lib-magnetic.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport styles from './lib-magnetic.css?inline';\n\n@customElement('lib-magnetic')\nexport class LibMagnetic extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  /**\n   * Intensidad del efecto (0.1 a 1). \n   * Valores más altos hacen que el elemento siga más de cerca al ratón.\n   */\n  @property({ type: Number }) shift = 0.4;\n\n  @query('.magnetic-wrapper') _wrapper!: HTMLElement;\n\n  override render():TemplateResult {\n    return html`\n      <div \n        class=\"magnetic-wrapper\"\n        @mousemove=${this._handleMouseMove}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private _handleMouseMove(e: MouseEvent):void {\n    const { left, top, width, height } = this.getBoundingClientRect();\n    \n    // Calculamos la distancia del cursor respecto al centro del elemento\n    const centerX = left + width / 2;\n    const centerY = top + height / 2;\n    \n    const deltaX = (e.clientX - centerX) * this.shift;\n    const deltaY = (e.clientY - centerY) * this.shift;\n\n    this._wrapper.style.transform = `translate(${deltaX}px, ${deltaY}px)`;\n  }\n\n  private _handleMouseLeave():void {\n    // Retorno suave a la posición inicial\n    this._wrapper.style.transform = `translate(0px, 0px)`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-magnetic': LibMagnetic;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;AAKO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOuB,SAAA,QAAQ;AAAA,EAAA;AAAA,EAI3B,SAAwB;AAC/B,WAAO;AAAA;AAAA;AAAA,qBAGU,KAAK,gBAAgB;AAAA,sBACpB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C;AAAA,EAEQ,iBAAiB,GAAoB;AAC3C,UAAM,EAAE,MAAM,KAAK,OAAO,OAAA,IAAW,KAAK,sBAAA;AAG1C,UAAM,UAAU,OAAO,QAAQ;AAC/B,UAAM,UAAU,MAAM,SAAS;AAE/B,UAAM,UAAU,EAAE,UAAU,WAAW,KAAK;AAC5C,UAAM,UAAU,EAAE,UAAU,WAAW,KAAK;AAE5C,SAAK,SAAS,MAAM,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,EAClE;AAAA,EAEQ,oBAAyB;AAE/B,SAAK,SAAS,MAAM,YAAY;AAAA,EAClC;AACF;AAxCa,YACK,SAAS,UAAU,MAAM;AAMb,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,YAOiB,WAAA,SAAA,CAAA;AAEA,gBAAA;AAAA,EAA3B,MAAM,mBAAmB;AAAA,GATf,YASiB,WAAA,YAAA,CAAA;AATjB,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/index300.js

@@ -1,5 +1,33 @@
-const sliderCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.rs{--rs-thumb-size: 20px;--rs-track-h: 4px;--rs-fill-color: var(--color-washi-900);--rs-track-bg: var(--color-washi-200);display:flex;flex-direction:column;gap:var(--lib-space-sm);width:100%}.rs-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-md)}.rs-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}.rs-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);min-width:2.5rem;text-align:right;transition:color var(--duration-fast)}.rs-value-unit{color:var(--text-muted);font-size:10px;margin-left:1px}.rs-track-wrap{position:relative;height:var(--rs-thumb-size);display:flex;align-items:center}.rs-track{position:absolute;left:0;right:0;height:var(--rs-track-h);background:var(--rs-track-bg);border-radius:var(--radius-full);overflow:hidden;pointer-events:none}.rs-fill{position:absolute;left:0;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);transition:width var(--duration-fast),background var(--duration-base);pointer-events:none}.rs-fill-dual{position:absolute;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);pointer-events:none;transition:left var(--duration-fast),right var(--duration-fast)}.rs input[type=range]{position:absolute;left:0;right:0;width:100%;height:var(--rs-thumb-size);margin:0;padding:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;pointer-events:auto}.rs input[type=range]::-webkit-slider-runnable-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-moz-range-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm),0 0 0 0 transparent;cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base),transform var(--duration-fast);margin-top:calc((var(--rs-track-h) - var(--rs-thumb-size)) / 2)}.rs input[type=range]::-moz-range-thumb{width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm);cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base)}.rs input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-sm),0 0 0 3px var(--color-ink-10)}.rs input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15);box-shadow:var(--shadow-md)}:host([size="sm"]) .rs{--rs-thumb-size: 14px;--rs-track-h: 3px;gap:var(--lib-space-xs)}:host([size="sm"]) .rs-label{font-size:10px}:host([size="sm"]) .rs-value{font-size:10px}:host([size="lg"]) .rs{--rs-thumb-size: 26px;--rs-track-h: 8px;gap:var(--lib-space-md)}:host([size="lg"]) .rs-label{font-size:var(--text-sm)}:host([size="lg"]) .rs-value{font-size:var(--text-sm)}:host([tone="kaki"]) .rs{--rs-fill-color: var(--color-kaki-500)}:host([tone="celadon"]) .rs{--rs-fill-color: var(--color-celadon-500)}:host([tone="error"]) .rs{--rs-fill-color: var(--color-error)}:host([tone="washi"]) .rs{--rs-fill-color: var(--color-washi-700)}:host([tone="dark"]) .rs{--rs-track-bg: oklch(20% .02 45deg);--rs-fill-color: oklch(65% .02 55deg)}:host([tone="dark"]) .rs-label{color:#574a43}:host([tone="dark"]) .rs-value{color:#998c84}:host([tone="dark"]) .rs-limit{color:#312620}:host([tone="dark"]) .rs-mark{background:#231813}:host([tone="dark"]) .rs-mark.is-filled{background:#998c84}:host([tone="dark"]) .rs-mark-label{color:#312620}:host([tone="dark"]) .rs input[type=range]::-webkit-slider-thumb{background:#0c0604;border-color:#8a7d75}:host([tone="dark"]) .rs input[type=range]::-moz-range-thumb{background:#0c0604;border-color:#8a7d75}:host([disabled]) .rs{opacity:.38;pointer-events:none}:host([disabled]) .rs input[type=range]{cursor:not-allowed}.rs-limits{display:flex;justify-content:space-between;margin-top:calc(-1 * var(--lib-space-xs))}.rs-limit{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.rs-marks{position:relative;height:10px;margin-top:calc(-1 * var(--lib-space-sm));pointer-events:none}.rs-mark{position:absolute;top:0;transform:translate(-50%);width:1px;height:5px;background:var(--border-default)}.rs-mark.is-filled{background:var(--rs-fill-color)}.rs-mark-label{position:absolute;top:7px;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}.rs-tooltip-wrap{position:absolute;top:0;height:100%;display:flex;align-items:flex-start;pointer-events:none;transform:translate(-50%)}.rs-tooltip-bubble{position:absolute;bottom:calc(100% + var(--lib-space-sm));left:0;transform:translate(-50%);background:var(--color-washi-900);color:var(--color-washi-50);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);padding:2px var(--lib-space-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--duration-base)}.rs-tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-washi-900)}.rs-track-wrap:hover .rs-tooltip-bubble{opacity:1}:host([dual]) .rs-track{overflow:visible}:host([dual]) .rs-track-wrap{overflow:visible}:host([dual]) .rs input[type=range]{pointer-events:none}:host([dual]) .rs input[type=range]::-webkit-slider-thumb{pointer-events:auto}:host([dual]) .rs input[type=range]::-moz-range-thumb{pointer-events:auto}:host([dual]) .rs .rs-input-max{z-index:1}:host([vertical]) .rs{width:auto;align-items:center}:host([vertical]) .rs-vert-wrap{position:relative;width:var(--rs-thumb-size);height:160px;flex-shrink:0}:host([vertical][size="sm"]) .rs-vert-wrap{height:120px}:host([vertical][size="lg"]) .rs-vert-wrap{height:200px}:host([vertical]) .rs-track-wrap{position:absolute;top:50%;left:50%;width:160px;height:var(--rs-thumb-size);transform:translate(-50%,-50%) rotate(-90deg)}:host([vertical][size="sm"]) .rs-track-wrap{width:120px}:host([vertical][size="lg"]) .rs-track-wrap{width:200px}:host([vertical]) .rs-label-row{flex-direction:column;align-items:center;gap:2px;width:auto}:host([vertical]) .rs-label-row .rs-label{text-align:center}:host([vertical]) .rs-label-row .rs-value{min-width:auto;text-align:center}@media(prefers-reduced-motion:reduce){.rs-fill,.rs-fill-dual{transition:none}.rs input[type=range]::-webkit-slider-thumb{transition:none}}}';
+import { nothing, html } from "lit";
+function copyButtonTemplate(props) {
+  const btn = html`
+    <button
+      type="button"
+      class="copy-btn"
+      aria-label="${props.iconOnly ? "Copiar al portapapeles" : nothing}"
+      ?disabled="${props.disabled}"
+      @click="${props.onClick}"
+    >
+      <span class="copy-btn__idle">
+        <lib-icon name="copy" size="${props.size === "lg" ? "sm" : "xs"}"></lib-icon>
+        ${!props.iconOnly && props.label ? html`<span class="copy-btn__text">${props.label}</span>` : nothing}
+      </span>
+
+      <span class="copy-btn__copied">
+        <lib-icon name="check" size="${props.size === "lg" ? "sm" : "xs"}"></lib-icon>
+        ${!props.iconOnly && props.successLabel ? html`<span class="copy-btn__text">${props.successLabel}</span>` : nothing}
+      </span>
+    </button>
+  `;
+  if (!props.tooltip) return btn;
+  return html`
+    <span class="copy-btn__wrap">
+      ${btn}
+      <span class="copy-btn__tooltip">Copiado</span>
+    </span>
+  `;
+}
 export {
-  sliderCss as default
+  copyButtonTemplate
 };
 //# sourceMappingURL=index300.js.map

package/dist/index300.js.map

@@ -1 +1 @@
-{"version":3,"file":"index300.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index300.js","sources":["../src/components/atoms/copy-button/lib-copy-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibCopyVariant  = 'ghost' | 'outlined' | 'filled' | 'subtle' | 'on-dark';\nexport type LibCopySize     = 'sm' | 'md' | 'lg';\n\nexport interface CopyButtonTemplateProps {\n  value: string;\n  variant: LibCopyVariant;\n  size: LibCopySize;\n  iconOnly: boolean;\n  label: string;\n  successLabel: string;\n  tooltip: boolean;\n  copied: boolean;\n  disabled: boolean;\n  onClick: () => void;\n}\n\n/**\n * Plantilla para lib-copy-button.\n *\n * Dos capas internas con crossfade CSS:\n *   .copy-btn__idle   → icono copy  (+ label opcional) — visible en reposo\n *   .copy-btn__copied → icono check (+ label opcional) — visible al copiar\n *\n * El atributo [copied] en :host activa el swap via CSS.\n * El tooltip es opcional y se posiciona en un wrapper.\n */\nexport function copyButtonTemplate(props: CopyButtonTemplateProps): TemplateResult {\n  const btn = html`\n    <button\n      type=\"button\"\n      class=\"copy-btn\"\n      aria-label=\"${props.iconOnly ? 'Copiar al portapapeles' : nothing}\"\n      ?disabled=\"${props.disabled}\"\n      @click=\"${props.onClick}\"\n    >\n      <span class=\"copy-btn__idle\">\n        <lib-icon name=\"copy\" size=\"${props.size === 'lg' ? 'sm' : 'xs'}\"></lib-icon>\n        ${!props.iconOnly && props.label\n          ? html`<span class=\"copy-btn__text\">${props.label}</span>`\n          : nothing}\n      </span>\n\n      <span class=\"copy-btn__copied\">\n        <lib-icon name=\"check\" size=\"${props.size === 'lg' ? 'sm' : 'xs'}\"></lib-icon>\n        ${!props.iconOnly && props.successLabel\n          ? html`<span class=\"copy-btn__text\">${props.successLabel}</span>`\n          : nothing}\n      </span>\n    </button>\n  `;\n\n  if (!props.tooltip) return btn;\n\n  return html`\n    <span class=\"copy-btn__wrap\">\n      ${btn}\n      <span class=\"copy-btn__tooltip\">Copiado</span>\n    </span>\n  `;\n}"],"names":[],"mappings":";AA4BO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,MAAM;AAAA;AAAA;AAAA;AAAA,oBAIM,MAAM,WAAW,2BAA2B,OAAO;AAAA,mBACpD,MAAM,QAAQ;AAAA,gBACjB,MAAM,OAAO;AAAA;AAAA;AAAA,sCAGS,MAAM,SAAS,OAAO,OAAO,IAAI;AAAA,UAC7D,CAAC,MAAM,YAAY,MAAM,QACvB,oCAAoC,MAAM,KAAK,YAC/C,OAAO;AAAA;AAAA;AAAA;AAAA,uCAIoB,MAAM,SAAS,OAAO,OAAO,IAAI;AAAA,UAC9D,CAAC,MAAM,YAAY,MAAM,eACvB,oCAAoC,MAAM,YAAY,YACtD,OAAO;AAAA;AAAA;AAAA;AAKjB,MAAI,CAAC,MAAM,QAAS,QAAO;AAE3B,SAAO;AAAA;AAAA,QAED,GAAG;AAAA;AAAA;AAAA;AAIX;"}

package/dist/index301.js

@@ -1,15 +1,5 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function* o(o2, f) {
-  if (void 0 !== o2) {
-    let i = 0;
-    for (const t of o2) yield f(t, i++);
-  }
-}
+const copyButtonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;flex-shrink:0;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.copy-btn__wrap{position:relative;display:inline-flex}.copy-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-xs);position:relative;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;overflow:hidden;outline:none;transition:background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.copy-btn:disabled{opacity:.4;pointer-events:none;cursor:not-allowed}.copy-btn:active:not(:disabled){transform:scale(.94)}.copy-btn:focus-visible{box-shadow:0 0 0 3px var(--color-ink-20)}:host([size="sm"]) .copy-btn{height:28px;padding:0 var(--lib-space-sm);font-size:10px}:host([size="md"]) .copy-btn{height:34px;padding:0 var(--lib-space-md);font-size:var(--text-xs)}:host([size="lg"]) .copy-btn{height:40px;padding:0 var(--lib-space-lg);font-size:var(--text-sm)}:host([icon-only][size="sm"]) .copy-btn{height:28px;width:28px;padding:0}:host([icon-only][size="md"]) .copy-btn{height:34px;width:34px;padding:0}:host([icon-only][size="lg"]) .copy-btn{height:40px;width:40px;padding:0}.copy-btn__idle,.copy-btn__copied{display:inline-flex;align-items:center;gap:var(--lib-space-xs);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-slow) var(--ease-bounce)}.copy-btn__idle{opacity:1;transform:translateY(0) scale(1)}.copy-btn__copied{opacity:0;transform:translateY(6px) scale(.8);position:absolute}:host([copied]) .copy-btn__idle{opacity:0;transform:translateY(-6px) scale(.8)}:host([copied]) .copy-btn__copied{opacity:1;transform:translateY(0) scale(1);position:relative}:host([copied]) .copy-btn{color:var(--color-celadon-600)!important;border-color:var(--color-celadon-500)!important}:host([variant="ghost"]) .copy-btn{background:transparent;color:var(--text-muted);border-radius:var(--radius-sm)}:host([variant="ghost"]) .copy-btn:hover{background:var(--color-washi-200);color:var(--text-primary)}:host([variant="outlined"]) .copy-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm)}:host([variant="outlined"]) .copy-btn:hover{background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}:host([variant="filled"]) .copy-btn{background:var(--color-washi-900);color:var(--color-washi-50);border:1px solid transparent;border-radius:var(--radius-sm)}:host([variant="filled"]) .copy-btn:hover{background:var(--color-washi-800)}:host([variant="filled"][copied]) .copy-btn{background:var(--color-celadon-500)!important;border-color:transparent!important;color:#fff!important}:host([variant="subtle"]) .copy-btn{background:var(--color-washi-100);color:var(--text-secondary);border:1px solid transparent;border-radius:var(--radius-sm)}:host([variant="subtle"]) .copy-btn:hover{background:var(--color-washi-200);color:var(--text-primary)}:host([variant="subtle"][copied]) .copy-btn{background:var(--color-celadon-100)!important}:host([variant="on-dark"]) .copy-btn{background:#ffffff12;color:#ffffff73;border:1px solid oklch(100% 0 0deg / .1);border-radius:var(--radius-sm)}:host([variant="on-dark"]) .copy-btn:hover{background:#ffffff1f;color:#ffffffd9;border-color:#fff3}:host([variant="on-dark"][copied]) .copy-btn{color:#6daf92!important;border-color:#6daf92!important;background:#ffffff12!important}:host([variant="on-dark"]) .copy-btn:focus-visible{box-shadow:0 0 0 3px #fff3}.copy-btn__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(4px);background:var(--color-washi-900);color:var(--color-washi-50);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);white-space:nowrap;padding:3px var(--lib-space-sm);pointer-events:none;opacity:0;z-index:var(--z-tooltip);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([copied]) .copy-btn__tooltip{opacity:1;transform:translate(-50%) translateY(0)}@media(prefers-reduced-motion:reduce){.copy-btn,.copy-btn__idle,.copy-btn__copied,.copy-btn__tooltip{transition:none}}}';
 export {
-  o as map
+  copyButtonCss as default
 };
 //# sourceMappingURL=index301.js.map

package/dist/index301.js.map

@@ -1 +1 @@
-{"version":3,"file":"index301.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/map.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction*o(o,f){if(void 0!==o){let i=0;for(const t of o)yield f(t,i++)}}export{o as map};\n//# sourceMappingURL=map.js.map\n"],"names":["o"],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,UAAS,EAAEA,IAAE,GAAE;AAAC,MAAG,WAASA,IAAE;AAAC,QAAI,IAAE;AAAE,eAAU,KAAKA,GAAE,OAAM,EAAE,GAAE,GAAG;AAAA,EAAC;AAAC;","x_google_ignoreList":[0]}
+{"version":3,"file":"index301.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index302.js

@@ -1,5 +1,37 @@
-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}}';
+import { nothing, html } from "lit";
+function renderDisplayHeading(ctx) {
+  const headingContent = html`
+    <!-- Línea 1 -->
+    ${ctx.line1}
+    <!-- Línea 2: prefix + acento itálico -->
+    ${ctx.line2Prefix || ctx.accent ? html`
+          <br>
+          ${ctx.line2Prefix ? html`${ctx.line2Prefix} ` : nothing}
+          ${ctx.accent ? html`<em class="dh-accent">${ctx.accent}</em>` : nothing}
+        ` : nothing}
+  `;
+  return html`
+    <div class="dh-wrapper" part="wrapper">
+
+      <!-- Slot eyebrow: permite pasar un <lib-eyebrow> desde fuera -->
+      <slot name="eyebrow"></slot>
+
+      <!-- Heading con tag dinámico -->
+      ${ctx.tag === "h1" ? html`<h1 class="dh-heading" part="heading">${headingContent}</h1>` : nothing}
+      ${ctx.tag === "h2" ? html`<h2 class="dh-heading" part="heading">${headingContent}</h2>` : nothing}
+      ${ctx.tag === "h3" ? html`<h3 class="dh-heading" part="heading">${headingContent}</h3>` : nothing}
+      ${ctx.tag === "h4" ? html`<h4 class="dh-heading" part="heading">${headingContent}</h4>` : nothing}
+
+      <!-- Descripción como prop -->
+      ${ctx.description ? html`<p class="dh-desc" part="description">${ctx.description}</p>` : nothing}
+
+      <!-- Descripción como slot (rich content) -->
+      <slot name="description"></slot>
+
+    </div>
+  `;
+}
 export {
-  pickerCss as default
+  renderDisplayHeading
 };
 //# sourceMappingURL=index302.js.map

package/dist/index302.js.map

@@ -1 +1 @@
-{"version":3,"file":"index302.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index302.js","sources":["../src/components/atoms/display-heading/lib-display-heading.html.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport type { LibDisplayHeading } from './lib-display-heading.component';\n\nexport function renderDisplayHeading(ctx: LibDisplayHeading): TemplateResult {\n  /* Decide el tag semántico del heading */\n  const headingContent = html`\n    <!-- Línea 1 -->\n    ${ctx.line1}\n    <!-- Línea 2: prefix + acento itálico -->\n    ${ctx.line2Prefix || ctx.accent\n      ? html`\n          <br>\n          ${ctx.line2Prefix ? html`${ctx.line2Prefix} ` : nothing}\n          ${ctx.accent\n            ? html`<em class=\"dh-accent\">${ctx.accent}</em>`\n            : nothing\n          }\n        `\n      : nothing\n    }\n  `;\n\n  return html`\n    <div class=\"dh-wrapper\" part=\"wrapper\">\n\n      <!-- Slot eyebrow: permite pasar un <lib-eyebrow> desde fuera -->\n      <slot name=\"eyebrow\"></slot>\n\n      <!-- Heading con tag dinámico -->\n      ${ctx.tag === 'h1' ? html`<h1 class=\"dh-heading\" part=\"heading\">${headingContent}</h1>` : nothing}\n      ${ctx.tag === 'h2' ? html`<h2 class=\"dh-heading\" part=\"heading\">${headingContent}</h2>` : nothing}\n      ${ctx.tag === 'h3' ? html`<h3 class=\"dh-heading\" part=\"heading\">${headingContent}</h3>` : nothing}\n      ${ctx.tag === 'h4' ? html`<h4 class=\"dh-heading\" part=\"heading\">${headingContent}</h4>` : nothing}\n\n      <!-- Descripción como prop -->\n      ${ctx.description\n        ? html`<p class=\"dh-desc\" part=\"description\">${ctx.description}</p>`\n        : nothing\n      }\n\n      <!-- Descripción como slot (rich content) -->\n      <slot name=\"description\"></slot>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,qBAAqB,KAAwC;AAE3E,QAAM,iBAAiB;AAAA;AAAA,MAEnB,IAAI,KAAK;AAAA;AAAA,MAET,IAAI,eAAe,IAAI,SACrB;AAAA;AAAA,YAEI,IAAI,cAAc,OAAO,IAAI,WAAW,MAAM,OAAO;AAAA,YACrD,IAAI,SACF,6BAA6B,IAAI,MAAM,UACvC,OACJ;AAAA,YAEF,OACJ;AAAA;AAGF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOD,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA,QAC/F,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA,QAC/F,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA,QAC/F,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA;AAAA;AAAA,QAG/F,IAAI,cACF,6CAA6C,IAAI,WAAW,SAC5D,OACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAON;"}

package/dist/index303.js

@@ -1,165 +1,5 @@
-import { html, nothing } from "lit";
-const ROTATE_SVG = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M10 2.5A4.5 4.5 0 1 0 11 6"/>
-  <path d="M10 .5v2h2"/>
-</svg>`;
-const CARET_SVG = html`<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M2 4l3 3 3-3"/>
-</svg>`;
-function swatchGridTemplate(props) {
-  const { rows, selected, onSelect } = props;
-  return html`
-    <div class="cp-swatches">
-      ${rows.map((row) => html`
-        <div class="cp-swatches-row">
-          <span class="cp-swatches-label">${row.label}</span>
-          ${row.colors.map((c) => html`
-            <div
-              class="cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? "is-selected" : ""}"
-              style="background:${c.value};"
-              data-name="${c.name ?? ""}"
-              @click="${() => onSelect(c)}"
-              role="button"
-              aria-label="${c.name ?? c.value}"
-            ></div>
-          `)}
-        </div>
-      `)}
-    </div>
-  `;
-}
-function pickerPanelTemplate(p) {
-  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;
-  const thumbX = s;
-  const thumbY = 100 - l;
-  const cssColor = alpha < 100 ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})` : hex;
-  const alphaGradient = `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;
-  const inputsBlock = inputMode === "hex" ? html`
-        <div class="cp-input-group" style="flex:3">
-          <input class="cp-input" type="text" .value="${hex}" maxlength="7"
-            @input="${p.onHexInput}">
-          <span class="cp-input-label">HEX</span>
-        </div>
-        ${showAlpha ? html`
-          <div class="cp-input-group" style="flex:1">
-            <input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100"
-              @input="${p.onAlphaNumInput}">
-            <span class="cp-input-label">A%</span>
-          </div>` : nothing}
-      ` : inputMode === "rgb" ? html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(r)}" min="0" max="255" @input="${(e) => p.onRgbInput(0, e)}"><span class="cp-input-label">R</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(g)}" min="0" max="255" @input="${(e) => p.onRgbInput(1, e)}"><span class="cp-input-label">G</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(b)}" min="0" max="255" @input="${(e) => p.onRgbInput(2, e)}"><span class="cp-input-label">B</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      ` : html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(h)}" min="0" max="360" @input="${(e) => p.onHslInput(0, e)}"><span class="cp-input-label">H</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(s)}" min="0" max="100" @input="${(e) => p.onHslInput(1, e)}"><span class="cp-input-label">S%</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(l)}" min="0" max="100" @input="${(e) => p.onHslInput(2, e)}"><span class="cp-input-label">L%</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      `;
-  return html`
-    <!-- Canvas 2D -->
-    <div class="cp-canvas"
-      style="background: hsl(${h},100%,50%);"
-      @mousedown="${p.onCanvasMousedown}"
-    >
-      <div class="cp-thumb"
-        style="left:${thumbX}%;top:${thumbY}%;background:${cssColor};"
-      ></div>
-    </div>
-
-    <!-- Sliders -->
-    <div class="cp-sliders">
-      <div class="cp-preview-dot">
-        <div class="cp-preview-color" style="background:${cssColor};"></div>
-      </div>
-      <div class="cp-sliders-stack">
-        <input type="range" class="cp-range cp-range-hue"
-          min="0" max="360" .value="${String(h)}"
-          @input="${p.onHueInput}">
-        ${showAlpha ? html`
-          <div class="cp-alpha-wrap" style="height:10px;">
-            <div class="cp-alpha-checker">
-              <input type="range" class="cp-range cp-range-alpha"
-                min="0" max="100" .value="${String(Math.round(alpha))}"
-                style="background:${alphaGradient};"
-                @input="${p.onAlphaInput}">
-            </div>
-          </div>` : nothing}
-      </div>
-    </div>
-
-    <!-- Inputs -->
-    <div class="cp-inputs-wrap">
-      <button class="cp-mode-btn" title="Cambiar modo" @click="${p.onModeToggle}">
-        ${ROTATE_SVG}
-      </button>
-      <div style="display:flex;gap:var(--lib-space-xs);flex:1;">
-        ${inputsBlock}
-      </div>
-    </div>
-
-    <!-- Saved colors -->
-    <div class="cp-saved">
-      <span class="cp-saved-label">Guardados</span>
-      ${savedColors.map((sc) => html`
-        <div class="cp-swatch cp-swatch-sm"
-          style="background:${sc};"
-          data-name="${sc}"
-          @click="${() => p.onSavedClick(sc)}"
-        ></div>
-      `)}
-      <button class="cp-saved-add" title="Guardar color actual" @click="${p.onSaveColor}">+</button>
-    </div>
-
-    <!-- Actions -->
-    <div class="cp-actions">
-      <button class="cp-btn cp-btn-cancel" @click="${p.onCancel}">Cancelar</button>
-      <button class="cp-btn cp-btn-ok" @click="${p.onApply}">Aplicar</button>
-    </div>
-  `;
-}
-function colorPickerTemplate(props) {
-  const {
-    variant,
-    /*label,*/
-    hex,
-    alpha,
-    panelOpen,
-    onTriggerClick
-  } = props;
-  const panel = html`
-    <div class="cp ${variant === "trigger" && panelOpen ? "is-open" : ""}">
-      ${pickerPanelTemplate(props)}
-    </div>
-  `;
-  if (variant === "inline") {
-    return panel;
-  }
-  const cssColor = alpha < 100 ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})` : hex;
-  return html`
-    <div class="cp-trigger-wrap">
-      <button
-        class="cp-trigger ${panelOpen ? "is-open" : ""}"
-        @click="${onTriggerClick}"
-        aria-expanded="${panelOpen}"
-        aria-haspopup="true"
-      >
-        <div class="cp-trigger-dot">
-          <div class="cp-trigger-color" style="background:${cssColor};"></div>
-        </div>
-        <span>${hex.toUpperCase()}</span>
-        ${CARET_SVG}
-      </button>
-      ${panel}
-    </div>
-  `;
-}
+const componentCss = '@layer tokens,reset,components;@layer tokens{:host{display:block;--dh-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--dh-font-body: var(--lib-font-body, "Shippori Mincho", serif);--dh-size: clamp(2.2rem, 5vw, 3.5rem);--dh-color-heading: var(--color-washi-800, #3D332A);--dh-color-accent: var(--color-kaki-400, #D97234);--dh-color-desc: var(--color-washi-500, #9A8878);--dh-gap-eyebrow: var(--lib-space-md, 1rem);--dh-gap-desc: var(--lib-space-lg, 1.5rem);--dh-max-width: 640px;--dh-dur: .56s;--dh-ease: cubic-bezier(0, 0, .2, 1)}:host([surface="dark"]){--dh-color-heading: rgb(250, 247, 244, .65);--dh-color-desc: rgb(250, 247, 244, .28)}:host([surface="washi"]){--dh-color-heading: var(--color-washi-800, #3D332A);--dh-color-desc: var(--color-washi-600, #7A6A5C)}:host([size="sm"]){--dh-size: clamp(1.5rem, 3.5vw, 2.2rem)}:host([size="md"]){--dh-size: clamp(2.2rem, 5vw, 3.5rem)}:host([size="lg"]){--dh-size: clamp(2.75rem, 6vw, 5rem)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.dh-wrapper{display:flex;flex-direction:column;align-items:flex-start;max-width:var(--dh-max-width)}.dh-eyebrow-slot{display:contents}::slotted([slot="eyebrow"]){margin-bottom:var(--dh-gap-eyebrow)}.dh-heading{font-family:var(--dh-font-display);font-size:var(--dh-size);font-weight:300;letter-spacing:-.02em;line-height:1.15;color:var(--dh-color-heading);margin:0}.dh-accent{font-style:italic;color:var(--dh-color-accent);font-family:inherit;font-size:inherit;font-weight:inherit}.dh-desc{font-family:var(--dh-font-body);font-size:var(--text-sm, .8125rem);color:var(--dh-color-desc);line-height:1.9;margin-top:var(--dh-gap-desc);max-width:var(--dh-max-width)}::slotted([slot="description"]){font-family:var(--dh-font-body);font-size:var(--text-sm, .8125rem);color:var(--dh-color-desc);line-height:1.9;margin-top:var(--dh-gap-desc);display:block}@keyframes dh-fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}:host([animate]) .dh-heading{animation:dh-fade-up var(--dh-dur) var(--dh-ease) both}:host([animate]) .dh-desc{animation:dh-fade-up var(--dh-dur) var(--dh-ease) .12s both}:host([centered]) .dh-wrapper{align-items:center;text-align:center;max-width:none}:host([centered]) .dh-heading,:host([centered]) .dh-desc{max-width:var(--dh-max-width);text-align:center}}';
 export {
-  colorPickerTemplate,
-  pickerPanelTemplate,
-  swatchGridTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index303.js.map