@odx/foundation 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/elements/main.d.ts

@@ -1,6 +1,5 @@
 export * from './accordion';
 export * from './card';
-export * from './chip';
 export * from './circular-progress-bar';
 export * from './content-layout';
 export * from './dropdown';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"select.element.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,aAAa,EAAsC,MAAM,iBAAiB,CAAC;AACxG,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,aAAa;;IACjD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,kBAAkB,CAAC;cAE5B,MAAM,IAAI,cAAc;IAgB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;CAwBlD"}
+{"version":3,"file":"select.element.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,aAAa,EAAsC,MAAM,iBAAiB,CAAC;AACxG,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,aAAa;;IACjD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,kBAAkB,CAAC;cAE5B,MAAM,IAAI,cAAc;IAgB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;CAyBlD"}

package/dist/elements.js

@@ -1,8 +1,8 @@
-import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, optionalSlot, toggleAttribute, getElementFromEvent, SharedResizeObserver, getUniqueId, WithLoadingState, waitForAnimations, emptySlotFallbackFix, FocusTrapController, RovingTabindexController, optionalAttr, SelectControl, NumberControl, CheckboxControl } from '@odx/foundation';
+import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, optionalSlot, SharedResizeObserver, getUniqueId, toggleAttribute, WithLoadingState, waitForAnimations, emptySlotFallbackFix, FocusTrapController, RovingTabindexController, optionalAttr, SelectControl, getElementFromEvent, NumberControl, CheckboxControl } from '@odx/foundation';
 import { html, isServer, nothing } from 'lit';
 import { property, queryAssignedElements, query } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
 import { PopoverPlacement, PopoverHost, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
+import { when } from 'lit/directives/when.js';
 import { B as BaseLink } from './base-link-CvZZE13a.js';
 import { clamp, round } from 'es-toolkit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -11,16 +11,16 @@ import { repeat } from 'lit/directives/repeat.js';
 import { createContext, consume, provide } from '@lit/context';
 import { minBy, maxBy } from 'es-toolkit/array';
 
-const styles$z = ":host{--_fill-color: transparent;display:flex;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-sm);background-color:var(--_fill-color);margin-block:calc(.5 * var(--odx-size-75));padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);cursor:pointer;transition:var(--odx-transition-default);user-select:none;place-items:center;outline:var(--odx-border-width-md) solid transparent;outline-offset:var(--odx-size-px)}:host::part(indicator){display:block;margin-inline-start:auto;block-size:var(--odx-size-150);aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform;font-size:var(--odx-size-150)}:host(:not([disabled]):hover){--_fill-color: var(--odx-color-misc-transparent-hover)}:host([disabled]:not([disabled=\"false\"])){cursor:default;color:var(--odx-color-disabled-foreground)}:host([aria-expanded]:not([aria-expanded=\"false\"])){margin-block-end:0;[part=indicator]{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-color-focus-outer)}";
+const styles$y = ":host{--_fill-color: transparent;display:flex;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-sm);background-color:var(--_fill-color);margin-block:calc(.5 * var(--odx-size-75));padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);cursor:pointer;transition:var(--odx-transition-default);user-select:none;place-items:center;outline:var(--odx-border-width-md) solid transparent;outline-offset:var(--odx-size-px)}:host::part(indicator){display:block;margin-inline-start:auto;block-size:var(--odx-size-150);aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform;font-size:var(--odx-size-150)}:host(:not([disabled]):hover){--_fill-color: var(--odx-color-misc-transparent-hover)}:host([disabled]:not([disabled=\"false\"])){cursor:default;color:var(--odx-color-disabled-foreground)}:host([aria-expanded]:not([aria-expanded=\"false\"])){margin-block-end:0;[part=indicator]{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-color-focus-outer)}";
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
@@ -69,18 +69,18 @@ let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
     `;
   }
 };
-__decorateClass$C([
+__decorateClass$B([
   property({ type: Boolean })
 ], OdxAccordionHeaderElement.prototype, "expanded", 1);
-OdxAccordionHeaderElement = __decorateClass$C([
-  customElement("odx-accordion-header", [styles$z])
+OdxAccordionHeaderElement = __decorateClass$B([
+  customElement("odx-accordion-header", [styles$y])
 ], OdxAccordionHeaderElement);
 
-const styles$y = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow);border-bottom:var(--odx-border-width-sm) solid transparent;margin-block-start:calc(-1 * var(--odx-border-width-sm))}:host::part(container){overflow:hidden}:host::part(content){padding:var(--odx-size-50);transition:var(--odx-transition-slow)}:host(:not(:last-of-type)){border-bottom-color:var(--odx-color-selection-control-stroke)}:host([aria-hidden]:not([aria-hidden=\"false\"])){grid-template-rows:0fr;[part=content]{opacity:0;transform:translateY(calc(-1 * var(--odx-size-75)));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
+const styles$x = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow);border-bottom:var(--odx-border-width-sm) solid transparent;margin-block-start:calc(-1 * var(--odx-border-width-sm))}:host::part(container){overflow:hidden}:host::part(content){padding:var(--odx-size-50);transition:var(--odx-transition-slow)}:host(:not(:last-of-type)){border-bottom-color:var(--odx-color-selection-control-stroke)}:host([aria-hidden]:not([aria-hidden=\"false\"])){grid-template-rows:0fr;[part=content]{opacity:0;transform:translateY(calc(-1 * var(--odx-size-75)));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
 
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -97,44 +97,44 @@ let OdxAccordionPanelElement = class extends CustomElement {
     `;
   }
 };
-OdxAccordionPanelElement = __decorateClass$B([
-  customElement("odx-accordion-panel", [styles$y])
+OdxAccordionPanelElement = __decorateClass$A([
+  customElement("odx-accordion-panel", [styles$x])
 ], OdxAccordionPanelElement);
 
-const styles$x = ":host{display:block;overflow:hidden}:host-context(odx-accordion-panel){margin-block:calc(-.5 * var(--odx-size-75));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+const styles$w = ":host{display:block;overflow:hidden}:host-context(odx-accordion-panel){margin-block:calc(-.5 * var(--odx-size-75));margin-inline-end:calc(-1 * var(--odx-size-50))}";
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __typeError$h = (msg) => {
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __typeError$g = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-var __accessCheck$h = (obj, member, msg) => member.has(obj) || __typeError$h("Cannot " + msg);
-var __privateGet$f = (obj, member, getter) => (__accessCheck$h(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$h = (obj, member, value) => member.has(obj) ? __typeError$h("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleClick$4, _handleExpand, _handleKeyboardEvent$2;
+var __accessCheck$g = (obj, member, msg) => member.has(obj) || __typeError$g("Cannot " + msg);
+var __privateGet$e = (obj, member, getter) => (__accessCheck$g(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$g = (obj, member, value) => member.has(obj) ? __typeError$g("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleClick$3, _handleExpand, _handleKeyboardEvent$2;
 let OdxAccordionElement = class extends CustomElement {
   constructor() {
     super();
     this.multiple = false;
-    __privateAdd$h(this, _handleClick$4, (event) => {
+    __privateAdd$g(this, _handleClick$3, (event) => {
       event.stopPropagation();
       if (!(event.target instanceof OdxAccordionHeaderElement)) return;
       event.target.toggle();
     });
-    __privateAdd$h(this, _handleExpand, (event) => {
+    __privateAdd$g(this, _handleExpand, (event) => {
       event.stopPropagation();
       if (!(event.target instanceof OdxAccordionHeaderElement) || this.multiple) return;
       this.toggleAll(false, event.target);
     });
-    __privateAdd$h(this, _handleKeyboardEvent$2, (event) => {
+    __privateAdd$g(this, _handleKeyboardEvent$2, (event) => {
       const { actions } = getKeyboardEventInfo(event);
       if (!(actions.enter || actions.space) || !(event.target instanceof OdxAccordionHeaderElement)) return;
       event.preventDefault();
@@ -143,10 +143,10 @@ let OdxAccordionElement = class extends CustomElement {
       event.target.toggle();
     });
     if (!isServer) {
-      this.addEventListener("click", __privateGet$f(this, _handleClick$4));
-      this.addEventListener("expand", __privateGet$f(this, _handleExpand));
-      this.addEventListener("keydown", __privateGet$f(this, _handleKeyboardEvent$2));
-      this.addEventListener("keyup", __privateGet$f(this, _handleKeyboardEvent$2));
+      this.addEventListener("click", __privateGet$e(this, _handleClick$3));
+      this.addEventListener("expand", __privateGet$e(this, _handleExpand));
+      this.addEventListener("keydown", __privateGet$e(this, _handleKeyboardEvent$2));
+      this.addEventListener("keyup", __privateGet$e(this, _handleKeyboardEvent$2));
     }
   }
   toggleAll(forceState, ...exceptElements) {
@@ -166,24 +166,24 @@ let OdxAccordionElement = class extends CustomElement {
     return html`<slot></slot>`;
   }
 };
-_handleClick$4 = new WeakMap();
+_handleClick$3 = new WeakMap();
 _handleExpand = new WeakMap();
 _handleKeyboardEvent$2 = new WeakMap();
-__decorateClass$A([
+__decorateClass$z([
   queryAssignedElements({ selector: OdxAccordionHeaderElement.selector, flatten: true })
 ], OdxAccordionElement.prototype, "controls", 2);
-__decorateClass$A([
+__decorateClass$z([
   property({ type: Boolean })
 ], OdxAccordionElement.prototype, "multiple", 2);
-OdxAccordionElement = __decorateClass$A([
-  customElement("odx-accordion", [styles$x])
+OdxAccordionElement = __decorateClass$z([
+  customElement("odx-accordion", [styles$w])
 ], OdxAccordionElement);
 
-const styles$w = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-surface);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}:host::part(header-actions),:host::part(title-container){display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}:host::part(title-container){grid-area:title}:host::part(header-actions){grid-area:header-actions}:host::part(avatar-container){display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}:host::part(image-container){grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}:host::part(image-container):after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-fill-focus);opacity:0;pointer-events:none;transition:var(--odx-transition-base);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover)::part(image-container):after{opacity:1}";
+const styles$v = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-surface);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}:host::part(header-actions),:host::part(title-container){display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}:host::part(title-container){grid-area:title}:host::part(header-actions){grid-area:header-actions}:host::part(avatar-container){display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}:host::part(image-container){grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}:host::part(image-container):after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-fill-focus);opacity:0;pointer-events:none;transition:var(--odx-transition-base);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover)::part(image-container):after{opacity:1}";
 
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -202,111 +202,10 @@ let CardElement = class extends CanBeDisabled(CustomElement) {
     `;
   }
 };
-CardElement = __decorateClass$z([
-  customElement("odx-card", [styles$w])
+CardElement = __decorateClass$y([
+  customElement("odx-card", [styles$v])
 ], CardElement);
 
-const styles$v = ":host{--color-fill: var(--odx-color-neutral);--color-fill-hover: var(--odx-color-neutral-hover);--color-text: var(--odx-color-neutral-text);--_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;place-items:center;background-color:var(--color-fill);color:var(--color-text);cursor:default;padding-inline:var(--odx-size-50);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);transition:var(--odx-transition-reduced)}:host::part(content){min-inline-size:var(--odx-size-150);user-select:none}[part=action],::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;transition:var(--odx-transition-reduced)}[part=action]{background-color:transparent;border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}[part=action]:hover{background-color:var(--odx-color-fill-focus)}:host([variant=\"primary\"]){--color-fill: var(--odx-color-primary);--color-text: var(--odx-color-primary-text)}:host([variant=\"neutral\"]){--color-fill: var(--odx-color-neutral);--color-text: var(--odx-color-neutral-text)}:host([variant=\"accent\"]){--color-fill: var(--odx-color-accent);--color-text: var(--odx-color-accent-text)}:host([variant=\"success\"]){--color-fill: var(--odx-color-success);--color-text: var(--odx-color-success-text)}:host([variant=\"warning\"]){--color-fill: var(--odx-color-warning);--color-text: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--color-fill: var(--odx-color-danger);--color-text: var(--odx-color-danger-text)}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--color-fill: var(--color-fill-hover)}";
-
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __typeError$g = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
-  return result;
-};
-var __accessCheck$g = (obj, member, msg) => member.has(obj) || __typeError$g("Cannot " + msg);
-var __privateGet$e = (obj, member, getter) => (__accessCheck$g(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$g = (obj, member, value) => member.has(obj) ? __typeError$g("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleActionClick, _handleClick$3;
-let OdxChipElement = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.interactive = false;
-    __privateAdd$g(this, _handleActionClick, (event) => {
-      const actionElement = getElementFromEvent(event, (node) => node.getAttribute("part") === "action");
-      if (!actionElement) return;
-      event.stopPropagation();
-      this.emit("remove");
-    });
-    __privateAdd$g(this, _handleClick$3, (event) => {
-      if (this.removable) {
-        const actionElement = getElementFromEvent(event, (node) => node.getAttribute("part") === "action");
-        if (actionElement) return;
-      }
-      if (!this.interactive) {
-        event.stopPropagation();
-      }
-    });
-  }
-  render() {
-    return html`
-      <odx-text part="content" size="sm" highlight odxPreventTextOverflow>
-        <slot></slot>
-      </odx-text>
-      ${when(this.removable, () => this.renderAction())}
-    `;
-  }
-  renderAction() {
-    return html`
-      <button part="action" @click=${__privateGet$e(this, _handleActionClick)}>
-        <odx-icon name="close" set="core"></odx-icon>
-      </button>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("interactive") || changes.has("disabled")) {
-      if (!this.disabled) {
-        toggleAttribute(this, "tabindex", this.interactive ? 0 : null);
-        toggleAttribute(this.actionElement, "tabindex", this.interactive ? -1 : null);
-      }
-    }
-  }
-  updated(changes) {
-    if (changes.has("removable") || changes.has("interactive") || changes.has("disabled")) {
-      if (this.removable || this.interactive) {
-        this.addEventListener("click", __privateGet$e(this, _handleClick$3), { capture: true });
-      } else {
-        this.removeEventListener("click", __privateGet$e(this, _handleClick$3));
-      }
-    }
-  }
-};
-_handleActionClick = new WeakMap();
-_handleClick$3 = new WeakMap();
-__decorateClass$y([
-  query('[part="action"]')
-], OdxChipElement.prototype, "actionElement", 2);
-__decorateClass$y([
-  property({ type: Boolean, reflect: true })
-], OdxChipElement.prototype, "removable", 2);
-__decorateClass$y([
-  property({ type: Boolean, reflect: true })
-], OdxChipElement.prototype, "interactive", 2);
-__decorateClass$y([
-  property({ reflect: true })
-], OdxChipElement.prototype, "variant", 2);
-OdxChipElement = __decorateClass$y([
-  customElement("odx-chip", [styles$v])
-], OdxChipElement);
-
-const ChipVariant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  ACCENT: "accent",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-
 const styles$u = "@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--_indicator-color: var(--odx-color-primary);--_track-color: var(--odx-palette-coolgray-10);aspect-ratio:1;display:flex;place-content:center;place-items:center;color:currentColor;block-size:100%;inline-size:100%;position:relative}:host([size=\"small\"]){--_size: var(--odx-size-300)}:host([size=\"medium\"]){--_size: var(--odx-size-400)}:host([size=\"large\"]){--_size: var(--odx-size-600)}:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}";
 
 const CircularProgressBarSize = {
@@ -1239,14 +1138,15 @@ var __decorateClass$g = (decorators, target, key, kind) => {
 var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
 var __privateGet$6 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _removeChip, _handleDropdownClick;
+var _removeChip, _handleOptionChange;
 let OdxSelectElement = class extends SelectControl {
   constructor() {
     super(...arguments);
     __privateAdd$8(this, _removeChip, async (option) => {
+      option.selected = false;
       this.toggle(option);
     });
-    __privateAdd$8(this, _handleDropdownClick, (event) => {
+    __privateAdd$8(this, _handleOptionChange, (event) => {
       const option = getElementFromEvent(event, (node) => !!this.options?.some((option2) => option2 === node));
       if (!option) return;
       event.stopPropagation();
@@ -1266,7 +1166,7 @@ let OdxSelectElement = class extends SelectControl {
     )}
           <odx-icon part="indicator" name="chevron-down" set="core"></odx-icon>
         </div>
-        <odx-dropdown part="dropdown" anchor="select-trigger" ?disabled=${this.disabled} matchReferenceWidth @click=${__privateGet$6(this, _handleDropdownClick)}>
+        <odx-dropdown part="dropdown" anchor="select-trigger" ?disabled=${this.disabled} matchReferenceWidth @change=${__privateGet$6(this, _handleOptionChange)}>
           <slot></slot>
         </odx-dropdown>
     `;
@@ -1276,14 +1176,14 @@ let OdxSelectElement = class extends SelectControl {
     if (this.multiple) {
       return html`${repeat(
         selectedOptions,
-        (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _removeChip).call(this, option)} interactive removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
+        (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
       )}`;
     }
     return html`${selectedOptions[0]?.getTextLabel()}`;
   }
 };
 _removeChip = new WeakMap();
-_handleDropdownClick = new WeakMap();
+_handleOptionChange = new WeakMap();
 __decorateClass$g([
   queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
 ], OdxSelectElement.prototype, "options", 2);
@@ -2345,4 +2245,4 @@ OdxTooltipElement = __decorateClass([
   customElement("odx-tooltip", [styles])
 ], OdxTooltipElement);
 
-export { CardElement, ChipVariant, CircularProgressBarSize, DropdownPlacement, GridGap, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, OdxAccordionElement, OdxAccordionHeaderElement, OdxAccordionPanelElement, OdxChipElement, OdxCircularProgressBarElement, OdxDropdownElement, OdxFormFieldElement, OdxGrid, OdxInlineMessageElement, OdxListElement, OdxListItemElement, OdxLoadingOverlayElement, OdxMainMenuButtonElement, OdxMainMenuElement, OdxMainMenuLink, OdxMainMenuSubtitleElement, OdxMainMenuTitleElement, OdxMenuElement, OdxMenuItemElement, OdxMenuLabelElement, OdxProgressBarElement, OdxSelectElement, OdxSkeletonElement, OdxSliderElement, OdxSliderHandleElement, OdxSliderMarksElement, OdxSpinboxElement, OdxSwitchElement, OdxTableBodyElement, OdxTableCellElement, OdxTableCheckboxCellElement, OdxTableElement, OdxTableHeaderCellElement, OdxTableHeaderElement, OdxTableRowElement, OdxToastElement, OdxToggleButtonElement, OdxTooltipElement, ProgressState, SliderLabelVisibility, SliderTrackVisibility, ToastVariant, TooltipPlacement };
+export { CardElement, CircularProgressBarSize, DropdownPlacement, GridGap, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, OdxAccordionElement, OdxAccordionHeaderElement, OdxAccordionPanelElement, OdxCircularProgressBarElement, OdxDropdownElement, OdxFormFieldElement, OdxGrid, OdxInlineMessageElement, OdxListElement, OdxListItemElement, OdxLoadingOverlayElement, OdxMainMenuButtonElement, OdxMainMenuElement, OdxMainMenuLink, OdxMainMenuSubtitleElement, OdxMainMenuTitleElement, OdxMenuElement, OdxMenuItemElement, OdxMenuLabelElement, OdxProgressBarElement, OdxSelectElement, OdxSkeletonElement, OdxSliderElement, OdxSliderHandleElement, OdxSliderMarksElement, OdxSpinboxElement, OdxSwitchElement, OdxTableBodyElement, OdxTableCellElement, OdxTableCheckboxCellElement, OdxTableElement, OdxTableHeaderCellElement, OdxTableHeaderElement, OdxTableRowElement, OdxToastElement, OdxToggleButtonElement, OdxTooltipElement, ProgressState, SliderLabelVisibility, SliderTrackVisibility, ToastVariant, TooltipPlacement };

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

@@ -6,8 +6,8 @@ export declare abstract class SelectControl<Option extends OptionControl = Optio
     #private;
     protected abstract options: Option[];
     multiple: boolean;
-    get selectedOptions(): MapIterator<Option>;
     value: string[] | string;
+    get selectedOptions(): MapIterator<Option>;
     toggle(option: Option): void;
     protected willUpdate(changes: PropertyValues<this>): void;
     protected updateSelection(): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"select-control.d.ts","sourceRoot":"","sources":["../../../src/lib/facade/select-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,aAAa,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,kBAAmE;;IAG3J,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAGrC,QAAQ,UAAS;IAEjB,IAAI,eAAe,IAAI,WAAW,CAAC,MAAM,CAAC,CAEzC;IAGQ,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAM;IAEvC,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-control.d.ts","sourceRoot":"","sources":["../../../src/lib/facade/select-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,aAAa,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,kBAAmE;;IAG3J,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"}

package/dist/main.js

@@ -690,8 +690,8 @@ class SelectControl extends FormControl(CustomElement) {
   }
   toggle(option) {
     if (this.multiple) {
-      const value = typeof this.value === "string" ? [this.value] : this.value;
-      this.value = option.selected ? value.filter((value2) => value2 !== option.value) : [...value, option.value];
+      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);
     } else {
       this.value = option.value;
     }

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.7",
+  "version": "0.1.0-alpha.9",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",

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

@@ -1 +0,0 @@
-{"version":3,"file":"chip.element.d.ts","sourceRoot":"","sources":["../../../src/elements/chip/chip.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAuD,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;;AAED,qBACa,cAAe,SAAQ,mBAA4B;;IAE9D,SAAS,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IAGtC,SAAS,UAAS;IAGlB,WAAW,UAAS;IAGpB,OAAO,CAAC,EAAE,WAAW,CAAC;cAEH,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,YAAY,IAAI,cAAc;cAQrB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAU/C,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CA0BhE"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}

package/dist/elements/chip/models/chip-variant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chip-variant.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/models/chip-variant.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACzE,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC"}

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

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

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

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