@odx/foundation 1.0.0-beta.161 → 1.0.0-beta.163
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/anchor-navigation/anchor-navigation.d.ts +1 -1
- package/dist/components/breadcrumbs/breadcrumbs.d.ts +1 -1
- package/dist/components/breadcrumbs-item/breadcrumbs-item.d.ts +8 -4
- package/dist/components.js +115 -103
- package/dist/main.js +2 -2
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ declare const OdxAnchorNavigation_base: typeof CustomElement;
|
|
|
10
10
|
export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
|
|
11
11
|
#private;
|
|
12
12
|
readonly activeItem: import('@preact/signals-core').ReadonlySignal<OdxNavigationItem | undefined>;
|
|
13
|
-
root: Document |
|
|
13
|
+
root: Document | HTMLElement;
|
|
14
14
|
rootMargin?: string;
|
|
15
15
|
threshold: number;
|
|
16
16
|
vertical: boolean;
|
|
@@ -13,7 +13,7 @@ export declare class OdxBreadcrumbs extends CustomElement {
|
|
|
13
13
|
#private;
|
|
14
14
|
max: number;
|
|
15
15
|
items?: BreadcrumbsItem[];
|
|
16
|
-
|
|
16
|
+
connectedCallback(): void;
|
|
17
17
|
protected render(): TemplateResult;
|
|
18
18
|
protected updated(props: PropertyValues<this>): void;
|
|
19
19
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import { CustomElement } from '../../lib/main.js';
|
|
2
|
-
import {
|
|
1
|
+
import { CanBeDisabled, CustomElement, InteractiveLink } from '../../lib/main.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
5
5
|
'odx-breadcrumbs-item': OdxBreadcrumbsItem;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
|
|
8
|
+
declare const OdxBreadcrumbsItem_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
|
|
9
|
+
export declare class OdxBreadcrumbsItem extends OdxBreadcrumbsItem_base {
|
|
10
|
+
active: boolean;
|
|
11
|
+
href: InteractiveLink['href'];
|
|
12
|
+
target: InteractiveLink['target'];
|
|
9
13
|
protected render(): TemplateResult;
|
|
10
|
-
protected updated(props: PropertyValues<this>): void;
|
|
11
14
|
}
|
|
15
|
+
export {};
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, getUniqueId, CanBeExpanded, InteractiveElement, toAriaBooleanAttribute, Size, Variant, optionalAttr, getAssignedElement, getIdFromHref, getElementFromEvent, Shape,
|
|
2
|
+
import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, getUniqueId, CanBeExpanded, InteractiveElement, toAriaBooleanAttribute, Size, Variant, optionalAttr, getAssignedElement, getIdFromHref, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, parseDate, clickedOutside, supportsHover, toPx, forwardEvent, InteractiveLink, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
|
|
3
3
|
import { property, query, state } from 'lit/decorators.js';
|
|
4
4
|
import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
5
5
|
import { p as pick, e, d as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
|
|
@@ -115,7 +115,7 @@ __decorateClass([
|
|
|
115
115
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
116
116
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
117
117
|
|
|
118
|
-
const styles$1g = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-spacing-12) + var(--odx-size-px));--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-spacing-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-spacing-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-shadow)}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background:
|
|
118
|
+
const styles$1g = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-spacing-12) + var(--odx-size-px));--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-spacing-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-spacing-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-shadow)}: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-foreground-danger-rest);--_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)}}";
|
|
119
119
|
|
|
120
120
|
const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
121
121
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_SUBTLE", "GHOST"]);
|
|
@@ -329,7 +329,7 @@ class OdxActionGroup extends CustomElement {
|
|
|
329
329
|
}
|
|
330
330
|
}
|
|
331
331
|
|
|
332
|
-
const styles$1d = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-spacing-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: var(--odx-spacing-37);font-size:var(--odx-typography-font-size-5)}}@layer state{:host([active]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([active][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-50));font-size:var(--odx-typography-font-size-5)}}:host([compact]){--_block-size: var(--odx-size-300);--_font-size: var(--odx-typography-font-size-2);display:flex;flex-grow:1;justify-content:center;::slotted([slot=\"badge\"]){inset-inline-end:calc(50% - var(--odx-spacing-50))}[part~=base]{flex-direction:column;justify-content:center}[part~=label]{flex:0 0 auto}}:host([size=\"lg\"][compact]){--_block-size: var(--odx-size-450);--_font-size: var(--odx-typography-font-size-3)}}";
|
|
332
|
+
const styles$1d = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-spacing-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: var(--odx-spacing-37);font-size:var(--odx-typography-font-size-5)}}@layer state{:host([active]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover);font-weight:var(--odx-typography-font-weight-medium)}:host([active][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-50));font-size:var(--odx-typography-font-size-5)}}:host([compact]){--_block-size: var(--odx-size-300);--_font-size: var(--odx-typography-font-size-2);display:flex;flex-grow:1;justify-content:center;::slotted([slot=\"badge\"]){inset-inline-end:calc(50% - var(--odx-spacing-50))}[part~=base]{flex-direction:column;justify-content:center}[part~=label]{flex:0 0 auto}}:host([size=\"lg\"][compact]){--_block-size: var(--odx-size-450);--_font-size: var(--odx-typography-font-size-3)}}";
|
|
333
333
|
|
|
334
334
|
const NavigationItemSize = pick(Size, ["MD", "LG"]);
|
|
335
335
|
const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
@@ -354,7 +354,7 @@ __decorateClass([
|
|
|
354
354
|
], _OdxNavigationItem.prototype, "size", 2);
|
|
355
355
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
356
356
|
|
|
357
|
-
const styles$1c = ":host{display:flex;gap:var(--odx-spacing-37);min-inline-size:180px}odx-tab-bar{width:100%}odx-tab-bar::part(stage){padding-block:0
|
|
357
|
+
const styles$1c = ":host{display:flex;gap:var(--odx-spacing-37);min-inline-size:180px}odx-tab-bar{width:100%}odx-tab-bar::part(stage){padding-block:0}odx-tab-bar::part(indicator){display:none}:host(:not([vertical])){align-items:center;margin-block-end:var(--odx-spacing-25);box-shadow:0 calc(-1 * var(--odx-border-width-thick)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;padding-block-start:var(--odx-spacing-50);::slotted(odx-navigation-item){border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-bottom-left-radius:0;border-bottom-right-radius:0}::slotted(odx-navigation-item[active]){border-block-end-color:var(--odx-color-background-accent-rest)}::slotted(odx-navigation-item[active][disabled]){border-block-end-color:var(--odx-color-background-disabled-selected)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-37)}}:host([vertical]){flex-direction:column;box-shadow:var(--odx-border-width-thick) 0 0 0 var(--odx-color-stroke-neutral-subtle) inset;padding:var(--odx-spacing-50);padding-inline-start:0;::slotted(odx-navigation-item){border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-top-left-radius:0;border-bottom-left-radius:0}::slotted(odx-navigation-item[active]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(odx-navigation-item[active][disabled]){border-inline-start-color:var(--odx-color-background-disabled-selected)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-75)}}";
|
|
358
358
|
|
|
359
359
|
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
|
|
360
360
|
constructor() {
|
|
@@ -622,46 +622,34 @@ __decorateClass([
|
|
|
622
622
|
], _OdxBadge.prototype, "variant", 2);
|
|
623
623
|
let OdxBadge = _OdxBadge;
|
|
624
624
|
|
|
625
|
-
const styles$16 = ":host{display:inline
|
|
625
|
+
const styles$16 = ":host{display:inline-flex;align-items:center}.separator{--size: var(--odx-size-100);margin:var(--odx-spacing-25);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}odx-link::part(base){padding-inline:var(--odx-spacing-37)}:host([active]) odx-link{cursor:default;color:var(--odx-color-foreground-rest)}:host([active]:hover) odx-link{text-decoration:none}";
|
|
626
626
|
|
|
627
|
-
const
|
|
627
|
+
const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CanBeDisabled(CustomElement) {
|
|
628
628
|
constructor() {
|
|
629
629
|
super(...arguments);
|
|
630
|
-
this.
|
|
631
|
-
this.
|
|
630
|
+
this.active = false;
|
|
631
|
+
this.href = "";
|
|
632
|
+
this.target = "";
|
|
632
633
|
}
|
|
633
634
|
static {
|
|
634
|
-
customElement("odx-
|
|
635
|
+
customElement("odx-breadcrumbs-item", styles$16)(_OdxBreadcrumbsItem);
|
|
636
|
+
}
|
|
637
|
+
render() {
|
|
638
|
+
return html`<odx-link href="${this.href}" target="${this.target}" ?disabled="${this.disabled}" ?strong="${this.active}" subtle><slot></slot></odx-link>${when(this.nextElementSibling, () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}`;
|
|
635
639
|
}
|
|
636
640
|
};
|
|
637
641
|
__decorateClass([
|
|
638
642
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
639
|
-
],
|
|
643
|
+
], _OdxBreadcrumbsItem.prototype, "active", 2);
|
|
640
644
|
__decorateClass([
|
|
641
|
-
property(
|
|
642
|
-
],
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
class OdxBreadcrumbsItem extends CustomElement {
|
|
648
|
-
static {
|
|
649
|
-
customElement("odx-breadcrumbs-item", styles$15)(OdxBreadcrumbsItem);
|
|
650
|
-
}
|
|
651
|
-
render() {
|
|
652
|
-
return html`<slot @slotchange="${() => this.requestUpdate()}"></slot>${when(this.nextElementSibling, () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}`;
|
|
653
|
-
}
|
|
654
|
-
updated(props) {
|
|
655
|
-
super.updated(props);
|
|
656
|
-
const linkElement = getAssignedElement(this.renderRoot, { selector: OdxLink.tagName }) || null;
|
|
657
|
-
if (!linkElement) return;
|
|
658
|
-
linkElement.subtle = true;
|
|
659
|
-
linkElement.strong = !this.nextElementSibling;
|
|
660
|
-
linkElement.ariaCurrent = this.nextElementSibling ? null : "page";
|
|
661
|
-
}
|
|
662
|
-
}
|
|
645
|
+
property()
|
|
646
|
+
], _OdxBreadcrumbsItem.prototype, "href", 2);
|
|
647
|
+
__decorateClass([
|
|
648
|
+
property()
|
|
649
|
+
], _OdxBreadcrumbsItem.prototype, "target", 2);
|
|
650
|
+
let OdxBreadcrumbsItem = _OdxBreadcrumbsItem;
|
|
663
651
|
|
|
664
|
-
const styles$
|
|
652
|
+
const styles$15 = ":host{display:flex;flex-wrap:wrap;place-items:center;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-12);min-block-size:var(--odx-size-150)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--odx-spacing-37)}";
|
|
665
653
|
|
|
666
654
|
const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
667
655
|
constructor() {
|
|
@@ -669,38 +657,32 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
|
669
657
|
this.max = 4;
|
|
670
658
|
}
|
|
671
659
|
static {
|
|
672
|
-
customElement("odx-breadcrumbs", styles$
|
|
660
|
+
customElement("odx-breadcrumbs", styles$15)(_OdxBreadcrumbs);
|
|
673
661
|
}
|
|
674
|
-
|
|
675
|
-
super.
|
|
676
|
-
this.role
|
|
677
|
-
this.ariaLabel ||= "Breadcrumbs";
|
|
662
|
+
connectedCallback() {
|
|
663
|
+
super.connectedCallback();
|
|
664
|
+
this.role ||= "navigation";
|
|
678
665
|
}
|
|
679
666
|
render() {
|
|
680
667
|
if (Array.isArray(this.items)) {
|
|
681
|
-
|
|
682
|
-
return html`${items.map(({ label, href }) => html`<odx-breadcrumbs-item><odx-link href="${href}">${label}</odx-link></odx-breadcrumbs-item>`)}`;
|
|
668
|
+
return html`${this.items.map(({ label, href }) => html`<odx-breadcrumbs-item href="${href}">${label}</odx-breadcrumbs-item>`)}`;
|
|
683
669
|
}
|
|
684
|
-
return html`<slot @slotchange="${this.#
|
|
670
|
+
return html`<slot @slotchange="${this.#updateItems}"></slot>`;
|
|
685
671
|
}
|
|
686
672
|
updated(props) {
|
|
687
673
|
super.updated(props);
|
|
688
674
|
if (props.has("max")) {
|
|
689
|
-
this.#
|
|
675
|
+
this.#updateItems();
|
|
690
676
|
}
|
|
691
677
|
}
|
|
692
|
-
#
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
const
|
|
697
|
-
|
|
698
|
-
item.
|
|
699
|
-
|
|
700
|
-
const renderedItemElements = this.renderRoot.querySelectorAll(OdxBreadcrumbsItem.tagName) ?? [];
|
|
701
|
-
if (renderedItemElements.length === 0) return;
|
|
702
|
-
for (const item of Array.from(renderedItemElements)) {
|
|
703
|
-
item.requestUpdate();
|
|
678
|
+
#updateItems() {
|
|
679
|
+
const slottedItems = getAssignedElements(this.renderRoot, { selector: OdxBreadcrumbsItem.tagName });
|
|
680
|
+
const renderedItems = this.renderRoot.querySelectorAll(OdxBreadcrumbsItem.tagName) ?? [];
|
|
681
|
+
const items = [...slottedItems, ...Array.from(renderedItems)];
|
|
682
|
+
for (const [index, item] of items.entries()) {
|
|
683
|
+
item.hidden = index > 0 && index <= items.length - this.max;
|
|
684
|
+
item.active = !item.nextElementSibling;
|
|
685
|
+
item.ariaCurrent = item.active ? "page" : null;
|
|
704
686
|
}
|
|
705
687
|
}
|
|
706
688
|
};
|
|
@@ -712,7 +694,7 @@ __decorateClass([
|
|
|
712
694
|
], _OdxBreadcrumbs.prototype, "items", 2);
|
|
713
695
|
let OdxBreadcrumbs = _OdxBreadcrumbs;
|
|
714
696
|
|
|
715
|
-
const styles$
|
|
697
|
+
const styles$14 = ":host{display:inline-flex;gap:var(--odx-size-px);align-items:center}::slotted([odx-button]:not(:first-child,:last-child)){border-radius:0}::slotted([odx-button]:is(:hover,:focus-within)){z-index:1}:host([block]){display:flex;::slotted([odx-button]){width:100%}}:host(:not([vertical])){::slotted([odx-button]:first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(*){margin-inline:0}::slotted([odx-button]:last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([vertical]){flex-direction:column;::slotted(*){margin-block:0}::slotted([odx-button]:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted([odx-button]:last-child){border-start-start-radius:0;border-start-end-radius:0}}";
|
|
716
698
|
|
|
717
699
|
const _OdxButtonGroup = class _OdxButtonGroup extends CustomElement {
|
|
718
700
|
constructor() {
|
|
@@ -723,7 +705,7 @@ const _OdxButtonGroup = class _OdxButtonGroup extends CustomElement {
|
|
|
723
705
|
this.vertical = false;
|
|
724
706
|
}
|
|
725
707
|
static {
|
|
726
|
-
customElement("odx-button-group", styles$
|
|
708
|
+
customElement("odx-button-group", styles$14)(_OdxButtonGroup);
|
|
727
709
|
}
|
|
728
710
|
render() {
|
|
729
711
|
return html`<slot @slotchange="${() => this.requestUpdate()}"></slot>`;
|
|
@@ -752,7 +734,7 @@ __decorateClass([
|
|
|
752
734
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
753
735
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
754
736
|
|
|
755
|
-
const styles$
|
|
737
|
+
const styles$13 = ":host{--_card-padding: var(--odx-spacing-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-block-end:var(--odx-spacing-50)}.header{grid-area:header;max-inline-size:100%;overflow:hidden}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-spacing-50))}.image{position:relative;grid-area:image;margin:calc(-1 * (var(--_card-padding) + var(--odx-border-width-thin)))}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-spacing-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-spacing-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-spacing-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}";
|
|
756
738
|
|
|
757
739
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
758
740
|
constructor() {
|
|
@@ -760,7 +742,7 @@ const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
|
760
742
|
this.interactive = false;
|
|
761
743
|
}
|
|
762
744
|
static {
|
|
763
|
-
customElement("odx-card", styles$
|
|
745
|
+
customElement("odx-card", styles$13)(_OdxCard);
|
|
764
746
|
}
|
|
765
747
|
updated(_changedProperties) {
|
|
766
748
|
super.updated(_changedProperties);
|
|
@@ -780,7 +762,7 @@ __decorateClass([
|
|
|
780
762
|
], _OdxCard.prototype, "interactive", 2);
|
|
781
763
|
let OdxCard = _OdxCard;
|
|
782
764
|
|
|
783
|
-
const styles$
|
|
765
|
+
const styles$12 = ":host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}: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-outline);outline-offset:var(--odx-focus-ring-offset)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_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{outline:var(--odx-border-width-thin) solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset-sm);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-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)}";
|
|
784
766
|
|
|
785
767
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
786
768
|
constructor() {
|
|
@@ -788,7 +770,7 @@ const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
|
788
770
|
this.indeterminate = false;
|
|
789
771
|
}
|
|
790
772
|
static {
|
|
791
|
-
customElement("odx-checkbox", styles$
|
|
773
|
+
customElement("odx-checkbox", styles$12)(_OdxCheckbox);
|
|
792
774
|
}
|
|
793
775
|
render() {
|
|
794
776
|
return html`<div class="indicator"><odx-icon name="${this.indeterminate ? "core::minus" : "core::check"}"></odx-icon></div><div class="content"><div class="label"><slot></slot></div><div class="description"><slot name="description"></slot></div></div>`;
|
|
@@ -812,7 +794,7 @@ __decorateClass([
|
|
|
812
794
|
], _OdxCheckbox.prototype, "indeterminate", 2);
|
|
813
795
|
let OdxCheckbox = _OdxCheckbox;
|
|
814
796
|
|
|
815
|
-
const styles$
|
|
797
|
+
const styles$11 = ":host{display:flex;column-gap:var(--odx-spacing-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-75)}::slotted(odx-separator){--inner-spacing: var(--odx-spacing-37);--spacing: var(--odx-spacing-37)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):not(:last-of-type)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;padding:var(--odx-spacing-75);inline-size:auto}";
|
|
816
798
|
|
|
817
799
|
const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
818
800
|
const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
|
|
@@ -830,7 +812,7 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormContr
|
|
|
830
812
|
};
|
|
831
813
|
}
|
|
832
814
|
static {
|
|
833
|
-
customElement("odx-checkbox-group", styles$
|
|
815
|
+
customElement("odx-checkbox-group", styles$11)(_OdxCheckboxGroup);
|
|
834
816
|
}
|
|
835
817
|
render() {
|
|
836
818
|
return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
|
|
@@ -843,7 +825,7 @@ __decorateClass([
|
|
|
843
825
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
844
826
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
845
827
|
|
|
846
|
-
const styles
|
|
828
|
+
const styles$10 = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-spacing-50);display:inline-flex;gap:var(--odx-spacing-25);place-items:center;border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);color:var(--_color-foreground)}:host,[part~=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part~=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-25);--_icon-size: var(--odx-size-100);border-radius:inherit}:host(:focus-visible){outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([variant=\"primary\"],[variant=\"accent\"],[variant=\"success\"],[variant=\"warning\"],[variant=\"danger\"]):focus-visible){box-shadow:var(--odx-focus-ring-shadow)}:host([variant=\"neutral-subtle\"]){--_color-background: var(--odx-color-background-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-background-hover: var(--odx-color-background-success-hover);--_color-background-pressed: var(--odx-color-background-success-pressed);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-background-pressed: var(--odx-color-background-warning-pressed);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([interactive]:active){--_color-background: var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
|
|
847
829
|
|
|
848
830
|
const ChipVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
849
831
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -866,7 +848,7 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
|
866
848
|
};
|
|
867
849
|
}
|
|
868
850
|
static {
|
|
869
|
-
customElement("odx-chip", styles
|
|
851
|
+
customElement("odx-chip", styles$10)(_OdxChip);
|
|
870
852
|
}
|
|
871
853
|
render() {
|
|
872
854
|
return html`<odx-text class="odx-no-overflow" part="base" size="sm" strong><slot></slot></odx-text>${when(
|
|
@@ -913,7 +895,7 @@ __decorateClass([
|
|
|
913
895
|
], _OdxChip.prototype, "variant", 2);
|
|
914
896
|
let OdxChip = _OdxChip;
|
|
915
897
|
|
|
916
|
-
const styles
|
|
898
|
+
const styles$$ = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-spacing-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-padding: var(--odx-spacing-37);--_popover-outer-padding: var(--odx-spacing-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(.5 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-.5 * var(--_popover-offset));--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
|
|
917
899
|
|
|
918
900
|
const popoverTargetAttribute = "odx-popovertarget";
|
|
919
901
|
class PopoverObserver {
|
|
@@ -975,7 +957,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
|
|
|
975
957
|
}
|
|
976
958
|
}
|
|
977
959
|
static {
|
|
978
|
-
this.styles = unsafeCSS(styles
|
|
960
|
+
this.styles = unsafeCSS(styles$$);
|
|
979
961
|
}
|
|
980
962
|
#currentReferenceElement;
|
|
981
963
|
#openPopovers;
|
|
@@ -1083,7 +1065,7 @@ __decorateClass([
|
|
|
1083
1065
|
property({ attribute: false })
|
|
1084
1066
|
], PopoverHost.prototype, "fpsLimit", 2);
|
|
1085
1067
|
|
|
1086
|
-
const styles$
|
|
1068
|
+
const styles$_ = ":host{--_popover-offset: var(--odx-spacing-37)}";
|
|
1087
1069
|
|
|
1088
1070
|
const DropdownPlacement = { TOP: Placement.TOP, BOTTOM: Placement.BOTTOM };
|
|
1089
1071
|
const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
@@ -1108,7 +1090,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
|
1108
1090
|
};
|
|
1109
1091
|
}
|
|
1110
1092
|
static {
|
|
1111
|
-
customElement("odx-dropdown", styles$
|
|
1093
|
+
customElement("odx-dropdown", styles$_)(_OdxDropdown);
|
|
1112
1094
|
}
|
|
1113
1095
|
get popoverPlacementOptions() {
|
|
1114
1096
|
return PopoverPlacementOptions({
|
|
@@ -1162,7 +1144,7 @@ __decorateClass([
|
|
|
1162
1144
|
], _OdxDropdown.prototype, "placement", 2);
|
|
1163
1145
|
let OdxDropdown = _OdxDropdown;
|
|
1164
1146
|
|
|
1165
|
-
const styles$
|
|
1147
|
+
const styles$Z = "::highlight(odx-highlight){background-color:var(--odx-color-foreground-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]) ::highlight(odx-highlight){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-rest)}:host([variant=\"accent-subtle\"]) ::highlight(odx-highlight){background-color:transparent;color:var(--odx-color-foreground-accent-rest)}:host([variant=\"danger\"]) ::highlight(odx-highlight){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"danger-subtle\"]) ::highlight(odx-highlight){background-color:transparent;color:var(--odx-color-foreground-danger-rest)}";
|
|
1166
1148
|
|
|
1167
1149
|
const highlightAttribute = "odx-highlight";
|
|
1168
1150
|
const HighlightVariant = pick(Variant, ["NEUTRAL", "ACCENT", "ACCENT_SUBTLE", "DANGER", "DANGER_SUBTLE"]);
|
|
@@ -1174,7 +1156,7 @@ const _OdxHighlight = class _OdxHighlight extends CanBeDisabled(CustomElement) {
|
|
|
1174
1156
|
this.variant = HighlightVariant.NEUTRAL;
|
|
1175
1157
|
}
|
|
1176
1158
|
static {
|
|
1177
|
-
customElement("odx-highlight", styles$
|
|
1159
|
+
customElement("odx-highlight", styles$Z)(_OdxHighlight);
|
|
1178
1160
|
}
|
|
1179
1161
|
static {
|
|
1180
1162
|
this.registry = /* @__PURE__ */ new Map();
|
|
@@ -1253,7 +1235,7 @@ __decorateClass([
|
|
|
1253
1235
|
], _OdxHighlight.prototype, "variant", 2);
|
|
1254
1236
|
let OdxHighlight = _OdxHighlight;
|
|
1255
1237
|
|
|
1256
|
-
const styles$
|
|
1238
|
+
const styles$Y = ":host{display:block}odx-dropdown{--max-block-size: 320px}::slotted([hidden]){display:none}::slotted([slot=\"control\"]){inline-size:100%}::slotted(odx-option:not(:is(:first-child,:last-child))){border-radius:0}::slotted(odx-option:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-option:last-child){border-start-start-radius:0;border-start-end-radius:0}";
|
|
1257
1239
|
|
|
1258
1240
|
const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
1259
1241
|
constructor() {
|
|
@@ -1319,7 +1301,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
|
1319
1301
|
};
|
|
1320
1302
|
}
|
|
1321
1303
|
static {
|
|
1322
|
-
customElement("odx-autocomplete", styles$
|
|
1304
|
+
customElement("odx-autocomplete", styles$Y)(_OdxAutocomplete);
|
|
1323
1305
|
}
|
|
1324
1306
|
static {
|
|
1325
1307
|
/** @internal */
|
|
@@ -1394,18 +1376,18 @@ __decorateClass([
|
|
|
1394
1376
|
], _OdxAutocomplete.prototype, "minQueryLength", 2);
|
|
1395
1377
|
let OdxAutocomplete = _OdxAutocomplete;
|
|
1396
1378
|
|
|
1397
|
-
const styles$
|
|
1379
|
+
const styles$X = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-150)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-spacing-75))}";
|
|
1398
1380
|
|
|
1399
1381
|
class OdxContentBox extends CustomElement {
|
|
1400
1382
|
static {
|
|
1401
|
-
customElement("odx-content-box", styles$
|
|
1383
|
+
customElement("odx-content-box", styles$X)(OdxContentBox);
|
|
1402
1384
|
}
|
|
1403
1385
|
render() {
|
|
1404
1386
|
return html`<slot name="header"></slot><slot></slot><slot name="footer"></slot>`;
|
|
1405
1387
|
}
|
|
1406
1388
|
}
|
|
1407
1389
|
|
|
1408
|
-
const styles$
|
|
1390
|
+
const styles$W = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-spacing-75)}:host([size=\"sm\"]){--max-inline-size: 30ch;--icon-size: var(--odx-size-150);--_content-gap: var(--odx-spacing-12);gap:var(--odx-spacing-50);padding:var(--odx-spacing-50);.description{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}}:host([size=\"md\"]){.description{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--max-inline-size: 50ch;--icon-size: var(--odx-size-300);--_content-gap: var(--odx-spacing-37);gap:var(--odx-spacing-100);padding:var(--odx-spacing-150);.title{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}}:host([variant=\"neutral-subtle\"]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=\"danger\"]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
|
|
1409
1391
|
|
|
1410
1392
|
const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
|
|
1411
1393
|
const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
|
|
@@ -1416,7 +1398,7 @@ const _OdxEmptyState = class _OdxEmptyState extends CustomElement {
|
|
|
1416
1398
|
this.variant = EmptyStateVariant.NEUTRAL;
|
|
1417
1399
|
}
|
|
1418
1400
|
static {
|
|
1419
|
-
customElement("odx-empty-state", styles$
|
|
1401
|
+
customElement("odx-empty-state", styles$W)(_OdxEmptyState);
|
|
1420
1402
|
}
|
|
1421
1403
|
render() {
|
|
1422
1404
|
return html`<div class="content odx-stack odx-align-center">${when(this.icon, (icon) => html`<odx-icon class="icon" name="${icon}"></odx-icon>`)}<odx-title class="title"><slot></slot></odx-title>${optionalSlot(this, "description")}</div>${optionalSlot(this, "actions", "odx-cluster odx-justify-center")}`;
|
|
@@ -1433,7 +1415,7 @@ __decorateClass([
|
|
|
1433
1415
|
], _OdxEmptyState.prototype, "variant", 2);
|
|
1434
1416
|
let OdxEmptyState = _OdxEmptyState;
|
|
1435
1417
|
|
|
1436
|
-
const styles$
|
|
1418
|
+
const styles$V = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-spacing-25);padding-block:var(--odx-spacing-25)}::slotted([slot=\"control\"]){inline-size:100%;min-inline-size:inherit}";
|
|
1437
1419
|
|
|
1438
1420
|
const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
1439
1421
|
constructor() {
|
|
@@ -1447,7 +1429,7 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
|
1447
1429
|
};
|
|
1448
1430
|
}
|
|
1449
1431
|
static {
|
|
1450
|
-
customElement("odx-form-field", styles$
|
|
1432
|
+
customElement("odx-form-field", styles$V)(_OdxFormField);
|
|
1451
1433
|
}
|
|
1452
1434
|
getControl() {
|
|
1453
1435
|
return getAssignedElement(this.renderRoot, { slot: "control" }) || null;
|
|
@@ -1639,7 +1621,7 @@ __decorateClass([
|
|
|
1639
1621
|
], _OdxRelativeTime.prototype, "syncInterval", 2);
|
|
1640
1622
|
let OdxRelativeTime = _OdxRelativeTime;
|
|
1641
1623
|
|
|
1642
|
-
const styles$
|
|
1624
|
+
const styles$U = ":host{--odx-gradient-overlay-size: 240px;display:contents}:host([active]){display:block;position:relative;overflow:hidden;.content{max-height:100%;mask-image:linear-gradient(to bottom,black calc(100% - var(--odx-gradient-overlay-size)),transparent)}.actions{display:flex;position:absolute;inset-block-end:0;inset-inline:0;align-items:flex-end;justify-content:center;padding:var(--odx-spacing-75);block-size:min(max(calc(var(--odx-gradient-overlay-size) / 2),var(--odx-size-300)),100%)}}";
|
|
1643
1625
|
|
|
1644
1626
|
const GradientOverlaySize = pick(Size, ["SM", "MD"]);
|
|
1645
1627
|
const _OdxGradientOverlay = class _OdxGradientOverlay extends CustomElement {
|
|
@@ -1649,7 +1631,7 @@ const _OdxGradientOverlay = class _OdxGradientOverlay extends CustomElement {
|
|
|
1649
1631
|
this.size = GradientOverlaySize.MD;
|
|
1650
1632
|
}
|
|
1651
1633
|
static {
|
|
1652
|
-
customElement("odx-gradient-overlay", styles$
|
|
1634
|
+
customElement("odx-gradient-overlay", styles$U)(_OdxGradientOverlay);
|
|
1653
1635
|
}
|
|
1654
1636
|
render() {
|
|
1655
1637
|
if (this.active) {
|
|
@@ -1666,11 +1648,11 @@ __decorateClass([
|
|
|
1666
1648
|
], _OdxGradientOverlay.prototype, "size", 2);
|
|
1667
1649
|
let OdxGradientOverlay = _OdxGradientOverlay;
|
|
1668
1650
|
|
|
1669
|
-
const styles$
|
|
1651
|
+
const styles$T = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-spacing-75);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-spacing-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){margin-right:auto}::slotted(odx-separator){--size: var(--odx-size-150);--inner-spacing: 0px}::slotted(odx-search-bar){flex:1 1 auto}@media screen and (width <= 600px){odx-logo{display:none}}";
|
|
1670
1652
|
|
|
1671
1653
|
class OdxHeader extends CustomElement {
|
|
1672
1654
|
static {
|
|
1673
|
-
customElement("odx-header", styles$
|
|
1655
|
+
customElement("odx-header", styles$T)(OdxHeader);
|
|
1674
1656
|
}
|
|
1675
1657
|
connectedCallback() {
|
|
1676
1658
|
super.connectedCallback();
|
|
@@ -1689,11 +1671,11 @@ class OdxHeader extends CustomElement {
|
|
|
1689
1671
|
};
|
|
1690
1672
|
}
|
|
1691
1673
|
|
|
1692
|
-
const styles$
|
|
1674
|
+
const styles$S = ":host{display:flex;gap:var(--odx-spacing-75);align-items:center;block-size:100%}::slotted(odx-separator){--size: var(--odx-size-150);--spacing: 0px}";
|
|
1693
1675
|
|
|
1694
1676
|
class OdxHeaderActions extends CustomElement {
|
|
1695
1677
|
static {
|
|
1696
|
-
customElement("odx-header-actions", styles$
|
|
1678
|
+
customElement("odx-header-actions", styles$S)(OdxHeaderActions);
|
|
1697
1679
|
}
|
|
1698
1680
|
connectedCallback() {
|
|
1699
1681
|
super.connectedCallback();
|
|
@@ -1701,7 +1683,7 @@ class OdxHeaderActions extends CustomElement {
|
|
|
1701
1683
|
}
|
|
1702
1684
|
}
|
|
1703
1685
|
|
|
1704
|
-
const styles$
|
|
1686
|
+
const styles$R = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-spacing-37);padding-inline:var(--odx-spacing-75)}}:host(:not([interactive])){pointer-events:none;user-select:none}:host,:host([size=\"md\"]){--max-inline-size: 240px}:host([size=\"sm\"]){--max-inline-size: 180px;odx-popover::part(content){padding-inline:var(--odx-spacing-50)}}:host([size=\"lg\"]){--max-inline-size: 384px}:host([variant=\"danger\"]){--_popover-color-background: var(--odx-color-background-danger-hover)}";
|
|
1705
1687
|
|
|
1706
1688
|
const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
|
|
1707
1689
|
const TooltipSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -1749,7 +1731,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
1749
1731
|
this.currentInstance = null;
|
|
1750
1732
|
}
|
|
1751
1733
|
static {
|
|
1752
|
-
customElement("odx-tooltip", styles$
|
|
1734
|
+
customElement("odx-tooltip", styles$R)(_OdxTooltip);
|
|
1753
1735
|
}
|
|
1754
1736
|
static #delayTimer;
|
|
1755
1737
|
#timeout;
|
|
@@ -1867,7 +1849,7 @@ __decorateClass([
|
|
|
1867
1849
|
], _OdxTooltip.prototype, "placement", 2);
|
|
1868
1850
|
let OdxTooltip = _OdxTooltip;
|
|
1869
1851
|
|
|
1870
|
-
const styles$
|
|
1852
|
+
const styles$Q = ":host{--icon-rotation: 0deg}[part~=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-spacing-100);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3)}odx-tooltip{text-align:center}";
|
|
1871
1853
|
|
|
1872
1854
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
1873
1855
|
constructor() {
|
|
@@ -1875,7 +1857,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1875
1857
|
this.float = false;
|
|
1876
1858
|
}
|
|
1877
1859
|
static {
|
|
1878
|
-
customElement("odx-icon-button", styles$
|
|
1860
|
+
customElement("odx-icon-button", styles$Q)(_OdxIconButton);
|
|
1879
1861
|
}
|
|
1880
1862
|
render() {
|
|
1881
1863
|
return html`${super.render()} ${when(this.label, (label) => this.renderLabel(label))}`;
|
|
@@ -1928,7 +1910,7 @@ __decorateClass([
|
|
|
1928
1910
|
], _OdxIconButton.prototype, "labelVariant", 2);
|
|
1929
1911
|
let OdxIconButton = _OdxIconButton;
|
|
1930
1912
|
|
|
1931
|
-
const styles$
|
|
1913
|
+
const styles$P = ":host{display:flex;position:relative;align-items:center;justify-content:center;overflow:hidden;object-fit:cover}img{object-fit:cover;width:100%}.loading-error{color:var(--odx-color-foreground-disabled-rest)}";
|
|
1932
1914
|
|
|
1933
1915
|
class ResourceLoader {
|
|
1934
1916
|
async load(resource) {
|
|
@@ -1956,7 +1938,7 @@ const _OdxImage = class _OdxImage extends CustomElement {
|
|
|
1956
1938
|
this.loading = false;
|
|
1957
1939
|
}
|
|
1958
1940
|
static {
|
|
1959
|
-
customElement("odx-image", styles$
|
|
1941
|
+
customElement("odx-image", styles$P)(_OdxImage);
|
|
1960
1942
|
}
|
|
1961
1943
|
static {
|
|
1962
1944
|
this.loader = new ImageLoader();
|
|
@@ -2022,7 +2004,7 @@ __decorateClass([
|
|
|
2022
2004
|
], _OdxImage.prototype, "width", 2);
|
|
2023
2005
|
let OdxImage = _OdxImage;
|
|
2024
2006
|
|
|
2025
|
-
const styles$
|
|
2007
|
+
const styles$O = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
|
|
2026
2008
|
|
|
2027
2009
|
const iconMap = {
|
|
2028
2010
|
neutral: "core::info",
|
|
@@ -2040,7 +2022,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
|
|
|
2040
2022
|
this.variant = InlineMessageVariant.NEUTRAL;
|
|
2041
2023
|
}
|
|
2042
2024
|
static {
|
|
2043
|
-
customElement("odx-inline-message", styles$
|
|
2025
|
+
customElement("odx-inline-message", styles$O)(_OdxInlineMessage);
|
|
2044
2026
|
}
|
|
2045
2027
|
show() {
|
|
2046
2028
|
this.ariaHidden = toAriaBooleanAttribute(false);
|
|
@@ -2070,7 +2052,7 @@ __decorateClass([
|
|
|
2070
2052
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
2071
2053
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
2072
2054
|
|
|
2073
|
-
const styles$
|
|
2055
|
+
const styles$N = ":host{--_color-stroke: var(--odx-color-stroke-control-subtle);display:inline-flex;position:relative;align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md)}.prefix,.suffix{--odx-color-background-disabled-rest: transparent;display:flex}.stroke{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}[class*=control-]{margin-inline:var(--odx-spacing-12)}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;padding-inline:var(--odx-spacing-50);block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(*){z-index:1;margin-inline:var(--odx-spacing-50)}::slotted(odx-icon){--size: var(--odx-size-125)}::slotted([odx-button]:is([slot=\"prefix\"],[slot=\"suffix\"]):last-child){margin-inline-end:var(--odx-spacing-12)}::slotted([odx-button]:is([slot=\"prefix\"],[slot=\"suffix\"]):first-child){margin-inline-start:var(--odx-spacing-12)}:host(:hover){--_color-stroke: var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);.stroke{display:none}}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}[part~=input]{padding-inline-end:0}}:host([type=\"time\"]){min-inline-size:17.5ch}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}:host([clearable]) [part~=input]:not(:placeholder-shown){padding-inline-end:0}";
|
|
2074
2056
|
|
|
2075
2057
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
2076
2058
|
constructor() {
|
|
@@ -2099,7 +2081,7 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
2099
2081
|
};
|
|
2100
2082
|
}
|
|
2101
2083
|
static {
|
|
2102
|
-
customElement("odx-input", styles$
|
|
2084
|
+
customElement("odx-input", styles$N)(_OdxInput);
|
|
2103
2085
|
}
|
|
2104
2086
|
static {
|
|
2105
2087
|
/** @internal */
|
|
@@ -2141,6 +2123,16 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
2141
2123
|
!this.readonly && isNumberInput,
|
|
2142
2124
|
() => html`<odx-button-group class="control-spinner" size="sm" variant="ghost">${this.renderControl("decrement", "core::minus", () => this.stepDown(), this.disabled || !canStepDown)} ${this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp)}</odx-button-group>`,
|
|
2143
2125
|
() => when(this.#isClearable(), () => this.renderControl("clear", "core::cancel", this.#handleClear, this.disabled))
|
|
2126
|
+
)} ${when(
|
|
2127
|
+
this.type === "time",
|
|
2128
|
+
() => this.renderControl(
|
|
2129
|
+
"time",
|
|
2130
|
+
"core::time",
|
|
2131
|
+
() => {
|
|
2132
|
+
this.nativeInput?.showPicker();
|
|
2133
|
+
},
|
|
2134
|
+
this.disabled
|
|
2135
|
+
)
|
|
2144
2136
|
)}<slot name="suffix"></slot></div>`;
|
|
2145
2137
|
}
|
|
2146
2138
|
renderControl(type, icon, listener, disabled) {
|
|
@@ -2186,7 +2178,7 @@ __decorateClass([
|
|
|
2186
2178
|
], _OdxInput.prototype, "value", 2);
|
|
2187
2179
|
let OdxInput = _OdxInput;
|
|
2188
2180
|
|
|
2189
|
-
const styles$
|
|
2181
|
+
const styles$M = ":host{padding:var(--odx-spacing-50)}";
|
|
2190
2182
|
|
|
2191
2183
|
const KpiSize = pick(Size, ["SM", "MD", "LG"]);
|
|
2192
2184
|
const KpiVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
|
|
@@ -2200,7 +2192,7 @@ const _OdxKpi = class _OdxKpi extends CustomElement {
|
|
|
2200
2192
|
this.vertical = false;
|
|
2201
2193
|
}
|
|
2202
2194
|
static {
|
|
2203
|
-
customElement("odx-kpi", styles$
|
|
2195
|
+
customElement("odx-kpi", styles$M)(_OdxKpi);
|
|
2204
2196
|
}
|
|
2205
2197
|
render() {
|
|
2206
2198
|
return html`<div class="base odx-cluster odx-gap-${this.size} odx-align-center"><odx-avatar size="${this.size}"><slot></slot></odx-avatar><div class="odx-stack odx-gap-0"><odx-text size="${this.size}">${this.label}</odx-text><odx-title size="${this.size}"><odx-text variant="${optionalAttr(this.variant)}" inline>${this.value} ${when(this.unit, (unit) => html`<odx-text inline size="${this.size}">${unit}</odx-text>`)}</odx-text></odx-title></div></div>`;
|
|
@@ -2226,22 +2218,22 @@ __decorateClass([
|
|
|
2226
2218
|
], _OdxKpi.prototype, "vertical", 2);
|
|
2227
2219
|
let OdxKpi = _OdxKpi;
|
|
2228
2220
|
|
|
2229
|
-
const styles$
|
|
2221
|
+
const styles$L = ":host{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-inline:var(--odx-spacing-50);user-select:none}.content{flex:1 1 auto}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
|
|
2230
2222
|
|
|
2231
2223
|
class OdxLabel extends CustomElement {
|
|
2232
2224
|
static {
|
|
2233
|
-
customElement("odx-label", styles$
|
|
2225
|
+
customElement("odx-label", styles$L)(OdxLabel);
|
|
2234
2226
|
}
|
|
2235
2227
|
render() {
|
|
2236
2228
|
return html`<slot name="prefix"></slot><div class="content"><slot></slot></div><slot name="suffix"></slot>`;
|
|
2237
2229
|
}
|
|
2238
2230
|
}
|
|
2239
2231
|
|
|
2240
|
-
const styles$
|
|
2232
|
+
const styles$K = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
|
|
2241
2233
|
|
|
2242
2234
|
const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
|
|
2243
2235
|
static {
|
|
2244
|
-
customElement("odx-line-clamp", styles$
|
|
2236
|
+
customElement("odx-line-clamp", styles$K)(_OdxLineClamp);
|
|
2245
2237
|
}
|
|
2246
2238
|
updated(props) {
|
|
2247
2239
|
super.updated(props);
|
|
@@ -2262,6 +2254,26 @@ __decorateClass([
|
|
|
2262
2254
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2263
2255
|
let OdxLineClamp = _OdxLineClamp;
|
|
2264
2256
|
|
|
2257
|
+
const styles$J = ":host{display:inline-block;transition:var(--odx-transition-reduced);transition-property:color;cursor:pointer;line-height:inherit;color:var(--odx-color-foreground-accent-rest)}[part~=base]{display:flex;gap:var(--odx-size-25);align-items:center;outline:none;border-radius:var(--odx-border-radius-controls);cursor:inherit;padding-inline:var(--odx-size-px);text-decoration:inherit;line-height:inherit;color:inherit;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset-sm)}}:host(:not([disabled],[subtle])){text-decoration:underline}:host(:hover){color:var(--odx-color-foreground-accent-hover)}:host(:not([disabled]):hover){text-decoration:underline}:host([disabled]){cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);user-select:none;[part~=base]{pointer-events:none}}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-icon){vertical-align:middle}";
|
|
2258
|
+
|
|
2259
|
+
const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
2260
|
+
constructor() {
|
|
2261
|
+
super(...arguments);
|
|
2262
|
+
this.strong = false;
|
|
2263
|
+
this.subtle = false;
|
|
2264
|
+
}
|
|
2265
|
+
static {
|
|
2266
|
+
customElement("odx-link", styles$J)(_OdxLink);
|
|
2267
|
+
}
|
|
2268
|
+
};
|
|
2269
|
+
__decorateClass([
|
|
2270
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
2271
|
+
], _OdxLink.prototype, "strong", 2);
|
|
2272
|
+
__decorateClass([
|
|
2273
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
2274
|
+
], _OdxLink.prototype, "subtle", 2);
|
|
2275
|
+
let OdxLink = _OdxLink;
|
|
2276
|
+
|
|
2265
2277
|
const styles$I = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-default)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@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-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-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]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
|
|
2266
2278
|
|
|
2267
2279
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
@@ -3152,7 +3164,7 @@ __decorateClass([
|
|
|
3152
3164
|
], _OdxRadioGroup.prototype, "layout", 2);
|
|
3153
3165
|
let OdxRadioGroup = _OdxRadioGroup;
|
|
3154
3166
|
|
|
3155
|
-
const styles$q = ":host{--min-inline-size: 18ch;--max-inline-size: 26ch;display:flex;flex-direction:column;gap:var(--odx-spacing-75);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size;block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}.toggle-control{margin-block-start:auto}.toggle-indicator{transition:var(--odx-transition-default)}::slotted(odx-separator){--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-spacing-37)}:host([collapsed]){--min-inline-size: var(--odx-size-300);--max-inline-size: var(--min-inline-size);.toggle-indicator{--rotate: 180deg}}:host([size=\"md\"]){gap:var(--odx-spacing-37);::slotted(odx-spacer){--size: var(--odx-size-225);--gap-offset: calc(var(--odx-spacing-37) / 2)}}:host([collapsed][size=\"md\"]){--min-inline-size: var(--odx-size-225)}";
|
|
3167
|
+
const styles$q = ":host{--min-inline-size: 18ch;--max-inline-size: 26ch;display:flex;flex-direction:column;gap:var(--odx-spacing-75);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size;block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}.toggle-control{margin-block-start:auto}.toggle-indicator{transition:var(--odx-transition-default);transition-property:transform}::slotted(odx-separator){--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-spacing-37)}:host([collapsed]){--min-inline-size: var(--odx-size-300);--max-inline-size: var(--min-inline-size);.toggle-indicator{--rotate: 180deg}}:host([size=\"md\"]){gap:var(--odx-spacing-37);::slotted(odx-spacer){--size: var(--odx-size-225);--gap-offset: calc(var(--odx-spacing-37) / 2)}}:host([collapsed][size=\"md\"]){--min-inline-size: var(--odx-size-225)}";
|
|
3156
3168
|
|
|
3157
3169
|
setTranslation("en", {
|
|
3158
3170
|
odx: { railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } } }
|
|
@@ -3175,7 +3187,7 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
|
|
|
3175
3187
|
}
|
|
3176
3188
|
connectedCallback() {
|
|
3177
3189
|
super.connectedCallback();
|
|
3178
|
-
this.role
|
|
3190
|
+
this.role ||= "navigation";
|
|
3179
3191
|
}
|
|
3180
3192
|
render() {
|
|
3181
3193
|
return html`<slot @slotchange="${() => this.requestUpdate()}"></slot><odx-navigation-item class="toggle-control" size="${this.size}" @click="${this.#handleControlClick}"><odx-icon class="toggle-indicator" name="core::chevron-left" slot="prefix"></odx-icon><div class="odx-visually-hidden-force">${this.t(`odx.railNavigation.controlText.${this.collapsed ? "collapsed" : "expanded"}`)}</div></odx-navigation-item>`;
|
|
@@ -3204,7 +3216,7 @@ __decorateClass([
|
|
|
3204
3216
|
], _OdxRailNavigation.prototype, "size", 2);
|
|
3205
3217
|
let OdxRailNavigation = _OdxRailNavigation;
|
|
3206
3218
|
|
|
3207
|
-
const styles$p = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;
|
|
3219
|
+
const styles$p = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;inline-size:max-content}.action{position:absolute;transition:var(--odx-transition-default);transition-property:opacity,visibility;visibility:hidden;opacity:0;z-index:1;&.left{inset-inline-start:0}&.right{inset-inline-end:0}&.visible{visibility:visible;opacity:1}}:not([name])::slotted(*){scroll-snap-align:center;flex:0 0 auto}";
|
|
3208
3220
|
|
|
3209
3221
|
const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
3210
3222
|
constructor() {
|
package/dist/main.js
CHANGED
|
@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
|
|
|
6
6
|
|
|
7
7
|
const name = "@odx/foundation";
|
|
8
8
|
const displayName = "ODX Design System Foundation";
|
|
9
|
-
const version = "1.0.0-beta.
|
|
9
|
+
const version = "1.0.0-beta.163";
|
|
10
10
|
const pkg = {
|
|
11
11
|
name,
|
|
12
12
|
displayName,
|
|
@@ -92,7 +92,7 @@ function getKeyInfo(event) {
|
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-
|
|
95
|
+
const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}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 base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
96
96
|
|
|
97
97
|
function customElement(tagName, ...styles) {
|
|
98
98
|
return (target) => {
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-
|
|
1
|
+
@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}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}}: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-focus-ring-outline: var(--odx-border-width-thick) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-offset: calc(-1 * var(--odx-border-width-thick));--odx-focus-ring-offset-sm: calc(-1 * var(--odx-border-width-thin));--odx-focus-ring-shadow: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent;color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
|
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.163",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|