@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/dist/Stepper/StepStatus.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file StepStatus.ts
+ * @input None
+ * @output Exports StepStatus type
+ * @position Shared type used by Step and the stepper docs
+ */
+/**
+ * Semantic status for a step, mapped directly onto the Astryx global semantic
+ * tokens. In the default `auto` indicator mode it sets both the indicator color
+ * and a matching glyph (see below); it never recolors the connector/track.
+ *
+ * Plain string values aligned with the global token semantics:
+ * - 'accent'  → `--color-accent`  (default emphasis / in-progress; color only)
+ * - 'success' → `--color-success` (green check-circle glyph)
+ * - 'warning' → `--color-warning` (shared Input `warning` glyph)
+ * - 'error'   → `--color-error`   (shared Input `error` glyph)
+ *
+ * `status` is intentionally NOT a lifecycle enum (completed/active/etc.) — the
+ * step's progress is derived from the parent's `activeStep`. The current
+ * (in-progress) step always keeps its current-step indicator regardless of
+ * `status`.
+ */
+export type StepStatus = 'accent' | 'success' | 'warning' | 'error';
+//# sourceMappingURL=StepStatus.d.ts.map

package/dist/Stepper/StepStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepStatus.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepStatus.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC"}

package/dist/Stepper/StepStatus.js

@@ -0,0 +1 @@
+export {};

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @file Stepper.tsx
+ * @input Uses React, stylex, theme tokens, StepperContext
+ * @output Exports Stepper component and StepperProps
+ * @position Core container component; consumed by index.ts
+ *
+ * Besides the props it is given, this component tracks the `activeStep` it
+ * last rendered with and publishes it on the context. Steps need the distance
+ * and direction of a change to choreograph their connector fill; see the
+ * CONNECTOR FILL block in Step.tsx.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/Stepper/index.ts (exports if types change)
+ * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import { type StepperOrientation, type StepperIndicatorPosition } from './StepperContext';
+export interface StepperProps extends BaseProps<HTMLOListElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLOListElement>;
+    /**
+     * Zero-based index of the active step.
+     */
+    activeStep: number;
+    /**
+     * Step elements to render.
+     */
+    children: ReactNode;
+    /**
+     * Layout direction of the stepper.
+     * @default 'horizontal'
+     */
+    orientation?: StepperOrientation;
+    /**
+     * Called when a step indicator is clicked. Enables non-linear navigation.
+     * When provided, completed and current steps become clickable.
+     */
+    onStepClick?: (index: number) => void;
+    /**
+     * Accessible label describing the set of steps. Defaults to a translated
+     * "Progress" when unset.
+     */
+    label?: string;
+    /**
+     * Controls density (padding) of all steps.
+     * @default 'balanced'
+     */
+    density?: 'compact' | 'balanced' | 'spacious';
+    /**
+     * Controls where each step's indicator sits relative to the connector track.
+     * - 'separated': indicator lives in the label row, distinct from the progress
+     *   bar (the original Astryx layout).
+     * - 'on-track': indicator is slotted into the connector line as a node on the
+     *   track (the on-track indicator design).
+     * @default 'separated'
+     */
+    indicatorPosition?: StepperIndicatorPosition;
+}
+/**
+ * A stepper component for multi-step workflows. Displays numbered steps
+ * with visual indicators for completed, active, and upcoming states.
+ *
+ * Each Step child must provide a `step` prop (zero-based index) so it
+ * can derive its state from the parent's activeStep. The on-track layout
+ * hides the leading connector on the first step and the trailing connector
+ * on the last step structurally, from each step's own `<li>` position, so
+ * it works regardless of how the steps are grouped.
+ *
+ * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
+ * landmark: a stepper communicates *progress through a sequence*, not a
+ * set of site navigation links. The active step is marked with
+ * `aria-current="step"` (handled per-step) and the list carries an
+ * accessible `label`. This follows the WAI-ARIA pattern for steppers /
+ * progress sequences and avoids polluting the page's landmark map.
+ *
+ * @example
+ * ```
+ * <Stepper activeStep={1}>
+ *   <Step step={0} label="Account" />
+ *   <Step step={1} label="Profile" />
+ *   <Step step={2} label="Review" />
+ * </Stepper>
+ * ```
+ */
+export declare function Stepper({ activeStep, children, orientation, onStepClick, label: labelFromProps, density, indicatorPosition, xstyle, className, style, ref, ...rest }: StepperProps): import("react").JSX.Element;
+export declare namespace Stepper {
+    var displayName: string;
+}
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAyC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;CAC9C;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAK,EAAE,cAAc,EACrB,OAAoB,EACpB,iBAA+B,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BA0Gd;yBAvHe,OAAO"}

package/dist/Stepper/Stepper.js

@@ -0,0 +1,184 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Stepper.tsx
+ * @input Uses React, stylex, theme tokens, StepperContext
+ * @output Exports Stepper component and StepperProps
+ * @position Core container component; consumed by index.ts
+ *
+ * Besides the props it is given, this component tracks the `activeStep` it
+ * last rendered with and publishes it on the context. Steps need the distance
+ * and direction of a change to choreograph their connector fill; see the
+ * CONNECTOR FILL block in Step.tsx.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/Stepper/index.ts (exports if types change)
+ * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
+ */
+import { useCallback, useMemo, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { StepperContext } from "./StepperContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  root: {
+    k1xSpc: "x78zum5",
+    kzqmXN: "xh8yej3",
+    kH6xsr: "x3ct3a4",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  horizontal: {
+    kXwgrk: "x1q0g3np",
+    kGNEyG: "x1cy8zhl",
+    kOIVth: "x1lsbc85",
+    $$css: true
+  },
+  vertical: {
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1lsbc85",
+    $$css: true
+  },
+  horizontalOnTrack: {
+    kXwgrk: "x1q0g3np",
+    kGNEyG: "x1cy8zhl",
+    kOIVth: "xxhr3t",
+    $$css: true
+  },
+  verticalOnTrack: {
+    kXwgrk: "xdt5ytf",
+    kOIVth: "xxhr3t",
+    $$css: true
+  }
+};
+
+/**
+ * A stepper component for multi-step workflows. Displays numbered steps
+ * with visual indicators for completed, active, and upcoming states.
+ *
+ * Each Step child must provide a `step` prop (zero-based index) so it
+ * can derive its state from the parent's activeStep. The on-track layout
+ * hides the leading connector on the first step and the trailing connector
+ * on the last step structurally, from each step's own `<li>` position, so
+ * it works regardless of how the steps are grouped.
+ *
+ * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
+ * landmark: a stepper communicates *progress through a sequence*, not a
+ * set of site navigation links. The active step is marked with
+ * `aria-current="step"` (handled per-step) and the list carries an
+ * accessible `label`. This follows the WAI-ARIA pattern for steppers /
+ * progress sequences and avoids polluting the page's landmark map.
+ *
+ * @example
+ * ```
+ * <Stepper activeStep={1}>
+ *   <Step step={0} label="Account" />
+ *   <Step step={1} label="Profile" />
+ *   <Step step={2} label="Review" />
+ * </Stepper>
+ * ```
+ */
+export function Stepper({
+  activeStep,
+  children,
+  orientation = 'horizontal',
+  onStepClick,
+  label: labelFromProps,
+  density = 'balanced',
+  indicatorPosition = 'separated',
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.stepper.label');
+
+  // Dev-mode duplicate step index detection. Steps register on mount and
+  // deregister on unmount; a Map tracks count per index so we can warn when
+  // two Steps share the same `step` value (which breaks aria-current).
+  const stepCountsRef = useRef(new Map());
+  const registerStep = useCallback(index => {
+    const counts = stepCountsRef.current;
+    const prev = counts.get(index) ?? 0;
+    counts.set(index, prev + 1);
+    if (process.env.NODE_ENV !== 'production' && prev + 1 > 1) {
+      console.warn(`[Stepper] Duplicate step index ${index}: two <Step> elements share the same \`step\` value. ` + `This breaks \`aria-current="step"\` and causes both to show as active simultaneously.`);
+    }
+    return () => {
+      const cur = counts.get(index) ?? 1;
+      if (cur <= 1) {
+        counts.delete(index);
+      } else {
+        counts.set(index, cur - 1);
+      }
+    };
+  }, []);
+
+  // The step we came *from*. Steps need it to stagger their connector fill:
+  // the distance and direction of the change decide which segment moves first
+  // and how long the whole sweep may take (see Step.tsx's CONNECTOR FILL).
+  //
+  // Derived during render from state rather than written in an effect. An
+  // effect runs after paint, so the browser would already have committed the
+  // new fill states with last render's delays — the first frame of the sweep
+  // would be wrong, and on a jump of one that is the entire animation. React
+  // discards and re-runs a render that sets its own state before committing,
+  // so this costs a re-render but never a wrong frame.
+  //
+  // Seeding both halves from the current `activeStep` is what suppresses the
+  // cascade on mount: a stepper that opens on step 3 has no previous step to
+  // have travelled from, so its completed segments paint filled at once. That
+  // also makes the first render pure and identical on the server, so there is
+  // nothing for hydration to disagree about. Storing the pair in one state
+  // object keeps the update idempotent under StrictMode's double render — both
+  // invocations read the same `seen` and queue the same successor.
+  const [seen, setSeen] = useState(() => ({
+    current: activeStep,
+    previous: activeStep
+  }));
+  if (seen.current !== activeStep) {
+    setSeen({
+      current: activeStep,
+      previous: seen.current
+    });
+  }
+  const previousActiveStep = seen.current === activeStep ? seen.previous : seen.current;
+  const ctxValue = useMemo(() => ({
+    activeStep,
+    previousActiveStep,
+    orientation,
+    isNonLinear: onStepClick != null,
+    onStepClick: onStepClick ?? null,
+    density,
+    indicatorPosition,
+    registerStep
+  }), [activeStep, previousActiveStep, orientation, onStepClick, density, indicatorPosition, registerStep]);
+  const isOnTrack = indicatorPosition === 'on-track';
+  const orientationStyle = orientation === 'horizontal' ? isOnTrack ? styles.horizontalOnTrack : styles.horizontal : isOnTrack ? styles.verticalOnTrack : styles.vertical;
+  return /*#__PURE__*/_jsx(StepperContext, {
+    value: ctxValue,
+    children: /*#__PURE__*/_jsx("ol", {
+      ref: ref,
+      "aria-label": label,
+      ...rest,
+      ...mergeProps(themeProps('stepper', {
+        orientation,
+        indicatorPosition
+      }), stylex.props(styles.root, orientationStyle, xstyle), className, style),
+      children: children
+    })
+  });
+}
+Stepper.displayName = 'Stepper';

package/dist/Stepper/StepperContext.d.ts

@@ -0,0 +1,41 @@
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperDensity = 'compact' | 'balanced' | 'spacious';
+/**
+ * Controls where each step's indicator sits relative to the connector track.
+ * - 'separated': indicator lives in the label row, distinct from the progress
+ *   bar (Astryx's original layout).
+ * - 'on-track': indicator is slotted *into* the connector line as a node on the
+ *   track, with the label beside (vertical) or below (horizontal). Aligns with
+ *   the on-track stepper design.
+ */
+export type StepperIndicatorPosition = 'separated' | 'on-track';
+export interface StepperContextValue {
+    activeStep: number;
+    /**
+     * The `activeStep` this stepper last rendered with, so a Step can tell
+     * whether the change it is reacting to was a single step forward — the one
+     * change that animates the connector fill — and which span that change
+     * crossed (see the CONNECTOR FILL block in Step.tsx). Equal to `activeStep`
+     * on the first render, which is what keeps a stepper that mounts mid-flow
+     * from animating its way to the step it opened on.
+     *
+     * Internal: not part of the public API, and deliberately not a Stepper prop.
+     * When the connector animates is behaviour the stepper owns, not something a
+     * consumer configures.
+     */
+    previousActiveStep: number;
+    orientation: StepperOrientation;
+    isNonLinear: boolean;
+    onStepClick: ((index: number) => void) | null;
+    density: StepperDensity;
+    indicatorPosition: StepperIndicatorPosition;
+    /**
+     * Dev-mode index registration. Each Step calls this on mount with its `step`
+     * index. The Stepper tracks the set and warns if two Steps share the same
+     * index. Returns a cleanup function to call on unmount.
+     */
+    registerStep: (index: number) => () => void;
+}
+export declare const StepperContext: import("react").Context<StepperContextValue | null>;
+export declare function useStepperContext(): StepperContextValue;
+//# sourceMappingURL=StepperContext.d.ts.map

package/dist/Stepper/StepperContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperContext.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepperContext.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,cAAc,CAAC;IACxB,iBAAiB,EAAE,wBAAwB,CAAC;IAC5C;;;;OAIG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,qDAAkD,CAAC;AAG9E,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}

package/dist/Stepper/StepperContext.js

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file StepperContext.ts
+ * @input Uses React createContext/use
+ * @output Exports StepperContext, useStepperContext, and context types
+ * @position Context for Stepper <-> Step communication
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Stepper/Stepper.doc.mjs
+ * - /packages/core/src/Stepper/index.ts
+ */
+import { createContext, use } from 'react';
+
+/**
+ * Controls where each step's indicator sits relative to the connector track.
+ * - 'separated': indicator lives in the label row, distinct from the progress
+ *   bar (Astryx's original layout).
+ * - 'on-track': indicator is slotted *into* the connector line as a node on the
+ *   track, with the label beside (vertical) or below (horizontal). Aligns with
+ *   the on-track stepper design.
+ */
+
+export const StepperContext = /*#__PURE__*/createContext(null);
+StepperContext.displayName = 'StepperContext';
+export function useStepperContext() {
+  const ctx = use(StepperContext);
+  if (ctx == null) {
+    throw new Error('useStepperContext must be used within Stepper. ' + 'Wrap your Step in <Stepper>.');
+  }
+  return ctx;
+}

package/dist/Stepper/index.d.ts

@@ -0,0 +1,8 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { Step } from './Step';
+export type { StepProps, StepIndicatorPreset } from './Step';
+export type { StepStatus } from './StepStatus';
+export { useStepperContext } from './StepperContext';
+export type { StepperContextValue, StepperOrientation, StepperIndicatorPosition, } from './StepperContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/Stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Stepper/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,QAAQ,CAAC;AAE3D,YAAY,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AACnD,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,kBAAkB,CAAC"}

package/dist/Stepper/index.js

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+export { Stepper } from "./Stepper.js";
+export { Step } from "./Step.js";
+export { useStepperContext } from "./StepperContext.js";

package/dist/Stepper/stepper.stylex.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file stepper.stylex.ts
+ * @input StyleX marker system
+ * @output stepMarker — a scoped marker applied to each Step's <li>
+ * @position Shared StyleX marker consumed by Step for structural selectors
+ *
+ * Applied to each Step's root `<li>` so the on-track connector segments can
+ * key their first/last-node visibility off `stylex.when.ancestor(':first-child'
+ * | ':last-child', stepMarker)` — matching only the parent step row, never the
+ * outer `<ol>`. This replaces counting children in the parent, so steps behave
+ * correctly regardless of how the consumer groups them (arrays, fragments).
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const stepMarker: ReturnType<typeof stylex.defineMarker>;
+//# sourceMappingURL=stepper.stylex.d.ts.map

package/dist/Stepper/stepper.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.stylex.d.ts","sourceRoot":"","sources":["../../src/Stepper/stepper.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACvC,CAAC"}

package/dist/Stepper/stepper.stylex.js

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file stepper.stylex.ts
+ * @input StyleX marker system
+ * @output stepMarker — a scoped marker applied to each Step's <li>
+ * @position Shared StyleX marker consumed by Step for structural selectors
+ *
+ * Applied to each Step's root `<li>` so the on-track connector segments can
+ * key their first/last-node visibility off `stylex.when.ancestor(':first-child'
+ * | ':last-child', stepMarker)` — matching only the parent step row, never the
+ * outer `<ol>`. This replaces counting children in the parent, so steps behave
+ * correctly regardless of how the consumer groups them (arrays, fragments).
+ */
+
+import * as stylex from '@stylexjs/stylex';
+export const stepMarker = {
+  x1twag4g: "x1twag4g",
+  $$css: true
+};

package/dist/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAoR9C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAqB,EACrB,YAAoB,EACpB,MAAM,EACN,IAAW,EACX,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,+BAqMb;yBAhOe,MAAM"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}

package/dist/Switch/Switch.js

@@ -23,12 +23,13 @@ import { FieldLabel } from "../Field/FieldLabel.js";
 import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
-import { mergeProps, mergeRefs } from "../utils/index.js";
+import { mergeProps } from "../utils/index.js";
 import "./switch.markers.stylex.js";
 import { switchScope } from "./switch.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const wrapperSizeStyles = {
   sm: {
@@ -319,7 +320,7 @@ export function Switch({
   const switchElement = /*#__PURE__*/_jsxs("div", {
     ...stylex.props(styles.switchWrapper, wrapperSizeStyles[size]),
     children: [/*#__PURE__*/_jsx("input", {
-      ref: mergeRefs(ref, disabledMessageTooltip.positionRef),
+      ref: useMergedRefs(ref, disabledMessageTooltip.positionRef),
       id: id,
       type: "checkbox",
       role: "switch"
@@ -380,7 +381,11 @@ export function Switch({
   });
   const labelElement = /*#__PURE__*/_jsx("div", {
     ...stylex.props(styles.labelWrapper, labelWrapperSizeStyles[size]),
-    children: /*#__PURE__*/_jsx(FieldLabel, {
+    children: /*#__PURE__*/_jsx(FieldLabel
+    // See CheckboxInput: the control names its own label target rather
+    // than the label guessing at its placement.
+    , {
+      ...themeProps('switch-label'),
       label: label,
       inputID: id,
       isLabelHidden: isLabelHidden,

package/dist/TabList/Tab.d.ts

@@ -3,7 +3,8 @@
  * @input Uses React, StyleX, TabListContext
  * @output Exports Tab component and TabProps type
  * @position Core tab item; renders as button or anchor in navigation with a
- *   divider-overlay selected indicator
+ *   divider-overlay selected indicator. Where the TabList speaks the tabs
+ *   pattern it is a button with role="tab".
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TabList/TabList.doc.mjs
@@ -39,8 +40,20 @@ export interface TabProps extends BaseProps<HTMLButtonElement> {
     isLabelHidden?: boolean;
     /**
      * URL to navigate to. When provided, renders as an anchor element.
+     *
+     * Ignored in a TabList given an explicit `role="tablist"`: activating a tab
+     * there swaps a panel in place, so a tab that navigates would be a false
+     * statement.
      */
     href?: string;
+    /**
+     * Id of the panel this tab controls, wired up as `aria-controls` where the
+     * TabList speaks the tabs pattern. Put the same id on the panel element.
+     *
+     * Has no effect under the navigation pattern, where there is no panel to
+     * associate — a development warning says so.
+     */
+    panelId?: string;
     /**
      * Icon element shown when tab is not selected.
      */
@@ -66,7 +79,7 @@ export interface TabProps extends BaseProps<HTMLButtonElement> {
  * </TabList>
  * ```
  */
-export declare function Tab({ as, ref, value, label, isLabelHidden, href, icon, selectedIcon, endContent, xstyle, className, style, ...restProps }: TabProps): React.JSX.Element;
+export declare function Tab({ as, ref, value, label, isLabelHidden, href, panelId, icon, selectedIcon, endContent, xstyle, className, style, ...restProps }: TabProps): React.JSX.Element;
 export declare namespace Tab {
     var displayName: string;
 }

package/dist/TabList/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA+GV;yBA7He,GAAG"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAOrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA4JV;yBA3Ke,GAAG"}

package/dist/TabList/Tab.js

@@ -7,7 +7,8 @@
  * @input Uses React, StyleX, TabListContext
  * @output Exports Tab component and TabProps type
  * @position Core tab item; renders as button or anchor in navigation with a
- *   divider-overlay selected indicator
+ *   divider-overlay selected indicator. Where the TabList speaks the tabs
+ *   pattern it is a button with role="tab".
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TabList/TabList.doc.mjs
@@ -24,6 +25,7 @@ import "./tab.markers.stylex.js";
 import { tabScope } from "./tab.markers.stylex.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
@@ -157,6 +159,7 @@ export function Tab({
   label,
   isLabelHidden = false,
   href,
+  panelId,
   icon,
   selectedIcon,
   endContent,
@@ -170,11 +173,21 @@ export function Tab({
   const isSelected = tabListCtx.value === value;
   const size = tabListCtx.size;
   const isFill = tabListCtx.layout === 'fill';
+  const isTabsPattern = tabListCtx.pattern === 'tabs';
+  const isLink = href != null && !isTabsPattern;
+  const isTabRole = isTabsPattern && !isLink;
   const displayIcon = isSelected && selectedIcon ? selectedIcon : icon;
   const hasVisibleLabel = !isLabelHidden && label !== '';
   const handleSelect = useCallback(() => {
     tabListCtx.onChange(value);
   }, [tabListCtx, value]);
+  useDevWarning('Tab', 'href is ignored in a role="tablist" TabList — a tab swaps a panel in ' + 'place rather than navigating. Drop the href, or drop the role for the ' + 'navigation pattern.', isTabRole && href != null);
+
+  // A consumer who wired aria-controls by hand already said which panel this
+  // is, so panelId is the sugar, not the only way in.
+  const controls = panelId ?? restProps['aria-controls'];
+  useDevWarning('Tab', 'a tab in a role="tablist" TabList controls nothing: pass panelId with ' + 'the id of the panel it opens, so assistive technology can associate ' + 'the two.', isTabRole && controls == null);
+  useDevWarning('Tab', 'panelId does nothing outside a role="tablist" TabList — the navigation ' + 'pattern has no panel to associate. Give the TabList role="tablist", ' + 'or drop the panelId.', !isTabsPattern && panelId != null);
   const iconElement = displayIcon ? /*#__PURE__*/_jsx("span", {
     ...stylex.props(styles.icon, iconSizeStyles[size]),
     children: displayIcon
@@ -186,11 +199,23 @@ export function Tab({
     } : {}),
     [EDGE_COMP_ATTR]: '',
     'data-tab-value': value,
-    // Generic `true` ("the current item within a set"), not `page`: the strip
-    // switches views in place at least as often as it navigates, and claiming
-    // "current page" when no page changed is a false statement to a screen
-    // reader. Stays truthful for the `href` case too, just less specific.
-    'aria-current': isSelected ? 'true' : undefined,
+    ...(isTabRole ? {
+      role: 'tab',
+      'aria-selected': isSelected,
+      // Only when there is a panel to point at: an aria-controls whose
+      // target does not exist is an invalid attribute value, which is a
+      // worse state than saying nothing. The dev warning above asks for
+      // the id instead.
+      'aria-controls': controls
+    } : {
+      // Generic `true` ("the current item within a set"), not `page`: the
+      // strip switches views in place at least as often as it navigates,
+      // and claiming "current page" when no page changed is a false
+      // statement to a screen reader. Stays truthful for the `href` case
+      // too, just less specific. A tab role states this with
+      // aria-selected instead.
+      'aria-current': isSelected ? 'true' : undefined
+    }),
     // Roving tabindex: the tab strip is a single Tab stop. The selected tab is
     // the tabbable one; the rest are reachable via arrow keys (handled by
     // TabList's onKeyDown). When no tab is selected, TabList's repair effect
@@ -239,7 +264,7 @@ export function Tab({
     },
     children: endContent
   }) : null;
-  if (href != null) {
+  if (isLink) {
     return /*#__PURE__*/_jsxs(LinkComponent, {
       ref: ref,
       href: href,