@brightspot/ui 5.0.3-toggleable-fix.0 → 5.0.3

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

@@ -188,7 +188,7 @@
   }
 
   .Admin-nav {
-    @apply overflow-auto border-r border-r-gray-200 [grid-area:nav];
+    @apply overflow-auto border-e border-e-gray-200 [grid-area:nav];
   }
 
   .Admin-main {
@@ -206,7 +206,7 @@
       @apply min-w-[--miller-columns-w] grow overflow-auto [grid-auto-rows:max-content];
 
       &:not(:first-child) {
-        @apply border-l border-solid border-gray-100;
+        @apply border-s border-solid border-gray-100;
       }
 
       h1.Widget-title {

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

@@ -74,7 +74,7 @@ textarea,
 form {
   &.is-submitting {
     button.is-clicked {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
+      @apply btu-button-disabled before:btu-loader before:blokk before:size-[1.2rem];
     }
   }
 }

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

@@ -32,7 +32,7 @@
   }
 
   .loaded & {
-    @apply block;
+    @apply blokk;
   }
 
   .loading & {

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

@@ -1,5 +1,5 @@
 btu-cig-cluster {
-  @apply block flex-grow basis-full contain-layout contain-style;
+  @apply blokk flex-grow basis-full contain-layout contain-style;
 }
 
 btu-cig-cluster:state(btu-error) {

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

@@ -11,7 +11,7 @@
 }
 
 .Card-media img {
-  @apply block h-auto w-full;
+  @apply blokk h-auto w-full;
 }
 
 /* Supply a max size because in some instances the image is not constrained by a wrapping element. */

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

@@ -20,7 +20,7 @@
 }
 
 .CodeMirror-gutters {
-  @apply border-r-gray-300 bg-gray-50;
+  @apply border-e-gray-300 bg-gray-50;
 }
 
 .CodeMirror-linenumber {
@@ -36,11 +36,11 @@
 }
 
 .CodeMirror-cursor {
-  @apply border-l-[2px] border-l-primary-600;
+  @apply border-s-[2px] border-s-primary-600;
 }
 
 .CodeMirror div.CodeMirror-secondarycursor {
-  @apply border-l-gray-200;
+  @apply border-s-gray-200;
 }
 
 .cm-fat-cursor .CodeMirror-cursor {
@@ -56,7 +56,7 @@
 }
 
 .CodeMirror-ruler {
-  @apply border-l-gray-200;
+  @apply border-s-gray-200;
 }
 
 .cm-s-default .cm-header {

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

@@ -29,7 +29,7 @@
 }
 
 .sp-preview-inner {
-  @apply absolute bottom-0 left-0 right-0 top-0 block h-5 w-5 rounded-full;
+  @apply absolute bottom-0 left-0 right-0 top-0 blokk h-5 w-5 rounded-full;
 }
 
 .sp-preview:not([data-placeholder^='#']) {
@@ -117,7 +117,7 @@
 }
 
 .sp-palette .sp-thumb-inner {
-  @apply block h-full w-full overflow-hidden rounded-full;
+  @apply blokk h-full w-full overflow-hidden rounded-full;
 }
 
 .sp-button-container {

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

@@ -78,7 +78,7 @@
         :not([data-create], [data-sublist])
       ) {
       .ComboInput-check {
-        @apply block scale-50 opacity-0 transition-[opacity_scale] duration-250 [transition-timing-function:theme(transitionTimingFunction[spring-stiff])] before:btu-icon before:btu-icon-check before:text-inherit;
+        @apply blokk scale-50 opacity-0 transition-[opacity_scale] duration-250 [transition-timing-function:theme(transitionTimingFunction[spring-stiff])] before:btu-icon before:btu-icon-check before:text-inherit;
       }
 
       &[aria-selected='true'] {
@@ -153,7 +153,7 @@ select {
 /***** "Create New" Options *****/
 /********************************/
 .ComboInput-option > a[data-create='true'] {
-  @apply btu-heading-6 block px-4 py-2 no-underline before:btu-icon before:btu-icon-plus before:me-2;
+  @apply btu-heading-6 blokk px-4 py-2 no-underline before:btu-icon before:btu-icon-plus before:me-2;
 }
 
 .ComboInput-option[data-create='true'],
@@ -195,7 +195,7 @@ select {
 
 .ComboInput-option-favorite:not(.is-unstarred)
   .ComboInput-option-favorite-icon {
-  @apply block size-4 bg-primary-800 [clip-path:theme(shape.starFilled)];
+  @apply blokk size-4 bg-primary-800 [clip-path:theme(shape.starFilled)];
 }
 
 /*****************************/

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

@@ -197,7 +197,7 @@
     @apply pointer-events-none;
 
     &:not(.Link) {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
+      @apply btu-button-disabled before:btu-loader before:blokk before:size-[1.2rem];
     }
   }
 }
@@ -247,15 +247,17 @@ suggests. Example use case "pin" icon button in live blog posts */
   @apply btu-button-gray;
 }
 
-.Label:is(.is-green) {
+/* Doubled `.Label` (0,3,0) is intentional — keeps v4 colors ahead of Label.css's (0,2,0) status colors. */
+.Label.Label.is-green {
   @apply btu-badge-success;
 }
 
-.Label:is(.is-orange, .is-yellow) {
+.Label.Label.is-orange,
+.Label.Label.is-yellow {
   @apply btu-badge-warning;
 }
 
-.Label:is(.is-red) {
+.Label.Label.is-red {
   @apply btu-badge-error;
 }
 

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

@@ -90,7 +90,7 @@
 }
 
 .ContentEdit-top + .Message {
-  @apply rounded-none border-b border-l-0 border-r-0 border-t-0 [grid-area:status] max-md:p-4 md:[grid-area:banner];
+  @apply rounded-none border-b border-s-0 border-e-0 border-t-0 [grid-area:status] max-md:p-4 md:[grid-area:banner];
 }
 
 .ContentEdit-top + .Message > .WorkInProgressRestoredMessage-actions a {
@@ -181,7 +181,7 @@
 }
 
 .contentForm-main {
-  @apply overflow-auto [grid-area:content] [scrollbar-gutter:stable] max-md:h-full md:overflow-y-auto md:overflow-x-hidden md:overscroll-none md:border-r md:[grid-area:left];
+  @apply overflow-auto [grid-area:content] [scrollbar-gutter:stable] max-md:h-full md:overflow-y-auto md:overflow-x-hidden md:overscroll-none md:border-e md:[grid-area:left];
 }
 
 .ContentEdit-main {
@@ -212,7 +212,7 @@
 }
 
 .ContentEdit-preview {
-  @apply visible relative bg-gray-100 transition-all @container/preview [transform:scaleX(.000001)] max-md:absolute max-md:bottom-[52px] max-md:z-[21] max-md:h-[calc(100dvh_-_52px)] max-md:w-full max-md:duration-700 md:origin-right md:border-r md:border-gray-200 md:[grid-area:preview];
+  @apply visible relative bg-gray-100 transition-all @container/preview [transform:scaleX(.000001)] max-md:absolute max-md:bottom-[52px] max-md:z-[21] max-md:h-[calc(100dvh_-_52px)] max-md:w-full max-md:duration-700 md:origin-right md:border-e md:border-gray-200 md:[grid-area:preview];
 
   iframe {
     @apply absolute left-0 top-0 h-[var(--PreviewFrame-height,_calc(100%_/_var(--PreviewFrame-scale)))] w-[var(--ContentEdit-previewFrameWidth,_1920px)] origin-top-left overflow-clip;
@@ -252,7 +252,7 @@
   }
 
   & .PreviewFrame-typeDisplay {
-    @apply relative block size-full overflow-y-auto overflow-x-hidden rounded-none rounded-t-2xl border border-b-0 border-gray-200;
+    @apply relative blokk size-full overflow-y-auto overflow-x-hidden rounded-none rounded-t-2xl border border-b-0 border-gray-200;
   }
 
   & .PreviewFrame-typeDisplay > iframe[name*='PreviewFrame'] {
@@ -357,13 +357,13 @@
       .PreviewFrame-typeControls [name='_previewPath'] + .ComboInput
     )
     .PreviewFrame-moreActions {
-    @apply @preview-lg/preview:block;
+    @apply @preview-lg/preview:blokk;
   }
 
   &
     .PreviewFrame.HasPreviewSelect:has(.PreviewFrame-previewToEditToggle)
     .PreviewFrame-moreActions {
-    @apply !block;
+    @apply !blokk;
   }
 
   & .PreviewFrame-typeDisplay {
@@ -409,7 +409,7 @@
 }
 
 .ContentEdit-toolbar {
-  @apply z-30 w-full bg-white px-4 py-2 [grid-area:bottom] max-md:flex max-md:flex-nowrap max-md:justify-evenly max-md:overflow-hidden max-md:overflow-x-auto max-md:border-t max-md:border-t-gray-200 md:z-10 md:block md:bg-gray-50 md:p-4 md:[grid-area:toolbar] md:[width:var(--ContentEdit-toolbarWidth)] md:[&_>_li]:mb-2;
+  @apply z-30 w-full bg-white px-4 py-2 [grid-area:bottom] max-md:flex max-md:flex-nowrap max-md:justify-evenly max-md:overflow-hidden max-md:overflow-x-auto max-md:border-t max-md:border-t-gray-200 md:z-10 md:blokk md:bg-gray-50 md:p-4 md:[grid-area:toolbar] md:[width:var(--ContentEdit-toolbarWidth)] md:[&_>_li]:mb-2;
 
   button {
     @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray;
@@ -458,7 +458,7 @@
 }
 
 .ContentEdit-right {
-  @apply hidden overflow-y-auto overflow-x-hidden bg-gray-50 [grid-area:content] max-md:absolute max-md:bottom-[52px] max-md:z-10 max-md:h-[calc(100dvh-52px)] max-md:w-full md:relative md:bottom-auto md:left-auto md:right-auto md:top-auto md:w-auto md:border-r md:border-solid md:[grid-area:right];
+  @apply hidden overflow-y-auto overflow-x-hidden bg-gray-50 [grid-area:content] max-md:absolute max-md:bottom-[52px] max-md:z-10 max-md:h-[calc(100dvh-52px)] max-md:w-full md:relative md:bottom-auto md:left-auto md:right-auto md:top-auto md:w-auto md:border-e md:border-solid md:[grid-area:right];
 
   &:has(.ContentEditDrawer-widget) {
     @apply top-auto;
@@ -590,7 +590,7 @@
 }
 
 .ContentEdit-right.is-visible {
-  @apply block;
+  @apply blokk;
 }
 
 .ContentEdit-overlayList,
@@ -617,12 +617,12 @@
 
   /* Content type */
   .ContentEdit-contentType--v5 {
-    @apply btu-badge-gray btu-badge-sm -order-2 block flex-1 truncate md:me-2 md:@6xl/page-header:inline;
+    @apply btu-badge-gray btu-badge-sm -order-2 blokk flex-1 truncate md:me-2 md:@6xl/page-header:inline;
   }
 
   /* Content status  */
   .ContentEdit-status--v5 {
-    @apply -order-2 block min-w-[unset] flex-1 truncate before:me-1.5 before:inline-block md:me-2;
+    @apply -order-2 blokk min-w-[unset] flex-1 truncate before:me-1.5 before:inline-block md:me-2;
   }
 }
 
@@ -747,7 +747,7 @@
   }
 
   .ContentEdit-overlay {
-    @apply btu-badge-gray btu-badge-sm relative block flex-1 truncate !pe-7 after:btu-icon after:btu-icon-chevron-down after:absolute after:right-2 after:top-[5px] after:btu-icon-xs;
+    @apply btu-badge-gray btu-badge-sm relative blokk flex-1 truncate !pe-7 after:btu-icon after:btu-icon-chevron-down after:absolute after:right-2 after:top-[5px] after:btu-icon-xs;
   }
 }
 

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

@@ -9,7 +9,7 @@
   @apply fixed scale-x-0 [content-visibility:hidden] md:[--nav-width:var(--pageNav-w)];
 
   &.is-open {
-    @apply bottom-[calc(var(--toolbar-h-mobile)_+_var(--offset))] left-[calc(var(--nav-width)_+_var(--offset))] z-20 origin-right scale-x-100 overflow-hidden border-r bg-gray-50 p-0 shadow-lg transition-transform duration-300 ease-out [content-visibility:auto] max-md:right-[--offset] md:bottom-[--offset] md:left-[calc(var(--nav-width)_+_var(--panel-width)_+_var(--offset))] md:right-[calc(var(--right-toolbar-w)_+_var(--offset))];
+    @apply bottom-[calc(var(--toolbar-h-mobile)_+_var(--offset))] left-[calc(var(--nav-width)_+_var(--offset))] z-20 origin-right scale-x-100 overflow-hidden border-e bg-gray-50 p-0 shadow-lg transition-transform duration-300 ease-out [content-visibility:auto] max-md:right-[--offset] md:bottom-[--offset] md:left-[calc(var(--nav-width)_+_var(--panel-width)_+_var(--offset))] md:right-[calc(var(--right-toolbar-w)_+_var(--offset))];
   }
 }
 
@@ -65,11 +65,11 @@
 /* Display spinner when filters are updated and frame is loading */
 .ContentEditDrawer-widget.is-loading {
   &::before {
-    @apply absolute inset-0 z-[2] block bg-gray-50 content-[''];
+    @apply absolute inset-0 z-[2] blokk bg-gray-50 content-[''];
   }
 
   &::after {
-    @apply btu-loader visible absolute left-1/2 top-1/2 z-[2] block size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
+    @apply btu-loader visible absolute left-1/2 top-1/2 z-[2] blokk size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
   }
 }
 
@@ -86,11 +86,11 @@
   }
 
   .ContentEditDrawer-widget-carousel-list-item-moreInfoButton.ContentSummary-info {
-    @apply absolute bottom-[30px] right-3 m-0 hidden touch-device:block;
+    @apply absolute bottom-[30px] right-3 m-0 hidden touch-device:blokk;
   }
 
   .ContentEditDrawer-widget-carousel-list-item-selectButton {
-    @apply absolute right-0 top-0 m-1 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:block before:rounded-[1px] before:bg-white hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
+    @apply absolute right-0 top-0 m-1 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:blokk before:rounded-[1px] before:bg-white hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
 
     &:checked {
       @apply border-primary-50 bg-primary-800 before:bg-primary-800 hover:border-primary-800 hover:bg-primary-800;
@@ -106,7 +106,7 @@
     }
 
     .ContentSummary-info {
-      @apply block;
+      @apply blokk;
     }
   }
 

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

@@ -631,7 +631,7 @@
 }
 
 .CIG-small > .DateStringCalendarEmbedded .DateStringCalendarEmbedded-widget {
-  @apply block border-none;
+  @apply blokk border-none;
 
   .DateStringCalendarTime,
   /* Unset the horizontal borders which appear in these pseudo-elements */

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

@@ -42,11 +42,11 @@
 }
 
 .Widget-reports th.downloadData {
-  @apply w-[68px] border-l border-gray-200 text-[0];
+  @apply w-[68px] border-s border-gray-200 text-[0];
 }
 
 .Widget-reports td.downloadLink {
-  @apply border-l border-gray-200 px-4;
+  @apply border-s border-gray-200 px-4;
 }
 
 .Widget-reports td.downloadLink a {

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

@@ -66,7 +66,7 @@ input[data-read-only='true'] ~ .ContentSelector-edit {
 
 .ContentSelector-select + .ComboInput,
 .RCS-item > .ComboInput {
-  @apply box-border max-h-[36px] !w-full min-w-0 rounded-r-none pe-2 touch-device:pe-3;
+  @apply box-border max-h-[36px] !w-full min-w-0 rounded-e-none pe-2 touch-device:pe-3;
 
   &:not([aria-expanded='true'], :focus-visible) {
     @apply border-transparent more-contrast:!border-transparent;
@@ -85,7 +85,7 @@ input[data-read-only='true'] ~ .ContentSelector-edit {
 /* Image preview not available - text only */
 input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
 input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
-  @apply relative m-0 inline-block w-full truncate rounded-r-none border-solid py-2 pe-10 ps-4 text-sm font-normal text-gray-700 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 touch-device:before:btu-icon before:absolute before:right-2 before:top-1 touch-device:before:top-0;
+  @apply relative m-0 inline-block w-full truncate rounded-e-none border-solid py-2 pe-10 ps-4 text-sm font-normal text-gray-700 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 touch-device:before:btu-icon before:absolute before:right-2 before:top-1 touch-device:before:top-0;
 
   &.is-removing {
     @apply text-error-400 line-through;
@@ -151,7 +151,7 @@ input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
   @apply flex-wrap;
 
   .ContentSelector-search {
-    @apply m-0 inline-block w-[calc(100%-6.75rem)] truncate rounded-r-none border-solid py-2 pe-9 ps-4 text-sm font-medium text-gray-700 before:!absolute before:right-1 before:top-1;
+    @apply m-0 inline-block w-[calc(100%-6.75rem)] truncate rounded-e-none border-solid py-2 pe-9 ps-4 text-sm font-medium text-gray-700 before:!absolute before:right-1 before:top-1;
   }
 
   .ContentSelector-clear {
@@ -166,7 +166,7 @@ input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
     }
 
     .ImageEditor-focusToggle {
-      @apply after:border-b-0 after:border-l-0;
+      @apply after:border-b-0 after:border-s-0;
     }
 
     .ImageEditor-open {
@@ -174,7 +174,7 @@ input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
     }
 
     .ImageEditor-editToggle {
-      @apply after:border-b-0 after:border-r-0;
+      @apply after:border-b-0 after:border-e-0;
     }
 
     .ComboInput {

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

@@ -142,7 +142,7 @@ a.is-active + .ContentSummary-info {
 
 @scope (.ContentSummary-preview) {
   & .PreviewFrame {
-    @apply block;
+    @apply blokk;
   }
 
   & .PreviewFrame-typeControlsContainer,

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

@@ -13,7 +13,7 @@
 }
 
 .ContentTemplate .LinkCarousel-item > a > img {
-  @apply relative h-[240px] w-full bg-white object-cover before:block after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-200;
+  @apply relative h-[240px] w-full bg-white object-cover before:blokk after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-200;
 }
 
 .ContentTemplate-name {

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

@@ -104,6 +104,6 @@
   @apply mt-6 px-2;
 
   span {
-    @apply block border-gray-200 py-4 text-sm text-gray-900 [&:not(:last-child)]:border-b;
+    @apply blokk border-gray-200 py-4 text-sm text-gray-900 [&:not(:last-child)]:border-b;
   }
 }

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

@@ -101,7 +101,7 @@
   @apply col-span-full break-words text-sm text-gray-900 after:text-xs after:italic after:text-gray-500 [&[data-edited]]:after:[content:'_'_attr(data-edited)];
 
   a:has(img) {
-    @apply mx-auto my-2 block max-w-fit rounded-lg rounded-tl-none border border-solid border-gray-200 bg-white px-3 py-2 hover:bg-gray-100;
+    @apply mx-auto my-2 blokk max-w-fit rounded-lg rounded-ss-none border border-solid border-gray-200 bg-white px-3 py-2 hover:bg-gray-100;
 
     img {
       @apply max-h-[50dvh] rounded-lg @lg:max-w-[75cqi];
@@ -209,7 +209,7 @@
     }
 
     .Conversation-pinned-list {
-      @apply block max-h-[300px] overflow-y-auto;
+      @apply blokk max-h-[300px] overflow-y-auto;
     }
   }
 

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

@@ -409,11 +409,11 @@ form[action*='crosslinker/dictionaries'] {
     @apply bg-gray-100;
 
     &.left {
-      @apply rounded-tl-lg;
+      @apply rounded-ss-lg;
     }
 
     &.right {
-      @apply rounded-tr-lg;
+      @apply rounded-se-lg;
     }
   }
 
@@ -468,7 +468,7 @@ form[action*='crosslinker/dictionaries'] {
         }
 
         > a {
-          @apply my-4 block text-sm font-medium;
+          @apply my-4 blokk text-sm font-medium;
         }
       }
     }

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

@@ -162,7 +162,7 @@ button.DashboardWidget-maximize {
   }
 
   .CIG-row {
-    @apply block;
+    @apply blokk;
   }
 
   .CIG-title {

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

@@ -26,7 +26,9 @@ dialog {
 
 /* Non-modal Dialogs. Think of these as layered regions (eg: global search). */
 dialog:not(:modal) {
-  @apply z-20 mt-[var(--page-header-h)] origin-top scale-y-100 opacity-100 [grid-area:stack] [transition:transform_0.25s_cubic-bezier(0.9,0,0.1,1),opacity_0.15s_cubic-bezier(0.9,0,0.1,1)] max-md:fixed max-md:bottom-0 max-md:left-0 max-md:right-0 max-md:z-[200000] max-md:h-[calc(100dvh_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)-var(--page-title-h))] md:relative md:[block-size:auto] [@starting-style]:scale-y-0 [@starting-style]:opacity-0;
+  /* [inline-size:100%]: with container-type:size this dialog otherwise
+     shrink-to-fits to 0, collapsing the popup's 100cqw (search appears empty). */
+  @apply z-20 mt-[var(--page-header-h)] origin-top scale-y-100 opacity-100 [inline-size:100%] [grid-area:stack] [transition:transform_0.25s_cubic-bezier(0.9,0,0.1,1),opacity_0.15s_cubic-bezier(0.9,0,0.1,1)] max-md:fixed max-md:bottom-0 max-md:left-0 max-md:right-0 max-md:z-[200000] max-md:h-[calc(100dvh_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)-var(--page-title-h))] md:relative md:[block-size:auto] [@starting-style]:scale-y-0 [@starting-style]:opacity-0;
 
   .ComboInput-list {
     &[data-tether-rx='l'] {
@@ -383,7 +385,7 @@ dialog:modal {
 dialog:modal {
   /*--- Guides */
   .Popup-content > .Guide-title > Guide-controls {
-    @apply relative right-[unset] top-[unset] block;
+    @apply relative right-[unset] top-[unset] blokk;
 
     .Guide-close {
       @apply hidden; /* Not needed since popups have a close button already. */

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

@@ -272,7 +272,7 @@
 }
 
 .Diff-embed {
-  @apply ms-3 border-l border-gray-300 ps-3;
+  @apply ms-3 border-s border-gray-300 ps-3;
 }
 
 .Diff-row .CIG-label {

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

@@ -42,7 +42,7 @@
 }
 
 .Dropdown-item {
-  @apply block w-full cursor-pointer bg-transparent px-4 py-2 text-left text-sm font-normal text-gray-700 no-underline focus:ring-offset-0 focus:[&_a]:ring-offset-0 hover:bg-gray-100 hover:text-gray-700 focus:rounded-none focus:bg-primary-50 focus:text-gray-700 focus:ring-0 [&_a]:font-normal [&_a]:text-gray-700 [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;
+  @apply blokk w-full cursor-pointer bg-transparent px-4 py-2 text-left text-sm font-normal text-gray-700 no-underline focus:ring-offset-0 focus:[&_a]:ring-offset-0 hover:bg-gray-100 hover:text-gray-700 focus:rounded-none focus:bg-primary-50 focus:text-gray-700 focus:ring-0 [&_a]:font-normal [&_a]:text-gray-700 [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;
 
   &[disabled] {
     @apply pointer-events-none text-gray-300 [&_a]:text-gray-300;
@@ -51,7 +51,7 @@
 
 /* Make sure the click target of inline elements take up the whole width of the dropdown item. */
 .Dropdown-item > :where(span, a) {
-  @apply block;
+  @apply blokk;
 }
 
 .Dropdown-item-selected {

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

@@ -102,7 +102,7 @@ html::view-transition-group(prosemirror-enhancement) {
 .ProseMirror-moveEnhancementTarget {
   --move-button-offset: 3px; /* Accounts for the difference in size between the move button and the line spacing */
 
-  @apply absolute left-0 right-0 mx-auto -mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] flex h-[calc(var(--lineHeight-m)-2px)] w-fit cursor-pointer items-center justify-center gap-1 rounded-2xl bg-primary-50 py-0.5 pe-2 ps-1.5 text-xs font-medium text-primary-700 before:btu-icon before:btu-icon-arrow-down-up before:font-semibold before:btu-icon-xs after:absolute after:-z-[1] after:block after:w-[calc(100cqw-2rem)] after:border-b-[1.5px] after:border-dashed after:border-primary-500 first:-mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] hover:bg-primary-600 hover:text-white hover:after:border-solid hover:after:border-primary-700;
+  @apply absolute left-0 right-0 mx-auto -mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] flex h-[calc(var(--lineHeight-m)-2px)] w-fit cursor-pointer items-center justify-center gap-1 rounded-2xl bg-primary-50 py-0.5 pe-2 ps-1.5 text-xs font-medium text-primary-700 before:btu-icon before:btu-icon-arrow-down-up before:font-semibold before:btu-icon-xs after:absolute after:-z-[1] after:blokk after:w-[calc(100cqw-2rem)] after:border-b-[1.5px] after:border-dashed after:border-primary-500 first:-mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] hover:bg-primary-600 hover:text-white hover:after:border-solid hover:after:border-primary-700;
 
   &.is-cancel {
     @apply bg-gray-50 text-gray-700 before:btu-icon-x after:border-gray-500 hover:bg-gray-700 hover:text-white hover:after:border-gray-700;

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

@@ -46,7 +46,7 @@
   }
 
   a {
-    @apply block text-sm font-semibold text-gray-500 no-underline;
+    @apply blokk text-sm font-semibold text-gray-500 no-underline;
   }
 }
 
@@ -112,7 +112,7 @@
       }
 
       .RPB {
-        @apply block;
+        @apply blokk;
       }
     }
   }

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

@@ -38,7 +38,7 @@ btu-form-filter.is-open {
   }
 
   > .Tab {
-    @apply block;
+    @apply blokk;
   }
 }
 
@@ -56,7 +56,7 @@ btu-form-filter.is-open {
 
 .CIG.is-filtering .is-filterResult,
 .CIG.is-filtering :has(.is-filterResult):not([hidden]) {
-  @apply !block;
+  @apply !blokk;
 
   &.CIG-row[data-tab]:not(.has-title),
   &.Tab[data-tab],
@@ -89,5 +89,5 @@ btu-form-filter.is-open {
 }
 
 .CIG.is-loading {
-  @apply visible block min-h-[80vh] before:btu-loader before:absolute before:left-[50%] before:top-[50%] before:z-10 before:size-[--loader-size] before:translate-x-[-50%] before:translate-y-[-50%];
+  @apply visible blokk min-h-[80vh] before:btu-loader before:absolute before:left-[50%] before:top-[50%] before:z-10 before:size-[--loader-size] before:translate-x-[-50%] before:translate-y-[-50%];
 }

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

@@ -2,7 +2,7 @@
   @apply absolute inset-0 z-40 grid h-screen w-dvw grid-rows-[auto_1fr] p-0 transition;
 
   &.hide {
-    @apply !block scale-0 opacity-0;
+    @apply !blokk scale-0 opacity-0;
   }
 
   .ProseMirror-fullscreen-container-header {
@@ -33,7 +33,7 @@
     }
 
     .ProseMirror-comments {
-      @apply mr-4 lg:block;
+      @apply mr-4 lg:blokk;
     }
   }
 
@@ -89,11 +89,11 @@
 }
 
 .ProseMirror-comment {
-  @apply border-b border-l-2 border-l-transparent p-4;
+  @apply border-b border-s-2 border-s-transparent p-4;
 }
 
 .ProseMirror-comment.is-active {
-  @apply border-l-primary-500 data-[type=del]:border-l-error-500 data-[type=ins]:border-l-success-500;
+  @apply border-s-primary-500 data-[type=del]:border-s-error-500 data-[type=ins]:border-s-success-500;
 }
 
 .ProseMirror-commentUser {

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

@@ -3,7 +3,7 @@
   --guide-tab-cluster-h: calc(theme(padding.6) + theme(iconSize.md));
   --guide-edit-icon-size: calc(theme(padding.4) + theme(iconSize.md));
 
-  @apply grid h-full grid-rows-[auto_1fr] border-r border-r-gray-200;
+  @apply grid h-full grid-rows-[auto_1fr] border-e border-e-gray-200;
 
   > .Guide-content {
     @apply overflow-auto;
@@ -80,10 +80,10 @@
 }
 
 .Guide-image {
-  @apply my-4 block;
+  @apply my-4 blokk;
 
   > img {
-    @apply block;
+    @apply blokk;
   }
 }
 
@@ -151,7 +151,7 @@
 
 .frame[name='guideField'] {
   .Guide {
-    @apply border-l-0;
+    @apply border-s-0;
   }
 
   .Guide-field {
@@ -166,7 +166,7 @@
 /* Make guide icon appear only on applicable popups */
 .Popup {
   &[data-subject-type='true'] a.CIG-guide {
-    @apply block;
+    @apply blokk;
   }
 
   a.CIG-guide {
@@ -184,7 +184,7 @@
   }
 
   .Guide {
-    @apply border-r-0;
+    @apply border-e-0;
   }
 
   .Guide-title {