@unisane/ui 0.1.1 → 0.1.2-next.20261102.1

package/registry/components/sheet.tsx

@@ -99,7 +99,9 @@ export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
 
     useScrollLock(isOpen);
     useOverlayBehavior({
-      open: isOpen,
+      // A controlled open first schedules the deferred panel mount. Register
+      // only once its refs exist, including on subsequent closed-to-open cycles.
+      open: isOpen && shouldRender,
       contentRef: panelRef,
       rootRef: overlayRootRef,
       onDismiss: () => setIsOpen(false),
@@ -173,7 +175,11 @@ export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
               ? 'items-stretch justify-start p-0'
               : 'items-stretch justify-end p-0',
         )}
-        role="presentation"
+        role="dialog"
+        data-unisane-modal-root=""
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        aria-describedby={describedBy}
       >
         <div
           className={cn(
@@ -202,7 +208,7 @@ export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
           className={cn(
             'bg-surface shadow-5 border-outline-soft relative flex max-h-full w-full transform-gpu flex-col overflow-hidden border',
             isBottom
-              ? 'rounded-t-lg rounded-b-none border-b-0'
+              ? 'rounded-b-none rounded-t-lg border-b-0'
               : isLeft
                 ? 'h-full rounded-none border-l-0'
                 : 'h-full rounded-none border-r-0',
@@ -226,10 +232,6 @@ export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
               ? 'cubic-bezier(0.2, 0.8, 0.2, 1)'
               : 'cubic-bezier(0.4, 0, 1, 1)',
           }}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby={title ? titleId : undefined}
-          aria-describedby={describedBy}
           tabIndex={-1}
         >
           {hasHeader ? (
@@ -254,7 +256,7 @@ export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
                     as="div"
                     variant="titleLarge"
                     id={titleId}
-                    className="text-on-surface leading-tight wrap-break-word"
+                    className="text-on-surface wrap-break-word leading-tight"
                   >
                     {title}
                   </Text>
@@ -264,7 +266,7 @@ export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
                     as="div"
                     variant="bodySmall"
                     id={descriptionId}
-                    className="text-on-surface-variant leading-relaxed wrap-break-word"
+                    className="text-on-surface-variant wrap-break-word leading-relaxed"
                   >
                     {description}
                   </Text>

package/registry/components/text-field.tsx

@@ -9,6 +9,8 @@ import {
   getFieldAffixClasses,
   getFieldHelperTextClasses,
   getFieldLabelClasses,
+  getStackedFieldLabelClasses,
+  type FieldLabelPlacement,
   type FieldShellVariant,
 } from '@/lib/field-shell';
 
@@ -30,6 +32,7 @@ type TextFieldCommonProps = {
   trailingIcon?: React.ReactNode;
   value?: string | number;
   variant?: FieldShellVariant;
+  labelPlacement?: FieldLabelPlacement;
 };
 
 type ReplacedNativeProps =
@@ -80,6 +83,7 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
       trailingIcon,
       value,
       variant = 'outlined',
+      labelPlacement = 'floating',
       ...nativeControlProps
     } = props;
     const inputProps = nativeControlProps as TextFieldInputAttributes & TextFieldEvents;
@@ -102,7 +106,8 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
     const [uncontrolledValue, setUncontrolledValue] = React.useState(String(defaultValue));
     const currentValue = value === undefined ? uncontrolledValue : String(value);
     const hasValue = currentValue.length > 0;
-    const isFloating = hideLabel || Boolean(placeholder) || isFocused || hasValue;
+    const isFloating =
+      labelPlacement === 'stacked' || hideLabel || Boolean(placeholder) || isFocused || hasValue;
 
     const setControlRef = React.useCallback(
       (node: TextFieldControl | null) => {
@@ -118,7 +123,33 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
 
     React.useLayoutEffect(() => {
       if (!multiline || !autoResize) return;
-      resizeTextarea(internalRef.current, autoResizeMaxHeight);
+      const field = internalRef.current;
+      if (!(field instanceof HTMLTextAreaElement)) return;
+      resizeTextarea(field, autoResizeMaxHeight);
+      let active = true;
+      let width = field.clientWidth;
+      const resizeVisible = () => {
+        if (active && field.clientWidth > 0) resizeTextarea(field, autoResizeMaxHeight);
+      };
+      const observer =
+        typeof ResizeObserver === 'undefined'
+          ? undefined
+          : new ResizeObserver(() => {
+              if (field.clientWidth !== width) {
+                width = field.clientWidth;
+                resizeVisible();
+              }
+            });
+      observer?.observe(field);
+      // Initial hydration can precede web-font metrics; a hidden panel can also
+      // become visible at a different width without changing its text value.
+      void document.fonts?.ready.then(resizeVisible);
+      document.fonts?.addEventListener('loadingdone', resizeVisible);
+      return () => {
+        active = false;
+        observer?.disconnect();
+        document.fonts?.removeEventListener('loadingdone', resizeVisible);
+      };
     }, [autoResize, autoResizeMaxHeight, currentValue, multiline]);
 
     function handleValueChange(nextValue: string) {
@@ -133,11 +164,21 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
       'placeholder:text-on-surface-variant',
       fieldSize.horizontalPadding,
       fieldSize.valueText,
-      variant === 'filled' ? fieldSize.filledInputPadding : '',
+      labelPlacement === 'stacked' && 'tracking-normal',
+      variant === 'filled' && labelPlacement === 'floating' ? fieldSize.filledInputPadding : '',
     );
 
     return (
       <Field className={className} invalid={resolvedInvalid}>
+        {labelPlacement === 'stacked' && !hideLabel ? (
+          <FieldLabel
+            htmlFor={fieldId}
+            required={required}
+            className={getStackedFieldLabelClasses(size, resolvedInvalid, disabled)}
+          >
+            {label}
+          </FieldLabel>
+        ) : null}
         <div
           className={cn(
             fieldContainerVariants({ variant, error: resolvedInvalid, disabled }),
@@ -173,7 +214,9 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
                   controlClasses,
                   'min-h-24 resize-none',
                   fieldSize.multilinePaddingY,
-                  variant === 'filled' ? fieldSize.filledTextareaPadding : '',
+                  variant === 'filled' && labelPlacement === 'floating'
+                    ? fieldSize.filledTextareaPadding
+                    : '',
                 )}
                 onBlur={(event) => {
                   setIsFocused(false);
@@ -209,24 +252,26 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
                 }}
               />
             )}
-            <FieldLabel
-              htmlFor={fieldId}
-              required={required}
-              className={
-                hideLabel
-                  ? 'sr-only'
-                  : getFieldLabelClasses({
-                      size,
-                      variant,
-                      floating: isFloating,
-                      error: resolvedInvalid,
-                      active: isFocused,
-                      multiline,
-                    })
-              }
-            >
-              {label}
-            </FieldLabel>
+            {labelPlacement === 'floating' || hideLabel ? (
+              <FieldLabel
+                htmlFor={fieldId}
+                required={required}
+                className={
+                  hideLabel || labelPlacement === 'stacked'
+                    ? 'sr-only'
+                    : getFieldLabelClasses({
+                        size,
+                        variant,
+                        floating: isFloating,
+                        error: resolvedInvalid,
+                        active: isFocused,
+                        multiline,
+                      })
+                }
+              >
+                {label}
+              </FieldLabel>
+            ) : null}
           </div>
           {trailingIcon ? (
             <span
@@ -244,11 +289,17 @@ export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
           ) : null}
         </div>
         {errorMessage ? (
-          <FieldError id={errorId} className={getFieldHelperTextClasses(size, true)}>
+          <FieldError
+            id={errorId}
+            className={getFieldHelperTextClasses(size, true, labelPlacement)}
+          >
             {errorMessage}
           </FieldError>
         ) : description ? (
-          <FieldDescription id={descriptionId} className={getFieldHelperTextClasses(size)}>
+          <FieldDescription
+            id={descriptionId}
+            className={getFieldHelperTextClasses(size, false, labelPlacement)}
+          >
             {description}
           </FieldDescription>
         ) : null}

package/registry/components/token-field.tsx

@@ -17,6 +17,8 @@ import {
   getFieldAffixClasses,
   getFieldHelperTextClasses,
   getFieldLabelClasses,
+  getStackedFieldLabelClasses,
+  type FieldLabelPlacement,
   type FieldShellVariant,
 } from '@/lib/field-shell';
 import { useFieldState } from '@/lib/use-field-state';
@@ -32,6 +34,7 @@ export type TokenFieldProps = TokenFieldInputProps & {
   onValueChange?: (value: string[]) => void;
   label: string;
   variant?: FieldShellVariant;
+  labelPlacement?: FieldLabelPlacement;
   size?: FieldSize;
   error?: boolean;
   helperText?: string;
@@ -57,6 +60,7 @@ export const TokenField = React.forwardRef<HTMLDivElement, TokenFieldProps>(
       onValueChange,
       label,
       variant = 'outlined',
+      labelPlacement = 'floating',
       size = 'md',
       error,
       helperText,
@@ -277,6 +281,17 @@ export const TokenField = React.forwardRef<HTMLDivElement, TokenFieldProps>(
         className={cn('relative inline-flex w-full flex-col', className)}
         onBlur={handleRootBlur}
       >
+        {labelPlacement === 'stacked' ? (
+          <label
+            htmlFor={fieldId}
+            className={cn(
+              getStackedFieldLabelClasses(size, effectiveError, disabled),
+              labelClassName,
+            )}
+          >
+            {label}
+          </label>
+        ) : null}
         <div
           className={cn(
             fieldContainerVariants({ variant, error: effectiveError, disabled }),
@@ -306,7 +321,10 @@ export const TokenField = React.forwardRef<HTMLDivElement, TokenFieldProps>(
               className={cn(
                 'flex min-h-full w-full flex-wrap items-center gap-1.5',
                 fieldSize.horizontalPadding,
-                getTokenFieldContentPadding(size, variant),
+                getTokenFieldContentPadding(
+                  size,
+                  labelPlacement === 'stacked' ? 'outlined' : variant,
+                ),
               )}
             >
               {tokens.length ? (
@@ -362,21 +380,23 @@ export const TokenField = React.forwardRef<HTMLDivElement, TokenFieldProps>(
                 {...props}
               />
             </div>
-            <label
-              htmlFor={fieldId}
-              className={getFieldLabelClasses({
-                size,
-                variant,
-                floating: isFloating,
-                error: effectiveError,
-                active: isFocused,
-                multiline: true,
-                labelBg,
-                labelClassName,
-              })}
-            >
-              {label}
-            </label>
+            {labelPlacement === 'floating' ? (
+              <label
+                htmlFor={fieldId}
+                className={getFieldLabelClasses({
+                  size,
+                  variant,
+                  floating: isFloating,
+                  error: effectiveError,
+                  active: isFocused,
+                  multiline: true,
+                  labelBg,
+                  labelClassName,
+                })}
+              >
+                {label}
+              </label>
+            ) : null}
           </div>
           {trailingIcon && (
             <span
@@ -394,7 +414,10 @@ export const TokenField = React.forwardRef<HTMLDivElement, TokenFieldProps>(
           )}
         </div>
         {effectiveHelperText && (
-          <span id={helperId} className={getFieldHelperTextClasses(size, effectiveError)}>
+          <span
+            id={helperId}
+            className={getFieldHelperTextClasses(size, effectiveError, labelPlacement)}
+          >
             {effectiveHelperText}
           </span>
         )}

package/registry/lib/field-shell.ts

@@ -5,6 +5,16 @@ import { cn } from '@/lib/utils';
 import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
 
 export type FieldShellVariant = 'outlined' | 'filled';
+export type FieldLabelPlacement = 'floating' | 'stacked';
+
+export function getStackedFieldLabelClasses(size: FieldSize, error = false, disabled = false) {
+  return cn(
+    'mb-2 block font-semibold tracking-normal',
+    getFieldSizeStyles(size).externalLabelText,
+    error ? 'text-error' : 'text-on-surface',
+    disabled && 'opacity-38',
+  );
+}
 
 export const fieldContainerVariants = cva(
   'relative flex w-full transition-all duration-snappy ease-emphasized group cursor-text',
@@ -103,13 +113,19 @@ export function getFieldAffixClasses({
   );
 }
 
-export function getFieldHelperTextClasses(size: FieldSize = 'md', error = false) {
+export function getFieldHelperTextClasses(
+  size: FieldSize = 'md',
+  error = false,
+  labelPlacement: FieldLabelPlacement = 'floating',
+) {
   const fieldSize = getFieldSizeStyles(size);
 
   return cn(
-    'text-label-small font-medium',
+    labelPlacement === 'stacked'
+      ? 'text-body-small font-normal tracking-normal'
+      : 'text-label-small font-medium',
     fieldSize.helperMarginTop,
-    fieldSize.helperPaddingX,
+    labelPlacement === 'floating' && fieldSize.helperPaddingX,
     error ? 'text-error' : 'text-on-surface-variant',
   );
 }

package/registry/lib/portal-layer.ts

@@ -1,6 +1,52 @@
 import type React from 'react';
 
-const MODAL_LAYER_SELECTOR = '[role="dialog"][aria-modal="true"]';
+const MODAL_LAYER_SELECTOR =
+  '[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]';
+
+// Keep floating controls in the modal's accessible subtree. Shared modals put
+// this boundary outside their animated/clipped panel so fixed coordinates stay
+// viewport-relative, including in fullscreen and bottom-sheet presentations.
+export function getPortalContainer(anchor: HTMLElement | null): HTMLElement {
+  const modal = anchor?.closest<HTMLElement>(MODAL_LAYER_SELECTOR);
+  return modal?.hasAttribute('data-unisane-modal-root') ? modal : document.body;
+}
+
+/** Follow an opening panel without a permanent per-frame positioning loop. */
+export function observePortalAnchorMotion(anchor: HTMLElement | null, update: () => void) {
+  let frame: number | undefined;
+  const ancestors: HTMLElement[] = [];
+  for (let node = anchor; node; node = node.parentElement) ancestors.push(node);
+  const tick = () => {
+    frame = undefined;
+    update();
+    if (
+      ancestors.some((node) =>
+        node.getAnimations?.().some((animation) => animation.playState === 'running'),
+      )
+    ) {
+      frame = window.requestAnimationFrame(tick);
+    }
+  };
+  const onMotion = (event: Event) => {
+    if (!(event.target instanceof HTMLElement) || !ancestors.includes(event.target)) return;
+    if (frame !== undefined) window.cancelAnimationFrame(frame);
+    frame = window.requestAnimationFrame(tick);
+  };
+  const events = [
+    'animationstart',
+    'animationend',
+    'animationcancel',
+    'transitionrun',
+    'transitionend',
+    'transitioncancel',
+  ];
+  events.forEach((event) => window.addEventListener(event, onMotion, true));
+  frame = window.requestAnimationFrame(tick);
+  return () => {
+    if (frame !== undefined) window.cancelAnimationFrame(frame);
+    events.forEach((event) => window.removeEventListener(event, onMotion, true));
+  };
+}
 
 export function getPortalLayerStyle(anchor: HTMLElement | null): React.CSSProperties | undefined {
   if (!anchor) {

package/registry/lib/use-overlay-behavior.ts

@@ -231,7 +231,10 @@ export function useOverlayBehavior({
       : undefined;
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (!isTopmostLayer(layer)) {
+      // A nested widget may already have handled Escape/Tab and synchronously
+      // unmounted its layer before this document listener runs. Do not consume
+      // that same key again in the newly exposed parent modal.
+      if (event.defaultPrevented || !isTopmostLayer(layer)) {
         return;
       }
 
@@ -245,7 +248,9 @@ export function useOverlayBehavior({
         return;
       }
 
-      const focusableElements = getFocusableElements(content);
+      // Modal-owned floating controls portal beside the visual panel, inside
+      // the semantic root. Include them in the same keyboard boundary.
+      const focusableElements = getFocusableElements(modal ? layer.root : content);
       if (focusableElements.length === 0) {
         event.preventDefault();
         content.focus();

package/registry/registry.json

@@ -407,6 +407,7 @@
       ],
       "dependencies": [],
       "registryDependencies": [
+        "button",
         "field-shell",
         "field-size",
         "icon",