@odx/foundation 1.0.0-beta.144 → 1.0.0-beta.145
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/components.js +56 -56
- package/dist/main.js +2 -2
- package/dist/native.css +1 -1
- package/package.json +1 -1
package/dist/components.js
CHANGED
|
@@ -49,7 +49,7 @@ __decorateClass([
|
|
|
49
49
|
], _OdxAccordion.prototype, "size", 2);
|
|
50
50
|
let OdxAccordion = _OdxAccordion;
|
|
51
51
|
|
|
52
|
-
const styles$1g = ":host{display:block;margin-block:var(--odx-spacing-37);block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-
|
|
52
|
+
const styles$1g = ":host{display:block;margin-block:var(--odx-spacing-37);block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-spacing-37)}:host([size=\"sm\"]){margin-block:0}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}:host([disabled]){--_color-background: transparent;--_color-background-hover: transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([expanded]) [part~=indicator]{--rotate: 180deg}";
|
|
53
53
|
|
|
54
54
|
const AccordionItemSize = pick(Size, ["SM", "MD", "LG"]);
|
|
55
55
|
const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
|
|
@@ -94,7 +94,7 @@ __decorateClass([
|
|
|
94
94
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
95
95
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
96
96
|
|
|
97
|
-
const styles$1f = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-
|
|
97
|
+
const styles$1f = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-50))}";
|
|
98
98
|
|
|
99
99
|
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
100
100
|
constructor() {
|
|
@@ -122,7 +122,7 @@ __decorateClass([
|
|
|
122
122
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
123
123
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
124
124
|
|
|
125
|
-
const styles$1e = "@layer base{:host{--_padding-inline: var(--odx-
|
|
125
|
+
const styles$1e = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset)}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-spacing-12) + var(--odx-size-px));--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-spacing-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-spacing-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host(:is([variant=\"danger-ghost\"],[variant=\"ghost\"])){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);[part~=base]{outline-offset:0}}:host([variant=\"danger-ghost\"]){--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"danger-ghost\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
126
126
|
|
|
127
127
|
const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
128
128
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_GHOST", "GHOST"]);
|
|
@@ -277,7 +277,7 @@ __decorateClass([
|
|
|
277
277
|
], _OdxActionButton.prototype, "replaceContent", 2);
|
|
278
278
|
let OdxActionButton = _OdxActionButton;
|
|
279
279
|
|
|
280
|
-
const styles$1c = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-spacing-75)}[part~=base]{outline-offset:calc(-1 * var(--odx-focus-ring-offset))}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: var(--odx-spacing-37);font-size:var(--odx-typography-font-size-5)}}@layer state{:host([selected]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-
|
|
280
|
+
const styles$1c = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-spacing-75)}[part~=base]{outline-offset:calc(-1 * var(--odx-focus-ring-offset))}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: var(--odx-spacing-37);font-size:var(--odx-typography-font-size-5)}}@layer state{:host([selected]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-50));font-size:var(--odx-typography-font-size-5)}}:host([compact]){--_block-size: var(--odx-size-300);--_font-size: var(--odx-typography-font-size-2);display:flex;flex-grow:1;justify-content:center;::slotted([slot=\"badge\"]){inset-inline-end:calc(50% - var(--odx-spacing-50))}[part~=base]{flex-direction:column;justify-content:center}[part~=label]{flex:0 0 auto}}:host([size=\"lg\"][compact]){--_block-size: var(--odx-size-450);--_font-size: var(--odx-typography-font-size-3)}}";
|
|
281
281
|
|
|
282
282
|
const NavigationItemSize = pick(Size, ["MD", "LG"]);
|
|
283
283
|
const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
@@ -308,7 +308,7 @@ __decorateClass([
|
|
|
308
308
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
309
309
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
310
310
|
|
|
311
|
-
const styles$1b = ":host{display:flex;gap:var(--odx-
|
|
311
|
+
const styles$1b = ":host{display:flex;gap:var(--odx-spacing-37);padding:var(--odx-spacing-50);min-inline-size:180px}:host(:not([vertical])){align-items:center;margin-block-end:var(--odx-spacing-25);border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block-end:0;::slotted(odx-navigation-item){margin-block-end:calc(-1 * var(--odx-border-width-thick));border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-bottom-left-radius:0;border-bottom-right-radius:0}::slotted(odx-navigation-item[selected]){border-block-end-color:var(--odx-color-background-primary-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-37)}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-inline-start:0;::slotted(odx-navigation-item){margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-top-left-radius:0;border-bottom-left-radius:0}::slotted(odx-navigation-item[selected]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-75)}}";
|
|
312
312
|
|
|
313
313
|
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
|
|
314
314
|
constructor() {
|
|
@@ -428,7 +428,7 @@ __decorateClass([
|
|
|
428
428
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
429
429
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
430
430
|
|
|
431
|
-
const styles$19 = ":host{--max-columns: 12;--min-column-size: 250px;--gap: var(--odx-
|
|
431
|
+
const styles$19 = ":host{--max-columns: 12;--min-column-size: 250px;--gap: var(--odx-spacing-75);--_max-column-size: calc((100% - var(--gap) * var(--max-columns)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;gap:var(--gap);place-content:center}:host,:host([mode=\"fit\"]){grid-template-columns:repeat(auto-fit,var(--_column-size))}:host([mode=\"fill\"]){grid-template-columns:repeat(auto-fill,var(--_column-size))}";
|
|
432
432
|
|
|
433
433
|
const AutoGridMode = { FIT: "fit", FILL: "fill" };
|
|
434
434
|
const _OdxAutoGrid = class _OdxAutoGrid extends CustomElement {
|
|
@@ -450,7 +450,7 @@ __decorateClass([
|
|
|
450
450
|
], _OdxAutoGrid.prototype, "mode", 2);
|
|
451
451
|
let OdxAutoGrid = _OdxAutoGrid;
|
|
452
452
|
|
|
453
|
-
const styles$18 = ":host{--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--odx-color-background-neutral-rest);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-
|
|
453
|
+
const styles$18 = ":host{--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--odx-color-background-neutral-rest);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-spacing-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-spacing-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-rest);color:var(--odx-color-foreground-inverse)}:host([variant=\"primary-subtle\"]){background-color:var(--odx-color-background-primary-subtle);color:inherit}:host([variant=\"accent\"]){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=\"accent-subtle\"]){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-hover)}:host([size=\"sm\"]){--_size: var(--odx-size-150);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-spacing-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);font-size:var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);font-size:var(--odx-typography-font-size-7)}:host([size=\"xxl\"]){--_size: var(--odx-size-600);font-size:var(--odx-typography-font-size-8)}";
|
|
454
454
|
|
|
455
455
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
456
456
|
const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL", "XXL"]);
|
|
@@ -477,7 +477,7 @@ __decorateClass([
|
|
|
477
477
|
], _OdxAvatar.prototype, "variant", 2);
|
|
478
478
|
let OdxAvatar = _OdxAvatar;
|
|
479
479
|
|
|
480
|
-
const styles$17 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-
|
|
480
|
+
const styles$17 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-spacing-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([compact]){--_block-size: var(--odx-size-75);margin:var(--odx-spacing-12);padding:0;inline-size:var(--_block-size)}:host([pulse]){animation:pulse 1.25s infinite}";
|
|
481
481
|
|
|
482
482
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
483
483
|
const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
@@ -528,7 +528,7 @@ __decorateClass([
|
|
|
528
528
|
], _OdxLink.prototype, "subtle", 2);
|
|
529
529
|
let OdxLink = _OdxLink;
|
|
530
530
|
|
|
531
|
-
const styles$15 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-
|
|
531
|
+
const styles$15 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-spacing-37);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-subtle)!important}::slotted(*){margin:0}";
|
|
532
532
|
|
|
533
533
|
class OdxBreadcrumbsItem extends CustomElement {
|
|
534
534
|
static {
|
|
@@ -550,7 +550,7 @@ class OdxBreadcrumbsItem extends CustomElement {
|
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
552
|
|
|
553
|
-
const styles$14 = ":host{
|
|
553
|
+
const styles$14 = ":host{display:flex;flex-wrap:wrap;column-gap:var(--odx-spacing-37);place-items:center;cursor:default;min-block-size:var(--odx-size-150)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--odx-spacing-37)}";
|
|
554
554
|
|
|
555
555
|
const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
556
556
|
constructor() {
|
|
@@ -641,7 +641,7 @@ __decorateClass([
|
|
|
641
641
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
642
642
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
643
643
|
|
|
644
|
-
const styles$12 = ":host{--_card-padding: var(--odx-
|
|
644
|
+
const styles$12 = ":host{--_card-padding: var(--odx-spacing-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;outline:var(--odx-focus-ring-outline);border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-block-end:var(--odx-spacing-50)}.header{grid-area:header;max-inline-size:100%;overflow:hidden}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-spacing-50))}.image{position:relative;grid-area:image;margin:calc(-1 * (var(--_card-padding) + var(--odx-border-width-thin)))}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-spacing-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-spacing-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-spacing-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}";
|
|
645
645
|
|
|
646
646
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
647
647
|
constructor() {
|
|
@@ -678,7 +678,7 @@ __decorateClass([
|
|
|
678
678
|
], _OdxCard.prototype, "interactive", 2);
|
|
679
679
|
let OdxCard = _OdxCard;
|
|
680
680
|
|
|
681
|
-
const styles$11 = ":host{--_indicator-
|
|
681
|
+
const styles$11 = ":host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-spacing-37) var(--odx-spacing-50);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-spacing-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
|
|
682
682
|
|
|
683
683
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
684
684
|
constructor() {
|
|
@@ -722,7 +722,7 @@ __decorateClass([
|
|
|
722
722
|
], _OdxCheckbox.prototype, "indeterminate", 2);
|
|
723
723
|
let OdxCheckbox = _OdxCheckbox;
|
|
724
724
|
|
|
725
|
-
const styles$10 = ":host{display:flex;column-gap:var(--odx-
|
|
725
|
+
const styles$10 = ":host{display:flex;column-gap:var(--odx-spacing-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-75)}::slotted(odx-separator){--inner-spacing: var(--odx-spacing-37);--spacing: var(--odx-spacing-37)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):not(:last-of-type)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;padding:var(--odx-spacing-75);inline-size:auto}";
|
|
726
726
|
|
|
727
727
|
const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
728
728
|
const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
|
|
@@ -753,7 +753,7 @@ __decorateClass([
|
|
|
753
753
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
754
754
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
755
755
|
|
|
756
|
-
const styles$$ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-
|
|
756
|
+
const styles$$ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-spacing-50);display:inline-flex;gap:var(--odx-spacing-25);place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);overflow:hidden;color:var(--_color-foreground)}:host,[part~=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part~=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{margin-inline-end:calc(-1 * var(--_padding-inline));border-radius:inherit;[part~=base]{outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-danger-rest-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}";
|
|
757
757
|
|
|
758
758
|
const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
759
759
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -835,7 +835,7 @@ __decorateClass([
|
|
|
835
835
|
], _OdxChip.prototype, "variant", 2);
|
|
836
836
|
let OdxChip = _OdxChip;
|
|
837
837
|
|
|
838
|
-
const styles$_ = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-
|
|
838
|
+
const styles$_ = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-spacing-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-spacing-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(.5 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-.5 * var(--_popover-offset));--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
|
|
839
839
|
|
|
840
840
|
const popoverTargetAttribute = "odx-popovertarget";
|
|
841
841
|
class PopoverObserver {
|
|
@@ -1005,7 +1005,7 @@ __decorateClass([
|
|
|
1005
1005
|
property({ attribute: false })
|
|
1006
1006
|
], PopoverHost.prototype, "fpsLimit", 2);
|
|
1007
1007
|
|
|
1008
|
-
const styles$Z = ":host{--_popover-offset: var(--odx-
|
|
1008
|
+
const styles$Z = ":host{--_popover-offset: var(--odx-spacing-37)}";
|
|
1009
1009
|
|
|
1010
1010
|
const DropdownPlacement = { TOP: Placement.TOP, BOTTOM: Placement.BOTTOM };
|
|
1011
1011
|
const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
@@ -1322,7 +1322,7 @@ __decorateClass([
|
|
|
1322
1322
|
], _OdxAutocomplete.prototype, "minQueryLength", 2);
|
|
1323
1323
|
let OdxAutocomplete = _OdxAutocomplete;
|
|
1324
1324
|
|
|
1325
|
-
const styles$W = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-150)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-
|
|
1325
|
+
const styles$W = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-150)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-spacing-75))}";
|
|
1326
1326
|
|
|
1327
1327
|
class OdxContentBox extends CustomElement {
|
|
1328
1328
|
static {
|
|
@@ -1337,7 +1337,7 @@ class OdxContentBox extends CustomElement {
|
|
|
1337
1337
|
}
|
|
1338
1338
|
}
|
|
1339
1339
|
|
|
1340
|
-
const styles$V = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-
|
|
1340
|
+
const styles$V = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-spacing-75)}:host([size=\"sm\"]){--max-inline-size: 30ch;--icon-size: var(--odx-size-150);--_content-gap: var(--odx-spacing-12);gap:var(--odx-spacing-50);padding:var(--odx-spacing-50);.description{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}}:host([size=\"md\"]){.description{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--max-inline-size: 50ch;--icon-size: var(--odx-size-300);--_content-gap: var(--odx-spacing-37);gap:var(--odx-spacing-100);padding:var(--odx-spacing-150);.title{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}}:host([variant=\"neutral-subtle\"]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=\"danger\"]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
|
|
1341
1341
|
|
|
1342
1342
|
const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
|
|
1343
1343
|
const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
|
|
@@ -1374,7 +1374,7 @@ __decorateClass([
|
|
|
1374
1374
|
], _OdxEmptyState.prototype, "variant", 2);
|
|
1375
1375
|
let OdxEmptyState = _OdxEmptyState;
|
|
1376
1376
|
|
|
1377
|
-
const styles$U = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-
|
|
1377
|
+
const styles$U = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-spacing-25);padding-block:var(--odx-spacing-25)}::slotted([slot=\"control\"]){inline-size:100%;min-inline-size:inherit}";
|
|
1378
1378
|
|
|
1379
1379
|
const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
1380
1380
|
constructor() {
|
|
@@ -1590,7 +1590,7 @@ __decorateClass([
|
|
|
1590
1590
|
], _OdxRelativeTime.prototype, "syncInterval", 2);
|
|
1591
1591
|
let OdxRelativeTime = _OdxRelativeTime;
|
|
1592
1592
|
|
|
1593
|
-
const styles$T = ":host{--odx-gradient-overlay-size: 240px;display:contents}:host([active]){display:block;position:relative;overflow:hidden;.content{max-height:100%;mask-image:linear-gradient(to bottom,black calc(100% - var(--odx-gradient-overlay-size)),transparent)}.actions{display:flex;position:absolute;inset-block-end:0;inset-inline:0;align-items:flex-end;justify-content:center;padding:var(--odx-
|
|
1593
|
+
const styles$T = ":host{--odx-gradient-overlay-size: 240px;display:contents}:host([active]){display:block;position:relative;overflow:hidden;.content{max-height:100%;mask-image:linear-gradient(to bottom,black calc(100% - var(--odx-gradient-overlay-size)),transparent)}.actions{display:flex;position:absolute;inset-block-end:0;inset-inline:0;align-items:flex-end;justify-content:center;padding:var(--odx-spacing-75);block-size:min(max(calc(var(--odx-gradient-overlay-size) / 2),var(--odx-size-300)),100%)}}";
|
|
1594
1594
|
|
|
1595
1595
|
const GradientOverlaySize = pick(Size, ["SM", "MD"]);
|
|
1596
1596
|
const _OdxGradientOverlay = class _OdxGradientOverlay extends CustomElement {
|
|
@@ -1653,7 +1653,7 @@ __decorateClass([
|
|
|
1653
1653
|
], _OdxTitle.prototype, "level", 2);
|
|
1654
1654
|
let OdxTitle = _OdxTitle;
|
|
1655
1655
|
|
|
1656
|
-
const styles$R = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-
|
|
1656
|
+
const styles$R = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-spacing-75);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-spacing-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){margin-right:auto}::slotted(odx-separator){--size: var(--odx-size-150);--inner-spacing: 0px}::slotted(odx-search-bar){flex:1 1 auto}@media screen and (width <= 600px){odx-logo{display:none}}";
|
|
1657
1657
|
|
|
1658
1658
|
class OdxHeader extends CustomElement {
|
|
1659
1659
|
static {
|
|
@@ -1684,7 +1684,7 @@ class OdxHeader extends CustomElement {
|
|
|
1684
1684
|
};
|
|
1685
1685
|
}
|
|
1686
1686
|
|
|
1687
|
-
const styles$Q = ":host{display:flex;gap:var(--odx-
|
|
1687
|
+
const styles$Q = ":host{display:flex;gap:var(--odx-spacing-75);align-items:center;block-size:100%}::slotted(odx-separator){--size: var(--odx-size-150);--spacing: 0px}";
|
|
1688
1688
|
|
|
1689
1689
|
class OdxHeaderActions extends CustomElement {
|
|
1690
1690
|
static {
|
|
@@ -1696,7 +1696,7 @@ class OdxHeaderActions extends CustomElement {
|
|
|
1696
1696
|
}
|
|
1697
1697
|
}
|
|
1698
1698
|
|
|
1699
|
-
const styles$P = ":host{--icon-rotation: 0deg}.tooltip{text-align:center}[part~=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-
|
|
1699
|
+
const styles$P = ":host{--icon-rotation: 0deg}.tooltip{text-align:center}[part~=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-spacing-100);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3)}";
|
|
1700
1700
|
|
|
1701
1701
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
1702
1702
|
constructor() {
|
|
@@ -1865,7 +1865,7 @@ __decorateClass([
|
|
|
1865
1865
|
], _OdxImage.prototype, "width", 2);
|
|
1866
1866
|
let OdxImage = _OdxImage;
|
|
1867
1867
|
|
|
1868
|
-
const styles$N = ":host{display:flex;gap:var(--odx-
|
|
1868
|
+
const styles$N = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
|
|
1869
1869
|
|
|
1870
1870
|
const iconMap = {
|
|
1871
1871
|
neutral: "core::info",
|
|
@@ -1919,7 +1919,7 @@ __decorateClass([
|
|
|
1919
1919
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1920
1920
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1921
1921
|
|
|
1922
|
-
const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-
|
|
1922
|
+
const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-spacing-50);align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);outline-offset:calc(-1 * var(--odx-focus-ring-offset));border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-spacing-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--odx-color-background-disabled-rest: transparent}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-size-125)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part~=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
|
|
1923
1923
|
|
|
1924
1924
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1925
1925
|
constructor() {
|
|
@@ -2059,7 +2059,7 @@ __decorateClass([
|
|
|
2059
2059
|
], _OdxInput.prototype, "value", 2);
|
|
2060
2060
|
let OdxInput = _OdxInput;
|
|
2061
2061
|
|
|
2062
|
-
const styles$L = ":host{padding:var(--odx-
|
|
2062
|
+
const styles$L = ":host{padding:var(--odx-spacing-50)}";
|
|
2063
2063
|
|
|
2064
2064
|
const KpiSize = pick(Size, ["SM", "MD", "LG"]);
|
|
2065
2065
|
const KpiVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
|
|
@@ -2111,7 +2111,7 @@ __decorateClass([
|
|
|
2111
2111
|
], _OdxKpi.prototype, "vertical", 2);
|
|
2112
2112
|
let OdxKpi = _OdxKpi;
|
|
2113
2113
|
|
|
2114
|
-
const styles$K = ":host{display:flex;gap:var(--odx-
|
|
2114
|
+
const styles$K = ":host{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-inline:var(--odx-spacing-50);user-select:none}.content{flex:1 1 auto}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
|
|
2115
2115
|
|
|
2116
2116
|
class OdxLabel extends CustomElement {
|
|
2117
2117
|
static {
|
|
@@ -2153,7 +2153,7 @@ __decorateClass([
|
|
|
2153
2153
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2154
2154
|
let OdxLineClamp = _OdxLineClamp;
|
|
2155
2155
|
|
|
2156
|
-
const styles$I = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-
|
|
2156
|
+
const styles$I = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));max-block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@layer state{:host(:not([interactive]):hover):after{opacity:0}:host([interactive]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
|
|
2157
2157
|
|
|
2158
2158
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
2159
2159
|
constructor() {
|
|
@@ -2349,7 +2349,7 @@ __decorateClass([
|
|
|
2349
2349
|
], _OdxLoadingOverlay.prototype, "loading", 2);
|
|
2350
2350
|
let OdxLoadingOverlay = _OdxLoadingOverlay;
|
|
2351
2351
|
|
|
2352
|
-
const styles$F = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--
|
|
2352
|
+
const styles$F = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_spacing: var(--odx-spacing-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-background-transparent-pressed);display:flex;place-content:center;place-items:center;block-size:1em;color:inherit;font-size:var(--_size)}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{animation:loading-spinner-animation 1.5s ease-in-out infinite;color:inherit;stroke:currentcolor;stroke-dasharray:90,180;stroke-dashoffset:-5;stroke-linecap:round}:not(svg){transform-origin:0 0}}:host([variant=\"dots\"]){gap:calc(var(--_spacing) / 2);padding:var(--_spacing);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{flex:0 0 calc(var(--_size) / 3);z-index:3;border-radius:var(--odx-border-radius-circle);background-color:currentcolor;block-size:calc(var(--_size) / 3);animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-background-transparent-pressed)}50%{transform:scale(1);background-color:currentcolor}}";
|
|
2353
2353
|
|
|
2354
2354
|
const _OdxLoadingSpinner = class _OdxLoadingSpinner extends CustomElement {
|
|
2355
2355
|
static {
|
|
@@ -2372,7 +2372,7 @@ __decorateClass([
|
|
|
2372
2372
|
], _OdxLoadingSpinner.prototype, "variant", 2);
|
|
2373
2373
|
let OdxLoadingSpinner = _OdxLoadingSpinner;
|
|
2374
2374
|
|
|
2375
|
-
const styles$E = ":host{display:inline-block;background-color:currentcolor;aspect-ratio:92 / 36;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host,:host([size=\"sm\"]){
|
|
2375
|
+
const styles$E = ":host{display:inline-block;margin-block:var(--odx-spacing-37);background-color:currentcolor;aspect-ratio:92 / 36;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host,:host([size=\"sm\"]){block-size:var(--odx-size-150)}:host(:not([compact])),:host([size=\"sm\"]:not([compact])){margin-block-end:var(--odx-spacing-12)}:host([size=\"xs\"]){margin-block:var(--odx-spacing-25);block-size:calc(var(--odx-size-150) - 2 * var(--odx-spacing-25))}:host([size=\"xs\"]:not([compact])){margin-block-end:var(--odx-size-px)}:host([size=\"md\"]){block-size:var(--odx-size-225)}:host([size=\"md\"]:not([compact])){margin-block-end:var(--odx-spacing-12)}:host([size=\"lg\"]){block-size:var(--odx-size-300)}:host([size=\"xl\"]){block-size:var(--odx-size-400)}";
|
|
2376
2376
|
|
|
2377
2377
|
const LogoSize = pick(Size, ["XS", "SM", "MD", "LG", "XL"]);
|
|
2378
2378
|
const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
@@ -2400,7 +2400,7 @@ __decorateClass([
|
|
|
2400
2400
|
], _OdxLogo.prototype, "compact", 2);
|
|
2401
2401
|
let OdxLogo = _OdxLogo;
|
|
2402
2402
|
|
|
2403
|
-
const styles$D = ":host{--odx-color-background-disabled-rest: var(--odx-color-background-disabled-brand);--odx-color-foreground-disabled-rest: var(--odx-color-foreground-disabled-brand);--odx-color-foreground-accent-hover: var(--odx-color-foreground-inverse-static);transition:var(--odx-motion-duration-slow) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;background-color:transparent;padding:0;block-size:100%;inline-size:100%}:host::backdrop{display:none}.base{display:grid;grid-template-rows:auto auto 1fr auto;row-gap:var(--odx-
|
|
2403
|
+
const styles$D = ":host{--odx-color-background-disabled-rest: var(--odx-color-background-disabled-brand);--odx-color-foreground-disabled-rest: var(--odx-color-foreground-disabled-brand);--odx-color-foreground-accent-hover: var(--odx-color-foreground-inverse-static);transition:var(--odx-motion-duration-slow) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;background-color:transparent;padding:0;block-size:100%;inline-size:100%}:host::backdrop{display:none}.base{display:grid;grid-template-rows:auto auto 1fr auto;row-gap:var(--odx-spacing-75);transform:translate(-100%);transition:var(--odx-transition-slow);border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));overflow:hidden;color:var(--odx-color-foreground-inverse-static)}.header,.subheader,.link-navigation{padding-inline:var(--odx-spacing-150)}.header{transform:translate(100%);transition:var(--odx-transition-slow);opacity:0;block-size:var(--odx-size-300)}odx-logo{transform:translate(var(--odx-size-400));transition:var(--odx-transition-slow)}.navigation{padding:var(--odx-spacing-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-spacing-100);margin-block-end:var(--odx-spacing-150)}.backdrop{position:fixed;inset:0;transition:all var(--odx-motion-duration-default) linear;opacity:0;z-index:-1;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){transform:translate(0);visibility:visible;.base{transform:translate(0);@starting-style{transform:translate(-100%)}}.header{transform:translate(0);opacity:1;@starting-style{transform:translate(100%)}}odx-logo{transform:translate(0);@starting-style{transform:translate(var(--odx-size-400))}}}:host(:popover-open) .backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
|
|
2404
2404
|
|
|
2405
2405
|
const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
2406
2406
|
constructor() {
|
|
@@ -2518,7 +2518,7 @@ class OdxMainMenuTitle extends CustomElement {
|
|
|
2518
2518
|
}
|
|
2519
2519
|
}
|
|
2520
2520
|
|
|
2521
|
-
const styles$C = ":host{--min-inline-size: 160px;--max-inline-size: 280px
|
|
2521
|
+
const styles$C = ":host{--min-inline-size: 160px;--max-inline-size: 280px}.base{display:flex;flex-direction:column;gap:var(--odx-spacing-37);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}::slotted(odx-separator){--spacing: 0px}::slotted(odx-label){font-weight:var(--odx-typography-font-weight-medium)}";
|
|
2522
2522
|
|
|
2523
2523
|
const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
|
|
2524
2524
|
const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
|
|
@@ -2625,7 +2625,7 @@ __decorateClass([
|
|
|
2625
2625
|
], _OdxMenuItem.prototype, "icon", 2);
|
|
2626
2626
|
let OdxMenuItem = _OdxMenuItem;
|
|
2627
2627
|
|
|
2628
|
-
const styles$B = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-
|
|
2628
|
+
const styles$B = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-spacing-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-spacing-75) 0;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-spacing-100))}}}";
|
|
2629
2629
|
|
|
2630
2630
|
const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
2631
2631
|
(async () => {
|
|
@@ -2814,7 +2814,7 @@ __decorateClass([
|
|
|
2814
2814
|
], _OdxNavigationItemGroup.prototype, "size", 2);
|
|
2815
2815
|
let OdxNavigationItemGroup = _OdxNavigationItemGroup;
|
|
2816
2816
|
|
|
2817
|
-
const styles$z = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-
|
|
2817
|
+
const styles$z = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-spacing-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-spacing-37) var(--odx-spacing-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{flex:1 1 auto}:host(:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]:not([readonly])),:host(:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([readonly]){cursor:default}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]:not([readonly])),:host([selected]:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
|
|
2818
2818
|
|
|
2819
2819
|
class OdxOption extends OptionControl {
|
|
2820
2820
|
static {
|
|
@@ -2835,7 +2835,7 @@ class OdxOption extends OptionControl {
|
|
|
2835
2835
|
}
|
|
2836
2836
|
}
|
|
2837
2837
|
|
|
2838
|
-
const styles$y = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;grid-template
|
|
2838
|
+
const styles$y = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-spacing-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
|
|
2839
2839
|
|
|
2840
2840
|
const PageAlignment = { CENTER: "center" };
|
|
2841
2841
|
const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
|
|
@@ -2889,7 +2889,7 @@ __decorateClass([
|
|
|
2889
2889
|
], _OdxPage.prototype, "layout", 2);
|
|
2890
2890
|
let OdxPage = _OdxPage;
|
|
2891
2891
|
|
|
2892
|
-
const styles$x = ":host{
|
|
2892
|
+
const styles$x = ":host{display:grid;grid-template:minmax(0,auto) minmax(0,1fr) minmax(0,auto) / minmax(0,auto) minmax(0,100%) minmax(0,auto);grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";justify-content:start;padding-inline:var(--odx-spacing-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar,.content,.footer{padding-block:var(--odx-spacing-75)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-base)}.navigation,.sidebar{inset-block-end:0;max-block-size:calc(100dvh - var(--scroll-margin-block-start));overflow:auto}.content{display:flex;flex-direction:column;grid-area:content}.header{grid-area:header;padding-block-end:0}.footer{grid-area:footer;padding-block-start:0}.navigation{display:flex;grid-area:navigation;margin-inline-end:var(--odx-spacing-75);padding-inline-end:var(--odx-spacing-75)}.sidebar{display:flex;grid-area:sidebar;margin-inline-start:var(--odx-spacing-75);padding-inline-start:var(--odx-spacing-75)}";
|
|
2893
2893
|
|
|
2894
2894
|
class OdxPageLayout extends CustomElement {
|
|
2895
2895
|
static {
|
|
@@ -3000,7 +3000,7 @@ __decorateClass([
|
|
|
3000
3000
|
], _OdxPagination.prototype, "totalItems", 2);
|
|
3001
3001
|
let OdxPagination = _OdxPagination;
|
|
3002
3002
|
|
|
3003
|
-
const styles$v = ":host{display:flex;border-radius:var(--odx-border-radius-controls);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background);inline-size:100%}[part~=base]{display:flex;position:relative;inset-block-start:0!important;inset-inline-start:0!important;flex-direction:column;z-index:2;border-radius:inherit;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-
|
|
3003
|
+
const styles$v = ":host{display:flex;border-radius:var(--odx-border-radius-controls);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background);inline-size:100%}[part~=base]{display:flex;position:relative;inset-block-start:0!important;inset-inline-start:0!important;flex-direction:column;z-index:2;border-radius:inherit;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-spacing-150) + var(--_popover-outer-padding))}[part~=content]{display:flex;flex-direction:column;padding:var(--odx-spacing-75);color:var(--_popover-color-foreground)}[part~=arrow]{position:absolute;z-index:3;background-color:inherit;block-size:var(--_popover-arrow-size);inline-size:var(--_popover-arrow-size)}";
|
|
3004
3004
|
|
|
3005
3005
|
const _OdxPopover = class _OdxPopover extends CustomElement {
|
|
3006
3006
|
constructor() {
|
|
@@ -3071,7 +3071,7 @@ __decorateClass([
|
|
|
3071
3071
|
property({ reflect: true, useDefault: true })
|
|
3072
3072
|
], BaseProgress.prototype, "variant", 2);
|
|
3073
3073
|
|
|
3074
|
-
const styles$u = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-control-selected);--_track-color: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-
|
|
3074
|
+
const styles$u = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-control-selected);--_track-color: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-spacing-50);align-items:center;padding:var(--odx-spacing-12) var(--odx-spacing-37);inline-size:100%;line-height:1rem;color:var(--_color-foreground)}.base,.indicator{inline-size:100%}.base{position:relative;border-radius:var(--odx-border-radius-md);background:var(--_track-color);block-size:var(--_track-size);inline-size:100%;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0% 50%;transition:var(--odx-transition-reduced);transition-property:background-color,transform;background-color:var(--_indicator-color);block-size:100%}[part~=label]{flex:1;margin-block:calc(-1 * var(--odx-spacing-25));padding-block:var(--odx-spacing-25);text-align:start}[part~=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:var(--odx-spacing-25);[part~=label]{flex:1 1 auto}[part~=value]{order:99}}:host([variant=\"accent\"]){--_indicator-color: var(--odx-color-background-accent-rest)}:host([variant=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest)}:host([variant=\"danger\"]){--_indicator-color: var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
|
|
3075
3075
|
|
|
3076
3076
|
const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
|
|
3077
3077
|
constructor() {
|
|
@@ -3105,7 +3105,7 @@ __decorateClass([
|
|
|
3105
3105
|
], _OdxProgressBar.prototype, "condensed", 2);
|
|
3106
3106
|
let OdxProgressBar = _OdxProgressBar;
|
|
3107
3107
|
|
|
3108
|
-
const styles$t = ":host{--_indicator-color: var(--odx-color-background-control-selected);--_track-color: var(--odx-color-background-control-rest);display:flex;position:relative;flex-direction:column;gap:var(--odx-
|
|
3108
|
+
const styles$t = ":host{--_indicator-color: var(--odx-color-background-control-selected);--_track-color: var(--odx-color-background-control-rest);display:flex;position:relative;flex-direction:column;gap:var(--odx-spacing-37);align-items:center;justify-content:center;color:currentcolor}.base{display:grid;grid-template-columns:1fr;place-content:center;place-items:center;block-size:min(var(--_size, 100%),var(--odx-size-800));inline-size:min(var(--_size, 100%),var(--odx-size-800));overflow:hidden}.base>*,::slotted(*){grid-row-start:1;grid-column-start:1}.track,.indicator{fill:transparent}.indicator{stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}.track{stroke:var(--_track-color)}:host([size=\"sm\"]){--_size: var(--odx-size-400)}:host([size=\"md\"]){--_size: var(--odx-size-500)}:host([size=\"lg\"]){--_size: var(--odx-size-600)}:host([indeterminate]){.base svg{animation:1.75s linear infinite odx-progress-ring-inner-animation}.indicator{animation:1.75s ease infinite odx-progress-ring-indicator-animation both}}:host([variant=\"accent\"]){--_indicator-color: var(--odx-color-background-accent-rest)}:host([variant=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest)}:host([variant=\"danger\"]){--_indicator-color: var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}@keyframes odx-progress-ring-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes odx-progress-ring-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}";
|
|
3109
3109
|
|
|
3110
3110
|
const ProgressRingSize = pick(Size, ["SM", "MD", "LG"]);
|
|
3111
3111
|
const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
@@ -3191,7 +3191,7 @@ __decorateClass([
|
|
|
3191
3191
|
], _OdxProgressRing.prototype, "stroke", 2);
|
|
3192
3192
|
let OdxProgressRing = _OdxProgressRing;
|
|
3193
3193
|
|
|
3194
|
-
const styles$s = "@layer base{:host{--_indicator-
|
|
3194
|
+
const styles$s = "@layer base{:host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-spacing-37) var(--odx-spacing-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-spacing-75)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-stroke: var(--odx-color-background-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3195
3195
|
|
|
3196
3196
|
class OdxRadioButton extends CheckboxFormControl {
|
|
3197
3197
|
static {
|
|
@@ -3219,7 +3219,7 @@ class OdxRadioButton extends CheckboxFormControl {
|
|
|
3219
3219
|
}
|
|
3220
3220
|
}
|
|
3221
3221
|
|
|
3222
|
-
const styles$r = ":host{display:flex}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-
|
|
3222
|
+
const styles$r = ":host{display:flex}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-spacing-75);inline-size:auto}}";
|
|
3223
3223
|
|
|
3224
3224
|
const RadioGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
3225
3225
|
const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
|
|
@@ -3236,7 +3236,7 @@ __decorateClass([
|
|
|
3236
3236
|
], _OdxRadioGroup.prototype, "layout", 2);
|
|
3237
3237
|
let OdxRadioGroup = _OdxRadioGroup;
|
|
3238
3238
|
|
|
3239
|
-
const styles$q = ":host{--min-inline-size: 18ch;--max-inline-size: 26ch;display:flex;flex-direction:column;gap:var(--odx-
|
|
3239
|
+
const styles$q = ":host{--min-inline-size: 18ch;--max-inline-size: 26ch;display:flex;flex-direction:column;gap:var(--odx-spacing-75);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size;block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}.toggle-control{margin-block-start:auto}.toggle-indicator{transition:var(--odx-transition-default)}::slotted(odx-separator){--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-spacing-37)}:host([collapsed]){--min-inline-size: var(--odx-size-300);--max-inline-size: var(--min-inline-size);.toggle-indicator{--rotate: 180deg}}:host([size=\"md\"]){gap:var(--odx-spacing-37);::slotted(odx-spacer){--size: var(--odx-size-225);--gap-offset: calc(var(--odx-spacing-37) / 2)}}:host([collapsed][size=\"md\"]){--min-inline-size: var(--odx-size-225)}";
|
|
3240
3240
|
|
|
3241
3241
|
setTranslation("en", {
|
|
3242
3242
|
odx: { railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } } }
|
|
@@ -3396,7 +3396,7 @@ __decorateClass([
|
|
|
3396
3396
|
], _OdxSearchBar.prototype, "readonly", 2);
|
|
3397
3397
|
let OdxSearchBar = _OdxSearchBar;
|
|
3398
3398
|
|
|
3399
|
-
const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-
|
|
3399
|
+
const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3400
3400
|
|
|
3401
3401
|
const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
3402
3402
|
constructor() {
|
|
@@ -3513,7 +3513,7 @@ __decorateClass([
|
|
|
3513
3513
|
], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
|
|
3514
3514
|
let OdxSelect = _OdxSelect;
|
|
3515
3515
|
|
|
3516
|
-
const styles$n = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-
|
|
3516
|
+
const styles$n = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-75);--spacing: var(--odx-spacing-75);--inner-spacing: var(--odx-spacing-12);display:flex;align-items:center;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--spacing) - .5 * var(--odx-size-px));margin-inline:var(--inner-spacing);text-align:center}:before,:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--odx-size-px);content:\"\";pointer-events:none}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-spacing-37);min-inline-size:calc(var(--size) / 2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){flex-direction:column;margin-block:var(--inner-spacing);margin-inline:calc(var(--spacing) - .5 * var(--odx-size-px));:after,:before{block-size:calc(100% - 2 * var(--inner-spacing));min-block-size:calc(var(--size) / 2);inline-size:var(--odx-size-px)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([align=\"start\"]) :before{flex:0 0 var(--odx-spacing-37)}:host([align=\"end\"]) :after{flex:0 0 var(--odx-spacing-37)}";
|
|
3517
3517
|
|
|
3518
3518
|
const SeparatorAlign = { START: "start", CENTER: "center", END: "end" };
|
|
3519
3519
|
const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
@@ -3531,7 +3531,7 @@ const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
|
3531
3531
|
this.role = "separator";
|
|
3532
3532
|
}
|
|
3533
3533
|
render() {
|
|
3534
|
-
return html`<
|
|
3534
|
+
return html`<slot></slot>`;
|
|
3535
3535
|
}
|
|
3536
3536
|
};
|
|
3537
3537
|
__decorateClass([
|
|
@@ -3585,9 +3585,9 @@ const sliderContext = {
|
|
|
3585
3585
|
defaultValue: { step: 1, min: 0, max: 100, minRange: 0, maxRange: 0, range: 100, labelVisibility: SliderLabelVisibility.AUTO, unit: "" }
|
|
3586
3586
|
};
|
|
3587
3587
|
|
|
3588
|
-
const styles$l = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-background-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;cursor:pointer;padding-block:var(--odx-
|
|
3588
|
+
const styles$l = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-background-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;cursor:pointer;padding-block:var(--odx-spacing-75) var(--odx-spacing-50);padding-inline:var(--odx-spacing-75);min-block-size:var(--odx-size-300);min-inline-size:120px}[part~=container]{position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);block-size:var(--_track-size)}:host(:active){cursor:grabbing}";
|
|
3589
3589
|
|
|
3590
|
-
const styles$k = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}[part~=track],[part~=thumb],[part~=label]{position:absolute}[part~=track],[part~=label]{pointer-events:none}[part~=thumb],[part~=label]{inset-inline-start:var(--_position)}[part~=track]{inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background);border-radius:var(--_track-size);background-color:var(--_track-color)}[part~=thumb]{display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}[part~=label]{inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-
|
|
3590
|
+
const styles$k = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}[part~=track],[part~=thumb],[part~=label]{position:absolute}[part~=track],[part~=label]{pointer-events:none}[part~=thumb],[part~=label]{inset-inline-start:var(--_position)}[part~=track]{inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background);border-radius:var(--_track-size);background-color:var(--_track-color)}[part~=thumb]{display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}[part~=label]{inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-spacing-75))) scale(0);opacity:0;z-index:var(--_layer-foreground);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-primary-rest);padding-inline:var(--odx-spacing-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse)}[part~=with-motion]{transition:var(--odx-transition-reduced)}:host([odx-drag-active]) [part~=with-motion]{transition-property:outline}[part~=thumb]:active,:host(:active) [part~=thumb]{outline-width:var(--odx-size-50)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-background-accent-rest);[part~=label]{transform:translate(-50%) translateY(calc(-1 * var(--odx-spacing-75))) scale(1);opacity:1}}:host([disabled]){pointer-events:none;[part~=thumb]{--_thumb-color: var(--odx-color-background-disabled);z-index:var(--_layer-interactive-disabled)}}";
|
|
3591
3591
|
|
|
3592
3592
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl) {
|
|
3593
3593
|
constructor() {
|
|
@@ -3897,7 +3897,7 @@ __decorateClass([
|
|
|
3897
3897
|
], _OdxSpacer.prototype, "fill", 2);
|
|
3898
3898
|
let OdxSpacer = _OdxSpacer;
|
|
3899
3899
|
|
|
3900
|
-
const styles$h = ":host{display:inline-flex;gap:var(--odx-
|
|
3900
|
+
const styles$h = ":host{display:inline-flex;gap:var(--odx-spacing-37);align-items:center;outline:var(--odx-focus-ring-outline);border-radius:var(--odx-border-radius-controls);block-size:var(--odx-size-225);min-inline-size:20ch}::slotted(odx-option){flex:1 1 auto;justify-content:center;text-align:center}::slotted(odx-option:not([hidden])){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-option[hidden]){display:none}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host(:not([interactive])) ::slotted(odx-option){pointer-events:none}:host([disabled]:not([interactive])) ::slotted(odx-option){background-color:transparent}";
|
|
3901
3901
|
|
|
3902
3902
|
const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
3903
3903
|
constructor() {
|
|
@@ -3996,7 +3996,7 @@ __decorateClass([
|
|
|
3996
3996
|
], _OdxSpinbox.prototype, "value", 2);
|
|
3997
3997
|
let OdxSpinbox = _OdxSpinbox;
|
|
3998
3998
|
|
|
3999
|
-
const styles$g = ":host{display:inline-flex;gap:var(--odx-
|
|
3999
|
+
const styles$g = ":host{display:inline-flex;gap:var(--odx-spacing-75);align-items:center;transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-spacing-75);block-size:var(--odx-size-150);font-size:var(--odx-typography-font-size-2);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-badge{margin:0 calc(-1 * var(--odx-spacing-37))}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}";
|
|
4000
4000
|
|
|
4001
4001
|
const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
4002
4002
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
@@ -4056,7 +4056,7 @@ class OdxSwitch extends CheckboxFormControl {
|
|
|
4056
4056
|
|
|
4057
4057
|
const styles$e = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-background-level-1)}";
|
|
4058
4058
|
|
|
4059
|
-
const styles$d = ":host{display:flex;flex:0 0 auto;align-items:center;justify-content:start;padding:var(--odx-spacing-37) var(--odx-
|
|
4059
|
+
const styles$d = ":host{display:flex;flex:0 0 auto;align-items:center;justify-content:start;padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-300)}.checkbox{margin:0}";
|
|
4060
4060
|
|
|
4061
4061
|
const _OdxTableCheckboxCell = class _OdxTableCheckboxCell extends CanBeDisabled(CustomElement) {
|
|
4062
4062
|
constructor() {
|
|
@@ -4127,7 +4127,7 @@ __decorateClass([
|
|
|
4127
4127
|
], _OdxTableHeader.prototype, "selected", 2);
|
|
4128
4128
|
let OdxTableHeader = _OdxTableHeader;
|
|
4129
4129
|
|
|
4130
|
-
const styles$b = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);background-color:var(--_color-fill);cursor:pointer}:host(:not(:last-of-type)){border-color:var(--odx-color-stroke-neutral-subtle)}:host([selectable]:hover){--_color-fill: var(--odx-color-background-transparent-hover)}:host([selected]){--_color-fill: var(--odx-color-background-transparent-selected)}odx-checkbox{margin-inline-start:var(--odx-
|
|
4130
|
+
const styles$b = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);background-color:var(--_color-fill);cursor:pointer}:host(:not(:last-of-type)){border-color:var(--odx-color-stroke-neutral-subtle)}:host([selectable]:hover){--_color-fill: var(--odx-color-background-transparent-hover)}:host([selected]){--_color-fill: var(--odx-color-background-transparent-selected)}odx-checkbox{margin-inline-start:var(--odx-spacing-75);pointer-events:none}";
|
|
4131
4131
|
|
|
4132
4132
|
const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
|
|
4133
4133
|
constructor() {
|
|
@@ -4294,7 +4294,7 @@ class OdxTableBody extends CustomElement {
|
|
|
4294
4294
|
}
|
|
4295
4295
|
}
|
|
4296
4296
|
|
|
4297
|
-
const styles$9 = ":host{display:flex;flex:1 1 0%;align-items:center;justify-content:start;padding:var(--odx-spacing-37) var(--odx-
|
|
4297
|
+
const styles$9 = ":host{display:flex;flex:1 1 0%;align-items:center;justify-content:start;padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-300)}";
|
|
4298
4298
|
|
|
4299
4299
|
class OdxTableCell extends CustomElement {
|
|
4300
4300
|
static {
|
|
@@ -4306,7 +4306,7 @@ class OdxTableCell extends CustomElement {
|
|
|
4306
4306
|
}
|
|
4307
4307
|
}
|
|
4308
4308
|
|
|
4309
|
-
const styles$8 = ":host{display:flex;flex:1 1 0%;align-items:center;justify-content:start;border-bottom-color:transparent;cursor:default;padding:var(--odx-spacing-37) var(--odx-
|
|
4309
|
+
const styles$8 = ":host{display:flex;flex:1 1 0%;align-items:center;justify-content:start;border-bottom-color:transparent;cursor:default;padding:var(--odx-spacing-37) var(--odx-spacing-75);vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);user-select:none}";
|
|
4310
4310
|
|
|
4311
4311
|
const _OdxTableHeaderCell = class _OdxTableHeaderCell extends CustomElement {
|
|
4312
4312
|
constructor() {
|
|
@@ -4390,7 +4390,7 @@ __decorateClass([
|
|
|
4390
4390
|
], _OdxToast.prototype, "variant", 2);
|
|
4391
4391
|
let OdxToast = _OdxToast;
|
|
4392
4392
|
|
|
4393
|
-
const styles$5 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-
|
|
4393
|
+
const styles$5 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default) allow-discrete;transition-property:color,background-color,border-color,outline-color,z-index;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);min-inline-size:var(--_size);overflow:hidden;white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-icon,::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-spacing-37) - var(--odx-border-width-thin));font-size:var(--_icon-size)}[part~=label]{display:inline-block}}@layer state{:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([checked][variant=\"ghost\"]),:host([readonly][variant=\"ghost\"]){--_color-stroke: transparent;outline-offset:0}:host([checked][disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background: var(--odx-color-background-control-selected);--_color-background-hover: var(--odx-color-background-control-selected-hover);--_color-foreground: var(--odx-color-foreground-inverse);--_color-stroke: var(--_color-background)}:host([checked][required]){cursor:default}:host([checked][variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:hover:not(:is([readonly],[disabled]))){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}}@layer variant{:host([variant=\"ghost\"]){--_color-background: transparent;--_color-stroke: transparent;--_color-stroke-hover: transparent}:host([size=\"sm\"]){--_size: var(--odx-size-200);--_icon-size: var(--odx-size-125)}}";
|
|
4394
4394
|
|
|
4395
4395
|
const ToggleButtonSize = pick(Size, ["SM", "MD"]);
|
|
4396
4396
|
const ToggleButtonVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
|
|
@@ -4545,7 +4545,7 @@ __decorateClass([
|
|
|
4545
4545
|
], _OdxToggleContent.prototype, "hidden", 2);
|
|
4546
4546
|
let OdxToggleContent = _OdxToggleContent;
|
|
4547
4547
|
|
|
4548
|
-
const styles$2 = ":host{
|
|
4548
|
+
const styles$2 = ":host{display:flex;gap:var(--odx-spacing-37);align-items:center;transition:var(--odx-transition-default);transition-property:color,background-color,box-shadow;border-radius:var(--odx-border-radius-md);padding:var(--odx-spacing-37);overflow-x:auto;font-size:var(--odx-typography-font-size-3)}:host([float]){box-shadow:var(--odx-shadow-level-1);background-color:var(--odx-color-background-level-1)}::slotted(:is(odx-title,odx-label,odx-text,odx-icon)){margin-inline:var(--odx-spacing-37)}::slotted(odx-separator){--size: var(--odx-size-150);--spacing: var(--odx-spacing-37);--inner-spacing: 0px}:host([size=\"sm\"]){padding:var(--odx-spacing-12);font-size:var(--odx-typography-font-size-2);::slotted(odx-separator){--size: var(--odx-size-125)}}";
|
|
4549
4549
|
|
|
4550
4550
|
const ToolbarSize = pick(Size, ["SM", "MD"]);
|
|
4551
4551
|
const ALLOWED_BUTTON_VARIANTS = [ButtonVariant.GHOST, ButtonVariant.PRIMARY, ButtonVariant.DANGER, ButtonVariant.DANGER_GHOST];
|
|
@@ -4581,7 +4581,7 @@ __decorateClass([
|
|
|
4581
4581
|
], _OdxToolbar.prototype, "size", 2);
|
|
4582
4582
|
let OdxToolbar = _OdxToolbar;
|
|
4583
4583
|
|
|
4584
|
-
const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-
|
|
4584
|
+
const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-spacing-37);padding-inline:var(--odx-spacing-75)}}:host(:not([interactive])){pointer-events:none;user-select:none}:host,:host([size=\"md\"]){--max-inline-size: 240px}:host([size=\"sm\"]){--max-inline-size: 180px;odx-popover::part(content){padding-inline:var(--odx-spacing-50)}}:host([size=\"lg\"]){--max-inline-size: 384px}:host([variant=\"danger\"]){--_popover-color-background: var(--odx-color-background-danger-rest)}";
|
|
4585
4585
|
|
|
4586
4586
|
const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
|
|
4587
4587
|
const TooltipSize = pick(Size, ["SM", "MD", "LG"]);
|
package/dist/main.js
CHANGED
|
@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
|
|
|
6
6
|
|
|
7
7
|
const name = "@odx/foundation";
|
|
8
8
|
const displayName = "ODX Design System Foundation";
|
|
9
|
-
const version = "1.0.0-beta.
|
|
9
|
+
const version = "1.0.0-beta.145";
|
|
10
10
|
const pkg = {
|
|
11
11
|
name,
|
|
12
12
|
displayName,
|
|
@@ -946,7 +946,7 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
946
946
|
return nothing;
|
|
947
947
|
}
|
|
948
948
|
|
|
949
|
-
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-
|
|
949
|
+
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-spacing-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-spacing-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));font-size:var(--odx-typography-font-size-2)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}}@layer state{:host([badge-align=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-spacing-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
950
950
|
|
|
951
951
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
952
952
|
constructor() {
|
package/dist/native.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{table{--cell-size: var(--odx-size-300);border:0;min-width:100%;table-layout:auto;border-spacing:0;white-space:normal;tr{transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--odx-color-background-transparent)}tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}th,td{padding:var(--odx-spacing-37) var(--odx-
|
|
1
|
+
@layer base{table{--cell-size: var(--odx-size-300);border:0;min-width:100%;table-layout:auto;border-spacing:0;white-space:normal;tr{transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--odx-color-background-transparent)}tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}th,td{padding:var(--odx-spacing-37) var(--odx-spacing-75);text-align:start;font-size:inherit}td{block-size:var(--cell-size);vertical-align:middle}th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding-block-end:calc(var(--odx-spacing-37) - var(--odx-border-width-thin))}th{border-bottom-color:transparent;cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);user-select:none}th :is(odx-input,odx-select){margin-inline:calc(-1 * var(--odx-spacing-50))}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.145",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|