@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiSideMenu/UiSideMenuItemContent.vue

@@ -2,6 +2,7 @@
 import type { SideMenuItemProps } from './types'
 import { computed, useSlots } from 'vue'
 import { useForwardExpose } from 'reka-ui'
+import UiBadge from '../UiBadge/UiBadge.vue'
 
 // Visual body of a side menu item (icon, label, badge, interactive overlay).
 // Extracted from UiSideMenuItem so the latter can optionally wrap this in a
@@ -41,12 +42,17 @@ const props = withDefaults(defineProps<SideMenuItemProps & {
   alwaysShowLabel: false,
 })
 
-// Normalise the badge into either a display string (count pill) or null (dot)
-// when shown. `showBadge` gates rendering so 0/false stay hidden.
 const showBadge = computed(() => props.badge === true || (typeof props.badge === 'number' && props.badge > 0))
-const badgeCount = computed(() => {
-  if (typeof props.badge !== 'number') return null
-  return props.badge > 99 ? '99+' : String(props.badge)
+const badgeCount = computed(() => typeof props.badge === 'number' ? props.badge : undefined)
+
+// An icon sits inside the item's 10px padding, whereas a 40px avatar fills the
+// box on its own: the avatar variant needs offsets 10px smaller to land the
+// badge on the same corner of the item.
+const badgePositionClass = computed(() => {
+  if (badgeCount.value !== undefined) {
+    return hasAvatarSlot.value ? '-top-1 -right-1' : '-top-3.5 -right-3.5'
+  }
+  return hasAvatarSlot.value ? 'top-0 right-0' : '-top-2.5 -right-2.5'
 })
 
 const textAlignClass = computed(() => {
@@ -88,7 +94,7 @@ const textAlignClass = computed(() => {
     <button
       v-else
       type="button"
-      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-actions-primary-idle rounded-xl"
+      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150 cursor-pointer focus:outline-none focus-visible:focus-ring rounded-xl"
       :class="{ 'pointer-events-none': insideInteractive }"
       :tabindex="insideInteractive ? -1 : undefined"
       :aria-hidden="insideInteractive ? 'true' : undefined"
@@ -124,18 +130,16 @@ const textAlignClass = computed(() => {
           ]"
           aria-hidden="true"
         />
-        <!-- Notification badge, pushed out toward the button's top-right
-             corner (past the icon's p-3 padding). -->
-        <div
+        <!-- Notification badge, pushed out toward the item's top-right corner. -->
+        <UiBadge
           v-if="showBadge"
-          class="absolute z-30 pointer-events-none flex items-center justify-center bg-surface-danger-bg-alpha text-text-neutral-invert-base rounded-2xl"
-          :class="badgeCount
-            ? '-top-3.5 -right-3.5 min-w-4 px-1 py-0.5 text-content-badges-bold-md'
-            : '-top-2.5 -right-2.5 w-2 h-2'"
+          :count="badgeCount"
+          color="danger"
+          variant="strong"
+          class="absolute z-30 pointer-events-none"
+          :class="badgePositionClass"
           aria-hidden="true"
-        >
-          <span v-if="badgeCount">{{ badgeCount }}</span>
-        </div>
+        />
       </div>
       <div
         class="pl-4 flex md:hidden text-content-text-md-regular font-bold truncate w-full items-center md:justify-center md:text-center"

package/src/components/UiStepper/UiStepper.vue

@@ -18,23 +18,10 @@ provide('stepperOrientation', toRef(props, 'orientation'))
   <StepperRoot
     v-bind="{ ...forwarded, ...$attrs }"
     class="ui-stepper"
-    :class="{
-      'ui-stepper--horizontal': isHorizontal,
-      'ui-stepper--vertical': !isHorizontal,
-    }"
+    :class="isHorizontal
+      ? 'ui-stepper--horizontal flex items-start gap-8'
+      : 'ui-stepper--vertical [&>*:not(:last-child)]:mb-2'"
   >
     <slot />
   </StepperRoot>
 </template>
-
-<style>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.ui-stepper--horizontal {
-  @apply flex items-start gap-8;
-}
-
-.ui-stepper--vertical > *:not(:last-child) {
-  @apply mb-2;
-}
-</style>

package/src/components/UiStepper/UiStepperDescription.vue

@@ -8,20 +8,8 @@ defineProps<StepperDescriptionProps>()
 <template>
   <StepperDescription
     v-bind="$attrs"
-    :class="[
-      'ui-stepper-description',
-      'transition-all duration-200',
-    ]"
+    class="ui-stepper-description block max-w-60 truncate text-content-text-md-regular text-text-neutral-tertiary transition-all duration-200"
   >
     <slot />
   </StepperDescription>
 </template>
-
-<style scoped>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.ui-stepper-description {
-  @apply  max-w-60 truncate;
-  @apply text-content-text-md-regular text-text-neutral-tertiary block;
-}
-</style>

package/src/components/UiStepper/UiStepperIndicator.vue

@@ -25,66 +25,29 @@ const iconSizeClass = useIconSize(() => size)
 <template>
   <StepperIndicator
     v-bind="$attrs"
-    class="stepper-indicator"
+    class="stepper-indicator flex items-center justify-center shrink-0 rounded-full font-semibold transition-all duration-200 bg-surface-neutral-alpha-200 text-text-neutral-base group-data-[state=active]/step:bg-surface-primary-bg-alpha group-data-[state=active]/step:text-text-neutral-invert-base"
     :class="sizeClasses[size]"
   >
     <span
       v-if="icon"
-      class="stepper-custom-icon"
-      :class="[iconSizeClass, icon]"
+      class="stepper-custom-icon block"
+      :class="[iconSizeClass, icon, { 'group-data-[state=completed]/step:hidden': showCheckmark }]"
+      data-testid="ui-stepper-indicator-icon"
     />
 
     <span
       v-if="showCheckmark"
-      class="stepper-checkmark i-ph-check"
+      class="stepper-checkmark i-ph-check hidden group-data-[state=completed]/step:block"
       :class="iconSizeClass"
+      data-testid="ui-stepper-indicator-checkmark"
     />
 
-    <span class="stepper-number">
+    <span
+      class="stepper-number"
+      :class="{ hidden: icon, 'group-data-[state=completed]/step:hidden': showCheckmark }"
+      data-testid="ui-stepper-indicator-number"
+    >
       <slot />
     </span>
   </StepperIndicator>
 </template>
-
-<style>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.stepper-indicator {
-  @apply flex items-center justify-center shrink-0;
-  @apply rounded-full;
-  @apply transition-all duration-200 font-semibold;
-  @apply bg-surface-neutral-alpha-200 text-text-neutral-base;
-}
-
-[data-state="active"] .stepper-indicator {
-  @apply bg-surface-primary-bg-alpha text-text-neutral-invert-base;
-}
-
-.stepper-custom-icon {
-  @apply block;
-}
-
-[data-state="completed"] .stepper-custom-icon {
-  @apply hidden;
-}
-
-.stepper-custom-icon ~ .stepper-number {
-  @apply hidden;
-}
-
-[data-state="completed"] .stepper-custom-icon ~ .stepper-number {
-  @apply block;
-}
-
-.stepper-checkmark {
-  @apply hidden;
-}
-
-[data-state="completed"] .stepper-checkmark {
-  @apply block;
-}
-
-[data-state="completed"] .stepper-number {
-  @apply hidden;
-}
-</style>

package/src/components/UiStepper/UiStepperItem.vue

@@ -16,15 +16,8 @@ withDefaults(defineProps<UiStepperItemProps>(), {
     v-bind="$attrs"
     :step="step"
     :disabled="disabled"
-    class="ui-stepper-item"
+    class="ui-stepper-item group/step relative"
   >
     <slot />
   </StepperItem>
 </template>
-
-<style>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-.ui-stepper-item {
-  @apply relative;
-}
-</style>

package/src/components/UiStepper/UiStepperSeparator.vue

@@ -28,22 +28,11 @@ const orientation = computed(() => props.orientation || unref(injectedOrientatio
   >
     <StepperSeparator
       v-bind="$attrs"
-      :class="[
-        'ui-stepper-separator',
-        'transition-colors duration-200',
-        {
-          'h-px w-full min-w-8': orientation === 'horizontal',
-          'w-px min-h-8': orientation === 'vertical',
-        }
-      ]"
+      class="ui-stepper-separator bg-surface-neutral-alpha-400 transition-colors duration-200"
+      :class="{
+        'h-px w-full min-w-8': orientation === 'horizontal',
+        'w-px min-h-8': orientation === 'vertical',
+      }"
     />
   </div>
 </template>
-
-<style scoped>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.ui-stepper-separator {
-  @apply bg-surface-neutral-alpha-400;
-}
-</style>

package/src/components/UiStepper/UiStepperTitle.vue

@@ -8,17 +8,8 @@ defineProps<StepperTitleProps>()
 <template>
   <StepperTitle
     v-bind="$attrs"
-    :class="[
-      'ui-stepper-title',
-    ]"
+    class="ui-stepper-title text-content-text-lg-bold text-text-neutral-secondary"
   >
     <slot />
   </StepperTitle>
 </template>
-
-<style scoped>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-.ui-stepper-title {
-  @apply text-content-text-lg-bold text-content-text-lg-bold text-text-neutral-secondary;
-}
-</style>

package/src/components/UiSwitch/UiSwitch.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
 import { Label, SwitchRoot, SwitchThumb, useId } from 'reka-ui'
 import type { SwitchColor, SwitchPosition, SwitchSize } from './types'
 import UiTooltip from '../UiTooltip/UiTooltip.vue'
+import { CHOICE_ROW_KEY } from '../UiChoice/types'
 
 interface UiSwitchProps {
   /**
@@ -71,6 +72,10 @@ interface UiSwitchProps {
    * Switch id attribute
    */
   id?: string
+  /**
+   * Accessible name for the switch, for switches rendered without a label
+   */
+  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<UiSwitchProps>(), {
@@ -88,6 +93,7 @@ const props = withDefaults(defineProps<UiSwitchProps>(), {
   fullWidth: false,
   name: undefined,
   id: undefined,
+  ariaLabel: undefined,
 })
 
 const emit = defineEmits<{
@@ -100,12 +106,16 @@ const generatedId = useId()
 const inputId = computed(() => props.id ?? generatedId)
 
 const isChecked = computed(() => props.modelValue)
+const inChoiceRow = inject(CHOICE_ROW_KEY, false)
 
 // Design palette: primary | warning, with error mapping onto the danger tokens
 const palette = computed(() => props.error ? 'danger' : props.color === 'warning' ? 'warning' : 'primary')
 
 const descriptionId = computed(() => props.description ? `${inputId.value}-description` : undefined)
 
+// Inside UiChoice a disabled switch greys out instead of fading with the row
+const greyedOut = computed(() => inChoiceRow && props.disabled && !props.error)
+
 const trackClasses = computed(() => {
   const baseClasses = [
     'relative shrink-0 inline-flex items-center rounded-full',
@@ -117,9 +127,11 @@ const trackClasses = computed(() => {
   // sm: 40x24 track / 16px thumb, xs: 32x20 track / 12px thumb
   baseClasses.push(props.size === 'xs' ? 'h-5 w-8' : 'h-6 w-10')
 
-  if (isChecked.value) {
+  if (greyedOut.value) {
+    baseClasses.push('border-transparent', isChecked.value ? 'bg-surface-neutral-alpha-400' : 'bg-surface-neutral-alpha-200')
+  } else if (isChecked.value) {
     const checkedClasses = {
-      primary: 'bg-actions-primary-idle-alpha-strong border-borders-primary-default',
+      primary: 'bg-control-switch-on border-transparent',
       warning: 'bg-actions-warning-idle-alpha-strong border-actions-warning-idle-alpha-strong',
       danger: 'bg-actions-danger-idle-alpha-strong border-actions-danger-idle-alpha-strong',
     }
@@ -135,11 +147,11 @@ const trackClasses = computed(() => {
     }
   } else {
     const uncheckedBorderClasses = {
-      primary: 'border-borders-neutral-strong',
+      primary: 'border-control-off-border',
       warning: 'border-borders-warning-strong',
-      danger: 'border-borders-danger-strong',
+      danger: 'border-control-error-border',
     }
-    baseClasses.push('bg-surface-neutral-bg-main', uncheckedBorderClasses[palette.value])
+    baseClasses.push('bg-control-off', uncheckedBorderClasses[palette.value])
     if (!props.disabled) {
       // Border thickens on hover; padding shrinks in step so the thumb
       // keeps its exact position and travel distance
@@ -147,16 +159,8 @@ const trackClasses = computed(() => {
     }
   }
 
-  // Focus ring
-  if (props.error) {
-    baseClasses.push('focus-visible:ring focus-visible:ring-borders-danger-strong')
-  } else if (isChecked.value) {
-    baseClasses.push(props.color === 'warning'
-      ? 'focus-visible:ring focus-visible:ring-borders-warning-strong'
-      : 'focus-visible:ring focus-visible:ring-borders-primary-strong')
-  } else {
-    baseClasses.push('focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring')
-  }
+  // The row draws the focus ring, or the choicebox around it
+  baseClasses.push('focus-indicator-none')
 
   return baseClasses
 })
@@ -181,35 +185,45 @@ const thumbClasses = computed(() => {
 
   baseClasses.push(isChecked.value
     ? 'bg-actions-neutral-invert-idle'
-    : 'bg-actions-neutral-idle-alpha-strong')
+    : 'bg-control-off-knob')
 
   return baseClasses
 })
 
 const innerWrapperClasses = computed(() => {
-  const classes = ['group relative flex items-center gap-2 rounded-md']
+  const classes = ['group relative flex items-center rounded-field-md', inChoiceRow && props.switchPosition === 'right' ? 'gap-6' : 'gap-2']
 
   if (props.switchPosition === 'right') {
     classes.push('flex-row-reverse')
   }
 
   if (props.disabled) {
-    classes.push('opacity-50 cursor-not-allowed')
+    classes.push(inChoiceRow ? 'cursor-not-allowed' : 'opacity-50 cursor-not-allowed')
   } else {
     classes.push('cursor-pointer')
   }
 
-  if (props.showBg) {
-    classes.push('p-2 shadow-[0px_1px_2px_0px_var(--color-shadow-neutral-100)]')
-    classes.push(props.error ? 'bg-actions-danger-idle-alpha-light' : 'bg-actions-neutral-idle-alpha-light')
+  if (inChoiceRow) {
+    return classes
   }
 
+  if (!props.showBg) {
+    classes.push('isolate before:absolute before:-inset-x-3 before:-inset-y-1.5 before:-z-10 before:rounded-field-md before:pointer-events-none has-[[role=switch]:focus-visible]:before:focus-ring')
+    return classes
+  }
+
+  classes.push('p-2 shadow-[0px_1px_2px_0px_var(--color-shadow-neutral-100)] has-[[role=switch]:focus-visible]:focus-ring')
+  classes.push(props.error ? 'bg-actions-danger-idle-alpha-light' : 'bg-actions-neutral-idle-alpha-light')
+
   return classes
 })
 
 const labelClasses = computed(() => ({
+  'text-content-text-md-medium': inChoiceRow,
+  'text-content-text-md-regular': !inChoiceRow,
   'text-text-danger-base': props.error,
-  'text-text-neutral-base': !props.error,
+  'text-text-neutral-base': !props.error && !greyedOut.value,
+  'text-text-neutral-tertiary': greyedOut.value,
   'cursor-not-allowed': props.disabled,
   'cursor-pointer': !props.disabled,
 }))
@@ -221,7 +235,8 @@ const textAlignsToSwitch = computed(() => props.switchPosition === 'right' && !p
 const descriptionClasses = computed(() => ({
   'text-right': textAlignsToSwitch.value,
   'text-text-danger-tertiary': props.error,
-  'text-text-neutral-tertiary': !props.error,
+  'text-text-neutral-secondary': !props.error && !greyedOut.value,
+  'text-text-neutral-tertiary': greyedOut.value,
   'cursor-not-allowed': props.disabled,
   'cursor-pointer': !props.disabled,
 }))
@@ -276,6 +291,7 @@ defineExpose({
         :disabled="disabled"
         :name="name"
         :class="trackClasses"
+        :aria-label="ariaLabel"
         :aria-invalid="error || undefined"
         :aria-describedby="descriptionId"
         @update:model-value="emit('update:modelValue', $event)"
@@ -303,7 +319,7 @@ defineExpose({
       <div
         v-if="label || description || $slots.label"
         class="flex flex-col min-w-0 flex-1"
-        :class="{ 'items-end': textAlignsToSwitch }"
+        :class="{ 'items-end': textAlignsToSwitch, 'gap-1': inChoiceRow }"
       >
         <div
           class="flex items-center gap-2"
@@ -311,7 +327,6 @@ defineExpose({
         >
           <Label
             :for="inputId"
-            class="text-content-text-md-medium"
             :class="labelClasses"
           >
             <slot name="label">
@@ -327,6 +342,7 @@ defineExpose({
             <!-- stays neutral even in error state, per design -->
             <div
               class="flex items-center justify-center size-4 cursor-help shrink-0 text-text-neutral-tertiary"
+              data-testid="ui-switch-label-info"
               @click.stop
             >
               <span class="i-ph-info-fill size-4" />
@@ -337,7 +353,7 @@ defineExpose({
         <span
           v-if="description"
           :id="descriptionId"
-          class="text-content-text-md-medium"
+          class="text-content-text-md-regular"
           :class="descriptionClasses"
         >
           {{ description }}
@@ -347,7 +363,7 @@ defineExpose({
       <!-- Background hover overlay -->
       <div
         v-if="showBg && !disabled"
-        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-md"
+        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-[inherit]"
         :class="{
           'bg-actions-danger-hover-overlay': error,
           'bg-actions-primary-hover-overlay': isChecked && !error,

package/src/components/UiTable/UiTable.vue

@@ -1,24 +1,114 @@
 <script setup lang="ts">
 import { provide, toRef } from 'vue'
+import { UI_TABLE_SIZE_KEY, type UiTableSize } from './context'
 
 export interface UiTableProps {
-  variant?: 'condensed' | 'large'
-  hoverEffect?: boolean
+  /**
+   * Row heights: `md` = 40px header / 48px rows, `lg` = 48px header / 64px rows.
+   * @default 'md'
+   */
+  size?: UiTableSize
+  /**
+   * Alternating row backgrounds. Preferred over row dividers for readability.
+   * @default true
+   */
+  zebra?: boolean
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
-  variant: 'condensed',
-  hoverEffect: false,
+  size: 'md',
+  zebra: true,
 })
 
-provide('tableVariant', toRef(props, 'variant'))
-provide('hoverEffect', toRef(props, 'hoverEffect'))
+provide(UI_TABLE_SIZE_KEY, toRef(props, 'size'))
 </script>
 
 <template>
-  <div class="w-full">
-    <table class="w-full border-separate border-spacing-0">
+  <div
+    class="ui-table relative flow-root w-fit min-w-full overflow-y-clip"
+    :class="{ 'ui-table--zebra': zebra }"
+  >
+    <table class="-my-0.5 w-full border-separate border-spacing-x-0 border-spacing-y-0.5">
       <slot />
     </table>
   </div>
 </template>
+
+<style scoped>
+/*
+ * Row backgrounds live here rather than on the cells so the zebra stripe,
+ * hover and selected overlays stack the way the Figma spec layers them:
+ * zebra is a background-color, state overlays are background-image
+ * gradients painted on top of it.
+ */
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr:nth-child(even of :not([data-zebra-skip])) > td),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr:nth-child(odd of :not([data-zebra-skip])) > td) {
+  background-color: var(--color-surface-neutral-alpha-100);
+}
+
+.ui-table :deep(tbody > tr[data-clickable]:hover > td),
+.ui-table :deep(tbody > tr[data-clickable]:focus-visible > td),
+.ui-table :deep(tbody > tr[data-linked]:hover > td),
+.ui-table :deep(tbody > tr[data-linked]:focus-within > td),
+.ui-table :deep(tbody > tr:has(> .ui-table__actions-cell):hover > td) {
+  background-image: linear-gradient(var(--color-actions-primary-hover-overlay), var(--color-actions-primary-hover-overlay));
+}
+
+.ui-table :deep(tbody > tr[data-selected] > td),
+.ui-table :deep(tbody > tr[data-selected]:hover > td) {
+  background-image: linear-gradient(var(--color-actions-primary-active-overlay), var(--color-actions-primary-active-overlay));
+}
+
+.ui-table :deep(tbody > tr > td:first-child) {
+  border-top-left-radius: var(--radius-table-row);
+  border-bottom-left-radius: var(--radius-table-row);
+}
+
+/*
+ * A zero-width trailing cell cannot show the row end, so the cell before it
+ * rounds it. A menu column is zero-width when no row has a menu.
+ */
+.ui-table :deep(tbody > tr > td:last-child),
+.ui-table :deep(tbody > tr > td:has(+ .ui-table__zero-width-cell)),
+.ui-table :deep(table:not(:has(.ui-table__menu-cell)) > tbody > tr > td:has(+ .ui-table__empty-menu-cell)) {
+  border-top-right-radius: var(--radius-table-row);
+  border-bottom-right-radius: var(--radius-table-row);
+}
+
+/*
+ * The trailing actions backdrop (default variant only) masks the cells it
+ * overlays, so it mirrors the effective row background: opaque base plus
+ * the same stacked overlays. The floating variant carries no backdrop —
+ * its content (e.g. a UiActionBar) brings its own surface.
+ */
+.ui-table :deep(.ui-table__actions--backdrop) {
+  background-color: var(--color-surface-neutral-bg-main);
+}
+
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr:nth-child(even of :not([data-zebra-skip])) .ui-table__actions--backdrop),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr:nth-child(odd of :not([data-zebra-skip])) .ui-table__actions--backdrop) {
+  background-image: linear-gradient(var(--color-surface-neutral-alpha-100), var(--color-surface-neutral-alpha-100));
+}
+
+.ui-table :deep(tbody > tr:hover .ui-table__actions--backdrop) {
+  background-image: linear-gradient(var(--color-actions-primary-hover-overlay), var(--color-actions-primary-hover-overlay));
+}
+
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr:nth-child(even of :not([data-zebra-skip])):hover .ui-table__actions--backdrop),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr:nth-child(odd of :not([data-zebra-skip])):hover .ui-table__actions--backdrop) {
+  background-image:
+    linear-gradient(var(--color-actions-primary-hover-overlay), var(--color-actions-primary-hover-overlay)),
+    linear-gradient(var(--color-surface-neutral-alpha-100), var(--color-surface-neutral-alpha-100));
+}
+
+.ui-table :deep(tbody > tr[data-selected]:hover .ui-table__actions--backdrop) {
+  background-image: linear-gradient(var(--color-actions-primary-active-overlay), var(--color-actions-primary-active-overlay));
+}
+
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr[data-selected]:nth-child(even of :not([data-zebra-skip])):hover .ui-table__actions--backdrop),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr[data-selected]:nth-child(odd of :not([data-zebra-skip])):hover .ui-table__actions--backdrop) {
+  background-image:
+    linear-gradient(var(--color-actions-primary-active-overlay), var(--color-actions-primary-active-overlay)),
+    linear-gradient(var(--color-surface-neutral-alpha-100), var(--color-surface-neutral-alpha-100));
+}
+</style>