@brightspot/ui 5.0.3-toggleable-fix.0 → 5.0.4-pre.20260624

package/src/legacy/tool-ui/src/Hierarchy.css

@@ -22,11 +22,11 @@
   }
 
   ul {
-    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:block before:h-[42px] before:w-full before:bg-gray-100;
+    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:blokk before:h-[42px] before:w-full before:bg-gray-100;
   }
 
   li {
-    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:block before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
+    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:blokk before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
 
     a:not(.Hierarchy-expand) {
       @apply -order-1 flex-grow truncate py-3.5 text-sm font-medium text-gray-900 no-underline hover:underline;
@@ -45,7 +45,7 @@
     }
 
     &:not(:has(.Hierarchy-expand)) {
-      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:block after:p-1 after:text-gray-300;
+      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:blokk after:p-1 after:text-gray-300;
     }
   }
 }
@@ -55,7 +55,7 @@
 
   /* Shows the user that the selected item has no loadable children */
   :has(li.is-selected) + &.loaded:empty {
-    @apply block h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
+    @apply blokk h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
   }
 }
 

package/src/legacy/tool-ui/src/ImageEditor.css

@@ -84,15 +84,15 @@
 
 .ImageEditor-editToggle,
 .ImageEditor-open {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs ml-1 mr-[5px] overflow-visible before:btu-icon touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-1 after:-right-[5px] after:-top-1 after:border after:border-l-0 after:border-gray-300;
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs ml-1 mr-[5px] overflow-visible before:btu-icon touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-1 after:-right-[5px] after:-top-1 after:border after:border-s-0 after:border-gray-300;
 }
 
 .ImageEditor-open {
-  @apply relative [grid-area:open] before:btu-icon-pencil-ruler after:border-r-gray-200;
+  @apply relative [grid-area:open] before:btu-icon-pencil-ruler after:border-e-gray-200;
 }
 
 .ImageEditor-editToggle {
-  @apply [grid-area:edit] before:btu-icon-ellipsis after:rounded-br-lg;
+  @apply [grid-area:edit] before:btu-icon-ellipsis after:rounded-ee-lg;
 }
 
 .ImageEditor-editTools {
@@ -113,7 +113,7 @@
   canvas {
     --gray-1: light-dark(theme(colors.gray.200), theme(colors.gray.600));
     --gray-2: light-dark(theme(colors.gray.300), theme(colors.gray.500));
-    @apply m-auto block max-h-[60vh] max-w-full bg-[light-dark(theme(colors.gray.50),_theme(colors.gray.800))] bg-[linear-gradient(45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-2)_75%,var(--gray-2)),linear-gradient(-45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-1)_75%,var(--gray-2))] bg-[length:10px_10px];
+    @apply m-auto blokk max-h-[60vh] max-w-full bg-[light-dark(theme(colors.gray.50),_theme(colors.gray.800))] bg-[linear-gradient(45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-2)_75%,var(--gray-2)),linear-gradient(-45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-1)_75%,var(--gray-2))] bg-[length:10px_10px];
   }
 
   &.is-hidden img {
@@ -126,7 +126,7 @@
 }
 
 .is-imageEditorLoading .ImageEditor-preview-loader {
-  @apply block;
+  @apply blokk;
 }
 
 .is-imageEditorReady .ImageEditor-preview-loader {
@@ -135,7 +135,7 @@
 
 /* Focus UI & controls */
 .ImageEditor-focusToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs relative my-1 ml-[5px] mr-1 overflow-visible before:btu-icon before:btu-icon-focus touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-[5px] after:-right-1 after:-top-1 after:box-border after:rounded-bl-lg after:border after:border-r-0 after:border-gray-300;
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs relative my-1 ml-[5px] mr-1 overflow-visible before:btu-icon before:btu-icon-focus touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-[5px] after:-right-1 after:-top-1 after:box-border after:rounded-es-lg after:border after:border-e-0 after:border-gray-300;
 }
 
 /* size groups dropdown */
@@ -246,7 +246,7 @@
   }
 
   .ActionBar {
-    @apply gap-2 rounded-bl-lg border-r [grid-area:actions];
+    @apply gap-2 rounded-es-lg border-e [grid-area:actions];
 
     .ImageEditor-resetButton {
       @apply btu-button-fill-none !btu-button-error -order-1 me-auto btu-button-container-none before:btu-icon before:btu-icon-rotate-ccw;
@@ -255,10 +255,10 @@
 }
 
 .ImageEditor-main {
-  @apply relative overflow-x-auto rounded-br-lg [grid-area:editor];
+  @apply relative overflow-x-auto rounded-ee-lg [grid-area:editor];
 
   img {
-    @apply block max-h-full max-w-full;
+    @apply blokk max-h-full max-w-full;
   }
 }
 
@@ -277,7 +277,7 @@
 }
 
 .ImageEditor-aside {
-  @apply overflow-y-auto border-r bg-white [grid-area:aside];
+  @apply overflow-y-auto border-e bg-white [grid-area:aside];
   .TC-unselected {
     @apply hidden;
   }
@@ -350,7 +350,7 @@
   }
 
   > .Message {
-    @apply rounded-none border-r-0 border-t-0;
+    @apply rounded-none border-e-0 border-t-0;
   }
 }
 
@@ -375,7 +375,7 @@
     }
 
     .ImageEditor-sizeDescription .is-override {
-      @apply block;
+      @apply blokk;
     }
   }
 }
@@ -411,7 +411,7 @@
 .ImageEditor-sizeDescription {
   @apply order-2 basis-full px-4 pb-4 text-xs capitalize text-gray-500 empty:hidden;
   .is-inherit {
-    @apply block;
+    @apply blokk;
   }
 
   .is-override {

package/src/legacy/tool-ui/src/LinkCarousel.css

@@ -46,7 +46,7 @@
   @apply absolute right-2 top-2 flex size-7 items-center justify-center before:size-5 touch-device:p-2;
 
   &:not(.is-unstarred) {
-    @apply before:block before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.starFilled)];
+    @apply before:blokk before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.starFilled)];
   }
 
   &.is-unstarred {

package/src/legacy/tool-ui/src/LiveBlog.css

@@ -1,5 +1,5 @@
 .objectId-edit-heading {
-  @apply btu-button btu-button-fill-none btu-button-primary block truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
+  @apply btu-button btu-button-fill-none btu-button-primary blokk truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
 }
 
 .Grid:has(.LiveBlogGrid),
@@ -11,7 +11,7 @@
 }
 
 .LiveBlogPostList {
-  @apply overflow-auto border-r bg-white [grid-area:list];
+  @apply overflow-auto border-e bg-white [grid-area:list];
 }
 
 .LiveBlogPostList-open {

package/src/legacy/tool-ui/src/LocationMap.css

@@ -13,7 +13,7 @@
 
 .LocationMap-marker {
   --size: 20px;
-  @apply !size-[var(--size)] before:block before:size-full before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.mapPin)];
+  @apply !size-[var(--size)] before:blokk before:size-full before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.mapPin)];
 }
 
 .LocationMap-locateControl {

package/src/legacy/tool-ui/src/MailPublishing.css

@@ -16,7 +16,7 @@
 
 /* Compose new email page */
 .Page.MockEmailComposePage {
-  @apply block;
+  @apply blokk;
 }
 
 .MockEmailComposePage .Widget-title {

package/src/legacy/tool-ui/src/MenuView.css

@@ -118,11 +118,11 @@
 
   /* actions pinned to right of toolbar */
   [data-rte-style='rte2-toolbar-find'] {
-    @apply absolute right-11 z-[2] border-r;
+    @apply absolute right-11 z-[2] border-e;
   }
 
   [data-rte-style='rte2-toolbar-ai-inline'] {
-    @apply absolute right-2 z-[2] border-r;
+    @apply absolute right-2 z-[2] border-e;
   }
 
   &[data-sidebar-icon-count='2'] [data-rte-style='rte2-toolbar-ai-inline'] {
@@ -195,11 +195,11 @@
   @apply py-1;
 
   .shortcut {
-    @apply hidden text-xs text-gray-500 md:block;
+    @apply hidden text-xs text-gray-500 md:blokk;
   }
 
   .separator {
-    @apply before:block before:h-px before:w-full before:bg-gray-200;
+    @apply before:blokk before:h-px before:w-full before:bg-gray-200;
   }
 
   /* submenu headings */

package/src/legacy/tool-ui/src/Message.css

@@ -106,7 +106,7 @@
   --Revision-revisionEmphasisColor: theme(colors.purple.700);
   --Revision-revisionBackgroundColor: theme(colors.purple.25);
 
-  @apply flex flex-wrap justify-start gap-2 rounded-none border-b border-l-0 border-r-0 border-t-0 border-b-[--Revision-revisionColor] bg-[--Revision-revisionBackgroundColor] text-[--Revision-revisionTextColor] max-md:gap-0 md:items-center;
+  @apply flex flex-wrap justify-start gap-2 rounded-none border-b border-s-0 border-e-0 border-t-0 border-b-[--Revision-revisionColor] bg-[--Revision-revisionBackgroundColor] text-[--Revision-revisionTextColor] max-md:gap-0 md:items-center;
 
   > .Message-icon {
     @apply text-[--Revision-revisionEmphasisColor] before:btu-icon;

package/src/legacy/tool-ui/src/Page.css

@@ -29,7 +29,7 @@
     /* This turns ON the toggle */
     --toggles-right-rail: var(--has-right-rail);
     .Page-guide {
-      @apply block max-md:visible max-md:z-[12];
+      @apply blokk max-md:visible max-md:z-[12];
     }
   }
 
@@ -131,7 +131,7 @@
 }
 
 .Page-env {
-  @apply me-auto hidden min-w-full bg-gray-100 text-xs font-medium md:btu-badge-gray md:btu-badge-sm max-md:-mx-2 max-md:h-[--page-env-h] max-md:px-2 max-md:py-[2px] max-md:text-center max-md:[flex:1_0_100%] md:order-2 md:block md:min-w-max;
+  @apply me-auto hidden min-w-full bg-gray-100 text-xs font-medium md:btu-badge-gray md:btu-badge-sm max-md:-mx-2 max-md:h-[--page-env-h] max-md:px-2 max-md:py-[2px] max-md:text-center max-md:[flex:1_0_100%] md:order-2 md:blokk md:min-w-max;
 }
 
 .Page-guideLink {
@@ -162,7 +162,7 @@
 
     /* Displays site name if site switcher is missing (e.g. user has access to only 1 site) */
     .Page-siteName {
-      @apply hidden @[80px]:col-[2/3] @[80px]:line-clamp-1 @[80px]:block @[80px]:truncate @[80px]:px-2 @[80px]:text-sm;
+      @apply hidden @[80px]:col-[2/3] @[80px]:line-clamp-1 @[80px]:blokk @[80px]:truncate @[80px]:px-2 @[80px]:text-sm;
     }
   }
 
@@ -174,7 +174,26 @@
     @apply absolute inset-0 size-full focus:ring-offset-0 focus:border-transparent focus:ring-0 @[80px]:static @[80px]:inset-[unset] @[80px]:col-[2/3] @[80px]:grid @[80px]:grid-cols-[minmax(0,1fr)_auto] @[80px]:items-center @[80px]:gap-2 @[80px]:px-2 @[80px]:text-sm max-md:px-4;
 
     /* Chevron after the site name */
-    @apply after:btu-icon after:btu-icon-chevron-down after:absolute after:left-[36%] after:top-[31%] after:flex after:size-5 after:items-center after:justify-center after:rounded-lg after:border after:border-gray-200 after:bg-white after:shadow-lg after:[--icon-size:1.1rem] after:[transform:translate(50%,50%)] @[80px]:after:static @[80px]:after:size-7 @[80px]:after:transform-none @[80px]:after:border-0 @[80px]:after:bg-transparent @[80px]:after:shadow-none;
+    @apply after:btu-icon after:btu-icon-chevron-down after:absolute after:top-[31%] after:flex after:size-5 after:items-center after:justify-center after:rounded-lg after:border after:border-gray-200 after:bg-white after:shadow-lg after:[--icon-size:1.1rem] @[80px]:after:static @[80px]:after:size-7 @[80px]:after:transform-none @[80px]:after:border-0 @[80px]:after:bg-transparent @[80px]:after:shadow-none;
+
+    /* Decorative chevron centering offset (collapsed <80px state). rtl:ignore —
+       postcss-rtlcss would flip left and negate the translateX, and the flipped
+       translate would resurrect over the @[80px] transform-none reset, shifting
+       the chevron in RTL. The badge sits in the same spot in both directions.
+       The @[80px] transform reset is re-asserted here, after the offset, so it
+       still wins at >=80px — without it the extracted offset's translateY drops
+       the inline chevron ~14px too low (in both directions). */
+    /*rtl:begin:ignore*/
+    &::after {
+      left: 36%;
+      transform: translate(50%, 50%);
+    }
+    @container (min-width: 80px) {
+      &::after {
+        transform: none;
+      }
+    }
+    /*rtl:end:ignore*/
 
     /* Site switcher's focus state is ring around chevron icon */
     @apply focus-visible:after:ring-primary-100 focus-visible:after:border focus-visible:after:border-primary-600 focus-visible:after:ring-4 more-contrast:focus-visible:after:border-primary-400 more-contrast:focus-visible:after:ring-primary-400;
@@ -297,7 +316,7 @@
 .Page-header.mobile,
 .Page-header:has(+ .Page-content > .content-edit, + .Page-content > .Grid) {
   .SearchInput {
-    @apply pointer-events-none block [--tw-scale-x:0] [--tw-translate-x:0] [opacity:0] [transform-origin:right] [transform:translate(var(--tw-translate-x),var(--tw-translate-y))_scaleX(var(--tw-scale-x))_scaleY(var(--tw-scale-y))] [transition:opacity_0.15s_ease-out,_transform_0.3s_cubic-bezier(0.4,0,0.2,1)];
+    @apply pointer-events-none blokk [--tw-scale-x:0] [--tw-translate-x:0] [opacity:0] [transform-origin:right] [transform:translate(var(--tw-translate-x),var(--tw-translate-y))_scaleX(var(--tw-scale-x))_scaleY(var(--tw-scale-y))] [transition:opacity_0.15s_ease-out,_transform_0.3s_cubic-bezier(0.4,0,0.2,1)];
   }
 
   .Page-search {
@@ -338,7 +357,7 @@
 }
 
 .Page-main > btu-nav-rail {
-  @apply [grid-area:stack] max-md:invisible max-md:z-[21] max-md:h-full max-md:[grid-area:stack] max-md:[transform:translate(-100vw,0)] md:border-r md:[grid-area:nav];
+  @apply [grid-area:stack] max-md:invisible max-md:z-[21] max-md:h-full max-md:[grid-area:stack] max-md:[transform:translate(-100vw,0)] md:border-e md:[grid-area:nav];
 
   > ul > li > ul > li,
   > ul > li:not(:has(ul)) :where(a, button) {
@@ -427,7 +446,7 @@
     }
 
     .ToolUserAvatar-name {
-      @apply block;
+      @apply blokk;
     }
   }
 
@@ -441,7 +460,7 @@
   }
 
   .Page-askAiLink {
-    @apply block;
+    @apply blokk;
   }
 }
 
@@ -608,7 +627,7 @@
   }
 
   .LiveBlogPostListNav.is-visible .LiveBlogPostList {
-    @apply max-md:block;
+    @apply max-md:blokk;
   }
 
   .LiveBlogGrid.is-visible {
@@ -642,7 +661,7 @@
 }
 
 .Page-guide {
-  @apply hidden h-full overflow-auto border-r border-gray-200 bg-gray-50 max-md:invisible max-md:[grid-area:stack] md:w-[var(--has-right-rail,var(--right-rail-w))] md:[grid-area:guidePanel];
+  @apply hidden h-full overflow-auto border-e border-gray-200 bg-gray-50 max-md:invisible max-md:[grid-area:stack] md:w-[var(--has-right-rail,var(--right-rail-w))] md:[grid-area:guidePanel];
 
   > .frame {
     @apply h-full overflow-y-hidden;
@@ -685,7 +704,7 @@
 }
 
 .Page-notifications[data-new='true'] > a {
-  @apply relative after:absolute after:left-[19px] after:top-[0px] after:z-[2] after:block after:size-[13px] after:rounded-full after:border-[2px] after:border-white after:bg-error-600 after:[scale:1] @[80px]:after:left-[21px];
+  @apply relative after:absolute after:left-[19px] after:top-[0px] after:z-[2] after:blokk after:size-[13px] after:rounded-full after:border-[2px] after:border-white after:bg-error-600 after:[scale:1] @[80px]:after:left-[21px];
 
   &::after {
     @apply [transition:opacity_200ms_2s_cubic-bezier(0.64,0,0.78,0),_scale_350ms_2s_cubic-bezier(0.34,1.56,0.64,1)];
@@ -735,7 +754,7 @@
     @apply [grid-row:1/3];
     /* Display a default Brightspot logo when a site logo isn't present */
     &:not(:has(img)) {
-      @apply before:block before:size-[var(--logo-size)] before:rounded before:bg-white before:bg-center before:bg-no-repeat before:p-4 before:shadow-sm;
+      @apply before:blokk before:size-[var(--logo-size)] before:rounded before:bg-white before:bg-center before:bg-no-repeat before:p-4 before:shadow-sm;
       @apply before:bg-site-logo-default;
     }
 
@@ -746,10 +765,10 @@
 }
 
 .Page.is-unauthenticated {
-  @apply block bg-white md:[--Page-loginWidth:320px];
+  @apply blokk bg-white md:[--Page-loginWidth:320px];
 
   .Page-background {
-    @apply absolute bottom-0 left-0 right-[--Page-loginWidth] top-0 block overflow-clip rounded-r-2xl [background-position:top] [background-size:cover];
+    @apply absolute bottom-0 left-0 right-[--Page-loginWidth] top-0 blokk overflow-clip rounded-e-2xl [background-position:top] [background-size:cover];
   }
 
   .Page-header {
@@ -849,7 +868,7 @@
     @apply flex-row-reverse gap-0 overflow-visible border-0 p-0;
 
     .ComboInput-filter {
-      @apply invisible block w-0 origin-right scale-x-0 transition-transform;
+      @apply invisible blokk w-0 origin-right scale-x-0 transition-transform;
     }
 
     .ComboInput-label {
@@ -860,7 +879,7 @@
       @apply !w-[150px] [box-shadow:none];
 
       .ComboInput-label {
-        @apply block bg-primary-50 [transform:rotate(-225deg)];
+        @apply blokk bg-primary-50 [transform:rotate(-225deg)];
       }
 
       .ComboInput-filter {

package/src/legacy/tool-ui/src/Popup.css

@@ -152,7 +152,7 @@
     }
 
     .repeatableForm .metadataEntryWrapper span.displayKey {
-      @apply block text-[0.75rem] text-[var(--color-gray5)];
+      @apply blokk text-[0.75rem] text-[var(--color-gray5)];
     }
 
     .repeatableForm .metadataEntryWrapper span.displayValue {
@@ -300,7 +300,11 @@
 }
 
 /* Reset the position of the popover so it can be repositioned properly with Tether coordinates.
-  Without these resets, setting 'bottom' or 'right' won't actually work. */
+  Without these resets, setting 'bottom' or 'right' won't actually work.
+  rtl:ignore — Tether sets physical left/right/top/bottom coordinates in JS (already
+  direction-aware), so postcss-rtlcss must not flip these left/right resets; flipping
+  re-adds left:auto and mispositions native popovers (e.g. ContentEdit-controlsList). */
+/*rtl:begin:ignore*/
 [popover] {
   &[data-tether-ry='t'] {
     bottom: unset;
@@ -315,6 +319,7 @@
     right: unset;
   }
 }
+/*rtl:end:ignore*/
 
 .Popup[name='contentImages'] {
   .frame[name='contentImages'] {
@@ -345,7 +350,7 @@
     }
 
     > a {
-      @apply my-2 !block w-full truncate px-2 text-sm text-gray-700 no-underline;
+      @apply my-2 !blokk w-full truncate px-2 text-sm text-gray-700 no-underline;
     }
   }
 }

package/src/legacy/tool-ui/src/ProseMirror.css

@@ -55,7 +55,7 @@
   }
 
   :is(bsp-line, bsp-break) {
-    @apply block;
+    @apply blokk;
 
     &:has(> .ProseMirror-trailingBreak) {
       @apply leading-[var(--lineHeight-m)];

package/src/legacy/tool-ui/src/ProseMirrorContainer.css

@@ -4,7 +4,7 @@
   @apply relative overflow-clip rounded-lg border border-gray-300 opacity-100 transition;
 
   &.hide {
-    @apply !block opacity-0;
+    @apply !blokk opacity-0;
   }
 
   &:has(.Mention:focus-within),

package/src/legacy/tool-ui/src/ProseMirrorEnhancementMenu.css

@@ -2,7 +2,7 @@
   @apply absolute hidden;
 
   &.open {
-    @apply block;
+    @apply blokk;
   }
 }
 
@@ -24,7 +24,7 @@
 }
 
 .ProsemirrorEnhancementMenu-container-link {
-  @apply hidden max-w-[15vw] truncate @md:block;
+  @apply hidden max-w-[15vw] truncate @md:blokk;
 }
 
 .ProsemirrorEnhancementMenu-container-link-goto {

package/src/legacy/tool-ui/src/ProseMirrorFindReplace.css

@@ -102,11 +102,11 @@
   }
 
   .ProseMirrorFindReplace-findContainer-pagination-prev {
-    @apply ms-4 rounded-r-none [grid-area:prev] before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
+    @apply ms-4 rounded-e-none [grid-area:prev] before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
   }
 
   .ProseMirrorFindReplace-findContainer-pagination-next {
-    @apply rounded-l-none border-l-0 [grid-area:next] before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
+    @apply rounded-s-none border-s-0 [grid-area:next] before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
   }
 }
 

package/src/legacy/tool-ui/src/QueryField.css

@@ -39,7 +39,7 @@
 }
 
 .QueryField-frame .SearchResult-items {
-  @apply m-6 mb-0 block max-h-fit overflow-auto rounded-t-lg shadow-sm;
+  @apply m-6 mb-0 blokk max-h-fit overflow-auto rounded-t-lg shadow-sm;
 }
 
 /* Has a "No Matching Items" message */

package/src/legacy/tool-ui/src/RepeatableContentInputGroup.css

@@ -389,7 +389,7 @@
   }
 
   > .RCIG-preview {
-    @apply absolute top-[var(--RCIG-titleHeight)] block h-[calc(var(--RCIG-itemHeight)-var(--RCIG-titleHeight))] w-full bg-gray-50;
+    @apply absolute top-[var(--RCIG-titleHeight)] blokk h-[calc(var(--RCIG-itemHeight)-var(--RCIG-titleHeight))] w-full bg-gray-50;
 
     > img {
       @apply h-full w-full object-cover;

package/src/legacy/tool-ui/src/RepeatableContentSelector.css

@@ -127,7 +127,7 @@
       }
 
       .ContentSelector-search {
-        @apply col-span-full row-span-full mx-0 mb-9 mt-11 block h-[calc(9rem+1px)] w-full max-w-full overflow-visible rounded-none border-y border-solid border-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:before:btu-button-sm before:!absolute before:bottom-1 before:right-[4.75rem] before:mt-[5px];
+        @apply col-span-full row-span-full mx-0 mb-9 mt-11 blokk h-[calc(9rem+1px)] w-full max-w-full overflow-visible rounded-none border-y border-solid border-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:before:btu-button-sm before:!absolute before:bottom-1 before:right-[4.75rem] before:mt-[5px];
 
         &:not(:has(figure)),
         &:has(.RCS-placeholderCard) {

package/src/legacy/tool-ui/src/RichText.css

@@ -6,7 +6,7 @@
   @apply absolute left-0 top-0 z-10 grid size-full place-items-center;
 
   &::after {
-    @apply btu-loader block size-[--loader-size];
+    @apply btu-loader blokk size-[--loader-size];
   }
 
   &.hide {

package/src/legacy/tool-ui/src/SearchFields.css

@@ -39,7 +39,7 @@
 }
 
 .SearchFields-heading + btu-input {
-  @apply block px-4 before:btu-icon before:btu-icon-search before:absolute before:left-8 before:top-2;
+  @apply blokk px-4 before:btu-icon before:btu-icon-search before:absolute before:left-8 before:top-2;
 
   input {
     @apply ps-11;
@@ -66,7 +66,8 @@
   @apply rounded-none;
 }
 
-.SearchFields .RCIG-item:not(.Sortable-ghost, .Sortable-drag) {
+/* (0,5,0) to out-rank the (0,4,0) primary-50 `.RCIG-item` default; keep the specificity. */
+.SearchFields .RCIG-list .RCIG-item:not(.Sortable-ghost):not(.Sortable-drag) {
   @apply flex flex-row-reverse border-none bg-white px-4 hover:bg-gray-100;
 
   /* Sortable styles */

package/src/legacy/tool-ui/src/SearchResult.css

@@ -108,7 +108,7 @@
   @apply inline-flex items-stretch rounded-lg border border-gray-300 bg-white;
 
   > li {
-    @apply [&:not(:first-child)]:border-l [&:not(:first-child)]:border-solid [&:not(:first-child)]:border-l-gray-300 [&:not(:first-child)_>_a]:rounded-l-none [&:not(:last-child)_>_a]:rounded-r-none;
+    @apply [&:not(:first-child)]:border-s [&:not(:first-child)]:border-solid [&:not(:first-child)]:border-s-gray-300 [&:not(:first-child)_>_a]:rounded-s-none [&:not(:last-child)_>_a]:rounded-e-none;
 
     > a {
       @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray bg-white before:btu-icon before:btu-icon-circle-dashed hover:bg-gray-200 focus:z-[1];
@@ -179,7 +179,7 @@
     But when the controls aren't needed, at the ends of the list, the rounded corners need to
     be applied to the container of the page buttons. */
   &:last-child:has(> ol > li a.is-active:last-child) > ol {
-    @apply rounded-br-lg rounded-tr-lg [clip-path:border-box];
+    @apply rounded-ee-lg rounded-se-lg [clip-path:border-box];
 
     /* Prevents extraneous border when on final results page */
     li:last-child > a {
@@ -278,7 +278,7 @@
   }
 
   > input[type='checkbox'] {
-    @apply absolute right-4 top-4 z-10 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:block before:rounded-[1px] before:bg-white after:inset-1.5 checked:border-primary-50 checked:bg-primary-800 checked:before:hidden hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
+    @apply absolute right-4 top-4 z-10 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:blokk before:rounded-[1px] before:bg-white after:inset-1.5 checked:border-primary-50 checked:bg-primary-800 checked:before:hidden hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
 
     ~ a {
       @apply absolute inset-0 flex items-end justify-between gap-2 bg-transparent;

package/src/legacy/tool-ui/src/SearchWidget.css

@@ -373,7 +373,7 @@ btu-widget.SearchWidget-create {
   /* Display a loading spinner while waiting for SearchResult frame to load */
   &.loading {
     &::after {
-      @apply btu-loader visible absolute left-1/2 top-1/2 z-[1] block size-[--loader-size] [grid-area:results];
+      @apply btu-loader visible absolute left-1/2 top-1/2 z-[1] blokk size-[--loader-size] [grid-area:results];
     }
   }
 

package/src/legacy/tool-ui/src/SearchWidgetAdvanced.css

@@ -47,7 +47,7 @@
   @apply relative;
 
   &::after {
-    @apply btu-loader absolute left-1/2 top-1/2 z-[1] block size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
+    @apply btu-loader absolute left-1/2 top-1/2 z-[1] blokk size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
   }
 }
 

package/src/legacy/tool-ui/src/StyleEmbeddedContent.css

@@ -11,11 +11,11 @@
 }
 
 .StyleEmbeddedContent-nav {
-  @apply w-full border-b border-r border-gray-200 bg-gray-50 md:overflow-y-auto md:border-b-0;
+  @apply w-full border-b border-e border-gray-200 bg-gray-50 md:overflow-y-auto md:border-b-0;
 }
 
 .StyleEmbeddedContent-search {
-  @apply relative block;
+  @apply relative blokk;
 }
 
 .StyleEmbeddedContent-search input {
@@ -31,7 +31,7 @@
 }
 
 .StyleEmbeddedContent-nav li > a {
-  @apply block rounded-lg p-2 text-sm font-semibold text-gray-700 no-underline;
+  @apply blokk rounded-lg p-2 text-sm font-semibold text-gray-700 no-underline;
 
   &:hover {
     @apply bg-gray-100 text-gray-900;

package/src/legacy/tool-ui/src/TabBar.css

@@ -148,7 +148,7 @@
 
 /* dashboard tab select tab bar items custom styles */
 .TabBar-item a {
-  @apply -mx-1.5 -mb-4 -mt-1.5 block px-1 pb-4 pt-1.5;
+  @apply -mx-1.5 -mb-4 -mt-1.5 blokk px-1 pb-4 pt-1.5;
 }
 
 .TabBar-item.is-error a {

package/src/legacy/tool-ui/src/Table.css

@@ -63,7 +63,7 @@ td {
   }
 
   a.ContentSummary-link > button.ContentSummary-info {
-    @apply block;
+    @apply blokk;
   }
 }
 

package/src/legacy/tool-ui/src/Taxonomy.css

@@ -18,11 +18,11 @@
   }
 
   ul {
-    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:block before:h-[42px] before:w-full before:bg-gray-100;
+    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:blokk before:h-[42px] before:w-full before:bg-gray-100;
   }
 
   li {
-    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:block before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
+    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:blokk before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
 
     a:not(.Taxonomy-expand) {
       @apply -order-1 flex-grow truncate py-3.5 text-sm font-medium text-gray-900 no-underline hover:underline;
@@ -41,7 +41,7 @@
     }
 
     &:not(:has(.Taxonomy-expand)) {
-      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:block after:p-1 after:text-gray-300;
+      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:blokk after:p-1 after:text-gray-300;
     }
   }
 }
@@ -51,7 +51,7 @@
 
   /* Shows the user that the selected item has no loadable children */
   :has(li.is-selected) + &.loaded:empty {
-    @apply block h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
+    @apply blokk h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
   }
 }