@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/collection/components/ic-radio-option/ic-radio-option.css

@@ -461,6 +461,7 @@ ic-radio-option.ic-radio-option-disabled {
 /* Focus states */
 
 .container input:focus + span.checkmark,
+.container:active input:focus + span.checkmark,
 :host(:focus) .container input:checked + span.checkmark {
   box-shadow: var(--ic-border-focus);
 }

package/dist/collection/components/ic-radio-option/ic-radio-option.js

@@ -1,7 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, removeDisabledFalse, isPropDefined, isSlotUsed, slotHasContent, } from "../../utils/helpers";
 const ADDITIONAL_FIELD = "additional-field";
-const TEXT_FIELD_SELECTOR = "ic-text-field";
 /**
  * @slot additional-field - Content to displayed alongside a radio option.
  */
@@ -10,24 +9,28 @@ export class RadioOption {
         this.defaultRadioValue = "";
         this.hasAdditionalField = false;
         this.skipFocus = false;
-        this.handleClick = () => {
-            if (!this.disabled) {
+        this.handleClick = (event) => {
+            const clickedAdditionalField = event.target.matches(".dynamic-container, .dynamic-container *");
+            if (!this.disabled && !clickedAdditionalField) {
+                event.stopPropagation();
                 if (this.skipFocus === false) {
                     this.radioElement.focus();
                 }
                 this.skipFocus = false;
                 if (this.hasAdditionalField) {
-                    this.value =
-                        this.el.querySelector(TEXT_FIELD_SELECTOR).value ||
-                            this.defaultRadioValue;
+                    this.value = this.getAdditionalField().value || this.defaultRadioValue;
                 }
                 this.icCheck.emit({
                     value: this.value,
                 });
             }
         };
-        this.swallowClick = (event) => {
-            event.stopPropagation();
+        this.handleKeyDown = (event) => {
+            const preventPropagationElements = ["IC-DATE-INPUT", "IC-DATE-PICKER"];
+            if (this.getAdditionalField() == document.activeElement &&
+                preventPropagationElements.includes(this.getAdditionalField().nodeName)) {
+                event.stopPropagation();
+            }
         };
         this.handleFormReset = () => {
             this.skipFocus = true;
@@ -53,9 +56,7 @@ export class RadioOption {
     componentWillLoad() {
         if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {
             this.hasAdditionalField = true;
-            const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);
-            if (textField)
-                textField.hiddenInput = false;
+            this.getAdditionalField();
         }
         this.defaultRadioValue = this.value;
         addFormResetListener(this.el, this.handleFormReset);
@@ -68,9 +69,7 @@ export class RadioOption {
         const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);
         if (hasSlot && !this.hasAdditionalField) {
             this.hasAdditionalField = true;
-            const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);
-            if (textField)
-                textField.hiddenInput = false;
+            this.getAdditionalField();
         }
         else if (!hasSlot && this.hasAdditionalField) {
             this.hasAdditionalField = false;
@@ -78,16 +77,16 @@ export class RadioOption {
     }
     componentDidRender() {
         if (this.additionalFieldDisplay === "static") {
-            const textfield = this.el.querySelector(TEXT_FIELD_SELECTOR);
+            const additionalField = this.getAdditionalField();
             if (!this.selected || this.disabled) {
-                textfield === null || textfield === void 0 ? void 0 : textfield.setAttribute("disabled", "");
+                additionalField === null || additionalField === void 0 ? void 0 : additionalField.setAttribute("disabled", "");
             }
             else {
-                textfield === null || textfield === void 0 ? void 0 : textfield.removeAttribute("disabled");
+                additionalField === null || additionalField === void 0 ? void 0 : additionalField.removeAttribute("disabled");
             }
         }
     }
-    textfieldValueHandler(event) {
+    additionalFieldValueHandler(event) {
         if (this.selected) {
             this.value = event.detail.value || this.defaultRadioValue;
             this.icCheck.emit({
@@ -109,10 +108,16 @@ export class RadioOption {
     async setTabIndex(value) {
         this.radioElement.tabIndex = value;
     }
+    getAdditionalField() {
+        const additionalField = this.el.querySelector('[slot="additional-field"]');
+        if (additionalField)
+            additionalField.hiddenInput = false;
+        return additionalField;
+    }
     render() {
-        const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, hasAdditionalField, label, name, selected, swallowClick, value, } = this;
+        const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, } = this;
         const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
-        return (h(Host, { onClick: handleClick, class: { ["ic-radio-option-disabled"]: disabled } }, h("div", { class: { container: true, disabled } }, h("div", null, h("input", { tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled ? true : null, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, label))), hasAdditionalField && (h("div", { onClick: swallowClick, class: {
+        return (h(Host, { onClick: handleClick, onKeyDown: handleKeyDown, class: { ["ic-radio-option-disabled"]: disabled } }, h("div", { class: { container: true, disabled } }, h("div", null, h("input", { tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled ? true : null, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, label))), hasAdditionalField && (h("div", { class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
             } }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text" }, dynamicText))), h("div", { class: {
@@ -396,7 +401,7 @@ export class RadioOption {
     static get listeners() {
         return [{
                 "name": "icChange",
-                "method": "textfieldValueHandler",
+                "method": "additionalFieldValueHandler",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/ic-radio-option/ic-radio-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\nconst TEXT_FIELD_SELECTOR = \"ic-text-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);\n      if (textField) textField.hiddenInput = false;\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);\n      if (textField) textField.hiddenInput = false;\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(TEXT_FIELD_SELECTOR);\n      if (!this.selected || this.disabled) {\n        textfield?.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement.tabIndex = value;\n  }\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value =\n          this.el.querySelector(TEXT_FIELD_SELECTOR).value ||\n          this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      swallowClick,\n      value,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        class={{ [\"ic-radio-option-disabled\"]: disabled }}\n      >\n        <div class={{ container: true, disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled ? true : null}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n\n        {hasAdditionalField && (\n          <div\n            onClick={swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const additionalField = this.getAdditionalField();\n      if (!this.selected || this.disabled) {\n        additionalField?.setAttribute(\"disabled\", \"\");\n      } else {\n        additionalField?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement.tabIndex = value;\n  }\n\n  private getAdditionalField(): HTMLIcTextFieldElement {\n    const additionalField = this.el.querySelector(\n      '[slot=\"additional-field\"]'\n    ) as HTMLIcTextFieldElement;\n    if (additionalField) additionalField.hiddenInput = false;\n    return additionalField;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const clickedAdditionalField = (event.target as Element).matches(\n      \".dynamic-container, .dynamic-container *\"\n    );\n\n    if (!this.disabled && !clickedAdditionalField) {\n      event.stopPropagation();\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value = this.getAdditionalField().value || this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n    if (\n      this.getAdditionalField() == document.activeElement &&\n      preventPropagationElements.includes(this.getAdditionalField().nodeName)\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      handleKeyDown,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      value,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        class={{ [\"ic-radio-option-disabled\"]: disabled }}\n      >\n        <div class={{ container: true, disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled ? true : null}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n\n        {hasAdditionalField && (\n          <div\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-search-bar/ic-search-bar.css

@@ -447,6 +447,7 @@ video {
 
 :host(.ic-search-bar-search) {
   --divider-height: 1.5rem;
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
 }
 
 :host(.ic-search-bar-search.ic-search-bar-small) {

package/dist/collection/components/ic-select/ic-select.css

@@ -443,12 +443,15 @@ video {
 
 /**
  * @prop --input-width: Width of the input field
+ * @prop --menu-width: Width of the dropdown menu
  * @prop --ic-z-index-menu: z-index of select menu
  */
 
 :host {
   display: block;
   position: relative;
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
+  --menu-max-height: 100px;
 }
 
 :host(.ic-select-full-width) {
@@ -560,6 +563,23 @@ select:not([disabled]) {
   cursor: auto;
 }
 
+.select-input.with-clear-button {
+  padding-right: 0;
+}
+
+.value-text {
+  max-width: calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+
+.value-text.with-clear-button {
+  padding-right: calc(var(--ic-space-xl) + var(--ic-space-xs));
+}
+
 .searchable-select-container {
   align-items: center;
   display: flex;
@@ -569,7 +589,7 @@ select:not([disabled]) {
 
 .expand-icon {
   height: var(--ic-space-lg);
-  padding-left: var(--ic-space-xs);
+  padding-left: var(--ic-space-xxs);
   color: var(--ic-action-dark);
 }
 
@@ -585,13 +605,14 @@ select:not([disabled]) {
 }
 
 :host(.ic-select-searchable) .expand-icon {
-  padding-left: var(--ic-space-xxs);
+  padding-left: 0;
   height: 2.25rem;
 }
 
 :host(.ic-select-searchable) .expand-icon > svg {
   height: 2.25rem;
-  padding: 0 0.375rem;
+  padding: 0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0
+    var(--ic-space-xxs);
 }
 
 :host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon > svg {
@@ -602,10 +623,6 @@ select:not([disabled]) {
   color: var(--ic-action-dark);
 }
 
-.expand-icon-filled {
-  color: var(--ic-action-dark);
-}
-
 .expand-icon-open,
 :host(.ic-select-searchable) .expand-icon-open {
   transform: rotateX(180deg);
@@ -623,17 +640,11 @@ select:not([disabled]) {
 
 .clear-button-container {
   display: flex;
-  gap: var(--ic-space-xxs);
-  padding-left: 2.375rem;
   align-items: center;
 }
 
-:host(.ic-select-small) .clear-button-container {
-  padding-left: 1.875rem;
-}
-
 .divider {
-  width: var(--ic-border-width);
+  width: var(--ic-space-1px);
   background-color: var(--ic-architectural-400);
   margin: var(--ic-space-xxs) 0;
   border-radius: var(--ic-space-1px);
@@ -644,9 +655,13 @@ select:not([disabled]) {
   height: var(--ic-space-md);
 }
 
+:host(.ic-select-large) .divider {
+  height: var(--ic-space-xl);
+}
+
 .clear-button {
   position: absolute;
-  right: 2.75rem;
+  right: calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));
   border-radius: var(--ic-border-radius);
   transition: box-shadow var(--ic-easing-transition),
     border-radius var(--ic-easing-transition);
@@ -662,7 +677,12 @@ select:not([disabled]) {
   fill: white;
 }
 
-.searchable-select-results-status {
+.clear-button.searchable {
+  position: static;
+}
+
+.searchable-select-results-status,
+.multi-select-selected-count {
   border: 0;
   clip: rect(0, 0, 0, 0, 0);
   height: var(--ic-space-1px);