@oscarpalmer/oui 0.32.0 → 0.34.0

package/dist/css/combobox.css

@@ -22,15 +22,16 @@
   background-position: right 0.5em center;
   background-repeat: no-repeat;
   background-size: 1em;
+  position: relative;
 }
-:where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):focus), :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):has(+ [oui-combobox-content]:focus-within)) {
+:where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):focus), :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):focus-within), :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):has(+ [oui-combobox-content]:focus-within)) {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
 @media (hover: hover) {
-  :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):hover) {
+  :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover) {
     --oui-border-value: var(--oui-blue-4);
     --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
@@ -38,16 +39,25 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i])) {
+:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i])) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i]):focus) {
+:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus) {
   --oui-outline-percentage: 75%;
 }
 :where([oui-combobox-anchor]:is([disabled], [aria-disabled=true i])) {
   --oui-background-percentage: 50%;
 }
+:where([oui-combobox-anchor] > button) {
+  border: none;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+:where([oui-combobox-anchor] > button:focus) {
+  outline: none;
+}
 
 :where([oui-combobox-content]) {
   --margin-bottom: 0.5em;
@@ -77,7 +87,7 @@
   height: fit-content;
   max-width: max(25vw, 32rem);
   max-height: max(25vh, 32rem);
-  min-width: var(--oui-combobox-width, auto);
+  min-width: anchor-size(width);
   flex-flow: column nowrap;
   border-radius: 0.25em;
 }
@@ -85,12 +95,6 @@
   display: flex !important;
 }
 
-:where([oui-combobox-empty]) {
-  padding: 1em;
-  text-align: center;
-  font-style: italic;
-}
-
 :where([oui-combobox-filter], [oui-combobox-header])::after {
   content: "";
   width: 100%;
@@ -131,14 +135,14 @@
   border-radius: 0.25em;
   font-size: 0.875rem;
 }
-:where(:where([oui-combobox-filter-input]):not([disabled], [readonly], [aria-disabled=true i]):focus) {
+:where(:where([oui-combobox-filter-input]):focus) {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
 @media (hover: hover) {
-  :where(:where([oui-combobox-filter-input]):not([disabled], [readonly], [aria-disabled=true i]):hover) {
+  :where(:where([oui-combobox-filter-input]):hover) {
     --oui-border-value: var(--oui-blue-4);
     --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
@@ -146,29 +150,17 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i])) {
+:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i])) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i]):focus) {
+:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus) {
   --oui-outline-percentage: 75%;
 }
 :where(:where([oui-combobox-filter-input]):is([disabled], [aria-disabled=true i])) {
   --oui-background-percentage: 50%;
 }
 
-:where([oui-combobox-filter-label]) {
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  clip-path: inset(50%) !important;
-  overflow: hidden !important;
-  border: 0 !important;
-  white-space: nowrap !important;
-  display: inline-flex;
-  position: absolute;
-}
-
 :where([oui-combobox-header]) {
   padding: 0.5em 1em;
   background-color: var(--oui-gray-0);
@@ -179,11 +171,28 @@
   z-index: 1;
 }
 
+:where([oui-combobox-hidden]) {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  position: absolute;
+}
+
 :where([oui-combobox-list]) {
   overflow: auto;
   position: relative;
 }
 
+:where([oui-combobox-message]) {
+  padding: 1em;
+  text-align: center;
+  font-style: italic;
+}
+
 :where([oui-combobox-option]) {
   padding: 0.5em 0.75em;
   outline: 4px solid transparent;
@@ -201,7 +210,7 @@
   margin: 0 0.75em 0 0;
 }
 @media (hover: hover) {
-  :where(:where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i]) [oui-combobox-option]):hover) {
+  :where(:where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-option]):hover) {
     background-color: var(--oui-blue-1);
     color: var(--oui-blue-8);
   }
@@ -222,29 +231,71 @@
   gap: 0.5em;
   overflow: auto;
   list-style: none;
+  position: relative;
+  z-index: 2;
 }
 
 :where([oui-combobox-selection-item]) {
-  --oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
+  --oui-background-percentage: 25%;
+  --oui-foreground-percentage: 0%;
+  --oui-outline-percentage: 100%;
+  --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
+  --oui-shadow-percentage: 82.5%;
+  --oui-shadow-value: color-mix(
+  	in oklab,
+  	var(--oui-outline-value, var(--oui-gray-6)),
+  	transparent var(--oui-shadow-percentage)
+  );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
+  padding: 0.5em 0.75em;
   display: inline-flex;
-  flex-flow: row nowrap;
-  gap: 0.5em;
-  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
-  color: var(--oui-foreground, var(--oui-gray-8));
-  line-height: 1.25;
-  border-radius: 3em;
-  padding: 0.5em 1em;
+  flex-flow: row wrap;
   gap: 0.75em;
-  font-size: 0.875em;
+  align-items: center;
+  border-radius: 0.25em;
+  background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
+  border: none;
+  color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
   transition: 0.125s ease-in-out;
+  --oui-background-value: var(--oui-blue-1);
+  --oui-foreground-percentage: 12.5%;
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-shadow-percentage: 90%;
+  padding: 0.5em 1em;
+  flex-wrap: nowrap;
+  border-radius: 5em;
+  font-size: 0.75em;
+  white-space: nowrap;
+}
+:where(oui-combobox:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-selection-item]:focus-visible) {
+  --oui-outline-percentage: 87.5%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+:where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-selection-item]:focus-visible) {
+  --oui-background-value: var(--oui-red-1);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-red-6);
 }
 @media (hover: hover) {
-  :where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i]) [oui-combobox-selection-item]:hover) {
-    --oui-background: var(--oui-red-0);
-    --oui-foreground: var(--oui-red-8);
-    --oui-shadow: var(--oui-red-6);
+  :where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-selection-item]:hover) {
+    --oui-background-value: var(--oui-red-1);
+    --oui-foreground-value: var(--oui-red-8);
+    --oui-outline-value: var(--oui-red-6);
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
   }
 }
+:where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-selection-item]:active) {
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+}
+:where(oui-combobox:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-selection-item]) {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 20%;
+  --oui-shadow-percentage: 95%;
+  font-style: italic;
+}
 
 

package/dist/js/combobox/constants.combobox.d.mts

@@ -0,0 +1,2 @@
+import { C as COMBOBOX_TYPES, S as COMBOBOX_TAGNAME, _ as COMBOBOX_MESSAGE_LABEL, a as COMBOBOX_ATTRIBUTE_HEADER, b as COMBOBOX_SELECTOR_OPTION, c as COMBOBOX_ATTRIBUTE_MESSAGE, d as COMBOBOX_ATTRIBUTE_SELECTION, f as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, g as COMBOBOX_KEYS_SELECTION, h as COMBOBOX_KEYS_NAVIGATION, i as COMBOBOX_ATTRIBUTE_FILTER_INPUT, l as COMBOBOX_ATTRIBUTE_OPTION, m as COMBOBOX_KEYS_ACTIVATION, n as COMBOBOX_ATTRIBUTE_CONTENT, o as COMBOBOX_ATTRIBUTE_HIDDEN, p as COMBOBOX_AUTOCOMPLETES, r as COMBOBOX_ATTRIBUTE_FILTER, s as COMBOBOX_ATTRIBUTE_LIST, t as COMBOBOX_ATTRIBUTE_ANCHOR, u as COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, v as COMBOBOX_MESSAGE_SELECT, w as comboboxScrollOptions, x as COMBOBOX_SELECTOR_SELECTION_ITEM, y as COMBOBOX_SELECTOR_ANCHOR } from "../constants.combobox-DqNUGBLS.mjs";
+export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_CONTENT, COMBOBOX_ATTRIBUTE_FILTER, COMBOBOX_ATTRIBUTE_FILTER_INPUT, COMBOBOX_ATTRIBUTE_HEADER, COMBOBOX_ATTRIBUTE_HIDDEN, COMBOBOX_ATTRIBUTE_LIST, COMBOBOX_ATTRIBUTE_MESSAGE, COMBOBOX_ATTRIBUTE_OPTION, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_KEYS_ACTIVATION, COMBOBOX_KEYS_NAVIGATION, COMBOBOX_KEYS_SELECTION, COMBOBOX_MESSAGE_LABEL, COMBOBOX_MESSAGE_SELECT, COMBOBOX_SELECTOR_ANCHOR, COMBOBOX_SELECTOR_OPTION, COMBOBOX_SELECTOR_SELECTION_ITEM, COMBOBOX_TAGNAME, COMBOBOX_TYPES, comboboxScrollOptions };

package/dist/js/combobox/constants.combobox.mjs

@@ -0,0 +1,46 @@
+//#region src/js/combobox/constants.combobox.ts
+const COMBOBOX_TAGNAME = "oui-combobox";
+const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
+const COMBOBOX_ATTRIBUTE_CONTENT = `${COMBOBOX_TAGNAME}-content`;
+const COMBOBOX_ATTRIBUTE_FILTER = `${COMBOBOX_TAGNAME}-filter`;
+const COMBOBOX_ATTRIBUTE_FILTER_INPUT = `${COMBOBOX_ATTRIBUTE_FILTER}-input`;
+const COMBOBOX_ATTRIBUTE_HEADER = `${COMBOBOX_TAGNAME}-header`;
+const COMBOBOX_ATTRIBUTE_HIDDEN = `${COMBOBOX_TAGNAME}-hidden`;
+const COMBOBOX_ATTRIBUTE_LIST = `${COMBOBOX_TAGNAME}-list`;
+const COMBOBOX_ATTRIBUTE_MESSAGE = `${COMBOBOX_TAGNAME}-message`;
+const COMBOBOX_ATTRIBUTE_OPTION = `${COMBOBOX_TAGNAME}-option`;
+const COMBOBOX_ATTRIBUTE_OPTION_ACTIVE = `${COMBOBOX_TAGNAME}-option-active`;
+const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
+const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
+const COMBOBOX_AUTOCOMPLETES = /* @__PURE__ */ new Set([
+	"both",
+	"inline",
+	"list",
+	"none"
+]);
+const COMBOBOX_KEYS_ACTIVATION = /* @__PURE__ */ new Set([
+	" ",
+	"Backspace",
+	"Delete",
+	"Enter"
+]);
+const COMBOBOX_KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const COMBOBOX_KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
+const COMBOBOX_MESSAGE_LABEL = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+const COMBOBOX_MESSAGE_SELECT = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
+const COMBOBOX_SELECTOR_ANCHOR = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
+const COMBOBOX_SELECTOR_SELECTION_ITEM = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
+const COMBOBOX_SELECTOR_OPTION = `[${COMBOBOX_ATTRIBUTE_OPTION}]`;
+const COMBOBOX_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
+const comboboxScrollOptions = {
+	behavior: "auto",
+	block: "nearest",
+	inline: "nearest"
+};
+//#endregion
+export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_CONTENT, COMBOBOX_ATTRIBUTE_FILTER, COMBOBOX_ATTRIBUTE_FILTER_INPUT, COMBOBOX_ATTRIBUTE_HEADER, COMBOBOX_ATTRIBUTE_HIDDEN, COMBOBOX_ATTRIBUTE_LIST, COMBOBOX_ATTRIBUTE_MESSAGE, COMBOBOX_ATTRIBUTE_OPTION, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_KEYS_ACTIVATION, COMBOBOX_KEYS_NAVIGATION, COMBOBOX_KEYS_SELECTION, COMBOBOX_MESSAGE_LABEL, COMBOBOX_MESSAGE_SELECT, COMBOBOX_SELECTOR_ANCHOR, COMBOBOX_SELECTOR_OPTION, COMBOBOX_SELECTOR_SELECTION_ITEM, COMBOBOX_TAGNAME, COMBOBOX_TYPES, comboboxScrollOptions };

package/dist/js/combobox/data.combobox.d.mts

@@ -0,0 +1,18 @@
+import { I as OuiComboboxState } from "../constants.combobox-DqNUGBLS.mjs";
+//#region src/js/combobox/data.combobox.d.ts
+type ApplySelectionParameters = {
+  added: boolean;
+  emit?: boolean;
+  option?: HTMLElement;
+  selected?: HTMLElement[];
+  state: OuiComboboxState;
+  values?: string[];
+};
+declare function applyComboboxSelection(parameters: ApplySelectionParameters): void;
+declare function filterComboboxOption(state: OuiComboboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
+declare function filterComboboxOptions(state: OuiComboboxState): HTMLElement | undefined;
+declare function setComboboxValue(state: OuiComboboxState, value: unknown, emit?: boolean): void;
+declare function setComboboxValues(state: OuiComboboxState, value: unknown, emit?: boolean): void;
+declare function toggleComboboxOption(state: OuiComboboxState, option?: HTMLElement): void;
+//#endregion
+export { applyComboboxSelection, filterComboboxOption, filterComboboxOptions, setComboboxValue, setComboboxValues, toggleComboboxOption };

package/dist/js/combobox/data.combobox.mjs

@@ -0,0 +1,2 @@
+import { a as setComboboxValues, i as setComboboxValue, n as filterComboboxOption, o as toggleComboboxOption, r as filterComboboxOptions, t as applyComboboxSelection } from "../data.combobox-8RwBv5ey.mjs";
+export { applyComboboxSelection, filterComboboxOption, filterComboboxOptions, setComboboxValue, setComboboxValues, toggleComboboxOption };

package/dist/js/combobox/dom.combobox.d.mts

@@ -0,0 +1,110 @@
+import { D as OuiComboboxAutoCompleteType, E as OuiComboboxAutoComplete, F as OuiComboboxSelectionItem, I as OuiComboboxState, L as OuiComboboxType, N as OuiComboboxPreview, P as OuiComboboxSelection, k as OuiComboboxGroup } from "../constants.combobox-DqNUGBLS.mjs";
+//#region src/js/combobox/dom.combobox.d.ts
+type CreateAnchor = {
+  container?: HTMLElement;
+  element: HTMLElement;
+  selection?: OuiComboboxSelection;
+};
+type CreatAnchorParameters = {
+  autocomplete: OuiComboboxAutoComplete;
+  id: string;
+  label: HTMLLabelElement;
+  multiple: boolean;
+  select: HTMLSelectElement;
+  type: OuiComboboxType;
+};
+type CreateContent = {
+  element: HTMLElement;
+  filter?: CreateFilter;
+  list: CreateList;
+  message: HTMLElement;
+};
+type CreateContentParameters = {
+  autocomplete: OuiComboboxAutoComplete;
+  id: string;
+  label: HTMLLabelElement;
+  multiple: boolean;
+  select: HTMLSelectElement;
+  type: OuiComboboxType;
+};
+type CreateFilter = {
+  container: HTMLElement;
+  element: HTMLInputElement;
+};
+type CreateFilterParameters = {
+  autocomplete: OuiComboboxAutoCompleteType;
+  id: string;
+  label: HTMLLabelElement;
+  type: OuiComboboxType;
+};
+type CreateGroupParameters = {
+  autocomplete: OuiComboboxAutoComplete;
+  group: HTMLOptGroupElement;
+  groupOptions: HTMLOptionElement[];
+  selected: HTMLElement[];
+};
+type CreateInputParameters = {
+  autocomplete: OuiComboboxAutoCompleteType;
+  id: string;
+  label: HTMLLabelElement;
+  type: OuiComboboxType;
+  value: string;
+};
+type CreateList = {
+  element: HTMLElement;
+  groups?: OuiComboboxGroup[];
+  options: HTMLElement[];
+  selected: HTMLElement[];
+};
+type CreateListParameters = {
+  autocomplete: OuiComboboxAutoComplete;
+  id: string;
+  label: HTMLLabelElement;
+  multiple: boolean;
+  select: HTMLSelectElement;
+};
+type CreateOptionParameters = {
+  autocomplete: OuiComboboxAutoComplete;
+  group?: string;
+  index: number;
+  option: HTMLOptionElement;
+};
+type CreateOptionsParameters = {
+  autocomplete: OuiComboboxAutoComplete;
+  group?: string;
+  list: HTMLElement;
+  options: HTMLOptionElement[];
+  selected: HTMLElement[];
+};
+type CreateSelectionItemsParameters = {
+  container: HTMLElement;
+  items: OuiComboboxSelectionItem[];
+  options: HTMLElement[];
+  state?: OuiComboboxState;
+};
+declare function createComboboxAnchor(parameters: CreatAnchorParameters): CreateAnchor;
+declare function createComboboxButton(parameters: CreatAnchorParameters): CreateAnchor;
+declare function createComboboxContent(parameters: CreateContentParameters): CreateContent;
+declare function createComboboxFilter(parameters: CreateFilterParameters): CreateFilter | undefined;
+declare function createComboboxGroup(parameters: CreateGroupParameters): OuiComboboxGroup;
+declare function createComboboxHeader(group: HTMLOptGroupElement): HTMLElement;
+declare function createComboboxInput(parameters: CreateInputParameters): HTMLInputElement;
+declare function createComboboxList(parameters: CreateListParameters): CreateList;
+declare function createComboboxMessage(): HTMLElement;
+declare function createComboboxOption(parameters: CreateOptionParameters): HTMLElement;
+declare function createComboboxOptions(parameters: CreateOptionsParameters): HTMLElement[];
+declare function createComboboxSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection;
+declare function createComboboxSelectionItem(option: HTMLElement, state?: OuiComboboxState): OuiComboboxSelectionItem;
+declare function createComboboxSelectionItems(parameters: CreateSelectionItemsParameters): void;
+declare function setComboboxDisabled(state: OuiComboboxState, value: boolean): void;
+declare function setComboboxReadonly(state: OuiComboboxState, value: boolean): void;
+declare function setComboboxRequired(state: OuiComboboxState, value: boolean): void;
+declare function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLElement): void;
+declare function updateComboboxAnchor(state: OuiComboboxState): void;
+declare function updateComboboxAutocomplete(preview: OuiComboboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+declare function updateComboboxMessage(state: OuiComboboxState, visible: number): void;
+declare function updateComboboxPreview(preview: OuiComboboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+declare function updateComboboxSelection(state: OuiComboboxState, active: HTMLElement | undefined, added: boolean, selected?: HTMLElement[]): void;
+declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
+//#endregion
+export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxFilter, createComboboxGroup, createComboboxHeader, createComboboxInput, createComboboxList, createComboboxMessage, createComboboxOption, createComboboxOptions, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, setComboboxDisabled, setComboboxReadonly, setComboboxRequired, updateComboboxAnchor, updateComboboxAutocomplete, updateComboboxMessage, updateComboboxPreview, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };

package/dist/js/combobox/dom.combobox.mjs

@@ -0,0 +1,2 @@
+import { A as updateComboboxTabindices, C as setComboboxRequired, D as updateComboboxPreview, E as updateComboboxMessage, O as updateComboboxSelection, S as setComboboxReadonly, T as updateComboboxAutocomplete, _ as createComboboxOptions, b as createComboboxSelectionItems, c as createComboboxButton, d as createComboboxGroup, f as createComboboxHeader, g as createComboboxOption, h as createComboboxMessage, k as updateComboboxSelectionItems, l as createComboboxContent, m as createComboboxList, p as createComboboxInput, s as createComboboxAnchor, u as createComboboxFilter, v as createComboboxSelection, w as updateComboboxAnchor, x as setComboboxDisabled, y as createComboboxSelectionItem } from "../data.combobox-8RwBv5ey.mjs";
+export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxFilter, createComboboxGroup, createComboboxHeader, createComboboxInput, createComboboxList, createComboboxMessage, createComboboxOption, createComboboxOptions, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, setComboboxDisabled, setComboboxReadonly, setComboboxRequired, updateComboboxAnchor, updateComboboxAutocomplete, updateComboboxMessage, updateComboboxPreview, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };

package/dist/js/combobox/event.combobox.d.mts

@@ -0,0 +1,17 @@
+import { I as OuiComboboxState } from "../constants.combobox-DqNUGBLS.mjs";
+//#region src/js/combobox/event.combobox.d.ts
+declare function onComboboxClickContent(event: PointerEvent, content: HTMLElement): void;
+declare function onComboboxClickDocument(event: PointerEvent): void;
+declare function onComboboxEnter(state: OuiComboboxState): void;
+declare function onComboboxEscape(state: OuiComboboxState): void;
+declare function onComboboxFilter(type: InputEvent['inputType'], state: OuiComboboxState, manual?: boolean, emit?: boolean): void;
+declare function onComboboxFocusout(state: OuiComboboxState): void;
+declare function onComboboxInput(event: InputEvent): void;
+declare function onComboboxKeydown(event: KeyboardEvent): void;
+declare function onComboboxKeydownSelection(event: KeyboardEvent, state: OuiComboboxState, item: HTMLElement): void;
+declare function onComboboxNavigation(event: KeyboardEvent, state: OuiComboboxState): void;
+declare function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void;
+declare function onComboboxSelection(state: OuiComboboxState): void;
+declare function onComboboxTab(state: OuiComboboxState): void;
+//#endregion
+export { onComboboxClickContent, onComboboxClickDocument, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab };

package/dist/js/combobox/event.combobox.mjs

@@ -0,0 +1,2 @@
+import { $ as onComboboxKeydown, J as onComboboxEnter, K as onComboboxClickContent, Q as onComboboxInput, X as onComboboxFilter, Y as onComboboxEscape, Z as onComboboxFocusout, et as onComboboxKeydownSelection, it as onComboboxTab, nt as onComboboxRemoveSelection, q as onComboboxClickDocument, rt as onComboboxSelection, tt as onComboboxNavigation } from "../data.combobox-8RwBv5ey.mjs";
+export { onComboboxClickContent, onComboboxClickDocument, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab };

package/dist/js/combobox/form.combobox.d.mts

@@ -0,0 +1,6 @@
+import { I as OuiComboboxState } from "../constants.combobox-DqNUGBLS.mjs";
+//#region src/js/combobox/form.combobox.d.ts
+declare function updateComboboxForm(state: OuiComboboxState, values: string[], emit?: boolean): void;
+declare function updateComboboxValidity(state: OuiComboboxState): void;
+//#endregion
+export { updateComboboxForm, updateComboboxValidity };

package/dist/js/combobox/form.combobox.mjs

@@ -0,0 +1,2 @@
+import { M as updateComboboxValidity, j as updateComboboxForm } from "../data.combobox-8RwBv5ey.mjs";
+export { updateComboboxForm, updateComboboxValidity };

package/dist/js/combobox/i18n.combobox.d.mts

@@ -0,0 +1,2 @@
+import { B as getComboboxLanguage, H as setComboboxLocalizations, U as updateComboboxLocalizations, V as getComboboxLocalization } from "../constants.combobox-DqNUGBLS.mjs";
+export { getComboboxLanguage, getComboboxLocalization, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/i18n.combobox.mjs

@@ -0,0 +1,2 @@
+import { F as setComboboxLocalizations, I as updateComboboxLocalizations, N as getComboboxLanguage, P as getComboboxLocalization } from "../data.combobox-8RwBv5ey.mjs";
+export { getComboboxLanguage, getComboboxLocalization, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/index.d.mts

@@ -0,0 +1,2 @@
+import { H as setComboboxLocalizations, z as OuiComboboxElement } from "../constants.combobox-DqNUGBLS.mjs";
+export { OuiComboboxElement, setComboboxLocalizations };

package/dist/js/combobox/index.mjs

@@ -0,0 +1,194 @@
+import { COMBOBOX_TAGNAME } from "./constants.combobox.mjs";
+import { C as setComboboxRequired, F as setComboboxLocalizations, G as setComboboxLimit, I as updateComboboxLocalizations, S as setComboboxReadonly, W as setComboboxFilter, a as setComboboxValues, at as attachCombobox, ct as detachCombobox, i as setComboboxValue, st as createComboboxState, x as setComboboxDisabled } from "../data.combobox-8RwBv5ey.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { parse } from "@oscarpalmer/atoms/string";
+//#region src/js/combobox/index.ts
+var OuiComboboxElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"max",
+		"min",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the combobox disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the combobox be disabled?
+	*/
+	set disabled(value) {
+		if (typeof value === "boolean" && value !== this.disabled) setComboboxDisabled(this.#state, value);
+	}
+	/**
+	* Current filter value
+	*/
+	get filter() {
+		return this.#state.filter.element.value;
+	}
+	/**
+	* Set the filter value
+	*/
+	set filter(value) {
+		setComboboxFilter(this.#state, value);
+	}
+	/**
+	* Maximum number of selected options
+	*/
+	get max() {
+		return this.#state?.max;
+	}
+	/**
+	* Set the maximum number of selected options
+	*/
+	set max(value) {
+		setComboboxLimit("max", this.#state, value);
+	}
+	/**
+	* Minimum number of selected options
+	*/
+	get min() {
+		return this.#state?.min;
+	}
+	/**
+	* Set the minimum number of selected options
+	*/
+	set min(value) {
+		setComboboxLimit("min", this.#state, value);
+	}
+	/**
+	* Does the combobox allow multiple values?
+	*/
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	/**
+	* Name of the combobox
+	*/
+	get name() {
+		return getAttribute(this, "name") ?? "";
+	}
+	/**
+	* Is the combobox readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the combobox be readonly?
+	*/
+	set readonly(value) {
+		if (typeof value === "boolean" && value !== this.readonly) setComboboxReadonly(this.#state, value);
+	}
+	/**
+	* Is the combobox required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the combobox be required?
+	*/
+	set required(value) {
+		if (typeof value === "boolean" && value !== this.required) setComboboxRequired(this.#state, value);
+	}
+	/**
+	* Selected options
+	*/
+	get selected() {
+		return this.#state.options.selected.slice();
+	}
+	/**
+	* Type of combobox
+	*/
+	get type() {
+		return this.#state.type;
+	}
+	/**
+	* Current value
+	*/
+	get value() {
+		return this.#state.values.current[0];
+	}
+	/**
+	* Set the value
+	*/
+	set value(value) {
+		setComboboxValue(this.#state, value);
+	}
+	/**
+	* Current values
+	*/
+	get values() {
+		return this.#state.values.current.slice();
+	}
+	/**
+	* Set the values
+	*/
+	set values(value) {
+		setComboboxValues(this.#state, value);
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		if (this.#state == null) return;
+		switch (name) {
+			case "required":
+				this[name] = this.hasAttribute(name);
+				break;
+			case "max":
+			case "min":
+				setComboboxLimit(name, this.#state, value);
+				break;
+			case "value": this.value = value ?? "";
+		}
+	}
+	/**
+	* Clear all selected options
+	*/
+	clear() {
+		setComboboxValues(this.#state, []);
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attachCombobox(this.#state);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachCombobox(this.#state);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		setComboboxValues(this.#state, this.#state.values.initial, false);
+	}
+	formStateRestoreCallback(state, reason) {
+		if (reason !== "restore") return;
+		const parsed = typeof state === "string" ? parse(state) : void 0;
+		if (!Array.isArray(parsed)) return;
+		if (this.#state == null) this.#restored = parsed;
+		else setComboboxValues(this.#state, parsed);
+	}
+	setLocalizations(first, second) {
+		updateComboboxLocalizations(typeof first === "string" ? { [first]: second } : first, this.#state.localizations);
+	}
+	#initialize() {
+		this.tabIndex = -1;
+		this.#state = createComboboxState(this, this.#internals);
+		if (this.#restored != null) {
+			setComboboxValues(this.#state, this.#restored, false);
+			this.#restored = void 0;
+		}
+	}
+};
+customElements.define(COMBOBOX_TAGNAME, OuiComboboxElement);
+//#endregion
+export { OuiComboboxElement, setComboboxLocalizations };