From 9e651b8c8734bfbcabe960cf6cb6965b35441d31 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 8 Jun 2026 12:30:58 +0100
Subject: [PATCH 01/14] feat(ui): provide/inject disabled + readonly cascade
 (FE-2810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  Interactive components can now pick up `disabled` and `readonly`
  state from any ancestor via provide/inject, eliminating the need
  to wire those props at every call site.

  Adds `DISABLED_KEY`/`useDisabled`/`provideDisabled` and the same
  for readonly in `src/utils/`. Each composable returns a resolved
  `ComputedRef<boolean>` that ORs the local source with any
  ancestor-provided value. Either key can be provided at any level
  (app shell, layout, page, section); the closest ancestor wins.

  Helper components `<DisabledProvider>` and `<ReadonlyProvider>`
  make declarative scoping ergonomic.

  Wired into 22 disabled-aware components (button, button-group,
  input, input-password, textarea, number-field, select,
  select-grouped, select-cards, combobox, autocomplete, checkbox,
  checkbox-cards, checkbox-group, radio-cards,
  radio-cards-collapsible, radio-group, switch, toggle, command,
  search, link) and 3 readonly-aware (input, input-password,
  textarea). Select-family and number-field readonly deferred — the
  underlying radix-vue primitives don't expose `readonly`.

  Existing `disabled`/`readonly` props continue to work standalone;
  the cascade is OR'd with the prop, so behaviour is unchanged when
  no provider exists.
---
 src/index.ts                                  | 10 +++-
 src/ui/autocomplete/Autocomplete.ce.vue       |  6 ++-
 src/ui/button-group/ButtonGroup.ce.vue        | 10 ++--
 src/ui/button/Button.ce.vue                   | 12 +++--
 src/ui/checkbox-cards/CheckboxCards.ce.vue    |  8 +--
 src/ui/checkbox-group/CheckboxGroup.vue       |  7 ++-
 src/ui/checkbox/Checkbox.ce.vue               | 10 ++--
 src/ui/combobox/Combobox.ce.vue               |  6 ++-
 src/ui/command/Command.vue                    |  7 ++-
 src/ui/disabled-provider/DisabledProvider.vue | 18 +++++++
 src/ui/disabled-provider/index.ts             |  1 +
 src/ui/input-password/InputPassword.ce.vue    | 34 +++++++------
 src/ui/input/Input.ce.vue                     | 36 +++++++------
 src/ui/link/Link.ce.vue                       | 13 +++--
 src/ui/number-field/NumberField.ce.vue        | 33 ++++++------
 .../RadioCardsCollapsible.ce.vue              | 12 +++--
 src/ui/radio-cards/RadioCards.ce.vue          | 10 ++--
 src/ui/radio-group/RadioGroup.vue             |  7 ++-
 src/ui/readonly-provider/ReadonlyProvider.vue | 18 +++++++
 src/ui/readonly-provider/index.ts             |  1 +
 src/ui/search/Search.ce.vue                   |  6 ++-
 src/ui/select-cards/SelectCards.ce.vue        |  6 ++-
 src/ui/select-grouped/SelectGrouped.ce.vue    |  8 +--
 src/ui/select/Select.ce.vue                   |  5 +-
 src/ui/switch/Switch.ce.vue                   | 10 ++--
 src/ui/textarea/Textarea.ce.vue               | 12 +++--
 src/ui/toggle/Toggle.ce.vue                   | 10 ++--
 src/utils/index.ts                            |  2 +
 src/utils/useDisabled.ts                      | 50 +++++++++++++++++++
 src/utils/useReadonly.ts                      | 50 +++++++++++++++++++
 30 files changed, 318 insertions(+), 100 deletions(-)
 create mode 100644 src/ui/disabled-provider/DisabledProvider.vue
 create mode 100644 src/ui/disabled-provider/index.ts
 create mode 100644 src/ui/readonly-provider/ReadonlyProvider.vue
 create mode 100644 src/ui/readonly-provider/index.ts
 create mode 100644 src/utils/useDisabled.ts
 create mode 100644 src/utils/useReadonly.ts

diff --git a/src/index.ts b/src/index.ts
index 209b5e6d84..503cf014e2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,6 +17,7 @@ export * from "./ui/checkbox-group";
 export * from "./ui/combobox";
 export * from "./ui/collapsible";
 export * from "./ui/dialog";
+export * from "./ui/disabled-provider";
 export * from "./ui/drawer";
 export * from "./ui/dropdown-menu";
 export * from "./ui/description-list";
@@ -43,6 +44,7 @@ export * from "./ui/radio-cards";
 export * from "./ui/radio-cards-collapsible";
 export * from "./ui/select-grouped";
 export * from "./ui/radio-group";
+export * from "./ui/readonly-provider";
 export * from "./ui/sanitized";
 export * from "./ui/select";
 export * from "./ui/select-cards";
@@ -71,5 +73,11 @@ export {
   isEmptySlot,
   isMobile,
   type Theme,
-  type ITheme
+  type ITheme,
+  useDisabled,
+  useReadonly,
+  provideDisabled,
+  provideReadonly,
+  DISABLED_KEY,
+  READONLY_KEY
 } from "./utils";
diff --git a/src/ui/autocomplete/Autocomplete.ce.vue b/src/ui/autocomplete/Autocomplete.ce.vue
index e483a08a41..7f8951bb31 100644
--- a/src/ui/autocomplete/Autocomplete.ce.vue
+++ b/src/ui/autocomplete/Autocomplete.ce.vue
@@ -13,7 +13,7 @@
     :uiConfig="props.uiConfig"
     :popoverClass="props.popoverClass"
     :type="props.type"
-    :disabled="props.disabled"
+    :disabled="isDisabled"
     :autoFocus="props.autoFocus"
     :model-value="modelValue"
     v-model:open="open"
@@ -113,7 +113,7 @@ import { ref, computed, watch } from "vue";
 import Avatar from "../avatar/Avatar.ce.vue";
 import Icon from "../icon/Icon.ce.vue";
 import config from "./autocomplete.config";
-import { useStyles } from "../../utils";
+import { useStyles, useDisabled } from "../../utils";
 import { cn } from "../../utils";
 // --- components
 // --- utils
@@ -164,6 +164,8 @@ const meta = computed(() => ({
 const open = ref(false);
 const processing = ref(false);
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const itemValue = computed((): string => props.itemValue || "value");
 const itemLabel = computed((): string => props.itemLabel || "label");
 const modelValue = computed((): AutocompleteItemProps | undefined =>
diff --git a/src/ui/button-group/ButtonGroup.ce.vue b/src/ui/button-group/ButtonGroup.ce.vue
index 0de6f89797..2c5e98a7ea 100644
--- a/src/ui/button-group/ButtonGroup.ce.vue
+++ b/src/ui/button-group/ButtonGroup.ce.vue
@@ -2,7 +2,7 @@
   <span
     :class="cn(styles.buttonGroup.root, props.class)"
     role="group"
-    :aria-disabled="disabled"
+    :aria-disabled="isDisabled"
   >
     <template
       v-for="(item, index) in items"
@@ -14,7 +14,7 @@
           v-bind="item.props"
           :class="styles.buttonGroup.button"
           size="lg"
-          :disabled="disabled || item.props.disabled"
+          :disabled="isDisabled || item.props.disabled"
           variant="ghost"
           :ring="false"
           @click="item.handler?.($event)"
@@ -45,7 +45,7 @@ import { Select } from "../select";
 import config from "./buttonGroup.config";
 // --- types
 import { ButtonGroup } from "./types";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import type { ButtonGroupProps } from "./types";
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
@@ -58,9 +58,11 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
   class: ""
 });
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   variant: "control",
-  isDisabled: props.disabled,
+  isDisabled: isDisabled.value,
   hasRing: true
 }));
 
diff --git a/src/ui/button/Button.ce.vue b/src/ui/button/Button.ce.vue
index 4d461d4614..64cbe99fff 100644
--- a/src/ui/button/Button.ce.vue
+++ b/src/ui/button/Button.ce.vue
@@ -54,7 +54,7 @@ import config from "./button.config";
 import Button from "./Button.vue";
 import ButtonItems from "./ButtonItems.vue";
 // --- utils
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import { kebabCase } from "lodash-es";
 // -- types
 import type { ButtonProps } from "./types";
@@ -79,11 +79,13 @@ defineEmits<{
   click: [event: Event];
 }>();
 
+const isDisabled = useDisabled(() => props.disabled || props.loading);
+
 const component = computed(() => {
   if (props.is) return props.is;
   // NB  if we are disabled and we are a link, we render a button to prevent navigation
-  if (props.to && !props.disabled) return RouterLink;
-  if (props.href && !props.disabled) return "a";
+  if (props.to && !isDisabled.value) return RouterLink;
+  if (props.href && !isDisabled.value) return "a";
   // default
   return Button;
 });
@@ -101,10 +103,10 @@ const meta = computed(() => ({
   align: props.align,
   isIconOnly: props.iconOnly,
   isBlock: props.block,
-  isDisabled: props.disabled || props.loading,
+  isDisabled: isDisabled.value,
   isLoading: props.loading,
   isFocusable: props.focusable,
-  hasRing: props.ring && !props.disabled && props.focusable
+  hasRing: props.ring && !isDisabled.value && props.focusable
 }));
 
 const styles = useStyles(["button"], meta, config, props.uiConfig ?? {});
diff --git a/src/ui/checkbox-cards/CheckboxCards.ce.vue b/src/ui/checkbox-cards/CheckboxCards.ce.vue
index 29fde48603..cf6f0f8d1e 100644
--- a/src/ui/checkbox-cards/CheckboxCards.ce.vue
+++ b/src/ui/checkbox-cards/CheckboxCards.ce.vue
@@ -2,7 +2,7 @@
   <ToggleGroupRoot
     v-model="modelValue"
     :required="props.required"
-    :disabled="props.disabled"
+    :disabled="isDisabled"
     :class="cn(styles.checkboxCards.root, props.class)"
     type="multiple"
     data-testid="checkbox-group"
@@ -15,7 +15,7 @@
         :value="item.value as string"
         :name="item.id"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="isDisabled"
         :no-input="props.noInput"
         :class="cn(styles.checkboxCards.input, props.itemClass)"
         :itemClass="styles.checkboxCards.item"
@@ -107,7 +107,7 @@ import { Label } from "../label";
 import { Link } from "../link";
 import CheckboxCardItem from "./CheckboxCardItem.vue";
 import config from "./checkboxCards.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 // --- components
 // --- utils
 import { includes, isFunction, isString, isNil, kebabCase } from "lodash-es";
@@ -138,6 +138,8 @@ const modelValue = useVModel(props, "modelValue", emits, {
   defaultValue: props.defaultValue
 });
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   noInput: props.noInput,
   cursor: props.cursor,
diff --git a/src/ui/checkbox-group/CheckboxGroup.vue b/src/ui/checkbox-group/CheckboxGroup.vue
index 140b318471..666509d762 100644
--- a/src/ui/checkbox-group/CheckboxGroup.vue
+++ b/src/ui/checkbox-group/CheckboxGroup.vue
@@ -8,17 +8,20 @@ import {
   useForwardPropsEmits
 } from "radix-vue";
 import { computed, type HTMLAttributes } from "vue";
-import { cn } from "../../utils";
+import { assign } from "lodash-es";
+import { cn, useDisabled } from "../../utils";
 
 const props = defineProps<
   ListboxRootProps & { class?: HTMLAttributes["class"] }
 >();
 const emits = defineEmits<ListboxRootEmits>();
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  return assign(delegated, { disabled: isDisabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/checkbox/Checkbox.ce.vue b/src/ui/checkbox/Checkbox.ce.vue
index 6383862e4d..aa7cfcb845 100644
--- a/src/ui/checkbox/Checkbox.ce.vue
+++ b/src/ui/checkbox/Checkbox.ce.vue
@@ -18,9 +18,9 @@ import { computed } from "vue";
 import config from "./checkbox.config";
 import Checkbox from "./Checkbox.vue";
 // --- internal
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 // --- utils
-import { omit } from "lodash-es";
+import { assign, omit } from "lodash-es";
 // --- types
 import type { CheckboxProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -36,8 +36,12 @@ const emits = defineEmits<{
   (e: "update:checked", payload: string | number): void;
 }>();
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultChecked", "checked"])
+  assign(omit(props, ["class", "uiConfig", "defaultChecked", "checked"]), {
+    disabled: isDisabled.value
+  })
 );
 
 const checked = useVModel(props, "checked", emits, {
diff --git a/src/ui/combobox/Combobox.ce.vue b/src/ui/combobox/Combobox.ce.vue
index 3ddad7c0aa..c4d33741c7 100644
--- a/src/ui/combobox/Combobox.ce.vue
+++ b/src/ui/combobox/Combobox.ce.vue
@@ -1,7 +1,7 @@
 <template>
   <Popover
     v-model:open="open"
-    :disabled="props.disabled"
+    :disabled="isDisabled"
     :class="styles.combobox.root"
   >
     <PopoverTrigger as-child :ring="false">
@@ -144,7 +144,7 @@ import {
 import Icon from "../icon/Icon.ce.vue";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import config from "./combobox.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 // --- components
 // --- utils
 import { find, get, isEmpty, isEqual, isFunction, has } from "lodash-es";
@@ -194,6 +194,8 @@ const meta = computed(() => ({
 const open = ref(false);
 const skipFocus = computed(() => props.tabindex === "-1");
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const itemValue = computed((): string => props.itemValue || "value");
 const itemLabel = computed((): string => props.itemLabel || "label");
 
diff --git a/src/ui/command/Command.vue b/src/ui/command/Command.vue
index 104f32b94c..446c33bdf7 100644
--- a/src/ui/command/Command.vue
+++ b/src/ui/command/Command.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
 import { type HTMLAttributes, computed } from "vue";
-import { cn } from "../../utils";
+import { assign } from "lodash-es";
+import { cn, useDisabled } from "../../utils";
 import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
 
 const props = withDefaults(
@@ -14,10 +15,12 @@ const props = withDefaults(
 
 const emits = defineEmits<ComboboxRootEmits>();
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  return assign(delegated, { disabled: isDisabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/disabled-provider/DisabledProvider.vue b/src/ui/disabled-provider/DisabledProvider.vue
new file mode 100644
index 0000000000..35466166ca
--- /dev/null
+++ b/src/ui/disabled-provider/DisabledProvider.vue
@@ -0,0 +1,18 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+// --- external
+import { toRef } from "vue";
+
+// --- utils
+import { provideDisabled } from "../../utils";
+// -----------------------------------------------------------------------------
+
+const props = defineProps<{
+  value: boolean;
+}>();
+
+provideDisabled(toRef(props, "value"));
+</script>
diff --git a/src/ui/disabled-provider/index.ts b/src/ui/disabled-provider/index.ts
new file mode 100644
index 0000000000..e779f00a4b
--- /dev/null
+++ b/src/ui/disabled-provider/index.ts
@@ -0,0 +1 @@
+export { default as DisabledProvider } from "./DisabledProvider.vue";
diff --git a/src/ui/input-password/InputPassword.ce.vue b/src/ui/input-password/InputPassword.ce.vue
index de7c797fc8..156c400e9f 100644
--- a/src/ui/input-password/InputPassword.ce.vue
+++ b/src/ui/input-password/InputPassword.ce.vue
@@ -12,7 +12,7 @@
           <Link
             :class="styles.inputPassword.action"
             :focusable="false"
-            :disabled="props.disabled || props.readonly"
+            :disabled="isDisabled || isReadonly"
             @click.prevent="onGenerate"
           >
             <Icon icon="magic-wand-02" size="2xs" />
@@ -48,8 +48,8 @@ import Tooltip from "../tooltip/Tooltip.ce.vue";
 // --- internal
 import config from "./input-password.config";
 // --- utils
-import { useStyles } from "../../utils";
-import { omit } from "lodash-es";
+import { useStyles, useDisabled, useReadonly } from "../../utils";
+import { assign, omit } from "lodash-es";
 // --- types
 import type { InputPasswordProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -75,18 +75,24 @@ const modelValue = useVModel(props, "modelValue", emit, {
 
 const unmask = ref(false);
 
+const isDisabled = useDisabled(() => props.disabled);
+const isReadonly = useReadonly(() => props.readonly);
+
 const delegatedProps = computed(() =>
-  omit(props, [
-    "class",
-    "uiConfig",
-    "defaultValue",
-    "modelValue",
-    "autocomplete",
-    "generator",
-    "generateLabel",
-    "showLabel",
-    "hideLabel"
-  ])
+  assign(
+    omit(props, [
+      "class",
+      "uiConfig",
+      "defaultValue",
+      "modelValue",
+      "autocomplete",
+      "generator",
+      "generateLabel",
+      "showLabel",
+      "hideLabel"
+    ]),
+    { disabled: isDisabled.value, readonly: isReadonly.value }
+  )
 );
 
 function onGenerate() {
diff --git a/src/ui/input/Input.ce.vue b/src/ui/input/Input.ce.vue
index 4b231d7f46..b253270522 100644
--- a/src/ui/input/Input.ce.vue
+++ b/src/ui/input/Input.ce.vue
@@ -29,10 +29,10 @@ import type { InputMask } from "imask";
 import config from "./input.config";
 // --- components
 import InputItems from "./InputItems.vue";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled, useReadonly } from "../../utils";
 import { kebabCase } from "lodash-es";
 // --- utils
-import { omit } from "lodash-es";
+import { assign, omit } from "lodash-es";
 // --- types
 import type { InputProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -48,6 +48,9 @@ const props = withDefaults(defineProps<InputProps>(), {
 const input = useTemplateRef<InputElement>("input");
 const modelValue = defineModel<InputProps["modelValue"]>("modelValue", {});
 
+const isDisabled = useDisabled(() => props.disabled);
+const isReadonly = useReadonly(() => props.readonly);
+
 const delegatedProps = computed(
   (): Omit<
     InputProps,
@@ -63,19 +66,22 @@ const delegatedProps = computed(
     | "avatarAppend"
     | "autoFocus"
   > =>
-    omit(props, [
-      "class",
-      "uiConfig",
-      "defaultValue",
-      "modelValue",
-      "width",
-      "size",
-      "icon",
-      "avatar",
-      "iconAppend",
-      "avatarAppend",
-      "autoFocus"
-    ])
+    assign(
+      omit(props, [
+        "class",
+        "uiConfig",
+        "defaultValue",
+        "modelValue",
+        "width",
+        "size",
+        "icon",
+        "avatar",
+        "iconAppend",
+        "avatarAppend",
+        "autoFocus"
+      ]),
+      { disabled: isDisabled.value, readonly: isReadonly.value }
+    )
 );
 
 const meta = computed(() => ({
diff --git a/src/ui/link/Link.ce.vue b/src/ui/link/Link.ce.vue
index 2e4391e2ca..6f64771d16 100644
--- a/src/ui/link/Link.ce.vue
+++ b/src/ui/link/Link.ce.vue
@@ -45,7 +45,7 @@ import config from "./link.config";
 // --- components
 import LinkItems from "./LinkItems.vue";
 // --- utils
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import { kebabCase, isEmpty } from "lodash-es";
 // -- types
 import type { LinkProps } from "./types";
@@ -74,13 +74,16 @@ const component = computed(() => {
 
 const isRouterLink = computed(() => component.value === RouterLink);
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   color: props.color,
   size: props.size,
-  isDisabled: props.disabled,
-  isFocusable: props.focusable && !props.disabled,
-  hasRing: props.ring === "focus-visible" && !props.disabled && props.focusable,
-  hasFocusRing: props.ring === "focus" && !props.disabled && props.focusable,
+  isDisabled: isDisabled.value,
+  isFocusable: props.focusable && !isDisabled.value,
+  hasRing:
+    props.ring === "focus-visible" && !isDisabled.value && props.focusable,
+  hasFocusRing: props.ring === "focus" && !isDisabled.value && props.focusable,
   hasIcon:
     !isEmpty(props.icon) ||
     !isEmpty(props.iconAppend) ||
diff --git a/src/ui/number-field/NumberField.ce.vue b/src/ui/number-field/NumberField.ce.vue
index e23ae05091..fce86a1894 100644
--- a/src/ui/number-field/NumberField.ce.vue
+++ b/src/ui/number-field/NumberField.ce.vue
@@ -49,8 +49,8 @@ import NumberFieldIncrement from "./NumberFieldIncrement.vue";
 import NumberFieldInput from "./NumberFieldInput.vue";
 // --- utils
 import { NUMBER_FIELD_VARIANTS } from "./types";
-import { cn, useStyles } from "../../utils";
-import { omit } from "lodash-es";
+import { cn, useStyles, useDisabled } from "../../utils";
+import { assign, omit } from "lodash-es";
 // --- types
 import type { NumberFieldProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -80,18 +80,23 @@ function onUpdate(val: number) {
   modelValue.value = val;
 }
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() =>
-  omit(props, [
-    "class",
-    "uiConfig",
-    "modelValue",
-    "size",
-    "width",
-    "variant",
-    "singleStep",
-    "decrementAction",
-    "incrementAction"
-  ])
+  assign(
+    omit(props, [
+      "class",
+      "uiConfig",
+      "modelValue",
+      "size",
+      "width",
+      "variant",
+      "singleStep",
+      "decrementAction",
+      "incrementAction"
+    ]),
+    { disabled: isDisabled.value }
+  )
 );
 
 const decrementIcon = computed(() => {
@@ -118,7 +123,7 @@ const meta = computed(() => {
     size: props.size,
     width: getWidth.value,
     variant: props.variant,
-    isDisabled: props.disabled
+    isDisabled: isDisabled.value
   };
 });
 
diff --git a/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue b/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue
index 81b8152064..6c18c1e051 100644
--- a/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue
+++ b/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue
@@ -4,7 +4,7 @@
       <RadioGroup
         :model-value="modelValue"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="isDisabled"
         @update:model-value="onSelectionChange"
         :class="cn(styles.radioCards.root, 'gap-0')"
       >
@@ -16,7 +16,7 @@
           :name="props.name"
           :label="selectedItem?.label"
           :required="props.required"
-          :disabled="props.disabled"
+          :disabled="isDisabled"
           :model-value="modelValue"
           :columns="props.columns"
           :value="selectedItem.value"
@@ -62,7 +62,7 @@
               :name="props.name"
               :label="option?.label"
               :required="props.required"
-              :disabled="props.disabled"
+              :disabled="isDisabled"
               :model-value="modelValue"
               :columns="props.columns"
               :value="option.value"
@@ -89,7 +89,7 @@
           :label="label"
           size="sm"
           variant="solid"
-          :disabled="props.disabled"
+          :disabled="isDisabled"
           @click="toggleExpanded"
         />
       </slot>
@@ -109,7 +109,7 @@ import { RadioGroup } from "../radio-group";
 import { Skeleton } from "../skeleton";
 import RadioCardItem from "./RadioCardItem.vue";
 import config from "./radioCards.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 // --- types
 import type { RadioCardsCollapsibleProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -135,6 +135,8 @@ const _emits = defineEmits<{
 const modelValue = defineModel<string>("modelValue");
 const open = defineModel<boolean>("open");
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const isExpanded = computed({
   get: () => props.forceOpen || !!open.value,
   set: (val: boolean) => {
diff --git a/src/ui/radio-cards/RadioCards.ce.vue b/src/ui/radio-cards/RadioCards.ce.vue
index 01de597ef6..2386f35475 100644
--- a/src/ui/radio-cards/RadioCards.ce.vue
+++ b/src/ui/radio-cards/RadioCards.ce.vue
@@ -3,7 +3,7 @@
     :is="useInputGroup ? RadioGroup : 'div'"
     :model-value="modelValue"
     :required="props.required"
-    :disabled="props.disabled"
+    :disabled="isDisabled"
     :class="cn(styles.radioCards.root, props.class)"
     @update:model-value="(v: string | number) => onChange(v)"
     v-auto-animate
@@ -22,7 +22,7 @@
         :secondaryBadge="option?.secondaryBadge"
         :action="option?.action"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="isDisabled"
         :model-value="modelValue"
         :columns="props.columns"
         :value="option.value"
@@ -53,7 +53,7 @@ import { computed } from "vue";
 import { RadioGroup } from "../radio-group";
 import RadioCardItem from "./RadioCardItem.vue";
 import config from "./radioCards.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 import { kebabCase } from "lodash-es";
 // --- types
 import type { RadioCardsProps } from "./types";
@@ -81,6 +81,8 @@ const forwarded = useForwardPropsEmits({}, emits);
 
 const modelValue = defineModel<string | number>();
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   columns: props.columns
 }));
@@ -93,7 +95,7 @@ const styles = useStyles(
 );
 
 const onChange = (value: any) => {
-  if (props.disabled) return;
+  if (isDisabled.value) return;
 
   if (!props.required && value === modelValue.value) {
     modelValue.value = undefined;
diff --git a/src/ui/radio-group/RadioGroup.vue b/src/ui/radio-group/RadioGroup.vue
index da8ac6f8ac..20dd476cf7 100644
--- a/src/ui/radio-group/RadioGroup.vue
+++ b/src/ui/radio-group/RadioGroup.vue
@@ -6,17 +6,20 @@ import {
   useForwardPropsEmits
 } from "radix-vue";
 import { computed, type HTMLAttributes } from "vue";
-import { cn } from "../../utils";
+import { assign } from "lodash-es";
+import { cn, useDisabled } from "../../utils";
 
 const props = defineProps<
   RadioGroupRootProps & { class?: HTMLAttributes["class"] }
 >();
 const emits = defineEmits<RadioGroupRootEmits>();
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  return assign(delegated, { disabled: isDisabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/readonly-provider/ReadonlyProvider.vue b/src/ui/readonly-provider/ReadonlyProvider.vue
new file mode 100644
index 0000000000..64c527a768
--- /dev/null
+++ b/src/ui/readonly-provider/ReadonlyProvider.vue
@@ -0,0 +1,18 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+// --- external
+import { toRef } from "vue";
+
+// --- utils
+import { provideReadonly } from "../../utils";
+// -----------------------------------------------------------------------------
+
+const props = defineProps<{
+  value: boolean;
+}>();
+
+provideReadonly(toRef(props, "value"));
+</script>
diff --git a/src/ui/readonly-provider/index.ts b/src/ui/readonly-provider/index.ts
new file mode 100644
index 0000000000..1e7d629ffa
--- /dev/null
+++ b/src/ui/readonly-provider/index.ts
@@ -0,0 +1 @@
+export { default as ReadonlyProvider } from "./ReadonlyProvider.vue";
diff --git a/src/ui/search/Search.ce.vue b/src/ui/search/Search.ce.vue
index 7fd2c3faa1..c23cedc659 100644
--- a/src/ui/search/Search.ce.vue
+++ b/src/ui/search/Search.ce.vue
@@ -3,7 +3,7 @@
     <PopoverTrigger as-child>
       <FormControl
         :key="props.id"
-        :disabled="props.disabled"
+        :disabled="isDisabled"
         :formItemId="`${props.id}-search`"
         :auto-focus="props.autoFocus"
         :placeholder="placeholder"
@@ -67,7 +67,7 @@ import { FormControl } from "../form";
 import Input from "../input/Input.ce.vue";
 // --- utils
 import config from "./search.config";
-import { useStyles } from "../../utils";
+import { useStyles, useDisabled } from "../../utils";
 import { uniqueId } from "lodash-es";
 // --- types
 import type { SearchItem } from "./types";
@@ -104,6 +104,8 @@ const emit = defineEmits<{
 const internalSearch = ref("");
 const open = ref(false);
 
+const isDisabled = useDisabled(() => props.disabled);
+
 // --- computed
 
 const hasModelValue = computed(() => props.modelValue !== undefined);
diff --git a/src/ui/select-cards/SelectCards.ce.vue b/src/ui/select-cards/SelectCards.ce.vue
index cd6d188ca9..2832214e05 100644
--- a/src/ui/select-cards/SelectCards.ce.vue
+++ b/src/ui/select-cards/SelectCards.ce.vue
@@ -2,7 +2,7 @@
   <DropdownMenuRoot v-model:open="open" tabindex="-1">
     <DropdownMenuTrigger
       as-child
-      :disabled="disabled"
+      :disabled="isDisabled"
       :class="styles.select.trigger"
     >
       <TriggerButton
@@ -93,7 +93,7 @@ import { ref, computed } from "vue";
 import Item from "./components/Item.vue";
 import TriggerButton from "./components/TriggerButton.vue";
 import config from "./selectCards.config";
-import { cn, useStyles, usePortalTarget } from "../../utils";
+import { cn, useStyles, usePortalTarget, useDisabled } from "../../utils";
 // --- components
 // --- types
 import { first, find } from "lodash-es";
@@ -112,6 +112,8 @@ const portalTo = usePortalTarget(() => props.to);
 
 const open = ref(false);
 const isKeyboardNav = ref(false);
+
+const isDisabled = useDisabled(() => props.disabled);
 const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue
diff --git a/src/ui/select-grouped/SelectGrouped.ce.vue b/src/ui/select-grouped/SelectGrouped.ce.vue
index 0490bf0ade..0be3a51114 100644
--- a/src/ui/select-grouped/SelectGrouped.ce.vue
+++ b/src/ui/select-grouped/SelectGrouped.ce.vue
@@ -3,7 +3,7 @@
     :is="props.as"
     role="radiogroup"
     :aria-required="props.required"
-    :aria-disabled="props.disabled"
+    :aria-disabled="isDisabled"
     :class="cn(styles.selectGrouped.root, props.class)"
     data-testid="select-grouped"
     v-auto-animate
@@ -17,7 +17,7 @@
       :focused-group-index="focusedGroupIndex"
       :model-value="modelValue"
       :required="props.required"
-      :disabled="props.disabled"
+      :disabled="isDisabled"
       :uiConfig="props.uiConfig"
       @update:model-value="onChange"
       @focus-next-group="focusGroup(index + 1)"
@@ -55,7 +55,7 @@ import { computed, ref } from "vue";
 import config from "./selectGrouped.config";
 // --- components
 import SelectGroupedOption from "./SelectGroupedOption.vue";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 // --- types
 import type { SelectGroupedProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -72,6 +72,8 @@ const modelValue = defineModel<string>({ default: "" });
 const groupRefs = ref<{ setFocus: () => void }[]>([]);
 const focusedGroupIndex = ref(0);
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({}));
 
 const styles = useStyles<typeof config>(
diff --git a/src/ui/select/Select.ce.vue b/src/ui/select/Select.ce.vue
index e2d73f7165..7cb95313c0 100644
--- a/src/ui/select/Select.ce.vue
+++ b/src/ui/select/Select.ce.vue
@@ -4,6 +4,7 @@
     v-model:open="open"
     :key="uid"
     :model-value="modelValue"
+    :disabled="isDisabled"
   >
     <SelectTrigger
       v-bind="$attrs"
@@ -87,7 +88,7 @@ import SelectItem from "./SelectItem.vue";
 import SelectTrigger from "./SelectTrigger.vue";
 import SelectValue from "./SelectValue.vue";
 // --- utils
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 import { isEmpty, isEqual, isNull, find } from "lodash-es";
 // --- types
 import type { SelectProps } from "./types";
@@ -121,6 +122,8 @@ const props = withDefaults(defineProps<SelectProps>(), {
 const emits = defineEmits<SelectRootEmits & SelectContentEmits>();
 const forwarded = useForwardPropsEmits(props, emits);
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue
diff --git a/src/ui/switch/Switch.ce.vue b/src/ui/switch/Switch.ce.vue
index a900f7dd94..12b05ca2cf 100644
--- a/src/ui/switch/Switch.ce.vue
+++ b/src/ui/switch/Switch.ce.vue
@@ -12,10 +12,10 @@ import config from "./switch.config";
 import Switch from "./Switch.vue";
 
 // --- internal
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 
 // --- utils
-import { omit } from "lodash-es";
+import { assign, omit } from "lodash-es";
 
 // --- types
 import type { SwitchProps } from "./types";
@@ -28,7 +28,11 @@ const props = withDefaults(defineProps<SwitchProps>(), {
 
 const emits = defineEmits<SwitchRootEmits>();
 
-const delegatedProps = computed(() => omit(props, ["class", "uiConfig"]));
+const isDisabled = useDisabled(() => props.disabled);
+
+const delegatedProps = computed(() =>
+  assign(omit(props, ["class", "uiConfig"]), { disabled: isDisabled.value })
+);
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
diff --git a/src/ui/textarea/Textarea.ce.vue b/src/ui/textarea/Textarea.ce.vue
index e0226685ee..38e120ed4b 100644
--- a/src/ui/textarea/Textarea.ce.vue
+++ b/src/ui/textarea/Textarea.ce.vue
@@ -16,9 +16,9 @@ import { computed } from "vue";
 import config from "./textarea.config";
 import Textarea from "./Textarea.vue";
 // --- internal
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled, useReadonly } from "../../utils";
 // --- utils
-import { omit } from "lodash-es";
+import { assign, omit } from "lodash-es";
 // --- types
 import type { TextareaProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -32,8 +32,14 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void;
 }>();
 
+const isDisabled = useDisabled(() => props.disabled);
+const isReadonly = useReadonly(() => props.readonly);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultValue", "modelValue"])
+  assign(omit(props, ["class", "uiConfig", "defaultValue", "modelValue"]), {
+    disabled: isDisabled.value,
+    readonly: isReadonly.value
+  })
 );
 
 const modelValue = useVModel(props, "modelValue", emits, {
diff --git a/src/ui/toggle/Toggle.ce.vue b/src/ui/toggle/Toggle.ce.vue
index 565b95f6f5..6717770595 100644
--- a/src/ui/toggle/Toggle.ce.vue
+++ b/src/ui/toggle/Toggle.ce.vue
@@ -16,9 +16,9 @@ import { computed } from "vue";
 import config from "./toggle.config";
 import Toggle from "./Toggle.vue";
 // --- internal
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 // --- utils
-import { omit } from "lodash-es";
+import { assign, omit } from "lodash-es";
 // --- types
 import type { ToggleProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -32,8 +32,12 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void;
 }>();
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultValue", "modelValue"])
+  assign(omit(props, ["class", "uiConfig", "defaultValue", "modelValue"]), {
+    disabled: isDisabled.value
+  })
 );
 
 const modelValue = useVModel(props, "modelValue", emits, {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 5bb64c1176..d53af0e595 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,6 +3,8 @@ export * from "./useThemes";
 export * from "./twMerge";
 export * from "./isDeepEmpty";
 export * from "./useValidation";
+export * from "./useDisabled";
+export * from "./useReadonly";
 export * from "./portalTarget";
 export * from "./useImageZoom";
 export * from "./useArrowNavigation";
diff --git a/src/utils/useDisabled.ts b/src/utils/useDisabled.ts
new file mode 100644
index 0000000000..3d92cd551a
--- /dev/null
+++ b/src/utils/useDisabled.ts
@@ -0,0 +1,50 @@
+// --- external
+import { computed, inject, provide, toValue } from "vue";
+import type {
+  ComputedRef,
+  InjectionKey,
+  MaybeRef,
+  MaybeRefOrGetter
+} from "vue";
+
+// -----------------------------------------------------------------------------
+// --- key
+
+/**
+ * Injection key for the disabled signal. Any ancestor `provide()` under this
+ * key will be picked up by `useDisabled` descendants.
+ */
+export const DISABLED_KEY: InjectionKey<MaybeRef<boolean>> =
+  Symbol("UPMIND.UI.DISABLED");
+
+// -----------------------------------------------------------------------------
+// --- composable
+
+/**
+ * Resolves the disabled state for an interactive component. ORs the local
+ * source (e.g. a `disabled` prop) with any ancestor-provided value.
+ *
+ * @param source - local disabled source, e.g. `() => props.disabled`
+ */
+export const useDisabled = (
+  source?: MaybeRefOrGetter<boolean | undefined>
+): ComputedRef<boolean> => {
+  const provided = inject(DISABLED_KEY, false);
+
+  /** Resolved disabled — true when local source OR any ancestor provides true. */
+  const isDisabled = computed(
+    () => Boolean(toValue(source)) || Boolean(toValue(provided))
+  );
+
+  return isDisabled;
+};
+
+// -----------------------------------------------------------------------------
+// --- provider
+
+/**
+ * Provides a disabled signal to descendants. Accepts a plain boolean or a ref.
+ */
+export const provideDisabled = (value: MaybeRef<boolean>): void => {
+  provide(DISABLED_KEY, value);
+};
diff --git a/src/utils/useReadonly.ts b/src/utils/useReadonly.ts
new file mode 100644
index 0000000000..8c783a8771
--- /dev/null
+++ b/src/utils/useReadonly.ts
@@ -0,0 +1,50 @@
+// --- external
+import { computed, inject, provide, toValue } from "vue";
+import type {
+  ComputedRef,
+  InjectionKey,
+  MaybeRef,
+  MaybeRefOrGetter
+} from "vue";
+
+// -----------------------------------------------------------------------------
+// --- key
+
+/**
+ * Injection key for the readonly signal. Any ancestor `provide()` under this
+ * key will be picked up by `useReadonly` descendants.
+ */
+export const READONLY_KEY: InjectionKey<MaybeRef<boolean>> =
+  Symbol("UPMIND.UI.READONLY");
+
+// -----------------------------------------------------------------------------
+// --- composable
+
+/**
+ * Resolves the readonly state for an interactive component. ORs the local
+ * source (e.g. a `readonly` prop) with any ancestor-provided value.
+ *
+ * @param source - local readonly source, e.g. `() => props.readonly`
+ */
+export const useReadonly = (
+  source?: MaybeRefOrGetter<boolean | undefined>
+): ComputedRef<boolean> => {
+  const provided = inject(READONLY_KEY, false);
+
+  /** Resolved readonly — true when local source OR any ancestor provides true. */
+  const isReadonly = computed(
+    () => Boolean(toValue(source)) || Boolean(toValue(provided))
+  );
+
+  return isReadonly;
+};
+
+// -----------------------------------------------------------------------------
+// --- provider
+
+/**
+ * Provides a readonly signal to descendants. Accepts a plain boolean or a ref.
+ */
+export const provideReadonly = (value: MaybeRef<boolean>): void => {
+  provide(READONLY_KEY, value);
+};

From d4b6ca15ac30ba87c3446e15bbf8e07103a9a801 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 8 Jun 2026 13:16:25 +0100
Subject: [PATCH 02/14] fix(Input): visual disabled state via data-disabled
 attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  Input had no visual disabled treatment — functionally `:disabled`
  on the native input worked, but the container showed no opacity
  dim, cursor change, or hover suppression. The cascade landed in
  9e651b8c (FE-2810) exposed this because the input now gets
  disabled more often via ambient context.

  Mirrors the radio-cards pattern: sets `data-disabled` on the
  container from the resolved disabled state, and extends the
  container variants with `data-[disabled]:pointer-events-none
  data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`
---
 src/ui/input/Input.ce.vue    | 5 ++++-
 src/ui/input/input.config.ts | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/input/Input.ce.vue b/src/ui/input/Input.ce.vue
index b253270522..dd4d981887 100644
--- a/src/ui/input/Input.ce.vue
+++ b/src/ui/input/Input.ce.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="cn(styles.input.container, props.class)">
+  <div
+    :class="cn(styles.input.container, props.class)"
+    :data-disabled="isDisabled || undefined"
+  >
     <slot name="prepend">
       <InputItems :icon="props.icon" :avatar="props.avatar" />
     </slot>
diff --git a/src/ui/input/input.config.ts b/src/ui/input/input.config.ts
index f3d76b83ac..eee7e627be 100644
--- a/src/ui/input/input.config.ts
+++ b/src/ui/input/input.config.ts
@@ -4,7 +4,7 @@ import { ringClasses, invalidRingClasses } from "../../assets/styles";
 // -----------------------------------------------------------------------------
 
 export const containerVariants = cva(
-  `bg-control-surface shadow-control-default hover:shadow-control-hover text-md autofill control-radius flex items-center gap-3 px-4 py-2 transition-[border-color,opacity,box-shadow] duration-200`,
+  `bg-control-surface shadow-control-default hover:shadow-control-hover text-md autofill control-radius flex items-center gap-3 px-4 py-2 transition-[border-color,opacity,box-shadow] duration-200 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,
   {
     variants: {
       width: {

From 47394318b6b72b2f6dafebd46a6eeb42355b9d43 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 8 Jun 2026 16:17:34 +0100
Subject: [PATCH 03/14] fix(Form): re-provide resolved disabled to descendants
 (FE-2810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  Form's processing/disabled state only reached JsonForms-rendered
  controls via the `:enabled` prop. Non-JsonForms slot content
  (e.g. `<Manage>` rendering `<RadioCardsCollapsible>` for address
  selection) only consumed the ancestor disabled cascade, missing
  Form's own processing signal — so during a form submit, text
  inputs stayed locked but the address cards briefly enabled,
  creating a visible desync.

  Form now calls `provideDisabled(isDisabled)` after its existing
  `useDisabled(...)` resolution, becoming a disabled boundary:
  descendants inject Form's resolved state (cascade ∪ disabled ∪
  processing) rather than the cascade alone.

  Standard pattern — Vuetify's `<v-form>` and FormKit's `<FormKit>`
  do the same for the same reason.
---
 src/ui/form/Form.ce.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ui/form/Form.ce.vue b/src/ui/form/Form.ce.vue
index e75bb4962f..928fcc68a6 100644
--- a/src/ui/form/Form.ce.vue
+++ b/src/ui/form/Form.ce.vue
@@ -56,7 +56,13 @@ import config from "./form.config";
 import { upmindUIRenderers } from "./renderers";
 import { iterateSchema } from "./renderers/utils";
 // --- utils
-import { useStyles, isDeepEmpty, useValidation } from "../../utils";
+import {
+  useStyles,
+  isDeepEmpty,
+  useValidation,
+  useDisabled,
+  provideDisabled
+} from "../../utils";
 import { cn } from "../../utils";
 import {
   isEmpty,
@@ -138,6 +144,14 @@ const touched = useVModel(props, "touched", emits, {
 });
 // ---
 
+const isDisabled = useDisabled(() => props.disabled || props.processing);
+
+// Re-provide the form's resolved disabled state so descendants — including
+// non-JsonForms slot content (e.g. <Manage> rendering RadioCardsCollapsible) —
+// inherit the form's `processing` signal alongside the ancestor cascade, not
+// just the cascade alone.
+provideDisabled(isDisabled);
+
 const meta = computed(() => {
   return {
     canTranslate: !isEmpty(props.i18n),
@@ -147,7 +161,7 @@ const meta = computed(() => {
     isDirty: baseModel !== model.value,
     isTouched: touched.value,
     isValid: isEmpty(errors.value),
-    isDisabled: props.disabled || props.processing
+    isDisabled: isDisabled.value
   };
 });
 

From d41d9395d7f2839dda5ef89148cec0da150fc6af Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 8 Jun 2026 16:26:47 +0100
Subject: [PATCH 04/14] refactor(controls): isDisabled via CVA variant
 (FE-2810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  Replaces the `:data-disabled="isDisabled || undefined"` + Tailwind
  `data-[disabled]:*` pattern with a proper CVA `isDisabled` variant
  on Input, RadioCards, and RadioCardsCollapsible item wrappers.

  Disabled visual now flows: `useDisabled()` → `meta.isDisabled` →
  CVA variant → classes. No DOM data-attribute, no Tailwind arbitrary
  selector, no `|| undefined` idiom. Matches how `Button.ce.vue`
  handles its own disabled visual and aligns with the "classes live
  in `*.config.ts` + `useStyles`" convention.
---
 src/ui/input/Input.ce.vue                          |  8 +++-----
 src/ui/input/input.config.ts                       |  5 ++++-
 src/ui/radio-cards-collapsible/RadioCardItem.vue   | 13 ++++++++-----
 .../radio-cards-collapsible/radioCards.config.ts   |  3 +++
 src/ui/radio-cards/RadioCardItem.vue               | 14 ++++++++------
 src/ui/radio-cards/radioCards.config.ts            |  9 ++++++++-
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/ui/input/Input.ce.vue b/src/ui/input/Input.ce.vue
index dd4d981887..8a8bb91dbf 100644
--- a/src/ui/input/Input.ce.vue
+++ b/src/ui/input/Input.ce.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    :class="cn(styles.input.container, props.class)"
-    :data-disabled="isDisabled || undefined"
-  >
+  <div :class="cn(styles.input.container, props.class)">
     <slot name="prepend">
       <InputItems :icon="props.icon" :avatar="props.avatar" />
     </slot>
@@ -89,7 +86,8 @@ const delegatedProps = computed(
 
 const meta = computed(() => ({
   width: props.width,
-  hasRing: props.ring
+  hasRing: props.ring,
+  isDisabled: isDisabled.value
 }));
 
 const styles = useStyles(
diff --git a/src/ui/input/input.config.ts b/src/ui/input/input.config.ts
index eee7e627be..343b945179 100644
--- a/src/ui/input/input.config.ts
+++ b/src/ui/input/input.config.ts
@@ -4,7 +4,7 @@ import { ringClasses, invalidRingClasses } from "../../assets/styles";
 // -----------------------------------------------------------------------------
 
 export const containerVariants = cva(
-  `bg-control-surface shadow-control-default hover:shadow-control-hover text-md autofill control-radius flex items-center gap-3 px-4 py-2 transition-[border-color,opacity,box-shadow] duration-200 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,
+  `bg-control-surface shadow-control-default hover:shadow-control-hover text-md autofill control-radius flex items-center gap-3 px-4 py-2 transition-[border-color,opacity,box-shadow] duration-200`,
   {
     variants: {
       width: {
@@ -14,6 +14,9 @@ export const containerVariants = cva(
       hasRing: {
         true: `${ringClasses} ${invalidRingClasses}`,
         false: ""
+      },
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed opacity-50"
       }
     },
     defaultVariants: {
diff --git a/src/ui/radio-cards-collapsible/RadioCardItem.vue b/src/ui/radio-cards-collapsible/RadioCardItem.vue
index 40732c7c06..9b6948c09d 100644
--- a/src/ui/radio-cards-collapsible/RadioCardItem.vue
+++ b/src/ui/radio-cards-collapsible/RadioCardItem.vue
@@ -10,7 +10,7 @@
         :value="value"
         :name="props.name"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="isDisabled"
         :class="styles.radioCards.input"
         :tabindex="isSelected || !modelValue ? 0 : -1"
         :data-state="isSelected ? 'checked' : ''"
@@ -39,7 +39,7 @@ import { computed } from "vue";
 import Label from "../label/Label.ce.vue";
 import { RadioGroupItem } from "../radio-group";
 import config from "./radioCards.config";
-import { useStyles } from "../../utils";
+import { useStyles, useDisabled } from "../../utils";
 // --- types
 import type { RadioCardsCollapsibleItemProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -55,17 +55,20 @@ const isSelected = computed(() => {
   return props.modelValue === props.value;
 });
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   isMinimal: props.minimal,
-  columns: props.columns
+  columns: props.columns,
+  isDisabled: isDisabled.value
 }));
 
 const styles = useStyles(["radioCards"], meta, config, props.uiConfig ?? {});
 
 const onBlur = (e: FocusEvent) => {
-  if (props.disabled) {
+  if (isDisabled.value) {
     watchOnce(
-      () => props.disabled,
+      () => isDisabled.value,
       () => {
         const el = e.target as HTMLElement;
         if (el && el.dataset.state === "checked") {
diff --git a/src/ui/radio-cards-collapsible/radioCards.config.ts b/src/ui/radio-cards-collapsible/radioCards.config.ts
index fb1201a58e..034a6a1fdc 100644
--- a/src/ui/radio-cards-collapsible/radioCards.config.ts
+++ b/src/ui/radio-cards-collapsible/radioCards.config.ts
@@ -13,6 +13,9 @@ export const itemVariants = cva(
         4: "col-span-12 md:col-span-3",
         5: "col-span-12 md:col-span-2",
         6: "col-span-12 md:col-span-2"
+      },
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed opacity-50"
       }
     },
     defaultVariants: {
diff --git a/src/ui/radio-cards/RadioCardItem.vue b/src/ui/radio-cards/RadioCardItem.vue
index 0b5590dbf7..502793c703 100644
--- a/src/ui/radio-cards/RadioCardItem.vue
+++ b/src/ui/radio-cards/RadioCardItem.vue
@@ -3,7 +3,6 @@
     :for="`${props.name}-${index}`"
     :class="cn(styles.radioCards.item.root, styles.radioCards.item.size)"
     :data-state="isSelected ? 'checked' : ''"
-    :data-disabled="props.disabled || undefined"
     :data-hover="props.dataHover"
     :data-focus="props.dataFocus"
   >
@@ -13,7 +12,7 @@
         :value="value"
         :name="props.name"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="isDisabled"
         :tabindex="isSelected || !modelValue ? 0 : -1"
         :data-state="isSelected ? 'checked' : 'unchecked'"
         :uiConfig="uiConfig"
@@ -89,7 +88,7 @@ import Label from "../label/Label.ce.vue";
 import { Link } from "../link";
 import { RadioGroupItem } from "../radio-group";
 import config from "./radioCards.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 // --- types
 import { isFunction, isString, isNil } from "lodash-es";
 import type { RadioCardsItemActionProps, RadioCardsItemProps } from "./types";
@@ -113,8 +112,11 @@ const isSelected = computed(() => {
   return props.modelValue === props.value;
 });
 
+const isDisabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
-  columns: props.columns
+  columns: props.columns,
+  isDisabled: isDisabled.value
 }));
 
 const styles = useStyles(
@@ -125,9 +127,9 @@ const styles = useStyles(
 );
 
 const onBlur = (e: FocusEvent) => {
-  if (props.disabled) {
+  if (isDisabled.value) {
     watchOnce(
-      () => props.disabled,
+      () => isDisabled.value,
       () => {
         const el = e.target as HTMLElement;
         if (el && el.dataset.state === "checked") {
diff --git a/src/ui/radio-cards/radioCards.config.ts b/src/ui/radio-cards/radioCards.config.ts
index d21c1f6801..5c51c2e891 100644
--- a/src/ui/radio-cards/radioCards.config.ts
+++ b/src/ui/radio-cards/radioCards.config.ts
@@ -19,7 +19,14 @@ export const itemSizeVariants = cva("", {
 });
 
 export const itemVariants = cva(
-  `bg-control-surface text-control-foreground group control-radius shadow-control-default [&:hover,&[data-hover=true]]:shadow-control-hover radius-control flex cursor-pointer list-none gap-2 py-4 pr-4 pl-3 font-normal transition-shadow duration-200 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 md:my-0 ${ringClasses}`
+  `bg-control-surface text-control-foreground group control-radius shadow-control-default [&:hover,&[data-hover=true]]:shadow-control-hover radius-control flex cursor-pointer list-none gap-2 py-4 pr-4 pl-3 font-normal transition-shadow duration-200 md:my-0 ${ringClasses}`,
+  {
+    variants: {
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed opacity-50"
+      }
+    }
+  }
 );
 
 export const rootVariants = cva(`grid w-full grid-cols-12 gap-2`);

From 6f4644fc9c8a0bafb7eb5dbe97862081640984c8 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 8 Jun 2026 17:14:34 +0100
Subject: [PATCH 05/14] refactor(ui): remove unused provider helpers (FE-2810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  `DisabledProvider` / `ReadonlyProvider` were slot-only wrappers around
  `provideDisabled()` / `provideReadonly()` for template-scoped cascade
  provisioning. Zero usages found across packages/ and apps/ — every
  actual provide site (UpmPage, Form) calls the function directly from
  `<script setup>`.

  Removes:
  - `packages/ui/src/ui/disabled-provider/`
  - `packages/ui/src/ui/readonly-provider/`
  - Two top-level `export *` re-exports

  Trivial to re-add (~10 LOC per component) if a template-scoped use
  case ever materialises — keeping surface area minimal for now.
---
 src/index.ts                                  |  2 --
 src/ui/disabled-provider/DisabledProvider.vue | 18 ------------------
 src/ui/disabled-provider/index.ts             |  1 -
 src/ui/readonly-provider/ReadonlyProvider.vue | 18 ------------------
 src/ui/readonly-provider/index.ts             |  1 -
 5 files changed, 40 deletions(-)
 delete mode 100644 src/ui/disabled-provider/DisabledProvider.vue
 delete mode 100644 src/ui/disabled-provider/index.ts
 delete mode 100644 src/ui/readonly-provider/ReadonlyProvider.vue
 delete mode 100644 src/ui/readonly-provider/index.ts

diff --git a/src/index.ts b/src/index.ts
index 503cf014e2..5999ee520d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,7 +17,6 @@ export * from "./ui/checkbox-group";
 export * from "./ui/combobox";
 export * from "./ui/collapsible";
 export * from "./ui/dialog";
-export * from "./ui/disabled-provider";
 export * from "./ui/drawer";
 export * from "./ui/dropdown-menu";
 export * from "./ui/description-list";
@@ -44,7 +43,6 @@ export * from "./ui/radio-cards";
 export * from "./ui/radio-cards-collapsible";
 export * from "./ui/select-grouped";
 export * from "./ui/radio-group";
-export * from "./ui/readonly-provider";
 export * from "./ui/sanitized";
 export * from "./ui/select";
 export * from "./ui/select-cards";
diff --git a/src/ui/disabled-provider/DisabledProvider.vue b/src/ui/disabled-provider/DisabledProvider.vue
deleted file mode 100644
index 35466166ca..0000000000
--- a/src/ui/disabled-provider/DisabledProvider.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <slot />
-</template>
-
-<script setup lang="ts">
-// --- external
-import { toRef } from "vue";
-
-// --- utils
-import { provideDisabled } from "../../utils";
-// -----------------------------------------------------------------------------
-
-const props = defineProps<{
-  value: boolean;
-}>();
-
-provideDisabled(toRef(props, "value"));
-</script>
diff --git a/src/ui/disabled-provider/index.ts b/src/ui/disabled-provider/index.ts
deleted file mode 100644
index e779f00a4b..0000000000
--- a/src/ui/disabled-provider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DisabledProvider } from "./DisabledProvider.vue";
diff --git a/src/ui/readonly-provider/ReadonlyProvider.vue b/src/ui/readonly-provider/ReadonlyProvider.vue
deleted file mode 100644
index 64c527a768..0000000000
--- a/src/ui/readonly-provider/ReadonlyProvider.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <slot />
-</template>
-
-<script setup lang="ts">
-// --- external
-import { toRef } from "vue";
-
-// --- utils
-import { provideReadonly } from "../../utils";
-// -----------------------------------------------------------------------------
-
-const props = defineProps<{
-  value: boolean;
-}>();
-
-provideReadonly(toRef(props, "value"));
-</script>
diff --git a/src/ui/readonly-provider/index.ts b/src/ui/readonly-provider/index.ts
deleted file mode 100644
index 1e7d629ffa..0000000000
--- a/src/ui/readonly-provider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ReadonlyProvider } from "./ReadonlyProvider.vue";

From d0f3337842f2e804f8b0927216dd4f6531cacf96 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Tue, 9 Jun 2026 09:08:46 +0100
Subject: [PATCH 06/14] refactor(Form): drop unused provideDisabled re-provide
 (FE-2810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  Earlier added Form `provideDisabled(isDisabled)` on the assumption
  that non-JsonForms slot content (RadioCardsCollapsible in Manage)
  needed Form's processing signal via the cascade. That assumption
  was wrong:

  - Manage renders the list and edit-form as siblings — the radio
    cards aren't inside any `<Form>`.
  - JsonForms-rendered controls inside Form already get disabled via
    `:enabled="!meta.isDisabled"` → renderer's
    `appliedOptions.disabled` → Input's own `useDisabled` ORs with
    the cascade.
  - Default action buttons read `meta.isProcessing` explicitly.
---
 src/ui/form/Form.ce.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/ui/form/Form.ce.vue b/src/ui/form/Form.ce.vue
index 928fcc68a6..63d53d62e4 100644
--- a/src/ui/form/Form.ce.vue
+++ b/src/ui/form/Form.ce.vue
@@ -60,8 +60,7 @@ import {
   useStyles,
   isDeepEmpty,
   useValidation,
-  useDisabled,
-  provideDisabled
+  useDisabled
 } from "../../utils";
 import { cn } from "../../utils";
 import {
@@ -146,12 +145,6 @@ const touched = useVModel(props, "touched", emits, {
 
 const isDisabled = useDisabled(() => props.disabled || props.processing);
 
-// Re-provide the form's resolved disabled state so descendants — including
-// non-JsonForms slot content (e.g. <Manage> rendering RadioCardsCollapsible) —
-// inherit the form's `processing` signal alongside the ancestor cascade, not
-// just the cascade alone.
-provideDisabled(isDisabled);
-
 const meta = computed(() => {
   return {
     canTranslate: !isEmpty(props.i18n),

From ae7c5a6d8ff231a8d9a3beb81090416882391371 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Thu, 11 Jun 2026 13:44:58 +0100
Subject: [PATCH 07/14] feat(link): loading state with underline shimmer
 (FE-2810)

  - new shimmer-mask utility: alternating CSS-mask sweep over currentColor
  - loading implies disabled (Button parity via useDisabled)
  - swap to span + click guard while disabled so cursor-wait/not-allowed
    show without pointer-events hacks
---
 src/assets/styles/_utilities.css          |  1 +
 src/assets/styles/utilities/animation.css | 27 +++++++++++++++++++++++
 src/ui/link/Link.ce.vue                   | 25 +++++++++++++++------
 src/ui/link/link.config.ts                |  8 ++++++-
 src/ui/link/types.ts                      |  1 +
 5 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/styles/utilities/animation.css

diff --git a/src/assets/styles/_utilities.css b/src/assets/styles/_utilities.css
index 0810ab177e..effa931677 100644
--- a/src/assets/styles/_utilities.css
+++ b/src/assets/styles/_utilities.css
@@ -1,3 +1,4 @@
+@import "./utilities/animation.css";
 @import "./utilities/aria.css";
 @import "./utilities/prose.css";
 @import "./utilities/typography.css";
diff --git a/src/assets/styles/utilities/animation.css b/src/assets/styles/utilities/animation.css
new file mode 100644
index 0000000000..7129a39b23
--- /dev/null
+++ b/src/assets/styles/utilities/animation.css
@@ -0,0 +1,27 @@
+/*
+ * Loading shimmer: dims the masked element and sweeps a full-strength band
+ * across it. Apply directly (text + underline) or on a pseudo-element
+ * (underline bar only). Uses @utility so it composes with variants (after:).
+ */
+
+@utility shimmer-mask {
+  mask-image: linear-gradient(
+    110deg,
+    rgb(0 0 0 / 0.35) 40%,
+    rgb(0 0 0) 50%,
+    rgb(0 0 0 / 0.35) 60%
+  );
+  mask-size: 200% 100%;
+  animation: shimmer 1.25s ease-in-out infinite alternate;
+}
+
+/* One full sweep per iteration (band travels edge to edge) so
+   `animation-direction: alternate` produces a visible back-and-forth. */
+@keyframes shimmer {
+  0% {
+    mask-position: 0% 0;
+  }
+  100% {
+    mask-position: 100% 0;
+  }
+}
diff --git a/src/ui/link/Link.ce.vue b/src/ui/link/Link.ce.vue
index 6f64771d16..92d0a7a2d4 100644
--- a/src/ui/link/Link.ce.vue
+++ b/src/ui/link/Link.ce.vue
@@ -1,12 +1,12 @@
 <template>
   <component
     :is="component"
-    v-bind="isRouterLink ? { to } : { href }"
+    v-bind="componentProps"
     :aria-disabled="meta.isDisabled || undefined"
     :tabindex="meta.isFocusable ? '0' : '-1'"
     :class="cn(styles.link.root, props.class)"
     :data-testid="`link-${kebabCase(label ?? 'default')}`"
-    @click="$emit('click', $event)"
+    @click="onClick"
   >
     <slot name="prepend">
       <LinkItems
@@ -62,24 +62,35 @@ const props = withDefaults(defineProps<LinkProps>(), {
 
 const slots = useSlots();
 
-defineEmits<{
+const emit = defineEmits<{
   click: [event: Event];
 }>();
 
+const isDisabled = useDisabled(() => props.disabled || props.loading);
+
 const component = computed(() => {
-  if (props.to) return RouterLink;
-  if (props.href) return "a";
+  // NB  if we are disabled and we are a link, we render a span to prevent navigation
+  if (props.to && !isDisabled.value) return RouterLink;
+  if (props.href && !isDisabled.value) return "a";
   return "span";
 });
 
-const isRouterLink = computed(() => component.value === RouterLink);
+const componentProps = computed(() => {
+  if (component.value === RouterLink) return { to: props.to };
+  if (component.value === "a") return { href: props.href };
+  return {};
+});
 
-const isDisabled = useDisabled(() => props.disabled);
+function onClick(event: Event) {
+  if (isDisabled.value) return;
+  emit("click", event);
+}
 
 const meta = computed(() => ({
   color: props.color,
   size: props.size,
   isDisabled: isDisabled.value,
+  isLoading: props.loading,
   isFocusable: props.focusable && !isDisabled.value,
   hasRing:
     props.ring === "focus-visible" && !isDisabled.value && props.focusable,
diff --git a/src/ui/link/link.config.ts b/src/ui/link/link.config.ts
index 12e75e6d74..c4a3ad616c 100644
--- a/src/ui/link/link.config.ts
+++ b/src/ui/link/link.config.ts
@@ -31,9 +31,13 @@ export const variants = {
     info: "text-accent-info [&:not([aria-disabled=true]):hover,&:not([aria-disabled=true])[data-hover=true]]:opacity-75"
   },
   isDisabled: {
-    true: "cursor-not-allowed opacity-50 pointer-events-none",
+    true: "cursor-not-allowed opacity-50",
     false: "cursor-pointer"
   },
+  isLoading: {
+    true: "after:shimmer-mask relative cursor-wait no-underline opacity-100 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-current",
+    false: ""
+  },
   hasRing: {
     true: "outline outline-2 outline-transparent outline-offset-2 duration-200 focus-visible:outline-[var(--color-control-ring)]",
     false: "outline outline-2 outline-transparent outline-offset-2 focus:ring-0"
@@ -75,6 +79,7 @@ export const rootVariants = cva(
       size: variants.size,
       color: variants.color,
       isDisabled: variants.isDisabled,
+      isLoading: variants.isLoading,
       hasIcon: {
         true: "inline-flex items-center",
         false: "inline-flex items-center"
@@ -86,6 +91,7 @@ export const rootVariants = cva(
       color: "default",
       size: "md",
       isDisabled: false,
+      isLoading: false,
       hasIcon: false
     },
     compoundVariants: [
diff --git a/src/ui/link/types.ts b/src/ui/link/types.ts
index 263364efba..ed44acf0d2 100644
--- a/src/ui/link/types.ts
+++ b/src/ui/link/types.ts
@@ -22,6 +22,7 @@ export type LinkProps = {
   avatarAppend?: Partial<AvatarProps>;
   // ---
   disabled?: boolean;
+  loading?: boolean;
   // ---
   focusable?: boolean;
   ring?: "focus" | "focus-visible";

From a7a9fcd40e3d6de702b828e690b10376d92b8256 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Thu, 11 Jun 2026 17:04:21 +0100
Subject: [PATCH 08/14] feat(breadcrumb): per-item loading + click handler
 wiring (FE-2810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

    BreadcrumbItem gains `loading`, forwarded to the clickable Link so a
    single crumb can shimmer while its navigation is in flight. The Link
    now also invokes `item.handler` on click — the field existed on the
    public type but was never wired, so handler-driven consumers
    (useBreadcrumbs onSelect / pending tracking) can finally react to
    clicks. Link's loading guard already blocks repeat clicks.
---
 src/ui/breadcrumb/Breadcrumb.ce.vue | 2 ++
 src/ui/breadcrumb/types.ts          | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/ui/breadcrumb/Breadcrumb.ce.vue b/src/ui/breadcrumb/Breadcrumb.ce.vue
index 70f6189b6a..e73eaec11c 100644
--- a/src/ui/breadcrumb/Breadcrumb.ce.vue
+++ b/src/ui/breadcrumb/Breadcrumb.ce.vue
@@ -25,8 +25,10 @@
             :size="item.icon ? 'sm' : props.size"
             :label="item.label"
             :icon="item.icon"
+            :loading="item.loading"
             color="muted"
             :uiConfig="{ link: { items: '[&>i]:p-[3px]' } } as any"
+            @click="item.handler?.()"
           />
         </BreadcrumbItem>
 
diff --git a/src/ui/breadcrumb/types.ts b/src/ui/breadcrumb/types.ts
index 5a5b3d6d9d..a72306bcaf 100644
--- a/src/ui/breadcrumb/types.ts
+++ b/src/ui/breadcrumb/types.ts
@@ -12,6 +12,7 @@ export type BreadcrumbItem = RouterLinkProps & {
   value?: string | number;
   handler?: Function;
   href?: string;
+  loading?: boolean;
 };
 
 export type BreadcrumbVariant = "visible" | "condensed" | "parent" | "hidden";

From 8c0ed5c9686019a006f0ff752b64c4fda3a52c20 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Fri, 12 Jun 2026 12:51:12 +0100
Subject: [PATCH 09/14] fix(interstitial): respect per-action loading over
 internal processing flag

  `:loading="meta.isProcessing"` came after `v-bind="action"`, clobbering
  any `loading` the caller passed on the action.
---
 src/ui/interstitial/Interstitial.ce.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/interstitial/Interstitial.ce.vue b/src/ui/interstitial/Interstitial.ce.vue
index 87aa9b91cb..f72f8afd5f 100644
--- a/src/ui/interstitial/Interstitial.ce.vue
+++ b/src/ui/interstitial/Interstitial.ce.vue
@@ -44,7 +44,7 @@
             :data-testid="`interstitial-action-${index}`"
             size="lg"
             v-bind="action"
-            :loading="meta.isProcessing"
+            :loading="action?.loading || meta.isProcessing"
             :variant="action?.variant || 'solid'"
             :color="action?.color || 'primary'"
             @click.stop="doAction(action?.handler)"

From 047de0ae70dade055d0318ab3ee2f56f9cf61be1 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 15 Jun 2026 13:08:37 +0100
Subject: [PATCH 10/14] refactor(form): resolve readonly via useReadonly for
 cascade parity with disabled (FE-2810)

  Form forwarded its raw `readonly` prop straight to JsonForms while `disabled`
  went through `useDisabled` (local prop OR ancestor-provided). Route `readonly`
  through `useReadonly(() => props.readonly)` too, so both resolve the same
  cascade-aware way. No behaviour change today (nothing provides readonly yet),
  but Form is now consistent and ready to inherit an ancestor `provideReadonly`.
---
 src/ui/form/Form.ce.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ui/form/Form.ce.vue b/src/ui/form/Form.ce.vue
index 63d53d62e4..710d83804c 100644
--- a/src/ui/form/Form.ce.vue
+++ b/src/ui/form/Form.ce.vue
@@ -15,7 +15,7 @@
         :data="model"
         :enabled="!meta.isDisabled"
         :i18n="i18n"
-        :readonly="readonly"
+        :readonly="isReadonly"
         :renderers="renderers"
         :schema="schema"
         :uischema="uischema"
@@ -60,7 +60,8 @@ import {
   useStyles,
   isDeepEmpty,
   useValidation,
-  useDisabled
+  useDisabled,
+  useReadonly
 } from "../../utils";
 import { cn } from "../../utils";
 import {
@@ -144,6 +145,7 @@ const touched = useVModel(props, "touched", emits, {
 // ---
 
 const isDisabled = useDisabled(() => props.disabled || props.processing);
+const isReadonly = useReadonly(() => props.readonly);
 
 const meta = computed(() => {
   return {

From f5057c28e26ee9f0f8deec11d49e17f1ef33bcd4 Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Thu, 18 Jun 2026 10:48:12 +0100
Subject: [PATCH 11/14] refactor(ui): back disabled/readonly cascade with a
 singleton (FE-2810)

  useDisabled/useReadonly used provide/inject, so the cascade could only be seeded
  from inside a component setup(). Replace the InjectionKey with a module-level
  singleton: each composable holds a Set of contributed sources and resolves
  `local source || any source`. Works outside component setup, no provider ancestor.

  - provideDisabled/provideReadonly -> setDisabled/setReadonly (register a source,
    return a stop fn, auto-clean on scope dispose); DISABLED_KEY/READONLY_KEY removed.
  - useDisabled/useReadonly signatures unchanged, so consumer call sites are untouched.
  - A Set (not a single ref) so multiple contributors OR together instead of
    clobbering; the cascade is now global rather than subtree-scoped.

  Also surface isReadonly in Form's meta and FormMeta, alongside isDisabled, so the
  readonly state is exposed the same is-prefixed way (review consistency).
---
 src/index.ts             |  6 ++--
 src/ui/form/Form.ce.vue  |  3 +-
 src/ui/form/types.ts     |  1 +
 src/utils/useDisabled.ts | 59 ++++++++++++++++++++++------------------
 src/utils/useReadonly.ts | 59 ++++++++++++++++++++++------------------
 5 files changed, 69 insertions(+), 59 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 5999ee520d..a4d6a44d0d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -74,8 +74,6 @@ export {
   type ITheme,
   useDisabled,
   useReadonly,
-  provideDisabled,
-  provideReadonly,
-  DISABLED_KEY,
-  READONLY_KEY
+  setDisabled,
+  setReadonly
 } from "./utils";
diff --git a/src/ui/form/Form.ce.vue b/src/ui/form/Form.ce.vue
index 710d83804c..d93d2595c5 100644
--- a/src/ui/form/Form.ce.vue
+++ b/src/ui/form/Form.ce.vue
@@ -156,7 +156,8 @@ const meta = computed(() => {
     isDirty: baseModel !== model.value,
     isTouched: touched.value,
     isValid: isEmpty(errors.value),
-    isDisabled: isDisabled.value
+    isDisabled: isDisabled.value,
+    isReadonly: isReadonly.value
   };
 });
 
diff --git a/src/ui/form/types.ts b/src/ui/form/types.ts
index 14fbd780fd..9af6ac2ed2 100644
--- a/src/ui/form/types.ts
+++ b/src/ui/form/types.ts
@@ -64,6 +64,7 @@ export type FormMeta = {
   isTouched: boolean;
   isValid: boolean;
   isDisabled: boolean;
+  isReadonly: boolean;
 };
 
 export type FormActionsProps = {
diff --git a/src/utils/useDisabled.ts b/src/utils/useDisabled.ts
index 3d92cd551a..063d78781f 100644
--- a/src/utils/useDisabled.ts
+++ b/src/utils/useDisabled.ts
@@ -1,50 +1,55 @@
 // --- external
-import { computed, inject, provide, toValue } from "vue";
-import type {
-  ComputedRef,
-  InjectionKey,
-  MaybeRef,
-  MaybeRefOrGetter
-} from "vue";
+import { computed, getCurrentScope, onScopeDispose, ref, toValue } from "vue";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
 
 // -----------------------------------------------------------------------------
-// --- key
+// --- singleton
 
 /**
- * Injection key for the disabled signal. Any ancestor `provide()` under this
- * key will be picked up by `useDisabled` descendants.
+ * Cascade sources contributed by ancestors (e.g. the page while a navigation is
+ * in flight). A module-level singleton rather than provide/inject, so it works
+ * outside component setup (stores, plain composables) and needs no ancestor.
  */
-export const DISABLED_KEY: InjectionKey<MaybeRef<boolean>> =
-  Symbol("UPMIND.UI.DISABLED");
+const sources = ref(new Set<MaybeRefOrGetter<boolean | undefined>>());
+
+/** True while any contributed cascade source is truthy. */
+const isCascading = computed(() =>
+  [...sources.value].some(source => Boolean(toValue(source)))
+);
 
 // -----------------------------------------------------------------------------
 // --- composable
 
 /**
  * Resolves the disabled state for an interactive component. ORs the local
- * source (e.g. a `disabled` prop) with any ancestor-provided value.
+ * source (e.g. a `disabled` prop) with the cascade singleton.
  *
  * @param source - local disabled source, e.g. `() => props.disabled`
  */
 export const useDisabled = (
   source?: MaybeRefOrGetter<boolean | undefined>
-): ComputedRef<boolean> => {
-  const provided = inject(DISABLED_KEY, false);
-
-  /** Resolved disabled — true when local source OR any ancestor provides true. */
-  const isDisabled = computed(
-    () => Boolean(toValue(source)) || Boolean(toValue(provided))
-  );
-
-  return isDisabled;
-};
+): ComputedRef<boolean> =>
+  computed(() => Boolean(toValue(source)) || isCascading.value);
 
 // -----------------------------------------------------------------------------
-// --- provider
+// --- setter
 
 /**
- * Provides a disabled signal to descendants. Accepts a plain boolean or a ref.
+ * Registers a disabled cascade source for every `useDisabled` consumer to
+ * inherit. Returns a stop fn; auto-cleans on scope dispose when called inside a
+ * component/effect scope, so a contributor's value drops when it unmounts.
+ *
+ * @param source - cascade source, e.g. `() => isNavigating.value`
  */
-export const provideDisabled = (value: MaybeRef<boolean>): void => {
-  provide(DISABLED_KEY, value);
+export const setDisabled = (
+  source: MaybeRefOrGetter<boolean | undefined>
+): (() => void) => {
+  sources.value.add(source);
+
+  const stop = () => {
+    sources.value.delete(source);
+  };
+
+  if (getCurrentScope()) onScopeDispose(stop);
+  return stop;
 };
diff --git a/src/utils/useReadonly.ts b/src/utils/useReadonly.ts
index 8c783a8771..bd04ceb60a 100644
--- a/src/utils/useReadonly.ts
+++ b/src/utils/useReadonly.ts
@@ -1,50 +1,55 @@
 // --- external
-import { computed, inject, provide, toValue } from "vue";
-import type {
-  ComputedRef,
-  InjectionKey,
-  MaybeRef,
-  MaybeRefOrGetter
-} from "vue";
+import { computed, getCurrentScope, onScopeDispose, ref, toValue } from "vue";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
 
 // -----------------------------------------------------------------------------
-// --- key
+// --- singleton
 
 /**
- * Injection key for the readonly signal. Any ancestor `provide()` under this
- * key will be picked up by `useReadonly` descendants.
+ * Cascade sources contributed by ancestors. A module-level singleton rather than
+ * provide/inject, so it works outside component setup (stores, plain
+ * composables) and needs no ancestor.
  */
-export const READONLY_KEY: InjectionKey<MaybeRef<boolean>> =
-  Symbol("UPMIND.UI.READONLY");
+const sources = ref(new Set<MaybeRefOrGetter<boolean | undefined>>());
+
+/** True while any contributed cascade source is truthy. */
+const isCascading = computed(() =>
+  [...sources.value].some(source => Boolean(toValue(source)))
+);
 
 // -----------------------------------------------------------------------------
 // --- composable
 
 /**
  * Resolves the readonly state for an interactive component. ORs the local
- * source (e.g. a `readonly` prop) with any ancestor-provided value.
+ * source (e.g. a `readonly` prop) with the cascade singleton.
  *
  * @param source - local readonly source, e.g. `() => props.readonly`
  */
 export const useReadonly = (
   source?: MaybeRefOrGetter<boolean | undefined>
-): ComputedRef<boolean> => {
-  const provided = inject(READONLY_KEY, false);
-
-  /** Resolved readonly — true when local source OR any ancestor provides true. */
-  const isReadonly = computed(
-    () => Boolean(toValue(source)) || Boolean(toValue(provided))
-  );
-
-  return isReadonly;
-};
+): ComputedRef<boolean> =>
+  computed(() => Boolean(toValue(source)) || isCascading.value);
 
 // -----------------------------------------------------------------------------
-// --- provider
+// --- setter
 
 /**
- * Provides a readonly signal to descendants. Accepts a plain boolean or a ref.
+ * Registers a readonly cascade source for every `useReadonly` consumer to
+ * inherit. Returns a stop fn; auto-cleans on scope dispose when called inside a
+ * component/effect scope, so a contributor's value drops when it unmounts.
+ *
+ * @param source - cascade source
  */
-export const provideReadonly = (value: MaybeRef<boolean>): void => {
-  provide(READONLY_KEY, value);
+export const setReadonly = (
+  source: MaybeRefOrGetter<boolean | undefined>
+): (() => void) => {
+  sources.value.add(source);
+
+  const stop = () => {
+    sources.value.delete(source);
+  };
+
+  if (getCurrentScope()) onScopeDispose(stop);
+  return stop;
 };

From b52ef79506ba60dbaec2d63e9438ce019ab1a4bb Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Fri, 3 Jul 2026 13:47:33 +0100
Subject: [PATCH 12/14] refactor(ui): drop is-prefix on standalone
 disabled/readonly; add guarded Link action (FE-2810)

Addresses PR review:
- rename standalone const isDisabled/isReadonly (useDisabled/useReadonly results)
  to disabled/readonly across controls; is-prefixed forms stay in meta only
- Link: add an `action` prop invoked from the guarded onClick so a click action
  never fires while disabled/loading; Breadcrumb uses :action instead of raw @click
---
 src/ui/autocomplete/Autocomplete.ce.vue         |  4 ++--
 src/ui/breadcrumb/Breadcrumb.ce.vue             |  2 +-
 src/ui/button-group/ButtonGroup.ce.vue          |  8 ++++----
 src/ui/button/Button.ce.vue                     | 10 +++++-----
 src/ui/checkbox-cards/CheckboxCards.ce.vue      |  6 +++---
 src/ui/checkbox-group/CheckboxGroup.vue         |  4 ++--
 src/ui/checkbox/Checkbox.ce.vue                 |  4 ++--
 src/ui/combobox/Combobox.ce.vue                 |  4 ++--
 src/ui/command/Command.vue                      |  4 ++--
 src/ui/form/Form.ce.vue                         | 10 +++++-----
 src/ui/input-password/InputPassword.ce.vue      |  8 ++++----
 src/ui/input/Input.ce.vue                       |  8 ++++----
 src/ui/link/Link.ce.vue                         | 17 +++++++++--------
 src/ui/link/types.ts                            |  2 ++
 src/ui/number-field/NumberField.ce.vue          |  6 +++---
 .../radio-cards-collapsible/RadioCardItem.vue   | 10 +++++-----
 .../RadioCardsCollapsible.ce.vue                | 10 +++++-----
 src/ui/radio-cards/RadioCardItem.vue            | 10 +++++-----
 src/ui/radio-cards/RadioCards.ce.vue            |  8 ++++----
 src/ui/radio-group/RadioGroup.vue               |  4 ++--
 src/ui/search/Search.ce.vue                     |  4 ++--
 src/ui/select-cards/SelectCards.ce.vue          |  4 ++--
 src/ui/select-grouped/SelectGrouped.ce.vue      |  6 +++---
 src/ui/select/Select.ce.vue                     |  4 ++--
 src/ui/switch/Switch.ce.vue                     |  4 ++--
 src/ui/textarea/Textarea.ce.vue                 |  8 ++++----
 src/ui/toggle/Toggle.ce.vue                     |  4 ++--
 27 files changed, 88 insertions(+), 85 deletions(-)

diff --git a/src/ui/autocomplete/Autocomplete.ce.vue b/src/ui/autocomplete/Autocomplete.ce.vue
index 7f8951bb31..f4d1ccc8cc 100644
--- a/src/ui/autocomplete/Autocomplete.ce.vue
+++ b/src/ui/autocomplete/Autocomplete.ce.vue
@@ -13,7 +13,7 @@
     :uiConfig="props.uiConfig"
     :popoverClass="props.popoverClass"
     :type="props.type"
-    :disabled="isDisabled"
+    :disabled="disabled"
     :autoFocus="props.autoFocus"
     :model-value="modelValue"
     v-model:open="open"
@@ -164,7 +164,7 @@ const meta = computed(() => ({
 const open = ref(false);
 const processing = ref(false);
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const itemValue = computed((): string => props.itemValue || "value");
 const itemLabel = computed((): string => props.itemLabel || "label");
diff --git a/src/ui/breadcrumb/Breadcrumb.ce.vue b/src/ui/breadcrumb/Breadcrumb.ce.vue
index e73eaec11c..5f1d1c2bd5 100644
--- a/src/ui/breadcrumb/Breadcrumb.ce.vue
+++ b/src/ui/breadcrumb/Breadcrumb.ce.vue
@@ -28,7 +28,7 @@
             :loading="item.loading"
             color="muted"
             :uiConfig="{ link: { items: '[&>i]:p-[3px]' } } as any"
-            @click="item.handler?.()"
+            :action="item.handler"
           />
         </BreadcrumbItem>
 
diff --git a/src/ui/button-group/ButtonGroup.ce.vue b/src/ui/button-group/ButtonGroup.ce.vue
index 2c5e98a7ea..7b50eb24a5 100644
--- a/src/ui/button-group/ButtonGroup.ce.vue
+++ b/src/ui/button-group/ButtonGroup.ce.vue
@@ -2,7 +2,7 @@
   <span
     :class="cn(styles.buttonGroup.root, props.class)"
     role="group"
-    :aria-disabled="isDisabled"
+    :aria-disabled="disabled"
   >
     <template
       v-for="(item, index) in items"
@@ -14,7 +14,7 @@
           v-bind="item.props"
           :class="styles.buttonGroup.button"
           size="lg"
-          :disabled="isDisabled || item.props.disabled"
+          :disabled="disabled || item.props.disabled"
           variant="ghost"
           :ring="false"
           @click="item.handler?.($event)"
@@ -58,11 +58,11 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
   class: ""
 });
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const meta = computed(() => ({
   variant: "control",
-  isDisabled: isDisabled.value,
+  isDisabled: disabled.value,
   hasRing: true
 }));
 
diff --git a/src/ui/button/Button.ce.vue b/src/ui/button/Button.ce.vue
index 64cbe99fff..f7ac3a9e9f 100644
--- a/src/ui/button/Button.ce.vue
+++ b/src/ui/button/Button.ce.vue
@@ -79,13 +79,13 @@ defineEmits<{
   click: [event: Event];
 }>();
 
-const isDisabled = useDisabled(() => props.disabled || props.loading);
+const disabled = useDisabled(() => props.disabled || props.loading);
 
 const component = computed(() => {
   if (props.is) return props.is;
   // NB  if we are disabled and we are a link, we render a button to prevent navigation
-  if (props.to && !isDisabled.value) return RouterLink;
-  if (props.href && !isDisabled.value) return "a";
+  if (props.to && !disabled.value) return RouterLink;
+  if (props.href && !disabled.value) return "a";
   // default
   return Button;
 });
@@ -103,10 +103,10 @@ const meta = computed(() => ({
   align: props.align,
   isIconOnly: props.iconOnly,
   isBlock: props.block,
-  isDisabled: isDisabled.value,
+  isDisabled: disabled.value,
   isLoading: props.loading,
   isFocusable: props.focusable,
-  hasRing: props.ring && !isDisabled.value && props.focusable
+  hasRing: props.ring && !disabled.value && props.focusable
 }));
 
 const styles = useStyles(["button"], meta, config, props.uiConfig ?? {});
diff --git a/src/ui/checkbox-cards/CheckboxCards.ce.vue b/src/ui/checkbox-cards/CheckboxCards.ce.vue
index cf6f0f8d1e..099f8cf76c 100644
--- a/src/ui/checkbox-cards/CheckboxCards.ce.vue
+++ b/src/ui/checkbox-cards/CheckboxCards.ce.vue
@@ -2,7 +2,7 @@
   <ToggleGroupRoot
     v-model="modelValue"
     :required="props.required"
-    :disabled="isDisabled"
+    :disabled="disabled"
     :class="cn(styles.checkboxCards.root, props.class)"
     type="multiple"
     data-testid="checkbox-group"
@@ -15,7 +15,7 @@
         :value="item.value as string"
         :name="item.id"
         :required="props.required"
-        :disabled="isDisabled"
+        :disabled="disabled"
         :no-input="props.noInput"
         :class="cn(styles.checkboxCards.input, props.itemClass)"
         :itemClass="styles.checkboxCards.item"
@@ -138,7 +138,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
   defaultValue: props.defaultValue
 });
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const meta = computed(() => ({
   noInput: props.noInput,
diff --git a/src/ui/checkbox-group/CheckboxGroup.vue b/src/ui/checkbox-group/CheckboxGroup.vue
index 666509d762..bf8649ab2f 100644
--- a/src/ui/checkbox-group/CheckboxGroup.vue
+++ b/src/ui/checkbox-group/CheckboxGroup.vue
@@ -16,12 +16,12 @@ const props = defineProps<
 >();
 const emits = defineEmits<ListboxRootEmits>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return assign(delegated, { disabled: isDisabled.value });
+  return assign(delegated, { disabled: disabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/checkbox/Checkbox.ce.vue b/src/ui/checkbox/Checkbox.ce.vue
index aa7cfcb845..86a8d22871 100644
--- a/src/ui/checkbox/Checkbox.ce.vue
+++ b/src/ui/checkbox/Checkbox.ce.vue
@@ -36,11 +36,11 @@ const emits = defineEmits<{
   (e: "update:checked", payload: string | number): void;
 }>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() =>
   assign(omit(props, ["class", "uiConfig", "defaultChecked", "checked"]), {
-    disabled: isDisabled.value
+    disabled: disabled.value
   })
 );
 
diff --git a/src/ui/combobox/Combobox.ce.vue b/src/ui/combobox/Combobox.ce.vue
index c4d33741c7..8d50e71bb6 100644
--- a/src/ui/combobox/Combobox.ce.vue
+++ b/src/ui/combobox/Combobox.ce.vue
@@ -1,7 +1,7 @@
 <template>
   <Popover
     v-model:open="open"
-    :disabled="isDisabled"
+    :disabled="disabled"
     :class="styles.combobox.root"
   >
     <PopoverTrigger as-child :ring="false">
@@ -194,7 +194,7 @@ const meta = computed(() => ({
 const open = ref(false);
 const skipFocus = computed(() => props.tabindex === "-1");
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const itemValue = computed((): string => props.itemValue || "value");
 const itemLabel = computed((): string => props.itemLabel || "label");
diff --git a/src/ui/command/Command.vue b/src/ui/command/Command.vue
index 446c33bdf7..1ea4cfcae9 100644
--- a/src/ui/command/Command.vue
+++ b/src/ui/command/Command.vue
@@ -15,12 +15,12 @@ const props = withDefaults(
 
 const emits = defineEmits<ComboboxRootEmits>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return assign(delegated, { disabled: isDisabled.value });
+  return assign(delegated, { disabled: disabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/form/Form.ce.vue b/src/ui/form/Form.ce.vue
index d93d2595c5..fe111b4f45 100644
--- a/src/ui/form/Form.ce.vue
+++ b/src/ui/form/Form.ce.vue
@@ -15,7 +15,7 @@
         :data="model"
         :enabled="!meta.isDisabled"
         :i18n="i18n"
-        :readonly="isReadonly"
+        :readonly="readonly"
         :renderers="renderers"
         :schema="schema"
         :uischema="uischema"
@@ -144,8 +144,8 @@ const touched = useVModel(props, "touched", emits, {
 });
 // ---
 
-const isDisabled = useDisabled(() => props.disabled || props.processing);
-const isReadonly = useReadonly(() => props.readonly);
+const disabled = useDisabled(() => props.disabled || props.processing);
+const readonly = useReadonly(() => props.readonly);
 
 const meta = computed(() => {
   return {
@@ -156,8 +156,8 @@ const meta = computed(() => {
     isDirty: baseModel !== model.value,
     isTouched: touched.value,
     isValid: isEmpty(errors.value),
-    isDisabled: isDisabled.value,
-    isReadonly: isReadonly.value
+    isDisabled: disabled.value,
+    isReadonly: readonly.value
   };
 });
 
diff --git a/src/ui/input-password/InputPassword.ce.vue b/src/ui/input-password/InputPassword.ce.vue
index 156c400e9f..7d45c52fa1 100644
--- a/src/ui/input-password/InputPassword.ce.vue
+++ b/src/ui/input-password/InputPassword.ce.vue
@@ -12,7 +12,7 @@
           <Link
             :class="styles.inputPassword.action"
             :focusable="false"
-            :disabled="isDisabled || isReadonly"
+            :disabled="disabled || readonly"
             @click.prevent="onGenerate"
           >
             <Icon icon="magic-wand-02" size="2xs" />
@@ -75,8 +75,8 @@ const modelValue = useVModel(props, "modelValue", emit, {
 
 const unmask = ref(false);
 
-const isDisabled = useDisabled(() => props.disabled);
-const isReadonly = useReadonly(() => props.readonly);
+const disabled = useDisabled(() => props.disabled);
+const readonly = useReadonly(() => props.readonly);
 
 const delegatedProps = computed(() =>
   assign(
@@ -91,7 +91,7 @@ const delegatedProps = computed(() =>
       "showLabel",
       "hideLabel"
     ]),
-    { disabled: isDisabled.value, readonly: isReadonly.value }
+    { disabled: disabled.value, readonly: readonly.value }
   )
 );
 
diff --git a/src/ui/input/Input.ce.vue b/src/ui/input/Input.ce.vue
index ce4c3eefbb..5328695868 100644
--- a/src/ui/input/Input.ce.vue
+++ b/src/ui/input/Input.ce.vue
@@ -56,8 +56,8 @@ const props = withDefaults(defineProps<InputProps>(), {
 const input = useTemplateRef<InputElement>("input");
 const modelValue = defineModel<InputProps["modelValue"]>("modelValue", {});
 
-const isDisabled = useDisabled(() => props.disabled);
-const isReadonly = useReadonly(() => props.readonly);
+const disabled = useDisabled(() => props.disabled);
+const readonly = useReadonly(() => props.readonly);
 
 const delegatedProps = computed(
   (): Omit<
@@ -88,14 +88,14 @@ const delegatedProps = computed(
         "avatarAppend",
         "autoFocus"
       ]),
-      { disabled: isDisabled.value, readonly: isReadonly.value }
+      { disabled: disabled.value, readonly: readonly.value }
     )
 );
 
 const meta = computed(() => ({
   width: props.width,
   hasRing: props.ring,
-  isDisabled: isDisabled.value
+  isDisabled: disabled.value
 }));
 
 const styles = useStyles(
diff --git a/src/ui/link/Link.ce.vue b/src/ui/link/Link.ce.vue
index 92d0a7a2d4..bef3f0bb55 100644
--- a/src/ui/link/Link.ce.vue
+++ b/src/ui/link/Link.ce.vue
@@ -66,12 +66,12 @@ const emit = defineEmits<{
   click: [event: Event];
 }>();
 
-const isDisabled = useDisabled(() => props.disabled || props.loading);
+const disabled = useDisabled(() => props.disabled || props.loading);
 
 const component = computed(() => {
   // NB  if we are disabled and we are a link, we render a span to prevent navigation
-  if (props.to && !isDisabled.value) return RouterLink;
-  if (props.href && !isDisabled.value) return "a";
+  if (props.to && !disabled.value) return RouterLink;
+  if (props.href && !disabled.value) return "a";
   return "span";
 });
 
@@ -82,19 +82,20 @@ const componentProps = computed(() => {
 });
 
 function onClick(event: Event) {
-  if (isDisabled.value) return;
+  if (disabled.value) return;
+  props.action?.(event);
   emit("click", event);
 }
 
 const meta = computed(() => ({
   color: props.color,
   size: props.size,
-  isDisabled: isDisabled.value,
+  isDisabled: disabled.value,
   isLoading: props.loading,
-  isFocusable: props.focusable && !isDisabled.value,
+  isFocusable: props.focusable && !disabled.value,
   hasRing:
-    props.ring === "focus-visible" && !isDisabled.value && props.focusable,
-  hasFocusRing: props.ring === "focus" && !isDisabled.value && props.focusable,
+    props.ring === "focus-visible" && !disabled.value && props.focusable,
+  hasFocusRing: props.ring === "focus" && !disabled.value && props.focusable,
   hasIcon:
     !isEmpty(props.icon) ||
     !isEmpty(props.iconAppend) ||
diff --git a/src/ui/link/types.ts b/src/ui/link/types.ts
index ed44acf0d2..55d255f644 100644
--- a/src/ui/link/types.ts
+++ b/src/ui/link/types.ts
@@ -23,6 +23,8 @@ export type LinkProps = {
   // ---
   disabled?: boolean;
   loading?: boolean;
+  /** Invoked on click, guarded by the disabled/loading state (never fires while disabled). */
+  action?: (event: Event) => void;
   // ---
   focusable?: boolean;
   ring?: "focus" | "focus-visible";
diff --git a/src/ui/number-field/NumberField.ce.vue b/src/ui/number-field/NumberField.ce.vue
index fce86a1894..c6ae22dab2 100644
--- a/src/ui/number-field/NumberField.ce.vue
+++ b/src/ui/number-field/NumberField.ce.vue
@@ -80,7 +80,7 @@ function onUpdate(val: number) {
   modelValue.value = val;
 }
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() =>
   assign(
@@ -95,7 +95,7 @@ const delegatedProps = computed(() =>
       "decrementAction",
       "incrementAction"
     ]),
-    { disabled: isDisabled.value }
+    { disabled: disabled.value }
   )
 );
 
@@ -123,7 +123,7 @@ const meta = computed(() => {
     size: props.size,
     width: getWidth.value,
     variant: props.variant,
-    isDisabled: isDisabled.value
+    isDisabled: disabled.value
   };
 });
 
diff --git a/src/ui/radio-cards-collapsible/RadioCardItem.vue b/src/ui/radio-cards-collapsible/RadioCardItem.vue
index 9b6948c09d..2857f2cfff 100644
--- a/src/ui/radio-cards-collapsible/RadioCardItem.vue
+++ b/src/ui/radio-cards-collapsible/RadioCardItem.vue
@@ -10,7 +10,7 @@
         :value="value"
         :name="props.name"
         :required="props.required"
-        :disabled="isDisabled"
+        :disabled="disabled"
         :class="styles.radioCards.input"
         :tabindex="isSelected || !modelValue ? 0 : -1"
         :data-state="isSelected ? 'checked' : ''"
@@ -55,20 +55,20 @@ const isSelected = computed(() => {
   return props.modelValue === props.value;
 });
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const meta = computed(() => ({
   isMinimal: props.minimal,
   columns: props.columns,
-  isDisabled: isDisabled.value
+  isDisabled: disabled.value
 }));
 
 const styles = useStyles(["radioCards"], meta, config, props.uiConfig ?? {});
 
 const onBlur = (e: FocusEvent) => {
-  if (isDisabled.value) {
+  if (disabled.value) {
     watchOnce(
-      () => isDisabled.value,
+      () => disabled.value,
       () => {
         const el = e.target as HTMLElement;
         if (el && el.dataset.state === "checked") {
diff --git a/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue b/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue
index 6c18c1e051..cb6ada3ff8 100644
--- a/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue
+++ b/src/ui/radio-cards-collapsible/RadioCardsCollapsible.ce.vue
@@ -4,7 +4,7 @@
       <RadioGroup
         :model-value="modelValue"
         :required="props.required"
-        :disabled="isDisabled"
+        :disabled="disabled"
         @update:model-value="onSelectionChange"
         :class="cn(styles.radioCards.root, 'gap-0')"
       >
@@ -16,7 +16,7 @@
           :name="props.name"
           :label="selectedItem?.label"
           :required="props.required"
-          :disabled="isDisabled"
+          :disabled="disabled"
           :model-value="modelValue"
           :columns="props.columns"
           :value="selectedItem.value"
@@ -62,7 +62,7 @@
               :name="props.name"
               :label="option?.label"
               :required="props.required"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :model-value="modelValue"
               :columns="props.columns"
               :value="option.value"
@@ -89,7 +89,7 @@
           :label="label"
           size="sm"
           variant="solid"
-          :disabled="isDisabled"
+          :disabled="disabled"
           @click="toggleExpanded"
         />
       </slot>
@@ -135,7 +135,7 @@ const _emits = defineEmits<{
 const modelValue = defineModel<string>("modelValue");
 const open = defineModel<boolean>("open");
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const isExpanded = computed({
   get: () => props.forceOpen || !!open.value,
diff --git a/src/ui/radio-cards/RadioCardItem.vue b/src/ui/radio-cards/RadioCardItem.vue
index 502793c703..b62e7b0fe2 100644
--- a/src/ui/radio-cards/RadioCardItem.vue
+++ b/src/ui/radio-cards/RadioCardItem.vue
@@ -12,7 +12,7 @@
         :value="value"
         :name="props.name"
         :required="props.required"
-        :disabled="isDisabled"
+        :disabled="disabled"
         :tabindex="isSelected || !modelValue ? 0 : -1"
         :data-state="isSelected ? 'checked' : 'unchecked'"
         :uiConfig="uiConfig"
@@ -112,11 +112,11 @@ const isSelected = computed(() => {
   return props.modelValue === props.value;
 });
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const meta = computed(() => ({
   columns: props.columns,
-  isDisabled: isDisabled.value
+  isDisabled: disabled.value
 }));
 
 const styles = useStyles(
@@ -127,9 +127,9 @@ const styles = useStyles(
 );
 
 const onBlur = (e: FocusEvent) => {
-  if (isDisabled.value) {
+  if (disabled.value) {
     watchOnce(
-      () => isDisabled.value,
+      () => disabled.value,
       () => {
         const el = e.target as HTMLElement;
         if (el && el.dataset.state === "checked") {
diff --git a/src/ui/radio-cards/RadioCards.ce.vue b/src/ui/radio-cards/RadioCards.ce.vue
index 2386f35475..bbd86df9db 100644
--- a/src/ui/radio-cards/RadioCards.ce.vue
+++ b/src/ui/radio-cards/RadioCards.ce.vue
@@ -3,7 +3,7 @@
     :is="useInputGroup ? RadioGroup : 'div'"
     :model-value="modelValue"
     :required="props.required"
-    :disabled="isDisabled"
+    :disabled="disabled"
     :class="cn(styles.radioCards.root, props.class)"
     @update:model-value="(v: string | number) => onChange(v)"
     v-auto-animate
@@ -22,7 +22,7 @@
         :secondaryBadge="option?.secondaryBadge"
         :action="option?.action"
         :required="props.required"
-        :disabled="isDisabled"
+        :disabled="disabled"
         :model-value="modelValue"
         :columns="props.columns"
         :value="option.value"
@@ -81,7 +81,7 @@ const forwarded = useForwardPropsEmits({}, emits);
 
 const modelValue = defineModel<string | number>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const meta = computed(() => ({
   columns: props.columns
@@ -95,7 +95,7 @@ const styles = useStyles(
 );
 
 const onChange = (value: any) => {
-  if (isDisabled.value) return;
+  if (disabled.value) return;
 
   if (!props.required && value === modelValue.value) {
     modelValue.value = undefined;
diff --git a/src/ui/radio-group/RadioGroup.vue b/src/ui/radio-group/RadioGroup.vue
index 20dd476cf7..3d325dfd16 100644
--- a/src/ui/radio-group/RadioGroup.vue
+++ b/src/ui/radio-group/RadioGroup.vue
@@ -14,12 +14,12 @@ const props = defineProps<
 >();
 const emits = defineEmits<RadioGroupRootEmits>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return assign(delegated, { disabled: isDisabled.value });
+  return assign(delegated, { disabled: disabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/search/Search.ce.vue b/src/ui/search/Search.ce.vue
index c23cedc659..9b27099cfc 100644
--- a/src/ui/search/Search.ce.vue
+++ b/src/ui/search/Search.ce.vue
@@ -3,7 +3,7 @@
     <PopoverTrigger as-child>
       <FormControl
         :key="props.id"
-        :disabled="isDisabled"
+        :disabled="disabled"
         :formItemId="`${props.id}-search`"
         :auto-focus="props.autoFocus"
         :placeholder="placeholder"
@@ -104,7 +104,7 @@ const emit = defineEmits<{
 const internalSearch = ref("");
 const open = ref(false);
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 // --- computed
 
diff --git a/src/ui/select-cards/SelectCards.ce.vue b/src/ui/select-cards/SelectCards.ce.vue
index 2832214e05..dd64294d97 100644
--- a/src/ui/select-cards/SelectCards.ce.vue
+++ b/src/ui/select-cards/SelectCards.ce.vue
@@ -2,7 +2,7 @@
   <DropdownMenuRoot v-model:open="open" tabindex="-1">
     <DropdownMenuTrigger
       as-child
-      :disabled="isDisabled"
+      :disabled="disabled"
       :class="styles.select.trigger"
     >
       <TriggerButton
@@ -113,7 +113,7 @@ const portalTo = usePortalTarget(() => props.to);
 const open = ref(false);
 const isKeyboardNav = ref(false);
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue
diff --git a/src/ui/select-grouped/SelectGrouped.ce.vue b/src/ui/select-grouped/SelectGrouped.ce.vue
index 0be3a51114..798858e25c 100644
--- a/src/ui/select-grouped/SelectGrouped.ce.vue
+++ b/src/ui/select-grouped/SelectGrouped.ce.vue
@@ -3,7 +3,7 @@
     :is="props.as"
     role="radiogroup"
     :aria-required="props.required"
-    :aria-disabled="isDisabled"
+    :aria-disabled="disabled"
     :class="cn(styles.selectGrouped.root, props.class)"
     data-testid="select-grouped"
     v-auto-animate
@@ -17,7 +17,7 @@
       :focused-group-index="focusedGroupIndex"
       :model-value="modelValue"
       :required="props.required"
-      :disabled="isDisabled"
+      :disabled="disabled"
       :uiConfig="props.uiConfig"
       @update:model-value="onChange"
       @focus-next-group="focusGroup(index + 1)"
@@ -72,7 +72,7 @@ const modelValue = defineModel<string>({ default: "" });
 const groupRefs = ref<{ setFocus: () => void }[]>([]);
 const focusedGroupIndex = ref(0);
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const meta = computed(() => ({}));
 
diff --git a/src/ui/select/Select.ce.vue b/src/ui/select/Select.ce.vue
index 7cb95313c0..1f164978a2 100644
--- a/src/ui/select/Select.ce.vue
+++ b/src/ui/select/Select.ce.vue
@@ -4,7 +4,7 @@
     v-model:open="open"
     :key="uid"
     :model-value="modelValue"
-    :disabled="isDisabled"
+    :disabled="disabled"
   >
     <SelectTrigger
       v-bind="$attrs"
@@ -122,7 +122,7 @@ const props = withDefaults(defineProps<SelectProps>(), {
 const emits = defineEmits<SelectRootEmits & SelectContentEmits>();
 const forwarded = useForwardPropsEmits(props, emits);
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
diff --git a/src/ui/switch/Switch.ce.vue b/src/ui/switch/Switch.ce.vue
index 12b05ca2cf..12e966a3ae 100644
--- a/src/ui/switch/Switch.ce.vue
+++ b/src/ui/switch/Switch.ce.vue
@@ -28,10 +28,10 @@ const props = withDefaults(defineProps<SwitchProps>(), {
 
 const emits = defineEmits<SwitchRootEmits>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() =>
-  assign(omit(props, ["class", "uiConfig"]), { disabled: isDisabled.value })
+  assign(omit(props, ["class", "uiConfig"]), { disabled: disabled.value })
 );
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/src/ui/textarea/Textarea.ce.vue b/src/ui/textarea/Textarea.ce.vue
index 38e120ed4b..5a545692fe 100644
--- a/src/ui/textarea/Textarea.ce.vue
+++ b/src/ui/textarea/Textarea.ce.vue
@@ -32,13 +32,13 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void;
 }>();
 
-const isDisabled = useDisabled(() => props.disabled);
-const isReadonly = useReadonly(() => props.readonly);
+const disabled = useDisabled(() => props.disabled);
+const readonly = useReadonly(() => props.readonly);
 
 const delegatedProps = computed(() =>
   assign(omit(props, ["class", "uiConfig", "defaultValue", "modelValue"]), {
-    disabled: isDisabled.value,
-    readonly: isReadonly.value
+    disabled: disabled.value,
+    readonly: readonly.value
   })
 );
 
diff --git a/src/ui/toggle/Toggle.ce.vue b/src/ui/toggle/Toggle.ce.vue
index 6717770595..f1e8df7a31 100644
--- a/src/ui/toggle/Toggle.ce.vue
+++ b/src/ui/toggle/Toggle.ce.vue
@@ -32,11 +32,11 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void;
 }>();
 
-const isDisabled = useDisabled(() => props.disabled);
+const disabled = useDisabled(() => props.disabled);
 
 const delegatedProps = computed(() =>
   assign(omit(props, ["class", "uiConfig", "defaultValue", "modelValue"]), {
-    disabled: isDisabled.value
+    disabled: disabled.value
   })
 );
 

From 1899da579b7cd6af277bd4ad603dc13cba6189d2 Mon Sep 17 00:00:00 2001
From: Dominic da Costa <dominic@thecollaboration.studio>
Date: Mon, 6 Jul 2026 10:31:04 +0200
Subject: [PATCH 13/14] refactor(link): format code for better readability in
 meta computed property

---
 src/ui/link/Link.ce.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui/link/Link.ce.vue b/src/ui/link/Link.ce.vue
index e04b1e70a5..05328d70b3 100644
--- a/src/ui/link/Link.ce.vue
+++ b/src/ui/link/Link.ce.vue
@@ -92,8 +92,7 @@ const meta = computed(() => ({
   isDisabled: disabled.value,
   isLoading: props.loading,
   isFocusable: props.focusable && !disabled.value,
-  hasRing:
-    props.ring === "focus-visible" && !disabled.value && props.focusable,
+  hasRing: props.ring === "focus-visible" && !disabled.value && props.focusable,
   hasFocusRing: props.ring === "focus" && !disabled.value && props.focusable,
   hasIcon:
     !isEmpty(props.icon) ||

From 43011a824513c169a16af4466b3d80adc1922cea Mon Sep 17 00:00:00 2001
From: Rhodri Jones <rhodri.jones@upmind.com>
Date: Mon, 6 Jul 2026 16:25:02 +0100
Subject: [PATCH 14/14] fix(combobox): restore selected value to #default slot

The main-merge (358db16b) renamed the trigger's value slot #default to #label.
The Button nests its #label outlet inside the default slot, and the combobox
fills #default with the placeholder, so the placeholder overrode the default
slot and wiped the #label outlet, blanking currency/language labels. Revert to
#default (parity with main); the useDisabled cascade is unaffected.
---
 src/ui/combobox/Combobox.ce.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/combobox/Combobox.ce.vue b/src/ui/combobox/Combobox.ce.vue
index 65cbf3c4c9..8d176a5c1c 100644
--- a/src/ui/combobox/Combobox.ce.vue
+++ b/src/ui/combobox/Combobox.ce.vue
@@ -39,7 +39,7 @@
           </slot>
         </template>
 
-        <template #label v-if="!isEmpty(modelValue)">
+        <template #default v-if="!isEmpty(modelValue)">
           <span :class="styles.combobox.label" v-bind="props.valueDataAttrs">{{
             label
           }}</span>