@planningcenter/topbar 12.4.0-qa-959.1 → 12.4.0-qa-956.1

package/dist/topbar.css

@@ -16,6 +16,11 @@
   --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-040);
   --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-060);
   --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-030);
+  --topbar-app-menu-margin-left: var(--t-spacing-2);
+  --topbar-app-menu-padding-x: var(--t-spacing-half);
+  --topbar-app-menu-offset: calc(
+    var(--topbar-app-menu-padding-x) - var(--t-spacing-1) * 2 - var(--t-border-width)
+  );
   --toolbar-width: 64px;
   --toolbar-inner-width: 48px;
   --toolbar-drawer-width: 360px;
@@ -294,29 +299,32 @@ Caused by products overriding .topbar-wrap’s z-index.
 
 .button-XMbeQ {
   --tds-btn-color: var(--topbar-nav-link-font-color);
-  --tds-btn-bg: var(--t-fill-color-transparency-light-020);
-  --tds-btn-border-color: var(--topbar-nav-link-border-color);
+  --tds-btn-bg: transparent;
+  --tds-btn-border-color: transparent;
   --tds-btn-color-hover: var(--topbar-nav-link-font-color);
-  --tds-btn-bg-hover: var(--topbar-nav-link-background-color-hover);
-  --tds-btn-border-color-hover: var(--topbar-nav-link-border-color);
+  --tds-btn-bg-hover: transparent;
+  --tds-btn-border-color-hover: transparent;
   --tds-btn-color-active: var(--topbar-nav-link-font-color);
-  --tds-btn-bg-active: var(--topbar-nav-link-background-color-active);
-  --tds-btn-border-color-active: var(--topbar-nav-link-border-color-active);
+  --tds-btn-bg-active: transparent;
+  --tds-btn-border-color-active: transparent;
   --tds-btn-text-decoration: none;
   --tds-btn-font-size: var(--t-font-size-md);
   --tds-btn-font-weight: var(--t-font-weight-semibold);
-  --tds-btn-line-height: 2;
-  --tds-btn-min-height: var(--topbar-nav-link-height);
-  --tds-btn-border-radius: var(--t-border-radius-lg);
-  --tds-btn-padding-y: 0;
+  --tds-btn-padding-x: var(--topbar-app-menu-padding-x);
+  --tds-btn-padding-truncated-x: var(--topbar-app-menu-padding-x);
+  --tds-btn-padding-y: var(--t-spacing-half);
+  gap: 6px;
   font-family: inherit;
+  margin-left: var(--topbar-app-menu-margin-left);
 }
 .button-XMbeQ:hover, .button-XMbeQ:focus-visible {
   --tds-btn-text-decoration: none;
 }
-.button-XMbeQ[aria-expanded=true] {
-  --tds-btn-bg: var(--topbar-nav-link-background-color-active);
-  --tds-btn-border-color: var(--topbar-nav-link-border-color-active);
+
+.button-XMbeQ svg:first-child {
+  width: 24px !important;
+  height: 24px !important;
+  flex-shrink: 0;
 }
 
 .label-884of {
@@ -329,10 +337,27 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .chevron-RRg9k {
-  width: 1em !important;
-  height: 1em !important;
-  color: var(--t-icon-color-secondary);
+  box-sizing: border-box;
+  width: 16px !important;
+  height: 16px !important;
+  margin-left: -1px;
+  padding: var(--t-spacing-fourth);
+  border-radius: 100%;
+  color: var(--t-text-color);
   flex-shrink: 0;
+  transition: background-color 0.12s ease-in, transform 0.12s ease-in;
+}
+.chevron-RRg9k polygon {
+  transform: translateY(0.5px);
+}
+.button-XMbeQ[aria-expanded=true] .chevron-RRg9k {
+  background-color: var(--t-fill-color-transparency-light-050);
+  transform: rotate(180deg);
+}
+@media (hover: hover) {
+  .button-XMbeQ:hover .chevron-RRg9k {
+    background-color: var(--t-fill-color-transparency-light-050);
+  }
 }
 .nav-y-6ML {
   display: flex;
@@ -343,6 +368,7 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .popover-content-jOAAY {
+  margin-left: var(--topbar-app-menu-offset);
   min-width: calc(var(--t-spacing-6) * 6);
   border-radius: var(--t-border-radius-lg);
 }
@@ -360,11 +386,11 @@ Caused by products overriding .topbar-wrap’s z-index.
   display: flex;
   align-items: center;
   gap: var(--t-spacing-1);
-  min-height: var(--t-container-size-lg);
+  min-height: var(--t-container-size-md);
   padding: 0 var(--t-spacing-1);
   border-radius: var(--t-border-radius-lg);
   font-family: inherit;
-  font-size: var(--t-font-size-md);
+  font-size: var(--t-font-size-sm);
   font-weight: var(--t-font-weight-semibold);
   text-decoration: none;
   color: var(--t-text-color-headline);
@@ -380,6 +406,11 @@ Caused by products overriding .topbar-wrap’s z-index.
   outline-offset: calc(var(--t-focus-ring-width) * -1);
 }
 
+.link-LMp2h svg {
+  width: 20px;
+  height: 20px;
+}
+
 .current-4U4VL {
   background: var(--t-fill-color-button-interaction-ghost-active);
 }
@@ -389,8 +420,7 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .accounts-item-erJW0 {
-  margin-top: var(--t-spacing-half);
-  padding-top: var(--t-spacing-1);
+  padding-top: var(--t-spacing-half);
   border-top: var(--t-border-width) solid var(--t-border-color-dim);
 }
 
@@ -504,55 +534,24 @@ Caused by products overriding .topbar-wrap’s z-index.
   max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));
 }
 
-.searchButton-fYa5- {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--topbar-nav-link-height);
-  height: var(--topbar-nav-link-height);
-  padding: 0;
-  margin-right: var(--t-spacing-half);
-  background-color: var(--topbar-nav-link-background-color-active);
-  color: var(--topbar-nav-link-font-color);
-  border: var(--t-border-width) solid var(--topbar-nav-link-border-color-active);
-  border-radius: var(--topbar-nav-link-border-radius);
-  cursor: pointer;
-  transition: var(--topbar-nav-link-transition);
-}
-
-/*
- * At phone widths, where the small topbar shows, it sits bare in the header,
- * the same target as the avatar's.
- */
-@media (max-width: 599px) {
-  .searchButton-fYa5- {
-    width: var(--t-container-size-xl);
-    height: var(--t-container-size-xl);
-    margin-right: 0;
-    background-color: transparent;
-    color: var(--t-text-color-headline);
-    border: 0;
-    border-radius: 0;
-  }
+/* Placeholder until design lands: just enough to tell which product is selected. */
+.tab-dz8ki[aria-selected="true"] {
+  background-color: var(--t-fill-color-interaction);
+  color: var(--t-text-color-inverted);
+  font-weight: var(--t-font-weight-semibold);
 }
 
-.modal-NR3TO {
-  height: 640px;
-  max-height: calc(100vh - var(--t-spacing-3) * 2);
-  /* Keeps the results panel's background inside the rounded corners. */
-  overflow: hidden;
-  border: var(--t-border-width) solid var(--t-border-color);
+/* Placeholder until design lands: just enough to see which result is highlighted. */
+.result-Thq2C {
+  display: block;
 }
 
-/* Fits mobile Safari's visible viewport, between its toolbars. */
-@supports (height: 100dvh) {
-  .modal-NR3TO {
-    max-height: calc(100dvh - var(--t-spacing-3) * 2);
-  }
+.result-Thq2C[aria-selected="true"] {
+  background-color: var(--t-fill-color-interaction);
+  color: var(--t-text-color-inverted);
 }
 
-.visuallyHidden-C28ju {
+.visuallyHidden-S9VG5 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -561,603 +560,6 @@ Caused by products overriding .topbar-wrap’s z-index.
   white-space: nowrap;
 }
 
-/* Scrolls the results under the product picker, tabs or dropdown. */
-@property --scroll-shadow-offset {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-
-@keyframes scroll-shadow-slide-RlHcf {
-  to {
-    --scroll-shadow-offset: 12px;
-  }
-}
-
-.panel-HlF7S {
-  --scroll-shadow-cover: var(--t-surface-color-card);
-  --scroll-shadow: color-mix(
-    in srgb,
-    var(--t-fill-color-transparency-dark-static-010) 55%,
-    transparent
-  );
-
-  flex: 1;
-  min-height: 0;
-  padding: var(--product-search-padding, var(--t-spacing-3))
-    var(
-      --product-search-results-inset,
-      var(--product-search-padding, var(--t-spacing-3))
-    );
-  /* Lets results lay out by the panel's width rather than the viewport's. */
-  container-type: inline-size;
-  scroll-padding-block: var(--product-search-padding, var(--t-spacing-3));
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  background:
-    linear-gradient(transparent, var(--scroll-shadow-cover) 28px) bottom /
-      100% 48px no-repeat local,
-    radial-gradient(
-        farthest-side at 50% 100%,
-        var(--scroll-shadow),
-        transparent
-      )
-      left 0 bottom calc(var(--scroll-shadow-offset) * -1) / 100% 12px
-      no-repeat scroll;
-  animation: scroll-shadow-slide-RlHcf linear both;
-  animation-range: calc(100% - 48px) 100%;
-  animation-timeline: scroll(self);
-}
-
-/*
- * Phone widths, where the small topbar shows (DisplaySwitch's default "xs"
- * and "sm" breakpoints). The modal fills the screen rather than floating at a
- * desktop height, with tighter padding inside. The search field, product
- * select and results panel read the padding from --product-search-padding.
- * Result rows and headings pad themselves by --product-search-row-inset,
- * narrower here so the highlight sits closer to the content, and the panel's
- * sides take that off to line their images and text up with the search icon.
- */
-@media (max-width: 599px) {
-  .modal-NR3TO {
-    --product-search-padding: var(--t-spacing-2);
-    --product-search-row-inset: var(--t-spacing-1);
-    --product-search-results-inset: calc(
-      var(--product-search-padding) - var(--product-search-row-inset)
-    );
-
-    height: calc(100vh - var(--t-spacing-3) * 2);
-    padding-block-start: var(--product-search-padding);
-  }
-
-  @supports (height: 100dvh) {
-    .modal-NR3TO {
-      height: calc(100dvh - var(--t-spacing-3) * 2);
-    }
-  }
-
-  /* Section headings pad themselves, so they start just under the select. */
-  .panel-HlF7S {
-    padding-block-start: 0;
-  }
-
-  /*
-   * Tapestry only takes a class for the dialog, so its overlay and frame are
-   * reached through it. Top and bottom margins narrow to 8px; the sides keep
-   * 16px of backdrop to tap. The frame fills the dynamic viewport, which
-   * follows Safari's toolbars as they show and hide. The dialog stretches to
-   * fill the frame.
-   *
-   * Mobile Safari draws the keyboard over the page without shrinking 100dvh,
-   * so while it's open the frame sizes to the visible viewport instead. A
-   * bottom margin the keyboard's height keeps the overlay's centering above
-   * it.
-   *
-   * Browsers without :has() drop these rules, so the modal keeps its own
-   * height there. No @supports selector() guard: consuming apps run this file
-   * through libsass, which can't parse it.
-   */
-  .tds-modal-overlay:has(.modal-NR3TO) {
-    --tds-modal-min-margin-block: var(--t-spacing-1);
-  }
-
-  .tds-modal-frame:has(> .modal-NR3TO) {
-    --tds-modal-edge-margin-inline: var(--t-spacing-2);
-
-    height: calc(100vh - var(--t-spacing-1) * 2);
-    height: calc(
-      var(--visual-viewport-height, 100dvh) - var(--t-spacing-1) * 2
-    );
-    margin-block-end: calc(100dvh - var(--visual-viewport-height, 100dvh));
-  }
-
-  .tds-modal-frame:has(> .modal-NR3TO) > .modal-NR3TO {
-    height: auto;
-    max-height: none;
-  }
-}
-
-.container-YDdM1 {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  gap: var(--t-spacing-1);
-  padding: var(--t-spacing-1) var(--t-spacing-1-half);
-  margin: 0;
-  list-style: none;
-  border-top: var(--t-border-width) solid var(--t-border-color);
-}
-
-.hint-017Rd {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--t-spacing-half);
-  padding: var(--t-spacing-half) var(--t-spacing-1);
-  border-radius: var(--t-border-radius-lg);
-  color: var(--t-text-color-placeholder);
-  font-size: var(--t-font-size-sm);
-}
-
-.keycap-ENJM2 {
-  --keycap-size: 24px;
-  --keycap-padding: 4px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--keycap-size);
-  height: var(--keycap-size);
-  padding: var(--keycap-padding);
-  margin-block: var(--t-spacing-fourth);
-  background-color: var(--t-fill-color-neutral-070);
-  color: var(--t-text-color-placeholder);
-  font-family: inherit;
-  font-size: calc(var(--keycap-size) - var(--keycap-padding) * 2);
-  font-weight: var(--t-font-weight-semibold);
-  border-radius: var(--t-border-radius-md);
-}
-
-.keycap-ENJM2 svg {
-  flex-shrink: 0;
-  width: 1.4em;
-  width: 2cap;
-  height: 1.4em;
-  height: 2cap;
-  stroke-width: 2;
-}
-
-.labels-GHPqL {
-  display: grid;
-  overflow: clip;
-}
-
-.labels-GHPqL > * {
-  grid-area: 1 / 1;
-}
-
-@property --copied {
-  syntax: "<percentage>";
-  inherits: true;
-  initial-value: 0%;
-}
-
-.copied-DUFa1 {
-  position: relative;
-  background-color: color-mix(
-    in srgb,
-    var(--t-fill-color-status-success-ghost) calc(var(--copied) * 0.3),
-    transparent
-  );
-  animation:
-    copied-enter-k4P4y var(--copied-enter) var(--t-ease-out) forwards,
-    copied-exit-oCDAu var(--copied-exit) var(--t-ease-out)
-      calc(var(--copied-enter) + var(--copied-active)) forwards;
-}
-
-.copied-DUFa1 .keycap-ENJM2 {
-  animation: copied-keypress-znahZ 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.copied-DUFa1 .labels-GHPqL > :first-child {
-  translate: 0 calc(var(--copied) * -1);
-}
-
-.copied-DUFa1 .labels-GHPqL > :last-child {
-  translate: 0 calc(100% - var(--copied));
-}
-
-.copied-DUFa1::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  border: 2px solid var(--t-border-color-status-success);
-  opacity: var(--copied);
-}
-
-@keyframes copied-enter-k4P4y {
-  to { --copied: 100% }
-}
-
-@keyframes copied-exit-oCDAu {
-  from { --copied: 100% }
-  to { --copied: 0% }
-}
-
-@keyframes copied-keypress-znahZ {
-  20%,
-  26% {
-    translate: 0 1px;
-    scale: 0.88;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .copied-DUFa1 {
-    --copied: 100%;
-    animation: none;
-  }
-
-  .copied-DUFa1 .keycap-ENJM2 {
-    animation: none;
-  }
-}
-
-.icon-XKLvN {
-  position: relative;
-  display: block;
-  flex-shrink: 0;
-}
-
-.icon-XKLvN::before {
-  content: "";
-  position: absolute;
-  inset: 12.5%;
-  background-color: hsl(0, 0%, 100%);
-  border-radius: 20%;
-}
-
-.squircle-JCHr6 {
-  position: absolute;
-  inset: 0;
-  mask-size: 100%;
-}
-
-.picker-iuzzj {
-  flex-shrink: 0;
-  padding: 0 var(--product-search-padding, var(--t-spacing-3)) var(--t-spacing-1);
-}
-
-.option--7LXg {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--t-spacing-1);
-}
-
-.tablist-7ASvc {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--t-spacing-half);
-  padding-inline: var(--t-spacing-2);
-  padding-top: var(--t-spacing-2);
-  border-bottom: var(--t-border-width) solid var(--t-border-color);
-}
-
-.tab-dz8ki {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--t-spacing-1);
-  min-width: 48px;
-  height: 40px;
-  padding: 0 var(--t-spacing-2);
-  margin-bottom: calc(var(--t-border-width) * -1);
-  background-color: var(--t-fill-color-neutral-070);
-  color: var(--t-text-color-secondary);
-  font-size: var(--t-font-size-md);
-  border: var(--t-border-width) solid transparent;
-  border-bottom-color: var(--t-border-color);
-  border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
-  cursor: pointer;
-}
-
-.tab-dz8ki:hover {
-  background-color: var(--t-fill-color-neutral-060);
-}
-
-.tab-dz8ki:focus-visible {
-  z-index: 1;
-  outline: none;
-}
-
-.tab-dz8ki:focus-visible::after {
-  content: "";
-  position: absolute;
-  /* Measured from inside the tab's border, so step out past it too. */
-  inset: calc((var(--t-focus-ring-offset) + var(--t-border-width)) * -1);
-  border-radius: calc(var(--t-border-radius-md) + var(--t-focus-ring-offset));
-  box-shadow: 0 0 0 var(--t-focus-ring-width) var(--t-focus-ring-color);
-  pointer-events: none;
-}
-
-.tab-dz8ki[aria-selected="true"] {
-  background-color: var(--t-surface-color-card);
-  border-color: var(--t-border-color);
-  border-bottom-color: var(--t-surface-color-card);
-  cursor: default;
-}
-
-.blank_state-wMOWN {
-  padding-block: var(--t-spacing-2);
-  text-align: center;
-}
-@media screen and (min-width: 600px) {
-  .blank_state-wMOWN {
-    padding-block: var(--t-spacing-5);
-  }
-}
-.blank_state-wMOWN h2 {
-  color: var(--t-text-color-headline);
-  font-size: var(--t-font-size-xl);
-  font-weight: var(--t-font-weight-semibold);
-  margin: 0;
-}
-.blank_state-wMOWN p {
-  color: var(--t-text-color-secondary);
-  font-size: var(--t-font-size-md);
-  margin: 0;
-}
-
-.image-uy0Fd {
-  color: var(--t-fill-color-status-info-ghost);
-}
-.image-uy0Fd svg {
-  width: 30vw;
-  height: auto;
-}
-@media screen and (min-width: 600px) {
-  .image-uy0Fd svg {
-    width: 18vw;
-  }
-}
-.result-Thq2C {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 56px;
-  padding: var(--t-spacing-1) var(--product-search-row-inset, 12px);
-  color: var(--t-text-color);
-  text-decoration: none;
-  border-radius: var(--t-border-radius-lg);
-  /* Taps get the highlight below instead of the browser's grey flash. */
-  -webkit-tap-highlight-color: transparent;
-}
-
-.result-Thq2C:hover,
-.result-Thq2C:focus,
-.result-Thq2C:active,
-.result-Thq2C:visited {
-  color: var(--t-text-color);
-  text-decoration: none;
-}
-
-.result-Thq2C[aria-selected="true"],
-.result-Thq2C:active {
-  background-color: var(--t-fill-color-button-interaction-ghost-hover);
-}
-
-.title-KYUEn {
-  flex-shrink: 0;
-  max-width: 60%;
-  overflow: hidden;
-  font-size: var(--t-font-size-lg);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.subtitle-R2haq {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--t-text-color-secondary);
-  font-size: var(--t-font-size-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.image-KVDor {
-  --result-image-size: 32px;
-
-  position: relative;
-  flex-shrink: 0;
-  width: var(--result-image-size);
-  height: var(--result-image-size);
-}
-
-.avatar-6Gh62,
-.photo-FZR3Q {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar-6Gh62 {
-  border-radius: 50%;
-}
-
-.photo-FZR3Q {
-  border-radius: var(--t-border-radius-md);
-}
-
-.badge-trUKt {
-  position: absolute;
-  right: -4px;
-  bottom: -4px;
-  filter: drop-shadow(0 1px 1px var(--t-fill-color-transparency-dark-static-010));
-}
-
-/*
- * Too narrow for the title and meta to share a line, as on a phone, so they
- * stack beside a smaller image.
- */
-@container (max-width: 480px) {
-  .result-Thq2C {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-content: center;
-    gap: 0 12px;
-  }
-
-  .image-KVDor {
-    --result-image-size: 28px;
-
-    grid-row: span 2;
-    align-self: center;
-  }
-
-  .title-KYUEn {
-    max-width: none;
-  }
-}
-
-.message-1-PP- {
-  margin: 0;
-  padding-block: var(--t-spacing-5);
-  color: var(--t-text-color-secondary);
-  text-align: center;
-}
-
-.heading-LioUF {
-  padding: var(--t-spacing-1) var(--product-search-row-inset, 12px);
-  color: var(--t-text-color-secondary);
-  font-size: var(--t-font-size-sm);
-}
-
-.heading-LioUF:not(:first-child) {
-  margin-top: var(--t-spacing-2);
-}
-
-/*
- * The field is a box of its own, so keyboard focus can ring it like an input.
- * Padding all around gives the ring room, and the row's margins take the
- * same amount off the modal's spacing, so the icon and text stay where they
- * were.
- */
-.row-5P7UQ {
-  --header-inset: var(--t-spacing-1);
-
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--t-spacing-1);
-  margin: calc(var(--header-inset) * -1)
-    calc(
-      var(--product-search-padding, var(--t-spacing-3)) - var(--header-inset)
-    )
-    calc(var(--t-spacing-1-half) - var(--header-inset));
-}
-
-.header-sXEyG {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: var(--t-spacing-1);
-  min-width: 0;
-  padding: var(--header-inset);
-  border-radius: var(--t-border-radius-lg);
-  outline: var(--t-focus-ring-width) solid transparent;
-  cursor: text;
-  transition: outline-color var(--t-duration-200) var(--t-ease-in-out);
-}
-
-/* Only from the keyboard, since a click or tap already shows where it is. */
-.header-sXEyG:has([data-focus-visible]) {
-  outline-color: var(--t-focus-ring-color);
-}
-
-/* A 48px tap target around the 32px button, like the small topbar's. */
-.closeButton-rPJJV {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.closeButton-rPJJV::before {
-  position: absolute;
-  inset: calc((var(--t-container-size-xl) - var(--t-container-size-md)) / -2);
-  content: "";
-}
-
-.input-YQkTC {
-  flex: 1;
-  min-width: 0;
-  padding: 0;
-  background: none;
-  color: var(--t-text-color);
-  font: inherit;
-  font-size: var(--t-font-size-xl);
-  border: 0;
-  outline: none;
-}
-
-.input-YQkTC::placeholder {
-  color: var(--t-text-color-placeholder);
-}
-
-.input-YQkTC::-webkit-search-cancel-button {
-  appearance: none;
-}
-
-.clearButton-9Yh9w {
-  --clear-button-size: 20px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--clear-button-size);
-  height: var(--clear-button-size);
-  padding: 0;
-  background: var(--t-fill-color-neutral-030);
-  color: #fff;
-  border: 0;
-  border-radius: var(--t-border-radius-round);
-  cursor: pointer;
-  transition: var(--topbar-slight-transition-background);
-}
-
-.clearButton-9Yh9w:hover {
-  background-color: var(--t-fill-color-neutral-040);
-}
-
-.clearButton-9Yh9w svg {
-  height: calc(var(--clear-button-size) * 0.65);
-  width: calc(var(--clear-button-size) * 0.65);
-}
-
-.spinner-b5tlz {
-  --spinner-size: 54px;
-  --spinner-track-width: 6px;
-  --spinner-track-color: var(--t-border-color-dim);
-  --spinner-color: var(--t-border-color-status-info);
-
-  display: inline-block;
-  box-sizing: border-box;
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-  border: var(--spinner-track-width) solid var(--spinner-track-color);
-  border-bottom-color: var(--spinner-color);
-  border-radius: 50%;
-  animation: rotation-q2xiP .75s linear infinite;
-}
-
-@keyframes rotation-q2xiP {
-  to {
-    transform: rotate(1turn);
-  }
-}
 .route--8BWe {
   font-size: var(--topbar-nav-link-font-size);
   font-family: inherit;
@@ -1204,9 +606,6 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .trigger-wrap-Jd-KR {
-  /* Lets the trigger shrink, truncating the org name, when the nav runs out
-  of room */
-  min-width: 0;
   margin-left: var(--t-spacing-1);
   position: relative;
   white-space: nowrap;
@@ -1222,7 +621,6 @@ Caused by products overriding .topbar-wrap’s z-index.
   border: var(--t-border-width) solid var(--topbar-nav-link-border-color-active);
   border-radius: var(--topbar-nav-link-border-radius);
   min-width: var(--t-container-size-md);
-  max-width: 100%;
   transition: var(--topbar-nav-link-transition);
   display: flex;
   align-items: center;
@@ -1233,7 +631,6 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .trigger-WgRT5 svg {
-  flex-shrink: 0;
   transition: transform var(--topbar-slight-transition);
   /* Negative margin ensures button is a circle when orgname isn’t visible */
   margin-left: calc(var(--t-spacing-1) * -1);
@@ -1548,35 +945,13 @@ Caused by products overriding .topbar-wrap’s z-index.
   background-color: var(--t-fill-color-button-interaction-outline-active);
 }
 
-/*
- * Spaces the header's buttons on the right. Each is the same touch target;
- * the padding keeps the avatar, and the title's width, where they were
- * before search joined it.
- */
-.actions-INQ7- {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  padding-inline: var(--t-spacing-1-half) var(--t-spacing-1);
-}
-
 .profile-button-a2WO2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--t-container-size-xl);
-  height: var(--t-container-size-xl);
-  padding: 0;
   background-color: transparent;
   border-width: 0;
+  padding: var(--t-spacing-2);
   appearance: none;
 }
 
-/* Centers the avatar in its target, without its own leading margin. */
-.profile-button-a2WO2 > div {
-  margin-left: 0;
-}
-
 .debug-pco-resource-sLteM {
   display: flex;
   flex-direction: column;
@@ -2080,7 +1455,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   align-items: center;
   justify-content: center;
   gap: var(--t-spacing-half);
-  height: var(--t-container-size-sm);
+  height: var(--t-container-size-md);
   padding: 0 var(--t-spacing-1);
   border: var(--t-border-width) solid transparent;
   border-radius: var(--t-border-radius-md);
@@ -2123,7 +1498,6 @@ Caused by products overriding .topbar-wrap’s z-index.
 .sparkle-ruJGP {
   position: relative;
   flex-shrink: 0;
-  color: var(--t-fill-color-tag-indigo-040);
 }
 
 .label-4NUGB {