@odx/foundation 1.0.0-beta.118 → 1.0.0-beta.119
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.
|
@@ -5,7 +5,6 @@ export * from './action-button/action-button.js';
|
|
|
5
5
|
export * from './anchor-navigation/index.js';
|
|
6
6
|
export * from './area-header/area-header.js';
|
|
7
7
|
export * from './avatar/avatar.js';
|
|
8
|
-
export * from './avatar-group/avatar-group.js';
|
|
9
8
|
export * from './badge/badge.js';
|
|
10
9
|
export * from './breadcrumbs/index.js';
|
|
11
10
|
export * from './button/button.js';
|
|
@@ -17,6 +17,8 @@ export declare const StatusVariant: Pick<{
|
|
|
17
17
|
}, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
|
|
18
18
|
export declare class OdxStatus extends CustomElement {
|
|
19
19
|
pulse: boolean;
|
|
20
|
+
strong: boolean;
|
|
21
|
+
subtle: boolean;
|
|
20
22
|
variant: StatusVariant;
|
|
21
23
|
protected render(): TemplateResult;
|
|
22
24
|
}
|
package/dist/components.js
CHANGED
|
@@ -8,7 +8,7 @@ import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
|
|
|
8
8
|
import { signal, computed } from '@preact/signals-core';
|
|
9
9
|
import 'lit/html.js';
|
|
10
10
|
|
|
11
|
-
const styles$
|
|
11
|
+
const styles$1e = ":host{display:block}:host(:not([compact])) ::slotted(odx-accordion-item){margin-block:var(--odx-spacing-37)}";
|
|
12
12
|
|
|
13
13
|
const AccordionIndicatorPosition = { START: "start", END: "end" };
|
|
14
14
|
const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
@@ -20,7 +20,7 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
20
20
|
new ExpandableItemManager(this, { getItems: () => this.items });
|
|
21
21
|
}
|
|
22
22
|
static {
|
|
23
|
-
customElement("odx-accordion", styles$
|
|
23
|
+
customElement("odx-accordion", styles$1e)(_OdxAccordion);
|
|
24
24
|
}
|
|
25
25
|
updated(props) {
|
|
26
26
|
super.updated(props);
|
|
@@ -53,7 +53,7 @@ __decorateClass([
|
|
|
53
53
|
], _OdxAccordion.prototype, "size", 2);
|
|
54
54
|
let OdxAccordion = _OdxAccordion;
|
|
55
55
|
|
|
56
|
-
const styles$
|
|
56
|
+
const styles$1d = ":host{display:block;block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-size-37)}:host([expanded]) [part~=indicator]{--rotate: 180deg}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}:host([disabled]){--_color-background: transparent;--_color-background-hover: transparent}:host([disabled]) ::slotted(*){pointer-events:none}";
|
|
57
57
|
|
|
58
58
|
const AccordionItemSize = pick(Size, ["MD", "LG"]);
|
|
59
59
|
const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
|
|
@@ -62,7 +62,7 @@ const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(Interact
|
|
|
62
62
|
this.size = AccordionItemSize.MD;
|
|
63
63
|
}
|
|
64
64
|
static {
|
|
65
|
-
customElement("odx-accordion-item", styles$
|
|
65
|
+
customElement("odx-accordion-item", styles$1d)(_OdxAccordionItem);
|
|
66
66
|
}
|
|
67
67
|
get panel() {
|
|
68
68
|
if (this.nextElementSibling?.role === "region") {
|
|
@@ -98,7 +98,7 @@ __decorateClass([
|
|
|
98
98
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
99
99
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
100
100
|
|
|
101
|
-
const styles$
|
|
101
|
+
const styles$1c = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
|
|
102
102
|
|
|
103
103
|
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
104
104
|
constructor() {
|
|
@@ -106,7 +106,7 @@ const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
|
106
106
|
this.hidden = true;
|
|
107
107
|
}
|
|
108
108
|
static {
|
|
109
|
-
customElement("odx-accordion-panel", styles$
|
|
109
|
+
customElement("odx-accordion-panel", styles$1c)(_OdxAccordionPanel);
|
|
110
110
|
}
|
|
111
111
|
connectedCallback() {
|
|
112
112
|
super.connectedCallback();
|
|
@@ -126,7 +126,7 @@ __decorateClass([
|
|
|
126
126
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
127
127
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
128
128
|
|
|
129
|
-
const styles$
|
|
129
|
+
const styles$1b = "@layer base{:host{--_padding-inline: var(--odx-size-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~=base]{outline-offset:var(--odx-focus-ring-offset)}[part~=label]{flex:initial;text-align:center}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px));font-size:var(--odx-typography-font-size-1)}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-12) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-typography-font-size-5);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-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-size-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}: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])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-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);[part~=base]{outline-offset:0}}: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)}:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
130
130
|
|
|
131
131
|
const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
132
132
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "GHOST"]);
|
|
@@ -153,7 +153,7 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
|
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
static {
|
|
156
|
-
customElement("odx-button", styles$
|
|
156
|
+
customElement("odx-button", styles$1b)(_OdxButton);
|
|
157
157
|
}
|
|
158
158
|
static {
|
|
159
159
|
/** @internal */
|
|
@@ -177,7 +177,7 @@ __decorateClass([
|
|
|
177
177
|
], _OdxButton.prototype, "variant", 2);
|
|
178
178
|
let OdxButton = _OdxButton;
|
|
179
179
|
|
|
180
|
-
const styles$
|
|
180
|
+
const styles$1a = "@layer variant{:host([done]){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed);cursor:default;[part~=base]{pointer-events:none}}}";
|
|
181
181
|
|
|
182
182
|
const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
183
183
|
constructor() {
|
|
@@ -196,7 +196,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
196
196
|
};
|
|
197
197
|
}
|
|
198
198
|
static {
|
|
199
|
-
customElement("odx-action-button", styles$
|
|
199
|
+
customElement("odx-action-button", styles$1a)(_OdxActionButton);
|
|
200
200
|
}
|
|
201
201
|
/** @internal */
|
|
202
202
|
#statusTimeout;
|
|
@@ -281,7 +281,7 @@ __decorateClass([
|
|
|
281
281
|
], _OdxActionButton.prototype, "replaceContent", 2);
|
|
282
282
|
let OdxActionButton = _OdxActionButton;
|
|
283
283
|
|
|
284
|
-
const styles$
|
|
284
|
+
const styles$19 = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: calc(var(--odx-size-37));font-size:var(--odx-typography-font-size-5)}}@layer state{:host([selected]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][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-size-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-size-50));font-size:var(--odx-typography-font-size-5)}}}";
|
|
285
285
|
|
|
286
286
|
const NavigationItemSize = pick(Size, ["MD", "LG"]);
|
|
287
287
|
const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
@@ -291,7 +291,7 @@ const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
|
291
291
|
this.selected = false;
|
|
292
292
|
}
|
|
293
293
|
static {
|
|
294
|
-
customElement("odx-navigation-item", styles$
|
|
294
|
+
customElement("odx-navigation-item", styles$19)(_OdxNavigationItem);
|
|
295
295
|
}
|
|
296
296
|
willUpdate(props) {
|
|
297
297
|
super.willUpdate(props);
|
|
@@ -308,7 +308,7 @@ __decorateClass([
|
|
|
308
308
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
309
309
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
310
310
|
|
|
311
|
-
const styles$
|
|
311
|
+
const styles$18 = ":host{display:flex;gap:var(--odx-size-37);min-inline-size:180px}:host(:not([vertical])){align-items:center;border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block:var(--odx-size-25) 0;padding-inline:var(--odx-size-50);::slotted(odx-navigation-item){margin-block-end:calc(-1 * var(--odx-border-width-thick));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[selected]){border-block-end-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-size-37)}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block:var(--odx-size-50);padding-inline:0 var(--odx-size-25);::slotted(odx-navigation-item){margin-inline-start:calc(-1 * var(--odx-border-width-thick));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[selected]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-size-75)}}";
|
|
312
312
|
|
|
313
313
|
class AnchorObserver {
|
|
314
314
|
constructor(root, options = {}) {
|
|
@@ -372,7 +372,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
372
372
|
this.addEventListener("click", this.#handleClick);
|
|
373
373
|
}
|
|
374
374
|
static {
|
|
375
|
-
customElement("odx-anchor-navigation", styles$
|
|
375
|
+
customElement("odx-anchor-navigation", styles$18)(_OdxAnchorNavigation);
|
|
376
376
|
}
|
|
377
377
|
#anchorObserver;
|
|
378
378
|
connectedCallback() {
|
|
@@ -416,7 +416,7 @@ __decorateClass([
|
|
|
416
416
|
], _OdxAnchorNavigation.prototype, "vertical", 2);
|
|
417
417
|
let OdxAnchorNavigation = _OdxAnchorNavigation;
|
|
418
418
|
|
|
419
|
-
const styles$
|
|
419
|
+
const styles$17 = ":host{display:flex;gap:var(--odx-size-150);align-items:center;justify-content:space-between;padding:var(--odx-size-75)}.content{flex:1 1 auto}";
|
|
420
420
|
|
|
421
421
|
const AreaHeaderSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
422
422
|
const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
@@ -425,7 +425,7 @@ const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
|
425
425
|
this.size = AreaHeaderSize.MD;
|
|
426
426
|
}
|
|
427
427
|
static {
|
|
428
|
-
customElement("odx-area-header", styles$
|
|
428
|
+
customElement("odx-area-header", styles$17)(_OdxAreaHeader);
|
|
429
429
|
}
|
|
430
430
|
render() {
|
|
431
431
|
return html`
|
|
@@ -442,7 +442,7 @@ __decorateClass([
|
|
|
442
442
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
443
443
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
444
444
|
|
|
445
|
-
const styles$
|
|
445
|
+
const styles$16 = ":host{--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--odx-color-background-neutral-rest);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([subtle]){background-color:transparent}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-rest);color:var(--odx-color-foreground-inverse)}:host([variant=\"primary\"][subtle]){background-color:var(--odx-color-background-primary-subtle);color:inherit}:host([variant=\"accent\"]){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"][subtle]){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-hover)}:host([size=\"sm\"]){--_size: var(--odx-size-150);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);font-size:var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);font-size:var(--odx-typography-font-size-7)}:host([size=\"xxl\"]){--_size: var(--odx-size-600);font-size:var(--odx-typography-font-size-8)}";
|
|
446
446
|
|
|
447
447
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
448
448
|
const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL", "XXL"]);
|
|
@@ -452,10 +452,11 @@ const _OdxAvatar = class _OdxAvatar extends CustomElement {
|
|
|
452
452
|
super(...arguments);
|
|
453
453
|
this.shape = AvatarShape.CIRCLE;
|
|
454
454
|
this.size = AvatarSize.MD;
|
|
455
|
+
this.subtle = false;
|
|
455
456
|
this.variant = AvatarVariant.NEUTRAL;
|
|
456
457
|
}
|
|
457
458
|
static {
|
|
458
|
-
customElement("odx-avatar", styles$
|
|
459
|
+
customElement("odx-avatar", styles$16)(_OdxAvatar);
|
|
459
460
|
}
|
|
460
461
|
};
|
|
461
462
|
__decorateClass([
|
|
@@ -464,44 +465,14 @@ __decorateClass([
|
|
|
464
465
|
__decorateClass([
|
|
465
466
|
property({ reflect: true, useDefault: true })
|
|
466
467
|
], _OdxAvatar.prototype, "size", 2);
|
|
468
|
+
__decorateClass([
|
|
469
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
470
|
+
], _OdxAvatar.prototype, "subtle", 2);
|
|
467
471
|
__decorateClass([
|
|
468
472
|
property({ reflect: true, useDefault: true })
|
|
469
473
|
], _OdxAvatar.prototype, "variant", 2);
|
|
470
474
|
let OdxAvatar = _OdxAvatar;
|
|
471
475
|
|
|
472
|
-
const styles$16 = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
|
|
473
|
-
|
|
474
|
-
const _OdxAvatarGroup = class _OdxAvatarGroup extends CustomElement {
|
|
475
|
-
constructor() {
|
|
476
|
-
super(...arguments);
|
|
477
|
-
this.size = AvatarSize.MD;
|
|
478
|
-
this.variant = AvatarVariant.NEUTRAL;
|
|
479
|
-
}
|
|
480
|
-
static {
|
|
481
|
-
customElement("odx-avatar-group", styles$16)(_OdxAvatarGroup);
|
|
482
|
-
}
|
|
483
|
-
updated(props) {
|
|
484
|
-
super.updated(props);
|
|
485
|
-
if (props.has("size") || props.has("variant")) {
|
|
486
|
-
for (const avatar of this.avatars) {
|
|
487
|
-
avatar.shape = AvatarShape.CIRCLE;
|
|
488
|
-
avatar.size = this.size;
|
|
489
|
-
avatar.variant = this.variant;
|
|
490
|
-
}
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
};
|
|
494
|
-
__decorateClass([
|
|
495
|
-
queryAssignedElements({ selector: OdxAvatar.tagName })
|
|
496
|
-
], _OdxAvatarGroup.prototype, "avatars", 2);
|
|
497
|
-
__decorateClass([
|
|
498
|
-
property({ reflect: true, useDefault: true })
|
|
499
|
-
], _OdxAvatarGroup.prototype, "size", 2);
|
|
500
|
-
__decorateClass([
|
|
501
|
-
property({ reflect: true, useDefault: true })
|
|
502
|
-
], _OdxAvatarGroup.prototype, "variant", 2);
|
|
503
|
-
let OdxAvatarGroup = _OdxAvatarGroup;
|
|
504
|
-
|
|
505
476
|
const styles$15 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-size-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([compact]){--_block-size: var(--odx-size-75);margin:var(--odx-size-12);padding:0;inline-size:var(--_block-size)}:host([pulse]){animation:pulse 1.25s infinite}";
|
|
506
477
|
|
|
507
478
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
@@ -2664,7 +2635,7 @@ __decorateClass([
|
|
|
2664
2635
|
], _OdxMenuItem.prototype, "icon", 2);
|
|
2665
2636
|
let OdxMenuItem = _OdxMenuItem;
|
|
2666
2637
|
|
|
2667
|
-
const styles$z = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
|
|
2638
|
+
const styles$z = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
|
|
2668
2639
|
|
|
2669
2640
|
const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
2670
2641
|
(async () => {
|
|
@@ -3958,13 +3929,15 @@ __decorateClass([
|
|
|
3958
3929
|
], _OdxSpinbox.prototype, "value", 2);
|
|
3959
3930
|
let OdxSpinbox = _OdxSpinbox;
|
|
3960
3931
|
|
|
3961
|
-
const styles$f = ":host{display:inline-flex;gap:var(--odx-size-
|
|
3932
|
+
const styles$f = ":host{display:inline-flex;gap:var(--odx-size-75);align-items:center;transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-size-75);block-size:var(--odx-size-150);font-size:var(--odx-typography-font-size-2);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-badge{margin:0 calc(-1 * var(--odx-size-37))}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"primary\"][strong]){border-color:var(--odx-color-stroke-primary-rest)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"danger\"][strong]){border-color:var(--odx-color-stroke-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"warning\"][strong]){border-color:var(--odx-color-stroke-warning-rest)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}:host([variant=\"success\"][strong]){border-color:var(--odx-color-stroke-success-rest)}:host([subtle]){background-color:transparent}";
|
|
3962
3933
|
|
|
3963
3934
|
const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
3964
3935
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
3965
3936
|
constructor() {
|
|
3966
3937
|
super(...arguments);
|
|
3967
3938
|
this.pulse = false;
|
|
3939
|
+
this.strong = false;
|
|
3940
|
+
this.subtle = false;
|
|
3968
3941
|
this.variant = StatusVariant.NEUTRAL;
|
|
3969
3942
|
}
|
|
3970
3943
|
static {
|
|
@@ -3972,7 +3945,7 @@ const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
|
3972
3945
|
}
|
|
3973
3946
|
render() {
|
|
3974
3947
|
return html`
|
|
3975
|
-
<odx-badge
|
|
3948
|
+
<odx-badge ?pulse=${this.pulse} variant=${optionalAttr(this.variant)} compact></odx-badge>
|
|
3976
3949
|
<slot></slot>
|
|
3977
3950
|
`;
|
|
3978
3951
|
}
|
|
@@ -3980,6 +3953,12 @@ const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
|
3980
3953
|
__decorateClass([
|
|
3981
3954
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
3982
3955
|
], _OdxStatus.prototype, "pulse", 2);
|
|
3956
|
+
__decorateClass([
|
|
3957
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
3958
|
+
], _OdxStatus.prototype, "strong", 2);
|
|
3959
|
+
__decorateClass([
|
|
3960
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
3961
|
+
], _OdxStatus.prototype, "subtle", 2);
|
|
3983
3962
|
__decorateClass([
|
|
3984
3963
|
property({ reflect: true, useDefault: true })
|
|
3985
3964
|
], _OdxStatus.prototype, "variant", 2);
|
|
@@ -4566,4 +4545,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4566
4545
|
}
|
|
4567
4546
|
}
|
|
4568
4547
|
|
|
4569
|
-
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar,
|
|
4548
|
+
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, TooltipSize, sliderContext, tableContext };
|
package/dist/main.js
CHANGED
|
@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
|
|
|
5
5
|
|
|
6
6
|
const name = "@odx/foundation";
|
|
7
7
|
const displayName = "ODX Design System Foundation";
|
|
8
|
-
const version = "1.0.0-beta.
|
|
8
|
+
const version = "1.0.0-beta.119";
|
|
9
9
|
const pkg = {
|
|
10
10
|
name,
|
|
11
11
|
displayName,
|
|
@@ -940,7 +940,7 @@ function optionalSlot(host, slotName) {
|
|
|
940
940
|
return nothing;
|
|
941
941
|
}
|
|
942
942
|
|
|
943
|
-
const styles = "@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-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:left;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--
|
|
943
|
+
const styles = "@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-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:left;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));background-color:var(--odx-color-background-transparent-pressed);font-size:var(--odx-typography-font-size-2)}}@layer state{:host([badge-align=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-size-37) 50%}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}: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}}";
|
|
944
944
|
|
|
945
945
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
946
946
|
constructor() {
|
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.119",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { CustomElement } from '../../lib/main.js';
|
|
2
|
-
import { PropertyValues } from 'lit';
|
|
3
|
-
import { AvatarSize, AvatarVariant, OdxAvatar } from '../avatar/avatar.js';
|
|
4
|
-
declare global {
|
|
5
|
-
interface HTMLElementTagNameMap {
|
|
6
|
-
'odx-avatar-group': OdxAvatarGroup;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
export declare class OdxAvatarGroup extends CustomElement implements Pick<OdxAvatar, 'size' | 'variant'> {
|
|
10
|
-
avatars: OdxAvatar[];
|
|
11
|
-
size: AvatarSize;
|
|
12
|
-
variant: AvatarVariant;
|
|
13
|
-
protected updated(props: PropertyValues<this>): void;
|
|
14
|
-
}
|