@threadlabs/looma 0.14.8 → 0.15.0

package/vue/UiContextMenu.d.ts

@@ -9,6 +9,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
         readonly value: string;
+        readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
     close: (detail: {
@@ -25,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((detail: {
         readonly value: string;
+        readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
     onClose?: ((detail: {

package/vue/UiContextMenu.vue

@@ -33,7 +33,11 @@ const emit = defineEmits<{
     },
   ]
   select: [
-    detail: { readonly value: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+    detail: {
+      readonly value: string
+      readonly checked?: boolean
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
   ]
 }>()
 
@@ -55,10 +59,12 @@ const isOpenDetail = (detail: unknown): boolean =>
 const isSelectDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && ((detail as Record<string, unknown>)['checked'] === undefined
+    || typeof (detail as Record<string, unknown>)['checked'] === 'boolean')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['value', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['value', 'checked', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     open: isOpenDetail,
@@ -90,6 +96,22 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-context-menu-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-context-menu-z-index {
   syntax: "*";
   inherits: false;
@@ -97,6 +119,10 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-context-menu"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-context-menu-surface: var(--ui-context-menu-surface);
+  --_ui-context-menu-border: var(--ui-context-menu-border);
+  --_ui-context-menu-radius: var(--ui-context-menu-radius);
+  --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
   --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
   display: contents;
@@ -110,10 +136,17 @@ useComponentHost(controllerModule.default, {
   flex-direction: column;
   box-sizing: border-box;
   padding: var(--ui-space-1);
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  background: var(
+    --_ui-context-menu-surface,
+    var(--ui-overlay-surface, var(--ui-surface-elevated))
+  );
+  border: 1px solid
+    var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+  box-shadow: var(
+    --_ui-context-menu-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
   outline: 0;
   overflow: auto;
   z-index: var(--_ui-context-menu-z-index, 1000);
@@ -127,6 +160,14 @@ useComponentHost(controllerModule.default, {
     overlay var(--ui-motion-fast) allow-discrete;
 }
 
+.menu hr {
+  align-self: stretch;
+  block-size: 0;
+  margin: var(--ui-space-1) 0;
+  border: 0;
+  border-block-start: 1px solid var(--ui-border-default);
+}
+
 .menu:popover-open {
   opacity: 1;
   transform: translateY(0) scale(1);

package/vue/UiDialog.d.ts

@@ -1,9 +1,11 @@
 type __VLS_Props = {
-    dismissible?: boolean;
+    alert?: boolean;
+    closedby?: 'any' | 'closerequest' | 'none';
     for?: string;
     label?: string;
-    modal?: boolean;
+    modeless?: boolean;
     open?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'fullscreen';
 };
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
@@ -17,6 +19,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
+    open: (detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((detail: {
@@ -24,12 +31,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
+    onOpen?: ((detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    size: "sm" | "md" | "lg" | "fullscreen";
     for: string;
     open: boolean;
-    dismissible: boolean;
-    modal: boolean;
+    alert: boolean;
+    closedby: "any" | "closerequest" | "none";
+    modeless: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiDialog.vue

@@ -1,6 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-dialog/ui-dialog.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -8,21 +8,32 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    dismissible?: boolean
+    alert?: boolean
+    closedby?: 'any' | 'closerequest' | 'none'
     for?: string
     label?: string
-    modal?: boolean
+    modeless?: boolean
     open?: boolean
+    size?: 'sm' | 'md' | 'lg' | 'fullscreen'
   }>(),
   {
-    dismissible: false,
+    alert: false,
+    closedby: 'closerequest',
     for: '',
-    modal: false,
+    modeless: false,
     open: false,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
   'update:open': [value: boolean]
+  open: [
+    detail: {
+      readonly open: boolean
+      readonly reason: 'action' | 'programmatic'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
   close: [
     detail: {
       readonly open: boolean
@@ -37,6 +48,23 @@ const closeElement = useTemplateRef<HTMLElement>('close')
 const internalOpen = ref(false)
 const accessibleLabel = ref('Dialog')
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    props.alert && 'alert',
+  ].filter(Boolean).join(' ')
+)
+
+const isOpenDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
+  && ((detail as Record<string, unknown>)['reason'] === 'action'
+    || (detail as Record<string, unknown>)['reason'] === 'programmatic')
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
 const isCloseDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
@@ -50,6 +78,7 @@ const isCloseDetail = (detail: unknown): boolean =>
   && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
+    open: isOpenDetail,
     close: isCloseDetail,
   },
   modeled: ['open'],
@@ -65,7 +94,13 @@ useComponentHost(controllerModule.default, {
 </script>
 
 <template>
-  <dialog data-component="ui-dialog" v-bind="$attrs" :aria-label="accessibleLabel" ref="root">
+  <dialog
+    data-component="ui-dialog"
+    v-bind="$attrs"
+    :aria-label="accessibleLabel"
+    :data-ui-dialog-state="hostState || undefined"
+    ref="root"
+  >
     <header>
       <h2 v-if="label" class="title">{{ label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="close"></button>
@@ -81,6 +116,22 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-dialog-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-dialog-max-width {
   syntax: "*";
   inherits: false;
@@ -99,7 +150,7 @@ useComponentHost(controllerModule.default, {
   box-sizing: border-box;
   inline-size: min(
     calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
-    var(--ui-dialog-max-width, 440px)
+    var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
   );
   max-inline-size: none;
   max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
@@ -107,10 +158,13 @@ useComponentHost(controllerModule.default, {
   padding: 0;
   overflow: hidden;
   flex-direction: column;
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-dialog);
-  box-shadow: var(--ui-elevation-dialog, var(--ui-shadow-xl));
+  background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+  box-shadow: var(
+    --ui-dialog-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+  );
   visibility: hidden;
   pointer-events: none;
   opacity: 0;
@@ -132,6 +186,27 @@ useComponentHost(controllerModule.default, {
   animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
 
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"] {
+  --_ui-dialog-size: 360px;
+}
+
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"] {
+  --_ui-dialog-size: 640px;
+}
+
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"] {
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100dvh;
+  max-block-size: none;
+  margin: 0;
+  border-radius: var(--ui-dialog-radius, 0);
+}
+
+[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close {
+  display: none;
+}
+
 /* Header and actions stay pinned; only the body scrolls when content is long. */
 header {
   display: flex;

package/vue/UiDisclosure.d.ts

@@ -1,12 +1,16 @@
 type __VLS_Props = {
     density?: 'comfortable' | 'compact';
     disabled?: boolean;
+    headingLevel?: number;
+    name?: string;
     open?: boolean;
     summary?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    summary?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (detail: {
@@ -34,9 +38,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     summary: string;
+    name: string;
     disabled: boolean;
     open: boolean;
     density: "comfortable" | "compact";
+    headingLevel: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiDisclosure.vue

@@ -10,12 +10,16 @@ const props = withDefaults(
   defineProps<{
     density?: 'comfortable' | 'compact'
     disabled?: boolean
+    headingLevel?: number
+    name?: string
     open?: boolean
     summary?: string
   }>(),
   {
     density: 'comfortable',
     disabled: false,
+    headingLevel: 0,
+    name: '',
     open: false,
     summary: 'Details',
   },
@@ -40,8 +44,11 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const triggerElement = useTemplateRef<HTMLElement>('trigger')
+const panelElement = useTemplateRef<HTMLElement>('panel')
 const internalOpen = ref(false)
 const contentId = ref('')
+const headingRole = ref<any>(null)
+const headingAriaLevel = ref<any>(null)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -74,9 +81,22 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  refs: { trigger: triggerElement },
-  state: { internalOpen, contentId },
+  refs: { trigger: triggerElement, panel: panelElement },
+  state: { internalOpen, contentId, headingRole, headingAriaLevel },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
@@ -86,20 +106,24 @@ useComponentHost(controllerModule.default, {
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <button
-      class="trigger"
-      type="button"
-      :aria-controls="contentId"
-      :aria-expanded="internalOpen"
-      :disabled="disabled"
-      ref="trigger"
+    <div
+      class="heading"
+      :role="attribute(headingRole)"
+      :aria-level="typeof headingAriaLevel === 'boolean' ? String(headingAriaLevel) : attribute(headingAriaLevel)"
     >
-      <span>{{ summary }}</span>
-      <span class="chevron" aria-hidden="true"></span>
-    </button>
-    <div class="panel" :id="contentId" :inert="!internalOpen">
-      <div class="panel-inner"><slot /></div>
+      <button
+        class="trigger"
+        type="button"
+        :aria-controls="contentId"
+        :aria-expanded="internalOpen"
+        :disabled="disabled"
+        ref="trigger"
+      >
+        <span class="summary"><slot name="summary">{{ summary }}</slot></span>
+        <span class="chevron" aria-hidden="true"></span>
+      </button>
     </div>
+    <div class="panel" :id="contentId" ref="panel"><div class="panel-inner"><slot /></div></div>
   </div>
 </template>
 

package/vue/UiEditable.d.ts

@@ -1,9 +1,14 @@
 type __VLS_Props = {
     actions?: boolean;
+    cancelLabel?: string;
     disabled?: boolean;
     edit?: boolean;
     hint?: string;
     label?: string;
+    maxLength?: number;
+    placeholder?: string;
+    required?: boolean;
+    saveLabel?: string;
     value?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -44,9 +49,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     value: string;
     disabled: boolean;
+    required: boolean;
+    placeholder: string;
     actions: boolean;
+    cancelLabel: string;
     edit: boolean;
     hint: string;
+    maxLength: number;
+    saveLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditable.vue

@@ -9,18 +9,28 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(
   defineProps<{
     actions?: boolean
+    cancelLabel?: string
     disabled?: boolean
     edit?: boolean
     hint?: string
     label?: string
+    maxLength?: number
+    placeholder?: string
+    required?: boolean
+    saveLabel?: string
     value?: string
   }>(),
   {
     actions: false,
+    cancelLabel: 'Cancel',
     disabled: false,
     edit: false,
     hint: '',
     label: 'Edit value',
+    maxLength: 0,
+    placeholder: '',
+    required: false,
+    saveLabel: 'Save',
     value: '',
   },
 )
@@ -132,13 +142,15 @@ useComponentHost(controllerModule.default, {
         type="text"
         :value.prop="draft"
         :aria-label="label"
+        :placeholder="placeholder"
+        :required="required"
         :disabled="disabled || !internalEdit"
         ref="input"
       >
     </div>
     <div v-if="actions" class="actions">
-      <button class="save" type="button">Save</button>
-      <button class="cancel" type="button">Cancel</button>
+      <button class="save" type="button">{{ saveLabel }}</button>
+      <button class="cancel" type="button">{{ cancelLabel }}</button>
     </div>
   </div>
 </template>

package/vue/UiEditorInsertTableGrid.vue

@@ -27,9 +27,11 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const gridElement = useTemplateRef<HTMLElement>('grid')
 const headerElement = useTemplateRef<HTMLElement>('header')
-const insertElement = useTemplateRef<HTMLElement>('insert')
-const cells = ref<{ key: string; row: number; col: number; label: string; selected: boolean }[]>([])
+const cells = ref<
+  { key: string; row: number; col: number; label: string; selected: boolean; tabIndex: number }[]
+>([])
 const rows = ref(8)
 const cols = ref(8)
 const hint = ref('')
@@ -51,7 +53,7 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  refs: { header: headerElement, insert: insertElement },
+  refs: { grid: gridElement, header: headerElement },
   state: { cells, rows, cols, hint, withHeaderRow },
 })
 </script>
@@ -64,6 +66,7 @@ useComponentHost(controllerModule.default, {
       role="group"
       aria-label="Table dimensions"
       :style="{ '--_rows': rows, '--_cols': cols }"
+      ref="grid"
     >
       <button
         v-for="cell in cells"
@@ -74,13 +77,13 @@ useComponentHost(controllerModule.default, {
         :data-col="cell.col"
         :aria-label="cell.label"
         :aria-pressed="cell.selected"
+        :tabindex="cell.tabIndex"
         :class="{ selected: cell.selected }"
       >
       </button>
     </div>
     <label class="header"><input type="checkbox" :checked.prop="withHeaderRow" ref="header"> Header
       row</label>
-    <button type="button" class="insert" ref="insert">Insert table</button>
   </div>
 </template>
 
@@ -105,6 +108,32 @@ useComponentHost(controllerModule.default, {
   grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
   gap: 2px;
   margin-bottom: var(--ui-space-2);
+  max-inline-size: 100%;
+  overflow: auto;
+  --_ui-scroll-fade-direction: to right;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self inline);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+
+[data-component~="ui-editor-insert-table-grid"]:dir(rtl) .grid {
+  --_ui-scroll-fade-direction: to left;
 }
 
 .cell {
@@ -122,6 +151,11 @@ useComponentHost(controllerModule.default, {
   border-color: var(--ui-accent-solid, var(--ui-accent));
 }
 
+.cell:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+
 .header {
   display: block;
   margin-bottom: var(--ui-space-2);
@@ -129,19 +163,22 @@ useComponentHost(controllerModule.default, {
   cursor: pointer;
 }
 
-[data-component~="ui-editor-insert-table-grid"] .insert {
-  width: 100%;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-accent-solid, var(--ui-accent));
-  color: var(--ui-accent-contrast);
-  font-size: var(--ui-font-size-sm);
-  cursor: pointer;
+@media (pointer: coarse) {
+  .grid {
+    grid-template-columns: repeat(var(--_cols, 8), 44px);
+    grid-template-rows: repeat(var(--_rows, 8), 44px);
+  }
+
+  .cell {
+    width: 44px;
+    height: 44px;
+  }
 }
 
-[data-component~="ui-editor-insert-table-grid"] .insert:hover {
-  filter: brightness(1.05);
+@media (forced-colors: active) {
+  .cell:focus-visible {
+    outline-color: Highlight;
+  }
 }
 
 [data-component~="ui-editor-insert-table-grid"][hidden] {