@odx/foundation 1.0.0-beta.143 → 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 +60 -60
- 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() {
|
|
@@ -363,9 +363,6 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
363
363
|
}
|
|
364
364
|
updated(props) {
|
|
365
365
|
if (props.has("root") || props.has("rootMargin") || props.has("threshold")) {
|
|
366
|
-
const options = { root: this.root, rootMargin: this.rootMargin, threshold: this.threshold };
|
|
367
|
-
this.#intersectionObserver?.disconnect();
|
|
368
|
-
this.#intersectionObserver = new IntersectionObserver(this.#handleIntersection, options);
|
|
369
366
|
this.#observeAnchors();
|
|
370
367
|
}
|
|
371
368
|
for (const item of this.#items.value) {
|
|
@@ -378,6 +375,9 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
378
375
|
return id ? this.root.querySelector(`#${id}`) : null;
|
|
379
376
|
}
|
|
380
377
|
#observeAnchors() {
|
|
378
|
+
const options = { root: this.root, rootMargin: this.rootMargin, threshold: this.threshold };
|
|
379
|
+
this.#intersectionObserver?.disconnect();
|
|
380
|
+
this.#intersectionObserver = new IntersectionObserver(this.#handleIntersection, options);
|
|
381
381
|
for (const item of this.#items.value) {
|
|
382
382
|
const anchor = this.#findAnchor(item);
|
|
383
383
|
if (!anchor) continue;
|
|
@@ -402,7 +402,7 @@ __decorateClass([
|
|
|
402
402
|
], _OdxAnchorNavigation.prototype, "vertical", 2);
|
|
403
403
|
let OdxAnchorNavigation = _OdxAnchorNavigation;
|
|
404
404
|
|
|
405
|
-
const styles$1a = ":host{display:flex;gap:var(--odx-
|
|
405
|
+
const styles$1a = ":host{display:flex;gap:var(--odx-spacing-37);justify-content:space-between;padding-block:var(--odx-spacing-37)}.content{flex:1 1 auto;padding-inline:var(--odx-spacing-50)}::slotted(odx-title){line-height:var(--odx-size-225)}";
|
|
406
406
|
|
|
407
407
|
const AreaHeaderSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
408
408
|
const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
@@ -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-
|
|
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{display:grid;grid-template
|
|
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",
|