@odx/foundation 1.0.0-beta.210 → 1.0.0-beta.212
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/link/link.d.ts +0 -2
- package/dist/components/progress-bar/base-progress.d.ts +10 -1
- package/dist/components/progress-bar/progress-bar.d.ts +1 -0
- package/dist/components.js +48 -62
- package/dist/lib/models/variant.d.ts +0 -8
- package/dist/main.d.ts +0 -6
- package/dist/main.js +5 -22
- package/dist/styles.css +1 -1
- package/package.json +5 -5
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
import { CustomElement
|
|
1
|
+
import { CustomElement } from '../../main.js';
|
|
2
|
+
import { ValuesOf } from '../../utils/main.js';
|
|
3
|
+
export type ProgressVariant = ValuesOf<typeof ProgressVariant>;
|
|
4
|
+
export declare const ProgressVariant: {
|
|
5
|
+
readonly CONFIRM: "confirm";
|
|
6
|
+
readonly NEUTRAL: "neutral";
|
|
7
|
+
readonly ACCENT: "accent";
|
|
8
|
+
readonly SUCCESS: "success";
|
|
9
|
+
readonly DANGER: "danger";
|
|
10
|
+
};
|
|
2
11
|
export declare class BaseProgress extends CustomElement {
|
|
3
12
|
label?: string;
|
|
4
13
|
min: number;
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Appearance, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement,
|
|
2
|
+
import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Appearance, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
|
|
3
3
|
import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, toPx, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, observeElementResize, unobserveElementResize, isToggleOpen } from '@odx/foundation/utils';
|
|
4
4
|
import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
5
5
|
import { property, query, state } from 'lit/decorators.js';
|
|
@@ -131,7 +131,7 @@ __decorateClass([
|
|
|
131
131
|
], _OdxAccordion.prototype, "size", 2);
|
|
132
132
|
let OdxAccordion = _OdxAccordion;
|
|
133
133
|
|
|
134
|
-
const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=neutral],:not([variant]))){--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([appearance=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:
|
|
134
|
+
const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant],[appearance=ghost]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=neutral],:not([variant]))){--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([appearance=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit}:host([variant=primary][appearance=ghost]){--_color-background-hover:var(--odx-color-background-primary-subtle);--_color-background-pressed:var(--odx-color-background-primary-subtle)}:host([variant=accent][appearance=ghost]){--_color-background-hover:var(--odx-color-background-accent-subtle);--_color-background-pressed:var(--odx-color-background-accent-subtle);--_color-foreground:var(--odx-color-foreground-accent-rest)}:host([variant=danger][appearance=ghost]){--_color-background-hover:var(--odx-color-background-danger-subtle);--_color-background-pressed:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning][appearance=ghost]){--_color-background-hover:var(--odx-color-background-warning-subtle);--_color-background-pressed:var(--odx-color-background-warning-subtle)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary][loading]){--_color-background:var(--odx-color-background-primary-subtle)}:host([variant=accent][loading]){--_color-background:var(--odx-color-background-accent-subtle)}:host([variant=danger][loading]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning][loading]){--_color-background:var(--odx-color-background-warning-subtle)}:host([appearance=ghost][loading]){--_color-background:var(--odx-color-background-transparent-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=danger][appearance=ghost][loading]){--_color-foreground:var(--odx-color-foreground-danger-rest)}}@layer state{:host(:is([active],[odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-position=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}";
|
|
135
135
|
|
|
136
136
|
const buttonDirective = booleanAttributeDirective({ name: "odx-button" });
|
|
137
137
|
const ButtonAppearance = pick(Appearance, ["FILL", "GHOST"]);
|
|
@@ -404,7 +404,7 @@ class OdxActionGroup extends CustomElement {
|
|
|
404
404
|
}
|
|
405
405
|
}
|
|
406
406
|
|
|
407
|
-
const styles$1e = "@layer state{:host([active]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--odx-color-background-transparent-selected-pressed);font-weight:var(--odx-typography-font-weight-medium);::slotted(odx-icon[slot=prefix]){color:var(--odx-color-foreground-accent-rest)}}:host([active][appearance=link]){--_color-background:var(--odx-color-background-transparent-rest)}:host([active][disabled]){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([appearance=link][active]){--_color-background-hover:transparent}}@layer variant{:host([compact]){--_height:var(--odx-size-300);--_font-size:var(--odx-font-size-text-sm);justify-content:center;::slotted([slot=badge]){inset-inline-end:calc(50% - var(--odx-spacing-50))}.base{flex-direction:column;justify-content:center}.label{flex:none}}:host([size=sm][compact]){--_height:var(--odx-size-225)}:host([size=lg][compact]){--_height:var(--odx-size-450);--_font-size:var(--odx-font-size-text-md)}:host([appearance=link]){--_color-background-hover:var(--odx-color-background-transparent-rest);.label{position:relative;&:after{transition:var(--odx-transition-reduced);opacity:0;background-color:var(--odx-color-background-primary-rest);height:var(--odx-border-width-thick);content:\"\";transition-property:background-color,opacity,inset;position:absolute;inset:0 50%;inset-block-start:auto}}}:host([appearance=link][size=lg]){.label:after{inset-block-end:var(--odx-spacing-12)}}:host([appearance=link]:hover),:host([appearance=link][active]){.label:after{inset-inline:var(--odx-layout-spacing-md);opacity:1}}:host([appearance=link][active]){.label:after{background-color:var(--odx-color-background-accent-rest)}}}";
|
|
407
|
+
const styles$1e = "@layer state{:host([active]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--odx-color-background-transparent-selected-pressed);font-weight:var(--odx-typography-font-weight-medium);::slotted(odx-icon[slot=prefix]){color:var(--odx-color-foreground-accent-rest)}}:host([active][appearance=link]){--_color-background:var(--odx-color-background-transparent-rest)}:host([active][disabled]){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([appearance=link][active]){--_color-background-hover:transparent}}@layer variant{:host([compact]){--_height:var(--odx-size-300);--_font-size:var(--odx-typography-font-size-text-sm);justify-content:center;::slotted([slot=badge]){inset-inline-end:calc(50% - var(--odx-spacing-50))}.base{flex-direction:column;justify-content:center}.label{flex:none}}:host([size=sm][compact]){--_height:var(--odx-size-225)}:host([size=lg][compact]){--_height:var(--odx-size-450);--_font-size:var(--odx-typography-font-size-text-md)}:host([appearance=link]){--_color-background-hover:var(--odx-color-background-transparent-rest);.label{position:relative;&:after{transition:var(--odx-transition-reduced);opacity:0;background-color:var(--odx-color-background-primary-rest);height:var(--odx-border-width-thick);content:\"\";transition-property:background-color,opacity,inset;position:absolute;inset:0 50%;inset-block-start:auto}}}:host([appearance=link][size=lg]){.label:after{inset-block-end:var(--odx-spacing-12)}}:host([appearance=link]:hover),:host([appearance=link][active]){.label:after{inset-inline:var(--odx-layout-spacing-md);opacity:1}}:host([appearance=link][active]){.label:after{background-color:var(--odx-color-background-accent-rest)}}}";
|
|
408
408
|
|
|
409
409
|
const NavigationItemAppearance = { BUTTON: "button", LINK: "link" };
|
|
410
410
|
const _OdxNavigationItem = class _OdxNavigationItem extends LinkControlElement {
|
|
@@ -429,7 +429,7 @@ __decorateClass([
|
|
|
429
429
|
], _OdxNavigationItem.prototype, "compact", 2);
|
|
430
430
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
431
431
|
|
|
432
|
-
const styles$1d = ":host{--_indicator-position:var(--odx-layout-spacing-sm);--_indicator-width:0;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}.container{position:relative}.indicator{transition:var(--odx-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:not([size])){--_height:var(--odx-control-height-sm);--_spacing:var(--odx-control-spacing-sm)}::slotted(odx-navigation-item[active]){--_color-background:transparent;--_color-background-hover:transparent}:host(:is([alignment],:not([alignment]))) .indicator{inset-inline:var(--_indicator-position)auto}:host(:not([vertical])){align-items:center;& odx-scroll-container::part(stage){padding-block:var(--odx-control-spacing-lg)}::slotted(odx-navigation-item){min-width:var(--odx-control-
|
|
432
|
+
const styles$1d = ":host{--_indicator-position:var(--odx-layout-spacing-sm);--_indicator-width:0;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}.container{position:relative}.indicator{transition:var(--odx-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:not([size])){--_height:var(--odx-control-height-sm);--_spacing:var(--odx-control-spacing-sm)}::slotted(odx-navigation-item[active]){--_color-background:transparent;--_color-background-hover:transparent}:host(:is([alignment],:not([alignment]))) .indicator{inset-inline:var(--_indicator-position)auto}:host(:not([vertical])){align-items:center;& odx-scroll-container::part(stage){padding-block:var(--odx-control-spacing-lg)}::slotted(odx-navigation-item){min-width:var(--odx-control-width-md);text-align:center}}:host([vertical]){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;width:max-content;.container{--_spacing:var(--odx-control-spacing-sm);padding-inline:var(--odx-control-spacing-sm)}.indicator{inset-block:var(--_indicator-position)auto;width:var(--_indicator-height);height:var(--_indicator-width)}::slotted(:not(odx-navigation-item)){margin-inline:var(--odx-layout-spacing-md)}}:host(:is([alignment=start],:not([alignment])):not([vertical])){box-shadow:0 calc(-1*var(--odx-border-width-thin)) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:auto 0}}:host([alignment=end]:not([vertical])){box-shadow:0 var(--odx-border-width-thin) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:0 auto}}:host([vertical]:is([alignment=start],:not([alignment]))){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:auto 0}::slotted(odx-navigation-item){text-align:right}}:host([vertical][alignment=end]){box-shadow:var(--odx-border-width-thin) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:0 auto}}:host([indicator-disabled]){box-shadow:none!important}";
|
|
433
433
|
|
|
434
434
|
const TabBarAlignment = pick(Alignment, ["START", "END"]);
|
|
435
435
|
const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
@@ -752,7 +752,7 @@ __decorateClass([
|
|
|
752
752
|
], _OdxTitle.prototype, "size", 2);
|
|
753
753
|
let OdxTitle = _OdxTitle;
|
|
754
754
|
|
|
755
|
-
const styles$1a = ":host{column-gap:var(--odx-layout-spacing-md);align-items:center;display:flex}.base{flex:1}.header{column-gap:var(--odx-layout-spacing-md);flex-wrap:wrap;align-items:center;display:flex}::slotted(odx-title){align-items:center;display:flex}:host([alignment=start]){align-items:flex-start}:host([alignment=end]){::slotted([slot=suffix]),.base{align-self:flex-end}}:host(:is(:not([size]),[size=md])){min-height:var(--odx-size-400);.header{line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.content{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}}:host([size=xs]){min-height:var(--odx-size-225);.header{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-heading-xs)}.content{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}}:host([size=sm]){min-height:var(--odx-size-300);.header{line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.content{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}}:host([size=lg]){min-height:var(--odx-size-500);.header{line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.content{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}}:host([size=xl]){min-height:var(--odx-size-600);.header{line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.content{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}";
|
|
755
|
+
const styles$1a = ":host{column-gap:var(--odx-layout-spacing-md);align-items:center;display:flex}.base{flex:1}.header{column-gap:var(--odx-layout-spacing-md);flex-wrap:wrap;align-items:center;display:flex}::slotted(odx-title){align-items:center;display:flex}:host([alignment=start]){align-items:flex-start}:host([alignment=end]){::slotted([slot=suffix]),.base{align-self:flex-end}}:host(:is(:not([size]),[size=md])){min-height:var(--odx-size-400);.header{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}.content{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}}:host([size=xs]){min-height:var(--odx-size-225);.header{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-heading-xs)}.content{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}}:host([size=sm]){min-height:var(--odx-size-300);.header{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}.content{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){min-height:var(--odx-size-500);.header{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}.content{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}}:host([size=xl]){min-height:var(--odx-size-600);.header{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}.content{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}}";
|
|
756
756
|
|
|
757
757
|
const AreaHeaderAlignment = pick(Alignment, ["CENTER", "START", "END"]);
|
|
758
758
|
const AreaHeaderSize = pick(Size, ["XS", "SM", "MD", "LG", "XL"]);
|
|
@@ -810,10 +810,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
|
|
|
810
810
|
size({
|
|
811
811
|
apply: ({ availableHeight, availableWidth, rects, placement: currentPlacement }) => {
|
|
812
812
|
floatingElement.style.setProperty("--_popover-min-width", matchReferenceWidth ? toPx(rects.reference.width) : null);
|
|
813
|
-
floatingElement.style.setProperty(
|
|
814
|
-
"--_popover-max-width",
|
|
815
|
-
matchReferenceWidth ? toPx(rects.reference.width) : toPx(availableWidth)
|
|
816
|
-
);
|
|
813
|
+
floatingElement.style.setProperty("--_popover-max-width", toPx(matchReferenceWidth ? rects.reference.width : availableWidth));
|
|
817
814
|
floatingElement.style.setProperty("--_popover-min-height", minHeight ? toPx(Math.min(availableHeight, minHeight)) : null);
|
|
818
815
|
floatingElement.style.setProperty("--_popover-max-height", toPx(availableHeight));
|
|
819
816
|
floatingElement.setAttribute("data-popover-placement", currentPlacement);
|
|
@@ -824,16 +821,12 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
|
|
|
824
821
|
]
|
|
825
822
|
});
|
|
826
823
|
if (arrowElement && result.middlewareData.arrow) {
|
|
827
|
-
Object.assign(arrowElement.style, {
|
|
828
|
-
left: toPx(result.middlewareData.arrow.x),
|
|
829
|
-
top: toPx(result.middlewareData.arrow.y)
|
|
830
|
-
});
|
|
824
|
+
Object.assign(arrowElement.style, { left: toPx(result.middlewareData.arrow.x), top: toPx(result.middlewareData.arrow.y) });
|
|
831
825
|
}
|
|
832
|
-
floatingElement.style.
|
|
833
|
-
floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
|
|
826
|
+
Object.assign(floatingElement.style, { left: toPx(result.x), top: toPx(result.y) });
|
|
834
827
|
}
|
|
835
828
|
|
|
836
|
-
const styles$19 = "@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-layout-spacing-sm);--_popover-shadow:var(--odx-popover-shadow,var(--odx-shadow-level-2));--_popover-spacing-inner:var(--odx-layout-spacing-sm);--_popover-spacing-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--_popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));
|
|
829
|
+
const styles$19 = "@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-layout-spacing-sm);--_popover-shadow:var(--odx-popover-shadow,var(--odx-elevation-shadow-level-2));--_popover-spacing-inner:var(--odx-layout-spacing-sm);--_popover-spacing-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--_popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition)allow-discrete,overlay var(--_popover-transition)allow-discrete,display var(--_popover-transition)allow-discrete;opacity:0;padding:var(--odx-spacing-37);max-width:calc(var(--_popover-width) + 2*var(--_popover-spacing-inner));max-height:var(--_popover-height);background-color:#0000;margin:0}:host(:not(:popover-open)){display:none}:host(:popover-open){opacity:1;display:flex;transform:translate(0);@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([data-popover-placement^=top]),:host([data-popover-placement^=bottom]){--_popover-transition-offset-x:0;max-height:calc(var(--_popover-height) - var(--_popover-spacing-outer))}:host([data-popover-placement^=right]),:host([data-popover-placement^=left]){--_popover-transition-offset-y:0;max-width:calc(var(--_popover-max-width) - var(--_popover-spacing-outer))}:host([data-popover-placement^=top]){--_popover-transition-offset-y:calc(.5*var(--_popover-offset));padding-block:var(--_popover-spacing-outer)var(--_popover-offset);& odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([data-popover-placement^=right]){--_popover-transition-offset-x:calc(-.5*var(--_popover-offset));padding-inline:var(--_popover-offset)var(--_popover-spacing-outer);& odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([data-popover-placement^=bottom]){--_popover-transition-offset-y:calc(-.5*var(--_popover-offset));--_popover-arrow-offset-y:calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset)var(--_popover-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-arrow-offset-x:calc(var(--_popover-offset) - var(--_arrow-size)/2);--_popover-arrow-offset-y:0;padding-inline:var(--_popover-spacing-outer)var(--_popover-offset);& odx-popover::part(arrow){right:var(--_popover-offset)}}}";
|
|
837
830
|
|
|
838
831
|
class PopoverObserver {
|
|
839
832
|
#referenceElements = /* @__PURE__ */ new WeakSet();
|
|
@@ -1379,7 +1372,7 @@ __decorateClass([
|
|
|
1379
1372
|
], _OdxAutocomplete.prototype, "minQueryLength", 2);
|
|
1380
1373
|
let OdxAutocomplete = _OdxAutocomplete;
|
|
1381
1374
|
|
|
1382
|
-
const styles$14 = ":host{--size:var(--odx-size-225);--_border-radius:var(--odx-border-radius-circle);--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed);transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid transparent;border-radius:var(--_border-radius);background-color:var(--_color-background);width:var(--size);height:var(--size);vertical-align:middle;color:inherit;font-size:var(--odx-font-size-text-md);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex;position:relative;overflow:clip}::slotted(img){border-radius:var(--_border-radius);width:calc(100% - var(--odx-spacing-12));pointer-events:none;object-fit:cover}odx-icon,::slotted(odx-icon){font-size:inherit}:host([interactive]){cursor:pointer}:host([interactive]:hover){background-color:var(--_color-background-hover)}:host([interactive]:active){background-color:var(--_color-background-pressed)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-focus-ring-inner)}:host([shape=rectangle]){--_border-radius:var(--odx-border-radius-sm)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);color:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);color:var(--odx-color-foreground-inverse-static)}:host([appearance=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([size=xs]){--size:var(--odx-size-150);font-size:var(--odx-font-size-text-xs)}:host([size=sm]){--size:var(--odx-size-200);font-size:var(--odx-font-size-text-sm)}:host([size=lg]){--size:var(--odx-size-300);font-size:var(--odx-font-size-text-lg)}:host([size=xl]){--size:var(--odx-size-350);font-size:var(--odx-font-size-heading-lg)}:host([size=xxl]){--size:var(--odx-size-400);font-size:var(--odx-font-size-heading-xl)}";
|
|
1375
|
+
const styles$14 = ":host{--size:var(--odx-size-225);--_border-radius:var(--odx-border-radius-circle);--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed);transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid transparent;border-radius:var(--_border-radius);background-color:var(--_color-background);width:var(--size);height:var(--size);vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-text-md);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex;position:relative;overflow:clip}::slotted(img){border-radius:var(--_border-radius);width:calc(100% - var(--odx-spacing-12));pointer-events:none;object-fit:cover}odx-icon,::slotted(odx-icon){font-size:inherit}:host([interactive]){cursor:pointer}:host([interactive]:hover){background-color:var(--_color-background-hover)}:host([interactive]:active){background-color:var(--_color-background-pressed)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-focus-ring-inner)}:host([shape=rectangle]){--_border-radius:var(--odx-border-radius-sm)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);color:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);color:var(--odx-color-foreground-inverse-static)}:host([appearance=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([size=xs]){--size:var(--odx-size-150);font-size:var(--odx-typography-font-size-text-xs)}:host([size=sm]){--size:var(--odx-size-200);font-size:var(--odx-typography-font-size-text-sm)}:host([size=lg]){--size:var(--odx-size-300);font-size:var(--odx-typography-font-size-text-lg)}:host([size=xl]){--size:var(--odx-size-350);font-size:var(--odx-typography-font-size-heading-lg)}:host([size=xxl]){--size:var(--odx-size-400);font-size:var(--odx-typography-font-size-heading-xl)}";
|
|
1383
1376
|
|
|
1384
1377
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
1385
1378
|
const AvatarSize = pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]);
|
|
@@ -1422,7 +1415,7 @@ __decorateClass([
|
|
|
1422
1415
|
], _OdxAvatar.prototype, "variant", 2);
|
|
1423
1416
|
let OdxAvatar = _OdxAvatar;
|
|
1424
1417
|
|
|
1425
|
-
const styles$13 = ":host{border-radius:var(--odx-border-radius-circle);cursor:default;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;pointer-events:none;justify-content:center;display:inline-flex}:host,:host([size=md]){--_height:var(--odx-control-addon-size-sm);--_spacing:var(--odx-spacing-37);line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs);.base{border-radius:inherit;background-color:var(--_color-background);padding-inline:calc(var(--_spacing) - .5px);min-width:var(--_height);height:var(--_height);place-content:center;align-items:center;display:flex}}:host([size=sm]){--_spacing:var(--odx-spacing-25);--_height:var(--odx-control-addon-size-xs)}:host([size=lg]){--_height:var(--odx-control-addon-size-md);--_spacing:var(--odx-spacing-50);line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}:host,:host([variant=neutral]){--_color-background:var(--odx-
|
|
1418
|
+
const styles$13 = ":host{border-radius:var(--odx-border-radius-circle);cursor:default;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;pointer-events:none;justify-content:center;display:inline-flex}:host,:host([size=md]){--_height:var(--odx-control-addon-size-sm);--_spacing:var(--odx-spacing-37);line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs);.base{border-radius:inherit;background-color:var(--_color-background);padding-inline:calc(var(--_spacing) - .5px);min-width:var(--_height);height:var(--_height);place-content:center;align-items:center;display:flex}}:host([size=sm]){--_spacing:var(--odx-spacing-25);--_height:var(--odx-control-addon-size-xs)}:host([size=lg]){--_height:var(--odx-control-addon-size-md);--_spacing:var(--odx-spacing-50);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:host,:host([variant=neutral]){--_color-background:var(--odx-color-background-neutral-rest);--_color-foreground:var(--odx-color-foreground-rest)}:host([appearance=subtle]),:host([variant=neutral][appearance=ghost]){--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=primary][appearance=ghost]){--_color-foreground:var(--odx-color-foreground-rest)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=accent][appearance=ghost]){--_color-foreground:var(--odx-color-foreground-accent-rest)}:host([variant=success]){--_color-background:var(--odx-color-background-success-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=success][appearance=ghost]){--_color-foreground:var(--odx-color-foreground-success-rest)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger][appearance=ghost]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([appearance=ghost]){--_color-background:transparent}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([animated]){animation:1.25s infinite badge-animation}:host([compact]){--_height:var(--odx-size-75);.base{margin:var(--odx-spacing-12);width:var(--_height);padding:0}}@keyframes badge-animation{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 #0000}}";
|
|
1426
1419
|
|
|
1427
1420
|
const BadgeAppearance = pick(Appearance, ["FILL", "GHOST"]);
|
|
1428
1421
|
const BadgeSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -1483,12 +1476,6 @@ const _OdxLink = class _OdxLink extends CanBeDisabled(CustomElement) {
|
|
|
1483
1476
|
const { ariaLabel, ariaCurrent, ariaHidden } = this;
|
|
1484
1477
|
return html`<a class="base odx-link" aria-label="${optionalAttr(ariaLabel)}" aria-current="${optionalAttr(ariaCurrent)}" aria-hidden="${optionalAttr(ariaHidden)}" href="${optionalAttr(this.href)}" target="${optionalAttr(this.href && this.target)}" download="${optionalAttr(this.href && this.download)}" rel="${optionalAttr(this.href && (this.rel || "noreferrer noopener"))}" ?disabled="${this.disabled}"><slot></slot>${when(this.external, () => html`<odx-icon name="core::link-external"></odx-icon>`)}</a>`;
|
|
1485
1478
|
}
|
|
1486
|
-
click() {
|
|
1487
|
-
this.focusTarget.click();
|
|
1488
|
-
}
|
|
1489
|
-
focus(options) {
|
|
1490
|
-
this.focusTarget.focus(options);
|
|
1491
|
-
}
|
|
1492
1479
|
};
|
|
1493
1480
|
__decorateClass([
|
|
1494
1481
|
query(".base", true)
|
|
@@ -1628,7 +1615,7 @@ __decorateClass([
|
|
|
1628
1615
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
1629
1616
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
1630
1617
|
|
|
1631
|
-
const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-layout-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-layout-spacing-md));grid-area:image;position:relative}.image:after{transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-layout-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-layout-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-layout-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([appearance=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-shadow-level-2);border-color:#0000;.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
|
|
1618
|
+
const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-layout-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-layout-spacing-md));grid-area:image;position:relative}.image:after{transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-layout-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-layout-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-layout-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([appearance=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-2);border-color:#0000;.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
|
|
1632
1619
|
|
|
1633
1620
|
const CardAppearance = pick(Appearance, ["FILL", "GHOST"]);
|
|
1634
1621
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
@@ -1663,7 +1650,7 @@ __decorateClass([
|
|
|
1663
1650
|
], _OdxCard.prototype, "interactive", 2);
|
|
1664
1651
|
let OdxCard = _OdxCard;
|
|
1665
1652
|
|
|
1666
|
-
const styles$_ = ":host{--_indicator-size:calc(var(--odx-control-addon-size-sm));--_indicator-color-background:var(--odx-color-background-
|
|
1653
|
+
const styles$_ = ":host{--_indicator-size:calc(var(--odx-control-addon-size-sm));--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-color-foreground:transparent;--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke:var(--odx-control-color-stroke-hover);--_indicator-color-background:var(--odx-control-color-background-hover)}:host(:focus-visible) .indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([checked],[indeterminate])){--_indicator-color-background:var(--odx-control-color-background-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-control-color-stroke-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background:var(--odx-control-color-background-selected-hover)}:host(:is([checked],[indeterminate]):focus-visible) .indicator{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}:host([invalid]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background:var(--odx-color-background-danger-rest);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-stroke:var(--odx-color-background-disabled-rest);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-foreground:var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke:var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background:var(--odx-control-color-background-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground:var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-foreground:var(--odx-color-foreground-danger-rest)}";
|
|
1667
1654
|
|
|
1668
1655
|
class OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
1669
1656
|
static {
|
|
@@ -1700,7 +1687,7 @@ __decorateClass([
|
|
|
1700
1687
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
1701
1688
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
1702
1689
|
|
|
1703
|
-
const styles$Y = ":host{--_color-background:var(--odx-
|
|
1690
|
+
const styles$Y = ":host{--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed);--_color-foreground:var(--odx-color-foreground-rest);--_height:var(--odx-size-150);--_border-radius:var(--_height);--_spacing-inline:var(--odx-spacing-50);gap:var(--odx-spacing-25);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_spacing-inline);height:var(--_height);color:var(--_color-foreground);place-items:center;display:inline-flex}:host,[part~=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part~=base]{min-width:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}::slotted(odx-icon){font-size:var(--odx-typography-font-size-text-md)}.action{--_height:var(--odx-size-150);--_spacing-inline:var(--odx-spacing-25);--_addon-size:var(--odx-size-100);border-radius:inherit}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([variant=primary],[variant=accent],[variant=success],[variant=warning],[variant=danger]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([variant=neutral-subtle]){--_color-background:var(--odx-color-background-neutral-subtle)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=success]){--_color-background:var(--odx-color-background-success-rest);--_color-background-hover:var(--odx-color-background-success-hover);--_color-background-pressed:var(--odx-color-background-success-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background:var(--_color-background-hover)}:host([interactive]:active){--_color-background:var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background:var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
|
|
1704
1691
|
|
|
1705
1692
|
const ChipVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
1706
1693
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -1780,7 +1767,7 @@ __decorateClass([
|
|
|
1780
1767
|
], _OdxDrawer.prototype, "position", 2);
|
|
1781
1768
|
let OdxDrawer = _OdxDrawer;
|
|
1782
1769
|
|
|
1783
|
-
const styles$W = ":host{--max-width:
|
|
1770
|
+
const styles$W = ":host{--max-width:var(--odx-layout-width-md);--icon-size:var(--odx-size-225);--_content-gap:var(--odx-spacing-25);text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;margin-inline:auto;display:flex}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-width:var(--max-width)}.icon{font-size:var(--icon-size)}:host([alignment=start]){justify-content:flex-start}:host,:host([size=md]){gap:var(--odx-spacing-75);padding:var(--odx-spacing-75)}:host([size=sm]){--max-width:var(--odx-layout-width-sm);--icon-size:var(--odx-size-150);--_content-gap:var(--odx-spacing-12);gap:var(--odx-spacing-50);padding:var(--odx-spacing-50);.description{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}}:host([size=md]){.description{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){--max-width:var(--odx-layout-width-lg);--icon-size:var(--odx-size-300);--_content-gap:var(--odx-spacing-37);gap:var(--odx-spacing-100);padding:var(--odx-spacing-150);.title{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}}:host([variant=neutral-subtle]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=danger]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
|
|
1784
1771
|
|
|
1785
1772
|
const EmptyStateAlignment = pick(Alignment, ["START", "CENTER"]);
|
|
1786
1773
|
const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -2245,7 +2232,7 @@ __decorateClass([
|
|
|
2245
2232
|
], _OdxTooltip.prototype, "placement", 2);
|
|
2246
2233
|
let OdxTooltip = _OdxTooltip;
|
|
2247
2234
|
|
|
2248
|
-
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)}";
|
|
2235
|
+
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-elevation-shadow-level-2)}";
|
|
2249
2236
|
|
|
2250
2237
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
2251
2238
|
constructor() {
|
|
@@ -2408,7 +2395,7 @@ __decorateClass([
|
|
|
2408
2395
|
], _OdxImage.prototype, "width", 2);
|
|
2409
2396
|
let OdxImage = _OdxImage;
|
|
2410
2397
|
|
|
2411
|
-
const styles$P = ":host{gap:var(--odx-layout-spacing-md);transition:var(--odx-transition-reduced);border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md);line-height:var(--odx-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;align-items:flex-start;transition-property:background-color,color,display,opacity;display:flex;@starting-style{opacity:0}}.icon{--size:var(--odx-size-150)}.base{line-height:var(--odx-line-height-base);font-size:var(--odx-font-size-text-sm);flex:auto}.action{--_color-foreground:inherit;margin-block-start:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-37)}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-layout-spacing-md) - var(--odx-border-width-thick))}:host([variant=primary]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=danger]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=warning]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=success]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){opacity:0;display:none}";
|
|
2398
|
+
const styles$P = ":host{gap:var(--odx-layout-spacing-md);transition:var(--odx-transition-reduced);border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;align-items:flex-start;transition-property:background-color,color,display,opacity;display:flex;@starting-style{opacity:0}}.icon{--size:var(--odx-size-150)}.base{line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-text-sm);flex:auto}.action{--_color-foreground:inherit;margin-block-start:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-37)}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-layout-spacing-md) - var(--odx-border-width-thick))}:host([variant=primary]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=danger]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=warning]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=success]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){opacity:0;display:none}";
|
|
2412
2399
|
|
|
2413
2400
|
const iconMap = {
|
|
2414
2401
|
neutral: "core::info",
|
|
@@ -2456,7 +2443,7 @@ __decorateClass([
|
|
|
2456
2443
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
2457
2444
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
2458
2445
|
|
|
2459
|
-
const styles$O = "@layer base{:host{--_color-background:var(--odx-color-background-
|
|
2446
|
+
const styles$O = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_color-stroke-pressed:var(--odx-control-color-stroke-hover);--_min-width:var(--odx-control-width-lg);cursor:text;font-weight:var(--odx-typography-font-weight-medium)}.base:has(input:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.input{appearance:textfield;transition:var(--odx-transition-default);width:100%;min-width:auto;height:100%;text-align:inherit;color:inherit;font-weight:inherit;background-color:#0000;border:none;outline:none;flex:auto;padding:0;&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}&::-webkit-search-decoration{appearance:none;margin:0}&::-webkit-search-cancel-button{appearance:none;margin:0}&::-webkit-search-results-button{appearance:none;margin:0}&::-webkit-search-results-decoration{appearance:none;margin:0}}.control-clear{margin-inline-end:calc(-1*var(--_spacing-inline) - var(--_spacing))}::slotted(odx-label){margin:0}}@layer state{:host(:is([invalid],[readonly])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}:host([type=number]){--_min-width:auto;.input{text-align:center}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}}@layer variant{:host(.odx-fill){flex:auto;max-width:100%;display:flex}}";
|
|
2460
2447
|
|
|
2461
2448
|
const _OdxInput = class _OdxInput extends FormAssociated(ControlElement) {
|
|
2462
2449
|
constructor() {
|
|
@@ -2572,7 +2559,7 @@ __decorateClass([
|
|
|
2572
2559
|
], _OdxInput.prototype, "value", 2);
|
|
2573
2560
|
let OdxInput = _OdxInput;
|
|
2574
2561
|
|
|
2575
|
-
const styles$N = ":host{--_key-color:var(--odx-color-foreground-rest-subtle);--_key-font-size:var(--odx-font-size-text-sm);--_value-font-size:inherit;--_unit-font-size:var(--_key-font-size);--_spacing:var(--odx-spacing-50);min-height:var(--odx-size-225);line-height:var(--odx-line-height-text-xs);grid-template:\"prefix value\"\"prefix key\"/auto 1fr;align-items:center;display:grid}.prefix{grid-area:prefix;margin-inline-end:var(--_spacing)}.key,.value,.unit{gap:var(--odx-spacing-25);align-items:center;display:flex}.key{color:var(--_key-color);font-size:var(--_key-font-size);grid-area:key;align-self:flex-start}.value{color:var(--_value-color);font-size:var(--_value-font-size);font-weight:var(--odx-typography-font-weight-medium);grid-area:value;align-self:flex-end}.unit{font-size:var(--_key-font-size);font-weight:var(--odx-typography-font-weight-medium);margin-inline-start:var(--odx-spacing-negative-12)}:host([alignment=end]){.key,.value{text-align:right;justify-self:flex-end}}:host([layout=horizontal]){min-height:var(--odx-size-150);grid-template:\"prefix key value\"/auto 1fr 1fr;.key,.value{text-align:left;place-self:center flex-start}.key{margin-inline-end:var(--_spacing)}}:host([layout=horizontal][alignment=end]){.value{text-align:right;justify-self:flex-end}}:host([size=sm]){--_key-font-size:var(--odx-font-size-text-xs);--_value-font-size:var(--odx-font-size-text-sm)}:host([size=lg]){--_key-font-size:var(--odx-font-size-text-md);--_value-font-size:var(--odx-font-size-text-lg);min-height:var(--odx-size-300);line-height:var(--odx-line-height-text-sm)}:host([size=xl]){--_key-font-size:var(--odx-font-size-text-md);--_value-font-size:var(--odx-font-size-heading-lg);min-height:var(--odx-size-300);line-height:var(--odx-line-height-text-md)}:host(:is([size=lg],[size=xl])){--_spacing:var(--odx-spacing-75)}:host(:is([size=lg],[size=xl])[layout=horizontal]){min-height:var(--odx-size-225)}:host([variant=accent]){--_value-color:var(--odx-color-foreground-accent-rest)}:host([variant=danger]){--_key-color:var(--odx-color-foreground-danger-rest);--_value-color:var(--odx-color-foreground-danger-rest)}:host([variant=success]){--_value-color:var(--odx-color-foreground-success-rest)}";
|
|
2562
|
+
const styles$N = ":host{--_key-color:var(--odx-color-foreground-rest-subtle);--_key-font-size:var(--odx-typography-font-size-text-sm);--_value-font-size:inherit;--_unit-font-size:var(--_key-font-size);--_spacing:var(--odx-spacing-50);min-height:var(--odx-size-225);line-height:var(--odx-typography-line-height-text-xs);grid-template:\"prefix value\"\"prefix key\"/auto 1fr;align-items:center;display:grid}.prefix{grid-area:prefix;margin-inline-end:var(--_spacing)}.key,.value,.unit{gap:var(--odx-spacing-25);align-items:center;display:flex}.key{color:var(--_key-color);font-size:var(--_key-font-size);grid-area:key;align-self:flex-start}.value{color:var(--_value-color);font-size:var(--_value-font-size);font-weight:var(--odx-typography-font-weight-medium);grid-area:value;align-self:flex-end}.unit{font-size:var(--_key-font-size);font-weight:var(--odx-typography-font-weight-medium);margin-inline-start:var(--odx-spacing-negative-12)}:host([alignment=end]){.key,.value{text-align:right;justify-self:flex-end}}:host([layout=horizontal]){min-height:var(--odx-size-150);grid-template:\"prefix key value\"/auto 1fr 1fr;.key,.value{text-align:left;place-self:center flex-start}.key{margin-inline-end:var(--_spacing)}}:host([layout=horizontal][alignment=end]){.value{text-align:right;justify-self:flex-end}}:host([size=sm]){--_key-font-size:var(--odx-typography-font-size-text-xs);--_value-font-size:var(--odx-typography-font-size-text-sm)}:host([size=lg]){--_key-font-size:var(--odx-typography-font-size-text-md);--_value-font-size:var(--odx-typography-font-size-text-lg);min-height:var(--odx-size-300);line-height:var(--odx-typography-line-height-text-sm)}:host([size=xl]){--_key-font-size:var(--odx-typography-font-size-text-md);--_value-font-size:var(--odx-typography-font-size-heading-lg);min-height:var(--odx-size-300);line-height:var(--odx-typography-line-height-text-md)}:host(:is([size=lg],[size=xl])){--_spacing:var(--odx-spacing-75)}:host(:is([size=lg],[size=xl])[layout=horizontal]){min-height:var(--odx-size-225)}:host([variant=accent]){--_value-color:var(--odx-color-foreground-accent-rest)}:host([variant=danger]){--_key-color:var(--odx-color-foreground-danger-rest);--_value-color:var(--odx-color-foreground-danger-rest)}:host([variant=success]){--_value-color:var(--odx-color-foreground-success-rest)}";
|
|
2576
2563
|
|
|
2577
2564
|
const KeyValueAlignment = pick(Alignment, ["START", "END"]);
|
|
2578
2565
|
const KeyValueLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal" };
|
|
@@ -2618,7 +2605,7 @@ __decorateClass([
|
|
|
2618
2605
|
], _OdxKeyValue.prototype, "variant", 2);
|
|
2619
2606
|
let OdxKeyValue = _OdxKeyValue;
|
|
2620
2607
|
|
|
2621
|
-
const styles$M = ":host{--_spacing:var(--odx-spacing-25);gap:var(--_spacing);flex-direction:column;display:flex}:host([size=sm]){--_spacing:0}:host([size=lg]){--_spacing:var(--odx-spacing-50)}:host([size=xl]){--_spacing:var(--odx-spacing-75)}::slotted(odx-title:not([size])){font-size:var(--odx-font-size-heading-xs);margin-block-end:var(--odx-layout-spacing-sm)}";
|
|
2608
|
+
const styles$M = ":host{--_spacing:var(--odx-spacing-25);gap:var(--_spacing);flex-direction:column;display:flex}:host([size=sm]){--_spacing:0}:host([size=lg]){--_spacing:var(--odx-spacing-50)}:host([size=xl]){--_spacing:var(--odx-spacing-75)}::slotted(odx-title:not([size])){font-size:var(--odx-typography-font-size-heading-xs);margin-block-end:var(--odx-layout-spacing-sm)}";
|
|
2622
2609
|
|
|
2623
2610
|
const _OdxKeyValueList = class _OdxKeyValueList extends CustomElement {
|
|
2624
2611
|
constructor() {
|
|
@@ -2658,7 +2645,7 @@ class OdxLabel extends CustomElement {
|
|
|
2658
2645
|
}
|
|
2659
2646
|
}
|
|
2660
2647
|
|
|
2661
|
-
const styles$K = ":host{-webkit-
|
|
2648
|
+
const styles$K = ":host{-webkit-box-orient:vertical;min-width:min-content;display:-webkit-box;overflow:hidden}";
|
|
2662
2649
|
|
|
2663
2650
|
const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
|
|
2664
2651
|
static {
|
|
@@ -2667,14 +2654,9 @@ const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
|
|
|
2667
2654
|
updated(props) {
|
|
2668
2655
|
super.updated(props);
|
|
2669
2656
|
if (typeof this.max === "number" && this.max > 0) {
|
|
2670
|
-
this.style.setProperty("
|
|
2657
|
+
this.style.setProperty("-webkit-line-clamp", String(this.max));
|
|
2671
2658
|
} else {
|
|
2672
|
-
this.style.removeProperty("
|
|
2673
|
-
}
|
|
2674
|
-
if (typeof this.max === "number" && this.max > 0) {
|
|
2675
|
-
this.style.setProperty("--min", String(this.max));
|
|
2676
|
-
} else {
|
|
2677
|
-
this.style.removeProperty("--max");
|
|
2659
|
+
this.style.removeProperty("-webkit-line-clamp");
|
|
2678
2660
|
}
|
|
2679
2661
|
}
|
|
2680
2662
|
};
|
|
@@ -2913,7 +2895,7 @@ __decorateClass([
|
|
|
2913
2895
|
], _OdxLogo.prototype, "compact", 2);
|
|
2914
2896
|
let OdxLogo = _OdxLogo;
|
|
2915
2897
|
|
|
2916
|
-
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);row-gap:var(--odx-layout-spacing-sm);background-color:#0000;background-color:var(--odx-color-background-brand);padding:var(--odx-layout-spacing-md);width:100%;max-width:var(--odx-layout-width-sm);height:100%;color:var(--odx-color-foreground-inverse-static);flex-direction:column;padding-block-start:0;display:flex;overflow:hidden}.navigation{flex:auto;overflow-y:auto}.link-navigation{gap:var(--odx-layout-spacing-sm);column-gap:var(--odx-layout-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)}";
|
|
2898
|
+
const styles$E = ":host{--odx-color-background-transparent-hover:var(--odx-palette-cyan-10-15);--odx-color-background-transparent-pressed:var(--odx-palette-cyan-10-5);--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);row-gap:var(--odx-layout-spacing-sm);background-color:#0000;background-color:var(--odx-color-background-brand);padding:var(--odx-layout-spacing-md);width:100%;max-width:var(--odx-layout-width-sm);height:100%;color:var(--odx-color-foreground-inverse-static);flex-direction:column;padding-block-start:0;display:flex;overflow:hidden}.navigation{flex:auto;overflow-y:auto}.link-navigation{gap:var(--odx-layout-spacing-sm);column-gap:var(--odx-layout-spacing-md)}::slotted(:is(odx-link,a)[slot=link-navigation]){font-size:var(--odx-typography-font-size-text-sm)}::slotted(:is(odx-link,a)[slot=link-navigation][disabled]){color:var(--odx-color-foreground-disabled-brand)}";
|
|
2917
2899
|
|
|
2918
2900
|
class OdxMainMenu extends CustomElement {
|
|
2919
2901
|
static {
|
|
@@ -2945,7 +2927,7 @@ __decorateClass([
|
|
|
2945
2927
|
], _OdxMainMenuButton.prototype, "label", 2);
|
|
2946
2928
|
let OdxMainMenuButton = _OdxMainMenuButton;
|
|
2947
2929
|
|
|
2948
|
-
const styles$D = ".base{gap:var(--odx-spacing-37);flex-direction:column;
|
|
2930
|
+
const styles$D = ".base{gap:var(--odx-spacing-37);min-width:var(--odx-control-width-lg);flex-direction:column;max-width:100%;height:100%;display:flex}::slotted(odx-label){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-separator){--spacing:0px}";
|
|
2949
2931
|
|
|
2950
2932
|
const _OdxMenu = class _OdxMenu extends PopoverHost {
|
|
2951
2933
|
constructor() {
|
|
@@ -3035,7 +3017,7 @@ __decorateClass([
|
|
|
3035
3017
|
], _OdxMenu.prototype, "size", 2);
|
|
3036
3018
|
let OdxMenu = _OdxMenu;
|
|
3037
3019
|
|
|
3038
|
-
const styles$C = "@layer base{:host{--dialog-spacing-top:10dvh;--dialog-width:var(--odx-layout-width-md)}odx-card{padding:var(--odx-layout-spacing-lg)}.container{translate:0 var(--odx-layout-spacing-md);border-radius:var(--odx-border-radius-
|
|
3020
|
+
const styles$C = "@layer base{:host{--dialog-spacing-top:10dvh;--dialog-width:var(--odx-layout-width-md)}odx-card{padding:var(--odx-layout-spacing-lg)}.container{translate:0 var(--odx-layout-spacing-md);border-radius:var(--odx-border-radius-lg);box-shadow:var(--odx-elevation-shadow-level-3);max-height:calc(100% - var(--_spacing-top))}}@layer variant{:host([size=sm]){--dialog-width:var(--odx-layout-width-sm)}:host([size=lg]){--dialog-width:var(--odx-layout-width-lg)}}@layer state{:host([open]){.container{translate:0;@starting-style{translate:0 var(--odx-layout-spacing-md)}}}}";
|
|
3039
3021
|
|
|
3040
3022
|
const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
3041
3023
|
class OdxModal extends DialogElement {
|
|
@@ -3270,7 +3252,7 @@ __decorateClass([
|
|
|
3270
3252
|
], _OdxPagination.prototype, "totalItems", 2);
|
|
3271
3253
|
let OdxPagination = _OdxPagination;
|
|
3272
3254
|
|
|
3273
|
-
const styles$w = ":host{border-radius:var(--odx-border-radius
|
|
3255
|
+
const styles$w = ":host{border-radius:var(--odx-control-border-radius);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background);width:100%;display:flex}[part~=base]{z-index:var(--odx-z-level-foreground);border-radius:inherit;min-width:var(--_popover-min-width);max-width:100%;height:fit-content;min-height:var(--_popover-min-height);scrollbar-width:thin;scroll-behavior:smooth;max-height:100%;scroll-padding-block:calc(var(--odx-spacing-150) + var(--_popover-spacing-outer));flex-direction:column;display:flex;position:relative;overflow:auto;inset-block-start:0!important;inset-inline-start:0!important}[part~=content]{padding:var(--_popover-spacing-inner);color:var(--_popover-color-foreground);flex-direction:column;display:flex}[part~=arrow]{z-index:var(--odx-z-level-foreground);background-color:inherit;width:var(--_popover-arrow-size);height:var(--_popover-arrow-size);position:absolute}";
|
|
3274
3256
|
|
|
3275
3257
|
const _OdxPopover = class _OdxPopover extends CustomElement {
|
|
3276
3258
|
constructor() {
|
|
@@ -3292,6 +3274,10 @@ __decorateClass([
|
|
|
3292
3274
|
], _OdxPopover.prototype, "withArrow", 2);
|
|
3293
3275
|
let OdxPopover = _OdxPopover;
|
|
3294
3276
|
|
|
3277
|
+
const ProgressVariant = {
|
|
3278
|
+
...pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]),
|
|
3279
|
+
CONFIRM: "confirm"
|
|
3280
|
+
};
|
|
3295
3281
|
class BaseProgress extends CustomElement {
|
|
3296
3282
|
constructor() {
|
|
3297
3283
|
super(...arguments);
|
|
@@ -3334,7 +3320,7 @@ __decorateClass([
|
|
|
3334
3320
|
property({ reflect: true, useDefault: true })
|
|
3335
3321
|
], BaseProgress.prototype, "variant", 2);
|
|
3336
3322
|
|
|
3337
|
-
const styles$v = ":host{--_color-foreground:inherit;--_indicator-color:var(--odx-color-background-primary-rest);--_track-color:var(--odx-color-background-
|
|
3323
|
+
const styles$v = ":host{--_color-foreground:inherit;--_indicator-color:var(--odx-color-background-primary-rest);--_track-color:var(--odx-control-color-background-rest);--_track-size:var(--odx-size-50);--_value-percentage:0;gap:var(--odx-spacing-50);padding:var(--odx-spacing-12)var(--odx-spacing-37);width:100%;color:var(--_color-foreground);flex-wrap:wrap;align-items:center;line-height:1rem;display:flex}.base,.indicator{width:100%}.base{border-radius:var(--odx-border-radius-md);background:var(--_track-color);width:100%;height:var(--_track-size);position:relative;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage)/100));transform-origin:0%;transition:var(--odx-transition-reduced);background-color:var(--_indicator-color);height:100%;transition-property:background-color,transform}[part~=label]{margin-block:calc(-1*var(--odx-spacing-25));padding-block:var(--odx-spacing-25);text-align:start;flex:1}[part~=value]{text-align:end;align-self:flex-end;margin-inline-start:auto}:host([condensed]){padding-block:var(--odx-spacing-25);flex-wrap:nowrap;[part~=label]{flex:auto}[part~=value]{order:99}}:host([variant=accent]){--_indicator-color:var(--odx-color-background-accent-rest)}:host([variant=confirm]){--_indicator-color:var(--odx-color-background-confirmation-rest)}:host([variant=danger]){--_indicator-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=success]){--_indicator-color:var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:1.5s linear infinite indeterminate}@keyframes indeterminate{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}";
|
|
3338
3324
|
|
|
3339
3325
|
const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
|
|
3340
3326
|
constructor() {
|
|
@@ -3354,7 +3340,7 @@ __decorateClass([
|
|
|
3354
3340
|
], _OdxProgressBar.prototype, "condensed", 2);
|
|
3355
3341
|
let OdxProgressBar = _OdxProgressBar;
|
|
3356
3342
|
|
|
3357
|
-
const styles$u = ":host{--size:var(--odx-size-500);--_indicator-color:var(--odx-color-background-primary-rest);--_track-color:var(--odx-color-background-
|
|
3343
|
+
const styles$u = ":host{--size:var(--odx-size-500);--_indicator-color:var(--odx-color-background-primary-rest);--_track-color:var(--odx-control-color-background-rest);gap:var(--odx-spacing-37);color:currentColor;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.base{width:var(--size);height:var(--size);grid-template-columns:1fr;place-content:center;place-items:center;display:grid;overflow:hidden}.base>*,::slotted(*){grid-row-start:1;grid-column-start:1}.track,.indicator{fill:#0000}.indicator{stroke:var(--_indicator-color);transform-origin:50%;transition:stroke-dashoffset var(--odx-motion-duration-fast)var(--odx-motion-easing-reduced);transform:rotate(-90deg)}.track{stroke:var(--_track-color)}:host([size=sm]){--size:var(--odx-size-400)}:host([size=lg]){--size:var(--odx-size-600)}:host([indeterminate]){.base svg{animation:1.75s linear infinite odx-progress-ring-inner-animation}.indicator{animation:1.75s infinite both odx-progress-ring-indicator-animation}}:host([variant=accent]){--_indicator-color:var(--odx-color-background-accent-rest)}:host([variant=confirm]){--_indicator-color:var(--odx-color-background-confirmation-rest)}:host([variant=danger]){--_indicator-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=success]){--_indicator-color:var(--odx-color-background-success-rest)}@keyframes odx-progress-ring-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes odx-progress-ring-indicator-animation{0%{stroke-dashoffset:100px}25%{stroke-dashoffset:250px;transform:rotate(180deg)}to{stroke-dashoffset:100px;transform:rotate(270deg)}}";
|
|
3358
3344
|
|
|
3359
3345
|
const ProgressRingSize = pick(Size, ["SM", "MD", "LG"]);
|
|
3360
3346
|
const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
@@ -3406,7 +3392,7 @@ __decorateClass([
|
|
|
3406
3392
|
], _OdxProgressRing.prototype, "stroke", 2);
|
|
3407
3393
|
let OdxProgressRing = _OdxProgressRing;
|
|
3408
3394
|
|
|
3409
|
-
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-color-background:var(--odx-color-background-
|
|
3395
|
+
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-stroke-width:var(--odx-border-width-thin);--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width;display:flex;position:relative}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:hover){--_indicator-color-background:var(--odx-control-color-background-hover);--_indicator-color-stroke:var(--odx-control-color-stroke-hover)}:host(:focus-visible) .indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host([checked]){--_indicator-color-background:var(--odx-control-color-stroke-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-control-color-background-selected);--_indicator-stroke-width:var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke:var(--odx-control-color-background-selected-hover)}:host([checked]:focus-visible) .indicator{outline:var(--odx-border-width-thin)solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thick) var(--odx-color-stroke-focus-outer)}:host([invalid]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-stroke:var(--odx-color-background-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-stroke:var(--odx-color-disabled-stroke);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background:var(--odx-control-color-background-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);--_label-color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background:var(--odx-control-color-stroke-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);--_indicator-stroke-width:var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-control-color-background-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-stroke:var(--odx-color-background-disabled-selected);--_indicator-stroke-width:var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background:var(--odx-color-background-danger-rest);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
3410
3396
|
|
|
3411
3397
|
class OdxRadioButton extends CheckboxControl(CustomElement) {
|
|
3412
3398
|
static {
|
|
@@ -3553,7 +3539,7 @@ __decorateClass([
|
|
|
3553
3539
|
], _OdxScrollContainer.prototype, "rightOverflow", 2);
|
|
3554
3540
|
let OdxScrollContainer = _OdxScrollContainer;
|
|
3555
3541
|
|
|
3556
|
-
const styles$p = ":host{transition:var(--odx-transition-default);min-width:
|
|
3542
|
+
const styles$p = ":host{transition:var(--odx-transition-default);min-width:var(--odx-control-width-md);max-width:30ch;display:block}.input{width:100%;min-width:0;max-width:100%}:host([collapsed]:not(:focus-within)){cursor:pointer;min-width:0;max-width:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:#0000}}}";
|
|
3557
3543
|
|
|
3558
3544
|
const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
|
|
3559
3545
|
class SearchEvent extends CustomEvent {
|
|
@@ -3645,7 +3631,7 @@ __decorateClass([
|
|
|
3645
3631
|
], _OdxSearchBar.prototype, "value", 2);
|
|
3646
3632
|
let OdxSearchBar = _OdxSearchBar;
|
|
3647
3633
|
|
|
3648
|
-
const styles$o = "@layer base{:host{--_color-background:var(--odx-color-background-
|
|
3634
|
+
const styles$o = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-control-border-radius);cursor:pointer;min-width:var(--odx-control-width-lg);max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{--_spacing-offset:var(--odx-spacing-12);gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-border-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-block-start:var(--odx-border-width-thin);padding-inline:calc(2*var(--_spacing-inline))calc(var(--_spacing-inline) + var(--_spacing-offset));height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.value{font-weight:var(--odx-typography-font-weight-medium);margin-inline-end:auto}.indicator{font-size:var(--odx-control-addon-size-md);margin-inline-end:var(--odx-spacing-negative-12)}.action.clear{margin-inline-end:calc(-1*var(--_spacing-inline))}.dropdown{--_popover-spacing-inner:0;--_popover-offset:0}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host(.odx-fill){max-width:100%}:host:has(.dropdown[open]){--_color-background:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-hover)}::slotted(odx-link){margin:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md)}:host(:hover){--_color-background:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-hover)}}@layer state{:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing-inline)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed;& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-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)}}";
|
|
3649
3635
|
|
|
3650
3636
|
const _OdxSelect = class _OdxSelect extends ListboxControl {
|
|
3651
3637
|
constructor() {
|
|
@@ -3810,7 +3796,7 @@ __decorateClass([
|
|
|
3810
3796
|
], _OdxSidebar.prototype, "size", 2);
|
|
3811
3797
|
let OdxSidebar = _OdxSidebar;
|
|
3812
3798
|
|
|
3813
|
-
const styles$l = ":host{--size-inline:100%;--_height:var(--odx-size-100);--_border-radius:var(--odx-border-radius
|
|
3799
|
+
const styles$l = ":host{--size-inline:100%;--_height:var(--odx-size-100);--_border-radius:var(--odx-control-border-radius);--_color-fill:var(--odx-color-background-disabled-rest);width:var(--size-inline);max-width:100%;height:var(--_height);flex:none;display:block;overflow:hidden}.base{border-radius:var(--_border-radius);background:var(--_color-fill)linear-gradient(90deg,transparent 33%,var(--odx-color-background-transparent-pressed)50%,transparent 66%);background-position:150% 100%;background-size:200% 100%;height:100%}:host([size=sm]){--_height:var(--odx-typography-font-size-text-xs)}:host([size=lg]){--_height:var(--odx-typography-font-size-text-lg)}:host(:is([type=text],:not([type]))){padding-block:var(--odx-spacing-12)}:host(:is([type=avatar],[type=button],[type=icon-button])){--size-inline:var(--odx-control-width-md);--_height:var(--odx-control-height-md)}:host(:is([type=avatar],[type=icon-button])){--size-inline:var(--_height);flex:none}:host([type=avatar]){--_border-radius:var(--odx-border-radius-circle)}:host([type=icon-button]){--_border-radius:var(--odx-border-radius-md)}:host(:is([type=avatar],[type=button],[type=icon-button])[size=sm]){--_height:var(--odx-control-height-sm)}:host(:is([type=avatar],[type=button],[type=icon-button])[size=lg]){--_height:var(--odx-control-height-lg)}:host([strong]){--_color-fill:var(--odx-color-background-disabled-selected)}:host([loading]) .base{animation:3s linear infinite odx-skeleton-loading}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}";
|
|
3814
3800
|
|
|
3815
3801
|
const SkeletonType = {
|
|
3816
3802
|
TEXT: "text",
|
|
@@ -3863,9 +3849,9 @@ const sliderContext = {
|
|
|
3863
3849
|
}
|
|
3864
3850
|
};
|
|
3865
3851
|
|
|
3866
|
-
const styles$k = ":host{--_track-size:var(--odx-size-37);--_track-color:var(--odx-color-background-accent-rest);--_thumb-color:var(--odx-color-background-level-1);--_layer-background:0;--_layer-control-disabled:1;--_layer-interactive:2;--_layer-foreground:3;cursor:pointer;padding-block:var(--odx-spacing-75)var(--odx-spacing-50);padding-inline:var(--odx-spacing-75);min-width:120px;min-height:var(--odx-size-300);flex-direction:column;place-content:center;display:flex}[part~=container]{border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-
|
|
3852
|
+
const styles$k = ":host{--_track-size:var(--odx-size-37);--_track-color:var(--odx-color-background-accent-rest);--_thumb-color:var(--odx-color-background-level-1);--_layer-background:0;--_layer-control-disabled:1;--_layer-interactive:2;--_layer-foreground:3;cursor:pointer;padding-block:var(--odx-spacing-75)var(--odx-spacing-50);padding-inline:var(--odx-spacing-75);min-width:120px;min-height:var(--odx-size-300);flex-direction:column;place-content:center;display:flex}[part~=container]{border-radius:var(--odx-border-radius-sm);background-color:var(--odx-control-color-background-rest);height:var(--_track-size);position:relative}:host(:active){cursor:grabbing}";
|
|
3867
3853
|
|
|
3868
|
-
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]{z-index:var(--odx-z-level-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border:var(--odx-control-
|
|
3854
|
+
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]{z-index:var(--odx-z-level-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border:var(--odx-control-border-width)solid var(--odx-control-color-stroke-rest);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-elevation-shadow-level-1);background-color:var(--_thumb-color);cursor:grab;width:var(--_thumb-size);height:var(--_thumb-size);place-content:center;place-items:center;display:flex;inset-block-start:50%;transform:translate(-50%,-50%)}[part~=label]{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);inset-block-end:100%}[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-control-color-stroke-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)}}";
|
|
3869
3855
|
|
|
3870
3856
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl(CustomElement)) {
|
|
3871
3857
|
constructor() {
|
|
@@ -4133,7 +4119,7 @@ __decorateClass([
|
|
|
4133
4119
|
], _OdxSliderMarks.prototype, "showLabels", 2);
|
|
4134
4120
|
let OdxSliderMarks = _OdxSliderMarks;
|
|
4135
4121
|
|
|
4136
|
-
const styles$h = ":host{gap:var(--odx-spacing-37);border-radius:var(--odx-border-radius
|
|
4122
|
+
const styles$h = ":host{gap:var(--odx-spacing-37);border-radius:var(--odx-control-border-radius);min-width:var(--odx-control-width-lg);height:var(--odx-size-225);align-items:center;display:inline-flex}::slotted(odx-option){text-align:center;flex:auto;justify-content:center}::slotted(odx-option:not([hidden])){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-option[hidden]){display:none}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}:host(:not([interactive])) ::slotted(odx-option){pointer-events:none}:host([disabled]:not([interactive])) ::slotted(odx-option){background-color:#0000}";
|
|
4137
4123
|
|
|
4138
4124
|
const _OdxSpinbox = class _OdxSpinbox extends FormAssociated(CustomElement) {
|
|
4139
4125
|
constructor() {
|
|
@@ -4225,7 +4211,7 @@ __decorateClass([
|
|
|
4225
4211
|
], _OdxSpinbox.prototype, "value", 2);
|
|
4226
4212
|
let OdxSpinbox = _OdxSpinbox;
|
|
4227
4213
|
|
|
4228
|
-
const styles$g = ":host{gap:var(--odx-spacing-75);transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-spacing-75);height:var(--odx-control-addon-size-md);font-size:var(--odx-font-size-text-sm);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}odx-badge{margin:0 var(--odx-spacing-negative-37)}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=primary]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=danger]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=success]){background-color:var(--odx-color-background-success-subtle)}";
|
|
4214
|
+
const styles$g = ":host{gap:var(--odx-spacing-75);transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-spacing-75);height:var(--odx-control-addon-size-md);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}odx-badge{margin:0 var(--odx-spacing-negative-37)}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=primary]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=danger]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=success]){background-color:var(--odx-color-background-success-subtle)}";
|
|
4229
4215
|
|
|
4230
4216
|
const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
4231
4217
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
@@ -4249,7 +4235,7 @@ __decorateClass([
|
|
|
4249
4235
|
], _OdxStatus.prototype, "variant", 2);
|
|
4250
4236
|
let OdxStatus = _OdxStatus;
|
|
4251
4237
|
|
|
4252
|
-
const styles$f = "@layer base{:host{--_color-background:var(--odx-color-background-
|
|
4238
|
+
const styles$f = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle);--_label-color-foreground:var(--odx-color-foreground-rest);--_thumb-position:0;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{height:var(--odx-control-addon-size-md);color:var(--_color-foreground);place-items:center;transition-property:background-color,border-color,translate;display:flex;position:relative}.track,.thumb{border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle);transition:inherit}.track{background-color:var(--_color-background);width:var(--odx-size-225);height:var(--odx-size-50)}.thumb{backface-visibility:hidden;background-color:var(--_color-background);width:var(--odx-control-addon-size-sm);height:var(--odx-control-addon-size-sm);font-size:var(--odx-control-addon-size-xs);translate:var(--_thumb-position)0;place-content:center;place-items:center;display:flex;position:absolute;inset-inline-start:0}.label{cursor:inherit;display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host([indicator-position=end]){flex-direction:row-reverse;justify-content:space-between}:host(:empty) .content{display:none}:host(:hover){--_color-stroke:var(--odx-control-color-stroke-hover);--_color-background:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host([checked]){--_color-background:var(--odx-control-color-background-selected);--_color-stroke:var(--_color-background);--_color-foreground:var(--odx-color-foreground-inverse-static);--_thumb-position:calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background:var(--odx-control-color-background-selected-hover);--_color-stroke:var(--odx-control-color-stroke-selected)}:host([checked]:focus-visible) .thumb{outline:var(--odx-border-width-thin)solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-outer)}:host([invalid]:not([checked])){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-stroke-danger-rest);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-disabled-stroke);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke:var(--odx-control-color-stroke-readonly);--_color-background:var(--odx-control-color-background-rest);--_color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest);--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
4253
4239
|
|
|
4254
4240
|
const SwitchIndicatorPosition = pick(Alignment, ["START", "END"]);
|
|
4255
4241
|
const _OdxSwitch = class _OdxSwitch extends CheckboxControl(CustomElement) {
|
|
@@ -4576,7 +4562,7 @@ __decorateClass([
|
|
|
4576
4562
|
], _OdxText.prototype, "variant", 2);
|
|
4577
4563
|
let OdxText = _OdxText;
|
|
4578
4564
|
|
|
4579
|
-
const styles$6 = ":host{--control-max-height:100%;--_textarea-color-stroke:var(--odx-color-stroke-
|
|
4565
|
+
const styles$6 = ":host{--control-max-height:100%;--_textarea-color-stroke:var(--odx-control-color-stroke-rest);transition:var(--odx-transition-reduced);border-radius:var(--odx-control-border-radius);background-color:var(--odx-control-color-background-rest);min-width:var(--odx-control-width-lg);max-width:30ch;min-height:var(--odx-size-225);font-size:var(--odx-typography-font-size-text-md);justify-content:flex-end;align-items:center;transition-property:background-color,border-color,color,gap;display:inline-flex;position:relative;overflow:hidden}:host:after{background-color:var(--_textarea-color-stroke);height:var(--odx-border-width-thin);content:\"\";transition:inherit;position:absolute;inset:auto 0 0}[part~=input]{appearance:textfield;transition:var(--odx-transition-default);padding:var(--odx-spacing-37)var(--odx-spacing-50);width:100%;min-width:auto;height:min(var(--_height,100%),var(--control-max-height));text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);background-color:#0000;border:none;outline:none;flex:auto;transition-property:background,color,border-color;&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}}:host(:hover){--_textarea-color-stroke:var(--odx-control-color-stroke-hover);background-color:var(--odx-control-color-background-hover)}:host(:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);&:after{display:none}}:host(.odx-fill){max-width:100%;display:flex}:host([invalid]:not([readonly])){--_textarea-color-stroke:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_textarea-color-stroke:var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_textarea-color-stroke:var(--odx-control-color-stroke-readonly);background-color:var(--odx-control-color-background-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_textarea-color-stroke:var(--odx-color-stroke-danger-rest)}:host([auto-resize]){--_height:min-content;[part~=input]{resize:none}}";
|
|
4580
4566
|
|
|
4581
4567
|
const _OdxTextArea = class _OdxTextArea extends FormAssociated(CustomElement) {
|
|
4582
4568
|
constructor() {
|
|
@@ -4637,7 +4623,7 @@ __decorateClass([
|
|
|
4637
4623
|
], _OdxTextArea.prototype, "value", 2);
|
|
4638
4624
|
let OdxTextArea = _OdxTextArea;
|
|
4639
4625
|
|
|
4640
|
-
const styles$5 = ":host{gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);border:var(--odx-border-width-thick)solid transparent;border-radius:var(--odx-border-radius
|
|
4626
|
+
const styles$5 = ":host{gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);border:var(--odx-border-width-thick)solid transparent;border-radius:var(--odx-control-border-radius);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thick));flex-direction:column;transition-property:border-color,box-shadow,transform;display:flex}.content{flex-direction:column;flex:auto;display:flex}:host([interactive]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-2)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer)}:host([selected]){border-color:var(--odx-control-color-background-selected)}:host([alignment=center]){align-items:center;.content{justify-content:center}.header,.footer{text-align:center}}";
|
|
4641
4627
|
|
|
4642
4628
|
const TileVariant = pick(Variant, ["NEUTRAL"]);
|
|
4643
4629
|
const TileAlignment = pick(Alignment, ["START", "CENTER"]);
|
|
@@ -4697,7 +4683,7 @@ __decorateClass([
|
|
|
4697
4683
|
], _OdxToast.prototype, "variant", 2);
|
|
4698
4684
|
let OdxToast = _OdxToast;
|
|
4699
4685
|
|
|
4700
|
-
const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-color-background-
|
|
4686
|
+
const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);column-gap:calc(2*var(--_spacing-inline));transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline:calc(2*var(--_spacing-inline));min-width:var(--_height);height:var(--_height);white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:color,background-color,border-color;display:inline-flex;position:relative;overflow:hidden}:host(:hover){border-color:var(--_color-stroke-hover);background-color:var(--_color-background-hover)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}odx-icon,::slotted(odx-icon){--size:var(--_addon-size);margin-inline:calc(-1*var(--_spacing-inline))}[part~=label]{display:inline-block}}@layer state{:host([disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-foreground:var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background:var(--odx-control-color-background-selected);--_color-background-hover:var(--odx-control-color-background-selected-hover);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-stroke:var(--odx-control-color-stroke-selected);--_color-stroke-hover:var(--odx-control-color-stroke-selected)}:host([checked][required]){cursor:default}:host([appearance=ghost][checked]),:host([appearance=ghost][readonly]){--_color-stroke:transparent}:host([appearance=ghost][checked]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground:var(--odx-color-foreground-rest)}}@layer variant{:host(:is(:not([appearance]),[appearance=fill]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([appearance=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent}:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg)}}";
|
|
4701
4687
|
|
|
4702
4688
|
const ToggleButtonAppearance = pick(Appearance, ["FILL", "GHOST"]);
|
|
4703
4689
|
const ToggleButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -4764,7 +4750,7 @@ __decorateClass([
|
|
|
4764
4750
|
], _OdxToggleButton.prototype, "size", 2);
|
|
4765
4751
|
let OdxToggleButton = _OdxToggleButton;
|
|
4766
4752
|
|
|
4767
|
-
const styles$2 = ":host{border-radius:var(--odx-border-radius
|
|
4753
|
+
const styles$2 = ":host{border-radius:var(--odx-control-border-radius);align-items:center;padding:0;display:inline-flex}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:var(--odx-z-level-foreground);border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:is(:not(:first-child,:last-child),:last-child:nth-child(2)):is(:hover,:focus-within)){z-index:var(--odx-z-level-interactive)}:host(.odx-fill){display:flex;::slotted(odx-toggle-button){flex:1}}:host(:not([appearance=ghost])){::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1*var(--odx-border-width-thin))}::slotted(odx-toggle-button:last-child:nth-child(2)){margin-inline-start:calc(-1*var(--odx-border-width-thin))}}:host([invalid]){::slotted(odx-toggle-button:not([checked],[disabled])),::slotted(odx-toggle-button:not([checked],[disabled],[readonly])){--_color-background:var(--odx-color-background-danger-subtle)}::slotted(odx-toggle-button[checked]:not([disabled])){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}::slotted(odx-toggle-button[checked][readonly]:not([disabled])){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}}:host([invalid]:not([appearance=ghost])){::slotted(odx-toggle-button:not([checked],[disabled])),::slotted(odx-toggle-button[checked][readonly]:not([disabled])){--_color-stroke:var(--odx-color-stroke-danger-rest)}}:host([invalid][appearance=ghost]:not([disabled])){background-color:var(--odx-color-background-danger-subtle)}";
|
|
4768
4754
|
|
|
4769
4755
|
const _OdxToggleButtonGroup = class _OdxToggleButtonGroup extends RadioGroupControl(CustomElement) {
|
|
4770
4756
|
constructor() {
|
|
@@ -4828,7 +4814,7 @@ __decorateClass([
|
|
|
4828
4814
|
], _OdxToggleContent.prototype, "expanded", 2);
|
|
4829
4815
|
let OdxToggleContent = _OdxToggleContent;
|
|
4830
4816
|
|
|
4831
|
-
const styles = ":host{gap:var(--odx-spacing-37);transition:var(--odx-transition-default);border-radius:var(--odx-border-radius-md);padding:var(--odx-spacing-37);font-size:var(--odx-font-size-text-md);align-items:center;transition-property:color,background-color,box-shadow;display:flex;overflow-x:auto}:host([float]){box-shadow:var(--odx-shadow-level-1);background-color:var(--odx-color-background-level-1)}::slotted(:is(odx-title,odx-label,odx-text,odx-icon)){margin-inline:var(--odx-spacing-37)}::slotted(odx-separator){--size:var(--odx-size-150);--spacing:var(--odx-spacing-37);--inner-spacing:0px}:host([size=sm]){padding:var(--odx-spacing-12);font-size:var(--odx-font-size-text-sm);::slotted(odx-separator){--size:var(--odx-size-125)}}";
|
|
4817
|
+
const styles = ":host{gap:var(--odx-spacing-37);transition:var(--odx-transition-default);border-radius:var(--odx-border-radius-md);padding:var(--odx-spacing-37);font-size:var(--odx-typography-font-size-text-md);align-items:center;transition-property:color,background-color,box-shadow;display:flex;overflow-x:auto}:host([float]){box-shadow:var(--odx-elevation-shadow-level-1);background-color:var(--odx-color-background-level-1)}::slotted(:is(odx-title,odx-label,odx-text,odx-icon)){margin-inline:var(--odx-spacing-37)}::slotted(odx-separator){--size:var(--odx-size-150);--spacing:var(--odx-spacing-37);--inner-spacing:0px}:host([size=sm]){padding:var(--odx-spacing-12);font-size:var(--odx-typography-font-size-text-sm);::slotted(odx-separator){--size:var(--odx-size-125)}}";
|
|
4832
4818
|
|
|
4833
4819
|
const ALLOWED_BUTTON_VARIANTS = {
|
|
4834
4820
|
[ButtonVariant.PRIMARY]: true,
|
|
@@ -4890,4 +4876,4 @@ __decorateClass([
|
|
|
4890
4876
|
], _OdxTranslate.prototype, "context", 2);
|
|
4891
4877
|
let OdxTranslate = _OdxTranslate;
|
|
4892
4878
|
|
|
4893
|
-
export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeAppearance, BadgeSize, BadgeVariant, BaseFormat, ButtonAppearance, ButtonBadgePosition, ButtonVariant, CardAppearance, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonAppearance, ToggleButtonSize, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, scrollContainerNext, scrollContainerPrevious, sliderContext, tableContext };
|
|
4879
|
+
export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeAppearance, BadgeSize, BadgeVariant, BaseFormat, ButtonAppearance, ButtonBadgePosition, ButtonVariant, CardAppearance, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonAppearance, ToggleButtonSize, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, scrollContainerNext, scrollContainerPrevious, sliderContext, tableContext };
|
|
@@ -9,12 +9,4 @@ export declare const Variant: {
|
|
|
9
9
|
readonly WARNING: "warning";
|
|
10
10
|
readonly DANGER: "danger";
|
|
11
11
|
};
|
|
12
|
-
export type ProgressVariant = ValuesOf<typeof ProgressVariant>;
|
|
13
|
-
export declare const ProgressVariant: {
|
|
14
|
-
readonly CONFIRM: "confirm";
|
|
15
|
-
readonly NEUTRAL: "neutral";
|
|
16
|
-
readonly ACCENT: "accent";
|
|
17
|
-
readonly SUCCESS: "success";
|
|
18
|
-
readonly DANGER: "danger";
|
|
19
|
-
};
|
|
20
12
|
//# sourceMappingURL=variant.d.ts.map
|
package/dist/main.d.ts
CHANGED
|
@@ -22,10 +22,4 @@ export * from './lib/models/layout.js';
|
|
|
22
22
|
export * from './lib/models/shape.js';
|
|
23
23
|
export * from './lib/models/size.js';
|
|
24
24
|
export * from './lib/models/variant.js';
|
|
25
|
-
declare const _default: {
|
|
26
|
-
name: string;
|
|
27
|
-
displayName: string;
|
|
28
|
-
version: string;
|
|
29
|
-
};
|
|
30
|
-
export default _default;
|
|
31
25
|
//# sourceMappingURL=main.d.ts.map
|
package/dist/main.js
CHANGED
|
@@ -4,14 +4,6 @@ import { property, query } from 'lit/decorators.js';
|
|
|
4
4
|
import { unsafeCSS, LitElement, html, isServer } from 'lit';
|
|
5
5
|
import { u as uniqBy, R as RovingTabindexController, p as pick, m as minBy } from './vendor.js';
|
|
6
6
|
|
|
7
|
-
const name = "@odx/foundation";
|
|
8
|
-
const displayName = "ODX Design System Foundation";
|
|
9
|
-
const version = "1.0.0-beta.210";
|
|
10
|
-
const pkg = {
|
|
11
|
-
name,
|
|
12
|
-
displayName,
|
|
13
|
-
version};
|
|
14
|
-
|
|
15
7
|
const CanBeCollapsed = (superClass) => {
|
|
16
8
|
class CanBeCollapsedMixin extends superClass {
|
|
17
9
|
constructor() {
|
|
@@ -266,7 +258,7 @@ const CheckboxControl = (superClass) => {
|
|
|
266
258
|
return CheckboxControlBehavior;
|
|
267
259
|
};
|
|
268
260
|
|
|
269
|
-
const styles$3 = "@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:host{border:#0000;outline:none}}@layer base{.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}:where(.odx-typeset,.odx-content){line-height:var(--odx-line-height-text-md);>:where(odx-title,[class*=odx-title]),:where(h1,h2,h3,h4,h5,h6){margin-block:0 var(--odx-layout-spacing-sm);margin-inline:0}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin:var(--odx-layout-spacing-md)0}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-lg)}:where(ul,ol,dl,blockquote){margin-block:var(--odx-layout-spacing-sm);margin-inline:0;padding-inline-start:var(--odx-spacing-200)}:where(blockquote){padding-inline-end:var(--odx-spacing-200)}:where(dt){font-weight:var(--odx-typography-font-weight-medium)}:where(small){font-size:var(--odx-font-size-text-sm)}}:where(.odx-typeset-sm){line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm);:where(ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-md)}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin-block:var(--odx-layout-spacing-sm)}}@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-layout-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-layout-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
|
|
261
|
+
const styles$3 = "@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:host{border:#0000;outline:none}}@layer base{.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-typeset,.odx-content){line-height:var(--odx-typography-line-height-text-md);>:where(odx-title,[class*=odx-title]),:where(h1,h2,h3,h4,h5,h6){margin-block:0 var(--odx-layout-spacing-sm);margin-inline:0}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin:var(--odx-layout-spacing-md)0}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-lg)}:where(ul,ol,dl,blockquote){margin-block:var(--odx-layout-spacing-sm);margin-inline:0;padding-inline-start:var(--odx-spacing-200)}:where(blockquote){padding-inline-end:var(--odx-spacing-200)}:where(dt){font-weight:var(--odx-typography-font-weight-medium)}:where(small){font-size:var(--odx-typography-font-size-text-sm)}}:where(.odx-typeset-sm){line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);:where(ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-md)}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin-block:var(--odx-layout-spacing-sm)}}@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-layout-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-layout-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
|
|
270
262
|
|
|
271
263
|
function customElement(tagName, ...styles2) {
|
|
272
264
|
return (target) => {
|
|
@@ -826,7 +818,7 @@ const RadioGroupControl = (superClass) => {
|
|
|
826
818
|
return RadioGroupControlBehavior;
|
|
827
819
|
};
|
|
828
820
|
|
|
829
|
-
const styles$2 = "@layer base{:host{--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_height:var(--odx-control-height-md);--_min-width:auto;--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);--_font-size:var(--odx-control-font-size-md);transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius
|
|
821
|
+
const styles$2 = "@layer base{:host{--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_height:var(--odx-control-height-md);--_min-width:auto;--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);--_font-size:var(--odx-control-font-size-md);transition:var(--odx-transition-reduced);border-radius:var(--odx-control-border-radius);cursor:pointer;min-width:var(--_min-width);max-width:100%;height:var(--_height);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;margin:0;transition-property:border-color;position:relative}:host,.base{place-items:center;display:inline-flex}.base{column-gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border:var(--odx-control-border-width)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-control-border-width));padding-inline:calc(var(--_spacing-inline) - var(--odx-control-border-width));width:100%;min-width:var(--_height);height:100%;text-align:inherit;color:var(--_color-foreground);line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;overflow:hidden;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.label{min-width:0;text-align:inherit;pointer-events:none;flex:1}odx-loading-spinner{--size:calc(var(--_addon-size) - var(--odx-spacing-25));margin-inline:var(--odx-spacing-12);color:var(--_color-foreground)}::slotted(odx-badge:not([slot=badge])){min-width:var(--_addon-size)}:is(odx-avatar,odx-icon):not([size]),::slotted(:is(odx-avatar,odx-icon):not([size])){--size:var(--_addon-size)}odx-avatar:not([size]),::slotted(odx-avatar:not([size])){font-size:var(--odx-typography-font-size-text-xs)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}.base>odx-icon:not([slot]),::slotted(odx-icon:not([slot])){margin-inline:calc(-1*var(--_spacing-inline))}::slotted(:not([slot])){line-height:inherit}[odx-control],::slotted([odx-control]){margin-inline:calc(-1*var(--_spacing))}:host(:not([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([disabled]) .base{pointer-events:none;-webkit-user-select:none;user-select:none}:host([loading]){cursor:default}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-background-hover:var(--odx-color-background-disabled-rest);--_color-background-pressed:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}@layer variant{:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm);--_font-size:var(--odx-control-font-size-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg);::slotted(odx-avatar:not([size])),odx-avatar:not([size]){font-size:var(--odx-typography-font-size-text-md)}}}";
|
|
830
822
|
|
|
831
823
|
const Size = {
|
|
832
824
|
XS: "xs",
|
|
@@ -1015,7 +1007,7 @@ class ExpandableItemManager {
|
|
|
1015
1007
|
});
|
|
1016
1008
|
}
|
|
1017
1009
|
|
|
1018
|
-
const styles$1 = "@layer base{:host{--dialog-width:750px;--dialog-backdrop:var(--odx-color-backdrop-inverse);--dialog-spacing-top:0px;--dialog-spacing-outer:var(--odx-layout-spacing-lg);transition:var(--odx-transition-slow)allow-discrete;opacity:0;padding:var(--dialog-spacing-outer);width:auto;height:auto;color:inherit;pointer-events:all;touch-action:manipulation;overscroll-behavior:contain;background:0 0;margin:0;display:none;position:fixed;inset:0;overflow:hidden}:host,.container{transition:var(--odx-transition-slow)allow-discrete}.container{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%;display:flex;overflow:hidden auto;translate:0}.container>*{flex:auto}::slotted(*){max-height:100%}}@layer variant{:host([layer=page]){top:var(--
|
|
1010
|
+
const styles$1 = "@layer base{:host{--dialog-width:750px;--dialog-backdrop:var(--odx-color-backdrop-inverse);--dialog-spacing-top:0px;--dialog-spacing-outer:var(--odx-layout-spacing-lg);transition:var(--odx-transition-slow)allow-discrete;opacity:0;padding:var(--dialog-spacing-outer);width:auto;height:auto;color:inherit;pointer-events:all;touch-action:manipulation;overscroll-behavior:contain;background:0 0;margin:0;display:none;position:fixed;inset:0;overflow:hidden}:host,.container{transition:var(--odx-transition-slow)allow-discrete}.container{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%;display:flex;overflow:hidden auto;translate:0}.container>*{flex:auto}::slotted(*){max-height:100%}}@layer variant{:host([layer=page]){top:var(--page-header-height,0)}}@layer state{:host(:not([backdrop-disabled])){background:var(--dialog-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}:host([layer=container]){z-index:var(--odx-z-level-overlay);max-height:100%;display:none;position:absolute}:host([open]){opacity:1;display:contents;@starting-style{opacity:0}}:host([open][layer=container]){display:flex}:host([backdrop-disabled]){pointer-events:none;background:0 0;.container{pointer-events:all}}}";
|
|
1019
1011
|
|
|
1020
1012
|
const dialogDirective = booleanAttributeDirective({ name: "odx-dialog" });
|
|
1021
1013
|
const DialogSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -1036,6 +1028,7 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
1036
1028
|
this.size = DialogSize.MD;
|
|
1037
1029
|
this.#handleGlobalClick = ((event) => {
|
|
1038
1030
|
if (this.backdropDisabled || !this.canDismiss) return;
|
|
1031
|
+
if (this.layer === DialogLayer.CONTAINER && clickedOutside(event, this, true)) return;
|
|
1039
1032
|
const container = this.renderRoot.querySelector(".container");
|
|
1040
1033
|
if (container && !clickedOutside(event, container, true)) return;
|
|
1041
1034
|
event.preventDefault();
|
|
@@ -1293,15 +1286,5 @@ const Variant = {
|
|
|
1293
1286
|
WARNING: "warning",
|
|
1294
1287
|
DANGER: "danger"
|
|
1295
1288
|
};
|
|
1296
|
-
const ProgressVariant = {
|
|
1297
|
-
...pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]),
|
|
1298
|
-
CONFIRM: "confirm"
|
|
1299
|
-
};
|
|
1300
|
-
|
|
1301
|
-
const main = {
|
|
1302
|
-
name: pkg.name,
|
|
1303
|
-
displayName: pkg.displayName,
|
|
1304
|
-
version: pkg.version
|
|
1305
|
-
};
|
|
1306
1289
|
|
|
1307
|
-
export { ActiveDescendantsController, Alignment, Appearance, CanBeCollapsed, CanBeDisabled, CanBeExpanded, CheckboxControl, CheckboxControlGroup, ControlElement, ControlSize, CustomElement, DialogAfterCloseEvent, DialogAfterOpenEvent, DialogCloseCommand, DialogCloseEvent, DialogElement, DialogLayer, DialogOpenEvent, DialogShowCommand, DialogSize, DragController, DragControllerOptions, ExpandableItemManager, FormAssociated, InteractiveControlElement, IsDraggable, Justify, LinkControlElement, ListboxControl, NumberFormControl, OptionControl, OptionType, Placement,
|
|
1290
|
+
export { ActiveDescendantsController, Alignment, Appearance, CanBeCollapsed, CanBeDisabled, CanBeExpanded, CheckboxControl, CheckboxControlGroup, ControlElement, ControlSize, CustomElement, DialogAfterCloseEvent, DialogAfterOpenEvent, DialogCloseCommand, DialogCloseEvent, DialogElement, DialogLayer, DialogOpenEvent, DialogShowCommand, DialogSize, DragController, DragControllerOptions, ExpandableItemManager, FormAssociated, InteractiveControlElement, IsDraggable, Justify, LinkControlElement, ListboxControl, NumberFormControl, OptionControl, OptionType, Placement, RadioGroupControl, Shape, Size, Spacing, Variant, activeDirective, checkboxControlDirective, controlDirective, customElement, dialogDirective, dragActiveDirective, loadCustomElements, optionControlDirection };
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:where(*):not(:defined){display:none}}@layer base{.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}:where(.odx-typeset,.odx-content){line-height:var(--odx-line-height-text-md);>:where(odx-title,[class*=odx-title]),:where(h1,h2,h3,h4,h5,h6){margin-block:0 var(--odx-layout-spacing-sm);margin-inline:0}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin:var(--odx-layout-spacing-md)0}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-lg)}:where(ul,ol,dl,blockquote){margin-block:var(--odx-layout-spacing-sm);margin-inline:0;padding-inline-start:var(--odx-spacing-200)}:where(blockquote){padding-inline-end:var(--odx-spacing-200)}:where(dt){font-weight:var(--odx-typography-font-weight-medium)}:where(small){font-size:var(--odx-font-size-text-sm)}}:where(.odx-typeset-sm){line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm);:where(ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-md)}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin-block:var(--odx-layout-spacing-sm)}}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:root{scrollbar-color:var(--odx-color-background-brand)transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-font-size-base)}:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-layout-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-transition-default:all var(--odx-motion-duration-default)var(--odx-motion-easing-default);--odx-transition-slow:all var(--odx-motion-duration-slow)var(--odx-motion-easing-default);--odx-transition-reduced:all var(--odx-motion-duration-fast)var(--odx-motion-easing-reduced);--odx-motion-delay-reduced:50ms;--odx-focus-ring-outer:var(--odx-size-12)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm:var(--odx-spacing-negative-px);--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999;--odx-layout-spacing-sm:var(--odx-spacing-37);--odx-layout-spacing-md:var(--odx-spacing-75);--odx-layout-spacing-lg:var(--odx-spacing-100);--odx-layout-width-xs:20ch;--odx-layout-width-sm:25ch;--odx-layout-width-md:50ch;--odx-layout-width-lg:80ch;--odx-control-min-width-md:8ch;--odx-control-min-width-lg:15ch;--odx-control-height-sm:var(--odx-size-200);--odx-control-height-md:var(--odx-size-225);--odx-control-height-lg:var(--odx-size-300);--odx-control-stroke-width:var(--odx-border-width-thin);--odx-control-addon-size-xs:var(--odx-size-100);--odx-control-addon-size-sm:var(--odx-size-125);--odx-control-addon-size-md:var(--odx-size-150);--odx-control-addon-size-lg:var(--odx-size-200);--odx-control-spacing-sm:var(--odx-spacing-25);--odx-control-spacing-md:var(--odx-spacing-37);--odx-control-spacing-lg:var(--odx-spacing-50);--odx-control-spacing-inline-sm:var(--odx-control-spacing-md);--odx-control-spacing-inline-md:var(--odx-control-spacing-md);--odx-control-spacing-inline-lg:var(--odx-control-spacing-lg);--odx-control-font-size-sm:var(--odx-font-size-text-sm);--odx-control-font-size-md:var(--odx-font-size-text-md);--odx-control-font-size-lg:var(--odx-font-size-text-lg);--odx-font-size-base:var(--odx-typography-font-size-3);--odx-line-height-base:var(--odx-typography-line-height-4);--odx-font-size-text-xs:var(--odx-typography-font-size-1);--odx-line-height-text-xs:var(--odx-typography-line-height-1);--odx-font-size-text-sm:var(--odx-typography-font-size-2);--odx-line-height-text-sm:var(--odx-typography-line-height-2);--odx-font-size-text-md:var(--odx-typography-font-size-3);--odx-line-height-text-md:var(--odx-typography-line-height-3);--odx-font-size-text-lg:var(--odx-typography-font-size-4);--odx-line-height-text-lg:var(--odx-typography-line-height-4);--odx-font-size-heading-xs:var(--odx-typography-font-size-2);--odx-line-height-heading-xs:var(--odx-typography-line-height-2);--odx-font-size-heading-sm:var(--odx-typography-font-size-3);--odx-line-height-heading-sm:var(--odx-typography-line-height-3);--odx-font-size-heading-md:var(--odx-typography-font-size-5);--odx-line-height-heading-md:var(--odx-typography-line-height-5);--odx-font-size-heading-lg:var(--odx-typography-font-size-6);--odx-line-height-heading-lg:var(--odx-typography-line-height-6);--odx-font-size-heading-xl:var(--odx-typography-font-size-7);--odx-line-height-heading-xl:var(--odx-typography-line-height-7);--odx-font-size-heading-xxl:var(--odx-typography-font-size-8);--odx-line-height-heading-xxl:var(--odx-typography-line-height-8);--odx-font-size-display-sm:var(--odx-typography-font-size-8);--odx-line-height-display-sm:var(--odx-typography-line-height-8);--odx-font-size-display-md:var(--odx-typography-font-size-9);--odx-line-height-display-md:var(--odx-typography-line-height-9);--odx-font-size-display-lg:var(--odx-typography-font-size-10);--odx-line-height-display-lg:var(--odx-typography-line-height-10);--odx-font-size-display-xl:var(--odx-typography-font-size-11);--odx-line-height-display-xl:var(--odx-typography-line-height-11)}
|
|
1
|
+
@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:where(*):not(:defined){display:none}}@layer base{.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-typeset,.odx-content){line-height:var(--odx-typography-line-height-text-md);>:where(odx-title,[class*=odx-title]),:where(h1,h2,h3,h4,h5,h6){margin-block:0 var(--odx-layout-spacing-sm);margin-inline:0}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin:var(--odx-layout-spacing-md)0}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-lg)}:where(ul,ol,dl,blockquote){margin-block:var(--odx-layout-spacing-sm);margin-inline:0;padding-inline-start:var(--odx-spacing-200)}:where(blockquote){padding-inline-end:var(--odx-spacing-200)}:where(dt){font-weight:var(--odx-typography-font-weight-medium)}:where(small){font-size:var(--odx-typography-font-size-text-sm)}}:where(.odx-typeset-sm){line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);:where(ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-md)}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin-block:var(--odx-layout-spacing-sm)}}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}: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)}:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-layout-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-transition-default:all var(--odx-motion-duration-default)var(--odx-motion-easing-default);--odx-transition-slow:all var(--odx-motion-duration-slow)var(--odx-motion-easing-default);--odx-transition-reduced:all var(--odx-motion-duration-fast)var(--odx-motion-easing-reduced);--odx-motion-delay-reduced:50ms;--odx-focus-ring-outer:var(--odx-border-width-thick)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
|
package/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.212",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"lit": "3.3.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"@odx/
|
|
24
|
-
"@odx/
|
|
23
|
+
"@odx/icons": "^4.0.0-rc.45",
|
|
24
|
+
"@odx/design-tokens": "^2.0.0-rc.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@floating-ui/dom": "1.7.4",
|
|
28
28
|
"@lit-labs/preact-signals": "1.0.3",
|
|
29
29
|
"@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
|
|
30
|
-
"@odx/icons": "4.0.0-rc.
|
|
30
|
+
"@odx/icons": "4.0.0-rc.45",
|
|
31
31
|
"@spectrum-web-components/reactive-controllers": "1.7.0",
|
|
32
32
|
"es-toolkit": "1.39.10",
|
|
33
33
|
"sass-embedded": "1.92.1",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@odx-internal/config-typescript": "0.0.0",
|
|
38
38
|
"@odx-internal/config-vite": "0.0.0",
|
|
39
39
|
"@odx-internal/utils-storybook": "0.0.0",
|
|
40
|
-
"@odx/design-tokens": "
|
|
40
|
+
"@odx/design-tokens": "2.0.0-rc.1"
|
|
41
41
|
},
|
|
42
42
|
"sideEffects": [
|
|
43
43
|
"dist/components-loader.js",
|