@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index294.js

@@ -1,263 +1,42 @@
 import { nothing, html } from "lit";
-import { map as o } from "./index301.js";
-import { styleMap as o$1 } from "./index241.js";
-function renderFileEntry(entry, onRemove) {
-  var _a;
-  const isUploading = entry.status === "uploading";
-  const isDone = entry.status === "done";
-  const isError = entry.status === "error";
-  const rowCls = [
-    "fu-file",
-    isDone ? "is-done" : "",
-    isError ? "is-error" : "",
-    isUploading ? "is-uploading" : ""
-  ].filter(Boolean).join(" ");
-  const ext = ((_a = entry.file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase()) ?? "";
-  const isImg = ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
-  const fileSize = entry.file.size < 1024 * 1024 ? `${(entry.file.size / 1024).toFixed(0)} KB` : `${(entry.file.size / (1024 * 1024)).toFixed(1)} MB`;
+function codeBlockTemplate(props) {
   return html`
-    <div class="${rowCls}">
-      <!-- Progress background -->
-      <div
-        class="fu-file-prog-bg"
-        style="${o$1({ width: isUploading ? `${entry.progress}%` : isDone ? "100%" : "0%" })}"
-      ></div>
-
-      <!-- Thumbnail o icono -->
-      ${isImg && entry.previewUrl ? html`<img class="fu-file-thumb" src="${entry.previewUrl}" alt="${entry.file.name}">` : html`
-            <div class="fu-file-icon">
-              ${isDone ? html`<lib-icon name="check-circle" weight="fill" size="sm"></lib-icon>` : isError ? html`<lib-icon name="warning-circle" weight="fill" size="sm"></lib-icon>` : html`<span class="fu-ext">${ext || "—"}</span>`}
-            </div>`}
-
-      <!-- Meta -->
-      <div class="fu-file-meta">
-        <span class="fu-file-name">${entry.file.name}</span>
-        <span class="fu-file-info">
-          <span>${fileSize}</span>
-          ${isError ? html`
-                <span class="fu-file-info-sep"></span>
-                <span style="color:var(--color-error)">${entry.errorMessage ?? "Error al subir"}</span>` : nothing}
-          ${isDone ? html`
-                <span class="fu-file-info-sep"></span>
-                <span style="color:var(--color-celadon-500)">Completado</span>` : nothing}
-        </span>
-      </div>
-
-      <!-- Acciones -->
-      <div class="fu-file-actions">
-        ${isUploading ? html`
-              <span class="fu-file-pct">${entry.progress}%</span>
-              <span class="fu-spinner"></span>` : isDone ? html`<span class="fu-status-done"><lib-icon name="check-circle" weight="fill" size="sm"></lib-icon></span>` : isError ? html`<span class="fu-status-error"><lib-icon name="warning" weight="fill" size="sm"></lib-icon></span>` : nothing}
-
-        <button
-          class="fu-file-remove"
-          aria-label="Eliminar ${entry.file.name}"
-          @click="${(e) => {
-    e.stopPropagation();
-    onRemove(entry.id);
-  }}"
-        >
-          <lib-icon name="x" size="xs"></lib-icon>
-        </button>
-      </div>
-    </div>
-  `;
-}
-function fileUploaderTemplate(props) {
-  var _a, _b;
-  const {
-    zone,
-    title,
-    /*subtitle*/
-    hint,
-    multiple,
-    accept,
-    disabled,
-    isDragover,
-    entries,
-    imagePreviewUrl,
-    onDragover,
-    onDragleave,
-    onDrop,
-    onInputChange,
-    onRemove,
-    onUploadAll,
-    onClearAll,
-    onResetImage
-  } = props;
-  const doneCount = entries.filter((e) => e.status === "done").length;
-  const uploadingCount = entries.filter((e) => e.status === "uploading").length;
-  const allDone = entries.length > 0 && doneCount === entries.length;
-  const anyUploading = uploadingCount > 0;
-  if (zone === "default") {
-    return html`
-      <div class="fu-root">
-        <!-- Drop zone -->
-        <div
-          class="fu-zone ${isDragover ? "is-dragover" : ""} ${disabled ? "is-disabled" : ""}"
-          @dragover="${(e) => {
-      if (!disabled) onDragover(e);
-    }}"
-          @dragleave="${() => {
-      if (!disabled) onDragleave();
-    }}"
-          @drop="${(e) => {
-      if (!disabled) onDrop(e);
-    }}"
-        >
-          <!-- input real cubriendo toda la zona -->
-          <input
-            type="file"
-            ?multiple="${multiple}"
-            accept="${accept}"
-            ?disabled="${disabled}"
-            @change="${onInputChange}"
-            aria-label="${title}"
-          >
-
-          <div class="fu-zone-icon">
-            <lib-icon name="cloud-arrow-up" weight="thin" size="xl"></lib-icon>
-          </div>
-
-          <div>
-            <p class="fu-zone-title">${title}</p>
-            <p class="fu-zone-sub" style="margin-top:var(--lib-space-sm)">
-              o <span>busca en tu equipo</span>
-            </p>
-          </div>
-
-          <p class="fu-zone-hint">${hint}</p>
+    <div class="code-block">
+      <div class="code-block__header">
+        <div class="code-block__meta">
+          ${props.filename ? html`<span class="code-block__filename">${props.filename}</span>` : nothing}
+          <span class="code-block__lang">${props.language}</span>
         </div>
 
-        <!-- Lista de archivos -->
-        ${entries.length > 0 ? html`
-          <div class="fu-list">
-            ${o(entries, (entry) => renderFileEntry(entry, onRemove))}
-          </div>
-
-          <!-- Footer summary -->
-          <div class="fu-summary">
-            <span class="fu-summary-text">
-              ${allDone ? `${doneCount} archivo${doneCount !== 1 ? "s" : ""} subido${doneCount !== 1 ? "s" : ""}` : anyUploading ? `Subiendo ${uploadingCount} archivo${uploadingCount !== 1 ? "s" : ""}…` : `${entries.length} archivo${entries.length !== 1 ? "s" : ""} seleccionado${entries.length !== 1 ? "s" : ""}`}
-            </span>
-            <div style="display:flex;gap:var(--lib-space-sm)">
+        ${props.copyable ? html`
               <button
-                class="fu-summary-btn"
-                style="background:transparent;color:var(--text-muted);border:1px solid var(--border-default)"
-                ?disabled="${anyUploading}"
-                @click="${onClearAll}"
-              >Limpiar</button>
-              <button
-                class="fu-summary-btn"
-                ?disabled="${anyUploading || allDone}"
-                @click="${onUploadAll}"
+                class="code-block__copy ${props.copied ? "code-block__copy--copied" : ""}"
+                aria-label="${props.copied ? "Copiado" : "Copiar código"}"
+                @click=${props.onCopy}
               >
-                ${anyUploading ? "Subiendo…" : "Subir todo"}
+                ${props.copied ? html`
+                      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                        <path d="M2 8l4 4 8-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                      <span>Copiado</span>
+                    ` : html`
+                      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                        <rect x="5" y="5" width="9" height="9" rx="1" stroke="currentColor" stroke-width="1.5"/>
+                        <path d="M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                      </svg>
+                      <span>Copiar</span>
+                    `}
               </button>
-            </div>
-          </div>
-        ` : nothing}
+            ` : nothing}
       </div>
-    `;
-  }
-  if (zone === "compact") {
-    return html`
-      <div class="fu-root">
-        <div
-          class="fu-zone-sm ${isDragover ? "is-dragover" : ""} ${disabled ? "is-disabled" : ""}"
-          @dragover="${(e) => {
-      if (!disabled) onDragover(e);
-    }}"
-          @dragleave="${() => {
-      if (!disabled) onDragleave();
-    }}"
-          @drop="${(e) => {
-      if (!disabled) onDrop(e);
-    }}"
-        >
-          <input
-            type="file"
-            ?multiple="${multiple}"
-            accept="${accept}"
-            ?disabled="${disabled}"
-            @change="${onInputChange}"
-            aria-label="${title}"
-          >
-
-          <span class="fu-zone-sm-icon">
-            <lib-icon name="paperclip" size="md"></lib-icon>
-          </span>
-
-          <div class="fu-zone-sm-text">
-            <span class="fu-zone-sm-title">${title}</span>
-            <span class="fu-zone-sm-sub">${hint}</span>
-          </div>
-        </div>
 
-        ${entries.length > 0 ? html`
-          <div class="fu-list" style="margin-top:1px">
-            ${o(entries, (entry) => renderFileEntry(entry, onRemove))}
-          </div>
-        ` : nothing}
+      <div class="code-block__body">
+        <pre class="code-block__pre"><code class="code-block__code">${props.code}</code></pre>
       </div>
-    `;
-  }
-  return html`
-    <div class="fu-root">
-      <div
-        class="fu-zone-img ${isDragover ? "is-dragover" : ""} ${imagePreviewUrl ? "has-preview" : ""} ${disabled ? "is-disabled" : ""}"
-        @dragover="${(e) => {
-    if (!disabled) onDragover(e);
-  }}"
-        @dragleave="${() => {
-    if (!disabled) onDragleave();
-  }}"
-        @drop="${(e) => {
-    if (!disabled) onDrop(e);
-  }}"
-      >
-        <input
-          type="file"
-          accept="image/*"
-          ?disabled="${disabled || !!imagePreviewUrl}"
-          @change="${onInputChange}"
-          aria-label="${title}"
-        >
-
-        <!-- Placeholder (sin imagen) -->
-        <div class="fu-zone-img-placeholder">
-          <lib-icon name="image" weight="thin" size="xl" style="color:var(--text-muted)"></lib-icon>
-          <p class="fu-zone-sub">${title}</p>
-          <p class="fu-zone-hint">${hint}</p>
-        </div>
-
-        <!-- Preview (con imagen) -->
-        ${imagePreviewUrl ? html`<img class="fu-zone-img-preview" src="${imagePreviewUrl}" alt="Preview">` : nothing}
-
-        <!-- Overlay de reemplazo -->
-        ${imagePreviewUrl ? html`
-              <div class="fu-zone-img-overlay">
-                <lib-icon name="camera" size="md" style="color:#fff"></lib-icon>
-                <span class="fu-zone-img-overlay-text">Cambiar imagen</span>
-              </div>` : nothing}
-      </div>
-
-      <!-- Barra de progreso debajo de la zona imagen -->
-      ${entries.length > 0 && ((_a = entries[0]) == null ? void 0 : _a.status) === "uploading" ? html`
-            <div class="fu-progress-bar">
-              <div class="fu-progress-fill" style="width:${((_b = entries[0]) == null ? void 0 : _b.progress) ?? 0}%"></div>
-            </div>` : nothing}
-
-      ${imagePreviewUrl ? html`
-            <div style="display:flex;justify-content:flex-end;margin-top:var(--lib-space-sm)">
-              <button class="fu-file-remove" style="width:auto;padding:0 var(--lib-space-sm);border-radius:0;border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase" @click="${onResetImage}">
-                Eliminar
-              </button>
-            </div>` : nothing}
     </div>
   `;
 }
 export {
-  fileUploaderTemplate
+  codeBlockTemplate
 };
 //# sourceMappingURL=index294.js.map

package/dist/index294.js.map

@@ -1 +1 @@
-{"version":3,"file":"index294.js","sources":["../src/components/molecules/file-uploader/lib-file-uploader.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { FileEntry, FileUploaderTemplateProps } from './lib-file-uploader.types';\n\n/* ================================================================\n   FILE ENTRY — una fila en la lista\n   ================================================================ */\n\nfunction renderFileEntry(\n  entry: FileEntry,\n  onRemove: (id: string) => void,\n): TemplateResult {\n  const isUploading = entry.status === 'uploading';\n  const isDone      = entry.status === 'done';\n  const isError     = entry.status === 'error';\n\n  const rowCls = [\n    'fu-file',\n    isDone    ? 'is-done'      : '',\n    isError   ? 'is-error'     : '',\n    isUploading ? 'is-uploading' : '',\n  ].filter(Boolean).join(' ');\n\n  /* Icono o thumbnail para imágenes */\n  const ext = entry.file.name.split('.').pop()?.toLowerCase() ?? '';\n  const isImg = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext);\n\n  const fileSize = entry.file.size < 1024 * 1024\n    ? `${(entry.file.size / 1024).toFixed(0)} KB`\n    : `${(entry.file.size / (1024 * 1024)).toFixed(1)} MB`;\n\n  return html`\n    <div class=\"${rowCls}\">\n      <!-- Progress background -->\n      <div\n        class=\"fu-file-prog-bg\"\n        style=\"${styleMap({ width: isUploading ? `${entry.progress}%` : isDone ? '100%' : '0%' })}\"\n      ></div>\n\n      <!-- Thumbnail o icono -->\n      ${isImg && entry.previewUrl\n        ? html`<img class=\"fu-file-thumb\" src=\"${entry.previewUrl}\" alt=\"${entry.file.name}\">`\n        : html`\n            <div class=\"fu-file-icon\">\n              ${isDone\n                ? html`<lib-icon name=\"check-circle\" weight=\"fill\" size=\"sm\"></lib-icon>`\n                : isError\n                  ? html`<lib-icon name=\"warning-circle\" weight=\"fill\" size=\"sm\"></lib-icon>`\n                  : html`<span class=\"fu-ext\">${ext || '—'}</span>`}\n            </div>`}\n\n      <!-- Meta -->\n      <div class=\"fu-file-meta\">\n        <span class=\"fu-file-name\">${entry.file.name}</span>\n        <span class=\"fu-file-info\">\n          <span>${fileSize}</span>\n          ${isError\n            ? html`\n                <span class=\"fu-file-info-sep\"></span>\n                <span style=\"color:var(--color-error)\">${entry.errorMessage ?? 'Error al subir'}</span>`\n            : nothing}\n          ${isDone\n            ? html`\n                <span class=\"fu-file-info-sep\"></span>\n                <span style=\"color:var(--color-celadon-500)\">Completado</span>`\n            : nothing}\n        </span>\n      </div>\n\n      <!-- Acciones -->\n      <div class=\"fu-file-actions\">\n        ${isUploading\n          ? html`\n              <span class=\"fu-file-pct\">${entry.progress}%</span>\n              <span class=\"fu-spinner\"></span>`\n          : isDone\n            ? html`<span class=\"fu-status-done\"><lib-icon name=\"check-circle\" weight=\"fill\" size=\"sm\"></lib-icon></span>`\n            : isError\n              ? html`<span class=\"fu-status-error\"><lib-icon name=\"warning\" weight=\"fill\" size=\"sm\"></lib-icon></span>`\n              : nothing}\n\n        <button\n          class=\"fu-file-remove\"\n          aria-label=\"Eliminar ${entry.file.name}\"\n          @click=\"${(e: Event): void => { e.stopPropagation(); onRemove(entry.id); }}\"\n        >\n          <lib-icon name=\"x\" size=\"xs\"></lib-icon>\n        </button>\n      </div>\n    </div>\n  `;\n}\n\n/* ================================================================\n   TEMPLATE PRINCIPAL\n   ================================================================ */\n\nexport function fileUploaderTemplate(props: FileUploaderTemplateProps): TemplateResult {\n  const {\n    zone, title, /*subtitle*/ hint, multiple, accept, disabled,\n    isDragover, entries, imagePreviewUrl,\n    onDragover, onDragleave, onDrop, onInputChange, onRemove,\n    onUploadAll, onClearAll, onResetImage,\n  } = props;\n\n  const doneCount     = entries.filter(e => e.status === 'done').length;\n  const uploadingCount = entries.filter(e => e.status === 'uploading').length;\n  const allDone       = entries.length > 0 && doneCount === entries.length;\n  const anyUploading  = uploadingCount > 0;\n\n  /* ────────────────────────────────────\n     VARIANTE: default (zona grande)\n     ──────────────────────────────────── */\n  if (zone === 'default') {\n    return html`\n      <div class=\"fu-root\">\n        <!-- Drop zone -->\n        <div\n          class=\"fu-zone ${isDragover ? 'is-dragover' : ''} ${disabled ? 'is-disabled' : ''}\"\n          @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n          @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n          @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n        >\n          <!-- input real cubriendo toda la zona -->\n          <input\n            type=\"file\"\n            ?multiple=\"${multiple}\"\n            accept=\"${accept}\"\n            ?disabled=\"${disabled}\"\n            @change=\"${onInputChange}\"\n            aria-label=\"${title}\"\n          >\n\n          <div class=\"fu-zone-icon\">\n            <lib-icon name=\"cloud-arrow-up\" weight=\"thin\" size=\"xl\"></lib-icon>\n          </div>\n\n          <div>\n            <p class=\"fu-zone-title\">${title}</p>\n            <p class=\"fu-zone-sub\" style=\"margin-top:var(--lib-space-sm)\">\n              o <span>busca en tu equipo</span>\n            </p>\n          </div>\n\n          <p class=\"fu-zone-hint\">${hint}</p>\n        </div>\n\n        <!-- Lista de archivos -->\n        ${entries.length > 0 ? html`\n          <div class=\"fu-list\">\n            ${map(entries, (entry: FileEntry) => renderFileEntry(entry, onRemove))}\n          </div>\n\n          <!-- Footer summary -->\n          <div class=\"fu-summary\">\n            <span class=\"fu-summary-text\">\n              ${allDone\n                ? `${doneCount} archivo${doneCount !== 1 ? 's' : ''} subido${doneCount !== 1 ? 's' : ''}`\n                : anyUploading\n                  ? `Subiendo ${uploadingCount} archivo${uploadingCount !== 1 ? 's' : ''}…`\n                  : `${entries.length} archivo${entries.length !== 1 ? 's' : ''} seleccionado${entries.length !== 1 ? 's' : ''}`}\n            </span>\n            <div style=\"display:flex;gap:var(--lib-space-sm)\">\n              <button\n                class=\"fu-summary-btn\"\n                style=\"background:transparent;color:var(--text-muted);border:1px solid var(--border-default)\"\n                ?disabled=\"${anyUploading}\"\n                @click=\"${onClearAll}\"\n              >Limpiar</button>\n              <button\n                class=\"fu-summary-btn\"\n                ?disabled=\"${anyUploading || allDone}\"\n                @click=\"${onUploadAll}\"\n              >\n                ${anyUploading ? 'Subiendo…' : 'Subir todo'}\n              </button>\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  /* ────────────────────────────────────\n     VARIANTE: compact (horizontal)\n     ──────────────────────────────────── */\n  if (zone === 'compact') {\n    return html`\n      <div class=\"fu-root\">\n        <div\n          class=\"fu-zone-sm ${isDragover ? 'is-dragover' : ''} ${disabled ? 'is-disabled' : ''}\"\n          @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n          @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n          @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n        >\n          <input\n            type=\"file\"\n            ?multiple=\"${multiple}\"\n            accept=\"${accept}\"\n            ?disabled=\"${disabled}\"\n            @change=\"${onInputChange}\"\n            aria-label=\"${title}\"\n          >\n\n          <span class=\"fu-zone-sm-icon\">\n            <lib-icon name=\"paperclip\" size=\"md\"></lib-icon>\n          </span>\n\n          <div class=\"fu-zone-sm-text\">\n            <span class=\"fu-zone-sm-title\">${title}</span>\n            <span class=\"fu-zone-sm-sub\">${hint}</span>\n          </div>\n        </div>\n\n        ${entries.length > 0 ? html`\n          <div class=\"fu-list\" style=\"margin-top:1px\">\n            ${map(entries, (entry: FileEntry) => renderFileEntry(entry, onRemove))}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  /* ────────────────────────────────────\n     VARIANTE: image (preview inline)\n     ──────────────────────────────────── */\n  return html`\n    <div class=\"fu-root\">\n      <div\n        class=\"fu-zone-img ${isDragover ? 'is-dragover' : ''} ${imagePreviewUrl ? 'has-preview' : ''} ${disabled ? 'is-disabled' : ''}\"\n        @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n        @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n        @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n      >\n        <input\n          type=\"file\"\n          accept=\"image/*\"\n          ?disabled=\"${disabled || !!imagePreviewUrl}\"\n          @change=\"${onInputChange}\"\n          aria-label=\"${title}\"\n        >\n\n        <!-- Placeholder (sin imagen) -->\n        <div class=\"fu-zone-img-placeholder\">\n          <lib-icon name=\"image\" weight=\"thin\" size=\"xl\" style=\"color:var(--text-muted)\"></lib-icon>\n          <p class=\"fu-zone-sub\">${title}</p>\n          <p class=\"fu-zone-hint\">${hint}</p>\n        </div>\n\n        <!-- Preview (con imagen) -->\n        ${imagePreviewUrl\n          ? html`<img class=\"fu-zone-img-preview\" src=\"${imagePreviewUrl}\" alt=\"Preview\">`\n          : nothing}\n\n        <!-- Overlay de reemplazo -->\n        ${imagePreviewUrl\n          ? html`\n              <div class=\"fu-zone-img-overlay\">\n                <lib-icon name=\"camera\" size=\"md\" style=\"color:#fff\"></lib-icon>\n                <span class=\"fu-zone-img-overlay-text\">Cambiar imagen</span>\n              </div>`\n          : nothing}\n      </div>\n\n      <!-- Barra de progreso debajo de la zona imagen -->\n      ${entries.length > 0 && entries[0]?.status === 'uploading'\n        ? html`\n            <div class=\"fu-progress-bar\">\n              <div class=\"fu-progress-fill\" style=\"width:${entries[0]?.progress ?? 0}%\"></div>\n            </div>`\n        : nothing}\n\n      ${imagePreviewUrl\n        ? html`\n            <div style=\"display:flex;justify-content:flex-end;margin-top:var(--lib-space-sm)\">\n              <button class=\"fu-file-remove\" style=\"width:auto;padding:0 var(--lib-space-sm);border-radius:0;border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase\" @click=\"${onResetImage}\">\n                Eliminar\n              </button>\n            </div>`\n        : nothing}\n    </div>\n  `;\n}"],"names":["styleMap","map"],"mappings":"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"}
+{"version":3,"file":"index294.js","sources":["../src/components/atoms/code-block/lib-code-block.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibCodeBlockLanguage =\n  | 'bash'\n  | 'ts'\n  | 'js'\n  | 'html'\n  | 'css'\n  | 'json'\n  | 'text';\n\nexport interface CodeBlockTemplateProps {\n  code: string;\n  language: LibCodeBlockLanguage;\n  copyable: boolean;\n  copied: boolean;\n  filename: string;\n  onCopy: () => void;\n}\n\nexport function codeBlockTemplate(props: CodeBlockTemplateProps): TemplateResult {\n  return html`\n    <div class=\"code-block\">\n      <div class=\"code-block__header\">\n        <div class=\"code-block__meta\">\n          ${props.filename\n            ? html`<span class=\"code-block__filename\">${props.filename}</span>`\n            : nothing}\n          <span class=\"code-block__lang\">${props.language}</span>\n        </div>\n\n        ${props.copyable\n          ? html`\n              <button\n                class=\"code-block__copy ${props.copied ? 'code-block__copy--copied' : ''}\"\n                aria-label=\"${props.copied ? 'Copiado' : 'Copiar código'}\"\n                @click=${props.onCopy}\n              >\n                ${props.copied\n                  ? html`\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M2 8l4 4 8-8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span>Copiado</span>\n                    `\n                  : html`\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                        <rect x=\"5\" y=\"5\" width=\"9\" height=\"9\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n                        <path d=\"M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                      <span>Copiar</span>\n                    `}\n              </button>\n            `\n          : nothing}\n      </div>\n\n      <div class=\"code-block__body\">\n        <pre class=\"code-block__pre\"><code class=\"code-block__code\">${props.code}</code></pre>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAoBO,SAAS,kBAAkB,OAA+C;AAC/E,SAAO;AAAA;AAAA;AAAA;AAAA,YAIG,MAAM,WACJ,0CAA0C,MAAM,QAAQ,YACxD,OAAO;AAAA,2CACsB,MAAM,QAAQ;AAAA;AAAA;AAAA,UAG/C,MAAM,WACJ;AAAA;AAAA,0CAE8B,MAAM,SAAS,6BAA6B,EAAE;AAAA,8BAC1D,MAAM,SAAS,YAAY,eAAe;AAAA,yBAC/C,MAAM,MAAM;AAAA;AAAA,kBAEnB,MAAM,SACJ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMC;AAAA;AAAA,gBAGT,OAAO;AAAA;AAAA;AAAA;AAAA,sEAImD,MAAM,IAAI;AAAA;AAAA;AAAA;AAIhF;"}

package/dist/index295.js

@@ -1,5 +1,5 @@
-const segmentedCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:inline-block;vertical-align:middle}:host([full]){display:block;width:100%}}@layer components{.seg{display:inline-flex;align-items:stretch;position:relative;-webkit-user-select:none;user-select:none}.seg-thumb{position:absolute;top:0;bottom:0;left:0;pointer-events:none;z-index:1;transition:transform var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-out)}.seg-option{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:color var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}.seg-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.seg-badge-dot{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-family:var(--lib-font-mono);letter-spacing:0;line-height:1;background:var(--color-kaki-500);color:var(--color-white);border-radius:var(--radius-full)}.seg-option.is-active .seg-badge-dot{background:#ffffff4d}.seg-option.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}:host([disabled]) .seg{opacity:.55;pointer-events:none}:host([full]) .seg{width:100%}:host([full]) .seg-option{flex:1}:host([icon-only]) .seg-option{min-width:44px;padding:var(--lib-space-sm)}:host([variant="outline"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="outline"]) .seg-thumb{background:var(--color-washi-900);top:3px;bottom:3px}:host([variant="outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="outline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="outline"]) .seg-option.is-active{color:var(--color-washi-50)}:host([variant="underline"]) .seg{background:transparent;border-bottom:1px solid var(--border-subtle);gap:0;padding:0}:host([variant="underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-500);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-bottom:2px solid transparent}:host([variant="underline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="underline"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="pill"]) .seg{background:var(--color-washi-100);border:1px solid var(--border-subtle);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="pill"]) .seg-thumb{background:var(--bg-elevated);border-radius:var(--radius-full);top:4px;bottom:4px;box-shadow:0 1px 4px var(--color-ink-20)}:host([variant="pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-radius:var(--radius-full);min-width:80px}:host([variant="pill"]) .seg-option:hover{color:var(--text-primary)}:host([variant="pill"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg{background:transparent;gap:0}:host([variant="ghost"]) .seg-thumb{display:none}:host([variant="ghost"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);border-right:1px solid var(--border-subtle)}:host([variant="ghost"]) .seg-option:last-child{border-right:none}:host([variant="ghost"]) .seg-option:hover{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active:after{content:"";position:absolute;bottom:-1px;left:var(--lib-space-md);right:var(--lib-space-md);height:1px;background:var(--color-kaki-500)}:host([variant="kaki"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="kaki"]) .seg-option:hover{color:var(--text-primary)}:host([variant="kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="celadon"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="celadon"]) .seg-thumb{background:var(--color-celadon-500);top:3px;bottom:3px}:host([variant="celadon"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="celadon"]) .seg-option:hover{color:var(--text-primary)}:host([variant="celadon"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-outline"]) .seg{border:1px solid rgb(255,255,255,.1);background:#ffffff0a;padding:3px;gap:0}:host([variant="dark-outline"]) .seg-thumb{background:#faf7f41f;top:3px;bottom:3px}:host([variant="dark-outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f447;min-width:80px}:host([variant="dark-outline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-outline"]) .seg-option.is-active{color:#faf7f4cc}:host([variant="dark-pill"]) .seg{background:#ffffff0f;border:1px solid rgb(255,255,255,.07);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="dark-pill"]) .seg-thumb{background:#faf7f41f;border-radius:var(--radius-full);top:4px;bottom:4px}:host([variant="dark-pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447;border-radius:var(--radius-full);min-width:80px}:host([variant="dark-pill"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-pill"]) .seg-option.is-active{color:#faf7f4d9}:host([variant="dark-kaki"]) .seg{border:1px solid rgb(255,255,255,.07);background:#ffffff08;padding:3px;gap:0}:host([variant="dark-kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="dark-kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f44d;min-width:80px}:host([variant="dark-kaki"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-underline"]) .seg{background:transparent;border-bottom:1px solid rgb(255,255,255,.07);gap:0;padding:0}:host([variant="dark-underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-400);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="dark-underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447}:host([variant="dark-underline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-underline"]) .seg-option.is-active{color:#faf7f4cc}:host([size="sm"]) .seg-option{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px;min-width:60px}:host([size="sm"][variant="pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="dark-pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="dark-pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="outline"]) .seg{padding:2px}:host([size="sm"][variant="outline"]) .seg-thumb{top:2px;bottom:2px}:host([size="sm"][variant="kaki"]) .seg{padding:2px}:host([size="sm"][variant="kaki"]) .seg-thumb{top:2px;bottom:2px}:host([size="lg"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-lg);font-size:.75rem;min-width:100px}:host([size="lg"][variant="pill"]) .seg{padding:5px}:host([size="lg"][variant="pill"]) .seg-thumb{top:5px;bottom:5px}:host([size="lg"][variant="dark-pill"]) .seg{padding:5px}:host([size="lg"][variant="dark-pill"]) .seg-thumb{top:5px;bottom:5px}:host([glitch]) .seg-option.is-active:before,:host([glitch]) .seg-option.is-active:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:0}:host([glitch]) .seg-option.is-active:before{color:var(--color-kaki-400);mix-blend-mode:screen}:host([glitch]) .seg-option.is-active:after{color:var(--color-celadon-400);mix-blend-mode:screen}:host([glitch]) .seg-option.glitch-on:before{opacity:.7;animation:seg-glitch-a .24s steps(1) infinite}:host([glitch]) .seg-option.glitch-on:after{opacity:.5;animation:seg-glitch-b .24s steps(1) infinite;animation-delay:30ms}@keyframes seg-glitch-a{0%{clip-path:inset(30% 0 50% 0);transform:translate(-2px)}50%{clip-path:inset(60% 0 10% 0);transform:translate(2px)}}@keyframes seg-glitch-b{0%{clip-path:inset(50% 0 20% 0);transform:translate(2px)}50%{clip-path:inset(10% 0 60% 0);transform:translate(-2px)}}.seg-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.seg-ripple-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:currentcolor;transform:scale(0);opacity:.25;animation:seg-ripple .36s ease-out forwards}@keyframes seg-ripple{to{transform:scale(40);opacity:0}}}';
+const codeBlockCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.code-block{display:flex;flex-direction:column;border:var(--lib-border-width) solid var(--color-ink-100);border-radius:var(--lib-radius-md);background:var(--color-washi-950);box-shadow:var(--lib-shadow-brutal);overflow:hidden;width:100%}.code-block__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-xs) var(--lib-space-md);background:var(--color-washi-900);border-bottom:var(--lib-border-width) solid var(--color-ink-40);min-height:36px;gap:var(--lib-space-md)}.code-block__meta{display:flex;align-items:center;gap:var(--lib-space-sm)}.code-block__filename{font-family:var(--lib-font-mono);font-size:var(--text-sm);color:var(--color-washi-200);letter-spacing:var(--tracking-normal)}.code-block__lang{font-family:var(--lib-font-mono);font-size:10px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-washi-500);background:var(--color-washi-800);border:var(--lib-border-width) solid var(--color-washi-700);border-radius:var(--lib-radius-xs);padding:1px var(--lib-space-xs)}.code-block__copy{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:11px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-washi-400);background:transparent;border:var(--lib-border-width) solid var(--color-washi-700);border-radius:var(--lib-radius-xs);padding:3px var(--lib-space-sm);cursor:pointer;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);white-space:nowrap;flex-shrink:0}.code-block__copy:hover{color:var(--color-washi-100);border-color:var(--color-washi-400);background:var(--color-washi-800)}.code-block__copy:active{transform:scale(.97)}.code-block__copy--copied{color:var(--color-celadon-300);border-color:var(--color-celadon-600)}.code-block__copy--copied:hover{color:var(--color-celadon-300);border-color:var(--color-celadon-500);background:transparent}.code-block__body{overflow-x:auto;padding:var(--lib-space-md) var(--lib-space-lg)}.code-block__pre{font-family:var(--lib-font-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-washi-100);white-space:pre;-moz-tab-size:2;tab-size:2}.code-block__code{font-family:inherit;font-size:inherit;color:inherit}:host([variant="ghost"]) .code-block{background:var(--color-washi-100);box-shadow:none}:host([variant="ghost"]) .code-block__header{background:var(--color-washi-200);border-bottom-color:var(--color-washi-300)}:host([variant="ghost"]) .code-block__lang{background:var(--color-washi-100);border-color:var(--color-washi-300);color:var(--color-washi-600)}:host([variant="ghost"]) .code-block__copy{color:var(--color-washi-600);border-color:var(--color-washi-300)}:host([variant="ghost"]) .code-block__copy:hover{color:var(--color-washi-800);border-color:var(--color-washi-500);background:var(--color-washi-200)}:host([variant="ghost"]) .code-block__pre{color:var(--color-washi-800)}}';
 export {
-  segmentedCss as default
+  codeBlockCss as default
 };
 //# sourceMappingURL=index295.js.map

package/dist/index296.js

@@ -1,75 +1,5 @@
-import { nothing, html } from "lit";
-import { map as o } from "./index301.js";
-function segmentedTemplate(props) {
-  const {
-    options,
-    value,
-    variant,
-    size,
-    full,
-    iconOnly,
-    disabled,
-    glitch,
-    thumbStyle,
-    onSelect
-  } = props;
-  const isGhost = variant === "ghost";
-  const trackCls = [
-    "seg",
-    `seg-${variant}`,
-    size !== "md" ? `seg-${size}` : "",
-    full ? "seg-full" : "",
-    iconOnly ? "seg-icon-only" : "",
-    glitch ? "seg-glitch" : ""
-  ].filter(Boolean).join(" ");
-  return html`
-    <div
-      class="${trackCls}"
-      role="radiogroup"
-      aria-disabled="${disabled}"
-    >
-      <!-- Thumb — indicador animado de selección -->
-      ${isGhost ? nothing : html`<div class="seg-thumb" style="${thumbStyle}"></div>`}
-
-      <!-- Opciones -->
-      ${o(options, (opt) => {
-    const isActive = opt.value === value;
-    const isDisabled = opt.disabled ?? false;
-    const optCls = [
-      "seg-option",
-      isActive ? "is-active" : "",
-      isDisabled ? "is-disabled" : ""
-    ].filter(Boolean).join(" ");
-    return html`
-          <div
-            class="${optCls}"
-            role="radio"
-            aria-checked="${isActive}"
-            aria-disabled="${isDisabled}"
-            data-label="${opt.label}"
-            data-value="${opt.value}"
-            @click="${(e) => {
-      if (disabled || isDisabled) return;
-      onSelect(opt, e);
-    }}"
-          >
-            <!-- Icono Phosphor (slot reutilizando lib-icon) -->
-            ${opt.icon ? html`<span class="seg-icon">
-                  <lib-icon name="${opt.icon}" size="xs"></lib-icon>
-                </span>` : nothing}
-
-            <!-- Label — oculto si icon-only -->
-            ${iconOnly ? nothing : html`<span class="seg-label">${opt.label}</span>`}
-
-            <!-- Badge numérico opcional -->
-            ${opt.badge != null ? html`<span class="seg-badge-dot">${opt.badge}</span>` : nothing}
-          </div>
-        `;
-  })}
-    </div>
-  `;
-}
+const colorScaleStyles = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.scale-wrap{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem);width:100%}.scale-track{display:flex;width:100%;height:var(--lib-color-scale-height, 56px);overflow:hidden}.scale-swatch{flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--lib-space-xs, .25rem);cursor:default;transition:flex var(--duration-slow, .35s) var(--ease-out, cubic-bezier(0,0,.2,1)),filter var(--duration-base, .2s) var(--ease-out, cubic-bezier(0,0,.2,1))}.scale-track:has(.scale-swatch:hover) .scale-swatch{flex:.7}.scale-track .scale-swatch:hover{flex:1.8;filter:brightness(1.06)}.scale-swatch-label{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.6rem;letter-spacing:.1em;line-height:1;opacity:0;transform:translateY(4px);transition:opacity var(--duration-base, .2s) var(--ease-out, cubic-bezier(0,0,.2,1)),transform var(--duration-base, .2s) var(--ease-out, cubic-bezier(0,0,.2,1));pointer-events:none;-webkit-user-select:none;user-select:none}.scale-swatch:hover .scale-swatch-label{opacity:1;transform:translateY(0)}.scale-legends{display:flex;justify-content:space-between;align-items:center}.scale-legend{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.6rem;letter-spacing:.12em;text-transform:lowercase;color:var(--text-muted, var(--color-washi-400, #B8A99A));white-space:nowrap}@supports not selector(:has(a)){.scale-swatch:hover{flex:1.8}}@media(prefers-reduced-motion:reduce){.scale-swatch,.scale-swatch-label{transition:none}}}';
 export {
-  segmentedTemplate
+  colorScaleStyles as default
 };
 //# sourceMappingURL=index296.js.map

package/dist/index296.js.map

@@ -1 +1 @@
-{"version":3,"file":"index296.js","sources":["../src/components/molecules/segmented-control/lib-segmented-control.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type { SegmentedOption, SegmentedTemplateProps } from './lib-segmented-control.types';\n\n/**\n * Template del componente lib-segmented-control.\n *\n * El thumb se posiciona via `style` calculado en el componente\n * (offsetLeft / offsetWidth del option activo).\n * La variante ghost oculta el thumb con CSS y usa un ::after de línea.\n */\nexport function segmentedTemplate(props: SegmentedTemplateProps): TemplateResult {\n  const {\n    options, value, variant, size, full,\n    iconOnly, disabled, glitch, thumbStyle, onSelect,\n  } = props;\n\n  const isGhost      = variant === 'ghost';\n  //const isUnderline  = variant === 'underline' || variant === 'dark-underline';\n  //const isPill       = variant === 'pill' || variant === 'dark-pill';\n\n  const trackCls = [\n    'seg',\n    `seg-${variant}`,\n    size !== 'md' ? `seg-${size}` : '',\n    full     ? 'seg-full'      : '',\n    iconOnly ? 'seg-icon-only' : '',\n    glitch   ? 'seg-glitch'    : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <div\n      class=\"${trackCls}\"\n      role=\"radiogroup\"\n      aria-disabled=\"${disabled}\"\n    >\n      <!-- Thumb — indicador animado de selección -->\n      ${isGhost ? nothing : html`<div class=\"seg-thumb\" style=\"${thumbStyle}\"></div>`}\n\n      <!-- Opciones -->\n      ${map(options, (opt: SegmentedOption) => {\n        const isActive   = opt.value === value;\n        const isDisabled = opt.disabled ?? false;\n\n        const optCls = [\n          'seg-option',\n          isActive   ? 'is-active'   : '',\n          isDisabled ? 'is-disabled' : '',\n        ].filter(Boolean).join(' ');\n\n        return html`\n          <div\n            class=\"${optCls}\"\n            role=\"radio\"\n            aria-checked=\"${isActive}\"\n            aria-disabled=\"${isDisabled}\"\n            data-label=\"${opt.label}\"\n            data-value=\"${opt.value}\"\n            @click=\"${(e: MouseEvent): void => {\n              if (disabled || isDisabled) return;\n              onSelect(opt, e);\n            }}\"\n          >\n            <!-- Icono Phosphor (slot reutilizando lib-icon) -->\n            ${opt.icon\n              ? html`<span class=\"seg-icon\">\n                  <lib-icon name=\"${opt.icon}\" size=\"xs\"></lib-icon>\n                </span>`\n              : nothing}\n\n            <!-- Label — oculto si icon-only -->\n            ${iconOnly\n              ? nothing\n              : html`<span class=\"seg-label\">${opt.label}</span>`}\n\n            <!-- Badge numérico opcional -->\n            ${opt.badge != null\n              ? html`<span class=\"seg-badge-dot\">${opt.badge}</span>`\n              : nothing}\n          </div>\n        `;\n      })}\n    </div>\n  `;\n}"],"names":["map"],"mappings":";;AAWO,SAAS,kBAAkB,OAA+C;AAC/E,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAA,IACtC;AAEJ,QAAM,UAAe,YAAY;AAIjC,QAAM,WAAW;AAAA,IACf;AAAA,IACA,OAAO,OAAO;AAAA,IACd,SAAS,OAAO,OAAO,IAAI,KAAK;AAAA,IAChC,OAAW,aAAkB;AAAA,IAC7B,WAAW,kBAAkB;AAAA,IAC7B,SAAW,eAAkB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA,eAEM,QAAQ;AAAA;AAAA,uBAEA,QAAQ;AAAA;AAAA;AAAA,QAGvB,UAAU,UAAU,qCAAqC,UAAU,UAAU;AAAA;AAAA;AAAA,QAG7EA,EAAI,SAAS,CAAC,QAAyB;AACvC,UAAM,WAAa,IAAI,UAAU;AACjC,UAAM,aAAa,IAAI,YAAY;AAEnC,UAAM,SAAS;AAAA,MACb;AAAA,MACA,WAAa,cAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,IAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,WAAO;AAAA;AAAA,qBAEM,MAAM;AAAA;AAAA,4BAEC,QAAQ;AAAA,6BACP,UAAU;AAAA,0BACb,IAAI,KAAK;AAAA,0BACT,IAAI,KAAK;AAAA,sBACb,CAAC,MAAwB;AACjC,UAAI,YAAY,WAAY;AAC5B,eAAS,KAAK,CAAC;AAAA,IACjB,CAAC;AAAA;AAAA;AAAA,cAGC,IAAI,OACF;AAAA,oCACoB,IAAI,IAAI;AAAA,2BAE5B,OAAO;AAAA;AAAA;AAAA,cAGT,WACE,UACA,+BAA+B,IAAI,KAAK,SAAS;AAAA;AAAA;AAAA,cAGnD,IAAI,SAAS,OACX,mCAAmC,IAAI,KAAK,YAC5C,OAAO;AAAA;AAAA;AAAA,EAGjB,CAAC,CAAC;AAAA;AAAA;AAGR;"}
+{"version":3,"file":"index296.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index297.js

@@ -1,5 +1,45 @@
-const inputStyles = "@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.input-group{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.input-label{font-family:var(--lib-font-mono);font-size:10px;font-weight:var(--weight-regular);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--border-default);display:flex;align-items:center;gap:var(--lib-space-xs)}.input-required{color:var(--color-error);font-size:var(--text-xs)}.input-wrapper{display:flex;align-items:center;gap:var(--lib-space-sm);padding:0 var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-none);min-height:42px;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.input-wrapper:focus-within{border-color:var(--color-washi-800);box-shadow:0 0 0 3px var(--color-ink-10)}input{flex:1;border:none;background:transparent;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);padding:var(--lib-space-sm) 0;outline:none;width:100%}input::placeholder{color:var(--border-strong)}::slotted(*){display:flex;align-items:center;color:var(--text-muted);font-size:var(--text-sm);flex-shrink:0}.input-password-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:var(--lib-space-xs);cursor:pointer;color:var(--text-muted);flex-shrink:0;transition:color var(--duration-base) var(--ease-default)}.input-password-toggle:hover{color:var(--text-primary)}.has-error .input-wrapper{border-color:var(--color-error)}.has-error .input-wrapper:focus-within{border-color:var(--color-error);box-shadow:0 0 0 3px #8c2a1a1a}.has-error .input-label{color:var(--color-error)}.input-error-message{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-error)}.is-disabled .input-wrapper{background:var(--bg-surface);border-color:var(--border-subtle);cursor:not-allowed}.is-disabled input{cursor:not-allowed;color:var(--text-muted)}.is-disabled .input-label{color:var(--text-muted)}}";
+import { nothing, html } from "lit";
+function labelColor(step) {
+  return step <= 400 ? "rgba(26,20,14,0.45)" : "rgba(250,247,244,0.55)";
+}
+function colorScaleTemplate(ctx) {
+  const steps = ctx.steps ?? [];
+  const first = steps[0];
+  const last = steps[steps.length - 1];
+  return html`
+    <div class="scale-wrap">
+
+      <!-- Swatches -->
+      <div class="scale-track">
+        ${steps.map((s) => html`
+          <div
+            class="scale-swatch"
+            style="background:${s.oklch ?? s.hex};"
+            title="${ctx.name}-${s.step} · ${s.hex}"
+          >
+            <span class="scale-swatch-label" style="color:${labelColor(s.step)};">
+              ${s.step}
+            </span>
+          </div>
+        `)}
+      </div>
+
+      <!-- Extreme labels -->
+      ${ctx.showLabels && first && last ? html`
+        <div class="scale-legends">
+          <span class="scale-legend">
+            ${ctx.name}-${first.step} · ${first.hex}
+          </span>
+          <span class="scale-legend scale-legend--right">
+            ${ctx.name}-${last.step} · ${last.hex}
+          </span>
+        </div>
+      ` : nothing}
+
+    </div>
+  `;
+}
 export {
-  inputStyles as default
+  colorScaleTemplate
 };
 //# sourceMappingURL=index297.js.map

package/dist/index297.js.map

@@ -1 +1 @@
-{"version":3,"file":"index297.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index297.js","sources":["../src/components/atoms/color-scale/lib-color-scale.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibColorScale } from './lib-color-scale.component';\nimport type { ColorStep } from './lib-color-scale.types';\n\n/**\n * Determina si el label del paso debe mostrarse en color claro u oscuro\n * según el luminance aproximado del paso (por encima de 500 → oscuro, por debajo → claro).\n */\nfunction labelColor(step: number): string {\n  return step <= 400\n    ? 'rgba(26,20,14,0.45)'   /* sobre claro */\n    : 'rgba(250,247,244,0.55)'; /* sobre oscuro */\n}\n\nexport function colorScaleTemplate(ctx: LibColorScale): TemplateResult {\n  const steps = ctx.steps ?? [];\n  const first = steps[0];\n  const last  = steps[steps.length - 1];\n\n  return html`\n    <div class=\"scale-wrap\">\n\n      <!-- Swatches -->\n      <div class=\"scale-track\">\n        ${steps.map((s: ColorStep) => html`\n          <div\n            class=\"scale-swatch\"\n            style=\"background:${s.oklch ?? s.hex};\"\n            title=\"${ctx.name}-${s.step} · ${s.hex}\"\n          >\n            <span class=\"scale-swatch-label\" style=\"color:${labelColor(s.step)};\">\n              ${s.step}\n            </span>\n          </div>\n        `)}\n      </div>\n\n      <!-- Extreme labels -->\n      ${ctx.showLabels && first && last ? html`\n        <div class=\"scale-legends\">\n          <span class=\"scale-legend\">\n            ${ctx.name}-${first.step} · ${first.hex}\n          </span>\n          <span class=\"scale-legend scale-legend--right\">\n            ${ctx.name}-${last.step} · ${last.hex}\n          </span>\n        </div>\n      ` : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAQA,SAAS,WAAW,MAAsB;AACxC,SAAO,QAAQ,MACX,wBACA;AACN;AAEO,SAAS,mBAAmB,KAAoC;AACrE,QAAM,QAAQ,IAAI,SAAS,CAAA;AAC3B,QAAM,QAAQ,MAAM,CAAC;AACrB,QAAM,OAAQ,MAAM,MAAM,SAAS,CAAC;AAEpC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC,MAAM,IAAI,CAAC,MAAiB;AAAA;AAAA;AAAA,gCAGN,EAAE,SAAS,EAAE,GAAG;AAAA,qBAC3B,IAAI,IAAI,IAAI,EAAE,IAAI,MAAM,EAAE,GAAG;AAAA;AAAA,4DAEU,WAAW,EAAE,IAAI,CAAC;AAAA,gBAC9D,EAAE,IAAI;AAAA;AAAA;AAAA,SAGb,CAAC;AAAA;AAAA;AAAA;AAAA,QAIF,IAAI,cAAc,SAAS,OAAO;AAAA;AAAA;AAAA,cAG5B,IAAI,IAAI,IAAI,MAAM,IAAI,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,cAGrC,IAAI,IAAI,IAAI,KAAK,IAAI,MAAM,KAAK,GAAG;AAAA;AAAA;AAAA,UAGvC,OAAO;AAAA;AAAA;AAAA;AAIjB;"}

package/dist/index298.js

@@ -1,69 +1,20 @@
 import { nothing, html } from "lit";
-function inputTemplate(props) {
-  const inputType = props.type === "password" && props.showPassword ? "text" : props.type;
+function rendercontentPillar(ctx) {
   return html`
-    <div class="input-group ${props.error ? "has-error" : ""} ${props.disabled ? "is-disabled" : ""}">
+    <div class="pillar" part="pillar">
 
-      ${props.label ? html`
-        <label
-          class="input-label"
-          for="${props.uuid}"
-        >
-          ${props.label}
-          ${props.required ? html`<span class="input-required" aria-hidden="true">*</span>` : nothing}
-        </label>
-      ` : nothing}
+      ${ctx.kanji ? html`<div class="pillar-kanji" part="kanji" aria-hidden="true">${ctx.kanji}</div>` : nothing}
 
-      <div class="input-wrapper">
-        <slot name="prefix"></slot>
+      <div class="pillar-body" part="body">
+        ${ctx.label ? html`<p class="pillar-label" part="label">${ctx.label}</p>` : nothing}
 
-        <input
-          id="${props.uuid}"
-          type="${inputType}"
-          placeholder="${props.placeholder}"
-          ?required="${props.required}"
-          ?disabled="${props.disabled}"
-          aria-invalid="${props.error}"
-          aria-describedby="${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}"
-          .value="${props.value}"
-          @input="${props.handleInput}"
-        />
-
-        ${props.type === "password" ? html`
-          <button
-            class="input-password-toggle"
-            type="button"
-            @click="${props.handleTogglePassword}"
-            aria-label="${props.showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}"
-          >
-            ${props.showPassword ? html`
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <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"/>
-                <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"/>
-                <line x1="1" y1="1" x2="23" y2="23"/>
-              </svg>
-            ` : html`
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                <circle cx="12" cy="12" r="3"/>
-              </svg>
-            `}
-          </button>
-        ` : nothing}
-
-        <slot name="suffix"></slot>
+        ${ctx.description ? html`<p class="pillar-desc" part="description">${ctx.description}</p>` : html`<slot></slot>`}
       </div>
 
-      ${props.error && props.errorMessage ? html`
-        <span class="input-error-message" id="${props.uuid}-error" role="alert">
-          ${props.errorMessage}
-        </span>
-      ` : nothing}
-
     </div>
   `;
 }
 export {
-  inputTemplate
+  rendercontentPillar
 };
 //# sourceMappingURL=index298.js.map