@odx/foundation 0.1.0-alpha.17 → 0.1.0-alpha.19

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.
Files changed (31) hide show
  1. package/dist/components/area-header/area-header.component.css.js +3 -0
  2. package/dist/components/area-header/area-header.component.d.ts +14 -0
  3. package/dist/components/area-header/area-header.component.d.ts.map +1 -0
  4. package/dist/components/area-header/area-header.component.js +37 -0
  5. package/dist/components/area-header/area-header.models.d.ts +12 -0
  6. package/dist/components/area-header/area-header.models.d.ts.map +1 -0
  7. package/dist/components/area-header/area-header.models.js +11 -0
  8. package/dist/components/area-header/index.d.ts +3 -0
  9. package/dist/components/area-header/index.d.ts.map +1 -0
  10. package/dist/components/breadcrumb/breadcrumb-item.component.css.js +1 -1
  11. package/dist/components/breadcrumb/breadcrumb-item.component.d.ts.map +1 -1
  12. package/dist/components/breadcrumb/breadcrumb-item.component.js +2 -1
  13. package/dist/components/breadcrumb/breadcrumb.component.css.js +1 -1
  14. package/dist/components/button/button.component.css.js +1 -1
  15. package/dist/components/chip/chip.component.css.js +1 -1
  16. package/dist/components/icon-button/icon-button.component.d.ts.map +1 -1
  17. package/dist/components/icon-button/icon-button.component.js +3 -0
  18. package/dist/components/link/link.component.css.js +1 -1
  19. package/dist/components/link/link.component.d.ts +1 -0
  20. package/dist/components/link/link.component.d.ts.map +1 -1
  21. package/dist/components/link/link.component.js +4 -0
  22. package/dist/components/main.d.ts +1 -0
  23. package/dist/components/main.d.ts.map +1 -1
  24. package/dist/components/main.js +2 -0
  25. package/dist/components/select/select.component.css.js +1 -1
  26. package/dist/components/select/select.component.d.ts.map +1 -1
  27. package/dist/components/select/select.component.js +12 -6
  28. package/dist/components/stack/stack.component.css.js +1 -1
  29. package/dist/src/lib/models/custom-element.css.js +1 -1
  30. package/dist/styles/main.css +1 -1
  31. package/package.json +1 -1
package/dist/components/area-header/area-header.component.css.js ADDED
@@ -0,0 +1,3 @@
1
+ const styles = ":host{display:flex;justify-content:space-between;align-items:center;gap:var(--odx-size-150)}.content{margin-inline-end:auto}::slotted(odx-avatar){flex:0 0 auto}";
2
+
3
+ export { styles as default };
package/dist/components/area-header/area-header.component.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { CustomElement } from '@odx/foundation';
2
+ import { TemplateResult } from 'lit';
3
+ import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models';
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'odx-area-header': OdxAreaHeaderComponent;
7
+ }
8
+ }
9
+ export declare class OdxAreaHeaderComponent extends CustomElement {
10
+ size?: AreaHeaderSize;
11
+ variant?: AreaHeaderVariant;
12
+ protected render(): TemplateResult;
13
+ }
14
+ //# sourceMappingURL=area-header.component.d.ts.map
package/dist/components/area-header/area-header.component.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"area-header.component.d.ts","sourceRoot":"","sources":["../../../components/area-header/area-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF;AAED,qBACa,sBAAuB,SAAQ,aAAa;IAEvD,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,OAAO,CAAC,EAAE,iBAAiB,CAAC;cAET,MAAM,IAAI,cAAc;CAS5C"}
package/dist/components/area-header/area-header.component.js ADDED
@@ -0,0 +1,37 @@
1
+ import { CustomElement, customElement } from '@odx/foundation';
2
+ import { html } from 'lit';
3
+ import { property } from 'lit/decorators.js';
4
+ import styles from './area-header.component.css.js';
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
+ if (kind && result) __defProp(target, key, result);
14
+ return result;
15
+ };
16
+ let OdxAreaHeaderComponent = class extends CustomElement {
17
+ render() {
18
+ return html`
19
+ <slot name="start"></slot>
20
+ <div class="content">
21
+ <slot></slot>
22
+ </div>
23
+ <slot name="end"></slot>
24
+ `;
25
+ }
26
+ };
27
+ __decorateClass([
28
+ property({ reflect: true })
29
+ ], OdxAreaHeaderComponent.prototype, "size", 2);
30
+ __decorateClass([
31
+ property({ reflect: true })
32
+ ], OdxAreaHeaderComponent.prototype, "variant", 2);
33
+ OdxAreaHeaderComponent = __decorateClass([
34
+ customElement("odx-area-header", [styles])
35
+ ], OdxAreaHeaderComponent);
36
+
37
+ export { OdxAreaHeaderComponent };
package/dist/components/area-header/area-header.models.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export type AreaHeaderSize = (typeof AreaHeaderSize)[keyof typeof AreaHeaderSize];
2
+ export declare const AreaHeaderSize: {
3
+ readonly SM: "sm";
4
+ readonly MD: "md";
5
+ readonly LG: "lg";
6
+ readonly XL: "xl";
7
+ };
8
+ export type AreaHeaderVariant = (typeof AreaHeaderVariant)[keyof typeof AreaHeaderVariant];
9
+ export declare const AreaHeaderVariant: {
10
+ readonly DEFAULT: "default";
11
+ };
12
+ //# sourceMappingURL=area-header.models.d.ts.map
package/dist/components/area-header/area-header.models.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"area-header.models.d.ts","sourceRoot":"","sources":["../../../components/area-header/area-header.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;AAClF,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,CAAC;AAC3F,eAAO,MAAM,iBAAiB;;CAEpB,CAAC"}
package/dist/components/area-header/area-header.models.js ADDED
@@ -0,0 +1,11 @@
1
+ const AreaHeaderSize = {
2
+ SM: "sm",
3
+ MD: "md",
4
+ LG: "lg",
5
+ XL: "xl"
6
+ };
7
+ const AreaHeaderVariant = {
8
+ DEFAULT: "default"
9
+ };
10
+
11
+ export { AreaHeaderSize, AreaHeaderVariant };
package/dist/components/area-header/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './area-header.component';
2
+ export * from './area-header.models';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/area-header/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/area-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
package/dist/components/breadcrumb/breadcrumb-item.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}.separator{color:var(--odx-color-foreground-muted)}";
1
+ const styles = ":host{display:contents}.separator{--size: var(--odx-size-75);color:var(--odx-color-foreground-muted);margin:var(--odx-size-37)}:host([aria-hidden=\"true\"]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-muted)!important}::slotted(*){margin:0}";
2
2
 
3
3
  export { styles as default };
package/dist/components/breadcrumb/breadcrumb-item.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumb-item.component.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAC3D,SAAS,KAAK,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAE1D;cAEkB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK1C,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,MAAM,IAAI,OAAO;CAS5B"}
1
+ {"version":3,"file":"breadcrumb-item.component.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAC3D,SAAS,KAAK,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAE1D;cAEkB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK1C,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,MAAM,IAAI,OAAO;CAU5B"}
package/dist/components/breadcrumb/breadcrumb-item.component.js CHANGED
@@ -35,7 +35,7 @@ let OdxBreadcrumbItemComponent = class extends CustomElement {
35
35
  const isLast = this.isLast();
36
36
  return html`
37
37
  <slot></slot>
38
- ${when(!isLast, () => html`<odx-icon name="chevron-right" class="separator" role="presentation"></odx-icon>`)}
38
+ ${when(!isLast, () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}
39
39
  `;
40
40
  }
41
41
  isLast() {
@@ -46,6 +46,7 @@ _OdxBreadcrumbItemComponent_instances = new WeakSet();
46
46
  updateVisibility_fn = function() {
47
47
  if (this.slot === "fallback" || !this.interactiveElement) return;
48
48
  this.interactiveElement.subtle = true;
49
+ this.interactiveElement.emphasized = this.isLast();
49
50
  this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
50
51
  };
51
52
  OdxBreadcrumbItemComponent = __decorateClass([
package/dist/components/breadcrumb/breadcrumb.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
1
+ const styles = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-block:var(--odx-size-75);padding-inline:var(--odx-size-150);min-block-size:var(--odx-size-300)}::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
2
2
 
3
3
  export { styles as default };
package/dist/components/button/button.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-foreground);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active)::part(anchor){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}: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=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_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=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){font-size:var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
1
+ const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);inline-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-foreground);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active)::part(anchor){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}: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=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_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=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
2
2
 
3
3
  export { styles as default };
package/dist/components/chip/chip.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{--_color-background: var(--odx-color-neutral);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_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(--odx-size-50);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-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-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
1
+ const styles = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_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);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-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-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
2
2
 
3
3
  export { styles as default };
package/dist/components/icon-button/icon-button.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button.component.d.ts","sourceRoot":"","sources":["../../../components/icon-button/icon-button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF;AAED;;;;;;;;;;;GAWG;AACH,qBACa,sBAAuB,SAAQ,kBAAkB;IAE5D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;cAEF,aAAa,IAAI,cAAc;CAMnD"}
1
+ {"version":3,"file":"icon-button.component.d.ts","sourceRoot":"","sources":["../../../components/icon-button/icon-button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF;AAED;;;;;;;;;;;GAWG;AACH,qBACa,sBAAuB,SAAQ,kBAAkB;IAE5D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;cAEF,aAAa,IAAI,cAAc;CASnD"}
package/dist/components/icon-button/icon-button.component.js CHANGED
@@ -18,6 +18,9 @@ let OdxIconButtonComponent = class extends OdxButtonComponent {
18
18
  renderContent() {
19
19
  return html`
20
20
  <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
21
+ <odx-visually-hidden>
22
+ <slot></slot>
23
+ </odx-visually-hidden>
21
24
  ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
22
25
  `;
23
26
  }
package/dist/components/link/link.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--odx-link-color: var(--odx-link-color-hover, var(--odx-palette-blue-80))}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"]),:host([subtle]:not([subtle=\"false\"]):not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"])::part(anchor){--odx-link-color: var(--odx-link-color-disabled, var(--odx-palette-coolgray-40));cursor:default}";
1
+ const styles = ":host{--_color-foreground: var(--odx-palette-blue-50);display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--_color-foreground: var(--odx-palette-blue-80)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"])::part(anchor){--_color-foreground: var(--odx-palette-coolgray-40);cursor:default}";
2
2
 
3
3
  export { styles as default };
package/dist/components/link/link.component.d.ts CHANGED
@@ -5,6 +5,7 @@ declare global {
5
5
  }
6
6
  }
7
7
  export declare class OdxLinkComponent extends BaseLink {
8
+ emphasized: boolean;
8
9
  subtle: boolean;
9
10
  }
10
11
  //# sourceMappingURL=link.component.d.ts.map
package/dist/components/link/link.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"link.component.d.ts","sourceRoot":"","sources":["../../../components/link/link.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;AAED,qBACa,gBAAiB,SAAQ,QAAQ;IAE5C,MAAM,UAAS;CAChB"}
1
+ {"version":3,"file":"link.component.d.ts","sourceRoot":"","sources":["../../../components/link/link.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;AAED,qBACa,gBAAiB,SAAQ,QAAQ;IAE5C,UAAU,UAAS;IAGnB,MAAM,UAAS;CAChB"}
package/dist/components/link/link.component.js CHANGED
@@ -16,9 +16,13 @@ var __decorateClass = (decorators, target, key, kind) => {
16
16
  let OdxLinkComponent = class extends BaseLink {
17
17
  constructor() {
18
18
  super(...arguments);
19
+ this.emphasized = false;
19
20
  this.subtle = false;
20
21
  }
21
22
  };
23
+ __decorateClass([
24
+ property({ type: Boolean, reflect: true })
25
+ ], OdxLinkComponent.prototype, "emphasized", 2);
22
26
  __decorateClass([
23
27
  property({ type: Boolean, reflect: true })
24
28
  ], OdxLinkComponent.prototype, "subtle", 2);
package/dist/components/main.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './accordion';
2
+ export * from './area-header';
2
3
  export * from './avatar';
3
4
  export * from './avatar-group';
4
5
  export * from './badge';
package/dist/components/main.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../components/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAElC,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../components/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAElC,cAAc,kBAAkB,CAAC"}
package/dist/components/main.js CHANGED
@@ -1,6 +1,8 @@
1
1
  export { OdxAccordionHeaderComponent } from './accordion/accordion-header.component.js';
2
2
  export { OdxAccordionPanelComponent } from './accordion/accordion-panel.component.js';
3
3
  export { OdxAccordionComponent } from './accordion/accordion.component.js';
4
+ export { OdxAreaHeaderComponent } from './area-header/area-header.component.js';
5
+ export { AreaHeaderSize, AreaHeaderVariant } from './area-header/area-header.models.js';
4
6
  export { OdxAvatarComponent } from './avatar/avatar.component.js';
5
7
  export { AvatarSize, AvatarVariant } from './avatar/avatar.models.js';
6
8
  export { OdxAvatarGroupComponent } from './avatar-group/avatar-group.component.js';
package/dist/components/select/select.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-input-control-stroke);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground)}.base{display:flex;cursor:pointer;text-align:left;padding:var(--odx-size-37) var(--odx-size-75);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-size-37);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;max-inline-size:320px;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.indicator{font-size:var(--odx-size-150);margin-left:auto}.trigger odx-chip{--_border-radius: var(--odx-border-radius-sm)}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}";
1
+ const styles = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:left;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
2
2
 
3
3
  export { styles as default };
package/dist/components/select/select.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../components/select/select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;AAED,qBACa,kBAAmB,SAAQ,iBAAiB;;IACvD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,oBAAoB,CAAC;cAE9B,MAAM,IAAI,cAAc;IAkB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;cAa9B,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAsBnE"}
1
+ {"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../components/select/select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;AAED,qBACa,kBAAmB,SAAQ,iBAAiB;;IACvD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,oBAAoB,CAAC;cAE9B,MAAM,IAAI,cAAc;IAkB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;cAmB9B,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAsBnE"}
package/dist/components/select/select.component.js CHANGED
@@ -41,14 +41,14 @@ let OdxSelectComponent = class extends SelectFormControl {
41
41
  render() {
42
42
  return html`
43
43
  <div class="base" id="select-trigger" tabindex="0">
44
- <odx-stack gap="xs" horizontal odxPreventTextOverflow>
44
+ <div class="value" odxPreventTextOverflow>
45
45
  ${when(
46
46
  Array.from(this.selectedOptions).length,
47
47
  () => this.renderSelectedOptions(),
48
48
  () => html`<slot name="placeholder">Select options</slot>`
49
49
  )}
50
- </odx-stack>
51
- <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
50
+ </div>
51
+ <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
52
52
  </div>
53
53
  <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} matchReferenceWidth @toggle=${__privateGet(this, _handleDropdownToggle)}>
54
54
  <slot @slotchange=${__privateMethod(this, _OdxSelectComponent_instances, handleMultipleChange_fn)}></slot>
@@ -58,10 +58,16 @@ let OdxSelectComponent = class extends SelectFormControl {
58
58
  renderSelectedOptions() {
59
59
  const selectedOptions = Array.from(this.selectedOptions);
60
60
  if (this.multiple) {
61
- return html`${repeat(
62
- selectedOptions,
61
+ const maxOptions = 2;
62
+ const visibleOptions = selectedOptions.slice(0, maxOptions);
63
+ const showExtra = selectedOptions.length > maxOptions;
64
+ return html`
65
+ ${repeat(
66
+ visibleOptions,
63
67
  (option) => html`<odx-chip @remove=${() => __privateGet(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
64
- )}`;
68
+ )}
69
+ ${when(showExtra, () => html`<odx-chip>+${selectedOptions.length - maxOptions}</odx-chip>`)}
70
+ `;
65
71
  }
66
72
  this.dropdownElement.hidePopover();
67
73
  return html`${selectedOptions[0]?.getTextLabel()}`;
package/dist/components/stack/stack.component.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ":host{--gap: 0;--_direction: column;display:flex;flex-direction:var(--_direction);gap:var(--gap);max-inline-size:100%;inline-size:100%}:host([horizontal]:not([horizontal=\"false\"])){--_direction: row}:host([wrap]:not([wrap=\"false\"])){flex-wrap:wrap}:host([gap=\"none\"]){--gap: 0}:host([gap=\"xs\"]){--gap: var(--odx-size-25)}:host([gap=\"sm\"]){--gap: var(--odx-size-50)}:host,:host([gap=\"md\"]){--gap: var(--odx-size-75)}:host([gap=\"lg\"]){--gap: var(--odx-size-150)}:host([gap=\"xl\"]){--gap: var(--odx-size-225)}:host([align-items=\"center\"]){align-items:center}:host,:host([align-items=\"start\"]){align-items:flex-start}:host([align-items=\"end\"]){align-items:flex-end}:host([align-items=\"stretch\"]){align-items:stretch}:host([justify-content=\"center\"]){justify-content:center}:host([justify-content=\"start\"]){justify-content:flex-start}:host([justify-content=\"end\"]){justify-content:flex-end}:host,:host([justify-content=\"stretch\"]){justify-content:stretch}:host([justify-content=\"space-between\"]){justify-content:space-between}:host([justify-content=\"space-around\"]){justify-content:space-around}:host([justify-content=\"space-evenly\"]){justify-content:space-evenly}";
1
+ const styles = ":host{--_direction: column;display:flex;flex-direction:var(--_direction);gap:var(--gap, var(--_gap, 0));max-inline-size:100%;inline-size:100%}:host([horizontal]:not([horizontal=\"false\"])){--_direction: row}:host([wrap]:not([wrap=\"false\"])){flex-wrap:wrap}:host([gap=\"none\"]){--_gap: 0}:host([gap=\"xs\"]){--_gap: var(--odx-size-25)}:host([gap=\"sm\"]){--_gap: var(--odx-size-50)}:host,:host([gap=\"md\"]){--_gap: var(--odx-size-75)}:host([gap=\"lg\"]){--_gap: var(--odx-size-150)}:host([gap=\"xl\"]){--_gap: var(--odx-size-225)}:host([align-items=\"center\"]){align-items:center}:host,:host([align-items=\"start\"]){align-items:flex-start}:host([align-items=\"end\"]){align-items:flex-end}:host([align-items=\"stretch\"]){align-items:stretch}:host([justify-content=\"center\"]){justify-content:center}:host([justify-content=\"start\"]){justify-content:flex-start}:host([justify-content=\"end\"]){justify-content:flex-end}:host,:host([justify-content=\"stretch\"]){justify-content:stretch}:host([justify-content=\"space-between\"]){justify-content:space-between}:host([justify-content=\"space-around\"]){justify-content:space-around}:host([justify-content=\"space-evenly\"]){justify-content:space-evenly}";
2
2
 
3
3
  export { styles as default };
package/dist/src/lib/models/custom-element.css.js CHANGED
@@ -1,3 +1,3 @@
1
- const customElementStyles = "@layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-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);color:inherit}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 odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-reset{:where(*,*:before,*:after){box-sizing:border-box}:where(:host){box-sizing:border-box;border:none;color:inherit}#root,#__next{isolation:isolate}[hidden]{display:none}}";
1
+ const customElementStyles = "@layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-base{html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",\"Kanit\",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}*:not(body){scrollbar-width:thin}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);color:inherit}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 odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-reset{:where(*,*:before,*:after){box-sizing:border-box}:where(:host){box-sizing:border-box;border:none;color:inherit}#root,#__next{isolation:isolate}[hidden]{display:none}}";
2
2
 
3
3
  export { customElementStyles as default };
package/dist/styles/main.css CHANGED
@@ -1 +1 @@
1
- @layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-reset{*,*:before,*:after{box-sizing:border-box}:root{font-size:150%}:where(img,picture,video,canvas,svg){display:block;max-width:100%;margin:0;padding:0}:where(input,button,textarea,select){font:inherit;margin:0;padding:0}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;margin:0;padding:0}::selection{background-color:var(--odx-color-foreground-highlight);color:var(--odx-color-foreground-inverse)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}#root,#__next{isolation:isolate}input[type=search]::-webkit-search-cancel-button{appearance:none;aspect-ratio:1;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.3,7.3l-3.3,3.3-3.3-3.3-1.4,1.4,3.3,3.3-3.3,3.3,1.4,1.4,3.3-3.3,3.3,3.3,1.4-1.4-3.3-3.3,3.3-3.3-1.4-1.4Zm-3.3-5.3C6.5,2,2,6.5,2,12s4.5,10,10,10,10-4.5,10-10S17.5,2,12,2Zm0,18c-4.4,0-8-3.6-8-8S7.6,4,12,4s8,3.6,8,8-3.6,8-8,8Z' style='fill:%23002766;'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-clip:content-box;background-position:center;background-size:var(--odx-typography-font-size-5);block-size:var(--odx-size-225);cursor:pointer;margin:0;margin-inline-end:-2px;max-block-size:100%;transition:var(--odx-transition-reduced)}input[type=search]::-webkit-search-cancel-button:hover{color:var(--odx-color-foreground-highlight)}odx-spinbox>input::-webkit-inner-spin-button{appearance:none}}@layer odx-base{:root{--odx-border-radius-circle: 9999px;--odx-border-radius-controls: var(--odx-border-radius-sm);--odx-border-radius-lg: var(--odx-size-50);--odx-border-radius-md: 5px;--odx-border-radius-ml: var(--odx-size-37);--odx-border-radius-none: 0;--odx-border-radius-sm: 3px;--odx-border-width-none: 0;--odx-border-width-thick: 2px;--odx-border-width-thickest: var(--odx-size-25);--odx-border-width-thin: var(--odx-size-px);--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0;--odx-color-backdrop: var(--odx-palette-blue-100-30);--odx-color-background-cool: var(--odx-palette-coolgray-00);--odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);--odx-color-background-draeger: var(--odx-palette-blue-80);--odx-color-background-main: var(--odx-palette-white);--odx-color-background-sand: var(--odx-palette-sandgray-10);--odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);--odx-color-background-sidesheet: var(--odx-palette-white);--odx-color-background-warm: var(--odx-palette-warmgray-10);--odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);--odx-color-confirmation-hover: var(--odx-palette-orange-70);--odx-color-confirmation-pressed: var(--odx-palette-orange-80);--odx-color-confirmation-rest: var(--odx-palette-orange-60);--odx-color-danger-background: var(--odx-palette-red-00);--odx-color-danger-hover: var(--odx-palette-red-70);--odx-color-danger-pressed: var(--odx-palette-red-80);--odx-color-danger-rest: var(--odx-palette-red-60);--odx-color-danger-stroke: var(--odx-palette-red-20);--odx-color-danger-stroke-hover: var(--odx-palette-red-30);--odx-color-disabled-fill: var(--odx-palette-coolgray-10);--odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);--odx-color-disabled-foreground: var(--odx-palette-coolgray-50);--odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);--odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);--odx-color-disabled-stroke: var(--odx-palette-transparent);--odx-color-focus-inner: var(--odx-palette-white);--odx-color-focus-outer: var(--odx-palette-cyan-70);--odx-color-foreground: var(--odx-palette-blue-80);--odx-color-foreground-danger: var(--odx-palette-red-60);--odx-color-foreground-dark: var(--odx-palette-blue-80);--odx-color-foreground-highlight: var(--odx-palette-cyan-70);--odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);--odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-foreground-inverse: var(--odx-palette-white);--odx-color-foreground-light: var(--odx-palette-white);--odx-color-foreground-muted: var(--odx-palette-blue-80-60);--odx-color-highlight-hover: var(--odx-palette-cyan-70);--odx-color-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-highlight-rest: var(--odx-palette-cyan-60);--odx-color-input-control-fill: var(--odx-palette-coolgray-10);--odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-input-control-fill-readonly: var(--odx-palette-transparent);--odx-color-input-control-stroke: var(--odx-palette-coolgray-20);--odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);--odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-neutral-hover: var(--odx-palette-coolgray-40);--odx-color-neutral-pressed: var(--odx-palette-coolgray-50);--odx-color-neutral-rest: var(--odx-palette-coolgray-30);--odx-color-overlay: var(--odx-palette-white-60);--odx-color-primary-background: var(--odx-palette-blue-00);--odx-color-primary-hover: var(--odx-palette-blue-90);--odx-color-primary-pressed: var(--odx-palette-blue-100);--odx-color-primary-rest: var(--odx-palette-blue-80);--odx-color-scrollbar: var(--odx-palette-coolgray-40);--odx-color-selected: var(--odx-palette-cyan-60-15);--odx-color-selected-hover: var(--odx-palette-cyan-60-20);--odx-color-selection-control-fill: var(--odx-palette-coolgray-10);--odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);--odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);--odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);--odx-color-selection-control-foreground-readonly: var(--odx-color-foreground);--odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);--odx-color-separator: var(--odx-palette-coolgray-20);--odx-color-separator-strong: var(--odx-palette-coolgray-130);--odx-color-shadow: var(--odx-palette-blue-100-30);--odx-color-success-background: var(--odx-palette-green-00);--odx-color-success-hover: var(--odx-palette-green-70);--odx-color-success-pressed: var(--odx-palette-green-80);--odx-color-success-rest: var(--odx-palette-green-60);--odx-color-transparent-hover: var(--odx-palette-blue-80-5);--odx-color-transparent-pressed: var(--odx-palette-blue-80-15);--odx-color-warning-background: var(--odx-palette-yellow-00);--odx-color-warning-hover: var(--odx-palette-yellow-60);--odx-color-warning-pressed: var(--odx-palette-yellow-70);--odx-color-warning-rest: var(--odx-palette-yellow-50);--odx-elevation-blur: var(--odx-size-12);--odx-experience-color-secondary-foreground: var(--odx-color-foreground);--odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);--odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);--odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);--odx-experience-color-secondary-stroke: var(--odx-palette-transparent);--odx-experience-dimension-control-height-base: var(--odx-size-225);--odx-experience-dimension-control-height-lg: var(--odx-size-300);--odx-experience-dimension-control-height-sm: var(--odx-size-150);--odx-focus-ring-color: var(--odx-color-focus-outer);--odx-focus-ring-offset: var(--odx-size-px);--odx-focus-ring-outline: var(--odx-border-width-thick) solid color(srgb 0 0 0 / 0);--odx-motion-duration-default: 275ms;--odx-motion-duration-fast: .15s;--odx-motion-duration-slow: 375ms;--odx-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);--odx-palette-black: hsl(220 50% 5%);--odx-palette-black-60: hsl(220 50% 5% / .6);--odx-palette-blue-00: hsl(219 70% 96%);--odx-palette-blue-10: hsl(216 65% 90%);--odx-palette-blue-20: hsl(217 71% 80%);--odx-palette-blue-30: hsl(217 75% 70%);--odx-palette-blue-40: hsl(217 80% 60%);--odx-palette-blue-50: hsl(217 75% 48%);--odx-palette-blue-60: hsl(217 90% 40%);--odx-palette-blue-70: hsl(217 95% 30%);--odx-palette-blue-80: hsl(217 100% 20%);--odx-palette-blue-80-5: hsl(217 100% 20% / .05);--odx-palette-blue-80-15: hsl(217 100% 20% / .1);--odx-palette-blue-80-60: hsl(217 100% 20% / .6);--odx-palette-blue-90: hsl(216 100% 10%);--odx-palette-blue-100: hsl(216 100% 1%);--odx-palette-blue-100-30: hsl(216 100% 1% / .3);--odx-palette-coolgray-00: hsl(210 20% 98%);--odx-palette-coolgray-10: hsl(216 20% 95%);--odx-palette-coolgray-20: hsl(213 18% 90%);--odx-palette-coolgray-30: hsl(212 15% 83%);--odx-palette-coolgray-40: hsl(213 15% 76%);--odx-palette-coolgray-50: hsl(210 14.000000000000002% 69%);--odx-palette-coolgray-60: hsl(208 13% 62%);--odx-palette-coolgray-70: hsl(207 12% 55.00000000000001%);--odx-palette-coolgray-80: hsl(208 11% 47%);--odx-palette-coolgray-90: hsl(205 10% 39%);--odx-palette-coolgray-100: hsl(205 16% 31%);--odx-palette-coolgray-110: hsl(210 17% 27%);--odx-palette-coolgray-120: hsl(207 19% 23%);--odx-palette-coolgray-130: hsl(210 20% 20%);--odx-palette-coolgray-140: hsl(210 20% 16%);--odx-palette-coolgray-150: hsl(207 20% 9%);--odx-palette-cyan-00: hsl(200 90% 96%);--odx-palette-cyan-10: hsl(200 100% 92%);--odx-palette-cyan-10-5: hsl(200 100% 92% / .05);--odx-palette-cyan-10-15: hsl(200 100% 92% / .15);--odx-palette-cyan-20: hsl(201 100% 84%);--odx-palette-cyan-30: hsl(201 100% 74%);--odx-palette-cyan-40: hsl(201 100% 65%);--odx-palette-cyan-50: hsl(201 100% 55.00000000000001%);--odx-palette-cyan-60: hsl(205 100% 48%);--odx-palette-cyan-60-15: hsl(205 100% 48% / .15);--odx-palette-cyan-60-20: hsl(205 100% 48% / .2);--odx-palette-cyan-60-25: hsl(205 100% 48% / .25);--odx-palette-cyan-70: hsl(205 100% 40%);--odx-palette-cyan-80: hsl(205 100% 34%);--odx-palette-cyan-90: hsl(205 100% 27%);--odx-palette-cyan-100: hsl(205 100% 20%);--odx-palette-green-00: hsl(138 100% 91%);--odx-palette-green-10: hsl(133 100% 86%);--odx-palette-green-20: hsl(133 100% 79%);--odx-palette-green-30: hsl(133 100% 71%);--odx-palette-green-40: hsl(133 100% 61%);--odx-palette-green-50: hsl(133 91% 50%);--odx-palette-green-60: hsl(133 100% 43%);--odx-palette-green-70: hsl(133 100% 39%);--odx-palette-green-80: hsl(133 100% 33%);--odx-palette-green-90: hsl(133 100% 26%);--odx-palette-green-100: hsl(133 100% 20%);--odx-palette-orange-00: hsl(30 100% 96%);--odx-palette-orange-10: hsl(31 100% 92%);--odx-palette-orange-20: hsl(30 100% 83%);--odx-palette-orange-30: hsl(30 100% 74%);--odx-palette-orange-40: hsl(30 100% 65%);--odx-palette-orange-50: hsl(30 100% 56.00000000000001%);--odx-palette-orange-60: hsl(30 100% 48%);--odx-palette-orange-70: hsl(30 100% 40%);--odx-palette-orange-80: hsl(30 100% 32%);--odx-palette-orange-90: hsl(30 100% 24%);--odx-palette-orange-100: hsl(30 100% 16%);--odx-palette-red-00: hsl(354 100% 96%);--odx-palette-red-10: hsl(0 100% 92%);--odx-palette-red-20: hsl(0 100% 84%);--odx-palette-red-30: hsl(0 100% 74%);--odx-palette-red-40: hsl(0 100% 68%);--odx-palette-red-50: hsl(0 100% 60%);--odx-palette-red-60: hsl(0 100% 46%);--odx-palette-red-70: hsl(0 98% 43%);--odx-palette-red-80: hsl(0 100% 37%);--odx-palette-red-90: hsl(0 100% 30%);--odx-palette-red-100: hsl(0 100% 22%);--odx-palette-sandgray-00: hsl(90 20% 98%);--odx-palette-sandgray-10: hsl(90 18% 96%);--odx-palette-sandgray-20: hsl(90 15% 92%);--odx-palette-sandgray-30: hsl(86 10% 87%);--odx-palette-sandgray-40: hsl(80 7.000000000000001% 84%);--odx-palette-sandgray-50: hsl(82 7.000000000000001% 78%);--odx-palette-sandgray-60: hsl(78 7.000000000000001% 73%);--odx-palette-sandgray-70: hsl(80 7.000000000000001% 67%);--odx-palette-sandgray-80: hsl(80 8% 61%);--odx-palette-sandgray-90: hsl(80 7.000000000000001% 51%);--odx-palette-sandgray-100: hsl(78 6% 41%);--odx-palette-sandgray-110: hsl(80 7.000000000000001% 36%);--odx-palette-sandgray-120: hsl(78 6% 31%);--odx-palette-sandgray-130: hsl(75 6% 26%);--odx-palette-sandgray-140: hsl(77 6% 23%);--odx-palette-sandgray-150: hsl(72 6% 16%);--odx-palette-transparent: hsl(0 0% 100% / 0);--odx-palette-warmgray-00: hsl(0 9% 98%);--odx-palette-warmgray-10: hsl(0 9% 96%);--odx-palette-warmgray-20: hsl(0 10% 90%);--odx-palette-warmgray-30: hsl(0 7.000000000000001% 85%);--odx-palette-warmgray-40: hsl(0 7.000000000000001% 78%);--odx-palette-warmgray-50: hsl(0 3% 70%);--odx-palette-warmgray-60: hsl(0 3% 63%);--odx-palette-warmgray-70: hsl(0 2% 56.00000000000001%);--odx-palette-warmgray-80: hsl(0 2% 48%);--odx-palette-warmgray-90: hsl(0 2% 40%);--odx-palette-warmgray-100: hsl(0 2% 31%);--odx-palette-warmgray-120: hsl(0 2% 26%);--odx-palette-warmgray-130: hsl(0 2% 22%);--odx-palette-warmgray-140: hsl(0 2% 20%);--odx-palette-warmgray-150: hsl(0 2% 16%);--odx-palette-white: hsl(0 0% 100%);--odx-palette-white-05: hsl(0 0% 100% / .05);--odx-palette-white-60: hsl(0 0% 100% / .6);--odx-palette-yellow-00: hsl(53 100% 92%);--odx-palette-yellow-10: hsl(53 100% 86%);--odx-palette-yellow-20: hsl(53 100% 81%);--odx-palette-yellow-30: hsl(52 100% 75%);--odx-palette-yellow-40: hsl(53 100% 64%);--odx-palette-yellow-50: hsl(53 100% 50%);--odx-palette-yellow-60: hsl(53 100% 45%);--odx-palette-yellow-70: hsl(53 100% 37%);--odx-palette-yellow-80: hsl(53 100% 30%);--odx-palette-yellow-90: hsl(53 100% 24%);--odx-palette-yellow-100: hsl(53 100% 18%);--odx-size-12: 2px;--odx-size-25: 4px;--odx-size-37: 6px;--odx-size-50: 8px;--odx-size-75: 12px;--odx-size-100: 16px;--odx-size-125: 20px;--odx-size-150: 24px;--odx-size-175: 28px;--odx-size-200: 32px;--odx-size-225: 36px;--odx-size-250: 40px;--odx-size-300: 48px;--odx-size-350: 56px;--odx-size-400: 64px;--odx-size-450: 72px;--odx-size-500: 80px;--odx-size-600: 96px;--odx-size-700: 112px;--odx-size-800: 128px;--odx-size-900: 144px;--odx-size-1000: 160px;--odx-size-base: 16px;--odx-size-px: 1px;--odx-typography-font-family-base: Draeger Pangea Text;--odx-typography-font-family-brand: Draeger Pangea Text;--odx-typography-font-size-1: 10px;--odx-typography-font-size-2: 14px;--odx-typography-font-size-3: 16px;--odx-typography-font-size-4: 18px;--odx-typography-font-size-5: 20px;--odx-typography-font-size-6: 24px;--odx-typography-font-size-7: 30px;--odx-typography-font-size-8: 40px;--odx-typography-font-size-9: 48px;--odx-typography-font-size-10: 54px;--odx-typography-font-size-11: 68px;--odx-typography-font-size-12: 76px;--odx-typography-font-size-13: 94px;--odx-typography-font-size-base: 16px;--odx-typography-font-weight-medium: 500;--odx-typography-font-weight-normal: 400;--odx-typography-font-weight-semibold: 600;--odx-typography-line-height-1: 14px;--odx-typography-line-height-2: 19px;--odx-typography-line-height-3: 22px;--odx-typography-line-height-4: 24px;--odx-typography-line-height-5: 26px;--odx-typography-line-height-6: 31px;--odx-typography-line-height-7: 39px;--odx-typography-line-height-8: 49px;--odx-typography-line-height-9: 59px;--odx-typography-line-height-10: 64px;--odx-typography-line-height-11: 80px;--odx-typography-line-height-12: 89px;--odx-typography-line-height-13: 110px;--odx-typography-line-height-base: 24px;--odx-typography-weight-fontWeightMedium: Medium;--odx-typography-weight-fontWeightNormal: Regular;--odx-typography-weight-fontWeightSemibold: Semibold}@media (min-width: 479px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 768px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 1;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 990px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-200);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-250);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 1;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 1280px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-13);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-13);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-200);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-250);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-300);--odx-breakpoint-visibility-lg-down-hide: 1;--odx-breakpoint-visibility-lg-down-show: 0;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 1}}}@layer odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-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);color:inherit}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 odx-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}}
1
+ @layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-reset{*,*:before,*:after{box-sizing:border-box}:root{font-size:150%}:where(img,picture,video,canvas,svg){display:block;max-width:100%;margin:0;padding:0}:where(input,button,textarea,select){font:inherit;margin:0;padding:0}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;margin:0;padding:0}::selection{background-color:var(--odx-color-foreground-highlight);color:var(--odx-color-foreground-inverse)}#root,#__next{isolation:isolate}input[type=search]::-webkit-search-cancel-button{appearance:none;aspect-ratio:1;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.3,7.3l-3.3,3.3-3.3-3.3-1.4,1.4,3.3,3.3-3.3,3.3,1.4,1.4,3.3-3.3,3.3,3.3,1.4-1.4-3.3-3.3,3.3-3.3-1.4-1.4Zm-3.3-5.3C6.5,2,2,6.5,2,12s4.5,10,10,10,10-4.5,10-10S17.5,2,12,2Zm0,18c-4.4,0-8-3.6-8-8S7.6,4,12,4s8,3.6,8,8-3.6,8-8,8Z' style='fill:%23002766;'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-clip:content-box;background-position:center;background-size:var(--odx-typography-font-size-5);block-size:var(--odx-size-225);cursor:pointer;margin:0;margin-inline-end:-2px;max-block-size:100%;transition:var(--odx-transition-reduced)}input[type=search]::-webkit-search-cancel-button:hover{color:var(--odx-color-foreground-highlight)}odx-spinbox>input::-webkit-inner-spin-button{appearance:none}}@layer odx-base{:root{--odx-border-radius-circle: 9999px;--odx-border-radius-controls: var(--odx-border-radius-sm);--odx-border-radius-lg: var(--odx-size-50);--odx-border-radius-md: 5px;--odx-border-radius-ml: var(--odx-size-37);--odx-border-radius-none: 0;--odx-border-radius-sm: 3px;--odx-border-width-none: 0;--odx-border-width-thick: 2px;--odx-border-width-thickest: var(--odx-size-25);--odx-border-width-thin: var(--odx-size-px);--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0;--odx-color-backdrop: var(--odx-palette-blue-100-30);--odx-color-background-cool: var(--odx-palette-coolgray-00);--odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);--odx-color-background-draeger: var(--odx-palette-blue-80);--odx-color-background-main: var(--odx-palette-white);--odx-color-background-sand: var(--odx-palette-sandgray-10);--odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);--odx-color-background-sidesheet: var(--odx-palette-white);--odx-color-background-warm: var(--odx-palette-warmgray-10);--odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);--odx-color-confirmation-hover: var(--odx-palette-orange-70);--odx-color-confirmation-pressed: var(--odx-palette-orange-80);--odx-color-confirmation-rest: var(--odx-palette-orange-60);--odx-color-danger-background: var(--odx-palette-red-00);--odx-color-danger-hover: var(--odx-palette-red-70);--odx-color-danger-pressed: var(--odx-palette-red-80);--odx-color-danger-rest: var(--odx-palette-red-60);--odx-color-danger-stroke: var(--odx-palette-red-20);--odx-color-danger-stroke-hover: var(--odx-palette-red-30);--odx-color-disabled-fill: var(--odx-palette-coolgray-10);--odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);--odx-color-disabled-foreground: var(--odx-palette-coolgray-50);--odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);--odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);--odx-color-disabled-stroke: var(--odx-palette-transparent);--odx-color-focus-inner: var(--odx-palette-white);--odx-color-focus-outer: var(--odx-palette-cyan-70);--odx-color-foreground: var(--odx-palette-blue-80);--odx-color-foreground-danger: var(--odx-palette-red-60);--odx-color-foreground-dark: var(--odx-palette-blue-80);--odx-color-foreground-highlight: var(--odx-palette-cyan-70);--odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);--odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-foreground-inverse: var(--odx-palette-white);--odx-color-foreground-light: var(--odx-palette-white);--odx-color-foreground-muted: var(--odx-palette-blue-80-60);--odx-color-highlight-hover: var(--odx-palette-cyan-70);--odx-color-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-highlight-rest: var(--odx-palette-cyan-60);--odx-color-input-control-fill: var(--odx-palette-coolgray-10);--odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-input-control-fill-readonly: var(--odx-palette-transparent);--odx-color-input-control-stroke: var(--odx-palette-coolgray-20);--odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);--odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-neutral-hover: var(--odx-palette-coolgray-40);--odx-color-neutral-pressed: var(--odx-palette-coolgray-50);--odx-color-neutral-rest: var(--odx-palette-coolgray-30);--odx-color-overlay: var(--odx-palette-white-60);--odx-color-primary-background: var(--odx-palette-blue-00);--odx-color-primary-hover: var(--odx-palette-blue-90);--odx-color-primary-pressed: var(--odx-palette-blue-100);--odx-color-primary-rest: var(--odx-palette-blue-80);--odx-color-scrollbar: var(--odx-palette-coolgray-40);--odx-color-selected: var(--odx-palette-cyan-60-15);--odx-color-selected-hover: var(--odx-palette-cyan-60-20);--odx-color-selection-control-fill: var(--odx-palette-coolgray-10);--odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);--odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);--odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);--odx-color-selection-control-foreground-readonly: var(--odx-color-foreground);--odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);--odx-color-separator: var(--odx-palette-coolgray-20);--odx-color-separator-strong: var(--odx-palette-coolgray-130);--odx-color-shadow: var(--odx-palette-blue-100-30);--odx-color-success-background: var(--odx-palette-green-00);--odx-color-success-hover: var(--odx-palette-green-70);--odx-color-success-pressed: var(--odx-palette-green-80);--odx-color-success-rest: var(--odx-palette-green-60);--odx-color-transparent-hover: var(--odx-palette-blue-80-5);--odx-color-transparent-pressed: var(--odx-palette-blue-80-15);--odx-color-warning-background: var(--odx-palette-yellow-00);--odx-color-warning-hover: var(--odx-palette-yellow-60);--odx-color-warning-pressed: var(--odx-palette-yellow-70);--odx-color-warning-rest: var(--odx-palette-yellow-50);--odx-elevation-blur: var(--odx-size-12);--odx-experience-color-secondary-foreground: var(--odx-color-foreground);--odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);--odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);--odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);--odx-experience-color-secondary-stroke: var(--odx-palette-transparent);--odx-experience-dimension-control-height-base: var(--odx-size-225);--odx-experience-dimension-control-height-lg: var(--odx-size-300);--odx-experience-dimension-control-height-sm: var(--odx-size-150);--odx-focus-ring-color: var(--odx-color-focus-outer);--odx-focus-ring-offset: var(--odx-size-px);--odx-focus-ring-outline: var(--odx-border-width-thick) solid color(srgb 0 0 0 / 0);--odx-motion-duration-default: 275ms;--odx-motion-duration-fast: .15s;--odx-motion-duration-slow: 375ms;--odx-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);--odx-palette-black: hsl(220 50% 5%);--odx-palette-black-60: hsl(220 50% 5% / .6);--odx-palette-blue-00: hsl(219 70% 96%);--odx-palette-blue-10: hsl(216 65% 90%);--odx-palette-blue-20: hsl(217 71% 80%);--odx-palette-blue-30: hsl(217 75% 70%);--odx-palette-blue-40: hsl(217 80% 60%);--odx-palette-blue-50: hsl(217 75% 48%);--odx-palette-blue-60: hsl(217 90% 40%);--odx-palette-blue-70: hsl(217 95% 30%);--odx-palette-blue-80: hsl(217 100% 20%);--odx-palette-blue-80-5: hsl(217 100% 20% / .05);--odx-palette-blue-80-15: hsl(217 100% 20% / .1);--odx-palette-blue-80-60: hsl(217 100% 20% / .6);--odx-palette-blue-90: hsl(216 100% 10%);--odx-palette-blue-100: hsl(216 100% 1%);--odx-palette-blue-100-30: hsl(216 100% 1% / .3);--odx-palette-coolgray-00: hsl(210 20% 98%);--odx-palette-coolgray-10: hsl(216 20% 95%);--odx-palette-coolgray-20: hsl(213 18% 90%);--odx-palette-coolgray-30: hsl(212 15% 83%);--odx-palette-coolgray-40: hsl(213 15% 76%);--odx-palette-coolgray-50: hsl(210 14.000000000000002% 69%);--odx-palette-coolgray-60: hsl(208 13% 62%);--odx-palette-coolgray-70: hsl(207 12% 55.00000000000001%);--odx-palette-coolgray-80: hsl(208 11% 47%);--odx-palette-coolgray-90: hsl(205 10% 39%);--odx-palette-coolgray-100: hsl(205 16% 31%);--odx-palette-coolgray-110: hsl(210 17% 27%);--odx-palette-coolgray-120: hsl(207 19% 23%);--odx-palette-coolgray-130: hsl(210 20% 20%);--odx-palette-coolgray-140: hsl(210 20% 16%);--odx-palette-coolgray-150: hsl(207 20% 9%);--odx-palette-cyan-00: hsl(200 90% 96%);--odx-palette-cyan-10: hsl(200 100% 92%);--odx-palette-cyan-10-5: hsl(200 100% 92% / .05);--odx-palette-cyan-10-15: hsl(200 100% 92% / .15);--odx-palette-cyan-20: hsl(201 100% 84%);--odx-palette-cyan-30: hsl(201 100% 74%);--odx-palette-cyan-40: hsl(201 100% 65%);--odx-palette-cyan-50: hsl(201 100% 55.00000000000001%);--odx-palette-cyan-60: hsl(205 100% 48%);--odx-palette-cyan-60-15: hsl(205 100% 48% / .15);--odx-palette-cyan-60-20: hsl(205 100% 48% / .2);--odx-palette-cyan-60-25: hsl(205 100% 48% / .25);--odx-palette-cyan-70: hsl(205 100% 40%);--odx-palette-cyan-80: hsl(205 100% 34%);--odx-palette-cyan-90: hsl(205 100% 27%);--odx-palette-cyan-100: hsl(205 100% 20%);--odx-palette-green-00: hsl(138 100% 91%);--odx-palette-green-10: hsl(133 100% 86%);--odx-palette-green-20: hsl(133 100% 79%);--odx-palette-green-30: hsl(133 100% 71%);--odx-palette-green-40: hsl(133 100% 61%);--odx-palette-green-50: hsl(133 91% 50%);--odx-palette-green-60: hsl(133 100% 43%);--odx-palette-green-70: hsl(133 100% 39%);--odx-palette-green-80: hsl(133 100% 33%);--odx-palette-green-90: hsl(133 100% 26%);--odx-palette-green-100: hsl(133 100% 20%);--odx-palette-orange-00: hsl(30 100% 96%);--odx-palette-orange-10: hsl(31 100% 92%);--odx-palette-orange-20: hsl(30 100% 83%);--odx-palette-orange-30: hsl(30 100% 74%);--odx-palette-orange-40: hsl(30 100% 65%);--odx-palette-orange-50: hsl(30 100% 56.00000000000001%);--odx-palette-orange-60: hsl(30 100% 48%);--odx-palette-orange-70: hsl(30 100% 40%);--odx-palette-orange-80: hsl(30 100% 32%);--odx-palette-orange-90: hsl(30 100% 24%);--odx-palette-orange-100: hsl(30 100% 16%);--odx-palette-red-00: hsl(354 100% 96%);--odx-palette-red-10: hsl(0 100% 92%);--odx-palette-red-20: hsl(0 100% 84%);--odx-palette-red-30: hsl(0 100% 74%);--odx-palette-red-40: hsl(0 100% 68%);--odx-palette-red-50: hsl(0 100% 60%);--odx-palette-red-60: hsl(0 100% 46%);--odx-palette-red-70: hsl(0 98% 43%);--odx-palette-red-80: hsl(0 100% 37%);--odx-palette-red-90: hsl(0 100% 30%);--odx-palette-red-100: hsl(0 100% 22%);--odx-palette-sandgray-00: hsl(90 20% 98%);--odx-palette-sandgray-10: hsl(90 18% 96%);--odx-palette-sandgray-20: hsl(90 15% 92%);--odx-palette-sandgray-30: hsl(86 10% 87%);--odx-palette-sandgray-40: hsl(80 7.000000000000001% 84%);--odx-palette-sandgray-50: hsl(82 7.000000000000001% 78%);--odx-palette-sandgray-60: hsl(78 7.000000000000001% 73%);--odx-palette-sandgray-70: hsl(80 7.000000000000001% 67%);--odx-palette-sandgray-80: hsl(80 8% 61%);--odx-palette-sandgray-90: hsl(80 7.000000000000001% 51%);--odx-palette-sandgray-100: hsl(78 6% 41%);--odx-palette-sandgray-110: hsl(80 7.000000000000001% 36%);--odx-palette-sandgray-120: hsl(78 6% 31%);--odx-palette-sandgray-130: hsl(75 6% 26%);--odx-palette-sandgray-140: hsl(77 6% 23%);--odx-palette-sandgray-150: hsl(72 6% 16%);--odx-palette-transparent: hsl(0 0% 100% / 0);--odx-palette-warmgray-00: hsl(0 9% 98%);--odx-palette-warmgray-10: hsl(0 9% 96%);--odx-palette-warmgray-20: hsl(0 10% 90%);--odx-palette-warmgray-30: hsl(0 7.000000000000001% 85%);--odx-palette-warmgray-40: hsl(0 7.000000000000001% 78%);--odx-palette-warmgray-50: hsl(0 3% 70%);--odx-palette-warmgray-60: hsl(0 3% 63%);--odx-palette-warmgray-70: hsl(0 2% 56.00000000000001%);--odx-palette-warmgray-80: hsl(0 2% 48%);--odx-palette-warmgray-90: hsl(0 2% 40%);--odx-palette-warmgray-100: hsl(0 2% 31%);--odx-palette-warmgray-120: hsl(0 2% 26%);--odx-palette-warmgray-130: hsl(0 2% 22%);--odx-palette-warmgray-140: hsl(0 2% 20%);--odx-palette-warmgray-150: hsl(0 2% 16%);--odx-palette-white: hsl(0 0% 100%);--odx-palette-white-05: hsl(0 0% 100% / .05);--odx-palette-white-60: hsl(0 0% 100% / .6);--odx-palette-yellow-00: hsl(53 100% 92%);--odx-palette-yellow-10: hsl(53 100% 86%);--odx-palette-yellow-20: hsl(53 100% 81%);--odx-palette-yellow-30: hsl(52 100% 75%);--odx-palette-yellow-40: hsl(53 100% 64%);--odx-palette-yellow-50: hsl(53 100% 50%);--odx-palette-yellow-60: hsl(53 100% 45%);--odx-palette-yellow-70: hsl(53 100% 37%);--odx-palette-yellow-80: hsl(53 100% 30%);--odx-palette-yellow-90: hsl(53 100% 24%);--odx-palette-yellow-100: hsl(53 100% 18%);--odx-size-12: 2px;--odx-size-25: 4px;--odx-size-37: 6px;--odx-size-50: 8px;--odx-size-75: 12px;--odx-size-100: 16px;--odx-size-125: 20px;--odx-size-150: 24px;--odx-size-175: 28px;--odx-size-200: 32px;--odx-size-225: 36px;--odx-size-250: 40px;--odx-size-300: 48px;--odx-size-350: 56px;--odx-size-400: 64px;--odx-size-450: 72px;--odx-size-500: 80px;--odx-size-600: 96px;--odx-size-700: 112px;--odx-size-800: 128px;--odx-size-900: 144px;--odx-size-1000: 160px;--odx-size-base: 16px;--odx-size-px: 1px;--odx-typography-font-family-base: Draeger Pangea Text;--odx-typography-font-family-brand: Draeger Pangea Text;--odx-typography-font-size-1: 10px;--odx-typography-font-size-2: 14px;--odx-typography-font-size-3: 16px;--odx-typography-font-size-4: 18px;--odx-typography-font-size-5: 20px;--odx-typography-font-size-6: 24px;--odx-typography-font-size-7: 30px;--odx-typography-font-size-8: 40px;--odx-typography-font-size-9: 48px;--odx-typography-font-size-10: 54px;--odx-typography-font-size-11: 68px;--odx-typography-font-size-12: 76px;--odx-typography-font-size-13: 94px;--odx-typography-font-size-base: 16px;--odx-typography-font-weight-medium: 500;--odx-typography-font-weight-normal: 400;--odx-typography-font-weight-semibold: 600;--odx-typography-line-height-1: 14px;--odx-typography-line-height-2: 19px;--odx-typography-line-height-3: 22px;--odx-typography-line-height-4: 24px;--odx-typography-line-height-5: 26px;--odx-typography-line-height-6: 31px;--odx-typography-line-height-7: 39px;--odx-typography-line-height-8: 49px;--odx-typography-line-height-9: 59px;--odx-typography-line-height-10: 64px;--odx-typography-line-height-11: 80px;--odx-typography-line-height-12: 89px;--odx-typography-line-height-13: 110px;--odx-typography-line-height-base: 24px;--odx-typography-weight-fontWeightMedium: Medium;--odx-typography-weight-fontWeightNormal: Regular;--odx-typography-weight-fontWeightSemibold: Semibold}@media (min-width: 479px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 768px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 1;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 990px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-200);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-250);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 1;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 1280px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-13);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-13);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-200);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-250);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-300);--odx-breakpoint-visibility-lg-down-hide: 1;--odx-breakpoint-visibility-lg-down-show: 0;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 1}}}@layer odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-base{html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}*:not(body){scrollbar-width:thin}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);color:inherit}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 odx-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}}
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": "0.1.0-alpha.17",
4
+ "version": "0.1.0-alpha.19",
5
5
  "author": "Drägerwerk AG & Co.KGaA",
6
6
  "license": "SEE LICENSE IN LICENSE",
7
7
  "homepage": "https://odx.draeger.com",