@odx/foundation 1.0.0-beta.159 → 1.0.0-beta.160

package/dist/components/select/select.d.ts

@@ -11,6 +11,7 @@ export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     /** @internal */
     static shadowRootOptions: ShadowRootInit;
     protected readonly dropdown: OdxDropdown;
+    block: boolean;
     maxVisibleSelectedOptions: number;
     constructor();
     clear(): void;

package/dist/components.js

@@ -2960,7 +2960,7 @@ __decorateClass([
 ], _OdxMenuItem.prototype, "icon", 2);
 let OdxMenuItem = _OdxMenuItem;
 
-const styles$B = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0;overflow:auto}.base{transform:translateY(var(--odx-spacing-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{margin-inline:calc(-1 * var(--odx-spacing-100));padding:var(--odx-spacing-100);max-inline-size:none;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-spacing-100))}}}";
+const styles$B = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0;overflow:auto}.base{transform:translateY(var(--odx-spacing-100));transition-property:opacity,display,overlay,transform,box-shadow;margin-block-start:var(--odx-size-400);border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{margin-inline:calc(-1 * var(--odx-spacing-100));padding:var(--odx-spacing-100);max-inline-size:none;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-spacing-100))}}}";
 
 const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
 (async () => {
@@ -3814,11 +3814,12 @@ __decorateClass([
 ], _OdxSearchBar.prototype, "readonly", 2);
 let OdxSearchBar = _OdxSearchBar;
 
-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-subtle);--_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;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);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-offset:var(--odx-focus-ring-offset)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}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:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}::slotted(odx-option:not(:is(:first-child,:last-child))){border-radius:0}::slotted(odx-option:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-option:last-child){border-start-start-radius:0;border-start-end-radius:0}}@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)}}";
+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-subtle);--_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;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);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-offset:var(--odx-focus-ring-offset)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}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)}::slotted(odx-option:not(:is(:first-child,:last-child))){border-radius:0}::slotted(odx-option:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-option:last-child){border-start-start-radius:0;border-start-end-radius:0}}@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)}}";
 
 const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   constructor() {
     super();
+    this.block = false;
     this.maxVisibleSelectedOptions = 2;
     this.#handleSlotChange = () => {
       super.handleSlotChange();
@@ -3926,6 +3927,9 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
 __decorateClass([
   query(OdxDropdown.tagName, true)
 ], _OdxSelect.prototype, "dropdown", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
+], _OdxSelect.prototype, "block", 2);
 __decorateClass([
   property({ type: Number })
 ], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
@@ -4570,8 +4574,8 @@ const _OdxTabBar = class _OdxTabBar extends CustomElement {
     });
     if (!this.selectedItem) return;
     this.#rovingTabindexController.currentIndex = this.selectedIndex;
-    this.style.setProperty("--indicator-position", toPx(this.selectedItem.offsetLeft - this.offsetLeft));
     await 0;
+    this.style.setProperty("--indicator-position", toPx(this.selectedItem.offsetLeft - this.offsetLeft));
     this.selectedItem.scrollIntoView({ inline: "center" });
   }
   #resolveInitialSelectedIndex(items) {

package/dist/main.js

@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.159";
+const version = "1.0.0-beta.160";
 const pkg = {
   name,
   displayName,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.159",
+  "version": "1.0.0-beta.160",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",