wj-elements 0.1.136 → 0.1.138

package/dist/light.css

@@ -0,0 +1,534 @@
+/*
+[ Light Mode ]
+*/
+
+:root,
+:host,
+.wje-theme-light,
+.light {
+    * {
+        box-sizing: border-box !important;
+    }
+    color-scheme: light;
+
+    --wje-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji';
+    --wje-font-family-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+    /* Line Heights */
+    --wje-line-height-denser: 1.2;
+    --wje-line-height-dense: 1.4;
+    --wje-line-height-normal: 1.5;
+    --wje-line-height-loose: 1.6;
+    --wje-line-height-looser: 1.8;
+
+    /* Font Sizes (rem) */
+    --wje-font-size-2x-small: 0.5rem; /* 8px */
+    --wje-font-size-x-small: 0.625rem; /* 10px */
+    --wje-font-size-small: 0.75rem; /* 12px */
+    --wje-font-size: 0.875rem; /* 14px */
+    --wje-font-size-medium: 1rem; /* 16px */
+    --wje-font-size-large: 1.25rem; /* 20px */
+    --wje-font-size-x-large: 1.5rem; /* 24px */
+    --wje-font-size-2x-large: 2.25rem; /* 36px */
+    --wje-font-size-3x-large: 3rem; /* 48px */
+    --wje-font-size-4x-large: 4.5rem; /* 72px */
+
+    /* Spacing (Padding/Margin) */
+    --wje-spacing-4x-small: 0.125rem; /* 2px */
+    --wje-spacing-3x-small: 0.25rem; /* 4px */
+    --wje-spacing-2x-small: 0.375rem; /* 6px */
+    --wje-spacing-x-small: 0.5rem; /* 8px */
+    --wje-spacing-small: 0.75rem; /* 12px */
+    --wje-spacing-medium: 1rem; /* 16px */
+    --wje-spacing-large: 1.5rem; /* 24px */
+    --wje-spacing-x-large: 2rem; /* 32px */
+    --wje-spacing-2x-large: 2.5rem; /* 40px */
+    --wje-spacing-3x-large: 3rem; /* 48px */
+    --wje-spacing-4x-large: 4.5rem; /* 72px */
+
+    /* Font Weights */
+    --wje-font-weight-light: 300;
+    --wje-font-weight-normal: 400;
+    --wje-font-weight-medium: 500;
+    --wje-font-weight-semibold: 600;
+    --wje-font-weight-bold: 700;
+
+    /* Border Radius */
+    --wje-border-radius-small: 0.125rem; /* 2px */
+    --wje-border-radius-medium: 0.25rem; /* 4px */
+    --wje-border-radius-large: 0.5rem; /* 8px */
+    --wje-border-radius-x-large: 1rem; /* 16px */
+    --wje-border-radius-circle: 50%; /* Circle */
+    --wje-border-radius-pill: 50rem; /* Pill */
+
+    /* Shadows */
+    --wje-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --wje-shadow-medium: 2px 2px 11px 0px hsla(0, 0%, 0%, 0.08);
+    --wje-shadow-large: 0 4px 8px rgba(0, 0, 0, 0.1);
+    --wje-shadow-x-large: 0 8px 16px rgba(0, 0, 0, 0.1);
+    --wje-shadow-2x-large: 0 16px 32px rgba(0, 0, 0, 0.1);
+
+    /* Letter Spacing */
+    --wje-letter-spacing-tightest: -0.05em;
+    --wje-letter-spacing-tighter: -0.025em;
+    --wje-letter-spacing-normal: 0em;
+    --wje-letter-spacing-wider: 0.025em;
+    --wje-letter-spacing-widest: 0.05em;
+
+    /* Transitions */
+    --wje-transition-fast: 0.2s ease-in-out;
+    --wje-transition-medium: 0.4s ease-in-out;
+    --wje-transition-slow: 0.6s ease-in-out;
+
+    /* Size */
+    --wje-size-4x-small: 0.125rem; /* 2px */
+    --wje-size-3x-small: 0.25rem; /* 4px */
+    --wje-size-2x-small: 0.5rem; /* 8px */
+    --wje-size-x-small: 0.625rem; /* 10px */
+    --wje-size-small: 0.75rem; /* 12px */
+    --wje-size-medium: 0.875rem; /* 14px */
+    --wje-size: 1rem; /* 16px */
+    --wje-size-large: 1.25rem; /* 20px */
+    --wje-size-x-large: 1.5rem; /* 24px */
+    --wje-size-2x-large: 2.25rem; /* 36px */
+    --wje-size-3x-large: 3rem; /* 48px */
+    --wje-size-4x-large: 4.5rem; /* 72px */
+    --wje-size-5x-large: 9rem; /* 144px */
+
+    --wje-border-width: 1px;
+    --wje-border-style: solid;
+
+    --wje-backdrop: rgb(0, 0, 0);
+    --wje-backdrop-opacity: 0.3;
+
+    /* Colors */
+    --wje-color: hsl(0, 0%, 29%);
+    --wje-color-dark: hsl(0, 0%, 29%);
+    --wje-color-light: hsl(0 0% 95%);
+    --wje-background: var(--wje-color-contrast-0);
+    --wje-border-color: var(--wje-color-contrast-3);
+
+    --wje-card-background: var(--wje-color-contrast-0);
+    --wje-card-color: var(--wje-color);
+
+    --wje-color-menu: hsl(220, 15%, 15%);
+    --wje-color-contrast: hsl(0, 0%, 95%);
+
+    --wje-color-white: #fff;
+    --wje-color-black: #000;
+
+    /* Color - Basic*/
+    --wje-color-primary: var(--wje-color-primary-11);
+    --wje-color-complete: var(--wje-color-complete-11);
+    --wje-color-success: var(--wje-color-success-11);
+    --wje-color-warning: var(--wje-color-warning-11);
+    --wje-color-danger: var(--wje-color-danger-11);
+    --wje-color-info: var(--wje-color-info-11);
+
+    /* Primary */
+    --wje-color-primary-1: hsla(261, 70%, 96%, 1);
+    --wje-color-primary-2: hsla(260, 66%, 92%, 1);
+    --wje-color-primary-3: hsla(260, 64%, 88%, 1);
+    --wje-color-primary-4: hsla(260, 61%, 84%, 1);
+    --wje-color-primary-5: hsla(260, 63%, 80%, 1);
+    --wje-color-primary-6: hsla(259, 61%, 76%, 1);
+    --wje-color-primary-7: hsla(258, 61%, 72%, 1);
+    --wje-color-primary-8: hsla(257, 61%, 68%, 1);
+    --wje-color-primary-9: hsla(254, 67%, 62%, 1);
+    --wje-color-primary-10: hsla(254, 59%, 45%, 1);
+    --wje-color-primary-11: hsla(254, 59%, 35%, 1);
+
+    /* Complete */
+    --wje-color-complete-1: hsla(233, 90%, 96%, 1);
+    --wje-color-complete-2: hsla(229, 89%, 93%, 1);
+    --wje-color-complete-3: hsla(229, 86%, 89%, 1);
+    --wje-color-complete-4: hsla(229, 86%, 86%, 1);
+    --wje-color-complete-5: hsla(228, 85%, 82%, 1);
+    --wje-color-complete-6: hsla(226, 82%, 78%, 1);
+    --wje-color-complete-7: hsla(225, 83%, 74%, 1);
+    --wje-color-complete-8: hsla(223, 83%, 70%, 1);
+    --wje-color-complete-9: hsla(211, 100%, 60%, 1);
+    --wje-color-complete-10: hsla(211, 100%, 45%, 1);
+    --wje-color-complete-11: hsla(211, 100%, 28%, 1);
+
+    /* Success */
+    --wje-color-success-1: hsla(147, 44%, 95%, 1);
+    --wje-color-success-2: hsla(149, 41%, 90%, 1);
+    --wje-color-success-3: hsla(149, 40%, 85%, 1);
+    --wje-color-success-4: hsla(150, 41%, 80%, 1);
+    --wje-color-success-5: hsla(149, 42%, 75%, 1);
+    --wje-color-success-6: hsla(150, 41%, 70%, 1);
+    --wje-color-success-7: hsla(151, 42%, 65%, 1);
+    --wje-color-success-8: hsla(152, 42%, 59%, 1);
+    --wje-color-success-9: hsla(158, 67%, 45%, 1);
+    --wje-color-success-10: hsla(158, 74%, 30%, 1);
+    --wje-color-success-11: hsla(158, 93%, 23%, 1);
+
+    /* Warning */
+    --wje-color-warning-1: hsla(45, 100%, 96%, 1);
+    --wje-color-warning-2: hsla(47, 100%, 93%, 1);
+    --wje-color-warning-3: hsla(46, 100%, 90%, 1);
+    --wje-color-warning-4: hsla(46, 100%, 87%, 1);
+    --wje-color-warning-5: hsla(46, 100%, 84%, 1);
+    --wje-color-warning-6: hsla(46, 100%, 81%, 1);
+    --wje-color-warning-7: hsla(46, 100%, 77%, 1);
+    --wje-color-warning-8: hsla(47, 100%, 74%, 1);
+    --wje-color-warning-9: hsla(47, 100%, 67%, 1);
+    --wje-color-warning-10: hsla(47, 100%, 53%, 1);
+    --wje-color-warning-11: hsla(47, 75%, 38%, 1);
+
+    /* Danger */
+    --wje-color-danger-1: hsla(9, 100%, 96%, 1);
+    --wje-color-danger-2: hsla(12, 100%, 91%, 1);
+    --wje-color-danger-3: hsla(11, 94%, 87%, 1);
+    --wje-color-danger-4: hsla(10, 91%, 83%, 1);
+    --wje-color-danger-5: hsla(9, 87%, 79%, 1);
+    --wje-color-danger-6: hsla(10, 82%, 74%, 1);
+    --wje-color-danger-7: hsla(8, 80%, 70%, 1);
+    --wje-color-danger-8: hsla(8, 77%, 65%, 1);
+    --wje-color-danger-9: hsla(3, 78%, 59%, 1);
+    --wje-color-danger-10: hsla(3, 68%, 41%, 1);
+    --wje-color-danger-11: hsla(3, 81%, 31%, 1);
+
+    /* Info */
+    --wje-color-info-1: hsla(210, 5%, 92%, 1);
+    --wje-color-info-2: hsla(204, 6%, 85%, 1);
+    --wje-color-info-3: hsla(210, 7%, 78%, 1);
+    --wje-color-info-4: hsla(203, 5%, 71%, 1);
+    --wje-color-info-5: hsla(213, 6%, 65%, 1);
+    --wje-color-info-6: hsla(203, 6%, 58%, 1);
+    --wje-color-info-7: hsla(208, 6%, 52%, 1);
+    --wje-color-info-8: hsla(210, 7%, 45%, 1);
+    --wje-color-info-9: hsla(207, 20%, 35%, 1);
+    --wje-color-info-10: hsla(207, 16%, 27%, 1);
+    --wje-color-info-11: hsla(207, 36%, 16%, 1);
+
+    /* Contrast */
+    --wje-color-contrast-0: hsla(0, 0%, 100%, 1);
+    --wje-color-contrast-1: hsla(0, 0%, 98%, 1);
+    --wje-color-contrast-2: hsla(240, 5%, 96%, 1);
+    --wje-color-contrast-3: hsla(240, 6%, 90%, 1);
+    --wje-color-contrast-4: hsla(240, 5%, 84%, 1);
+    --wje-color-contrast-5: hsla(240, 5%, 65%, 1);
+    --wje-color-contrast-6: hsla(240, 4%, 46%, 1);
+    --wje-color-contrast-7: hsla(240, 5%, 34%, 1);
+    --wje-color-contrast-8: hsla(240, 5%, 26%, 1);
+    --wje-color-contrast-9: hsla(240, 4%, 16%, 1);
+    --wje-color-contrast-10: hsla(240, 6%, 10%, 1);
+    --wje-color-contrast-11: hsla(240, 7%, 8%, 1);
+
+    /*
+  [ Elements ]
+  */
+
+    /* Avatar */
+    --wje-avatar-size: var(--wje-size-x-large);
+    --wje-avatar-font-size: var(--wje-font-size-x-small);
+    --wje-avatar-font-weight: var(--wje-font-weight-normal);
+    --wje-avatar-color: var(--wje-color-contrast-11);
+    --wje-avatar-background-color: var(--wje-color-contrast-3);
+    --wje-avatar-border-radius: var(--wje-border-radius-circle);
+    --wje-avatar-border-color: transparent;
+    --wje-avatar-border-width: 1px;
+    --wje-avatar-border-style: solid;
+
+    /* Badge */
+    --wje-badge-border-radius: var(--wje-border-radius-pill);
+
+    /* Breadcrumb */
+    --wje-breadcrumb-a: var(--wje-color-contrast-8);
+    --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);
+
+    /* Button */
+    --wje-button-border-radius: var(--wje-border-radius-medium);
+    --wje-button-border-width: 1px;
+    --wje-button-border-style: solid;
+    --wje-button-border-color: var(--wje-color-contrast-1);
+    --wje-button-margin-inline: 0;
+    --wje-button-outline-width: 0.5rem;
+
+    /* Card */
+    --wje-card-border-radius: var(--wje-border-radius-large);
+    --wje-card-border-color: transparent;
+    --wje-card-shadow: var(--wje-shadow-x-large);
+
+    /* Card - Header */
+    --wje-card-header-padding: 1rem 1rem 0.5rem;
+
+    /* Card - Controls */
+    --wje-card-controls-font-size: var(--wje-font-size-small);
+    --wje-card-controls-font-family: var(--wje-font-family-secondary);
+
+    /* Card - Subtitle */
+    --wje-card-subtitle-font-size: var(--wje-font-size-small);
+    --wje-card-subtitle-font-family: var(--wje-font-family-secondary);
+    --wje-card-subtitle-padding: 0;
+
+    /* Card - Content */
+    --wje-card-content-padding: 0 1rem 1rem;
+
+    /* Card - Title*/
+    --wje-card-title-font-size: var(--wje-font-size-x-large);
+    --wje-card-title-font-weight: var(--wje-font-weight-medium);
+    --wje-card-title-margin: 0;
+    --wje-card-title-padding: 0;
+    --wje-card-title-line-height: 1.2;
+
+    /* Carousel */
+    --wje-scroll-hint: 0px;
+    --wje-carousel-width: 100%;
+    --wje-carousel-height: auto;
+    --wje-carousel-size: 100%;
+
+    /* Carousel - Item */
+    --wje-carousel-item-aspect-ratio: inherit;
+
+    /* Container */
+    --wje-container-indent: 0;
+
+    /* Color Picker */
+    --wje-color-picker-value: #ff0000;
+    --wje-color-picker-area: transparent;
+    --wje-color-picker-swatch: transparent;
+    --wje-color-picker-size: 1rem;
+    --wje-color-picker-radius: 4px;
+
+    /* Checkbox */
+    --wje-checkbox-interminate: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1taW51cyI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTUgMTJsMTQgMCIgLz48L3N2Zz4=');
+    --wje-checkbox-checkmark: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1jaGVjayI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=');
+    --wje-checkbox-margin-top: 0;
+    --wje-checkbox-margin-bottom: var(--wje-spacing-x-small);
+    --wje-checkbox-margin-inline: 0;
+    --wje-checkbox-size: var(--wje-font-size-medium);
+    --wje-checkbox-border-radius: var(--wje-border-radius-medium);
+
+    /* Chip */
+    --wje-chip-border-radius: 100px;
+    --wje-chip-margin: 0;
+
+    /* Dialog */
+    --wje-dialog-width: 600px;
+    --wje-dialog-height: 600px;
+    --wje-dialog-border-radius: var(--wje-border-radius-medium);
+    --wje-dialog-border-width: var(--wje-border-width);
+    --wje-dialog-border-style: var(--wje-border-style);
+    --wje-dialog-border-color: var(--wje-border-color);
+    --wje-dialog-margin-top: auto;
+    --wje-dialog-margin-start: auto;
+    --wje-dialog-margin-end: auto;
+    --wje-dialog-margin-bottom: auto;
+    --wje-dialog-padding: var(--wje-spacing-medium);
+    --wje-dialog-padding-inline: var(--wje-spacing-medium);
+    --wje-dialog-padding-top: var(--wje-spacing-medium);
+    --wje-dialog-padding-bottom: var(--wje-spacing-medium);
+
+    /* Divider */
+    --wje-divider-border-width: var(--wje-border-width, 1px);
+    --wje-divider-border-style: var(--wje-border-style);
+    --wje-divider-border-color: var(--wje-border-color);
+    --wje-divider-spacing: 0;
+
+    /* File Upload - Item */
+    --wje-file-upload-item-border-width: 1px;
+    --wje-file-upload-item-border-style: solid;
+    --wje-file-upload-item-border-color: var(--wje-border-color);
+
+    /* Icon */
+    --wje-icon-stroke: 2;
+    --wje-icon-size: var(--wje-size);
+    --wje-icon-color: currentColor;
+
+    /* Icon Picker */
+    --wje-icon-picker-radius: var(--wje-border-radius-small);
+    --wje-icon-picker-icon-size: 1.5rem;
+    --wje-icon-picker-border-width: 1px;
+    --wje-icon-picker-border-style: solid;
+    --wje-icon-picker-border-color: var(--wje-border-color);
+    --wje-icon-picker-padding: 0.25rem;
+
+    /* Infinite Scroll */
+    --wje-infinite-scroll-width: 100%;
+    --wje-infinite-scroll-height: 300px;
+    --wje-infinite-scroll-loading-bg: rgba(0, 0, 0, 0);
+
+    /* Img - Comparer */
+    --wje-img-compare-divider-area: 12px;
+    --wje-img-compare-divider-background: white;
+    --wje-img-compare-divider-size: 2px;
+    --wje-img-compare-divider-left: 50%;
+    --wje-img-compare-position: 50%;
+    --wje-img-compare-clip-path: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0);
+
+    /* Input */
+    --wje-input-font-family: var(--wje-font-family);
+    --wje-input-background-color: var(--wje-background);
+    --wje-input-color: var(--wje-color);
+    --wje-input-color-invalid: var(--wje-color-danger);
+    --wje-input-border-color: var(--wje-border-color);
+    --wje-input-border-color-focus: var(--wje-color-primary);
+    --wje-input-border-width: 1px;
+    --wje-input-border-style: solid;
+    --wje-input-border-radius: 4px;
+    --wje-input-margin-bottom: 0.5rem;
+    --wje-input-line-height: 20px;
+    --wje-input-slot-padding-inline: 0.5rem;
+
+    /* Item */
+    --wje-item-color: var(--wje-color);
+    --wje-item-border-width: 0 0 1px 0;
+    --wje-item-border-style: solid;
+    --wje-item-border-color: var(--wje-border-color);
+    --wje-item-border-radius: 0;
+    --wje-item-background: transparent;
+    --wje-item-background-hover: var(--wje-color-contrast-3);
+    --wje-item-padding-top: 0px;
+    --wje-item-padding-bottom: 0px;
+    --wje-item-padding-end: 0px;
+    --wje-item-padding-start: 0px;
+    --wje-item-inner-border-width: 0 0 1px 0;
+    --wje-item-inner-padding-top: 0px;
+    --wje-item-inner-padding-bottom: 0px;
+    --wje-item-inner-padding-start: 0px;
+    --wje-item-inner-padding-end: 0px;
+    --wje-item-inner-box-shadow: none;
+    --wje-item-min-height: 40px;
+    --wje-item-transition: var(--wje-transition-fast);
+
+    /* List */
+    --wje-list-inset-padding: 1rem;
+    --wje-list-border-radius: var(--wje-border-radius-medium);
+    --wje-list-background: var(--wje-background);
+
+    /* Menu */
+    --wje-menu-background: var(--wje-background);
+    --wje-menu-border-width: 1px;
+    --wje-menu-border-style: solid;
+    --wje-menu-border-color: var(--wje-border-color);
+    --wje-menu-border-radius: var(--wje-border-radius-medium);
+    --wje-menu-padding-top: var(--wje-spacing-x-small);
+    --wje-menu-padding-bottom: var(--wje-spacing-x-small);
+    --wje-menu-padding-inline: 0;
+    --wje-menu-margin-top: 9;
+    --wje-menu-margin-bottom: 0;
+    --wje-menu-margin-inline: 0;
+    --wje-menu-collapse-width: 65px;
+    --wje-menu-z-index: 8;
+    --wje-menu-shadow: var(--wje-shadow-medium);
+
+    /* Menu - Item */
+    --wje-menu-item-color: var(--wje-color);
+    --wje-menu-item-background: transparent;
+    --wje-menu-item-color-hover: var(--wje-color-contrast-8);
+    --wje-menu-item-background-hover: var(--wje-border-color);
+    --wje-menu-item-color-focus: var(--wje-color-contrast-8);
+    --wje-menu-item-background-focus: var(--wje-border-color);
+    --wje-menu-item-color-active: var(--wje-color-contrast-8);
+    --wje-menu-item-background-active: var(--wje-border-color);
+    --wje-menu-item-padding-top: var(--wje-spacing-x-small);
+    --wje-menu-item-padding-bottom: var(--wje-spacing-x-small);
+    --wje-menu-item-line-height: 1.8rem;
+    --wje-menu-submenu-offset: 0;
+    --wje-menu-item-icon-visibility: hidden;
+    --wje-menu-item-check-icon-display: flex;
+    --wje-menu-item-check-icon-width: 1.5rem;
+
+    /* Menu - Label  */
+    --wje-menu-label-font-size: var(--wje-font-size-small);
+    --wje-menu-label-weight: var(--wje-font-weight-semibold);
+
+    /* Option */
+    --wje-option-padding-top: var(--wje-spacing-x-small);
+    --wje-option-padding-bottom: var(--wje-spacing-x-small);
+    --wje-option-highlighted: var(--wje-color-contrast-3);
+
+    /* Orgchart */
+    --wje-orgchart-height-line: 10px;
+    --wje-orgchart-border-radius: var(--wje-border-radius-large);
+
+    /* Orgchart - Item */
+    --wje-orgchart-item-width: 75px;
+    --wje-orgchart-item-border-radius: var(--wje-border-radius-large);
+    --wje-orgchart-item-height-line: 10px;
+    --wje-orgchart-item-background: var(--wje-color-contrast-0);
+
+    --wje-orgchart-item-highlight-background: var(--wje-color-complete-2);
+    --wje-orgchart-item-boss-background: var(--wje-color-complete-2);
+    --wje-orgchart-item-hover-background: var(--wje-color-contrast-3);
+
+    --wje-orgchart-item-highlight-border: 1px solid var(--wje-color-complete-3);
+    --wje-orgchart-item-boss-border: 1px solid var(--wje-border-color);
+    --wje-orgchart-item-hover-border: 1px solid var(--wje-color-danger-3);
+
+    --wje-orgchart-item-expander-size: 0.75rem;
+
+    /* Orgchart - Group */
+    --wje-orgchart-group-width: auto;
+    --wje-orgchart-group-border-radius: var(--wje-border-radius-large);
+    --wje-orgchart-group-height-line: 10px;
+    --wje-orgchart-group-padding: 0.25rem 0;
+
+    /* Rate */
+    --wje-rate-gap: 0.25rem;
+    --wje-rate-color: var(--wje-color-contrast-11);
+    --wje-rate-selected-color: var(--wje-color-danger-9);
+
+    /* Status */
+    --wje-status-size: var(--wje-size-small);
+
+    /*Stepper*/
+    --wje-stepper-margin: 1.25rem;
+    --wje-stepper-justify: start;
+    --wje-stepper-grow: initial;
+
+    /* Tab */
+    --wje-tab-font-family: var(--wje-font-family-secondary);
+    --wje-tab-font-size: var(--wje-font-size-x-small);
+    --wje-tab-line-height: var(--wje-line-height-looser);
+    --wje-tab-text-transfrom: uppercase;
+    --wje-tab-font-weight: var(--wje-font-weight-medium);
+    --wje-tab-letter-spacing: var(--wje-letter-spacing-widest);
+    --wje-tab-padding-inline: var(--wje-spacing-medium);
+    --wje-tab-padding-top: var(--wje-spacing-small);
+    --wje-tab-padding-bottom: var(--wje-spacing-small);
+    --wje-tab-color-active: var(--wje-color-primary-9);
+    --wje-tab-color-hover: var(--wje-color-primary-1);
+    --wje-tab-border-radius: 0;
+
+    /* Textarea */
+    --wje-textarea-font-family: var(--wje-font-family);
+    --wje-textarea-background-color: var(--wje-background);
+    --wje-textarea-color: var(--wje-color);
+    --wje-textarea-color-invalid: var(--wje-color-danger);
+    --wje-textarea-border-width: 1px;
+    --wje-textarea-border-style: solid;
+    --wje-textarea-border-color: var(--wje-border-color);
+    --wje-textarea-border-color-focus: var(--wje-color-primary);
+    --wje-textarea-border-radius: var(--wje-border-radius-medium);
+    --wje-textarea-margin-bottom: var(--wje-spacing-x-small);
+    --wje-textarea-line-height: 20px;
+    --wje-textarea-padding: var(--wje-spacing-x-small);
+
+    /* Thumbnail */
+    --wje-thumbnail-width: 48px;
+    --wje-thumbnail-height: 48px;
+    --wje-thumbnail-border-radius: var(--wje-border-radius-medium);
+
+    /* Tooltip */
+    --wje-tooltip-arrow-color: var(--wje-color-contrast-11);
+    --wje-tooltip-background: var(--wje-color-contrast-11);
+    --wje-tooltip-color: var(--wje-color-contrast-1);
+    --wje-tooltip-font-size: var(--wje-font-size-small);
+    --wje-tooltip-font-weight: var(--wje-font-weight-normal);
+    --wje-tooltip-line-height: var(--wje-line-height-normal);
+    --wje-tooltip-shadow: var(--wje-shadow-medium);
+    --wje-tooltip-spacing: var(--wje-spacing-x-small);
+    --wje-tooltip-border-radius: var(--wje-border-radius-medium);
+
+    /* Tree */
+    --wje-tree-item-indent: 1.3rem;
+    --wje-tree-item-indent-guid-width: 0px;
+}

package/dist/list.element-Ce1vIm1O.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import WJElement from "./wje-element.js";
+const styles = "/*\n[ WJ List ]\n*/\n:host {\n  margin: 0;\n  padding: 0;\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n\n:host(.wje-inset) {\n  background: var(--wje-list-background);\n  transform: translateZ(0);\n  overflow: hidden;\n  padding: var(--wje-list-inset-padding);\n  border-radius: var(--wje-list-border-radius);\n}\n\n:host(.wje-lines-none) ::slotted(wje-item) {\n  --wje-border-width: 0 !important;\n}";
+class List extends WJElement {
+  /**
+   * Creates an instance of List.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "List");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  afterDraw() {
+    this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines"));
+    this.classList.toggle("wje-inset", this.hasAttribute("inset"));
+  }
+}
+export {
+  List as L
+};
+//# sourceMappingURL=list.element-Ce1vIm1O.js.map

package/dist/list.element-Ce1vIm1O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.element-Ce1vIm1O.js","sources":["../packages/wje-list/list.element.js"],"sourcesContent":["import WJElement from '../wje-element/element.js';\nimport styles from './styles/styles.scss?inline';\n\n/**\n * `List` is a custom web component that represents a list.\n * It extends from `WJElement`.\n * @summary This element represents a list.\n * @documentation https://elements.webjet.sk/components/list\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the list.\n * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.\n * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.\n * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.\n * @tag wje-list\n */\nexport default class List extends WJElement {\n    /**\n     * Creates an instance of List.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'List';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.classList.toggle('wje-lines-' + this.lines, this.hasAttribute('lines'));\n        this.classList.toggle('wje-inset', this.hasAttribute('inset'));\n    }\n}\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,UAAU,OAAO,eAAe,KAAK,OAAO,KAAK,aAAa,OAAO,CAAC;AAC3E,SAAK,UAAU,OAAO,aAAa,KAAK,aAAa,OAAO,CAAC;AAAA,EACrE;AACA;"}

package/dist/localize.js

@@ -0,0 +1,70 @@
+class LocalizerDefault {
+  constructor(element) {
+    this.element = element;
+    this.lang = this.element.lang || document.documentElement.lang || "en-gb";
+    this.dir = this.element.dir || document.documentElement.dir || "ltr";
+    this.setLanguage();
+  }
+  get languages() {
+    return window.translations;
+  }
+  // Nastavenie aktuálneho jazyka
+  setLanguage() {
+    if (this.languages.has(this.lang)) {
+      this.currentLang = this.lang;
+    } else {
+      console.error(`Language "${this.lang}" not loaded.`);
+    }
+  }
+  // Vyhľadávanie prekladu podľa kľúča
+  translate(key) {
+    console.log("TRANSLATE:", this.element.lang, this.lang, this.currentLang, key);
+    const langMap = this.languages.get(this.currentLang);
+    console.log("LANG MAP:", langMap);
+    return langMap ? langMap[key] || key : key;
+  }
+  // Vyhľadávanie prekladu podľa kľúča a typu čísla
+  translatePlural(key, count = 0, type = "cardinal") {
+    const plural = new Intl.PluralRules(this.lang, { type });
+    if (count !== void 0) key += "." + plural.select(count);
+    return this.translate(key);
+  }
+  // Formátovanie čísla podľa aktuálneho jazyka
+  formatNumber(number, options) {
+    return new Intl.NumberFormat(this.currentLang, options).format(number);
+  }
+  // Formátovanie dátumu podľa aktuálneho jazyka
+  formatDate(date) {
+    return new Intl.DateTimeFormat(this.currentLang).format(new Date(date));
+  }
+  relativeTime(lang, value = 0, unit = "day", options = { numeric: "auto" }) {
+    lang = lang || this.currentLang;
+    return new Intl.RelativeTimeFormat(lang, options).format(value, unit);
+  }
+}
+function registerTranslation(...translation) {
+  translation.forEach((t) => {
+    if (!t.code) {
+      console.error("Translation object is missing 'code' property:", t);
+      return;
+    }
+    const code = t.code.toLowerCase();
+    if (window.translations.has(code)) {
+      window.translations.set(code, { ...window.translations.get(code), ...t });
+    } else {
+      window.translations.set(code, t);
+    }
+  });
+}
+class Localizer extends LocalizerDefault {
+  constructor(element) {
+    super(element);
+  }
+  static registerTranslation(...translation) {
+    registerTranslation(...translation);
+  }
+}
+export {
+  Localizer
+};
+//# sourceMappingURL=localize.js.map

package/dist/localize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n    constructor(element) {\n        this.element = element;\n\n        this.lang = this.element.lang || document.documentElement.lang || 'en-gb';\n        this.dir = this.element.dir || document.documentElement.dir || 'ltr';\n\n        this.setLanguage();\n    }\n\n    get languages() {\n        return window.translations;\n    }\n\n    // Nastavenie aktuálneho jazyka\n    setLanguage() {\n        if (this.languages.has(this.lang)) {\n            this.currentLang = this.lang;\n        } else {\n            console.error(`Language \"${this.lang}\" not loaded.`);\n        }\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča\n    translate(key) {\n        console.log(\"TRANSLATE:\",this.element.lang, this.lang, this.currentLang, key);\n        const langMap = this.languages.get(this.currentLang);\n        console.log(\"LANG MAP:\", langMap);\n        return langMap ? langMap[key] || key : key;\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča a typu čísla\n    translatePlural(key, count = 0, type = 'cardinal') {\n        const plural = new Intl.PluralRules(this.lang, { type: type });\n\n        if (count !== undefined) key += '.' + plural.select(count);\n\n        return this.translate(key);\n    }\n\n    // Formátovanie čísla podľa aktuálneho jazyka\n    formatNumber(number, options) {\n        return new Intl.NumberFormat(this.currentLang, options).format(number);\n    }\n\n    // Formátovanie dátumu podľa aktuálneho jazyka\n    formatDate(date) {\n        return new Intl.DateTimeFormat(this.currentLang).format(new Date(date));\n    }\n\n    relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n        lang = lang || this.currentLang;\n        return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n    }\n}\n\nexport function registerTranslation(...translation) {\n    translation.forEach((t) => {\n        if (!t.code) {\n            console.error(\"Translation object is missing 'code' property:\", t);\n            return;\n        }\n\n        const code = t.code.toLowerCase();\n        if (window.translations.has(code)) {\n            window.translations.set(code, { ...window.translations.get(code), ...t });\n        } else {\n            window.translations.set(code, t);\n        }\n    });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n    constructor(element) {\n        super(element);\n    }\n    static registerTranslation(...translation) {\n        registerTranslation(...translation);\n    }\n}\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AACjB,SAAK,UAAU;AAEf,SAAK,OAAO,KAAK,QAAQ,QAAQ,SAAS,gBAAgB,QAAQ;AAClE,SAAK,MAAM,KAAK,QAAQ,OAAO,SAAS,gBAAgB,OAAO;AAE/D,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AACV,QAAI,KAAK,UAAU,IAAI,KAAK,IAAI,GAAG;AAC/B,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA,EAGI,UAAU,KAAK;AACX,YAAQ,IAAI,cAAa,KAAK,QAAQ,MAAM,KAAK,MAAM,KAAK,aAAa,GAAG;AAC5E,UAAM,UAAU,KAAK,UAAU,IAAI,KAAK,WAAW;AACnD,YAAQ,IAAI,aAAa,OAAO;AAChC,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA,EAGI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,MAAM,EAAE,MAAY;AAE7D,QAAI,UAAU,OAAW,QAAO,MAAM,OAAO,OAAO,KAAK;AAEzD,WAAO,KAAK,UAAU,GAAG;AAAA,EACjC;AAAA;AAAA,EAGI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA,EAGI,WAAW,MAAM;AACb,WAAO,IAAI,KAAK,eAAe,KAAK,WAAW,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EAC9E;AAAA,EAEI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACtEO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}