@odx/foundation 1.0.0-beta.226 → 1.0.0-beta.227
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/breakpoints/main.d.ts +18 -0
- package/dist/breakpoints/models.d.ts +9 -0
- package/dist/breakpoints/plugins.d.ts +4 -0
- package/dist/breakpoints/utils.d.ts +9 -0
- package/dist/breakpoints.js +93 -0
- package/dist/components.js +9 -9
- package/dist/lib/control-element.d.ts +0 -1
- package/dist/main.js +10 -13
- package/dist/styles.css +1 -1
- package/dist/utils/main.d.ts +1 -0
- package/dist/utils/shared-media-observer.d.ts +4 -0
- package/dist/utils/shared-resize-observer.d.ts +1 -1
- package/dist/utils.js +58 -11
- package/package.json +9 -4
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Breakpoint, BreakpointPlugin } from './models.js';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace ODX {
|
|
4
|
+
interface Breakpoints {
|
|
5
|
+
mobile: true;
|
|
6
|
+
tablet: true;
|
|
7
|
+
desktop: true;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export interface BreakpointsConfig {
|
|
12
|
+
breakpoints: Breakpoint[];
|
|
13
|
+
plugins: BreakpointPlugin[];
|
|
14
|
+
}
|
|
15
|
+
export declare const BreakpointsConfig: (config?: Partial<BreakpointsConfig>) => BreakpointsConfig;
|
|
16
|
+
export default function setupBreakpoints(config?: Partial<BreakpointsConfig>): () => void;
|
|
17
|
+
export declare function getBreakpoints(): Breakpoint[];
|
|
18
|
+
//# sourceMappingURL=main.d.ts.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Signal } from '@preact/signals-core';
|
|
2
|
+
import { Breakpoint } from './models.js';
|
|
3
|
+
export declare function observeBreakpoint(breakpoint: Breakpoint & {
|
|
4
|
+
query: string;
|
|
5
|
+
}, initialValue?: boolean): Signal<Breakpoint & {
|
|
6
|
+
matches: boolean;
|
|
7
|
+
}>;
|
|
8
|
+
export declare function createMediaQuery({ min, max }: Breakpoint, operator?: string): string;
|
|
9
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
|
|
2
|
+
import { signal } from '@preact/signals-core';
|
|
3
|
+
|
|
4
|
+
const BreakpointHideTargetPlugin = (target, breakpoint) => {
|
|
5
|
+
target.hidden = !breakpoint.matches;
|
|
6
|
+
};
|
|
7
|
+
const breakpointClassNameDirective = stringAttributeDirective("odx-breakpoint-class");
|
|
8
|
+
const BreakpointClassNamePlugin = (target, breakpoint) => {
|
|
9
|
+
if (!breakpointClassNameDirective.applied(target)) return;
|
|
10
|
+
const classNames = breakpointClassNameDirective.value(target)?.split(" ") ?? [];
|
|
11
|
+
for (const className of classNames) {
|
|
12
|
+
target.classList.toggle(className, breakpoint.matches);
|
|
13
|
+
target.hidden = false;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
function observeBreakpoint(breakpoint, initialValue = false) {
|
|
18
|
+
let unobserveMedia;
|
|
19
|
+
return signal(
|
|
20
|
+
{ ...breakpoint, matches: initialValue },
|
|
21
|
+
{
|
|
22
|
+
unwatched: () => {
|
|
23
|
+
unobserveMedia?.();
|
|
24
|
+
},
|
|
25
|
+
watched() {
|
|
26
|
+
unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
|
|
27
|
+
this.value = { ...breakpoint, matches };
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
function createMediaQuery({ min, max }, operator) {
|
|
34
|
+
switch (operator) {
|
|
35
|
+
case void 0:
|
|
36
|
+
return `(min-width: ${min}px) and (max-width: ${max}px)`;
|
|
37
|
+
case "<":
|
|
38
|
+
return `(max-width: ${min - 0.02}px)`;
|
|
39
|
+
case "<=":
|
|
40
|
+
return `(max-width: ${max}px)`;
|
|
41
|
+
case ">=":
|
|
42
|
+
return `(min-width: ${min}px)`;
|
|
43
|
+
case ">":
|
|
44
|
+
return `(min-width: ${max + 0.02}px)`;
|
|
45
|
+
default:
|
|
46
|
+
throw new Error(`Invalid operator: ${operator}`);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const breakpointRegistry = /* @__PURE__ */ new Map();
|
|
51
|
+
const BreakpointsConfig = (config) => ({
|
|
52
|
+
breakpoints: [
|
|
53
|
+
{ id: "mobile", min: 0, max: 575.98 },
|
|
54
|
+
{ id: "tablet", min: 576, max: 991.98 },
|
|
55
|
+
{ id: "desktop", min: 992, max: 1199.98 },
|
|
56
|
+
...config?.breakpoints ?? []
|
|
57
|
+
],
|
|
58
|
+
plugins: [BreakpointHideTargetPlugin, BreakpointClassNamePlugin].concat(config?.plugins ?? [])
|
|
59
|
+
});
|
|
60
|
+
function setupBreakpoints(config = {}) {
|
|
61
|
+
const { plugins, breakpoints } = BreakpointsConfig(config);
|
|
62
|
+
const operators = [void 0, ..."<", "<=", ">=", ">"];
|
|
63
|
+
const breakpointDirective = stringAttributeDirective("odx-breakpoint");
|
|
64
|
+
for (const breakpoint of breakpoints) {
|
|
65
|
+
for (const operator of operators) {
|
|
66
|
+
const id = `${operator ?? ""}${breakpoint.id}`;
|
|
67
|
+
const entry = { ...breakpoint, id, query: createMediaQuery(breakpoint, operator), operator: Boolean(operator) };
|
|
68
|
+
breakpointRegistry.set(id, entry);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
const subscriptions = Array.from(breakpointRegistry.values()).map((breakpoint) => {
|
|
72
|
+
const breakpointSelector = `[${breakpointDirective.attribute}="${breakpoint.id}"]`;
|
|
73
|
+
return observeBreakpoint(breakpoint).subscribe((result) => {
|
|
74
|
+
const breakpointDirectives = Array.from(document.querySelectorAll(breakpointSelector));
|
|
75
|
+
if (!breakpointDirectives.length) return;
|
|
76
|
+
for (const host of breakpointDirectives) {
|
|
77
|
+
for (const plugin of plugins) {
|
|
78
|
+
plugin(host, result);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
return () => {
|
|
84
|
+
for (const unsubscribe of subscriptions) {
|
|
85
|
+
unsubscribe();
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function getBreakpoints() {
|
|
90
|
+
return Array.from(breakpointRegistry.values()).filter((breakpoint) => !breakpoint.operator);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export { BreakpointsConfig, setupBreakpoints as default, getBreakpoints };
|
package/dist/components.js
CHANGED
|
@@ -832,7 +832,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
|
|
|
832
832
|
Object.assign(floatingElement.style, { left: toPx(result.x), top: toPx(result.y) });
|
|
833
833
|
}
|
|
834
834
|
|
|
835
|
-
const styles$19 = "@layer base{:host{--popover-max-height:100%;--popover-max-width:100%;--popover-spacing:var(--odx-control-spacing-md);--popover-spacing-inline:var(--odx-control-spacing-inline-md);--popover-offset:var(--odx-spacing-37);--_popover-color-background:var(--odx-color-background-level-2);--_popover-color-foreground:var(--odx-color-foreground-rest);--_popover-min-height:inherit;--_popover-max-height:100%;--_popover-min-width:inherit;--_popover-max-width:100%;--_popover-offset-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:var(--odx-transition-default)allow-discrete;opacity:0;padding:var(--_popover-offset-outer);max-width:calc(var(--_popover-width) + 2*var(--_popover-offset-outer));max-height:calc(var(--_popover-height));overflow-clip-margin:var(--odx-spacing-
|
|
835
|
+
const styles$19 = "@layer base{:host{--popover-max-height:100%;--popover-max-width:100%;--popover-spacing:var(--odx-control-spacing-md);--popover-spacing-inline:var(--odx-control-spacing-inline-md);--popover-offset:var(--odx-spacing-37);--_popover-color-background:var(--odx-color-background-level-2);--_popover-color-foreground:var(--odx-color-foreground-rest);--_popover-min-height:inherit;--_popover-max-height:100%;--_popover-min-width:inherit;--_popover-max-width:100%;--_popover-offset-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:var(--odx-transition-default)allow-discrete;opacity:0;padding:var(--_popover-offset-outer);max-width:calc(var(--_popover-width) + 2*var(--_popover-offset-outer));max-height:calc(var(--_popover-height));overflow-clip-margin:var(--odx-spacing-100);background-color:#0000;margin:0;transition-property:opacity,transform,overlay,display;overflow:clip}:host(:not(:popover-open)){display:none}:host(:popover-open){opacity:1;display:flex;transform:translate(0);@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([data-popover-placement^=top]),:host([data-popover-placement^=bottom]){--_popover-transition-offset-x:0;max-height:var(--_popover-height)}:host([data-popover-placement^=right]),:host([data-popover-placement^=left]){--_popover-transition-offset-y:0;max-width:calc(var(--_popover-width) - var(--_popover-offset-outer))}:host([data-popover-placement^=top]){--_popover-transition-offset-y:calc(.5*var(--popover-offset));padding-block:var(--_popover-offset-outer)var(--popover-offset);& odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([data-popover-placement^=right]){--_popover-transition-offset-x:calc(-.5*var(--popover-offset));padding-inline:var(--popover-offset)var(--_popover-offset-outer);& odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([data-popover-placement^=bottom]){--_popover-transition-offset-y:calc(-.5*var(--popover-offset));--_popover-arrow-offset-y:calc(var(--popover-offset) - 6px);padding-block:var(--popover-offset)var(--_popover-offset-outer);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([data-popover-placement^=left]){--_popover-transition-offset-x:calc(.5*var(--popover-offset));--_popover-arrow-offset-x:calc(var(--popover-offset) - var(--_arrow-size)/2);--_popover-arrow-offset-y:0;padding-inline:var(--_popover-offset-outer)var(--popover-offset);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}}";
|
|
836
836
|
|
|
837
837
|
class PopoverObserver {
|
|
838
838
|
#referenceElements = /* @__PURE__ */ new WeakSet();
|
|
@@ -1621,7 +1621,7 @@ __decorateClass([
|
|
|
1621
1621
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
1622
1622
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
1623
1623
|
|
|
1624
|
-
const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-layout-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-layout-spacing-md));grid-area:image;position:relative}.image:after{transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-layout-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-layout-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-layout-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}::slotted(odx-area-header[slot=header]:first-of-type){margin-block-start:calc(-1*var(--odx-layout-spacing-md))}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([variant=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-
|
|
1624
|
+
const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-layout-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-layout-spacing-md));grid-area:image;position:relative}.image:after{transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-layout-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-layout-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-layout-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}::slotted(odx-area-header[slot=header]:first-of-type){margin-block-start:calc(-1*var(--odx-layout-spacing-md))}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([variant=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-1);border-color:#0000;.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
|
|
1625
1625
|
|
|
1626
1626
|
const CardVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
|
|
1627
1627
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
@@ -1656,7 +1656,7 @@ __decorateClass([
|
|
|
1656
1656
|
], _OdxCard.prototype, "variant", 2);
|
|
1657
1657
|
let OdxCard = _OdxCard;
|
|
1658
1658
|
|
|
1659
|
-
const styles$_ = ":host{--_indicator-size:calc(var(--odx-control-addon-size-sm));--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-color-foreground:transparent;--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke:var(--odx-control-color-stroke-hover);--_indicator-color-background:var(--odx-control-color-background-hover)}:host(:focus-visible)
|
|
1659
|
+
const styles$_ = ":host{--_indicator-size:calc(var(--odx-control-addon-size-sm));--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-color-foreground:transparent;--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke:var(--odx-control-color-stroke-hover);--_indicator-color-background:var(--odx-control-color-background-hover)}:host(:focus-visible){outline:none;.indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host(:is([checked],[indeterminate])){--_indicator-color-background:var(--odx-control-color-background-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-control-color-stroke-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background:var(--odx-control-color-background-selected-hover)}:host(:is([checked],[indeterminate]):focus-visible) .indicator{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}:host([invalid]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background:var(--odx-color-background-danger-rest);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-stroke:var(--odx-color-background-disabled-rest);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-foreground:var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke:var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background:var(--odx-control-color-background-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground:var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-foreground:var(--odx-color-foreground-danger-rest)}";
|
|
1660
1660
|
|
|
1661
1661
|
class OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
1662
1662
|
static {
|
|
@@ -2073,7 +2073,7 @@ __decorateClass([
|
|
|
2073
2073
|
], _OdxHeader.prototype, "size", 2);
|
|
2074
2074
|
let OdxHeader = _OdxHeader;
|
|
2075
2075
|
|
|
2076
|
-
const styles$S = ":host{--popover-max-width:var(--odx-layout-width-sm);--popover-spacing:var(--odx-control-spacing-sm);--popover-spacing-inline:var(--odx-control-spacing-inline-sm);--_popover-color-background:var(--odx-color-background-level-3);--_popover-color-foreground:var(--odx-color-foreground-inverse
|
|
2076
|
+
const styles$S = ":host{--popover-max-width:var(--odx-layout-width-sm);--popover-spacing:var(--odx-control-spacing-sm);--popover-spacing-inline:var(--odx-control-spacing-inline-sm);--_popover-color-background:var(--odx-color-background-level-3);--_popover-color-foreground:var(--odx-color-foreground-inverse)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-control-spacing-sm)}}:host(:not([interactive])){pointer-events:none;-webkit-user-select:none;user-select:none}:host([size=sm]){--popover-max-width:var(--odx-layout-width-xs)}:host([size=lg]){--popover-max-width:var(--odx-layout-width-md)}:host([variant=accent]){--_popover-color-background:var(--odx-color-background-accent-hover)}:host([variant=danger]){--_popover-color-background:var(--odx-color-background-danger-hover)}";
|
|
2077
2077
|
|
|
2078
2078
|
const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
|
|
2079
2079
|
const TooltipSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -2454,7 +2454,7 @@ __decorateClass([
|
|
|
2454
2454
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
2455
2455
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
2456
2456
|
|
|
2457
|
-
const styles$O = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_color-stroke-pressed:var(--odx-control-color-stroke-hover);--_min-width:var(--odx-control-width-lg);cursor:text;font-weight:var(--odx-typography-font-weight-medium)}.base:has(input:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.input{appearance:textfield;transition:var(--odx-transition-default);width:100%;min-width:auto;height:100%;text-align:inherit;color:inherit;font-weight:inherit;background-color:#0000;border:none;outline:none;flex:auto;padding:0;&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}&::-webkit-search-decoration{appearance:none;margin:0}&::-webkit-search-cancel-button{appearance:none;margin:0}&::-webkit-search-results-button{appearance:none;margin:0}&::-webkit-search-results-decoration{appearance:none;margin:0}}.control-clear{margin-inline-end:calc(-1*var(--_spacing-inline) - var(--_spacing))}::slotted(odx-label){margin:0}}@layer state{:host(:is([invalid],[readonly])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}:host([type=number]){--_min-width:auto;.input{text-align:center}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}}@layer variant{:host(.odx-fill){flex:auto;max-width:100%;display:flex}}";
|
|
2457
|
+
const styles$O = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_color-stroke-pressed:var(--odx-control-color-stroke-hover);--_min-width:var(--odx-control-width-lg);border-radius:var(--odx-control-border-radius);cursor:text;font-weight:var(--odx-typography-font-weight-medium);overflow:hidden}.base{border-width:0;border-bottom-width:var(--odx-control-border-width);border-radius:0}.base:has(input:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.input{appearance:textfield;transition:var(--odx-transition-default);width:100%;min-width:auto;height:100%;text-align:inherit;color:inherit;font-weight:inherit;background-color:#0000;border:none;outline:none;flex:auto;padding:0;&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}&::-webkit-search-decoration{appearance:none;margin:0}&::-webkit-search-cancel-button{appearance:none;margin:0}&::-webkit-search-results-button{appearance:none;margin:0}&::-webkit-search-results-decoration{appearance:none;margin:0}}.control-clear{margin-inline-end:calc(-1*var(--_spacing-inline) - var(--_spacing))}::slotted(odx-label){margin:0}}@layer state{:host(:is([invalid],[readonly])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}:host([type=number]){--_min-width:auto;.input{text-align:center}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}}@layer variant{:host(.odx-fill){flex:auto;max-width:100%;display:flex}}";
|
|
2458
2458
|
|
|
2459
2459
|
const _OdxInput = class _OdxInput extends FormAssociated(ControlElement) {
|
|
2460
2460
|
constructor() {
|
|
@@ -3378,7 +3378,7 @@ __decorateClass([
|
|
|
3378
3378
|
], _OdxProgressRing.prototype, "size", 2);
|
|
3379
3379
|
let OdxProgressRing = _OdxProgressRing;
|
|
3380
3380
|
|
|
3381
|
-
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-stroke-width:var(--odx-border-width-thin);--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width;display:flex;position:relative}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:hover){--_indicator-color-background:var(--odx-control-color-background-hover);--_indicator-color-stroke:var(--odx-control-color-stroke-hover)}:host(:focus-visible)
|
|
3381
|
+
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-stroke-width:var(--odx-border-width-thin);--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width;display:flex;position:relative}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:hover){--_indicator-color-background:var(--odx-control-color-background-hover);--_indicator-color-stroke:var(--odx-control-color-stroke-hover)}:host(:focus-visible){outline:none;.indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host([checked]){--_indicator-color-background:var(--odx-control-color-stroke-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-control-color-background-selected);--_indicator-stroke-width:var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke:var(--odx-control-color-background-selected-hover)}:host([checked]:focus-visible) .indicator{outline:var(--odx-border-width-thin)solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thick) var(--odx-color-stroke-focus-outer)}:host([invalid]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-stroke:var(--odx-color-background-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-stroke:var(--odx-color-disabled-stroke);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background:var(--odx-control-color-background-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);--_label-color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background:var(--odx-control-color-stroke-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);--_indicator-stroke-width:var(--odx-control-border-width);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-control-color-background-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-stroke:var(--odx-color-background-disabled-selected);--_indicator-stroke-width:var(--odx-control-border-width);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background:var(--odx-color-background-danger-rest);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
3382
3382
|
|
|
3383
3383
|
class OdxRadioButton extends CheckboxControl(CustomElement) {
|
|
3384
3384
|
static {
|
|
@@ -3837,7 +3837,7 @@ const sliderContext = {
|
|
|
3837
3837
|
|
|
3838
3838
|
const styles$k = ":host{--_track-size:var(--odx-size-37);--_track-color:var(--odx-color-background-accent-rest);--_thumb-color:var(--odx-color-background-level-1);--_layer-background:0;--_layer-control-disabled:1;--_layer-interactive:2;--_layer-foreground:3;cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);min-width:120px;min-height:var(--odx-control-height-md);flex-direction:column;place-content:center;display:flex}.container{border-radius:var(--odx-border-radius-sm);background-color:var(--odx-control-color-background-rest);height:var(--_track-size);position:relative}:host(:active){cursor:grabbing}";
|
|
3839
3839
|
|
|
3840
|
-
const styles$j = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-size:var(--odx-size-125);--_previous-position:0%;--_position:0%;--_next-position:0%;display:contents}.label,.track,.thumb{transition:var(--odx-transition-reduced);transition-property:border-color,opacity,transform;position:absolute}.label,.track{pointer-events:none}.label,.thumb{inset-inline-start:var(--_position)}.label{opacity:0;z-index:var(--odx-z-level-topmost);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-level-3);padding:var(--odx-control-spacing-sm)var(--odx-control-spacing-inline-sm);transform:scale(0);translate:-50% calc(-1*var(--odx-spacing-50));color:var(--odx-color-foreground-inverse
|
|
3840
|
+
const styles$j = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-size:var(--odx-size-125);--_previous-position:0%;--_position:0%;--_next-position:0%;display:contents}.label,.track,.thumb{transition:var(--odx-transition-reduced);transition-property:border-color,opacity,transform;position:absolute}.label,.track{pointer-events:none}.label,.thumb{inset-inline-start:var(--_position)}.label{opacity:0;z-index:var(--odx-z-level-topmost);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-level-3);padding:var(--odx-control-spacing-sm)var(--odx-control-spacing-inline-sm);transform:scale(0);translate:-50% calc(-1*var(--odx-spacing-50));color:var(--odx-color-foreground-inverse);inset-block-end:100%}.track{inset:0 calc(100% - var(--_position))0 var(--_previous-position);z-index:var(--odx-z-level-base);border-radius:var(--_track-size);background-color:var(--_track-color)}.thumb{z-index:var(--odx-z-level-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border:var(--odx-control-border-width)solid var(--odx-control-color-stroke-rest);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-elevation-shadow-level-1);background-color:var(--_thumb-color);cursor:grab;width:var(--_thumb-size);height:var(--_thumb-size);place-content:center;place-items:center;display:flex;inset-block-start:50%;transform:translate(-50%,-50%)}:host([odx-drag-active]),:host(:focus-within){.label{opacity:1;transform:scale(1)}.thumb{border-color:var(--odx-control-color-stroke-pressed)}}:host([disabled]){pointer-events:none;.thumb{--_thumb-color:var(--odx-color-background-disabled);z-index:var(--odx-z-level-foreground)}}:host([variant=danger]){--_track-color:var(--odx-color-background-danger-rest)}:host([variant=warning]){--_track-color:var(--odx-color-background-warning-rest)}:host([variant=success]){--_track-color:var(--odx-color-background-success-rest)}";
|
|
3841
3841
|
|
|
3842
3842
|
const SliderHandleVariant = pick(Variant, ["ACCENT", "DANGER", "WARNING", "SUCCESS"]);
|
|
3843
3843
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl(CustomElement)) {
|
|
@@ -4227,7 +4227,7 @@ __decorateClass([
|
|
|
4227
4227
|
], _OdxStatus.prototype, "variant", 2);
|
|
4228
4228
|
let OdxStatus = _OdxStatus;
|
|
4229
4229
|
|
|
4230
|
-
const styles$f = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle);--_label-color-foreground:var(--odx-color-foreground-rest);--_thumb-position:0;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{height:var(--odx-control-addon-size-md);color:var(--_color-foreground);place-items:center;transition-property:background-color,border-color,translate;display:flex;position:relative}.track,.thumb{border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle);transition:inherit}.track{background-color:var(--_color-background);width:var(--odx-size-225);height:var(--odx-size-50)}.thumb{backface-visibility:hidden;background-color:var(--_color-background);width:var(--odx-control-addon-size-sm);height:var(--odx-control-addon-size-sm);font-size:var(--odx-control-addon-size-xs);translate:var(--_thumb-position)0;place-content:center;place-items:center;display:flex;position:absolute;inset-inline-start:0}.label{cursor:inherit;display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host([indicator-position=end]){flex-direction:row-reverse;justify-content:space-between}:host(:empty) .content{display:none}:host(:hover){--_color-stroke:var(--odx-control-color-stroke-hover);--_color-background:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest)}:host(:focus-visible)
|
|
4230
|
+
const styles$f = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle);--_label-color-foreground:var(--odx-color-foreground-rest);--_thumb-position:0;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{height:var(--odx-control-addon-size-md);color:var(--_color-foreground);place-items:center;transition-property:background-color,border-color,translate;display:flex;position:relative}.track,.thumb{border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle);transition:inherit}.track{background-color:var(--_color-background);width:var(--odx-size-225);height:var(--odx-size-50)}.thumb{backface-visibility:hidden;background-color:var(--_color-background);width:var(--odx-control-addon-size-sm);height:var(--odx-control-addon-size-sm);font-size:var(--odx-control-addon-size-xs);translate:var(--_thumb-position)0;place-content:center;place-items:center;display:flex;position:absolute;inset-inline-start:0}.label{cursor:inherit;display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host([indicator-position=end]){flex-direction:row-reverse;justify-content:space-between}:host(:empty) .content{display:none}:host(:hover){--_color-stroke:var(--odx-control-color-stroke-hover);--_color-background:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest)}:host(:focus-visible){outline:none;.thumb{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host([checked]){--_color-background:var(--odx-control-color-background-selected);--_color-stroke:var(--_color-background);--_color-foreground:var(--odx-color-foreground-inverse-static);--_thumb-position:calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background:var(--odx-control-color-background-selected-hover);--_color-stroke:var(--odx-control-color-stroke-selected)}:host([checked]:focus-visible) .thumb{outline:var(--odx-border-width-thin)solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-outer)}:host([invalid]:not([checked])){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-stroke-danger-rest);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-disabled-stroke);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke:var(--odx-control-color-stroke-readonly);--_color-background:var(--odx-control-color-background-rest);--_color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest);--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
4231
4231
|
|
|
4232
4232
|
const SwitchIndicatorPosition = pick(Alignment, ["START", "END"]);
|
|
4233
4233
|
const _OdxSwitch = class _OdxSwitch extends CheckboxControl(CustomElement) {
|
|
@@ -4618,7 +4618,7 @@ __decorateClass([
|
|
|
4618
4618
|
], _OdxTextArea.prototype, "value", 2);
|
|
4619
4619
|
let OdxTextArea = _OdxTextArea;
|
|
4620
4620
|
|
|
4621
|
-
const styles$5 = ":host{gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);border:var(--odx-border-width-thick)solid transparent;border-radius:var(--odx-control-border-radius);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thick));flex-direction:column;transition-property:border-color,box-shadow,transform;display:flex}.content{flex-direction:column;flex:auto;display:flex}:host([interactive]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-
|
|
4621
|
+
const styles$5 = ":host{gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);border:var(--odx-border-width-thick)solid transparent;border-radius:var(--odx-control-border-radius);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thick));flex-direction:column;transition-property:border-color,box-shadow,transform;display:flex}.content{flex-direction:column;flex:auto;display:flex}:host([interactive]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-1)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer)}:host([selected]){border-color:var(--odx-control-color-background-selected)}:host([alignment=center]){align-items:center;.content{justify-content:center}.header,.footer{text-align:center}}";
|
|
4622
4622
|
|
|
4623
4623
|
const TileVariant = pick(Variant, ["NEUTRAL"]);
|
|
4624
4624
|
const TileAlignment = pick(Alignment, ["START", "CENTER"]);
|
|
@@ -21,7 +21,6 @@ declare const ControlElement_base: import('../utils/main.js').Constructor<CanBeD
|
|
|
21
21
|
* @slot - Default slot
|
|
22
22
|
*/
|
|
23
23
|
export declare class ControlElement extends ControlElement_base {
|
|
24
|
-
#private;
|
|
25
24
|
static readonly styles: CSSResultGroup;
|
|
26
25
|
protected loadingSpinnerSlot?: 'prefix' | 'suffix';
|
|
27
26
|
focusTarget: HTMLDivElement;
|
package/dist/main.js
CHANGED
|
@@ -16,7 +16,7 @@ const CanBeCollapsed = (superClass) => {
|
|
|
16
16
|
toggle(state, emitEvent = true) {
|
|
17
17
|
const newState = state ?? !this.collapsed;
|
|
18
18
|
if (this.collapsed === newState || newState && !this.isCollapsible()) return;
|
|
19
|
-
if (emitEvent && this.emit(createToggleEvent(this.collapsed, newState, { composed: true
|
|
19
|
+
if (emitEvent && this.emit(createToggleEvent(this.collapsed, newState, { composed: true }))) return;
|
|
20
20
|
this.collapsed = newState;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -84,7 +84,7 @@ const CanBeExpanded = (superClass) => {
|
|
|
84
84
|
toggle(state, emitEvent = true) {
|
|
85
85
|
const newState = state ?? !this.expanded;
|
|
86
86
|
if (this.expanded === newState || newState && !this.isExpandable()) return;
|
|
87
|
-
if (emitEvent && this.emit(createToggleEvent(this.expanded, newState, { composed: true
|
|
87
|
+
if (emitEvent && this.emit(createToggleEvent(this.expanded, newState, { composed: true }))) return;
|
|
88
88
|
this.expanded = newState;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -258,7 +258,7 @@ const CheckboxControl = (superClass) => {
|
|
|
258
258
|
return CheckboxControlBehavior;
|
|
259
259
|
};
|
|
260
260
|
|
|
261
|
-
const styles$3 = "@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,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;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){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))}: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);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;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],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(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,:where(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,:where(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,:where(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,:where(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{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)}:where(.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);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(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)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.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)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-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-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-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}}";
|
|
261
|
+
const styles$3 = "@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,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;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){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))}: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);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;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],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(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,:where(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,:where(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,:where(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,:where(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{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-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-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-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-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}}";
|
|
262
262
|
|
|
263
263
|
function customElement(tagName, ...styles2) {
|
|
264
264
|
return (target) => {
|
|
@@ -850,7 +850,13 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
850
850
|
updated(props) {
|
|
851
851
|
super.updated(props);
|
|
852
852
|
if (props.has("size")) {
|
|
853
|
-
this
|
|
853
|
+
const controls = getAssignedElements(this.renderRoot, {
|
|
854
|
+
slot: ["prefix", "suffix"],
|
|
855
|
+
selector: controlDirective.selector
|
|
856
|
+
});
|
|
857
|
+
for (const control of controls) {
|
|
858
|
+
control.size = this.size === ControlSize.LG ? ControlSize.MD : ControlSize.SM;
|
|
859
|
+
}
|
|
854
860
|
}
|
|
855
861
|
}
|
|
856
862
|
render() {
|
|
@@ -874,15 +880,6 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
874
880
|
renderLoadingSpinner() {
|
|
875
881
|
return html`<odx-loading-spinner part="spinner"></odx-loading-spinner>`;
|
|
876
882
|
}
|
|
877
|
-
#updatedNestedControls() {
|
|
878
|
-
const controls = getAssignedElements(this.renderRoot, {
|
|
879
|
-
slot: ["prefix", "suffix"],
|
|
880
|
-
selector: controlDirective.selector
|
|
881
|
-
});
|
|
882
|
-
for (const control of controls) {
|
|
883
|
-
control.size = this.size === ControlSize.LG ? ControlSize.MD : ControlSize.SM;
|
|
884
|
-
}
|
|
885
|
-
}
|
|
886
883
|
}
|
|
887
884
|
__decorateClass([
|
|
888
885
|
query(".base", true)
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,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;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{: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);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;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],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(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,:where(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,:where(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,:where(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,:where(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{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)}:where(.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);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(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)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.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)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-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))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-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-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-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}}:root{--odx-focus-ring-outer:var(--odx-border-width-thick)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
|
|
1
|
+
@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,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;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(.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);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(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)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.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)}:where(.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);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;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],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(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,:where(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,:where(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,:where(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,:where(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{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))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-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-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-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}}:root{--odx-focus-ring-outer:var(--odx-border-width-thick)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
|
package/dist/utils/main.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export * from './dom-events.js';
|
|
|
5
5
|
export * from './dom-types.js';
|
|
6
6
|
export * from './lit.js';
|
|
7
7
|
export * from './shared-event-listener.js';
|
|
8
|
+
export * from './shared-media-observer.js';
|
|
8
9
|
export * from './shared-resize-observer.js';
|
|
9
10
|
export * from './types.js';
|
|
10
11
|
export * from './unique-id.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type MediaObserverEventListener = (event: MediaQueryListEvent) => void;
|
|
2
|
+
export declare function observeMedia(query: string, listener: MediaObserverEventListener): () => void;
|
|
3
|
+
export declare function unobserveMedia(query: string, listener: MediaObserverEventListener): void;
|
|
4
|
+
//# sourceMappingURL=shared-media-observer.d.ts.map
|
|
@@ -2,6 +2,6 @@ export interface ObserveElementResizeOptions {
|
|
|
2
2
|
edges?: Array<'leading' | 'trailing'>;
|
|
3
3
|
fpsLimit?: number;
|
|
4
4
|
}
|
|
5
|
-
export declare function observeElementResize(target: Element,
|
|
5
|
+
export declare function observeElementResize(target: Element, callback: ResizeObserverCallback, options?: ObserveElementResizeOptions): () => void;
|
|
6
6
|
export declare function unobserveElementResize(target: Element): void;
|
|
7
7
|
//# sourceMappingURL=shared-resize-observer.d.ts.map
|
package/dist/utils.js
CHANGED
|
@@ -182,27 +182,32 @@ function getKeyInfo(event) {
|
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
const globalListeners = /* @__PURE__ */ new Map();
|
|
185
|
-
const eventListenerRegistry = /* @__PURE__ */ new Map();
|
|
185
|
+
const eventListenerRegistry$1 = /* @__PURE__ */ new Map();
|
|
186
186
|
function handleGlobalEvent(event) {
|
|
187
|
-
const listeners = eventListenerRegistry.get(event.type);
|
|
187
|
+
const listeners = eventListenerRegistry$1.get(event.type);
|
|
188
188
|
if (!listeners?.size) return;
|
|
189
|
-
|
|
189
|
+
const listenersArray = Array.from(listeners);
|
|
190
|
+
let i = listenersArray.length;
|
|
191
|
+
while (i--) {
|
|
190
192
|
if (event.defaultPrevented) return;
|
|
191
|
-
|
|
193
|
+
listenersArray[i]?.(event);
|
|
192
194
|
}
|
|
193
195
|
}
|
|
194
196
|
function addGlobalEventListener(type, listener, options) {
|
|
195
|
-
|
|
197
|
+
let listeners = eventListenerRegistry$1.get(type);
|
|
198
|
+
if (!listeners) {
|
|
199
|
+
listeners = /* @__PURE__ */ new Set();
|
|
200
|
+
eventListenerRegistry$1.set(type, listeners);
|
|
201
|
+
}
|
|
196
202
|
listeners.add(listener);
|
|
197
|
-
|
|
198
|
-
if (!globalListeners.get(type)) {
|
|
203
|
+
if (!globalListeners.has(type)) {
|
|
199
204
|
globalListeners.set(type, handleGlobalEvent);
|
|
200
205
|
globalThis.addEventListener(type, handleGlobalEvent, options);
|
|
201
206
|
}
|
|
202
207
|
return () => removeGlobalEventListener(type, listener);
|
|
203
208
|
}
|
|
204
209
|
function removeGlobalEventListener(type, listener) {
|
|
205
|
-
const listeners = eventListenerRegistry.get(type);
|
|
210
|
+
const listeners = eventListenerRegistry$1.get(type);
|
|
206
211
|
if (!listeners?.delete(listener)) return;
|
|
207
212
|
if (listeners.size > 0) return;
|
|
208
213
|
globalListeners.delete(type);
|
|
@@ -273,11 +278,53 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
273
278
|
return html`<div class="${classNames ? `${slotName} ${classNames}` : slotName}"><slot name="${slotName}" @slotchange="${handleOptionalSlotChange(host)}"></slot></div>`;
|
|
274
279
|
}
|
|
275
280
|
|
|
281
|
+
const mediaQueryRegistry = /* @__PURE__ */ new Map();
|
|
282
|
+
const eventListenerRegistry = /* @__PURE__ */ new Map();
|
|
283
|
+
function handleMediaChange(event) {
|
|
284
|
+
const listeners = eventListenerRegistry.get(event.media);
|
|
285
|
+
if (!listeners?.size) return;
|
|
286
|
+
const listenersArray = Array.from(listeners);
|
|
287
|
+
let i = listenersArray.length;
|
|
288
|
+
while (i--) {
|
|
289
|
+
listenersArray[i]?.(event);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
function observeMedia(query, listener) {
|
|
293
|
+
let listeners = eventListenerRegistry.get(query);
|
|
294
|
+
if (!listeners) {
|
|
295
|
+
listeners = /* @__PURE__ */ new Set();
|
|
296
|
+
eventListenerRegistry.set(query, listeners);
|
|
297
|
+
}
|
|
298
|
+
listeners.add(listener);
|
|
299
|
+
let mediaQueryList = mediaQueryRegistry.get(query);
|
|
300
|
+
if (!mediaQueryList) {
|
|
301
|
+
mediaQueryList = globalThis.matchMedia(query);
|
|
302
|
+
mediaQueryRegistry.set(query, mediaQueryList);
|
|
303
|
+
mediaQueryList.addEventListener("change", handleMediaChange);
|
|
304
|
+
}
|
|
305
|
+
const initialEvent = new MediaQueryListEvent("change", {
|
|
306
|
+
media: mediaQueryList.media,
|
|
307
|
+
matches: mediaQueryList.matches
|
|
308
|
+
});
|
|
309
|
+
listener(initialEvent);
|
|
310
|
+
return () => unobserveMedia(query, listener);
|
|
311
|
+
}
|
|
312
|
+
function unobserveMedia(query, listener) {
|
|
313
|
+
const listeners = eventListenerRegistry.get(query);
|
|
314
|
+
if (!listeners?.delete(listener)) return;
|
|
315
|
+
if (listeners.size > 0) return;
|
|
316
|
+
eventListenerRegistry.delete(query);
|
|
317
|
+
const mediaQueryList = mediaQueryRegistry.get(query);
|
|
318
|
+
if (!mediaQueryList) return;
|
|
319
|
+
mediaQueryList.removeEventListener("change", handleMediaChange);
|
|
320
|
+
mediaQueryRegistry.delete(query);
|
|
321
|
+
}
|
|
322
|
+
|
|
276
323
|
const callbackRegistry = /* @__PURE__ */ new WeakMap();
|
|
277
324
|
let resizeObserver;
|
|
278
|
-
function observeElementResize(target,
|
|
325
|
+
function observeElementResize(target, callback, options) {
|
|
279
326
|
resizeObserver?.unobserve(target);
|
|
280
|
-
callbackRegistry.set(target, throttle(
|
|
327
|
+
callbackRegistry.set(target, throttle(callback, 1e3 / (options?.fpsLimit ?? 30), options));
|
|
281
328
|
resizeObserver ??= new ResizeObserver((entries, observer) => {
|
|
282
329
|
for (const entry of entries) {
|
|
283
330
|
callbackRegistry.get(entry.target)?.(entries, observer);
|
|
@@ -305,4 +352,4 @@ function resetUniqueId(key) {
|
|
|
305
352
|
}
|
|
306
353
|
}
|
|
307
354
|
|
|
308
|
-
export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, disableMotion, enableMotion, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, waitForAnimations };
|
|
355
|
+
export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, disableMotion, enableMotion, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, observeMedia, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, unobserveMedia, waitForAnimations };
|
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.227",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -31,12 +31,12 @@
|
|
|
31
31
|
"@spectrum-web-components/reactive-controllers": "1.8.0",
|
|
32
32
|
"es-toolkit": "1.39.10",
|
|
33
33
|
"sass-embedded": "1.93.2",
|
|
34
|
-
"stylelint": "16.
|
|
34
|
+
"stylelint": "16.25.0",
|
|
35
|
+
"@odx-internal/config-stylelint": "0.0.0",
|
|
35
36
|
"@odx-internal/config-typescript": "0.0.0",
|
|
36
37
|
"@odx-internal/config-vite": "0.0.0",
|
|
37
38
|
"@odx/design-tokens": "2.1.0",
|
|
38
|
-
"@odx-internal/utils-storybook": "0.0.0"
|
|
39
|
-
"@odx-internal/config-stylelint": "0.0.0"
|
|
39
|
+
"@odx-internal/utils-storybook": "0.0.0"
|
|
40
40
|
},
|
|
41
41
|
"sideEffects": [
|
|
42
42
|
"dist/components-loader.js",
|
|
@@ -49,6 +49,11 @@
|
|
|
49
49
|
"import": "./dist/main.js",
|
|
50
50
|
"types": "./dist/main.d.ts"
|
|
51
51
|
},
|
|
52
|
+
"./breakpoints": {
|
|
53
|
+
"import": "./dist/breakpoints.js",
|
|
54
|
+
"types": "./dist/breakpoints/main.d.ts"
|
|
55
|
+
},
|
|
56
|
+
"./breakpoints/*": null,
|
|
52
57
|
"./components": {
|
|
53
58
|
"import": "./dist/components.js",
|
|
54
59
|
"types": "./dist/components/main.d.ts"
|