@jobber/components 9.12.1 → 9.12.3

package/dist/Combobox/Combobox.d.ts

@@ -16,7 +16,7 @@ declare function ComboboxInput({ className, ...inputProps }: ComboboxInputProps)
 declare function ComboboxTrigger({ className, render, ...triggerProps }: ComboboxTriggerProps): React.JSX.Element;
 declare function ComboboxClear({ className, ...clearProps }: ComboboxClearProps): React.JSX.Element;
 declare function ComboboxTriggerInput({ className, clearLabel, showOptionsLabel, ...inputProps }: ComboboxTriggerInputProps): React.JSX.Element;
-declare function ComboboxTriggerValue({ children, className, placeholder, ...triggerProps }: ComboboxTriggerValueProps): React.JSX.Element;
+declare function ComboboxTriggerValue({ children, className, clearLabel, placeholder, ...triggerProps }: ComboboxTriggerValueProps): React.JSX.Element;
 declare function ComboboxTriggerMultipleWithInput<Value = unknown>({ className, getItemLabel, getRemoveLabel, renderItem, showOptionsLabel, ...inputProps }: ComboboxTriggerMultipleWithInputProps<Value>): React.JSX.Element;
 declare function ComboboxTriggerMultipleValue<Value = unknown>({ getItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel, ...chipsProps }: ComboboxTriggerMultipleValueProps<Value>): React.JSX.Element;
 declare function ComboboxContent({ ariaLabel, children, className, empty, style, }: ComboboxContentProps): React.JSX.Element;

package/dist/Combobox/Combobox.types.d.ts

@@ -132,6 +132,7 @@ export interface ComboboxTriggerInputProps extends Omit<ComboboxInputProps, "chi
 }
 export interface ComboboxTriggerValueProps extends Omit<ComboboxTriggerProps, "children"> {
     readonly children?: ComboboxValueProps["children"];
+    readonly clearLabel?: string;
     readonly placeholder?: ComboboxValueProps["placeholder"];
 }
 export interface ComboboxTriggerMultipleWithInputProps<Value> extends Omit<ComboboxInputProps, "children"> {

package/dist/Combobox-cjs.js

@@ -166,7 +166,7 @@ const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot"
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
-var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","fieldActions":"AokWVDmnM14-","fieldAction":"eFNme5KV-Tg-","fieldClear":"_8ofvzyVIbDQ-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","hasClearAction":"fqHi3uY-5FQ-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueActions":"_8AEote8Zs9E-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
 const comboboxMessages = useAtlantisI18n.defineMessages({
     noResults: {
@@ -530,7 +530,7 @@ function ComboboxRoot(_a) {
         React.createElement(ComboboxContext.Provider, { value: contextValue },
             React.createElement(ComboboxPrimitive.ComboboxRoot, Object.assign({}, rootProps, { disabled: disabled, modal: modal !== null && modal !== void 0 ? modal : responsive.defaultModal, multiple: multiple, readOnly: readOnly }),
                 children,
-                description && (React.createElement(ComboboxDescription, null, description)),
+                description && !error && (React.createElement(ComboboxDescription, null, description)),
                 error && React.createElement(ComboboxError, null, error)))));
 }
 function ComboboxRecipeLabel({ children, visuallyHidden, }) {
@@ -600,22 +600,27 @@ function ComboboxTriggerInput(_a) {
     const context = useOptionalComboboxContext();
     return (React.createElement(ComboboxLabeledInputGroup, null,
         React.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
-        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
             React.createElement(DefaultClearIcon, null))),
-        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions"), className: styles.fieldAction },
             React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
-    var { children, className, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "placeholder"]);
+    var { children, className, clearLabel, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "clearLabel", "placeholder"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const showLabel = shouldRenderInnerLabel(context);
     const renderLabel = shouldRenderRecipeLabel(context);
-    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+    const showClear = Boolean(!(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && clearLabel);
+    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel, showClear && styles.hasClearAction) },
         renderLabel && (React.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
         React.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName.mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
             React.createElement("span", { className: styles.triggerValueText },
-                React.createElement(ComboboxPrimitive.ComboboxValue, { placeholder: placeholder }, children)),
-            React.createElement("span", { className: styles.triggerValueIcon },
+                React.createElement(ComboboxPrimitive.ComboboxValue, { placeholder: placeholder }, children))),
+        React.createElement("span", { className: classnames(styles.fieldActions, styles.triggerValueActions) },
+            showClear && (React.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
+                React.createElement(DefaultClearIcon, null))),
+            React.createElement("span", { className: styles.fieldAction },
                 React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
 }
 function getDefaultItemLabel(value) {

package/dist/Combobox-es.js

@@ -164,7 +164,7 @@ const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot"
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
-var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","fieldActions":"AokWVDmnM14-","fieldAction":"eFNme5KV-Tg-","fieldClear":"_8ofvzyVIbDQ-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","hasClearAction":"fqHi3uY-5FQ-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueActions":"_8AEote8Zs9E-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
 const comboboxMessages = defineMessages({
     noResults: {
@@ -528,7 +528,7 @@ function ComboboxRoot(_a) {
         React__default.createElement(ComboboxContext.Provider, { value: contextValue },
             React__default.createElement(ComboboxRoot$1, Object.assign({}, rootProps, { disabled: disabled, modal: modal !== null && modal !== void 0 ? modal : responsive.defaultModal, multiple: multiple, readOnly: readOnly }),
                 children,
-                description && (React__default.createElement(ComboboxDescription, null, description)),
+                description && !error && (React__default.createElement(ComboboxDescription, null, description)),
                 error && React__default.createElement(ComboboxError, null, error)))));
 }
 function ComboboxRecipeLabel({ children, visuallyHidden, }) {
@@ -598,22 +598,27 @@ function ComboboxTriggerInput(_a) {
     const context = useOptionalComboboxContext();
     return (React__default.createElement(ComboboxLabeledInputGroup, null,
         React__default.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
-        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
             React__default.createElement(DefaultClearIcon, null))),
-        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
+        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions"), className: styles.fieldAction },
             React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
-    var { children, className, placeholder } = _a, triggerProps = __rest(_a, ["children", "className", "placeholder"]);
+    var { children, className, clearLabel, placeholder } = _a, triggerProps = __rest(_a, ["children", "className", "clearLabel", "placeholder"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const showLabel = shouldRenderInnerLabel(context);
     const renderLabel = shouldRenderRecipeLabel(context);
-    return (React__default.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+    const showClear = Boolean(!(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && clearLabel);
+    return (React__default.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel, showClear && styles.hasClearAction) },
         renderLabel && (React__default.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
         React__default.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
             React__default.createElement("span", { className: styles.triggerValueText },
-                React__default.createElement(ComboboxValue, { placeholder: placeholder }, children)),
-            React__default.createElement("span", { className: styles.triggerValueIcon },
+                React__default.createElement(ComboboxValue, { placeholder: placeholder }, children))),
+        React__default.createElement("span", { className: classnames(styles.fieldActions, styles.triggerValueActions) },
+            showClear && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
+                React__default.createElement(DefaultClearIcon, null))),
+            React__default.createElement("span", { className: styles.fieldAction },
                 React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
 }
 function getDefaultItemLabel(value) {

package/dist/docs/Combobox/Combobox.md

@@ -300,7 +300,19 @@ Pass `label`, `description`, and `error` on `Combobox` for the default Atlantis
 field treatment. If the layout needs different placement, compose
 `Combobox.Label`, `Combobox.Description`, and `Combobox.Error` manually.
 
+A field shows a description or an error, never both. When both root props are
+set the error replaces the description, since a description hints at what the
+field wants and the error already restates it. Manually composed
+`Combobox.Description` and `Combobox.Error` parts are unaffected.
+
+```tsx
+<Combobox label="Team member" description="Search by name" items={teamMembers}>
+  {/* trigger and content */}
+</Combobox>
+```
+
 ```tsx
+// `description` is not rendered while `error` is set
 <Combobox
   label="Team member"
   description="Search by name"

package/dist/styles.css

@@ -4657,7 +4657,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .EySvIEsW9Q4-,
-:where(.F94vaco3HkM-),
+.F94vaco3HkM-,
 :where(.IYgNfHHPVFY-) {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.5);
   --comboboxPrimitive-control-height: calc(
@@ -4698,9 +4698,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-sizing: border-box;
 }
 
-.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible):not(
-    [data-popup-open]
-  ) {
+.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible),
+.EySvIEsW9Q4-[data-popup-open] {
   z-index: 1;
   z-index: var(--elevation-base);
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
@@ -4713,26 +4712,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border-color: var(--color-critical);
 }
 
-.EySvIEsW9Q4-:not([data-disabled]):not(
-    :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
-  ):hover {
-  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
-}
-
-.EySvIEsW9Q4-:not([data-disabled])[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
-  border-color: hsl(198, 35%, 21%);
-  border-color: var(--color-interactive--subtle);
-}
-
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled]):not(
     :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
   ):hover,
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled])[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
   border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
@@ -4819,7 +4802,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-disabled);
 }
 
-:where(.F94vaco3HkM-) {
+.F94vaco3HkM- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -4885,7 +4868,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   cursor: pointer;
 }
 
-.EySvIEsW9Q4- > :where(.F94vaco3HkM-) {
+.EySvIEsW9Q4- > .F94vaco3HkM- {
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
   -ms-flex-pack: center;
@@ -4910,14 +4893,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-heading);
 }
 
-.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible:not(
-    [data-popup-open]
-  ) {
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
-  box-shadow: var(--shadow-focus);
-  outline: none;
-}
-
 :where(.IYgNfHHPVFY-:focus-visible) {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
@@ -4926,10 +4901,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
-:where(.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible) {
-  outline: none;
-}
-
 :where(.IYgNfHHPVFY-:has(+ .F94vaco3HkM-)) {
   min-width: 24px;
   min-width: var(--space-large);
@@ -4940,19 +4911,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-icon--secondary);
 }
 
-/* Standalone triggers own field border/shadow states; InputGroup owns them when the trigger is embedded. */
+/* Standalone triggers own field focus states; InputGroup owns them when the trigger is embedded. */
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible,
 .F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-))[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
-  border-color: hsl(198, 35%, 21%);
-  border-color: var(--color-interactive--subtle);
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
 }
 
-.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not([data-disabled]):not(
-    :focus-visible
-  ):hover {
-  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
+.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible {
+  outline: none;
 }
 
 .F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
@@ -4961,17 +4929,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
     [data-disabled]
   )[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
   border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
 
 .F94vaco3HkM-[data-disabled] {
-  --comboboxPrimitive-field-border-width: var(--border-base);
-
   border-color: hsl(200, 13%, 87%);
-
   border-color: var(--color-border);
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
@@ -5916,6 +5879,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .RViH4KcR7S4-.RViH4KcR7S4- {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 3);
   --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-trigger-icon-size: calc(var(--base-unit) * 1.5);
   --combobox-chip-padding-block: var(--space-small);
   --combobox-chip-padding-inline: var(--space-slim);
   --combobox-hasLabel-control-padding-top: calc(
@@ -5937,6 +5901,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .PhTQQLSQRfU-.PhTQQLSQRfU- {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.25);
   --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-trigger-icon-size: var(--space-base);
   --combobox-chip-padding-block: var(--space-smaller);
   --combobox-chip-padding-inline: var(--space-slim);
   --combobox-hasLabel-control-padding-top: var(
@@ -5954,6 +5919,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 ._2GAP0lCM9iU-._2GAP0lCM9iU- {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 3.5);
   --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-trigger-icon-size: calc(var(--base-unit) * 1.5);
   --combobox-chip-padding-block: var(--space-slim);
   --combobox-chip-padding-inline: var(--space-slim);
   --combobox-hasLabel-control-padding-top: calc(
@@ -5972,6 +5938,22 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   --combobox-trigger-padding-inline-end: var(--space-base);
 }
 
+.RViH4KcR7S4-.RViH4KcR7S4-,
+.PhTQQLSQRfU-.PhTQQLSQRfU-,
+._2GAP0lCM9iU-._2GAP0lCM9iU- {
+  --comboboxPrimitive-control-height: calc(
+    var(--comboboxPrimitive-field-height) - (var(--border-base) * 2)
+  );
+  --combobox-field-action-width: max(
+    var(--comboboxPrimitive-control-height),
+    calc(
+      var(--combobox-trigger-padding-inline-start) +
+        var(--combobox-trigger-padding-inline-end) +
+        var(--combobox-trigger-icon-size)
+    )
+  );
+}
+
 .dCxC3YMhuE8-:not(.PhTQQLSQRfU-) {
   --comboboxPrimitive-field-padding-inline: var(--space-base);
 }
@@ -6179,6 +6161,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
+.AokWVDmnM14- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+.eFNme5KV-Tg- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  width: var(--combobox-field-action-width);
+  min-width: var(--combobox-field-action-width);
+  box-sizing: border-box;
+  padding: 0 var(--combobox-trigger-padding-inline-end) 0
+    var(--combobox-trigger-padding-inline-start);
+}
+
+._8ofvzyVIbDQ- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+
 ._0jDShCnQjxc- {
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -6196,44 +6208,66 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .v6DatDYO-gk- {
+  --combobox-trigger-actions-width: var(--combobox-field-action-width);
+
   position: relative;
   width: 100%;
 }
 
-.LyrziI4LY5w- {
+.v6DatDYO-gk-.fqHi3uY-5FQ- {
+  --combobox-trigger-actions-width: calc(
+    var(--combobox-field-action-width) + (var(--base-unit) * 1.5) +
+      var(--space-smaller)
+  );
+}
+
+.v6DatDYO-gk- > .DZ76oTE8arw- {
+  top: calc(2px + 1px);
+  top: calc(var(--space-smallest) + var(--border-base));
+  left: 1px;
+  left: var(--border-base);
+  width: calc(100% - (1px * 2));
+  width: calc(100% - (var(--border-base) * 2));
+}
+
+.mKKJ60Qxxmw-.LyrziI4LY5w- {
   padding: 0;
 }
 
 .ayWSHF3Mwfc- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: block;
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
-  -ms-flex-align: center;
-      align-items: center;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
   min-width: 0;
-  padding: var(--comboboxPrimitive-field-padding-block) 8px
+  box-sizing: border-box;
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--combobox-trigger-actions-width)
     var(--comboboxPrimitive-field-padding-block)
-    var(--comboboxPrimitive-field-padding-inline);
-  padding: var(--comboboxPrimitive-field-padding-block) var(--space-small)
+    calc(var(--comboboxPrimitive-field-padding-inline) + 1px);
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--combobox-trigger-actions-width)
     var(--comboboxPrimitive-field-padding-block)
-    var(--comboboxPrimitive-field-padding-inline);
+    calc(var(--comboboxPrimitive-field-padding-inline) + var(--border-base));
+  line-height: var(--comboboxPrimitive-field-line-height);
 }
 
-.Glijnn9-fUw- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
-  -ms-flex-item-align: stretch;
-      align-self: stretch;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex-pack: center;
-      justify-content: center;
-  min-width: 0;
-  padding-left: var(--combobox-trigger-padding-inline-start);
-  padding-right: var(--combobox-trigger-padding-inline-end);
+._8AEote8Zs9E- {
+  position: absolute;
+  top: 1px;
+  top: var(--border-base);
+  right: 1px;
+  right: var(--border-base);
+  bottom: 1px;
+  bottom: var(--border-base);
+  pointer-events: none;
+}
+
+._8AEote8Zs9E- ._8ofvzyVIbDQ- {
+  z-index: 1;
+  z-index: var(--elevation-base);
+  pointer-events: auto;
 }
 
 ._-0af5xRGjJ8- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.12.1",
+  "version": "9.12.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2631b0995f78204f24e3175185951d9b0f1ac4bc"
+  "gitHead": "806acbc400062ba092f647367528425ecbcea016"
 }