@shibui-ui/ui 1.24.0 → 1.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index210.js +1 -1
- package/dist/index254.js +1 -1
- package/dist/index263.js +1 -1
- package/dist/index307.js +1 -1
- package/dist/index316.js +4 -4
- package/dist/index353.js +13 -24
- package/dist/index353.js.map +1 -1
- package/dist/index354.js +20 -6
- package/dist/index354.js.map +1 -1
- package/dist/index355.js +56 -18
- package/dist/index355.js.map +1 -1
- package/dist/index356.js +55 -57
- package/dist/index356.js.map +1 -1
- package/dist/index357.js +24 -63
- package/dist/index357.js.map +1 -1
- package/package.json +1 -1
package/dist/index210.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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)}}';
|
|
1
|
+
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}}}';
|
|
2
2
|
export {
|
|
3
3
|
progressCss as default
|
|
4
4
|
};
|
package/dist/index254.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const spinnerCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}@keyframes sp-rotate{to{transform:rotate(360deg)}}@keyframes sp-rotate-reverse{to{transform:rotate(-360deg)}}:host([variant="enso"]) svg,:host(:not([variant])) svg{display:block;animation:sp-rotate 2.2s cubic-bezier(.5,.1,.5,.9) infinite}:host([variant="enso"][size="sm"]) svg,:host(:not([variant])[size="sm"]) svg{width:24px;height:24px}:host([variant="enso"][size="md"]) svg,:host(:not([variant])[size="md"]) svg,:host([variant="enso"]:not([size])) svg,:host(:not([variant],[size])) svg{width:48px;height:48px}:host([variant="enso"][size="lg"]) svg,:host(:not([variant])[size="lg"]) svg{width:72px;height:72px}.sp-sumi-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.sp-sumi{border-radius:50%;filter:blur(.6px);animation:sp-rotate 1.6s linear infinite;background:conic-gradient(from 0deg,#2a1f1a00,#2a1f1a14 8.33%,#2a1f1a40 25%,#2a1f1aa6,#2a1f1aeb 75%,#2a1f1a 86.11%,#2a1f1a33 95.83%,#2a1f1a00);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][tone="celadon"]) .sp-sumi{background:conic-gradient(from 0deg,#487d7300,#487d7314 8.33%,#487d734d 27.78%,#487d73b3,#487d73 83.33%,#487d7326 97.22%,#487d7300);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark]) .sp-sumi{background:conic-gradient(from 0deg,#fef7f200,#fef7f214 8.33%,#fef7f240 25%,#fef7f2a6,#fef7f2eb 75%,#fef7f2 86.11%,#fef7f233 95.83%,#fef7f200);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark][tone="kaki"]) .sp-sumi{background:conic-gradient(from 0deg,#c47c3b00,#c47c3b1a 8.33%,#c47c3b4d 27.78%,#c47c3bbf,#c47c3b 83.33%,#c47c3b26 97.22%,#c47c3b00);filter:blur(.5px) drop-shadow(0 0 4px oklch(65% .12 60deg / .4));mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][size="sm"]) .sp-sumi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="sumi"]:not([size])) .sp-sumi,:host([variant="sumi"][size="md"]) .sp-sumi{width:48px;height:48px}:host([variant="sumi"][size="lg"]) .sp-sumi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-kintsugi{border-radius:50%;background:conic-gradient(from 0deg,#6d4d3e00,#7f594426 11.11%,#a36b4480,#c47c3b 61.11%,#d28425,#ad704099 88.89%,#6d4d3e00);mask:radial-gradient(circle at center,transparent 56%,black 57%);filter:blur(.4px) drop-shadow(0 0 4px oklch(65% .12 60deg / .5));animation:sp-rotate 2s cubic-bezier(.4,0,.6,1) infinite}:host([variant="kintsugi"][dark]) .sp-kintsugi{background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,#ea8e00,#ec9100 73.61%,#f19600 80.56%,#ea9100d9,#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,color(xyz 0.438 0.369 0.044),color(xyz 0.452 0.381 0.039) 73.61%,color(xyz 0.481 0.404 0.028) 80.56%,color(xyz 0.447 0.377 0.036 / 0.85),#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);filter:blur(.3px) drop-shadow(0 0 6px oklch(70% .14 62deg / .6))}:host([variant="kintsugi"][size="sm"]) .sp-kintsugi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="kintsugi"]:not([size])) .sp-kintsugi,:host([variant="kintsugi"][size="md"]) .sp-kintsugi{width:48px;height:48px}:host([variant="kintsugi"][size="lg"]) .sp-kintsugi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-shizuku{position:relative;border-radius:50%;animation:sp-rotate 1.8s linear infinite}.sp-shizuku span{position:absolute;border-radius:50%;background:#2a1f1a;top:50%;left:50%;transform-origin:0 0}:host([variant="shizuku"][tone="kaki"]) .sp-shizuku span,:host([variant="shizuku"][dark]) .sp-shizuku span{background:#c47c3b}.sp-shizuku.sp-shizuku--md{width:48px;height:48px}.sp-shizuku.sp-shizuku--md span{margin:-3px}.sp-shizuku.sp-shizuku--md span:nth-child(1){width:7px;height:7px;transform:rotate(0) translate(18px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--md span:nth-child(2){width:5.5px;height:5.5px;transform:rotate(60deg) translate(18px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--md span:nth-child(3){width:4px;height:4px;transform:rotate(115deg) translate(18px) translateY(-50%);opacity:.48}.sp-shizuku.sp-shizuku--md span:nth-child(4){width:3px;height:3px;transform:rotate(160deg) translate(18px) translateY(-50%);opacity:.28}.sp-shizuku.sp-shizuku--md span:nth-child(5){width:2px;height:2px;transform:rotate(200deg) translate(18px) translateY(-50%);opacity:.13}.sp-shizuku.sp-shizuku--md span:nth-child(6){width:1.5px;height:1.5px;transform:rotate(235deg) translate(18px) translateY(-50%);opacity:.06}.sp-shizuku.sp-shizuku--sm{width:24px;height:24px}.sp-shizuku.sp-shizuku--sm span{margin:-1.5px}.sp-shizuku.sp-shizuku--sm span:nth-child(1){width:4px;height:4px;transform:rotate(0) translate(9px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--sm span:nth-child(2){width:3px;height:3px;transform:rotate(60deg) translate(9px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--sm span:nth-child(3){width:2px;height:2px;transform:rotate(115deg) translate(9px) translateY(-50%);opacity:.45}.sp-shizuku.sp-shizuku--sm span:nth-child(4){width:1.5px;height:1.5px;transform:rotate(160deg) translate(9px) translateY(-50%);opacity:.25}.sp-shizuku.sp-shizuku--sm span:nth-child(5){width:1px;height:1px;transform:rotate(200deg) translate(9px) translateY(-50%);opacity:.1}.sp-shizuku.sp-shizuku--sm span:nth-child(6){width:1px;height:1px;transform:rotate(235deg) translate(9px) translateY(-50%);opacity:.05}.sp-shizuku.sp-shizuku--lg{width:72px;height:72px}.sp-shizuku.sp-shizuku--lg span{margin:-4.5px}.sp-shizuku.sp-shizuku--lg span:nth-child(1){width:10px;height:10px;transform:rotate(0) translate(27px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--lg span:nth-child(2){width:8px;height:8px;transform:rotate(55deg) translate(27px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--lg span:nth-child(3){width:6px;height:6px;transform:rotate(105deg) translate(27px) translateY(-50%);opacity:.5}.sp-shizuku.sp-shizuku--lg span:nth-child(4){width:4.5px;height:4.5px;transform:rotate(148deg) translate(27px) translateY(-50%);opacity:.3}.sp-shizuku.sp-shizuku--lg span:nth-child(5){width:3px;height:3px;transform:rotate(185deg) translate(27px) translateY(-50%);opacity:.15}.sp-shizuku.sp-shizuku--lg span:nth-child(6){width:2px;height:2px;transform:rotate(218deg) translate(27px) translateY(-50%);opacity:.06}}';
|
|
1
|
+
const spinnerCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}@keyframes sp-rotate{to{transform:rotate(360deg)}}@keyframes sp-rotate-reverse{to{transform:rotate(-360deg)}}:host([variant="enso"]) svg,:host(:not([variant])) svg{display:block;animation:sp-rotate 2.2s cubic-bezier(.5,.1,.5,.9) infinite}:host([variant="enso"][size="sm"]) svg,:host(:not([variant])[size="sm"]) svg{width:24px;height:24px}:host([variant="enso"][size="md"]) svg,:host(:not([variant])[size="md"]) svg,:host([variant="enso"]:not([size])) svg,:host(:not([variant],[size])) svg{width:48px;height:48px}:host([variant="enso"][size="lg"]) svg,:host(:not([variant])[size="lg"]) svg{width:72px;height:72px}.sp-sumi-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.sp-sumi{border-radius:50%;filter:blur(.6px);animation:sp-rotate 1.6s linear infinite;background:conic-gradient(from 0deg,#2a1f1a00,#2a1f1a14 8.33%,#2a1f1a40 25%,#2a1f1aa6,#2a1f1aeb 75%,#2a1f1a 86.11%,#2a1f1a33 95.83%,#2a1f1a00);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][tone="celadon"]) .sp-sumi{background:conic-gradient(from 0deg,#487d7300,#487d7314 8.33%,#487d734d 27.78%,#487d73b3,#487d73 83.33%,#487d7326 97.22%,#487d7300);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark]) .sp-sumi{background:conic-gradient(from 0deg,#fef7f200,#fef7f214 8.33%,#fef7f240 25%,#fef7f2a6,#fef7f2eb 75%,#fef7f2 86.11%,#fef7f233 95.83%,#fef7f200);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark][tone="kaki"]) .sp-sumi{background:conic-gradient(from 0deg,#c47c3b00,#c47c3b1a 8.33%,#c47c3b4d 27.78%,#c47c3bbf,#c47c3b 83.33%,#c47c3b26 97.22%,#c47c3b00);filter:blur(.5px) drop-shadow(0 0 4px oklch(65% .12 60deg / .4));mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][size="sm"]) .sp-sumi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="sumi"]:not([size])) .sp-sumi,:host([variant="sumi"][size="md"]) .sp-sumi{width:48px;height:48px}:host([variant="sumi"][size="lg"]) .sp-sumi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-kintsugi{border-radius:50%;background:conic-gradient(from 0deg,#6d4d3e00,#7f594426 11.11%,#a36b4480,#c47c3b 61.11%,#d28425,#ad704099 88.89%,#6d4d3e00);mask:radial-gradient(circle at center,transparent 56%,black 57%);filter:blur(.4px) drop-shadow(0 0 4px oklch(65% .12 60deg / .5));animation:sp-rotate 2s cubic-bezier(.4,0,.6,1) infinite}:host([variant="kintsugi"][dark]) .sp-kintsugi{background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,#ea8e00,#ec9100 73.61%,#f19600 80.56%,#ea9100d9,#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,color(xyz 0.438 0.369 0.044),color(xyz 0.452 0.381 0.039) 73.61%,color(xyz 0.481 0.404 0.028) 80.56%,color(xyz 0.447 0.377 0.036 / 0.85),#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);filter:blur(.3px) drop-shadow(0 0 6px oklch(70% .14 62deg / .6))}:host([variant="kintsugi"][size="sm"]) .sp-kintsugi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="kintsugi"]:not([size])) .sp-kintsugi,:host([variant="kintsugi"][size="md"]) .sp-kintsugi{width:48px;height:48px}:host([variant="kintsugi"][size="lg"]) .sp-kintsugi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-shizuku{position:relative;border-radius:50%;animation:sp-rotate 1.8s linear infinite}.sp-shizuku span{position:absolute;border-radius:50%;background:#2a1f1a;top:50%;left:50%;transform-origin:0 0}:host([variant="shizuku"][tone="kaki"]) .sp-shizuku span,:host([variant="shizuku"][dark]) .sp-shizuku span{background:#c47c3b}.sp-shizuku.sp-shizuku--md{width:48px;height:48px}.sp-shizuku.sp-shizuku--md span{margin:-3px}.sp-shizuku.sp-shizuku--md span:nth-child(1){width:7px;height:7px;transform:rotate(0) translate(18px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--md span:nth-child(2){width:5.5px;height:5.5px;transform:rotate(60deg) translate(18px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--md span:nth-child(3){width:4px;height:4px;transform:rotate(115deg) translate(18px) translateY(-50%);opacity:.48}.sp-shizuku.sp-shizuku--md span:nth-child(4){width:3px;height:3px;transform:rotate(160deg) translate(18px) translateY(-50%);opacity:.28}.sp-shizuku.sp-shizuku--md span:nth-child(5){width:2px;height:2px;transform:rotate(200deg) translate(18px) translateY(-50%);opacity:.13}.sp-shizuku.sp-shizuku--md span:nth-child(6){width:1.5px;height:1.5px;transform:rotate(235deg) translate(18px) translateY(-50%);opacity:.06}.sp-shizuku.sp-shizuku--sm{width:24px;height:24px}.sp-shizuku.sp-shizuku--sm span{margin:-1.5px}.sp-shizuku.sp-shizuku--sm span:nth-child(1){width:4px;height:4px;transform:rotate(0) translate(9px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--sm span:nth-child(2){width:3px;height:3px;transform:rotate(60deg) translate(9px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--sm span:nth-child(3){width:2px;height:2px;transform:rotate(115deg) translate(9px) translateY(-50%);opacity:.45}.sp-shizuku.sp-shizuku--sm span:nth-child(4){width:1.5px;height:1.5px;transform:rotate(160deg) translate(9px) translateY(-50%);opacity:.25}.sp-shizuku.sp-shizuku--sm span:nth-child(5){width:1px;height:1px;transform:rotate(200deg) translate(9px) translateY(-50%);opacity:.1}.sp-shizuku.sp-shizuku--sm span:nth-child(6){width:1px;height:1px;transform:rotate(235deg) translate(9px) translateY(-50%);opacity:.05}.sp-shizuku.sp-shizuku--lg{width:72px;height:72px}.sp-shizuku.sp-shizuku--lg span{margin:-4.5px}.sp-shizuku.sp-shizuku--lg span:nth-child(1){width:10px;height:10px;transform:rotate(0) translate(27px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--lg span:nth-child(2){width:8px;height:8px;transform:rotate(55deg) translate(27px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--lg span:nth-child(3){width:6px;height:6px;transform:rotate(105deg) translate(27px) translateY(-50%);opacity:.5}.sp-shizuku.sp-shizuku--lg span:nth-child(4){width:4.5px;height:4.5px;transform:rotate(148deg) translate(27px) translateY(-50%);opacity:.3}.sp-shizuku.sp-shizuku--lg span:nth-child(5){width:3px;height:3px;transform:rotate(185deg) translate(27px) translateY(-50%);opacity:.15}.sp-shizuku.sp-shizuku--lg span:nth-child(6){width:2px;height:2px;transform:rotate(218deg) translate(27px) translateY(-50%);opacity:.06}@media(prefers-reduced-motion:reduce){:host([variant="enso"]) svg,:host(:not([variant])) svg,.sp-sumi,.sp-kintsugi,.sp-shizuku{animation:none}}}';
|
|
2
2
|
export {
|
|
3
3
|
spinnerCss as default
|
|
4
4
|
};
|
package/dist/index263.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const glitchCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-block;cursor:default}.tg-inner{position:relative;display:inline-block}:host([variant="slice"]) .tg-inner:before,:host([variant="slice"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="slice"]) .tg-inner:before{color:var(--color-kaki-500);mix-blend-mode:multiply}:host([variant="slice"]) .tg-inner:after{color:var(--color-celadon-400);mix-blend-mode:multiply}:host([variant="slice"]:hover) .tg-inner:before,:host([variant="slice"][active]) .tg-inner:before,:host([variant="slice"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-slice-before .42s steps(1) infinite}:host([variant="slice"]:hover) .tg-inner:after,:host([variant="slice"][active]) .tg-inner:after,:host([variant="slice"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-slice-after .42s steps(1) infinite;animation-delay:60ms}@keyframes tg-slice-before{0%{clip-path:inset(14% 0 72% 0);transform:translate(-3px)}10%{clip-path:inset(52% 0 32% 0);transform:translate(2px)}20%{clip-path:inset(8% 0 82% 0);transform:translate(-4px)}30%{clip-path:inset(66% 0 12% 0);transform:translate(3px)}40%{clip-path:inset(33% 0 44% 0);transform:translate(-2px)}50%{clip-path:inset(0% 0 90% 0);transform:translate(4px)}60%{clip-path:inset(78% 0 8% 0);transform:translate(-3px)}70%{clip-path:inset(22% 0 60% 0);transform:translate(2px)}80%{clip-path:inset(44% 0 38% 0);transform:translate(-4px)}90%{clip-path:inset(60% 0 18% 0);transform:translate(3px)}to{clip-path:inset(10% 0 75% 0);transform:translate(-2px)}}@keyframes tg-slice-after{0%{clip-path:inset(64% 0 20% 0);transform:translate(3px)}10%{clip-path:inset(28% 0 56% 0);transform:translate(-4px)}20%{clip-path:inset(76% 0 6% 0);transform:translate(2px)}30%{clip-path:inset(12% 0 70% 0);transform:translate(-3px)}40%{clip-path:inset(88% 0 4% 0);transform:translate(4px)}50%{clip-path:inset(40% 0 48% 0);transform:translate(-2px)}60%{clip-path:inset(6% 0 84% 0);transform:translate(3px)}70%{clip-path:inset(55% 0 30% 0);transform:translate(-4px)}80%{clip-path:inset(18% 0 66% 0);transform:translate(2px)}90%{clip-path:inset(82% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(36% 0 50% 0);transform:translate(4px)}}:host([variant="scan"]) .tg-inner:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--color-kaki-500);opacity:0;clip-path:inset(0 100% 0 0)}:host([variant="scan"]:hover) .tg-inner:before,:host([variant="scan"][active]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) forwards}:host([variant="scan"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-scan-sweep{0%{clip-path:inset(0% 100% 0 0);transform:translate(0)}30%{clip-path:inset(0% 0% 0 0);transform:translate(4px)}60%{clip-path:inset(0% 0% 0 0);transform:translate(-2px)}80%{clip-path:inset(0% 0% 0 0);transform:translate(0)}90%{clip-path:inset(0% 0% 0 0);transform:translate(0);opacity:1}to{clip-path:inset(0% 0% 0 0);opacity:0}}:host([variant="shift"]) .tg-inner:before,:host([variant="shift"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;color:inherit}:host([variant="shift"]:hover) .tg-inner:before,:host([variant="shift"][active]) .tg-inner:before,:host([variant="shift"][trigger="always"]) .tg-inner:before{opacity:.55;color:var(--color-kaki-400);animation:tg-shift-a .38s steps(1) infinite}:host([variant="shift"]:hover) .tg-inner:after,:host([variant="shift"][active]) .tg-inner:after,:host([variant="shift"][trigger="always"]) .tg-inner:after{opacity:.35;color:var(--color-celadon-500);animation:tg-shift-b .38s steps(1) infinite;animation-delay:.1s}@keyframes tg-shift-a{0%{transform:translate(-2px,1px);clip-path:inset(20% 0 55% 0)}20%{transform:translate(2px);clip-path:inset(60% 0 10% 0)}40%{transform:translate(-1px,-1px);clip-path:inset(5% 0 70% 0)}60%{transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}80%{transform:translate(-2px);clip-path:inset(75% 0 5% 0)}to{transform:translate(1px,-1px);clip-path:inset(30% 0 45% 0)}}@keyframes tg-shift-b{0%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}20%{transform:translate(-2px,1px);clip-path:inset(10% 0 65% 0)}40%{transform:translate(2px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(-3px,-1px);clip-path:inset(25% 0 50% 0)}80%{transform:translate(1px,1px);clip-path:inset(80% 0 5% 0)}to{transform:translate(-2px);clip-path:inset(35% 0 40% 0)}}:host([variant="decode"]) .char{display:inline-block;will-change:transform}:host([variant="decode"]) .char.is-scrambling{color:var(--color-kaki-500);animation:tg-char-jitter 60ms steps(1) infinite}@keyframes tg-char-jitter{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}:host([variant="redact"]) .tg-inner:before{content:"";position:absolute;top:0;right:-3px;bottom:0;left:-3px;background:var(--color-washi-900);transform:scaleX(0);transform-origin:left;pointer-events:none}:host([variant="redact"]:hover) .tg-inner:before,:host([variant="redact"][active]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) forwards}:host([variant="redact"][trigger="always"]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-redact{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}41%{transform:scaleX(1);transform-origin:right}80%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}:host([variant="noise"]) .tg-inner:before,:host([variant="noise"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="noise"]) .tg-inner:before{color:#9a614dcc}:host([variant="noise"]) .tg-inner:after{color:#487d73b3}:host([variant="noise"]:hover) .tg-inner:before,:host([variant="noise"][active]) .tg-inner:before,:host([variant="noise"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-noise-a .28s steps(1) infinite}:host([variant="noise"]:hover) .tg-inner:after,:host([variant="noise"][active]) .tg-inner:after,:host([variant="noise"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-noise-b .28s steps(1) infinite;animation-delay:40ms}@keyframes tg-noise-a{0%{clip-path:inset(18% 0 60% 0);transform:translate(-4px,1px) skew(-1deg)}14%{clip-path:inset(72% 0 8% 0);transform:translate(3px,-2px) skew(2deg)}28%{clip-path:inset(36% 0 40% 0);transform:translate(-2px,2px) skew(-2deg)}42%{clip-path:inset(5% 0 80% 0);transform:translate(4px) skew(1deg)}57%{clip-path:inset(55% 0 22% 0);transform:translate(-3px,-1px) skew(-1deg)}71%{clip-path:inset(85% 0 5% 0);transform:translate(2px,2px) skew(2deg)}85%{clip-path:inset(28% 0 50% 0);transform:translate(-4px,-2px) skew(-2deg)}to{clip-path:inset(48% 0 30% 0);transform:translate(3px,1px) skew(1deg)}}@keyframes tg-noise-b{0%{clip-path:inset(62% 0 18% 0);transform:translate(4px,-1px) skew(2deg)}14%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,2px) skew(-1deg)}28%{clip-path:inset(80% 0 8% 0);transform:translate(2px,-2px) skew(1deg)}42%{clip-path:inset(30% 0 42% 0);transform:translate(-4px,1px) skew(-2deg)}57%{clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px) skew(2deg)}71%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,2px) skew(-1deg)}85%{clip-path:inset(70% 0 12% 0);transform:translate(4px,-2px) skew(1deg)}to{clip-path:inset(22% 0 58% 0);transform:translate(-3px,1px) skew(-2deg)}}}';
|
|
1
|
+
const glitchCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-block;cursor:default}.tg-inner{position:relative;display:inline-block}:host([variant="slice"]) .tg-inner:before,:host([variant="slice"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="slice"]) .tg-inner:before{color:var(--color-kaki-500);mix-blend-mode:multiply}:host([variant="slice"]) .tg-inner:after{color:var(--color-celadon-400);mix-blend-mode:multiply}:host([variant="slice"]:hover) .tg-inner:before,:host([variant="slice"][active]) .tg-inner:before,:host([variant="slice"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-slice-before .42s steps(1) infinite}:host([variant="slice"]:hover) .tg-inner:after,:host([variant="slice"][active]) .tg-inner:after,:host([variant="slice"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-slice-after .42s steps(1) infinite;animation-delay:60ms}@keyframes tg-slice-before{0%{clip-path:inset(14% 0 72% 0);transform:translate(-3px)}10%{clip-path:inset(52% 0 32% 0);transform:translate(2px)}20%{clip-path:inset(8% 0 82% 0);transform:translate(-4px)}30%{clip-path:inset(66% 0 12% 0);transform:translate(3px)}40%{clip-path:inset(33% 0 44% 0);transform:translate(-2px)}50%{clip-path:inset(0% 0 90% 0);transform:translate(4px)}60%{clip-path:inset(78% 0 8% 0);transform:translate(-3px)}70%{clip-path:inset(22% 0 60% 0);transform:translate(2px)}80%{clip-path:inset(44% 0 38% 0);transform:translate(-4px)}90%{clip-path:inset(60% 0 18% 0);transform:translate(3px)}to{clip-path:inset(10% 0 75% 0);transform:translate(-2px)}}@keyframes tg-slice-after{0%{clip-path:inset(64% 0 20% 0);transform:translate(3px)}10%{clip-path:inset(28% 0 56% 0);transform:translate(-4px)}20%{clip-path:inset(76% 0 6% 0);transform:translate(2px)}30%{clip-path:inset(12% 0 70% 0);transform:translate(-3px)}40%{clip-path:inset(88% 0 4% 0);transform:translate(4px)}50%{clip-path:inset(40% 0 48% 0);transform:translate(-2px)}60%{clip-path:inset(6% 0 84% 0);transform:translate(3px)}70%{clip-path:inset(55% 0 30% 0);transform:translate(-4px)}80%{clip-path:inset(18% 0 66% 0);transform:translate(2px)}90%{clip-path:inset(82% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(36% 0 50% 0);transform:translate(4px)}}:host([variant="scan"]) .tg-inner:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--color-kaki-500);opacity:0;clip-path:inset(0 100% 0 0)}:host([variant="scan"]:hover) .tg-inner:before,:host([variant="scan"][active]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) forwards}:host([variant="scan"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-scan-sweep{0%{clip-path:inset(0% 100% 0 0);transform:translate(0)}30%{clip-path:inset(0% 0% 0 0);transform:translate(4px)}60%{clip-path:inset(0% 0% 0 0);transform:translate(-2px)}80%{clip-path:inset(0% 0% 0 0);transform:translate(0)}90%{clip-path:inset(0% 0% 0 0);transform:translate(0);opacity:1}to{clip-path:inset(0% 0% 0 0);opacity:0}}:host([variant="shift"]) .tg-inner:before,:host([variant="shift"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;color:inherit}:host([variant="shift"]:hover) .tg-inner:before,:host([variant="shift"][active]) .tg-inner:before,:host([variant="shift"][trigger="always"]) .tg-inner:before{opacity:.55;color:var(--color-kaki-400);animation:tg-shift-a .38s steps(1) infinite}:host([variant="shift"]:hover) .tg-inner:after,:host([variant="shift"][active]) .tg-inner:after,:host([variant="shift"][trigger="always"]) .tg-inner:after{opacity:.35;color:var(--color-celadon-500);animation:tg-shift-b .38s steps(1) infinite;animation-delay:.1s}@keyframes tg-shift-a{0%{transform:translate(-2px,1px);clip-path:inset(20% 0 55% 0)}20%{transform:translate(2px);clip-path:inset(60% 0 10% 0)}40%{transform:translate(-1px,-1px);clip-path:inset(5% 0 70% 0)}60%{transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}80%{transform:translate(-2px);clip-path:inset(75% 0 5% 0)}to{transform:translate(1px,-1px);clip-path:inset(30% 0 45% 0)}}@keyframes tg-shift-b{0%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}20%{transform:translate(-2px,1px);clip-path:inset(10% 0 65% 0)}40%{transform:translate(2px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(-3px,-1px);clip-path:inset(25% 0 50% 0)}80%{transform:translate(1px,1px);clip-path:inset(80% 0 5% 0)}to{transform:translate(-2px);clip-path:inset(35% 0 40% 0)}}:host([variant="decode"]) .char{display:inline-block;will-change:transform}:host([variant="decode"]) .char.is-scrambling{color:var(--color-kaki-500);animation:tg-char-jitter 60ms steps(1) infinite}@keyframes tg-char-jitter{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}:host([variant="redact"]) .tg-inner:before{content:"";position:absolute;top:0;right:-3px;bottom:0;left:-3px;background:var(--color-washi-900);transform:scaleX(0);transform-origin:left;pointer-events:none}:host([variant="redact"]:hover) .tg-inner:before,:host([variant="redact"][active]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) forwards}:host([variant="redact"][trigger="always"]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-redact{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}41%{transform:scaleX(1);transform-origin:right}80%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}:host([variant="noise"]) .tg-inner:before,:host([variant="noise"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="noise"]) .tg-inner:before{color:#9a614dcc}:host([variant="noise"]) .tg-inner:after{color:#487d73b3}:host([variant="noise"]:hover) .tg-inner:before,:host([variant="noise"][active]) .tg-inner:before,:host([variant="noise"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-noise-a .28s steps(1) infinite}:host([variant="noise"]:hover) .tg-inner:after,:host([variant="noise"][active]) .tg-inner:after,:host([variant="noise"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-noise-b .28s steps(1) infinite;animation-delay:40ms}@keyframes tg-noise-a{0%{clip-path:inset(18% 0 60% 0);transform:translate(-4px,1px) skew(-1deg)}14%{clip-path:inset(72% 0 8% 0);transform:translate(3px,-2px) skew(2deg)}28%{clip-path:inset(36% 0 40% 0);transform:translate(-2px,2px) skew(-2deg)}42%{clip-path:inset(5% 0 80% 0);transform:translate(4px) skew(1deg)}57%{clip-path:inset(55% 0 22% 0);transform:translate(-3px,-1px) skew(-1deg)}71%{clip-path:inset(85% 0 5% 0);transform:translate(2px,2px) skew(2deg)}85%{clip-path:inset(28% 0 50% 0);transform:translate(-4px,-2px) skew(-2deg)}to{clip-path:inset(48% 0 30% 0);transform:translate(3px,1px) skew(1deg)}}@keyframes tg-noise-b{0%{clip-path:inset(62% 0 18% 0);transform:translate(4px,-1px) skew(2deg)}14%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,2px) skew(-1deg)}28%{clip-path:inset(80% 0 8% 0);transform:translate(2px,-2px) skew(1deg)}42%{clip-path:inset(30% 0 42% 0);transform:translate(-4px,1px) skew(-2deg)}57%{clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px) skew(2deg)}71%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,2px) skew(-1deg)}85%{clip-path:inset(70% 0 12% 0);transform:translate(4px,-2px) skew(1deg)}to{clip-path:inset(22% 0 58% 0);transform:translate(-3px,1px) skew(-2deg)}}@media(prefers-reduced-motion:reduce){.tg-inner:before,.tg-inner:after{animation:none!important;opacity:0!important}.char.is-scrambling{animation:none!important;color:inherit}}}';
|
|
2
2
|
export {
|
|
3
3
|
glitchCss as default
|
|
4
4
|
};
|
package/dist/index307.js
CHANGED
package/dist/index316.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { renderClassic } from "./
|
|
2
|
-
import { renderCentered } from "./
|
|
3
|
-
import { renderMega } from "./
|
|
4
|
-
import { renderAppBar } from "./
|
|
1
|
+
import { renderClassic } from "./index353.js";
|
|
2
|
+
import { renderCentered } from "./index354.js";
|
|
3
|
+
import { renderMega } from "./index355.js";
|
|
4
|
+
import { renderAppBar } from "./index356.js";
|
|
5
5
|
function headerTemplate(ctx) {
|
|
6
6
|
switch (ctx.variant) {
|
|
7
7
|
case "centered":
|
package/dist/index353.js
CHANGED
|
@@ -1,28 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
class
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (r === A || null == r) return this._t = void 0, this.it = r;
|
|
14
|
-
if (r === E) return r;
|
|
15
|
-
if ("string" != typeof r) throw Error(this.constructor.directiveName + "() called with a non-string value");
|
|
16
|
-
if (r === this.it) return this._t;
|
|
17
|
-
this.it = r;
|
|
18
|
-
const s = [r];
|
|
19
|
-
return s.raw = s, this._t = { _$litType$: this.constructor.resultType, strings: s, values: [] };
|
|
20
|
-
}
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
import { renderLogo, renderLinks, renderActions } from "./index361.js";
|
|
3
|
+
import { renderHamburger, renderMobileDrawer } from "./index362.js";
|
|
4
|
+
function renderClassic(ctx) {
|
|
5
|
+
return html`
|
|
6
|
+
<div class="hdr">
|
|
7
|
+
${renderLogo(ctx)}
|
|
8
|
+
<nav class="hdr-nav">${renderLinks(ctx, ctx.links)}</nav>
|
|
9
|
+
${renderActions(ctx)}
|
|
10
|
+
${renderHamburger(ctx)}
|
|
11
|
+
</div>
|
|
12
|
+
${renderMobileDrawer(ctx)}`;
|
|
21
13
|
}
|
|
22
|
-
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
23
|
-
const o = e$1(e);
|
|
24
14
|
export {
|
|
25
|
-
|
|
26
|
-
o as unsafeHTML
|
|
15
|
+
renderClassic
|
|
27
16
|
};
|
|
28
17
|
//# sourceMappingURL=index353.js.map
|
package/dist/index353.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index353.js","sources":["
|
|
1
|
+
{"version":3,"file":"index353.js","sources":["../src/components/molecules/header/templates/header-classic.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport { renderLogo, renderLinks, renderActions } from './header-shared.html';\nimport { renderHamburger, renderMobileDrawer } from './header-mobile.html';\n\n/**\n * Template compartido por las variantes de layout simple:\n * classic · dark · transparent · kintsugi · glitch · minimal · shrink\n *\n * Estructura: logo | nav | actions | hamburger (móvil)\n */\nexport function renderClassic(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n ${renderLogo(ctx)}\n <nav class=\"hdr-nav\">${renderLinks(ctx, ctx.links)}</nav>\n ${renderActions(ctx)}\n ${renderHamburger(ctx)}\n </div>\n ${renderMobileDrawer(ctx)}`;\n}"],"names":[],"mappings":";;;AAWO,SAAS,cAAc,KAAgC;AAC5D,SAAO;AAAA;AAAA,QAED,WAAW,GAAG,CAAC;AAAA,6BACM,YAAY,KAAK,IAAI,KAAK,CAAC;AAAA,QAChD,cAAc,GAAG,CAAC;AAAA,QAClB,gBAAgB,GAAG,CAAC;AAAA;AAAA,MAEtB,mBAAmB,GAAG,CAAC;AAC7B;"}
|
package/dist/index354.js
CHANGED
|
@@ -1,17 +1,31 @@
|
|
|
1
|
-
import { html } from "lit";
|
|
2
|
-
import {
|
|
1
|
+
import { nothing, html } from "lit";
|
|
2
|
+
import { renderLinks, renderLogo, renderActions } from "./index361.js";
|
|
3
3
|
import { renderHamburger, renderMobileDrawer } from "./index362.js";
|
|
4
|
-
function
|
|
4
|
+
function renderCentered(ctx) {
|
|
5
|
+
const mid = Math.floor(ctx.links.length / 2);
|
|
6
|
+
const leftLinks = ctx.links.slice(0, mid);
|
|
7
|
+
const rightLinks = ctx.links.slice(mid);
|
|
5
8
|
return html`
|
|
9
|
+
${ctx.announcement ? html`
|
|
10
|
+
<div class="hdr-announcement">
|
|
11
|
+
<span>${ctx.announcement}</span>
|
|
12
|
+
${ctx.announcementHref ? html`<a href="${ctx.announcementHref}">Ver →</a>` : nothing}
|
|
13
|
+
</div>` : nothing}
|
|
14
|
+
|
|
6
15
|
<div class="hdr">
|
|
16
|
+
<nav class="hdr-nav hdr-nav--centered-left">
|
|
17
|
+
${renderLinks(ctx, leftLinks)}
|
|
18
|
+
</nav>
|
|
7
19
|
${renderLogo(ctx)}
|
|
8
|
-
<nav class="hdr-nav
|
|
9
|
-
|
|
20
|
+
<nav class="hdr-nav hdr-nav--right">
|
|
21
|
+
${renderLinks(ctx, rightLinks)}
|
|
22
|
+
${renderActions(ctx)}
|
|
23
|
+
</nav>
|
|
10
24
|
${renderHamburger(ctx)}
|
|
11
25
|
</div>
|
|
12
26
|
${renderMobileDrawer(ctx)}`;
|
|
13
27
|
}
|
|
14
28
|
export {
|
|
15
|
-
|
|
29
|
+
renderCentered
|
|
16
30
|
};
|
|
17
31
|
//# sourceMappingURL=index354.js.map
|
package/dist/index354.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index354.js","sources":["../src/components/molecules/header/templates/header-
|
|
1
|
+
{"version":3,"file":"index354.js","sources":["../src/components/molecules/header/templates/header-centered.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport { renderLogo, renderLinks, renderActions } from './header-shared.html';\nimport { renderHamburger, renderMobileDrawer } from './header-mobile.html';\n\n/**\n * Template variante centered:\n * [nav-izquierda] | [logo-central] | [nav-derecha + actions]\n * En móvil colapsa a: [logo] | [hamburger]\n */\nexport function renderCentered(ctx: LibHeader): TemplateResult {\n const mid = Math.floor(ctx.links.length / 2);\n const leftLinks = ctx.links.slice(0, mid);\n const rightLinks = ctx.links.slice(mid);\n\n return html`\n ${ctx.announcement ? html`\n <div class=\"hdr-announcement\">\n <span>${ctx.announcement}</span>\n ${ctx.announcementHref\n ? html`<a href=\"${ctx.announcementHref}\">Ver →</a>`\n : nothing}\n </div>` : nothing}\n\n <div class=\"hdr\">\n <nav class=\"hdr-nav hdr-nav--centered-left\">\n ${renderLinks(ctx, leftLinks)}\n </nav>\n ${renderLogo(ctx)}\n <nav class=\"hdr-nav hdr-nav--right\">\n ${renderLinks(ctx, rightLinks)}\n ${renderActions(ctx)}\n </nav>\n ${renderHamburger(ctx)}\n </div>\n ${renderMobileDrawer(ctx)}`;\n}"],"names":[],"mappings":";;;AAUO,SAAS,eAAe,KAAgC;AAC7D,QAAM,MAAa,KAAK,MAAM,IAAI,MAAM,SAAS,CAAC;AAClD,QAAM,YAAa,IAAI,MAAM,MAAM,GAAG,GAAG;AACzC,QAAM,aAAa,IAAI,MAAM,MAAM,GAAG;AAEtC,SAAO;AAAA,MACH,IAAI,eAAe;AAAA;AAAA,gBAET,IAAI,YAAY;AAAA,UACtB,IAAI,mBACF,gBAAgB,IAAI,gBAAgB,gBACpC,OAAO;AAAA,gBACH,OAAO;AAAA;AAAA;AAAA;AAAA,UAIb,YAAY,KAAK,SAAS,CAAC;AAAA;AAAA,QAE7B,WAAW,GAAG,CAAC;AAAA;AAAA,UAEb,YAAY,KAAK,UAAU,CAAC;AAAA,UAC5B,cAAc,GAAG,CAAC;AAAA;AAAA,QAEpB,gBAAgB,GAAG,CAAC;AAAA;AAAA,MAEtB,mBAAmB,GAAG,CAAC;AAC7B;"}
|
package/dist/index355.js
CHANGED
|
@@ -1,31 +1,69 @@
|
|
|
1
1
|
import { nothing, html } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { renderLogo, svgChevron, renderActions } from "./index361.js";
|
|
3
3
|
import { renderHamburger, renderMobileDrawer } from "./index362.js";
|
|
4
|
-
function
|
|
5
|
-
const mid = Math.floor(ctx.links.length / 2);
|
|
6
|
-
const leftLinks = ctx.links.slice(0, mid);
|
|
7
|
-
const rightLinks = ctx.links.slice(mid);
|
|
4
|
+
function renderMega(ctx) {
|
|
8
5
|
return html`
|
|
9
|
-
${ctx.announcement ? html`
|
|
10
|
-
<div class="hdr-announcement">
|
|
11
|
-
<span>${ctx.announcement}</span>
|
|
12
|
-
${ctx.announcementHref ? html`<a href="${ctx.announcementHref}">Ver →</a>` : nothing}
|
|
13
|
-
</div>` : nothing}
|
|
14
|
-
|
|
15
6
|
<div class="hdr">
|
|
16
|
-
<nav class="hdr-nav hdr-nav--centered-left">
|
|
17
|
-
${renderLinks(ctx, leftLinks)}
|
|
18
|
-
</nav>
|
|
19
7
|
${renderLogo(ctx)}
|
|
20
|
-
<nav class="hdr-nav
|
|
21
|
-
${
|
|
22
|
-
|
|
8
|
+
<nav class="hdr-nav">
|
|
9
|
+
${ctx.links.map(
|
|
10
|
+
(link) => {
|
|
11
|
+
var _a;
|
|
12
|
+
return ((_a = link.dropdown) == null ? void 0 : _a.length) ? html`
|
|
13
|
+
<div
|
|
14
|
+
class="hdr-dd"
|
|
15
|
+
@mouseenter="${() => ctx._openMega()}"
|
|
16
|
+
@mouseleave="${() => ctx._closeMega()}"
|
|
17
|
+
>
|
|
18
|
+
<span class="hdr-link">
|
|
19
|
+
${link.label} ${svgChevron}
|
|
20
|
+
</span>
|
|
21
|
+
</div>` : html`<a href="${link.href || "#"}" class="hdr-link">${link.label}</a>`;
|
|
22
|
+
}
|
|
23
|
+
)}
|
|
23
24
|
</nav>
|
|
25
|
+
${renderActions(ctx)}
|
|
24
26
|
${renderHamburger(ctx)}
|
|
25
27
|
</div>
|
|
28
|
+
|
|
29
|
+
<!-- Overlay detrás del panel -->
|
|
30
|
+
<div
|
|
31
|
+
class="hdr-mega-overlay ${ctx._megaOpen ? "is-open" : ""}"
|
|
32
|
+
@mouseenter="${() => ctx._closeMega()}"
|
|
33
|
+
></div>
|
|
34
|
+
|
|
35
|
+
<!-- Panel full-width -->
|
|
36
|
+
<div
|
|
37
|
+
class="hdr-mega-panel ${ctx._megaOpen ? "is-open" : ""}"
|
|
38
|
+
@mouseenter="${() => ctx._openMega()}"
|
|
39
|
+
@mouseleave="${() => ctx._closeMega()}"
|
|
40
|
+
>
|
|
41
|
+
<div class="hdr-mega-inner">
|
|
42
|
+
${ctx.megaColumns.map((col) => html`
|
|
43
|
+
<div>
|
|
44
|
+
<div class="hdr-mega-group-title">${col.title}</div>
|
|
45
|
+
${col.items.map((item) => html`
|
|
46
|
+
<a href="${item.href || "#"}" class="hdr-mega-link">${item.label}</a>
|
|
47
|
+
`)}
|
|
48
|
+
</div>
|
|
49
|
+
`)}
|
|
50
|
+
${ctx.megaCta ? html`
|
|
51
|
+
<div class="hdr-mega-cta">
|
|
52
|
+
<div class="hdr-mega-cta-label">${ctx.megaCta.label}</div>
|
|
53
|
+
<div class="hdr-mega-cta-title">${ctx.megaCta.title}</div>
|
|
54
|
+
<div class="hdr-mega-cta-desc">${ctx.megaCta.desc}</div>
|
|
55
|
+
<a href="${ctx.megaCta.href || "#"}"
|
|
56
|
+
class="hdr-action hdr-action--kaki"
|
|
57
|
+
style="height:32px;font-size:8px;"
|
|
58
|
+
>${ctx.megaCta.cta}</a>
|
|
59
|
+
</div>
|
|
60
|
+
` : nothing}
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
26
64
|
${renderMobileDrawer(ctx)}`;
|
|
27
65
|
}
|
|
28
66
|
export {
|
|
29
|
-
|
|
67
|
+
renderMega
|
|
30
68
|
};
|
|
31
69
|
//# sourceMappingURL=index355.js.map
|
package/dist/index355.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index355.js","sources":["../src/components/molecules/header/templates/header-
|
|
1
|
+
{"version":3,"file":"index355.js","sources":["../src/components/molecules/header/templates/header-mega.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport { renderLogo, renderActions, svgChevron } from './header-shared.html';\nimport { renderHamburger, renderMobileDrawer } from './header-mobile.html';\n\n/**\n * Template variante mega:\n * Panel full-width al hover sobre el link con dropdown.\n * En móvil el panel se oculta y el drawer cubre los mega-columns.\n */\nexport function renderMega(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n ${renderLogo(ctx)}\n <nav class=\"hdr-nav\">\n ${ctx.links.map(link =>\n link.dropdown?.length\n ? html`\n <div\n class=\"hdr-dd\"\n @mouseenter=\"${(): void => ctx._openMega()}\"\n @mouseleave=\"${(): void => ctx._closeMega()}\"\n >\n <span class=\"hdr-link\">\n ${link.label} ${svgChevron}\n </span>\n </div>`\n : html`<a href=\"${link.href || '#'}\" class=\"hdr-link\">${link.label}</a>`\n )}\n </nav>\n ${renderActions(ctx)}\n ${renderHamburger(ctx)}\n </div>\n\n <!-- Overlay detrás del panel -->\n <div\n class=\"hdr-mega-overlay ${ctx._megaOpen ? 'is-open' : ''}\"\n @mouseenter=\"${(): void => ctx._closeMega()}\"\n ></div>\n\n <!-- Panel full-width -->\n <div\n class=\"hdr-mega-panel ${ctx._megaOpen ? 'is-open' : ''}\"\n @mouseenter=\"${(): void => ctx._openMega()}\"\n @mouseleave=\"${(): void => ctx._closeMega()}\"\n >\n <div class=\"hdr-mega-inner\">\n ${ctx.megaColumns.map(col => html`\n <div>\n <div class=\"hdr-mega-group-title\">${col.title}</div>\n ${col.items.map(item => html`\n <a href=\"${item.href || '#'}\" class=\"hdr-mega-link\">${item.label}</a>\n `)}\n </div>\n `)}\n ${ctx.megaCta ? html`\n <div class=\"hdr-mega-cta\">\n <div class=\"hdr-mega-cta-label\">${ctx.megaCta.label}</div>\n <div class=\"hdr-mega-cta-title\">${ctx.megaCta.title}</div>\n <div class=\"hdr-mega-cta-desc\">${ctx.megaCta.desc}</div>\n <a href=\"${ctx.megaCta.href || '#'}\"\n class=\"hdr-action hdr-action--kaki\"\n style=\"height:32px;font-size:8px;\"\n >${ctx.megaCta.cta}</a>\n </div>\n ` : nothing}\n </div>\n </div>\n\n ${renderMobileDrawer(ctx)}`;\n}"],"names":[],"mappings":";;;AAUO,SAAS,WAAW,KAAgC;AACzD,SAAO;AAAA;AAAA,QAED,WAAW,GAAG,CAAC;AAAA;AAAA,UAEb,IAAI,MAAM;AAAA,IAAI,CAAA,SAAA;;AACd,yBAAK,aAAL,mBAAe,UACX;AAAA;AAAA;AAAA,iCAGmB,MAAY,IAAI,WAAW;AAAA,iCAC3B,MAAY,IAAI,YAAY;AAAA;AAAA;AAAA,sBAGvC,KAAK,KAAK,IAAI,UAAU;AAAA;AAAA,0BAGhC,gBAAgB,KAAK,QAAQ,GAAG,sBAAsB,KAAK,KAAK;AAAA;AAAA,EAAA,CACrE;AAAA;AAAA,QAED,cAAc,GAAG,CAAC;AAAA,QAClB,gBAAgB,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKI,IAAI,YAAY,YAAY,EAAE;AAAA,qBACzC,MAAY,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKnB,IAAI,YAAY,YAAY,EAAE;AAAA,qBACvC,MAAY,IAAI,WAAW;AAAA,qBAC3B,MAAY,IAAI,YAAY;AAAA;AAAA;AAAA,UAGvC,IAAI,YAAY,IAAI,CAAA,QAAO;AAAA;AAAA,gDAEW,IAAI,KAAK;AAAA,cAC3C,IAAI,MAAM,IAAI,CAAA,SAAQ;AAAA,yBACX,KAAK,QAAQ,GAAG,2BAA2B,KAAK,KAAK;AAAA,aACjE,CAAC;AAAA;AAAA,SAEL,CAAC;AAAA,UACA,IAAI,UAAU;AAAA;AAAA,8CAEsB,IAAI,QAAQ,KAAK;AAAA,8CACjB,IAAI,QAAQ,KAAK;AAAA,6CAClB,IAAI,QAAQ,IAAI;AAAA,uBACtC,IAAI,QAAQ,QAAQ,GAAG;AAAA;AAAA;AAAA,eAG/B,IAAI,QAAQ,GAAG;AAAA;AAAA,YAElB,OAAO;AAAA;AAAA;AAAA;AAAA,MAIb,mBAAmB,GAAG,CAAC;AAC7B;"}
|
package/dist/index356.js
CHANGED
|
@@ -1,69 +1,67 @@
|
|
|
1
1
|
import { nothing, html } from "lit";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
function renderMega(ctx) {
|
|
2
|
+
import { svgBell, renderBreadcrumbs, svgSearch } from "./index361.js";
|
|
3
|
+
function renderAppBar(ctx) {
|
|
5
4
|
return html`
|
|
6
5
|
<div class="hdr">
|
|
7
|
-
${renderLogo(ctx)}
|
|
8
|
-
<nav class="hdr-nav">
|
|
9
|
-
${ctx.links.map(
|
|
10
|
-
(link) => {
|
|
11
|
-
var _a;
|
|
12
|
-
return ((_a = link.dropdown) == null ? void 0 : _a.length) ? html`
|
|
13
|
-
<div
|
|
14
|
-
class="hdr-dd"
|
|
15
|
-
@mouseenter="${() => ctx._openMega()}"
|
|
16
|
-
@mouseleave="${() => ctx._closeMega()}"
|
|
17
|
-
>
|
|
18
|
-
<span class="hdr-link">
|
|
19
|
-
${link.label} ${svgChevron}
|
|
20
|
-
</span>
|
|
21
|
-
</div>` : html`<a href="${link.href || "#"}" class="hdr-link">${link.label}</a>`;
|
|
22
|
-
}
|
|
23
|
-
)}
|
|
24
|
-
</nav>
|
|
25
|
-
${renderActions(ctx)}
|
|
26
|
-
${renderHamburger(ctx)}
|
|
27
|
-
</div>
|
|
28
6
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
class="hdr-mega-overlay ${ctx._megaOpen ? "is-open" : ""}"
|
|
32
|
-
@mouseenter="${() => ctx._closeMega()}"
|
|
33
|
-
></div>
|
|
7
|
+
<!-- Logo mark (sin texto) -->
|
|
8
|
+
<div class="hdr-logo-mark" style="flex-shrink:0;"></div>
|
|
34
9
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
10
|
+
<!-- Breadcrumbs -->
|
|
11
|
+
${ctx.breadcrumbs.length ? renderBreadcrumbs(ctx.breadcrumbs) : nothing}
|
|
12
|
+
|
|
13
|
+
<!-- Divider — oculto en móvil -->
|
|
14
|
+
<div class="hdr-divider hdr-divider--desktop"></div>
|
|
15
|
+
|
|
16
|
+
<!-- Search — full en desktop, icono en móvil -->
|
|
17
|
+
${ctx.showSearch ? html`
|
|
18
|
+
<div class="hdr-search">
|
|
19
|
+
${svgSearch}
|
|
20
|
+
<input
|
|
21
|
+
type="search"
|
|
22
|
+
placeholder="${ctx.searchPlaceholder}"
|
|
23
|
+
@input="${(e) => ctx._onSearch(e.target.value)}"
|
|
24
|
+
/>
|
|
25
|
+
<span class="hdr-search-kbd">⌘K</span>
|
|
26
|
+
</div>
|
|
27
|
+
` : nothing}
|
|
28
|
+
|
|
29
|
+
<div class="hdr-spacer"></div>
|
|
30
|
+
|
|
31
|
+
<!-- Context actions — ocultos en móvil -->
|
|
32
|
+
${ctx.actions.length ? html`
|
|
33
|
+
<div class="hdr-actions hdr-actions--desktop">
|
|
34
|
+
${ctx.actions.map((action) => html`
|
|
35
|
+
<a href="${action.href || "#"}"
|
|
36
|
+
class="hdr-action ${action.variant === "outline" ? "hdr-action--outline" : "hdr-action--kaki"}"
|
|
57
37
|
style="height:32px;font-size:8px;"
|
|
58
|
-
>${
|
|
59
|
-
|
|
60
|
-
|
|
38
|
+
>${action.label}</a>
|
|
39
|
+
`)}
|
|
40
|
+
</div>
|
|
41
|
+
` : nothing}
|
|
42
|
+
|
|
43
|
+
<!-- Status (compact mode) — oculto en móvil -->
|
|
44
|
+
${ctx.compact ? html`
|
|
45
|
+
<div class="hdr-status hdr-status--desktop">
|
|
46
|
+
<div class="hdr-status-dot"></div>
|
|
47
|
+
<span class="hdr-status-text">Online · 42ms</span>
|
|
48
|
+
</div>
|
|
49
|
+
` : nothing}
|
|
50
|
+
|
|
51
|
+
<div class="hdr-divider"></div>
|
|
52
|
+
|
|
53
|
+
<!-- Notificaciones -->
|
|
54
|
+
<div class="hdr-notif">
|
|
55
|
+
${svgBell}
|
|
56
|
+
${ctx.notifications ? html`<span class="hdr-notif-dot"></span>` : nothing}
|
|
61
57
|
</div>
|
|
62
|
-
</div>
|
|
63
58
|
|
|
64
|
-
|
|
59
|
+
<!-- Avatar -->
|
|
60
|
+
<div class="hdr-avatar">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>
|
|
61
|
+
|
|
62
|
+
</div>`;
|
|
65
63
|
}
|
|
66
64
|
export {
|
|
67
|
-
|
|
65
|
+
renderAppBar
|
|
68
66
|
};
|
|
69
67
|
//# sourceMappingURL=index356.js.map
|
package/dist/index356.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index356.js","sources":["../src/components/molecules/header/templates/header-
|
|
1
|
+
{"version":3,"file":"index356.js","sources":["../src/components/molecules/header/templates/header-app-bar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { HeaderAction } from '../lib-header.types';\nimport { renderBreadcrumbs, svgSearch, svgBell } from './header-shared.html';\n\n/**\n * Template variante app-bar:\n * logomark | breadcrumbs | search | spacer | actions | notif | avatar\n * No usa el drawer móvil — sus acciones son contextuales.\n * En móvil: breadcrumbs se truncan, search colapsa a icono.\n */\nexport function renderAppBar(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n\n <!-- Logo mark (sin texto) -->\n <div class=\"hdr-logo-mark\" style=\"flex-shrink:0;\"></div>\n\n <!-- Breadcrumbs -->\n ${ctx.breadcrumbs.length ? renderBreadcrumbs(ctx.breadcrumbs) : nothing}\n\n <!-- Divider — oculto en móvil -->\n <div class=\"hdr-divider hdr-divider--desktop\"></div>\n\n <!-- Search — full en desktop, icono en móvil -->\n ${ctx.showSearch ? html`\n <div class=\"hdr-search\">\n ${svgSearch}\n <input\n type=\"search\"\n placeholder=\"${ctx.searchPlaceholder}\"\n @input=\"${(e: Event): void =>\n ctx._onSearch((e.target as HTMLInputElement).value)}\"\n />\n <span class=\"hdr-search-kbd\">⌘K</span>\n </div>\n ` : nothing}\n\n <div class=\"hdr-spacer\"></div>\n\n <!-- Context actions — ocultos en móvil -->\n ${ctx.actions.length ? html`\n <div class=\"hdr-actions hdr-actions--desktop\">\n ${ctx.actions.map((action: HeaderAction) => html`\n <a href=\"${action.href || '#'}\"\n class=\"hdr-action ${action.variant === 'outline'\n ? 'hdr-action--outline' : 'hdr-action--kaki'}\"\n style=\"height:32px;font-size:8px;\"\n >${action.label}</a>\n `)}\n </div>\n ` : nothing}\n\n <!-- Status (compact mode) — oculto en móvil -->\n ${ctx.compact ? html`\n <div class=\"hdr-status hdr-status--desktop\">\n <div class=\"hdr-status-dot\"></div>\n <span class=\"hdr-status-text\">Online · 42ms</span>\n </div>\n ` : nothing}\n\n <div class=\"hdr-divider\"></div>\n\n <!-- Notificaciones -->\n <div class=\"hdr-notif\">\n ${svgBell}\n ${ctx.notifications ? html`<span class=\"hdr-notif-dot\"></span>` : nothing}\n </div>\n\n <!-- Avatar -->\n <div class=\"hdr-avatar\">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>\n\n </div>`;\n}"],"names":[],"mappings":";;AAWO,SAAS,aAAa,KAAgC;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOD,IAAI,YAAY,SAAS,kBAAkB,IAAI,WAAW,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMrE,IAAI,aAAa;AAAA;AAAA,YAEb,SAAS;AAAA;AAAA;AAAA,2BAGM,IAAI,iBAAiB;AAAA,sBAC1B,CAAC,MACT,IAAI,UAAW,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,UAIvD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,IAAI,QAAQ,SAAS;AAAA;AAAA,YAEjB,IAAI,QAAQ,IAAI,CAAC,WAAyB;AAAA,uBAC/B,OAAO,QAAQ,GAAG;AAAA,kCACP,OAAO,YAAY,YACnC,wBAAwB,kBAAkB;AAAA;AAAA,eAE7C,OAAO,KAAK;AAAA,WAChB,CAAC;AAAA;AAAA,UAEF,OAAO;AAAA;AAAA;AAAA,QAGT,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKZ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMP,OAAO;AAAA,UACP,IAAI,gBAAgB,4CAA4C,OAAO;AAAA;AAAA;AAAA;AAAA,gCAIjD,IAAI,gBAAgB,IAAI,SAAS,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAG5E;"}
|
package/dist/index357.js
CHANGED
|
@@ -1,67 +1,28 @@
|
|
|
1
|
-
import { nothing,
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
type="search"
|
|
22
|
-
placeholder="${ctx.searchPlaceholder}"
|
|
23
|
-
@input="${(e) => ctx._onSearch(e.target.value)}"
|
|
24
|
-
/>
|
|
25
|
-
<span class="hdr-search-kbd">⌘K</span>
|
|
26
|
-
</div>
|
|
27
|
-
` : nothing}
|
|
28
|
-
|
|
29
|
-
<div class="hdr-spacer"></div>
|
|
30
|
-
|
|
31
|
-
<!-- Context actions — ocultos en móvil -->
|
|
32
|
-
${ctx.actions.length ? html`
|
|
33
|
-
<div class="hdr-actions hdr-actions--desktop">
|
|
34
|
-
${ctx.actions.map((action) => html`
|
|
35
|
-
<a href="${action.href || "#"}"
|
|
36
|
-
class="hdr-action ${action.variant === "outline" ? "hdr-action--outline" : "hdr-action--kaki"}"
|
|
37
|
-
style="height:32px;font-size:8px;"
|
|
38
|
-
>${action.label}</a>
|
|
39
|
-
`)}
|
|
40
|
-
</div>
|
|
41
|
-
` : nothing}
|
|
42
|
-
|
|
43
|
-
<!-- Status (compact mode) — oculto en móvil -->
|
|
44
|
-
${ctx.compact ? html`
|
|
45
|
-
<div class="hdr-status hdr-status--desktop">
|
|
46
|
-
<div class="hdr-status-dot"></div>
|
|
47
|
-
<span class="hdr-status-text">Online · 42ms</span>
|
|
48
|
-
</div>
|
|
49
|
-
` : nothing}
|
|
50
|
-
|
|
51
|
-
<div class="hdr-divider"></div>
|
|
52
|
-
|
|
53
|
-
<!-- Notificaciones -->
|
|
54
|
-
<div class="hdr-notif">
|
|
55
|
-
${svgBell}
|
|
56
|
-
${ctx.notifications ? html`<span class="hdr-notif-dot"></span>` : nothing}
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<!-- Avatar -->
|
|
60
|
-
<div class="hdr-avatar">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>
|
|
61
|
-
|
|
62
|
-
</div>`;
|
|
1
|
+
import { nothing as A, noChange as E } from "./index358.js";
|
|
2
|
+
import { Directive as i, PartType as t, directive as e$1 } from "./index359.js";
|
|
3
|
+
/**
|
|
4
|
+
* @license
|
|
5
|
+
* Copyright 2017 Google LLC
|
|
6
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
7
|
+
*/
|
|
8
|
+
class e extends i {
|
|
9
|
+
constructor(i2) {
|
|
10
|
+
if (super(i2), this.it = A, i2.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
|
|
11
|
+
}
|
|
12
|
+
render(r) {
|
|
13
|
+
if (r === A || null == r) return this._t = void 0, this.it = r;
|
|
14
|
+
if (r === E) return r;
|
|
15
|
+
if ("string" != typeof r) throw Error(this.constructor.directiveName + "() called with a non-string value");
|
|
16
|
+
if (r === this.it) return this._t;
|
|
17
|
+
this.it = r;
|
|
18
|
+
const s = [r];
|
|
19
|
+
return s.raw = s, this._t = { _$litType$: this.constructor.resultType, strings: s, values: [] };
|
|
20
|
+
}
|
|
63
21
|
}
|
|
22
|
+
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
23
|
+
const o = e$1(e);
|
|
64
24
|
export {
|
|
65
|
-
|
|
25
|
+
e as UnsafeHTMLDirective,
|
|
26
|
+
o as unsafeHTML
|
|
66
27
|
};
|
|
67
28
|
//# sourceMappingURL=index357.js.map
|
package/dist/index357.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index357.js","sources":["
|
|
1
|
+
{"version":3,"file":"index357.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","i","t","n","r"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIG,MAAM,UAAUA,EAAC;AAAA,EAAC,YAAYC,IAAE;AAAC,QAAG,MAAMA,EAAC,GAAE,KAAK,KAAGC,GAAED,GAAE,SAAOE,EAAE,MAAM,OAAM,MAAM,KAAK,YAAY,gBAAc,uCAAuC;AAAA,EAAC;AAAA,EAAC,OAAO,GAAE;AAAC,QAAG,MAAID,KAAG,QAAM,EAAE,QAAO,KAAK,KAAG,QAAO,KAAK,KAAG;AAAE,QAAG,MAAID,EAAE,QAAO;AAAE,QAAG,YAAU,OAAO,EAAE,OAAM,MAAM,KAAK,YAAY,gBAAc,mCAAmC;AAAE,QAAG,MAAI,KAAK,GAAG,QAAO,KAAK;AAAG,SAAK,KAAG;AAAE,UAAM,IAAE,CAAC,CAAC;AAAE,WAAO,EAAE,MAAI,GAAE,KAAK,KAAG,EAAC,YAAW,KAAK,YAAY,YAAW,SAAQ,GAAE,QAAO,CAAA,EAAE;AAAA,EAAC;AAAC;AAAC,EAAE,gBAAc,cAAa,EAAE,aAAW;AAAO,MAAC,IAAEG,IAAE,CAAC;","x_google_ignoreList":[0]}
|