@cube-dev/ui-kit 0.194.1 → 0.196.0

package/dist/utils/react/nullableValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"nullableValue.js","names":["Props","castNullableStringValue","props","T","castNullableField","v","String","castNullableNumberValue","Number","castNullableArrayValue","Array","isArray","castNullableIsSelected","castNullableSelectedKey","keys","type","cast","k","forEach","key","undefined","console","warn","JSON","stringify","WithNullableValue","Omit","value","defaultValue","WithNullableSelected","isSelected","defaultSelected","WithNullableSelectedKey","selectedKey","defaultSelectedKey"],"sources":["../../../src/utils/react/nullableValue.ts"],"sourcesContent":["import type { Props } from '../../props';\n\nexport function castNullableStringValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'string', (v) =>\n    String(v),\n  );\n}\n\nexport function castNullableNumberValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'number', (v) =>\n    Number(v),\n  );\n}\n\nexport function castNullableArrayValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'object', (v) =>\n    Array.isArray(v) ? v : [],\n  );\n}\n\nexport function castNullableIsSelected<T>(props: T): T {\n  return castNullableField(\n    props,\n    ['isSelected', 'defaultSelected'],\n    'boolean',\n    (v) => !!v,\n  );\n}\n\nexport function castNullableSelectedKey<T>(props: T): T {\n  return castNullableField(props, ['selectedKey', 'defaultSelectedKey']);\n}\n\nexport function castNullableField<T>(\n  props: T,\n  keys: string[],\n  type?: string,\n  cast?: (k: any) => any,\n): T {\n  props = { ...props };\n\n  keys.forEach((key) => {\n    if (props[key] === null) {\n      props[key] = undefined;\n    }\n\n    if (type && cast && props[key] != null && typeof props[key] != type) {\n      props[key] = cast(props[key]);\n\n      console.warn(\n        'Wrong value type in',\n        props,\n        'in keys',\n        JSON.stringify(keys),\n      );\n    }\n  });\n\n  return props;\n}\n\n// Values are intentionally permissive: the helpers above coerce input models.\n// A generic indexed access unioned with `any` has the same type, but declaration\n// emit can inline its type parameter outside the generic scope.\nexport type WithNullableValue<T extends Props> = Omit<\n  T,\n  'value' | 'defaultValue'\n> & {\n  value?: any;\n  defaultValue?: any;\n};\n\nexport type WithNullableSelected<T extends Props> = Omit<\n  T,\n  'isSelected' | 'defaultSelected'\n> & {\n  isSelected?: any;\n  defaultSelected?: any;\n};\n\nexport type WithNullableSelectedKey<T extends Props> = Omit<\n  T,\n  'selectedKey' | 'defaultSelectedKey'\n> & {\n  selectedKey?: any;\n  defaultSelectedKey?: any;\n};\n"],"mappings":";;AAEA,SAAgBC,wBAA2BC,OAAa;AACtD,QAAOE,kBAAkBF,OAAO,CAAC,SAAS,eAAe,EAAE,WAAWG,MACpEC,OAAOD,EACT,CAAC;;AAGH,SAAgBE,wBAA2BL,OAAa;AACtD,QAAOE,kBAAkBF,OAAO,CAAC,SAAS,eAAe,EAAE,WAAWG,MACpEG,OAAOH,EACT,CAAC;;AAGH,SAAgBI,uBAA0BP,OAAa;AACrD,QAAOE,kBAAkBF,OAAO,CAAC,SAAS,eAAe,EAAE,WAAWG,MACpEK,MAAMC,QAAQN,EAAE,GAAGA,IAAI,EACzB,CAAC;;AAGH,SAAgBO,uBAA0BV,OAAa;AACrD,QAAOE,kBACLF,OACA,CAAC,cAAc,kBAAkB,EACjC,YACCG,MAAM,CAAC,CAACA,EACV;;AAOH,SAAgBD,kBACdF,OACAY,MACAC,MACAC,MACG;AACHd,SAAQ,EAAE,GAAGA,OAAO;AAEpBY,MAAKI,SAASC,QAAQ;AACpB,MAAIjB,MAAMiB,SAAS,KACjBjB,OAAMiB,OAAOC;AAGf,MAAIL,QAAQC,QAAQd,MAAMiB,QAAQ,QAAQ,OAAOjB,MAAMiB,QAAQJ,MAAM;AACnEb,SAAMiB,OAAOH,KAAKd,MAAMiB,KAAK;AAE7BE,WAAQC,KACN,uBACApB,OACA,WACAqB,KAAKC,UAAUV,KACjB,CAAC;;GAEH;AAEF,QAAOZ"}
+{"version":3,"file":"nullableValue.js","names":["Props","castNullableStringValue","props","T","emptyValue","castNullableField","v","String","castNullableNumberValue","Number","NaN","castNullableArrayValue","Array","isArray","castNullableIsSelected","castNullableSelectedKey","keys","type","cast","k","forEach","key","index","undefined","console","warn","JSON","stringify","WithNullableValue","Omit","value","defaultValue","WithNullableSelected","isSelected","defaultSelected","WithNullableSelectedKey","selectedKey","defaultSelectedKey"],"sources":["../../../src/utils/react/nullableValue.ts"],"sourcesContent":["import type { Props } from '../../props';\n\n// Each value helper turns a controlled `null` into the control's own empty\n// value, so `null` means \"controlled, no value\"; see `castNullableField`.\n\nexport function castNullableStringValue<T>(\n  props: T,\n  /** `null` for controls whose state takes it, such as a radio group. */\n  emptyValue: string | null = '',\n): T {\n  return castNullableField(\n    props,\n    ['value', 'defaultValue'],\n    'string',\n    (v) => String(v),\n    emptyValue,\n  );\n}\n\nexport function castNullableNumberValue<T>(props: T): T {\n  return castNullableField(\n    props,\n    ['value', 'defaultValue'],\n    'number',\n    (v) => Number(v),\n    NaN,\n  );\n}\n\nexport function castNullableArrayValue<T>(props: T): T {\n  return castNullableField(\n    props,\n    ['value', 'defaultValue'],\n    'object',\n    (v) => (Array.isArray(v) ? v : []),\n    [],\n  );\n}\n\nexport function castNullableIsSelected<T>(props: T): T {\n  return castNullableField(\n    props,\n    ['isSelected', 'defaultSelected'],\n    'boolean',\n    (v) => !!v,\n    false,\n  );\n}\n\nexport function castNullableSelectedKey<T>(props: T): T {\n  return castNullableField(props, ['selectedKey', 'defaultSelectedKey']);\n}\n\n/**\n * Replaces `null` in `keys` and casts a value of the wrong `type`.\n *\n * The first key is the controlled one, and its `null` becomes `emptyValue`. Pass the control's own\n * empty value (`''`, `NaN`, `[]`, or `null` where React Stately takes it) so that `null` means\n * \"controlled, no value\": the field stays controlled and clears. Left out, `null` becomes\n * `undefined`, which switches the control to uncontrolled mode and keeps its last value on screen.\n * `null` in the other keys (`defaultValue`) always becomes `undefined`.\n */\nexport function castNullableField<T>(\n  props: T,\n  keys: string[],\n  type?: string,\n  cast?: (k: any) => any,\n  emptyValue?: unknown,\n): T {\n  props = { ...props };\n\n  keys.forEach((key, index) => {\n    if (props[key] === null) {\n      props[key] = index === 0 ? emptyValue : undefined;\n    }\n\n    if (type && cast && props[key] != null && typeof props[key] != type) {\n      props[key] = cast(props[key]);\n\n      console.warn(\n        'Wrong value type in',\n        props,\n        'in keys',\n        JSON.stringify(keys),\n      );\n    }\n  });\n\n  return props;\n}\n\n// Values are intentionally permissive: the helpers above coerce input models.\n// A generic indexed access unioned with `any` has the same type, but declaration\n// emit can inline its type parameter outside the generic scope.\nexport type WithNullableValue<T extends Props> = Omit<\n  T,\n  'value' | 'defaultValue'\n> & {\n  value?: any;\n  defaultValue?: any;\n};\n\nexport type WithNullableSelected<T extends Props> = Omit<\n  T,\n  'isSelected' | 'defaultSelected'\n> & {\n  isSelected?: any;\n  defaultSelected?: any;\n};\n\nexport type WithNullableSelectedKey<T extends Props> = Omit<\n  T,\n  'selectedKey' | 'defaultSelectedKey'\n> & {\n  selectedKey?: any;\n  defaultSelectedKey?: any;\n};\n"],"mappings":";;AAKA,SAAgBC,wBACdC,OAEAE,aAA4B,IACzB;AACH,QAAOC,kBACLH,OACA,CAAC,SAAS,eAAe,EACzB,WACCI,MAAMC,OAAOD,EAAE,EAChBF,WACD;;AAGH,SAAgBI,wBAA2BN,OAAa;AACtD,QAAOG,kBACLH,OACA,CAAC,SAAS,eAAe,EACzB,WACCI,MAAMG,OAAOH,EAAE,EAChBI,IACD;;AAGH,SAAgBC,uBAA0BT,OAAa;AACrD,QAAOG,kBACLH,OACA,CAAC,SAAS,eAAe,EACzB,WACCI,MAAOM,MAAMC,QAAQP,EAAE,GAAGA,IAAI,EAAG,EAClC,EACF,CAAC;;AAGH,SAAgBQ,uBAA0BZ,OAAa;AACrD,QAAOG,kBACLH,OACA,CAAC,cAAc,kBAAkB,EACjC,YACCI,MAAM,CAAC,CAACA,GACT,MACD;;;;;;;;;;;AAgBH,SAAgBD,kBACdH,OACAc,MACAC,MACAC,MACAd,YACG;AACHF,SAAQ,EAAE,GAAGA,OAAO;AAEpBc,MAAKI,SAASC,KAAKC,UAAU;AAC3B,MAAIpB,MAAMmB,SAAS,KACjBnB,OAAMmB,OAAOC,UAAU,IAAIlB,aAAamB;AAG1C,MAAIN,QAAQC,QAAQhB,MAAMmB,QAAQ,QAAQ,OAAOnB,MAAMmB,QAAQJ,MAAM;AACnEf,SAAMmB,OAAOH,KAAKhB,MAAMmB,KAAK;AAE7BG,WAAQC,KACN,uBACAvB,OACA,WACAwB,KAAKC,UAAUX,KACjB,CAAC;;GAEH;AAEF,QAAOd"}

package/dist/utils/react/overlayKeyPropagation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/utils/react/overlayKeyPropagation.ts
 /**
 * Keys whose final handling belongs to the overlay around a control, not to

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 
 //#region src/utils/styles.ts

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.194.1";
+const VERSION = "0.196.0";
 const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/ComplexLayout.md

@@ -201,7 +201,7 @@ Panels support four rendering modes via the `mode` prop:
 
 - **`default`** — Standard panel, pushes content (Content Push: Yes, Overlay: No)
 - **`sticky`** — Floats over content (Content Push: No, Overlay: No)
-- **`overlay`** — With dismissable backdrop (Content Push: Yes, Overlay: Yes)
+- **`overlay`** — With dismissable backdrop, floats over content (Content Push: No, Overlay: Yes)
 - **`dialog`** — Renders as modal dialog (Content Push: No, Overlay: Dialog)
 
 ### Sticky Panel

package/docs/CreateComponent.md

@@ -425,6 +425,8 @@ export function Action(
 
 ## Form Integration
 
+Call `wrapWithField` consistently: it renders stable field chrome by default and handles `isBare` as the explicit opt-out. Do not infer presentation from a label, form binding or message content. Pass React Aria's label props to the wrapper so a supplied label remains associated with the control in both modes. Inner controls whose parent owns the field chrome should receive `isBare` to avoid nested fields.
+
 For input components that need to integrate with forms, see the [Field documentation](./components/form/Field.md) for comprehensive guidance on:
 
 - Form state management

package/docs/FieldProperties.md

@@ -20,14 +20,41 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 ## Labels & Description
 
 - **`label`** `ReactNode` — Label text displayed above or beside the input.
-- **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Position of the label relative to the input.
-- **`description`** `ReactNode` — Description text placed below the label.
+- **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Position of the label relative to the input. Side and split layouts reserve a label column only when a label is present.
+- **`description`** `ReactNode` — Help text. It appears below a top label or the control when there is no visible label, and beside the control with a side or split label. It remains independent of the error message.
+- **`isBare`** `boolean` (default: `false`) — Render the control without field layout, description or message text. A supplied `label` remains as a visually hidden accessible label; label tooltips, suffixes and extra content are omitted. Form binding, invalid state and control styles still apply. Use this explicitly for inline controls or when a parent already renders their field chrome. Provide `aria-describedby` when the error is explained elsewhere. With `isBare` omitted or `false`, field chrome always renders, including for standalone inputs without a label. Message values never choose whether the wrapper exists, so adding or removing messages keeps the control mounted and focused. Layout props on the control stay there; use `fieldStyles` to place the entire field.
+- **`forceField`** `boolean` — **Deprecated.** Fields render chrome by default, so remove this prop. It has no presentation effect; `isBare` is the explicit opt-out even if `forceField` is also supplied.
 - **`extra`** `ReactNode` — Additional content displayed next to the label.
 - **`labelTooltip`** `ReactNode` — Content of an info badge shown next to the label. Only rendered when the field has a label. (Formerly `tooltip`. On most fields `tooltip` is gone; on `Select` and `Checkbox` it is the control's own tooltip, as on `Item` and `Button`.)
 - **`labelSuffix`** `ReactNode` — Content displayed after the label text.
 - **`labelProps`** `object` — Additional HTML props passed to the label element.
 - **`labelStyles`** `Styles` — Tasty styles for the label element.
 
+## Field presentation
+
+```jsx
+// Default chrome gives generated errors a place, even without a visible label.
+<TagInput aria-label="Recipients" />
+
+// A row that owns the label and error opts its inner control out explicitly.
+<TextInput isBare aria-label="Amount" aria-describedby="row-error" />
+
+// Suppress only the error slot; keep the label and description.
+<TextInput name="name" label="Name" description="Shown on invoices" errorMessage={null} />
+```
+
+The field wrapper stays in place when a label, description or message appears or disappears. Changing `isBare` changes the presentation structure and may remount the control; keep that mode stable while editing. Individual checkbox and radio options keep their group's inline presentation.
+
+### Field sizing and alignment
+
+Set `fieldStyles` to size the entire field, including its label, description and feedback. Control-level `width`, `styles` and `wrapperStyles` continue to size the control itself:
+
+```jsx
+<TextInput label="Name" fieldStyles={{ width: '40x' }} />
+```
+
+Fields without labels no longer reserve an empty side or split label column. If a row should intentionally align with neighbouring side labels, add `fieldStyles={{ padding: '$full-label-width left' }}`. For a nameless legacy `Form.Item`, put that padding on the item's `styles` instead; it owns the wrapper. Remove deprecated `forceField` when migrating these rows.
+
 ## Necessity Indicators
 
 - **`isRequired`** `boolean` (default: `false`) — Whether user input is required before form submission. Marks the label, sets `aria-required` on the input, and adds a `required` validation rule.
@@ -60,7 +87,7 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 
 - **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled and non-interactive. A field also takes it from an enclosing `<Provider isDisabled>` or `<Form isDisabled>`. Buttons don't, apart from `Form.Submit` and `Form.Reset`: see [Button](./components/actions/Button.md).
 - **`isReadOnly`** `boolean` (default: `false`) — Whether the field can be focused but not changed.
-- **`isLoading`** `boolean` (default: `false`) — Whether to show a loading spinner and disable interactions.
+- **`isLoading`** `boolean` (default: `false`) — Whether the field shows its loading spinner. `Select`, `Picker`, `FilterPicker`, `ColorPicker` and a button-type `Radio` also disable while loading; other fields stay interactive, and fields without a spinner, such as `Checkbox`, `RadioGroup`, `ListBox` or `Slider`, ignore it.
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden.
 - **`isInvalid`** `boolean` (default: `false`) — Whether the field displays its invalid visual styling. Takes precedence over `isValid`.
 - **`isValid`** `boolean` (default: `false`) — Whether the field displays its valid visual styling.
@@ -77,8 +104,8 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 - **`rulesKey`** `string` — Manual modern function revision. Skips validator/transform source comparison; declarative constraints are always compared. Update it when a function or its captures change.
 - **`errorPolicy`** `'first' | 'all'` — Modern rule error collection policy, inherited from the controller by default.
 - **`showValid`** `boolean` — Whether to show the valid state icon after successful validation.
-- **`errorMessage`** `ReactNode` — Error message always displayed in danger state, regardless of validation state.
-- **`message`** `ReactNode` — _(deprecated)_ Use `errorMessage` for errors and `description` for help text.
+- **`errorMessage`** `ReactNode` — Error text displayed in danger state, regardless of validation state. `undefined` allows the form-generated error or the deprecated `message` fallback. An explicit `null`, `false` or empty string suppresses the error text and its fallback, while the control retains its invalid state. The description remains visible.
+- **`message`** `ReactNode` — _(deprecated)_ Fallback text used only when `errorMessage` is `undefined`. Use `errorMessage` for errors and `description` for help text. `message={null}` does not suppress a generated `errorMessage`.
 
 ## Styling
 

package/docs/Theming.md

@@ -414,7 +414,7 @@ Note the distinction from `contrastLevel`: the level is a config seed the app su
 
 ## `<Root palette>`
 
-`<Root>` accepts the same config as a prop, applied during render so the first paint is already correct:
+`<Root>` accepts the same config as a prop. The first mount applies it during render, so the first paint (and SSR output) is already correct. A later change applies in a layout effect, which still lands before paint and does not update other components while `<Root>` renders, so the prop alone is enough — there is no need to call `setPaletteConfig()` before changing it:
 
 ```tsx
 <Root palette={{ accent: userBrandColor }}>
@@ -429,6 +429,7 @@ Removing the prop entirely is the one thing that does _not_ reset the palette
 This is a convenience wrapper over `setPaletteConfig()`, not a separate scope. **The palette is process-global** — Glaze's own config is, and so is the single `body` rule the tokens are injected into. One palette per process, not per tree and not per request:
 
 - Two `<Root>`s with different `palette` props will fight over the same tokens.
+- `<Root>`'s layout effect runs after its descendants' layout effects in the same commit, so a `setPaletteConfig()` call from a descendant's layout effect in a commit that also mounts `<Root>` or changes its `palette` loses to the prop. Call it from a passive effect or an event handler instead. A `<Root>` that mounts while another tree is already rendered also applies its palette during its first render, which updates that tree mid-render and makes React warn.
 - Under SSR, apply the palette in code that runs on **both** server and client. A client-only `setPaletteConfig` disposes and replaces the server-rendered token block on the first render, which is visible as a flash. Per-request palettes are not supported.
 
 ## Caveats

package/docs/Usage.md

@@ -496,3 +496,5 @@ Inputs subscribe to their own values and errors. For other reactive UI, use `For
 ### Shared field integration
 
 Built-in inputs have field support; they do not need a `Field` wrapper. Modern `name` and `field` bindings, and legacy string `name` bindings, connect through `useFieldProps`. Custom controls use that hook and `wrapWithField`. [Field Properties](./FieldProperties.md) documents shared labels, validation, state, and presentation props.
+
+Fields render stable chrome by default, including without a visible label. Use `isBare` for inline controls or when a parent owns the field layout and feedback; a supplied label remains accessible but visually hidden. Message content never chooses whether the wrapper exists. `errorMessage={null}` suppresses error text and its fallback while preserving the description and invalid state.

package/docs/components/Root.md

@@ -13,7 +13,7 @@ The root application wrapper. Provides theme context, global styles, portal cont
 - **`navigation`** `NavigationAdapter` — Custom navigation adapter for routing
 - **`tracking`** `TrackingProps` — Analytics/tracking event configuration
 - **`tokens`** `Record<string, string>` — Custom design tokens (CSS custom properties)
-- **`palette`** `PaletteConfig` — Tune the generated color palette. Every zone — `accent`, `base` and each status theme — takes the same seed: a color, or `{ hue, saturation }`. Plus the global `surfaceMode`, `pastel` and `contrastLevel`. Applied during render, so the first paint is already correct. Describes the whole palette, so dropping a field drops that customization. A convenience wrapper over `setPaletteConfig()` — the palette is process-global, not per tree. See [Theming](../Theming.md)
+- **`palette`** `PaletteConfig` — Tune the generated color palette. Every zone — `accent`, `base` and each status theme — takes the same seed: a color, or `{ hue, saturation }`. Plus the global `surfaceMode`, `pastel` and `contrastLevel`. The first mount applies it during render, so the first paint is already correct; a later change applies in a layout effect, still before paint. Describes the whole palette, so dropping a field drops that customization. A convenience wrapper over `setPaletteConfig()` — the palette is process-global, not per tree. See [Theming](../Theming.md)
 - **`fonts`** `boolean` — Whether to load default fonts
 - **`font`** `string` — Custom font family name
 - **`monospaceFont`** `string` — Custom monospace font family name

package/docs/components/actions/Button.md

@@ -25,7 +25,7 @@ A versatile action component that triggers commands and navigates users.
 - **`tooltip`** `string | boolean | object` — Tooltip content. Use a string for simple text, `true` for auto tooltip on overflow, or an object with `{ title, auto, placement, ...tooltipProps }`
 - **`defaultTooltipPlacement`** `Placement` (default: `top`) — Default placement for the button's tooltip
 - **`isDisabled`** `boolean` (default: `false`) — Disables the button. Unlike fields, a button doesn't inherit this from `<Provider isDisabled>` or `<Form isDisabled>`, so actions such as Cancel stay live in a disabled form; pass it to each button you want disabled. Of the buttons, only `Form.Submit` and `Form.Reset` inherit it. `ItemButton` behaves like `Button`, and `ItemAction` inherits only its parent item's disabled state
-- **`isLoading`** `boolean` (default: `false`) — Show loading spinner and disable interactions
+- **`isLoading`** `boolean` (default: `false`) — Show loading spinner and disable interactions. A button that is only loading keeps the focus it has, so a keyboard press that starts the work does not drop focus to the page; it is marked `aria-disabled` and `aria-busy` and Tab skips it until loading ends. A button that is also `isDisabled` is natively disabled
 - **`isSelected`** `boolean` (default: `false`) — Marks the button as pressed / selected (toggle)
 - **`to`** `string` — Destination URL or route; prefix with `!` to open in new tab, `@` to bypass router
 - **`htmlType`** `'button' | 'submit' | 'reset'` — HTML button type attribute
@@ -198,6 +198,10 @@ import { IconPlus } from '@tabler/icons-react';
 
 A disabled button keeps showing its tooltip. Browsers stop dispatching mouse events on elements carrying the native `disabled` attribute, so a button that has a tooltip is marked with `aria-disabled` instead and kept inert: `onPress` never fires and clicks (including the ones Enter and Space produce) do nothing. Such a button also stays in the tab order, so keyboard users can focus it, see its focus ring and read the tooltip, and the keys that would open a `MenuTrigger` menu do nothing. Buttons rendered as links (`to`) are always marked this way, since `disabled` is not a valid attribute on an anchor.
 
+Only a tooltip you pass counts: a string, or an object with a `title` and no `auto: true`. The automatic tooltip that shows a truncated label depends on the layout, so a disabled button with only that one stays natively disabled, and whether it is a Tab stop does not change with the window width.
+
+Give a disabled button its own `tooltip` rather than wrapping it in a `TooltipProvider`: a natively disabled button receives neither hover nor focus, so a tooltip around it never opens.
+
 ### Custom Size
 
 ```jsx
@@ -229,7 +233,9 @@ A disabled button keeps showing its tooltip. Browsers stop dispatching mouse eve
 
 - `aria-label`, `aria-labelledby` – Accessible name.
 - `aria-pressed` – Derived from `isSelected`. Not emitted when the button renders as a link (`to`) or when the call site sets its own `role` — a button acting as a tab or an option wants `aria-selected` / `aria-current` instead. An explicit `aria-pressed` always wins.
-- `aria-disabled` – Announces the disabled state whenever the native `disabled` attribute cannot be used: on links, and on buttons that carry a tooltip.
+- `aria-disabled` – Announces the disabled state whenever the native `disabled` attribute cannot be used: on links, on buttons that carry a tooltip you passed, and on buttons that are only loading.
+- `aria-busy` – Set while `isLoading`.
+- `aria-describedby` – An open tooltip is added to the button's own description, after it.
 - Additional ARIA attributes supported by React Aria's `useButton`.
 
 ## Behaviour Inside Popovers

package/docs/components/actions/ButtonSplit.md

@@ -50,7 +50,33 @@ These properties allow direct style application without using the `styles` prop:
 
 ### Context Inheritance
 
-`type`, `theme`, `size`, and `isDisabled` set on `Button.Split` are inherited by all child `Button` components via context. Explicitly passed props on individual buttons always take precedence.
+`type`, `theme`, `size`, and `isDisabled` set on `Button.Split` are inherited via context by every `Button` in the split, including a `Button` that a `DialogTrigger` or `Menu.Trigger` in the split uses as its trigger. A `type`, `theme` or `size` passed to an individual `Button` takes precedence. `isDisabled` does not: a disabled split disables every `Button` in it, whatever that `Button`'s own `isDisabled`.
+
+Inheritance stops at the overlay. Buttons in a popover, dialog or menu opened from the split keep their own defaults, so a confirm popover's Cancel button is neither restyled nor disabled by the split. A `Button.Split` rendered inside such an overlay styles its own Buttons as usual.
+
+```jsx
+<Button.Split type="primary" size="small" isDisabled={isShipping}>
+  <DialogTrigger type="popover">
+    <Button>Ship</Button>
+    <Dialog>
+      <Content>Ship these changes?</Content>
+      <Footer>
+        {/* not restyled or disabled by the split: each keeps its own props */}
+        <Button type="primary" onPress={ship}>
+          Ship now
+        </Button>
+        <Button>Cancel</Button>
+      </Footer>
+    </Dialog>
+  </DialogTrigger>
+  <Menu.Trigger placement="bottom end">
+    <Button aria-label="More ship options" icon={<DirectionIcon to="down" />} />
+    <Menu onAction={onShipOption}>
+      <Menu.Item key="schedule">Schedule…</Menu.Item>
+    </Menu>
+  </Menu.Trigger>
+</Button.Split>
+```
 
 ## Modes
 

package/docs/components/actions/Link.md

@@ -59,7 +59,7 @@ These properties allow direct style application without using the `styles` prop:
 <Link to="../parent-page">Parent</Link>
 ```
 
-A string is external only when it starts with a URL scheme (`https:`, `mailto:`, `tel:`) or with `//`. A colon later in a path or query, as in `/models/cube:orders` or `..?thread=a:b`, stays router navigation. Write a relative path whose first segment holds a colon as `./cube:orders`.
+A string is external only when it starts with a URL scheme (`https:`, `mailto:`, `tel:`) or with `//`. A colon later in a path or query, as in `/models/cube:orders` or `..?thread=a:b`, stays router navigation. Write a relative path whose first segment holds a colon as `./cube:orders`. Leading and trailing spaces and control characters are dropped first, as the browser's URL parser drops them, so `" https://cube.dev"` is external and `" /pricing"` navigates to `/pricing`. A no-break space is kept, as the parser keeps it.
 
 ### 2) Open in a new tab (`!` prefix)
 

package/docs/components/actions/Menu.md

@@ -178,7 +178,7 @@ For detailed information about all available item properties, see [Item document
 
 #### Navigation Items
 
-Navigation items render native anchors. An ordinary click or Enter/Space activation uses the navigation adapter passed to [Root](../Root.md) and closes the menu. Without a custom adapter, activation stays native and preserves the anchor's attributes. Modified clicks, middle clicks, downloads, other targets, and external destinations retain browser link behavior. Right-click offers the browser's link commands. Disabled links have no destination and cannot navigate.
+Navigation items render native anchors. An ordinary click or Enter/Space activation uses the navigation adapter passed to [Root](../Root.md) and closes the menu. Without a custom adapter, activation stays native and preserves the anchor's attributes. Modified clicks, middle clicks, downloads, other targets, and external destinations retain browser link behavior. A `to` or `href` is told external the same way as a [Link](./Link.md) `to`, after dropping the spaces and control characters the browser drops around a URL. Right-click offers the browser's link commands. Disabled links have no destination and cannot navigate.
 
 Loading items are disabled by default. Set `isDisabled={false}` to keep a loading item available; `disabledKeys` still applies.
 
@@ -213,7 +213,7 @@ An item's `onAction()` and the Menu's `onAction(key)` compose: when both are sup
 
 Use the item callback for a command that belongs to that item, or handle commands centrally using the Menu callback and item keys. Supplying both is useful for additional observation, such as recording an activation; avoid executing the same command in both callbacks.
 
-The native link target covers the complete row, including padding, gaps and whitespace. Right-click anywhere on that target offers the browser's link commands. Independent controls in the prefix, suffix or actions slots retain their own targets. The primary native anchor owns menu-item semantics and keyboard focus, while Item's original list element owns layout and styling. Command content has no link destination.
+The native link target covers the complete row, including padding, gaps and whitespace. The icon, label and description pass pointer presses through to it, so it receives every click, modified click, middle click and right-click on the row, however long the text. Right-click anywhere on that target offers the browser's link commands. Independent controls in the prefix, suffix or actions slots retain their own targets. The primary native anchor owns menu-item semantics and keyboard focus, while Item's original list element owns layout and styling. Command content has no link destination.
 
 #### Inline Actions
 
@@ -273,6 +273,8 @@ Do not use the forwarded row ref or a role selector as a proxy for the primary f
 
 Use named style slots or their `data-element` markers for content styling. Selectors that depend on the Label, Description or Icon being a particular HTML tag need to allow their native anchor host. A private native target is also a child of the row; use slot markers instead of child-position selectors for content.
 
+In tests, click a navigation row, or a command row with inline actions, through its role, as `getByRole('menuitem', { name })`, rather than through its label, description or icon. Those slots let presses through to the primary anchor, so a click on them fails: a browser test reports that the anchor "intercepts pointer events", and jsdom's user-event rejects an element with `pointer-events: none`.
+
 #### Example with Rich Items
 
 ```jsx

package/docs/components/content/InfoBadge.md

@@ -29,6 +29,8 @@ Every field's `labelTooltip` prop already renders an `InfoBadge` next to the lab
 
 The accessible name is the tooltip text when it's plain text. Rich tooltip content can't serve as a name, so a localized `More information` label is used instead — pass `aria-label` to override it (`label` still works but is deprecated).
 
+A non-interactive badge is exposed as `role="img"` with that name and is not a Tab stop. When `aria-label` replaces a plain-text tooltip as the name, the tooltip text becomes the badge's description, so screen reader users still get it. Rich tooltip content on a non-interactive badge opens on hover only; make the badge interactive (`to` or `onPress`) when keyboard users need to read it.
+
 ### Base Properties
 
 Supports [Base properties](../../BaseProperties.md).

package/docs/components/content/ItemBadge.md

@@ -17,6 +17,10 @@ A non-interactive badge indicator for list items. Similar to `ItemAction` but wi
 - **`isSelected`** `boolean` (default: `false`) — Selected state (for checkmark)
 - **`tooltip`** `string | object` — Tooltip content shown on hover for icon-only badges. A string shows tooltip text; an object supports `{ title, ...tooltipProps }` for advanced configuration.
 
+### Accessibility
+
+A badge is never focusable. An icon-only badge with a name — `aria-label`, or a plain-text `tooltip` — is exposed as `role="img"` with that name. When the name is not the tooltip text, the tooltip text also becomes the badge's description (`aria-description`), so screen reader users get it without hovering. Rich tooltip content has no plain text, so it is available on hover only. Pass `role` to use another role.
+
 ### Base Properties
 
 Supports [Base properties](../../BaseProperties.md).

package/docs/components/content/Layout.md

@@ -226,6 +226,7 @@ Footer area with support for inverted content order (primary actions on right).
 
 - **`invertOrder`** `boolean` (default: `false`) — Reverse child order (primary on right)
 - **`children`** `ReactNode` — Footer content
+- **`role`** `string` — Overrides the landmark role. The footer of a top-level Layout is `contentinfo`; a footer inside a panel or a nested Layout gets `role="none"`, so it adds no landmark. To name such a footer, pass `role="group"` with an `aria-label`.
 
 ---
 
@@ -265,7 +266,7 @@ Collapsible side panel with resizing, transitions, and multiple rendering modes.
 - **`onSizeChange`** `(size: number) => void` — Size change callback
 - **`sizeStorageKey`** `string` — localStorage key for persisting size
 - **`hasTransition`** `boolean` (default: `false`) — Enable slide animation
-- **`isDismissable`** `boolean` (default: `true`) — Allow dismissing overlay/dialog by click or Escape
+- **`isDismissable`** `boolean` (default: `true`) — Allow dismissing overlay/dialog by click or Escape, and an overlay panel by focus moving into the main content
 - **`overlayStyles`** `Styles` — Styles for the overlay backdrop in overlay mode
 - **`isDialogOpen`** `boolean` — Controlled dialog state (mode="dialog")
 - **`defaultIsDialogOpen`** `boolean` (default: `false`) — Initial dialog state
@@ -278,7 +279,7 @@ Collapsible side panel with resizing, transitions, and multiple rendering modes.
 
 - `default` — Standard panel that pushes content aside (propagates size, no overlay)
 - `sticky` — Panel floats over content without affecting layout (no size propagation, no overlay)
-- `overlay` — Panel with dismissable backdrop overlay (propagates size, with overlay)
+- `overlay` — Panel floats over content with a dismissable backdrop overlay (no size propagation, with overlay)
 - `dialog` — Panel renders as a modal dialog (no size propagation, overlay via Dialog)
 
 **Modifiers:**
@@ -315,12 +316,42 @@ Resizable inline section within a layout. Unlike Layout.Panel (which is absolute
 - **`defaultSize`** `number | string` (default: `200`) — Default size for uncontrolled state
 - **`minSize`** `number | string` — Minimum size constraint, in pixels or a CSS length. With `flexShrink={1}`, the pane gives way down to it (`2x` when unset) when a flex container runs short
 - **`maxSize`** `number | string` — Maximum size constraint
-- **`onSizeChange`** `(size: number) => void` — Size change callback
+- **`onSizeChange`** `(size: number) => void` — Size change callback. With `flexShrink={1}`, also called when another such pane beside it is resized and this pane keeps the size it is drawn at
 - **`scrollbar`** `ScrollbarType` (default: `'thin'`) — Scrollbar style
 - **`children`** `ReactNode` — Content to display
 - **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
+Several panes with `flexShrink={1}` can share one flex container, such as editors above the results they produce:
+
+```jsx
+<Layout height="100dvh">
+  <Layout.Pane
+    isResizable
+    resizeEdge="bottom"
+    defaultSize={300}
+    minSize={80}
+    flexShrink={1}
+  >
+    <Text>SQL</Text>
+  </Layout.Pane>
+  <Layout.Pane
+    isResizable
+    resizeEdge="bottom"
+    defaultSize={300}
+    minSize={80}
+    flexShrink={1}
+  >
+    <Text>Python</Text>
+  </Layout.Pane>
+  <Layout.Content flexBasis="0" styles={{ minHeight: '200px' }}>
+    <Text>Results</Text>
+  </Layout.Content>
+</Layout>
+```
+
+Give the other items a zero flex basis, as the results get here: an item that shrinks from a larger basis still takes part of each move. Resizing one of the panes moves its edge with the pointer, or by 10px per arrow key (50px with Shift). The room comes from the panes after its edge, which give way down to their `minSize`; the resize stops there, and the panes before the edge keep their size. A pane that gave way keeps the size it was left at. Within one drag it grows back as far as the size it had when the drag started, but each arrow key press is a move of its own, so shrinking the resized pane by keyboard gives the room to the rest of the container, not back to that pane. A resize that ends where it began, such as an arrow key pressed at the stop, leaves every pane as it was and reports nothing. A hidden pane (`display: none`) takes no part in this.
+
 **Sub-elements:**
 
 - `Inner` - Scrollable inner container
@@ -604,6 +635,8 @@ In `overlay` mode, a semi-transparent backdrop appears behind the panel. The pan
 - Pressing Escape anywhere in the Layout
 - Moving focus to the main content area
 
+Focus closes the panel only when it enters the main content from outside it, for example with a programmatic `focus()`, `Tab` from a control before the Layout, or `Shift+Tab` out of the panel when no other panel comes before it; moving between controls of the main content does not. Panels come after the main content in tab order, so `Tab` from the panel's last control leaves the Layout and keeps the panel open. Focus moving inside the panel, into a popover, menu or dialog opened from it, or into another `Layout.Panel` of the same Layout keeps it open. Other panels of the same Layout can sit under the backdrop; a click on them then closes the overlay panel, but `Tab` still reaches their controls. Opening the panel moves focus to its first control, unless focus already moved elsewhere as it opened (for example to a field with `autoFocus` inside it), so a menu or dialog that opened it can close without handing focus back to the main content. A panel already open when its Layout first renders leaves page focus alone. Closing the panel returns focus to the element that had it when the panel opened, if focus is still in the panel or was lost with it; focus moved elsewhere, by the user or in `onOpenChange`, stays there. If that element is gone by then, as a menu item is, move focus yourself in `onOpenChange`.
+
 ```jsx
 function OverlayPanelExample() {
   const [isPanelOpen, setIsPanelOpen] = useState(true);
@@ -639,7 +672,7 @@ You can customize the overlay styles using the `overlayStyles` prop:
 </Layout.Panel>
 ```
 
-To prevent dismissing the overlay by clicking or pressing Escape, set `isDismissable={false}`:
+To prevent dismissing the overlay by clicking, pressing Escape or moving focus to the main content, set `isDismissable={false}`:
 
 ```jsx
 <Layout.Panel mode="overlay" isDismissable={false}>
@@ -758,7 +791,9 @@ function ApplicationShell() {
 ### Keyboard Navigation
 
 - `Tab` - Navigate between interactive elements
-- Focus management is handled automatically when panels open/close
+- An overlay panel closes on Escape or when focus enters the main content from outside it; focus moving inside it or into another panel of the same Layout keeps it open
+- Panels come after the main content in tab order, so `Tab` from a panel's last control leaves the Layout
+- An overlay panel moves focus to its first control when it opens and returns it to the opener when it closes; in `dialog` mode the dialog manages focus, and other modes leave focus alone
 - Resize handlers can be focused and resized using arrow keys:
   - `Arrow keys` - Resize panel by 10px
   - `Shift + Arrow keys` - Resize panel by 50px
@@ -768,7 +803,7 @@ function ApplicationShell() {
 
 - `Layout.Header` uses semantic heading elements (`h1`-`h6`) based on `level` prop
 - `Layout.Toolbar` has `role="toolbar"` for proper announcement
-- `Layout.Footer` has `role="contentinfo"` for landmark navigation
+- `Layout.Footer` of a top-level Layout has `role="contentinfo"` for landmark navigation; footers inside panels and nested Layouts add no landmark
 - Breadcrumbs use Link components with proper navigation semantics
 - Panel close buttons have accessible labels