wj-elements 0.1.23 → 0.1.24

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/light.css CHANGED
@@ -1 +1 @@
1
- :root,:host,.wje-theme-light,.light{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;--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;--wje-font-size-2x-small: .5rem;--wje-font-size-x-small: .625rem;--wje-font-size-small: .75rem;--wje-font-size: .875rem;--wje-font-size-medium: 1rem;--wje-font-size-large: 1.25rem;--wje-font-size-x-large: 1.5rem;--wje-font-size-2x-large: 2.25rem;--wje-font-size-3x-large: 3rem;--wje-font-size-4x-large: 4.5rem;--wje-spacing-4x-small: .125rem;--wje-spacing-3x-small: .25rem;--wje-spacing-2x-small: .375rem;--wje-spacing-x-small: .5rem;--wje-spacing-small: .75rem;--wje-spacing-medium: 1rem;--wje-spacing-large: 1.5rem;--wje-spacing-x-large: 2rem;--wje-spacing-2x-large: 2.5rem;--wje-spacing-3x-large: 3rem;--wje-spacing-4x-large: 4.5rem;--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;--wje-border-radius-small: .125rem;--wje-border-radius-medium: .25rem;--wje-border-radius-large: .5rem;--wje-border-radius-x-large: 1rem;--wje-border-radius-circle: 50%;--wje-border-radius-pill: 50rem;--wje-shadow-small: 0 1px 2px rgba(0, 0, 0, .05);--wje-shadow-medium: 2px 2px 11px 0px hsla(0, 0%, 0%, .08);--wje-shadow-large: 0 4px 8px rgba(0, 0, 0, .1);--wje-shadow-x-large: 0 8px 16px rgba(0, 0, 0, .1);--wje-shadow-2x-large: 0 16px 32px rgba(0, 0, 0, .1);--wje-letter-spacing-tightest: -.05em;--wje-letter-spacing-tighter: -.025em;--wje-letter-spacing-normal: 0em;--wje-letter-spacing-wider: .025em;--wje-letter-spacing-widest: .05em;--wje-transition-fast: .2s ease-in-out;--wje-transition-medium: .4s ease-in-out;--wje-transition-slow: .6s ease-in-out;--wje-size-4x-small: .125rem;--wje-size-3x-small: .25rem;--wje-size-2x-small: .5rem;--wje-size-x-small: .625rem;--wje-size-small: .75rem;--wje-size-medium: .875rem;--wje-size: 1rem;--wje-size-large: 1.25rem;--wje-size-x-large: 1.5rem;--wje-size-2x-large: 2.25rem;--wje-size-3x-large: 3rem;--wje-size-4x-large: 4.5rem;--wje-size-5x-large: 9rem;--wje-border-width: 1px;--wje-border-style: solid;--wje-backdrop: rgb(0, 0, 0);--wje-backdrop-opacity: .3;--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;--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);--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);--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);--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);--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);--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, 68%, 41%, 1);--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);--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);--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: inherit;--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;--wje-badge-border-radius: var(--wje-border-radius-pill);--wje-breadcrumb-a: var(--wje-color-contrast-8);--wje-breadcrumb-a-hover: var(--wje-color-contrast-6);--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: none;--wje-card-border-color: transparent;--wje-card-header-padding: 1rem 1rem .5rem;--wje-card-controls-font-size: var(--wje-font-size-small);--wje-card-controls-font-family: var(--wje-font-family-secondary);--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;--wje-card-content-padding: 0 1rem 1rem;--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;--wje-scroll-hint: 0px;--wje-carousel-width: 100%;--wje-carousel-height: auto;--wje-carousel-size: 100%;--wje-carousel-item-aspect-ratio: inherit;--wje-container-indent: 0;--wje-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-checkbox-margin-top: 0;--wje-checkbox-margin-bottom: var(--wje-spacing-x-small);--wje-checkbox-margin-inline: 0;--wje-checkbox-width: 1rem;--wje-checkbox-height: 1rem;--wje-chip-border-radius: 100px;--wje-chip-margin: 0;--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);--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;--wje-icon-stroke: 2;--wje-icon-size: var(--wje-size);--wje-icon-color: currentColor;--wje-infinite-scroll-width: 100%;--wje-infinite-scroll-height: 300px;--wje-infinite-scroll-loading-bg: rgba(0, 0, 0, 0);--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);--wje-list-inset-padding: 1rem;--wje-list-border-radius: var(--wje-border-radius-medium);--wje-list-background: var(--wje-background);--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);--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;--wje-menu-label-font-size: var(--wje-font-size-small);--wje-menu-label-weight: var(--wje-font-weight-semibold);--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);--wje-rate-gap: .25rem;--wje-status-size: var(--wje-size-small);--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-11);--wje-tab-color-hover: var(--wje-color-primary-1);--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);--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: var(--wje-border-radius-medium);--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)}:root *,:host *,.wje-theme-light *,.light *{box-sizing:border-box!important}
1
+ :root,:host,.wje-theme-light,.light{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;--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;--wje-font-size-2x-small: .5rem;--wje-font-size-x-small: .625rem;--wje-font-size-small: .75rem;--wje-font-size: .875rem;--wje-font-size-medium: 1rem;--wje-font-size-large: 1.25rem;--wje-font-size-x-large: 1.5rem;--wje-font-size-2x-large: 2.25rem;--wje-font-size-3x-large: 3rem;--wje-font-size-4x-large: 4.5rem;--wje-spacing-4x-small: .125rem;--wje-spacing-3x-small: .25rem;--wje-spacing-2x-small: .375rem;--wje-spacing-x-small: .5rem;--wje-spacing-small: .75rem;--wje-spacing-medium: 1rem;--wje-spacing-large: 1.5rem;--wje-spacing-x-large: 2rem;--wje-spacing-2x-large: 2.5rem;--wje-spacing-3x-large: 3rem;--wje-spacing-4x-large: 4.5rem;--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;--wje-border-radius-small: .125rem;--wje-border-radius-medium: .25rem;--wje-border-radius-large: .5rem;--wje-border-radius-x-large: 1rem;--wje-border-radius-circle: 50%;--wje-border-radius-pill: 50rem;--wje-shadow-small: 0 1px 2px rgba(0, 0, 0, .05);--wje-shadow-medium: 2px 2px 11px 0px hsla(0, 0%, 0%, .08);--wje-shadow-large: 0 4px 8px rgba(0, 0, 0, .1);--wje-shadow-x-large: 0 8px 16px rgba(0, 0, 0, .1);--wje-shadow-2x-large: 0 16px 32px rgba(0, 0, 0, .1);--wje-letter-spacing-tightest: -.05em;--wje-letter-spacing-tighter: -.025em;--wje-letter-spacing-normal: 0em;--wje-letter-spacing-wider: .025em;--wje-letter-spacing-widest: .05em;--wje-transition-fast: .2s ease-in-out;--wje-transition-medium: .4s ease-in-out;--wje-transition-slow: .6s ease-in-out;--wje-size-4x-small: .125rem;--wje-size-3x-small: .25rem;--wje-size-2x-small: .5rem;--wje-size-x-small: .625rem;--wje-size-small: .75rem;--wje-size-medium: .875rem;--wje-size: 1rem;--wje-size-large: 1.25rem;--wje-size-x-large: 1.5rem;--wje-size-2x-large: 2.25rem;--wje-size-3x-large: 3rem;--wje-size-4x-large: 4.5rem;--wje-size-5x-large: 9rem;--wje-border-width: 1px;--wje-border-style: solid;--wje-backdrop: rgb(0, 0, 0);--wje-backdrop-opacity: .3;--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;--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);--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);--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);--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);--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);--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, 68%, 41%, 1);--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);--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);--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: inherit;--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;--wje-badge-border-radius: var(--wje-border-radius-pill);--wje-breadcrumb-a: var(--wje-color-contrast-8);--wje-breadcrumb-a-hover: var(--wje-color-contrast-6);--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: none;--wje-card-border-color: transparent;--wje-card-header-padding: 1rem 1rem .5rem;--wje-card-controls-font-size: var(--wje-font-size-small);--wje-card-controls-font-family: var(--wje-font-family-secondary);--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;--wje-card-content-padding: 0 1rem 1rem;--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;--wje-scroll-hint: 0px;--wje-carousel-width: 100%;--wje-carousel-height: auto;--wje-carousel-size: 100%;--wje-carousel-item-aspect-ratio: inherit;--wje-container-indent: 0;--wje-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-checkbox-margin-top: 0;--wje-checkbox-margin-bottom: var(--wje-spacing-x-small);--wje-checkbox-margin-inline: 0;--wje-checkbox-width: 1rem;--wje-checkbox-height: 1rem;--wje-chip-border-radius: 100px;--wje-chip-margin: 0;--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);--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;--wje-icon-stroke: 2;--wje-icon-size: var(--wje-size);--wje-icon-color: currentColor;--wje-infinite-scroll-width: 100%;--wje-infinite-scroll-height: 300px;--wje-infinite-scroll-loading-bg: rgba(0, 0, 0, 0);--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);--wje-list-inset-padding: 1rem;--wje-list-border-radius: var(--wje-border-radius-medium);--wje-list-background: var(--wje-background);--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);--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;--wje-menu-label-font-size: var(--wje-font-size-small);--wje-menu-label-weight: var(--wje-font-weight-semibold);--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);--wje-rate-gap: .25rem;--wje-status-size: var(--wje-size-small);--wje-tab-font-family: var(--wje-font-family-secondary);--wje-tab-font-size: var(--wje-font-size-small);--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-11);--wje-tab-color-hover: var(--wje-color-primary-1);--wje-tab-border-radius: 0;--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);--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: var(--wje-border-radius-medium);--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)}:root *,:host *,.wje-theme-light *,.light *{box-sizing:border-box!important}
@@ -105,7 +105,7 @@ class j extends k {
105
105
  let i = document.createElement("div");
106
106
  i.setAttribute("part", "native"), i.setAttribute("id", "anchor"), i.classList.add("native-menu-item");
107
107
  let r = document.createElement("span");
108
- r.classList.add("check-icon"), r.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? r.classList.add("checked") : r.classList.remove("checked");
108
+ r.setAttribute("part", "check"), r.classList.add("check-icon"), r.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? r.classList.add("checked") : r.classList.remove("checked");
109
109
  let d = document.createElement("slot");
110
110
  d.name = "start";
111
111
  let p = document.createElement("slot");
@@ -36,23 +36,25 @@ class b extends h {
36
36
  * @param {Object} params - The parameters for drawing.
37
37
  * @returns {DocumentFragment}
38
38
  */
39
- draw(t, n, o) {
40
- let l = document.createDocumentFragment(), r = document.createElement("div");
41
- r.classList.add("native-tab-group");
42
- let i = document.createElement("header");
43
- i.classList.add("scroll-snap-x");
44
- let s = document.createElement("nav"), c = document.createElement("section"), p = document.createElement("slot"), d = document.createElement("slot");
45
- return d.setAttribute("name", "nav"), i.appendChild(s), s.appendChild(d), c.appendChild(p), r.appendChild(i), r.appendChild(c), l.appendChild(r), l;
39
+ draw(t, l, i) {
40
+ let s = document.createDocumentFragment(), r = document.createElement("div");
41
+ r.setAttribute("part", "native"), r.classList.add("native-tab-group");
42
+ let o = document.createElement("header");
43
+ o.setAttribute("part", "tabs"), o.classList.add("scroll-snap-x");
44
+ let c = document.createElement("nav"), n = document.createElement("section");
45
+ n.setAttribute("part", "panels");
46
+ let p = document.createElement("slot"), d = document.createElement("slot");
47
+ return d.setAttribute("name", "nav"), o.appendChild(c), c.appendChild(d), n.appendChild(p), r.appendChild(o), r.appendChild(n), s.appendChild(r), s;
46
48
  }
47
49
  /**
48
50
  * Sets up the event listeners after the component is drawn.
49
51
  */
50
52
  afterDraw() {
51
- let t = this.getActiveTab(), n = t ? t[0].name : this.getTabAll()[0].panel;
52
- this.setActiveTab(n), this.addEventListener("wje:tab-change", (o) => {
53
- if (o.detail.context.hasAttribute("disabled"))
53
+ let t = this.getActiveTab(), l = t ? t[0].name : this.getTabAll()[0].panel;
54
+ this.setActiveTab(l), this.addEventListener("wje:tab-change", (i) => {
55
+ if (i.detail.context.hasAttribute("disabled"))
54
56
  return !1;
55
- this.setActiveTab(o.detail.context.panel);
57
+ this.setActiveTab(i.detail.context.panel);
56
58
  });
57
59
  }
58
60
  /**
package/dist/wje-tab.js CHANGED
@@ -1,9 +1,9 @@
1
- var l = Object.defineProperty;
2
- var d = (e, t, a) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
3
- var n = (e, t, a) => (d(e, typeof t != "symbol" ? t + "" : t, a), a);
4
- import c, { event as p } from "./wje-element.js";
5
- const b = ':host{display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wje-font-family-secondary);font-size:var(--wje-font-size-small);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);color:var(--wje-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wje-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}';
6
- class s extends c {
1
+ var d = Object.defineProperty;
2
+ var l = (e, t, a) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
3
+ var n = (e, t, a) => (l(e, typeof t != "symbol" ? t + "" : t, a), a);
4
+ import b, { event as c } from "./wje-element.js";
5
+ const p = ':host{display:block;position:relative}:host .native-tab{display:block;align-items:center;white-space:nowrap;font-family:var(--wje-tab-font-family);font-size:var(--wje-tab-font-size);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);border-radius:var(--wje-tab-border-radius);color:var(--wje-color)}:host .native-tab>svg{inline-size:1.5em;pointer-events:none}:host .native-tab:hover{background:var(--wje-tab-color-hover)}:host .native-tab:hover:after{display:block}:host .native-tab:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}';
6
+ class i extends b {
7
7
  /**
8
8
  * Creates an instance of Tab.
9
9
  *
@@ -26,7 +26,7 @@ class s extends c {
26
26
  * @returns {CSSStyleSheet}
27
27
  */
28
28
  static get cssStyleSheet() {
29
- return b;
29
+ return p;
30
30
  }
31
31
  /**
32
32
  * Sets up the attributes for the component.
@@ -42,18 +42,18 @@ class s extends c {
42
42
  * @param {Object} params - The parameters for drawing.
43
43
  * @returns {DocumentFragment}
44
44
  */
45
- draw(a, w, h) {
46
- let r = document.createDocumentFragment(), i = document.createElement("slot"), o = document.createElement("a");
47
- return o.setAttribute("href", "#" + this.panel), o.appendChild(i), r.appendChild(o), r;
45
+ draw(a, v, w) {
46
+ let r = document.createDocumentFragment(), s = document.createElement("slot"), o = document.createElement("a");
47
+ return o.setAttribute("href", "#" + this.panel), o.setAttribute("part", "native"), o.classList.add("native-tab"), o.appendChild(s), r.appendChild(o), r;
48
48
  }
49
49
  /**
50
50
  * Sets up the event listeners after the component is drawn.
51
51
  */
52
52
  afterDraw() {
53
- p.addListener(this, "click", "wje:tab-change");
53
+ c.addListener(this, "click", "wje:tab-change");
54
54
  }
55
55
  }
56
- s.define("wje-tab", s);
56
+ i.define("wje-tab", i);
57
57
  export {
58
- s as default
58
+ i as default
59
59
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "wj-elements",
3
3
  "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
4
- "version": "0.1.23",
4
+ "version": "0.1.24",
5
5
  "homepage": "https://github.com/lencys/wj-elements",
6
6
  "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
7
7
  "license": "MIT",