carbon-design-system · metonym · Dec 27, 2025 · Jan 26, 2026 · Feb 3, 2026 · Feb 3, 2026
diff --git a/css/_ui-shell.scss b/css/_ui-shell.scss
diff --git a/css/all.scss b/css/all.scss
@@ -29,6 +29,7 @@ $css--plex: true;
 @import "./stack";
 @import "./contained-list";
 @import "./number-input";
+@import "./ui-shell";
 
 // The default theme is "white" (White)
 :root {

diff --git a/css/g10.scss b/css/g10.scss
@@ -28,6 +28,7 @@ $css--plex: true;
 @import "./stack";
 @import "./contained-list";
 @import "./number-input";
+@import "./ui-shell";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";

diff --git a/css/g100.scss b/css/g100.scss
@@ -28,6 +28,7 @@ $css--plex: true;
 @import "./stack";
 @import "./contained-list";
 @import "./number-input";
+@import "./ui-shell";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";

diff --git a/css/g80.scss b/css/g80.scss
@@ -28,6 +28,7 @@ $css--plex: true;
 @import "./stack";
 @import "./contained-list";
 @import "./number-input";
+@import "./ui-shell";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";

diff --git a/css/g90.scss b/css/g90.scss
@@ -28,6 +28,7 @@ $css--plex: true;
 @import "./stack";
 @import "./contained-list";
 @import "./number-input";
+@import "./ui-shell";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";

diff --git a/css/white.scss b/css/white.scss
@@ -28,6 +28,7 @@ $css--plex: true;
 @import "./stack";
 @import "./contained-list";
 @import "./number-input";
+@import "./ui-shell";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";

diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx
@@ -27,12 +27,6 @@ components: ["Header",
 
 `UIShell` provides a collection of components for building application shells and navigation structures. It includes header, side navigation, and content components that work together to create a cohesive user interface.
 
-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    Currently, the UI Shell is not themable and only supports dark mode.
-  </div>
-</InlineNotification>
-
 Open the following examples in a new tab to experience them in full.
 
 ## Header

diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
@@ -70,9 +70,9 @@
 
   $: hasIconOnly = iconDescription && !(text || $$slots.textChildren);
   $: buttonClass = [
-    hasIconOnly && "bx--btn bx--btn--primary",
+    hasIconOnly && "bx--btn",
     hasIconOnly && "bx--tooltip__trigger bx--tooltip--a11y",
-    hasIconOnly && "bx--btn--icon-only bx--btn--icon-only--bottom",
+    hasIconOnly && "bx--btn--icon-only--bottom",
     hasIconOnly && `bx--tooltip--align-${tooltipAlignment}`,
     $$restProps.class,
   ]
@@ -139,26 +139,3 @@
     <slot />
   </div>
 {/if}
-
-<style>
-  :global(.bx--header__action--text) {
-    display: inline-flex;
-    align-items: center;
-    width: auto;
-
-    /** 2px bottom padding aligns icon with `HeaderAction` */
-    padding: 0 1rem 2px 1rem;
-
-    /** `body-short-01` styles */
-    font-size: 0.875rem;
-    line-height: 1.28572;
-    letter-spacing: 0.16px;
-
-    /** Same color as `Header` platformName */
-    color: #f4f4f4;
-  }
-
-  :global(.bx--header__action-text) {
-    margin-left: 0.75rem;
-  }
-</style>
diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte
@@ -31,13 +31,3 @@
     <svelte:component this={icon} size={20} />
   </slot>
 </a>
-
-<style>
-  :global(.bx--header__action) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /** Hot fix to align icon with `HeaderAction` */
-    padding-bottom: 2px;
-  }
-</style>
diff --git a/src/UIShell/HeaderPanelDivider.svelte b/src/UIShell/HeaderPanelDivider.svelte
@@ -4,19 +4,3 @@
   </li>
 {/if}
 <hr class:bx--switcher__item--divider={true} />
-
-<style>
-  /**
-    * Carbon does not support a divider with a subject.
-    * We apply custom styles using the switcher subject divider
-    * from https://carbondesignsystem.com/ as a reference.
-    */
-
-  :global(.bx--header-panel-divider) {
-    margin: 2rem 1rem 0;
-    font-size: 0.75rem;
-    line-height: 1.3;
-    letter-spacing: 0.02rem;
-    color: #c6c6c6;
-  }
-</style>
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
@@ -160,20 +160,21 @@
       }}
       on:paste
     />
-    <button
-      type="button"
-      aria-label="Clear search"
-      tabindex={active ? "0" : "-1"}
-      class:bx--header__action={true}
-      class:bx--header-search-button={true}
-      class:bx--header-search-button--hidden={!active}
-      on:click={() => {
-        reset();
-        dispatch("clear");
-      }}
-    >
-      <Close size={20} title="Close" />
-    </button>
+    {#if active}
+      <button
+        type="button"
+        aria-label="Clear search"
+        tabindex={active ? "0" : "-1"}
+        class:bx--header__action={true}
+        class:bx--header-search-button={true}
+        on:click={() => {
+          reset();
+          dispatch("clear");
+        }}
+      >
+        <Close size={20} title="Close" />
+      </button>
+    {/if}
   </div>
 
   {#if active && results.length > 0}
@@ -213,141 +214,3 @@
     </ul>
   {/if}
 </div>
-
-<style>
-  :global(.bx--header__search-label) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    border: 0;
-    visibility: inherit;
-    clip: rect(0, 0, 0, 0);
-  }
-
-  :global(.bx--header__search) {
-    position: relative;
-    display: flex;
-    max-width: 28rem;
-    width: 100%;
-    margin-left: 0.5rem;
-    height: 3rem;
-    background-color: #393939;
-    color: #fff;
-    transition:
-      max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
-      background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  :global(.bx--header__search:not(.bx--header__search--active)) {
-    max-width: 3rem;
-    background-color: #161616;
-  }
-
-  :global(.bx--header__search.bx--header__search--active) {
-    outline: 2px solid #fff;
-    outline-offset: -2px;
-  }
-
-  :global(.bx--header__search-menu) {
-    display: flex;
-    flex-grow: 1;
-    border-bottom: 1px solid #393939;
-  }
-
-  :global(.bx--header__search-input) {
-    width: 100%;
-    height: 3rem;
-    padding: 0;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.375rem;
-    letter-spacing: 0;
-    color: #fff;
-    caret-color: #fff;
-    background-color: initial;
-    border: none;
-    outline: none;
-    transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  :global(.bx--header__search-input:not(.bx--header__search--active)) {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :global(.bx--header-search-button) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3rem;
-    height: 100%;
-    padding: 0;
-    flex-shrink: 0;
-    opacity: 1;
-    transition:
-      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
-      opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  :global(.bx--header-search-button--disabled) {
-    border: none;
-    pointer-events: none;
-  }
-
-  :global(.bx--header-search-button:hover) {
-    background-color: #4c4c4c;
-  }
-
-  :global(.bx--header-search-button--hidden) {
-    opacity: 0;
-    display: none;
-  }
-
-  :global(.bx--header-search-menu) {
-    position: absolute;
-    z-index: 10000;
-    padding: 1rem 0;
-    left: 0;
-    right: 0;
-    top: 3rem;
-    background-color: #161616;
-    border: 1px solid #393939;
-    border-top: none;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
-  }
-
-  :global(.bx--header-search-menu-item) {
-    padding: 6px 1rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.29;
-    letter-spacing: 0.16px;
-    transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-    display: block;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: #c6c6c6;
-  }
-
-  :global(.bx--header-search-menu-item--selected),
-  :global(.bx--header-search-menu-item:hover) {
-    background-color: #353535;
-    color: #f4f4f4;
-  }
-
-  :global(.bx--header-search-menu-description) {
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1.34;
-    letter-spacing: 0.32px;
-    text-transform: lowercase;
-    color: #c6c6c6;
-  }
-</style>