@odx/foundation 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/rail-navigation/rail-navigation.component.js

@@ -0,0 +1,74 @@
+import { IsTranslatable, CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import styles from './rail-navigation.component.css.js';
+import { NavigationItemSize } from '../navigation-item/navigation-item.models.js';
+import { OdxNavigationItemComponent } from '../navigation-item/navigation-item.component.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+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 _handleControlClick, _handleSlotChange;
+let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.collapsed = false;
+    __privateAdd(this, _handleControlClick, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.collapsed = !this.collapsed;
+    });
+    __privateAdd(this, _handleSlotChange, () => {
+      for (const item of this.navigationItems) {
+        item.size = NavigationItemSize.LG;
+      }
+    });
+  }
+  render() {
+    const controlLabel = this._translate(this.collapsed ? "controlLabelCollapsed" : "controlLabelExpanded") || null;
+    return html`
+      <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
+      <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet(this, _handleControlClick)}>
+        <odx-icon class="toggle-icon" name="core::chevron-left" slot="start"></odx-icon>
+        <odx-visually-hidden>${controlLabel}</odx-visually-hidden>
+      </odx-navigation-item>
+    `;
+  }
+  getItems() {
+    return this.navigationItems;
+  }
+  _getTranslations() {
+    return {
+      en: {
+        controlLabelExpanded: "Collapse navigation",
+        controlLabelCollapsed: "Expand navigation"
+      }
+    };
+  }
+};
+_handleControlClick = new WeakMap();
+_handleSlotChange = new WeakMap();
+__decorateClass([
+  queryAssignedElements({ selector: OdxNavigationItemComponent.selector, flatten: true })
+], OdxRailNavigationComponent.prototype, "navigationItems", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxRailNavigationComponent.prototype, "collapsed", 2);
+OdxRailNavigationComponent = __decorateClass([
+  customElement("odx-rail-navigation", [styles])
+], OdxRailNavigationComponent);
+
+export { OdxRailNavigationComponent };

package/dist/components/search-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/search-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/components/search-bar/search-bar.component.css.js

@@ -0,0 +1,3 @@
+const styles = "*{box-sizing:border-box}:host{--odx-search-max-inline-size: 35em;--_color-stroke: var(--odx-color-input-control-stroke);--_color-background: var(--odx-color-input-control-fill);--_block-size: var(--odx-size-225);display:grid;grid-template-columns:auto 1fr;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_block-size);border-radius:var(--odx-border-radius-sm);max-width:var(--odx-search-max-inline-size);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host(:focus-within){--_color-stroke: var(--odx-color-input-control-stroke-pressed)}label,::slotted(label){cursor:default;user-select:none;padding-inline:var(--odx-size-50);min-inline-size:var(--odx-size-225);text-align:center;display:flex;place-content:center}odx-icon[name=\"core::search\"]{--size: var(--odx-typography-font-size-5)}::slotted(input[type=\"search\"]){background-color:inherit;border:none;margin:0;padding:0;color:inherit;inline-size:100%}::slotted(input[type=\"search\"]:focus-visible){outline:0}::slotted(input[type=\"search\"])::placeholder{color:var(--odx-color-foreground-muted)}";
+
+export { styles as default };

package/dist/components/search-bar/search-bar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.component.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAE/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF;AAED,UAAU,aAAa;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,qBACa,qBAAsB,SAAQ,aAAa;;IAStD,OAAO,CAAC,aAAa,CAAsB;IAE3C,IAAI,YAAY,IAAI,gBAAgB,GAAG,IAAI,CAE1C;IAGD,QAAQ,EAAE,iBAAiB,CAA4B;IAGvD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEb,iBAAiB;cAKP,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI;cAO1C,MAAM,IAAI,cAAc;CAsC5C"}
+{"version":3,"file":"search-bar.component.d.ts","sourceRoot":"","sources":["../../../components/search-bar/search-bar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAE/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF;AAED,UAAU,aAAa;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,qBACa,qBAAsB,SAAQ,aAAa;;IAStD,OAAO,CAAC,aAAa,CAAsB;IAE3C,IAAI,YAAY,IAAI,gBAAgB,GAAG,IAAI,CAE1C;IAGD,QAAQ,EAAE,iBAAiB,CAA4B;IAGvD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEb,iBAAiB;cAKP,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI;cAO1C,MAAM,IAAI,cAAc;CAsC5C"}

package/dist/components/search-bar/search-bar.component.js

@@ -0,0 +1,111 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { debounce } from 'es-toolkit';
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import styles from './search-bar.component.css.js';
+import { SearchEvent } from './search-bar.events.js';
+import { SearchBarBehavior } from './search-bar.models.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleSlotChange, _handleInputSearch, _handleInputChange, updateValue_fn;
+let OdxSearchBarComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxSearchBarComponent_instances);
+    __privateAdd(this, _value);
+    __privateAdd(this, _search, this.search.bind(this));
+    this.behavior = SearchBarBehavior.SUBMIT;
+    __privateAdd(this, _handleSlotChange, () => {
+      if (!this.inputElement) return;
+      this.inputElement.type = "search";
+      this.inputElement.spellcheck = false;
+      this.inputElement.autocomplete = "off";
+    });
+    __privateAdd(this, _handleInputSearch, (event) => {
+      if (event.target !== this.inputElement) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.search(__privateGet(this, _OdxSearchBarComponent_instances, inputValue_get));
+    });
+    __privateAdd(this, _handleInputChange, (event) => {
+      if (event.target !== this.inputElement || this.behavior !== SearchBarBehavior.INSTANT) return;
+      event.preventDefault();
+      event.stopPropagation();
+      __privateGet(this, _search).call(this, __privateGet(this, _OdxSearchBarComponent_instances, inputValue_get));
+    });
+  }
+  get inputElement() {
+    return this.inputElements[0] ?? null;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "presentation";
+  }
+  updated(props) {
+    if (props.has("debounceTime")) {
+      __privateSet(this, _search, typeof this.debounceTime === "number" ? debounce(this.search.bind(this), this.debounceTime) : this.search.bind(this));
+    }
+  }
+  search(value, options) {
+    if (__privateGet(this, _value) === value && options?.forceUpdate !== true) return;
+    __privateMethod(this, _OdxSearchBarComponent_instances, updateValue_fn).call(this, value, options?.updateInput);
+    if (options?.dispatchEvent === false) return;
+    this.dispatchEvent(new SearchEvent(value, this.inputElement?.value));
+  }
+  render() {
+    return html`
+      <slot name="label">
+        <label>
+          <odx-icon name="core::search">s</odx-icon>
+          <odx-visually-hidden>Search</odx-visually-hidden>
+        </label>
+      </slot>
+      <slot @slotchange=${__privateGet(this, _handleSlotChange)} @search=${__privateGet(this, _handleInputSearch)} @input=${__privateGet(this, _handleInputChange)}></slot>
+    `;
+  }
+};
+_value = new WeakMap();
+_search = new WeakMap();
+_OdxSearchBarComponent_instances = new WeakSet();
+inputValue_get = function() {
+  return (this.inputElement?.value ?? "").replace(/\s\s+/g, " ").trim();
+};
+_handleSlotChange = new WeakMap();
+_handleInputSearch = new WeakMap();
+_handleInputChange = new WeakMap();
+updateValue_fn = function(value, updateInput = false) {
+  __privateSet(this, _value, value);
+  if (!updateInput || !this.inputElement) return;
+  this.inputElement.value = value;
+};
+__decorateClass([
+  queryAssignedElements({ selector: "input", flatten: true })
+], OdxSearchBarComponent.prototype, "inputElements", 2);
+__decorateClass([
+  property()
+], OdxSearchBarComponent.prototype, "behavior", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxSearchBarComponent.prototype, "debounceTime", 2);
+OdxSearchBarComponent = __decorateClass([
+  customElement("odx-search-bar", [styles])
+], OdxSearchBarComponent);
+
+export { OdxSearchBarComponent };

package/dist/components/search-bar/search-bar.events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.events.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.events.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAY,SAAQ,WAAW,CAAC;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;gBACpE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;CAG7C"}
+{"version":3,"file":"search-bar.events.d.ts","sourceRoot":"","sources":["../../../components/search-bar/search-bar.events.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAY,SAAQ,WAAW,CAAC;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;gBACpE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;CAG7C"}

package/dist/components/search-bar/search-bar.events.js

@@ -0,0 +1,7 @@
+class SearchEvent extends CustomEvent {
+  constructor(value, rawValue) {
+    super("search", { detail: { rawValue, value } });
+  }
+}
+
+export { SearchEvent };

package/dist/components/search-bar/search-bar.models.d.ts.map

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

package/dist/components/search-bar/search-bar.models.js

@@ -0,0 +1,6 @@
+const SearchBarBehavior = {
+  INSTANT: "instant",
+  SUBMIT: "submit"
+};
+
+export { SearchBarBehavior };

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);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:left;padding:var(--_padding-block) var(--_padding-inline);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-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
+
+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;cAmB9B,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAsBnE"}

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

@@ -0,0 +1,100 @@
+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.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;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+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 __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, _OdxSelectComponent_instances);
+    __privateAdd(this, _handleDropdownToggle, (event) => {
+      if (event.newState === "open") {
+        this.options[0]?.setActive();
+      }
+    });
+    __privateAdd(this, _removeChip, async (option) => {
+      this.toggle(option, false, true);
+    });
+  }
+  render() {
+    return html`
+      <div class="base" id="select-trigger" tabindex="0">
+        <div class="value" odxPreventTextOverflow>
+          ${when(
+      Array.from(this.selectedOptions).length,
+      () => this.renderSelectedOptions(),
+      () => html`<slot name="placeholder">Select options</slot>`
+    )}
+        </div>
+        <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() {
+    const selectedOptions = Array.from(this.selectedOptions);
+    if (this.multiple) {
+      const maxOptions = 2;
+      const visibleOptions = selectedOptions.slice(0, maxOptions);
+      const showExtra = selectedOptions.length > maxOptions;
+      return html`
+        ${repeat(
+        visibleOptions,
+        (option) => html`<odx-chip @remove=${() => __privateGet(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
+      )}
+        ${when(showExtra, () => html`<odx-chip>+${selectedOptions.length - maxOptions}</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();
+__decorateClass([
+  queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
+], OdxSelectComponent.prototype, "options", 2);
+__decorateClass([
+  query(OdxDropdownComponent.selector, true)
+], OdxSelectComponent.prototype, "dropdownElement", 2);
+OdxSelectComponent = __decorateClass([
+  customElement("odx-select", [styles])
+], OdxSelectComponent);
+
+export { OdxSelectComponent };

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-25);display:block;block-size:var(--size);background-color:var(--color);margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space);pointer-events:none;user-select:none}:host([vertical]:not([vertical=\"false\"])){min-block-size:var(--odx-size-100);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size);margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size))}:host([highlight]:not([highlight=\"false\"])){--color: var(--odx-color-separator-strong)}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"separator.component.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,qBAAqB,CAAC;KACxC;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;IAEtD,SAAS,UAAS;IAGlB,QAAQ,UAAS;cAEE,MAAM,IAAI,MAAM;CAGpC"}
+{"version":3,"file":"separator.component.d.ts","sourceRoot":"","sources":["../../../components/separator/separator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,qBAAqB,CAAC;KACxC;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;IAEtD,SAAS,UAAS;IAGlB,QAAQ,UAAS;cAEE,MAAM,IAAI,MAAM;CAGpC"}

package/dist/components/separator/separator.component.js

@@ -0,0 +1,35 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './separator.component.css.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+let OdxSeparatorComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.highlight = false;
+    this.vertical = false;
+  }
+  render() {
+    return "";
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSeparatorComponent.prototype, "highlight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSeparatorComponent.prototype, "vertical", 2);
+OdxSeparatorComponent = __decorateClass([
+  customElement("odx-separator", [styles])
+], OdxSeparatorComponent);
+
+export { OdxSeparatorComponent };

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

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

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}:host-context(odx-rail-navigation){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
+
+export { styles as default };

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

@@ -0,0 +1,13 @@
+import { CustomElement } from '@odx/foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-spacer': OdxSpacerComponent;
+    }
+}
+export declare class OdxSpacerComponent extends CustomElement {
+    horizontal: boolean;
+    dynamic: boolean;
+    fill: boolean;
+    protected render(): string;
+}
+//# sourceMappingURL=spacer.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.component.d.ts","sourceRoot":"","sources":["../../../components/spacer/spacer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;AAED,qBACa,kBAAmB,SAAQ,aAAa;IAEnD,UAAU,UAAS;IAGnB,OAAO,UAAS;IAGhB,IAAI,UAAS;cAEM,MAAM,IAAI,MAAM;CAGpC"}

package/dist/components/spacer/spacer.component.js

@@ -0,0 +1,39 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './spacer.component.css.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+let OdxSpacerComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.horizontal = false;
+    this.dynamic = false;
+    this.fill = false;
+  }
+  render() {
+    return "";
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "horizontal", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "dynamic", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "fill", 2);
+OdxSpacerComponent = __decorateClass([
+  customElement("odx-spacer", [styles])
+], OdxSpacerComponent);
+
+export { OdxSpacerComponent };

package/dist/components/spacer/spacer.models.d.ts

@@ -0,0 +1,7 @@
+export type SpacerPushDirection = (typeof SpacerPushDirection)[keyof typeof SpacerPushDirection];
+export declare const SpacerPushDirection: {
+    readonly START: "start";
+    readonly END: "end";
+    readonly BOTH: "both";
+};
+//# sourceMappingURL=spacer.models.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.models.d.ts","sourceRoot":"","sources":["../../../components/spacer/spacer.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AACjG,eAAO,MAAM,mBAAmB;;;;CAItB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
+
+export { styles as default };

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

@@ -2,20 +2,19 @@ import { CanBeDisabled, CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-spinbox': OdxSpinboxElement;
+        'odx-spinbox': OdxSpinboxComponent;
     }
 }
-declare const OdxSpinboxElement_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxSpinboxElement extends OdxSpinboxElement_base {
+declare const OdxSpinboxComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxSpinboxComponent extends OdxSpinboxComponent_base {
     #private;
     static shadowRootOptions: ShadowRootInit;
     private inputElements;
     compact: boolean;
     get inputElement(): HTMLInputElement | null;
-    connectedCallback(): void;
     protected render(): TemplateResult;
     stepUp(): void;
     stepDown(): void;
 }
 export {};
-//# sourceMappingURL=spinbox.element.d.ts.map
+//# sourceMappingURL=spinbox.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinbox.component.d.ts","sourceRoot":"","sources":["../../../components/spinbox/spinbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF;;AAED,qBACa,mBAAoB,SAAQ,wBAA4B;;IACnE,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAGF,OAAO,CAAC,aAAa,CAAsB;IAG3C,OAAO,UAAS;IAEhB,IAAI,YAAY,IAAI,gBAAgB,GAAG,IAAI,CAE1C;cAEkB,MAAM,IAAI,cAAc;IA4B3C,MAAM,IAAI,IAAI;IAMd,QAAQ,IAAI,IAAI;CAkBjB"}