@threadlabs/looma 0.14.8 → 0.15.0

package/vue/UiEditorSlashMenuItem.vue

@@ -0,0 +1,101 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import UiIcon from './UiIcon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    description?: string
+    disabled?: boolean
+    icon?: string
+    keywords?: string
+    value?: string
+  }>(),
+  {
+    description: '',
+    disabled: false,
+    icon: '',
+    keywords: '',
+    value: '',
+  },
+)
+</script>
+
+<template>
+  <li
+    data-component="ui-editor-slash-menu-item"
+    role="option"
+    tabindex="-1"
+    v-bind="$attrs"
+    :aria-disabled="disabled"
+    :data-value="value"
+    :data-keywords="keywords"
+  >
+    <span v-if="icon" class="icon" aria-hidden="true"><UiIcon :name="icon" /></span>
+    <span class="body"><span class="title"><slot /></span>
+      <span v-if="description" class="description">{{ description }}</span></span>
+  </li>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-slash-menu-item"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  min-block-size: 44px;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  cursor: pointer;
+  list-style: none;
+}
+
+[data-component~="ui-editor-slash-menu-item"][aria-selected="true"] {
+  background: var(--ui-accent-subtle);
+}
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 32px;
+  block-size: 32px;
+  flex: 0 0 auto;
+  color: var(--ui-text-secondary);
+  background: var(--ui-surface-hover);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+}
+
+.icon {
+  --_ui-default-icon-size: 1rem;
+}
+
+.body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  gap: 1px;
+}
+.title, .description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.title {
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+}
+.description {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+}
+
+[data-component~="ui-editor-slash-menu-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiEditorTableContextMenu.d.ts

@@ -1,19 +1,25 @@
 type __VLS_Props = {
-    actions?: readonly ('align-left' | 'align-center' | 'align-right' | 'background-none' | 'background-gray' | 'background-yellow' | 'background-blue' | 'background-green' | 'background-red' | 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after' | 'clear-cells' | 'merge-cells' | 'split-cell' | 'delete-row' | 'delete-column' | 'delete-table')[];
+    actions?: readonly ('align-left' | 'align-center' | 'align-right' | 'background-none' | 'background-gray' | 'background-yellow' | 'background-blue' | 'background-green' | 'background-red' | 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after' | 'toggle-header-row' | 'toggle-header-column' | 'move-row-up' | 'move-row-down' | 'move-column-left' | 'move-column-right' | 'clear-cells' | 'merge-cells' | 'split-cell' | 'delete-row' | 'delete-column' | 'delete-table')[];
     cellBackground?: string;
+    headerColumn?: boolean;
+    headerRow?: boolean;
     open?: boolean;
+    scope?: 'cell' | 'row' | 'column';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: (detail: {
-        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
+        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onAction?: ((detail: {
-        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
+        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
     }) => any) | undefined;
 }>, {
     open: boolean;
+    headerRow: boolean;
     cellBackground: string;
+    headerColumn: boolean;
+    scope: "cell" | "row" | "column";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorTableContextMenu.vue

@@ -24,6 +24,12 @@ const props = withDefaults(
         | 'add-row-after'
         | 'add-column-before'
         | 'add-column-after'
+        | 'toggle-header-row'
+        | 'toggle-header-column'
+        | 'move-row-up'
+        | 'move-row-down'
+        | 'move-column-left'
+        | 'move-column-right'
         | 'clear-cells'
         | 'merge-cells'
         | 'split-cell'
@@ -32,11 +38,17 @@ const props = withDefaults(
         | 'delete-table'
       )[]
     cellBackground?: string
+    headerColumn?: boolean
+    headerRow?: boolean
     open?: boolean
+    scope?: 'cell' | 'row' | 'column'
   }>(),
   {
     cellBackground: '',
+    headerColumn: false,
+    headerRow: false,
     open: false,
+    scope: 'cell',
   },
 )
 const emit = defineEmits<{
@@ -56,6 +68,12 @@ const emit = defineEmits<{
         | 'add-row-after'
         | 'add-column-before'
         | 'add-column-after'
+        | 'toggle-header-row'
+        | 'toggle-header-column'
+        | 'move-row-up'
+        | 'move-row-down'
+        | 'move-column-left'
+        | 'move-column-right'
         | 'clear-cells'
         | 'merge-cells'
         | 'split-cell'
@@ -71,7 +89,17 @@ const swatches = ref<{ action: string; label: string; color: string; selected: b
   [],
 )
 const sections = ref<
-  { heading: string; items: { action: string; label: string; icon: string; danger: boolean }[] }[]
+  {
+    heading: string
+    items: {
+      action: string
+      label: string
+      icon: string
+      danger: boolean
+      checkable: boolean
+      checked: boolean
+    }[]
+  }[]
 >([])
 
 const isActionDetail = (detail: unknown): boolean =>
@@ -89,6 +117,12 @@ const isActionDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['action'] === 'add-row-after'
     || (detail as Record<string, unknown>)['action'] === 'add-column-before'
     || (detail as Record<string, unknown>)['action'] === 'add-column-after'
+    || (detail as Record<string, unknown>)['action'] === 'toggle-header-row'
+    || (detail as Record<string, unknown>)['action'] === 'toggle-header-column'
+    || (detail as Record<string, unknown>)['action'] === 'move-row-up'
+    || (detail as Record<string, unknown>)['action'] === 'move-row-down'
+    || (detail as Record<string, unknown>)['action'] === 'move-column-left'
+    || (detail as Record<string, unknown>)['action'] === 'move-column-right'
     || (detail as Record<string, unknown>)['action'] === 'clear-cells'
     || (detail as Record<string, unknown>)['action'] === 'merge-cells'
     || (detail as Record<string, unknown>)['action'] === 'split-cell'
@@ -108,6 +142,19 @@ useComponentHost(controllerModule.default, {
   props,
   state: { swatches, sections },
 })
+
+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>
@@ -147,7 +194,10 @@ useComponentHost(controllerModule.default, {
           v-for="item in section.items"
           :key="item.action"
           type="button"
-          role="menuitem"
+          :role="attribute(({ true: 'menuitemcheckbox', false: 'menuitem' })[`${item.checkable}`])"
+          :aria-checked="typeof (({ true: item.checked, false: null })[`${item.checkable}`]) === 'boolean'
+          ? String(({ true: item.checked, false: null })[`${item.checkable}`])
+          : attribute(({ true: item.checked, false: null })[`${item.checkable}`])"
           :data-action="item.action"
           :class="{ danger: item.danger }"
         >
@@ -233,7 +283,7 @@ useComponentHost(controllerModule.default, {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   border: 1px solid var(--ui-border);
   background: var(--_swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);

package/vue/UiEditorTableOverlay.d.ts

@@ -30,7 +30,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         readonly rowIndex: number;
         readonly columnIndex: number;
     } | {
-        readonly action: "open-cell-menu";
+        readonly action: "open-cell-menu" | "open-row-menu" | "open-column-menu";
         readonly rowIndex: number;
         readonly columnIndex: number;
         readonly anchor: {
@@ -49,7 +49,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         readonly rowIndex: number;
         readonly columnIndex: number;
     } | {
-        readonly action: "open-cell-menu";
+        readonly action: "open-cell-menu" | "open-row-menu" | "open-column-menu";
         readonly rowIndex: number;
         readonly columnIndex: number;
         readonly anchor: {

package/vue/UiEditorTableOverlay.vue

@@ -45,7 +45,7 @@ const emit = defineEmits<{
       readonly rowIndex: number
       readonly columnIndex: number
     } | {
-      readonly action: 'open-cell-menu'
+      readonly action: 'open-cell-menu' | 'open-row-menu' | 'open-column-menu'
       readonly rowIndex: number
       readonly columnIndex: number
       readonly anchor: {
@@ -122,7 +122,9 @@ const isActionDetail = (detail: unknown): boolean =>
       ['action', 'rowIndex', 'columnIndex'].includes(key)
     ))
   || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-    && (detail as Record<string, unknown>)['action'] === 'open-cell-menu'
+    && ((detail as Record<string, unknown>)['action'] === 'open-cell-menu'
+      || (detail as Record<string, unknown>)['action'] === 'open-row-menu'
+      || (detail as Record<string, unknown>)['action'] === 'open-column-menu')
     && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
     && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
     && ((detail as Record<string, unknown>)['anchor'] !== null
@@ -229,8 +231,8 @@ useComponentHost(controllerModule.default, {
         type="button"
         class="selector row"
         data-action="select-row"
-        title="Select row"
-        aria-label="Select row"
+        title="Row actions"
+        aria-label="Row actions"
         :data-row-index="hovered?.rowIndex"
         :data-column-index="hovered?.columnIndex"
         :style="{ top: hovered?.rowOffset }"
@@ -241,8 +243,8 @@ useComponentHost(controllerModule.default, {
         type="button"
         class="selector column"
         data-action="select-column"
-        title="Select column"
-        aria-label="Select column"
+        title="Column actions"
+        aria-label="Column actions"
         :data-row-index="hovered?.rowIndex"
         :data-column-index="hovered?.columnIndex"
         :style="{ left: hovered?.columnOffset }"

package/vue/UiEditorTableToolbar.d.ts

@@ -1,20 +1,24 @@
 type __VLS_Props = {
-    actions?: readonly ('align-left' | 'align-center' | 'align-right' | 'background-none' | 'background-gray' | 'background-yellow' | 'background-blue' | 'background-green' | 'background-red' | 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after' | 'clear-cells' | 'merge-cells' | 'split-cell' | 'delete-row' | 'delete-column' | 'delete-table')[];
+    actions?: readonly ('align-left' | 'align-center' | 'align-right' | 'background-none' | 'background-gray' | 'background-yellow' | 'background-blue' | 'background-green' | 'background-red' | 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after' | 'toggle-header-row' | 'toggle-header-column' | 'move-row-up' | 'move-row-down' | 'move-column-left' | 'move-column-right' | 'clear-cells' | 'merge-cells' | 'split-cell' | 'delete-row' | 'delete-column' | 'delete-table')[];
     cellAlignment?: 'left' | 'center' | 'right';
     cellBackground?: string;
+    headerColumn?: boolean;
+    headerRow?: boolean;
     open?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: (detail: {
-        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
+        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onAction?: ((detail: {
-        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
+        readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
     }) => any) | undefined;
 }>, {
     open: boolean;
+    headerRow: boolean;
     cellBackground: string;
+    headerColumn: boolean;
     cellAlignment: "left" | "center" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/vue/UiEditorTableToolbar.vue

@@ -24,6 +24,12 @@ const props = withDefaults(
         | 'add-row-after'
         | 'add-column-before'
         | 'add-column-after'
+        | 'toggle-header-row'
+        | 'toggle-header-column'
+        | 'move-row-up'
+        | 'move-row-down'
+        | 'move-column-left'
+        | 'move-column-right'
         | 'clear-cells'
         | 'merge-cells'
         | 'split-cell'
@@ -33,11 +39,15 @@ const props = withDefaults(
       )[]
     cellAlignment?: 'left' | 'center' | 'right'
     cellBackground?: string
+    headerColumn?: boolean
+    headerRow?: boolean
     open?: boolean
   }>(),
   {
     cellAlignment: 'left',
     cellBackground: '',
+    headerColumn: false,
+    headerRow: false,
     open: false,
   },
 )
@@ -58,6 +68,12 @@ const emit = defineEmits<{
         | 'add-row-after'
         | 'add-column-before'
         | 'add-column-after'
+        | 'toggle-header-row'
+        | 'toggle-header-column'
+        | 'move-row-up'
+        | 'move-row-down'
+        | 'move-column-left'
+        | 'move-column-right'
         | 'clear-cells'
         | 'merge-cells'
         | 'split-cell'
@@ -77,7 +93,17 @@ const structure = ref<
 >([])
 const swatches = ref<{ action: string; label: string; color: string; selected: boolean }[]>([])
 const sections = ref<
-  { heading: string; items: { action: string; label: string; icon: string; danger: boolean }[] }[]
+  {
+    heading: string
+    items: {
+      action: string
+      label: string
+      icon: string
+      danger: boolean
+      checkable: boolean
+      checked: boolean
+    }[]
+  }[]
 >([])
 const hasOverflow = ref(false)
 const overflowOpen = ref(false)
@@ -97,6 +123,12 @@ const isActionDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['action'] === 'add-row-after'
     || (detail as Record<string, unknown>)['action'] === 'add-column-before'
     || (detail as Record<string, unknown>)['action'] === 'add-column-after'
+    || (detail as Record<string, unknown>)['action'] === 'toggle-header-row'
+    || (detail as Record<string, unknown>)['action'] === 'toggle-header-column'
+    || (detail as Record<string, unknown>)['action'] === 'move-row-up'
+    || (detail as Record<string, unknown>)['action'] === 'move-row-down'
+    || (detail as Record<string, unknown>)['action'] === 'move-column-left'
+    || (detail as Record<string, unknown>)['action'] === 'move-column-right'
     || (detail as Record<string, unknown>)['action'] === 'clear-cells'
     || (detail as Record<string, unknown>)['action'] === 'merge-cells'
     || (detail as Record<string, unknown>)['action'] === 'split-cell'
@@ -116,6 +148,19 @@ useComponentHost(controllerModule.default, {
   props,
   state: { alignments, structure, swatches, sections, hasOverflow, overflowOpen },
 })
+
+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>
@@ -201,7 +246,10 @@ useComponentHost(controllerModule.default, {
             v-for="item in section.items"
             :key="item.action"
             type="button"
-            role="menuitem"
+            :role="attribute(({ true: 'menuitemcheckbox', false: 'menuitem' })[`${item.checkable}`])"
+            :aria-checked="typeof (({ true: item.checked, false: null })[`${item.checkable}`]) === 'boolean'
+            ? String(({ true: item.checked, false: null })[`${item.checkable}`])
+            : attribute(({ true: item.checked, false: null })[`${item.checkable}`])"
             :data-action="item.action"
             :class="{ danger: item.danger }"
           >

package/vue/UiEditorToolbar.vue

@@ -1,6 +1,8 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
+import * as controllerModule from '../components/ui-editor-toolbar/ui-editor-toolbar.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -13,6 +15,7 @@ const props = withDefaults(
   },
 )
 
+const root = ref<HTMLElement | null>(null)
 const stripElement = useTemplateRef<HTMLElement>('strip')
 
 /** The values the styles' :host-state() rules test. */
@@ -21,6 +24,15 @@ const hostState = computed(() =>
     props.floating && 'floating',
   ].filter(Boolean).join(' ')
 )
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  refs: { strip: stripElement },
+})
 </script>
 
 <template>
@@ -30,6 +42,7 @@ const hostState = computed(() =>
     aria-label="Editor toolbar"
     v-bind="$attrs"
     :data-ui-editor-toolbar-state="hostState || undefined"
+    ref="root"
   >
     <div class="strip" ref="strip"><slot /></div>
   </div>

package/vue/UiFloatingActionButton.vue

@@ -72,7 +72,7 @@ const hostState = computed(() =>
 [data-component~="ui-floating-action-button"] {
   appearance: none;
   border: none;
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   margin: 0;
   padding: 0;
   display: inline-flex;

package/vue/UiFormField.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 } from 'vue'
+import { computed, ref } from 'vue'
 import * as controllerModule from '../components/ui-form-field/ui-form-field.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -21,6 +21,13 @@ const props = withDefaults(
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.invalid && 'invalid',
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -31,7 +38,12 @@ useComponentHost(controllerModule.default, {
 </script>
 
 <template>
-  <div data-component="ui-form-field" v-bind="$attrs" ref="root">
+  <div
+    data-component="ui-form-field"
+    v-bind="$attrs"
+    :data-ui-form-field-state="hostState || undefined"
+    ref="root"
+  >
     <div class="label"><slot name="label" /></div>
     <slot />
     <div class="help"><slot name="help" /></div>
@@ -41,6 +53,10 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-form-field-danger {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-form-field-help-min-block-size {
   syntax: "*";
   inherits: false;
@@ -48,6 +64,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-form-field"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-form-field-danger: var(--ui-form-field-danger);
   --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
 
   display: grid;
@@ -80,10 +97,18 @@ useComponentHost(controllerModule.default, {
   min-block-size: var(--_ui-form-field-help-min-block-size, 0);
 }
 
+.error {
+  display: none;
+}
+
+[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error {
+  display: contents;
+}
+
 /* An error reads in the danger colour, the one the invalid control's border takes. */
 .error,
 :slotted([role="alert"]) {
-  color: var(--ui-danger);
+  color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
   font-size: var(--ui-font-size-sm);
 }
 

package/vue/UiGrid.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    columns?: number;
     gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
     min?: 'sm' | 'md' | 'lg';
 };

package/vue/UiGrid.vue

@@ -5,6 +5,7 @@ import { computed } from 'vue'
 defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
+  columns?: number
   gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
   min?: 'sm' | 'md' | 'lg'
 }>()
@@ -19,7 +20,12 @@ const hostState = computed(() =>
 </script>
 
 <template>
-  <div data-component="ui-grid" v-bind="$attrs" :data-ui-grid-state="hostState || undefined">
+  <div
+    data-component="ui-grid"
+    v-bind="$attrs"
+    :style="{ '--_grid-column-cap': columns }"
+    :data-ui-grid-state="hostState || undefined"
+  >
     <slot />
   </div>
 </template>
@@ -41,7 +47,25 @@ const hostState = computed(() =>
   display: grid;
   gap: var(--ui-grid-gap, var(--_grid-gap));
   grid-template-columns:
-    repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+    repeat(
+      auto-fit,
+      minmax(
+        min(
+          max(
+            var(--ui-grid-min, var(--_grid-min)),
+            calc(
+              (
+                100% -
+                  (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))
+              ) /
+                max(1, var(--_grid-column-cap, 9999))
+            )
+          ),
+          100%
+        ),
+        1fr
+      )
+    );
   min-inline-size: 0;
   max-inline-size: 100%;
   margin: 0;