@khanacademy/wonder-blocks-dropdown 10.10.0 → 10.11.1

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-dropdown@10.10.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
+> @khanacademy/wonder-blocks-dropdown@10.11.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.11.1
+
+### Patch Changes
+
+- Updated dependencies [f13552a]
+    - @khanacademy/wonder-blocks-tokens@16.8.0
+    - @khanacademy/wonder-blocks-cell@6.2.5
+    - @khanacademy/wonder-blocks-clickable@8.2.4
+    - @khanacademy/wonder-blocks-form@7.6.5
+    - @khanacademy/wonder-blocks-icon@5.3.18
+    - @khanacademy/wonder-blocks-icon-button@11.3.5
+    - @khanacademy/wonder-blocks-modal@8.7.5
+    - @khanacademy/wonder-blocks-pill@3.1.68
+    - @khanacademy/wonder-blocks-search-field@5.1.74
+    - @khanacademy/wonder-blocks-styles@0.2.48
+    - @khanacademy/wonder-blocks-typography@4.3.8
+    - @khanacademy/wonder-blocks-announcer@1.1.1
+
+## 10.11.0
+
+### Minor Changes
+
+- 8413cfe: Combobox: Add support for `aria-label`
+
+### Patch Changes
+
+- e6c705d: Combobox: Reset boxshadow of TextField
+- 5928e1c: Combobox: Remove state styling for the dropdown button and the internal text field
+- 022e775: SingleSelect and MultiSelect opener - Updating styles:
+    - Use `semanticColor.core.foreground.neutral.default` for the dropdown icon in all themes
+    - Fixed `placeholder` styling in selects when the field is `disabled` or `readOnly`
+    - Improved the `press + focus` styling to work with `syl-dark`
+- Updated dependencies [c033245]
+- Updated dependencies [ddcaaeb]
+- Updated dependencies [1921d68]
+- Updated dependencies [0907f64]
+- Updated dependencies [9773405]
+- Updated dependencies [e6c705d]
+- Updated dependencies [9773405]
+- Updated dependencies [fcf3bb1]
+- Updated dependencies [022e775]
+- Updated dependencies [e181c15]
+- Updated dependencies [29ae44b]
+- Updated dependencies [dd15fbf]
+- Updated dependencies [c033245]
+- Updated dependencies [a2bbc0a]
+    - @khanacademy/wonder-blocks-modal@8.7.4
+    - @khanacademy/wonder-blocks-icon@5.3.17
+    - @khanacademy/wonder-blocks-pill@3.1.67
+    - @khanacademy/wonder-blocks-tokens@16.7.0
+    - @khanacademy/wonder-blocks-icon-button@11.3.4
+    - @khanacademy/wonder-blocks-form@7.6.4
+    - @khanacademy/wonder-blocks-search-field@5.1.73
+    - @khanacademy/wonder-blocks-cell@6.2.4
+    - @khanacademy/wonder-blocks-clickable@8.2.3
+    - @khanacademy/wonder-blocks-styles@0.2.47
+    - @khanacademy/wonder-blocks-typography@4.3.7
+    - @khanacademy/wonder-blocks-announcer@1.1.1
+
 ## 10.10.0
 
 ### Minor Changes

package/dist/components/combobox.d.ts

@@ -87,6 +87,10 @@ type Props = {
      * An optional decorative icon to display at the start of the combobox.
      */
     startIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>> | null;
+    /**
+     * An optional aria-label to display on the combobox.
+     */
+    "aria-label"?: string;
 };
 /**
  * A `Combobox` is an input widget that has an associated `listbox`. This
@@ -100,5 +104,5 @@ type Props = {
  *   Open button (🔽) is pressed.
  * - It is displayed when the combobox receives focus.
  */
-export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, }: Props): React.JSX.Element;
+export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, "aria-label": ariaLabel, }: Props): React.JSX.Element;
 export {};

package/dist/css/vars.css

@@ -4,7 +4,6 @@
 --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-mid);
 --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-thin);
 --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_040);
---wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-neutral-default);
 --wb-c-dropdown-opener-layout-padding-inline: var(--wb-sizing-size_160);
 --wb-c-dropdown-opener-layout-padding-inlineStart: var(--wb-sizing-size_160);
 --wb-c-dropdown-opener-layout-padding-inlineEnd: var(--wb-sizing-size_120);
@@ -21,7 +20,6 @@
 --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-low);
 --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-medium);
 --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_080);
---wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-instructive-default);
 --wb-c-dropdown-opener-layout-padding-inline: var(--wb-sizing-size_120);
 --wb-c-dropdown-opener-layout-padding-inlineStart: var(--wb-sizing-size_120);
 --wb-c-dropdown-opener-layout-padding-inlineEnd: var(--wb-sizing-size_120);
@@ -38,7 +36,6 @@
 --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-low);
 --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-medium);
 --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_080);
---wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-instructive-default);
 --wb-c-dropdown-opener-layout-padding-inline: var(--wb-sizing-size_120);
 --wb-c-dropdown-opener-layout-padding-inlineStart: var(--wb-sizing-size_120);
 --wb-c-dropdown-opener-layout-padding-inlineEnd: var(--wb-sizing-size_120);

package/dist/es/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { DetailCell } from '@khanacademy/wonder-blocks-cell';
-import { sizing, border, boxShadow, semanticColor, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
+import { sizing, border, boxShadow, font, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 import { BodyText } from '@khanacademy/wonder-blocks-typography';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 import { View, keys, addStyle, useOnMountEffect, Id } from '@khanacademy/wonder-blocks-core';
@@ -28,7 +28,7 @@ import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
 const selectDropdownStyle={marginBlock:sizing.size_080};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
 
-var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{padding:{inline:sizing.size_0,block:sizing.size_040}},shadow:{default:boxShadow.mid}},opener:{border:{width:{error:border.width.thin},radius:{rest:border.radius.radius_040}},color:{icon:semanticColor.core.foreground.neutral.default},layout:{padding:{inline:sizing.size_160,inlineStart:sizing.size_160,inlineEnd:sizing.size_120}}},item:{border:{radius:{default:border.radius.radius_040,press:border.radius.radius_040}},layout:{padding:{block:sizing.size_100,inlineStart:sizing.size_080,inlineEnd:sizing.size_160}},font:{weight:font.weight.regular}}};
+var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{padding:{inline:sizing.size_0,block:sizing.size_040}},shadow:{default:boxShadow.mid}},opener:{border:{width:{error:border.width.thin},radius:{rest:border.radius.radius_040}},layout:{padding:{inline:sizing.size_160,inlineStart:sizing.size_160,inlineEnd:sizing.size_120}}},item:{border:{radius:{default:border.radius.radius_040,press:border.radius.radius_040}},layout:{padding:{block:sizing.size_100,inlineStart:sizing.size_080,inlineEnd:sizing.size_160}},font:{weight:font.weight.regular}}};
 
 var theme$3 = mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
 
@@ -64,7 +64,7 @@ class ActionMenuOpenerCore extends React.Component{render(){const{children,disab
 
 function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id}){const[internalOpened,setInternalOpened]=React.useState(false);const openerElementRef=React.useRef(undefined);const generatedUniqueOpenerId=React.useId();const generatedUniqueDropdownId=React.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React.useCallback(()=>{handleOpenChanged(false);if(openerElementRef.current){openerElementRef.current.focus();}},[handleOpenChanged]);const handleOptionSelected=React.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React.useCallback(()=>{const allChildren=React.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React.useCallback(node=>{openerElementRef.current=ReactDOM.findDOMNode(node);},[]);const handleClick=React.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElementRef.current,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$6.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})}const styles$6=StyleSheet.create({caret:{marginInlineStart:sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{insetBlockStart:`calc(-1 * ${sizing.size_040})`}});
 
-const StyledButton$1=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?semanticColor.core.foreground.disabled.default:theme$3.opener.color.icon;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly];const allowInteraction=!disabled&&!readOnly;return jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(BodyText,{tag:"span",style:styles$5.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${border.width.thin} ${semanticColor.input.default.border}`;const styles$5=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:sizing.size_160},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,cursor:"pointer",":focus":{...focusStyles.focus[":focus-visible"]},":active":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:semanticColor.input.default.placeholder},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text,":active":{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}}});
+const StyledButton$1=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?semanticColor.core.foreground.disabled.default:semanticColor.core.foreground.neutral.default;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,isPlaceholder&&disabled&&styles$5.disabledPlaceholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly,readOnly&&isPlaceholder&&styles$5.placeholder];const allowInteraction=!disabled&&!readOnly;return jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(BodyText,{tag:"span",style:styles$5.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${border.width.thin} ${semanticColor.input.default.border}`;const styles$5=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:sizing.size_160},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,cursor:"pointer",":active":{boxShadow:PRESS_SHADOW},":focus":{...focusStyles.focus[":focus-visible"]},[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground,[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:semanticColor.input.default.placeholder},disabledPlaceholder:{color:semanticColor.input.disabled.placeholder},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text,":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}}});
 
 const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 
@@ -84,7 +84,7 @@ const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMulti
 
 function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsx(View,{role:"listbox",id:uniqueId,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsx(StandaloneListbox,{...props})}return jsx(View,{role:"listbox",id:id,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=StyleSheet.create({listbox:{backgroundColor:semanticColor.core.background.base.default,outline:"none",paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline},disabled:{color:semanticColor.action.secondary.disabled.foreground}});
 
-function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const updateAfterSelectionChange=React.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.core.foreground.disabled.default:startIcon.props.color??semanticColor.core.foreground.neutral.default});return jsx(View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:styles$1.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:focusStyles.focus[":focus-visible"],disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{insetInlineEnd:sizing.size_360},iconWrapper:{padding:sizing.size_040,minInlineSize:"auto"}});
+function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="","aria-label":ariaLabel}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const updateAfterSelectionChange=React.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.core.foreground.disabled.default:startIcon.props.color??semanticColor.core.foreground.neutral.default});return jsx(View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{"aria-label":ariaLabel,id:textFieldId,testId:testId,style:styles$1.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:focusStyles.focus[":focus-visible"],disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:semanticColor.core.transparent},":active":{borderColor:semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:sizing.size_360},iconWrapper:{padding:sizing.size_040,minInlineSize:"auto"}});
 
 const StyledButton=addStyle("button");const CustomOpener=React.forwardRef(function CustomOpener(props,ref){const{children,disabled,onClick,styles:stylesProp,testId,...restProps}=props;const injectedAriaDisabled=restProps["aria-disabled"];const ariaDisabled=injectedAriaDisabled??(disabled||undefined);return jsx(StyledButton,{...restProps,ref:ref,type:"button","aria-disabled":ariaDisabled,onClick:disabled?undefined:onClick,"data-testid":testId,style:[styles.reset,disabled&&styles.disabled,stylesProp?.root],children:jsx(BodyText,{tag:"span",style:[styles.labelReset,stylesProp?.label],children:children})})});CustomOpener.displayName="CustomOpener";const styles=StyleSheet.create({reset:{appearance:"none",background:"none",border:"none",boxSizing:"border-box",cursor:"pointer",font:"inherit",margin:0,padding:0,textAlign:"inherit",touchAction:"manipulation",...focusStyles.focus},labelReset:{alignItems:"center",display:"flex",flexDirection:"row",gap:sizing.size_020},disabled:{cursor:"not-allowed"}});
 

package/dist/index.js

@@ -60,7 +60,7 @@ var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
 const selectDropdownStyle={marginBlock:wonderBlocksTokens.sizing.size_080};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
 
-var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.radius_040},layout:{padding:{inline:wonderBlocksTokens.sizing.size_0,block:wonderBlocksTokens.sizing.size_040}},shadow:{default:wonderBlocksTokens.boxShadow.mid}},opener:{border:{width:{error:wonderBlocksTokens.border.width.thin},radius:{rest:wonderBlocksTokens.border.radius.radius_040}},color:{icon:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},layout:{padding:{inline:wonderBlocksTokens.sizing.size_160,inlineStart:wonderBlocksTokens.sizing.size_160,inlineEnd:wonderBlocksTokens.sizing.size_120}}},item:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{block:wonderBlocksTokens.sizing.size_100,inlineStart:wonderBlocksTokens.sizing.size_080,inlineEnd:wonderBlocksTokens.sizing.size_160}},font:{weight:wonderBlocksTokens.font.weight.regular}}};
+var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.radius_040},layout:{padding:{inline:wonderBlocksTokens.sizing.size_0,block:wonderBlocksTokens.sizing.size_040}},shadow:{default:wonderBlocksTokens.boxShadow.mid}},opener:{border:{width:{error:wonderBlocksTokens.border.width.thin},radius:{rest:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{inline:wonderBlocksTokens.sizing.size_160,inlineStart:wonderBlocksTokens.sizing.size_160,inlineEnd:wonderBlocksTokens.sizing.size_120}}},item:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{block:wonderBlocksTokens.sizing.size_100,inlineStart:wonderBlocksTokens.sizing.size_080,inlineEnd:wonderBlocksTokens.sizing.size_160}},font:{weight:wonderBlocksTokens.font.weight.regular}}};
 
 var theme$3 = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
 
@@ -96,7 +96,7 @@ class ActionMenuOpenerCore extends React__namespace.Component{render(){const{chi
 
 function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id}){const[internalOpened,setInternalOpened]=React__namespace.useState(false);const openerElementRef=React__namespace.useRef(undefined);const generatedUniqueOpenerId=React__namespace.useId();const generatedUniqueDropdownId=React__namespace.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React__namespace.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React__namespace.useCallback(()=>{handleOpenChanged(false);if(openerElementRef.current){openerElementRef.current.focus();}},[handleOpenChanged]);const handleOptionSelected=React__namespace.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React__namespace.useCallback(()=>{const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React__namespace.useCallback(node=>{openerElementRef.current=ReactDOM__namespace.findDOMNode(node);},[]);const handleClick=React__namespace.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElementRef.current,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$6.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})}const styles$6=aphrodite.StyleSheet.create({caret:{marginInlineStart:wonderBlocksTokens.sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{insetBlockStart:`calc(-1 * ${wonderBlocksTokens.sizing.size_040})`}});
 
-const StyledButton$1=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:theme$3.opener.color.icon;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly];const allowInteraction=!disabled&&!readOnly;return jsxRuntime.jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles$5.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles$5=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:wonderBlocksTokens.sizing.size_160},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,cursor:"pointer",":focus":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"]},":active":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:wonderBlocksTokens.semanticColor.input.default.placeholder},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text,":active":{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}}});
+const StyledButton$1=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:wonderBlocksTokens.semanticColor.core.foreground.neutral.default;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,isPlaceholder&&disabled&&styles$5.disabledPlaceholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly,readOnly&&isPlaceholder&&styles$5.placeholder];const allowInteraction=!disabled&&!readOnly;return jsxRuntime.jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles$5.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles$5=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:wonderBlocksTokens.sizing.size_160},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,cursor:"pointer",":active":{boxShadow:PRESS_SHADOW},":focus":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"]},[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground,[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:wonderBlocksTokens.semanticColor.input.default.placeholder},disabledPlaceholder:{color:wonderBlocksTokens.semanticColor.input.disabled.placeholder},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text,":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}}});
 
 const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React__namespace.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);wonderBlocksCore.useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 
@@ -116,7 +116,7 @@ const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,f
 
 function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React__namespace.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:uniqueId,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsxRuntime.jsx(StandaloneListbox,{...props})}return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:id,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=aphrodite.StyleSheet.create({listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,outline:"none",paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline},disabled:{color:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}});
 
-function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const updateAfterSelectionChange=React__namespace.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:startIcon.props.color??wonderBlocksTokens.semanticColor.core.foreground.neutral.default});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:styles$1.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(wonderBlocksCore.View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
+function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="","aria-label":ariaLabel}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const updateAfterSelectionChange=React__namespace.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:startIcon.props.color??wonderBlocksTokens.semanticColor.core.foreground.neutral.default});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{"aria-label":ariaLabel,id:textFieldId,testId:testId,style:styles$1.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(wonderBlocksCore.View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":active":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
 
 const StyledButton=wonderBlocksCore.addStyle("button");const CustomOpener=React__namespace.forwardRef(function CustomOpener(props,ref){const{children,disabled,onClick,styles:stylesProp,testId,...restProps}=props;const injectedAriaDisabled=restProps["aria-disabled"];const ariaDisabled=injectedAriaDisabled??(disabled||undefined);return jsxRuntime.jsx(StyledButton,{...restProps,ref:ref,type:"button","aria-disabled":ariaDisabled,onClick:disabled?undefined:onClick,"data-testid":testId,style:[styles.reset,disabled&&styles.disabled,stylesProp?.root],children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:[styles.labelReset,stylesProp?.label],children:children})})});CustomOpener.displayName="CustomOpener";const styles=aphrodite.StyleSheet.create({reset:{appearance:"none",background:"none",border:"none",boxSizing:"border-box",cursor:"pointer",font:"inherit",margin:0,padding:0,textAlign:"inherit",touchAction:"manipulation",...wonderBlocksStyles.focusStyles.focus},labelReset:{alignItems:"center",display:"flex",flexDirection:"row",gap:wonderBlocksTokens.sizing.size_020},disabled:{cursor:"not-allowed"}});
 

package/dist/theme/default.d.ts

@@ -22,9 +22,6 @@ declare const _default: {
                 rest: string;
             };
         };
-        color: {
-            icon: string;
-        };
         layout: {
             padding: {
                 inline: string;

package/dist/theme/index.d.ts

@@ -22,9 +22,6 @@ declare const _default: {
                 rest: string;
             };
         };
-        color: {
-            icon: string;
-        };
         layout: {
             padding: {
                 inline: string;

package/dist/theme/syl-dark.d.ts

@@ -22,9 +22,6 @@ declare const _default: {
                 rest: string;
             };
         };
-        color: {
-            icon: string;
-        };
         layout: {
             padding: {
                 inline: string;

package/dist/theme/thunderblocks.d.ts

@@ -22,9 +22,6 @@ declare const _default: {
                 rest: string;
             };
         };
-        color: {
-            icon: string;
-        };
         layout: {
             padding: {
                 inline: string;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Dropdown variants for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "10.10.0",
+  "version": "10.11.1",
   "publishConfig": {
     "access": "public"
   },
@@ -29,19 +29,19 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.1.1",
-    "@khanacademy/wonder-blocks-cell": "6.2.3",
-    "@khanacademy/wonder-blocks-clickable": "8.2.2",
+    "@khanacademy/wonder-blocks-cell": "6.2.5",
+    "@khanacademy/wonder-blocks-clickable": "8.2.4",
+    "@khanacademy/wonder-blocks-form": "7.6.5",
     "@khanacademy/wonder-blocks-core": "12.4.4",
-    "@khanacademy/wonder-blocks-form": "7.6.3",
-    "@khanacademy/wonder-blocks-icon": "5.3.16",
-    "@khanacademy/wonder-blocks-icon-button": "11.3.3",
-    "@khanacademy/wonder-blocks-modal": "8.7.3",
-    "@khanacademy/wonder-blocks-pill": "3.1.66",
-    "@khanacademy/wonder-blocks-search-field": "5.1.72",
-    "@khanacademy/wonder-blocks-styles": "0.2.46",
+    "@khanacademy/wonder-blocks-icon-button": "11.3.5",
+    "@khanacademy/wonder-blocks-search-field": "5.1.74",
+    "@khanacademy/wonder-blocks-icon": "5.3.18",
+    "@khanacademy/wonder-blocks-modal": "8.7.5",
+    "@khanacademy/wonder-blocks-pill": "3.1.68",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "16.6.0",
-    "@khanacademy/wonder-blocks-typography": "4.3.6"
+    "@khanacademy/wonder-blocks-tokens": "16.8.0",
+    "@khanacademy/wonder-blocks-styles": "0.2.48",
+    "@khanacademy/wonder-blocks-typography": "4.3.8"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",