@brightspot/ui 5.0.2 → 5.0.3-css-bloat.1

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

@@ -116,8 +116,6 @@
 .RCS-item,
 .RCIG-item,
 .Sortable-item,
-.CIG.is-readOnly,
-.CIG-row.is-readOnly,
 .LinkCarousel-item:hover,
 .LinkCarousel-item:focus-within,
 .LinkTable-main:focus-within,
@@ -142,7 +140,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/Conversation.ts

@@ -456,8 +456,7 @@ onFind(
 onFind(
   '.Popup[name="conversation-edit-post"] .icon-action-delete',
   (post: HTMLAnchorElement) => {
-    post.addEventListener('click', async (evt) => {
-      evt.preventDefault()
+    post.addEventListener('click', async () => {
       const headers = new Headers()
       const cookie = Cookies.get('bsp.csrf')
 
@@ -475,65 +474,22 @@ onFind(
       if (postId) body.append('postId', postId)
       if (overlayId) body.append('overlayId', overlayId)
 
-      const response = await fetch(
-        window.CONTEXT_PATH + 'conversation/delete-post',
-        {
-          method: 'post',
-          credentials: 'include',
-          headers,
-          body,
-        },
-      )
-
-      if (!response.ok) {
-        console.error(
-          `Failed to delete post: ${response.status} ${response.statusText}`,
-        )
-        return
-      }
-
-      // Cleanup — close the edit popup, and also close any conversation-reply
-      // popup it was opened from (the source traces back to the opener element).
-      const editPopup = post.closest('.Popup')
-      const replyPopup = editPopup
-        ? (
-            ($(editPopup) as any).popup('source')[0] as HTMLElement
-          )?.closest<HTMLElement>('.Popup[name^="conversation-reply"]')
-        : null
-
-      if (postId) {
-        document.getElementById(postId)?.remove()
-      }
+      await fetch(window.CONTEXT_PATH + 'conversation/delete-post', {
+        method: 'post',
+        credentials: 'include',
+        headers,
+        body,
+      })
 
-      if (editPopup) {
-        ;($(editPopup) as any).popup('close')
-      }
+      const popup = post.closest('.Popup')
 
-      if (replyPopup) {
-        ;($(replyPopup) as any).popup('close')
+      if (popup) {
+        ;($(popup) as any).popup('close')
       }
     })
   },
 )
 
-// When the main post in a conversation-reply dialog is deleted, Posts.java emits
-// a close-popup-marker — close the surrounding popup when we see it.
-onFind(
-  '.close-popup-marker[data-close-popup="true"]',
-  (marker: HTMLElement) => {
-    const popup = marker.closest<HTMLElement>(
-      '.Popup[name^="conversation-reply"]',
-    )
-    if (popup) {
-      const parentId = marker.dataset.parentId
-      if (parentId) {
-        document.getElementById(parentId)?.remove()
-      }
-      ;($(popup) as any).popup('close')
-    }
-  },
-)
-
 onFind('.Conversation-pinned-container', (container) => {
   if (!(container instanceof HTMLElement)) return
   const pinnedHeader = find(container, 'h1')

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 {

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;