@odx/foundation 1.0.0-beta.272 → 1.0.0-beta.273
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/CHANGELOG.md +22 -0
- package/dist/components/action-group/action-group.d.ts +12 -1
- package/dist/components/card/card.d.ts +1 -3
- package/dist/components/checkbox/checkbox.d.ts +0 -1
- package/dist/components/checkbox-group/checkbox-group.d.ts +0 -7
- package/dist/components/drawer/drawer.d.ts +1 -0
- package/dist/components/key-value/key-value.d.ts +12 -8
- package/dist/components/key-value-list/key-value-list.d.ts +1 -0
- package/dist/components/list-item/list-item.d.ts +5 -0
- package/dist/components/radio-group/radio-group.d.ts +0 -7
- package/dist/components/tab-bar/tab-bar.d.ts +7 -0
- package/dist/components.js +60 -69
- package/dist/main.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
+
## 1.0.0-beta.273
|
|
2
|
+
|
|
3
|
+
### Major Changes
|
|
4
|
+
|
|
5
|
+
- Remove `layout` property from `odx-checkbox-group` and `odx-radio-group`, use CSS flexbox styles for layout customization instead
|
|
6
|
+
- Refactored `odx-key-value` in order to be responsive
|
|
7
|
+
|
|
8
|
+
### Minor Changes
|
|
9
|
+
|
|
10
|
+
- Revert touch target implementation due to overflow issues in certain components
|
|
11
|
+
- Improve `odx-key-value` layout styles
|
|
12
|
+
- Add `striped` property to `odx-key-value-list` component to enable striped background for better readability
|
|
13
|
+
- Add `prefix` and `suffix` slots to horizontal `odx-tab-bar` component to allow adding elements before/after the tab items
|
|
14
|
+
- Add `top` placement option to `odx-drawer` component
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
- Fix `odx-scroll-container` focus outline
|
|
19
|
+
- Fix disabled background for `danger-ghost` variant of `odx-button` component
|
|
20
|
+
- Prevent `expand` event if nested control is clicked
|
|
21
|
+
- Add `[data-odx-control]` directive to `odx-action-group` to fix positioning in other controls
|
|
22
|
+
|
|
1
23
|
## 1.0.0-beta.272
|
|
2
24
|
|
|
3
25
|
### Major Changes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
import { CanBeDisabled } from '../abstract/behaviors/can-be-disabled.js';
|
|
2
3
|
import { OdxButton } from '../button/button.js';
|
|
3
4
|
import { CustomElement } from '../custom-element.js';
|
|
4
5
|
declare global {
|
|
@@ -6,12 +7,22 @@ declare global {
|
|
|
6
7
|
'odx-action-group': OdxActionGroup;
|
|
7
8
|
}
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
+
declare const OdxActionGroup_base: import('../../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
|
|
11
|
+
/**
|
|
12
|
+
* @summary A component that groups action buttons and handles overflow
|
|
13
|
+
*
|
|
14
|
+
* @slot - Default slot for action buttons
|
|
15
|
+
* @slot menu-trigger - Slot for the menu trigger button
|
|
16
|
+
*/
|
|
17
|
+
export declare class OdxActionGroup extends OdxActionGroup_base {
|
|
10
18
|
#private;
|
|
19
|
+
static shadowRootOptions: ShadowRootInit;
|
|
11
20
|
getItems(): OdxButton[];
|
|
21
|
+
connectedCallback(): void;
|
|
12
22
|
disconnectedCallback(): void;
|
|
13
23
|
protected render(): TemplateResult;
|
|
14
24
|
protected renderOverflowMenu(items: OdxButton[]): TemplateResult;
|
|
15
25
|
protected updated(props: PropertyValues<this>): void;
|
|
16
26
|
}
|
|
27
|
+
export {};
|
|
17
28
|
//# sourceMappingURL=action-group.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
2
|
import { CanBeDisabled } from '../abstract/behaviors/can-be-disabled.js';
|
|
3
3
|
import { ValuesOf } from '../abstract/models.js';
|
|
4
4
|
import { CustomElement } from '../custom-element.js';
|
|
@@ -24,9 +24,7 @@ declare const OdxCard_base: import('../../main.js').Constructor<CanBeDisabled> &
|
|
|
24
24
|
export declare class OdxCard extends OdxCard_base {
|
|
25
25
|
#private;
|
|
26
26
|
static observeSlots: boolean;
|
|
27
|
-
interactive: boolean;
|
|
28
27
|
variant: CardVariant;
|
|
29
|
-
protected updated(props: PropertyValues<this>): void;
|
|
30
28
|
protected render(): TemplateResult;
|
|
31
29
|
}
|
|
32
30
|
export {};
|
|
@@ -26,7 +26,6 @@ declare const OdxCheckbox_base: import('../../main.js').Constructor<CheckboxCont
|
|
|
26
26
|
* @slot hint - Hint slot
|
|
27
27
|
*/
|
|
28
28
|
export declare class OdxCheckbox extends OdxCheckbox_base {
|
|
29
|
-
static observeSlots: boolean;
|
|
30
29
|
controlPlacement: CheckboxControlPlacement;
|
|
31
30
|
size: CheckboxSize;
|
|
32
31
|
connectedCallback(): void;
|
|
@@ -1,19 +1,12 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import { CheckboxGroupControl } from '../abstract/behaviors/checkbox-group-control.js';
|
|
3
|
-
import { ValuesOf } from '../abstract/models.js';
|
|
4
3
|
declare global {
|
|
5
4
|
interface HTMLElementTagNameMap {
|
|
6
5
|
'odx-checkbox-group': OdxCheckboxGroup;
|
|
7
6
|
}
|
|
8
7
|
}
|
|
9
|
-
export type CheckboxGroupLayout = ValuesOf<typeof CheckboxGroupLayout>;
|
|
10
|
-
export declare const CheckboxGroupLayout: {
|
|
11
|
-
readonly VERTICAL: "vertical";
|
|
12
|
-
readonly HORIZONTAL: "horizontal";
|
|
13
|
-
};
|
|
14
8
|
export declare class OdxCheckboxGroup extends CheckboxGroupControl {
|
|
15
9
|
static shadowRootOptions: ShadowRootInit;
|
|
16
|
-
layout: CheckboxGroupLayout;
|
|
17
10
|
constructor();
|
|
18
11
|
connectedCallback(): void;
|
|
19
12
|
protected render(): TemplateResult;
|
|
@@ -9,6 +9,7 @@ export type DrawerPlacement = ValuesOf<typeof DrawerPlacement>;
|
|
|
9
9
|
export declare const DrawerPlacement: {
|
|
10
10
|
readonly START: "start";
|
|
11
11
|
readonly END: "end";
|
|
12
|
+
readonly TOP: "top";
|
|
12
13
|
readonly BOTTOM: "bottom";
|
|
13
14
|
};
|
|
14
15
|
export type DrawerSize = ValuesOf<typeof DrawerSize>;
|
|
@@ -12,17 +12,11 @@ export declare const KeyValueAlignment: Pick<{
|
|
|
12
12
|
readonly CENTER: "center";
|
|
13
13
|
readonly END: "end";
|
|
14
14
|
}, "START" | "END">;
|
|
15
|
-
export type KeyValueLayout = ValuesOf<typeof KeyValueLayout>;
|
|
16
|
-
export declare const KeyValueLayout: {
|
|
17
|
-
VERTICAL: string;
|
|
18
|
-
HORIZONTAL: string;
|
|
19
|
-
};
|
|
20
15
|
export type KeyValueSize = ValuesOf<typeof KeyValueSize>;
|
|
21
16
|
export declare const KeyValueSize: {
|
|
22
17
|
readonly SM: "sm";
|
|
23
18
|
readonly MD: "md";
|
|
24
19
|
readonly LG: "lg";
|
|
25
|
-
readonly XL: "xl";
|
|
26
20
|
};
|
|
27
21
|
export type KeyValueVariant = ValuesOf<typeof KeyValueVariant>;
|
|
28
22
|
export declare const KeyValueVariant: Pick<{
|
|
@@ -37,11 +31,21 @@ export declare const KeyValueVariant: Pick<{
|
|
|
37
31
|
readonly SUBTLE: "subtle";
|
|
38
32
|
readonly GHOST: "ghost";
|
|
39
33
|
}, "NEUTRAL" | "ACCENT" | "SUCCESS" | "DANGER">;
|
|
34
|
+
/**
|
|
35
|
+
* @summary A key-value component to display a label and its corresponding value.
|
|
36
|
+
*
|
|
37
|
+
* @slot - Default slot for the value
|
|
38
|
+
* @slot key - Slot for the key/label
|
|
39
|
+
* @slot prefix - Slot for content to appear before the key-value pair
|
|
40
|
+
* @slot suffix - Slot for content to appear after the key-value pair
|
|
41
|
+
*
|
|
42
|
+
* @csspart value - The value element
|
|
43
|
+
* @csspart unit - The unit element
|
|
44
|
+
*/
|
|
40
45
|
export declare class OdxKeyValue extends CustomElement {
|
|
41
46
|
static observeSlots: boolean;
|
|
42
|
-
alignment: KeyValueAlignment;
|
|
43
47
|
key: string;
|
|
44
|
-
|
|
48
|
+
vertical: boolean;
|
|
45
49
|
size: KeyValueSize;
|
|
46
50
|
unit?: string;
|
|
47
51
|
value: string;
|
|
@@ -8,6 +8,7 @@ declare global {
|
|
|
8
8
|
}
|
|
9
9
|
export declare class OdxKeyValueList extends CustomElement {
|
|
10
10
|
size: KeyValueSize;
|
|
11
|
+
striped: boolean;
|
|
11
12
|
getItems(_deep?: boolean): OdxKeyValue[];
|
|
12
13
|
protected render(): TemplateResult;
|
|
13
14
|
protected updated(props: PropertyValues<this>): void;
|
|
@@ -20,6 +20,11 @@ export declare const ListItemVariant: Pick<{
|
|
|
20
20
|
readonly SUBTLE: "subtle";
|
|
21
21
|
readonly GHOST: "ghost";
|
|
22
22
|
}, "NEUTRAL" | "WARNING" | "DANGER">;
|
|
23
|
+
/**
|
|
24
|
+
* @summary A list item component to be used within an `odx-list`.
|
|
25
|
+
*
|
|
26
|
+
* @slot expand - Slot for expandable content
|
|
27
|
+
*/
|
|
23
28
|
export declare class OdxListItem extends LinkControlElement implements CanBeExpanded {
|
|
24
29
|
#private;
|
|
25
30
|
contentElement?: HTMLElementTagNameMap['odx-toggle-content'];
|
|
@@ -1,23 +1,16 @@
|
|
|
1
1
|
import { PropertyValues } from 'lit';
|
|
2
2
|
import { CheckboxControl } from '../abstract/behaviors/checkbox-control.js';
|
|
3
3
|
import { FormAssociated } from '../abstract/behaviors/form-associated.js';
|
|
4
|
-
import { ValuesOf } from '../abstract/models.js';
|
|
5
4
|
import { CustomElement } from '../custom-element.js';
|
|
6
5
|
declare global {
|
|
7
6
|
interface HTMLElementTagNameMap {
|
|
8
7
|
'odx-radio-group': OdxRadioGroup;
|
|
9
8
|
}
|
|
10
9
|
}
|
|
11
|
-
export type RadioGroupLayout = ValuesOf<typeof RadioGroupLayout>;
|
|
12
|
-
export declare const RadioGroupLayout: {
|
|
13
|
-
readonly VERTICAL: "vertical";
|
|
14
|
-
readonly HORIZONTAL: "horizontal";
|
|
15
|
-
};
|
|
16
10
|
declare const OdxRadioGroup_base: import('../../main.js').Constructor<FormAssociated> & typeof CustomElement;
|
|
17
11
|
export declare class OdxRadioGroup extends OdxRadioGroup_base {
|
|
18
12
|
#private;
|
|
19
13
|
static shadowRootOptions: ShadowRootInit;
|
|
20
|
-
layout?: RadioGroupLayout;
|
|
21
14
|
value: string;
|
|
22
15
|
get selectedIndex(): number;
|
|
23
16
|
constructor();
|
|
@@ -14,6 +14,13 @@ export declare const TabBarAlignment: Pick<{
|
|
|
14
14
|
readonly CENTER: "center";
|
|
15
15
|
readonly END: "end";
|
|
16
16
|
}, "START" | "END">;
|
|
17
|
+
/**
|
|
18
|
+
* @summary A tab bar component to display a list of navigation items as tabs
|
|
19
|
+
*
|
|
20
|
+
* @slot - Content slot
|
|
21
|
+
* @slot prefix - Slot for adding elements before the tab items (horizontal only)
|
|
22
|
+
* @slot suffix - Slot for adding elements after the tab items (horizontal only)
|
|
23
|
+
*/
|
|
17
24
|
export declare class OdxTabBar extends CustomElement {
|
|
18
25
|
#private;
|
|
19
26
|
private baseElement?;
|
package/dist/components.js
CHANGED
|
@@ -446,7 +446,7 @@ const WithPresets = dedupeMixin((superClass) => {
|
|
|
446
446
|
|
|
447
447
|
const styles$1r = "@layer base{#label{margin:var(--odx-spacing-negative-12)var(--odx-spacing-negative-25);padding:var(--odx-spacing-12)var(--odx-spacing-25);text-transform:capitalize}#spinner{--size:var(--_addon-size);color:var(--_color-foreground)}}@layer state{:host([loading]){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke);cursor:wait}}";
|
|
448
448
|
|
|
449
|
-
const styles$1q = "@layer base{:host{--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_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);--_font-size:var(--odx-control-font-size-md);--_icon-spacing:0px;transition:var(--odx-motion-transition-reduced);border-radius:var(--odx-border-radius-control);cursor:pointer;min-width:auto;max-width:100%;height:var(--_height);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin:0;transition-property:border-color,border-radius;position:relative}:host,#base{place-items:center;display:inline-flex}#base{column-gap:var(--_spacing-inline);transition:var(--odx-motion-transition-reduced);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-border-width-thin));padding-inline:calc(var(--_spacing-inline) - var(--odx-border-width-thin));width:100%;min-width:var(--_height);height:100%;min-height:inherit;text-align:inherit;color:inherit;line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;margin:0;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed);color:inherit}@media(hover:hover)and (pointer:fine){&:where(:hover){--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover);color:inherit}}}#label{min-width:0;text-align:inherit;pointer-events:none;flex:1}
|
|
449
|
+
const styles$1q = "@layer base{:host{--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_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);--_font-size:var(--odx-control-font-size-md);--_icon-spacing:0px;transition:var(--odx-motion-transition-reduced);border-radius:var(--odx-border-radius-control);cursor:pointer;min-width:auto;max-width:100%;height:var(--_height);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin:0;transition-property:border-color,border-radius;position:relative}:host,#base{place-items:center;display:inline-flex}#base{column-gap:var(--_spacing-inline);transition:var(--odx-motion-transition-reduced);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-border-width-thin));padding-inline:calc(var(--_spacing-inline) - var(--odx-border-width-thin));width:100%;min-width:var(--_height);height:100%;min-height:inherit;text-align:inherit;color:inherit;line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;margin:0;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed);color:inherit}@media(hover:hover)and (pointer:fine){&:where(:hover){--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover);color:inherit}}}#label{min-width:0;text-align:inherit;pointer-events:none;flex:1}::slotted(odx-badge:not([slot=badge])){margin-inline:var(--odx-spacing-12)}odx-icon:not([size]),::slotted(odx-icon:not([size])){padding:var(--_icon-spacing);font-size:var(--_addon-size);flex-shrink:0}odx-avatar:not([size]),::slotted(odx-avatar:not([size])){--size:var(--_addon-size);font-size:var(--odx-typography-font-size-text-xs)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}#base>odx-icon:not([slot]),::slotted(odx-icon:not([slot])){margin-inline:calc(-1*var(--_spacing-inline))}::slotted(:not([slot])){line-height:inherit}[data-odx-control],::slotted([data-odx-control]){margin:var(--odx-spacing-negative-25)}}@layer variant{: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);--_font-size:var(--odx-control-font-size-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);::slotted(odx-avatar:not([size])),odx-avatar:not([size]){font-size:var(--odx-typography-font-size-text-md)}}}@layer overrides{:host([disabled]) #base{pointer-events:none;-webkit-user-select:none;user-select:none}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-background-hover:var(--odx-color-background-disabled-rest);--_color-background-pressed:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
450
450
|
|
|
451
451
|
const controlDirective = booleanAttributeDirective({ name: "data-odx-control" });
|
|
452
452
|
const ControlSize = { SM: "sm", MD: "md", LG: "lg" };
|
|
@@ -523,7 +523,7 @@ class ButtonControlElement extends ControlElement {
|
|
|
523
523
|
render() {
|
|
524
524
|
const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
|
|
525
525
|
const type = "type" in this ? this.type : "button";
|
|
526
|
-
return html`<button id="base" aria-busy="${optionalAttr(this.loading)}" aria-label="${optionalAttr(ariaLabel)}" aria-haspopup="${optionalAttr(ariaHasPopup)}" aria-expanded="${optionalAttr(ariaExpanded)}" type="${type}" ?disabled="${this.disabled || this.loading}"
|
|
526
|
+
return html`<button id="base" aria-busy="${optionalAttr(this.loading)}" aria-label="${optionalAttr(ariaLabel)}" aria-haspopup="${optionalAttr(ariaHasPopup)}" aria-expanded="${optionalAttr(ariaExpanded)}" type="${type}" ?disabled="${this.disabled || this.loading}">${this.renderContent()}</button>`;
|
|
527
527
|
}
|
|
528
528
|
renderLabel() {
|
|
529
529
|
return html`<odx-line-clamp id="label" part="label" max="${this.lineClamp}"><slot></slot></odx-line-clamp>`;
|
|
@@ -772,9 +772,12 @@ class ExpandableItemManager {
|
|
|
772
772
|
this.#host.addEventListener(ExpandEvent.eventName, this.#handleExpand);
|
|
773
773
|
}
|
|
774
774
|
}
|
|
775
|
+
#validateToggleEvent(item, event) {
|
|
776
|
+
return !getElementFromEvent(event, (node) => controlDirective.applied(node) && node !== item);
|
|
777
|
+
}
|
|
775
778
|
#handleClick = (event) => {
|
|
776
779
|
const items = new WeakSet(this.#host.getItems());
|
|
777
|
-
const item = getElementFromEvent(event, (node) => items.has(node));
|
|
780
|
+
const item = getElementFromEvent(event, (node) => items.has(node) && this.#validateToggleEvent(node, event));
|
|
778
781
|
if (!item) return;
|
|
779
782
|
const expandControl = item.expandControl ? getElementFromEvent(event, (node) => node === item.expandControl) : item;
|
|
780
783
|
if (!expandControl) return;
|
|
@@ -1098,7 +1101,7 @@ class LinkControlElement extends ButtonControlElement {
|
|
|
1098
1101
|
return super.render();
|
|
1099
1102
|
}
|
|
1100
1103
|
const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
|
|
1101
|
-
return html`<a id="base" role="button" aria-busy="${optionalAttr(this.loading)}" aria-label="${optionalAttr(ariaLabel)}" aria-haspopup="${optionalAttr(ariaHasPopup)}" aria-expanded="${optionalAttr(ariaExpanded)}" aria-current="${optionalAttr(ariaCurrent)}" aria-hidden="${optionalAttr(ariaHidden)}" href="${optionalAttr(this.href)}" target="${optionalAttr(this.target)}" download="${optionalAttr(this.download)}" rel="${optionalAttr(this.rel || "noreferrer noopener")}"
|
|
1104
|
+
return html`<a id="base" role="button" aria-busy="${optionalAttr(this.loading)}" aria-label="${optionalAttr(ariaLabel)}" aria-haspopup="${optionalAttr(ariaHasPopup)}" aria-expanded="${optionalAttr(ariaExpanded)}" aria-current="${optionalAttr(ariaCurrent)}" aria-hidden="${optionalAttr(ariaHidden)}" href="${optionalAttr(this.href)}" target="${optionalAttr(this.target)}" download="${optionalAttr(this.download)}" rel="${optionalAttr(this.rel || "noreferrer noopener")}">${this.renderContent()}</a>`;
|
|
1102
1105
|
}
|
|
1103
1106
|
}
|
|
1104
1107
|
__decorateClass([
|
|
@@ -1423,7 +1426,7 @@ __decorateClass([
|
|
|
1423
1426
|
], _OdxBadge.prototype, "variant", 2);
|
|
1424
1427
|
let OdxBadge = _OdxBadge;
|
|
1425
1428
|
|
|
1426
|
-
const styles$1j = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,#base{place-content:center}#label{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:33%;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 state{:host(:is([active],[data-odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-placement=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}@layer overrides{:host([disabled][variant=ghost]){--_color-background:transparent}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant],[variant=ghost]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger]))
|
|
1429
|
+
const styles$1j = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,#base{place-content:center}#label{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:33%;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 state{:host(:is([active],[data-odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-placement=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}@layer overrides{:host([disabled]:is([variant=danger-ghost],[variant=ghost])){--_color-background:transparent}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant],[variant=ghost]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])){#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([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=danger-ghost]),:host([variant=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit}:host([variant=danger-ghost]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-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-ghost][loading]),:host([variant=ghost][loading]){--_color-background:transparent;--_color-foreground:var(--odx-color-foreground-subtle)}}";
|
|
1427
1430
|
|
|
1428
1431
|
const buttonDirective = booleanAttributeDirective({ name: "data-odx-button" });
|
|
1429
1432
|
const ButtonBadgePlacement = pick(Alignment, ["START", "END"]);
|
|
@@ -1611,15 +1614,25 @@ let OdxMenuItem = _OdxMenuItem;
|
|
|
1611
1614
|
|
|
1612
1615
|
const styles$1g = ":host{gap:var(--odx-spacing-layout-sm);flex-flow:row;justify-content:flex-end;align-items:center;display:flex;overflow:hidden}";
|
|
1613
1616
|
|
|
1614
|
-
class OdxActionGroup extends CustomElement {
|
|
1617
|
+
class OdxActionGroup extends CanBeDisabled(CustomElement) {
|
|
1615
1618
|
static {
|
|
1616
1619
|
customElement("odx-action-group", styles$1g)(OdxActionGroup);
|
|
1617
1620
|
}
|
|
1621
|
+
static {
|
|
1622
|
+
this.shadowRootOptions = {
|
|
1623
|
+
...CustomElement.shadowRootOptions,
|
|
1624
|
+
delegatesFocus: true
|
|
1625
|
+
};
|
|
1626
|
+
}
|
|
1618
1627
|
#intersectionObserver;
|
|
1619
1628
|
#visibleElements = /* @__PURE__ */ new WeakSet();
|
|
1620
1629
|
getItems() {
|
|
1621
1630
|
return getAssignedElements(this.renderRoot, { flatten: true, selector: (element) => element instanceof OdxButton });
|
|
1622
1631
|
}
|
|
1632
|
+
connectedCallback() {
|
|
1633
|
+
controlDirective.toggle(this, true);
|
|
1634
|
+
super.connectedCallback();
|
|
1635
|
+
}
|
|
1623
1636
|
disconnectedCallback() {
|
|
1624
1637
|
super.disconnectedCallback();
|
|
1625
1638
|
this.#intersectionObserver?.disconnect();
|
|
@@ -1644,6 +1657,9 @@ class OdxActionGroup extends CustomElement {
|
|
|
1644
1657
|
const isVisible = this.#visibleElements.has(button);
|
|
1645
1658
|
button.inert = !isVisible;
|
|
1646
1659
|
button.style.setProperty("visibility", isVisible ? null : "hidden");
|
|
1660
|
+
if (props.has("disabled")) {
|
|
1661
|
+
button.disabled = this.disabled;
|
|
1662
|
+
}
|
|
1647
1663
|
}
|
|
1648
1664
|
}
|
|
1649
1665
|
#handleMenuTriggerSlotChange = async () => {
|
|
@@ -1698,7 +1714,7 @@ __decorateClass([
|
|
|
1698
1714
|
], _OdxNavigationItem.prototype, "type", 2);
|
|
1699
1715
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
1700
1716
|
|
|
1701
|
-
const styles$1e = ":host{--_tab-spacing:var(--odx-control-spacing-md);--_indicator-position:var(--odx-spacing-layout-sm);--_indicator-width:0px;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex}odx-scroll-container{--gradient-size:var(--odx-size-350)}#base{--item-min-width:var(--odx-control-width-sm);flex:1;position:relative}#indicator{transition:var(--odx-motion-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:is([disabled]:not([active]),[active]:not([disabled]))){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover)}:host([size=sm]){--_tab-spacing:var(--odx-control-spacing-sm)}:host([size=lg]){--_tab-spacing:var(--odx-control-spacing-lg)}: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(--_tab-spacing)}::slotted(odx-navigation-item){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;#base{--_spacing:1px;padding-inline:var(--odx-spacing-layout-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-layout-sm)}}: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}";
|
|
1717
|
+
const styles$1e = ":host{--_tab-spacing:var(--odx-control-spacing-md);--_indicator-position:var(--odx-spacing-layout-sm);--_indicator-width:0px;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));column-gap:var(--_tab-spacing);display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}#base{--item-min-width:var(--odx-control-width-sm);flex:1;position:relative}#indicator{transition:var(--odx-motion-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:is([disabled]:not([active]),[active]:not([disabled]))){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover)}:host([size=sm]){--_tab-spacing:var(--odx-control-spacing-sm)}:host([size=lg]){--_tab-spacing:var(--odx-control-spacing-lg)}: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(--_tab-spacing)}::slotted(odx-navigation-item){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;#base{--_spacing:1px;padding-inline:var(--odx-spacing-layout-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-layout-sm)}}: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}";
|
|
1702
1718
|
|
|
1703
1719
|
const TabBarAlignment = pick(Alignment, ["START", "END"]);
|
|
1704
1720
|
const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
@@ -1790,7 +1806,7 @@ const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
|
1790
1806
|
if (this.vertical) {
|
|
1791
1807
|
return html`<odx-navigation id="base"><slot></slot>${indicator}</odx-navigation>`;
|
|
1792
1808
|
}
|
|
1793
|
-
return html`<odx-scroll-container id="base" exportparts="stage" @change="${this.#handleScrollChange}"><odx-icon-button odx-scroll-container-previous icon="core::chevron-left" variant="ghost" slot="prefix" tabindex="-1"></odx-icon-button><slot></slot>${indicator}<odx-icon-button odx-scroll-container-next icon="core::chevron-right" variant="ghost" slot="suffix" tabindex="-1"></odx-icon-button></odx-scroll-container>`;
|
|
1809
|
+
return html`<slot name="prefix"></slot><odx-scroll-container id="base" exportparts="stage" @change="${this.#handleScrollChange}"><odx-icon-button odx-scroll-container-previous icon="core::chevron-left" variant="ghost" slot="prefix" tabindex="-1"></odx-icon-button><slot></slot>${indicator}<odx-icon-button odx-scroll-container-next icon="core::chevron-right" variant="ghost" slot="suffix" tabindex="-1"></odx-icon-button></odx-scroll-container><slot name="suffix"></slot>`;
|
|
1794
1810
|
}
|
|
1795
1811
|
firstUpdated(props) {
|
|
1796
1812
|
super.firstUpdated(props);
|
|
@@ -2940,7 +2956,6 @@ const CardVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
|
|
|
2940
2956
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
2941
2957
|
constructor() {
|
|
2942
2958
|
super(...arguments);
|
|
2943
|
-
this.interactive = false;
|
|
2944
2959
|
this.variant = CardVariant.NEUTRAL;
|
|
2945
2960
|
}
|
|
2946
2961
|
static {
|
|
@@ -2949,11 +2964,6 @@ const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
|
2949
2964
|
static {
|
|
2950
2965
|
this.observeSlots = true;
|
|
2951
2966
|
}
|
|
2952
|
-
updated(props) {
|
|
2953
|
-
super.updated(props);
|
|
2954
|
-
if (this.disabled) return;
|
|
2955
|
-
setFocusable(this, this.interactive);
|
|
2956
|
-
}
|
|
2957
2967
|
render() {
|
|
2958
2968
|
return html`${this.whenSlotted("image", (slot) => html`<div id="image">${slot}</div>`)} ${this.whenSlotted("header", (slot) => html`<div id="header">${slot}</div>`)} ${this.whenSlotted("actions", (slot) => html`<div id="actions">${slot}</div>`)}<div id="content"><slot @slotchange="${this.#handleSlotChange}"></slot></div>${this.whenSlotted("footer", (slot) => html`<div id="footer">${slot}</div>`)}`;
|
|
2959
2969
|
}
|
|
@@ -2964,15 +2974,12 @@ const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
|
2964
2974
|
this.requestUpdate();
|
|
2965
2975
|
}
|
|
2966
2976
|
};
|
|
2967
|
-
__decorateClass([
|
|
2968
|
-
property({ type: Boolean, reflect: true, useDefault: true })
|
|
2969
|
-
], _OdxCard.prototype, "interactive", 2);
|
|
2970
2977
|
__decorateClass([
|
|
2971
2978
|
property({ reflect: true, useDefault: true })
|
|
2972
2979
|
], _OdxCard.prototype, "variant", 2);
|
|
2973
2980
|
let OdxCard = _OdxCard;
|
|
2974
2981
|
|
|
2975
|
-
const styles$10 = "@layer base{:host{--_indicator-color-background:var(--odx-color-background-control-rest);--_indicator-color-foreground:transparent;--_indicator-color-stroke:var(--odx-color-stroke-control-rest);--_indicator-icon-size:var(--odx-control-addon-size-xs);--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-spacing:var(--odx-spacing-12);column-gap:var(--odx-control-spacing-md);cursor:pointer;padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);color:inherit;pointer-events:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;grid-template-columns:auto 1fr;align-items:start;display:inline-grid}#base,#hint{pointer-events:all}#base{-webkit-user-select:none;user-select:none;font-weight:var(--odx-typography-font-weight-medium);display:contents}#control-container{grid-area:1/1}#control{transition:var(--odx-motion-transition-reduced);margin:var(--_indicator-spacing);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-control);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);font-size:var(--_indicator-icon-size);place-content:center;place-items:center;transition-property:background-color,border-color,color,translate;display:flex}#control-icon{transition:var(--odx-motion-transition-reduced);transform:scale(0)}:host(:focus-visible){outline:none!important;#control{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host(:is([checked],[indeterminate]):focus-visible) #control{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}
|
|
2982
|
+
const styles$10 = "@layer base{:host{--_indicator-color-background:var(--odx-color-background-control-rest);--_indicator-color-foreground:transparent;--_indicator-color-stroke:var(--odx-color-stroke-control-rest);--_indicator-icon-size:var(--odx-control-addon-size-xs);--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-spacing:var(--odx-spacing-12);column-gap:var(--odx-control-spacing-md);cursor:pointer;padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);color:inherit;pointer-events:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;grid-template-columns:auto 1fr;align-items:start;display:inline-grid}#base,#hint{pointer-events:all}#base{-webkit-user-select:none;user-select:none;font-weight:var(--odx-typography-font-weight-medium);display:contents}#control-container{grid-area:1/1}#control{transition:var(--odx-motion-transition-reduced);margin:var(--_indicator-spacing);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-control);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);font-size:var(--_indicator-icon-size);place-content:center;place-items:center;transition-property:background-color,border-color,color,translate;display:flex}#control-icon{transition:var(--odx-motion-transition-reduced);transform:scale(0)}#hint{cursor:text}#hint,::slotted(*){grid-column:2}:host(:focus-visible){outline:none!important;#control{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host(:is([checked],[indeterminate]):focus-visible) #control{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}@media(hover:hover)and (pointer:fine){:host:has(#base:hover){--_indicator-color-stroke:var(--odx-color-stroke-control-hover);--_indicator-color-background:var(--odx-color-background-control-hover)}}}@layer state{:host([invalid]){--_indicator-color-background:var(--odx-color-background-control-invalid);--_indicator-color-stroke:var(--odx-color-stroke-control-invalid)}:host(:is([checked],[indeterminate])){--_indicator-color-background:var(--odx-color-background-control-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-color-stroke-control-selected);#control-icon{transform:scale(1)}}:host([readonly]){--_indicator-color-background:var(--odx-color-background-control-readonly);--_indicator-color-foreground:var(--odx-color-foreground-rest);--_indicator-color-stroke:var(--odx-color-stroke-control-readonly);cursor:default}@media(hover:hover)and (pointer:fine){:host([invalid]:not([checked],[readonly]):hover){--_indicator-color-background:var(--odx-color-background-control-invalid-hover);--_indicator-color-stroke:var(--odx-color-stroke-control-invalid-hover)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled])):hover){--_indicator-color-background:var(--odx-color-background-control-selected-hover)}}}@layer variant{:host([control-placement=end]){grid-template-columns:1fr auto;#control-container{grid-column:2}#hint,::slotted(*){grid-column:1}}:host([size=sm]){--_indicator-size:var(--odx-control-addon-size-xs);--_indicator-spacing:var(--odx-spacing-25)var(--odx-spacing-12);column-gap:var(--odx-control-spacing-sm);padding:var(--odx-control-spacing-sm)var(--odx-control-spacing-inline-sm);font-size:var(--odx-typography-font-size-text-sm)}}@layer overrides{:host([disabled]){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-foreground:var(--odx-color-foreground-disabled-rest);--_indicator-color-stroke:var(--odx-color-background-disabled-rest);cursor:not-allowed;color:var(--odx-color-foreground-disabled-rest)}:host([disabled]:is([checked],[indeterminate])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-foreground:var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke:var(--_indicator-color-background)}:host(:empty){column-gap:0}}";
|
|
2976
2983
|
|
|
2977
2984
|
const CheckboxControlPlacement = pick(Alignment, ["START", "END"]);
|
|
2978
2985
|
const CheckboxSize = { SM: "sm", MD: "md" };
|
|
@@ -2985,15 +2992,12 @@ const _OdxCheckbox = class _OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
|
2985
2992
|
static {
|
|
2986
2993
|
customElement("odx-checkbox", styles$10)(_OdxCheckbox);
|
|
2987
2994
|
}
|
|
2988
|
-
static {
|
|
2989
|
-
this.observeSlots = true;
|
|
2990
|
-
}
|
|
2991
2995
|
connectedCallback() {
|
|
2992
2996
|
setFocusable(this, true);
|
|
2993
2997
|
super.connectedCallback();
|
|
2994
2998
|
}
|
|
2995
2999
|
render() {
|
|
2996
|
-
return html`<div id="base"><div id="control-container">${this.renderControl(this.indeterminate ? "core::minus" : this.checked ? "core::check" : void 0)}</div><slot></slot></div
|
|
3000
|
+
return html`<div id="base"><div id="control-container">${this.renderControl(this.indeterminate ? "core::minus" : this.checked ? "core::check" : void 0)}</div><slot></slot></div><odx-text id="hint" size="sm" variant="subtle"><slot name="hint"></slot></odx-text>`;
|
|
2997
3001
|
}
|
|
2998
3002
|
renderControl(icon) {
|
|
2999
3003
|
return html`<div id="control"><odx-icon id="control-icon" name="${optionalAttr(icon)}"></odx-icon></div>`;
|
|
@@ -3021,14 +3025,21 @@ let OdxCheckbox = _OdxCheckbox;
|
|
|
3021
3025
|
|
|
3022
3026
|
const styles$$ = ":host{column-gap:var(--odx-spacing-layout-sm);display:flex}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-layout-md)}::slotted(odx-separator){--inner-spacing:var(--odx-spacing-layout-sm);--spacing:var(--odx-spacing-layout-sm)}:host(:not([layout=horizontal])){flex-direction:column}";
|
|
3023
3027
|
|
|
3024
|
-
|
|
3025
|
-
|
|
3028
|
+
class OdxCheckboxGroup extends CheckboxGroupControl {
|
|
3029
|
+
static {
|
|
3030
|
+
customElement("odx-checkbox-group", styles$$)(OdxCheckboxGroup);
|
|
3031
|
+
}
|
|
3032
|
+
static {
|
|
3033
|
+
this.shadowRootOptions = {
|
|
3034
|
+
...CheckboxGroupControl.shadowRootOptions,
|
|
3035
|
+
delegatesFocus: true
|
|
3036
|
+
};
|
|
3037
|
+
}
|
|
3026
3038
|
constructor() {
|
|
3027
3039
|
super();
|
|
3028
|
-
this.layout = CheckboxGroupLayout.VERTICAL;
|
|
3029
3040
|
if (!isServer) {
|
|
3030
3041
|
new RovingTabindexController(this, {
|
|
3031
|
-
direction: () =>
|
|
3042
|
+
direction: () => "vertical",
|
|
3032
3043
|
elements: () => [this.getGroupControl(), ...this.getControls()].filter(Boolean),
|
|
3033
3044
|
focusInIndex: () => this.selectedIndex,
|
|
3034
3045
|
hostDelegatesFocus: true,
|
|
@@ -3036,15 +3047,6 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupControl {
|
|
|
3036
3047
|
});
|
|
3037
3048
|
}
|
|
3038
3049
|
}
|
|
3039
|
-
static {
|
|
3040
|
-
customElement("odx-checkbox-group", styles$$)(_OdxCheckboxGroup);
|
|
3041
|
-
}
|
|
3042
|
-
static {
|
|
3043
|
-
this.shadowRootOptions = {
|
|
3044
|
-
...CheckboxGroupControl.shadowRootOptions,
|
|
3045
|
-
delegatesFocus: true
|
|
3046
|
-
};
|
|
3047
|
-
}
|
|
3048
3050
|
connectedCallback() {
|
|
3049
3051
|
setFocusable(this, true);
|
|
3050
3052
|
super.connectedCallback();
|
|
@@ -3052,11 +3054,7 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupControl {
|
|
|
3052
3054
|
render() {
|
|
3053
3055
|
return html`<slot name="control"></slot><slot></slot>`;
|
|
3054
3056
|
}
|
|
3055
|
-
}
|
|
3056
|
-
__decorateClass([
|
|
3057
|
-
property({ reflect: true, useDefault: true })
|
|
3058
|
-
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
3059
|
-
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
3057
|
+
}
|
|
3060
3058
|
|
|
3061
3059
|
const styles$_ = ":host{--_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);--_color-foreground:var(--odx-color-foreground-rest);--_height:var(--odx-size-150);--_border-radius:var(--_height);--_spacing-inline:var(--odx-control-spacing-inline-md);gap:var(--odx-control-spacing-sm);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_spacing-inline);height:var(--_height);color:var(--_color-foreground);place-items:center;display:inline-flex}:host,#base{transition:var(--odx-motion-transition-reduced);transition-property:color,background-color}#base{min-width:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}::slotted(odx-icon){font-size:var(--odx-typography-font-size-text-md)}#action{--_height:var(--odx-control-addon-size-md);--_spacing-inline:var(--odx-control-spacing-sm);--_addon-size:var(--odx-control-addon-size-xs);border-radius:inherit}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([variant=primary],[variant=accent],[variant=success],[variant=warning],[variant=danger]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}: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=success]){--_color-background:var(--odx-color-background-success-rest);--_color-background-hover:var(--odx-color-background-success-hover);--_color-background-pressed:var(--odx-color-background-success-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);#action{pointer-events:none}}:host([interactive]){cursor:pointer}@media(hover:hover)and (pointer:fine){:host([interactive]:where(:hover)){--_color-background:var(--_color-background-hover)}}:host([interactive]:active){--_color-background:var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background:var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
|
|
3062
3060
|
|
|
@@ -3121,9 +3119,9 @@ __decorateClass([
|
|
|
3121
3119
|
], _OdxChip.prototype, "variant", 2);
|
|
3122
3120
|
let OdxChip = _OdxChip;
|
|
3123
3121
|
|
|
3124
|
-
const styles$Z = "@layer base{:host{--dialog-width:var(--odx-layout-width-sm);--dialog-spacing-outer:0px}#base{height:100%;translate:-100%}::slotted(odx-card),::slotted(odx-main-menu){border-radius:inherit;width:100%;max-width:100%;height:100%}}@layer state{:host([open]) #base{translate:0;@starting-style{translate:-100%}}:host([open][placement=end]) #base{@starting-style{translate:100%}}:host([open][placement=bottom]) #base{@starting-style{translate:0 100%}}}@layer variant{:host(:is(:not([placement]),[placement=start])) #base{margin-inline:0 auto}:host([placement=end]) #base{margin-inline:auto 0;translate:100%}:host([size=sm]){--dialog-width:var(--odx-layout-width-xs)}:host([size=lg]){--dialog-width:var(--odx-layout-width-md)}:host([placement=bottom]){--dialog-width:var(--odx-layout-width-lg);#base{height:auto;margin-block:auto 0;translate:0 100%}}:host([placement=
|
|
3122
|
+
const styles$Z = "@layer base{:host{--dialog-width:var(--odx-layout-width-sm);--dialog-spacing-outer:0px}#base{height:100%;translate:-100%}::slotted(odx-card),::slotted(odx-main-menu){border-radius:inherit;width:100%;max-width:100%;height:100%}}@layer state{:host([open]) #base{translate:0;@starting-style{translate:-100%}}:host([open][placement=end]) #base{@starting-style{translate:100%}}:host([open][placement=top]) #base{@starting-style{translate:0 -100%}}:host([open][placement=bottom]) #base{@starting-style{translate:0 100%}}}@layer variant{:host(:is(:not([placement]),[placement=start])) #base{margin-inline:0 auto}:host([placement=end]) #base{margin-inline:auto 0;translate:100%}:host([size=sm]){--dialog-width:var(--odx-layout-width-xs)}:host([size=lg]){--dialog-width:var(--odx-layout-width-md)}:host([placement=bottom]){--dialog-width:var(--odx-layout-width-lg);#base{height:auto;margin-block:auto 0;translate:0 100%}}:host([placement=top]){--dialog-width:var(--odx-layout-width-lg);#base{height:auto;margin-block:0 auto;translate:0 -100%}}:host([size=sm]:is([placement=bottom],[placement=top])){--dialog-width:var(--odx-layout-width-md)}:host([size=lg]:is([placement=bottom],[placement=top])){--dialog-width:100%}}@media(width<=450px){:host{--dialog-width:100%}}";
|
|
3125
3123
|
|
|
3126
|
-
const DrawerPlacement = { START: "start", END: "end", BOTTOM: "bottom" };
|
|
3124
|
+
const DrawerPlacement = { START: "start", END: "end", TOP: "top", BOTTOM: "bottom" };
|
|
3127
3125
|
const DrawerSize = { SM: "sm", MD: "md", LG: "lg" };
|
|
3128
3126
|
const _OdxDrawer = class _OdxDrawer extends DialogElement {
|
|
3129
3127
|
constructor() {
|
|
@@ -4107,18 +4105,16 @@ __decorateClass([
|
|
|
4107
4105
|
], _OdxInputNumber.prototype, "value", 1);
|
|
4108
4106
|
let OdxInputNumber = _OdxInputNumber;
|
|
4109
4107
|
|
|
4110
|
-
const styles$O = ":host{min-height:var(--odx-size-
|
|
4108
|
+
const styles$O = ":host{--key-width:unset;--_key-width:var(--key-width,var(--odx-control-width-lg));column-gap:var(--odx-spacing-layout-sm);min-height:var(--odx-size-200);font-size:var(--odx-typography-font-size-text-md);align-items:start;display:flex}#label,#value{flex:auto}.side{min-height:inherit;align-items:center;display:flex}#label{column-gap:inherit;padding-block:var(--odx-spacing-37);line-height:var(--odx-typography-line-height-text-sm);flex-flow:wrap;align-items:start;display:flex}#key{width:min(var(--_key-width),100%);text-align:left;font-size:var(--odx-typography-font-size-text-sm);:host([vertical]) &{width:100%}}#unit{font-weight:var(--odx-typography-font-weight-normal);display:inline-block}#value{font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-icon){font-size:var(--odx-control-addon-size-md)}:host([alignment=end]){text-align:right}:host([size=sm]){--_key-width:var(--key-width,var(--odx-control-width-md));min-height:var(--odx-size-150);font-size:var(--odx-typography-font-size-text-sm);#label{padding-block:var(--odx-spacing-25);line-height:var(--odx-typography-line-height-text-xs)}#key{font-size:var(--odx-typography-font-size-text-xs)}::slotted(odx-icon){font-size:var(--odx-control-addon-size-sm)}}:host([size=lg]){column-gap:var(--odx-spacing-layout-md);min-height:var(--odx-size-225);font-size:var(--odx-typography-font-size-text-lg);#label{padding-block:var(--odx-spacing-37);line-height:var(--odx-typography-line-height-base)}#key{font-size:var(--odx-typography-font-size-text-md)}::slotted(odx-icon){font-size:var(--odx-control-addon-size-lg)}}:host([variant=accent]){#prefix,#value{color:var(--odx-color-foreground-accent-rest)}}:host([variant=danger]){#prefix,#value{color:var(--odx-color-foreground-danger-rest)}}:host([variant=success]){#prefix,#value{color:var(--odx-color-foreground-success-rest)}}";
|
|
4111
4109
|
|
|
4112
4110
|
const KeyValueAlignment = pick(Alignment, ["START", "END"]);
|
|
4113
|
-
const
|
|
4114
|
-
const KeyValueSize = { SM: "sm", MD: "md", LG: "lg", XL: "xl" };
|
|
4111
|
+
const KeyValueSize = { SM: "sm", MD: "md", LG: "lg" };
|
|
4115
4112
|
const KeyValueVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
|
|
4116
4113
|
const _OdxKeyValue = class _OdxKeyValue extends CustomElement {
|
|
4117
4114
|
constructor() {
|
|
4118
4115
|
super(...arguments);
|
|
4119
|
-
this.alignment = KeyValueAlignment.START;
|
|
4120
4116
|
this.key = "";
|
|
4121
|
-
this.
|
|
4117
|
+
this.vertical = false;
|
|
4122
4118
|
this.size = KeyValueSize.MD;
|
|
4123
4119
|
this.value = "";
|
|
4124
4120
|
this.variant = KeyValueVariant.NEUTRAL;
|
|
@@ -4130,18 +4126,15 @@ const _OdxKeyValue = class _OdxKeyValue extends CustomElement {
|
|
|
4130
4126
|
this.observeSlots = true;
|
|
4131
4127
|
}
|
|
4132
4128
|
render() {
|
|
4133
|
-
return html`${this.whenSlotted("prefix", (slot) => html`<div id="prefix">${slot}</div>`)}<div id="key"><slot name="key">${this.key}</slot></div><div id="value"><slot></slot>${this.value} ${when(this.unit, (unit) => html`<span id="unit">${unit}</span>`)}</div
|
|
4129
|
+
return html`${this.whenSlotted("prefix", (slot) => html`<div id="prefix" class="side">${slot}</div>`)}<div id="label"><div id="key"><slot name="key">${this.key}</slot></div><div id="value" part="value"><slot></slot>${this.value} ${when(this.unit, (unit) => html`<span id="unit" part="unit">${unit}</span>`)}</div></div>${this.whenSlotted("suffix", (slot) => html`<div id="suffix" class="side">${slot}</div>`)}`;
|
|
4134
4130
|
}
|
|
4135
4131
|
};
|
|
4136
|
-
__decorateClass([
|
|
4137
|
-
property({ reflect: true, useDefault: true })
|
|
4138
|
-
], _OdxKeyValue.prototype, "alignment", 2);
|
|
4139
4132
|
__decorateClass([
|
|
4140
4133
|
property()
|
|
4141
4134
|
], _OdxKeyValue.prototype, "key", 2);
|
|
4142
4135
|
__decorateClass([
|
|
4143
|
-
property({ reflect: true, useDefault: true })
|
|
4144
|
-
], _OdxKeyValue.prototype, "
|
|
4136
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
4137
|
+
], _OdxKeyValue.prototype, "vertical", 2);
|
|
4145
4138
|
__decorateClass([
|
|
4146
4139
|
property({ reflect: true, useDefault: true })
|
|
4147
4140
|
], _OdxKeyValue.prototype, "size", 2);
|
|
@@ -4156,12 +4149,13 @@ __decorateClass([
|
|
|
4156
4149
|
], _OdxKeyValue.prototype, "variant", 2);
|
|
4157
4150
|
let OdxKeyValue = _OdxKeyValue;
|
|
4158
4151
|
|
|
4159
|
-
const styles$N = ":host{
|
|
4152
|
+
const styles$N = ":host{flex-direction:column;display:flex}:host([striped]){::slotted(:is(odx-key-value)){padding-inline:var(--odx-spacing-layout-sm)}::slotted(odx-key-value:nth-child(2n)){background-color:var(--odx-color-background-transparent-hover)}}";
|
|
4160
4153
|
|
|
4161
4154
|
const _OdxKeyValueList = class _OdxKeyValueList extends CustomElement {
|
|
4162
4155
|
constructor() {
|
|
4163
4156
|
super(...arguments);
|
|
4164
4157
|
this.size = KeyValueSize.MD;
|
|
4158
|
+
this.striped = false;
|
|
4165
4159
|
}
|
|
4166
4160
|
static {
|
|
4167
4161
|
customElement("odx-key-value-list", styles$N)(_OdxKeyValueList);
|
|
@@ -4175,7 +4169,6 @@ const _OdxKeyValueList = class _OdxKeyValueList extends CustomElement {
|
|
|
4175
4169
|
updated(props) {
|
|
4176
4170
|
super.updated(props);
|
|
4177
4171
|
for (const item of this.getItems()) {
|
|
4178
|
-
item.layout = KeyValueLayout.HORIZONTAL;
|
|
4179
4172
|
item.size = this.size;
|
|
4180
4173
|
}
|
|
4181
4174
|
}
|
|
@@ -4183,6 +4176,9 @@ const _OdxKeyValueList = class _OdxKeyValueList extends CustomElement {
|
|
|
4183
4176
|
__decorateClass([
|
|
4184
4177
|
property({ reflect: true, useDefault: true })
|
|
4185
4178
|
], _OdxKeyValueList.prototype, "size", 2);
|
|
4179
|
+
__decorateClass([
|
|
4180
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
4181
|
+
], _OdxKeyValueList.prototype, "striped", 2);
|
|
4186
4182
|
let OdxKeyValueList = _OdxKeyValueList;
|
|
4187
4183
|
|
|
4188
4184
|
const styles$M = ":host{gap:var(--odx-control-spacing-inline-sm);margin-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;place-items:center;display:flex}#content{flex:auto}odx-icon,::slotted(odx-icon){font-size:var(--odx-control-addon-size-sm)}";
|
|
@@ -4216,7 +4212,7 @@ __decorateClass([
|
|
|
4216
4212
|
], _OdxLineClamp.prototype, "max", 2);
|
|
4217
4213
|
let OdxLineClamp = _OdxLineClamp;
|
|
4218
4214
|
|
|
4219
|
-
const styles$K = "@layer base{:host{--_color-background-selected:var(--odx-color-background-transparent-selected);--_color-background-selected-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground-selected:var(--_color-foreground);--_color-stroke-selected:transparent;--_indent-level:1;place-items:initial;max-width:100%;height:auto;min-height:var(--_height);flex-direction:column;display:flex}#base{z-index:var(--odx-z-level-interactive);padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline) - var(--odx-border-width-thin))}#separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}#expand-control::part(icon){transition:var(--odx-motion-transition-default)}odx-toggle-content{width:100%}::slotted(odx-list){--_item-indent-level:calc(var(--_indent-level) + 1)}:host(:last-of-type) #separator{opacity:0}}@layer state{:host([muted]:not([disabled],[data-odx-expandable])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);cursor:default}:host([expanded]){#separator{opacity:1}#expand-control::part(icon){transform:rotateX(180deg)}}:host(:is(:not([size]),[size=md],[size=sm])){--_icon-spacing:var(--odx-spacing-12)}:host([size=sm]){--_addon-size:var(--odx-control-addon-size-md)}:host([size=lg]){--_icon-spacing:var(--odx-spacing-25)}@media(hover:hover)and (pointer:fine){:host(:not([muted],[data-odx-expandable]):hover) #separator{opacity:0}}}@layer variant{:host(:is([variant=danger],[variant=warning]):not([disabled])){font-weight:var(--odx-typography-font-weight-medium);#base:focus-visible{box-shadow:var(--odx-focus-ring-inner)}#separator{opacity:0}}: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-background-selected:var(--odx-color-background-danger-
|
|
4215
|
+
const styles$K = "@layer base{:host{--_color-background-selected:var(--odx-color-background-transparent-selected);--_color-background-selected-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground-selected:var(--_color-foreground);--_color-stroke-selected:transparent;--_indent-level:1;place-items:initial;max-width:100%;height:auto;min-height:var(--_height);flex-direction:column;display:flex}#base{z-index:var(--odx-z-level-interactive);padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline) - var(--odx-border-width-thin))}#separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}#expand-control::part(icon){transition:var(--odx-motion-transition-default)}odx-toggle-content{width:100%}slot[name=expand]::slotted(:not(:is(odx-list,[odx-control]))){margin-inline:var(--odx-spacing-layout-md)}slot[name=expand]::slotted(odx-list){--_item-indent-level:calc(var(--_indent-level) + 1)}:host(:last-of-type) #separator{opacity:0}}@layer state{:host(:not([disabled],[loading])){#label{pointer-events:all}}:host([muted]:not([disabled],[data-odx-expandable])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);cursor:default}:host([expanded]){#separator{opacity:1}#expand-control::part(icon){transform:rotateX(180deg)}}:host(:is(:not([size]),[size=md],[size=sm])){--_icon-spacing:var(--odx-spacing-12)}:host([size=sm]){--_addon-size:var(--odx-control-addon-size-md)}:host([size=lg]){--_icon-spacing:var(--odx-spacing-25)}@media(hover:hover)and (pointer:fine){:host(:not([muted],[data-odx-expandable]):hover) #separator{opacity:0}}}@layer variant{:host(:is([variant=danger],[variant=warning]):not([disabled])){font-weight:var(--odx-typography-font-weight-medium);#base:focus-visible{box-shadow:var(--odx-focus-ring-inner)}#separator{opacity:0}}: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-background-selected:var(--odx-color-background-danger-hover);--_color-background-selected-hover:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-foreground-selected:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-background-selected:var(--odx-color-background-warning-hover);--_color-background-selected-hover:var(--odx-color-background-warning-rest);--_color-foreground:var(--odx-color-foreground-rest-static);--_color-foreground-selected:var(--odx-color-foreground-rest-static)}}@layer overrides{:host([disabled]){--_color-background:transparent;--_color-stroke:transparent}:host([selected]){--_color-background:var(--_color-background-selected);--_color-background-hover:var(--_color-background-selected-hover);--_color-background-pressed:var(--_color-background-hover);--_color-foreground:var(--_color-foreground-selected);--_color-stroke:var(--_color-stroke-selected)}:host([disabled][selected]){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}}";
|
|
4220
4216
|
|
|
4221
4217
|
const ListItemVariant = pick(Variant, ["NEUTRAL", "DANGER", "WARNING"]);
|
|
4222
4218
|
const _OdxListItem = class _OdxListItem extends LinkControlElement {
|
|
@@ -4242,15 +4238,15 @@ const _OdxListItem = class _OdxListItem extends LinkControlElement {
|
|
|
4242
4238
|
}
|
|
4243
4239
|
render() {
|
|
4244
4240
|
const expandSlot = html`<slot name="expand" @slotchange="${() => this.requestUpdate()}"></slot>`;
|
|
4245
|
-
return html`${super.render()}
|
|
4241
|
+
return html`${super.render()} ${when(
|
|
4246
4242
|
this.isExpandable(),
|
|
4247
4243
|
() => html`<odx-toggle-content id="content" role="region" ?expanded="${this.expanded}">${expandSlot}</odx-toggle-content>`,
|
|
4248
4244
|
() => html`<div class="odx-visually-hidden-force">${expandSlot}</div>`
|
|
4249
|
-
)}
|
|
4245
|
+
)}<odx-separator id="separator"></odx-separator>`;
|
|
4250
4246
|
}
|
|
4251
4247
|
renderContent() {
|
|
4252
4248
|
return html`${super.renderContent()} ${when(
|
|
4253
|
-
this.
|
|
4249
|
+
getAssignedElements(this.renderRoot, { slot: "expand" }).length > 0,
|
|
4254
4250
|
() => html`<odx-icon-button id="expand-control" icon="core::chevron-down" variant="ghost" size="${this.size === ControlSize.LG ? ControlSize.LG : ControlSize.SM}" ?disabled="${this.disabled}" .inert="${this.muted}"></odx-icon-button>`
|
|
4255
4251
|
)}`;
|
|
4256
4252
|
}
|
|
@@ -5158,11 +5154,9 @@ let OdxRadioButton = _OdxRadioButton;
|
|
|
5158
5154
|
|
|
5159
5155
|
const styles$r = ":host{display:flex}:host(:not([layout=horizontal])){flex-direction:column}";
|
|
5160
5156
|
|
|
5161
|
-
const RadioGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal" };
|
|
5162
5157
|
const _OdxRadioGroup = class _OdxRadioGroup extends FormAssociated(CustomElement) {
|
|
5163
5158
|
constructor() {
|
|
5164
5159
|
super();
|
|
5165
|
-
this.layout = RadioGroupLayout.VERTICAL;
|
|
5166
5160
|
this.value = "";
|
|
5167
5161
|
this.#handleChange = ((event) => {
|
|
5168
5162
|
if (!checkboxControlDirective.applied(event.target) || this.value === event.target.value) return;
|
|
@@ -5171,7 +5165,7 @@ const _OdxRadioGroup = class _OdxRadioGroup extends FormAssociated(CustomElement
|
|
|
5171
5165
|
if (!isServer) {
|
|
5172
5166
|
this.addEventListener("change", this.#handleChange, { capture: true });
|
|
5173
5167
|
new RovingTabindexController(this, {
|
|
5174
|
-
direction:
|
|
5168
|
+
direction: "vertical",
|
|
5175
5169
|
elements: () => this.getControls(),
|
|
5176
5170
|
elementEnterAction: (element) => element.click(),
|
|
5177
5171
|
focusInIndex: () => this.selectedIndex,
|
|
@@ -5227,9 +5221,6 @@ const _OdxRadioGroup = class _OdxRadioGroup extends FormAssociated(CustomElement
|
|
|
5227
5221
|
}
|
|
5228
5222
|
#handleChange;
|
|
5229
5223
|
};
|
|
5230
|
-
__decorateClass([
|
|
5231
|
-
property({ reflect: true, useDefault: true })
|
|
5232
|
-
], _OdxRadioGroup.prototype, "layout", 2);
|
|
5233
5224
|
__decorateClass([
|
|
5234
5225
|
property()
|
|
5235
5226
|
], _OdxRadioGroup.prototype, "value", 2);
|
|
@@ -5268,7 +5259,7 @@ __decorateClass([
|
|
|
5268
5259
|
], _OdxRailNavigation.prototype, "size", 2);
|
|
5269
5260
|
let OdxRailNavigation = _OdxRailNavigation;
|
|
5270
5261
|
|
|
5271
|
-
const styles$p = ":host{--gradient-size:0px;--item-gap:var(--odx-spacing-layout-sm);--item-min-width:0px;--visible-items:100
|
|
5262
|
+
const styles$p = ":host{--gradient-size:0px;--item-gap:var(--odx-spacing-layout-sm);--item-min-width:0px;--visible-items:100;flex-direction:column;max-width:100%;display:flex;overflow:hidden}#base{align-items:center;display:flex;position:relative;&:has(:focus-visible){outline:var(--odx-focus-ring-outer)}}#scroller{--_left-gradient-size:var(--gradient-size);--_right-gradient-size:var(--gradient-size);gap:inherit;transition:var(--odx-motion-transition-default);scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;width:100%;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size)/3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size)/3));transition-property:mask-image;overflow-x:scroll;&::-webkit-scrollbar{display:none}&:focus-visible{outline:none}}#stage{gap:var(--item-gap);width:max-content;max-width:100%;display:flex;position:relative}#prefix{inset-inline-start:0}#suffix{inset-inline-end:0}#prefix,#suffix{transition:var(--odx-motion-transition-reduced);z-index:var(--odx-z-level-interactive);transition-property:opacity,visibility;position:absolute;&:not(.visible){visibility:hidden;opacity:0;pointer-events:none}}:not([name])::slotted(*){scroll-snap-align:center;min-width:max(var(--item-min-width),calc(100cqw/var(--visible-items) - var(--item-gap)*(var(--visible-items) - 1)/var(--visible-items)));flex:none}";
|
|
5272
5263
|
|
|
5273
5264
|
const scrollContainerNext = booleanAttributeDirective({ name: "odx-scroll-container-next" });
|
|
5274
5265
|
const scrollContainerPrevious = booleanAttributeDirective({ name: "odx-scroll-container-previous" });
|
|
@@ -5327,14 +5318,14 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
|
5327
5318
|
super.updated(props);
|
|
5328
5319
|
if (props.has("leftOverflow")) {
|
|
5329
5320
|
const previousControl = this.querySelector(scrollContainerPrevious.selector);
|
|
5330
|
-
this.style.setProperty("--_left-gradient-size", this.leftOverflow ? null : toPx(0));
|
|
5321
|
+
this.scroller.style.setProperty("--_left-gradient-size", this.leftOverflow ? null : toPx(0));
|
|
5331
5322
|
if (previousControl && "disabled" in previousControl && previousControl.parentElement !== this) {
|
|
5332
5323
|
previousControl.disabled = !this.leftOverflow;
|
|
5333
5324
|
}
|
|
5334
5325
|
}
|
|
5335
5326
|
if (props.has("rightOverflow")) {
|
|
5336
5327
|
const nextControl = this.querySelector(scrollContainerNext.selector);
|
|
5337
|
-
this.style.setProperty("--_right-gradient-size", this.rightOverflow ? null : toPx(0));
|
|
5328
|
+
this.scroller.style.setProperty("--_right-gradient-size", this.rightOverflow ? null : toPx(0));
|
|
5338
5329
|
if (nextControl && "disabled" in nextControl && nextControl.parentElement !== this) {
|
|
5339
5330
|
nextControl.disabled = !this.rightOverflow;
|
|
5340
5331
|
}
|
|
@@ -6606,4 +6597,4 @@ __decorateClass([
|
|
|
6606
6597
|
], _OdxTranslate.prototype, "context", 2);
|
|
6607
6598
|
let OdxTranslate = _OdxTranslate;
|
|
6608
6599
|
|
|
6609
|
-
export { AccordionIndicatorPlacement, AccordionItemSize, ActiveDescendantsController, Alignment, AreaFooterAlignment, AreaFooterSize, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePlacement, ButtonControlElement, ButtonVariant, CanBeDisabled, CardVariant, CheckboxControl, CheckboxControlPlacement, CheckboxGroupControl,
|
|
6600
|
+
export { AccordionIndicatorPlacement, AccordionItemSize, ActiveDescendantsController, Alignment, AreaFooterAlignment, AreaFooterSize, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePlacement, ButtonControlElement, ButtonVariant, CanBeDisabled, CardVariant, CheckboxControl, CheckboxControlPlacement, CheckboxGroupControl, CheckboxSize, ChipVariant, CollapseEvent, ControlElement, ControlSize, CustomElement, DialogCloseCommand, DialogCloseEvent, DialogDismissCommand, DialogElement, DialogLayer, DialogShowCommand, DialogShowEvent, DragController, DragControllerOptions, DrawerPlacement, DrawerSize, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, ExpandEvent, ExpandableItemManager, FormAssociated, GradientOverlaySize, HeaderSize, HighlightVariant, IconButtonPreset, InlineMessageSize, InlineMessageVariant, InputBehavior, InputControlElement, InputNumberStepBehavior, InputType, KeyValueAlignment, KeyValueSize, KeyValueVariant, LinkControlElement, ListItemVariant, ListboxControlElement, LogoSize, MenuItemSize, MenuItemVariant, ModalSize, NavigationItemType, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxInputNumber, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxListbox, OdxLoadingDots, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSelect, OdxSeparator, OdxSheet, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverHostPlacement, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, SearchEvent, SheetPlacement, SidebarPosition, SidebarSize, SkeletonType, SliderHandleVariant, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, Variant, WithPresets, activeDirective, buttonDirective, checkboxControlDirective, computePopoverPlacement, controlDirective, createModal, customElement, dialogDirective, dragActiveDirective, loadCustomElements, scrollContainerNext, scrollContainerPrevious, sliderContext, toggleExpandableItem };
|
package/dist/main.js
CHANGED
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer odx.reset{html{box-sizing:border-box}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}:where(h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,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;border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}input:-webkit-autofill{&,&:hover,&:focus,&:active{border-radius:var(--odx-border-radius-sm);box-shadow:inset 0 0 1em 1em var(--odx-color-background-transparent-selected);font-weight:inherit;-webkit-text-fill-color:var(--odx-color-foreground-rest);background-clip:text;transition:background-color 5000s ease-in-out!important}}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer odx.base{.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-motion-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-control);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)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}@media(hover:hover)and (pointer:fine){&:not([disabled]):where(:hover){color:var(--odx-color-foreground-accent-hover)}}}odx-title,[class*=odx-title],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),"Noto Sans",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;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,h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;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)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-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-shrink{flex:none}.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-layout-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 :where(table),.odx-table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-layout-lg))}.odx-content :is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}[data-odx-control]:has([data-odx-control]):not([disabled]):active{--_color-background-pressed:var(--_color-background-hover)}[data-odx-control]:has([data-odx-control]:hover):not([disabled]){--_color-background-hover:var(--_color-background);--_color-foreground-hover:var(--_color-foreground)}[data-odx-button]:has(odx-icon:only-child){min-width:auto}:root{--odx-touch-target-size:36px}html,body{background-color:var(--odx-color-background-base);tab-size:4;min-height:100vh;text-rendering:optimizelegibility;line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-special-scrollbar)transparent}::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}}@layer odx.overrides{.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-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.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}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap: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-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-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-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-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-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-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-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.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-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-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-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-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-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-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-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-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-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}.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-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-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-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-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-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-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-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)}}
|
|
1
|
+
@layer odx.reset{html{box-sizing:border-box}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}:where(h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,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;border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}input:-webkit-autofill{&,&:hover,&:focus,&:active{border-radius:var(--odx-border-radius-sm);box-shadow:inset 0 0 1em 1em var(--odx-color-background-transparent-selected);font-weight:inherit;-webkit-text-fill-color:var(--odx-color-foreground-rest);background-clip:text;transition:background-color 5000s ease-in-out!important}}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer odx.base{.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-motion-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-control);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)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}@media(hover:hover)and (pointer:fine){&:not([disabled]):where(:hover){color:var(--odx-color-foreground-accent-hover)}}}odx-title,[class*=odx-title],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),"Noto Sans",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;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,h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;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)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-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-shrink{flex:none}.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-layout-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 :where(table),.odx-table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-layout-lg))}.odx-content :is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}[data-odx-control]:has([data-odx-control]):not([disabled]):active{--_color-background-pressed:var(--_color-background-hover)}[data-odx-control]:has([data-odx-control]:hover):not([disabled]){--_color-background-hover:var(--_color-background);--_color-foreground-hover:var(--_color-foreground)}[data-odx-button]:has(odx-icon:only-child){min-width:auto}html,body{background-color:var(--odx-color-background-base);tab-size:4;min-height:100vh;text-rendering:optimizelegibility;line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-special-scrollbar)transparent}::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}}@layer odx.overrides{.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-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.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}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap: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-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-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-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-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-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-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-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.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-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-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-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-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-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-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-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-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-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}.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-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-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-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-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-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-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-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)}}
|
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.273",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@odx/icons": "^4.2.0",
|
|
23
|
-
"@odx/design-tokens": "^3.
|
|
23
|
+
"@odx/design-tokens": "^3.3.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@floating-ui/dom": "1.7.4",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"es-toolkit": "1.43.0",
|
|
31
31
|
"stylelint": "16.26.1",
|
|
32
32
|
"@odx-internal/config-stylelint": "0.0.0",
|
|
33
|
+
"@odx-internal/utils-storybook": "0.0.0",
|
|
33
34
|
"@odx-internal/config-typescript": "0.0.0",
|
|
34
35
|
"@odx-internal/config-vite": "0.0.0",
|
|
35
|
-
"@odx/design-tokens": "3.
|
|
36
|
-
"@odx-internal/utils-storybook": "0.0.0"
|
|
36
|
+
"@odx/design-tokens": "3.3.0"
|
|
37
37
|
},
|
|
38
38
|
"sideEffects": [
|
|
39
39
|
"dist/components-loader.js",
|