@odx/foundation 1.0.0-beta.120 → 1.0.0-beta.121
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/auto-grid/auto-grid.d.ts +16 -0
- package/dist/components/main.d.ts +1 -0
- package/dist/components.js +46 -25
- package/dist/lib/models/layout.d.ts +10 -6
- package/dist/main.js +21 -13
- package/dist/styles.css +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CustomElement, ValuesOf } from '../../lib/main.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'odx-auto-grid': OdxAutoGrid;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export type AutoGridMode = ValuesOf<typeof AutoGridMode>;
|
|
9
|
+
export declare const AutoGridMode: {
|
|
10
|
+
readonly FIT: "fit";
|
|
11
|
+
readonly FILL: "fill";
|
|
12
|
+
};
|
|
13
|
+
export declare class OdxAutoGrid extends CustomElement {
|
|
14
|
+
mode: AutoGridMode;
|
|
15
|
+
protected render(): TemplateResult;
|
|
16
|
+
}
|
|
@@ -4,6 +4,7 @@ export * from './accordion-panel/accordion-panel.js';
|
|
|
4
4
|
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
|
+
export * from './auto-grid/auto-grid.js';
|
|
7
8
|
export * from './avatar/avatar.js';
|
|
8
9
|
export * from './badge/badge.js';
|
|
9
10
|
export * from './breadcrumbs/index.js';
|
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, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, InteractiveLink, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement,
|
|
2
|
+
import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, InteractiveLink, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
|
|
3
3
|
import { queryAssignedElements, 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';
|
|
@@ -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$1f = ":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$1f)(_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$1e = ":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$1e)(_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$1d = ":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$1d)(_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$1c = "@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$1c)(_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$1b = "@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$1b)(_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$1a = "@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$1a)(_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$19 = ":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$19)(_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$18 = ":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$18)(_OdxAreaHeader);
|
|
429
429
|
}
|
|
430
430
|
render() {
|
|
431
431
|
return html`
|
|
@@ -442,6 +442,28 @@ __decorateClass([
|
|
|
442
442
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
443
443
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
444
444
|
|
|
445
|
+
const styles$17 = ":host{--max-columns: 12;--min-column-size: 250px;--gap: var(--odx-size-75);--_max-column-size: calc((100% - var(--gap) * var(--max-columns)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;gap:var(--gap);place-content:center;padding:var(--gap)}:host,:host([mode=\"fit\"]){grid-template-columns:repeat(auto-fit,var(--_column-size))}:host([mode=\"fill\"]){grid-template-columns:repeat(auto-fill,var(--_column-size))}";
|
|
446
|
+
|
|
447
|
+
const AutoGridMode = { FIT: "fit", FILL: "fill" };
|
|
448
|
+
const _OdxAutoGrid = class _OdxAutoGrid extends CustomElement {
|
|
449
|
+
constructor() {
|
|
450
|
+
super(...arguments);
|
|
451
|
+
this.mode = AutoGridMode.FIT;
|
|
452
|
+
}
|
|
453
|
+
static {
|
|
454
|
+
customElement("odx-auto-grid", styles$17)(_OdxAutoGrid);
|
|
455
|
+
}
|
|
456
|
+
render() {
|
|
457
|
+
return html`
|
|
458
|
+
<slot></slot>
|
|
459
|
+
`;
|
|
460
|
+
}
|
|
461
|
+
};
|
|
462
|
+
__decorateClass([
|
|
463
|
+
property({ reflect: true, useDefault: true })
|
|
464
|
+
], _OdxAutoGrid.prototype, "mode", 2);
|
|
465
|
+
let OdxAutoGrid = _OdxAutoGrid;
|
|
466
|
+
|
|
445
467
|
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
468
|
|
|
447
469
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
@@ -660,7 +682,7 @@ __decorateClass([
|
|
|
660
682
|
], _OdxButtonGroup.prototype, "variant", 2);
|
|
661
683
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
662
684
|
|
|
663
|
-
const styles$10 = ":host{--_card-padding: var(--odx-size-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;outline:var(--odx-focus-ring-outline);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-size-50);place-items:center;margin-block-end:var(--odx-size-50)}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-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-size-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-size-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-size-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}";
|
|
685
|
+
const styles$10 = ":host{--_card-padding: var(--odx-size-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;outline:var(--odx-focus-ring-outline);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-size-50);place-items:center;margin-block-end:var(--odx-size-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-size-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-size-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-size-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-size-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}";
|
|
664
686
|
|
|
665
687
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
666
688
|
constructor() {
|
|
@@ -1287,7 +1309,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
|
1287
1309
|
match-reference-width
|
|
1288
1310
|
>
|
|
1289
1311
|
<odx-highlight minlength=${this.minQueryLength} selector="odx-option" subtle .root=${this}>
|
|
1290
|
-
<div class="odx-stack odx-gap-
|
|
1312
|
+
<div class="odx-stack odx-gap-25">
|
|
1291
1313
|
<slot></slot>
|
|
1292
1314
|
</div>
|
|
1293
1315
|
</odx-highlight>
|
|
@@ -1371,9 +1393,8 @@ const _OdxEmptyState = class _OdxEmptyState extends CustomElement {
|
|
|
1371
1393
|
customElement("odx-empty-state", styles$T)(_OdxEmptyState);
|
|
1372
1394
|
}
|
|
1373
1395
|
render() {
|
|
1374
|
-
const contentGap = this.size === EmptyStateSize.SM ? Gap.SM : Gap.MD;
|
|
1375
1396
|
return html`
|
|
1376
|
-
<div class="content odx-stack odx-align-center odx-gap-${
|
|
1397
|
+
<div class="content odx-stack odx-align-center odx-gap-${this.size === EmptyStateSize.SM ? "50" : "75"}">
|
|
1377
1398
|
<slot name="title"></slot>
|
|
1378
1399
|
${when(this.icon, (icon) => html`<odx-icon class="icon" name=${icon}></odx-icon>`)}
|
|
1379
1400
|
<slot></slot>
|
|
@@ -2437,14 +2458,14 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
|
2437
2458
|
<odx-logo size="sm"></odx-logo>
|
|
2438
2459
|
<odx-icon-button icon="core::close" variant="ghost" @click=${this.hidePopover} autofocus></odx-icon-button>
|
|
2439
2460
|
</div>
|
|
2440
|
-
<div class="subheader odx-stack odx-gap-
|
|
2461
|
+
<div class="subheader odx-stack odx-gap-25">
|
|
2441
2462
|
<slot name="title"></slot>
|
|
2442
2463
|
<slot name="subtitle"></slot>
|
|
2443
2464
|
</div>
|
|
2444
2465
|
<div class="navigation odx-stack" role="navigation" >
|
|
2445
2466
|
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
2446
2467
|
</div>
|
|
2447
|
-
<div class="link-navigation odx-cluster odx-gap-
|
|
2468
|
+
<div class="link-navigation odx-cluster odx-gap-25">
|
|
2448
2469
|
<slot name="link-navigation"></slot>
|
|
2449
2470
|
</div>
|
|
2450
2471
|
</div>
|
|
@@ -2913,7 +2934,7 @@ const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
|
|
|
2913
2934
|
render() {
|
|
2914
2935
|
const { hasPreviousPage, hasNextPage } = this.paginationContext;
|
|
2915
2936
|
return html`
|
|
2916
|
-
<div class="odx-cluster odx-gap-
|
|
2937
|
+
<div class="odx-cluster odx-gap-25 odx-align-center odx-justify-end odx-nowrap">
|
|
2917
2938
|
<span>${this.t("odx.pagination.summary", this.paginationContext)}</span>
|
|
2918
2939
|
<odx-button-group ?disabled=${!hasPreviousPage}>
|
|
2919
2940
|
<odx-icon-button icon="core::chevron-left-end" @click=${() => this.firstPage()} variant="ghost"></odx-icon-button>
|
|
@@ -4545,4 +4566,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4545
4566
|
}
|
|
4546
4567
|
}
|
|
4547
4568
|
|
|
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 };
|
|
4569
|
+
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, 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, OdxAutoGrid, 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 };
|
|
@@ -8,12 +8,16 @@ export declare const Align: {
|
|
|
8
8
|
};
|
|
9
9
|
export type Gap = ValuesOf<typeof Gap>;
|
|
10
10
|
export declare const Gap: {
|
|
11
|
-
readonly
|
|
12
|
-
readonly
|
|
13
|
-
readonly
|
|
14
|
-
readonly
|
|
15
|
-
readonly
|
|
16
|
-
readonly
|
|
11
|
+
readonly 0: "0";
|
|
12
|
+
readonly 12: "12";
|
|
13
|
+
readonly 25: "25";
|
|
14
|
+
readonly 37: "37";
|
|
15
|
+
readonly 50: "50";
|
|
16
|
+
readonly 75: "75";
|
|
17
|
+
readonly 100: "100";
|
|
18
|
+
readonly 150: "150";
|
|
19
|
+
readonly 200: "200";
|
|
20
|
+
readonly 250: "250";
|
|
17
21
|
};
|
|
18
22
|
export type Justify = ValuesOf<typeof Justify>;
|
|
19
23
|
export declare const Justify: {
|
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.121";
|
|
9
9
|
const pkg = {
|
|
10
10
|
name,
|
|
11
11
|
displayName,
|
|
@@ -84,7 +84,7 @@ function getKeyInfo(event) {
|
|
|
84
84
|
};
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
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,svg{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}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}@layer base{.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-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-gap-
|
|
87
|
+
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,svg{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}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}}@layer base{.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-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)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
88
88
|
|
|
89
89
|
function customElement(tagName, ...styles) {
|
|
90
90
|
return (target) => {
|
|
@@ -1108,15 +1108,6 @@ const IsDraggable = (superClass) => {
|
|
|
1108
1108
|
return IsDraggableElement;
|
|
1109
1109
|
};
|
|
1110
1110
|
|
|
1111
|
-
const Size = {
|
|
1112
|
-
XS: "xs",
|
|
1113
|
-
SM: "sm",
|
|
1114
|
-
MD: "md",
|
|
1115
|
-
LG: "lg",
|
|
1116
|
-
XL: "xl",
|
|
1117
|
-
XXL: "xxl"
|
|
1118
|
-
};
|
|
1119
|
-
|
|
1120
1111
|
const Align = {
|
|
1121
1112
|
BASELINE: "baseline",
|
|
1122
1113
|
START: "start",
|
|
@@ -1124,8 +1115,16 @@ const Align = {
|
|
|
1124
1115
|
END: "end"
|
|
1125
1116
|
};
|
|
1126
1117
|
const Gap = {
|
|
1127
|
-
|
|
1128
|
-
|
|
1118
|
+
0: "0",
|
|
1119
|
+
12: "12",
|
|
1120
|
+
25: "25",
|
|
1121
|
+
37: "37",
|
|
1122
|
+
50: "50",
|
|
1123
|
+
75: "75",
|
|
1124
|
+
100: "100",
|
|
1125
|
+
150: "150",
|
|
1126
|
+
200: "200",
|
|
1127
|
+
250: "250"
|
|
1129
1128
|
};
|
|
1130
1129
|
const Justify = {
|
|
1131
1130
|
START: "start",
|
|
@@ -1156,6 +1155,15 @@ const Shape = {
|
|
|
1156
1155
|
RECTANGLE: "rectangle"
|
|
1157
1156
|
};
|
|
1158
1157
|
|
|
1158
|
+
const Size = {
|
|
1159
|
+
XS: "xs",
|
|
1160
|
+
SM: "sm",
|
|
1161
|
+
MD: "md",
|
|
1162
|
+
LG: "lg",
|
|
1163
|
+
XL: "xl",
|
|
1164
|
+
XXL: "xxl"
|
|
1165
|
+
};
|
|
1166
|
+
|
|
1159
1167
|
const Variant = {
|
|
1160
1168
|
NEUTRAL: "neutral",
|
|
1161
1169
|
PRIMARY: "primary",
|
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,svg{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{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}@layer base{.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-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-gap-
|
|
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,svg{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{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}}@layer base{.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-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)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}:root{--odx-color-stroke-control-rest: light-dark(var(--odx-palette-blue-80), var(--odx-palette-blue-00));--odx-color-stroke-control-hover: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-control-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed)}@layer base{: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-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.121",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
],
|
|
17
17
|
"type": "module",
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@preact/signals-core": "1.
|
|
19
|
+
"@preact/signals-core": "1.9.0",
|
|
20
20
|
"@odx/assets-utils": "^3.1.1",
|
|
21
21
|
"lit": "3.3.0"
|
|
22
22
|
},
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@wc-toolkit/module-path-resolver": "1.0.0",
|
|
37
37
|
"@wc-toolkit/type-parser": "1.0.3",
|
|
38
38
|
"es-toolkit": "1.38.0",
|
|
39
|
-
"stylelint": "16.
|
|
39
|
+
"stylelint": "16.20.0",
|
|
40
40
|
"stylelint-config-concentric-order": "5.2.1",
|
|
41
41
|
"stylelint-config-standard": "38.0.0",
|
|
42
42
|
"ts-lit-plugin": "2.0.2",
|