@odx/foundation 1.0.0-beta.205 → 1.0.0-beta.206
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/link/link.d.ts +1 -1
- package/dist/components/select/select.d.ts +1 -1
- package/dist/components/title/title.d.ts +1 -1
- package/dist/components.js +53 -54
- package/dist/lib/listbox-control-element.d.ts +0 -1
- package/dist/main.js +11 -21
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -13,8 +13,8 @@ export declare class OdxLink extends OdxLink_base {
|
|
|
13
13
|
rel: string;
|
|
14
14
|
download?: string;
|
|
15
15
|
external: boolean;
|
|
16
|
+
inline: boolean;
|
|
16
17
|
strong: boolean;
|
|
17
|
-
subtle: boolean;
|
|
18
18
|
protected render(): TemplateResult;
|
|
19
19
|
click(): void;
|
|
20
20
|
focus(options?: FocusOptions): void;
|
|
@@ -9,11 +9,11 @@ declare global {
|
|
|
9
9
|
export declare class OdxSelect extends ListboxControlElement {
|
|
10
10
|
#private;
|
|
11
11
|
static shadowRootOptions: ShadowRootInit;
|
|
12
|
+
private dropdownOpen;
|
|
12
13
|
protected readonly dropdown: OdxDropdown;
|
|
13
14
|
maxVisibleSelectedOptions: number;
|
|
14
15
|
constructor();
|
|
15
16
|
clear(): void;
|
|
16
|
-
isDropdownOpen(): boolean;
|
|
17
17
|
showDropdown(): void;
|
|
18
18
|
hideDropdown(): void;
|
|
19
19
|
connectedCallback(): void;
|
|
@@ -20,8 +20,8 @@ export declare const TitleSize: {
|
|
|
20
20
|
readonly XXL: "xxl";
|
|
21
21
|
};
|
|
22
22
|
export declare class OdxTitle extends CustomElement {
|
|
23
|
-
size?: TitleSize;
|
|
24
23
|
level?: number;
|
|
24
|
+
size?: TitleSize;
|
|
25
25
|
protected willUpdate(props: PropertyValues<this>): void;
|
|
26
26
|
}
|
|
27
27
|
//# sourceMappingURL=title.d.ts.map
|
package/dist/components.js
CHANGED
|
@@ -11,7 +11,7 @@ import { signal, computed } from '@preact/signals-core';
|
|
|
11
11
|
import 'lit/html.js';
|
|
12
12
|
import { createContext, consume, provide } from '@lit/context';
|
|
13
13
|
|
|
14
|
-
const styles$
|
|
14
|
+
const styles$1l = ":host{--indent-level:1;border-block-end:var(--odx-border-width-thin)solid transparent;display:block}.content{padding:var(--odx-spacing-md);padding-block-start:0;padding-inline-start:calc(var(--indent-level)*var(--odx-spacing-md))}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){--item-indent-level:calc(var(--indent-level) + 1);margin:calc(-1*var(--odx-spacing-md));margin-block-start:0;margin-inline-start:calc(-1*var(--indent-level)*var(--odx-spacing-md))}";
|
|
15
15
|
|
|
16
16
|
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
17
17
|
constructor() {
|
|
@@ -19,7 +19,7 @@ const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
|
19
19
|
this.expanded = false;
|
|
20
20
|
}
|
|
21
21
|
static {
|
|
22
|
-
customElement("odx-accordion-panel", styles$
|
|
22
|
+
customElement("odx-accordion-panel", styles$1l)(_OdxAccordionPanel);
|
|
23
23
|
}
|
|
24
24
|
connectedCallback() {
|
|
25
25
|
super.connectedCallback();
|
|
@@ -41,7 +41,7 @@ __decorateClass([
|
|
|
41
41
|
], _OdxAccordionPanel.prototype, "expanded", 2);
|
|
42
42
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
43
43
|
|
|
44
|
-
const styles$
|
|
44
|
+
const styles$1k = ":host{--indent-level:1;margin-block:var(--_spacing);display:flex}.base{padding-inline-start:calc(var(--indent-level)*var(--_spacing-inline))}.label{flex-direction:column;display:flex}:host([disabled]){--_color-background:transparent;--_color-background-hover:transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([indicator-position=start]) .indicator{--rotate:-90deg;order:-1}:host([expanded]) .indicator{--rotate:180deg}:host([indicator-position=start][expanded]) .indicator{--rotate:0deg}";
|
|
45
45
|
|
|
46
46
|
const AccordionItemIndicatorPosition = pick(Alignment, ["START", "END"]);
|
|
47
47
|
const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveControlElement) {
|
|
@@ -50,7 +50,7 @@ const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(Interact
|
|
|
50
50
|
this.indicatorPosition = AccordionItemIndicatorPosition.END;
|
|
51
51
|
}
|
|
52
52
|
static {
|
|
53
|
-
customElement("odx-accordion-item", styles$
|
|
53
|
+
customElement("odx-accordion-item", styles$1k)(_OdxAccordionItem);
|
|
54
54
|
}
|
|
55
55
|
getPanel() {
|
|
56
56
|
return this.nextElementSibling instanceof OdxAccordionPanel ? this.nextElementSibling : null;
|
|
@@ -77,7 +77,7 @@ __decorateClass([
|
|
|
77
77
|
], _OdxAccordionItem.prototype, "indicatorPosition", 2);
|
|
78
78
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
79
79
|
|
|
80
|
-
const styles$
|
|
80
|
+
const styles$1j = ":host{--item-indent-level:1;display:block}::slotted(:is(odx-accordion-item,odx-accordion-panel)){--indent-level:var(--item-indent-level)}";
|
|
81
81
|
|
|
82
82
|
const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
83
83
|
constructor() {
|
|
@@ -96,7 +96,7 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
96
96
|
new ExpandableItemManager(this);
|
|
97
97
|
}
|
|
98
98
|
static {
|
|
99
|
-
customElement("odx-accordion", styles$
|
|
99
|
+
customElement("odx-accordion", styles$1j)(_OdxAccordion);
|
|
100
100
|
}
|
|
101
101
|
render() {
|
|
102
102
|
return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
|
|
@@ -131,7 +131,7 @@ __decorateClass([
|
|
|
131
131
|
], _OdxAccordion.prototype, "size", 2);
|
|
132
132
|
let OdxAccordion = _OdxAccordion;
|
|
133
133
|
|
|
134
|
-
const styles$
|
|
134
|
+
const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=neutral],:not([variant]))){--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed)}:host(:is([variant=neutral],:not([variant]))[loading]){--_color-stroke:var(--odx-color-stroke-neutral-subtle)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([variant=danger-subtle]){--_color-background:var(--odx-color-background-danger-subtle);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-danger-rest);--_color-foreground-hover:var(--odx-color-foreground-inverse-static)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary][loading]){--_color-background:var(--odx-color-background-primary-subtle)}:host([variant=accent][loading]){--_color-background:var(--odx-color-background-accent-subtle)}:host([variant=danger][loading]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=danger-subtle][loading]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=danger-subtle][loading]),:host([variant=ghost][loading]){--_color-background:var(--odx-color-background-transparent-rest)}}@layer state{:host(:is([active],[odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-position=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}";
|
|
135
135
|
|
|
136
136
|
const buttonDirective = booleanAttributeDirective({ name: "odx-button" });
|
|
137
137
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_SUBTLE", "GHOST"]);
|
|
@@ -159,7 +159,7 @@ const _OdxButton = class _OdxButton extends LinkControlElement {
|
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
161
|
static {
|
|
162
|
-
customElement("odx-button", styles$
|
|
162
|
+
customElement("odx-button", styles$1i)(_OdxButton);
|
|
163
163
|
}
|
|
164
164
|
static {
|
|
165
165
|
this.formAssociated = true;
|
|
@@ -191,7 +191,7 @@ __decorateClass([
|
|
|
191
191
|
], _OdxButton.prototype, "variant", 2);
|
|
192
192
|
let OdxButton = _OdxButton;
|
|
193
193
|
|
|
194
|
-
const styles$
|
|
194
|
+
const styles$1h = "@layer default{:host{--_min-width:var(--_height)}}@layer variant{:host([done]){cursor:default;[part~=base]{pointer-events:none}}}";
|
|
195
195
|
|
|
196
196
|
const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
197
197
|
constructor() {
|
|
@@ -210,7 +210,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
210
210
|
};
|
|
211
211
|
}
|
|
212
212
|
static {
|
|
213
|
-
customElement("odx-action-button", styles$
|
|
213
|
+
customElement("odx-action-button", styles$1h)(_OdxActionButton);
|
|
214
214
|
}
|
|
215
215
|
#statusTimeout;
|
|
216
216
|
firstUpdated(props) {
|
|
@@ -235,7 +235,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
235
235
|
}
|
|
236
236
|
renderLabel(label) {
|
|
237
237
|
const timeout = this.done ? this.statusMessageTimeout : null;
|
|
238
|
-
return html`<odx-tooltip size="sm" placement="${optionalAttr(this.labelPlacement)}" timeout="${optionalAttr(timeout)}" ?interactive="${this.done}" ?show="${this.done && !this.label}"
|
|
238
|
+
return html`<odx-tooltip class="odx-text-sm odx-text-strong" size="sm" placement="${optionalAttr(this.labelPlacement)}" timeout="${optionalAttr(timeout)}" ?interactive="${this.done}" ?show="${this.done && !this.label}">${label}</odx-tooltip>`;
|
|
239
239
|
}
|
|
240
240
|
updated(props) {
|
|
241
241
|
super.updated(props);
|
|
@@ -294,7 +294,7 @@ __decorateClass([
|
|
|
294
294
|
], _OdxActionButton.prototype, "replaceContent", 2);
|
|
295
295
|
let OdxActionButton = _OdxActionButton;
|
|
296
296
|
|
|
297
|
-
const styles$
|
|
297
|
+
const styles$1g = "@layer variant{:host([variant=danger]){--_color-background-hover:var(--odx-color-background-danger-subtle);--_color-background-pressed:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}}";
|
|
298
298
|
|
|
299
299
|
const MenuItemSize = pick(ControlSize, ["SM", "MD"]);
|
|
300
300
|
const MenuItemVariant = pick(Variant, ["NEUTRAL", "DANGER"]);
|
|
@@ -306,7 +306,7 @@ const _OdxMenuItem = class _OdxMenuItem extends LinkControlElement {
|
|
|
306
306
|
this.variant = MenuItemVariant.NEUTRAL;
|
|
307
307
|
}
|
|
308
308
|
static {
|
|
309
|
-
customElement("odx-menu-item", styles$
|
|
309
|
+
customElement("odx-menu-item", styles$1g)(_OdxMenuItem);
|
|
310
310
|
}
|
|
311
311
|
renderContent() {
|
|
312
312
|
return html`${when(
|
|
@@ -335,11 +335,11 @@ __decorateClass([
|
|
|
335
335
|
], _OdxMenuItem.prototype, "variant", 2);
|
|
336
336
|
let OdxMenuItem = _OdxMenuItem;
|
|
337
337
|
|
|
338
|
-
const styles$
|
|
338
|
+
const styles$1f = ":host{gap:var(--odx-spacing-md);flex-flow:row;justify-content:flex-end;align-items:center;display:flex;overflow:hidden}::slotted([hidden]){visibility:hidden}";
|
|
339
339
|
|
|
340
340
|
class OdxActionGroup extends CustomElement {
|
|
341
341
|
static {
|
|
342
|
-
customElement("odx-action-group", styles$
|
|
342
|
+
customElement("odx-action-group", styles$1f)(OdxActionGroup);
|
|
343
343
|
}
|
|
344
344
|
#intersectionObserver;
|
|
345
345
|
#visibleElements = /* @__PURE__ */ new WeakSet();
|
|
@@ -399,7 +399,7 @@ class OdxActionGroup extends CustomElement {
|
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
401
|
|
|
402
|
-
const styles$
|
|
402
|
+
const styles$1e = "@layer state{:host([active]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--odx-color-background-transparent-selected-pressed);font-weight:var(--odx-typography-font-weight-medium);::slotted(odx-icon[slot=prefix]){color:var(--odx-color-foreground-accent-rest)}}:host([active][appearance=link]){--_color-background:var(--odx-color-background-transparent-rest)}:host([active][disabled]){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([appearance=link][active]){--_color-background-hover:transparent}}@layer variant{:host([compact]){--_height:var(--odx-size-300);--_font-size:var(--odx-font-size-text-sm);justify-content:center;::slotted([slot=badge]){inset-inline-end:calc(50% - var(--odx-spacing-50))}.base{flex-direction:column;justify-content:center}.label{flex:none}}:host([size=sm][compact]){--_height:var(--odx-size-225)}:host([size=lg][compact]){--_height:var(--odx-size-450);--_font-size:var(--odx-font-size-text-md)}:host([appearance=link]){--_color-background-hover:var(--odx-color-background-transparent-rest);.label{position:relative;&:after{transition:var(--odx-transition-reduced);opacity:0;background-color:var(--odx-color-background-primary-rest);height:var(--odx-border-width-thick);content:\"\";transition-property:background-color,opacity,inset;position:absolute;inset:0 50%;inset-block-start:auto}}}:host([appearance=link][size=lg]){.label:after{inset-block-end:var(--odx-spacing-12)}}:host([appearance=link]:hover),:host([appearance=link][active]){.label:after{inset-inline:var(--odx-spacing-md);opacity:1}}:host([appearance=link][active]){.label:after{background-color:var(--odx-color-background-accent-rest)}}}";
|
|
403
403
|
|
|
404
404
|
const NavigationItemAppearance = { BUTTON: "button", LINK: "link" };
|
|
405
405
|
const _OdxNavigationItem = class _OdxNavigationItem extends LinkControlElement {
|
|
@@ -410,7 +410,7 @@ const _OdxNavigationItem = class _OdxNavigationItem extends LinkControlElement {
|
|
|
410
410
|
this.compact = false;
|
|
411
411
|
}
|
|
412
412
|
static {
|
|
413
|
-
customElement("odx-navigation-item", styles$
|
|
413
|
+
customElement("odx-navigation-item", styles$1e)(_OdxNavigationItem);
|
|
414
414
|
}
|
|
415
415
|
};
|
|
416
416
|
__decorateClass([
|
|
@@ -424,7 +424,7 @@ __decorateClass([
|
|
|
424
424
|
], _OdxNavigationItem.prototype, "compact", 2);
|
|
425
425
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
426
426
|
|
|
427
|
-
const styles$
|
|
427
|
+
const styles$1d = ":host{--_indicator-position:var(--odx-spacing-sm);--_indicator-width:0;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}.container{position:relative}.indicator{transition:var(--odx-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:not([size])){--_height:var(--odx-control-height-sm);--_spacing:var(--odx-control-spacing-sm)}::slotted(odx-navigation-item[active]){--_color-background:transparent;--_color-background-hover:transparent}:host(:is([alignment],:not([alignment]))) .indicator{inset-inline:var(--_indicator-position)auto}:host(:not([vertical])){align-items:center;& odx-scroll-container::part(stage){padding-block:var(--odx-control-spacing-lg)}::slotted(odx-navigation-item){min-width:var(--odx-control-min-width-md);text-align:center}}:host([vertical]){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;width:max-content;.container{--_spacing:var(--odx-control-spacing-sm);padding-inline:var(--odx-control-spacing-sm)}.indicator{inset-block:var(--_indicator-position)auto;width:var(--_indicator-height);height:var(--_indicator-width)}::slotted(:not(odx-navigation-item)){margin-inline:var(--odx-spacing-md)}}:host(:is([alignment=start],:not([alignment])):not([vertical])){box-shadow:0 calc(-1*var(--odx-border-width-thin)) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:auto 0}}:host([alignment=end]:not([vertical])){box-shadow:0 var(--odx-border-width-thin) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:0 auto}}:host([vertical]:is([alignment=start],:not([alignment]))){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:auto 0}::slotted(odx-navigation-item){text-align:right}}:host([vertical][alignment=end]){box-shadow:var(--odx-border-width-thin) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:0 auto}}:host([indicator-disabled]){box-shadow:none!important}";
|
|
428
428
|
|
|
429
429
|
const TabBarAlignment = pick(Alignment, ["START", "END"]);
|
|
430
430
|
const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
@@ -470,7 +470,7 @@ const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
|
470
470
|
}
|
|
471
471
|
}
|
|
472
472
|
static {
|
|
473
|
-
customElement("odx-tab-bar", styles$
|
|
473
|
+
customElement("odx-tab-bar", styles$1d)(_OdxTabBar);
|
|
474
474
|
}
|
|
475
475
|
#activeIndex;
|
|
476
476
|
#rovingTabindexController;
|
|
@@ -583,7 +583,7 @@ __decorateClass([
|
|
|
583
583
|
], _OdxTabBar.prototype, "vertical", 2);
|
|
584
584
|
let OdxTabBar = _OdxTabBar;
|
|
585
585
|
|
|
586
|
-
const styles$
|
|
586
|
+
const styles$1c = "odx-tab-bar{width:100%}:host(:not([vertical])){& odx-tab-bar{align-items:center}}";
|
|
587
587
|
|
|
588
588
|
const hrefIdRegex = /^#([^?]+)/;
|
|
589
589
|
function getIdFromHref(href) {
|
|
@@ -639,7 +639,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
639
639
|
}
|
|
640
640
|
}
|
|
641
641
|
static {
|
|
642
|
-
customElement("odx-anchor-navigation", styles$
|
|
642
|
+
customElement("odx-anchor-navigation", styles$1c)(_OdxAnchorNavigation);
|
|
643
643
|
}
|
|
644
644
|
#items;
|
|
645
645
|
#intersectionObserver;
|
|
@@ -695,7 +695,7 @@ __decorateClass([
|
|
|
695
695
|
], _OdxAnchorNavigation.prototype, "vertical", 2);
|
|
696
696
|
let OdxAnchorNavigation = _OdxAnchorNavigation;
|
|
697
697
|
|
|
698
|
-
const styles$
|
|
698
|
+
const styles$1b = ":host{column-gap:var(--odx-spacing-md);align-items:center;width:100%;display:flex}.content{gap:var(--odx-spacing-sm);flex-wrap:wrap;align-items:center;margin-inline-start:auto;display:flex}:host(:is(:not([size]),[size=md])){min-height:var(--odx-size-300)}:host([size=sm]){min-height:var(--odx-size-225)}:host([size=lg]){min-height:var(--odx-size-400)}";
|
|
699
699
|
|
|
700
700
|
const AreaFooterAlignment = pick(Alignment, ["CENTER", "START", "END"]);
|
|
701
701
|
const AreaFooterSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -706,7 +706,7 @@ const _OdxAreaFooter = class _OdxAreaFooter extends CustomElement {
|
|
|
706
706
|
this.size = AreaFooterSize.SM;
|
|
707
707
|
}
|
|
708
708
|
static {
|
|
709
|
-
customElement("odx-area-footer", styles$
|
|
709
|
+
customElement("odx-area-footer", styles$1b)(_OdxAreaFooter);
|
|
710
710
|
}
|
|
711
711
|
render() {
|
|
712
712
|
return html`<slot name="prefix"></slot><div class="content"><slot></slot></div>`;
|
|
@@ -720,8 +720,6 @@ __decorateClass([
|
|
|
720
720
|
], _OdxAreaFooter.prototype, "size", 2);
|
|
721
721
|
let OdxAreaFooter = _OdxAreaFooter;
|
|
722
722
|
|
|
723
|
-
const styles$1b = ":host{line-height:inherit;color:inherit;font-family:var(--odx-typography-font-family-brand);font-size:inherit;font-weight:var(--odx-typography-font-weight-semibold);display:block}:host([size=xs]){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=sm]){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=md]){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=lg]){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=xl]){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=xxl]){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl);font-weight:var(--odx-typography-font-weight-semibold)}:host([size^=display-]){font-weight:var(--odx-typography-font-weight-medium)}:host([size=display-sm]){line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}:host([size=display-md]){line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}:host([size=display-lg]){line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}:host([size=display-xl]){line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}";
|
|
724
|
-
|
|
725
723
|
const TitleSize = {
|
|
726
724
|
...pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]),
|
|
727
725
|
DISPLAY_SM: "display-sm",
|
|
@@ -731,7 +729,7 @@ const TitleSize = {
|
|
|
731
729
|
};
|
|
732
730
|
const _OdxTitle = class _OdxTitle extends CustomElement {
|
|
733
731
|
static {
|
|
734
|
-
customElement("odx-title"
|
|
732
|
+
customElement("odx-title")(_OdxTitle);
|
|
735
733
|
}
|
|
736
734
|
willUpdate(props) {
|
|
737
735
|
super.willUpdate(props);
|
|
@@ -741,12 +739,12 @@ const _OdxTitle = class _OdxTitle extends CustomElement {
|
|
|
741
739
|
}
|
|
742
740
|
}
|
|
743
741
|
};
|
|
744
|
-
__decorateClass([
|
|
745
|
-
property({ reflect: true })
|
|
746
|
-
], _OdxTitle.prototype, "size", 2);
|
|
747
742
|
__decorateClass([
|
|
748
743
|
property({ type: Number })
|
|
749
744
|
], _OdxTitle.prototype, "level", 2);
|
|
745
|
+
__decorateClass([
|
|
746
|
+
property({ reflect: true })
|
|
747
|
+
], _OdxTitle.prototype, "size", 2);
|
|
750
748
|
let OdxTitle = _OdxTitle;
|
|
751
749
|
|
|
752
750
|
const styles$1a = ":host{column-gap:var(--odx-spacing-md);align-items:center;display:flex}.base{flex:1}.header{column-gap:var(--odx-spacing-md);flex-wrap:wrap;align-items:center;display:flex}::slotted(odx-title){align-items:center;display:flex}:host([alignment=start]){align-items:flex-start}:host([alignment=end]){::slotted([slot=suffix]),.base{align-self:flex-end}}:host(:is(:not([size]),[size=md])){min-height:var(--odx-size-400);.header{line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.content{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}}:host([size=xs]){min-height:var(--odx-size-225);.header{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-heading-xs)}.content{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}}:host([size=sm]){min-height:var(--odx-size-300);.header{line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.content{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}}:host([size=lg]){min-height:var(--odx-size-500);.header{line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.content{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}}:host([size=xl]){min-height:var(--odx-size-600);.header{line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.content{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}";
|
|
@@ -1450,7 +1448,7 @@ __decorateClass([
|
|
|
1450
1448
|
], _OdxBadge.prototype, "variant", 2);
|
|
1451
1449
|
let OdxBadge = _OdxBadge;
|
|
1452
1450
|
|
|
1453
|
-
const styles$13 = ":host{
|
|
1451
|
+
const styles$13 = ":host{display:inline-block}";
|
|
1454
1452
|
|
|
1455
1453
|
const _OdxLink = class _OdxLink extends CanBeDisabled(CustomElement) {
|
|
1456
1454
|
constructor() {
|
|
@@ -1459,15 +1457,15 @@ const _OdxLink = class _OdxLink extends CanBeDisabled(CustomElement) {
|
|
|
1459
1457
|
this.target = "";
|
|
1460
1458
|
this.rel = "noreferrer noopener";
|
|
1461
1459
|
this.external = false;
|
|
1460
|
+
this.inline = false;
|
|
1462
1461
|
this.strong = false;
|
|
1463
|
-
this.subtle = false;
|
|
1464
1462
|
}
|
|
1465
1463
|
static {
|
|
1466
1464
|
customElement("odx-link", styles$13)(_OdxLink);
|
|
1467
1465
|
}
|
|
1468
1466
|
render() {
|
|
1469
1467
|
const { ariaLabel, ariaCurrent, ariaHidden } = this;
|
|
1470
|
-
return html`<a class="base
|
|
1468
|
+
return html`<a class="base odx-link" aria-label="${optionalAttr(ariaLabel)}" aria-current="${optionalAttr(ariaCurrent)}" aria-hidden="${optionalAttr(ariaHidden)}" href="${optionalAttr(this.href)}" target="${optionalAttr(this.href && this.target)}" download="${optionalAttr(this.href && this.download)}" rel="${optionalAttr(this.href && (this.rel || "noreferrer noopener"))}" ?disabled="${this.disabled}"><slot></slot>${when(this.external, () => html`<odx-icon name="core::link-external"></odx-icon>`)}</a>`;
|
|
1471
1469
|
}
|
|
1472
1470
|
click() {
|
|
1473
1471
|
this.focusTarget.click();
|
|
@@ -1477,7 +1475,7 @@ const _OdxLink = class _OdxLink extends CanBeDisabled(CustomElement) {
|
|
|
1477
1475
|
}
|
|
1478
1476
|
};
|
|
1479
1477
|
__decorateClass([
|
|
1480
|
-
query("
|
|
1478
|
+
query(".base", true)
|
|
1481
1479
|
], _OdxLink.prototype, "focusTarget", 2);
|
|
1482
1480
|
__decorateClass([
|
|
1483
1481
|
property()
|
|
@@ -1496,10 +1494,10 @@ __decorateClass([
|
|
|
1496
1494
|
], _OdxLink.prototype, "external", 2);
|
|
1497
1495
|
__decorateClass([
|
|
1498
1496
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
1499
|
-
], _OdxLink.prototype, "
|
|
1497
|
+
], _OdxLink.prototype, "inline", 2);
|
|
1500
1498
|
__decorateClass([
|
|
1501
1499
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
1502
|
-
], _OdxLink.prototype, "
|
|
1500
|
+
], _OdxLink.prototype, "strong", 2);
|
|
1503
1501
|
let OdxLink = _OdxLink;
|
|
1504
1502
|
|
|
1505
1503
|
const styles$12 = ":host{column-gap:var(--odx-spacing-sm);min-height:var(--odx-control-height-lg);flex-wrap:wrap;place-items:center;display:flex}::slotted(odx-link){gap:var(--odx-control-spacing-sm);align-items:center;display:inline-flex}::slotted(odx-link:last-of-type){color:var(--odx-color-foreground-rest)}::slotted([hidden]){display:none}::slotted([odx-breadcrumbs-separator]){margin-inline:var(--odx-spacing-negative-12);color:var(--odx-color-foreground-rest-subtle);pointer-events:none}";
|
|
@@ -1527,7 +1525,6 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
|
1527
1525
|
for (const link of this.#getLinks()) {
|
|
1528
1526
|
const nextLink = link.nextElementSibling;
|
|
1529
1527
|
link.ariaCurrent = nextLink ? null : "page";
|
|
1530
|
-
link.subtle = true;
|
|
1531
1528
|
link.strong = !nextLink;
|
|
1532
1529
|
if (!nextLink) continue;
|
|
1533
1530
|
const separator = breadcrumbsItemSeparator.cloneNode(true);
|
|
@@ -2254,7 +2251,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
2254
2251
|
)}<slot name="badge"></slot>`;
|
|
2255
2252
|
}
|
|
2256
2253
|
renderLabel(label) {
|
|
2257
|
-
return html`<odx-tooltip placement="${optionalAttr(this.labelPlacement)}" size="sm" variant="${this.#resolveTooltipVariant()}"
|
|
2254
|
+
return html`<odx-tooltip class="odx-text-sm odx-text-strong" placement="${optionalAttr(this.labelPlacement)}" size="sm" variant="${this.#resolveTooltipVariant()}">${label}</odx-tooltip>`;
|
|
2258
2255
|
}
|
|
2259
2256
|
#handleLabelChange() {
|
|
2260
2257
|
this.focusTarget.ariaLabel = this.label || null;
|
|
@@ -2910,7 +2907,6 @@ class OdxMainMenu extends CustomElement {
|
|
|
2910
2907
|
#handleSlotChange = () => {
|
|
2911
2908
|
for (const link of getAssignedElements(this.renderRoot, { selector: OdxLink.tagName })) {
|
|
2912
2909
|
link.slot ||= "link-navigation";
|
|
2913
|
-
link.subtle = true;
|
|
2914
2910
|
}
|
|
2915
2911
|
};
|
|
2916
2912
|
}
|
|
@@ -3595,7 +3591,7 @@ const _OdxSearchBar = class _OdxSearchBar extends CanBeDisabled(CustomElement) {
|
|
|
3595
3591
|
}
|
|
3596
3592
|
}
|
|
3597
3593
|
render() {
|
|
3598
|
-
return html`<odx-input clearable class="input" part="input" spellcheck="false" autocomplete="off" placeholder="${this.placeholder}" type="search" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @clear="${this.#handleClear}" @input="${this.#handleInput}" @search="${this.#handleSearch}"><odx-icon name="core::search" slot="prefix"></odx-icon><slot name="suffix" slot="suffix"></slot></odx-input>`;
|
|
3594
|
+
return html`<odx-input clearable class="input" part="input" spellcheck="false" autocomplete="off" placeholder="${this.placeholder}" type="search" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @clear="${this.#handleClear}" @input="${this.#handleInput}" @search="${this.#handleSearch}"><odx-icon name="core::search" slot="prefix"></odx-icon><slot name="suffix" slot="suffix"><span></span></slot></odx-input>`;
|
|
3599
3595
|
}
|
|
3600
3596
|
#handleSearch;
|
|
3601
3597
|
#handleInput;
|
|
@@ -3629,20 +3625,22 @@ __decorateClass([
|
|
|
3629
3625
|
], _OdxSearchBar.prototype, "value", 2);
|
|
3630
3626
|
let OdxSearchBar = _OdxSearchBar;
|
|
3631
3627
|
|
|
3632
|
-
const styles$o = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-border-radius-controls);cursor:pointer;min-width:15ch;max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-stroke-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-inline:calc(2*var(--_spacing-inline))var(--_spacing-inline);height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)
|
|
3628
|
+
const styles$o = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-border-radius-controls);cursor:pointer;min-width:15ch;max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{--_spacing-offset:var(--odx-spacing-12);gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-stroke-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-block-start:var(--odx-border-width-thin);padding-inline:calc(2*var(--_spacing-inline) + var(--_spacing-offset))calc(var(--_spacing-inline) + var(--_spacing-offset));height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.value{font-weight:var(--odx-typography-font-weight-medium);margin-inline-end:auto}.indicator{font-size:var(--odx-control-addon-size-md);margin-inline-end:var(--odx-spacing-negative-12)}.action.clear{margin-inline-end:calc(-1*var(--_spacing-inline))}.dropdown{--_popover-spacing-inner:0;--_popover-offset:0}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host(.odx-fill){max-width:100%}:host:has(.dropdown[open]){--_color-background:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-hover)}::slotted(odx-link){margin:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md)}:host(:hover){--_color-background:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-hover)}}@layer state{:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing-inline)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed;& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-color-background-control-readonly);--_color-stroke:var(--odx-color-stroke-control-readonly);cursor:default;& odx-chip{--_color-background:var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
3633
3629
|
|
|
3634
3630
|
const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
3635
3631
|
constructor() {
|
|
3636
3632
|
super();
|
|
3633
|
+
this.dropdownOpen = false;
|
|
3637
3634
|
this.maxVisibleSelectedOptions = 2;
|
|
3638
3635
|
this.#handleSlotChange = () => {
|
|
3639
3636
|
super.handleSlotChange();
|
|
3640
3637
|
const optionType = this.multiple ? OptionType.CHECKBOX : null;
|
|
3641
|
-
this.
|
|
3638
|
+
for (const option of this.getOptions()) {
|
|
3642
3639
|
option.type = optionType;
|
|
3643
|
-
}
|
|
3640
|
+
}
|
|
3644
3641
|
};
|
|
3645
3642
|
this.#handleDropdownToggle = (event) => {
|
|
3643
|
+
this.dropdownOpen = isToggleOpen(event);
|
|
3646
3644
|
if (!isToggleOpen(event)) return;
|
|
3647
3645
|
const [selectedOption] = this.getSelectedOptions();
|
|
3648
3646
|
selectedOption?.scrollIntoView({ behavior: "instant" });
|
|
@@ -3658,11 +3656,11 @@ const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
|
3658
3656
|
};
|
|
3659
3657
|
this.#handleKeyDown = (event) => {
|
|
3660
3658
|
const key = getKeyInfo(event);
|
|
3661
|
-
if ((key.enter || key.space) && this.multiple && this.
|
|
3659
|
+
if ((key.enter || key.space) && this.multiple && this.dropdownOpen) {
|
|
3662
3660
|
event.preventDefault();
|
|
3663
3661
|
return;
|
|
3664
3662
|
}
|
|
3665
|
-
if (key.escape && !this.
|
|
3663
|
+
if (key.escape && !this.dropdownOpen) {
|
|
3666
3664
|
this.#handleClear(event);
|
|
3667
3665
|
}
|
|
3668
3666
|
};
|
|
@@ -3688,9 +3686,6 @@ const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
|
3688
3686
|
clear() {
|
|
3689
3687
|
this.value = this.multiple ? [] : "";
|
|
3690
3688
|
}
|
|
3691
|
-
isDropdownOpen() {
|
|
3692
|
-
return this.dropdown.open;
|
|
3693
|
-
}
|
|
3694
3689
|
showDropdown() {
|
|
3695
3690
|
this.dropdown.showPopover();
|
|
3696
3691
|
}
|
|
@@ -3717,8 +3712,9 @@ const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
|
3717
3712
|
() => when(!(this.disabled || this.readonly), () => html`<slot name="placeholder">${this.placeholder}</slot>`)
|
|
3718
3713
|
)}</div>${when(
|
|
3719
3714
|
this.#isClearable(),
|
|
3720
|
-
() => html`<odx-icon-button icon="core::cancel" size="sm" tabindex="-1" variant="ghost" @click="${this.#handleClear}"></odx-icon-button
|
|
3721
|
-
|
|
3715
|
+
() => html`<odx-icon-button class="action clear" icon="core::cancel" size="sm" tabindex="-1" variant="ghost" @click="${this.#handleClear}"></odx-icon-button>`,
|
|
3716
|
+
() => html`<odx-icon class="indicator" name="core::chevron-down"></odx-icon>`
|
|
3717
|
+
)}</div><odx-dropdown class="dropdown" role="listbox" aria-multiselectable="${toAriaBooleanAttribute(this.multiple, false)}" ?disabled="${dropdownDisabled}" match-reference-width focus-disabled @toggle="${this.#handleDropdownToggle}"><slot @slotchange="${this.#handleSlotChange}"></slot></odx-dropdown>`;
|
|
3722
3718
|
}
|
|
3723
3719
|
#isClearable() {
|
|
3724
3720
|
return !(this.disabled || this.readonly || this.required) && this.getSelectedOptions().length > 0;
|
|
@@ -3730,6 +3726,9 @@ const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
|
3730
3726
|
#handleKeyDown;
|
|
3731
3727
|
#handleSelect;
|
|
3732
3728
|
};
|
|
3729
|
+
__decorateClass([
|
|
3730
|
+
state()
|
|
3731
|
+
], _OdxSelect.prototype, "dropdownOpen", 2);
|
|
3733
3732
|
__decorateClass([
|
|
3734
3733
|
query(OdxDropdown.tagName, true)
|
|
3735
3734
|
], _OdxSelect.prototype, "dropdown", 2);
|
|
@@ -4530,7 +4529,7 @@ __decorateClass([
|
|
|
4530
4529
|
], _OdxTableHeaderCell.prototype, "sortable", 2);
|
|
4531
4530
|
let OdxTableHeaderCell = _OdxTableHeaderCell;
|
|
4532
4531
|
|
|
4533
|
-
const styles$7 = "@layer
|
|
4532
|
+
const styles$7 = "@layer variant{:host([variant=neutral]){color:var(--odx-color-foreground-rest)}:host([variant=neutral-subtle]){color:var(--odx-color-foreground-rest-subtle)}:host([variant=accent]){color:var(--odx-color-background-accent-rest)}:host([variant=success]){color:var(--odx-color-background-success-rest)}:host([variant=danger]){color:var(--odx-color-foreground-danger-rest)}}";
|
|
4534
4533
|
|
|
4535
4534
|
const TextSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
4536
4535
|
const TextVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "ACCENT", "SUCCESS", "DANGER"]);
|
|
@@ -4682,7 +4681,7 @@ __decorateClass([
|
|
|
4682
4681
|
], _OdxToast.prototype, "variant", 2);
|
|
4683
4682
|
let OdxToast = _OdxToast;
|
|
4684
4683
|
|
|
4685
|
-
const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-hover);--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);gap:var(--_spacing-inline);transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline:var(--_spacing-inline);min-width:var(--_height);height:var(--_height);white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:color,background-color,border-color;display:inline-flex;position:relative;overflow:hidden}:host(:hover){border-color:var(--_color-stroke-hover);background-color:var(--_color-background-hover)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}odx-icon,::slotted(odx-icon){margin-inline:calc(-1*var(--_spacing))
|
|
4684
|
+
const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-hover);--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);column-gap:calc(2*var(--_spacing-inline));transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline:calc(2*var(--_spacing-inline));min-width:var(--_height);height:var(--_height);white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:color,background-color,border-color;display:inline-flex;position:relative;overflow:hidden}:host(:hover){border-color:var(--_color-stroke-hover);background-color:var(--_color-background-hover)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}odx-icon,::slotted(odx-icon){--size:var(--_addon-size);margin-inline:calc(-1*var(--_spacing-inline))}[part~=label]{display:inline-block}}@layer state{:host([disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background:var(--odx-color-background-control-readonly);--_color-foreground:var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background:var(--odx-color-background-control-selected);--_color-background-hover:var(--odx-color-background-control-selected-hover);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-stroke:var(--odx-color-stroke-control-selected);--_color-stroke-hover:var(--odx-color-stroke-control-selected)}:host([checked][required]){cursor:default}:host([appearance=ghost][checked]),:host([appearance=ghost][readonly]){--_color-stroke:transparent}:host([appearance=ghost][checked]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground:var(--odx-color-foreground-rest)}}@layer variant{:host(:is(:not([appearance]),[appearance=fill]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([appearance=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent}:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg)}}";
|
|
4686
4685
|
|
|
4687
4686
|
const ToggleButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
4688
4687
|
const ToggleButtonAppearance = pick(Appearance, ["FILL", "GHOST"]);
|
|
@@ -4702,9 +4701,9 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxControl(CustomEl
|
|
|
4702
4701
|
render() {
|
|
4703
4702
|
const currentIcon = this.checked ? this.iconChecked || this.icon : this.icon;
|
|
4704
4703
|
const currentLabel = this.checked ? this.labelChecked || this.label : this.label;
|
|
4705
|
-
return html`${when(currentIcon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)} ${super.render()} ${when(
|
|
4704
|
+
return html`${when(currentIcon, (icon) => html`<odx-icon name="${icon}" slot="prefix"></odx-icon>`)} ${super.render()} ${when(
|
|
4706
4705
|
currentLabel,
|
|
4707
|
-
(label) => html`<odx-tooltip class="tooltip" placement="${optionalAttr(this.labelPlacement)}" size="sm"
|
|
4706
|
+
(label) => html`<odx-tooltip class="tooltip odx-text-sm odx-text-strong" placement="${optionalAttr(this.labelPlacement)}" size="sm">${label}</odx-tooltip>`
|
|
4708
4707
|
)}`;
|
|
4709
4708
|
}
|
|
4710
4709
|
willUpdate(props) {
|
|
@@ -4723,7 +4722,7 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxControl(CustomEl
|
|
|
4723
4722
|
}
|
|
4724
4723
|
}
|
|
4725
4724
|
renderLabel(label) {
|
|
4726
|
-
return html`<odx-tooltip class="tooltip" placement="${optionalAttr(this.labelPlacement)}" size="sm"
|
|
4725
|
+
return html`<odx-tooltip class="tooltip odx-text-sm odx-text-strong" placement="${optionalAttr(this.labelPlacement)}" size="sm">${label}</odx-tooltip>`;
|
|
4727
4726
|
}
|
|
4728
4727
|
};
|
|
4729
4728
|
__decorateClass([
|
|
@@ -24,7 +24,6 @@ export declare class ListboxControlElement<Option extends OptionControlElement =
|
|
|
24
24
|
protected updateValue(option?: Option): void;
|
|
25
25
|
protected willUpdate(props: PropertyValues<this>): void;
|
|
26
26
|
protected updated(props: PropertyValues<this>): void;
|
|
27
|
-
protected updateOptions(updateFn: (option: Option) => void): void;
|
|
28
27
|
}
|
|
29
28
|
export {};
|
|
30
29
|
//# sourceMappingURL=listbox-control-element.d.ts.map
|
package/dist/main.js
CHANGED
|
@@ -7,7 +7,7 @@ import { when } from 'lit/directives/when.js';
|
|
|
7
7
|
|
|
8
8
|
const name = "@odx/foundation";
|
|
9
9
|
const displayName = "ODX Design System Foundation";
|
|
10
|
-
const version = "1.0.0-beta.
|
|
10
|
+
const version = "1.0.0-beta.206";
|
|
11
11
|
const pkg = {
|
|
12
12
|
name,
|
|
13
13
|
displayName,
|
|
@@ -267,7 +267,7 @@ const CheckboxControl = (superClass) => {
|
|
|
267
267
|
return CheckboxControlBehavior;
|
|
268
268
|
};
|
|
269
269
|
|
|
270
|
-
const styles$4 = "@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:host{border:#0000;outline:none}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}& ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap:var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap:var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
|
|
270
|
+
const styles$4 = "@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:host{border:#0000;outline:none}}@layer base{.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>odx-title,[class*=odx-title]{margin-block:0 var(--odx-spacing-sm)}>.odx-text:not(:last-child),>odx-text:not(:last-child),>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}& ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap:var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap:var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
|
|
271
271
|
|
|
272
272
|
function customElement(tagName, ...styles2) {
|
|
273
273
|
return (target) => {
|
|
@@ -1131,7 +1131,7 @@ class ListboxControlElement extends FormAssociated(CustomElement) {
|
|
|
1131
1131
|
}
|
|
1132
1132
|
toggleOption(option, state) {
|
|
1133
1133
|
if (!this.canSelect(option)) return;
|
|
1134
|
-
const newState = state ?? (this.
|
|
1134
|
+
const newState = state ?? !(this.multiple && option.selected);
|
|
1135
1135
|
if (this.disabled || this.readonly) return;
|
|
1136
1136
|
option.selected = newState;
|
|
1137
1137
|
this.updateValue(option);
|
|
@@ -1164,22 +1164,17 @@ class ListboxControlElement extends FormAssociated(CustomElement) {
|
|
|
1164
1164
|
this.emit("change");
|
|
1165
1165
|
}
|
|
1166
1166
|
willUpdate(props) {
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1167
|
+
const optionType = this.multiple ? OptionType.CHECKBOX : null;
|
|
1168
|
+
for (const option of this.getOptions()) {
|
|
1169
|
+
if (props.has("multiple")) {
|
|
1170
1170
|
option.type = optionType;
|
|
1171
|
-
}
|
|
1172
|
-
|
|
1173
|
-
if (props.has("readonly")) {
|
|
1174
|
-
this.updateOptions((option) => {
|
|
1171
|
+
}
|
|
1172
|
+
if (props.has("readonly")) {
|
|
1175
1173
|
option.readonly = this.readonly;
|
|
1176
|
-
}
|
|
1177
|
-
|
|
1178
|
-
if (props.has("value")) {
|
|
1179
|
-
this.updateOptions((option) => {
|
|
1180
|
-
if (!option.canSelect()) return;
|
|
1174
|
+
}
|
|
1175
|
+
if (props.has("value") && option.canSelect()) {
|
|
1181
1176
|
option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
|
|
1182
|
-
}
|
|
1177
|
+
}
|
|
1183
1178
|
}
|
|
1184
1179
|
}
|
|
1185
1180
|
updated(props) {
|
|
@@ -1192,11 +1187,6 @@ class ListboxControlElement extends FormAssociated(CustomElement) {
|
|
|
1192
1187
|
this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
|
|
1193
1188
|
}
|
|
1194
1189
|
}
|
|
1195
|
-
updateOptions(updateFn) {
|
|
1196
|
-
for (const option of this.getOptions()) {
|
|
1197
|
-
updateFn(option);
|
|
1198
|
-
}
|
|
1199
|
-
}
|
|
1200
1190
|
#handleOptionSelection(option) {
|
|
1201
1191
|
if (!option.selected) return;
|
|
1202
1192
|
this.emit("select", { detail: option });
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:where(*):not(:defined){display:none}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}& ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:root{scrollbar-color:var(--odx-color-background-brand)transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-font-size-base)}:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap:var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap:var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}: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-motion-delay-reduced:50ms;--odx-focus-ring-outer:var(--odx-size-12)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm:var(--odx-spacing-negative-px);--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999;--odx-spacing-sm:var(--odx-spacing-37);--odx-spacing-md:var(--odx-spacing-75);--odx-spacing-lg:var(--odx-spacing-100);--odx-content-width-xs:20ch;--odx-content-width-sm:25ch;--odx-content-width-md:50ch;--odx-content-width-lg:80ch;--odx-control-min-width-md:8ch;--odx-control-min-width-lg:15ch;--odx-control-height-sm:var(--odx-size-200);--odx-control-height-md:var(--odx-size-225);--odx-control-height-lg:var(--odx-size-300);--odx-control-stroke-width:var(--odx-border-width-thin);--odx-control-addon-size-xs:var(--odx-size-100);--odx-control-addon-size-sm:var(--odx-size-125);--odx-control-addon-size-md:var(--odx-size-150);--odx-control-addon-size-lg:var(--odx-size-200);--odx-control-spacing-sm:var(--odx-spacing-25);--odx-control-spacing-md:var(--odx-spacing-37);--odx-control-spacing-lg:var(--odx-spacing-50);--odx-control-spacing-inline-sm:var(--odx-control-spacing-md);--odx-control-spacing-inline-md:var(--odx-control-spacing-md);--odx-control-spacing-inline-lg:var(--odx-control-spacing-lg);--odx-control-font-size-sm:var(--odx-font-size-text-sm);--odx-control-font-size-md:var(--odx-font-size-text-md);--odx-control-font-size-lg:var(--odx-font-size-text-lg);--odx-font-size-base:var(--odx-typography-font-size-3);--odx-line-height-base:var(--odx-typography-line-height-4);--odx-font-size-text-xs:var(--odx-typography-font-size-1);--odx-line-height-text-xs:var(--odx-typography-line-height-1);--odx-font-size-text-sm:var(--odx-typography-font-size-2);--odx-line-height-text-sm:var(--odx-typography-line-height-2);--odx-font-size-text-md:var(--odx-typography-font-size-3);--odx-line-height-text-md:var(--odx-typography-line-height-3);--odx-font-size-text-lg:var(--odx-typography-font-size-4);--odx-line-height-text-lg:var(--odx-typography-line-height-4);--odx-font-size-heading-xs:var(--odx-typography-font-size-2);--odx-line-height-heading-xs:var(--odx-typography-line-height-2);--odx-font-size-heading-sm:var(--odx-typography-font-size-3);--odx-line-height-heading-sm:var(--odx-typography-line-height-3);--odx-font-size-heading-md:var(--odx-typography-font-size-5);--odx-line-height-heading-md:var(--odx-typography-line-height-5);--odx-font-size-heading-lg:var(--odx-typography-font-size-6);--odx-line-height-heading-lg:var(--odx-typography-line-height-6);--odx-font-size-heading-xl:var(--odx-typography-font-size-7);--odx-line-height-heading-xl:var(--odx-typography-line-height-7);--odx-font-size-heading-xxl:var(--odx-typography-font-size-8);--odx-line-height-heading-xxl:var(--odx-typography-line-height-8);--odx-font-size-display-sm:var(--odx-typography-font-size-8);--odx-line-height-display-sm:var(--odx-typography-line-height-8);--odx-font-size-display-md:var(--odx-typography-font-size-9);--odx-line-height-display-md:var(--odx-typography-line-height-9);--odx-font-size-display-lg:var(--odx-typography-font-size-10);--odx-line-height-display-lg:var(--odx-typography-line-height-10);--odx-font-size-display-xl:var(--odx-typography-font-size-11);--odx-line-height-display-xl:var(--odx-typography-line-height-11)}
|
|
1
|
+
@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:where(*):not(:defined){display:none}}@layer base{.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>odx-title,[class*=odx-title]{margin-block:0 var(--odx-spacing-sm)}>.odx-text:not(:last-child),>odx-text:not(:last-child),>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}& ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:root{scrollbar-color:var(--odx-color-background-brand)transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-font-size-base)}:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap:var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap:var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}: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-motion-delay-reduced:50ms;--odx-focus-ring-outer:var(--odx-size-12)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm:var(--odx-spacing-negative-px);--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999;--odx-spacing-sm:var(--odx-spacing-37);--odx-spacing-md:var(--odx-spacing-75);--odx-spacing-lg:var(--odx-spacing-100);--odx-content-width-xs:20ch;--odx-content-width-sm:25ch;--odx-content-width-md:50ch;--odx-content-width-lg:80ch;--odx-control-min-width-md:8ch;--odx-control-min-width-lg:15ch;--odx-control-height-sm:var(--odx-size-200);--odx-control-height-md:var(--odx-size-225);--odx-control-height-lg:var(--odx-size-300);--odx-control-stroke-width:var(--odx-border-width-thin);--odx-control-addon-size-xs:var(--odx-size-100);--odx-control-addon-size-sm:var(--odx-size-125);--odx-control-addon-size-md:var(--odx-size-150);--odx-control-addon-size-lg:var(--odx-size-200);--odx-control-spacing-sm:var(--odx-spacing-25);--odx-control-spacing-md:var(--odx-spacing-37);--odx-control-spacing-lg:var(--odx-spacing-50);--odx-control-spacing-inline-sm:var(--odx-control-spacing-md);--odx-control-spacing-inline-md:var(--odx-control-spacing-md);--odx-control-spacing-inline-lg:var(--odx-control-spacing-lg);--odx-control-font-size-sm:var(--odx-font-size-text-sm);--odx-control-font-size-md:var(--odx-font-size-text-md);--odx-control-font-size-lg:var(--odx-font-size-text-lg);--odx-font-size-base:var(--odx-typography-font-size-3);--odx-line-height-base:var(--odx-typography-line-height-4);--odx-font-size-text-xs:var(--odx-typography-font-size-1);--odx-line-height-text-xs:var(--odx-typography-line-height-1);--odx-font-size-text-sm:var(--odx-typography-font-size-2);--odx-line-height-text-sm:var(--odx-typography-line-height-2);--odx-font-size-text-md:var(--odx-typography-font-size-3);--odx-line-height-text-md:var(--odx-typography-line-height-3);--odx-font-size-text-lg:var(--odx-typography-font-size-4);--odx-line-height-text-lg:var(--odx-typography-line-height-4);--odx-font-size-heading-xs:var(--odx-typography-font-size-2);--odx-line-height-heading-xs:var(--odx-typography-line-height-2);--odx-font-size-heading-sm:var(--odx-typography-font-size-3);--odx-line-height-heading-sm:var(--odx-typography-line-height-3);--odx-font-size-heading-md:var(--odx-typography-font-size-5);--odx-line-height-heading-md:var(--odx-typography-line-height-5);--odx-font-size-heading-lg:var(--odx-typography-font-size-6);--odx-line-height-heading-lg:var(--odx-typography-line-height-6);--odx-font-size-heading-xl:var(--odx-typography-font-size-7);--odx-line-height-heading-xl:var(--odx-typography-line-height-7);--odx-font-size-heading-xxl:var(--odx-typography-font-size-8);--odx-line-height-heading-xxl:var(--odx-typography-line-height-8);--odx-font-size-display-sm:var(--odx-typography-font-size-8);--odx-line-height-display-sm:var(--odx-typography-line-height-8);--odx-font-size-display-md:var(--odx-typography-font-size-9);--odx-line-height-display-md:var(--odx-typography-line-height-9);--odx-font-size-display-lg:var(--odx-typography-font-size-10);--odx-line-height-display-lg:var(--odx-typography-line-height-10);--odx-font-size-display-xl:var(--odx-typography-font-size-11);--odx-line-height-display-xl:var(--odx-typography-line-height-11)}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.206",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|