@shibui-ui/ui 1.22.0 → 1.23.0
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/index.css +1 -1
- package/dist/index196.js +1 -1
- package/dist/index307.js +1 -1
- package/dist/index316.js +4 -4
- package/dist/index353.js +24 -13
- package/dist/index353.js.map +1 -1
- package/dist/index354.js +6 -20
- package/dist/index354.js.map +1 -1
- package/dist/index355.js +18 -56
- package/dist/index355.js.map +1 -1
- package/dist/index356.js +57 -55
- package/dist/index356.js.map +1 -1
- package/dist/index357.js +63 -24
- package/dist/index357.js.map +1 -1
- package/dist/tokens.css +7 -336
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:host,:root{--
|
|
1
|
+
:host,:root{--color-washi-50: oklch(97.77% .003 68.35deg);--color-washi-100: oklch(94.29% .007 72.91deg);--color-washi-200: oklch(88.59% .008 72.93deg);--color-washi-300: oklch(81.39% .01 74.43deg);--color-washi-400: oklch(71.05% .013 74.74deg);--color-washi-500: oklch(59.45% .015 75.31deg);--color-washi-600: oklch(48.51% .014 76.22deg);--color-washi-700: oklch(37.66% .013 77.58deg);--color-washi-800: oklch(26.83% .012 79.82deg);--color-washi-900: oklch(17.39% .01 83.02deg);--color-washi-950: oklch(11.39% .009 84.7deg);--color-ink-0: oklch(11.39% .009 84.7deg / 0);--color-ink-10: oklch(11.39% .009 84.7deg / .06);--color-ink-20: oklch(11.39% .009 84.7deg / .12);--color-ink-40: oklch(11.39% .009 84.7deg / .25);--color-ink-60: oklch(11.39% .009 84.7deg / .5);--color-ink-80: oklch(11.39% .009 84.7deg / .75);--color-ink-100: oklch(11.39% .009 84.7deg / 1);--color-kaki-50: oklch(96.88% .012 55.48deg);--color-kaki-100: oklch(91.31% .038 65.52deg);--color-kaki-200: oklch(81.87% .076 60.59deg);--color-kaki-300: oklch(70.92% .125 52.88deg);--color-kaki-400: oklch(61.85% .149 48.72deg);--color-kaki-500: oklch(51.65% .134 46.13deg);--color-kaki-600: oklch(40.5% .108 44.59deg);--color-kaki-700: oklch(29.17% .08 44.25deg);--color-celadon-50: oklch(96.39% .007 172.9deg);--color-celadon-100: oklch(90.69% .021 169.15deg);--color-celadon-200: oklch(81.25% .039 171.18deg);--color-celadon-300: oklch(70.21% .057 167.31deg);--color-celadon-400: oklch(58.33% .068 171.21deg);--color-celadon-500: oklch(45.54% .059 173.23deg);--color-celadon-600: oklch(33.72% .046 173.86deg);--color-white: oklch(100% 0 0deg)}:host,:root{--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1.0625rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.75rem;--text-4xl: 3.75rem;--text-5xl: 5rem;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--lib-font-display: "Cormorant Garamond", serif;--lib-font-body: "Shippori Mincho", serif;--lib-font-mono: "DM Mono", monospace;--lib-font-family-base: var(--lib-font-body);--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.8;--leading-loose: 2.2;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .08em;--tracking-wider: .15em;--tracking-widest: .25em;--lib-tracking-elegant: .15em;--lib-font-size-base: 14px;--lib-text-transform: uppercase;--lib-border-width: 1.5px}:host,:root{--lib-spacing-unit: .25rem;--lib-space-xs: var(--lib-spacing-unit);--lib-space-sm: calc(var(--lib-spacing-unit) * 2);--lib-space-md: calc(var(--lib-spacing-unit) * 4);--lib-space-lg: calc(var(--lib-spacing-unit) * 6);--lib-space-xl: calc(var(--lib-spacing-unit) * 8);--lib-space-2xl: calc(var(--lib-spacing-unit) * 12);--lib-space-3xl: calc(var(--lib-spacing-unit) * 16);--z-base: 0;--z-raised: 10;--z-overlay: 100;--z-modal: 200;--z-toast: 300;--z-tooltip: 400;--radius-none: 0;--radius-sm: 2px;--radius-md: 4px;--radius-lg: 8px;--radius-xl: 16px;--radius-full: 9999px;--lib-radius-xs: 0px;--lib-radius-sm: 0px;--lib-radius-md: 1px;--lib-radius-lg: 2px}:host,:root{--duration-fast: .1s;--duration-base: .2s;--duration-slow: .35s;--duration-slower: .6s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--transition-fast: var(--duration-fast) var(--ease-default);--transition-base: var(--duration-base) var(--ease-default);--transition-slow: var(--duration-slow) var(--ease-default)}:host,:root{--color-error: oklch(36.16% .106 28.52deg);--color-warning: oklch(47.53% .088 77.58deg);--color-success: oklch(38.41% .063 147.16deg);--color-info: oklch(58.33% .068 171.21deg);--color-error-subtle: #FFF0EE;--color-error-border: #F5C4BC;--color-warning-subtle: #FDF8EE;--color-warning-border: #F5E0A0;--color-success-subtle: #EFF5F1;--color-success-border: #BDD8C5;--color-info-subtle: #EFF5F3;--color-info-border: #A8D0C4;--text-error: var(--color-error);--text-warning: var(--color-warning);--text-success: var(--color-success);--text-info: var(--color-info);--color-disabled-bg: var(--color-washi-100);--color-disabled-text: var(--color-washi-400);--color-disabled-border: var(--color-washi-200)}:host,:root{--lib-shibui-water: var(--color-celadon-500);--lib-shibui-kaki: var(--color-kaki-500);--lib-shibui-paper: var(--color-washi-100);--lib-shibui-ink: var(--color-ink-100);--lib-color-primary: var(--lib-shibui-water);--lib-color-bg: var(--lib-shibui-paper);--lib-color-text: var(--lib-shibui-ink);--bg-base: var(--color-washi-50);--bg-surface: var(--color-washi-100);--bg-elevated: var(--color-white);--bg-inverse: var(--color-washi-900);--bg-overlay: var(--color-ink-60);--text-primary: var(--color-washi-900);--text-secondary: var(--color-washi-600);--text-muted: var(--color-washi-400);--text-inverse: var(--color-washi-50);--text-accent: var(--color-kaki-500);--text-link: var(--color-celadon-500);--text-link-hover: var(--color-celadon-400);--border-subtle: var(--color-washi-200);--border-default: var(--color-washi-300);--border-strong: var(--color-washi-500);--border-focus: var(--color-celadon-400);--shadow-sm: 0 1px 2px var(--color-ink-10);--shadow-md: 0 2px 8px var(--color-ink-10), 0 1px 2px var(--color-ink-10);--shadow-lg: 0 8px 24px var(--color-ink-10), 0 2px 4px var(--color-ink-10);--shadow-xl: 0 20px 48px var(--color-ink-20);--lib-shadow-brutal: 4px 4px 0px 0px var(--lib-shibui-ink);--lib-shadow-glass: 0 8px 32px 0 oklch(25% .02 45deg / .2)}:host([data-theme="dark"]){--bg-base: var(--color-washi-950);--bg-surface: var(--color-washi-900);--bg-elevated: var(--color-washi-800);--bg-inverse: var(--color-washi-50);--bg-overlay: oklch(0% 0 0deg / .7);--text-primary: var(--color-washi-50);--text-secondary: var(--color-washi-400);--text-muted: var(--color-washi-600);--text-inverse: var(--color-washi-900);--text-accent: var(--color-kaki-300);--text-link: var(--color-celadon-300);--text-link-hover: var(--color-celadon-200);--border-subtle: var(--color-washi-800);--border-default: var(--color-washi-700);--border-strong: var(--color-washi-500);--shadow-sm: 0 1px 2px rgb(0 0 0 / .3);--shadow-md: 0 2px 8px rgb(0 0 0 / .3), 0 1px 2px rgb(0 0 0 / .2);--shadow-lg: 0 8px 24px rgb(0 0 0 / .4), 0 2px 4px rgb(0 0 0 / .2);--shadow-xl: 0 20px 48px rgb(0 0 0 / .5)}:host,:root{--lib-glass-blur-amount: 12px;--lib-glass-saturate-amount: 120%;--lib-glass-bg-opacity: .15;--lib-glass-border-opacity: .2;--lib-glass-shadow-opacity: .37;--lib-glass-shine-start: .35;--lib-glass-shine-end: .05;--lib-glass-blur-low: 4px;--lib-glass-blur-md: 12px;--lib-glass-blur-high: 25px;--lib-glass-opacity-low: .1;--lib-glass-opacity-md: .15;--lib-glass-opacity-high: .25;--lib-glass-bg: oklch(98% .01 60deg / var(--lib-glass-bg-opacity));--lib-glass-bg-water: oklch(55% .06 210deg / var(--lib-glass-bg-opacity));--lib-glass-bg-kaki: oklch(45% .05 45deg / var(--lib-glass-bg-opacity));--lib-glass-filter: blur(var(--lib-glass-blur-amount)) saturate(var(--lib-glass-saturate-amount));--lib-glass-border: 1px solid oklch(100% 0 0deg / var(--lib-glass-border-opacity));--lib-glass-shadow: 0 8px 32px oklch(0% 0 0deg / var(--lib-glass-shadow-opacity));--lib-glass-shadow-hover: 0 20px 45px oklch(0% 0 0deg / .5);--lib-glass-shine: linear-gradient( 135deg, oklch(100% 0 0deg / var(--lib-glass-shine-start)) 0%, oklch(100% 0 0deg / var(--lib-glass-shine-end)) 50%, oklch(100% 0 0deg / 0) 100% );--lib-glass-text: var(--lib-shibui-paper);--lib-glass-text-shadow: 0 1px 3px oklch(0% 0 0deg / .3);--lib-spotlight-opacity: .12;--lib-spotlight-feather: 60%;--lib-spotlight-x: 50%;--lib-spotlight-y: 50%;--lib-spotlight-transition: background .15s ease-out;--lib-spotlight-gradient: radial-gradient( circle at var(--lib-spotlight-x) var(--lib-spotlight-y), oklch(45% .05 45deg / var(--lib-spotlight-opacity)) 0%, oklch(45% .05 45deg / 0) var(--lib-spotlight-feather) );--lib-spotlight-gradient-water: radial-gradient( circle at var(--lib-spotlight-x) var(--lib-spotlight-y), oklch(55% .06 210deg / var(--lib-spotlight-opacity)) 0%, oklch(55% .06 210deg / 0) var(--lib-spotlight-feather) );--lib-spotlight-gradient-white: radial-gradient( circle at var(--lib-spotlight-x) var(--lib-spotlight-y), oklch(100% 0 0deg / .1) 0%, oklch(100% 0 0deg / 0) var(--lib-spotlight-feather) );--lib-metal-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--lib-metal-texture-opacity: .03;--lib-kintsugi-border: linear-gradient( 135deg, oklch(45% .05 45deg / .6) 0%, oklch(45% .05 45deg / 0) 40%, oklch(45% .05 45deg / 0) 60%, oklch(45% .05 45deg / .3) 100% )}
|
package/dist/index196.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const sharedTokens = `:host,:root{--
|
|
1
|
+
const sharedTokens = `:host,:root{--color-washi-50: oklch(97.77% .003 68.35deg);--color-washi-100: oklch(94.29% .007 72.91deg);--color-washi-200: oklch(88.59% .008 72.93deg);--color-washi-300: oklch(81.39% .01 74.43deg);--color-washi-400: oklch(71.05% .013 74.74deg);--color-washi-500: oklch(59.45% .015 75.31deg);--color-washi-600: oklch(48.51% .014 76.22deg);--color-washi-700: oklch(37.66% .013 77.58deg);--color-washi-800: oklch(26.83% .012 79.82deg);--color-washi-900: oklch(17.39% .01 83.02deg);--color-washi-950: oklch(11.39% .009 84.7deg);--color-ink-0: oklch(11.39% .009 84.7deg / 0);--color-ink-10: oklch(11.39% .009 84.7deg / .06);--color-ink-20: oklch(11.39% .009 84.7deg / .12);--color-ink-40: oklch(11.39% .009 84.7deg / .25);--color-ink-60: oklch(11.39% .009 84.7deg / .5);--color-ink-80: oklch(11.39% .009 84.7deg / .75);--color-ink-100: oklch(11.39% .009 84.7deg / 1);--color-kaki-50: oklch(96.88% .012 55.48deg);--color-kaki-100: oklch(91.31% .038 65.52deg);--color-kaki-200: oklch(81.87% .076 60.59deg);--color-kaki-300: oklch(70.92% .125 52.88deg);--color-kaki-400: oklch(61.85% .149 48.72deg);--color-kaki-500: oklch(51.65% .134 46.13deg);--color-kaki-600: oklch(40.5% .108 44.59deg);--color-kaki-700: oklch(29.17% .08 44.25deg);--color-celadon-50: oklch(96.39% .007 172.9deg);--color-celadon-100: oklch(90.69% .021 169.15deg);--color-celadon-200: oklch(81.25% .039 171.18deg);--color-celadon-300: oklch(70.21% .057 167.31deg);--color-celadon-400: oklch(58.33% .068 171.21deg);--color-celadon-500: oklch(45.54% .059 173.23deg);--color-celadon-600: oklch(33.72% .046 173.86deg);--color-white: oklch(100% 0 0deg)}:host,:root{--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1.0625rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.75rem;--text-4xl: 3.75rem;--text-5xl: 5rem;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--lib-font-display: "Cormorant Garamond", serif;--lib-font-body: "Shippori Mincho", serif;--lib-font-mono: "DM Mono", monospace;--lib-font-family-base: var(--lib-font-body);--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.8;--leading-loose: 2.2;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .08em;--tracking-wider: .15em;--tracking-widest: .25em;--lib-tracking-elegant: .15em;--lib-font-size-base: 14px;--lib-text-transform: uppercase;--lib-border-width: 1.5px}:host,:root{--lib-spacing-unit: .25rem;--lib-space-xs: var(--lib-spacing-unit);--lib-space-sm: calc(var(--lib-spacing-unit) * 2);--lib-space-md: calc(var(--lib-spacing-unit) * 4);--lib-space-lg: calc(var(--lib-spacing-unit) * 6);--lib-space-xl: calc(var(--lib-spacing-unit) * 8);--lib-space-2xl: calc(var(--lib-spacing-unit) * 12);--lib-space-3xl: calc(var(--lib-spacing-unit) * 16);--z-base: 0;--z-raised: 10;--z-overlay: 100;--z-modal: 200;--z-toast: 300;--z-tooltip: 400;--radius-none: 0;--radius-sm: 2px;--radius-md: 4px;--radius-lg: 8px;--radius-xl: 16px;--radius-full: 9999px;--lib-radius-xs: 0px;--lib-radius-sm: 0px;--lib-radius-md: 1px;--lib-radius-lg: 2px}:host,:root{--duration-fast: .1s;--duration-base: .2s;--duration-slow: .35s;--duration-slower: .6s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--transition-fast: var(--duration-fast) var(--ease-default);--transition-base: var(--duration-base) var(--ease-default);--transition-slow: var(--duration-slow) var(--ease-default)}:host,:root{--color-error: oklch(36.16% .106 28.52deg);--color-warning: oklch(47.53% .088 77.58deg);--color-success: oklch(38.41% .063 147.16deg);--color-info: oklch(58.33% .068 171.21deg);--color-error-subtle: #FFF0EE;--color-error-border: #F5C4BC;--color-warning-subtle: #FDF8EE;--color-warning-border: #F5E0A0;--color-success-subtle: #EFF5F1;--color-success-border: #BDD8C5;--color-info-subtle: #EFF5F3;--color-info-border: #A8D0C4;--text-error: var(--color-error);--text-warning: var(--color-warning);--text-success: var(--color-success);--text-info: var(--color-info);--color-disabled-bg: var(--color-washi-100);--color-disabled-text: var(--color-washi-400);--color-disabled-border: var(--color-washi-200)}:host,:root{--lib-shibui-water: var(--color-celadon-500);--lib-shibui-kaki: var(--color-kaki-500);--lib-shibui-paper: var(--color-washi-100);--lib-shibui-ink: var(--color-ink-100);--lib-color-primary: var(--lib-shibui-water);--lib-color-bg: var(--lib-shibui-paper);--lib-color-text: var(--lib-shibui-ink);--bg-base: var(--color-washi-50);--bg-surface: var(--color-washi-100);--bg-elevated: var(--color-white);--bg-inverse: var(--color-washi-900);--bg-overlay: var(--color-ink-60);--text-primary: var(--color-washi-900);--text-secondary: var(--color-washi-600);--text-muted: var(--color-washi-400);--text-inverse: var(--color-washi-50);--text-accent: var(--color-kaki-500);--text-link: var(--color-celadon-500);--text-link-hover: var(--color-celadon-400);--border-subtle: var(--color-washi-200);--border-default: var(--color-washi-300);--border-strong: var(--color-washi-500);--border-focus: var(--color-celadon-400);--shadow-sm: 0 1px 2px var(--color-ink-10);--shadow-md: 0 2px 8px var(--color-ink-10), 0 1px 2px var(--color-ink-10);--shadow-lg: 0 8px 24px var(--color-ink-10), 0 2px 4px var(--color-ink-10);--shadow-xl: 0 20px 48px var(--color-ink-20);--lib-shadow-brutal: 4px 4px 0px 0px var(--lib-shibui-ink);--lib-shadow-glass: 0 8px 32px 0 oklch(25% .02 45deg / .2)}:host([data-theme="dark"]){--bg-base: var(--color-washi-950);--bg-surface: var(--color-washi-900);--bg-elevated: var(--color-washi-800);--bg-inverse: var(--color-washi-50);--bg-overlay: oklch(0% 0 0deg / .7);--text-primary: var(--color-washi-50);--text-secondary: var(--color-washi-400);--text-muted: var(--color-washi-600);--text-inverse: var(--color-washi-900);--text-accent: var(--color-kaki-300);--text-link: var(--color-celadon-300);--text-link-hover: var(--color-celadon-200);--border-subtle: var(--color-washi-800);--border-default: var(--color-washi-700);--border-strong: var(--color-washi-500);--shadow-sm: 0 1px 2px rgb(0 0 0 / .3);--shadow-md: 0 2px 8px rgb(0 0 0 / .3), 0 1px 2px rgb(0 0 0 / .2);--shadow-lg: 0 8px 24px rgb(0 0 0 / .4), 0 2px 4px rgb(0 0 0 / .2);--shadow-xl: 0 20px 48px rgb(0 0 0 / .5)}:host,:root{--lib-glass-blur-amount: 12px;--lib-glass-saturate-amount: 120%;--lib-glass-bg-opacity: .15;--lib-glass-border-opacity: .2;--lib-glass-shadow-opacity: .37;--lib-glass-shine-start: .35;--lib-glass-shine-end: .05;--lib-glass-blur-low: 4px;--lib-glass-blur-md: 12px;--lib-glass-blur-high: 25px;--lib-glass-opacity-low: .1;--lib-glass-opacity-md: .15;--lib-glass-opacity-high: .25;--lib-glass-bg: oklch(98% .01 60deg / var(--lib-glass-bg-opacity));--lib-glass-bg-water: oklch(55% .06 210deg / var(--lib-glass-bg-opacity));--lib-glass-bg-kaki: oklch(45% .05 45deg / var(--lib-glass-bg-opacity));--lib-glass-filter: blur(var(--lib-glass-blur-amount)) saturate(var(--lib-glass-saturate-amount));--lib-glass-border: 1px solid oklch(100% 0 0deg / var(--lib-glass-border-opacity));--lib-glass-shadow: 0 8px 32px oklch(0% 0 0deg / var(--lib-glass-shadow-opacity));--lib-glass-shadow-hover: 0 20px 45px oklch(0% 0 0deg / .5);--lib-glass-shine: linear-gradient( 135deg, oklch(100% 0 0deg / var(--lib-glass-shine-start)) 0%, oklch(100% 0 0deg / var(--lib-glass-shine-end)) 50%, oklch(100% 0 0deg / 0) 100% );--lib-glass-text: var(--lib-shibui-paper);--lib-glass-text-shadow: 0 1px 3px oklch(0% 0 0deg / .3);--lib-spotlight-opacity: .12;--lib-spotlight-feather: 60%;--lib-spotlight-x: 50%;--lib-spotlight-y: 50%;--lib-spotlight-transition: background .15s ease-out;--lib-spotlight-gradient: radial-gradient( circle at var(--lib-spotlight-x) var(--lib-spotlight-y), oklch(45% .05 45deg / var(--lib-spotlight-opacity)) 0%, oklch(45% .05 45deg / 0) var(--lib-spotlight-feather) );--lib-spotlight-gradient-water: radial-gradient( circle at var(--lib-spotlight-x) var(--lib-spotlight-y), oklch(55% .06 210deg / var(--lib-spotlight-opacity)) 0%, oklch(55% .06 210deg / 0) var(--lib-spotlight-feather) );--lib-spotlight-gradient-white: radial-gradient( circle at var(--lib-spotlight-x) var(--lib-spotlight-y), oklch(100% 0 0deg / .1) 0%, oklch(100% 0 0deg / 0) var(--lib-spotlight-feather) );--lib-metal-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--lib-metal-texture-opacity: .03;--lib-kintsugi-border: linear-gradient( 135deg, oklch(45% .05 45deg / .6) 0%, oklch(45% .05 45deg / 0) 40%, oklch(45% .05 45deg / 0) 60%, oklch(45% .05 45deg / .3) 100% )}`;
|
|
2
2
|
export {
|
|
3
3
|
sharedTokens 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 "./index354.js";
|
|
2
|
+
import { renderCentered } from "./index355.js";
|
|
3
|
+
import { renderMega } from "./index356.js";
|
|
4
|
+
import { renderAppBar } from "./index357.js";
|
|
5
5
|
function headerTemplate(ctx) {
|
|
6
6
|
switch (ctx.variant) {
|
|
7
7
|
case "centered":
|
package/dist/index353.js
CHANGED
|
@@ -1,17 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
+
}
|
|
13
21
|
}
|
|
22
|
+
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
23
|
+
const o = e$1(e);
|
|
14
24
|
export {
|
|
15
|
-
|
|
25
|
+
e as UnsafeHTMLDirective,
|
|
26
|
+
o as unsafeHTML
|
|
16
27
|
};
|
|
17
28
|
//# 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":["../../../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]}
|
package/dist/index354.js
CHANGED
|
@@ -1,31 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
import { renderLogo, renderLinks, 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 renderClassic(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
|
-
${renderActions(ctx)}
|
|
23
|
-
</nav>
|
|
8
|
+
<nav class="hdr-nav">${renderLinks(ctx, ctx.links)}</nav>
|
|
9
|
+
${renderActions(ctx)}
|
|
24
10
|
${renderHamburger(ctx)}
|
|
25
11
|
</div>
|
|
26
12
|
${renderMobileDrawer(ctx)}`;
|
|
27
13
|
}
|
|
28
14
|
export {
|
|
29
|
-
|
|
15
|
+
renderClassic
|
|
30
16
|
};
|
|
31
17
|
//# 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-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/index355.js
CHANGED
|
@@ -1,69 +1,31 @@
|
|
|
1
1
|
import { nothing, html } from "lit";
|
|
2
|
-
import {
|
|
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
|
-
${ctx
|
|
10
|
-
|
|
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
|
-
)}
|
|
20
|
+
<nav class="hdr-nav hdr-nav--right">
|
|
21
|
+
${renderLinks(ctx, rightLinks)}
|
|
22
|
+
${renderActions(ctx)}
|
|
24
23
|
</nav>
|
|
25
|
-
${renderActions(ctx)}
|
|
26
24
|
${renderHamburger(ctx)}
|
|
27
25
|
</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
|
-
|
|
64
26
|
${renderMobileDrawer(ctx)}`;
|
|
65
27
|
}
|
|
66
28
|
export {
|
|
67
|
-
|
|
29
|
+
renderCentered
|
|
68
30
|
};
|
|
69
31
|
//# 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-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/index356.js
CHANGED
|
@@ -1,67 +1,69 @@
|
|
|
1
1
|
import { nothing, html } from "lit";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import { renderLogo, svgChevron, renderActions } from "./index361.js";
|
|
3
|
+
import { renderHamburger, renderMobileDrawer } from "./index362.js";
|
|
4
|
+
function renderMega(ctx) {
|
|
4
5
|
return html`
|
|
5
6
|
<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>
|
|
6
28
|
|
|
7
|
-
|
|
8
|
-
|
|
29
|
+
<!-- Overlay detrás del panel -->
|
|
30
|
+
<div
|
|
31
|
+
class="hdr-mega-overlay ${ctx._megaOpen ? "is-open" : ""}"
|
|
32
|
+
@mouseenter="${() => ctx._closeMega()}"
|
|
33
|
+
></div>
|
|
9
34
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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"}"
|
|
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"
|
|
37
57
|
style="height:32px;font-size:8px;"
|
|
38
|
-
>${
|
|
39
|
-
|
|
40
|
-
|
|
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}
|
|
58
|
+
>${ctx.megaCta.cta}</a>
|
|
59
|
+
</div>
|
|
60
|
+
` : nothing}
|
|
57
61
|
</div>
|
|
62
|
+
</div>
|
|
58
63
|
|
|
59
|
-
|
|
60
|
-
<div class="hdr-avatar">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>
|
|
61
|
-
|
|
62
|
-
</div>`;
|
|
64
|
+
${renderMobileDrawer(ctx)}`;
|
|
63
65
|
}
|
|
64
66
|
export {
|
|
65
|
-
|
|
67
|
+
renderMega
|
|
66
68
|
};
|
|
67
69
|
//# 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-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/index357.js
CHANGED
|
@@ -1,28 +1,67 @@
|
|
|
1
|
-
import { nothing
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
class
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
import { nothing, html } from "lit";
|
|
2
|
+
import { svgBell, renderBreadcrumbs, svgSearch } from "./index361.js";
|
|
3
|
+
function renderAppBar(ctx) {
|
|
4
|
+
return html`
|
|
5
|
+
<div class="hdr">
|
|
6
|
+
|
|
7
|
+
<!-- Logo mark (sin texto) -->
|
|
8
|
+
<div class="hdr-logo-mark" style="flex-shrink:0;"></div>
|
|
9
|
+
|
|
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"}"
|
|
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>`;
|
|
21
63
|
}
|
|
22
|
-
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
23
|
-
const o = e$1(e);
|
|
24
64
|
export {
|
|
25
|
-
|
|
26
|
-
o as unsafeHTML
|
|
65
|
+
renderAppBar
|
|
27
66
|
};
|
|
28
67
|
//# 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":["../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/tokens.css
CHANGED
|
@@ -1,336 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--text-base: 0.9375rem; /* 15px */
|
|
9
|
-
--text-md: 1.0625rem; /* 17px */
|
|
10
|
-
--text-lg: 1.25rem; /* 20px */
|
|
11
|
-
--text-xl: 1.5rem; /* 24px */
|
|
12
|
-
--text-2xl: 2rem; /* 32px */
|
|
13
|
-
--text-3xl: 2.75rem; /* 44px */
|
|
14
|
-
--text-4xl: 3.75rem; /* 60px */
|
|
15
|
-
--text-5xl: 5rem; /* 80px */
|
|
16
|
-
|
|
17
|
-
--weight-light: 300;
|
|
18
|
-
--weight-regular: 400;
|
|
19
|
-
--weight-medium: 500;
|
|
20
|
-
--weight-semibold: 600;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
/* --- MAPEADO SEMÁNTICO (SHIBUI) --- */
|
|
24
|
-
--lib-shibui-water: var(--color-celadon-500);
|
|
25
|
-
--lib-shibui-kaki: var(--color-kaki-500);
|
|
26
|
-
--lib-shibui-paper: var(--color-washi-100);
|
|
27
|
-
--lib-shibui-ink: var(--color-ink-100);
|
|
28
|
-
|
|
29
|
-
/* --- 1. ESCALA DE AIRE (Armonía de 4px) --- */
|
|
30
|
-
--lib-spacing-unit: 0.25rem;
|
|
31
|
-
--lib-space-xs: var(--lib-spacing-unit); /* 4px */
|
|
32
|
-
--lib-space-sm: calc(var(--lib-spacing-unit) * 2); /* 8px */
|
|
33
|
-
--lib-space-md: calc(
|
|
34
|
-
var(--lib-spacing-unit) * 4
|
|
35
|
-
); /* 16px - El Estándar de Oro */
|
|
36
|
-
|
|
37
|
-
--lib-space-lg: calc(var(--lib-spacing-unit) * 6); /* 24px */
|
|
38
|
-
--lib-space-xl: calc(var(--lib-spacing-unit) * 8); /* 32px */
|
|
39
|
-
|
|
40
|
-
/* --- 3. MAPEADO SEMÁNTICO BASE --- */
|
|
41
|
-
--lib-color-primary: var(--lib-shibui-water);
|
|
42
|
-
--lib-color-bg: var(--lib-shibui-paper);
|
|
43
|
-
--lib-color-text: var(--lib-shibui-ink);
|
|
44
|
-
|
|
45
|
-
/* --- 3. SOMBRAS (Elevación) --- */
|
|
46
|
-
--shadow-sm: 0 1px 2px var(--color-ink-10);
|
|
47
|
-
--shadow-md: 0 2px 8px var(--color-ink-10), 0 1px 2px var(--color-ink-10);
|
|
48
|
-
--shadow-lg: 0 8px 24px var(--color-ink-10), 0 2px 4px var(--color-ink-10);
|
|
49
|
-
--shadow-xl: 0 20px 48px var(--color-ink-20);
|
|
50
|
-
|
|
51
|
-
/* --- 2. TIPOGRAFÍA (SHIBUI EDITORIAL) --- */
|
|
52
|
-
--lib-font-display: "Cormorant Garamond", serif;
|
|
53
|
-
--lib-font-body: "Shippori Mincho", serif;
|
|
54
|
-
--lib-font-mono: "DM Mono", monospace;
|
|
55
|
-
|
|
56
|
-
/* --- 4. TIPOGRAFÍA ELEGANTE --- */
|
|
57
|
-
--lib-font-family-base: var(--lib-font-body);
|
|
58
|
-
|
|
59
|
-
/* --- 3. LINE HEIGHTS (Legibilidad) --- */
|
|
60
|
-
--leading-tight: 1.2;
|
|
61
|
-
--leading-snug: 1.4;
|
|
62
|
-
--leading-normal: 1.6;
|
|
63
|
-
--leading-relaxed: 1.8;
|
|
64
|
-
--leading-loose: 2.2;
|
|
65
|
-
|
|
66
|
-
/* --- 4. ANIMACIONES (Movimiento) --- */
|
|
67
|
-
--duration-fast: 100ms;
|
|
68
|
-
--duration-base: 200ms;
|
|
69
|
-
--duration-slow: 350ms;
|
|
70
|
-
--duration-slower: 600ms;
|
|
71
|
-
|
|
72
|
-
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
73
|
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
74
|
-
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
75
|
-
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
76
|
-
|
|
77
|
-
/* --- 4. LETTER SPACING (Tracking Editorial) --- */
|
|
78
|
-
--tracking-tight: -0.02em;
|
|
79
|
-
--tracking-normal: 0em;
|
|
80
|
-
--tracking-wide: 0.08em;
|
|
81
|
-
--tracking-wider: 0.15em;
|
|
82
|
-
--tracking-widest: 0.25em;
|
|
83
|
-
|
|
84
|
-
/* --- 5. Z-INDEX (Profundidad) --- */
|
|
85
|
-
--z-base: 0;
|
|
86
|
-
--z-raised: 10;
|
|
87
|
-
--z-overlay: 100;
|
|
88
|
-
--z-modal: 200;
|
|
89
|
-
--z-toast: 300;
|
|
90
|
-
--z-tooltip: 400;
|
|
91
|
-
|
|
92
|
-
/* --- 2. WASHI: Tonos de papel neutros --- */
|
|
93
|
-
--color-washi-50: oklch(97.77% 0.003 68.35deg); /* #FAF7F4 */
|
|
94
|
-
--color-washi-100: oklch(94.29% 0.007 72.91deg); /* #F2EDE6 */
|
|
95
|
-
--color-washi-200: oklch(88.59% 0.008 72.93deg); /* #E5DDD3 */
|
|
96
|
-
--color-washi-300: oklch(81.39% 0.01 74.43deg); /* #D3C8BC */
|
|
97
|
-
--color-washi-400: oklch(71.05% 0.013 74.74deg); /* #B8A99A */
|
|
98
|
-
--color-washi-500: oklch(59.45% 0.015 75.31deg); /* #9A8878 */
|
|
99
|
-
--color-washi-600: oklch(48.51% 0.014 76.22deg); /* #7A6A5C */
|
|
100
|
-
--color-washi-700: oklch(37.66% 0.013 77.58deg); /* #5C4E42 */
|
|
101
|
-
--color-washi-800: oklch(26.83% 0.012 79.82deg); /* #3D332A */
|
|
102
|
-
--color-washi-900: oklch(17.39% 0.01 83.02deg); /* #221C16 */
|
|
103
|
-
--color-washi-950: oklch(11.39% 0.009 84.7deg); /* #120E0A */
|
|
104
|
-
|
|
105
|
-
/* --- 3. INK: Transparencias de Sumi --- */
|
|
106
|
-
--color-ink-0: oklch(11.39% 0.009 84.7deg / 0); /* #1A140E at 0% */
|
|
107
|
-
--color-ink-10: oklch(11.39% 0.009 84.7deg / 0.06); /* #1A140E at 6% */
|
|
108
|
-
--color-ink-20: oklch(11.39% 0.009 84.7deg / 0.12); /* #1A140E at 12% */
|
|
109
|
-
--color-ink-40: oklch(11.39% 0.009 84.7deg / 0.25); /* #1A140E at 25% */
|
|
110
|
-
--color-ink-60: oklch(11.39% 0.009 84.7deg / 0.5); /* #1A140E at 50% */
|
|
111
|
-
--color-ink-80: oklch(11.39% 0.009 84.7deg / 0.75); /* #1A140E at 75% */
|
|
112
|
-
--color-ink-100: oklch(11.39% 0.009 84.7deg / 1); /* #1A140E at 100% */
|
|
113
|
-
|
|
114
|
-
/* --- 4. KAKI: Acento caqui/persimón --- */
|
|
115
|
-
--color-kaki-50: oklch(96.88% 0.012 55.48deg); /* #FDF3EC */
|
|
116
|
-
--color-kaki-100: oklch(91.31% 0.038 65.52deg); /* #FAE2CC */
|
|
117
|
-
--color-kaki-200: oklch(81.87% 0.076 60.59deg); /* #F4C099 */
|
|
118
|
-
--color-kaki-300: oklch(70.92% 0.125 52.88deg); /* #EB9660 */
|
|
119
|
-
--color-kaki-400: oklch(61.85% 0.149 48.72deg); /* #D97234 */
|
|
120
|
-
--color-kaki-500: oklch(51.65% 0.134 46.13deg); /* #B85A1E */
|
|
121
|
-
--color-kaki-600: oklch(40.5% 0.108 44.59deg); /* #8C4115 */
|
|
122
|
-
--color-kaki-700: oklch(29.17% 0.08 44.25deg); /* #602C0E */
|
|
123
|
-
|
|
124
|
-
/* --- 5. CELADÓN: Acento jade --- */
|
|
125
|
-
--color-celadon-50: oklch(96.39% 0.007 172.9deg); /* #EFF5F3 */
|
|
126
|
-
--color-celadon-100: oklch(90.69% 0.021 169.15deg); /* #D3E8E1 */
|
|
127
|
-
--color-celadon-200: oklch(81.25% 0.039 171.18deg); /* #A8D0C4 */
|
|
128
|
-
--color-celadon-300: oklch(70.21% 0.057 167.31deg); /* #79B5A3 */
|
|
129
|
-
--color-celadon-400: oklch(58.33% 0.068 171.21deg); /* #4E9482 */
|
|
130
|
-
--color-celadon-500: oklch(45.54% 0.059 173.23deg); /* #357164 */
|
|
131
|
-
--color-celadon-600: oklch(33.72% 0.046 173.86deg); /* #245249 */
|
|
132
|
-
|
|
133
|
-
/* --- 6. STATE (Semántica de estados) --- */
|
|
134
|
-
--color-error: oklch(36.16% 0.106 28.52deg); /* #8C2A1A */
|
|
135
|
-
--color-warning: oklch(47.53% 0.088 77.58deg); /* #8C6A1A */
|
|
136
|
-
--color-success: oklch(38.41% 0.063 147.16deg); /* #2A5C3A */
|
|
137
|
-
--color-info: oklch(58.33% 0.068 171.21deg); /* #4E9482 (Coincide con Celadon-400) */
|
|
138
|
-
--color-white: oklch(100% 0 0deg); /* #FFFFFF -> Blanco puro */
|
|
139
|
-
|
|
140
|
-
/* Derivados de estado — fondos y bordes suaves */
|
|
141
|
-
--color-error-subtle: #FFF0EE; /* fondo badge/alert error */
|
|
142
|
-
--color-error-border: #F5C4BC; /* borde badge/alert error */
|
|
143
|
-
--color-success-subtle: #EFF5F1; /* fondo badge/alert success */
|
|
144
|
-
--color-success-border: #BDD8C5; /* borde badge/alert success */
|
|
145
|
-
|
|
146
|
-
/* --- 7. BACKGROUNDS SEMÁNTICOS --- */
|
|
147
|
-
--bg-base: var(--color-washi-50);
|
|
148
|
-
--bg-surface: var(--color-washi-100);
|
|
149
|
-
--bg-elevated: var(--color-white);
|
|
150
|
-
--bg-inverse: var(--color-washi-900);
|
|
151
|
-
|
|
152
|
-
/* --- 8. TEXTOS SEMÁNTICOS --- */
|
|
153
|
-
--text-primary: var(--color-washi-900);
|
|
154
|
-
--text-secondary: var(--color-washi-600);
|
|
155
|
-
--text-muted: var(--color-washi-400);
|
|
156
|
-
--text-inverse: var(--color-washi-50);
|
|
157
|
-
--text-accent: var(--color-kaki-500);
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
/* --- 9. BORDES SEMÁNTICOS --- */
|
|
161
|
-
--border-subtle: var(--color-washi-200);
|
|
162
|
-
--border-default: var(--color-washi-300);
|
|
163
|
-
--border-strong: var(--color-washi-500);
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
--lib-tracking-elegant: 0.15em;
|
|
167
|
-
--lib-font-size-base: 14px;
|
|
168
|
-
--lib-text-transform: uppercase;
|
|
169
|
-
--lib-border-width: 1.5px;
|
|
170
|
-
|
|
171
|
-
/* --- 11. GLASS SYSTEM (Efecto Enso) --- */
|
|
172
|
-
--lib-glass-blur-amount: 12px;
|
|
173
|
-
--lib-glass-saturate-amount: 120%;
|
|
174
|
-
--lib-glass-bg-opacity: 0.15;
|
|
175
|
-
--lib-glass-border-opacity: 0.20;
|
|
176
|
-
--lib-glass-shadow-opacity: 0.37;
|
|
177
|
-
--lib-glass-shine-start: 0.35;
|
|
178
|
-
--lib-glass-shine-end: 0.05;
|
|
179
|
-
|
|
180
|
-
/* -- Tokens compuestos Glass -- */
|
|
181
|
-
/* Fondo base del cristal — usa paper al % configurado */
|
|
182
|
-
--lib-glass-bg:
|
|
183
|
-
oklch(98% 0.01 60deg / var(--lib-glass-bg-opacity));
|
|
184
|
-
|
|
185
|
-
/* Fondo variante water (botón primary glass) */
|
|
186
|
-
--lib-glass-bg-water:
|
|
187
|
-
oklch(55% 0.06 210deg / var(--lib-glass-bg-opacity));
|
|
188
|
-
|
|
189
|
-
/* Fondo variante kaki (botón accent glass) */
|
|
190
|
-
--lib-glass-bg-kaki:
|
|
191
|
-
oklch(45% 0.05 45deg / var(--lib-glass-bg-opacity));
|
|
192
|
-
|
|
193
|
-
/* backdrop-filter completo listo para usar */
|
|
194
|
-
--lib-glass-filter:
|
|
195
|
-
blur(var(--lib-glass-blur-amount))
|
|
196
|
-
saturate(var(--lib-glass-saturate-amount));
|
|
197
|
-
|
|
198
|
-
/* Borde "casi imperceptible" */
|
|
199
|
-
--lib-glass-border:
|
|
200
|
-
1px solid oklch(100% 0 0deg / var(--lib-glass-border-opacity));
|
|
201
|
-
|
|
202
|
-
/* Sombra de profundidad */
|
|
203
|
-
--lib-glass-shadow:
|
|
204
|
-
0 8px 32px oklch(0% 0 0deg / var(--lib-glass-shadow-opacity));
|
|
205
|
-
|
|
206
|
-
/* Sombra hover (más pronunciada) */
|
|
207
|
-
--lib-glass-shadow-hover:
|
|
208
|
-
0 20px 45px oklch(0% 0 0deg / 0.5);
|
|
209
|
-
|
|
210
|
-
/* Gradiente de reflexión de luz — el ::before que da aspecto cristal */
|
|
211
|
-
--lib-glass-shine:
|
|
212
|
-
linear-gradient(
|
|
213
|
-
135deg,
|
|
214
|
-
oklch(100% 0 0deg / var(--lib-glass-shine-start)) 0%,
|
|
215
|
-
oklch(100% 0 0deg / var(--lib-glass-shine-end)) 50%,
|
|
216
|
-
oklch(100% 0 0deg / 0) 100%
|
|
217
|
-
);
|
|
218
|
-
|
|
219
|
-
/* Texto sobre glass: siempre claro */
|
|
220
|
-
--lib-glass-text: var(--lib-shibui-paper);
|
|
221
|
-
--lib-glass-text-shadow: 0 1px 3px oklch(0% 0 0deg / 0.3);
|
|
222
|
-
|
|
223
|
-
/* -- Intensidades Glass -- */
|
|
224
|
-
/* Uso: sobreescribe --lib-glass-blur-amount y --lib-glass-bg-opacity
|
|
225
|
-
en el componente según la intensidad deseada */
|
|
226
|
-
--lib-glass-blur-low: 4px;
|
|
227
|
-
--lib-glass-blur-md: 12px; /* default */
|
|
228
|
-
--lib-glass-blur-high: 25px;
|
|
229
|
-
|
|
230
|
-
--lib-glass-opacity-low: 0.10;
|
|
231
|
-
--lib-glass-opacity-md: 0.15; /* default */
|
|
232
|
-
--lib-glass-opacity-high: 0.25;
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
/* -- Primitivos Spotlight -- */
|
|
238
|
-
|
|
239
|
-
/* -- Primitivos Spotlight -- */
|
|
240
|
-
--lib-spotlight-opacity: 0.12;
|
|
241
|
-
--lib-spotlight-feather: 60%;
|
|
242
|
-
|
|
243
|
-
/* Coordenadas — posición inicial centrada */
|
|
244
|
-
--lib-spotlight-x: 50%;
|
|
245
|
-
--lib-spotlight-y: 50%;
|
|
246
|
-
|
|
247
|
-
/* Transición al mover cursor */
|
|
248
|
-
--lib-spotlight-transition: background 0.15s ease-out;
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
/* -- Tokens compuestos Spotlight -- */
|
|
252
|
-
/* Variante kaki (acento orgánico, cálido) */
|
|
253
|
-
--lib-spotlight-gradient:
|
|
254
|
-
radial-gradient(
|
|
255
|
-
circle at var(--lib-spotlight-x) var(--lib-spotlight-y),
|
|
256
|
-
oklch(45% 0.05 45deg / var(--lib-spotlight-opacity)) 0%,
|
|
257
|
-
oklch(45% 0.05 45deg / 0)
|
|
258
|
-
var(--lib-spotlight-feather)
|
|
259
|
-
);
|
|
260
|
-
|
|
261
|
-
/* Variante water (azul sereno) */
|
|
262
|
-
--lib-spotlight-gradient-water:
|
|
263
|
-
radial-gradient(
|
|
264
|
-
circle at var(--lib-spotlight-x) var(--lib-spotlight-y),
|
|
265
|
-
oklch(55% 0.06 210deg / var(--lib-spotlight-opacity)) 0%,
|
|
266
|
-
oklch(55% 0.06 210deg / 0)
|
|
267
|
-
var(--lib-spotlight-feather)
|
|
268
|
-
);
|
|
269
|
-
|
|
270
|
-
/* Variante blanca (neutro, sobre fondos oscuros) */
|
|
271
|
-
--lib-spotlight-gradient-white:
|
|
272
|
-
radial-gradient(
|
|
273
|
-
circle at var(--lib-spotlight-x) var(--lib-spotlight-y),
|
|
274
|
-
oklch(100% 0 0deg / 0.10) 0%,
|
|
275
|
-
oklch(100% 0 0deg / 0) var(--lib-spotlight-feather)
|
|
276
|
-
);
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
/* -- Textura de ruido (metal/seda) -- */
|
|
280
|
-
/* Aplica como background-image adicional encima del spotlight */
|
|
281
|
-
--lib-metal-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
282
|
-
--lib-metal-texture-opacity: 0.03;
|
|
283
|
-
|
|
284
|
-
/* Brillo de borde kintsugi — hilo de oro en las grietas */
|
|
285
|
-
--lib-kintsugi-border:
|
|
286
|
-
linear-gradient(
|
|
287
|
-
135deg,
|
|
288
|
-
oklch(45% 0.05 45deg / 0.6) 0%,
|
|
289
|
-
oklch(45% 0.05 45deg / 0) 40%,
|
|
290
|
-
oklch(45% 0.05 45deg / 0) 60%,
|
|
291
|
-
oklch(45% 0.05 45deg / 0.3) 100%
|
|
292
|
-
);
|
|
293
|
-
|
|
294
|
-
/* --- ESCALA DE RADIOS ESTÁNDAR --- */
|
|
295
|
-
--radius-none: 0;
|
|
296
|
-
--radius-sm: 2px;
|
|
297
|
-
--radius-md: 4px;
|
|
298
|
-
--radius-lg: 8px;
|
|
299
|
-
--radius-xl: 16px;
|
|
300
|
-
--radius-full: 9999px;
|
|
301
|
-
|
|
302
|
-
/* --- NUEVA ESCALA DE RADIOS BRUTALISTA --- */
|
|
303
|
-
--lib-radius-xs: 0px; /* Antes 2px */
|
|
304
|
-
--lib-radius-sm: 0px; /* Antes 4px */
|
|
305
|
-
--lib-radius-md: 1px; /* Antes 8px - Casi recto */
|
|
306
|
-
--lib-radius-lg: 2px; /* Antes 16px - El máximo permitido */
|
|
307
|
-
|
|
308
|
-
/* --- SOMBRAS BRUTALISTAS (Hard Shadows) --- */
|
|
309
|
-
|
|
310
|
-
/* Pasamos de sombras difuminadas a sombras sólidas y definidas */
|
|
311
|
-
--lib-shadow-brutal: 4px 4px 0px 0px var(--lib-shibui-ink);
|
|
312
|
-
--lib-shadow-glass: 0 8px 32px 0 oklch(25% 0.02 45deg / 0.2);
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
/* --- DARK MODE OVERRIDES --- */
|
|
316
|
-
:host([data-theme="dark"]) {
|
|
317
|
-
--bg-base: var(--color-washi-950);
|
|
318
|
-
--bg-surface: var(--color-washi-900);
|
|
319
|
-
--bg-elevated: var(--color-washi-800);
|
|
320
|
-
--bg-inverse: var(--color-washi-50);
|
|
321
|
-
|
|
322
|
-
--text-primary: var(--color-washi-50);
|
|
323
|
-
--text-secondary: var(--color-washi-400);
|
|
324
|
-
--text-muted: var(--color-washi-600);
|
|
325
|
-
--text-inverse: var(--color-washi-900);
|
|
326
|
-
--text-accent: var(--color-kaki-300);
|
|
327
|
-
|
|
328
|
-
--border-subtle: var(--color-washi-800);
|
|
329
|
-
--border-default: var(--color-washi-700);
|
|
330
|
-
--border-strong: var(--color-washi-500);
|
|
331
|
-
|
|
332
|
-
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
|
|
333
|
-
--shadow-md: 0 2px 8px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.2);
|
|
334
|
-
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.2);
|
|
335
|
-
--shadow-xl: 0 20px 48px rgb(0 0 0 / 0.5);
|
|
336
|
-
}
|
|
1
|
+
@import './tokens/_palette.css';
|
|
2
|
+
@import './tokens/_typography.css';
|
|
3
|
+
@import './tokens/_spacing.css';
|
|
4
|
+
@import './tokens/_motion.css';
|
|
5
|
+
@import './tokens/_state.css';
|
|
6
|
+
@import './tokens/_semantic.css';
|
|
7
|
+
@import './tokens/_effects.css';
|