@odx/foundation 1.0.0-beta.253 → 1.0.0-beta.255
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/inline-message/inline-message.d.ts +1 -1
- package/dist/components/navigation-item/navigation-item.d.ts +3 -3
- package/dist/components/sidebar/sidebar.d.ts +0 -1
- package/dist/components.js +25 -22
- package/dist/{breakpoints/utils.d.ts → lib/breakpoints-utils.d.ts} +18 -3
- package/dist/{breakpoints/main.d.ts → lib/breakpoints.d.ts} +3 -5
- package/dist/main.d.ts +2 -0
- package/dist/main.js +112 -4
- package/dist/styles.css +1 -1
- package/package.json +5 -9
- package/dist/breakpoints/types.d.ts +0 -17
- package/dist/breakpoints.js +0 -112
|
@@ -28,7 +28,7 @@ export declare const InlineMessageVariant: Pick<{
|
|
|
28
28
|
readonly DANGER_GHOST: "danger-ghost";
|
|
29
29
|
readonly SUBTLE: "subtle";
|
|
30
30
|
readonly GHOST: "ghost";
|
|
31
|
-
}, "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
|
|
31
|
+
}, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
|
|
32
32
|
export declare class OdxInlineMessage extends CustomElement {
|
|
33
33
|
dismissible: boolean;
|
|
34
34
|
strong: boolean;
|
|
@@ -5,14 +5,14 @@ declare global {
|
|
|
5
5
|
'odx-navigation-item': OdxNavigationItem;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
export type
|
|
9
|
-
export declare const
|
|
8
|
+
export type NavigationItemType = ValuesOf<typeof NavigationItemType>;
|
|
9
|
+
export declare const NavigationItemType: {
|
|
10
10
|
readonly BUTTON: "button";
|
|
11
11
|
readonly LINK: "link";
|
|
12
12
|
};
|
|
13
13
|
export declare class OdxNavigationItem extends LinkControlElement {
|
|
14
|
-
appearance: NavigationItemAppearance;
|
|
15
14
|
active: boolean;
|
|
16
15
|
compact: boolean;
|
|
16
|
+
type: NavigationItemType;
|
|
17
17
|
}
|
|
18
18
|
//# sourceMappingURL=navigation-item.d.ts.map
|
|
@@ -25,7 +25,6 @@ export declare class OdxSidebar extends CustomElement {
|
|
|
25
25
|
static observeSlots: boolean;
|
|
26
26
|
hidden: boolean;
|
|
27
27
|
size?: SidebarSize;
|
|
28
|
-
appearance?: 'default' | 'minimal';
|
|
29
28
|
protected render(): TemplateResult | string;
|
|
30
29
|
}
|
|
31
30
|
//# sourceMappingURL=sidebar.d.ts.map
|
package/dist/components.js
CHANGED
|
@@ -360,7 +360,7 @@ __decorateClass([
|
|
|
360
360
|
], _OdxAccordionPanel.prototype, "size", 2);
|
|
361
361
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
362
362
|
|
|
363
|
-
const styles$1k = "@layer base{:host{--_indent-level:1;--_expand-indicator-rotation:0deg;--_expand-indicator-position:unset;height:auto;min-height:var(--_height);display:flex}#base{border-radius:0;padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline))}#label{font-weight:var(--odx-typography-font-weight-medium);flex-direction:column;display:flex}#expand-indicator{
|
|
363
|
+
const styles$1k = "@layer base{:host{--_indent-level:1;--_expand-indicator-rotation:0deg;--_expand-indicator-position:unset;height:auto;min-height:var(--_height);display:flex}#base{border-radius:0;padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline))}#label{font-weight:var(--odx-typography-font-weight-medium);flex-direction:column;display:flex}#expand-indicator{order:var(--_expand-indicator-position);transform:rotate(var(--_expand-indicator-rotation));transition:var(--odx-transition-reduced);margin-inline-end:calc(-1*min(var(--_expand-indicator-position,0))var(--_spacing-inline));transition-property:transform}}@layer variant{:host([size=lg]){border-radius:0}}@layer overrides{:host([disabled]){--_color-background:transparent;::slotted(*){pointer-events:none}}:host([expanded]){--_expand-indicator-rotation:180deg}}";
|
|
364
364
|
|
|
365
365
|
class OdxAccordionItem extends CanBeExpanded(ButtonControlElement) {
|
|
366
366
|
static {
|
|
@@ -757,29 +757,29 @@ class OdxActionGroup extends CustomElement {
|
|
|
757
757
|
}
|
|
758
758
|
}
|
|
759
759
|
|
|
760
|
-
const styles$1d = "@layer state{:host([active]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--_color-background-hover);font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]){--_color-background:transparent}:host([active][
|
|
760
|
+
const styles$1d = "@layer state{:host([active]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--_color-background-hover);font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]){--_color-background:transparent}:host([active][type=link]){--_color-background:transparent;--_color-background-hover:transparent}}@layer overrides{:host([disabled][active]){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([compact]){--_height:var(--odx-size-300);--_font-size:var(--odx-typography-font-size-text-sm);justify-content:center;::slotted([slot=badge]){inset-inline-end:calc(50% - var(--odx-layout-spacing-md))}#base{flex-direction:column;justify-content:center}#label{flex:none}}:host([size=sm][compact]){--_height:var(--odx-size-225)}:host([size=lg][compact]){--_height:var(--odx-size-450);--_font-size:var(--odx-typography-font-size-text-md)}:host([type=link]){--_color-background-hover:transparent;#label{margin-block:var(--odx-spacing-negative-25);padding-block:var(--odx-spacing-25);position:relative}#label:after{transition:var(--odx-transition-reduced);opacity:0;background-color:var(--odx-color-background-accent-rest);height:var(--odx-border-width-thick);content:\"\";transition-property:background-color,opacity,inset;position:absolute;inset-block:auto 0;inset-inline:50%}}:host([type=link]:hover),:host([type=link][active]){#label:after{inset-inline:var(--_spacing-inline);opacity:1}}:host([type=link][active]) #base:after{background-color:var(--odx-color-background-accent-rest)}}";
|
|
761
761
|
|
|
762
|
-
const
|
|
762
|
+
const NavigationItemType = { BUTTON: "button", LINK: "link" };
|
|
763
763
|
const _OdxNavigationItem = class _OdxNavigationItem extends LinkControlElement {
|
|
764
764
|
constructor() {
|
|
765
765
|
super(...arguments);
|
|
766
|
-
this.appearance = NavigationItemAppearance.BUTTON;
|
|
767
766
|
this.active = false;
|
|
768
767
|
this.compact = false;
|
|
768
|
+
this.type = NavigationItemType.BUTTON;
|
|
769
769
|
}
|
|
770
770
|
static {
|
|
771
771
|
customElement("odx-navigation-item", styles$1d)(_OdxNavigationItem);
|
|
772
772
|
}
|
|
773
773
|
};
|
|
774
|
-
__decorateClass([
|
|
775
|
-
property({ reflect: true, useDefault: true })
|
|
776
|
-
], _OdxNavigationItem.prototype, "appearance", 2);
|
|
777
774
|
__decorateClass([
|
|
778
775
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
779
776
|
], _OdxNavigationItem.prototype, "active", 2);
|
|
780
777
|
__decorateClass([
|
|
781
778
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
782
779
|
], _OdxNavigationItem.prototype, "compact", 2);
|
|
780
|
+
__decorateClass([
|
|
781
|
+
property({ reflect: true, useDefault: true })
|
|
782
|
+
], _OdxNavigationItem.prototype, "type", 2);
|
|
783
783
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
784
784
|
|
|
785
785
|
const styles$1c = ":host{--_tab-spacing:var(--odx-control-spacing-md);--_indicator-position:var(--odx-layout-spacing-sm);--_indicator-width:0px;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}#base{--item-min-width:var(--odx-control-width-sm);flex:1;position:relative}#indicator{transition:var(--odx-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:is([disabled]:not([active]),[active]:not([disabled]))){--_color-background:transparent;--_color-background-hover:transparent}: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-layout-spacing-sm)}#indicator{inset-block:var(--_indicator-position)auto;width:var(--_indicator-height);height:var(--_indicator-width)}::slotted(:not(odx-navigation-item)){margin-inline:var(--odx-layout-spacing-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}";
|
|
@@ -1025,7 +1025,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends SignalWatcher(Cu
|
|
|
1025
1025
|
render() {
|
|
1026
1026
|
const activeIndex = this.activeItem.value ? this.#items.value.indexOf(this.activeItem.value) : -1;
|
|
1027
1027
|
const alignment = this.vertical ? TabBarAlignment.END : TabBarAlignment.START;
|
|
1028
|
-
const indicatorDisabled = this.#items.value.some((item) => item.
|
|
1028
|
+
const indicatorDisabled = this.#items.value.some((item) => item.type === NavigationItemType.LINK);
|
|
1029
1029
|
return html`<odx-tab-bar alignment="${alignment}" ?indicator-disabled="${indicatorDisabled}" controlled .selectedIndex="${activeIndex}" ?vertical="${this.vertical}" part="base"><odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left"></odx-icon-button><slot @slotchange="${this.#handleSlotChange}"></slot><odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right"></odx-icon-button></odx-tab-bar>`;
|
|
1030
1030
|
}
|
|
1031
1031
|
updated(props) {
|
|
@@ -2646,7 +2646,7 @@ __decorateClass([
|
|
|
2646
2646
|
], _OdxTooltip.prototype, "placement", 2);
|
|
2647
2647
|
let OdxTooltip = _OdxTooltip;
|
|
2648
2648
|
|
|
2649
|
-
const styles$R = ":host{--
|
|
2649
|
+
const styles$R = ":host{--_min-width:var(--_height)}odx-icon{transition:inherit}odx-tooltip{text-align:center}:host([float]){border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-elevation-shadow-level-2)}";
|
|
2650
2650
|
|
|
2651
2651
|
const IconButtonPreset = { CLOSE: "close", CLEAR: "clear" };
|
|
2652
2652
|
const _OdxIconButton = class _OdxIconButton extends WithPresets(OdxButton) {
|
|
@@ -2808,23 +2808,24 @@ __decorateClass([
|
|
|
2808
2808
|
], _OdxImage.prototype, "width", 2);
|
|
2809
2809
|
let OdxImage = _OdxImage;
|
|
2810
2810
|
|
|
2811
|
-
const styles$P = ":host{column-gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);
|
|
2811
|
+
const styles$P = ":host{column-gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);padding:var(--odx-layout-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);color:var(--odx-color-foreground-rest);font-size:var(--odx-typography-font-size-text-sm);transition-behavior:allow-discrete;background-color:#0000;align-items:flex-start;transition-property:background-color,color,display,opacity;display:flex;@starting-style{opacity:0}}#base{margin-block:var(--odx-spacing-12);flex:auto}#icon{--size:var(--odx-control-addon-size-sm);margin:var(--odx-spacing-12)}#dismiss-action{--_color-foreground:inherit;margin:var(--odx-spacing-negative-25)}:host([strong]){background-color:var(--odx-color-background-level-1)}:host([variant=primary]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=primary][strong]){background-color:var(--odx-color-background-primary-rest);color:var(--odx-color-foreground-inverse)}:host([variant=danger]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=danger][strong]){background-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=warning][strong]){background-color:var(--odx-color-background-warning-rest);color:var(--odx-color-foreground-rest-static)}:host([variant=success]){background-color:var(--odx-color-background-success-subtle);color:var(--odx-color-foreground-rest)}:host([variant=success][strong]){background-color:var(--odx-color-background-success-rest);color:var(--odx-color-foreground-rest-static)}:host([size=md]){padding:var(--odx-layout-spacing-md);#icon{--size:var(--odx-control-addon-size-md);margin:0}#dismiss-action{margin:var(--odx-spacing-negative-37)}}:host([hidden]){opacity:0}";
|
|
2812
2812
|
|
|
2813
2813
|
const iconMap = {
|
|
2814
|
+
neutral: "core::info",
|
|
2814
2815
|
primary: "core::info",
|
|
2815
2816
|
success: "core::check-filled-mono",
|
|
2816
2817
|
warning: "core::warning",
|
|
2817
2818
|
danger: "core::error"
|
|
2818
2819
|
};
|
|
2819
2820
|
const InlineMessageSize = pick(Size, ["SM", "MD"]);
|
|
2820
|
-
const InlineMessageVariant = pick(Variant, ["PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
2821
|
+
const InlineMessageVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
2821
2822
|
const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
|
|
2822
2823
|
constructor() {
|
|
2823
2824
|
super(...arguments);
|
|
2824
2825
|
this.dismissible = false;
|
|
2825
2826
|
this.strong = false;
|
|
2826
2827
|
this.size = InlineMessageSize.SM;
|
|
2827
|
-
this.variant = InlineMessageVariant.
|
|
2828
|
+
this.variant = InlineMessageVariant.NEUTRAL;
|
|
2828
2829
|
}
|
|
2829
2830
|
static {
|
|
2830
2831
|
customElement("odx-inline-message", styles$P)(_OdxInlineMessage);
|
|
@@ -3085,7 +3086,7 @@ __decorateClass([
|
|
|
3085
3086
|
], _OdxLineClamp.prototype, "max", 2);
|
|
3086
3087
|
let OdxLineClamp = _OdxLineClamp;
|
|
3087
3088
|
|
|
3088
|
-
const styles$J = "@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))}#separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}#expand-control::part(icon){transition:var(--odx-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(:not([muted],[data-odx-expandable]):hover):after{opacity:0}: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{
|
|
3089
|
+
const styles$J = "@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))}#separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}#expand-control::part(icon){transition:var(--odx-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(:not([muted],[data-odx-expandable]):hover):after{opacity:0}: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)}}@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)}}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-hover);--_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-rest);--_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-hover);--_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-rest);--_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)}}";
|
|
3089
3090
|
|
|
3090
3091
|
const ListItemVariant = pick(Variant, ["NEUTRAL", "DANGER", "WARNING"]);
|
|
3091
3092
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(LinkControlElement) {
|
|
@@ -3193,8 +3194,10 @@ const _OdxList = class _OdxList extends CustomElement {
|
|
|
3193
3194
|
updated(props) {
|
|
3194
3195
|
super.updated(props);
|
|
3195
3196
|
for (const item of this.getItems()) {
|
|
3196
|
-
item.muted = this.muted;
|
|
3197
3197
|
item.size = this.size;
|
|
3198
|
+
if (props.has("muted")) {
|
|
3199
|
+
item.muted = this.muted;
|
|
3200
|
+
}
|
|
3198
3201
|
}
|
|
3199
3202
|
}
|
|
3200
3203
|
};
|
|
@@ -3596,7 +3599,7 @@ class OdxModal extends DialogElement {
|
|
|
3596
3599
|
}
|
|
3597
3600
|
}
|
|
3598
3601
|
|
|
3599
|
-
const styles$A = ":host{--_font-size:var(--odx-control-font-size-md);--_font-size-label:var(--odx-control-font-size-sm);--_spacing:var(--odx-layout-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-md);flex-direction:column;display:flex}#expand-indicator{transition:var(--odx-transition-reduced)}#label,::slotted(odx-label){font-size:var(--_font-size)}::slotted(odx-label){margin-inline:calc(2*var(--_spacing-inline));color:var(--odx-color-foreground-rest-subtle);font-size:var(--_font-size-label);font-weight:var(--odx-typography-font-weight-medium)}:host([size=sm]){--_font-size:var(--odx-control-font-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_font-size-label:var(--odx-control-font-size-md);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg);#expand-indicator{padding:var(--odx-spacing-12)}}:host([expanded]:not([disabled])) #expand-indicator{
|
|
3602
|
+
const styles$A = ":host{--_font-size:var(--odx-control-font-size-md);--_font-size-label:var(--odx-control-font-size-sm);--_spacing:var(--odx-layout-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-md);flex-direction:column;display:flex}#expand-indicator{transition:var(--odx-transition-reduced)}#label,::slotted(odx-label){font-size:var(--_font-size)}::slotted(odx-label){margin-inline:calc(2*var(--_spacing-inline));color:var(--odx-color-foreground-rest-subtle);font-size:var(--_font-size-label);font-weight:var(--odx-typography-font-weight-medium)}:host([size=sm]){--_font-size:var(--odx-control-font-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_font-size-label:var(--odx-control-font-size-md);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg);#expand-indicator{padding:var(--odx-spacing-12)}}:host([expanded]:not([disabled])) #expand-indicator{transform:rotateX(180deg)}";
|
|
3600
3603
|
|
|
3601
3604
|
const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpanded(CanBeDisabled(CustomElement)) {
|
|
3602
3605
|
constructor() {
|
|
@@ -3696,7 +3699,7 @@ __decorateClass([
|
|
|
3696
3699
|
], _OdxNavigation.prototype, "size", 2);
|
|
3697
3700
|
let OdxNavigation = _OdxNavigation;
|
|
3698
3701
|
|
|
3699
|
-
const styles$y = ":host{--_page-width:var(--odx-page-size,1400px);--_page-content-width:var(--odx-page-content-size,auto)
|
|
3702
|
+
const styles$y = ":host{--page-header-height:0px;--page-offset-top:var(--page-header-height);--_page-width:var(--odx-page-size,1400px);--_page-content-width:var(--odx-page-content-size,auto);background-color:var(--odx-color-background-base);grid-template:\"header header\"minmax(0,auto)\"start content\"minmax(0,1fr)\"footer footer\"minmax(0,auto)/minmax(0,auto) minmax(0,1fr);min-height:100dvh;display:grid}#header,.panel{position:sticky}#header{z-index:calc(var(--odx-z-level-sticky-foreground) + 1);grid-area:header;inset-block-start:0}#content{background-color:inherit;padding-block-end:var(--odx-layout-spacing-lg);padding-inline:var(--odx-layout-spacing-lg);width:100%;max-width:var(--_page-width);grid-area:content;height:100%}#footer{grid-area:footer}.panel{z-index:var(--odx-z-level-sticky-foreground);height:calc(100dvh - var(--page-header-height));grid-area:start;display:flex;inset-block-start:var(--page-offset-top);& slot::slotted(*){max-height:100%}}::slotted([slot=start]),::slotted(odx-page-layout){min-height:100%}:host([alignment=center]){#header,#content{margin-inline:auto}#header{width:100%}::slotted(odx-header){place-items:center}}:host([layout=narrow]){--odx-page-size:1200px;--odx-page-content-size:var(--odx-page-content-size,80ch)}:host([layout=wide]){--odx-page-size:1800px;--odx-page-content-size:var(--odx-page-content-size,120ch)}:host([layout=full]){--odx-page-size:auto;--odx-page-content-size:auto}@media(width<1000px){:host{--odx-layout-spacing-lg:var(--odx-layout-spacing-md)}}";
|
|
3700
3703
|
|
|
3701
3704
|
const PageAlignment = pick(Alignment, ["START", "CENTER"]);
|
|
3702
3705
|
const PageLayout = { DEFAULT: "default", NARROW: "narrow", WIDE: "wide", FULL: "full" };
|
|
@@ -3713,7 +3716,7 @@ const _OdxPage = class _OdxPage extends CustomElement {
|
|
|
3713
3716
|
#headerHeight;
|
|
3714
3717
|
disconnectedCallback() {
|
|
3715
3718
|
super.disconnectedCallback();
|
|
3716
|
-
unobserveElementResize(this);
|
|
3719
|
+
unobserveElementResize(this.headerElement);
|
|
3717
3720
|
}
|
|
3718
3721
|
firstUpdated(props) {
|
|
3719
3722
|
super.firstUpdated(props);
|
|
@@ -3742,7 +3745,7 @@ __decorateClass([
|
|
|
3742
3745
|
], _OdxPage.prototype, "layout", 2);
|
|
3743
3746
|
let OdxPage = _OdxPage;
|
|
3744
3747
|
|
|
3745
|
-
const styles$x = ":host{--page-layout-offset-top:var(--page-offset-top,0px);--_spacing:var(--odx-layout-spacing-lg);background-color:var(--odx-color-background-base);grid-template:\"header header header\"minmax(0,auto)\"panel-start content-header panel-end\"minmax(0,auto)\"panel-start content panel-end\"minmax(0,1fr)\"panel-start footer panel-end\"minmax(0,auto)/minmax(0,auto) minmax(0,1fr) minmax(0,auto);display:grid}#header,#content,#footer,.panel{flex-direction:column;display:flex}#content-header,#footer,.panel{z-index:var(--odx-z-level-sticky);background-color:inherit;position:sticky}#content-header,.content{max-width:var(--_page-content-width,auto)}#header{z-index:var(--odx-z-level-sticky-foreground);grid-area:header}#content-header{z-index:var(--odx-z-level-sticky);margin-block-end:0;margin-inline:calc(-1*var(--_spacing));padding-block-end:0;padding-inline:var(--_spacing);grid-area:content-header;inset-block-start:var(--page-layout-offset-top)}#content{grid-area:content}#footer{grid-area:footer;position:sticky;inset-block:auto 0}.panel{max-height:calc(100dvh - var(--page-layout-offset-top) - var(--_spacing));flex:1;inset-block-start:calc(var(--page-layout-offset-top) + var(--_spacing));overflow:hidden auto;& slot::slotted(*){max-height:100%}}#panel-start{grid-area:panel-start}#panel-end{grid-area:panel-end}::slotted([slot=panel-start]){margin-inline-end:var(--_spacing)}::slotted([slot=panel-end]){margin-inline-start:var(--_spacing)}";
|
|
3748
|
+
const styles$x = ":host{--page-layout-offset-top:var(--page-offset-top,0px);--_spacing:var(--odx-layout-spacing-lg);background-color:var(--odx-color-background-base);grid-template:\"header header header\"minmax(0,auto)\"panel-start content-header panel-end\"minmax(0,auto)\"panel-start content panel-end\"minmax(0,1fr)\"panel-start footer panel-end\"minmax(0,auto)/minmax(0,auto) minmax(0,1fr) minmax(0,auto);display:grid}#header,#content,#footer,.panel{flex-direction:column;display:flex}#content-header,#footer,.panel{z-index:var(--odx-z-level-sticky);background-color:inherit;position:sticky}#content-header,.content{max-width:var(--_page-content-width,auto)}#header{z-index:var(--odx-z-level-sticky-foreground);grid-area:header}#content-header{z-index:var(--odx-z-level-sticky);margin-block-end:0;margin-inline:calc(-1*var(--_spacing));padding-block-end:0;padding-inline:var(--_spacing);grid-area:content-header;inset-block-start:var(--page-layout-offset-top)}#content{grid-area:content}#footer{grid-area:footer;position:sticky;inset-block:auto 0}.panel{max-height:calc(100dvh - var(--page-layout-offset-top) - 2*var(--_spacing));flex:1;inset-block-start:calc(var(--page-layout-offset-top) + var(--_spacing));overflow:hidden auto;& slot::slotted(*){max-height:100%}}#panel-start{grid-area:panel-start}#panel-end{grid-area:panel-end}::slotted([slot=panel-start]){margin-inline-end:var(--_spacing)}::slotted([slot=panel-end]){margin-inline-start:var(--_spacing)}";
|
|
3746
3749
|
|
|
3747
3750
|
const PageLayoutAlignment = pick(Alignment, ["START", "CENTER", "END"]);
|
|
3748
3751
|
const _OdxPageLayout = class _OdxPageLayout extends CustomElement {
|
|
@@ -3950,7 +3953,7 @@ __decorateClass([
|
|
|
3950
3953
|
], _OdxProgressRing.prototype, "size", 2);
|
|
3951
3954
|
let OdxProgressRing = _OdxProgressRing;
|
|
3952
3955
|
|
|
3953
|
-
const styles$s = "@layer base{:host{--_indicator-icon-size:var(--odx-size-50)}#indicator{border-radius:var(--odx-border-radius-circle)}#indicator-icon{border-radius:inherit;background-color:var(--_indicator-color-foreground);width:var(--_indicator-icon-size);height:var(--_indicator-icon-size)}}@layer state{:host([
|
|
3956
|
+
const styles$s = "@layer base{:host{--_indicator-icon-size:var(--odx-size-50)}#indicator{border-radius:var(--odx-border-radius-circle)}#indicator-icon{border-radius:inherit;background-color:var(--_indicator-color-foreground);width:var(--_indicator-icon-size);height:var(--_indicator-icon-size)}}@layer state{:host([checked]:not([readonly])){--_indicator-color-foreground:var(--odx-color-foreground-inverse)}}";
|
|
3954
3957
|
|
|
3955
3958
|
const _OdxRadioButton = class _OdxRadioButton extends OdxCheckbox$1 {
|
|
3956
3959
|
static {
|
|
@@ -3989,7 +3992,7 @@ __decorateClass([
|
|
|
3989
3992
|
], _OdxRadioGroup.prototype, "layout", 2);
|
|
3990
3993
|
let OdxRadioGroup = _OdxRadioGroup;
|
|
3991
3994
|
|
|
3992
|
-
const styles$q = ":host{display:block}odx-navigation{transition:var(--odx-transition-default);width:100%;max-width:100%;height:100%}.toggle-control{margin-block-start:auto}.toggle-indicator{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]){& odx-navigation{min-width:var(--odx-control-height-lg);max-width:var(--odx-control-height-lg)}.toggle-indicator{
|
|
3995
|
+
const styles$q = ":host{display:block}odx-navigation{transition:var(--odx-transition-default);width:100%;max-width:100%;height:100%}.toggle-control{margin-block-start:auto}.toggle-indicator{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]){& odx-navigation{min-width:var(--odx-control-height-lg);max-width:var(--odx-control-height-lg)}.toggle-indicator{transform:rotateX(180deg)}}:host([collapsed][size=sm]){& odx-navigation{min-width:var(--odx-control-height-sm);max-width:var(--odx-control-height-sm)}}:host([collapsed][size=md]){& odx-navigation{min-width:var(--odx-control-height-md);max-width:var(--odx-control-height-md)}}";
|
|
3993
3996
|
|
|
3994
3997
|
const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CanBeCollapsed(CustomElement)) {
|
|
3995
3998
|
constructor() {
|
|
@@ -4736,7 +4739,7 @@ __decorateClass([
|
|
|
4736
4739
|
], _OdxStatus.prototype, "variant", 2);
|
|
4737
4740
|
let OdxStatus = _OdxStatus;
|
|
4738
4741
|
|
|
4739
|
-
const styles$f = "@layer base{:host{--_indicator-track-height:var(--odx-size-50);--_indicator-track-width:var(--odx-
|
|
4742
|
+
const styles$f = "@layer base{:host{--_indicator-track-height:var(--odx-size-50);--_indicator-track-width:var(--odx-size-225);--_indicator-thumb-position:calc(-.5*(var(--_indicator-track-width) - var(--_indicator-size)));--_indicator-thumb-spacing:var(--odx-border-width-thin)}#indicator{border-radius:var(--odx-border-radius-circle);translate:var(--_indicator-thumb-position)0;margin:0}#indicator-container{margin:var(--_indicator-spacing);height:var(--_indicator-size);place-items:center;display:grid;>*{grid-area:1/1}}#indicator-track{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);width:var(--_indicator-track-width);height:var(--_indicator-track-height);mask-image:radial-gradient(circle closest-side at center,transparent calc(var(--_indicator-size)/2 + var(--_indicator-thumb-spacing)),black 0);mask-position:calc(var(--_indicator-thumb-position) - var(--_indicator-thumb-spacing));mask-size:calc(100% + 2*var(--_indicator-thumb-spacing))}}@layer state{:host([checked]){--_indicator-thumb-position:calc(.5*(var(--_indicator-track-width) - var(--_indicator-size)))}}@layer variant{:host([size=sm]){--_indicator-track-width:var(--odx-size-175);--_indicator-icon-size:var(--odx-size-75)}}@layer overrides{:host([disabled]) #indicator-container{cursor:not-allowed}}";
|
|
4740
4743
|
|
|
4741
4744
|
const _OdxSwitch = class _OdxSwitch extends OdxCheckbox$1 {
|
|
4742
4745
|
static {
|
|
@@ -5378,4 +5381,4 @@ __decorateClass([
|
|
|
5378
5381
|
], _OdxTranslate.prototype, "context", 2);
|
|
5379
5382
|
let OdxTranslate = _OdxTranslate;
|
|
5380
5383
|
|
|
5381
|
-
export { AccordionIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePosition, ButtonControlElement, ButtonVariant, CardVariant, CheckboxGroupLayout, CheckboxIndicatorPosition, CheckboxSize, ChipVariant, ControlElement, ControlSize, DialogCloseCommand, DialogCloseEvent, DialogDismissCommand, DialogElement, DialogLayer, DialogShowCommand, DialogShowEvent, DialogSize, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, IconButtonPreset, InlineMessageSize, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LinkControlElement, ListItemVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout,
|
|
5384
|
+
export { AccordionIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePosition, ButtonControlElement, ButtonVariant, CardVariant, CheckboxGroupLayout, CheckboxIndicatorPosition, CheckboxSize, ChipVariant, ControlElement, ControlSize, DialogCloseCommand, DialogCloseEvent, DialogDismissCommand, DialogElement, DialogLayer, DialogShowCommand, DialogShowEvent, DialogSize, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, IconButtonPreset, InlineMessageSize, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LinkControlElement, ListItemVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, 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, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxListbox, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, 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, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderHandleVariant, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, controlDirective, createModal, dialogDirective, scrollContainerNext, scrollContainerPrevious, sliderContext };
|
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
import { Signal } from '
|
|
2
|
-
|
|
1
|
+
import { Signal } from './signals.js';
|
|
2
|
+
type FilteredKeys<T extends object> = {
|
|
3
|
+
[K in keyof T as T[K] extends true ? K : never]: T[K];
|
|
4
|
+
};
|
|
5
|
+
export type BreakpointOperator = '<' | '<=' | '>=' | '>';
|
|
6
|
+
export interface BreakpointConfig {
|
|
7
|
+
name: keyof FilteredKeys<ODX.Breakpoints.Config>;
|
|
8
|
+
min: number;
|
|
9
|
+
max: number;
|
|
10
|
+
customQuery?: string;
|
|
11
|
+
}
|
|
12
|
+
export interface Breakpoint extends BreakpointConfig {
|
|
13
|
+
id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
|
|
14
|
+
query: string;
|
|
15
|
+
operator?: BreakpointOperator;
|
|
16
|
+
}
|
|
3
17
|
export declare const breakpointDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint">;
|
|
4
18
|
export declare const breakpointClassDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint-class">;
|
|
5
19
|
export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
|
|
@@ -10,4 +24,5 @@ export declare function observeBreakpoint(breakpoint: Breakpoint, initialValue?:
|
|
|
10
24
|
export declare function createBreakpointDirectiveUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
|
|
11
25
|
matches: boolean;
|
|
12
26
|
}) => void): () => void;
|
|
13
|
-
|
|
27
|
+
export {};
|
|
28
|
+
//# sourceMappingURL=breakpoints-utils.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BreakpointConfig } from './
|
|
1
|
+
import { BreakpointConfig } from './breakpoints-utils.js';
|
|
2
2
|
declare global {
|
|
3
3
|
namespace ODX.Breakpoints {
|
|
4
4
|
interface Config {
|
|
@@ -21,7 +21,5 @@ export declare const defaultBreakpoints: [{
|
|
|
21
21
|
readonly min: 992;
|
|
22
22
|
readonly max: 1199.98;
|
|
23
23
|
}];
|
|
24
|
-
export
|
|
25
|
-
|
|
26
|
-
export * from './utils.js';
|
|
27
|
-
//# sourceMappingURL=main.d.ts.map
|
|
24
|
+
export declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
|
|
25
|
+
//# sourceMappingURL=breakpoints.d.ts.map
|
package/dist/main.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ export * from './lib/behaviors/form-associated.js';
|
|
|
7
7
|
export * from './lib/behaviors/listbox-control.js';
|
|
8
8
|
export * from './lib/behaviors/radio-group-control.js';
|
|
9
9
|
export * from './lib/behaviors/with-presets.js';
|
|
10
|
+
export * from './lib/breakpoints.js';
|
|
11
|
+
export * from './lib/breakpoints-utils.js';
|
|
10
12
|
export * from './lib/controllers/active-descendants-controller.js';
|
|
11
13
|
export * from './lib/controllers/drag.controller.js';
|
|
12
14
|
export * from './lib/controllers/expandable-controller.js';
|
package/dist/main.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
2
|
import { property, state } from 'lit/decorators.js';
|
|
3
|
-
import { toAriaBooleanAttribute, booleanAttributeDirective, getElementFromEvent, getKeyInfo, setFocusable, getAssignedElements, interactionResponse, forwardEvent
|
|
3
|
+
import { toAriaBooleanAttribute, booleanAttributeDirective, getElementFromEvent, getKeyInfo, setFocusable, getAssignedElements, stringAttributeDirective, observeMedia, interactionResponse, forwardEvent } from '@odx/foundation/utils';
|
|
4
4
|
import { unsafeCSS, LitElement, html, isServer, render } from 'lit';
|
|
5
5
|
import { R as RovingTabindexController } from './vendor.js';
|
|
6
6
|
export { e as SignalWatcher } from './vendor.js';
|
|
7
|
-
import { applyDarkMode } from '@odx/design-tokens';
|
|
8
7
|
import { signal, effect } from '@preact/signals-core';
|
|
9
8
|
export { Computed, Effect, Signal, batch, computed, effect, signal, untracked } from '@preact/signals-core';
|
|
9
|
+
import { applyDarkMode } from '@odx/design-tokens';
|
|
10
10
|
|
|
11
11
|
class ExpandEvent extends CustomEvent {
|
|
12
12
|
static {
|
|
@@ -284,7 +284,7 @@ const CheckboxControl = (superClass) => {
|
|
|
284
284
|
return CheckboxControlBehavior;
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
-
const styles = "@layer 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}[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 base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :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-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)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[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}}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)}@layer base{.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-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-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,overrides;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-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}}";
|
|
287
|
+
const styles = "@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :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-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)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[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}}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-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-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-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state;@layer overrides{.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-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-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}}@layer 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}[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}}}";
|
|
288
288
|
|
|
289
289
|
function customElement(tagName, ...styles2) {
|
|
290
290
|
return (target) => {
|
|
@@ -780,6 +780,114 @@ const WithPresets = (superClass) => {
|
|
|
780
780
|
return WithPresetsMixin;
|
|
781
781
|
};
|
|
782
782
|
|
|
783
|
+
const operators = ["<", "<=", ">=", ">"];
|
|
784
|
+
const breakpointDirective = stringAttributeDirective("odx-breakpoint");
|
|
785
|
+
const breakpointClassDirective = stringAttributeDirective("odx-breakpoint-class");
|
|
786
|
+
function buildBreakpoint(breakpoint, operator) {
|
|
787
|
+
const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
|
|
788
|
+
let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
|
|
789
|
+
switch (operator) {
|
|
790
|
+
case "<":
|
|
791
|
+
query = `(max-width: ${breakpoint.min - 0.02}px)`;
|
|
792
|
+
break;
|
|
793
|
+
case "<=":
|
|
794
|
+
query = `(max-width: ${breakpoint.max}px)`;
|
|
795
|
+
break;
|
|
796
|
+
case ">=":
|
|
797
|
+
query = `(min-width: ${breakpoint.min}px)`;
|
|
798
|
+
break;
|
|
799
|
+
case ">":
|
|
800
|
+
query = `(min-width: ${breakpoint.max + 0.02}px)`;
|
|
801
|
+
break;
|
|
802
|
+
}
|
|
803
|
+
return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
|
|
804
|
+
}
|
|
805
|
+
function expandBreakpoints(...breakpoints) {
|
|
806
|
+
return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
|
|
807
|
+
}
|
|
808
|
+
function observeBreakpoint(breakpoint, initialValue = false) {
|
|
809
|
+
let unobserveMedia;
|
|
810
|
+
return signal(
|
|
811
|
+
{ ...breakpoint, matches: initialValue },
|
|
812
|
+
{
|
|
813
|
+
unwatched: () => {
|
|
814
|
+
unobserveMedia?.();
|
|
815
|
+
unobserveMedia = void 0;
|
|
816
|
+
},
|
|
817
|
+
watched() {
|
|
818
|
+
unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
|
|
819
|
+
this.value = { ...breakpoint, matches };
|
|
820
|
+
});
|
|
821
|
+
}
|
|
822
|
+
}
|
|
823
|
+
);
|
|
824
|
+
}
|
|
825
|
+
function setBreakpointActiveStyles(host, active) {
|
|
826
|
+
const classNames = breakpointClassDirective.value(host);
|
|
827
|
+
if (!classNames) {
|
|
828
|
+
host.hidden = !active;
|
|
829
|
+
host.inert = !active;
|
|
830
|
+
return;
|
|
831
|
+
}
|
|
832
|
+
for (const className of classNames.split(" ")) {
|
|
833
|
+
host.classList.toggle(className, active);
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
function createBreakpointDirectiveUpdater(breakpoints, update) {
|
|
837
|
+
const breakpointCache = /* @__PURE__ */ new WeakMap();
|
|
838
|
+
const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint, false));
|
|
839
|
+
return () => {
|
|
840
|
+
const directives = document.querySelectorAll(breakpointDirective.selector);
|
|
841
|
+
const changes = breakpointObservers.reduce(
|
|
842
|
+
(breakpoints2, { value }) => {
|
|
843
|
+
breakpoints2[value.id] = value;
|
|
844
|
+
return breakpoints2;
|
|
845
|
+
},
|
|
846
|
+
{}
|
|
847
|
+
);
|
|
848
|
+
let i = directives.length;
|
|
849
|
+
while (i--) {
|
|
850
|
+
const directive = directives[i];
|
|
851
|
+
const change = changes[breakpointDirective.value(directive) || ""];
|
|
852
|
+
if (!change || change.matches === breakpointCache.get(directive)) continue;
|
|
853
|
+
breakpointCache.set(directive, change.matches);
|
|
854
|
+
setBreakpointActiveStyles(directive, change.matches);
|
|
855
|
+
update?.(directive, change);
|
|
856
|
+
}
|
|
857
|
+
};
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
const defaultBreakpoints = [
|
|
861
|
+
{ name: "mobile", min: 0, max: 575.98 },
|
|
862
|
+
{ name: "tablet", min: 576, max: 991.98 },
|
|
863
|
+
{ name: "desktop", min: 992, max: 1199.98 }
|
|
864
|
+
];
|
|
865
|
+
function setupBreakpoints(breakpointsConfig = []) {
|
|
866
|
+
const breakpoints = expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig);
|
|
867
|
+
const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints);
|
|
868
|
+
let mutationObserver;
|
|
869
|
+
let unobserveBreakpoints = () => {
|
|
870
|
+
};
|
|
871
|
+
function initBreakpoints() {
|
|
872
|
+
destroyBreakpoints();
|
|
873
|
+
mutationObserver = new MutationObserver(directiveUpdater);
|
|
874
|
+
mutationObserver.observe(document.documentElement, {
|
|
875
|
+
attributes: true,
|
|
876
|
+
subtree: true,
|
|
877
|
+
childList: true,
|
|
878
|
+
attributeFilter: [breakpointDirective.attribute]
|
|
879
|
+
});
|
|
880
|
+
unobserveBreakpoints = effect(directiveUpdater);
|
|
881
|
+
}
|
|
882
|
+
function destroyBreakpoints() {
|
|
883
|
+
unobserveBreakpoints();
|
|
884
|
+
mutationObserver?.disconnect();
|
|
885
|
+
globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
|
|
886
|
+
}
|
|
887
|
+
globalThis.addEventListener("DOMContentLoaded", initBreakpoints);
|
|
888
|
+
return destroyBreakpoints;
|
|
889
|
+
}
|
|
890
|
+
|
|
783
891
|
const dragActiveDirective = booleanAttributeDirective({
|
|
784
892
|
name: "data-odx-drag-active",
|
|
785
893
|
onUpdate: (host) => host instanceof LitElement && host.requestUpdate()
|
|
@@ -995,4 +1103,4 @@ const Variant = {
|
|
|
995
1103
|
GHOST: "ghost"
|
|
996
1104
|
};
|
|
997
1105
|
|
|
998
|
-
export { ActiveDescendantsController, Alignment, CanBeCollapsed, CanBeDisabled, CanBeExpanded, CheckboxControl, CheckboxGroupControl, CollapseEvent, CustomElement, DragController, DragControllerOptions, ExpandEvent, ExpandableItemManager, FormAssociated, ListboxControl, OptionType, Placement, RadioGroupControl, Size, Variant, WithPresets, activeDirective, attachDarkModeToggle, checkboxControlDirective, customElement, darkModeIcon, dragActiveDirective, isDarkModeEnabled, lightModeIcon, loadCustomElements, toggleDarkMode, userPrefersDarkMode };
|
|
1106
|
+
export { ActiveDescendantsController, Alignment, CanBeCollapsed, CanBeDisabled, CanBeExpanded, CheckboxControl, CheckboxGroupControl, CollapseEvent, CustomElement, DragController, DragControllerOptions, ExpandEvent, ExpandableItemManager, FormAssociated, ListboxControl, OptionType, Placement, RadioGroupControl, Size, Variant, WithPresets, activeDirective, attachDarkModeToggle, breakpointClassDirective, breakpointDirective, buildBreakpoint, checkboxControlDirective, createBreakpointDirectiveUpdater, customElement, darkModeIcon, defaultBreakpoints, dragActiveDirective, expandBreakpoints, isDarkModeEnabled, lightModeIcon, loadCustomElements, observeBreakpoint, setupBreakpoints, toggleDarkMode, userPrefersDarkMode };
|
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}[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-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-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-control-color-background-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-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-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-layout-spacing-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[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}}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-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :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-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)}}}@layer odx.variant,odx.state,odx.theme;@layer odx.utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-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}}@layer base{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-scrollbar)transparent}::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-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-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}
|
|
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}[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-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-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-control-color-background-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-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-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-layout-spacing-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[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}}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-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :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-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-layout-spacing-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-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}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-scrollbar)transparent}::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}}@layer odx.overrides{.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-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-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}}
|
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.255",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"@spectrum-web-components/reactive-controllers": "1.10.0",
|
|
31
31
|
"es-toolkit": "1.42.0",
|
|
32
32
|
"sass-embedded": "1.93.3",
|
|
33
|
-
"stylelint": "16.
|
|
33
|
+
"stylelint": "16.26.0",
|
|
34
34
|
"tinyglobby": "0.2.15",
|
|
35
35
|
"@odx-internal/config-stylelint": "0.0.0",
|
|
36
|
-
"@odx-internal/config-typescript": "0.0.0",
|
|
37
36
|
"@odx-internal/config-vite": "0.0.0",
|
|
38
|
-
"@odx-internal/
|
|
39
|
-
"@odx/design-tokens": "2.6.0"
|
|
37
|
+
"@odx-internal/config-typescript": "0.0.0",
|
|
38
|
+
"@odx/design-tokens": "2.6.0",
|
|
39
|
+
"@odx-internal/utils-storybook": "0.0.0"
|
|
40
40
|
},
|
|
41
41
|
"sideEffects": [
|
|
42
42
|
"dist/components-loader.js",
|
|
@@ -47,10 +47,6 @@
|
|
|
47
47
|
"import": "./dist/main.js",
|
|
48
48
|
"types": "./dist/main.d.ts"
|
|
49
49
|
},
|
|
50
|
-
"./breakpoints": {
|
|
51
|
-
"import": "./dist/breakpoints.js",
|
|
52
|
-
"types": "./dist/breakpoints/main.d.ts"
|
|
53
|
-
},
|
|
54
50
|
"./components": {
|
|
55
51
|
"import": "./dist/components.js",
|
|
56
52
|
"types": "./dist/components/main.d.ts"
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
type FilteredKeys<T extends object> = {
|
|
2
|
-
[K in keyof T as T[K] extends true ? K : never]: T[K];
|
|
3
|
-
};
|
|
4
|
-
export type BreakpointOperator = '<' | '<=' | '>=' | '>';
|
|
5
|
-
export interface BreakpointConfig {
|
|
6
|
-
name: keyof FilteredKeys<ODX.Breakpoints.Config>;
|
|
7
|
-
min: number;
|
|
8
|
-
max: number;
|
|
9
|
-
customQuery?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface Breakpoint extends BreakpointConfig {
|
|
12
|
-
id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
|
|
13
|
-
query: string;
|
|
14
|
-
operator?: BreakpointOperator;
|
|
15
|
-
}
|
|
16
|
-
export {};
|
|
17
|
-
//# sourceMappingURL=types.d.ts.map
|
package/dist/breakpoints.js
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { signal, effect } from '@odx/foundation';
|
|
2
|
-
import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
|
|
3
|
-
|
|
4
|
-
const operators = ["<", "<=", ">=", ">"];
|
|
5
|
-
const breakpointDirective = stringAttributeDirective("odx-breakpoint");
|
|
6
|
-
const breakpointClassDirective = stringAttributeDirective("odx-breakpoint-class");
|
|
7
|
-
function buildBreakpoint(breakpoint, operator) {
|
|
8
|
-
const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
|
|
9
|
-
let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
|
|
10
|
-
switch (operator) {
|
|
11
|
-
case "<":
|
|
12
|
-
query = `(max-width: ${breakpoint.min - 0.02}px)`;
|
|
13
|
-
break;
|
|
14
|
-
case "<=":
|
|
15
|
-
query = `(max-width: ${breakpoint.max}px)`;
|
|
16
|
-
break;
|
|
17
|
-
case ">=":
|
|
18
|
-
query = `(min-width: ${breakpoint.min}px)`;
|
|
19
|
-
break;
|
|
20
|
-
case ">":
|
|
21
|
-
query = `(min-width: ${breakpoint.max + 0.02}px)`;
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
|
|
25
|
-
}
|
|
26
|
-
function expandBreakpoints(...breakpoints) {
|
|
27
|
-
return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
|
|
28
|
-
}
|
|
29
|
-
function observeBreakpoint(breakpoint, initialValue = false) {
|
|
30
|
-
let unobserveMedia;
|
|
31
|
-
return signal(
|
|
32
|
-
{ ...breakpoint, matches: initialValue },
|
|
33
|
-
{
|
|
34
|
-
unwatched: () => {
|
|
35
|
-
unobserveMedia?.();
|
|
36
|
-
unobserveMedia = void 0;
|
|
37
|
-
},
|
|
38
|
-
watched() {
|
|
39
|
-
unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
|
|
40
|
-
this.value = { ...breakpoint, matches };
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
function setBreakpointActiveStyles(host, active) {
|
|
47
|
-
const classNames = breakpointClassDirective.value(host);
|
|
48
|
-
if (!classNames) {
|
|
49
|
-
host.hidden = !active;
|
|
50
|
-
host.inert = !active;
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
for (const className of classNames.split(" ")) {
|
|
54
|
-
host.classList.toggle(className, active);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
function createBreakpointDirectiveUpdater(breakpoints, update) {
|
|
58
|
-
const breakpointCache = /* @__PURE__ */ new WeakMap();
|
|
59
|
-
const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint, false));
|
|
60
|
-
return () => {
|
|
61
|
-
const directives = document.querySelectorAll(breakpointDirective.selector);
|
|
62
|
-
const changes = breakpointObservers.reduce(
|
|
63
|
-
(breakpoints2, { value }) => {
|
|
64
|
-
breakpoints2[value.id] = value;
|
|
65
|
-
return breakpoints2;
|
|
66
|
-
},
|
|
67
|
-
{}
|
|
68
|
-
);
|
|
69
|
-
let i = directives.length;
|
|
70
|
-
while (i--) {
|
|
71
|
-
const directive = directives[i];
|
|
72
|
-
const change = changes[breakpointDirective.value(directive) || ""];
|
|
73
|
-
if (!change || change.matches === breakpointCache.get(directive)) continue;
|
|
74
|
-
breakpointCache.set(directive, change.matches);
|
|
75
|
-
setBreakpointActiveStyles(directive, change.matches);
|
|
76
|
-
update?.(directive, change);
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
const defaultBreakpoints = [
|
|
82
|
-
{ name: "mobile", min: 0, max: 575.98 },
|
|
83
|
-
{ name: "tablet", min: 576, max: 991.98 },
|
|
84
|
-
{ name: "desktop", min: 992, max: 1199.98 }
|
|
85
|
-
];
|
|
86
|
-
function setupBreakpoints(breakpointsConfig = []) {
|
|
87
|
-
const breakpoints = expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig);
|
|
88
|
-
const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints);
|
|
89
|
-
let mutationObserver;
|
|
90
|
-
let unobserveBreakpoints = () => {
|
|
91
|
-
};
|
|
92
|
-
function initBreakpoints() {
|
|
93
|
-
destroyBreakpoints();
|
|
94
|
-
mutationObserver = new MutationObserver(directiveUpdater);
|
|
95
|
-
mutationObserver.observe(document.documentElement, {
|
|
96
|
-
attributes: true,
|
|
97
|
-
subtree: true,
|
|
98
|
-
childList: true,
|
|
99
|
-
attributeFilter: [breakpointDirective.attribute]
|
|
100
|
-
});
|
|
101
|
-
unobserveBreakpoints = effect(directiveUpdater);
|
|
102
|
-
}
|
|
103
|
-
function destroyBreakpoints() {
|
|
104
|
-
unobserveBreakpoints();
|
|
105
|
-
mutationObserver?.disconnect();
|
|
106
|
-
globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
|
|
107
|
-
}
|
|
108
|
-
globalThis.addEventListener("DOMContentLoaded", initBreakpoints);
|
|
109
|
-
return destroyBreakpoints;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
export { breakpointClassDirective, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };
|