@odx/foundation 1.0.0-beta.171 → 1.0.0-beta.172
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.js
CHANGED
|
@@ -115,7 +115,7 @@ __decorateClass([
|
|
|
115
115
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
116
116
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
117
117
|
|
|
118
|
-
const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline) + var(--odx-spacing-12)));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:
|
|
118
|
+
const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline) + var(--odx-spacing-12)));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: var(--odx-spacing-negative-px);--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125)}: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)}:host(:is(:not([variant]),[variant=\"neutral\"],[variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed)}:host([variant=\"danger-subtle\"]){--_color-background: var(--odx-color-background-danger-subtle);--_color-background-hover: var(--odx-color-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"]);
|
|
@@ -895,7 +895,7 @@ __decorateClass([
|
|
|
895
895
|
], _OdxChip.prototype, "variant", 2);
|
|
896
896
|
let OdxChip = _OdxChip;
|
|
897
897
|
|
|
898
|
-
const styles$10 = "@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-
|
|
898
|
+
const styles$10 = "@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-37);--_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;padding:var(--odx-spacing-37);max-block-size:var(--_max-block-size);max-inline-size:calc(var(--_max-inline-size) + 2 * var(--odx-spacing-37))}: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)}}}";
|
|
899
899
|
|
|
900
900
|
const popoverTargetAttribute = "odx-popovertarget";
|
|
901
901
|
class PopoverObserver {
|
|
@@ -1095,6 +1095,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
|
1095
1095
|
get popoverPlacementOptions() {
|
|
1096
1096
|
return PopoverPlacementOptions({
|
|
1097
1097
|
...super.popoverPlacementOptions,
|
|
1098
|
+
fallbackAxisSideDirection: "none",
|
|
1098
1099
|
matchReferenceWidth: this.matchReferenceWidth
|
|
1099
1100
|
});
|
|
1100
1101
|
}
|
|
@@ -2062,7 +2063,7 @@ __decorateClass([
|
|
|
2062
2063
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
2063
2064
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
2064
2065
|
|
|
2065
|
-
const styles$O = ":host{--_color-stroke: var(--odx-color-stroke-control-
|
|
2066
|
+
const styles$O = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);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;max-inline-size:30ch;overflow:hidden;font-size:var(--odx-font-size-text-md)}.prefix,.suffix{--odx-color-background-disabled-rest: transparent;display:flex}:host:after{position:absolute;inset:auto 0 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-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-outer);outline-offset:var(--odx-focus-ring-offset);&:after{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:0}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}:host([clearable]) [part~=input]:not(:placeholder-shown){padding-inline-end:0}";
|
|
2066
2067
|
|
|
2067
2068
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
2068
2069
|
constructor() {
|
|
@@ -2129,9 +2130,9 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
2129
2130
|
const max = isNumberInput ? this.max : void 0;
|
|
2130
2131
|
const canStepUp = max == null || this.value == null || Number(this.value) < max;
|
|
2131
2132
|
const canStepDown = min == null || this.value == null || Number(this.value) > min;
|
|
2132
|
-
return html`<div class="prefix"><slot name="prefix"></slot
|
|
2133
|
+
return html`<div class="prefix"><slot name="prefix"></slot>${when(!this.readonly && isNumberInput, () => this.renderControl("decrement", "core::minus", () => this.stepDown(), this.disabled || !canStepDown))}</div><input placeholder="${this.disabled || this.readonly ? "" : this.placeholder}" part="input" min="${optionalAttr(min)}" max="${optionalAttr(max)}" step="${optionalAttr(this.step)}" type="${this.type}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" .value="${this.value}" size="1" @keydown="${this.#handleKeyDown}" @change="${forwardEvent(this)}" @input="${this.#handleInput}" @search="${forwardEvent(this)}"><div class="stroke"></div><div class="suffix">${when(
|
|
2133
2134
|
!this.readonly && isNumberInput,
|
|
2134
|
-
() =>
|
|
2135
|
+
() => this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp),
|
|
2135
2136
|
() => when(this.#isClearable(), () => this.renderControl("clear", "core::cancel", this.#handleClear, this.disabled))
|
|
2136
2137
|
)} ${when(
|
|
2137
2138
|
this.type === "time",
|
|
@@ -3391,7 +3392,7 @@ __decorateClass([
|
|
|
3391
3392
|
], _OdxSearchBar.prototype, "readonly", 2);
|
|
3392
3393
|
let OdxSearchBar = _OdxSearchBar;
|
|
3393
3394
|
|
|
3394
|
-
const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-
|
|
3395
|
+
const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;min-inline-size:15ch;max-inline-size:30ch;color:var(--_color-foreground)}.base{display:flex;position:relative;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border-radius:inherit;background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);overflow:hidden;text-align:start;user-select:none;&:after{position:absolute;inset:auto 0 0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-size-px);content:\"\"}&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);&:after{display:none}}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--_popover-padding: 0;--_popover-offset: 0}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host([block]){max-inline-size:100%}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3395
3396
|
|
|
3396
3397
|
const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
3397
3398
|
constructor() {
|
|
@@ -3,7 +3,7 @@ export interface PopoverPlacementOptions {
|
|
|
3
3
|
placement: Placement;
|
|
4
4
|
arrowElement?: HTMLElement | null;
|
|
5
5
|
enableFallback: boolean;
|
|
6
|
-
fallbackAxisSideDirection: 'start' | 'end';
|
|
6
|
+
fallbackAxisSideDirection: 'none' | 'start' | 'end';
|
|
7
7
|
matchReferenceWidth: boolean;
|
|
8
8
|
minHeight?: number | null;
|
|
9
9
|
offset: number;
|
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.172";
|
|
10
10
|
const pkg = {
|
|
11
11
|
name,
|
|
12
12
|
displayName,
|
|
@@ -1176,7 +1176,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
|
|
|
1176
1176
|
size({
|
|
1177
1177
|
apply: ({ availableHeight, availableWidth, rects, placement: currentPlacement }) => {
|
|
1178
1178
|
floatingElement.style.setProperty("--_popover-min-inline-size", matchReferenceWidth ? toPx(rects.reference.width) : null);
|
|
1179
|
-
floatingElement.style.setProperty("--_popover-max-inline-size", toPx(availableWidth));
|
|
1179
|
+
floatingElement.style.setProperty("--_popover-max-inline-size", matchReferenceWidth ? toPx(rects.reference.width) : toPx(availableWidth));
|
|
1180
1180
|
floatingElement.style.setProperty("--_popover-min-block-size", minHeight ? toPx(Math.min(availableHeight, minHeight)) : null);
|
|
1181
1181
|
floatingElement.style.setProperty("--_popover-max-block-size", toPx(availableHeight));
|
|
1182
1182
|
floatingElement.setAttribute("popover-placement", currentPlacement);
|
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.172",
|
|
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
|
-
"@odx/design-tokens": "1.1.0-rc.
|
|
19
|
+
"@odx/design-tokens": "1.1.0-rc.4",
|
|
20
20
|
"@preact/signals-core": "1.11.0",
|
|
21
21
|
"lit": "3.3.1"
|
|
22
22
|
},
|