@astryxdesign/core 0.5.0-canary.f4d494c → 0.5.0

package/src/HoverCard/HoverCard.tsx

@@ -259,59 +259,7 @@ export function HoverCard({
     // Use combined ref for position + interaction
     hoverCard.ref(firstChild);
 
-    if (label) {
-      // When named, the hover card is a dialog. The trigger should advertise the
-      // popup relationship with aria-haspopup/aria-expanded, not describe the
-      // trigger with the dialog's content (aria-describedby is for plain-text
-      // descriptions, not navigable regions). See #5049.
-      //
-      // Merge rather than overwrite: the trigger may already carry its own
-      // popup semantics (e.g. a menu button wrapped in a labelled HoverCard),
-      // so preserve the existing values and restore them on cleanup.
-      const existingHaspopup = firstChild.getAttribute('aria-haspopup');
-      const existingControls = firstChild.getAttribute('aria-controls');
-      const existingExpanded = firstChild.getAttribute('aria-expanded');
-
-      firstChild.setAttribute('aria-haspopup', 'dialog');
-      // Only point aria-controls at the layer while it is open and in the DOM.
-      // While closed, useLayer leaves only an inert <template> marker, so the
-      // id would reference nothing. DateInput gates it the same way. The
-      // trigger's own aria-controls (if any) is preserved either way.
-      if (hoverCard.isOpen) {
-        firstChild.setAttribute(
-          'aria-controls',
-          mergeIds(existingControls, hoverCard.id) ?? '',
-        );
-      } else if (existingControls) {
-        firstChild.setAttribute('aria-controls', existingControls);
-      } else {
-        firstChild.removeAttribute('aria-controls');
-      }
-      firstChild.setAttribute('aria-expanded', String(hoverCard.isOpen));
-
-      return () => {
-        hoverCard.ref(null);
-        if (existingHaspopup) {
-          firstChild.setAttribute('aria-haspopup', existingHaspopup);
-        } else {
-          firstChild.removeAttribute('aria-haspopup');
-        }
-        if (existingControls) {
-          firstChild.setAttribute('aria-controls', existingControls);
-        } else {
-          firstChild.removeAttribute('aria-controls');
-        }
-        if (existingExpanded) {
-          firstChild.setAttribute('aria-expanded', existingExpanded);
-        } else {
-          firstChild.removeAttribute('aria-expanded');
-        }
-      };
-    }
-
-    // Unnamed fallback: the popup remains role="group", which is not a dialog,
-    // so keep the previous description relationship until a naming decision is
-    // made for the no-label case (tracked in #5049).
+    // Set aria-describedby, merging with existing
     const existingDescribedBy = firstChild.getAttribute('aria-describedby');
     firstChild.setAttribute(
       'aria-describedby',
@@ -326,14 +274,7 @@ export function HoverCard({
         firstChild.removeAttribute('aria-describedby');
       }
     };
-  }, [
-    textOnly,
-    label,
-    hoverCard.ref,
-    hoverCard.id,
-    hoverCard.isOpen,
-    hoverCard.describedBy,
-  ]);
+  }, [textOnly, hoverCard.ref, hoverCard.describedBy]);
 
   // While closed, useLayer leaves only an inert <template> marker at this JSX
   // position. When the card needs to open, it uses that marker to keep the
@@ -352,10 +293,7 @@ export function HoverCard({
         <span
           ref={hoverCard.ref}
           tabIndex={0}
-          aria-haspopup={label ? 'dialog' : undefined}
-          aria-controls={label && hoverCard.isOpen ? hoverCard.id : undefined}
-          aria-expanded={label ? hoverCard.isOpen : undefined}
-          aria-describedby={label ? undefined : hoverCard.describedBy}
+          aria-describedby={hoverCard.describedBy}
           {...stylex.props(
             styles.wrapperInline,
             showHoverIndication && styles.hoverIndication,

package/src/HoverCard/useHoverCard.tsx

@@ -190,22 +190,11 @@ export interface HoverCardReturn {
   anchorId: string;
 
   /**
-   * Unique ID for the hover card container.
-   * Useful for `aria-controls` or `aria-owns` on the trigger.
-   */
-  id: string;
-
-  /**
-   * Deprecated alias of `id`. Kept for backwards compatibility; prefer `id`.
+   * ID for aria-describedby on the trigger element.
+   * Caller should compose with other IDs using mergeIds utility.
    */
   describedBy: string;
 
-  /**
-   * Whether the hover card is currently open.
-   * Useful for driving `aria-expanded` on the trigger.
-   */
-  isOpen: boolean;
-
   /**
    * Render function for hover card content.
    * Returns anchor-positioned popover element.
@@ -692,9 +681,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
     positionRef: layer.ref,
     interactionRef,
     anchorId: layer.anchorId,
-    id: layer.id,
     describedBy: layer.id,
-    isOpen: layer.isOpen,
     renderHoverCard,
     show: layer.show,
     hide: layer.hide,

package/src/Indicator/CheckboxIndicator.tsx

@@ -227,13 +227,10 @@ export function CheckboxIndicator({
         <>
           <svg
             viewBox="0 0 10 10"
-            {...mergeProps(
-              themeProps('checkbox-indicator-check', {size}),
-              stylex.props(
-                styles.checkmark,
-                checkmarkSizeStyles[size],
-                isChecked && styles.checkmarkVisible,
-              ),
+            {...stylex.props(
+              styles.checkmark,
+              checkmarkSizeStyles[size],
+              isChecked && styles.checkmarkVisible,
             )}>
             <path
               d="M8.5 2.5L4 7.5L1.5 5"
@@ -245,13 +242,10 @@ export function CheckboxIndicator({
             />
           </svg>
           <span
-            {...mergeProps(
-              themeProps('checkbox-indicator-dash', {size}),
-              stylex.props(
-                styles.indeterminateMark,
-                indeterminateSizeStyles[size],
-                isIndeterminate && styles.indeterminateMarkVisible,
-              ),
+            {...stylex.props(
+              styles.indeterminateMark,
+              indeterminateSizeStyles[size],
+              isIndeterminate && styles.indeterminateMarkVisible,
             )}
           />
         </>

package/src/Indicator/Indicator.doc.mjs

@@ -132,8 +132,6 @@ export const docs = {
         visualProps: ['size'],
         states: ['checked', 'disabled'],
       },
-      {className: 'astryx-checkbox-indicator-check', visualProps: ['size']},
-      {className: 'astryx-checkbox-indicator-dash', visualProps: ['size']},
       {
         className: 'astryx-radio-indicator',
         visualProps: ['size'],

package/src/Kbd/Kbd.test.tsx

@@ -23,6 +23,7 @@ describe('Kbd', () => {
       value: originalPlatform,
       configurable: true,
     });
+    delete (navigator as {userAgentData?: unknown}).userAgentData;
   });
 
   it('renders a single key', () => {
@@ -54,6 +55,22 @@ describe('Kbd', () => {
     expect(screen.getByText('\u2318')).toBeInTheDocument(); // \u2318
   });
 
+  it('reads a blank userAgentData.platform as unknown, not as non-Mac', () => {
+    // Builds that rewrite their client-hints identity expose the key with an
+    // empty value; navigator.platform is the only surface left that answers.
+    Object.defineProperty(navigator, 'userAgentData', {
+      value: {platform: ''},
+      configurable: true,
+    });
+    Object.defineProperty(navigator, 'platform', {
+      value: 'MacIntel',
+      configurable: true,
+    });
+
+    render(<Kbd keys="mod" />);
+    expect(screen.getByText('\u2318')).toBeInTheDocument();
+  });
+
   it('maps modifier keys to symbols', () => {
     render(<Kbd keys="ctrl+alt+shift+k" />);
     expect(screen.getByText('\u2303')).toBeInTheDocument(); // \u2303

package/src/Kbd/Kbd.tsx

@@ -16,7 +16,6 @@
 import React, {useSyncExternalStore} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
-import {isApplePlatform} from '../utils/isApplePlatform';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {
@@ -123,6 +122,31 @@ function getServerPlatformSnapshot(): boolean {
   return false;
 }
 
+/**
+ * Detects whether the current platform is macOS/iOS.
+ * Prefers the User-Agent Client Hints API when it names a platform (modern
+ * Chrome/Edge), falls back to navigator.platform (deprecated but universally
+ * supported) when it is absent or blank.
+ */
+function detectMac(): boolean {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+  // Prefer User-Agent Client Hints API (not deprecated)
+  const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
+  if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
+    const uaPlatform = (uaData as {platform?: unknown}).platform;
+    // A blank platform is no answer, not a negative one. Builds that rewrite
+    // their client-hints identity ship '', so fall through rather than
+    // reading it as "not Apple".
+    if (typeof uaPlatform === 'string' && uaPlatform.trim() !== '') {
+      return /mac/i.test(uaPlatform);
+    }
+  }
+  // Fallback: navigator.platform (deprecated but still shipped everywhere)
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
+}
+
 export interface KbdProps extends BaseProps<HTMLSpanElement> {
   ref?: React.Ref<HTMLSpanElement>;
   /**
@@ -159,7 +183,7 @@ export interface KbdProps extends BaseProps<HTMLSpanElement> {
 export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
   const isMac = useSyncExternalStore(
     subscribeToPlatformChanges,
-    isApplePlatform,
+    detectMac,
     getServerPlatformSnapshot,
   );
 

package/src/hooks/useHotkeys.test.ts

@@ -67,6 +67,24 @@ describe('useHotkeys', () => {
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
+  it('reads a blank userAgentData.platform as unknown, not as non-Apple', () => {
+    // Builds that rewrite their client-hints identity expose the key with an
+    // empty value; navigator.platform is the only surface left that answers.
+    vi.stubGlobal('navigator', {
+      userAgentData: {platform: ''},
+      platform: 'MacIntel',
+    });
+    const onPress = vi.fn();
+    renderHook(() => useHotkeys([{keys: 'mod+k', onPress}]));
+
+    press('k', {ctrlKey: true});
+    expect(onPress).not.toHaveBeenCalled();
+
+    const event = press('k', {metaKey: true});
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledWith(event);
+  });
+
   it('does not fire a bare key when modifiers are held', () => {
     stubApplePlatform();
     const onPress = vi.fn();

package/src/hooks/useHotkeys.ts

@@ -18,8 +18,7 @@
  * unless a hotkey opts in via `allowInInputs`.
  *
  * Platform-aware: `mod` maps to metaKey (⌘) on Apple platforms and
- * ctrlKey elsewhere, through the same isApplePlatform util Kbd reads, so
- * displayed and handled shortcuts cannot disagree.
+ * ctrlKey elsewhere — mirrors the detection used by Kbd.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
@@ -27,7 +26,6 @@
  */
 
 import {useEffect, useRef} from 'react';
-import {isApplePlatform} from '../utils/isApplePlatform';
 
 /**
  * A single keyboard shortcut registration.
@@ -73,6 +71,30 @@ const KEY_ALIASES: Record<string, string> = {
   plus: '+',
 };
 
+/**
+ * Detects whether the current platform is macOS/iOS.
+ * Prefers the User-Agent Client Hints API when it names a platform (modern
+ * Chrome/Edge), falls back to navigator.platform (deprecated but universally
+ * supported) when it is absent or blank.
+ * Mirrors the detection used by Kbd so displayed and handled shortcuts agree.
+ */
+function isApplePlatform(): boolean {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+  const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
+  if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
+    const uaPlatform = (uaData as {platform?: unknown}).platform;
+    // A blank platform is no answer, not a negative one. Builds that rewrite
+    // their client-hints identity ship '', so fall through rather than
+    // reading it as "not Apple".
+    if (typeof uaPlatform === 'string' && uaPlatform.trim() !== '') {
+      return /mac/i.test(uaPlatform);
+    }
+  }
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
+}
+
 /**
  * Whether the event target is a typing surface where global shortcuts
  * should stay silent by default.

package/src/theme/derivedVarRegistry.test.ts

@@ -213,7 +213,6 @@ function discoverComponents(): ComponentInfo[] {
 // ---------------------------------------------------------------------------
 
 const DIR_TO_REGISTRY_KEY: Record<string, string> = {
-  Avatar: 'avatar',
   Banner: 'banner',
   Button: 'button',
   Card: 'card',

package/src/theme/derivedVarRegistry.ts

@@ -43,7 +43,6 @@ export interface DerivedVarEntry {
  * entries share the same property.
  */
 export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
-  avatar: [{property: 'borderRadius', vars: ['--_avatar-radius']}],
   banner: [{property: 'borderRadius', vars: ['--_banner-radius']}],
   button: [{property: 'borderRadius', vars: ['--_button-radius']}],
   card: [

package/src/theme/syntax/tokens.ts

@@ -44,11 +44,8 @@ export const syntaxTokenDefaults = {
   '--color-syntax-attribute': 'var(--color-text-teal)',
   // property -> cyan text (object properties)
   '--color-syntax-property': 'var(--color-text-cyan)',
-  // punctuation -> secondary text (brackets, semicolons). Not disabled text:
-  // disabled grey is calibrated to fail AA on purpose (WCAG exempts inactive
-  // controls), and punctuation in a code sample is normal, always-active
-  // text — see #5386.
-  '--color-syntax-punctuation': 'var(--color-text-secondary)',
+  // punctuation -> disabled text (brackets, semicolons)
+  '--color-syntax-punctuation': 'var(--color-text-disabled)',
   // background -> muted surface
   '--color-syntax-background': 'var(--color-background-muted)',
 } as const;

package/dist/DateInput/NativeDateField.d.ts

@@ -1,10 +0,0 @@
-import type { DateInputProps } from './DateInput';
-/**
- * The OS-picker surface. Takes `DateInput`'s props verbatim; see
- * {@link DateInput} for when it is chosen over the other two.
- */
-export declare function NativeDateField({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths: _numberOfMonths, weekStartsOn: _weekStartsOn, format, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
-export declare namespace NativeDateField {
-    var displayName: string;
-}
-//# sourceMappingURL=NativeDateField.d.ts.map

package/dist/DateInput/NativeDateField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAwLhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmXhB;yBAlZe,eAAe"}