@odx/foundation 1.0.0-beta.48 → 1.0.0-beta.49
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 +38 -38
- package/dist/main.js +3 -4
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/dist/components.js
CHANGED
|
@@ -143,7 +143,7 @@ OdxAccordion = __decorateClass$1l([
|
|
|
143
143
|
customElement("odx-accordion", [styles$1b])
|
|
144
144
|
], OdxAccordion);
|
|
145
145
|
|
|
146
|
-
const styles$1a = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-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);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-
|
|
146
|
+
const styles$1a = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-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);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}: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-static)}: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)}: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([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)}}";
|
|
147
147
|
|
|
148
148
|
var __defProp$1k = Object.defineProperty;
|
|
149
149
|
var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
|
|
@@ -340,7 +340,7 @@ OdxActionButton = __decorateClass$1j([
|
|
|
340
340
|
customElement("odx-action-button", [styles$19])
|
|
341
341
|
], OdxActionButton);
|
|
342
342
|
|
|
343
|
-
const styles$18 = ":host{--_color-foreground: var(--odx-color-foreground-
|
|
343
|
+
const styles$18 = ":host{--_color-foreground: var(--odx-color-foreground-accent-rest);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}[part~=base]{transition:var(--odx-transition-reduced);outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:var(--_color-foreground);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-color-foreground-accent-hover)}:host([emphasized]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]),:host([subtle]:not(:hover)){text-decoration:none}:host([disabled]){--_color-foreground: var(--odx-color-foreground-rest-muted);[part~=base]{cursor:default}}";
|
|
344
344
|
|
|
345
345
|
var __defProp$1i = Object.defineProperty;
|
|
346
346
|
var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
|
|
@@ -369,7 +369,7 @@ OdxLink = __decorateClass$1i([
|
|
|
369
369
|
customElement("odx-link", [styles$18])
|
|
370
370
|
], OdxLink);
|
|
371
371
|
|
|
372
|
-
const styles$17 = "@layer base{:host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;
|
|
372
|
+
const styles$17 = "@layer base{:host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;transition:var(--odx-transition-reduced);transition-property:border-color,color;padding-inline:var(--odx-size-50)}}@layer state{odx-link[aria-current=true]{--_color-foreground: var(--odx-color-foreground-rest);font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host(:not([vertical])){align-items:center;block-size:var(--odx-size-225);odx-link{--_outline-offset: var(--odx-focus-ring-offset)}odx-link[aria-current=true]{border-radius:0;text-decoration:underline}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-control-rest);odx-link{margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:inherit}odx-link[aria-current=true]{border-inline-start-color:var(--odx-color-background-accent-rest)}}}";
|
|
373
373
|
|
|
374
374
|
const ANCHOR_SELECTOR = "odx-anchor";
|
|
375
375
|
class AnchorObserver {
|
|
@@ -537,7 +537,7 @@ OdxAreaHeader = __decorateClass$1g([
|
|
|
537
537
|
customElement("odx-area-header", [styles$16])
|
|
538
538
|
], OdxAreaHeader);
|
|
539
539
|
|
|
540
|
-
const styles$15 = "@layer base{:host{--color-background: var(--odx-experience-color-secondary-rest);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3);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,outline-color,box-shadow;margin-block:var(--_spacing);border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--_font-size);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}}@layer variant{:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"primary\"]){--color-background: var(--odx-color-primary-rest);--color-foreground: var(--odx-color-foreground-
|
|
540
|
+
const styles$15 = "@layer base{:host{--color-background: var(--odx-experience-color-secondary-rest);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3);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,outline-color,box-shadow;margin-block:var(--_spacing);border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--_font-size);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}}@layer variant{:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: 0;--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}}";
|
|
541
541
|
|
|
542
542
|
var __defProp$1f = Object.defineProperty;
|
|
543
543
|
var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
|
|
@@ -604,7 +604,7 @@ OdxAvatarGroup = __decorateClass$1e([
|
|
|
604
604
|
customElement("odx-avatar-group", [styles$14])
|
|
605
605
|
], OdxAvatarGroup);
|
|
606
606
|
|
|
607
|
-
const styles$13 = "@layer base{:host{--_block-size: var(--odx-size-100);display:inline-block;pointer-events:none
|
|
607
|
+
const styles$13 = "@layer base{:host{--_block-size: var(--odx-size-100);display:inline-block;vertical-align:middle;pointer-events:none}.content{--_font-size: var(--odx-typography-font-size-1);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-size-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);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}}}@layer variant{: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-static)}: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-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([compact]){--_block-size: var(--odx-size-75);.content{margin:var(--odx-size-12);padding:0;inline-size:var(--_block-size)}}:host([pulse]){.content{animation:pulse 1.25s infinite}}}";
|
|
608
608
|
|
|
609
609
|
var __defProp$1d = Object.defineProperty;
|
|
610
610
|
var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
|
|
@@ -639,7 +639,7 @@ OdxBadge = __decorateClass$1d([
|
|
|
639
639
|
customElement("odx-badge", [styles$13])
|
|
640
640
|
], OdxBadge);
|
|
641
641
|
|
|
642
|
-
const styles$12 = ":host{display:contents}.separator{--size: var(--odx-size-75);
|
|
642
|
+
const styles$12 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-37);color:var(--odx-color-foreground-rest-muted)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-muted)!important}::slotted(*){margin:0}";
|
|
643
643
|
|
|
644
644
|
var __defProp$1c = Object.defineProperty;
|
|
645
645
|
var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
|
|
@@ -799,7 +799,7 @@ OdxButtonGroup = __decorateClass$1a([
|
|
|
799
799
|
customElement("odx-button-group", [styles$10])
|
|
800
800
|
], OdxButtonGroup);
|
|
801
801
|
|
|
802
|
-
const styles$$ = ":host{--_card-padding: var(--odx-size-150);display:grid;
|
|
802
|
+
const styles$$ = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-main);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.title{display:flex;place-items:center;margin-block-end:var(--odx-size-50);min-block-size:var(--odx-size-225);overflow:hidden}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150)}.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))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-block-size:100%;max-inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
|
|
803
803
|
|
|
804
804
|
var __defProp$19 = Object.defineProperty;
|
|
805
805
|
var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
|
|
@@ -878,7 +878,7 @@ OdxCheckboxGroup = __decorateClass$18([
|
|
|
878
878
|
customElement("odx-checkbox-group", [styles$_])
|
|
879
879
|
], OdxCheckboxGroup);
|
|
880
880
|
|
|
881
|
-
const styles$Z = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-
|
|
881
|
+
const styles$Z = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-rest);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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-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-space));color:var(--_label-color-foreground)}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-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-focus-ring-color)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([disabled],[readonly])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-foreground: transparent;--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]: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]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly]:is([checked],[indeterminate])){--_indicator-color-foreground: var(--odx-color-foreground-rest)}}";
|
|
882
882
|
|
|
883
883
|
var __defProp$17 = Object.defineProperty;
|
|
884
884
|
var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
|
|
@@ -931,7 +931,7 @@ OdxCheckbox = __decorateClass$17([
|
|
|
931
931
|
customElement("odx-checkbox", [styles$Z])
|
|
932
932
|
], OdxCheckbox);
|
|
933
933
|
|
|
934
|
-
const styles$Y = ":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);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);
|
|
934
|
+
const styles$Y = ":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);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-25);place-items:center;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);color:var(--_color-foreground)}:host,[part=base],.action{transition:var(--odx-transition-reduced);transition-property:color,background-color,outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}[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}.action,::slotted(odx-icon){outline-offset:calc(-1 * var(--odx-focus-ring-offset));block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;font-size:var(--odx-font-size-text-md)}.action{margin-inline-end:calc(-1 * var(--_padding-inline));border:none;border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:pointer;padding:0}.action:hover{background-color:var(--_color-background-hover)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}: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-static)}: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-success-text)}: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)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-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}";
|
|
935
935
|
|
|
936
936
|
var __defProp$16 = Object.defineProperty;
|
|
937
937
|
var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
|
|
@@ -1021,7 +1021,7 @@ OdxChip = __decorateClass$16([
|
|
|
1021
1021
|
customElement("odx-chip", [styles$Y])
|
|
1022
1022
|
], OdxChip);
|
|
1023
1023
|
|
|
1024
|
-
const styles$X = "@layer base{:host{--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);
|
|
1024
|
+
const styles$X = "@layer base{:host{--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);display:flex;position:relative;place-content:center;place-items:center;block-size:100%;inline-size:100%;color:currentcolor;aspect-ratio:1}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}}@layer variant{:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host([size=\"sm\"]){--_size: var(--odx-size-300)}:host([size=\"md\"]){--_size: var(--odx-size-400)}:host([size=\"lg\"]){--_size: var(--odx-size-600)}}@layer state{:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}";
|
|
1025
1025
|
|
|
1026
1026
|
var __defProp$15 = Object.defineProperty;
|
|
1027
1027
|
var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
|
|
@@ -1254,7 +1254,7 @@ OdxDropdown = __decorateClass$14([
|
|
|
1254
1254
|
customElement("odx-dropdown", [styles$W])
|
|
1255
1255
|
], OdxDropdown);
|
|
1256
1256
|
|
|
1257
|
-
const styles$V = "@layer base{:host{--background-color: var(--odx-color-
|
|
1257
|
+
const styles$V = "@layer base{:host{--background-color: var(--odx-color-background-accent-rest);--foreground-color: var(--odx-color-foreground-inverse-static)}::highlight(odx-highlight){background-color:var(--background-color);color:var(--foreground-color)}:host([subtle]){--background-color: transparent;--foreground-color: var(--odx-color-background-accent-rest)}}";
|
|
1258
1258
|
|
|
1259
1259
|
var __defProp$13 = Object.defineProperty;
|
|
1260
1260
|
var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
|
|
@@ -1485,7 +1485,7 @@ OdxAutocomplete = __decorateClass$12([
|
|
|
1485
1485
|
customElement("odx-autocomplete", [styles$U])
|
|
1486
1486
|
], OdxAutocomplete);
|
|
1487
1487
|
|
|
1488
|
-
const styles$T = ":host{display:block;
|
|
1488
|
+
const styles$T = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-200)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
|
|
1489
1489
|
|
|
1490
1490
|
var __defProp$11 = Object.defineProperty;
|
|
1491
1491
|
var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
|
|
@@ -2081,7 +2081,7 @@ OdxImage = __decorateClass$R([
|
|
|
2081
2081
|
customElement("odx-image", [styles$M])
|
|
2082
2082
|
], OdxImage);
|
|
2083
2083
|
|
|
2084
|
-
const styles$L = "@layer base{:host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground-
|
|
2084
|
+
const styles$L = "@layer base{:host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-separator);--_icon-size: var(--odx-size-150);display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;background-color:var(--_color-background);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--_color-foreground);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--_icon-size)}.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-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}}@layer state{:host([hidden]){display:none;opacity:0}}@layer variant{:host([variant=\"accent\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-60)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-muted);--_color-foreground: var(--odx-palette-red-90);--_color-stroke: var(--odx-palette-red-60)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-muted);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-muted);--_color-stroke: var(--odx-palette-green-60)}:host([emphasized]){border-inline-start:var(--odx-border-width-thickest) solid var(--_color-stroke);padding-inline-start:calc(var(--odx-size-75) - var(--odx-border-width-thickest))}}";
|
|
2085
2085
|
|
|
2086
2086
|
var __defProp$Q = Object.defineProperty;
|
|
2087
2087
|
var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
|
|
@@ -2143,7 +2143,7 @@ OdxInlineMessage = __decorateClass$Q([
|
|
|
2143
2143
|
customElement("odx-inline-message", [styles$L])
|
|
2144
2144
|
], OdxInlineMessage);
|
|
2145
2145
|
|
|
2146
|
-
const styles$K = "@layer base{:host{--_color-background: var(--odx-color-
|
|
2146
|
+
const styles$K = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);display:inline-block;min-inline-size:16ch}[part=base]{display:flex;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);padding-inline:var(--odx-size-50);block-size:var(--_control-size);font-size:var(--odx-font-size-text-md);&:has(.clear){padding-inline-end:var(--odx-size-px)}&:has([part=input]:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}&:has([part=input]:focus-visible){--_color-stroke: var(--odx-focus-ring-color)}}.clear{--_icon-size: var(--odx-typography-font-size-4);--_icon-margin: 0}[part=input]{flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-muted);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}}@layer variant{:host([block]){display:block}}";
|
|
2147
2147
|
|
|
2148
2148
|
var __defProp$P = Object.defineProperty;
|
|
2149
2149
|
var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
|
|
@@ -2333,7 +2333,7 @@ OdxLineClamp = __decorateClass$N([
|
|
|
2333
2333
|
customElement("odx-line-clamp", [styles$I])
|
|
2334
2334
|
], OdxLineClamp);
|
|
2335
2335
|
|
|
2336
|
-
const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;
|
|
2336
|
+
const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-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-size-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start;line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[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-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][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}}}";
|
|
2337
2337
|
|
|
2338
2338
|
var __defProp$M = Object.defineProperty;
|
|
2339
2339
|
var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
|
|
@@ -2556,7 +2556,7 @@ OdxLoadingOverlay = __decorateClass$K([
|
|
|
2556
2556
|
customElement("odx-loading-overlay", [styles$F])
|
|
2557
2557
|
], OdxLoadingOverlay);
|
|
2558
2558
|
|
|
2559
|
-
const styles$E = "@layer base{:host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size)
|
|
2559
|
+
const styles$E = "@layer base{:host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-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(--_space) / 2);padding:var(--_space);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}}";
|
|
2560
2560
|
|
|
2561
2561
|
var __defProp$J = Object.defineProperty;
|
|
2562
2562
|
var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
|
|
@@ -2682,7 +2682,7 @@ OdxMainMenuButton = __decorateClass$H([
|
|
|
2682
2682
|
customElement("odx-main-menu-button", [])
|
|
2683
2683
|
], OdxMainMenuButton);
|
|
2684
2684
|
|
|
2685
|
-
const styles$C = ":host{--_color-
|
|
2685
|
+
const styles$C = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;user-select:none}[part=base]{display:flex;gap:var(--odx-size-50);place-items:center;transition:var(--odx-transition-default);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-sm);background-color:var(--_color-background);padding-inline:var(--odx-size-100);block-size:var(--odx-size-300);text-decoration:none;color:var(--_color-foreground);font-weight:var(--odx-font-weight-medium);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:is([active],:active,:hover)){--_color-background: var(--odx-color-background-transparent-selected)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-brand);pointer-events:none}";
|
|
2686
2686
|
|
|
2687
2687
|
var __defProp$G = Object.defineProperty;
|
|
2688
2688
|
var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
|
|
@@ -2754,7 +2754,7 @@ OdxMainMenuTitle = __decorateClass$E([
|
|
|
2754
2754
|
customElement("odx-main-menu-title")
|
|
2755
2755
|
], OdxMainMenuTitle);
|
|
2756
2756
|
|
|
2757
|
-
const styles$B = ":host{--
|
|
2757
|
+
const styles$B = ":host{--_transition-duration: var(--odx-motion-duration-default);grid-template-rows:auto 1fr auto auto;transform:translate(-100%);transition:transform var(--_transition-duration) allow-discrete,overlay var(--_transition-duration) allow-discrete,display var(--_transition-duration) allow-discrete;margin:0;border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);padding:0;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));color:var(--odx-color-foreground-inverse-static)}:host(:popover-open){display:grid;transform:translate(0);opacity:1;@starting-style{transform:translate(-100%);opacity:0}}:host::backdrop{transition:backdrop-filter var(--_transition-duration),opacity var(--_transition-duration);opacity:0;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1}@starting-style{:host(:popover-open)::backdrop{backdrop-filter:blur(0);opacity:0}}[part~=navigation]{padding:var(--odx-size-75);overflow-y:auto}[part~=header]{padding-block:var(--odx-size-75) clamp(0px,4dvh - calc(var(--odx-size-75)),var(--odx-size-75));padding-inline:var(--odx-size-150)}[part~=link-navigation],[part~=footer]{padding:var(--odx-size-150);padding-block:clamp(var(--odx-size-75),4dvh,var(--odx-size-150))}[part~=link-navigation]{column-gap:var(--odx-size-100);padding-block:var(--odx-size-75) 0}";
|
|
2758
2758
|
|
|
2759
2759
|
var __defProp$D = Object.defineProperty;
|
|
2760
2760
|
var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
|
|
@@ -2992,7 +2992,7 @@ OdxMenu = __decorateClass$A([
|
|
|
2992
2992
|
customElement("odx-menu", [styles$y])
|
|
2993
2993
|
], OdxMenu);
|
|
2994
2994
|
|
|
2995
|
-
const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150
|
|
2995
|
+
const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);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);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-main);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)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{transform:translate(0);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
|
|
2996
2996
|
|
|
2997
2997
|
var __defProp$z = Object.defineProperty;
|
|
2998
2998
|
var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
|
|
@@ -3148,7 +3148,7 @@ OdxModal = __decorateClass$z([
|
|
|
3148
3148
|
customElement("odx-modal", [styles$x])
|
|
3149
3149
|
], OdxModal);
|
|
3150
3150
|
|
|
3151
|
-
const styles$w = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-37))}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-disabled-
|
|
3151
|
+
const styles$w = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-37))}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][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-size-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);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}}}";
|
|
3152
3152
|
|
|
3153
3153
|
var __defProp$y = Object.defineProperty;
|
|
3154
3154
|
var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
|
|
@@ -3170,7 +3170,7 @@ OdxNavigationItem = __decorateClass$y([
|
|
|
3170
3170
|
customElement("odx-navigation-item", [styles$w])
|
|
3171
3171
|
], OdxNavigationItem);
|
|
3172
3172
|
|
|
3173
|
-
const styles$v = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;
|
|
3173
|
+
const styles$v = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-outline-offset-focus);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_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([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
|
|
3174
3174
|
|
|
3175
3175
|
var __defProp$x = Object.defineProperty;
|
|
3176
3176
|
var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
|
|
@@ -3199,7 +3199,7 @@ OdxOption = __decorateClass$x([
|
|
|
3199
3199
|
customElement("odx-option", [styles$v])
|
|
3200
3200
|
], OdxOption);
|
|
3201
3201
|
|
|
3202
|
-
const styles$u = ":host{display:grid;
|
|
3202
|
+
const styles$u = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-cool)}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
|
|
3203
3203
|
|
|
3204
3204
|
var __defProp$w = Object.defineProperty;
|
|
3205
3205
|
var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
|
|
@@ -3228,7 +3228,7 @@ OdxPageLayout = __decorateClass$w([
|
|
|
3228
3228
|
customElement("odx-page-layout", [styles$u])
|
|
3229
3229
|
], OdxPageLayout);
|
|
3230
3230
|
|
|
3231
|
-
const styles$t = "@layer base{: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;
|
|
3231
|
+
const styles$t = "@layer base{: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-areas:\"header\" \"subheader\" \"content\" \"footer\";grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:100%;min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-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%}}@layer variant{: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)}}";
|
|
3232
3232
|
|
|
3233
3233
|
var __defProp$v = Object.defineProperty;
|
|
3234
3234
|
var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
|
|
@@ -3379,7 +3379,7 @@ OdxPagination = __decorateClass$u([
|
|
|
3379
3379
|
customElement("odx-pagination", [styles$s])
|
|
3380
3380
|
], OdxPagination);
|
|
3381
3381
|
|
|
3382
|
-
const styles$r = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0
|
|
3382
|
+
const styles$r = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-size-50);align-items:center;padding-block:var(--odx-size-25);padding-inline:var(--odx-size-75);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 center;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-size-25));padding-block:var(--odx-size-25);text-align:start}[part=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:0;[part=label]{flex:1 1 auto}[part=value]{order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-background-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"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)}}";
|
|
3383
3383
|
|
|
3384
3384
|
var __defProp$t = Object.defineProperty;
|
|
3385
3385
|
var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
|
|
@@ -3462,7 +3462,7 @@ OdxProgressBar = __decorateClass$t([
|
|
|
3462
3462
|
customElement("odx-progress-bar", [styles$r])
|
|
3463
3463
|
], OdxProgressBar);
|
|
3464
3464
|
|
|
3465
|
-
const styles$q = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-
|
|
3465
|
+
const styles$q = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-rest);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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-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-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-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-focus-ring-color)}:host([readonly]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([disabled]){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-foreground: var(--odx-color-foreground-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}: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-25)}:host([checked]:not(:is([readonly],[disabled])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([checked][readonly]){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-inverse-static) inset}}:host([checked][disabled]){--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-color-background: 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}}}";
|
|
3466
3466
|
|
|
3467
3467
|
var __defProp$s = Object.defineProperty;
|
|
3468
3468
|
var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
|
|
@@ -3500,7 +3500,7 @@ OdxRadioButton = __decorateClass$s([
|
|
|
3500
3500
|
customElement("odx-radio-button", [styles$q])
|
|
3501
3501
|
], OdxRadioButton);
|
|
3502
3502
|
|
|
3503
|
-
const styles$p = "@layer base{:host{display:flex}}@layer variant{:host(:not([layout=\"inline\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);
|
|
3503
|
+
const styles$p = "@layer base{:host{display:flex}}@layer variant{:host(:not([layout=\"inline\"])){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-separator);padding:var(--odx-size-75);inline-size:auto}}}";
|
|
3504
3504
|
|
|
3505
3505
|
var __defProp$r = Object.defineProperty;
|
|
3506
3506
|
var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
|
|
@@ -3705,7 +3705,7 @@ OdxSearchBar = __decorateClass$p([
|
|
|
3705
3705
|
customElement("odx-search-bar", [styles$n])
|
|
3706
3706
|
], OdxSearchBar);
|
|
3707
3707
|
|
|
3708
|
-
const styles$m = "@layer base{:host{--_color-background: var(--odx-color-
|
|
3708
|
+
const styles$m = "@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-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);max-inline-size:320px;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,outline-color;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:inherit;background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto}.indicator{font-size:var(--odx-size-175)}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}slot[name=placeholder]{color:var(--odx-color-foreground-rest-muted)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);.base{cursor:not-allowed}slot[name=placeholder]{color:var(---_color-foreground)}}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}}";
|
|
3709
3709
|
|
|
3710
3710
|
var __defProp$o = Object.defineProperty;
|
|
3711
3711
|
var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
|
|
@@ -3859,7 +3859,7 @@ OdxSeparator = __decorateClass$n([
|
|
|
3859
3859
|
customElement("odx-separator", [styles$l])
|
|
3860
3860
|
], OdxSeparator);
|
|
3861
3861
|
|
|
3862
|
-
const styles$k = "@layer base{:host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-disabled-
|
|
3862
|
+
const styles$k = "@layer base{:host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-background-disabled-rest);display:block;block-size:var(--_block-size);inline-size:var(--inline-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-color-background-transparent-pressed) 50%,transparent 66%);background-position:150% 100%;background-size:200% 100%;block-size:100%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([emphasized]){--_color-fill: var(--odx-color-background-disabled-selected)}:host([muted]) .base{animation:none}}";
|
|
3863
3863
|
|
|
3864
3864
|
var __defProp$m = Object.defineProperty;
|
|
3865
3865
|
var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
|
|
@@ -3899,7 +3899,7 @@ OdxSkeleton = __decorateClass$m([
|
|
|
3899
3899
|
customElement("odx-skeleton", [styles$k])
|
|
3900
3900
|
], OdxSkeleton);
|
|
3901
3901
|
|
|
3902
|
-
const styles$j = "*{margin:0;padding:0
|
|
3902
|
+
const styles$j = "*{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}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){inset-inline-start:var(--_position);background-color:var(--_thumb-color)}:host::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)}:host::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);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;z-index:var(--_layer-foreground);border-radius:var(--odx-border-radius-sm);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse-static)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::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)}:host(:focus-within)::part(label),:host(:hover)::part(label){transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1);opacity:1}:host([disabled]){pointer-events:none}:host([disabled])::part(thumb){--_thumb-color: var(--odx-color-background-disabled);z-index:var(--_layer-interactive-disabled)}";
|
|
3903
3903
|
|
|
3904
3904
|
const SliderLabelVisibility = { AUTO: "auto", HIDDEN: "hidden" };
|
|
3905
3905
|
const SliderTrackVisibility = { AUTO: "auto", HIDDEN: "hidden", VISIBLE: "visible" };
|
|
@@ -4065,7 +4065,7 @@ OdxSliderHandle = __decorateClass$l([
|
|
|
4065
4065
|
customElement("odx-slider-handle", [styles$j])
|
|
4066
4066
|
], OdxSliderHandle);
|
|
4067
4067
|
|
|
4068
|
-
const styles$i = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-
|
|
4068
|
+
const styles$i = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-color-background-brand));--_mark-tick-block-size: var(--odx-size-37);--_mark-tick-inline-size: var(--odx-size-12);display:flex;position:absolute;inset:0;flex-direction:row;align-items:center;z-index:0;pointer-events:none}[part~=mark]{position:relative;flex:1 0 auto}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));background-color:var(--_mark-color);width:2px;height:var(--_mark-tick-block-size)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{position:absolute;inset-block-start:0;transform:translate(-50%) translateY(var(--odx-size-100));text-align:center;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
|
|
4069
4069
|
|
|
4070
4070
|
var __defProp$k = Object.defineProperty;
|
|
4071
4071
|
var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
|
|
@@ -4119,7 +4119,7 @@ OdxSliderMarks = __decorateClass$k([
|
|
|
4119
4119
|
customElement("odx-slider-marks", [styles$i])
|
|
4120
4120
|
], OdxSliderMarks);
|
|
4121
4121
|
|
|
4122
|
-
const styles$h = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;
|
|
4122
|
+
const styles$h = ":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-size-75) var(--odx-size-50);padding-inline:var(--odx-size-75);min-height:var(--odx-size-300)}:host(:active){cursor:grabbing}:host::part(container){position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);block-size:var(--_track-size)}";
|
|
4123
4123
|
|
|
4124
4124
|
var __defProp$j = Object.defineProperty;
|
|
4125
4125
|
var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
|
|
@@ -4265,7 +4265,7 @@ OdxSpacer = __decorateClass$i([
|
|
|
4265
4265
|
customElement("odx-spacer", [styles$g])
|
|
4266
4266
|
], OdxSpacer);
|
|
4267
4267
|
|
|
4268
|
-
const styles$f = ":host{--_color-background: var(--odx-color-
|
|
4268
|
+
const styles$f = ":host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_color-foreground: var(--odx-color-foreground-rest);display:grid;grid-template-areas:\"decrement input increment\";grid-template-columns:auto 1fr auto;width:min-content}[part~=action],::slotted(input){transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);block-size:var(--odx-size-225);color:var(--_color-foreground)}::slotted(input){appearance:textfield;grid-area:input;padding:0 var(--odx-size-75)!important;min-width:auto;min-inline-size:var(--odx-size-400);text-align:center;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;border-radius:var(--odx-border-radius-controls);cursor:pointer;inline-size:var(--odx-size-225);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0}[part~=action-decrement]{grid-area:decrement;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-background-control-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-stroke-control-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){z-index:1;outline-color:var(--odx-focus-ring-color)}:host([disabled]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template:\"input increment\" 1fr \"input decrement\" 1fr / 1fr auto;[part~=action]{border-inline-start:none;border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-control-rest);border-radius:var(--odx-border-radius-controls);block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
|
|
4269
4269
|
|
|
4270
4270
|
var __defProp$h = Object.defineProperty;
|
|
4271
4271
|
var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
|
|
@@ -4485,7 +4485,7 @@ OdxStatus = __decorateClass$f([
|
|
|
4485
4485
|
customElement("odx-status", [styles$e])
|
|
4486
4486
|
], OdxStatus);
|
|
4487
4487
|
|
|
4488
|
-
const styles$d = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_track-color-background: var(--odx-color-
|
|
4488
|
+
const styles$d = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_track-color-background: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_track-color-stroke: var(--odx-color-stroke-control-rest);--_thumb-color-background: var(--_track-color-background);--_thumb-color-stroke: var(--_track-color-stroke);--_thumb-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_thumb-position: 0;--_label-color-foreground: var(--odx-color-foreground-rest);display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);cursor:pointer;user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color,translate;block-size:var(--odx-size-150)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_thumb-color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_track-color-background);block-size:var(--_track-size);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color-background);block-size:var(--_thumb-size);inline-size:var(--_thumb-size);color:var(--_indicator-color-foreground);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly])):hover){--_track-color-stroke: var(--odx-color-stroke-control-hover);--_thumb-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .thumb{outline-color:var(--odx-focus-ring-color)}:host([checked]){--_track-color-background: var(--odx-color-background-control-selected);--_track-color-stroke: var(--odx-color-stroke-control-selected);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([disabled],[readonly])):hover){--_track-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_track-color-background: var(--odx-color-background-disabled-rest);--_track-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;.thumb{box-shadow:none}}:host([disabled][checked]){--_track-color-background: var(--odx-color-background-disabled-selected)}:host([readonly]){cursor:default}}";
|
|
4489
4489
|
|
|
4490
4490
|
var __defProp$e = Object.defineProperty;
|
|
4491
4491
|
var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
|
|
@@ -4714,7 +4714,7 @@ OdxTableHeader = __decorateClass$9([
|
|
|
4714
4714
|
customElement("odx-table-header", [styles$8])
|
|
4715
4715
|
], OdxTableHeader);
|
|
4716
4716
|
|
|
4717
|
-
const styles$7 = ":host{--_color-fill: transparent;display:flex;align-items:center;
|
|
4717
|
+
const styles$7 = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);background-color:var(--_color-fill);cursor:pointer;padding-inline:var(--odx-size-75);inline-size:100%}:host(:not(:last-of-type)){border-color:var(--odx-color-separator)}: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-size-75);pointer-events:none}";
|
|
4718
4718
|
|
|
4719
4719
|
var __defProp$8 = Object.defineProperty;
|
|
4720
4720
|
var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
|
|
@@ -4816,7 +4816,7 @@ OdxTableRow = __decorateClass$8([
|
|
|
4816
4816
|
customElement("odx-table-row", [styles$7])
|
|
4817
4817
|
], OdxTableRow);
|
|
4818
4818
|
|
|
4819
|
-
const styles$6 = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-
|
|
4819
|
+
const styles$6 = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-background-level-1)}";
|
|
4820
4820
|
|
|
4821
4821
|
var __defProp$7 = Object.defineProperty;
|
|
4822
4822
|
var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
|
|
@@ -4911,7 +4911,7 @@ const tableContext = {
|
|
|
4911
4911
|
defaultValue: { hasCheckboxes: true }
|
|
4912
4912
|
};
|
|
4913
4913
|
|
|
4914
|
-
const styles$5 = "@layer base{:host{display:block;text-decoration:inherit;
|
|
4914
|
+
const styles$5 = "@layer base{:host{display:block;text-decoration:inherit;line-height:var(--_line-height, inherit);color:var(--_color, inherit);font-size:var(--_font-size, inherit);font-weight:var(--_font-weight, inherit)}:host([inline]){display:inline-block}}@layer variant{:host([emphasized]:not([emphasized=\"false\"])){--_font-weight: var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){--_font-size: var(--odx-typography-font-size-1);--_line-height: var(--odx-typography-line-height-1)}:host([size=\"sm\"]){--_font-size: var(--odx-typography-font-size-2);--_line-height: var(--odx-typography-line-height-2)}:host([size=\"md\"]){--_font-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-3)}:host([size=\"lg\"]){--_font-size: var(--odx-typography-font-size-4);--_line-height: var(--odx-typography-line-height-4)}:host([variant=\"accent\"]){--_color: var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){--_color: var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){--_color: var(--odx-color-background-rest)}}";
|
|
4915
4915
|
|
|
4916
4916
|
var __defProp$6 = Object.defineProperty;
|
|
4917
4917
|
var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
|
|
@@ -4972,7 +4972,7 @@ OdxToast = __decorateClass$5([
|
|
|
4972
4972
|
customElement("odx-toast", [styles$4])
|
|
4973
4973
|
], OdxToast);
|
|
4974
4974
|
|
|
4975
|
-
const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-
|
|
4975
|
+
const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-stroke-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;place-items:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;margin:var(--odx-size-37);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-stroke);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);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}:host::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([pressed]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse-static);--_color-stroke: var(--odx-color-stroke-control-selected)}:host([pressed]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([pressed][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}";
|
|
4976
4976
|
|
|
4977
4977
|
var __defProp$4 = Object.defineProperty;
|
|
4978
4978
|
var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
|
|
@@ -5054,7 +5054,7 @@ OdxToggleContent = __decorateClass$3([
|
|
|
5054
5054
|
customElement("odx-toggle-content", [styles$2])
|
|
5055
5055
|
], OdxToggleContent);
|
|
5056
5056
|
|
|
5057
|
-
const styles$1 = "@layer base{:host{--_popover-color-background: var(--odx-color-primary-hover);--_popover-color-foreground: var(--odx-color-foreground-
|
|
5057
|
+
const styles$1 = "@layer base{:host{--_popover-color-background: var(--odx-color-background-primary-hover);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}:host(:not([interactive])){pointer-events:none}odx-popover{--_border-radius: var(--odx-border-radius-md);--_outer-padding: var(--odx-size-25);padding-inline:var(--odx-size-50)}}";
|
|
5058
5058
|
|
|
5059
5059
|
var __defProp$2 = Object.defineProperty;
|
|
5060
5060
|
var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
|
package/dist/main.js
CHANGED
|
@@ -37,7 +37,7 @@ const Variant = {
|
|
|
37
37
|
GHOST: "ghost"
|
|
38
38
|
};
|
|
39
39
|
|
|
40
|
-
const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{
|
|
40
|
+
const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
|
|
41
41
|
|
|
42
42
|
function mergeStyleSheets(...stylesheets) {
|
|
43
43
|
const mergedStyles = [];
|
|
@@ -1280,7 +1280,6 @@ class DragController {
|
|
|
1280
1280
|
return { x: (event.clientX - left) / width * 100, y: (event.clientY - top) / width * 100 };
|
|
1281
1281
|
}
|
|
1282
1282
|
#getDragTarget(event) {
|
|
1283
|
-
if (event.target !== this.#host) return null;
|
|
1284
1283
|
return minBy(this.draggableElements, (element) => element.getDistance?.(this.container, event) ?? Number.MAX_SAFE_INTEGER) ?? null;
|
|
1285
1284
|
}
|
|
1286
1285
|
}
|
|
@@ -1308,7 +1307,7 @@ function optionalSlot(host, slotName) {
|
|
|
1308
1307
|
return nothing;
|
|
1309
1308
|
}
|
|
1310
1309
|
|
|
1311
|
-
const styles$2 = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-
|
|
1310
|
+
const styles$2 = "@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: var(--odx-color-foreground-rest);--_color-foreground-hover: var(--odx-color-foreground-rest);--_color-foreground-pressed: var(--odx-color-foreground-rest);--_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-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;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;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,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-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-normal);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{border:0;padding:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-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:left}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--color-background: var(--odx-color-background-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{: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}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
|
|
1312
1311
|
|
|
1313
1312
|
var __defProp$3 = Object.defineProperty;
|
|
1314
1313
|
var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
|
|
@@ -1435,7 +1434,7 @@ __decorateClass$2([
|
|
|
1435
1434
|
property({ type: Number, attribute: "line-clamp" })
|
|
1436
1435
|
], InteractiveElement.prototype, "lineClamp", 2);
|
|
1437
1436
|
|
|
1438
|
-
const styles$1 = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-
|
|
1437
|
+
const styles$1 = "@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-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_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(: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}}}@layer state{:host,:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: 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))}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-outer-padding) var(--_popover-offset);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}}";
|
|
1439
1438
|
|
|
1440
1439
|
const PopoverPlacement = {
|
|
1441
1440
|
TOP: "top",
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{
|
|
1
|
+
@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"description": "A library of Web Component building blocks for ODX",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.49",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"@floating-ui/dom": "~1.6.13",
|
|
17
17
|
"@lit-labs/preact-signals": "~1.0.3",
|
|
18
18
|
"@lit/context": "~1.1.5",
|
|
19
|
-
"@odx/design-tokens": "^1.0.0-
|
|
19
|
+
"@odx/design-tokens": "^1.0.0-beta.0",
|
|
20
20
|
"focus-trap": "~7.6.4",
|
|
21
21
|
"lit": "~3.3.0"
|
|
22
22
|
},
|