@askrjs/themes 0.2.1 → 0.2.3

package/src/components/catalog.tsx

@@ -73,12 +73,13 @@ function buttonPart(props: CatalogComponentProps, slot: string, className?: stri
 }
 
 type LegacySpace = BlockSpace | "none" | "1" | "2" | "3" | "4" | "5" | "6" | "8";
+type LegacyWrap = boolean | "wrap" | "nowrap";
 
 type LegacyLayoutConveniences = {
   gap?: BlockResponsiveValue<LegacySpace>;
   p?: BlockResponsiveValue<LegacySpace>;
   padding?: BlockResponsiveValue<LegacySpace>;
-  wrap?: BlockResponsiveValue<boolean>;
+  wrap?: BlockResponsiveValue<LegacyWrap>;
 };
 
 type LegacyStructuralProps = Partial<
@@ -162,8 +163,49 @@ function normalizeLegacyResponsiveSpace(
   return normalizeLegacySpace(value);
 }
 
-function layoutAlias(props: LegacyLayoutProps, defaults: Record<string, unknown>): JSX.Element {
-  const { gap, p, padding, ...rest } = props as LegacyLayoutProps & Record<string, unknown>;
+function normalizeLegacyWrap(value: LegacyWrap): boolean {
+  if (value === "wrap") return true;
+  if (value === "nowrap") return false;
+  return value;
+}
+
+function normalizeLegacyResponsiveWrap(
+  value: BlockResponsiveValue<LegacyWrap> | undefined,
+): BlockResponsiveValue<boolean> | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([breakpoint, wrap]) => [
+        breakpoint,
+        normalizeLegacyWrap(wrap as LegacyWrap),
+      ]),
+    );
+  }
+  return normalizeLegacyWrap(value);
+}
+
+const warnedLegacyLayouts = new Set<string>();
+
+function warnDeprecatedLayout(component: string, replacement: string) {
+  const metaEnvironment = (import.meta as ImportMeta & { env?: { DEV?: boolean } }).env;
+  const nodeEnvironment = (
+    globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } }
+  ).process?.env?.NODE_ENV;
+
+  if (metaEnvironment?.DEV !== true && nodeEnvironment !== "development") return;
+  if (warnedLegacyLayouts.has(component)) return;
+  warnedLegacyLayouts.add(component);
+  console.warn(`[askr-themes] ${component} is deprecated. ${replacement}`);
+}
+
+function layoutAlias(
+  component: string,
+  replacement: string,
+  props: LegacyLayoutProps,
+  defaults: Record<string, unknown>,
+): JSX.Element {
+  warnDeprecatedLayout(component, replacement);
+  const { gap, p, padding, wrap, ...rest } = props as LegacyLayoutProps & Record<string, unknown>;
   const BlockComponent = Block as (blockProps: Record<string, unknown>) => JSX.Element;
 
   return (
@@ -172,6 +214,7 @@ function layoutAlias(props: LegacyLayoutProps, defaults: Record<string, unknown>
       {...rest}
       gap={normalizeLegacyResponsiveSpace(gap)}
       padding={normalizeLegacyResponsiveSpace(padding ?? p)}
+      wrap={normalizeLegacyResponsiveWrap(wrap)}
     />
   );
 }
@@ -179,19 +222,19 @@ function layoutAlias(props: LegacyLayoutProps, defaults: Record<string, unknown>
 /** @deprecated Use {@link Block} directly. */
 export function Box(props: LegacyLayoutProps): JSX.Element;
 export function Box(props: LegacyLayoutProps): JSX.Element {
-  return layoutAlias(props, {});
+  return layoutAlias("Box", "Use Block directly.", props, {});
 }
 
 /** @deprecated Use `<Block direction="column">`. */
 export function Stack(props: LegacyLayoutProps): JSX.Element;
 export function Stack(props: LegacyLayoutProps): JSX.Element {
-  return layoutAlias(props, { direction: "column" });
+  return layoutAlias("Stack", 'Use <Block direction="column">.', props, { direction: "column" });
 }
 
 /** @deprecated Use `<Block direction="row">`. */
 export function Inline(props: LegacyLayoutProps): JSX.Element;
 export function Inline(props: LegacyLayoutProps): JSX.Element {
-  return layoutAlias(props, { direction: "row" });
+  return layoutAlias("Inline", 'Use <Block direction="row">.', props, { direction: "row" });
 }
 
 /** @deprecated Compose semantic {@link Block} primitives instead. */
@@ -199,19 +242,22 @@ export function Shell(props: LegacyLayoutProps & { variant?: string }): JSX.Elem
 export function Shell(props: LegacyLayoutProps & { variant?: string }): JSX.Element {
   const { variant: _variant, ...rest } = props;
   void _variant;
-  return layoutAlias(rest, {});
+  return layoutAlias("Shell", "Compose semantic Block primitives instead.", rest, {});
 }
 
 /** @deprecated Use `<Block as="nav">`. */
 export function ShellNav(props: LegacyLayoutProps): JSX.Element;
 export function ShellNav(props: LegacyLayoutProps): JSX.Element {
-  return layoutAlias(props, {});
+  return layoutAlias("ShellNav", 'Use <Block as="nav">.', props, {});
 }
 
 /** @deprecated Use `<Block as="main" grow>`. */
 export function ShellMain(props: LegacyLayoutProps): JSX.Element;
 export function ShellMain(props: LegacyLayoutProps): JSX.Element {
-  return layoutAlias(props, { as: "main", grow: true });
+  return layoutAlias("ShellMain", 'Use <Block as="main" grow>.', props, {
+    as: "main",
+    grow: true,
+  });
 }
 
 /** Renders the `alert-title` part of the shadcn-compatible catalog primitives. */
@@ -230,7 +276,14 @@ export function AlertDescription(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `breadcrumb` part of the shadcn-compatible catalog primitives. */
 export function Breadcrumb(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "breadcrumb", element: "nav", role: "navigation" });
+  return catalogPart(
+    { "aria-label": "Breadcrumb", ...props },
+    {
+      slot: "breadcrumb",
+      element: "nav",
+      role: "navigation",
+    },
+  );
 }
 
 /** Renders the `breadcrumb-list` part of the shadcn-compatible catalog primitives. */
@@ -325,12 +378,12 @@ export function CalendarNextButton(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `calendar-grid` part of the shadcn-compatible catalog primitives. */
 export function CalendarGrid(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-grid", role: "grid" });
+  return catalogPart(props, { slot: "calendar-grid" });
 }
 
 /** Renders the `calendar-head` part of the shadcn-compatible catalog primitives. */
 export function CalendarHead(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-head", role: "row" });
+  return catalogPart(props, { slot: "calendar-head" });
 }
 
 /** Renders the `calendar-body` part of the shadcn-compatible catalog primitives. */
@@ -340,12 +393,12 @@ export function CalendarBody(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `calendar-row` part of the shadcn-compatible catalog primitives. */
 export function CalendarRow(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-row", role: "row" });
+  return catalogPart(props, { slot: "calendar-row" });
 }
 
 /** Renders the `calendar-cell` part of the shadcn-compatible catalog primitives. */
 export function CalendarCell(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-cell", role: "gridcell" });
+  return catalogPart(props, { slot: "calendar-cell" });
 }
 
 /** Renders a single selectable day cell in the calendar grid, with selection/range/today state exposed as data attributes. */
@@ -365,7 +418,6 @@ export function CalendarDay(
     {
       disabled,
       "aria-disabled": disabled ? "true" : undefined,
-      "aria-selected": selected ? "true" : undefined,
       "data-disabled": disabled ? "" : undefined,
       "data-outside": outside ? "true" : undefined,
       "data-range-end": rangeEnd ? "true" : undefined,
@@ -411,14 +463,13 @@ export function Combobox(props: CatalogComponentProps): JSX.Element {
   return catalogPart(props, { slot: "combobox" });
 }
 
-/** Renders the combobox's text input, wired up with `role="combobox"`. */
+/** Styling-only combobox input; consumers supplying behavior also own its complete ARIA contract. */
 export function ComboboxInput(props: CatalogComponentProps): JSX.Element {
   const { ref, class: className, ...rest } = props;
   const finalProps = mergeProps(rest, {
     ref,
     class: classes("input", className),
     "data-slot": "combobox-input",
-    role: "combobox",
   });
 
   return <input {...finalProps} />;
@@ -426,12 +477,12 @@ export function ComboboxInput(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `combobox-list` part of the shadcn-compatible catalog primitives. */
 export function ComboboxList(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "combobox-list", role: "listbox" });
+  return catalogPart(props, { slot: "combobox-list" });
 }
 
 /** Renders the `combobox-option` part of the shadcn-compatible catalog primitives. */
 export function ComboboxOption(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "combobox-option", role: "option" });
+  return catalogPart(props, { slot: "combobox-option" });
 }
 
 /** Renders the `command` part of the shadcn-compatible catalog primitives. */
@@ -463,7 +514,7 @@ export function CommandHeader(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `command-list` part of the shadcn-compatible catalog primitives. */
 export function CommandList(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "command-list", role: "listbox" });
+  return catalogPart(props, { slot: "command-list" });
 }
 
 /** Renders the `command-empty` part of the shadcn-compatible catalog primitives. */
@@ -489,12 +540,11 @@ export function CommandItem(
   return catalogPart(
     {
       "aria-disabled": disabled ? "true" : undefined,
-      "aria-selected": selected || active ? "true" : undefined,
       "data-disabled": disabled ? "" : undefined,
       "data-selected": selected || active ? "true" : undefined,
       ...rest,
     },
-    { slot: "command-item", role: "option" },
+    { slot: "command-item" },
   );
 }
 
@@ -755,7 +805,14 @@ export function NavigationMenuIndicator(props: CatalogComponentProps): JSX.Eleme
 
 /** Renders the `pagination` part of the shadcn-compatible catalog primitives. */
 export function Pagination(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "pagination", element: "nav", role: "navigation" });
+  return catalogPart(
+    { "aria-label": "Pagination", ...props },
+    {
+      slot: "pagination",
+      element: "nav",
+      role: "navigation",
+    },
+  );
 }
 
 /** Renders the `pagination-content` part of the shadcn-compatible catalog primitives. */
@@ -820,12 +877,12 @@ export function ResizablePanel(props: CatalogComponentProps): JSX.Element {
 
 /** Styling-only separator slot; it does not implement resizing, pointer dragging, or keyboard controls. */
 export function ResizableHandle(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "resizable-handle", role: "separator" });
+  return catalogPart(props, { slot: "resizable-handle" });
 }
 
 /** Renders the `tabs-list` part of the shadcn-compatible catalog primitives. */
 export function TabsList(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "tabs-list", role: "tablist" });
+  return catalogPart(props, { slot: "tabs-list" });
 }
 
 /** Renders the `tabs-content` part of the shadcn-compatible catalog primitives. */
@@ -835,7 +892,7 @@ export function TabsTrigger(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `tabs-content` part of the shadcn-compatible catalog primitives. */
 export function TabsContent(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "tabs-content", role: "tabpanel" });
+  return catalogPart(props, { slot: "tabs-content" });
 }
 
 /** Sheet variant of the dialog content part; defaults to sliding in from the right. */

package/src/components/navbar/navbar.tsx

@@ -134,9 +134,16 @@ export function NavGroup(props: NavGroupProps): JSX.Element {
   const { align, children, label, title = label, ...rest } = props;
 
   return (
-    <LayoutBlock align={align} gap="sm" {...rest} data-align={align} data-slot="nav-group">
+    <LayoutBlock
+      direction="column"
+      align={align}
+      gap="sm"
+      {...rest}
+      data-align={align}
+      data-slot="nav-group"
+    >
       {title !== undefined ? <div data-slot="nav-group-label">{title}</div> : null}
-      <LayoutBlock gap="xs" data-slot="nav-group-body">
+      <LayoutBlock direction="column" gap="xs" data-slot="nav-group-body">
         {children}
       </LayoutBlock>
     </LayoutBlock>

package/src/themes/default/styles/base/reset.css

@@ -22,6 +22,10 @@
   display: block;
 }
 
+:where([data-askr-native-control="true"]) {
+  font: inherit;
+}
+
 ::selection {
   background: color-mix(in srgb, var(--ak-color-primary-soft) 84%, transparent);
   color: var(--ak-color-text);

package/src/themes/default/styles/display/table.css

@@ -3,13 +3,12 @@
   min-inline-size: 0;
   border-collapse: collapse;
   border-spacing: 0;
-  table-layout: fixed;
+  table-layout: auto;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: var(--ak-color-text);
   box-shadow: none;
-  overflow: hidden;
 }
 
 :where([data-slot="data-table"]) {
@@ -19,16 +18,16 @@
 }
 
 :where([data-slot="table-caption"]) {
-  padding: 0 0 var(--ak-space-sm);
+  padding-block-start: var(--ak-space-md);
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
   text-align: start;
-  caption-side: top;
+  caption-side: bottom;
 }
 
 :where([data-slot="table-head"]) {
-  background: var(--ak-color-surface-muted);
+  background: transparent;
 }
 
 :where([data-slot="table-body"]) {
@@ -36,58 +35,60 @@
 }
 
 :where([data-slot="table-foot"]) {
-  background: transparent;
+  border-block-start: 1px solid var(--ak-color-border);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
+  font-weight: var(--ak-font-weight-medium);
 }
 
 :where([data-slot="table-row"]) {
   background: inherit;
+  border-block-end: 1px solid var(--ak-color-border);
   transition: background var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="table-row"]:hover) {
-  background: var(--ak-color-hover);
+:where(
+  [data-slot="table-row"]:hover,
+  [data-slot="table-row"][aria-expanded="true"],
+  [data-slot="table-row"][data-state="selected"]
+) {
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
 }
 
 :where([data-slot="table-header-cell"]),
 :where([data-slot="table-cell"]) {
-  padding: var(--ak-space-sm);
-  border-block-end: 1px solid var(--ak-color-border);
+  padding: var(--ak-space-sm) var(--ak-space-xs);
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
   text-align: start;
-  vertical-align: top;
-  overflow-wrap: anywhere;
+  vertical-align: middle;
+  white-space: normal;
 }
 
-:where([data-slot="table-body"] [data-slot="table-row"]:last-child [data-slot="table-cell"]) {
+:where([data-slot="table-body"] [data-slot="table-row"]:last-child),
+:where([data-slot="table-foot"] [data-slot="table-row"]:last-child) {
   border-block-end: 0;
 }
 
 :where([data-slot="table-header-cell"]) {
-  color: var(--ak-color-text-muted);
-  font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0;
-  overflow-wrap: normal;
-  text-transform: none;
-  word-break: normal;
-  white-space: normal;
+  block-size: 2.5rem;
+  font-weight: var(--ak-font-weight-medium);
 }
 
 :where([data-slot="table-cell"]) {
   font-weight: var(--ak-font-weight-regular);
 }
 
-@media (max-width: 30rem) {
-  :where([data-slot="table-header-cell"]),
-  :where([data-slot="table-cell"]) {
-    padding: var(--ak-space-sm) var(--ak-space-xs);
-    font-size: var(--ak-font-size-xs);
-    line-height: var(--ak-line-height-tight);
-  }
+:where(
+  [data-slot="table-header-cell"]:has([role="checkbox"]),
+  [data-slot="table-cell"]:has([role="checkbox"])
+) {
+  padding-inline-end: 0;
+}
 
-  :where([data-slot="table-header-cell"]) {
-    letter-spacing: 0;
-    overflow-wrap: anywhere;
-  }
+:where(
+  [data-slot="table-header-cell"] > [role="checkbox"],
+  [data-slot="table-cell"] > [role="checkbox"]
+) {
+  transform: translateY(2px);
 }

package/src/themes/default/styles/display/virtual-table.css

@@ -9,6 +9,9 @@
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: var(--ak-color-border-strong) transparent;
+  transition:
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :where([data-slot="virtual-table"][data-viewport="lg"]) {
@@ -31,41 +34,69 @@
 
 :where([data-slot="virtual-table-head"]) {
   background: var(--ak-color-surface-muted);
+  box-shadow: inset 0 -1px 0 var(--ak-color-border);
 }
 
 :where([data-slot="virtual-table-header-row"]) {
   background: inherit;
 }
 
+:where([data-slot="virtual-table"][data-at-top="false"]) :where([data-slot="virtual-table-head"]) {
+  box-shadow:
+    inset 0 -1px 0 var(--ak-color-border),
+    var(--ak-shadow-md);
+}
+
 :where([data-slot="virtual-table-body"]) {
   background: transparent;
 }
 
 :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
-  padding: var(--ak-space-sm);
-  border-block-end: 1px solid var(--ak-color-border);
-  color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
   text-align: start;
   vertical-align: middle;
+}
+
+:where([data-slot="virtual-table-header-cell"]) {
+  padding: 0 var(--ak-space-sm);
+  background: inherit;
+  color: var(--ak-color-text-muted);
+  font-weight: var(--ak-font-weight-medium);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-:where([data-slot="virtual-table-header-cell"]) {
-  color: var(--ak-color-text-muted);
-  font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0;
-  text-transform: none;
+:where([data-slot="virtual-table-cell"]) {
+  position: relative;
+  padding: 0;
+  border-block-end: 1px solid var(--ak-color-border);
+  color: var(--ak-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 :where([data-slot="virtual-table-row"]) {
   background: transparent;
+  cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard);
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="virtual-table-row"])
+  :where(
+    [data-slot="input"]:not(:disabled, [data-disabled], [aria-disabled="true"]),
+    [data-slot="textarea"]:not(:disabled, [data-disabled], [aria-disabled="true"]),
+    [contenteditable="true"],
+    [role="searchbox"],
+    [role="spinbutton"],
+    [role="textbox"]
+  ) {
+  cursor: text;
 }
 
 :where([data-slot="virtual-table-row"]:hover) {
@@ -75,6 +106,19 @@
 :where([data-slot="virtual-table-row"][data-selected="true"]) {
   background: var(--ak-color-selected);
   color: var(--ak-color-text);
+  box-shadow: inset 0 0 0 var(--ak-border-width-sm) var(--ak-color-selected-border);
+}
+
+:where(
+  [data-slot="virtual-table-row"][data-selected="true"]
+    > [data-slot="virtual-table-cell"]:first-child
+)::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: var(--ak-border-width-md);
+  background: var(--ak-color-primary);
+  content: "";
 }
 
 :where([data-slot="virtual-table-spacer-row"]) {
@@ -84,13 +128,98 @@
 :where([data-slot="virtual-table-cell-content"]) {
   display: flex;
   align-items: center;
+  gap: var(--ak-space-xs);
+  inline-size: 100%;
+  block-size: 100%;
   min-inline-size: 0;
+  padding-inline: var(--ak-space-sm);
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-@media (max-width: 30rem) {
+:where(
+  [data-slot="virtual-table-cell-content"] > [data-slot="text"],
+  [data-slot="virtual-table-cell-content"] > [data-truncate="true"]
+) {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(
+  [data-slot="virtual-table-header-cell"]:has([role="checkbox"]),
+  [data-slot="virtual-table-cell-content"]:has([role="checkbox"])
+) {
+  padding-inline-end: 0;
+}
+
+:where([data-slot="virtual-table-header-cell"] > [role="checkbox"]) {
+  transform: translateY(2px);
+}
+
+:where(
+  [data-slot="virtual-table-body"]
+    > [data-slot="virtual-table-row"][data-terminal-row="true"]
+    > [data-slot="virtual-table-cell"]
+) {
+  border-block-end: 0;
+}
+
+:where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table-table"]:focus-visible) {
+  outline: none;
+}
+
+:where(
+  [data-slot="virtual-table"]:focus-visible,
+  [data-slot="virtual-table"]:has([data-slot="virtual-table-table"]:focus-visible)
+) {
+  border-color: var(--ak-color-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+@media (forced-colors: active) {
+  :where([data-slot="virtual-table"]) {
+    border-color: CanvasText;
+  }
+
+  :where(
+    [data-slot="virtual-table"]:focus-visible,
+    [data-slot="virtual-table"]:has([data-slot="virtual-table-table"]:focus-visible)
+  ) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  :where([data-slot="virtual-table-head"]) {
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: inset 0 -1px 0 CanvasText;
+  }
+
   :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
-    padding: var(--ak-space-sm) var(--ak-space-xs);
-    font-size: var(--ak-font-size-xs);
-    line-height: var(--ak-line-height-tight);
+    border-color: CanvasText;
+  }
+
+  :where([data-slot="virtual-table-row"][data-selected="true"]) {
+    background: Highlight;
+    color: HighlightText;
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+
+  :where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]) {
+    color: HighlightText;
+  }
+
+  :where(
+    [data-slot="virtual-table-row"][data-selected="true"]
+      > [data-slot="virtual-table-cell"]:first-child
+  )::before {
+    background: HighlightText;
   }
 }

package/src/themes/default/styles/layout/block.css

@@ -1,5 +1,4 @@
 :where(
-  [data-slot="block"],
   [data-slot="container"],
   [data-slot="header"],
   [data-slot="main"],