@odx/foundation 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/cdk/main.d.ts

@@ -2,6 +2,6 @@ export * from './drag-drop/drag-events';
 export * from './drag-drop/drag.controller';
 export * from './drag-drop/is-draggable';
 export * from './popover/popover-host.mixin';
-export * from './popover/popover.element';
+export * from './popover/popover.component';
 export * from './popover/popover.models';
 //# sourceMappingURL=main.d.ts.map

package/dist/cdk/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../cdk/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../cdk/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC"}

package/dist/cdk/main.js

@@ -1,5 +1,5 @@
 export { DragController } from './drag-drop/drag.controller.js';
 export { IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, isDraggableElement } from './drag-drop/is-draggable.js';
 export { PopoverHost } from './popover/popover-host.mixin.js';
-export { OdxPopoverElement } from './popover/popover.element.js';
+export { OdxPopoverComponent } from './popover/popover.component.js';
 export { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './popover/popover.models.js';

package/dist/cdk/popover/popover-host.mixin.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration));--_popover-offset: var(--odx-size-50);background-color:transparent;opacity:0;padding:var(--_popover-offset);position-try:flip-block,flip-inline,flip-inline flip-block;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;max-block-size:var(--_popover-max-block-size, 100%);max-inline-size:var(--_popover-max-inline-size, 100%);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}:host,:host([placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset))}:host([placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0}:host([placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset)}:host([placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0}";
+const styles = ":host{--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);background-color:transparent;opacity:0;padding:var(--_popover-offset);position-try:flip-block,flip-inline,flip-inline flip-block;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;max-block-size:var(--_popover-max-block-size, 100%);max-inline-size:var(--_popover-max-inline-size, 100%);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}:host,:host([placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset))}:host([placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0}:host([placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset)}:host([placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0}";
 
 export { styles as default };

package/dist/cdk/popover/popover.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--color-background: transparent;--color-foreground: inherit;--min-block-size: inherit;--max-block-size: 100%;--min-inline-size: inherit;--max-inline-size: inherit;--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--min-block-size);max-block-size:var(--max-block-size);min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size);box-shadow:var(--_shadow);color:var(--color-foreground);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
+
+export { styles as default };

package/dist/cdk/popover/{popover.element.d.ts → popover.component.d.ts}

@@ -2,11 +2,11 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-popover': OdxPopoverElement;
+        'odx-popover': OdxPopoverComponent;
     }
 }
-export declare class OdxPopoverElement extends CustomElement {
+export declare class OdxPopoverComponent extends CustomElement {
     showArrow: boolean;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=popover.element.d.ts.map
+//# sourceMappingURL=popover.component.d.ts.map

package/dist/cdk/popover/popover.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.component.d.ts","sourceRoot":"","sources":["../../../cdk/popover/popover.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF;AAED,qBACa,mBAAoB,SAAQ,aAAa;IAEpD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;CAQ5C"}

package/dist/cdk/popover/{popover.element.js → popover.component.js}

@@ -2,7 +2,7 @@ import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
-import styles from './popover.element.css.js';
+import styles from './popover.component.css.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let OdxPopoverElement = class extends CustomElement {
+let OdxPopoverComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
     this.showArrow = false;
@@ -30,9 +30,9 @@ let OdxPopoverElement = class extends CustomElement {
 };
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], OdxPopoverElement.prototype, "showArrow", 2);
-OdxPopoverElement = __decorateClass([
+], OdxPopoverComponent.prototype, "showArrow", 2);
+OdxPopoverComponent = __decorateClass([
   customElement("odx-popover", [styles])
-], OdxPopoverElement);
+], OdxPopoverComponent);
 
-export { OdxPopoverElement };
+export { OdxPopoverComponent };

package/dist/components/avatar/avatar.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-avatar-background, var(--odx-experience-color-secondary-rest));--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-base);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
+const styles = ":host{--_color-background: var(--odx-avatar-background, var(--odx-experience-color-secondary-rest));--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
 
 export { styles as default };

package/dist/components/dropdown/dropdown.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main)}:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])){odx-popover{--min-inline-size: var(--_reference-inline-size, 0)}}";
+
+export { styles as default };

package/dist/{elements/dropdown/dropdown.element.d.ts → components/dropdown/dropdown.component.d.ts}

@@ -1,16 +1,16 @@
 import { CanBeDisabled, CustomElement } from '@odx/foundation';
-import { OdxPopoverElement, PopoverHost } from '@odx/foundation/cdk';
+import { OdxPopoverComponent, PopoverHost } from '@odx/foundation/cdk';
 import { PropertyValues, TemplateResult } from 'lit';
-import { DropdownPlacement } from './models';
+import { DropdownPlacement } from './dropdown.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-dropdown': OdxDropdownElement;
+        'odx-dropdown': OdxDropdownComponent;
     }
 }
-declare const OdxDropdownElement_base: import('@odx/foundation').Constructor<PopoverHost> & import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxDropdownElement extends OdxDropdownElement_base {
+declare const OdxDropdownComponent_base: import('@odx/foundation').Constructor<PopoverHost> & import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxDropdownComponent extends OdxDropdownComponent_base {
     #private;
-    protected popoverElement: OdxPopoverElement;
+    protected popoverElement: OdxPopoverComponent;
     matchReferenceWidth: boolean;
     placement: DropdownPlacement;
     connectedCallback(): void;
@@ -20,4 +20,4 @@ export declare class OdxDropdownElement extends OdxDropdownElement_base {
     protected willUpdate(changes: PropertyValues<this>): void;
 }
 export {};
-//# sourceMappingURL=dropdown.element.d.ts.map
+//# sourceMappingURL=dropdown.component.d.ts.map

package/dist/components/dropdown/dropdown.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../../components/dropdown/dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAqE,MAAM,iBAAiB,CAAC;AAClI,OAAO,EAAE,KAAK,mBAAmB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,oBAAoB,CAAC;KACtC;CACF;;AAED,qBACa,oBAAqB,SAAQ,yBAAyC;;IAEjF,SAAS,CAAC,cAAc,EAAG,mBAAmB,CAAC;IAG/C,mBAAmB,UAAS;IAGnB,SAAS,EAAE,iBAAiB,CAA4B;IAExD,iBAAiB,IAAI,IAAI;IAKzB,YAAY,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IAWzD,cAAc,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI;cAQzC,MAAM,IAAI,cAAc;cAQxB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAgDnE"}

package/dist/{elements/dropdown/dropdown.element.js → components/dropdown/dropdown.component.js}

@@ -2,8 +2,8 @@ import { CanBeDisabled, CustomElement, getUniqueId, SharedResizeObserver, toggle
 import { PopoverHost } from '@odx/foundation/cdk';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import styles from './dropdown.element.css.js';
-import { DropdownPlacement } from './models/dropdown-placement.js';
+import styles from './dropdown.component.css.js';
+import { DropdownPlacement } from './dropdown.models.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,11 +22,11 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _OdxDropdownElement_instances, observeReferenceElement_fn, unobserveReferenceElement_fn, updateAriaAttributes_fn, _handleMouseEvent, _handleKeyboardEvent;
-let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement)) {
+var _OdxDropdownComponent_instances, observeReferenceElement_fn, unobserveReferenceElement_fn, updateAriaAttributes_fn, _handleMouseEvent, _handleKeyboardEvent;
+let OdxDropdownComponent = class extends PopoverHost(CanBeDisabled(CustomElement)) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _OdxDropdownElement_instances);
+    __privateAdd(this, _OdxDropdownComponent_instances);
     this.matchReferenceWidth = false;
     this.placement = DropdownPlacement.BOTTOM;
     __privateAdd(this, _handleMouseEvent, (event) => {
@@ -44,19 +44,19 @@ let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement))
   mountPopover(referenceElement) {
     super.mountPopover(referenceElement);
     if (this.disabled || !referenceElement) return;
-    __privateMethod(this, _OdxDropdownElement_instances, updateAriaAttributes_fn).call(this, referenceElement, this.id);
+    __privateMethod(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn).call(this, referenceElement, this.id);
     referenceElement.addEventListener("click", __privateGet(this, _handleMouseEvent));
     referenceElement.addEventListener("keydown", __privateGet(this, _handleKeyboardEvent));
     if (this.matchReferenceWidth) {
-      __privateMethod(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
+      __privateMethod(this, _OdxDropdownComponent_instances, observeReferenceElement_fn).call(this);
     }
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
-    __privateMethod(this, _OdxDropdownElement_instances, updateAriaAttributes_fn).call(this, referenceElement, null);
+    __privateMethod(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn).call(this, referenceElement, null);
     referenceElement.removeEventListener("click", __privateGet(this, _handleMouseEvent));
     referenceElement.removeEventListener("keydown", __privateGet(this, _handleKeyboardEvent));
-    __privateMethod(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
+    __privateMethod(this, _OdxDropdownComponent_instances, unobserveReferenceElement_fn).call(this);
   }
   render() {
     return html`
@@ -68,7 +68,7 @@ let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement))
   willUpdate(changes) {
     super.willUpdate?.(changes);
     if (changes.has("id")) {
-      __privateMethod(this, _OdxDropdownElement_instances, updateAriaAttributes_fn).call(this, this.referenceElement, this.id);
+      __privateMethod(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn).call(this, this.referenceElement, this.id);
     }
     if (changes.has("disabled")) {
       if (this.disabled) {
@@ -79,14 +79,14 @@ let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement))
     }
     if (changes.has("matchReferenceWidth")) {
       if (this.matchReferenceWidth) {
-        __privateMethod(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
+        __privateMethod(this, _OdxDropdownComponent_instances, observeReferenceElement_fn).call(this);
       } else {
-        __privateMethod(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
+        __privateMethod(this, _OdxDropdownComponent_instances, unobserveReferenceElement_fn).call(this);
       }
     }
   }
 };
-_OdxDropdownElement_instances = new WeakSet();
+_OdxDropdownComponent_instances = new WeakSet();
 observeReferenceElement_fn = function() {
   if (!this.referenceElement) return;
   SharedResizeObserver.observe(this.referenceElement, () => {
@@ -107,15 +107,15 @@ _handleMouseEvent = new WeakMap();
 _handleKeyboardEvent = new WeakMap();
 __decorateClass([
   query("odx-popover", true)
-], OdxDropdownElement.prototype, "popoverElement", 2);
+], OdxDropdownComponent.prototype, "popoverElement", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], OdxDropdownElement.prototype, "matchReferenceWidth", 2);
+], OdxDropdownComponent.prototype, "matchReferenceWidth", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], OdxDropdownElement.prototype, "placement", 2);
-OdxDropdownElement = __decorateClass([
+], OdxDropdownComponent.prototype, "placement", 2);
+OdxDropdownComponent = __decorateClass([
   customElement("odx-dropdown", [styles])
-], OdxDropdownElement);
+], OdxDropdownComponent);
 
-export { OdxDropdownElement };
+export { OdxDropdownComponent };

package/dist/{elements/dropdown/models/dropdown-placement.d.ts → components/dropdown/dropdown.models.d.ts}

@@ -3,4 +3,4 @@ export declare const DropdownPlacement: {
     readonly TOP: "top";
     readonly BOTTOM: "bottom";
 };
-//# sourceMappingURL=dropdown-placement.d.ts.map
+//# sourceMappingURL=dropdown.models.d.ts.map

package/dist/components/dropdown/dropdown.models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.models.d.ts","sourceRoot":"","sources":["../../../components/dropdown/dropdown.models.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,CAAC;AAC3F,eAAO,MAAM,iBAAiB;;;CAGpB,CAAC"}

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dropdown.component';
+export * from './dropdown.models';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC"}

package/dist/components/main.d.ts

@@ -9,6 +9,7 @@ export * from './card';
 export * from './checkbox';
 export * from './checkbox-group';
 export * from './chip';
+export * from './dropdown';
 export * from './format';
 export * from './header';
 export * from './headline';
@@ -28,6 +29,7 @@ export * from './radio-button';
 export * from './radio-group';
 export * from './rail-navigation';
 export * from './search-bar';
+export * from './select';
 export * from './separator';
 export * from './spinbox';
 export * from './stack';

package/dist/components/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../components/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAElC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../components/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAElC,cAAc,kBAAkB,CAAC"}

package/dist/components/main.js

@@ -18,6 +18,8 @@ export { OdxCheckboxGroupComponent } from './checkbox-group/checkbox-group.compo
 export { CheckboxGroupVariant } from './checkbox-group/checkbox-group.models.js';
 export { OdxChipComponent } from './chip/chip.component.js';
 export { ChipVariant } from './chip/chip.models.js';
+export { OdxDropdownComponent } from './dropdown/dropdown.component.js';
+export { DropdownPlacement } from './dropdown/dropdown.models.js';
 export { OdxFormatBytesComponent } from './format/format-bytes.component.js';
 export { OdxFormatDateComponent } from './format/format-date.component.js';
 export { OdxFormatNumberComponent } from './format/format-number.component.js';
@@ -55,6 +57,7 @@ export { OdxRailNavigationComponent } from './rail-navigation/rail-navigation.co
 export { OdxSearchBarComponent } from './search-bar/search-bar.component.js';
 export { SearchEvent } from './search-bar/search-bar.events.js';
 export { SearchBarBehavior } from './search-bar/search-bar.models.js';
+export { OdxSelectComponent } from './select/select.component.js';
 export { OdxSeparatorComponent } from './separator/separator.component.js';
 export { OdxSpinboxComponent } from './spinbox/spinbox.component.js';
 export { OdxStackComponent } from './stack/stack.component.js';
@@ -68,8 +71,6 @@ export { OdxToggleButtonComponent } from './toggle-button/toggle-button.componen
 export { OdxVisuallyHiddenComponent } from './visually-hidden/visually-hidden.component.js';
 export { OdxCircularProgressBarElement } from '../elements/circular-progress-bar/circular-progress-bar.element.js';
 export { CircularProgressBarSize } from '../elements/circular-progress-bar/models/circular-progress-bar-size.js';
-export { OdxDropdownElement } from '../elements/dropdown/dropdown.element.js';
-export { DropdownPlacement } from '../elements/dropdown/models/dropdown-placement.js';
 export { OdxFormFieldElement } from '../elements/form-field/form-field.element.js';
 export { OdxGrid } from '../elements/grid/grid.element.js';
 export { GridGap } from '../elements/grid/grid.models.js';
@@ -78,7 +79,6 @@ export { OdxMenuLabelElement } from '../elements/menu/elements/menu-label/menu-l
 export { OdxMenuElement } from '../elements/menu/menu.element.js';
 export { ProgressState } from '../elements/progress-bar/models/progress-state.js';
 export { OdxProgressBarElement } from '../elements/progress-bar/progress-bar.element.js';
-export { OdxSelectElement } from '../elements/select/select.element.js';
 export { OdxSkeletonElement } from '../elements/skeleton/skeleton.element.js';
 export { SliderLabelVisibility } from '../elements/slider/models/slider-label-visibility.js';
 export { SliderTrackVisibility } from '../elements/slider/models/slider-track-visibility.js';

package/dist/components/option/option.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}slot[name=_checkbox]::slotted(odx-checkbox){margin:0;pointer-events:none}";
+const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
 
 export { styles as default };

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

@@ -0,0 +1,2 @@
+export * from './select.component';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/select/select.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-input-control-stroke);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground)}.base{display:flex;cursor:pointer;text-align:left;padding:var(--odx-size-37) var(--odx-size-75);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-size-37);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;max-inline-size:320px;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.indicator{font-size:var(--odx-size-150);margin-left:auto}.trigger odx-chip{--_border-radius: var(--odx-border-radius-sm)}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}";
+
+export { styles as default };

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

@@ -0,0 +1,18 @@
+import { SelectFormControl } from '@odx/foundation';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxDropdownComponent } from '../dropdown';
+import { OdxOptionComponent } from '../option';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-select': OdxSelectComponent;
+    }
+}
+export declare class OdxSelectComponent extends SelectFormControl {
+    #private;
+    protected options: OdxOptionComponent[];
+    protected dropdownElement: OdxDropdownComponent;
+    protected render(): TemplateResult;
+    protected renderSelectedOptions(): TemplateResult;
+    protected willUpdate(changes: PropertyValues<this>): void;
+}
+//# sourceMappingURL=select.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../components/select/select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;AAED,qBACa,kBAAmB,SAAQ,iBAAiB;;IACvD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,oBAAoB,CAAC;cAE9B,MAAM,IAAI,cAAc;IAkB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;cAa9B,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAsBnE"}

package/dist/{elements/select/select.element.js → components/select/select.component.js}

@@ -1,11 +1,11 @@
-import { SelectFormControl, getElementFromEvent, customElement } from '@odx/foundation';
-import { OdxOptionComponent } from '@odx/foundation/components';
+import { SelectFormControl, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { queryAssignedElements, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { when } from 'lit/directives/when.js';
-import styles from './select.element.css.js';
-import { OdxDropdownElement } from '../dropdown/dropdown.element.js';
+import styles from './select.component.css.js';
+import { OdxOptionComponent } from '../option/option.component.js';
+import { OdxDropdownComponent } from '../dropdown/dropdown.component.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -23,37 +23,36 @@ var __decorateClass = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _removeChip, _handleOptionChange;
-let OdxSelectElement = class extends SelectFormControl {
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _OdxSelectComponent_instances, handleMultipleChange_fn, _handleDropdownToggle, _removeChip;
+let OdxSelectComponent = class extends SelectFormControl {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _removeChip, async (option) => {
-      option.selected = false;
-      this.toggle(option);
+    __privateAdd(this, _OdxSelectComponent_instances);
+    __privateAdd(this, _handleDropdownToggle, (event) => {
+      if (event.newState === "open") {
+        this.options[0]?.setActive();
+      }
     });
-    __privateAdd(this, _handleOptionChange, (event) => {
-      const option = getElementFromEvent(event, (node) => !!this.options?.some((option2) => option2 === node));
-      if (!option) return;
-      event.stopPropagation();
-      if (option.disabled) return;
-      this.toggle(option);
-      if (this.multiple) return;
-      this.dropdownElement.hidePopover();
+    __privateAdd(this, _removeChip, async (option) => {
+      this.toggle(option, false, true);
     });
   }
   render() {
     return html`
-        <div part="trigger" id="select-trigger" tabindex="0">
-            ${when(
+      <div class="base" id="select-trigger" tabindex="0">
+        <odx-stack gap="xs" horizontal odxPreventTextOverflow>
+          ${when(
       Array.from(this.selectedOptions).length,
       () => this.renderSelectedOptions(),
       () => html`<slot name="placeholder">Select options</slot>`
     )}
-          <odx-icon part="indicator" name="chevron-down" set="core"></odx-icon>
-        </div>
-        <odx-dropdown part="dropdown" anchor="select-trigger" ?disabled=${this.disabled} matchReferenceWidth @change=${__privateGet(this, _handleOptionChange)}>
-          <slot></slot>
-        </odx-dropdown>
+        </odx-stack>
+      <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
+      </div>
+      <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} matchReferenceWidth @toggle=${__privateGet(this, _handleDropdownToggle)}>
+        <slot @slotchange=${__privateMethod(this, _OdxSelectComponent_instances, handleMultipleChange_fn)}></slot>
+      </odx-dropdown>
     `;
   }
   renderSelectedOptions() {
@@ -64,19 +63,32 @@ let OdxSelectElement = class extends SelectFormControl {
         (option) => html`<odx-chip @remove=${() => __privateGet(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
       )}`;
     }
+    this.dropdownElement.hidePopover();
     return html`${selectedOptions[0]?.getTextLabel()}`;
   }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("multiple")) {
+      __privateMethod(this, _OdxSelectComponent_instances, handleMultipleChange_fn).call(this);
+    }
+  }
+};
+_OdxSelectComponent_instances = new WeakSet();
+handleMultipleChange_fn = function() {
+  for (const option of this.options) {
+    option.type = this.multiple ? "checkbox" : null;
+  }
 };
+_handleDropdownToggle = new WeakMap();
 _removeChip = new WeakMap();
-_handleOptionChange = new WeakMap();
 __decorateClass([
   queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
-], OdxSelectElement.prototype, "options", 2);
+], OdxSelectComponent.prototype, "options", 2);
 __decorateClass([
-  query(OdxDropdownElement.selector, true)
-], OdxSelectElement.prototype, "dropdownElement", 2);
-OdxSelectElement = __decorateClass([
+  query(OdxDropdownComponent.selector, true)
+], OdxSelectComponent.prototype, "dropdownElement", 2);
+OdxSelectComponent = __decorateClass([
   customElement("odx-select", [styles])
-], OdxSelectElement);
+], OdxSelectComponent);
 
-export { OdxSelectElement };
+export { OdxSelectComponent };

package/dist/elements/main.d.ts

@@ -1,10 +1,8 @@
 export * from './circular-progress-bar';
-export * from './dropdown';
 export * from './form-field';
 export * from './grid';
 export * from './menu';
 export * from './progress-bar';
-export * from './select';
 export * from './skeleton';
 export * from './slider';
 export * from './table';

package/dist/elements/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../elements/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../elements/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/elements/slider/slider.element.js

@@ -1,7 +1,7 @@
 import { provide } from '@lit/context';
 import { CustomElement, getKeyboardEventInfo, customElement } from '@odx/foundation';
 import { DragController } from '@odx/foundation/cdk';
-import { minBy, maxBy } from 'es-toolkit/array';
+import { minBy, maxBy } from 'es-toolkit';
 import { isServer, html } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { sliderContext } from './slider-context.js';

package/dist/src/lib/facade/option-control.d.ts

@@ -3,13 +3,12 @@ import { CanBeDisabled } from '../mixins';
 import { CustomElement } from '../models';
 declare const OptionControl_base: import('../mixins').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare abstract class OptionControl extends OptionControl_base {
-    #private;
     role: 'option' | 'gridcell' | 'row' | 'tab' | null;
     selected: boolean;
     value: string;
     getTextLabel(): string;
-    constructor();
-    toggle(state?: boolean, emitEvent?: boolean): void;
+    setActive(): void;
+    setInactive(): void;
     connectedCallback(): void;
     protected willUpdate(changes: PropertyValueMap<this>): void;
 }

package/dist/src/lib/facade/option-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/option-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAY,MAAM,KAAK,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAG1C,8BAAsB,aAAc,SAAQ,kBAA4B;;IAC7D,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAQ;IAGnE,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAEX,YAAY,IAAI,MAAM;;IAatB,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IASvC,iBAAiB,IAAI,IAAI;cAKf,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;CAkBrE"}
+{"version":3,"file":"option-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/option-control.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAE1C,8BAAsB,aAAc,SAAQ,kBAA4B;IAC7D,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAQ;IAGnE,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAEX,YAAY,IAAI,MAAM;IAItB,SAAS,IAAI,IAAI;IAIjB,WAAW,IAAI,IAAI;IAIV,iBAAiB,IAAI,IAAI;cAKf,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;CAMrE"}

package/dist/src/lib/facade/option-control.js

@@ -1,8 +1,6 @@
-import { isServer } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CanBeDisabled } from '../mixins/can-be-disabled.js';
 import { CustomElement } from '../models/custom-element.js';
-import { getKeyboardEventInfo } from '../utils/keyboard-events.js';
 import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
 
 var __defProp = Object.defineProperty;
@@ -16,36 +14,19 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 class OptionControl extends CanBeDisabled(CustomElement) {
   constructor() {
-    super();
+    super(...arguments);
     this.role = null;
     this.selected = false;
     this.value = "";
-    this.#handleClick = () => {
-      this.toggle(void 0, true);
-    };
-    this.#handleKeyboardEvent = (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter && !actions.space) return;
-      event.preventDefault();
-      if (event.type === "keydown") return;
-      this.toggle(void 0, true);
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.#handleKeyboardEvent);
-      this.addEventListener("keyup", this.#handleKeyboardEvent);
-    }
   }
   getTextLabel() {
     return this.textContent?.trim() ?? "";
   }
-  toggle(state, emitEvent = false) {
-    const currentState = this.selected;
-    const newState = state ?? !this.selected;
-    if (this.disabled || newState === this.selected) return;
-    this.selected = newState;
-    if (!emitEvent || !this.emit("change")) return;
-    this.selected = currentState;
+  setActive() {
+    this.setAttribute("odx-active", "true");
+  }
+  setInactive() {
+    this.removeAttribute("odx-active");
   }
   connectedCallback() {
     super.connectedCallback?.();
@@ -57,8 +38,6 @@ class OptionControl extends CanBeDisabled(CustomElement) {
       this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
     }
   }
-  #handleClick;
-  #handleKeyboardEvent;
 }
 __decorateClass([
   property({ type: Boolean })

package/dist/src/lib/facade/select-form-control.d.ts

@@ -8,9 +8,12 @@ export declare abstract class SelectFormControl<Option extends OptionControl = O
     multiple: boolean;
     value: string[] | string;
     get selectedOptions(): MapIterator<Option>;
-    toggle(option: Option): void;
+    constructor();
+    toggle(option: OptionControl, state?: boolean, emitEvent?: boolean): void;
+    protected updateValue(option: OptionControl): void;
     protected willUpdate(changes: PropertyValues<this>): void;
     protected updateSelection(): Promise<void>;
+    protected handleKeyboardEvent: (event: KeyboardEvent) => void;
 }
 export {};
 //# sourceMappingURL=select-form-control.d.ts.map

package/dist/src/lib/facade/select-form-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/select-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEtD,8BAAsB,iBAAiB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,sBAE7F;;IAGC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAGrC,QAAQ,UAAS;IAGR,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAM;IAEvC,IAAI,eAAe,IAAI,WAAW,CAAC,MAAM,CAAC,CAEzC;IAED,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;cAST,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAYlD,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;CAcjD"}
+{"version":3,"file":"select-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/select-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,KAAK,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEjD,8BAAsB,iBAAiB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,sBAE7F;;IAGC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAGrC,QAAQ,UAAS;IAGR,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAM;IAEvC,IAAI,eAAe,IAAI,WAAW,CAAC,MAAM,CAAC,CAEzC;;IAWD,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IAWvE,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,aAAa;cASxB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAkBlD,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAgBhD,SAAS,CAAC,mBAAmB,GAAI,OAAO,aAAa,UAOnD;CAOH"}

package/dist/src/lib/facade/select-form-control.js

@@ -1,6 +1,10 @@
+import { isServer } from 'lit';
 import { property } from 'lit/decorators.js';
+import { OptionControl } from './option-control.js';
+import { getElementFromEvent } from '../utils/dom.js';
 import { FormControl } from '../mixins/form-control.js';
 import { CustomElement } from '../models/custom-element.js';
+import { getKeyboardEventInfo } from '../utils/keyboard-events.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,16 +19,44 @@ class SelectFormControl extends FormControl(
   CustomElement
 ) {
   constructor() {
-    super(...arguments);
+    super();
     this.#selectedOptions = /* @__PURE__ */ new Map();
     this.multiple = false;
     this.value = "";
+    this.handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option || !actions.enter && !actions.space) return;
+      event.preventDefault();
+      if (event.type === "keydown") return;
+      this.toggle(option, void 0, true);
+    };
+    this.#handleClick = (event) => {
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option) return;
+      this.toggle(option, void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.handleKeyboardEvent);
+      this.addEventListener("keyup", this.handleKeyboardEvent);
+    }
   }
   #selectedOptions;
   get selectedOptions() {
     return this.#selectedOptions.values();
   }
-  toggle(option) {
+  toggle(option, state, emitEvent = false) {
+    const currentState = option.selected;
+    const newState = state ?? !option.selected;
+    if (this.disabled || newState === option.selected) return;
+    option.selected = newState;
+    this.updateValue(option);
+    if (!emitEvent || !this.emit("change")) return;
+    option.selected = currentState;
+    this.updateValue(option);
+  }
+  updateValue(option) {
     if (this.multiple) {
       const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
       this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
@@ -34,6 +66,12 @@ class SelectFormControl extends FormControl(
   }
   willUpdate(changes) {
     super.willUpdate?.(changes);
+    if (changes.has("multiple")) {
+      const [selectedOption] = Array.from(this.#selectedOptions.entries());
+      if (selectedOption) {
+        this.updateValue(selectedOption[1]);
+      }
+    }
     if (changes.has("value")) {
       this.updateSelection();
     }
@@ -49,6 +87,7 @@ class SelectFormControl extends FormControl(
     for (const option of this.options ?? []) {
       if (option.disabled) continue;
       option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      option.setInactive();
       if (option.selected) {
         this.#selectedOptions.set(option.value, option);
       } else {
@@ -57,6 +96,7 @@ class SelectFormControl extends FormControl(
     }
     this.requestUpdate();
   }
+  #handleClick;
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/src/lib/mixins/can-be-disabled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAqBjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}
+{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA+BjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-disabled.js

@@ -15,19 +15,28 @@ const CanBeDisabled = dedupeMixin((superClass) => {
   class CanBeDisabledElement extends superClass {
     constructor() {
       super(...arguments);
-      this.#initialTabIndex = 0;
+      this.#initialTabIndex = null;
       this.disabled = false;
     }
     #initialTabIndex;
     connectedCallback() {
       super.connectedCallback?.();
-      this.#initialTabIndex = Math.max(0, this.tabIndex || 0);
+      this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
     }
     willUpdate(props) {
       super.willUpdate?.(props);
       if (props.has("disabled")) {
-        this.tabIndex = this.disabled ? -1 : this.#initialTabIndex;
-        this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+        this.#handleDisableChange();
+      }
+    }
+    #handleDisableChange() {
+      this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+      if (this.disabled) {
+        this.tabIndex = -1;
+      } else if (this.#initialTabIndex !== null) {
+        this.tabIndex = this.#initialTabIndex;
+      } else {
+        this.removeAttribute("tabindex");
       }
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "0.1.0-alpha.15",
+  "version": "0.1.0-alpha.17",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",

package/dist/cdk/popover/popover.element.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{--color-fill: transparent;--color-text: inherit;--min-block-size: inherit;--max-block-size: 100%;--min-inline-size: inherit;--max-inline-size: inherit;--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-md));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--color-fill)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--min-block-size);max-block-size:var(--max-block-size);min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size);box-shadow:var(--_shadow);color:var(--color-text);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
-
-export { styles as default };

package/dist/cdk/popover/popover.element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.element.d.ts","sourceRoot":"","sources":["../../../cdk/popover/popover.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF;AAED,qBACa,iBAAkB,SAAQ,aAAa;IAElD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;CAQ5C"}

package/dist/elements/dropdown/dropdown.element.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-fill: var(--odx-color-surface)}:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])){odx-popover{--min-inline-size: var(--_reference-inline-size, 0)}}";
-
-export { styles as default };

package/dist/elements/dropdown/dropdown.element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown.element.d.ts","sourceRoot":"","sources":["../../../elements/dropdown/dropdown.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAqE,MAAM,iBAAiB,CAAC;AAClI,OAAO,EAAE,KAAK,iBAAiB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF;;AAED,qBACa,kBAAmB,SAAQ,uBAAyC;;IAE/E,SAAS,CAAC,cAAc,EAAG,iBAAiB,CAAC;IAG7C,mBAAmB,UAAS;IAGnB,SAAS,EAAE,iBAAiB,CAA4B;IAExD,iBAAiB,IAAI,IAAI;IAKzB,YAAY,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IAWzD,cAAc,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI;cAQzC,MAAM,IAAI,cAAc;cAQxB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAgDnE"}

package/dist/elements/dropdown/index.d.ts

@@ -1,3 +0,0 @@
-export * from './dropdown.element';
-export * from './models';
-//# sourceMappingURL=index.d.ts.map

package/dist/elements/dropdown/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC"}

package/dist/elements/dropdown/models/dropdown-placement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-placement.d.ts","sourceRoot":"","sources":["../../../../elements/dropdown/models/dropdown-placement.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,CAAC;AAC3F,eAAO,MAAM,iBAAiB;;;CAGpB,CAAC"}

package/dist/elements/dropdown/models/index.d.ts

@@ -1,2 +0,0 @@
-export * from './dropdown-placement';
-//# sourceMappingURL=index.d.ts.map

package/dist/elements/dropdown/models/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../elements/dropdown/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/elements/select/index.d.ts

@@ -1,2 +0,0 @@
-export * from './select.element';
-//# sourceMappingURL=index.d.ts.map

package/dist/elements/select/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/elements/select/select.element.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{display:block}[part=trigger]{display:flex;cursor:pointer;text-align:left;padding:var(--odx-size-37) var(--odx-size-75);min-width:200px;outline:var(--odx-outline-input);outline-offset:var(--odx-outline-offset-input);outline-color:var(--odx-color-outline-control);border-radius:var(--odx-border-radius-sm);min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,outline-color;gap:var(--odx-size-37)}[part=trigger]:focus-visible{background-color:var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}[part=indicator]{font-size:var(--odx-size-150);margin-left:auto}[part=trigger] odx-chip{--_border-radius: var(--odx-border-radius-sm)}";
-
-export { styles as default };

package/dist/elements/select/select.element.d.ts

@@ -1,17 +0,0 @@
-import { SelectFormControl } from '@odx/foundation';
-import { OdxOptionComponent } from '@odx/foundation/components';
-import { TemplateResult } from 'lit';
-import { OdxDropdownElement } from '../dropdown';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-select': OdxSelectElement;
-    }
-}
-export declare class OdxSelectElement extends SelectFormControl {
-    #private;
-    protected options: OdxOptionComponent[];
-    protected dropdownElement: OdxDropdownElement;
-    protected render(): TemplateResult;
-    protected renderSelectedOptions(): TemplateResult;
-}
-//# sourceMappingURL=select.element.d.ts.map

package/dist/elements/select/select.element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.element.d.ts","sourceRoot":"","sources":["../../../elements/select/select.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,iBAAiB,EAAsC,MAAM,iBAAiB,CAAC;AAC5G,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF;AAED,qBACa,gBAAiB,SAAQ,iBAAiB;;IACrD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,kBAAkB,CAAC;cAE5B,MAAM,IAAI,cAAc;IAgB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;CAyBlD"}