@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index318.js

@@ -1,42 +1,94 @@
 import { nothing, html } from "lit";
-function codeBlockTemplate(props) {
+const SEGMENT_TONE_CLASS = {
+  default: "seg-default",
+  kaki: "seg-kaki",
+  celadon: "seg-celadon",
+  error: "seg-error",
+  muted: "seg-muted"
+};
+const SEGMENT_TONE_VAR = {
+  default: "var(--color-washi-900)",
+  kaki: "var(--color-kaki-500)",
+  celadon: "var(--color-celadon-500)",
+  error: "var(--color-error)",
+  muted: "var(--color-washi-300)"
+};
+function segmentColor(seg) {
+  if (seg.color) return seg.color;
+  const tone = seg.tone ?? "default";
+  return SEGMENT_TONE_VAR[tone];
+}
+function segmentClass(seg) {
+  if (seg.color) return "";
+  return SEGMENT_TONE_CLASS[seg.tone ?? "default"];
+}
+function multiBarTpl(props) {
+  const hasLegend = props.segments.some((s) => s.label);
   return html`
-    <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>
-
-        ${props.copyable ? html`
-              <button
-                class="code-block__copy ${props.copied ? "code-block__copy--copied" : ""}"
-                aria-label="${props.copied ? "Copiado" : "Copiar código"}"
-                @click=${props.onCopy}
-              >
-                ${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>
-            ` : nothing}
-      </div>
+    <div class="pb-multi">
+      ${props.segments.map((seg) => html`
+        <div
+          class="pb-segment ${segmentClass(seg)}"
+          style="
+            width: ${seg.percent}%;
+            ${seg.color ? `background: ${seg.color};` : ""}
+          "
+        ></div>
+      `)}
+    </div>
 
-      <div class="code-block__body">
-        <pre class="code-block__pre"><code class="code-block__code">${props.code}</code></pre>
+    ${hasLegend ? html`
+      <div class="pb-legend">
+        ${props.segments.filter((s) => s.label).map((seg) => html`
+          <div class="pb-legend-item">
+            <div
+              class="pb-legend-dot"
+              style="background: ${segmentColor(seg)};"
+            ></div>
+            <span class="pb-legend-text">${seg.label}</span>
+          </div>
+        `)}
+      </div>` : nothing}
+  `;
+}
+function singleBarTpl(props) {
+  const showInnerValue = props.size === "xl" && props.showValue && !props.indeterminate;
+  return html`
+    <div
+      class="pb"
+      role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="${props.max}"
+      aria-valuenow="${props.indeterminate ? nothing : props.rawValue}"
+      aria-label="${props.ariaLabel || nothing}"
+    >
+      <div class="pb-fill" style="width: ${props.indeterminate ? 100 : props.percent}%">
+        ${showInnerValue ? html`<span class="pb-inner-value">${Math.round(props.percent)}%</span>` : nothing}
       </div>
     </div>
   `;
 }
+function progressTemplate(props) {
+  const isMulti = props.segments.length > 0;
+  const hasMeta = !!(props.label || props.valueLabel);
+  const showPercent = !isMulti && props.showValue && !props.indeterminate && props.size !== "xl";
+  const displayValue = props.valueLabel ? props.valueLabel : showPercent ? `${Math.round(props.percent)}%` : nothing;
+  const barTpl = isMulti ? multiBarTpl(props) : singleBarTpl(props);
+  if (hasMeta) {
+    return html`
+      <div class="pb-wrap">
+        <div class="pb-header">
+          <span class="pb-label">${props.label}</span>
+          ${displayValue !== nothing ? html`<span class="pb-value">${displayValue}</span>` : nothing}
+        </div>
+        ${barTpl}
+        ${props.sub ? html`<span class="pb-sub">${props.sub}</span>` : nothing}
+      </div>
+    `;
+  }
+  return html`${barTpl}`;
+}
 export {
-  codeBlockTemplate
+  progressTemplate
 };
 //# sourceMappingURL=index318.js.map

package/dist/index318.js.map

@@ -1 +1 @@
-{"version":3,"file":"index318.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;"}
+{"version":3,"file":"index318.js","sources":["../src/components/atoms/progress/lib-progress.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { ProgressTemplateProps, ProgressSegment, ProgressSegmentTone } from './lib-progress.types';\n\n/* ── Tone → CSS class for segments ── */\nconst SEGMENT_TONE_CLASS: Record<ProgressSegmentTone, string> = {\n  default: 'seg-default',\n  kaki:    'seg-kaki',\n  celadon: 'seg-celadon',\n  error:   'seg-error',\n  muted:   'seg-muted',\n};\n\n/* ── Tone → CSS variable for legend dot ── */\nconst SEGMENT_TONE_VAR: Record<ProgressSegmentTone, string> = {\n  default: 'var(--color-washi-900)',\n  kaki:    'var(--color-kaki-500)',\n  celadon: 'var(--color-celadon-500)',\n  error:   'var(--color-error)',\n  muted:   'var(--color-washi-300)',\n};\n\nfunction segmentColor(seg: ProgressSegment): string {\n  if (seg.color) return seg.color;\n  const tone = seg.tone ?? 'default';\n  return SEGMENT_TONE_VAR[tone];\n}\n\nfunction segmentClass(seg: ProgressSegment): string {\n  if (seg.color) return '';\n  return SEGMENT_TONE_CLASS[seg.tone ?? 'default'];\n}\n\n/* ── Multi-segment bar ── */\nfunction multiBarTpl(props: ProgressTemplateProps): TemplateResult {\n  const hasLegend = props.segments.some(s => s.label);\n\n  return html`\n    <div class=\"pb-multi\">\n      ${props.segments.map(seg => html`\n        <div\n          class=\"pb-segment ${segmentClass(seg)}\"\n          style=\"\n            width: ${seg.percent}%;\n            ${seg.color ? `background: ${seg.color};` : ''}\n          \"\n        ></div>\n      `)}\n    </div>\n\n    ${hasLegend ? html`\n      <div class=\"pb-legend\">\n        ${props.segments.filter(s => s.label).map(seg => html`\n          <div class=\"pb-legend-item\">\n            <div\n              class=\"pb-legend-dot\"\n              style=\"background: ${segmentColor(seg)};\"\n            ></div>\n            <span class=\"pb-legend-text\">${seg.label}</span>\n          </div>\n        `)}\n      </div>` : nothing}\n  `;\n}\n\n/* ── Single bar ── */\nfunction singleBarTpl(props: ProgressTemplateProps): TemplateResult {\n  const showInnerValue = props.size === 'xl' && props.showValue && !props.indeterminate;\n\n  return html`\n    <div\n      class=\"pb\"\n      role=\"progressbar\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"${props.max}\"\n      aria-valuenow=\"${props.indeterminate ? nothing : props.rawValue}\"\n      aria-label=\"${props.ariaLabel || nothing}\"\n    >\n      <div class=\"pb-fill\" style=\"width: ${props.indeterminate ? 100 : props.percent}%\">\n        ${showInnerValue\n          ? html`<span class=\"pb-inner-value\">${Math.round(props.percent)}%</span>`\n          : nothing}\n      </div>\n    </div>\n  `;\n}\n\n/**\n * Template para lib-progress.\n * Renderiza la barra con o sin meta (label/value/sub).\n * Si segments.length > 0 → modo multi-segmento.\n */\nexport function progressTemplate(props: ProgressTemplateProps): TemplateResult {\n  const isMulti     = props.segments.length > 0;\n  const hasMeta     = !!(props.label || props.valueLabel);\n  const showPercent = !isMulti && props.showValue && !props.indeterminate && props.size !== 'xl';\n\n  const displayValue = props.valueLabel\n    ? props.valueLabel\n    : showPercent\n      ? `${Math.round(props.percent)}%`\n      : nothing;\n\n  const barTpl = isMulti ? multiBarTpl(props) : singleBarTpl(props);\n\n  /* With meta wrapper */\n  if (hasMeta) {\n    return html`\n      <div class=\"pb-wrap\">\n        <div class=\"pb-header\">\n          <span class=\"pb-label\">${props.label}</span>\n          ${displayValue !== nothing\n            ? html`<span class=\"pb-value\">${displayValue}</span>`\n            : nothing}\n        </div>\n        ${barTpl}\n        ${props.sub ? html`<span class=\"pb-sub\">${props.sub}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  /* Plain bar */\n  return html`${barTpl}`;\n}"],"names":[],"mappings":";AAIA,MAAM,qBAA0D;AAAA,EAC9D,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AACX;AAGA,MAAM,mBAAwD;AAAA,EAC5D,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AACX;AAEA,SAAS,aAAa,KAA8B;AAClD,MAAI,IAAI,MAAO,QAAO,IAAI;AAC1B,QAAM,OAAO,IAAI,QAAQ;AACzB,SAAO,iBAAiB,IAAI;AAC9B;AAEA,SAAS,aAAa,KAA8B;AAClD,MAAI,IAAI,MAAO,QAAO;AACtB,SAAO,mBAAmB,IAAI,QAAQ,SAAS;AACjD;AAGA,SAAS,YAAY,OAA8C;AACjE,QAAM,YAAY,MAAM,SAAS,KAAK,CAAA,MAAK,EAAE,KAAK;AAElD,SAAO;AAAA;AAAA,QAED,MAAM,SAAS,IAAI,CAAA,QAAO;AAAA;AAAA,8BAEJ,aAAa,GAAG,CAAC;AAAA;AAAA,qBAE1B,IAAI,OAAO;AAAA,cAClB,IAAI,QAAQ,eAAe,IAAI,KAAK,MAAM,EAAE;AAAA;AAAA;AAAA,OAGnD,CAAC;AAAA;AAAA;AAAA,MAGF,YAAY;AAAA;AAAA,UAER,MAAM,SAAS,OAAO,CAAA,MAAK,EAAE,KAAK,EAAE,IAAI,CAAA,QAAO;AAAA;AAAA;AAAA;AAAA,mCAItB,aAAa,GAAG,CAAC;AAAA;AAAA,2CAET,IAAI,KAAK;AAAA;AAAA,SAE3C,CAAC;AAAA,gBACM,OAAO;AAAA;AAEvB;AAGA,SAAS,aAAa,OAA8C;AAClE,QAAM,iBAAiB,MAAM,SAAS,QAAQ,MAAM,aAAa,CAAC,MAAM;AAExE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKc,MAAM,GAAG;AAAA,uBACT,MAAM,gBAAgB,UAAU,MAAM,QAAQ;AAAA,oBACjD,MAAM,aAAa,OAAO;AAAA;AAAA,2CAEH,MAAM,gBAAgB,MAAM,MAAM,OAAO;AAAA,UAC1E,iBACE,oCAAoC,KAAK,MAAM,MAAM,OAAO,CAAC,aAC7D,OAAO;AAAA;AAAA;AAAA;AAInB;AAOO,SAAS,iBAAiB,OAA8C;AAC7E,QAAM,UAAc,MAAM,SAAS,SAAS;AAC5C,QAAM,UAAc,CAAC,EAAE,MAAM,SAAS,MAAM;AAC5C,QAAM,cAAc,CAAC,WAAW,MAAM,aAAa,CAAC,MAAM,iBAAiB,MAAM,SAAS;AAE1F,QAAM,eAAe,MAAM,aACvB,MAAM,aACN,cACE,GAAG,KAAK,MAAM,MAAM,OAAO,CAAC,MAC5B;AAEN,QAAM,SAAS,UAAU,YAAY,KAAK,IAAI,aAAa,KAAK;AAGhE,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA,mCAGwB,MAAM,KAAK;AAAA,YAClC,iBAAiB,UACf,8BAA8B,YAAY,YAC1C,OAAO;AAAA;AAAA,UAEX,MAAM;AAAA,UACN,MAAM,MAAM,4BAA4B,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA;AAAA,EAG5E;AAGA,SAAO,OAAO,MAAM;AACtB;"}

package/dist/index319.js

@@ -1,5 +1,5 @@
-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)}}';
+const progressCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.pb-wrap{display:flex;flex-direction:column;gap:var(--lib-space-xs);width:100%}.pb-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-sm)}.pb-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-snug)}.pb-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);flex-shrink:0}.pb-sub{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}:host([tone="error"]) .pb-label{color:var(--color-error)}:host([tone="error"]) .pb-value{color:var(--color-error)}:host([tone="error"]) .pb-sub{color:var(--color-error)}:host([tone="celadon"]) .pb-value{color:var(--color-celadon-600)}.pb{width:100%;background:var(--color-washi-200);border-radius:var(--radius-full);overflow:hidden;position:relative}:host([size="xs"]) .pb{height:2px}:host([size="sm"]) .pb{height:4px}:host([size="md"]) .pb,.pb{height:8px}:host([size="lg"]) .pb{height:12px}:host([size="xl"]) .pb{height:20px}:host([tone="kaki"]) .pb{background:var(--color-kaki-100)}:host([tone="celadon"]) .pb{background:var(--color-celadon-100)}:host([tone="error"]) .pb{background:var(--color-error-light, #F5DDD9)}:host([square]) .pb,:host([square]) .pb-fill{border-radius:var(--radius-sm)}.pb-fill{height:100%;border-radius:var(--radius-full);background:var(--color-washi-900);transition:width .6s var(--ease-default);position:relative;overflow:hidden}:host([square]) .pb-fill{border-radius:var(--radius-sm)}:host([tone="kaki"]) .pb-fill{background:var(--color-kaki-500)}:host([tone="celadon"]) .pb-fill{background:var(--color-celadon-500)}:host([tone="error"]) .pb-fill{background:var(--color-error)}:host([striped]) .pb-fill{background-image:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgb(255,255,255,.18) 6px,rgb(255,255,255,.18) 12px)}.pb-inner-value{display:flex;align-items:center;height:100%;padding-left:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);color:#ffffffb3;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes pb-slide{0%{left:-40%;width:40%}50%{left:30%;width:60%}to{left:110%;width:40%}}:host([indeterminate]) .pb-fill{width:100%!important;background:transparent}:host([indeterminate]) .pb-fill:after{content:"";position:absolute;top:0;bottom:0;width:40%;background:var(--color-washi-900);border-radius:var(--radius-full);animation:pb-slide 1.6s cubic-bezier(.4,0,.6,1) infinite}:host([indeterminate][tone="kaki"]) .pb-fill:after{background:var(--color-kaki-500)}:host([indeterminate][tone="celadon"]) .pb-fill:after{background:var(--color-celadon-500)}:host([indeterminate][tone="error"]) .pb-fill:after{background:var(--color-error)}:host([indeterminate][square]) .pb-fill:after{border-radius:var(--radius-sm)}.pb-multi{display:flex;width:100%;border-radius:var(--radius-full);overflow:hidden;gap:2px;background:transparent}:host([size="xs"]) .pb-multi{height:2px}:host([size="sm"]) .pb-multi{height:4px}:host([size="md"]) .pb-multi,.pb-multi{height:8px}:host([size="lg"]) .pb-multi{height:12px}:host([size="xl"]) .pb-multi{height:20px}:host([square]) .pb-multi{border-radius:var(--radius-sm)}.pb-segment{height:100%;transition:width .6s var(--ease-default);flex-shrink:0}.pb-segment:first-child{border-radius:var(--radius-full) 0 0 var(--radius-full)}.pb-segment:last-child{border-radius:0 var(--radius-full) var(--radius-full) 0}.pb-segment:only-child{border-radius:var(--radius-full)}:host([square]) .pb-segment:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}:host([square]) .pb-segment:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}:host([square]) .pb-segment:only-child{border-radius:var(--radius-sm)}.seg-default{background:var(--color-washi-900)}.seg-kaki{background:var(--color-kaki-500)}.seg-celadon{background:var(--color-celadon-500)}.seg-error{background:var(--color-error)}.seg-muted{background:var(--color-washi-300);flex:1}.pb-legend{display:flex;gap:var(--lib-space-md);flex-wrap:wrap;margin-top:var(--lib-space-sm)}.pb-legend-item{display:flex;align-items:center;gap:var(--lib-space-xs)}.pb-legend-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.pb-legend-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.pb-fill,.pb-segment{transition:none}:host([indeterminate]) .pb-fill:after{animation:none}}}';
 export {
-  codeBlockCss as default
+  progressCss as default
 };
 //# sourceMappingURL=index319.js.map

package/dist/index32.js

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

package/dist/index32.js.map

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

package/dist/index320.js

@@ -1,85 +1,76 @@
-import { html } from "lit";
-const closeSvg = html`
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-       stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-    <path d="M1 1l10 10M11 1L1 11"/>
-  </svg>
-`;
-const dangerSvg = html`
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-       stroke="var(--color-error)" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <path d="M8 2L14.5 13H1.5L8 2z"/>
-    <path d="M8 6v3M8 11v.5"/>
-  </svg>
-`;
-const warningSvg = html`
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-       stroke="var(--color-warning)" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="8" cy="8" r="6"/>
-    <path d="M8 5v3M8 10v.5"/>
-  </svg>
-`;
-function dialogTemplate(props) {
-  const {
-    eyebrow,
-    dlgTitle,
-    variant,
-    size,
-    layout,
-    footerMeta,
-    onClose
-  } = props;
-  const layoutCls = layout === "drawer-right" ? "dlg-drawer-right" : layout === "drawer-bottom" ? "dlg-drawer-bottom" : "";
-  const alertCls = layout === "alert" ? "dlg-alert" : "";
-  const sizeCls = `dlg-${size}`;
-  const dlgCls = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();
-  const hasIcon = variant === "danger" || variant === "warning";
-  const headerIcon = hasIcon ? html`<div class="dlg-header-icon">
-        ${variant === "danger" ? dangerSvg : warningSvg}
-      </div>` : null;
+import { nothing, svg, html } from "lit";
+const SIZE_MAP = {
+  xs: { px: 40, stroke: 3 },
+  sm: { px: 64, stroke: 4 },
+  md: { px: 96, stroke: 6 },
+  lg: { px: 128, stroke: 7 },
+  xl: { px: 176, stroke: 6 }
+};
+function progressCircleTemplate(props) {
+  const { px, stroke: defaultStroke } = SIZE_MAP[props.size];
+  const sw = props.strokeWidth ?? defaultStroke;
+  const r = (px - sw) / 2;
+  const circ = 2 * Math.PI * r;
+  const offset = props.indeterminate ? 0 : circ * (1 - Math.min(props.value, props.max) / props.max);
+  const pct = Math.round(props.value / props.max * 100);
   return html`
-    <dialog
-      class="${dlgCls}"
-      @cancel="${(e) => {
-    e.preventDefault();
-    onClose();
-  }}"
-      @click="${(e) => {
-    if (e.target.tagName === "DIALOG") onClose();
-  }}"
+    <div
+      class="pc"
+      style="width:${px}px; height:${px}px;"
+      role="progressbar"
+      aria-valuenow=${props.indeterminate ? nothing : props.value}
+      aria-valuemin="0"
+      aria-valuemax=${props.max}
+      aria-label=${props.indeterminate ? "Cargando…" : `${pct}%`}
     >
-      <!-- HEADER -->
-      <div class="dlg-header">
-        ${headerIcon}
-        <div class="dlg-header-text" style="${hasIcon ? "margin-left: var(--lib-space-md)" : ""}">
-          ${eyebrow ? html`<p class="dlg-eyebrow">${eyebrow}</p>` : null}
-          <slot name="header">
-            <h2 class="dlg-title">${dlgTitle}</h2>
-          </slot>
-        </div>
-        <button
-          class="dlg-close"
-          aria-label="Cerrar"
-          @click="${() => onClose()}"
-        >${closeSvg}</button>
-      </div>
+      ${svg`
+        <svg
+          width="${px}"
+          height="${px}"
+          viewBox="0 0 ${px} ${px}"
+          class="pc__svg ${props.indeterminate ? "pc__svg--spin" : ""}"
+        >
+          <circle
+            class="pc__track"
+            cx="${px / 2}"
+            cy="${px / 2}"
+            r="${r}"
+            stroke-width="${sw}"
+          />
+          <circle
+            class="pc__arc ${props.indeterminate ? "pc__arc--indet" : ""}"
+            cx="${px / 2}"
+            cy="${px / 2}"
+            r="${r}"
+            stroke-width="${sw}"
+            stroke-dasharray="${props.indeterminate ? `${circ * 0.3} ${circ}` : circ}"
+            stroke-dashoffset="${props.indeterminate ? 0 : offset}"
+            stroke-linecap="round"
+          />
+        </svg>
+      `}
 
-      <!-- BODY -->
-      <div class="dlg-body">
-        <slot></slot>
-      </div>
-
-      <!-- FOOTER -->
-      <div class="dlg-footer">
-        ${footerMeta ? html`<span class="dlg-footer-meta">${footerMeta}</span>` : null}
-        <slot name="footer"></slot>
-      </div>
-    </dialog>
+      ${!props.bare && !props.indeterminate ? html`
+        <div class="pc__label">
+          ${props.icon === "check" ? html`
+            <svg class="pc__check" width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
+              <polyline
+                points="6,14 11,20 22,9"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          ` : html`
+            <span class="pc__value">${pct}%</span>
+            ${props.sub ? html`<span class="pc__sub">${props.sub}</span>` : nothing}
+          `}
+        </div>
+      ` : nothing}
+    </div>
   `;
 }
 export {
-  dialogTemplate
+  progressCircleTemplate
 };
 //# sourceMappingURL=index320.js.map

package/dist/index320.js.map

@@ -1 +1 @@
-{"version":3,"file":"index320.js","sources":["../src/components/organisms/dialog/lib-dialog.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { DialogTemplateProps } from './lib-dialog.types';\n\n/* SVG del botón de cierre — reutilizable */\nconst closeSvg = html`\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <path d=\"M1 1l10 10M11 1L1 11\"/>\n  </svg>\n`;\n\n/* Icono para variante danger */\nconst dangerSvg = html`\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"var(--color-error)\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M8 2L14.5 13H1.5L8 2z\"/>\n    <path d=\"M8 6v3M8 11v.5\"/>\n  </svg>\n`;\n\n/* Icono para variante warning */\nconst warningSvg = html`\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"var(--color-warning)\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"8\" cy=\"8\" r=\"6\"/>\n    <path d=\"M8 5v3M8 10v.5\"/>\n  </svg>\n`;\n\nexport function dialogTemplate(props: DialogTemplateProps): TemplateResult {\n  const {\n    eyebrow, dlgTitle, variant, size,\n    layout, footerMeta, onClose,\n  } = props;\n\n  /* ── Clases del <dialog> ── */\n  const layoutCls =\n    layout === 'drawer-right'  ? 'dlg-drawer-right'  :\n    layout === 'drawer-bottom' ? 'dlg-drawer-bottom' :\n    '';\n  const alertCls = layout === 'alert' ? 'dlg-alert' : '';\n  const sizeCls  = `dlg-${size}`;\n  const dlgCls   = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();\n\n  /* ── Icono de header (solo danger / warning) ── */\n  const hasIcon = variant === 'danger' || variant === 'warning';\n  const headerIcon = hasIcon\n    ? html`<div class=\"dlg-header-icon\">\n        ${ variant === 'danger' ? dangerSvg : warningSvg }\n      </div>`\n    : null;\n\n  return html`\n    <dialog\n      class=\"${dlgCls}\"\n      @cancel=\"${(e: Event): void => { e.preventDefault(); onClose(); }}\"\n      @click=\"${(e: MouseEvent): void => {\n        /* Cierre al click sobre el backdrop (target === dialog) */\n        if ((e.target as HTMLElement).tagName === 'DIALOG') onClose();\n      }}\"\n    >\n      <!-- HEADER -->\n      <div class=\"dlg-header\">\n        ${headerIcon}\n        <div class=\"dlg-header-text\" style=\"${hasIcon ? 'margin-left: var(--lib-space-md)' : ''}\">\n          ${eyebrow ? html`<p class=\"dlg-eyebrow\">${eyebrow}</p>` : null}\n          <slot name=\"header\">\n            <h2 class=\"dlg-title\">${dlgTitle}</h2>\n          </slot>\n        </div>\n        <button\n          class=\"dlg-close\"\n          aria-label=\"Cerrar\"\n          @click=\"${(): void => onClose()}\"\n        >${closeSvg}</button>\n      </div>\n\n      <!-- BODY -->\n      <div class=\"dlg-body\">\n        <slot></slot>\n      </div>\n\n      <!-- FOOTER -->\n      <div class=\"dlg-footer\">\n        ${footerMeta ? html`<span class=\"dlg-footer-meta\">${footerMeta}</span>` : null}\n        <slot name=\"footer\"></slot>\n      </div>\n    </dialog>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlB,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASZ,SAAS,eAAe,OAA4C;AACzE,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAU;AAAA,IAAS;AAAA,IAC5B;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAA,IAClB;AAGJ,QAAM,YACJ,WAAW,iBAAkB,qBAC7B,WAAW,kBAAkB,sBAC7B;AACF,QAAM,WAAW,WAAW,UAAU,cAAc;AACpD,QAAM,UAAW,OAAO,IAAI;AAC5B,QAAM,SAAW,OAAO,OAAO,IAAI,SAAS,IAAI,QAAQ,GAAG,KAAA;AAG3D,QAAM,UAAU,YAAY,YAAY,YAAY;AACpD,QAAM,aAAa,UACf;AAAA,UACK,YAAY,WAAW,YAAY,UAAW;AAAA,gBAEnD;AAEJ,SAAO;AAAA;AAAA,eAEM,MAAM;AAAA,iBACJ,CAAC,MAAmB;AAAE,MAAE,eAAA;AAAkB,YAAA;AAAA,EAAW,CAAC;AAAA,gBACvD,CAAC,MAAwB;AAEjC,QAAK,EAAE,OAAuB,YAAY,SAAU,SAAA;AAAA,EACtD,CAAC;AAAA;AAAA;AAAA;AAAA,UAIG,UAAU;AAAA,8CAC0B,UAAU,qCAAqC,EAAE;AAAA,YACnF,UAAU,8BAA8B,OAAO,SAAS,IAAI;AAAA;AAAA,oCAEpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMxB,MAAY,SAAS;AAAA,WAC9B,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUT,aAAa,qCAAqC,UAAU,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAKtF;"}
+{"version":3,"file":"index320.js","sources":["../src/components/atoms/progress-circle/lib-progress-circle.component.html.ts"],"sourcesContent":["import { html, svg, nothing, TemplateResult } from 'lit';\n\nexport type LibProgressCircleSize    = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type LibProgressCircleVariant = 'default' | 'kaki' | 'celadon' | 'error';\n\n/** Dimensiones canónicas por tamaño */\nconst SIZE_MAP: Record<LibProgressCircleSize, { px: number; stroke: number }> = {\n  xs: { px: 40,  stroke: 3 },\n  sm: { px: 64,  stroke: 4 },\n  md: { px: 96,  stroke: 6 },\n  lg: { px: 128, stroke: 7 },\n  xl: { px: 176, stroke: 6 },\n};\n\nexport interface ProgressCircleTemplateProps {\n  value:         number;\n  max:           number;\n  size:          LibProgressCircleSize;\n  /** Sobreescribe el strokeWidth por defecto del tamaño */\n  strokeWidth:   number | null;\n  variant:       LibProgressCircleVariant;\n  indeterminate: boolean;\n  /** Oculta el label central */\n  bare:          boolean;\n  /** Subtítulo bajo el valor numérico */\n  sub:           string;\n  /** Icono SVG en el centro en lugar del texto */\n  icon:          'check' | null;\n}\n\n/**\n * Renderiza el SVG circular y el label central.\n *\n * Fórmula del arco:\n *   r           = (size - strokeWidth) / 2\n *   circumference = 2π × r\n *   offset      = circumference × (1 − value/max)\n *\n * El SVG se rota -90° en CSS para que el arco empiece arriba.\n */\nexport function progressCircleTemplate(props: ProgressCircleTemplateProps): TemplateResult {\n  const { px, stroke: defaultStroke } = SIZE_MAP[props.size];\n  const sw = props.strokeWidth ?? defaultStroke;\n\n  const r    = (px - sw) / 2;\n  const circ = 2 * Math.PI * r;\n\n  // Indeterminate: arco corto fijo; determinado: offset calculado\n  const offset = props.indeterminate\n    ? 0   // stroke-dasharray en CSS controla la longitud del segmento\n    : circ * (1 - Math.min(props.value, props.max) / props.max);\n\n  const pct = Math.round((props.value / props.max) * 100);\n\n  return html`\n    <div\n      class=\"pc\"\n      style=\"width:${px}px; height:${px}px;\"\n      role=\"progressbar\"\n      aria-valuenow=${props.indeterminate ? nothing : props.value}\n      aria-valuemin=\"0\"\n      aria-valuemax=${props.max}\n      aria-label=${props.indeterminate ? 'Cargando…' : `${pct}%`}\n    >\n      ${svg`\n        <svg\n          width=\"${px}\"\n          height=\"${px}\"\n          viewBox=\"0 0 ${px} ${px}\"\n          class=\"pc__svg ${props.indeterminate ? 'pc__svg--spin' : ''}\"\n        >\n          <circle\n            class=\"pc__track\"\n            cx=\"${px / 2}\"\n            cy=\"${px / 2}\"\n            r=\"${r}\"\n            stroke-width=\"${sw}\"\n          />\n          <circle\n            class=\"pc__arc ${props.indeterminate ? 'pc__arc--indet' : ''}\"\n            cx=\"${px / 2}\"\n            cy=\"${px / 2}\"\n            r=\"${r}\"\n            stroke-width=\"${sw}\"\n            stroke-dasharray=\"${props.indeterminate ? `${circ * 0.3} ${circ}` : circ}\"\n            stroke-dashoffset=\"${props.indeterminate ? 0 : offset}\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      `}\n\n      ${!props.bare && !props.indeterminate ? html`\n        <div class=\"pc__label\">\n          ${props.icon === 'check' ? html`\n            <svg class=\"pc__check\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\">\n              <polyline\n                points=\"6,14 11,20 22,9\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          ` : html`\n            <span class=\"pc__value\">${pct}%</span>\n            ${props.sub ? html`<span class=\"pc__sub\">${props.sub}</span>` : nothing}\n          `}\n        </div>\n      ` : nothing}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAMA,MAAM,WAA0E;AAAA,EAC9E,IAAI,EAAE,IAAI,IAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,IAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,IAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,KAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,KAAK,QAAQ,EAAA;AACzB;AA4BO,SAAS,uBAAuB,OAAoD;AACzF,QAAM,EAAE,IAAI,QAAQ,kBAAkB,SAAS,MAAM,IAAI;AACzD,QAAM,KAAK,MAAM,eAAe;AAEhC,QAAM,KAAQ,KAAK,MAAM;AACzB,QAAM,OAAO,IAAI,KAAK,KAAK;AAG3B,QAAM,SAAS,MAAM,gBACjB,IACA,QAAQ,IAAI,KAAK,IAAI,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM;AAEzD,QAAM,MAAM,KAAK,MAAO,MAAM,QAAQ,MAAM,MAAO,GAAG;AAEtD,SAAO;AAAA;AAAA;AAAA,qBAGY,EAAE,cAAc,EAAE;AAAA;AAAA,sBAEjB,MAAM,gBAAgB,UAAU,MAAM,KAAK;AAAA;AAAA,sBAE3C,MAAM,GAAG;AAAA,mBACZ,MAAM,gBAAgB,cAAc,GAAG,GAAG,GAAG;AAAA;AAAA,QAExD;AAAA;AAAA,mBAEW,EAAE;AAAA,oBACD,EAAE;AAAA,yBACG,EAAE,IAAI,EAAE;AAAA,2BACN,MAAM,gBAAgB,kBAAkB,EAAE;AAAA;AAAA;AAAA;AAAA,kBAInD,KAAK,CAAC;AAAA,kBACN,KAAK,CAAC;AAAA,iBACP,CAAC;AAAA,4BACU,EAAE;AAAA;AAAA;AAAA,6BAGD,MAAM,gBAAgB,mBAAmB,EAAE;AAAA,kBACtD,KAAK,CAAC;AAAA,kBACN,KAAK,CAAC;AAAA,iBACP,CAAC;AAAA,4BACU,EAAE;AAAA,gCACE,MAAM,gBAAgB,GAAG,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI;AAAA,iCACnD,MAAM,gBAAgB,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA,OAI1D;AAAA;AAAA,QAEC,CAAC,MAAM,QAAQ,CAAC,MAAM,gBAAgB;AAAA;AAAA,YAElC,MAAM,SAAS,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASvB;AAAA,sCACwB,GAAG;AAAA,cAC3B,MAAM,MAAM,6BAA6B,MAAM,GAAG,YAAY,OAAO;AAAA,WACxE;AAAA;AAAA,UAED,OAAO;AAAA;AAAA;AAGjB;"}

package/dist/index321.js

@@ -1,5 +1,5 @@
-const dialogCss = '@layer tokens,reset,components;@layer reset{:host{display:contents}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{dialog::backdrop{background:#120e0a00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s}dialog.is-open::backdrop{background:#120e0a8c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog.dlg{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;padding:0;border:1px solid var(--border-default);background:var(--bg-elevated);box-shadow:var(--shadow-xl);max-height:calc(100vh - var(--lib-space-xl));display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-bounce)}dialog.dlg[open]{opacity:1;transform:translateY(0) scale(1)}dialog.dlg.is-closing{opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.dlg-sm{width:min(400px,calc(100vw - var(--lib-space-md)))}.dlg-md{width:min(540px,calc(100vw - var(--lib-space-md)))}.dlg-lg{width:min(720px,calc(100vw - var(--lib-space-md)))}.dlg-xl{width:min(960px,calc(100vw - var(--lib-space-md)))}.dlg-full{width:100vw;height:100vh;max-height:100vh;margin:0}.dlg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lib-space-md);padding:var(--lib-space-xl) var(--lib-space-xl) var(--lib-space-lg);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.dlg-header-text{flex:1}.dlg-header-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);flex-shrink:0;margin-top:2px}.dlg-eyebrow{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-xs)}.dlg-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:1.2;color:var(--text-primary)}.dlg-title em{font-style:italic;color:var(--text-accent)}.dlg-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);background:transparent;cursor:pointer;color:var(--text-muted);flex-shrink:0;transition:border-color var(--duration-fast),color var(--duration-fast),background var(--duration-fast)}.dlg-close:hover{border-color:var(--border-default);color:var(--text-primary);background:var(--bg-surface)}.dlg-close svg{display:block;pointer-events:none}.dlg-body{padding:var(--lib-space-xl);overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent;font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}.dlg-footer{padding:var(--lib-space-lg) var(--lib-space-xl);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);flex-shrink:0;background:var(--bg-surface)}.dlg-footer-meta{margin-right:auto;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.dlg-divider{border:none;border-top:1px solid var(--border-subtle);margin:var(--lib-space-lg) 0}:host([variant="danger"]) .dlg-header{border-bottom-color:var(--color-error-border, #E8B4AE);background:var(--color-error-bg, #FDF0EE)}:host([variant="danger"]) .dlg-title{color:var(--color-error)}:host([variant="danger"]) .dlg-eyebrow{color:var(--color-error);opacity:.6}:host([variant="danger"]) .dlg-header-icon{border-color:var(--color-error-border, #E8B4AE)}:host([variant="danger"]) .dlg-close{border-color:var(--color-error-border, #E8B4AE)}:host([variant="warning"]) .dlg-header{border-bottom-color:var(--color-warning-border, #E8D0AE);background:var(--color-warning-bg, #FDF5EC)}:host([variant="warning"]) .dlg-title{color:var(--color-warning)}:host([variant="warning"]) .dlg-eyebrow{color:var(--color-warning);opacity:.6}:host([variant="warning"]) .dlg-header-icon{border-color:var(--color-warning-border, #E8D0AE)}:host([variant="warning"]) .dlg-close{border-color:var(--color-warning-border, #E8D0AE)}:host([variant="dark"]) dialog.dlg{background:var(--color-washi-950);border-color:#190f0a}:host([variant="dark"]) .dlg-header{border-bottom-color:#150a06}:host([variant="dark"]) .dlg-title{color:#faf7f4d9}:host([variant="dark"]) .dlg-eyebrow{color:#3c302a}:host([variant="dark"]) .dlg-close{border-color:#1e130e;color:#433831}:host([variant="dark"]) .dlg-close:hover{border-color:#372b26;color:#faf7f499;background:#100704}:host([variant="dark"]) .dlg-body{color:#6d6059}:host([variant="dark"]) .dlg-footer{background:#070201;border-top-color:#150a06}:host([variant="dark"]) .dlg-footer-meta{color:#312620}:host([variant="dark"]) .dlg-divider{border-top-color:#150a06}:host([layout="drawer-right"]) dialog.dlg{inset:0 0 0 auto;margin:0;height:100vh;max-height:100vh;border-top:none;border-bottom:none;border-right:none;opacity:0;transform:translate(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}:host([layout="drawer-right"]) dialog.dlg[open]{opacity:1;transform:translate(0)}:host([layout="drawer-right"]) dialog.dlg.is-closing{opacity:0;transform:translate(40px)}:host([layout="drawer-bottom"]) dialog.dlg{inset:auto 0 0;margin:0;width:100%;max-width:100%;border-left:none;border-right:none;border-bottom:none;opacity:0;transform:translateY(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}:host([layout="drawer-bottom"]) dialog.dlg[open]{opacity:1;transform:translateY(0)}:host([layout="drawer-bottom"]) dialog.dlg.is-closing{opacity:0;transform:translateY(40px)}:host([layout="alert"]) .dlg-header{padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md)}:host([layout="alert"]) .dlg-body{padding:0 var(--lib-space-lg) var(--lib-space-lg)}:host([layout="alert"]) .dlg-footer{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="alert"]) .dlg-title{font-family:var(--lib-font-body);font-size:var(--text-md)}@media(max-width:768px){.dlg-sm,.dlg-md,.dlg-lg,.dlg-xl{width:calc(100vw - var(--lib-space-md));margin:auto}}}';
+const progressCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pc__svg{display:block;transform:rotate(-90deg);transform-origin:center;overflow:visible}.pc__track,.pc__arc{fill:none;stroke-linecap:round}.pc__track{stroke:var(--color-washi-200)}.pc__arc{stroke:var(--color-washi-900);transition:stroke-dashoffset .7s cubic-bezier(0,0,.2,1),stroke .3s}:host([variant="kaki"]) .pc__arc{stroke:var(--color-kaki-500)}:host([variant="kaki"]) .pc__track{stroke:var(--color-kaki-100)}:host([variant="celadon"]) .pc__arc{stroke:var(--color-celadon-500)}:host([variant="celadon"]) .pc__track{stroke:var(--color-celadon-100)}:host([variant="error"]) .pc__arc{stroke:var(--color-error)}:host([variant="error"]) .pc__track{stroke:#f5ddd9}.pc__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none}.pc__value{font-family:var(--lib-font-mono);font-weight:var(--weight-regular);letter-spacing:var(--tracking-wide);color:var(--text-primary);line-height:1}.pc__sub{font-family:var(--lib-font-mono);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);line-height:1}:host([size="xs"]) .pc__label{display:none}:host([size="sm"]) .pc__value{font-size:var(--text-xs)}:host([size="sm"]) .pc__sub{font-size:8px}:host([size="md"]) .pc__value{font-size:var(--text-md)}:host([size="md"]) .pc__sub{font-size:9px}:host([size="lg"]) .pc__value{font-size:var(--text-xl)}:host([size="lg"]) .pc__sub{font-size:var(--text-xs)}:host([size="xl"]) .pc__value{font-size:2rem}:host([size="xl"]) .pc__sub{font-size:var(--text-xs)}:host([variant="kaki"]) .pc__value{color:var(--color-kaki-600)}:host([variant="celadon"]) .pc__value{color:var(--color-celadon-600)}:host([variant="error"]) .pc__value{color:var(--color-error)}.pc__check polyline{stroke:var(--color-celadon-500)}:host([variant="kaki"]) .pc__check polyline{stroke:var(--color-kaki-500)}@keyframes pc-spin{to{transform:rotate(270deg)}}.pc__svg--spin{animation:pc-spin 1.2s linear infinite;transform-origin:center}.pc__arc--indet{transition:none}@media(prefers-reduced-motion:reduce){.pc__arc{transition:none}.pc__svg--spin{animation:none}}}';
 export {
-  dialogCss as default
+  progressCss as default
 };
 //# sourceMappingURL=index321.js.map