@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}

package/dist/TextInput/TextInput.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/TextInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/TextInput/ (showcase blocks)
  */
-import { useId, useOptimistic, useTransition, useCallback, useRef } from 'react';
+import { use, useId, useOptimistic, useTransition, useCallback, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -25,6 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { getInputARIA, isImeKeyEvent } from "../utils/index.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -39,7 +40,7 @@ const sizeStyles = {
     $$css: true
   }
 };
-import { groupStyles } from "../InputGroup/groupStyles.js";
+import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 
 // Re-export shared types for convenience
 
@@ -49,7 +50,9 @@ import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
@@ -71,7 +74,7 @@ export function TextInput({
   description,
   isOptional = false,
   isRequired = false,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   isReadOnly = false,
   disabledMessage,
   startIcon,
@@ -99,8 +102,12 @@ export function TextInput({
   ref,
   id: idProp,
   'aria-describedby': ariaDescribedByProp,
+  'aria-labelledby': ariaLabelledByProp,
   ...restProps
 }) {
+  const inputGroup = useInputGroup();
+  const inputGroupState = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || inputGroupState.isDisabled;
   const {
     rest,
     container
@@ -114,15 +121,18 @@ export function TextInput({
     isRequired,
     isOptional
   });
+  // A disabled field keeps its tab stop but, like a natively disabled one,
+  // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
+  const fieldProps = isDisabled ? Object.fromEntries(Object.entries(rest).filter(([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key))) : rest;
   const size = useSize(sizeProp, 'md');
   const generatedID = useId();
   const id = idProp ?? generatedID;
+  const fieldLabelID = useId();
   const inputLabelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const inputRef = useRef(null);
   const containerRef = useRef(null);
-  const inputGroup = useInputGroup();
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
@@ -130,8 +140,7 @@ export function TextInput({
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), containerRef);
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the input container (which already exists) and
+  // Disabled-reason tooltip. The tooltip listeners attach to the input container (which already exists) and
   // the input stays perceivable via aria-disabled instead of the native
   // disabled attribute. The field is made read-only so it can't be typed into,
   // and value mutation is blocked by the isDisabled guard in handleChange.
@@ -161,6 +170,9 @@ export function TextInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  // A caller aria-labelledby names the input together with the field's own
+  // label (the Field label standalone, the group and input labels in a group).
+  const inputLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelID, ariaLabelledByProp) : ariaLabelledBy;
   const handleChange = e => {
     // Value can't change while showing a disabled message (the field is
     // read-only and non-native-disabled), but guard the handler too so the
@@ -184,12 +196,13 @@ export function TextInput({
     if (!e || e.detail === 0) {
       inputRef.current?.focus();
     } else {
-      // Defer focus restoration past the button's unmount task so iOS Safari
-      // and touch browsers don't jump the page scroll to 0 on tap.
-      requestAnimationFrame(() => {
-        inputRef.current?.focus({
-          preventScroll: true
-        });
+      // Focus inside the tap: iOS Safari brings up its keyboard only for a
+      // focus made while handling the touch, so a field the tap reaches
+      // unfocused gets its keyboard, as UIKit's clear button makes the
+      // field first responder. `preventScroll` keeps a scrolled page where
+      // it is.
+      inputRef.current?.focus({
+        preventScroll: true
       });
     }
   }, [onChange]);
@@ -213,12 +226,13 @@ export function TextInput({
     },
     onClick: handleWrapperClick,
     onMouseUp: handleWrapperMouseUp,
+    ...(inputGroup ? inputGroupItemProps : undefined),
     ...mergeProps(themeProps('text-input', {
       size,
       status: status?.type ?? null,
       disabled: isDisabled ? 'disabled' : null,
       readonly: isReadOnly ? 'readonly' : null
-    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, isDisabled && inputDisabledFocusStyles.ring, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [startIcon && renderIconSlot(startIcon, {
       size: 'sm',
       color: 'secondary'
@@ -226,14 +240,21 @@ export function TextInput({
       id: inputLabelID,
       children: label
     }), /*#__PURE__*/_jsx("input", {
-      ...rest,
+      ...fieldProps,
       ref: useMergedRefs(ref, inputRef),
       id: id,
       name: isDisabled ? undefined : htmlName,
       type: type,
       value: optimisticValue,
       onChange: handleChange,
-      onKeyDown: onEnter || onKeyDown ? e => {
+      onKeyDown: isDisabled || onEnter || onKeyDown ? e => {
+        if (isDisabled) {
+          // A read-only field still submits its form on Enter.
+          if (e.key === 'Enter') {
+            e.preventDefault();
+          }
+          return;
+        }
         // The composing keydown fires before compositionend, so without
         // this guard pressing Enter to commit a Japanese/Chinese/Korean
         // IME conversion would trigger onEnter (submit/save actions)
@@ -245,20 +266,19 @@ export function TextInput({
         onKeyDown?.(e);
       } : undefined,
       placeholder: placeholder
-      // With a disabledMessage the input keeps focusability via aria-disabled
-      // so the reason is focus-discoverable; readOnly + the handleChange guard
-      // keep the value from changing.
+      // A disabled input keeps its place in the tab order (spec:AST-085):
+      // aria-disabled instead of the native attribute, with readOnly + the
+      // handleChange guard keeping the value from changing.
       ,
-      disabled: isDisabled && !showsDisabledMessage,
-      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-      readOnly: isReadOnly || showsDisabledMessage || undefined,
+      "aria-disabled": isDisabled ? 'true' : undefined,
+      readOnly: isReadOnly || isDisabled || undefined,
       autoFocus: hasAutoFocus,
       "data-autofocus": hasAutoFocus || undefined,
       "aria-describedby": [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
       "aria-required": isEffectivelyRequired ? 'true' : undefined,
       "aria-invalid": status?.type === 'error' ? 'true' : undefined,
       "aria-busy": isBusy || undefined,
-      "aria-labelledby": ariaLabelledBy,
+      "aria-labelledby": inputLabelledBy,
       ...{
         0: {
           className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 xf9zqsd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
@@ -288,6 +308,7 @@ export function TextInput({
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: id,
+    labelID: ariaLabelledByProp != null ? fieldLabelID : undefined,
     descriptionID: description ? descriptionID : undefined,
     isOptional: isOptional,
     isRequired: isRequired,

package/dist/Thumbnail/Thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6LD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA2JhB;yBA1Ke,SAAS"}
+{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6MD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAoKhB;yBAnLe,SAAS"}

package/dist/Thumbnail/Thumbnail.js

@@ -51,7 +51,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // element the controller writes to (`pressedAlpha`) at the press's strength,
 // 1 while on and 1 → 0 over the release, and inherited resolved by the
 // `::after` that paints it. See interactionOverlay.stylex.ts.
-const pressedOverlayColor = 'var(--_press-paint)';
+const pressedOverlayImage = 'var(--_press-paint-image)';
+/** Written by the press controller while it paints a press. */
+const PRESSED_ON = '[data-astryx-press="on"]';
+/** Written by the press controller for the press's release. */
+const PRESSED_FADING = '[data-astryx-press="fading"]';
 const styles = {
   root: {
     kVAEAm: "x1n2onr6",
@@ -76,17 +80,17 @@ const styles = {
     $$css: true
   },
   overlay: {
-    "--_press-overlay": "x1s9pv7w xb8awce x1a5qima x1sad4of x1s2lk0z xmfmiv1 x1hn5ov8",
-    "--_press-overlay-transition": "x1wkyqe6 xbb2ue6 x1wphrdb",
+    "--_press-overlay": "x1s9pv7w xb8awce x1a5qima xmfmiv1 x1hn5ov8",
     k5JduY: "x1s928wv",
     kwXMNM: "x1j6awrg",
     kv0HGH: "xarstr8",
     kUfP38: "x1k48kgn",
     kloYau: "x2q1x1w",
-    kRicXK: "x1ywzrc5",
-    kPNhGg: "x18w5vxb",
+    kRicXK: "x1ywzrc5 x1xg7wox x15tr235",
+    kPNhGg: "x97pup0",
     kA8PQs: "x1dlmc9c",
-    ks3ayO: "x1l0fnur",
+    ks3ayO: "x1l0fnur x1l0866b x7bosnz",
+    kNctxI: "x1rd1oi2 xlif165",
     $$css: true
   },
   removeButtonOverrides: {
@@ -182,7 +186,10 @@ export function Thumbnail({
   useBusyAnnouncement(showUploadOverlay, t('@astryx.spinner.loading'), uploadOverlayRef);
   const showPlaceholder = !isLoading && !hasSrc || hasError;
   const isInteractive = onClick != null && !isDisabled && !isLoading;
-  const hasRemove = onRemove != null && !isDisabled;
+  // Open and Remove stay mounted while they cannot act, inert and announced
+  // as disabled, so a focused one keeps focus (spec:AST-085 FR1, FR4, FR6).
+  const hasOpen = onClick != null;
+  const hasRemove = onRemove != null;
   const isHoverReveal = hasRemove && showRemoveOn === 'hover';
   const {
     getContainerProps,
@@ -243,9 +250,13 @@ export function Thumbnail({
       variant: "secondary",
       size: "sm",
       isIconOnly: true,
+      "aria-disabled": isDisabled ? 'true' : undefined,
+      onKeyDown: isDisabled ? suppressActivationKeys : undefined,
       onClick: e => {
         e.stopPropagation();
-        onRemove(e);
+        if (!isDisabled) {
+          onRemove(e);
+        }
       },
       xstyle: styles.removeButtonOverrides
     })
@@ -263,12 +274,14 @@ export function Thumbnail({
       // The touch press's strength and release, on the element the
       // controller writes to; the `::after` above paints off it.
       isInteractive && interactionOverlayStyles.pressedAlpha), isHoverReveal ? getContainerProps() : {}),
-      children: [isInteractive ? /*#__PURE__*/_jsx("button", {
+      children: [hasOpen ? /*#__PURE__*/_jsx("button", {
         type: "button",
-        onClick: onClick,
+        onClick: isInteractive ? onClick : stopInertPress,
+        onKeyDown: isInteractive ? undefined : suppressActivationKeys,
         "aria-label": t('@astryx.thumbnail.open', {
           accessibleName
         }),
+        "aria-disabled": isInteractive ? undefined : 'true',
         ...{
           className: "x1ypdohk x16khyan x1lliihq xh8yej3 x5yr21d xh6dtrn xb3r6kr"
         },
@@ -298,4 +311,25 @@ export function Thumbnail({
   }
   return thumbnail;
 }
-Thumbnail.displayName = 'Thumbnail';
+Thumbnail.displayName = 'Thumbnail';
+
+/**
+ * Enter and Space on an inert action dispatch no click at all, so no listener
+ * anywhere receives one (spec:AST-085 FR2), as Button does for its own
+ * aria-disabled state.
+ */
+function suppressActivationKeys(event) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+  }
+}
+
+/**
+ * A click that still reaches an inert Open (a pointer, or assistive
+ * technology dispatching one) calls nothing and stops here, so an ancestor's
+ * click handler does not take it either (spec:AST-085 FR2).
+ */
+function stopInertPress(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}

package/dist/TimeInput/TimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAO3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,4BAA4B,CAAC;AAyDpC,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhD,iFAAiF;AACjF,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,4EAA4E;AAC5E,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAItD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,cAAc,CAC5B;IACC,qEAAqE;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA8hBD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAyC9C;yBAzCe,SAAS"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/TimeInput/TimeInput.js

@@ -16,7 +16,7 @@
  * - /apps/storybook/stories/TimeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/TimeInput/ (showcase blocks)
  */
-import { useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
+import { use, useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -36,7 +36,8 @@ import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
-import { groupStyles } from "../InputGroup/groupStyles.js";
+import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
+import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
@@ -410,6 +411,7 @@ function TimeField({
     },
     onClick: usesNativeTimePicker ? undefined : handleWrapperClick,
     onMouseUp: usesNativeTimePicker ? undefined : handleWrapperMouseUp,
+    ...(inputGroup ? inputGroupItemProps : undefined),
     ...mergeProps(themeProps('time-input', {
       size,
       status: status?.type ?? null,
@@ -557,6 +559,8 @@ TimeField.displayName = 'TimeField';
  * `preventDefault` on, so it cannot cancel built-in behavior.
  */
 export function TimeInput(props) {
+  const inputGroupState = use(InputGroupInternalContext);
+  const isDisabled = props.isDisabled || inputGroupState.isDisabled;
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
   useDevWarning('TimeInput', '`nativePicker` is deprecated; use `presentation` instead (`touch` → `adaptive-native`, `always` → `native`, `never` → `text-input`). `presentation` wins when both are set.', props.nativePicker !== undefined);
   const effective = effectiveInputPresentation(props.presentation, props.nativePicker, 'time');
@@ -570,6 +574,7 @@ export function TimeInput(props) {
     // explicit `presentation="native"` is forced.
     return /*#__PURE__*/_jsx(TimeField, {
       ...rest,
+      isDisabled: isDisabled,
       nativeMode: props.presentation === undefined && props.nativePicker === 'always' ? 'legacy' : 'forced'
     });
   }
@@ -578,16 +583,19 @@ export function TimeInput(props) {
       // Only `adaptive-native` on a coarse pointer resolves here (FR2).
       return /*#__PURE__*/_jsx(TimeField, {
         ...rest,
+        isDisabled: isDisabled,
         nativeMode: "adaptive"
       });
     case 'sheet':
       return /*#__PURE__*/_jsx(TouchTimeField, {
-        ...rest
+        ...rest,
+        isDisabled: isDisabled
       });
     case 'text-input':
     case 'desktop':
       return /*#__PURE__*/_jsx(TimeField, {
-        ...rest
+        ...rest,
+        isDisabled: isDisabled
       });
   }
 }

package/dist/TimeInput/TouchTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAqHhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAGlB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BA0ZhB;yBA7be,cAAc"}
+{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAqHhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAGlB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BA2ZhB;yBA9be,cAAc"}

package/dist/TimeInput/TouchTimeField.js

@@ -23,7 +23,7 @@ import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, i
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { joinAriaIDs } from "../utils/inputAria.js";
-import { groupStyles } from "../InputGroup/groupStyles.js";
+import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
@@ -316,6 +316,7 @@ export function TouchTimeField({
     ref: el => {
       disabledMessageTooltip.ref(el);
     },
+    ...(inputGroup ? inputGroupItemProps : undefined),
     ...mergeProps(themeProps('time-input', {
       size,
       status: status?.type ?? null,

package/dist/Toast/ToastViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AAG3E,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAwJtD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAyGD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAU,EACV,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAgYpB;yBAvYe,aAAa"}
+{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AAG3E,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAwJtD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAyGD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAU,EACV,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAwbpB;yBA/be,aAAa"}

package/dist/Toast/ToastViewport.js

@@ -251,6 +251,9 @@ export function ToastViewport({
   // Toast ids whose exit has begun — guards onHide from double-firing (see
   // removeToast). Mirrors exitingIds state, readable synchronously.
   const exitingIdsRef = useRef(new Set());
+  // Toasts dispatched since the last commit, by id: a dismiss() called
+  // before the toast first renders still finds it (and its onHide).
+  const pendingEntriesRef = useRef(new Map());
   // The element that was focused before the user jumped into the viewport
   // (via F6). Used to restore focus once all toasts are dismissed so focus
   // never falls to <body>.
@@ -314,6 +317,16 @@ export function ToastViewport({
       // else to the polite region (role="status") — mirrors Toast.tsx.
       announce(text, entry.options.type === 'error' ? 'assertive' : 'polite');
     }
+    const pending = pendingEntriesRef.current;
+    if (uniqueID) {
+      // An overwrite replaces a toast that has not rendered yet too.
+      for (const [pendingId, pendingEntry] of pending) {
+        if (pendingEntry.options.uniqueID === uniqueID) {
+          pending.delete(pendingId);
+        }
+      }
+    }
+    pending.set(entry.id, entry);
     // An overwrite swaps a new entry, with a new id, into the replaced
     // toast's place, so the old row leaves the DOM without ever being
     // dismissed. Its settled id is dropped by the prune below, which covers
@@ -337,11 +350,13 @@ export function ToastViewport({
     if (exitingIdsRef.current.has(id)) {
       return;
     }
-    exitingIdsRef.current.add(id);
-    const entry = toastsRef.current.find(t => t.id === id);
-    if (entry) {
-      entry.options.onHide?.(reason);
+    const entry = toastsRef.current.find(t => t.id === id) ?? pendingEntriesRef.current.get(id);
+    if (entry == null) {
+      // Already gone: nothing to hide or report.
+      return;
     }
+    exitingIdsRef.current.add(id);
+    entry.options.onHide?.(reason);
     // If focus currently lives inside the toast being dismissed, remember
     // that its removal must hand focus off to a neighbor (or the element
     // focused before the user entered the viewport) rather than <body>.
@@ -361,6 +376,20 @@ export function ToastViewport({
         pendingFocusRef.current = 'restore';
       }
     }
+    if (dismissedNode == null) {
+      // No row is mounted for it: it is hidden past `maxVisible`, or it has
+      // not rendered yet. Nothing animates out, so it leaves the list now.
+      // Waiting for its row to finish exiting would keep it forever: when it
+      // surfaced, its row would mount already collapsed, with no transition
+      // left to end, and hold a visible slot as an empty row.
+      // It leaves the committed list now too, so a second dismissal before
+      // the next render finds nothing to report.
+      exitingIdsRef.current.delete(id);
+      pendingEntriesRef.current.delete(id);
+      toastsRef.current = toastsRef.current.filter(t => t.id !== id);
+      setToasts(prev => prev.filter(t => t.id !== id));
+      return;
+    }
     setExitingIds(prev => {
       if (prev.has(id)) {
         return prev;
@@ -370,6 +399,7 @@ export function ToastViewport({
   }, []);
   const handleExited = useCallback(id => {
     exitingIdsRef.current.delete(id);
+    pendingEntriesRef.current.delete(id);
     setExitingIds(withoutId(id));
     setToasts(prev => prev.filter(t => t.id !== id));
   }, []);
@@ -456,7 +486,7 @@ export function ToastViewport({
     if (!isTopLayer || host == null) {
       return;
     }
-    const place = () => {
+    const place = (change = 'outlet') => {
       const parent = getActiveModalOutlet() ?? rootOutletRef.current;
       if (parent == null) {
         return;
@@ -474,7 +504,9 @@ export function ToastViewport({
       }
       // Leaving the document hid the popover. Showing it again puts it above
       // the modal that just opened, or above everything once the last modal
-      // closed.
+      // closed. A non-modal surface that entered the top layer (`entry`)
+      // moved nothing, so the viewport leaves and re-enters in place to get
+      // above it; focus inside it is kept across the re-entry.
       const el = viewportRef.current;
       if (el == null || typeof el.showPopover !== 'function') {
         return;
@@ -485,6 +517,30 @@ export function ToastViewport({
       } catch {
         /* :popover-open unsupported */
       }
+      if (isShowing && change === 'entry') {
+        const active = document.activeElement;
+        const hadFocus = active instanceof HTMLElement && el.contains(active);
+        try {
+          el.hidePopover();
+          isShowing = false;
+        } catch {
+          /* not a showing popover */
+        }
+        if (isShowing) {
+          return;
+        }
+        try {
+          el.showPopover();
+        } catch {
+          /* already showing */
+        }
+        if (hadFocus) {
+          active.focus({
+            preventScroll: true
+          });
+        }
+        return;
+      }
       if (!isShowing) {
         try {
           el.showPopover();

package/dist/Tokenizer/Tokenizer.d.ts

@@ -1,12 +1,21 @@
 /**
  * @file Tokenizer.tsx
- * @input Uses React, BaseTypeahead, Field, Token, useAnnounce
- * @output Exports Tokenizer multi-select typeahead component
+ * @input Uses React, BaseTypeahead, Field, Token, useAnnounce,
+ *   useAdaptivePresentation, and TokenizerBottomSheet (lazy)
+ * @output Exports Tokenizer multi-select typeahead component, and the
+ *   internal TokenizerWithPresentation signature the `internal/tokenizer-presentation`
+ *   entry re-exports
  * @position Composed component; forwards DOM ref and exposes focus control via
- *   handleRef
+ *   handleRef. The sheet presentation — a trigger that opens
+ *   TokenizerBottomSheet — is implemented but not exposed: `TokenizerProps`
+ *   offers no `experimental.presentation` while its user experience is being
+ *   finished (`component:Tokenizer` DEC-3, implementation gap), and only
+ *   Astryx's own packages reach it through the internal entry
+ *   (`architecture:react-component-runtime` INV13).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/index.ts
+ * - /packages/core/src/Tokenizer/TokenizerBottomSheet.tsx (sheet presentation)
  * - /apps/storybook/stories/Tokenizer.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Tokenizer/ (showcase blocks)
  */
@@ -49,6 +58,35 @@ export interface TokenizerHandle {
     /** Blur the typeahead input. */
     blur(): void;
 }
+/**
+ * The presentation options the sheet-capable signature admits. Not public:
+ * `TokenizerProps` has no `experimental` while the sheet's user experience is
+ * being finished; Astryx's own packages reach the sheet through
+ * `@astryxdesign/core/internal/tokenizer-presentation`.
+ */
+export interface TokenizerPresentationOptions {
+    /**
+     * How the field presents its choices.
+     * - `'popover'`: the inline combobox with its anchored suggestion menu —
+     *   the stable behavior.
+     * - `'bottom-sheet'`: a trigger showing the selected tokens that opens one
+     *   tall modal sheet: a search row on top, full-width checkbox rows that
+     *   keep their place while the sheet is open, a create row with
+     *   `hasCreate`, and a footer with a confirmed Clear all and Done. Suited
+     *   to compact touch screens, where the inline combobox competes with the
+     *   software keyboard.
+     * - `'adaptive'`: the bottom sheet on compact coarse-pointer screens,
+     *   otherwise the popover — the same resolution Selector uses.
+     *
+     * In the sheet presentation the trigger is the control: `ref`, `id`,
+     * `aria-*`, and `data-*` reach it. `renderItem`, `renderToken`,
+     * `endContent`, `hasClear`, `hasEntriesOnFocus`, `menuWidth`,
+     * `tokenOverflowBehavior`, and `hasAutoFocus` have no surface to act on
+     * and warn once in development.
+     * @default 'popover'
+     */
+    presentation?: 'popover' | 'bottom-sheet' | 'adaptive';
+}
 export interface TokenizerProps<T extends SearchableItem> extends Omit<FieldInputBaseProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown'> {
     /**
      * Key handler. Runs after the built-in key handling, so it observes every key
@@ -197,8 +235,37 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<FieldInpu
     /** Imperative handle ref for focus/blur control. */
     handleRef?: React.Ref<TokenizerHandle>;
 }
-export declare function Tokenizer<T extends SearchableItem>({ label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, renderToken, maxEntries, placeholder, hasEntriesOnFocus, maxMenuItems, menuWidth, minQueryLength, emptySearchText, isDisabled, htmlName, disabledMessage, hasClear, endContent, hasAutoFocus, size: sizeProp, tokenOverflowBehavior, debounceMs, hasCreate, onChangeQuery, onFocus, onBlur, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, handleRef, onKeyDown, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: TokenizerProps<T>): React.JSX.Element;
+/**
+ * The props of the sheet-capable signature: `TokenizerProps` plus the
+ * presentation options and a `ref` that also accepts the sheet presentation's
+ * trigger button, the control it stands for there. Not public: reached only
+ * as `TokenizerWithPresentation` through the internal entry, so the released
+ * `TokenizerProps` — an interface, so `interface X extends TokenizerProps<T>`,
+ * `Omit<TokenizerProps<T>, …>` and `ComponentProps<typeof Tokenizer>` keep
+ * their released shapes — names no presentation.
+ */
+export type TokenizerWithPresentationProps<T extends SearchableItem> = Omit<TokenizerProps<T>, 'ref'> & {
+    /** How the field presents its choices; see `TokenizerPresentationOptions`. */
+    experimental?: TokenizerPresentationOptions;
+    /**
+     * Ref forwarded to the control: the combobox input in the popover
+     * presentation, the trigger button in the sheet presentation.
+     */
+    ref?: React.Ref<HTMLInputElement | HTMLButtonElement>;
+};
+export declare function Tokenizer<T extends SearchableItem>(props: TokenizerProps<T>): React.JSX.Element;
 export declare namespace Tokenizer {
     var displayName: string;
 }
+/**
+ * The same component with the sheet presentation reachable: `experimental`
+ * (`presentation: 'popover' | 'bottom-sheet' | 'adaptive'`) and a `ref` that
+ * also takes the trigger button. Not public — re-exported only by
+ * `@astryxdesign/core/internal/tokenizer-presentation`, the entry reserved
+ * for Astryx's own packages (`architecture:react-component-runtime` INV13),
+ * while the sheet's user experience is being finished (`component:Tokenizer`
+ * DEC-3). The public `Tokenizer` renders the popover presentation for every
+ * field.
+ */
+export declare const TokenizerWithPresentation: <T extends SearchableItem>(props: TokenizerWithPresentationProps<T>) => React.JSX.Element;
 //# sourceMappingURL=Tokenizer.d.ts.map