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/index.ts b/src/index.ts
index a79e949dfc..95c5cf49e5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -71,5 +71,9 @@ export {
   isEmptySlot,
   isMobile,
   type Theme,
-  type ITheme
+  type ITheme,
+  useDisabled,
+  useReadonly,
+  setDisabled,
+  setReadonly
 } from "./utils";
diff --git a/src/ui/autocomplete/Autocomplete.ce.vue b/src/ui/autocomplete/Autocomplete.ce.vue
index 03510d6c2c..32e507ee53 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="disabled"
     :autoFocus="props.autoFocus"
     :model-value="modelValue"
     v-model:open="open"
@@ -111,7 +111,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";
 import {
   debounce,
@@ -159,6 +159,8 @@ const meta = computed(() => ({
 const open = ref(false);
 const processing = ref(false);
 
+const disabled = 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/breadcrumb/Breadcrumb.ce.vue b/src/ui/breadcrumb/Breadcrumb.ce.vue
index 9d8183d4f5..94fe5237b6 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"
+            :action="item.handler"
           />
         </BreadcrumbItem>
 
diff --git a/src/ui/breadcrumb/types.ts b/src/ui/breadcrumb/types.ts
index 894a8fff8e..6336bb1423 100644
--- a/src/ui/breadcrumb/types.ts
+++ b/src/ui/breadcrumb/types.ts
@@ -10,6 +10,7 @@ export type BreadcrumbItem = RouterLinkProps & {
   value?: string | number;
   handler?: (...args: unknown[]) => unknown;
   href?: string;
+  loading?: boolean;
 };
 
 export type BreadcrumbVariant = "visible" | "condensed" | "parent" | "hidden";
diff --git a/src/ui/button-group/ButtonGroup.ce.vue b/src/ui/button-group/ButtonGroup.ce.vue
index e70de30e82..e0d4c622a3 100644
--- a/src/ui/button-group/ButtonGroup.ce.vue
+++ b/src/ui/button-group/ButtonGroup.ce.vue
@@ -41,7 +41,7 @@ import { Button } from "../button";
 import { Select } from "../select";
 import config from "./buttonGroup.config";
 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>(), {
@@ -54,9 +54,11 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
   class: ""
 });
 
+const disabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   variant: "control",
-  isDisabled: props.disabled,
+  isDisabled: disabled.value,
   hasRing: true
 }));
 
diff --git a/src/ui/button/Button.ce.vue b/src/ui/button/Button.ce.vue
index 414ad6af15..fe0f053f38 100644
--- a/src/ui/button/Button.ce.vue
+++ b/src/ui/button/Button.ce.vue
@@ -54,7 +54,7 @@ import { Spinner } from "../spinner";
 import config from "./button.config";
 import Button from "./Button.vue";
 import ButtonItems from "./ButtonItems.vue";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import { kebabCase } from "lodash-es";
 import type { ButtonProps } from "./types";
 
@@ -78,11 +78,13 @@ defineEmits<{
   click: [event: Event];
 }>();
 
+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 && !props.disabled) return RouterLink;
-  if (props.href && !props.disabled) return "a";
+  if (props.to && !disabled.value) return RouterLink;
+  if (props.href && !disabled.value) return "a";
   // default
   return Button;
 });
@@ -100,10 +102,10 @@ const meta = computed(() => ({
   align: props.align,
   isIconOnly: props.iconOnly,
   isBlock: props.block,
-  isDisabled: props.disabled || props.loading,
+  isDisabled: disabled.value,
   isLoading: props.loading,
   isFocusable: props.focusable,
-  hasRing: props.ring && !props.disabled && 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 6a980ae800..e0ef9c2622 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="disabled"
     :class="cn(styles.checkboxCards.root, props.class)"
     type="multiple"
     data-test-key="checkbox-group"
@@ -15,7 +15,7 @@
         :value="item.value as string"
         :name="item.id"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="disabled"
         :no-input="props.noInput"
         :class="cn(styles.checkboxCards.input, props.itemClass)"
         :itemClass="styles.checkboxCards.item"
@@ -105,7 +105,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";
 import { includes, isFunction, isString, isNil } from "lodash-es";
 import type { CheckboxCardsItemActionProps, CheckboxCardsProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -133,6 +133,8 @@ const modelValue = useVModel(props, "modelValue", emits, {
   defaultValue: props.defaultValue
 });
 
+const disabled = 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..bf8649ab2f 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 disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  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 d07ddc4eed..d23963cbcd 100644
--- a/src/ui/checkbox/Checkbox.ce.vue
+++ b/src/ui/checkbox/Checkbox.ce.vue
@@ -15,8 +15,8 @@ import { useVModel } from "@vueuse/core";
 import { computed } from "vue";
 import config from "./checkbox.config";
 import Checkbox from "./Checkbox.vue";
-import { useStyles, cn } from "../../utils";
-import { omit } from "lodash-es";
+import { useStyles, cn, useDisabled } from "../../utils";
+import { assign, omit } from "lodash-es";
 import type { CheckboxProps } from "./types";
 // -----------------------------------------------------------------------------
 
@@ -31,8 +31,12 @@ const emits = defineEmits<{
   (e: "update:checked", payload: string | number): void;
 }>();
 
+const disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultChecked", "checked"])
+  assign(omit(props, ["class", "uiConfig", "defaultChecked", "checked"]), {
+    disabled: disabled.value
+  })
 );
 
 const checked = useVModel(props, "checked", emits, {
diff --git a/src/ui/combobox/Combobox.ce.vue b/src/ui/combobox/Combobox.ce.vue
index aacb357a6c..8d176a5c1c 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="disabled"
     :class="styles.combobox.root"
   >
     <PopoverTrigger as-child :ring="false">
@@ -146,7 +146,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";
 import { find, get, isEmpty, isEqual, isFunction, has } from "lodash-es";
 import type { ComboboxProps, ComboboxItemProps } from "./types";
 
@@ -193,6 +193,8 @@ const meta = computed(() => ({
 const open = ref(false);
 const skipFocus = computed(() => props.tabindex === "-1");
 
+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 104f32b94c..1ea4cfcae9 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 disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  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 fde958dfed..747ad25235 100644
--- a/src/ui/form/Form.ce.vue
+++ b/src/ui/form/Form.ce.vue
@@ -51,7 +51,13 @@ import { Button } from "../button";
 import config from "./form.config";
 import { upmindUIRenderers } from "./renderers";
 import { iterateSchema } from "./renderers/utils";
-import { useStyles, isDeepEmpty, useValidation } from "../../utils";
+import {
+  useStyles,
+  isDeepEmpty,
+  useValidation,
+  useDisabled,
+  useReadonly
+} from "../../utils";
 import { cn } from "../../utils";
 import {
   isEmpty,
@@ -132,6 +138,9 @@ const touched = useVModel(props, "touched", emits, {
 });
 // ---
 
+const disabled = useDisabled(() => props.disabled || props.processing);
+const readonly = useReadonly(() => props.readonly);
+
 const meta = computed(() => {
   return {
     canTranslate: !isEmpty(props.i18n),
@@ -141,7 +150,8 @@ const meta = computed(() => {
     isDirty: baseModel !== model.value,
     isTouched: touched.value,
     isValid: isEmpty(errors.value),
-    isDisabled: props.disabled || props.processing
+    isDisabled: disabled.value,
+    isReadonly: readonly.value
   };
 });
 
diff --git a/src/ui/form/types.ts b/src/ui/form/types.ts
index fef0e202b2..b31144cc34 100644
--- a/src/ui/form/types.ts
+++ b/src/ui/form/types.ts
@@ -62,6 +62,7 @@ export type FormMeta = {
   isTouched: boolean;
   isValid: boolean;
   isDisabled: boolean;
+  isReadonly: boolean;
 };
 
 export type FormActionsProps = {
diff --git a/src/ui/input-password/InputPassword.ce.vue b/src/ui/input-password/InputPassword.ce.vue
index 1f9fe22a2e..fe762e2113 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="disabled || readonly"
             @click.prevent="onGenerate"
           >
             <Icon icon="magic-wand-02" size="2xs" />
@@ -44,8 +44,8 @@ import Input from "../input/Input.ce.vue";
 import { Link } from "../link";
 import Tooltip from "../tooltip/Tooltip.ce.vue";
 import config from "./input-password.config";
-import { useStyles } from "../../utils";
-import { omit } from "lodash-es";
+import { useStyles, useDisabled, useReadonly } from "../../utils";
+import { assign, omit } from "lodash-es";
 import type { InputPasswordProps } from "./types";
 // -----------------------------------------------------------------------------
 const props = withDefaults(defineProps<InputPasswordProps>(), {
@@ -70,18 +70,24 @@ const modelValue = useVModel(props, "modelValue", emit, {
 
 const unmask = ref(false);
 
+const disabled = useDisabled(() => props.disabled);
+const readonly = 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: disabled.value, readonly: readonly.value }
+  )
 );
 
 function onGenerate() {
diff --git a/src/ui/input/Input.ce.vue b/src/ui/input/Input.ce.vue
index c22c9cb3fd..4346fe0936 100644
--- a/src/ui/input/Input.ce.vue
+++ b/src/ui/input/Input.ce.vue
@@ -33,9 +33,9 @@ import IMask, { type InputElement } from "imask";
 import { useTemplateRef, computed, onMounted, watch, ref } from "vue";
 import config from "./input.config";
 import InputItems from "./InputItems.vue";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled, useReadonly } from "../../utils";
 import { kebabCase } from "lodash-es";
-import { omit } from "lodash-es";
+import { assign, omit } from "lodash-es";
 import type { InputProps } from "./types";
 import type { InputMask } from "imask";
 // -----------------------------------------------------------------------------
@@ -51,6 +51,9 @@ const props = withDefaults(defineProps<InputProps>(), {
 const input = useTemplateRef<InputElement>("input");
 const modelValue = defineModel<InputProps["modelValue"]>("modelValue", {});
 
+const disabled = useDisabled(() => props.disabled);
+const readonly = useReadonly(() => props.readonly);
+
 const delegatedProps = computed(
   (): Omit<
     InputProps,
@@ -66,24 +69,28 @@ 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: disabled.value, readonly: readonly.value }
+    )
 );
 
 const meta = computed(() => ({
   width: props.width,
-  hasRing: props.ring
+  hasRing: props.ring,
+  isDisabled: disabled.value
 }));
 
 const styles = useStyles(
diff --git a/src/ui/input/input.config.ts b/src/ui/input/input.config.ts
index f3d76b83ac..343b945179 100644
--- a/src/ui/input/input.config.ts
+++ b/src/ui/input/input.config.ts
@@ -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/interstitial/Interstitial.ce.vue b/src/ui/interstitial/Interstitial.ce.vue
index 4e48939348..57fed311f7 100644
--- a/src/ui/interstitial/Interstitial.ce.vue
+++ b/src/ui/interstitial/Interstitial.ce.vue
@@ -45,7 +45,7 @@
             :data-test-key="`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)"
diff --git a/src/ui/link/Link.ce.vue b/src/ui/link/Link.ce.vue
index 676511ad43..05328d70b3 100644
--- a/src/ui/link/Link.ce.vue
+++ b/src/ui/link/Link.ce.vue
@@ -9,7 +9,7 @@
       props.dataAttrs?.['data-test-key'] ??
       `link-${kebabCase(label ?? 'default')}`
     "
-    @click="$emit('click', $event)"
+    @click="onClick"
   >
     <slot name="prepend">
       <LinkItems
@@ -44,7 +44,7 @@ import { computed, useSlots } from "vue";
 import { RouterLink } from "vue-router";
 import config from "./link.config";
 import LinkItems from "./LinkItems.vue";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import { kebabCase, isEmpty } from "lodash-es";
 import type { LinkProps } from "./types";
 
@@ -60,31 +60,40 @@ const props = withDefaults(defineProps<LinkProps>(), {
 
 const slots = useSlots();
 
-defineEmits<{
+const emit = defineEmits<{
   click: [event: Event];
 }>();
 
+const disabled = 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 && !disabled.value) return RouterLink;
+  if (props.href && !disabled.value) return "a";
   return "span";
 });
 
-const isRouterLink = computed(() => component.value === RouterLink);
+const componentProps = computed(() => {
+  if (component.value === RouterLink)
+    return { to: props.to, ...props.dataAttrs };
+  if (component.value === "a") return { href: props.href, ...props.dataAttrs };
+  return { ...props.dataAttrs };
+});
 
-const componentProps = computed(() =>
-  isRouterLink.value
-    ? { to: props.to, ...props.dataAttrs }
-    : { href: props.href, ...props.dataAttrs }
-);
+function onClick(event: Event) {
+  if (disabled.value) return;
+  props.action?.(event);
+  emit("click", event);
+}
 
 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: disabled.value,
+  isLoading: props.loading,
+  isFocusable: props.focusable && !disabled.value,
+  hasRing: 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/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 d4cf46ade2..338765f436 100644
--- a/src/ui/link/types.ts
+++ b/src/ui/link/types.ts
@@ -19,6 +19,9 @@ export type LinkProps = {
   avatarAppend?: Partial<AvatarProps>;
   // ---
   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 f6d4e7ced9..3b03d36931 100644
--- a/src/ui/number-field/NumberField.ce.vue
+++ b/src/ui/number-field/NumberField.ce.vue
@@ -45,8 +45,9 @@ import NumberFieldIcon from "./NumberFieldIcon.vue";
 import NumberFieldIncrement from "./NumberFieldIncrement.vue";
 import NumberFieldInput from "./NumberFieldInput.vue";
 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";
 // -----------------------------------------------------------------------------
 
@@ -75,18 +76,23 @@ function onUpdate(val: number) {
   modelValue.value = val;
 }
 
+const disabled = 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: disabled.value }
+  )
 );
 
 const decrementIcon = computed(() => {
@@ -113,7 +119,7 @@ const meta = computed(() => {
     size: props.size,
     width: getWidth.value,
     variant: props.variant,
-    isDisabled: props.disabled
+    isDisabled: disabled.value
   };
 });
 
diff --git a/src/ui/radio-cards-collapsible/RadioCardItem.vue b/src/ui/radio-cards-collapsible/RadioCardItem.vue
index 35ff6613b8..4975d9cc96 100644
--- a/src/ui/radio-cards-collapsible/RadioCardItem.vue
+++ b/src/ui/radio-cards-collapsible/RadioCardItem.vue
@@ -11,7 +11,7 @@
         :value="value"
         :name="props.name"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="disabled"
         :class="styles.radioCards.input"
         :tabindex="isSelected || !modelValue ? 0 : -1"
         :data-state="isSelected ? 'checked' : ''"
@@ -37,7 +37,8 @@ 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";
 // -----------------------------------------------------------------------------
 
@@ -52,17 +53,20 @@ const isSelected = computed(() => {
   return props.modelValue === props.value;
 });
 
+const disabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   isMinimal: props.minimal,
-  columns: props.columns
+  columns: props.columns,
+  isDisabled: disabled.value
 }));
 
 const styles = useStyles(["radioCards"], meta, config, props.uiConfig ?? {});
 
 const onBlur = (e: FocusEvent) => {
-  if (props.disabled) {
+  if (disabled.value) {
     watchOnce(
-      () => props.disabled,
+      () => 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 f63b89dd10..5788a3591c 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="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="props.disabled"
+          :disabled="disabled"
           :model-value="modelValue"
           :columns="props.columns"
           :value="selectedItem.value"
@@ -67,7 +67,7 @@
               :name="props.name"
               :label="option?.label"
               :required="props.required"
-              :disabled="props.disabled"
+              :disabled="disabled"
               :model-value="modelValue"
               :columns="props.columns"
               :value="option.value"
@@ -99,7 +99,7 @@
           :label="label"
           size="sm"
           variant="solid"
-          :disabled="props.disabled"
+          :disabled="disabled"
           @click="toggleExpanded"
         />
       </slot>
@@ -115,7 +115,8 @@ 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";
 // -----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RadioCardsCollapsibleProps>(), {
@@ -140,6 +141,8 @@ const _emits = defineEmits<{
 const modelValue = defineModel<string>("modelValue");
 const open = defineModel<boolean>("open");
 
+const disabled = useDisabled(() => props.disabled);
+
 const isExpanded = computed({
   get: () => props.forceOpen || !!open.value,
   set: (val: boolean) => {
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 eecddb1379..10d84447ee 100644
--- a/src/ui/radio-cards/RadioCardItem.vue
+++ b/src/ui/radio-cards/RadioCardItem.vue
@@ -4,7 +4,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"
   >
@@ -14,7 +13,7 @@
         :value="value"
         :name="props.name"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="disabled"
         :tabindex="isSelected || !modelValue ? 0 : -1"
         :data-state="isSelected ? 'checked' : 'unchecked'"
         :uiConfig="uiConfig"
@@ -87,7 +86,8 @@ 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";
 // -----------------------------------------------------------------------------
@@ -110,8 +110,11 @@ const isSelected = computed(() => {
   return props.modelValue === props.value;
 });
 
+const disabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
-  columns: props.columns
+  columns: props.columns,
+  isDisabled: disabled.value
 }));
 
 const styles = useStyles(
@@ -122,9 +125,9 @@ const styles = useStyles(
 );
 
 const onBlur = (e: FocusEvent) => {
-  if (props.disabled) {
+  if (disabled.value) {
     watchOnce(
-      () => props.disabled,
+      () => 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 5f746bb5e3..cd5fe06348 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="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="props.disabled"
+        :disabled="disabled"
         :model-value="modelValue"
         :columns="props.columns"
         :value="option.value"
@@ -55,7 +55,9 @@ 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";
 // -----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RadioCardsProps>(), {
@@ -81,6 +83,8 @@ const forwarded = useForwardPropsEmits({}, emits);
 
 const modelValue = defineModel<string | number>();
 
+const disabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   columns: props.columns
 }));
@@ -93,7 +97,7 @@ const styles = useStyles(
 );
 
 const onChange = (value: any) => {
-  if (props.disabled) return;
+  if (disabled.value) return;
 
   if (!props.required && value === modelValue.value) {
     modelValue.value = undefined;
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`);
diff --git a/src/ui/radio-group/RadioGroup.vue b/src/ui/radio-group/RadioGroup.vue
index 6916eee8e5..e92b1dd3f8 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 disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  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 87b854e372..d51091d252 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="disabled"
         :formItemId="`${props.id}-search`"
         :auto-focus="props.autoFocus"
         :placeholder="placeholder"
@@ -65,7 +65,7 @@ import { ref, computed, watch } from "vue";
 import { FormControl } from "../form";
 import Input from "../input/Input.ce.vue";
 import config from "./search.config";
-import { useStyles } from "../../utils";
+import { useStyles, useDisabled } from "../../utils";
 import { uniqueId } from "lodash-es";
 import type { SearchItem } from "./types";
 // -----------------------------------------------------------------------------
@@ -102,6 +102,8 @@ const emit = defineEmits<{
 const internalSearch = ref("");
 const open = ref(false);
 
+const disabled = 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 17095a542a..02b8be4dbc 100644
--- a/src/ui/select-cards/SelectCards.ce.vue
+++ b/src/ui/select-cards/SelectCards.ce.vue
@@ -91,7 +91,9 @@ 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";
 import type { SelectCardsProps, SelectCardsItemProps } from "./types";
 
@@ -108,6 +110,8 @@ const portalTo = usePortalTarget(() => props.to);
 
 const open = ref(false);
 const isKeyboardNav = ref(false);
+
+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 e194dab4ff..fc0772dc32 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="disabled"
     :class="cn(styles.selectGrouped.root, props.class)"
     data-test-key="select-grouped"
     v-auto-animate
@@ -17,7 +17,7 @@
       :focused-group-index="focusedGroupIndex"
       :model-value="modelValue"
       :required="props.required"
-      :disabled="props.disabled"
+      :disabled="disabled"
       :uiConfig="props.uiConfig"
       @update:model-value="onChange"
       @focus-next-group="focusGroup(index + 1)"
@@ -53,7 +53,8 @@ import { vAutoAnimate } from "@formkit/auto-animate";
 import { computed, ref } from "vue";
 import config from "./selectGrouped.config";
 import SelectGroupedOption from "./SelectGroupedOption.vue";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
+// --- types
 import type { SelectGroupedProps } from "./types";
 // -----------------------------------------------------------------------------
 
@@ -69,6 +70,8 @@ const modelValue = defineModel<string>({ default: "" });
 const groupRefs = ref<{ setFocus: () => void }[]>([]);
 const focusedGroupIndex = ref(0);
 
+const disabled = 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 f1172702b9..b6fdf41931 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="disabled"
   >
     <SelectTrigger
       v-bind="$attrs"
@@ -86,7 +87,8 @@ import SelectGroup from "./SelectGroup.vue";
 import SelectItem from "./SelectItem.vue";
 import SelectTrigger from "./SelectTrigger.vue";
 import SelectValue from "./SelectValue.vue";
-import { cn, useStyles } from "../../utils";
+// --- utils
+import { cn, useStyles, useDisabled } from "../../utils";
 import { isEmpty, isEqual, isNull, find } from "lodash-es";
 import type { SelectProps } from "./types";
 import type { SelectRootEmits, SelectContentEmits } from "radix-vue";
@@ -119,6 +121,8 @@ const props = withDefaults(defineProps<SelectProps>(), {
 const emits = defineEmits<SelectRootEmits & SelectContentEmits>();
 const forwarded = useForwardPropsEmits(props, emits);
 
+const disabled = 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 95e47587c8..3808440505 100644
--- a/src/ui/switch/Switch.ce.vue
+++ b/src/ui/switch/Switch.ce.vue
@@ -7,8 +7,14 @@ import { type SwitchRootEmits, useForwardPropsEmits } from "radix-vue";
 import { computed } from "vue";
 import config from "./switch.config";
 import Switch from "./Switch.vue";
-import { useStyles, cn } from "../../utils";
-import { omit } from "lodash-es";
+
+// --- internal
+import { useStyles, cn, useDisabled } from "../../utils";
+
+// --- utils
+import { assign, omit } from "lodash-es";
+
+// --- types
 import type { SwitchProps } from "./types";
 // -----------------------------------------------------------------------------
 
@@ -19,7 +25,11 @@ const props = withDefaults(defineProps<SwitchProps>(), {
 
 const emits = defineEmits<SwitchRootEmits>();
 
-const delegatedProps = computed(() => omit(props, ["class", "uiConfig"]));
+const disabled = useDisabled(() => props.disabled);
+
+const delegatedProps = computed(() =>
+  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 3a1705c830..2db0fda0b0 100644
--- a/src/ui/textarea/Textarea.ce.vue
+++ b/src/ui/textarea/Textarea.ce.vue
@@ -13,8 +13,11 @@ import { useVModel } from "@vueuse/core";
 import { computed } from "vue";
 import config from "./textarea.config";
 import Textarea from "./Textarea.vue";
-import { useStyles, cn } from "../../utils";
-import { omit } from "lodash-es";
+// --- internal
+import { useStyles, cn, useDisabled, useReadonly } from "../../utils";
+// --- utils
+import { assign, omit } from "lodash-es";
+// --- types
 import type { TextareaProps } from "./types";
 // -----------------------------------------------------------------------------
 
@@ -27,8 +30,14 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void;
 }>();
 
+const disabled = useDisabled(() => props.disabled);
+const readonly = useReadonly(() => props.readonly);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultValue", "modelValue"])
+  assign(omit(props, ["class", "uiConfig", "defaultValue", "modelValue"]), {
+    disabled: disabled.value,
+    readonly: readonly.value
+  })
 );
 
 const modelValue = useVModel(props, "modelValue", emits, {
diff --git a/src/ui/toggle/Toggle.ce.vue b/src/ui/toggle/Toggle.ce.vue
index e3a1e4de71..9d72f3ce15 100644
--- a/src/ui/toggle/Toggle.ce.vue
+++ b/src/ui/toggle/Toggle.ce.vue
@@ -13,8 +13,11 @@ import { useVModel } from "@vueuse/core";
 import { computed } from "vue";
 import config from "./toggle.config";
 import Toggle from "./Toggle.vue";
-import { useStyles, cn } from "../../utils";
-import { omit } from "lodash-es";
+// --- internal
+import { useStyles, cn, useDisabled } from "../../utils";
+// --- utils
+import { assign, omit } from "lodash-es";
+// --- types
 import type { ToggleProps } from "./types";
 // -----------------------------------------------------------------------------
 
@@ -27,8 +30,12 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void;
 }>();
 
+const disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultValue", "modelValue"])
+  assign(omit(props, ["class", "uiConfig", "defaultValue", "modelValue"]), {
+    disabled: disabled.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..063d78781f
--- /dev/null
+++ b/src/utils/useDisabled.ts
@@ -0,0 +1,55 @@
+// --- external
+import { computed, getCurrentScope, onScopeDispose, ref, toValue } from "vue";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+
+// -----------------------------------------------------------------------------
+// --- singleton
+
+/**
+ * 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.
+ */
+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 the cascade singleton.
+ *
+ * @param source - local disabled source, e.g. `() => props.disabled`
+ */
+export const useDisabled = (
+  source?: MaybeRefOrGetter<boolean | undefined>
+): ComputedRef<boolean> =>
+  computed(() => Boolean(toValue(source)) || isCascading.value);
+
+// -----------------------------------------------------------------------------
+// --- setter
+
+/**
+ * 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 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
new file mode 100644
index 0000000000..bd04ceb60a
--- /dev/null
+++ b/src/utils/useReadonly.ts
@@ -0,0 +1,55 @@
+// --- external
+import { computed, getCurrentScope, onScopeDispose, ref, toValue } from "vue";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+
+// -----------------------------------------------------------------------------
+// --- singleton
+
+/**
+ * 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.
+ */
+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 the cascade singleton.
+ *
+ * @param source - local readonly source, e.g. `() => props.readonly`
+ */
+export const useReadonly = (
+  source?: MaybeRefOrGetter<boolean | undefined>
+): ComputedRef<boolean> =>
+  computed(() => Boolean(toValue(source)) || isCascading.value);
+
+// -----------------------------------------------------------------------------
+// --- setter
+
+/**
+ * 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 setReadonly = (
+  source: MaybeRefOrGetter<boolean | undefined>
+): (() => void) => {
+  sources.value.add(source);
+
+  const stop = () => {
+    sources.value.delete(source);
+  };
+
+  if (getCurrentScope()) onScopeDispose(stop);
+  return stop;
+};