@odx/foundation 1.0.0-beta.71 → 1.0.0-beta.73
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 +10 -11
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/components.js
CHANGED
|
@@ -103,7 +103,7 @@ __decorateClass([
|
|
|
103
103
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
104
104
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
105
105
|
|
|
106
|
-
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))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::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);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[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);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}: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: var(--odx-color-stroke-control-rest);--_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-static)}: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([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)}}";
|
|
106
|
+
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))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::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);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[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);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}: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: var(--odx-color-stroke-control-rest);--_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-static)}: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)}}";
|
|
107
107
|
|
|
108
108
|
const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
|
|
109
109
|
const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
@@ -430,7 +430,7 @@ __decorateClass([
|
|
|
430
430
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
431
431
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
432
432
|
|
|
433
|
-
const styles$17 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3);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,
|
|
433
|
+
const styles$17 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3);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;margin-block:var(--_spacing);border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--_font-size);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([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: 0;--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}";
|
|
434
434
|
|
|
435
435
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
436
436
|
const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
@@ -659,7 +659,7 @@ class OdxCard extends CanBeDisabled(CustomElement) {
|
|
|
659
659
|
}
|
|
660
660
|
}
|
|
661
661
|
|
|
662
|
-
const styles$10 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-rest);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color
|
|
662
|
+
const styles$10 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-rest);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([disabled],[readonly])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-foreground: transparent;--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly]:is([checked],[indeterminate])){--_indicator-color-foreground: var(--odx-color-foreground-rest)}";
|
|
663
663
|
|
|
664
664
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
665
665
|
constructor() {
|
|
@@ -738,7 +738,7 @@ __decorateClass([
|
|
|
738
738
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
739
739
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
740
740
|
|
|
741
|
-
const styles$_ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-25);place-items:center;outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);color:var(--_color-foreground)}:host,[part=base]
|
|
741
|
+
const styles$_ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-25);place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);overflow:hidden;color:var(--_color-foreground)}:host,[part=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{margin-inline-end:calc(-1 * var(--_padding-inline));border-radius:inherit;&::part(base){outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-danger-rest-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}";
|
|
742
742
|
|
|
743
743
|
const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
744
744
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -773,9 +773,8 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
|
773
773
|
}
|
|
774
774
|
renderAction() {
|
|
775
775
|
return html`
|
|
776
|
-
<button class="action" ?disabled=${this.disabled} @click=${this.#handleActionClick}>
|
|
777
|
-
|
|
778
|
-
</button>
|
|
776
|
+
<odx-icon-button class="action" icon="core::close" ?disabled=${this.disabled} @click=${this.#handleActionClick} variant="ghost" size="xs">
|
|
777
|
+
</odx-icon-button>
|
|
779
778
|
`;
|
|
780
779
|
}
|
|
781
780
|
willUpdate(props) {
|
|
@@ -1847,7 +1846,7 @@ __decorateClass([
|
|
|
1847
1846
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1848
1847
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1849
1848
|
|
|
1850
|
-
const styles$L = ":host{display:inline-flex;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;
|
|
1849
|
+
const styles$L = ":host{display:inline-flex;position:relative;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:12ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;background-color:var(--odx-color-stroke-control-rest);block-size:var(--odx-border-width-thin);content:\"\"}}[part*=control]{--_icon-size: var(--odx-typography-font-size-4);--_icon-margin: 0}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;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}&[disabled]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([clearable],[type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-size-px)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]){background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);&:after{background-color:var(--odx-color-stroke-disabled-rest)}}:host([type=\"number\"]){min-inline-size:4ch;&:not([readonly]){text-align:center}}";
|
|
1851
1850
|
|
|
1852
1851
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1853
1852
|
constructor() {
|
|
@@ -2675,7 +2674,7 @@ __decorateClass([
|
|
|
2675
2674
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
2676
2675
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
2677
2676
|
|
|
2678
|
-
const styles$x = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color
|
|
2677
|
+
const styles$x = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
|
|
2679
2678
|
|
|
2680
2679
|
class OdxOption extends OptionControl {
|
|
2681
2680
|
static {
|
|
@@ -3149,7 +3148,7 @@ __decorateClass([
|
|
|
3149
3148
|
], _OdxSearchBar.prototype, "placeholder", 2);
|
|
3150
3149
|
let OdxSearchBar = _OdxSearchBar;
|
|
3151
3150
|
|
|
3152
|
-
const styles$n = "@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-size-37);--_padding-inline: var(--odx-size-50);display:block;max-inline-size:320px;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color
|
|
3151
|
+
const styles$n = "@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-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-size-175)}odx-chip{--_border-radius: var(--odx-border-radius-controls)}odx-dropdown{--max-block-size: 320px}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);.base{cursor:not-allowed}slot[name=placeholder]{color:var(---_color-foreground)}}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}}";
|
|
3153
3152
|
|
|
3154
3153
|
const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
3155
3154
|
constructor() {
|
|
@@ -3621,7 +3620,7 @@ __decorateClass([
|
|
|
3621
3620
|
], _OdxSpacer.prototype, "fill", 2);
|
|
3622
3621
|
let OdxSpacer = _OdxSpacer;
|
|
3623
3622
|
|
|
3624
|
-
const styles$g = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;outline:var(--odx-focus-ring-outline);min-inline-size:
|
|
3623
|
+
const styles$g = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;outline:var(--odx-focus-ring-outline);border-radius:var(--odx-border-radius-controls);block-size:var(--odx-size-225);min-inline-size:20ch}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}::slotted(odx-option){flex:1 1 auto;justify-content:center}::slotted(odx-option[hidden]){display:none}";
|
|
3625
3624
|
|
|
3626
3625
|
const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
3627
3626
|
constructor() {
|
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{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([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}:root{--odx-color-background-neutral-rest: var(--odx-palette-white);--odx-color-background-neutral-subtle: var(--odx-palette-coolgray-00);--odx-color-background-neutral-hover: var(--odx-palette-coolgray-30);--odx-color-background-neutral-pressed: var(--odx-palette-coolgray-40);--odx-color-stroke-control-rest: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-hover: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-primary-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) var(--odx-palette-transparent)}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)}}
|
|
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{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([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}:root{--odx-color-background-neutral-rest: var(--odx-palette-white);--odx-color-background-neutral-subtle: var(--odx-palette-coolgray-00);--odx-color-background-neutral-hover: var(--odx-palette-coolgray-30);--odx-color-background-neutral-pressed: var(--odx-palette-coolgray-40);--odx-color-stroke-control-rest: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-hover: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-primary-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);--odx-experience-color-secondary-rest: var(--odx-palette-coolgray-30);--odx-experience-color-secondary-hover: var(--odx-palette-coolgray-40);--odx-experience-color-secondary-pressed: var(--odx-palette-coolgray-50)}@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) var(--odx-palette-transparent)}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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"description": "A library of Web Component building blocks for ODX",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.73",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|