@odx/foundation 1.0.0-beta.201 → 1.0.0-beta.202
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/input/input.d.ts +3 -3
- package/dist/components.js +25 -25
- package/dist/lib/control-element.d.ts +1 -1
- package/dist/main.js +8 -8
- package/dist/styles.css +1 -1
- package/package.json +15 -15
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ControlElement, FormAssociated } from '../../main.js';
|
|
2
2
|
import { OdxIconName } from '@odx/icons';
|
|
3
3
|
import { nothing, PropertyValues, TemplateResult } from 'lit';
|
|
4
4
|
declare global {
|
|
@@ -6,7 +6,7 @@ declare global {
|
|
|
6
6
|
'odx-input': OdxInput;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
declare const OdxInput_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof
|
|
9
|
+
declare const OdxInput_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof ControlElement;
|
|
10
10
|
export declare class OdxInput extends OdxInput_base {
|
|
11
11
|
#private;
|
|
12
12
|
static shadowRootOptions: ShadowRootInit;
|
|
@@ -25,7 +25,7 @@ export declare class OdxInput extends OdxInput_base {
|
|
|
25
25
|
stepDown(): void;
|
|
26
26
|
protected willUpdate(props: PropertyValues<this>): void;
|
|
27
27
|
protected render(): TemplateResult;
|
|
28
|
-
protected renderControl(type: string, icon: OdxIconName, listener: EventListener, disabled: boolean): TemplateResult | typeof nothing;
|
|
28
|
+
protected renderControl(type: string, icon: OdxIconName, listener: EventListener, disabled: boolean, slot?: string): TemplateResult | typeof nothing;
|
|
29
29
|
}
|
|
30
30
|
export {};
|
|
31
31
|
//# sourceMappingURL=input.d.ts.map
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, FormAssociated, ActiveDescendantsController, Shape, Appearance, CheckboxControl, CheckboxControlGroup, DialogElement, OptionControlElement, ProgressVariant, RadioGroupControlElement, CanBeCollapsed, ListboxControlElement, OptionType, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
|
|
2
|
+
import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, FormAssociated, ActiveDescendantsController, Shape, Appearance, CheckboxControl, CheckboxControlGroup, DialogElement, ControlElement, OptionControlElement, ProgressVariant, RadioGroupControlElement, CanBeCollapsed, ListboxControlElement, OptionType, 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$1j = "@layer base{:host{
|
|
134
|
+
const styles$1j = "@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(:is([variant=neutral],:not([variant]))[loading]){--_color-stroke:var(--odx-color-stroke-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=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=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([variant=danger-subtle]){--_color-background:var(--odx-color-background-danger-subtle);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-danger-rest);--_color-foreground-hover:var(--odx-color-foreground-inverse-static)}: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=danger-subtle][loading]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=danger-subtle][loading]),:host([variant=ghost][loading]){--_color-background:var(--odx-color-background-transparent-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 ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_SUBTLE", "GHOST"]);
|
|
@@ -215,7 +215,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
215
215
|
#statusTimeout;
|
|
216
216
|
firstUpdated(props) {
|
|
217
217
|
super.firstUpdated(props);
|
|
218
|
-
this.
|
|
218
|
+
this.baseElement.addEventListener("click", this.#handleClick);
|
|
219
219
|
}
|
|
220
220
|
render() {
|
|
221
221
|
const message = this.done && !this.replaceContent ? this.statusMessage : this.label;
|
|
@@ -240,14 +240,14 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
240
240
|
updated(props) {
|
|
241
241
|
super.updated(props);
|
|
242
242
|
if (props.has("done")) {
|
|
243
|
-
this.tooltip?.mountPopover(this.
|
|
243
|
+
this.tooltip?.mountPopover(this.baseElement);
|
|
244
244
|
if (this.done) {
|
|
245
245
|
this.#scheduleTooltipClose();
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
248
|
if (props.has("label")) {
|
|
249
|
-
this.tooltip?.mountPopover(this.
|
|
250
|
-
this.
|
|
249
|
+
this.tooltip?.mountPopover(this.baseElement);
|
|
250
|
+
this.baseElement.ariaLabel = this.label || null;
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
253
|
#scheduleTooltipClose() {
|
|
@@ -399,7 +399,7 @@ class OdxActionGroup extends CustomElement {
|
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
401
|
|
|
402
|
-
const styles$1f = "@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);::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-spacing-md);opacity:1}}:host([appearance=link][active]){.label:after{background-color:var(--odx-color-background-accent-rest)}}}";
|
|
402
|
+
const styles$1f = "@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-spacing-md);opacity:1}}:host([appearance=link][active]){.label:after{background-color:var(--odx-color-background-accent-rest)}}}";
|
|
403
403
|
|
|
404
404
|
const NavigationItemAppearance = { BUTTON: "button", LINK: "link" };
|
|
405
405
|
const _OdxNavigationItem = class _OdxNavigationItem extends LinkControlElement {
|
|
@@ -424,7 +424,7 @@ __decorateClass([
|
|
|
424
424
|
], _OdxNavigationItem.prototype, "compact", 2);
|
|
425
425
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
426
426
|
|
|
427
|
-
const styles$1e = ":host{--_indicator-position:var(--odx-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
|
|
427
|
+
const styles$1e = ":host{--_indicator-position:var(--odx-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-min-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-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}";
|
|
428
428
|
|
|
429
429
|
const TabBarAlignment = pick(Alignment, ["START", "END"]);
|
|
430
430
|
const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
@@ -1644,7 +1644,7 @@ __decorateClass([
|
|
|
1644
1644
|
], _OdxCard.prototype, "interactive", 2);
|
|
1645
1645
|
let OdxCard = _OdxCard;
|
|
1646
1646
|
|
|
1647
|
-
const styles$$ = ":host{--_indicator-size:calc(var(--odx-size-125));--_indicator-color-background:var(--odx-color-background-control-rest);--_indicator-color-stroke:var(--odx-color-stroke-control-
|
|
1647
|
+
const styles$$ = ":host{--_indicator-size:calc(var(--odx-size-125));--_indicator-color-background:var(--odx-color-background-control-rest);--_indicator-color-stroke:var(--odx-color-stroke-control-rest);--_indicator-color-foreground:transparent;--_label-color-foreground:inherit;margin-block:var(--odx-control-spacing-md);border-radius:var(--odx-border-radius-controls);cursor:pointer;-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-border-radius-controls);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(:not(:empty)) .indicator{margin-inline:var(--odx-control-spacing-inline-md)var(--odx-control-spacing-inline-sm)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke:var(--odx-color-stroke-control-hover);--_indicator-color-background:var(--odx-color-background-control-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-color-background-control-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background:var(--odx-color-background-control-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-color-background-control-readonly);--_indicator-color-stroke:var(--odx-color-stroke-control-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)}";
|
|
1648
1648
|
|
|
1649
1649
|
class OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
1650
1650
|
static {
|
|
@@ -2258,9 +2258,9 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
2258
2258
|
return html`<odx-tooltip placement="${optionalAttr(this.labelPlacement)}" size="sm" variant="${this.#resolveTooltipVariant()}"><odx-text size="sm" strong>${label}</odx-text></odx-tooltip>`;
|
|
2259
2259
|
}
|
|
2260
2260
|
#handleLabelChange() {
|
|
2261
|
-
this.
|
|
2261
|
+
this.baseElement.ariaLabel = this.label || null;
|
|
2262
2262
|
const tooltip = this.renderRoot.querySelector("odx-tooltip");
|
|
2263
|
-
tooltip?.mountPopover(this.
|
|
2263
|
+
tooltip?.mountPopover(this.baseElement);
|
|
2264
2264
|
}
|
|
2265
2265
|
#resolveTooltipVariant() {
|
|
2266
2266
|
if (this.labelVariant) {
|
|
@@ -2437,9 +2437,9 @@ __decorateClass([
|
|
|
2437
2437
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
2438
2438
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
2439
2439
|
|
|
2440
|
-
const styles$P = ":host{--_color-
|
|
2440
|
+
const styles$P = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-hover);--_color-stroke-pressed:var(--odx-color-stroke-control-hover);--_min-width:var(--odx-control-min-width-lg);cursor:text;font-weight:var(--odx-typography-font-weight-medium)}.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}}::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-color-background-control-readonly);--_color-stroke:var(--odx-color-stroke-control-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([block]){flex:auto;max-width:100%;display:flex}}";
|
|
2441
2441
|
|
|
2442
|
-
const _OdxInput = class _OdxInput extends FormAssociated(
|
|
2442
|
+
const _OdxInput = class _OdxInput extends FormAssociated(ControlElement) {
|
|
2443
2443
|
constructor() {
|
|
2444
2444
|
super(...arguments);
|
|
2445
2445
|
this.block = false;
|
|
@@ -2502,7 +2502,7 @@ const _OdxInput = class _OdxInput extends FormAssociated(CustomElement) {
|
|
|
2502
2502
|
const max = isNumberInput ? this.max : void 0;
|
|
2503
2503
|
const canStepUp = max == null || this.value == null || Number(this.value) < max;
|
|
2504
2504
|
const canStepDown = min == null || this.value == null || Number(this.value) > min;
|
|
2505
|
-
return html`<
|
|
2505
|
+
return html`<div class="base">${when(!this.readonly && isNumberInput, () => this.renderControl("decrement", "core::minus", () => this.stepDown(), this.disabled || !canStepDown, "prefix"))} ${this.renderSideSlot("prefix")} <input placeholder="${this.disabled || this.readonly ? "" : this.placeholder}" class="input" part="input" min="${optionalAttr(min)}" max="${optionalAttr(max)}" step="${optionalAttr(this.step)}" type="${this.type}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" .value="${this.value}" size="1" @keydown="${this.#handleKeyDown}" @change="${forwardEvent(this)}" @input="${this.#handleInput}" @search="${forwardEvent(this)}"> ${this.renderSideSlot("suffix")} ${when(
|
|
2506
2506
|
!this.readonly && isNumberInput,
|
|
2507
2507
|
() => this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp),
|
|
2508
2508
|
() => when(this.#isClearable(), () => this.renderControl("clear", "core::cancel", this.#handleClear, this.disabled))
|
|
@@ -2516,11 +2516,11 @@ const _OdxInput = class _OdxInput extends FormAssociated(CustomElement) {
|
|
|
2516
2516
|
},
|
|
2517
2517
|
this.disabled
|
|
2518
2518
|
)
|
|
2519
|
-
)}
|
|
2519
|
+
)}</div>`;
|
|
2520
2520
|
}
|
|
2521
|
-
renderControl(type, icon, listener, disabled) {
|
|
2521
|
+
renderControl(type, icon, listener, disabled, slot = "suffix") {
|
|
2522
2522
|
if (this.hideControls || this.readonly) return nothing;
|
|
2523
|
-
return html`<odx-icon-button class="control-${type}" icon="${icon}" size="sm" tabindex="-1" variant="ghost" ?disabled="${disabled}" @click="${listener}" aria-label="${type}"></odx-icon-button>`;
|
|
2523
|
+
return html`<odx-icon-button class="control-${type}" icon="${icon}" size="sm" tabindex="-1" variant="ghost" ?disabled="${disabled}" @click="${listener}" aria-label="${type}" slot="${slot}"></odx-icon-button>`;
|
|
2524
2524
|
}
|
|
2525
2525
|
#isClearable() {
|
|
2526
2526
|
return this.clearable && !this.disabled && !this.readonly && !this.required && Boolean(this.value);
|
|
@@ -2672,7 +2672,7 @@ __decorateClass([
|
|
|
2672
2672
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2673
2673
|
let OdxLineClamp = _OdxLineClamp;
|
|
2674
2674
|
|
|
2675
|
-
const styles$K = "@layer base{:host{--indent-level:1;place-items:initial;flex-direction:column;max-width:100%;height:auto;display:flex}.base{z-index:var(--odx-z-level-interactive);height:var(--_height);text-align:start;place-content:flex-start;padding-inline-start:calc(var(--indent-level)*var(--_spacing-inline))}.separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}.expand-control::part(icon){transition:var(--odx-transition-default)}odx-toggle-content{width:100%}::slotted(odx-list){--item-indent-level:calc(var(--indent-level) + 1)}:host(:last-of-type) .separator{opacity:0}}@layer variant{.base:has(.separator:active){--_color-background-pressed:var(--_color-background-hover)}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);cursor:default}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected
|
|
2675
|
+
const styles$K = "@layer base{:host{--indent-level:1;place-items:initial;flex-direction:column;max-width:100%;height:auto;display:flex}.base{z-index:var(--odx-z-level-interactive);height:var(--_height);text-align:start;place-content:flex-start;padding-inline-start:calc(var(--indent-level)*var(--_spacing-inline))}.separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}.expand-control::part(icon){transition:var(--odx-transition-default)}odx-toggle-content{width:100%}::slotted(odx-list){--item-indent-level:calc(var(--indent-level) + 1)}:host(:last-of-type) .separator{opacity:0}}@layer variant{.base:has(.separator:active){--_color-background-pressed:var(--_color-background-hover)}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);cursor:default}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--_color-background-hover)}:host([selected][disabled]){--_color-background:var(--odx-color-background-disabled-selected);--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-foreground:var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){.separator{opacity:1}.expand-control{--icon-rotate:180deg}}:host(:is(:not([size]),[size=md])) .expand-control::part(icon){--size:var(--odx-control-addon-size-md)}:host([size=lg]){--_font-size:inherit;.expand-control{max-width:var(--odx-control-height-md)}}}";
|
|
2676
2676
|
|
|
2677
2677
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(LinkControlElement) {
|
|
2678
2678
|
constructor() {
|
|
@@ -2716,7 +2716,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(LinkControlElement
|
|
|
2716
2716
|
}
|
|
2717
2717
|
updated(props) {
|
|
2718
2718
|
if (props.has("muted") || props.has("disabled") && !this.disabled) {
|
|
2719
|
-
this.
|
|
2719
|
+
this.baseElement.tabIndex = this.muted ? -1 : 0;
|
|
2720
2720
|
}
|
|
2721
2721
|
super.updated(props);
|
|
2722
2722
|
}
|
|
@@ -3408,7 +3408,7 @@ __decorateClass([
|
|
|
3408
3408
|
], _OdxProgressRing.prototype, "stroke", 2);
|
|
3409
3409
|
let OdxProgressRing = _OdxProgressRing;
|
|
3410
3410
|
|
|
3411
|
-
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-size-125);--_indicator-color-background:var(--odx-color-background-control-rest);--_indicator-color-stroke:var(--odx-color-stroke-control-
|
|
3411
|
+
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-size-125);--_indicator-color-background:var(--odx-color-background-control-rest);--_indicator-color-stroke:var(--odx-color-stroke-control-rest);--_indicator-stroke-width:var(--odx-border-width-thin);--_label-color-foreground:inherit;margin-block:var(--odx-control-spacing-md);border-radius:var(--odx-border-radius-controls);cursor:pointer;-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(:not(:empty)) .indicator{margin-inline:var(--odx-control-spacing-inline-md)var(--odx-control-spacing-inline-sm)}:host(:hover){--_indicator-color-background:var(--odx-color-background-control-hover);--_indicator-color-stroke:var(--odx-color-stroke-control-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-color-stroke-control-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-color-background-control-selected);--_indicator-stroke-width:var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke:var(--odx-color-background-control-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-color-background-control-readonly);--_indicator-color-stroke:var(--odx-color-stroke-control-readonly);--_label-color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background:var(--odx-color-stroke-control-readonly);--_indicator-color-stroke:var(--odx-color-stroke-control-readonly);--_indicator-stroke-width:var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-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)}}";
|
|
3412
3412
|
|
|
3413
3413
|
class OdxRadioButton extends CheckboxControl(CustomElement) {
|
|
3414
3414
|
static {
|
|
@@ -3710,7 +3710,7 @@ const _OdxSelect = class _OdxSelect extends ListboxControlElement {
|
|
|
3710
3710
|
render() {
|
|
3711
3711
|
const selectedOptions = this.getSelectedOptions();
|
|
3712
3712
|
const dropdownDisabled = this.disabled || this.readonly && (!this.multiple || selectedOptions.length === 0);
|
|
3713
|
-
return html`<div class="base" tabindex="0" aria-haspopup="listbox"><div class="value odx-no-overflow">${when(
|
|
3713
|
+
return html`<div class="base" tabindex="${this.disabled ? -1 : 0}" aria-haspopup="listbox"><div class="value odx-no-overflow">${when(
|
|
3714
3714
|
selectedOptions.length,
|
|
3715
3715
|
() => html`${selectedOptions.map((option) => option.label).join(", ")}`,
|
|
3716
3716
|
() => when(!(this.disabled || this.readonly), () => html`<slot name="placeholder">${this.placeholder}</slot>`)
|
|
@@ -3796,7 +3796,7 @@ __decorateClass([
|
|
|
3796
3796
|
], _OdxSidebar.prototype, "size", 2);
|
|
3797
3797
|
let OdxSidebar = _OdxSidebar;
|
|
3798
3798
|
|
|
3799
|
-
const styles$l = ":host{--size-inline:100%;--_height:var(--odx-size-100);--_border-radius:var(--odx-border-radius-controls);--_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-font-size-text-xs)}:host([size=lg]){--_height:var(--odx-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-min-width);--_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%}}";
|
|
3799
|
+
const styles$l = ":host{--size-inline:100%;--_height:var(--odx-size-100);--_border-radius:var(--odx-border-radius-controls);--_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-font-size-text-xs)}:host([size=lg]){--_height:var(--odx-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-min-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%}}";
|
|
3800
3800
|
|
|
3801
3801
|
const SkeletonType = {
|
|
3802
3802
|
TEXT: "text",
|
|
@@ -3851,7 +3851,7 @@ const sliderContext = {
|
|
|
3851
3851
|
|
|
3852
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-color-background-control-rest);height:var(--_track-size);position:relative}:host(:active){cursor:grabbing}";
|
|
3853
3853
|
|
|
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-stroke-width)solid var(--odx-color-stroke-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-stroke-width)solid var(--odx-color-stroke-control-rest);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-1);background-color:var(--_thumb-color);cursor:grab;width:var(--_thumb-size);height:var(--_thumb-size);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-color-stroke-control-pressed)}[part~=label]{transform:translate(-50%)translateY(calc(-1*var(--odx-spacing-75)))scale(1);opacity:1}}:host([disabled]){pointer-events:none;[part~=thumb]{--_thumb-color:var(--odx-color-background-disabled);z-index:var(--odx-z-level-foreground)}}";
|
|
3855
3855
|
|
|
3856
3856
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl(CustomElement)) {
|
|
3857
3857
|
constructor() {
|
|
@@ -4237,7 +4237,7 @@ __decorateClass([
|
|
|
4237
4237
|
], _OdxStatus.prototype, "variant", 2);
|
|
4238
4238
|
let OdxStatus = _OdxStatus;
|
|
4239
4239
|
|
|
4240
|
-
const styles$f = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-stroke:var(--odx-color-stroke-control-
|
|
4240
|
+
const styles$f = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle);--_label-color-foreground:var(--odx-color-foreground-rest);--_thumb-size:var(--odx-size-125);--_thumb-position:0;margin-block:var(--odx-control-spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{height:var(--odx-size-150);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-size-125);height:var(--odx-size-125);font-size:var(--odx-size-100);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(:not(:empty)) .indicator{margin-inline:var(--odx-control-spacing-inline-md)var(--odx-control-spacing-inline-sm)}:host([indicator-position=end]:not(:empty)) .indicator{margin-inline:var(--odx-control-spacing-inline-sm)var(--odx-control-spacing-inline-md)}:host(:empty) .content{display:none}:host(:hover){--_color-stroke:var(--odx-color-stroke-control-hover);--_color-background:var(--odx-color-background-control-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-color-background-control-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-color-background-control-selected-hover);--_color-stroke:var(--odx-color-stroke-control-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-color-stroke-control-readonly);--_color-background:var(--odx-color-background-control-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)}}";
|
|
4241
4241
|
|
|
4242
4242
|
const SwitchIndicatorPosition = pick(Alignment, ["START", "END"]);
|
|
4243
4243
|
const _OdxSwitch = class _OdxSwitch extends CheckboxControl(CustomElement) {
|
|
@@ -4690,7 +4690,7 @@ __decorateClass([
|
|
|
4690
4690
|
], _OdxToast.prototype, "variant", 2);
|
|
4691
4691
|
let OdxToast = _OdxToast;
|
|
4692
4692
|
|
|
4693
|
-
const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-
|
|
4693
|
+
const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-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);gap:var(--_spacing-inline);transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline: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){margin-inline:calc(-1*var(--_spacing));font-size:var(--_addon-size)}[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-color-background-control-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-color-background-control-selected);--_color-background-hover:var(--odx-color-background-control-selected-hover);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-stroke:var(--odx-color-stroke-control-selected);--_color-stroke-hover:var(--odx-color-stroke-control-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)}}";
|
|
4694
4694
|
|
|
4695
4695
|
const ToggleButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
4696
4696
|
const ToggleButtonAppearance = pick(Appearance, ["FILL", "GHOST"]);
|
|
@@ -24,7 +24,7 @@ export declare class ControlElement extends ControlElement_base {
|
|
|
24
24
|
#private;
|
|
25
25
|
static readonly styles: CSSResultGroup;
|
|
26
26
|
protected loadingSpinnerSlot?: 'prefix' | 'suffix';
|
|
27
|
-
readonly
|
|
27
|
+
readonly baseElement: HTMLDivElement;
|
|
28
28
|
loading: boolean;
|
|
29
29
|
size: ControlSize;
|
|
30
30
|
connectedCallback(): void;
|
package/dist/main.js
CHANGED
|
@@ -7,7 +7,7 @@ import { when } from 'lit/directives/when.js';
|
|
|
7
7
|
|
|
8
8
|
const name = "@odx/foundation";
|
|
9
9
|
const displayName = "ODX Design System Foundation";
|
|
10
|
-
const version = "1.0.0-beta.
|
|
10
|
+
const version = "1.0.0-beta.202";
|
|
11
11
|
const pkg = {
|
|
12
12
|
name,
|
|
13
13
|
displayName,
|
|
@@ -480,7 +480,7 @@ const NumberFormControl = (superClass) => {
|
|
|
480
480
|
return NumberFormControlBehavior;
|
|
481
481
|
};
|
|
482
482
|
|
|
483
|
-
const styles$3 = "@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:
|
|
483
|
+
const styles$3 = "@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-controls);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-stroke-width)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-control-stroke-width));padding-inline:calc(var(--_spacing-inline) - var(--odx-control-stroke-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-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-font-size-text-md)}}}";
|
|
484
484
|
|
|
485
485
|
const Size = {
|
|
486
486
|
XS: "xs",
|
|
@@ -507,10 +507,10 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
507
507
|
controlDirective.toggle(this, true);
|
|
508
508
|
}
|
|
509
509
|
click() {
|
|
510
|
-
this.
|
|
510
|
+
this.baseElement.click();
|
|
511
511
|
}
|
|
512
512
|
focus(options) {
|
|
513
|
-
this.
|
|
513
|
+
this.baseElement.focus(options);
|
|
514
514
|
}
|
|
515
515
|
updated(props) {
|
|
516
516
|
super.updated(props);
|
|
@@ -519,7 +519,7 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
519
519
|
}
|
|
520
520
|
}
|
|
521
521
|
render() {
|
|
522
|
-
return html`<div id="${optionalAttr(this.id)}" class="base" part="base">${this.renderContent()}</div>`;
|
|
522
|
+
return html`<div id="${optionalAttr(this.id)}" class="base" part="base" tabindex="${this.disabled ? -1 : 0}" aria-busy="${optionalAttr(this.loading)}">${this.renderContent()}</div>`;
|
|
523
523
|
}
|
|
524
524
|
renderContent() {
|
|
525
525
|
return html`${this.renderSideSlot("prefix")} ${this.renderSlot()} ${this.renderSideSlot("suffix")}`;
|
|
@@ -551,7 +551,7 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
551
551
|
}
|
|
552
552
|
__decorateClass([
|
|
553
553
|
query(".base", true)
|
|
554
|
-
], ControlElement.prototype, "
|
|
554
|
+
], ControlElement.prototype, "baseElement", 2);
|
|
555
555
|
__decorateClass([
|
|
556
556
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
557
557
|
], ControlElement.prototype, "loading", 2);
|
|
@@ -919,7 +919,7 @@ __decorateClass([
|
|
|
919
919
|
], _DialogElement.prototype, "size", 2);
|
|
920
920
|
let DialogElement = _DialogElement;
|
|
921
921
|
|
|
922
|
-
const styles$1 = "@layer base{:host{flex:none}
|
|
922
|
+
const styles$1 = "@layer base{:host{cursor:pointer;flex:none}.label{margin-block:calc(-1*var(--_spacing));margin-inline:calc(-1*var(--_spacing-inline));padding-block:var(--_spacing);padding-inline:var(--_spacing-inline)}}";
|
|
923
923
|
|
|
924
924
|
class InteractiveControlElement extends ControlElement {
|
|
925
925
|
constructor() {
|
|
@@ -980,7 +980,7 @@ __decorateClass([
|
|
|
980
980
|
property()
|
|
981
981
|
], LinkControlElement.prototype, "download", 2);
|
|
982
982
|
|
|
983
|
-
const styles = "@layer base{odx-checkbox{margin:0}.label{flex:auto}.indicator{--size:var(--odx-control-addon-size-sm);margin-inline:var(--odx-spacing-12)}}@layer state{:host([readonly]){pointer-events:none}:host([odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected)
|
|
983
|
+
const styles = "@layer base{odx-checkbox{margin:0}.label{flex:auto}.indicator{--size:var(--odx-control-addon-size-sm);margin-inline:var(--odx-spacing-12)}}@layer state{:host([readonly]){pointer-events:none}:host([odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-pressed)}:host([selected]){--_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-hover)}:host([selected][odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-selected-hover)}}";
|
|
984
984
|
|
|
985
985
|
const OptionType = { CHECKBOX: "checkbox" };
|
|
986
986
|
class OptionControlElement extends ControlElement {
|
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{[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-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}& ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-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-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-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap: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-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-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap:var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap:var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{-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-spacing-sm:var(--odx-spacing-37);--odx-spacing-md:var(--odx-spacing-75);--odx-spacing-lg:var(--odx-spacing-100);--odx-content-width-xs:20ch;--odx-content-width-sm:25ch;--odx-content-width-md:50ch;--odx-content-width-lg:80ch;--odx-control-min-width:8ch;--odx-control-height-sm:var(--odx-size-200);--odx-control-height-md:var(--odx-size-225);--odx-control-height-lg:var(--odx-size-300);--odx-control-stroke-width:var(--odx-border-width-thin);--odx-control-addon-size-xs:var(--odx-size-100);--odx-control-addon-size-sm:var(--odx-size-125);--odx-control-addon-size-md:var(--odx-size-150);--odx-control-addon-size-lg:var(--odx-size-200);--odx-control-spacing-sm:var(--odx-spacing-25);--odx-control-spacing-md:var(--odx-spacing-37);--odx-control-spacing-lg:var(--odx-spacing-50);--odx-control-spacing-inline-sm:var(--odx-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{[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-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title,.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-line-height-display-sm);font-size:var(--odx-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-line-height-display-md);font-size:var(--odx-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-line-height-display-lg);font-size:var(--odx-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-line-height-display-xl);font-size:var(--odx-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text,.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}& ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-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-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-spacing-md))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap: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-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-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap:var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap:var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{-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-spacing-sm:var(--odx-spacing-37);--odx-spacing-md:var(--odx-spacing-75);--odx-spacing-lg:var(--odx-spacing-100);--odx-content-width-xs:20ch;--odx-content-width-sm:25ch;--odx-content-width-md:50ch;--odx-content-width-lg:80ch;--odx-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)}
|
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.202",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -14,30 +14,37 @@
|
|
|
14
14
|
"!dist/**/*.stories.d.ts"
|
|
15
15
|
],
|
|
16
16
|
"type": "module",
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "vite build",
|
|
19
|
+
"dev": "vite build --watch --mode=development",
|
|
20
|
+
"dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
|
|
21
|
+
"lint": "biome lint src",
|
|
22
|
+
"generate:manifest": "cem analyze"
|
|
23
|
+
},
|
|
17
24
|
"dependencies": {
|
|
18
25
|
"@lit/context": "1.1.6",
|
|
19
26
|
"@preact/signals-core": "1.12.1",
|
|
20
27
|
"lit": "3.3.1"
|
|
21
28
|
},
|
|
22
29
|
"peerDependencies": {
|
|
23
|
-
"@odx/design-tokens": "^1.1.0-rc.
|
|
30
|
+
"@odx/design-tokens": "^1.1.0-rc.8",
|
|
24
31
|
"@odx/icons": "^4.0.0-rc.42"
|
|
25
32
|
},
|
|
26
33
|
"devDependencies": {
|
|
27
34
|
"@floating-ui/dom": "1.7.4",
|
|
28
35
|
"@lit-labs/preact-signals": "1.0.3",
|
|
29
36
|
"@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
|
|
37
|
+
"@odx-internal/config-typescript": "workspace:*",
|
|
38
|
+
"@odx-internal/config-vite": "workspace:*",
|
|
39
|
+
"@odx-internal/utils-storybook": "workspace:*",
|
|
40
|
+
"@odx/design-tokens": "workspace:*",
|
|
30
41
|
"@odx/icons": "4.0.0-rc.42",
|
|
31
42
|
"@spectrum-web-components/reactive-controllers": "1.7.0",
|
|
32
43
|
"es-toolkit": "1.39.10",
|
|
33
44
|
"sass-embedded": "1.91.0",
|
|
34
45
|
"stylelint": "16.23.1",
|
|
35
46
|
"stylelint-config-concentric-order": "5.2.1",
|
|
36
|
-
"stylelint-config-standard": "39.0.0"
|
|
37
|
-
"@odx-internal/config-typescript": "0.0.0",
|
|
38
|
-
"@odx-internal/utils-storybook": "0.0.0",
|
|
39
|
-
"@odx-internal/config-vite": "0.0.0",
|
|
40
|
-
"@odx/design-tokens": "1.1.0-rc.7"
|
|
47
|
+
"stylelint-config-standard": "39.0.0"
|
|
41
48
|
},
|
|
42
49
|
"sideEffects": [
|
|
43
50
|
"dist/components-loader.js",
|
|
@@ -75,12 +82,5 @@
|
|
|
75
82
|
"publishConfig": {
|
|
76
83
|
"access": "public",
|
|
77
84
|
"tag": "latest"
|
|
78
|
-
},
|
|
79
|
-
"scripts": {
|
|
80
|
-
"build": "vite build",
|
|
81
|
-
"dev": "vite build --watch --mode=development",
|
|
82
|
-
"dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
|
|
83
|
-
"lint": "biome lint src",
|
|
84
|
-
"generate:manifest": "cem analyze"
|
|
85
85
|
}
|
|
86
|
-
}
|
|
86
|
+
}
|