@odx/foundation 1.0.0-beta.193 → 1.0.0-beta.195
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/list-item/list-item.d.ts +2 -2
- package/dist/components/modal/modal.d.ts +2 -1
- package/dist/components.js +36 -38
- package/dist/css.css +1 -1
- package/dist/elements/behaviors/can-be-expanded.d.ts +2 -1
- package/dist/elements/controllers/expandable-controller.d.ts +1 -1
- package/dist/elements/dialog.d.ts +11 -2
- package/dist/elements.js +35 -41
- package/dist/i18n.js +0 -1
- package/dist/lib/controllers/active-descendants-controller.d.ts +0 -1
- package/dist/lib/utils/command-directive.d.ts +0 -1
- package/dist/lib/utils/dom.d.ts +1 -0
- package/dist/main.js +32 -25
- package/dist/styles.css +1 -1
- package/package.json +6 -6
|
@@ -8,12 +8,12 @@ declare global {
|
|
|
8
8
|
declare const OdxListItem_base: import('../../main.js').Constructor<CanBeExpanded> & typeof InteractiveControlElement;
|
|
9
9
|
export declare class OdxListItem extends OdxListItem_base {
|
|
10
10
|
#private;
|
|
11
|
-
|
|
11
|
+
contentElement?: HTMLElementTagNameMap['odx-toggle-content'];
|
|
12
|
+
expandControl?: HTMLElement;
|
|
12
13
|
muted: boolean;
|
|
13
14
|
selected: boolean;
|
|
14
15
|
withExpandControl: boolean;
|
|
15
16
|
isExpandable(): boolean;
|
|
16
|
-
getExpandControl(): HTMLElement | null;
|
|
17
17
|
connectedCallback(): void;
|
|
18
18
|
protected render(): TemplateResult;
|
|
19
19
|
protected renderContent(): TemplateResult;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ValuesOf } from '../../main.js';
|
|
2
2
|
import { DialogElement } from '../../elements/main.js';
|
|
3
|
-
import { TemplateResult } from 'lit';
|
|
3
|
+
import { PropertyValues, TemplateResult } from 'lit';
|
|
4
4
|
declare global {
|
|
5
5
|
interface HTMLElementTagNameMap {
|
|
6
6
|
'odx-modal': OdxModal;
|
|
@@ -13,5 +13,6 @@ export declare const ModalLayout: {
|
|
|
13
13
|
};
|
|
14
14
|
export declare class OdxModal extends DialogElement {
|
|
15
15
|
protected renderContent(): TemplateResult;
|
|
16
|
+
protected update(props: PropertyValues<this>): void;
|
|
16
17
|
}
|
|
17
18
|
//# sourceMappingURL=modal.d.ts.map
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { CustomElement, customElement, getUniqueId, toAriaBooleanAttribute, Alignment, getAssignedElements, booleanAttributeDirective, Variant, activeDirective, optionalAttr, getAssignedElement, getElementFromEvent, toPx, getIdFromHref, Size, moveAssignedElement, findClosestDocument, commandDirective, Placement, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, PopoverPlacementOptions, computePopoverPlacement, clickedOutside, ActiveDescendantsController, Shape, setFocusable, moveAssignedElements, insertChildrenBetween, optionalSlot, parseDate, supportsHover, forwardEvent, SharedResizeObserver, ProgressVariant } from '@odx/foundation';
|
|
2
|
+
import { CustomElement, customElement, getUniqueId, toAriaBooleanAttribute, Alignment, getAssignedElements, booleanAttributeDirective, Variant, activeDirective, optionalAttr, getAssignedElement, getElementFromEvent, toPx, getIdFromHref, Size, moveAssignedElement, findClosestDocument, commandDirective, Placement, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, PopoverPlacementOptions, computePopoverPlacement, clickedOutside, ActiveDescendantsController, Shape, setFocusable, moveAssignedElements, insertChildrenBetween, optionalSlot, parseDate, supportsHover, forwardEvent, SharedResizeObserver, ProgressVariant, toggleEvent } from '@odx/foundation';
|
|
3
3
|
import { CanBeExpanded, InteractiveControlElement, ControlSize, ExpandableItemManager, CanBeDisabled, FormAssociated, CheckboxControlElement, CheckboxGroupControlElement, DialogElement, OptionControlElement, RadioGroupControlElement, ListboxControlElement, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation/elements';
|
|
4
4
|
import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
5
5
|
import { property, query, state } from 'lit/decorators.js';
|
|
@@ -675,7 +675,7 @@ __decorateClass([
|
|
|
675
675
|
], _OdxAnchorNavigation.prototype, "vertical", 2);
|
|
676
676
|
let OdxAnchorNavigation = _OdxAnchorNavigation;
|
|
677
677
|
|
|
678
|
-
const styles$1b = ":host{display:flex;column-gap:var(--odx-spacing-md);align-items:center;width:100%}.content{display:flex;flex-wrap:wrap;
|
|
678
|
+
const styles$1b = ":host{display:flex;column-gap:var(--odx-spacing-md);align-items:center;width:100%}.content{display:flex;flex-wrap:wrap;gap:var(--odx-spacing-sm);align-items:center;margin-inline-start:auto}:host(:is(:not([size]),[size=\"md\"])){min-height:var(--odx-size-300)}:host([size=\"sm\"]){min-height:var(--odx-size-225)}:host([size=\"lg\"]){min-height:var(--odx-size-400)}";
|
|
679
679
|
|
|
680
680
|
const AreaFooterAlignment = pick(Alignment, ["CENTER", "START", "END"]);
|
|
681
681
|
const AreaFooterSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -758,7 +758,7 @@ __decorateClass([
|
|
|
758
758
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
759
759
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
760
760
|
|
|
761
|
-
const styles$18 = "@layer base{:host{--popover-max-height: 100%;--popover-max-width: 100%;--_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-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-spacing-sm);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-
|
|
761
|
+
const styles$18 = "@layer base{:host{--popover-max-height: 100%;--popover-max-width: 100%;--_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-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-spacing-sm);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-2));--_popover-spacing-inner: var(--odx-spacing-sm);--_popover-spacing-outer: var(--odx-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));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;padding:var(--odx-spacing-37);max-width:calc(var(--_popover-max-width) + 2 * var(--_popover-spacing-inner));max-height:var(--_popover-height)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@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\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(.5 * var(--_popover-offset));padding-block:var(--_popover-spacing-outer) var(--_popover-offset);max-height:calc(var(--_popover-height) - var(--_popover-spacing-outer));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([data-popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-spacing-outer);max-width:calc(var(--_popover-max-width) - var(--_popover-spacing-outer));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([data-popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_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-spacing-outer);max-height:calc(var(--_popover-height) - var(--_popover-spacing-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-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-spacing-outer);max-width:calc(var(--_popover-max-width) - var(--_popover-spacing-outer));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
|
|
762
762
|
|
|
763
763
|
class PopoverObserver {
|
|
764
764
|
#referenceElements = /* @__PURE__ */ new WeakMap();
|
|
@@ -1504,7 +1504,7 @@ __decorateClass([
|
|
|
1504
1504
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
1505
1505
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
1506
1506
|
|
|
1507
|
-
const styles$$ = ":host{display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,auto) 1fr minmax(0,auto) / 1fr;grid-template-areas:\"image\" \"avatar\" \"header\" \"content\" \"footer\";place-content:stretch;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;border:var(--odx-border-width-thin) solid transparent;padding:calc(var(--odx-spacing-lg) - var(--odx-border-width-thin));max-width:100%;overflow:clip}.header,.actions{display:flex;gap:var(--odx-spacing-sm);align-items:center;justify-content:stretch}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end}.image{position:relative;grid-area:image;margin:calc(-1 * var(--odx-spacing-md))}.image:after{position:absolute;inset:0;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))}.content{grid-area:content;overflow:hidden auto}.footer{display:flex;flex-direction:row;grid-area:footer;gap:var(--odx-spacing-md);justify-content:flex-end;margin-block-start:var(--odx-spacing-md)}.image+*{margin-block-start:var(--odx-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=
|
|
1507
|
+
const styles$$ = ":host{display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,auto) 1fr minmax(0,auto) / 1fr;grid-template-areas:\"image\" \"avatar\" \"header\" \"content\" \"footer\";place-content:stretch;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;border:var(--odx-border-width-thin) solid transparent;padding:calc(var(--odx-spacing-lg) - var(--odx-border-width-thin));max-width:100%;overflow:clip}.header,.actions{display:flex;gap:var(--odx-spacing-sm);align-items:center;justify-content:stretch}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end}.image{position:relative;grid-area:image;margin:calc(-1 * var(--odx-spacing-md))}.image:after{position:absolute;inset:0;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))}.content{grid-area:content;overflow:hidden auto}.footer{display:flex;flex-direction:row;grid-area:footer;gap:var(--odx-spacing-md);justify-content:flex-end;margin-block-start:var(--odx-spacing-md)}.image+*{margin-block-start:var(--odx-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){width:100%;max-height:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}: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;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));border-color:transparent;box-shadow:var(--odx-shadow-level-2);.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)}";
|
|
1508
1508
|
|
|
1509
1509
|
const CardVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
|
|
1510
1510
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
@@ -1665,7 +1665,7 @@ __decorateClass([
|
|
|
1665
1665
|
], _OdxChip.prototype, "variant", 2);
|
|
1666
1666
|
let OdxChip = _OdxChip;
|
|
1667
1667
|
|
|
1668
|
-
const styles$X = "@layer base{:host{--dialog-width: var(--odx-
|
|
1668
|
+
const styles$X = "@layer base{:host{--dialog-width: var(--odx-content-width-sm);--dialog-spacing-outer: 0px}.container{translate:-100% 0;height:100%}::slotted(odx-card),::slotted(odx-main-menu){border-radius:inherit;width:100%;height:100%}}@layer variant{:host(:is(:not([position]),[position=\"start\"])) .container{margin-inline-start:0}:host([position=\"end\"]) .container{translate:100% 0;margin-inline-end:0}:host([size=\"sm\"]){--dialog-width: min(var(--odx-content-width-xs), 50%)}:host([size=\"lg\"]){--dialog-width: min(var(--odx-content-width-md), 50%)}}@layer state{:host([open]) .container{translate:0 0;@starting-style{translate:-100% 0}}:host([open][position=\"end\"]) .container{translate:0 0;@starting-style{translate:100% 0}}}@media (width <= 450px){:host{--dialog-width: 100%}}";
|
|
1669
1669
|
|
|
1670
1670
|
const DrawerPosition = pick(Alignment, ["START", "END"]);
|
|
1671
1671
|
const _OdxDrawer = class _OdxDrawer extends DialogElement {
|
|
@@ -2147,7 +2147,7 @@ __decorateClass([
|
|
|
2147
2147
|
], _OdxTooltip.prototype, "placement", 2);
|
|
2148
2148
|
let OdxTooltip = _OdxTooltip;
|
|
2149
2149
|
|
|
2150
|
-
const styles$R = ":host{--icon-rotate: 0deg;--_min-width: var(--_height)}odx-icon{--rotate: var(--icon-rotate);transition:inherit}odx-tooltip{text-align:center}:host([float]){border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-
|
|
2150
|
+
const styles$R = ":host{--icon-rotate: 0deg;--_min-width: var(--_height)}odx-icon{--rotate: var(--icon-rotate);transition:inherit}odx-tooltip{text-align:center}:host([float]){border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-2)}";
|
|
2151
2151
|
|
|
2152
2152
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
2153
2153
|
constructor() {
|
|
@@ -2607,13 +2607,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveControl
|
|
|
2607
2607
|
customElement("odx-list-item", styles$J)(_OdxListItem);
|
|
2608
2608
|
}
|
|
2609
2609
|
isExpandable() {
|
|
2610
|
-
return
|
|
2611
|
-
}
|
|
2612
|
-
getExpandControl() {
|
|
2613
|
-
if (this.isExpandable()) {
|
|
2614
|
-
return this.renderRoot.querySelector(this.withExpandControl ? '[part~="expand-control"]' : '[part~="base"]');
|
|
2615
|
-
}
|
|
2616
|
-
return null;
|
|
2610
|
+
return super.isExpandable() && !this.loading && Boolean(getAssignedElement(this.renderRoot, { slot: "expand" }));
|
|
2617
2611
|
}
|
|
2618
2612
|
connectedCallback() {
|
|
2619
2613
|
super.connectedCallback();
|
|
@@ -2623,14 +2617,14 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveControl
|
|
|
2623
2617
|
const expandSlot = html`<slot name="expand" @slotchange="${() => this.requestUpdate()}"></slot>`;
|
|
2624
2618
|
return html`${super.render()}<odx-separator class="separator" part="separator"></odx-separator>${when(
|
|
2625
2619
|
this.isExpandable(),
|
|
2626
|
-
() => html`<odx-toggle-content class="
|
|
2620
|
+
() => html`<odx-toggle-content class="content" role="region" ?expanded="${this.expanded}">${expandSlot}</odx-toggle-content>`,
|
|
2627
2621
|
() => html`<div class="odx-visually-hidden-force">${expandSlot}</div>`
|
|
2628
2622
|
)}`;
|
|
2629
2623
|
}
|
|
2630
2624
|
renderContent() {
|
|
2631
2625
|
return html`${super.renderContent()} ${when(
|
|
2632
2626
|
this.isExpandable(),
|
|
2633
|
-
() => html`<odx-icon-button class="expand-control"
|
|
2627
|
+
() => html`<odx-icon-button class="expand-control" icon="core::chevron-down" variant="ghost" size="${this.size === ControlSize.LG ? ControlSize.LG : ControlSize.SM}" tabindex="0" ?disabled="${this.disabled}" .inert="${!this.withExpandControl}"></odx-icon-button>`
|
|
2634
2628
|
)}`;
|
|
2635
2629
|
}
|
|
2636
2630
|
willUpdate(props) {
|
|
@@ -2649,18 +2643,21 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveControl
|
|
|
2649
2643
|
super.updated(props);
|
|
2650
2644
|
}
|
|
2651
2645
|
#handleExpandedChange() {
|
|
2652
|
-
const expandControl = this.
|
|
2653
|
-
if (!(this.
|
|
2654
|
-
this.
|
|
2646
|
+
const expandControl = this.expandControl ?? this;
|
|
2647
|
+
if (!(this.contentElement && expandControl)) return;
|
|
2648
|
+
this.contentElement.setAttribute("aria-labelledby", "expand-control");
|
|
2655
2649
|
expandControl.ariaExpanded = toAriaBooleanAttribute(this.expanded);
|
|
2656
|
-
expandControl.setAttribute("aria-controls", this.
|
|
2650
|
+
expandControl.setAttribute("aria-controls", this.contentElement.id);
|
|
2657
2651
|
if (this.expanded) return;
|
|
2658
2652
|
this.querySelector("odx-list")?.toggleAll(false);
|
|
2659
2653
|
}
|
|
2660
2654
|
};
|
|
2661
2655
|
__decorateClass([
|
|
2662
|
-
query(".
|
|
2663
|
-
], _OdxListItem.prototype, "
|
|
2656
|
+
query(".content")
|
|
2657
|
+
], _OdxListItem.prototype, "contentElement", 2);
|
|
2658
|
+
__decorateClass([
|
|
2659
|
+
query(".expand-control:not([inert])")
|
|
2660
|
+
], _OdxListItem.prototype, "expandControl", 2);
|
|
2664
2661
|
__decorateClass([
|
|
2665
2662
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
2666
2663
|
], _OdxListItem.prototype, "muted", 2);
|
|
@@ -2827,25 +2824,20 @@ __decorateClass([
|
|
|
2827
2824
|
], _OdxLogo.prototype, "compact", 2);
|
|
2828
2825
|
let OdxLogo = _OdxLogo;
|
|
2829
2826
|
|
|
2830
|
-
const styles$E = ":host{--odx-color-background-disabled-rest: var(--odx-color-background-disabled-brand);--odx-color-foreground-disabled-rest: var(--odx-color-foreground-disabled-brand);--odx-color-foreground-accent-hover: var(--odx-color-foreground-inverse-static);display:flex;flex-direction:column;row-gap:var(--odx-spacing-sm);
|
|
2827
|
+
const styles$E = ":host{--odx-color-background-disabled-rest: var(--odx-color-background-disabled-brand);--odx-color-foreground-disabled-rest: var(--odx-color-foreground-disabled-brand);--odx-color-foreground-accent-hover: var(--odx-color-foreground-inverse-static);display:flex;flex-direction:column;row-gap:var(--odx-spacing-sm);background-color:transparent;background-color:var(--odx-color-background-brand);padding:var(--odx-spacing-md);padding-block-start:0;width:100%;max-width:var(--odx-content-width-sm);height:100%;overflow:hidden;color:var(--odx-color-foreground-inverse-static)}.navigation{flex:1 1 auto;overflow-y:auto}.link-navigation{gap:var(--odx-spacing-sm);column-gap:var(--odx-spacing-md)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"]){font-size:var(--odx-font-size-text-sm)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}";
|
|
2831
2828
|
|
|
2832
2829
|
class OdxMainMenu extends CustomElement {
|
|
2833
2830
|
static {
|
|
2834
2831
|
customElement("odx-main-menu", styles$E)(OdxMainMenu);
|
|
2835
2832
|
}
|
|
2836
2833
|
render() {
|
|
2837
|
-
return html`${optionalSlot(this, "header")}<odx-navigation class="navigation"
|
|
2834
|
+
return html`${optionalSlot(this, "header")}<odx-navigation class="navigation"><slot @slotchange="${this.#handleSlotChange}"></slot></odx-navigation><div class="link-navigation odx-cluster"><slot name="link-navigation"></slot></div>`;
|
|
2838
2835
|
}
|
|
2839
2836
|
#handleSlotChange = () => {
|
|
2840
2837
|
for (const link of getAssignedElements(this.renderRoot, { selector: OdxLink.tagName })) {
|
|
2841
2838
|
link.slot ||= "link-navigation";
|
|
2842
2839
|
link.subtle = true;
|
|
2843
2840
|
}
|
|
2844
|
-
for (const item of getAssignedElements(this.renderRoot, {
|
|
2845
|
-
selector: OdxNavigationItem.tagName
|
|
2846
|
-
})) {
|
|
2847
|
-
item.size = ControlSize.LG;
|
|
2848
|
-
}
|
|
2849
2841
|
};
|
|
2850
2842
|
}
|
|
2851
2843
|
|
|
@@ -2937,7 +2929,7 @@ class OdxMenu extends PopoverHost {
|
|
|
2937
2929
|
};
|
|
2938
2930
|
}
|
|
2939
2931
|
|
|
2940
|
-
const styles$C = "@layer base{:host{--dialog-spacing-top: 10dvh}.
|
|
2932
|
+
const styles$C = "@layer base{:host{--dialog-spacing-top: 10dvh;--dialog-width: var(--odx-content-width-md)}.container{translate:0 var(--odx-spacing-md);border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-3);max-height:calc(100% - var(--_spacing-top))}}@layer variant{:host([size=\"sm\"]){--dialog-width: var(--odx-content-width-sm)}:host([size=\"lg\"]){--dialog-width: var(--odx-content-width-lg)}}@layer state{:host([open]){.container{translate:0 0;@starting-style{translate:0 var(--odx-spacing-md)}}}}";
|
|
2941
2933
|
|
|
2942
2934
|
const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
2943
2935
|
class OdxModal extends DialogElement {
|
|
@@ -2945,10 +2937,16 @@ class OdxModal extends DialogElement {
|
|
|
2945
2937
|
customElement("odx-modal", styles$C)(OdxModal);
|
|
2946
2938
|
}
|
|
2947
2939
|
renderContent() {
|
|
2948
|
-
return html`<odx-card><odx-area-header><slot name="header" slot="header"></slot><slot name="actions" slot="suffix"></slot>${when(
|
|
2940
|
+
return html`<odx-card class="odx-content-box"><odx-area-header><slot name="header" slot="header"></slot><slot name="actions" slot="suffix"></slot>${when(
|
|
2949
2941
|
this.dismissible,
|
|
2950
2942
|
() => html`<odx-icon-button icon="core::close" variant="ghost" slot="suffix" @click="${this.dismiss}"></odx-icon-button>`
|
|
2951
|
-
)}</odx-area-header><slot></slot><
|
|
2943
|
+
)}</odx-area-header><slot></slot><odx-area-footer class="odx-align-end" alignment="end" slot="footer"><slot name="footer"></slot></odx-area-footer></odx-card>`;
|
|
2944
|
+
}
|
|
2945
|
+
update(props) {
|
|
2946
|
+
super.update(props);
|
|
2947
|
+
if (props.has("backdropDisabled") && this.backdropDisabled) {
|
|
2948
|
+
this.backdropDisabled = false;
|
|
2949
|
+
}
|
|
2952
2950
|
}
|
|
2953
2951
|
}
|
|
2954
2952
|
|
|
@@ -2993,7 +2991,7 @@ __decorateClass([
|
|
|
2993
2991
|
], _OdxNavigationItemGroup.prototype, "size", 2);
|
|
2994
2992
|
let OdxNavigationItemGroup = _OdxNavigationItemGroup;
|
|
2995
2993
|
|
|
2996
|
-
const styles$A = ":host{display:grid;grid-template-rows:auto 1fr auto;transition:var(--odx-transition-default);transition-property:width,min-width,max-width;width:100%;min-width:min-content;max-width:var(--odx-
|
|
2994
|
+
const styles$A = ":host{display:grid;grid-template-rows:auto 1fr auto;transition:var(--odx-transition-default);transition-property:width,min-width,max-width;width:100%;min-width:min-content;max-width:var(--odx-content-width-md)}.base,.footer{display:flex;flex-direction:column;gap:var(--odx-spacing-sm);max-width:inherit}.base{height:100%;overflow:hidden auto;text-transform:capitalize}.footer{justify-content:center}::slotted(odx-separator){--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}:host([horizontal]){padding-block:var(--odx-spacing-sm);&,.base{display:flex;flex-direction:row;align-items:center;max-width:100%}.base{flex:1 1 auto;overflow:auto hidden}}";
|
|
2997
2995
|
|
|
2998
2996
|
const _OdxNavigation = class _OdxNavigation extends CustomElement {
|
|
2999
2997
|
constructor() {
|
|
@@ -3100,7 +3098,7 @@ const _OdxPageLayout = class _OdxPageLayout extends CustomElement {
|
|
|
3100
3098
|
customElement("odx-page-layout", styles$x)(_OdxPageLayout);
|
|
3101
3099
|
}
|
|
3102
3100
|
render() {
|
|
3103
|
-
return html`${optionalSlot(this, "panel-start", "panel")} ${optionalSlot(this, "header")}<div class="content"><slot></slot></div>${optionalSlot(this, "panel-end", "panel")} ${optionalSlot(this, "footer")}`;
|
|
3101
|
+
return html`${optionalSlot(this, "panel-start", "panel")} ${optionalSlot(this, "banner")} ${optionalSlot(this, "header")}<div class="content"><slot></slot></div>${optionalSlot(this, "panel-end", "panel")} ${optionalSlot(this, "footer")}`;
|
|
3104
3102
|
}
|
|
3105
3103
|
};
|
|
3106
3104
|
__decorateClass([
|
|
@@ -3353,8 +3351,8 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
|
|
|
3353
3351
|
this.collapsed = false;
|
|
3354
3352
|
this.size = ControlSize.LG;
|
|
3355
3353
|
this.#handleControlClick = () => {
|
|
3354
|
+
if (this.emit(toggleEvent(this.collapsed, !this.collapsed))) return;
|
|
3356
3355
|
this.collapsed = !this.collapsed;
|
|
3357
|
-
this.emit("toggle");
|
|
3358
3356
|
};
|
|
3359
3357
|
}
|
|
3360
3358
|
static {
|
|
@@ -3545,7 +3543,7 @@ __decorateClass([
|
|
|
3545
3543
|
], _OdxSearchBar.prototype, "value", 2);
|
|
3546
3544
|
let OdxSearchBar = _OdxSearchBar;
|
|
3547
3545
|
|
|
3548
|
-
const styles$n = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-control-height-md);--_spacing: var(--odx-control-spacing-inline-md)
|
|
3546
|
+
const styles$n = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-control-height-md);--_spacing: var(--odx-control-spacing-inline-md);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;min-width:15ch;max-width:30ch;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;position:relative;gap:var(--_spacing);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border-bottom:var(--odx-control-stroke-width) solid var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--odx-control-spacing-inline-md);height:var(--_control-size);text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);border-bottom:0}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--_popover-spacing-inner: 0;--_popover-offset: 0}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host([block]){max-width:100%}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}::slotted(odx-link){margin:var(--odx-control-spacing-md) var(--odx-control-spacing-inline-md)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3549
3547
|
|
|
3550
3548
|
const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
3551
3549
|
constructor() {
|
|
@@ -3738,9 +3736,9 @@ const sliderContext = {
|
|
|
3738
3736
|
}
|
|
3739
3737
|
};
|
|
3740
3738
|
|
|
3741
|
-
const styles$k = ":host{--_track-size: var(--odx-size-
|
|
3739
|
+
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;display:flex;flex-direction:column;place-content:center;cursor:pointer;padding-block:var(--odx-spacing-75) var(--odx-spacing-50);padding-inline:var(--odx-spacing-75);min-width:120px;min-height:var(--odx-size-300)}[part~=container]{position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);height:var(--_track-size)}:host(:active){cursor:grabbing}";
|
|
3742
3740
|
|
|
3743
|
-
const styles$j = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-
|
|
3741
|
+
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}[part~=track],[part~=thumb],[part~=label]{position:absolute}[part~=track],[part~=label]{pointer-events:none}[part~=thumb],[part~=label]{inset-inline-start:var(--_position)}[part~=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)}[part~=thumb]{display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--odx-z-level-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border:var(--odx-control-stroke-width) solid var(--odx-color-stroke-control-subtle);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-1);background-color:var(--_thumb-color);cursor:grab;width:var(--_thumb-size);height:var(--_thumb-size)}[part~=label]{inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-spacing-75))) scale(0);opacity:0;z-index:var(--odx-z-level-foreground);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-accent-rest);padding-inline:var(--odx-control-spacing-md);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse)}[part~=with-motion]{transition:var(--odx-transition-reduced)}:host([odx-drag-active]) [part~=with-motion]{transition-property:outline}[part~=thumb]:active,:host(:active) [part~=thumb]{outline-width:var(--odx-size-50)}:host(:hover),:host(:focus-within){[part~=thumb]{border-color:var(--odx-color-stroke-control-pressed)}[part~=label]{transform:translate(-50%) translateY(calc(-1 * var(--odx-spacing-75))) scale(1);opacity:1}}:host([disabled]){pointer-events:none;[part~=thumb]{--_thumb-color: var(--odx-color-background-disabled);z-index:var(--odx-z-level-foreground)}}";
|
|
3744
3742
|
|
|
3745
3743
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl(CustomElement)) {
|
|
3746
3744
|
constructor() {
|
|
@@ -4516,7 +4514,7 @@ __decorateClass([
|
|
|
4516
4514
|
], _OdxTextArea.prototype, "value", 2);
|
|
4517
4515
|
let OdxTextArea = _OdxTextArea;
|
|
4518
4516
|
|
|
4519
|
-
const styles$5 = ":host{display:flex;flex-direction:column;gap:var(--odx-spacing-sm);transition:var(--odx-transition-reduced);transition-property:border-color,box-shadow,transform;border:var(--odx-border-width-thick) solid transparent;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-spacing-lg) - var(--odx-border-width-thick))}.content{display:flex;flex:1 1 auto;flex-direction:column}:host([interactive]){cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-shadow-level-
|
|
4517
|
+
const styles$5 = ":host{display:flex;flex-direction:column;gap:var(--odx-spacing-sm);transition:var(--odx-transition-reduced);transition-property:border-color,box-shadow,transform;border:var(--odx-border-width-thick) solid transparent;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-spacing-lg) - var(--odx-border-width-thick))}.content{display:flex;flex:1 1 auto;flex-direction:column}:host([interactive]){cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-shadow-level-2)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer)}:host([selected]){border-color:var(--odx-color-background-control-selected)}:host([alignment=\"center\"]){align-items:center;.content{justify-content:center}.header,.footer{text-align:center}}";
|
|
4520
4518
|
|
|
4521
4519
|
const TileVariant = pick(Variant, ["NEUTRAL"]);
|
|
4522
4520
|
const TileAlignment = pick(Alignment, ["START", "CENTER"]);
|
package/dist/css.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-motion-delay-reduced: 50ms;--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-size-inline-xs: 20ch;--odx-size-inline-sm: 25ch;--odx-size-inline-md: 28ch;--odx-size-inline-lg: 40ch;--odx-form-control-size-inline: 16ch;--odx-control-min-width: 8ch;--odx-control-height-sm: var(--odx-size-200);--odx-control-height-md: var(--odx-size-225);--odx-control-height-lg: var(--odx-size-300);--odx-control-stroke-width: var(--odx-border-width-thin);--odx-control-addon-size-xs: var(--odx-size-100);--odx-control-addon-size-sm: var(--odx-size-125);--odx-control-addon-size-md: var(--odx-size-150);--odx-control-addon-size-lg: var(--odx-size-200);--odx-control-spacing-sm: var(--odx-spacing-25);--odx-control-spacing-md: var(--odx-spacing-37);--odx-control-spacing-lg: var(--odx-spacing-50);--odx-control-spacing-inline-sm: var(--odx-spacing-37);--odx-control-spacing-inline-md: var(--odx-spacing-37);--odx-control-spacing-inline-lg: var(--odx-spacing-50);--odx-control-font-size-sm: var(--odx-font-size-text-sm);--odx-control-font-size-md: var(--odx-font-size-text-md);--odx-control-font-size-lg: var(--odx-font-size-text-lg);--odx-control-spacing-sides-sm: calc(-1 * var(--odx-control-spacing-sm));--odx-control-spacing-sides-md: calc(-1 * var(--odx-control-spacing-md));--odx-control-spacing-sides-lg: calc(-1 * var(--odx-control-spacing-lg));--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-typography-font-size-2);--odx-line-height-heading-xs: var(--odx-typography-line-height-2);--odx-font-size-heading-sm: var(--odx-typography-font-size-3);--odx-line-height-heading-sm: var(--odx-typography-line-height-3);--odx-font-size-heading-md: var(--odx-typography-font-size-5);--odx-line-height-heading-md: var(--odx-typography-line-height-5);--odx-font-size-heading-lg: var(--odx-typography-font-size-6);--odx-line-height-heading-lg: var(--odx-typography-line-height-6);--odx-font-size-heading-xl: var(--odx-typography-font-size-7);--odx-line-height-heading-xl: var(--odx-typography-line-height-7);--odx-font-size-heading-xxl: var(--odx-typography-font-size-8);--odx-line-height-heading-xxl: var(--odx-typography-line-height-8)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-width:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-width:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-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)}}
|
|
1
|
+
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-motion-delay-reduced: 50ms;--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-content-width-xs: 20ch;--odx-content-width-sm: 25ch;--odx-content-width-md: 50ch;--odx-content-width-lg: 80ch;--odx-form-control-size-inline: 16ch;--odx-control-min-width: 8ch;--odx-control-height-sm: var(--odx-size-200);--odx-control-height-md: var(--odx-size-225);--odx-control-height-lg: var(--odx-size-300);--odx-control-stroke-width: var(--odx-border-width-thin);--odx-control-addon-size-xs: var(--odx-size-100);--odx-control-addon-size-sm: var(--odx-size-125);--odx-control-addon-size-md: var(--odx-size-150);--odx-control-addon-size-lg: var(--odx-size-200);--odx-control-spacing-sm: var(--odx-spacing-25);--odx-control-spacing-md: var(--odx-spacing-37);--odx-control-spacing-lg: var(--odx-spacing-50);--odx-control-spacing-inline-sm: var(--odx-spacing-37);--odx-control-spacing-inline-md: var(--odx-spacing-37);--odx-control-spacing-inline-lg: var(--odx-spacing-50);--odx-control-font-size-sm: var(--odx-font-size-text-sm);--odx-control-font-size-md: var(--odx-font-size-text-md);--odx-control-font-size-lg: var(--odx-font-size-text-lg);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-typography-font-size-2);--odx-line-height-heading-xs: var(--odx-typography-line-height-2);--odx-font-size-heading-sm: var(--odx-typography-font-size-3);--odx-line-height-heading-sm: var(--odx-typography-line-height-3);--odx-font-size-heading-md: var(--odx-typography-font-size-5);--odx-line-height-heading-md: var(--odx-typography-line-height-5);--odx-font-size-heading-lg: var(--odx-typography-font-size-6);--odx-line-height-heading-lg: var(--odx-typography-line-height-6);--odx-font-size-heading-xl: var(--odx-typography-font-size-7);--odx-line-height-heading-xl: var(--odx-typography-line-height-7);--odx-font-size-heading-xxl: var(--odx-typography-font-size-8);--odx-line-height-heading-xxl: var(--odx-typography-line-height-8)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-width:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-width:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-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)}}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Constructor, CustomElement } from '../../main.js';
|
|
2
2
|
import { CanBeDisabled } from './can-be-disabled.js';
|
|
3
3
|
export interface CanBeExpanded {
|
|
4
|
+
expandControl?: HTMLElement;
|
|
4
5
|
expanded: boolean;
|
|
6
|
+
isExpandable(): boolean;
|
|
5
7
|
toggle(state?: boolean, emitEvent?: boolean): void;
|
|
6
|
-
getExpandControl(): HTMLElement | null;
|
|
7
8
|
}
|
|
8
9
|
export declare const CanBeExpanded: <T extends Constructor<CustomElement & CanBeDisabled>>(superClass: T) => Constructor<CanBeExpanded> & T;
|
|
9
10
|
//# sourceMappingURL=can-be-expanded.d.ts.map
|
|
@@ -6,7 +6,7 @@ export interface ExpandableItemManagerHost<T extends ExpandableItem = Expandable
|
|
|
6
6
|
getItems(): T[];
|
|
7
7
|
toggleAll(state?: boolean, emitEvent?: boolean): void;
|
|
8
8
|
}
|
|
9
|
-
export declare class ExpandableItemManager<T extends ExpandableItem> implements ReactiveController {
|
|
9
|
+
export declare class ExpandableItemManager<T extends ExpandableItem = ExpandableItem> implements ReactiveController {
|
|
10
10
|
#private;
|
|
11
11
|
constructor(host: ExpandableItemManagerHost<T>);
|
|
12
12
|
hostConnected?(): void;
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import { CustomElement, ValuesOf } from '../main.js';
|
|
2
2
|
import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
import { CanBeDisabled } from './behaviors/can-be-disabled.js';
|
|
4
|
+
export declare const dialogDirective: import('../main.js').BooleanAttributeDirective<"odx-dialog">;
|
|
5
|
+
export type DialogSize = ValuesOf<typeof DialogSize>;
|
|
6
|
+
export declare const DialogSize: Pick<{
|
|
7
|
+
readonly XS: "xs";
|
|
8
|
+
readonly SM: "sm";
|
|
9
|
+
readonly MD: "md";
|
|
10
|
+
readonly LG: "lg";
|
|
11
|
+
readonly XL: "xl";
|
|
12
|
+
readonly XXL: "xxl";
|
|
13
|
+
}, "SM" | "MD" | "LG">;
|
|
4
14
|
export type DialogLayer = ValuesOf<typeof DialogLayer>;
|
|
5
15
|
export declare const DialogLayer: {
|
|
6
16
|
SCREEN: string;
|
|
@@ -36,11 +46,11 @@ declare const DialogElement_base: import('../main.js').Constructor<CanBeDisabled
|
|
|
36
46
|
export declare class DialogElement extends DialogElement_base {
|
|
37
47
|
#private;
|
|
38
48
|
static readonly styles: CSSResultGroup;
|
|
39
|
-
containerElement: HTMLElement;
|
|
40
49
|
backdropDisabled: boolean;
|
|
41
50
|
dismissible: boolean;
|
|
42
51
|
open: boolean;
|
|
43
52
|
layer: DialogLayer;
|
|
53
|
+
size: DialogSize;
|
|
44
54
|
get canShow(): boolean;
|
|
45
55
|
get canClose(): boolean;
|
|
46
56
|
get canDismiss(): boolean;
|
|
@@ -54,7 +64,6 @@ export declare class DialogElement extends DialogElement_base {
|
|
|
54
64
|
showPopover(): void;
|
|
55
65
|
hidePopover(): void;
|
|
56
66
|
togglePopover(state?: boolean): boolean;
|
|
57
|
-
protected firstUpdated(props: PropertyValues<this>): void;
|
|
58
67
|
protected updated(props: PropertyValues<this>): void;
|
|
59
68
|
protected render(): TemplateResult;
|
|
60
69
|
protected renderContent(): TemplateResult;
|
package/dist/elements.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { toAriaBooleanAttribute, setFocusable, booleanAttributeDirective, getKeyInfo, CustomElement, getAssignedElements, Size, optionalAttr, getElementFromEvent, customEvent, commandDirective, clickedOutside, addGlobalEventListener, removeGlobalEventListener, Alignment, activeDirective, getUniqueId, ActiveDescendantsController } from '@odx/foundation';
|
|
2
|
+
import { toAriaBooleanAttribute, setFocusable, toggleEvent, booleanAttributeDirective, getKeyInfo, CustomElement, getAssignedElements, Size, optionalAttr, getElementFromEvent, customEvent, commandDirective, clickedOutside, addGlobalEventListener, removeGlobalEventListener, Alignment, activeDirective, getUniqueId, ActiveDescendantsController } from '@odx/foundation';
|
|
3
3
|
import { property, query } from 'lit/decorators.js';
|
|
4
4
|
import { isServer, unsafeCSS, html } from 'lit';
|
|
5
5
|
import { p as pick, m as minBy, R as RovingTabindexController } from './vendor.js';
|
|
@@ -10,7 +10,6 @@ const CanBeDisabled = (superClass) => {
|
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
12
|
this.disabled = false;
|
|
13
|
-
this.focusDisabled = false;
|
|
14
13
|
}
|
|
15
14
|
#initialTabIndex;
|
|
16
15
|
connectedCallback() {
|
|
@@ -19,21 +18,18 @@ const CanBeDisabled = (superClass) => {
|
|
|
19
18
|
}
|
|
20
19
|
willUpdate(props) {
|
|
21
20
|
super.willUpdate(props);
|
|
22
|
-
if (props.has("disabled")
|
|
21
|
+
if (props.has("disabled")) {
|
|
23
22
|
this.#handleDisabledChange();
|
|
24
23
|
}
|
|
25
24
|
}
|
|
26
25
|
#handleDisabledChange() {
|
|
27
26
|
this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
|
|
28
|
-
setFocusable(this, this.disabled
|
|
27
|
+
setFocusable(this, this.disabled, this.#initialTabIndex);
|
|
29
28
|
}
|
|
30
29
|
}
|
|
31
30
|
__decorateClass([
|
|
32
31
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
33
32
|
], CanBeDisabledMixin.prototype, "disabled", 2);
|
|
34
|
-
__decorateClass([
|
|
35
|
-
property({ type: Boolean, reflect: true, useDefault: true, attribute: "focus-disabled" })
|
|
36
|
-
], CanBeDisabledMixin.prototype, "focusDisabled", 2);
|
|
37
33
|
return CanBeDisabledMixin;
|
|
38
34
|
};
|
|
39
35
|
|
|
@@ -43,22 +39,14 @@ const CanBeExpanded = (superClass) => {
|
|
|
43
39
|
super(...arguments);
|
|
44
40
|
this.expanded = false;
|
|
45
41
|
}
|
|
46
|
-
|
|
47
|
-
return this;
|
|
42
|
+
isExpandable() {
|
|
43
|
+
return !this.disabled;
|
|
48
44
|
}
|
|
49
45
|
toggle(state, emitEvent = true) {
|
|
50
46
|
const newState = state ?? !this.expanded;
|
|
51
47
|
if (this.disabled || this.expanded === newState) return;
|
|
52
|
-
|
|
48
|
+
if (emitEvent && this.emit(toggleEvent(this.expanded, newState, { composed: true, bubbles: true }))) return;
|
|
53
49
|
this.expanded = newState;
|
|
54
|
-
const toggleEvent = new ToggleEvent("toggle", {
|
|
55
|
-
composed: true,
|
|
56
|
-
bubbles: true,
|
|
57
|
-
oldState: currentState ? "open" : "closed",
|
|
58
|
-
newState: newState ? "open" : "closed"
|
|
59
|
-
});
|
|
60
|
-
if (!(emitEvent && this.emit(toggleEvent))) return;
|
|
61
|
-
this.expanded = currentState;
|
|
62
50
|
}
|
|
63
51
|
}
|
|
64
52
|
__decorateClass([
|
|
@@ -69,15 +57,14 @@ const CanBeExpanded = (superClass) => {
|
|
|
69
57
|
|
|
70
58
|
const FormAssociated = (superClass) => {
|
|
71
59
|
class FormAssociatedBehavior extends CanBeDisabled(superClass) {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
60
|
+
constructor() {
|
|
61
|
+
super(...arguments);
|
|
62
|
+
this.internals = this.attachInternals();
|
|
75
63
|
this.name = "";
|
|
76
64
|
this.value = "";
|
|
77
65
|
this.readonly = false;
|
|
78
66
|
this.required = false;
|
|
79
67
|
this.invalid = false;
|
|
80
|
-
this.internals = this.attachInternals();
|
|
81
68
|
}
|
|
82
69
|
static {
|
|
83
70
|
this.formAssociated = true;
|
|
@@ -547,30 +534,34 @@ class ExpandableItemManager {
|
|
|
547
534
|
this.#host = host;
|
|
548
535
|
this.#host.addController(this);
|
|
549
536
|
if (!isServer) {
|
|
550
|
-
this.#host.addEventListener("toggle", this.#handleToggle);
|
|
551
537
|
this.#host.addEventListener("click", this.#handleClick);
|
|
538
|
+
this.#host.addEventListener("toggle", this.#handleToggle);
|
|
552
539
|
}
|
|
553
540
|
}
|
|
554
541
|
#handleClick = (event) => {
|
|
555
|
-
const
|
|
556
|
-
|
|
542
|
+
const items = new WeakSet(this.#host.getItems());
|
|
543
|
+
const item = getElementFromEvent(event, (node) => items.has(node));
|
|
544
|
+
if (!item) return;
|
|
545
|
+
const expandControl = item.expandControl ? getElementFromEvent(event, (node) => node === item.expandControl) : item;
|
|
546
|
+
if (!expandControl) return;
|
|
557
547
|
event.stopPropagation();
|
|
558
548
|
item.toggle();
|
|
559
549
|
};
|
|
560
550
|
#handleToggle = ((event) => {
|
|
561
|
-
|
|
562
|
-
if (!target) return;
|
|
551
|
+
if (!event.target) return;
|
|
563
552
|
event.stopPropagation();
|
|
564
|
-
if (event.
|
|
553
|
+
if (!event.target.isExpandable() || this.#host.multiple) return;
|
|
565
554
|
for (const item of this.#host.getItems()) {
|
|
566
|
-
if (target === item) continue;
|
|
555
|
+
if (event.target === item) continue;
|
|
567
556
|
item.toggle(false);
|
|
568
557
|
}
|
|
569
558
|
});
|
|
570
559
|
}
|
|
571
560
|
|
|
572
|
-
const styles$2 = "@layer base{:host{--dialog-width: 750px;--dialog-backdrop: var(--odx-color-backdrop-inverse);--dialog-spacing-top: 0px;--dialog-spacing-outer: var(--odx-spacing-lg);display:none;position:fixed;inset:0;transition:var(--odx-transition-slow) allow-discrete;opacity:0;margin:0;background:transparent;
|
|
561
|
+
const styles$2 = "@layer base{:host{--dialog-width: 750px;--dialog-backdrop: var(--odx-color-backdrop-inverse);--dialog-spacing-top: 0px;--dialog-spacing-outer: var(--odx-spacing-lg);display:none;position:fixed;inset:0;transition:var(--odx-transition-slow) allow-discrete;opacity:0;margin:0;background:transparent;padding:var(--dialog-spacing-outer);width:auto;height:auto;overflow:hidden;color:inherit;pointer-events:all;touch-action:manipulation;overscroll-behavior:contain}:host,.container{transition:var(--odx-transition-slow) allow-discrete}.container{display:flex;z-index:var(--odx-z-level-base);margin:var(--dialog-spacing-top) auto auto;width:100%;max-width:var(--dialog-width);height:max-content;max-height:100%;overflow:hidden auto;translate:0 0}.container>*{flex:1 1 auto}::slotted(*){max-height:100%}}@layer variant{:host([layer=\"page\"]){top:var(--odx-page-header-size, 0)}}@layer state{:host(:not([backdrop-disabled])){background:var(--dialog-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}:host([layer=\"container\"]){display:none;position:absolute;z-index:var(--odx-z-level-overlay);max-height:100%}:host([open]){display:contents;opacity:1;@starting-style{opacity:0}}:host([open][layer=\"container\"]){display:flex}:host([backdrop-disabled]){background:transparent;pointer-events:none;.container{pointer-events:all}}}";
|
|
573
562
|
|
|
563
|
+
const dialogDirective = booleanAttributeDirective("odx-dialog");
|
|
564
|
+
const DialogSize = pick(Size, ["SM", "MD", "LG"]);
|
|
574
565
|
const DialogLayer = { SCREEN: "screen", PAGE: "page", CONTAINER: "container" };
|
|
575
566
|
const DialogOpenEvent = customEvent("dialog-open");
|
|
576
567
|
const DialogAfterOpenEvent = customEvent("dialog-after-open");
|
|
@@ -585,12 +576,17 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
585
576
|
this.dismissible = false;
|
|
586
577
|
this.open = false;
|
|
587
578
|
this.layer = DialogLayer.SCREEN;
|
|
579
|
+
this.size = DialogSize.MD;
|
|
588
580
|
this.#handleGlobalClick = ((event) => {
|
|
589
|
-
if (
|
|
581
|
+
if (this.backdropDisabled || !this.canDismiss) return;
|
|
582
|
+
const container = this.renderRoot.querySelector(".container");
|
|
583
|
+
if (container && !clickedOutside(event, container, true)) return;
|
|
584
|
+
event.preventDefault();
|
|
590
585
|
this.dismiss();
|
|
591
586
|
});
|
|
592
587
|
this.#handleGlobalKeydown = ((event) => {
|
|
593
588
|
if (!(this.canDismiss && event.key === "Escape")) return;
|
|
589
|
+
event.preventDefault();
|
|
594
590
|
this.dismiss();
|
|
595
591
|
});
|
|
596
592
|
this.#handleToggle = ((event) => {
|
|
@@ -673,11 +669,6 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
673
669
|
}
|
|
674
670
|
return open;
|
|
675
671
|
}
|
|
676
|
-
firstUpdated(props) {
|
|
677
|
-
super.firstUpdated(props);
|
|
678
|
-
if (!(this.open && this.popover && !this.matches(":popover-open"))) return;
|
|
679
|
-
this.showPopover();
|
|
680
|
-
}
|
|
681
672
|
updated(props) {
|
|
682
673
|
super.updated(props);
|
|
683
674
|
if (props.has("layer")) {
|
|
@@ -689,10 +680,13 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
689
680
|
} else {
|
|
690
681
|
this.#removeGlobalListeners();
|
|
691
682
|
}
|
|
683
|
+
if (this.open && this.popover && !this.matches(":popover-open")) {
|
|
684
|
+
this.showPopover();
|
|
685
|
+
}
|
|
692
686
|
}
|
|
693
687
|
}
|
|
694
688
|
render() {
|
|
695
|
-
return html`<div class="
|
|
689
|
+
return html`<div class="container">${this.renderContent()}</div>`;
|
|
696
690
|
}
|
|
697
691
|
renderContent() {
|
|
698
692
|
return html`<slot></slot>`;
|
|
@@ -709,9 +703,6 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
709
703
|
removeGlobalEventListener("keydown", this.#handleGlobalKeydown);
|
|
710
704
|
}
|
|
711
705
|
};
|
|
712
|
-
__decorateClass([
|
|
713
|
-
query(".base")
|
|
714
|
-
], _DialogElement.prototype, "containerElement", 2);
|
|
715
706
|
__decorateClass([
|
|
716
707
|
property({ type: Boolean, reflect: true, useDefault: true, attribute: "backdrop-disabled" })
|
|
717
708
|
], _DialogElement.prototype, "backdropDisabled", 2);
|
|
@@ -724,6 +715,9 @@ __decorateClass([
|
|
|
724
715
|
__decorateClass([
|
|
725
716
|
property({ reflect: true, useDefault: true })
|
|
726
717
|
], _DialogElement.prototype, "layer", 2);
|
|
718
|
+
__decorateClass([
|
|
719
|
+
property({ reflect: true, useDefault: true })
|
|
720
|
+
], _DialogElement.prototype, "size", 2);
|
|
727
721
|
let DialogElement = _DialogElement;
|
|
728
722
|
|
|
729
723
|
const styles$1 = "@layer base{:host{--_spacing-badge: var(--odx-spacing-25)}:host,.base{touch-action:manipulation}.label{flex:1;margin-block:calc(-1 * var(--_spacing));margin-inline:calc(-1 * var(--_spacing-inline));padding-block:var(--_spacing);padding-inline:var(--_spacing-inline);text-align:inherit;pointer-events:none}::slotted([slot=\"badge\"]){position:absolute;inset-block-start:0;inset-inline-end:0;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge) calc(-1 * var(--_spacing-badge))}::slotted([slot=\"badge\"][compact]){--_spacing-badge: 50%}:host(:not(:is([loading]))) .base{&:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}&:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--_spacing-badge) var(--_spacing-badge)}}";
|
|
@@ -1074,4 +1068,4 @@ __decorateClass([
|
|
|
1074
1068
|
property()
|
|
1075
1069
|
], RadioGroupControlElement.prototype, "value", 2);
|
|
1076
1070
|
|
|
1077
|
-
export { CanBeDisabled, CanBeExpanded, CheckboxControlElement, CheckboxGroupControlElement, ControlBadgePosition, ControlElement, ControlSize, DialogAfterCloseEvent, DialogAfterOpenEvent, DialogCloseCommand, DialogCloseEvent, DialogElement, DialogLayer, DialogOpenEvent, DialogShowCommand, DragController, DragControllerOptions, ExpandableItemManager, FormAssociated, InteractiveControlElement, IsDraggable, ListboxControlElement, NumberFormControl, OptionControlElement, RadioGroupControlElement, controlDirective, dragActiveDirective };
|
|
1071
|
+
export { CanBeDisabled, CanBeExpanded, CheckboxControlElement, CheckboxGroupControlElement, ControlBadgePosition, ControlElement, ControlSize, DialogAfterCloseEvent, DialogAfterOpenEvent, DialogCloseCommand, DialogCloseEvent, DialogElement, DialogLayer, DialogOpenEvent, DialogShowCommand, DialogSize, DragController, DragControllerOptions, ExpandableItemManager, FormAssociated, InteractiveControlElement, IsDraggable, ListboxControlElement, NumberFormControl, OptionControlElement, RadioGroupControlElement, controlDirective, dialogDirective, dragActiveDirective };
|
package/dist/i18n.js
CHANGED
|
@@ -51,7 +51,6 @@ function setTranslation(locale, translation) {
|
|
|
51
51
|
function translate(key, contextInput, locale) {
|
|
52
52
|
return computed(() => {
|
|
53
53
|
const translation = getTranslationRecord(locale);
|
|
54
|
-
if (!translation) return key;
|
|
55
54
|
const { fallbackLanguage, fallbackTranslation: fallbackTranslateKey } = getI18nOptions();
|
|
56
55
|
const fallbackTranslation = getTranslationRecord(fallbackLanguage());
|
|
57
56
|
const value = translation?.[key] ?? fallbackTranslation?.[key] ?? fallbackTranslateKey(key);
|
|
@@ -9,7 +9,6 @@ export interface ActiveDescendantsControllerOptions<T extends ActiveDescendant &
|
|
|
9
9
|
getItems: () => T[];
|
|
10
10
|
onChange?: (previousActiveDescendant: T | undefined, activeDescendant: T | undefined, firstChange: boolean) => void;
|
|
11
11
|
}
|
|
12
|
-
export declare const ActiveDescendantsControllerOptions: <T extends ActiveDescendant & Element>(options?: Partial<ActiveDescendantsControllerOptions<T>>) => ActiveDescendantsControllerOptions<T>;
|
|
13
12
|
export declare class ActiveDescendantsController<T extends ActiveDescendant & Element> implements ReactiveController {
|
|
14
13
|
#private;
|
|
15
14
|
get activeIndex(): number;
|
|
@@ -17,7 +17,6 @@ export interface CommandDirective<T extends string> extends StringAttributeDirec
|
|
|
17
17
|
disconnect: () => void;
|
|
18
18
|
subscribe: (target: HTMLElement, handler: (event: InvokerCommandEvent) => void) => () => void;
|
|
19
19
|
invoke: (source: HTMLElement, command: string, targetOrId?: HTMLElement | string) => boolean;
|
|
20
|
-
findTarget: (source: HTMLElement, id?: string) => HTMLElement | undefined;
|
|
21
20
|
}
|
|
22
21
|
export declare function commandDirective<const T extends string>(options: CommandDirectiveOptions<T>): CommandDirective<T>;
|
|
23
22
|
//# sourceMappingURL=command-directive.d.ts.map
|
package/dist/lib/utils/dom.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare function supportsHover(): boolean;
|
|
2
|
+
export declare function toggleEvent(oldState: boolean, newState: boolean, eventInit?: EventInit): ToggleEvent;
|
|
2
3
|
export declare function clickedOutside(event: Event, element?: Element | null, allowSelf?: boolean): boolean;
|
|
3
4
|
export declare function parseDate(value: number | string | Date): Date | null;
|
|
4
5
|
export declare function getIdFromHref(href: string): string | null;
|
package/dist/main.js
CHANGED
|
@@ -3,7 +3,7 @@ import { unsafeCSS, LitElement, html, nothing } from 'lit';
|
|
|
3
3
|
|
|
4
4
|
const name = "@odx/foundation";
|
|
5
5
|
const displayName = "ODX Design System Foundation";
|
|
6
|
-
const version = "1.0.0-beta.
|
|
6
|
+
const version = "1.0.0-beta.195";
|
|
7
7
|
const pkg = {
|
|
8
8
|
name,
|
|
9
9
|
displayName,
|
|
@@ -12,11 +12,21 @@ const pkg = {
|
|
|
12
12
|
function supportsHover() {
|
|
13
13
|
return "matchMedia" in globalThis && globalThis.matchMedia("(hover: hover)").matches;
|
|
14
14
|
}
|
|
15
|
+
function toggleEvent(oldState, newState, eventInit) {
|
|
16
|
+
return new ToggleEvent("toggle", {
|
|
17
|
+
...eventInit,
|
|
18
|
+
oldState: oldState ? "open" : "closed",
|
|
19
|
+
newState: newState ? "open" : "closed"
|
|
20
|
+
});
|
|
21
|
+
}
|
|
15
22
|
function clickedOutside(event, element, allowSelf = false) {
|
|
16
23
|
if (!element?.isConnected) return true;
|
|
17
24
|
return !getElementFromEvent(event, (node) => node === element) && (allowSelf || event.target !== element);
|
|
18
25
|
}
|
|
19
26
|
function parseDate(value) {
|
|
27
|
+
if (value instanceof Date) {
|
|
28
|
+
return Number.isNaN(value.getTime()) ? null : value;
|
|
29
|
+
}
|
|
20
30
|
const date = new Date(value);
|
|
21
31
|
if (Number.isNaN(date.getTime()) && typeof value === "string") {
|
|
22
32
|
const candidate = Number(value);
|
|
@@ -55,7 +65,11 @@ function getElementFromEvent(event, filterFn) {
|
|
|
55
65
|
}
|
|
56
66
|
async function waitForAnimations(element, subtree = false) {
|
|
57
67
|
if (!element?.getAnimations) return [];
|
|
58
|
-
|
|
68
|
+
try {
|
|
69
|
+
return await Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished));
|
|
70
|
+
} catch {
|
|
71
|
+
return [];
|
|
72
|
+
}
|
|
59
73
|
}
|
|
60
74
|
function toAriaBooleanAttribute(value, removeOnFalse = true) {
|
|
61
75
|
if (removeOnFalse && !value) return null;
|
|
@@ -66,7 +80,8 @@ function toPx(value) {
|
|
|
66
80
|
return `${round(value, 2)}px`;
|
|
67
81
|
}
|
|
68
82
|
function getAssignedElementsFromSlot(root, slot, options) {
|
|
69
|
-
const
|
|
83
|
+
const slotSelector = slot ? `slot[name="${slot}"]` : "slot:not([name])";
|
|
84
|
+
const slotElement = root?.querySelector(slotSelector);
|
|
70
85
|
return slotElement?.assignedElements({ flatten: options?.flatten ?? true }) ?? [];
|
|
71
86
|
}
|
|
72
87
|
function getAssignedElements(root, options) {
|
|
@@ -127,10 +142,12 @@ function setFocusable(target, interactive, fallback) {
|
|
|
127
142
|
}
|
|
128
143
|
}
|
|
129
144
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
145
|
+
function activeDescendantsControllerOptions(options) {
|
|
146
|
+
return {
|
|
147
|
+
getItems: () => [],
|
|
148
|
+
...options
|
|
149
|
+
};
|
|
150
|
+
}
|
|
134
151
|
class ActiveDescendantsController {
|
|
135
152
|
#host;
|
|
136
153
|
#options;
|
|
@@ -144,9 +161,9 @@ class ActiveDescendantsController {
|
|
|
144
161
|
get items() {
|
|
145
162
|
return this.#options.getItems().filter((item) => item.isConnected);
|
|
146
163
|
}
|
|
147
|
-
constructor(host, options) {
|
|
164
|
+
constructor(host, options = {}) {
|
|
148
165
|
this.#host = host;
|
|
149
|
-
this.#options =
|
|
166
|
+
this.#options = activeDescendantsControllerOptions(options);
|
|
150
167
|
host.addController(this);
|
|
151
168
|
}
|
|
152
169
|
activate(initialActiveIndex) {
|
|
@@ -183,7 +200,7 @@ class ActiveDescendantsController {
|
|
|
183
200
|
update(index, force = false) {
|
|
184
201
|
const previousActiveItem = this.items[this.#activeIndex];
|
|
185
202
|
const activeItem = this.items[index ?? this.#activeIndex];
|
|
186
|
-
if (force
|
|
203
|
+
if (!(force || activeItem?.canActivate())) return;
|
|
187
204
|
this.#activeIndex = index ?? this.#activeIndex;
|
|
188
205
|
this.#host.setAttribute("aria-activedescendant", activeItem?.id ?? "");
|
|
189
206
|
previousActiveItem?.deactivate();
|
|
@@ -206,7 +223,7 @@ class ActiveDescendantsController {
|
|
|
206
223
|
};
|
|
207
224
|
}
|
|
208
225
|
|
|
209
|
-
const customElementStyles = "@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-motion-delay-reduced: 50ms;--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-size-inline-xs: 20ch;--odx-size-inline-sm: 25ch;--odx-size-inline-md: 28ch;--odx-size-inline-lg: 40ch;--odx-form-control-size-inline: 16ch;--odx-control-min-width: 8ch;--odx-control-height-sm: var(--odx-size-200);--odx-control-height-md: var(--odx-size-225);--odx-control-height-lg: var(--odx-size-300);--odx-control-stroke-width: var(--odx-border-width-thin);--odx-control-addon-size-xs: var(--odx-size-100);--odx-control-addon-size-sm: var(--odx-size-125);--odx-control-addon-size-md: var(--odx-size-150);--odx-control-addon-size-lg: var(--odx-size-200);--odx-control-spacing-sm: var(--odx-spacing-25);--odx-control-spacing-md: var(--odx-spacing-37);--odx-control-spacing-lg: var(--odx-spacing-50);--odx-control-spacing-inline-sm: var(--odx-spacing-37);--odx-control-spacing-inline-md: var(--odx-spacing-37);--odx-control-spacing-inline-lg: var(--odx-spacing-50);--odx-control-font-size-sm: var(--odx-font-size-text-sm);--odx-control-font-size-md: var(--odx-font-size-text-md);--odx-control-font-size-lg: var(--odx-font-size-text-lg);--odx-control-spacing-sides-sm: calc(-1 * var(--odx-control-spacing-sm));--odx-control-spacing-sides-md: calc(-1 * var(--odx-control-spacing-md));--odx-control-spacing-sides-lg: calc(-1 * var(--odx-control-spacing-lg));--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-typography-font-size-2);--odx-line-height-heading-xs: var(--odx-typography-line-height-2);--odx-font-size-heading-sm: var(--odx-typography-font-size-3);--odx-line-height-heading-sm: var(--odx-typography-line-height-3);--odx-font-size-heading-md: var(--odx-typography-font-size-5);--odx-line-height-heading-md: var(--odx-typography-line-height-5);--odx-font-size-heading-lg: var(--odx-typography-font-size-6);--odx-line-height-heading-lg: var(--odx-typography-line-height-6);--odx-font-size-heading-xl: var(--odx-typography-font-size-7);--odx-line-height-heading-xl: var(--odx-typography-line-height-7);--odx-font-size-heading-xxl: var(--odx-typography-font-size-8);--odx-line-height-heading-xxl: var(--odx-typography-line-height-8)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-width:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-width:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-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)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1 * var(--odx-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has(:is([odx-control]):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width: var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}odx-anchor-navigation:not([vertical]):has(>odx-navigation-item[appearance=link])::part(base){min-height:var(--odx-control-height-lg)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
226
|
+
const customElementStyles = "@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-motion-delay-reduced: 50ms;--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-content-width-xs: 20ch;--odx-content-width-sm: 25ch;--odx-content-width-md: 50ch;--odx-content-width-lg: 80ch;--odx-form-control-size-inline: 16ch;--odx-control-min-width: 8ch;--odx-control-height-sm: var(--odx-size-200);--odx-control-height-md: var(--odx-size-225);--odx-control-height-lg: var(--odx-size-300);--odx-control-stroke-width: var(--odx-border-width-thin);--odx-control-addon-size-xs: var(--odx-size-100);--odx-control-addon-size-sm: var(--odx-size-125);--odx-control-addon-size-md: var(--odx-size-150);--odx-control-addon-size-lg: var(--odx-size-200);--odx-control-spacing-sm: var(--odx-spacing-25);--odx-control-spacing-md: var(--odx-spacing-37);--odx-control-spacing-lg: var(--odx-spacing-50);--odx-control-spacing-inline-sm: var(--odx-spacing-37);--odx-control-spacing-inline-md: var(--odx-spacing-37);--odx-control-spacing-inline-lg: var(--odx-spacing-50);--odx-control-font-size-sm: var(--odx-font-size-text-sm);--odx-control-font-size-md: var(--odx-font-size-text-md);--odx-control-font-size-lg: var(--odx-font-size-text-lg);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-typography-font-size-2);--odx-line-height-heading-xs: var(--odx-typography-line-height-2);--odx-font-size-heading-sm: var(--odx-typography-font-size-3);--odx-line-height-heading-sm: var(--odx-typography-line-height-3);--odx-font-size-heading-md: var(--odx-typography-font-size-5);--odx-line-height-heading-md: var(--odx-typography-line-height-5);--odx-font-size-heading-lg: var(--odx-typography-font-size-6);--odx-line-height-heading-lg: var(--odx-typography-line-height-6);--odx-font-size-heading-xl: var(--odx-typography-font-size-7);--odx-line-height-heading-xl: var(--odx-typography-line-height-7);--odx-font-size-heading-xxl: var(--odx-typography-font-size-8);--odx-line-height-heading-xxl: var(--odx-typography-line-height-8)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-width:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-width:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-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)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1 * var(--odx-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has(:is([odx-control]):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width: var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}odx-anchor-navigation:not([vertical]):has(>odx-navigation-item[appearance=link])::part(base){min-height:var(--odx-control-height-lg)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
210
227
|
|
|
211
228
|
function customEvent(name, options) {
|
|
212
229
|
const defaultOptions = { bubbles: false, composed: false, cancelable: true, ...options };
|
|
@@ -386,7 +403,7 @@ class InvokerCommandEvent extends CustomEvent {
|
|
|
386
403
|
this.type = "odx-invoker-command";
|
|
387
404
|
}
|
|
388
405
|
constructor(detail) {
|
|
389
|
-
super(InvokerCommandEvent.type, { detail, bubbles:
|
|
406
|
+
super(InvokerCommandEvent.type, { detail, bubbles: detail.bubbles });
|
|
390
407
|
}
|
|
391
408
|
}
|
|
392
409
|
function commandDirective(options) {
|
|
@@ -416,22 +433,12 @@ function commandDirective(options) {
|
|
|
416
433
|
return () => target.removeEventListener(InvokerCommandEvent.type, handleCommand);
|
|
417
434
|
},
|
|
418
435
|
invoke(source, command, targetOrId) {
|
|
419
|
-
const
|
|
436
|
+
const root = findClosestDocument(source);
|
|
437
|
+
const target = typeof targetOrId === "string" ? root.getElementById(targetOrId) : targetOrId;
|
|
420
438
|
if (target) {
|
|
421
439
|
return !target.dispatchEvent(new InvokerCommandEvent({ source, command }));
|
|
422
440
|
}
|
|
423
441
|
return !source.dispatchEvent(new InvokerCommandEvent({ source, command, bubbles: true }));
|
|
424
|
-
},
|
|
425
|
-
findTarget(source, id) {
|
|
426
|
-
if (!id) return void 0;
|
|
427
|
-
const root = findClosestDocument(source);
|
|
428
|
-
const target = root.getElementById(id);
|
|
429
|
-
if (target && target instanceof HTMLElement && !target.closest("[hidden]")) {
|
|
430
|
-
return target;
|
|
431
|
-
}
|
|
432
|
-
return Array.from(root.querySelectorAll(`[id="${CSS.escape(id)}"]`)).find(
|
|
433
|
-
(node) => node instanceof HTMLElement && !node.closest("[hidden]")
|
|
434
|
-
);
|
|
435
442
|
}
|
|
436
443
|
};
|
|
437
444
|
return directive;
|
|
@@ -549,4 +556,4 @@ const main = {
|
|
|
549
556
|
version: pkg.version
|
|
550
557
|
};
|
|
551
558
|
|
|
552
|
-
export { ActiveDescendantsController,
|
|
559
|
+
export { ActiveDescendantsController, Alignment, CustomElement, InvokerCommandEvent, Justify, Placement, PopoverPlacementOptions, ProgressVariant, Shape, SharedResizeObserver, Size, Spacing, Variant, activeDirective, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, computePopoverPlacement, customElement, customEvent, main as default, findClosestDocument, forwardEvent, getAssignedElement, getAssignedElements, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, insertChildrenBetween, loadCustomElements, moveAssignedElement, moveAssignedElements, optionalAttr, optionalSlot, parseDate, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, toggleEvent, waitForAnimations };
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-motion-delay-reduced: 50ms;--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-size-inline-xs: 20ch;--odx-size-inline-sm: 25ch;--odx-size-inline-md: 28ch;--odx-size-inline-lg: 40ch;--odx-form-control-size-inline: 16ch;--odx-control-min-width: 8ch;--odx-control-height-sm: var(--odx-size-200);--odx-control-height-md: var(--odx-size-225);--odx-control-height-lg: var(--odx-size-300);--odx-control-stroke-width: var(--odx-border-width-thin);--odx-control-addon-size-xs: var(--odx-size-100);--odx-control-addon-size-sm: var(--odx-size-125);--odx-control-addon-size-md: var(--odx-size-150);--odx-control-addon-size-lg: var(--odx-size-200);--odx-control-spacing-sm: var(--odx-spacing-25);--odx-control-spacing-md: var(--odx-spacing-37);--odx-control-spacing-lg: var(--odx-spacing-50);--odx-control-spacing-inline-sm: var(--odx-spacing-37);--odx-control-spacing-inline-md: var(--odx-spacing-37);--odx-control-spacing-inline-lg: var(--odx-spacing-50);--odx-control-font-size-sm: var(--odx-font-size-text-sm);--odx-control-font-size-md: var(--odx-font-size-text-md);--odx-control-font-size-lg: var(--odx-font-size-text-lg);--odx-control-spacing-sides-sm: calc(-1 * var(--odx-control-spacing-sm));--odx-control-spacing-sides-md: calc(-1 * var(--odx-control-spacing-md));--odx-control-spacing-sides-lg: calc(-1 * var(--odx-control-spacing-lg));--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-typography-font-size-2);--odx-line-height-heading-xs: var(--odx-typography-line-height-2);--odx-font-size-heading-sm: var(--odx-typography-font-size-3);--odx-line-height-heading-sm: var(--odx-typography-line-height-3);--odx-font-size-heading-md: var(--odx-typography-font-size-5);--odx-line-height-heading-md: var(--odx-typography-line-height-5);--odx-font-size-heading-lg: var(--odx-typography-font-size-6);--odx-line-height-heading-lg: var(--odx-typography-line-height-6);--odx-font-size-heading-xl: var(--odx-typography-font-size-7);--odx-line-height-heading-xl: var(--odx-typography-line-height-7);--odx-font-size-heading-xxl: var(--odx-typography-font-size-8);--odx-line-height-heading-xxl: var(--odx-typography-line-height-8)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-width:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-width:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-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)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1 * var(--odx-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has(:is([odx-control]):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width: var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}odx-anchor-navigation:not([vertical]):has(>odx-navigation-item[appearance=link])::part(base){min-height:var(--odx-control-height-lg)}}
|
|
1
|
+
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-motion-delay-reduced: 50ms;--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-content-width-xs: 20ch;--odx-content-width-sm: 25ch;--odx-content-width-md: 50ch;--odx-content-width-lg: 80ch;--odx-form-control-size-inline: 16ch;--odx-control-min-width: 8ch;--odx-control-height-sm: var(--odx-size-200);--odx-control-height-md: var(--odx-size-225);--odx-control-height-lg: var(--odx-size-300);--odx-control-stroke-width: var(--odx-border-width-thin);--odx-control-addon-size-xs: var(--odx-size-100);--odx-control-addon-size-sm: var(--odx-size-125);--odx-control-addon-size-md: var(--odx-size-150);--odx-control-addon-size-lg: var(--odx-size-200);--odx-control-spacing-sm: var(--odx-spacing-25);--odx-control-spacing-md: var(--odx-spacing-37);--odx-control-spacing-lg: var(--odx-spacing-50);--odx-control-spacing-inline-sm: var(--odx-spacing-37);--odx-control-spacing-inline-md: var(--odx-spacing-37);--odx-control-spacing-inline-lg: var(--odx-spacing-50);--odx-control-font-size-sm: var(--odx-font-size-text-sm);--odx-control-font-size-md: var(--odx-font-size-text-md);--odx-control-font-size-lg: var(--odx-font-size-text-lg);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-typography-font-size-2);--odx-line-height-heading-xs: var(--odx-typography-line-height-2);--odx-font-size-heading-sm: var(--odx-typography-font-size-3);--odx-line-height-heading-sm: var(--odx-typography-line-height-3);--odx-font-size-heading-md: var(--odx-typography-font-size-5);--odx-line-height-heading-md: var(--odx-typography-line-height-5);--odx-font-size-heading-lg: var(--odx-typography-font-size-6);--odx-line-height-heading-lg: var(--odx-typography-line-height-6);--odx-font-size-heading-xl: var(--odx-typography-font-size-7);--odx-line-height-heading-xl: var(--odx-typography-line-height-7);--odx-font-size-heading-xxl: var(--odx-typography-font-size-8);--odx-line-height-heading-xxl: var(--odx-typography-line-height-8)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-width:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-width:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-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)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1 * var(--odx-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has(:is([odx-control]):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width: var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}odx-anchor-navigation:not([vertical]):has(>odx-navigation-item[appearance=link])::part(base){min-height:var(--odx-control-height-lg)}}
|
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.195",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"lit": "3.3.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@odx/design-tokens": "^1.1.0-rc.
|
|
22
|
+
"@odx/design-tokens": "^1.1.0-rc.7",
|
|
23
23
|
"@odx/icons": "^4.0.0-rc.41"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"@lit/context": "1.1.6",
|
|
30
30
|
"@odx/icons": "4.0.0-rc.41",
|
|
31
31
|
"@spectrum-web-components/reactive-controllers": "1.7.0",
|
|
32
|
-
"es-toolkit": "1.39.
|
|
32
|
+
"es-toolkit": "1.39.10",
|
|
33
33
|
"sass-embedded": "1.90.0",
|
|
34
34
|
"stylelint": "16.23.1",
|
|
35
35
|
"stylelint-config-concentric-order": "5.2.1",
|
|
36
36
|
"stylelint-config-standard": "39.0.0",
|
|
37
|
-
"@odx/design-tokens": "1.1.0-rc.
|
|
38
|
-
"@odx/
|
|
37
|
+
"@odx/design-tokens": "1.1.0-rc.7",
|
|
38
|
+
"@odx/typescript-config": "0.0.0",
|
|
39
39
|
"@odx/vite-config": "0.0.0",
|
|
40
|
-
"@odx/
|
|
40
|
+
"@odx/storybook-utils": "0.0.0"
|
|
41
41
|
},
|
|
42
42
|
"sideEffects": [
|
|
43
43
|
"dist/i18n.js",
|