diff --git a/.changeset/beige-stingrays-ring.md b/.changeset/beige-stingrays-ring.md
new file mode 100644
index 00000000000..accbb380b83
--- /dev/null
+++ b/.changeset/beige-stingrays-ring.md
@@ -0,0 +1,27 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-breadcrumbs-content` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`.
+
+```diff
+  <button
+-   class="iui-breadcrumbs-content"
++   class="iui-button iui-button-base iui-field iui-breadcrumbs-content"
++   data-iui-variant="borderless"
+  >
+```
+
+When used with `<a>`, the same button classes must be used, and the content must be wrapped in a `<span>`. As a result, the anchor's hover state will now be more consistent with the button's hover state.
+
+```diff
+  <a
+-   class="iui-anchor iui-breadcrumbs-content"
++   class="iui-anchor iui-button-base iui-button iui-field iui-breadcrumbs-content"
++   data-iui-variant="borderless"
+  >
++   <span>
+      …
++   </span>
+  </a>
+```
diff --git a/.changeset/chilled-dolls-promise.md b/.changeset/chilled-dolls-promise.md
new file mode 100644
index 00000000000..0738021daa0
--- /dev/null
+++ b/.changeset/chilled-dolls-promise.md
@@ -0,0 +1,20 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-select-tag-button` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`.
+
+```diff
+  <button
+-   class="iui-select-tag-button"
++   class="iui-button iui-field iui-select-tag-button"
++   data-iui-variant="borderless"
+  >
+```
+
+Similarly, `.iui-select-tag-button-icon` also requires `.iui-button-icon`.
+
+```diff
+-  <span class="iui-select-tag-button-icon">
++  <span class="iui-select-tag-button-icon iui-button-icon">
+```
diff --git a/.changeset/cyan-candles-walk.md b/.changeset/cyan-candles-walk.md
new file mode 100644
index 00000000000..67483b0db27
--- /dev/null
+++ b/.changeset/cyan-candles-walk.md
@@ -0,0 +1,16 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-table-paginator-page-button` now requires the same markup as borderless buttons. The `.iui-table-paginator-page-button-small` modifier class has been removed.
+
+```diff
+  <button
+-   class="iui-table-paginator-page-button iui-table-paginator-page-button-small"
++   class="iui-table-paginator-page-button iui-button iui-button-base iui-field"
++   data-iui-variant="borderless"
++   data-iui-size="small"
+  >
+```
+
+As a result, the small paginator will now have a smaller width than before.
diff --git a/.changeset/lazy-seahorses-share.md b/.changeset/lazy-seahorses-share.md
new file mode 100644
index 00000000000..531c454ef9c
--- /dev/null
+++ b/.changeset/lazy-seahorses-share.md
@@ -0,0 +1,13 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-sidenav-button.iui-expand` now requires `.iui-button .iui-field` and `data-iui-size="small"`.
+
+```diff
+  <button
+-   class="iui-button iui-button-base iui-sidenav-button iui-expand"
++   class="iui-button iui-button-base iui-sidenav-button iui-field iui-expand"
++   data-iui-size="small"
+  >
+```
diff --git a/.changeset/light-cars-tell.md b/.changeset/light-cars-tell.md
new file mode 100644
index 00000000000..f7ffd775bde
--- /dev/null
+++ b/.changeset/light-cars-tell.md
@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": patch
+---
+
+The small sized `TablePaginator`'s buttons are now squares instead of rectangles. This makes it consistent with the shape of the regular sized `TablePaginator` buttons.
diff --git a/.changeset/nasty-bananas-join.md b/.changeset/nasty-bananas-join.md
new file mode 100644
index 00000000000..7c26491ffa0
--- /dev/null
+++ b/.changeset/nasty-bananas-join.md
@@ -0,0 +1,7 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+Aggregated a subset of CSS styles across some field components: `Button`, `Input`, `Textarea`, and `Select`, in order to reduce the CSS size and improve visual consistency. Some resulting changes:
+  * `Input`, `Textarea`, and `Select` have a similar hover state as `Button`.
+  * `Input`, `Textarea`, and `Select` now show their value as greyed out when disabled.
diff --git a/.changeset/ninety-numbers-vanish.md b/.changeset/ninety-numbers-vanish.md
new file mode 100644
index 00000000000..ddf818522be
--- /dev/null
+++ b/.changeset/ninety-numbers-vanish.md
@@ -0,0 +1,26 @@
+---
+"@itwin/itwinui-css": major
+---
+
+Added `.iui-field` class to be used with `.iui-button`, `.iui-input`, and `.iui-select-button`. These components now have consistent styling for base, hover and disabled states.
+
+```diff
+  <button
+-   class="iui-button iui-button-base"
++   class="iui-button iui-button-base iui-field"
+  >
+```
+
+```diff
+  <input
+-   class="iui-input"
++   class="iui-input iui-field"
+  >
+```
+
+```diff
+  <div
+-   class="iui-select-button"
++   class="iui-select-button iui-field"
+  >
+```
diff --git a/.changeset/odd-planes-fix.md b/.changeset/odd-planes-fix.md
new file mode 100644
index 00000000000..2968ed7135f
--- /dev/null
+++ b/.changeset/odd-planes-fix.md
@@ -0,0 +1,14 @@
+---
+"@itwin/itwinui-css": major
+---
+
+Ideas button now requires `.iui-button-idea` and `data-iui-variant="high-visibility"` instead of `data-iui-variant="idea"`.
+
+```diff
+ <button
+-  class="iui-button iui-button-base"
++  class="iui-button iui-button-base iui-field iui-button-idea"
+-  data-iui-variant="idea"
++  data-iui-variant="high-visibility"
+ >
+```
diff --git a/.changeset/perfect-oranges-invite.md b/.changeset/perfect-oranges-invite.md
new file mode 100644
index 00000000000..d0684cdc119
--- /dev/null
+++ b/.changeset/perfect-oranges-invite.md
@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": patch
+---
+
+The hover styling of `Breadcrumbs.Item` has been made more consistent across buttons and anchors.
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_dark_0_demo-anchors_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_dark_0_demo-anchors_0_desktop.png
index d6bcafaf0a5..4daf8a524b2 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_dark_0_demo-anchors_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_dark_0_demo-anchors_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_dark_0_demo-anchors_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_dark_0_demo-anchors_0_desktop.png
index 5694a4ada76..65fa4b5059b 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_dark_0_demo-anchors_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_dark_0_demo-anchors_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_light_0_demo-anchors_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_light_0_demo-anchors_0_desktop.png
index 1d6381463eb..d10644e998a 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_light_0_demo-anchors_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_hc_light_0_demo-anchors_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_light_0_demo-anchors_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_light_0_demo-anchors_0_desktop.png
index 1e3272a9ae3..36e60577a7a 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_light_0_demo-anchors_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_anchors_light_0_demo-anchors_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_dark_0_demo-buttons-1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_dark_0_demo-buttons-1_0_desktop.png
index 066d37e5933..8f5778c3e0c 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_dark_0_demo-buttons-1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_dark_0_demo-buttons-1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_dark_0_demo-buttons-1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_dark_0_demo-buttons-1_0_desktop.png
index ae4d3ec8beb..19e05f89eb0 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_dark_0_demo-buttons-1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_dark_0_demo-buttons-1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_light_0_demo-buttons-1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_light_0_demo-buttons-1_0_desktop.png
index 2131b9ce977..93535df41c7 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_light_0_demo-buttons-1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_hc_light_0_demo-buttons-1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_light_0_demo-buttons-1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_light_0_demo-buttons-1_0_desktop.png
index a1c034d1ca6..40d4ba509a0 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_light_0_demo-buttons-1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_breadcrumb_buttons_light_0_demo-buttons-1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_dark_0_demo-buttons-2_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_dark_0_demo-buttons-2_0_desktop.png
index cf2c509d4d0..5d1cfe4ab56 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_dark_0_demo-buttons-2_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_dark_0_demo-buttons-2_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_dark_0_demo-buttons-2_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_dark_0_demo-buttons-2_0_desktop.png
index 98971255106..eed6e4b12bb 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_dark_0_demo-buttons-2_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_dark_0_demo-buttons-2_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_light_0_demo-buttons-2_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_light_0_demo-buttons-2_0_desktop.png
index fb633aa05c4..107f03a5ecc 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_light_0_demo-buttons-2_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_hc_light_0_demo-buttons-2_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_light_0_demo-buttons-2_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_light_0_demo-buttons-2_0_desktop.png
index 82f67c6dbfd..9cfd78868fe 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_light_0_demo-buttons-2_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_breadcrumbs_State_hover_and_focus_overflow_buttons_light_0_demo-buttons-2_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png
index c522c409573..f38eee20d20 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png
index 4c413e0361a..a32bfd5e85d 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png
index e92262d8a1f..d624a9e05dd 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png
index 2fc57eeda20..7cbebb17f5e 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png
index 3bc415eeb28..5d52ca761b7 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png
index 54cd1f8efe7..80f2e16a9e7 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png
index 462e0c86d00..2c7e0c5dd51 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png
index 59bf90f51b5..d52bc739fee 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png
index cc4897bb5c1..8a2b22c685b 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png
index a168ac2d9a4..bdf251be81c 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png
index d9f26025d40..53d2964908c 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png
index 71ea7d12aee..44a07b1e76e 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png
index 779d0342219..ddebb2ff23e 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png
index 6dfcc11b247..a2219c5fc29 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png
index 03c0ff2b2c4..a1a71bef9d2 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png
index 5ee014fb332..af78fa29eef 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png
index 245a17e3f3d..acd8c17fdcf 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png
index 4ebf0bb7d46..f45c2d3d9c6 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png
index 3fcc1a094e7..2ae23e33d4e 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png
index cac36573473..d869ef6102e 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_dark_0_demo-default_0_desktop.png
index 872de9fa56c..5aa74cf43c8 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_dark_0_demo-default_0_desktop.png
index 90582498306..d03c82400e1 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_light_0_demo-default_0_desktop.png
index 1daeab4878f..3c768c78617 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_light_0_demo-default_0_desktop.png
index 791fb277e01..8585108234b 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Default_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png
index ce2300449fa..cda35065fe2 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png
index 9f6326a95fe..fa70a8252a2 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png
index c5e63e1c3de..3689a6a77a4 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png
index 88549b6053e..30c1ca52c9b 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png
index 30745debc4e..b1d6b73bd85 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png
index 04e69b0346d..3f6bbc8d23d 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png
index a1f5310f87e..0bb6ce8657f 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png
index bb6f0ef2467..297d9412b60 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png
index 43e630e166b..00a8d596b99 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png
index 8c4f1d7f6e0..68a8257fefa 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png
index 98b9a839d1c..357702df139 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png
index 9dd5182db4a..83f40959fdc 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png
index b5ee498c9b3..0b4eb22ea6c 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png
index e23ffaba548..5da8053aa15 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png
index 0118c7169d5..44d4f259014 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png
index d2e1320d695..a579a112415 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png
index f692d401190..b1534b6d57d 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png
index 0015422e541..b21fb8ad262 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png
index ed241b2faa3..6d5347ac4f9 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png
index 12e88e2616c..f0b583cc1db 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png
index b75503505e1..2383c1d9f25 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png
index 80c1220adf6..6ced8f896f1 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png
index fe15442bf10..675a37155c6 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png
index 65f1b958f97..d154e396757 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_dark_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_dark_0_demo-default_0_.png
index 99b0b87c032..739573ed195 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_dark_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_dark_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_dark_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_dark_0_demo-default_0_.png
index e02660736ff..4e9089370b9 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_dark_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_dark_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_light_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_light_0_demo-default_0_.png
index a7535874549..c2b288e1d29 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_light_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_hc_light_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_light_0_demo-default_0_.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_light_0_demo-default_0_.png
index a5cc7191e45..09ccd465c6a 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_light_0_demo-default_0_.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_surface_Type_default_light_0_demo-default_0_.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_dark_0_demo-extras_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_dark_0_demo-extras_0_desktop.png
index 7e59b57eff2..52bc6bde236 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_dark_0_demo-extras_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_dark_0_demo-extras_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_dark_0_demo-extras_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_dark_0_demo-extras_0_desktop.png
index 1942982f23d..0a6b086dd9b 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_dark_0_demo-extras_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_dark_0_demo-extras_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_light_0_demo-extras_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_light_0_demo-extras_0_desktop.png
index 03cbae0ad0f..89e532a86ec 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_light_0_demo-extras_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_hc_light_0_demo-extras_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_light_0_demo-extras_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_light_0_demo-extras_0_desktop.png
index eee2c158b2a..7b35321ba60 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_light_0_demo-extras_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_table_Type_Extras_light_0_demo-extras_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_dark_0_demo-default_0_desktop.png
index bdde1078e9d..2b7c4eba344 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_dark_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_dark_0_demo-default_0_desktop.png
index 4dda49b0373..7a5a9d8788e 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_dark_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_light_0_demo-default_0_desktop.png
index 7170f9a3b16..93c0e5b2b47 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_light_0_demo-default_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_light_0_demo-default_0_desktop.png
index aad675cda6d..f3146a49251 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_light_0_demo-default_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_default_light_0_demo-default_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png
index 958d21b6427..f7683d9951b 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png
index 49dc5d5abef..cfaf6a4672f 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png
index d835c96253e..b3b58a0eb2d 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png
index de52b1043d5..0b915e00fe2 100644
Binary files a/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png and b/apps/css-workshop/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png differ
diff --git a/apps/css-workshop/src/components/Button.astro b/apps/css-workshop/src/components/Button.astro
index f848311ea03..2dabce319ba 100644
--- a/apps/css-workshop/src/components/Button.astro
+++ b/apps/css-workshop/src/components/Button.astro
@@ -5,16 +5,33 @@ type Props = {
   isActive?: boolean;
   dropdown?: boolean;
   idea?: boolean;
+  as?: string;
 } & astroHTML.JSX.ButtonHTMLAttributes;
 
-const { class: className, variant, size, isActive, dropdown, idea, ...props } = Astro.props;
+const {
+  as: Element = 'button',
+  class: className,
+  variant,
+  size,
+  isActive,
+  dropdown,
+  idea,
+  ...props
+} = Astro.props;
 ---
 
-<button
-  class:list={['iui-button', 'iui-button-base', { 'iui-button-dropdown': dropdown }, className]}
-  type='button'
-  data-iui-variant={idea ? 'idea' : variant}
+<Element
+  class:list={[
+    'iui-button',
+    'iui-button-base',
+    'iui-field',
+    { 'iui-button-dropdown': dropdown },
+    { 'iui-button-idea': idea },
+    className,
+  ]}
+  type={Element === 'button' ? 'button' : undefined}
   data-iui-size={size}
+  data-iui-variant={idea ? 'high-visibility' : variant}
   data-iui-active={isActive ? 'true' : undefined}
   {...props}
 >
@@ -39,4 +56,4 @@ const { class: className, variant, size, isActive, dropdown, idea, ...props } =
       </span>
     )
   }
-</button>
+</Element>
diff --git a/apps/css-workshop/src/components/IconButton.astro b/apps/css-workshop/src/components/IconButton.astro
index 6cea28cd778..eb29d0a4d1d 100644
--- a/apps/css-workshop/src/components/IconButton.astro
+++ b/apps/css-workshop/src/components/IconButton.astro
@@ -10,7 +10,7 @@ const { class: className, variant, size, isActive, shift, ...props } = Astro.pro
 ---
 
 <button
-  class:list={['iui-button', 'iui-button-base', className]}
+  class:list={['iui-button', 'iui-button-base', 'iui-field', className]}
   type='button'
   data-iui-variant={variant}
   data-iui-size={size}
diff --git a/apps/css-workshop/src/components/selectTag.js b/apps/css-workshop/src/components/selectTag.js
index 2a2da9b4261..1387c7f5b9e 100644
--- a/apps/css-workshop/src/components/selectTag.js
+++ b/apps/css-workshop/src/components/selectTag.js
@@ -27,8 +27,8 @@ class SelectTag extends HTMLElement {
       </span>
       ${
         dismissible
-          ? `<button class="iui-select-tag-button" aria-label="Delete ${value} tag" type="button">
-            <svg-close-small class="iui-select-tag-button-icon" aria-hidden="true"></svg-close-small>
+          ? `<button class="iui-button iui-field iui-select-tag-button" data-iui-variant="borderless" aria-label="Delete ${value} tag" type="button">
+            <svg-close-small class="iui-button-icon iui-select-tag-button-icon" aria-hidden="true"></svg-close-small>
           </button>`
           : ''
       }
diff --git a/apps/css-workshop/src/pages/breadcrumbs.astro b/apps/css-workshop/src/pages/breadcrumbs.astro
index bb08042c681..39e6e6acab3 100644
--- a/apps/css-workshop/src/pages/breadcrumbs.astro
+++ b/apps/css-workshop/src/pages/breadcrumbs.astro
@@ -38,7 +38,9 @@ import IconButton_ from '../components/IconButton.astro';
       </Button_>
       <ol class='iui-breadcrumbs-list'>
         <li class='iui-breadcrumbs-item'>
-          <a class='iui-anchor iui-breadcrumbs-content' href='#'> Root</a>
+          <Button_ as='a' class='iui-anchor iui-breadcrumbs-content' variant='borderless' href='#'>
+            Root
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
@@ -50,15 +52,29 @@ import IconButton_ from '../components/IconButton.astro';
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <a class='iui-anchor iui-breadcrumbs-content' href='#' id='test-1'> Nested</a>
+          <Button_
+            as='a'
+            class='iui-anchor iui-breadcrumbs-content'
+            variant='borderless'
+            href='#'
+            id='test-1'
+          >
+            Nested
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <a class='iui-anchor iui-breadcrumbs-content' href='#' id='test-2'>
+          <Button_
+            as='a'
+            class='iui-anchor iui-breadcrumbs-content'
+            variant='borderless'
+            href='#'
+            id='test-2'
+          >
             Double nested folder with truncation
-          </a>
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
@@ -79,9 +95,7 @@ import IconButton_ from '../components/IconButton.astro';
       </Button_>
       <ol class='iui-breadcrumbs-list'>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content'>
-            <span> Root</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless'>Root</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
@@ -93,25 +107,23 @@ import IconButton_ from '../components/IconButton.astro';
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='test-3'>
-            <span> Nested</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' id='test-3'>Nested</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='test-4'>
-            <span> Double nested folder with truncation</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' id='test-4'>
+            Double nested folder with truncation
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' aria-current='page'>
-            <span> You are here</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' aria-current='page'>
+            You are here
+          </Button_>
         </li>
       </ol>
     </nav>
@@ -126,41 +138,37 @@ import IconButton_ from '../components/IconButton.astro';
       </Button_>
       <ol class='iui-breadcrumbs-list'>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content'>
-            <span>Root</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless'>Root</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='overflow-hover'>
-            <svg-more class='iui-button-icon' aria-hidden='true'></svg-more>
-          </button>
+          <IconButton_ class='iui-breadcrumbs-content' variant='borderless' id='overflow-hover'>
+            <svg-more></svg-more>
+          </IconButton_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content'>
-            <span> Nested</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless'>Nested</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='overflow-focus'>
-            <span>Double nested folder with truncation</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' id='overflow-focus'>
+            Double nested folder with truncation
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' aria-current='page'>
-            <span>You are here</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' aria-current='page'>
+            You are here
+          </Button_>
         </li>
       </ol>
     </nav>
@@ -174,14 +182,16 @@ import IconButton_ from '../components/IconButton.astro';
         <svg-caret-down-small aria-hidden='true' slot='endo-icon'></svg-caret-down-small>
       </Button_>
       <label class='iui-input-grid iui-inline-label iui-inline-icon'>
-        <input
-          value='C:/Root/Lorem/Ipsum/Nested/Double nested folder with truncation/You are here/'
-          class='iui-input'
-          spellcheck='false'
-        />
-        <IconButton_ variant='borderless' aria-label='Close'>
-          <svg-close-small></svg-close-small>
-        </IconButton_>
+        <div class='iui-input-flex-container'>
+          <input
+            value='C:/Root/Lorem/Ipsum/Nested/Double nested folder with truncation/You are here/'
+            class='iui-input iui-field'
+            spellcheck='false'
+          />
+          <IconButton_ variant='borderless' aria-label='Close'>
+            <svg-close-small></svg-close-small>
+          </IconButton_>
+        </div>
       </label>
     </nav>
   </section>
diff --git a/apps/css-workshop/src/pages/button.astro b/apps/css-workshop/src/pages/button.astro
index a028e7713b4..3340f7d26e4 100644
--- a/apps/css-workshop/src/pages/button.astro
+++ b/apps/css-workshop/src/pages/button.astro
@@ -762,7 +762,7 @@ import IconButton_ from '../components/IconButton.astro';
   <section id='demo-combo-group'>
     <div class='iui-button-group'>
       <Button_>Button 1</Button_>
-      <input class='iui-input' />
+      <input class='iui-input iui-field' />
       <Button_>Button 2</Button_>
     </div>
 
@@ -770,7 +770,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-button-group'>
       <Button_>Button 1</Button_>
-      <input class='iui-input' placeholder='Disabled input' disabled />
+      <input class='iui-input iui-field' disabled />
       <Button_>Button 2</Button_>
     </div>
 
diff --git a/apps/css-workshop/src/pages/color-picker.astro b/apps/css-workshop/src/pages/color-picker.astro
index cd86f59ad0c..5b9bf4cea40 100644
--- a/apps/css-workshop/src/pages/color-picker.astro
+++ b/apps/css-workshop/src/pages/color-picker.astro
@@ -216,7 +216,7 @@ import IconButton_ from '../components/IconButton.astro';
                 min='0'
                 max='255'
                 value='255'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -226,7 +226,7 @@ import IconButton_ from '../components/IconButton.astro';
                 min='0'
                 max='255'
                 value='195'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -236,7 +236,7 @@ import IconButton_ from '../components/IconButton.astro';
                 min='0'
                 max='255'
                 value='53'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -247,7 +247,7 @@ import IconButton_ from '../components/IconButton.astro';
                 max='1'
                 step='0.01'
                 value='1.0'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -354,7 +354,7 @@ import IconButton_ from '../components/IconButton.astro';
                 min='0'
                 max='255'
                 value='42'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -364,7 +364,7 @@ import IconButton_ from '../components/IconButton.astro';
                 min='0'
                 max='100'
                 value='100'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -374,7 +374,7 @@ import IconButton_ from '../components/IconButton.astro';
                 min='0'
                 max='100'
                 value='60'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -385,7 +385,7 @@ import IconButton_ from '../components/IconButton.astro';
                 max='1'
                 step='0.01'
                 value='1.0'
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
               />
             </div>
@@ -468,7 +468,12 @@ import IconButton_ from '../components/IconButton.astro';
           </IconButton_>
           <div class='iui-color-input-fields'>
             <div class='iui-input-grid'>
-              <input value='#ffc335' maxlength='7' class='iui-input' data-iui-size='small' />
+              <input
+                value='#ffc335'
+                maxlength='7'
+                class='iui-input iui-field'
+                data-iui-size='small'
+              />
             </div>
           </div>
         </div>
diff --git a/apps/css-workshop/src/pages/column-filter.astro b/apps/css-workshop/src/pages/column-filter.astro
index 2492a40affb..b61c712882e 100644
--- a/apps/css-workshop/src/pages/column-filter.astro
+++ b/apps/css-workshop/src/pages/column-filter.astro
@@ -24,14 +24,14 @@ import IconButton_ from '../components/IconButton.astro';
       <label class='iui-input-grid'>
         <div class='iui-input-label'>Show items with value that</div>
         <div class='iui-input-with-icon'>
-          <div tabindex='0' id='test-select-1' class='iui-select-button'>
+          <div tabindex='0' id='test-select-1' class='iui-select-button iui-field'>
             <span class='iui-content'>Starts with</span>
           </div>
           <svg-caret-down-small class='iui-end-icon iui-svg-icon' aria-hidden='true'
           ></svg-caret-down-small>
         </div>
       </label>
-      <input class='iui-input' />
+      <input class='iui-input iui-field' />
       <div class='iui-button-bar'>
         <Button_ variant='high-visibility'>Filter</Button_>
         <Button_>Clear</Button_>
diff --git a/apps/css-workshop/src/pages/fieldset.astro b/apps/css-workshop/src/pages/fieldset.astro
index 15bd7f3b66b..1f3699e1b3b 100644
--- a/apps/css-workshop/src/pages/fieldset.astro
+++ b/apps/css-workshop/src/pages/fieldset.astro
@@ -26,7 +26,7 @@ import Layout from './_layout.astro';
       <div class='iui-input-grid' data-iui-label-placement='inline'>
         <label class='iui-input-label'>Resolution</label>
         <div class='iui-input-with-icon'>
-          <div tabindex='0' class='iui-select-button'>
+          <div tabindex='0' class='iui-select-button iui-field'>
             <span class='iui-content'>2560 x 1600</span>
           </div>
           <svg-caret-down-small class='iui-end-icon iui-svg-icon' aria-hidden='true'
@@ -83,7 +83,7 @@ import Layout from './_layout.astro';
         <div class='iui-input-label' data-iui-disabled='true'>Internal URL</div>
         <input
           value='http://127.0.0.1:5500/backstop/minified/fieldset.html'
-          class='iui-input'
+          class='iui-input iui-field'
           disabled
         />
       </label>
diff --git a/apps/css-workshop/src/pages/file-upload.astro b/apps/css-workshop/src/pages/file-upload.astro
index d83e78ba8b3..19f92115e72 100644
--- a/apps/css-workshop/src/pages/file-upload.astro
+++ b/apps/css-workshop/src/pages/file-upload.astro
@@ -67,7 +67,7 @@ import IconButton_ from '../components/IconButton.astro';
   <h2>Text area</h2>
   <section>
     <div class='iui-file-upload'>
-      <textarea placeholder='Type a new message…' class='iui-input' rows='1'></textarea>
+      <textarea placeholder='Type a new message…' class='iui-input iui-field' rows='1'></textarea>
 
       <div class='iui-content'>
         <span>Drop file to upload.</span>
@@ -77,7 +77,7 @@ import IconButton_ from '../components/IconButton.astro';
 
   <section id='demo-text-area'>
     <div class='iui-file-upload iui-drag'>
-      <textarea placeholder='Type a new message…' class='iui-input' rows='1'></textarea>
+      <textarea placeholder='Type a new message…' class='iui-input iui-field' rows='1'></textarea>
 
       <div class='iui-content'>
         <span>Drop file to upload.</span>
diff --git a/apps/css-workshop/src/pages/information-panel.astro b/apps/css-workshop/src/pages/information-panel.astro
index f3be6066cf1..58c38b6e0ea 100644
--- a/apps/css-workshop/src/pages/information-panel.astro
+++ b/apps/css-workshop/src/pages/information-panel.astro
@@ -794,27 +794,32 @@ import IconButton_ from '../components/IconButton.astro';
             <label class='iui-input-label' for='title-2'> Title</label>
             <input
               value='Beta (Gold Master)'
-              class='iui-input'
+              class='iui-input iui-field'
               data-iui-size='small'
               id='title-2'
             />
 
             <label class='iui-input-label'> Duration</label>
-            <input readonly value='03:36' class='iui-input' data-iui-size='small' />
+            <input readonly value='03:36' class='iui-input iui-field' data-iui-size='small' />
 
             <label class='iui-input-label' for='authors-2'> Authors</label>
-            <input value='DJ Terry' class='iui-input' data-iui-size='small' id='authors-2' />
+            <input
+              value='DJ Terry'
+              class='iui-input iui-field'
+              data-iui-size='small'
+              id='authors-2'
+            />
 
             <label class='iui-input-label'> Audio channels</label>
-            <input readonly value='Stereo' class='iui-input' data-iui-size='small' />
+            <input readonly value='Stereo' class='iui-input iui-field' data-iui-size='small' />
 
             <label class='iui-input-label'> Sample rate</label>
-            <input readonly value='44.1 kHz' class='iui-input' data-iui-size='small' />
+            <input readonly value='44.1 kHz' class='iui-input iui-field' data-iui-size='small' />
 
             <label class='iui-input-label' for='album-2'> Album</label>
             <input
               value="DJ Terry's Super Fire Mixtape"
-              class='iui-input'
+              class='iui-input iui-field'
               data-iui-size='small'
               id='album-2'
             />
@@ -822,7 +827,7 @@ import IconButton_ from '../components/IconButton.astro';
             <label class='iui-input-label' for='musical-genre-2'> Musical genre</label>
             <div class='iui-input-with-icon'>
               <input
-                class='iui-input'
+                class='iui-input iui-field'
                 data-iui-size='small'
                 id='musical-genre-2'
                 role='combobox'
@@ -839,7 +844,12 @@ import IconButton_ from '../components/IconButton.astro';
             </div>
 
             <label class='iui-input-label' for='year-recorded-2'> Year recorded</label>
-            <input value='2021' class='iui-input' data-iui-size='small' id='year-recorded-2' />
+            <input
+              value='2021'
+              class='iui-input iui-field'
+              data-iui-size='small'
+              id='year-recorded-2'
+            />
           </div>
         </div>
       </div>
diff --git a/apps/css-workshop/src/pages/input-grid.astro b/apps/css-workshop/src/pages/input-grid.astro
index 1ae1dc050c3..6fc690b7e60 100644
--- a/apps/css-workshop/src/pages/input-grid.astro
+++ b/apps/css-workshop/src/pages/input-grid.astro
@@ -44,7 +44,7 @@ import Layout from './_layout.astro';
   <section id='demo-default'>
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-01'>This is label</label>
-      <input class='iui-input' id='input-01' placeholder='Input...' />
+      <input class='iui-input iui-field' id='input-01' placeholder='Input...' />
       <div class='iui-status-message'>
         <div>This is message</div>
       </div>
@@ -52,15 +52,7 @@ import Layout from './_layout.astro';
 
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-02'>This is label</label>
-      <input class='iui-input' id='input-02' placeholder='Input...' value='With value' />
-      <div class='iui-status-message'>
-        <div>This is message</div>
-      </div>
-    </div>
-
-    <div class='iui-input-grid'>
-      <label class='iui-input-label' data-iui-disabled='true' for='input-03'>This is label</label>
-      <input class='iui-input' disabled id='input-03' placeholder='Disabled input...' />
+      <input class='iui-input iui-field' id='input-02' placeholder='Input...' value='With value' />
       <div class='iui-status-message'>
         <div>This is message</div>
       </div>
@@ -69,7 +61,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid'>
       <label class='iui-input-label' data-iui-disabled='true' for='input-04'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         disabled
         id='input-04'
         placeholder='Input...'
@@ -82,7 +74,7 @@ import Layout from './_layout.astro';
 
     <div class='iui-input-grid'>
       <label class='iui-input-label iui-required' for='input-05'>This is label</label>
-      <input class='iui-input' required id='input-05' placeholder='Required input...' />
+      <input class='iui-input iui-field' required id='input-05' placeholder='Required input...' />
       <div class='iui-status-message'>
         <div>This is message</div>
       </div>
@@ -91,7 +83,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-06'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         id='input-06'
         placeholder='Positive input...'
         data-iui-status='positive'
@@ -104,7 +96,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-07'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         id='input-07'
         placeholder='Warning input...'
         data-iui-status='warning'
@@ -117,7 +109,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-08'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         id='input-08'
         placeholder='Negative input...'
         data-iui-status='negative'
@@ -134,7 +126,7 @@ import Layout from './_layout.astro';
   <section id='demo-inline'>
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' for='input-inline-01'>This is label</label>
-      <input class='iui-input' id='input-inline-01' placeholder='Input...' />
+      <input class='iui-input iui-field' id='input-inline-01' placeholder='Input...' />
       <div class='iui-status-message'>
         <div>This is message</div>
       </div>
@@ -142,17 +134,12 @@ import Layout from './_layout.astro';
 
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' for='input-inline-02'>This is label</label>
-      <input class='iui-input' id='input-inline-02' placeholder='Input...' value='With value' />
-      <div class='iui-status-message'>
-        <div>This is message</div>
-      </div>
-    </div>
-
-    <div class='iui-input-grid' data-iui-label-placement='inline'>
-      <label class='iui-input-label' data-iui-disabled='true' for='input-inline-03'
-        >This is label</label
-      >
-      <input class='iui-input' disabled id='input-inline-03' placeholder='Disabled input...' />
+      <input
+        class='iui-input iui-field'
+        id='input-inline-02'
+        placeholder='Input...'
+        value='With value'
+      />
       <div class='iui-status-message'>
         <div>This is message</div>
       </div>
@@ -163,7 +150,7 @@ import Layout from './_layout.astro';
         >This is label</label
       >
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         disabled
         id='input-inline-04'
         placeholder='Input...'
@@ -176,7 +163,12 @@ import Layout from './_layout.astro';
 
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label iui-required' for='input-inline-05'>This is label</label>
-      <input class='iui-input' required id='input-inline-05' placeholder='Required input...' />
+      <input
+        class='iui-input iui-field'
+        required
+        id='input-inline-05'
+        placeholder='Required input...'
+      />
       <div class='iui-status-message'>
         <div>This is message</div>
       </div>
@@ -185,7 +177,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' for='input-inline-06'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         id='input-inline-06'
         placeholder='Positive input...'
         data-iui-status='positive'
@@ -198,7 +190,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' for='input-inline-07'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         id='input-inline-07'
         placeholder='Warning input...'
         data-iui-status='warning'
@@ -211,7 +203,7 @@ import Layout from './_layout.astro';
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' for='input-inline-08'>This is label</label>
       <input
-        class='iui-input'
+        class='iui-input iui-field'
         id='input-inline-08'
         placeholder='Negative input...'
         data-iui-status='negative'
diff --git a/apps/css-workshop/src/pages/input.astro b/apps/css-workshop/src/pages/input.astro
index c4008f26e8c..443e9ccad94 100644
--- a/apps/css-workshop/src/pages/input.astro
+++ b/apps/css-workshop/src/pages/input.astro
@@ -45,7 +45,12 @@ import IconButton_ from '../components/IconButton.astro';
   <section id='demo-default'>
     <div class='iui-input-grid' id='demo-default-singular'>
       <label class='iui-input-label iui-required'>Input label</label>
-      <input placeholder='Placeholder…' class='iui-input' id='test-default-singular' required />
+      <input
+        placeholder='Placeholder…'
+        class='iui-input iui-field'
+        id='test-default-singular'
+        required
+      />
       <div class='iui-status-message'>
         <div>Help message.</div>
       </div>
@@ -53,7 +58,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-10'>Input label</label>
-      <input id='input-10' value='A value' class='iui-input' />
+      <input id='input-10' value='A value' class='iui-input iui-field' />
       <div class='iui-status-message'>
         <div>Help message.</div>
       </div>
@@ -61,15 +66,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid'>
       <label class='iui-input-label' for='input-11'>Input label</label>
-      <input id='input-11' readonly value='A read-only value' class='iui-input' />
-      <div class='iui-status-message'>
-        <div>Help message.</div>
-      </div>
-    </div>
-
-    <div class='iui-input-grid'>
-      <label class='iui-input-label' data-iui-disabled='true'>Input label</label>
-      <input disabled placeholder='Placeholder…' class='iui-input' />
+      <input id='input-11' readonly value='A read-only value' class='iui-input iui-field' />
       <div class='iui-status-message'>
         <div>Help message.</div>
       </div>
@@ -77,7 +74,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid'>
       <label class='iui-input-label' data-iui-disabled='true' for='input-12'>Input label</label>
-      <input id='input-12' disabled value='A value' class='iui-input' />
+      <input id='input-12' disabled value='A value' class='iui-input iui-field' />
       <div class='iui-status-message'>
         <div>Help message.</div>
       </div>
@@ -88,7 +85,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid' id='demo-status-singular' data-iui-status='positive'>
       <label class='iui-input-label'>Input label</label>
-      <input placeholder='Placeholder…' class='iui-input' id='test-status-singular' />
+      <input placeholder='Placeholder…' class='iui-input iui-field' id='test-status-singular' />
       <div class='iui-status-message' data-iui-status='positive'>
         <div class='iui-svg-icon'>
           <svg-status-success class='iui-svg-icon' aria-hidden='true'></svg-status-success>
@@ -99,7 +96,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid' data-iui-status='warning'>
       <label class='iui-input-label'>Input label</label>
-      <input placeholder='Placeholder…' class='iui-input' />
+      <input placeholder='Placeholder…' class='iui-input iui-field' />
       <div class='iui-status-message' data-iui-status='warning'>
         <div class='iui-svg-icon'>
           <svg-status-warning class='iui-svg-icon' aria-hidden='true'></svg-status-warning>
@@ -110,7 +107,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid' data-iui-status='negative'>
       <label class='iui-input-label'>Input label</label>
-      <input placeholder='Placeholder…' class='iui-input' />
+      <input placeholder='Placeholder…' class='iui-input iui-field' />
       <div class='iui-status-message' data-iui-status='negative'>
         <div class='iui-svg-icon'>
           <svg-status-error class='iui-svg-icon' aria-hidden='true'></svg-status-error>
@@ -128,22 +125,17 @@ import IconButton_ from '../components/IconButton.astro';
   <section id='demo-inline'>
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label iui-required'>Input label</label>
-      <input placeholder='Placeholder…' class='iui-input' required />
+      <input placeholder='Placeholder…' class='iui-input iui-field' required />
     </div>
 
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' for='input-1'>Input label</label>
-      <input id='input-1' value='A value' class='iui-input' />
-    </div>
-
-    <div class='iui-input-grid' data-iui-label-placement='inline'>
-      <label class='iui-input-label' data-iui-disabled='true'>Input label</label>
-      <input disabled placeholder='Placeholder…' class='iui-input' />
+      <input id='input-1' value='A value' class='iui-input iui-field' />
     </div>
 
     <div class='iui-input-grid' data-iui-label-placement='inline'>
       <label class='iui-input-label' data-iui-disabled='true' for='input-13'>Input label</label>
-      <input id='input-13' disabled value='A value' class='iui-input' />
+      <input id='input-13' disabled value='A value' class='iui-input iui-field' />
     </div>
 
     <!-- ------------------------------------------------------------------------------------------------ -->
@@ -243,7 +235,7 @@ import IconButton_ from '../components/IconButton.astro';
 
     <div class='iui-input-grid iui-inline-label' data-iui-label-placement='inline'>
       <label class='iui-input-label'>Input label</label>
-      <input placeholder='Placeholder…' class='iui-input' />
+      <input placeholder='Placeholder…' class='iui-input iui-field' />
       <div class='iui-status-message'>
         <div class='iui-svg-icon'>
           <svg-info-circular class='iui-svg-icon' aria-hidden='true'></svg-info-circular>
@@ -258,42 +250,38 @@ import IconButton_ from '../components/IconButton.astro';
   <h2>Without label</h2>
   <section id='demo-no-label'>
     <div class='iui-input-grid'>
-      <input placeholder='Placeholder…' class='iui-input' />
+      <input placeholder='Placeholder…' class='iui-input iui-field' />
     </div>
 
     <div class='iui-input-grid'>
-      <input aria-label='Search' value='A value' class='iui-input' />
+      <input aria-label='Search' value='A value' class='iui-input iui-field' />
     </div>
 
     <div class='iui-input-grid'>
-      <input disabled placeholder='Placeholder…' class='iui-input' />
-    </div>
-
-    <div class='iui-input-grid'>
-      <input disabled aria-label='Search' value='A value' class='iui-input' />
+      <input disabled aria-label='Search' value='A value' class='iui-input iui-field' />
     </div>
 
     <!-- ------------------------------------------------------------------------------------------------ -->
     <!-- Status styling from iui-input -->
 
-    <input placeholder='Placeholder…' class='iui-input' data-iui-status='positive' />
+    <input placeholder='Placeholder…' class='iui-input iui-field' data-iui-status='positive' />
 
-    <input placeholder='Placeholder…' class='iui-input' data-iui-status='warning' />
+    <input placeholder='Placeholder…' class='iui-input iui-field' data-iui-status='warning' />
 
-    <input placeholder='Placeholder…' class='iui-input' data-iui-status='negative' />
+    <input placeholder='Placeholder…' class='iui-input iui-field' data-iui-status='negative' />
 
     <!-- ------------------------------------------------------------------------------------------------ -->
 
     <div class='iui-input-grid'>
-      <input aria-label='Search' value='Small' class='iui-input' data-iui-size='small' />
+      <input aria-label='Search' value='Small' class='iui-input iui-field' data-iui-size='small' />
     </div>
 
     <div class='iui-input-grid'>
-      <input aria-label='Search' value='Default' class='iui-input' />
+      <input aria-label='Search' value='Default' class='iui-input iui-field' />
     </div>
 
     <div class='iui-input-grid'>
-      <input aria-label='Search' value='Large' class='iui-input' data-iui-size='large' />
+      <input aria-label='Search' value='Large' class='iui-input iui-field' data-iui-size='large' />
     </div>
 
     <div class='iui-input-grid' data-iui-status='positive'>
@@ -345,7 +333,7 @@ import IconButton_ from '../components/IconButton.astro';
         name='email'
         id='email'
         autocomplete='on'
-        class='iui-input'
+        class='iui-input iui-field'
       />
     </div>
   </form>
@@ -357,36 +345,24 @@ import IconButton_ from '../components/IconButton.astro';
     <div id='block-labels'>
       <label class='iui-input-label' for='test-1'>First name</label>
       <div class='iui-input-grid'>
-        <input placeholder='Placeholder…' class='iui-input' id='test-1' />
-      </div>
-
-      <label class='iui-input-label' data-iui-disabled='true' for='test-2'>Middle name</label>
-      <div class='iui-input-grid'>
-        <input placeholder='Placeholder…' class='iui-input' id='test-2' disabled />
+        <input placeholder='Placeholder…' class='iui-input iui-field' id='test-1' />
       </div>
 
       <div class='iui-input-label iui-required' for='test-3'>Last name</div>
       <div class='iui-input-grid'>
-        <input placeholder='Placeholder…' class='iui-input' id='test-3' />
+        <input placeholder='Placeholder…' class='iui-input iui-field' id='test-3' />
       </div>
     </div>
 
     <div id='inline-labels'>
       <label class='iui-input-label iui-inline' for='test-4'>First name</label>
       <div class='iui-input-grid'>
-        <input placeholder='Placeholder…' class='iui-input' id='test-4' />
-      </div>
-
-      <label class='iui-input-label iui-inline' data-iui-disabled='true' for='test-5'
-        >Middle name</label
-      >
-      <div class='iui-input-grid'>
-        <input placeholder='Placeholder…' class='iui-input' id='test-5' disabled />
+        <input placeholder='Placeholder…' class='iui-input iui-field' id='test-4' />
       </div>
 
       <label class='iui-input-label iui-inline iui-required' for='test-6'>Last name</label>
       <div class='iui-input-grid'>
-        <input placeholder='Placeholder…' class='iui-input' id='test-6' />
+        <input placeholder='Placeholder…' class='iui-input iui-field' id='test-6' />
       </div>
     </div>
   </section>
@@ -415,7 +391,7 @@ import IconButton_ from '../components/IconButton.astro';
       >
         <svg-search class='iui-button-icon' aria-hidden='true'></svg-search></span
       >
-      <input placeholder='Placeholder…' type='text' id='search-3' disabled />
+      <input type='text' id='search-3' disabled />
       <IconButton_ class='iui-input-flex-container-icon' variant='borderless' disabled>
         <svg-close-small></svg-close-small>
       </IconButton_>
diff --git a/apps/css-workshop/src/pages/menu.astro b/apps/css-workshop/src/pages/menu.astro
index 7ec99439e10..1322bfc2109 100644
--- a/apps/css-workshop/src/pages/menu.astro
+++ b/apps/css-workshop/src/pages/menu.astro
@@ -225,7 +225,7 @@ import Button_ from '../components/Button.astro';
         <div class='iui-text-muted' style='margin-bottom: 8px;'>terry.rivers@email.com</div>
         <label class='iui-input-grid'>
           <div class='iui-input-with-icon'>
-            <div tabindex='0' class='iui-select-button'>
+            <div tabindex='0' class='iui-select-button iui-field'>
               <span class='iui-list-item-content'>Administrator</span>
             </div>
             <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -577,7 +577,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Small select label</div>
       <div class='iui-input-with-icon iui-small'>
-        <div tabindex='0' class='iui-select-button iui-active'>
+        <div tabindex='0' class='iui-select-button iui-field iui-active'>
           <svg-placeholder class='iui-list-item-icon' aria-hidden='true'></svg-placeholder>
           <span class='iui-list-item-content'>Alpha</span>
         </div>
@@ -638,7 +638,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Default select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button iui-active'>
+        <div tabindex='0' class='iui-select-button iui-field iui-active'>
           <svg-placeholder class='iui-list-item-icon' aria-hidden='true'></svg-placeholder>
           <span class='iui-list-item-content'>Alpha</span>
         </div>
@@ -699,7 +699,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Large select label</div>
       <div class='iui-input-with-icon iui-large'>
-        <div tabindex='0' class='iui-select-button iui-active'>
+        <div tabindex='0' class='iui-select-button iui-field iui-active'>
           <svg-placeholder class='iui-list-item-icon' aria-hidden='true'></svg-placeholder>
           <span class='iui-list-item-content'>Alpha</span>
         </div>
diff --git a/apps/css-workshop/src/pages/non-ideal-state.astro b/apps/css-workshop/src/pages/non-ideal-state.astro
index a924be6cff8..7746ccd41b5 100644
--- a/apps/css-workshop/src/pages/non-ideal-state.astro
+++ b/apps/css-workshop/src/pages/non-ideal-state.astro
@@ -1286,7 +1286,7 @@ import Checkbox_ from '../components/Checkbox.astro';
       <div class='iui-non-ideal-state-actions'>
         <label class='iui-input-grid'>
           <div class='iui-input-with-icon'>
-            <div class='iui-select-button iui-placeholder'>Please choose…</div>
+            <div class='iui-select-button iui-field iui-placeholder'>Please choose…</div>
             <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
             ></svg-caret-down-small>
           </div>
diff --git a/apps/css-workshop/src/pages/select.astro b/apps/css-workshop/src/pages/select.astro
index 3b98d97f142..26101e9be23 100644
--- a/apps/css-workshop/src/pages/select.astro
+++ b/apps/css-workshop/src/pages/select.astro
@@ -47,7 +47,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' id='demo-default-singular'>
       <div class='iui-input-label iui-required'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button iui-placeholder' id='test-select-1'>
+        <div tabindex='0' class='iui-select-button iui-field iui-placeholder' id='test-select-1'>
           <span class='iui-content'>Placeholder…</span>
         </div>
         <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -61,7 +61,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Select native label</div>
       <div class='iui-input-with-icon'>
-        <select class='iui-select-button'>
+        <select class='iui-select-button iui-field'>
           <option value='' selected disabled> Placeholder…</option>
           <option value='one'>Option one</option>
           <option value='two' disabled>Option two</option>
@@ -78,7 +78,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>ComboBox label</div>
       <div class='iui-input-with-icon'>
-        <input class='iui-input' placeholder='Placeholder…' />
+        <input class='iui-input iui-field' placeholder='Placeholder…' />
         <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
         ></svg-caret-down-small>
       </div>
@@ -91,7 +91,7 @@ import Button_ from '../components/Button.astro';
       <div class='iui-input-label'>ComboBox multiselect label</div>
       <div class='iui-input-with-icon'>
         <input
-          class='iui-input'
+          class='iui-input iui-field'
           placeholder='Placeholder…'
           style='padding-left: min(414px, calc(70% + 20px))'
         />
@@ -109,22 +109,10 @@ import Button_ from '../components/Button.astro';
       </div>
     </label>
 
-    <label class='iui-input-grid'>
-      <div class='iui-input-label' data-iui-disabled='true'>Disabled ComboBox label</div>
-      <div class='iui-input-with-icon'>
-        <input class='iui-input iui-disabled' placeholder='Placeholder…' disabled />
-        <svg-caret-down-small class='iui-svg-icon iui-end-icon iui-disabled' aria-hidden='true'
-        ></svg-caret-down-small>
-      </div>
-      <div class='iui-status-message'>
-        <div>Help message.</div>
-      </div>
-    </label>
-
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button'>
+        <div tabindex='0' class='iui-select-button iui-field'>
           <span class='iui-content'></span>
         </div>
         <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -138,7 +126,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button'>
+        <div tabindex='0' class='iui-select-button iui-field'>
           <svg-placeholder class='iui-icon' aria-hidden='true'></svg-placeholder>
           <span class='iui-content'
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -160,7 +148,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid'>
       <div class='iui-input-label'>Select native label</div>
       <div class='iui-input-with-icon'>
-        <select class='iui-select-button'>
+        <select class='iui-select-button iui-field'>
           <option value='one'
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
             incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -183,21 +171,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid iui-disabled'>
       <div class='iui-input-label'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div class='iui-select-button iui-disabled iui-placeholder'>
-          <span class='iui-content'>Placeholder…</span>
-        </div>
-        <svg-caret-down-small class='iui-svg-icon iui-end-icon iui-disabled' aria-hidden='true'
-        ></svg-caret-down-small>
-      </div>
-      <div class='iui-status-message'>
-        <div>Help message.</div>
-      </div>
-    </label>
-
-    <label class='iui-input-grid iui-disabled'>
-      <div class='iui-input-label'>Select label</div>
-      <div class='iui-input-with-icon'>
-        <div class='iui-select-button iui-disabled'>
+        <div class='iui-select-button iui-field' data-iui-disabled='true'>
           <span class='iui-content'
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
             incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -218,7 +192,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid iui-disabled'>
       <div class='iui-input-label'>Select native label</div>
       <div class='iui-input-with-icon'>
-        <select class='iui-select-button' disabled>
+        <select class='iui-select-button iui-field' disabled>
           <option value='small'>Small native</option>
           <option value='default' selected
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -244,7 +218,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' data-iui-status='positive'>
       <div class='iui-input-label'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button iui-placeholder'>
+        <div tabindex='0' class='iui-select-button iui-field iui-placeholder'>
           <span class='iui-content'>Placeholder…</span>
         </div>
         <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -259,7 +233,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' data-iui-status='warning'>
       <div class='iui-input-label'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button iui-placeholder'>
+        <div tabindex='0' class='iui-select-button iui-field iui-placeholder'>
           <span class='iui-content'>Placeholder…</span>
         </div>
         <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -274,7 +248,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' data-iui-status='negative'>
       <div class='iui-input-label'>Select label</div>
       <div class='iui-input-with-icon'>
-        <div tabindex='0' class='iui-select-button iui-placeholder'>
+        <div tabindex='0' class='iui-select-button iui-field iui-placeholder'>
           <span class='iui-content'>Placeholder…</span>
         </div>
         <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'>
@@ -289,7 +263,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' data-iui-status='positive'>
       <div class='iui-input-label'>Select native label</div>
       <div class='iui-input-with-icon'>
-        <select class='iui-select-button'>
+        <select class='iui-select-button iui-field'>
           <option value='one'>Option one</option>
           <option value='two'>Option two</option>
           <option value='three'>Option three</option>
@@ -306,7 +280,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' data-iui-status='warning'>
       <div class='iui-input-label'>Select native label</div>
       <div class='iui-input-with-icon'>
-        <select class='iui-select-button'>
+        <select class='iui-select-button iui-field'>
           <option value='one'>Option one</option>
           <option value='two'>Option two</option>
           <option value='three'>Option three</option>
@@ -323,7 +297,7 @@ import Button_ from '../components/Button.astro';
     <label class='iui-input-grid' data-iui-status='negative'>
       <div class='iui-input-label'>Select native label</div>
       <div class='iui-input-with-icon'>
-        <select class='iui-select-button'>
+        <select class='iui-select-button iui-field'>
           <option value='one'>Option one</option>
           <option value='two'>Option two</option>
           <option value='three'>Option three</option>
@@ -345,7 +319,7 @@ import Button_ from '../components/Button.astro';
   <h2>Borderless</h2>
   <section id='demo-borderless'>
     <div class='iui-input-with-icon' id='demo-borderless-singular'>
-      <select class='iui-select-button' data-iui-variant='borderless' id='test-select-2'>
+      <select class='iui-select-button iui-field' data-iui-variant='borderless' id='test-select-2'>
         <option value='one'
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
           ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
@@ -362,7 +336,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button' data-iui-variant='borderless' disabled>
+      <select class='iui-select-button iui-field' data-iui-variant='borderless' disabled>
         <option value='small'>Small native</option>
         <option value='default' selected
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
@@ -379,7 +353,11 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button' data-iui-variant='borderless' data-iui-status='positive'>
+      <select
+        class='iui-select-button iui-field'
+        data-iui-variant='borderless'
+        data-iui-status='positive'
+      >
         <option value='one'>Option one</option>
         <option value='two'>Option two</option>
         <option value='three'>Option three</option>
@@ -389,7 +367,11 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button' data-iui-variant='borderless' data-iui-status='warning'>
+      <select
+        class='iui-select-button iui-field'
+        data-iui-variant='borderless'
+        data-iui-status='warning'
+      >
         <option value='one'>Option one</option>
         <option value='two'>Option two</option>
         <option value='three'>Option three</option>
@@ -399,7 +381,11 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button' data-iui-variant='borderless' data-iui-status='negative'>
+      <select
+        class='iui-select-button iui-field'
+        data-iui-variant='borderless'
+        data-iui-status='negative'
+      >
         <option value='one'>Option one</option>
         <option value='two'>Option two</option>
         <option value='three'>Option three</option>
@@ -417,7 +403,7 @@ import Button_ from '../components/Button.astro';
 
   <section id='demo-sizes'>
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button' data-iui-size='small'>
+      <div tabindex='0' class='iui-select-button iui-field' data-iui-size='small'>
         <span class='iui-content'>Small</span>
       </div>
       <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -425,13 +411,15 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button'><span class='iui-content'>Default</span></div>
+      <div tabindex='0' class='iui-select-button iui-field'>
+        <span class='iui-content'>Default</span>
+      </div>
       <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
       ></svg-caret-down-small>
     </div>
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button' data-iui-size='large'>
+      <div tabindex='0' class='iui-select-button iui-field' data-iui-size='large'>
         <span class='iui-content'>Large</span>
       </div>
       <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -439,7 +427,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button' data-iui-size='small'>
+      <select class='iui-select-button iui-field' data-iui-size='small'>
         <option value='small' selected> Small native</option>
         <option value='default'>Default native</option>
         <option value='large'>Large native</option>
@@ -449,7 +437,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button'>
+      <select class='iui-select-button iui-field'>
         <option value='small'>Small native</option>
         <option value='default' selected>Default native</option>
         <option value='large'>Large native</option>
@@ -459,7 +447,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <select class='iui-select-button' data-iui-size='large'>
+      <select class='iui-select-button iui-field' data-iui-size='large'>
         <option value='small'>Small native</option>
         <option value='default'>Default native</option>
         <option value='large' selected> Large native</option>
@@ -480,7 +468,11 @@ import Button_ from '../components/Button.astro';
     <!-- Status styling from iui-select-button -->
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button iui-placeholder' data-iui-status='positive'>
+      <div
+        tabindex='0'
+        class='iui-select-button iui-field iui-placeholder'
+        data-iui-status='positive'
+      >
         <span class='iui-content'>Placeholder…</span>
       </div>
       <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -488,7 +480,11 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button iui-placeholder' data-iui-status='warning'>
+      <div
+        tabindex='0'
+        class='iui-select-button iui-field iui-placeholder'
+        data-iui-status='warning'
+      >
         <span class='iui-content'>Placeholder…</span>
       </div>
       <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'
@@ -496,7 +492,11 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button iui-placeholder' data-iui-status='negative'>
+      <div
+        tabindex='0'
+        class='iui-select-button iui-field iui-placeholder'
+        data-iui-status='negative'
+      >
         <span class='iui-content'>Placeholder…</span>
       </div>
       <svg-caret-down-small class='iui-svg-icon iui-end-icon' aria-hidden='true'>
@@ -514,7 +514,7 @@ import Button_ from '../components/Button.astro';
 
   <section id='demo-inline-combo'>
     <div class='iui-input-with-icon' id='demo-in-context'>
-      <div tabindex='0' class='iui-select-button'>
+      <div tabindex='0' class='iui-select-button iui-field'>
         <span class='iui-content'
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
           ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
@@ -536,7 +536,7 @@ import Button_ from '../components/Button.astro';
 
   <section id='demo-multi'>
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button' data-iui-size='small'>
+      <div tabindex='0' class='iui-select-button iui-field' data-iui-size='small'>
         <span class='iui-content'>
           <div class='iui-select-tag-container'>
             <multi-select-tag value='Option 1' dismissible></multi-select-tag>
@@ -550,7 +550,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button'>
+      <div tabindex='0' class='iui-select-button iui-field'>
         <span class='iui-content'>
           <div class='iui-select-tag-container'>
             <multi-select-tag value='Option 1' dismissible></multi-select-tag>
@@ -564,7 +564,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon'>
-      <div tabindex='0' class='iui-select-button' data-iui-size='large'>
+      <div tabindex='0' class='iui-select-button iui-field' data-iui-size='large'>
         <span class='iui-content'>
           <div class='iui-select-tag-container'>
             <multi-select-tag value='Option 1' dismissible></multi-select-tag>
@@ -578,7 +578,7 @@ import Button_ from '../components/Button.astro';
     </div>
 
     <div class='iui-input-with-icon' style='width: 480px'>
-      <div tabindex='0' class='iui-select-button' data-iui-size='large'>
+      <div tabindex='0' class='iui-select-button iui-field' data-iui-size='large'>
         <span class='iui-content'>
           <div class='iui-select-tag-container'>
             <multi-select-tag value='Option 1' dismissible></multi-select-tag>
diff --git a/apps/css-workshop/src/pages/side-navigation.astro b/apps/css-workshop/src/pages/side-navigation.astro
index 2f6e0da72cc..c6244d66a3c 100644
--- a/apps/css-workshop/src/pages/side-navigation.astro
+++ b/apps/css-workshop/src/pages/side-navigation.astro
@@ -53,6 +53,7 @@ import IconButton_ from '../components/IconButton.astro';
       <!-- Expand arrow -->
       <IconButton_
         class='iui-sidenav-button iui-expand'
+        size='small'
         role='button'
         aria-label='Expand menu'
         onclick='togglePanelExpansion(this)'
@@ -263,6 +264,7 @@ import IconButton_ from '../components/IconButton.astro';
         <!-- Expand arrow -->
         <IconButton_
           class='iui-sidenav-button iui-expand'
+          size='small'
           role='button'
           aria-label='Expand menu'
           onclick='togglePanelExpansion(this)'
@@ -419,6 +421,7 @@ import IconButton_ from '../components/IconButton.astro';
         <!-- Expand arrow -->
         <IconButton_
           class='iui-sidenav-button iui-expand'
+          size='small'
           role='button'
           aria-label='Expand menu'
           onclick='togglePanelExpansion(this)'
diff --git a/apps/css-workshop/src/pages/surface.astro b/apps/css-workshop/src/pages/surface.astro
index c6f46a1978a..f293a9fd286 100644
--- a/apps/css-workshop/src/pages/surface.astro
+++ b/apps/css-workshop/src/pages/surface.astro
@@ -81,7 +81,7 @@ import IconButton_ from '../components/IconButton.astro';
       <div class='iui-surface-header'>
         <div class='demo-flex-component'>
           <h2 class='iui-text-subheading'>Default surface</h2>
-          <IconButton_ variant='borderless'>
+          <IconButton_ variant='borderless' shift='right'>
             <svg-settings></svg-settings>
           </IconButton_>
         </div>
diff --git a/apps/css-workshop/src/pages/table.astro b/apps/css-workshop/src/pages/table.astro
index e85b2f29420..341d6dce296 100644
--- a/apps/css-workshop/src/pages/table.astro
+++ b/apps/css-workshop/src/pages/table.astro
@@ -2195,44 +2195,72 @@ import IconButton_ from '../components/IconButton.astro';
           </IconButton_>
 
           <span class='iui-table-paginator-pages-group'>
-            <button
+            <Button_
               class='iui-table-paginator-page-button'
-              data-iui-active='true'
+              variant='borderless'
+              isActive
               aria-label='Page 1'
-              type='button'
             >
               <span>1</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 2' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 2'
+            >
               <span>2</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 3' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 3'
+            >
               <span>3</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 4' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 4'
+            >
               <span>4</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 5' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 5'
+            >
               <span>5</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 6' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 6'
+            >
               <span>6</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 7' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 7'
+            >
               <span>7</span>
-            </button>
+            </Button_>
 
             <span class='iui-table-paginator-ellipsis'>&mldr;</span>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 30' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 30'
+            >
               <span>30</span>
-            </button>
+            </Button_>
           </span>
 
           <IconButton_ variant='borderless' aria-label='Next page'>
@@ -2442,44 +2470,72 @@ import IconButton_ from '../components/IconButton.astro';
           </IconButton_>
 
           <span class='iui-table-paginator-pages-group'>
-            <button class='iui-table-paginator-page-button' aria-label='Page 1' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 1'
+            >
               <span>1</span>
-            </button>
+            </Button_>
 
             <span class='iui-table-paginator-ellipsis'>&mldr;</span>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 2' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 24'
+            >
               <span>24</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 3' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 25'
+            >
               <span>25</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 4' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 26'
+            >
               <span>26</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 5' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 27'
+            >
               <span>27</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 6' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 28'
+            >
               <span>28</span>
-            </button>
+            </Button_>
 
-            <button class='iui-table-paginator-page-button' aria-label='Page 7' type='button'>
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              aria-label='Page 29'
+            >
               <span>29</span>
-            </button>
+            </Button_>
 
-            <button
+            <Button_
               class='iui-table-paginator-page-button'
-              data-iui-active='true'
+              variant='borderless'
               aria-label='Page 30'
-              type='button'
+              isActive
             >
               <span>30</span>
-            </button>
+            </Button_>
           </span>
 
           <IconButton_ variant='borderless' aria-label='Next page'>
@@ -2603,70 +2659,77 @@ import IconButton_ from '../components/IconButton.astro';
           </IconButton_>
 
           <span class='iui-table-paginator-pages-group'>
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 1'
-              type='button'
             >
               <span>1</span>
-            </button>
+            </Button_>
 
             <span class='iui-table-paginator-ellipsis iui-table-paginator-ellipsis-small'
               >&mldr;</span
             >
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 13'
-              type='button'
             >
               <span>13</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 14'
-              type='button'
             >
               <span>14</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
-              data-iui-active='true'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 15'
-              type='button'
+              isActive
             >
               <span>15</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 16'
-              type='button'
             >
               <span>16</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 17'
-              type='button'
             >
               <span>17</span>
-            </button>
+            </Button_>
 
             <span class='iui-table-paginator-ellipsis iui-table-paginator-ellipsis-small'
               >&mldr;</span
             >
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 30'
-              type='button'
             >
               <span>30</span>
-            </button>
+            </Button_>
           </span>
 
           <IconButton_ variant='borderless' size='small' aria-label='Next page'>
@@ -2790,62 +2853,69 @@ import IconButton_ from '../components/IconButton.astro';
           </IconButton_>
 
           <span class='iui-table-paginator-pages-group'>
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
-              data-iui-active='true'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 1'
-              type='button'
+              isActive
             >
               <span>1</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 2'
-              type='button'
             >
               <span>2</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 3'
-              type='button'
             >
               <span>3</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 4'
-              type='button'
             >
               <span>4</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 5'
-              type='button'
             >
               <span>5</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 6'
-              type='button'
             >
               <span>6</span>
-            </button>
+            </Button_>
 
-            <button
-              class='iui-table-paginator-page-button iui-table-paginator-page-button-small'
+            <Button_
+              class='iui-table-paginator-page-button'
+              variant='borderless'
+              size='small'
               aria-label='Page 7'
-              type='button'
             >
               <span>7</span>
-            </button>
+            </Button_>
 
             <span class='iui-table-paginator-ellipsis iui-table-paginator-ellipsis-small'
               >&mldr;</span
diff --git a/apps/css-workshop/src/pages/textarea.astro b/apps/css-workshop/src/pages/textarea.astro
index 6252416dc6a..52c8629198f 100644
--- a/apps/css-workshop/src/pages/textarea.astro
+++ b/apps/css-workshop/src/pages/textarea.astro
@@ -28,7 +28,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
       <div class='iui-input-label iui-required'>Textarea label</div>
       <textarea
         placeholder='Placeholder…'
-        class='iui-input'
+        class='iui-input iui-field'
         rows='3'
         id='test-default-singular'
         required></textarea>
@@ -39,7 +39,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
 
     <label class='iui-input-grid iui-with-message'>
       <div class='iui-input-label'>Textarea label</div>
-      <textarea class='iui-input' rows='3' spellcheck='false'>{lorem}</textarea>
+      <textarea class='iui-input iui-field' rows='3' spellcheck='false'>{lorem}</textarea>
       <div class='iui-status-message'>
         <div>Help message.</div>
       </div>
@@ -47,15 +47,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
 
     <label class='iui-input-grid iui-with-message iui-disabled'>
       <div class='iui-input-label' data-iui-disabled='true'>Textarea label</div>
-      <textarea disabled placeholder='Placeholder…' class='iui-input' rows='3'></textarea>
-      <div class='iui-status-message'>
-        <div>Help message.</div>
-      </div>
-    </label>
-
-    <label class='iui-input-grid iui-with-message iui-disabled'>
-      <div class='iui-input-label' data-iui-disabled='true'>Textarea label</div>
-      <textarea disabled class='iui-input' rows='3'>{lorem}</textarea>
+      <textarea disabled class='iui-input iui-field' rows='3'>{lorem}</textarea>
       <div class='iui-status-message'>
         <div>Help message.</div>
       </div>
@@ -65,7 +57,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
       <div class='iui-input-label'>Textarea label</div>
       <textarea
         placeholder='Placeholder…'
-        class='iui-input'
+        class='iui-input iui-field'
         rows='3'
         id='test-status-singular'
         data-iui-status='positive'></textarea>
@@ -79,8 +71,11 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
 
     <label class='iui-input-grid iui-with-message iui-warning'>
       <div class='iui-input-label'>Textarea label</div>
-      <textarea placeholder='Placeholder…' class='iui-input' rows='3' data-iui-status='warning'
-      ></textarea>
+      <textarea
+        placeholder='Placeholder…'
+        class='iui-input iui-field'
+        rows='3'
+        data-iui-status='warning'></textarea>
       <div class='iui-status-message' data-iui-status='warning'>
         <div class='iui-svg-icon'>
           <svg-status-warning class='iui-svg-icon' aria-hidden='true'></svg-status-warning>
@@ -91,8 +86,11 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
 
     <label class='iui-input-grid iui-with-message iui-negative'>
       <div class='iui-input-label'>Textarea label</div>
-      <textarea placeholder='Placeholder…' class='iui-input' rows='3' data-iui-status='negative'
-      ></textarea>
+      <textarea
+        placeholder='Placeholder…'
+        class='iui-input iui-field'
+        rows='3'
+        data-iui-status='negative'></textarea>
       <div class='iui-status-message' data-iui-status='negative'>
         <div class='iui-svg-icon'>
           <svg-status-error class='iui-svg-icon' aria-hidden='true'></svg-status-error>
@@ -111,7 +109,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
       data-iui-label-placement='inline'
     >
       <div class='iui-input-label iui-required'>Textarea label</div>
-      <textarea placeholder='Placeholder…' class='iui-input' rows='3' required></textarea>
+      <textarea placeholder='Placeholder…' class='iui-input iui-field' rows='3' required></textarea>
     </label>
 
     <label
@@ -119,15 +117,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
       data-iui-label-placement='inline'
     >
       <div class='iui-input-label'>Textarea label</div>
-      <textarea class='iui-input' rows='3' spellcheck='false'>{lorem}</textarea>
-    </label>
-
-    <label
-      class='iui-input-grid iui-with-message iui-inline-label iui-disabled'
-      data-iui-label-placement='inline'
-    >
-      <div class='iui-input-label' data-iui-disabled='true'>Textarea label</div>
-      <textarea disabled placeholder='Placeholder…' class='iui-input' rows='3'></textarea>
+      <textarea class='iui-input iui-field' rows='3' spellcheck='false'>{lorem}</textarea>
     </label>
 
     <label
@@ -135,7 +125,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
       data-iui-label-placement='inline'
     >
       <div class='iui-input-label' data-iui-disabled='true'>Textarea label</div>
-      <textarea disabled class='iui-input' rows='3'>{lorem}</textarea>
+      <textarea disabled class='iui-input iui-field' rows='3'>{lorem}</textarea>
     </label>
 
     <label
@@ -145,7 +135,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
     >
       <div class='iui-input-label'>Textarea label</div>
       <div class='iui-input-with-icon'>
-        <textarea class='iui-input' placeholder='Placeholder…' rows='3'></textarea>
+        <textarea class='iui-input iui-field' placeholder='Placeholder…' rows='3'></textarea>
         <svg-status-success
           class='iui-svg-icon iui-input-flex-container-icon iui-end-icon'
           data-iui-icon-color='positive'
@@ -160,7 +150,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
     >
       <div class='iui-input-label'>Textarea label</div>
       <div class='iui-input-with-icon'>
-        <textarea class='iui-input' placeholder='Placeholder…' rows='3'></textarea>
+        <textarea class='iui-input iui-field' placeholder='Placeholder…' rows='3'></textarea>
         <svg-status-warning
           class='iui-svg-icon iui-input-flex-container-icon iui-end-icon'
           data-iui-icon-color='warning'
@@ -175,7 +165,7 @@ const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
     >
       <div class='iui-input-label'>Textarea label</div>
       <div class='iui-input-with-icon'>
-        <textarea class='iui-input' placeholder='Placeholder…' rows='3'></textarea>
+        <textarea class='iui-input iui-field' placeholder='Placeholder…' rows='3'></textarea>
         <svg-status-error
           class='iui-svg-icon iui-input-flex-container-icon iui-end-icon'
           data-iui-icon-color='negative'
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Basic.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Basic.png
index c151446b53b..e822ca3c2b3 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Basic.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Basic.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Separator.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Separator.png
index 35d45199486..e72f4558151 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Separator.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Separator.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Folder Navigation.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Folder Navigation.png
index 45a520aff00..84fd4d6c490 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Folder Navigation.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Folder Navigation.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Links.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Links.png
index 998152245aa..c03598cdb69 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Links.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Links.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png
index ff4f6b0a3a2..4b01458e4d3 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png b/apps/react-workshop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png
index 4d7015f5e46..2f725a47491 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png b/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png
index 3e1358ac3d2..a517c4e8860 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png and b/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png b/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png
index 238612e85ac..54b79059161 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png and b/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png b/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png
index 7b5d3761f69..d2ed0c98f98 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png and b/apps/react-workshop/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Select.test.ts-Disabled With Selected Value.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Select.test.ts-Disabled With Selected Value.png
index 6dcb6e2274f..6a5d09ba93d 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Select.test.ts-Disabled With Selected Value.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Select.test.ts-Disabled With Selected Value.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Tile.test.ts-All Props.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Tile.test.ts-All Props.png
index 6f4a285f1d7..71e6a4bfbe7 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Tile.test.ts-All Props.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Tile.test.ts-All Props.png differ
diff --git a/packages/itwinui-css/src/alert/alert.scss b/packages/itwinui-css/src/alert/alert.scss
index d0b06fbd46f..9c97d17195f 100644
--- a/packages/itwinui-css/src/alert/alert.scss
+++ b/packages/itwinui-css/src/alert/alert.scss
@@ -1,8 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../mixins';
-@use '../button/base';
-@use '../button/borderless';
 
 .iui-alert {
   @include mixins.iui-reset;
diff --git a/packages/itwinui-css/src/all.scss b/packages/itwinui-css/src/all.scss
index 770f72d4baf..08df3d1db47 100644
--- a/packages/itwinui-css/src/all.scss
+++ b/packages/itwinui-css/src/all.scss
@@ -4,6 +4,7 @@
 
 @layer itwinui.v3 {
   @include meta.load-css('global');
+  @include meta.load-css('field');
   @include meta.load-css('alert/alert');
   @include meta.load-css('anchor/anchor');
   @include meta.load-css('avatar/avatar');
diff --git a/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss b/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
index 018a9d37d40..c434d8dc175 100644
--- a/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
+++ b/packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss
@@ -34,32 +34,27 @@
 
 .iui-breadcrumbs-content {
   padding-inline: var(--iui-size-xs);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   line-height: var(--iui-component-height);
 
-  &:where(a) {
-    &:focus {
-      outline-offset: -1px;
-    }
+  &,
+  > * {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &:where(a):focus {
+    outline-offset: -1px;
   }
 
   &:where(button) {
     @include base.iui-button;
     @include borderless.iui-button-borderless;
-    border: none;
     color: var(--iui-color-text-accent);
 
     &[aria-current] {
       color: var(--iui-color-text);
     }
-
-    > * {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
   }
 }
 
diff --git a/packages/itwinui-css/src/button/base.scss b/packages/itwinui-css/src/button/base.scss
index e710229dd79..19df9f38d84 100644
--- a/packages/itwinui-css/src/button/base.scss
+++ b/packages/itwinui-css/src/button/base.scss
@@ -2,37 +2,36 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../mixins';
 
+$disabledButtonSelectors: '[disabled], :disabled, [aria-disabled="true"], [data-iui-disabled="true"]';
+
 @mixin iui-button {
-  @include mixins.iui-reset;
-  font-family: inherit;
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   vertical-align: middle;
   justify-content: center;
   position: relative;
-  border-radius: var(--iui-border-radius-1);
   line-height: 1.2;
-  font-size: var(--iui-font-size-1);
-  font-weight: var(--iui-font-weight-normal);
   user-select: none;
   cursor: pointer;
   white-space: nowrap;
-  border: 1px solid var(--_iui-button-border-color);
-  background: var(--_iui-button-background-color);
-  color: var(--_iui-button-text-color);
   gap: var(--_iui-button-gap);
-  min-block-size: var(--_iui-button-min-height);
-  min-inline-size: var(--_iui-button-min-height);
   padding-block: var(--_iui-button-padding-block);
   padding-inline: var(--_iui-button-padding-inline);
-  transition:
-    background-color var(--iui-duration-1) ease-out,
-    border-color var(--iui-duration-1) ease-out;
-  -webkit-tap-highlight-color: transparent;
   text-decoration: none;
   @include iui-button-size;
-  @include mixins.iui-focus;
+
+  &:where(#{$disabledButtonSelectors}) {
+    cursor: not-allowed;
+  }
+
+  &:where(:hover, :active) {
+    --_iui-button-icon-fill: var(--iui-color-icon-hover);
+  }
+
+  &:is(#{$disabledButtonSelectors}) {
+    --_iui-button-icon-fill: var(--iui-color-icon-disabled);
+  }
 }
 
 @mixin iui-button-icon {
@@ -41,29 +40,28 @@
   svg {
     @include mixins.iui-icon-style('m');
     transition: fill var(--iui-duration-1) ease-out;
-    fill: var(--_iui-button-icon-fill, currentColor);
+    fill: var(--_iui-button-icon-fill, var(--iui-color-icon));
   }
 }
 
 @mixin iui-button-active {
-  --_iui-button-active-stripe-inset-block: initial;
-  --_iui-button-active-stripe-inset-inline: initial;
-  --_iui-button-active-stripe-background: var(--iui-color-border-accent);
-  --_iui-button-text-color: var(--iui-color-text-accent);
   --_iui-button-icon-fill: var(--iui-color-icon-accent);
+  --_iui-field-color-background: var(--iui-color-background-accent-muted);
+  --_iui-field-color-background-hover: var(--iui-color-background-accent-muted);
+  --_iui-field-color-background-disabled: var(--iui-color-background-disabled);
+  --_iui-field-color-text: var(--iui-color-text-accent);
 
   // Shows active stripe only if --_iui-button-active-stripe-inset- properties are set (from outside)
   &::after {
     content: '';
     position: absolute;
-    inset-block: var(--_iui-button-active-stripe-inset-block);
-    inset-inline: var(--_iui-button-active-stripe-inset-inline);
-    background: var(--_iui-button-active-stripe-background);
+    inset-block: var(--_iui-button-active-stripe-inset-block, initial);
+    inset-inline: var(--_iui-button-active-stripe-inset-inline, initial);
+    background: var(--_iui-button-active-stripe-background, var(--iui-color-border-accent));
   }
 
-  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
+  &:is(#{$disabledButtonSelectors}) {
     --_iui-button-active-stripe-background: var(--iui-color-icon-disabled);
-    --_iui-button-text-color: var(--iui-color-text-disabled);
     --_iui-button-icon-fill: var(--iui-color-icon-disabled);
   }
 }
@@ -90,7 +88,6 @@
     --_iui-button-gap: var(--iui-size-2xs);
     --_iui-button-padding-block: 0;
     --_iui-button-padding-inline: var(--iui-size-xs);
-    --_iui-button-min-height: var(--iui-component-height-small);
 
     @if $styleType == borderless {
       --_iui-button-padding-inline: var(--iui-size-2xs);
@@ -101,7 +98,6 @@
     --_iui-button-gap: var(--iui-size-xs);
     --_iui-button-padding-block: var(--iui-size-2xs);
     --_iui-button-padding-inline: var(--iui-size-m);
-    --_iui-button-min-height: var(--iui-component-height);
 
     @if $styleType == borderless {
       --_iui-button-padding-inline: var(--iui-size-xs);
@@ -109,12 +105,9 @@
   }
 
   @if $size == large {
-    font-size: var(--iui-font-size-2);
-
     --_iui-button-gap: var(--iui-size-s);
     --_iui-button-padding-block: var(--iui-size-xs);
     --_iui-button-padding-inline: var(--iui-size-l);
-    --_iui-button-min-height: var(--iui-component-height-large);
 
     @if $styleType == borderless {
       --_iui-button-padding-inline: var(--iui-size-s);
diff --git a/packages/itwinui-css/src/button/borderless.scss b/packages/itwinui-css/src/button/borderless.scss
index b9e7b2c9e20..a97b70a1b28 100644
--- a/packages/itwinui-css/src/button/borderless.scss
+++ b/packages/itwinui-css/src/button/borderless.scss
@@ -3,31 +3,6 @@
 @use 'base';
 
 @mixin iui-button-borderless {
-  --_iui-button-text-color: var(--iui-color-text);
-  --_iui-button-background-color: transparent;
-  --_iui-button-border-color: transparent;
-  --_iui-button-icon-fill: var(--iui-color-icon);
-  @include base.iui-button-size(medium, borderless);
-
-  &:where(:hover, :active) {
-    --_iui-button-text-color: var(--iui-color-text-hover);
-    --_iui-button-background-color: var(--iui-color-background-transparent-hover);
-    --_iui-button-icon-fill: var(--iui-color-icon-hover);
-  }
-
-  &:where(:focus) {
-    outline-offset: -1px;
-    outline-width: 1px;
-  }
-
-  &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
-    --_iui-button-text-color: var(--iui-color-text-disabled);
-    --_iui-button-background-color: transparent;
-    --_iui-button-border-color: transparent;
-    --_iui-button-icon-fill: var(--iui-color-icon-disabled);
-  }
-
-  // #region Visual adjustments to help align based on the "visible" edge of the button content.
   &[data-iui-shift='left'] {
     margin-inline-start: calc(-1 * var(--_iui-button-padding-inline));
   }
@@ -35,9 +10,9 @@
   &[data-iui-shift='right'] {
     margin-inline-end: calc(-1 * var(--_iui-button-padding-inline));
   }
-  // #endregion
 }
 
 @mixin iui-button-borderless-active {
-  --_iui-button-background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
+  --_iui-field-color-background: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
+  --_iui-field-color-background-hover: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
 }
diff --git a/packages/itwinui-css/src/button/button-group.scss b/packages/itwinui-css/src/button/button-group.scss
index 6cf33a44c9b..a98f92eba8a 100644
--- a/packages/itwinui-css/src/button/button-group.scss
+++ b/packages/itwinui-css/src/button/button-group.scss
@@ -17,7 +17,7 @@
 
   $childZindexSelector: '&:where(.iui-input-flex-container, .iui-button, .iui-input)';
   $childBorderSelector: '&:where(.iui-input-flex-container, .iui-input, .iui-button:where(:not([data-iui-variant="borderless"]))), &:where(.iui-input-flex-container)::before';
-  $disabledSelector: '&:where(:disabled, .iui-disabled, [aria-disabled="true"])';
+  $disabledSelector: '&:where(:disabled, [aria-disabled="true"])';
 
   // specificity hack
   > [class] {
diff --git a/packages/itwinui-css/src/button/button.scss b/packages/itwinui-css/src/button/button.scss
index a0bb8c553b5..94a356357d8 100644
--- a/packages/itwinui-css/src/button/button.scss
+++ b/packages/itwinui-css/src/button/button.scss
@@ -1,7 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use 'base';
-@use 'default';
 @use 'borderless';
 @use 'variant';
 @use 'idea';
@@ -10,7 +9,6 @@
 
 .iui-button {
   @include base.iui-button;
-  @include default.iui-button-default;
 
   &[data-iui-size='small'] {
     @include base.iui-button-size(small);
@@ -22,6 +20,7 @@
 
   &[data-iui-variant='borderless'] {
     @include borderless.iui-button-borderless;
+    @include base.iui-button-size(medium, borderless);
 
     &[data-iui-size='small'] {
       @include base.iui-button-size(small, borderless);
@@ -33,30 +32,14 @@
   }
 
   &[data-iui-active='true'] {
-    @include default.iui-button-default-active;
+    @include base.iui-button-active;
 
     &[data-iui-variant='borderless'] {
       @include borderless.iui-button-borderless-active;
     }
-
-    @include default.iui-button-active-disabled;
-  }
-
-  &[data-iui-variant='high-visibility'] {
-    @include variant.iui-button-variant(high-visibility);
-  }
-
-  &[data-iui-variant='cta'] {
-    @include variant.iui-button-variant(cta);
-  }
-
-  &[data-iui-variant='idea'] {
-    @include idea.iui-button-idea;
   }
-}
 
-.iui-button-icon {
-  @include base.iui-button-icon;
+  @include variant.iui-button-variant;
 }
 
 .iui-button-dropdown {
@@ -71,6 +54,14 @@
   }
 }
 
+.iui-button-idea {
+  @include idea.iui-button-idea;
+}
+
+.iui-button-icon {
+  @include base.iui-button-icon;
+}
+
 .iui-button-split {
   @include split-button.iui-button-split;
 }
diff --git a/packages/itwinui-css/src/button/default.scss b/packages/itwinui-css/src/button/default.scss
deleted file mode 100644
index f407208ba16..00000000000
--- a/packages/itwinui-css/src/button/default.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../mixins';
-@use './base';
-
-@mixin iui-button-default {
-  --_iui-button-text-color: var(--iui-color-text);
-  --_iui-button-background-color: var(--iui-color-background);
-  --_iui-button-border-color: var(--iui-color-border-foreground);
-  --_iui-button-icon-fill: var(--iui-color-icon);
-
-  &:hover,
-  &:active {
-    --_iui-button-text-color: var(--iui-color-text-hover);
-    --_iui-button-background-color: var(--iui-color-background-hover);
-    --_iui-button-border-color: var(--iui-color-border-foreground-hover);
-    --_iui-button-icon-fill: var(--iui-color-icon-hover);
-  }
-
-  &:focus {
-    outline-offset: -2px;
-    outline-width: 2px;
-  }
-
-  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
-    --_iui-button-text-color: var(--iui-color-text-disabled);
-    --_iui-button-background-color: var(--iui-color-background-disabled);
-    --_iui-button-border-color: var(--iui-color-border-disabled);
-    --_iui-button-icon-fill: var(--iui-color-icon-disabled);
-
-    cursor: not-allowed;
-    outline-offset: -1px;
-    outline-width: 1px;
-    outline-color: var(--iui-color-text-accent);
-  }
-}
-
-@mixin iui-button-default-active {
-  @include base.iui-button-active;
-  --_iui-button-background-color: var(--iui-color-background-accent-muted);
-}
-
-@mixin iui-button-active-disabled {
-  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
-    --_iui-button-background-color: var(--iui-color-background-disabled);
-  }
-}
diff --git a/packages/itwinui-css/src/button/idea.scss b/packages/itwinui-css/src/button/idea.scss
index f4da4e44e73..4bf61ec5fe2 100644
--- a/packages/itwinui-css/src/button/idea.scss
+++ b/packages/itwinui-css/src/button/idea.scss
@@ -1,9 +1,7 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use './variant';
 
 @mixin iui-button-idea {
-  @include variant.iui-button-variant(high-visibility);
   border-radius: var(--iui-border-radius-round);
   box-shadow: var(--iui-shadow-5);
   position: fixed;
diff --git a/packages/itwinui-css/src/button/variant.scss b/packages/itwinui-css/src/button/variant.scss
index f8283d2e388..cb689d3eaaf 100644
--- a/packages/itwinui-css/src/button/variant.scss
+++ b/packages/itwinui-css/src/button/variant.scss
@@ -1,44 +1,27 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 
-/// @arg $variant Can be one of: cta, high-visibility
-@mixin iui-button-variant($variant) {
-  @if $variant == cta {
-    --_iui-button-background-color: var(--iui-color-background-positive);
-
-    &:hover,
-    &:active {
-      --_iui-button-background-color: var(--iui-color-background-positive-hover);
-    }
+@mixin iui-button-variant {
+  &:where([data-iui-variant='high-visibility'], [data-iui-variant='cta']) {
+    --_iui-field-color-text: var(--iui-color-white);
+    --_iui-field-color-text-hover: var(--iui-color-white);
+    --_iui-field-color-focus-outline: var(--iui-color-white);
+    --_iui-field-focus-outline-offset: -3px;
+    --_iui-field-focus-outline-width: 1px;
+    --_iui-button-icon-fill: var(--iui-color-white);
   }
 
-  @if $variant == high-visibility {
-    --_iui-button-background-color: var(--iui-color-background-accent);
-
-    &:hover,
-    &:active {
-      --_iui-button-background-color: var(--iui-color-background-accent-hover);
-    }
+  &:where([data-iui-variant='high-visibility']) {
+    --_iui-field-color-background: var(--iui-color-background-accent);
+    --_iui-field-color-background-hover: var(--iui-color-background-accent-hover);
+    --_iui-field-color-border: var(--iui-color-background-accent);
+    --_iui-field-color-border-hover: var(--iui-color-background-accent-hover);
   }
-
-  --_iui-button-text-color: var(--iui-color-white);
-  --_iui-button-border-color: var(--_iui-button-background-color);
-  --_iui-button-icon-fill: var(--iui-color-white);
-
-  &:focus {
-    outline-color: var(--iui-color-white);
-    outline-offset: -3px;
-    outline-width: 1px;
-  }
-
-  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
-    --_iui-button-background-color: var(--iui-color-background-disabled);
-    --_iui-button-border-color: var(--iui-color-border-disabled);
-    --_iui-button-text-color: var(--iui-color-text-disabled);
-    --_iui-button-icon-fill: var(--iui-color-icon-disabled);
-
-    outline-offset: -1px;
-    outline-width: 1px;
-    outline-color: var(--iui-color-text-accent);
+  
+  &:where([data-iui-variant='cta']) {
+    --_iui-field-color-background: var(--iui-color-background-positive);
+    --_iui-field-color-background-hover: var(--iui-color-background-positive-hover);
+    --_iui-field-color-border: var(--iui-color-background-positive);
+    --_iui-field-color-border-hover: var(--iui-color-background-positive-hover);
   }
 }
diff --git a/packages/itwinui-css/src/color-picker/color-picker.scss b/packages/itwinui-css/src/color-picker/color-picker.scss
index 442df3ad708..cde13cff8b5 100644
--- a/packages/itwinui-css/src/color-picker/color-picker.scss
+++ b/packages/itwinui-css/src/color-picker/color-picker.scss
@@ -1,7 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../surface/base' as surface;
-@use '../button/borderless';
 @use '../mixins';
 
 $iui-color-picker-content-width: calc(var(--iui-size-l) * 9 + var(--iui-size-xs) * 8); // (9 swatches per row) + (gaps)
diff --git a/packages/itwinui-css/src/field.scss b/packages/itwinui-css/src/field.scss
new file mode 100644
index 00000000000..ddac8a44399
--- /dev/null
+++ b/packages/itwinui-css/src/field.scss
@@ -0,0 +1,71 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+.iui-field {
+  --_iui-field-color-text: var(--iui-color-text);
+  --_iui-field-color-text-hover: var(--iui-color-text-hover);
+  --_iui-field-color-text-disabled: var(--iui-color-text-disabled);
+  --_iui-field-color-background: var(--iui-color-background);
+  --_iui-field-color-background-hover: var(--iui-color-background-hover);
+  --_iui-field-color-background-disabled: var(--iui-color-background-disabled);
+  --_iui-field-color-border: var(--iui-color-border-foreground);
+  --_iui-field-color-border-hover: var(--iui-color-border-foreground-hover);
+  --_iui-field-color-border-disabled: var(--iui-color-border-disabled);
+  --_iui-field-color-focus-outline: var(--iui-color-border-accent);
+  --_iui-field-height: var(--iui-component-height);
+  --_iui-field-focus-outline-offset: -2px;
+  --_iui-field-focus-outline-width: 2px;
+  --_iui-field-font-size: var(--iui-font-size-1);
+
+  background-color: var(--_iui-field-color-background);
+  border: 1px solid var(--_iui-field-color-border);
+  border-radius: var(--iui-border-radius-1);
+  color: var(--_iui-field-color-text);
+  font: inherit;
+  font-size: var(--_iui-field-font-size);
+  font-weight: var(--iui-font-weight-normal);
+  min-block-size: var(--_iui-field-height);
+  min-inline-size: var(--_iui-field-height);
+  -webkit-tap-highlight-color: var(--_iui-field-color-background-hover);
+  transition:
+    background-color var(--iui-duration-1) ease-out,
+    border-color var(--iui-duration-1) ease-out,
+    color var(--iui-duration-1) ease-out;
+
+  &:where(:hover, :active) {
+    background-color: var(--_iui-field-color-background-hover);
+    border-color: var(--_iui-field-color-border-hover);
+    color: var(--_iui-field-color-text-hover);
+  }
+
+  &:where(:focus-visible) {
+    outline: var(--_iui-field-focus-outline-width) solid var(--_iui-field-color-focus-outline);
+    outline-offset: var(--_iui-field-focus-outline-offset);
+  }
+
+  &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
+    background-color: var(--_iui-field-color-background-disabled);
+    border-color: var(--_iui-field-color-border-disabled);
+    color: var(--_iui-field-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  &:where([data-iui-variant='borderless']) {
+    --_iui-field-color-background: transparent;
+    --_iui-field-color-background-hover: var(--iui-color-background-transparent-hover);
+    --_iui-field-color-background-disabled: transparent;
+    --_iui-field-color-border: transparent;
+    --_iui-field-color-border-hover: transparent;
+    --_iui-field-color-border-disabled: transparent;
+    --_iui-field-focus-outline-offset: -1px;
+    --_iui-field-focus-outline-width: 1px;
+  }
+
+  &:where([data-iui-size='small']) {
+    --_iui-field-height: var(--iui-component-height-small);
+  }
+
+  &:where([data-iui-size='large']) {
+    --_iui-field-height: var(--iui-component-height-large);
+    --_iui-field-font-size: var(--iui-font-size-2);
+  }
+}
diff --git a/packages/itwinui-css/src/input-container/input-container.scss b/packages/itwinui-css/src/input-container/input-container.scss
index 161350a2c69..1eb87d691bd 100644
--- a/packages/itwinui-css/src/input-container/input-container.scss
+++ b/packages/itwinui-css/src/input-container/input-container.scss
@@ -36,6 +36,8 @@
   .iui-input-grid[data-iui-status='#{$status}'] :where(.iui-input, .iui-select-button),
   :is(.iui-input, .iui-input-with-icon > .iui-select-button):where([data-iui-status='#{$status}']) {
     @include iui-text-selection($status);
+    --_iui-field-color-focus-outline: var(--iui-color-text-#{$status});
+    --_iui-field-color-border-hover: var(--iui-color-border-#{$status});
 
     // #region Bottom padding to vertically center text when the status stripe is present.
     // The bottom border is 2px and the top border is 1px, so we need to subtract 1px from the bottom padding
@@ -51,16 +53,6 @@
     // #endregion
 
     border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$status});
-
-    &:focus {
-      outline: 2px solid var(--iui-color-text-#{$status});
-      outline-offset: -2px;
-    }
-
-    &:hover {
-      --_iui-input-border-color: var(--iui-color-border-#{$status});
-      --_iui-input-with-icon-hover-border-color: var(--iui-color-border-#{$status});
-    }
   }
 }
 
@@ -139,6 +131,8 @@
 
   &:hover {
     --_iui-input-border-color: var(--iui-color-border-foreground-hover);
+    --_iui-input-background-color: var(--iui-color-background-hover);
+    --_iui-input-text-color: var(--iui-color-text-hover);
   }
 
   &:has(input:focus-visible),
@@ -170,6 +164,7 @@
     background: transparent;
     border: none;
     font: inherit;
+    color: inherit;
     z-index: 2;
     min-inline-size: var(--_iui-input-min-height);
     min-block-size: var(--_iui-input-min-height);
@@ -194,6 +189,10 @@
     &:focus {
       outline: none;
     }
+
+    &:disabled {
+      color: var(--iui-color-text-disabled);
+    }
   }
 
   // Collapse padding between input/textarea and .iui-input-flex-container-icon (Icon or IconButton)
diff --git a/packages/itwinui-css/src/input/input.scss b/packages/itwinui-css/src/input/input.scss
index fec9b737b2d..badcbb4db94 100644
--- a/packages/itwinui-css/src/input/input.scss
+++ b/packages/itwinui-css/src/input/input.scss
@@ -3,51 +3,24 @@
 @use '../mixins';
 
 @mixin iui-input {
-  --_iui-input-background-color: var(--iui-color-background);
-  --_iui-input-border-color: var(--iui-color-border-foreground);
-  --_iui-input-text-color: var(--iui-color-text);
-
-  @include mixins.iui-reset;
-  @include mixins.iui-focus($offset: -2px, $thickness: 2px);
   inline-size: 100%;
-  font-family: inherit;
-  font-size: var(--iui-font-size-1);
-  font-weight: var(--iui-font-weight-normal);
   line-height: var(--iui-size-l);
-  border-radius: var(--iui-border-radius-1);
   appearance: none;
-  min-block-size: var(--_iui-input-min-height);
   padding-block: var(--_iui-input-padding-block);
   padding-inline: var(--iui-size-s);
-  color: var(--_iui-input-text-color);
-  background-color: var(--_iui-input-background-color);
-  border: 1px solid var(--_iui-input-border-color);
-  transition: border-color var(--iui-duration-1) ease-out;
   @include iui-input-size;
 
   &::placeholder {
-    --_iui-input-text-color: var(--iui-color-text-placeholder);
+    color: var(--iui-color-text-placeholder);
     font-weight: var(--iui-font-weight-light);
     opacity: 1;
     user-select: none;
-    color: var(--_iui-input-text-color);
   }
 
   &:autofill {
-    --_iui-input-background-color: var(--iui-color-background-accent-muted);
-    --_iui-input-border-color: var(--iui-color-border-accent);
-    --_iui-input-text-color: var(--iui-color-text-accent);
-  }
-
-  &:hover {
-    --_iui-input-border-color: var(--iui-color-border-foreground-hover);
-  }
-
-  &[disabled] {
-    --_iui-input-background-color: var(--iui-color-background-disabled);
-    --_iui-input-border-color: var(--iui-color-border-disabled);
-    --_iui-input-with-icon-hover-border-color: var(--iui-color-border-disabled);
-    cursor: not-allowed;
+    background-color: var(--iui-color-background-accent-muted);
+    border-color: var(--iui-color-border-accent);
+    color: var(--iui-color-text-accent);
   }
 
   &:where(textarea) {
@@ -60,17 +33,14 @@
 @mixin iui-input-size($size: medium) {
   @if $size == small {
     --_iui-input-padding-block: 0;
-    --_iui-input-min-height: var(--iui-component-height-small);
   }
 
   @if $size == medium {
     --_iui-input-padding-block: var(--iui-size-2xs);
-    --_iui-input-min-height: var(--iui-component-height);
   }
 
   @if $size == large {
     --_iui-input-padding-block: var(--iui-size-xs);
-    --_iui-input-min-height: var(--iui-component-height-large);
     font-size: var(--iui-font-size-2);
   }
 }
@@ -121,21 +91,6 @@
     }
   }
 
-  &:focus-within {
-    > :first-child {
-      // --_iui-input-with-icon-focus-color can be used to control this from outside
-      outline: 2px solid var(--_iui-input-with-icon-focus-color, var(--iui-color-border-accent));
-      outline-offset: -2px;
-    }
-  }
-
-  &:hover {
-    > :first-child {
-      // --_iui-input-with-icon-hover-border-color can be used to control this from outside
-      border-color: var(--_iui-input-with-icon-hover-border-color, var(--iui-color-border-foreground-hover));
-    }
-  }
-
   > .iui-select-tag-container {
     max-inline-size: 70%;
     inset-inline-end: unset;
diff --git a/packages/itwinui-css/src/select/select.scss b/packages/itwinui-css/src/select/select.scss
index 2aa6599c34a..d5e33691b52 100644
--- a/packages/itwinui-css/src/select/select.scss
+++ b/packages/itwinui-css/src/select/select.scss
@@ -3,26 +3,12 @@
 @use '../menu/mixins' as menu;
 @use '../mixins';
 @use '../tag/base' as tag;
-@use '../button/base';
-@use '../button/borderless';
 
 @mixin iui-select-button {
-  --_iui-input-background-color: var(--iui-color-background);
-  --_iui-input-border-color: var(--iui-color-border-foreground);
-  --_iui-input-text-color: var(--iui-color-text);
-
-  @include mixins.iui-focus($offset: -2px, $thickness: 2px);
-  font: inherit;
   inline-size: 100%;
-  border-radius: var(--iui-border-radius-1);
-  min-block-size: var(--_iui-select-min-height);
   padding-block: var(--_iui-select-padding-block);
   padding-inline: var(--iui-size-s);
-  transition: border-color var(--iui-duration-1) ease-out;
   user-select: none;
-  color: var(--_iui-input-text-color);
-  background-color: var(--_iui-input-background-color);
-  border: 1px solid var(--_iui-input-border-color);
   line-height: var(--iui-size-l);
   cursor: pointer;
   @include iui-select-size;
@@ -48,10 +34,8 @@
     overflow: hidden;
   }
 
-  &:is(.iui-disabled, :disabled, [aria-disabled='true']) {
-    --_iui-input-background-color: var(--iui-color-background-disabled);
-    --_iui-input-border-color: var(--iui-color-border-disabled);
-    --_iui-input-with-icon-hover-border-color: var(--iui-color-border-disabled);
+  &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
+    --_iui-list-item-icon-fill: var(--iui-color-icon-disabled);
     opacity: 1;
     cursor: not-allowed;
   }
@@ -65,6 +49,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     min-block-size: var(--iui-size-l);
+    color: inherit;
   }
 
   &.iui-placeholder,
@@ -74,46 +59,19 @@
   }
 }
 
-@mixin iui-select-button-borderless {
-  --_iui-input-background-color: transparent;
-  --_iui-input-border-color: transparent;
-  transition: background-color var(--iui-duration-1) ease-out;
-
-  &:where(:hover, :active) {
-    --_iui-input-background-color: var(--iui-color-background-transparent-hover);
-    --_iui-input-border-color: transparent;
-    --_iui-input-with-icon-hover-border-color: transparent;
-  }
-
-  &:focus-visible {
-    outline-offset: -1px;
-    outline-width: 1px;
-  }
-
-  &:is(.iui-disabled, :disabled, [aria-disabled='true']) {
-    --_iui-input-background-color: transparent;
-    --_iui-input-border-color: transparent;
-    --_iui-input-text-color: var(--iui-color-text-disabled);
-  }
-}
-
 /// Mixin for applying padding and font size to various select sizes.
 /// @arg size - must be one of: small, medium, large
 @mixin iui-select-size($size: medium) {
   @if $size == small {
     --_iui-select-padding-block: 0;
-    --_iui-select-min-height: var(--iui-component-height-small);
   }
 
   @if $size == medium {
     --_iui-select-padding-block: var(--iui-size-2xs);
-    --_iui-select-min-height: var(--iui-component-height);
   }
 
   @if $size == large {
     --_iui-select-padding-block: var(--iui-size-xs);
-    --_iui-select-min-height: var(--iui-component-height-large);
-    font-size: var(--iui-font-size-2);
   }
 }
 
@@ -156,8 +114,6 @@
 }
 
 @mixin iui-select-tag-button {
-  @include base.iui-button;
-  @include borderless.iui-button-borderless;
   @include tag.iui-tag-button;
   padding-inline: var(--iui-size-2xs);
   min-block-size: unset;
@@ -171,9 +127,6 @@
 }
 
 @mixin iui-select-tag-button-icon {
-  @include base.iui-button-icon;
-  flex-shrink: 0;
-
   .iui-select-button[data-iui-size='small'] & svg {
     @include mixins.iui-icon-style('s');
   }
@@ -184,10 +137,6 @@
 .iui-select-button {
   @include iui-select-button;
 
-  &[data-iui-variant='borderless'] {
-    @include iui-select-button-borderless;
-  }
-
   &[data-iui-size='small'] {
     @include iui-select-size(small);
   }
diff --git a/packages/itwinui-css/src/table/paginator.scss b/packages/itwinui-css/src/table/paginator.scss
index 362855f65e3..aeb5e377ed9 100644
--- a/packages/itwinui-css/src/table/paginator.scss
+++ b/packages/itwinui-css/src/table/paginator.scss
@@ -2,9 +2,6 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../mixins';
 @use '../text/muted';
-@use '../button/base';
-@use '../button/borderless';
-@use '../button/default';
 
 @mixin iui-table-paginator {
   @include mixins.iui-reset;
@@ -64,18 +61,8 @@
 }
 
 @mixin iui-table-paginator-page-button {
-  @include base.iui-button;
-  @include borderless.iui-button-borderless;
-
-  &-small {
-    @include base.iui-button-size(small);
-  }
-
   &[data-iui-active='true'] {
-    @include default.iui-button-default-active;
-    @include borderless.iui-button-borderless-active;
-
-    // Adds stripe above active button
+    // Adds stripe below active button
     --_iui-button-active-stripe-inset-block: calc(100% - #{var(--iui-size-2xs)}) #{var(--iui-size-3xs)};
     --_iui-button-active-stripe-inset-inline: #{var(--iui-size-3xs)};
   }
diff --git a/packages/itwinui-css/src/tile/tile.scss b/packages/itwinui-css/src/tile/tile.scss
index 198b83c3fcd..928ca694141 100644
--- a/packages/itwinui-css/src/tile/tile.scss
+++ b/packages/itwinui-css/src/tile/tile.scss
@@ -2,8 +2,6 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../surface/base' as surface;
 @use '../mixins';
-@use '../button/base' as *;
-@use '../button/borderless';
 
 $thumbnail-selector: ':is(.iui-thumbnail-icon, .iui-tile-thumbnail-picture)';
 
@@ -345,8 +343,6 @@ $thumbnail-selector: ':is(.iui-thumbnail-icon, .iui-tile-thumbnail-picture)';
 
 /// @arg $variant Can be either: type-indicator, quick-action
 @mixin iui-tile-thumbnail-button($variant) {
-  @include borderless.iui-button-borderless;
-  @include iui-button-size(small, borderless);
   z-index: 2;
   border-radius: 50%;
   margin-block-start: calc(var(--iui-size-s) * 0.5);
@@ -357,11 +353,6 @@ $thumbnail-selector: ':is(.iui-thumbnail-icon, .iui-tile-thumbnail-picture)';
     justify-self: end;
   }
 
-  &[data-iui-active='true'] {
-    --_iui-button-text-color: var(--iui-color-text-accent);
-    --_iui-button-background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
-  }
-
   .iui-tile-thumbnail-picture ~ & {
     @include mixins.iui-blur($opacity: 5);
     --_iui-button-icon-fill: var(--iui-color-white);
diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.test.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.test.tsx
index 304706f4107..6ce02fd5c40 100644
--- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.test.tsx
+++ b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.test.tsx
@@ -86,13 +86,21 @@ it('should render breadcrumbs item as span element by default', () => {
 
 it('should render breadcrumbs item as anchor elements', () => {
   const { container } = render(
-    <Breadcrumbs.Item href='https://www.example.com/'>
-      Anchor 1
-    </Breadcrumbs.Item>,
+    <Breadcrumbs.Item href='https://www.example.com/'>Anchor</Breadcrumbs.Item>,
   );
   expect(container.querySelector('a')).toHaveClass('iui-breadcrumbs-content');
 });
 
+it('should render breadcrumbs item as button elements', () => {
+  const { container } = render(
+    <Breadcrumbs.Item onClick={() => {}}>Button</Breadcrumbs.Item>,
+  );
+
+  const button = container.querySelector('button');
+  expect(button).toHaveClass('iui-breadcrumbs-content');
+  expect(button).toHaveAttribute('data-iui-variant', 'borderless');
+});
+
 it('should render custom separators', () => {
   const { container } = renderComponent({ separator: '>' });
   expect(container.querySelector('.iui-breadcrumbs')).toBeTruthy();
diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx
index 247948bc201..c4460d104ac 100644
--- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx
@@ -228,21 +228,20 @@ const Separator = ({ separator }: Pick<BreadcrumbsProps, 'separator'>) => (
 // ----------------------------------------------------------------------------
 
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-  const { children: childrenProp, className, ...rest } = props;
+  const { children, className, ...rest } = props;
 
   const defaultAs = !!props.href ? Anchor : !!props.onClick ? 'button' : 'span';
-  const children =
-    defaultAs === 'button' ? <span>{childrenProp}</span> : childrenProp;
 
   return (
-    <Box
+    <Button
       as={defaultAs as 'a'}
       className={cx('iui-breadcrumbs-content', className)}
+      styleType='borderless'
       ref={forwardedRef}
       {...rest}
     >
       {children}
-    </Box>
+    </Button>
   );
 }) as PolymorphicForwardRefComponent<'a'>;
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
diff --git a/packages/itwinui-react/src/core/Buttons/Button.tsx b/packages/itwinui-react/src/core/Buttons/Button.tsx
index aae5648bc2e..74d5f055b34 100644
--- a/packages/itwinui-react/src/core/Buttons/Button.tsx
+++ b/packages/itwinui-react/src/core/Buttons/Button.tsx
@@ -74,7 +74,7 @@ export const Button = React.forwardRef((props, ref) => {
   return (
     <ButtonBase
       ref={ref}
-      className={cx('iui-button', className)}
+      className={cx('iui-button', 'iui-field', className)}
       data-iui-variant={styleType !== 'default' ? styleType : undefined}
       data-iui-size={size}
       {...rest}
diff --git a/packages/itwinui-react/src/core/Buttons/IconButton.tsx b/packages/itwinui-react/src/core/Buttons/IconButton.tsx
index 0e7bd09c1fe..80bf38269da 100644
--- a/packages/itwinui-react/src/core/Buttons/IconButton.tsx
+++ b/packages/itwinui-react/src/core/Buttons/IconButton.tsx
@@ -63,7 +63,7 @@ export const IconButton = React.forwardRef((props, ref) => {
   const button = (
     <ButtonBase
       ref={ref}
-      className={cx('iui-button', className)}
+      className={cx('iui-button', 'iui-field', className)}
       data-iui-variant={styleType !== 'default' ? styleType : undefined}
       data-iui-size={size}
       data-iui-active={isActive}
diff --git a/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx b/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx
index 5d7c59716c1..e638fb17d4d 100644
--- a/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx
+++ b/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx
@@ -13,9 +13,11 @@ it('renders ideas button correctly', () => {
     <IdeasButton onClick={onClickMock} />,
   );
 
-  const button = container.querySelector('.iui-button') as HTMLButtonElement;
+  const button = container.querySelector(
+    '.iui-button.iui-button-idea',
+  ) as HTMLButtonElement;
   expect(button).toBeTruthy();
-  expect(button).toHaveAttribute('data-iui-variant', 'idea');
+  expect(button).toHaveAttribute('data-iui-variant', 'high-visibility');
   expect(button.type).toBe('button');
   button.click();
   expect(onClickMock).toHaveBeenCalled();
@@ -29,9 +31,11 @@ it('takes localized label', () => {
     <IdeasButton feedbackLabel='my-feedback' onClick={onClickMock} />,
   );
 
-  const button = container.querySelector('.iui-button') as HTMLButtonElement;
+  const button = container.querySelector(
+    '.iui-button.iui-button-idea',
+  ) as HTMLButtonElement;
   expect(button).toBeTruthy();
-  expect(button).toHaveAttribute('data-iui-variant', 'idea');
+  expect(button).toHaveAttribute('data-iui-variant', 'high-visibility');
   expect(button.type).toBe('button');
   button.click();
   expect(onClickMock).toHaveBeenCalled();
diff --git a/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx b/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx
index 54fcd9b5b1d..8db4aea0734 100644
--- a/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx
+++ b/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx
@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
 import * as React from 'react';
 import { SvgSmileyHappy } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
@@ -24,12 +25,13 @@ type IdeasButtonProps = {
  * <IdeasButton />
  */
 export const IdeasButton = React.forwardRef((props, ref) => {
-  const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
+  const { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
 
   return (
     <Button
       ref={ref}
-      data-iui-variant='idea'
+      className={cx('iui-button-idea', className)}
+      data-iui-variant='high-visibility'
       onClick={onClick}
       startIcon={<SvgSmileyHappy aria-hidden />}
       {...rest}
diff --git a/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx b/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx
index 0abc965838b..3098006aa45 100644
--- a/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx
+++ b/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx
@@ -91,7 +91,7 @@ it('should render disabled select group', () => {
   expect(fieldset.disabled).toBe(true);
 
   const selectButton = container.querySelector(
-    '.iui-select-button.iui-disabled',
+    '.iui-select-button[data-iui-disabled="true"]',
   ) as HTMLElement;
   expect(selectButton).toHaveAttribute('aria-disabled', 'true');
   expect(selectButton).toBeTruthy();
diff --git a/packages/itwinui-react/src/core/Input/Input.tsx b/packages/itwinui-react/src/core/Input/Input.tsx
index bbe67ddb117..7f19c2a2126 100644
--- a/packages/itwinui-react/src/core/Input/Input.tsx
+++ b/packages/itwinui-react/src/core/Input/Input.tsx
@@ -37,7 +37,7 @@ export const Input = React.forwardRef((props, ref) => {
   return (
     <Box
       as='input'
-      className={cx('iui-input', className)}
+      className={cx('iui-input', 'iui-field', className)}
       data-iui-size={size}
       data-iui-status={status}
       size={htmlSize}
diff --git a/packages/itwinui-react/src/core/Select/Select.test.tsx b/packages/itwinui-react/src/core/Select/Select.test.tsx
index 0259a002487..a4d26d1adc5 100644
--- a/packages/itwinui-react/src/core/Select/Select.test.tsx
+++ b/packages/itwinui-react/src/core/Select/Select.test.tsx
@@ -131,7 +131,7 @@ it('should render disabled select', async () => {
   });
 
   const selectButton = container.querySelector(
-    '.iui-select-button.iui-disabled',
+    '.iui-select-button[data-iui-disabled=true]',
   ) as HTMLElement;
   expect(selectButton).toBeTruthy();
   expect(selectButton).toHaveAttribute('aria-disabled', 'true');
diff --git a/packages/itwinui-react/src/core/Select/Select.tsx b/packages/itwinui-react/src/core/Select/Select.tsx
index ae2061a04a5..4e6585c1e2f 100644
--- a/packages/itwinui-react/src/core/Select/Select.tsx
+++ b/packages/itwinui-react/src/core/Select/Select.tsx
@@ -421,6 +421,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
           size={size}
           status={status}
           aria-disabled={disabled ? 'true' : undefined}
+          data-iui-disabled={disabled ? 'true' : undefined}
           aria-autocomplete='none'
           aria-expanded={isOpen}
           aria-haspopup='listbox'
@@ -436,7 +437,6 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
             {
               'iui-placeholder':
                 (!selectedItems || selectedItems.length === 0) && !!placeholder,
-              'iui-disabled': disabled,
             },
             triggerProps?.className,
           )}
@@ -661,7 +661,7 @@ const SelectButton = React.forwardRef((props, forwardedRef) => {
       data-iui-variant={styleType !== 'default' ? styleType : undefined}
       {...rest}
       ref={forwardedRef}
-      className={cx('iui-select-button', props.className)}
+      className={cx('iui-select-button', 'iui-field', props.className)}
     />
   );
 }) as PolymorphicForwardRefComponent<
diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx
index bff668ed57a..fe30e43828c 100644
--- a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx
+++ b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx
@@ -116,6 +116,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
       label='Toggle icon labels'
       aria-expanded={_isExpanded}
       className='iui-sidenav-button iui-expand'
+      size='small'
       onClick={React.useCallback(() => {
         _setIsExpanded((expanded) => !expanded);
         onExpanderClick?.();
diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.test.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.test.tsx
index 301d5198326..26e66cb4de3 100644
--- a/packages/itwinui-react/src/core/Table/TablePaginator.test.tsx
+++ b/packages/itwinui-react/src/core/Table/TablePaginator.test.tsx
@@ -290,7 +290,7 @@ it('should render elements in small size', () => {
   ).toBe(true);
 
   const pages = container.querySelectorAll(
-    '.iui-table-paginator-page-button-small',
+    '.iui-table-paginator-page-button[data-iui-size="small"]',
   );
   expect(pages).toHaveLength(7);
 
diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx
index 07a37755740..8ef30a080a4 100644
--- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx
+++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx
@@ -17,7 +17,6 @@ import {
   SvgChevronLeft,
   SvgChevronRight,
   Box,
-  ButtonBase,
 } from '../../utils/index.js';
 import type { CommonProps } from '../../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
@@ -173,11 +172,11 @@ export const TablePaginator = (props: TablePaginatorProps) => {
 
   const pageButton = React.useCallback(
     (index: number, tabIndex = index === focusedIndex ? 0 : -1) => (
-      <ButtonBase
+      <Button
         key={index}
-        className={cx('iui-table-paginator-page-button', {
-          'iui-table-paginator-page-button-small': buttonSize === 'small',
-        })}
+        className='iui-table-paginator-page-button'
+        styleType='borderless'
+        size={buttonSize}
         data-iui-active={index === currentPage}
         onClick={() => onPageChange(index)}
         aria-current={index === currentPage}
@@ -185,7 +184,7 @@ export const TablePaginator = (props: TablePaginatorProps) => {
         tabIndex={tabIndex}
       >
         {index + 1}
-      </ButtonBase>
+      </Button>
     ),
     [focusedIndex, currentPage, localization, buttonSize, onPageChange],
   );