@astryxdesign/core 0.1.1 → 0.1.2-canary.2581eb4

package/dist/theme/generateThemeRules.js

@@ -388,7 +388,7 @@ function generateColorOverrides(components, parts) {
     secondary: 'var(--color-text-secondary)',
     disabled: 'var(--color-text-disabled)',
     placeholder: 'var(--color-text-secondary)',
-    active: 'var(--color-accent)'
+    accent: 'var(--color-text-accent)'
   };
   const touchesText = 'text' in components;
   const touchesHeading = 'heading' in components;

package/dist/theme/syntax/SyntaxTheme.d.ts

@@ -4,7 +4,7 @@
  * @output SyntaxTheme provider, useSyntaxTheme hook
  * @position Provider component; wraps code surfaces to apply syntax coloring
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 import React from 'react';
 import { type SyntaxThemeDefinition, type SyntaxThemeTokenKey } from './defineSyntaxTheme';

package/dist/theme/syntax/SyntaxTheme.js

@@ -8,7 +8,7 @@
  * @output SyntaxTheme provider, useSyntaxTheme hook
  * @position Provider component; wraps code surfaces to apply syntax coloring
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 import React, { createContext, use, useMemo } from 'react';
 import { syntaxThemeStyle, resolveSyntaxTokenForMode, ALL_SYNTAX_KEYS } from "./defineSyntaxTheme.js";

package/dist/theme/syntax/defineSyntaxTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defineSyntaxTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/syntax/defineSyntaxTheme.ts"],"names":[],"mappings":"AAmBA,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,KAAK,GACL,WAAW,GACX,UAAU,GACV,aAAa,GACb,YAAY,CAAC;AAEjB;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtE,+EAA+E;AAC/E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;AAElF,yFAAyF;AACzF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;AAEtE,kCAAkC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,qBAAqB,CAAC;CAC/B;AAED,mEAAmE;AACnE,MAAM,WAAW,qBAAqB;IACpC,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,mEAAmE;IACnE,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAYD,sEAAsE;AACtE,eAAO,MAAM,eAAe,EAAE,mBAAmB,EACY,CAAC;AAc9D;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CASR;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,GAAG,qBAAqB,CAoBhF;AAMD,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,qBAAqB,GAC3B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxB;AAED,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,CAIrE"}
+{"version":3,"file":"defineSyntaxTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/syntax/defineSyntaxTheme.ts"],"names":[],"mappings":"AAmBA,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,KAAK,GACL,WAAW,GACX,UAAU,GACV,aAAa,GACb,YAAY,CAAC;AAEjB;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtE,+EAA+E;AAC/E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACxC,mBAAmB,EACnB,gBAAgB,CACjB,CAAC;AAEF,yFAAyF;AACzF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;AAEtE,kCAAkC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,qBAAqB,CAAC;CAC/B;AAED,mEAAmE;AACnE,MAAM,WAAW,qBAAqB;IACpC,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,mEAAmE;IACnE,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAYD,sEAAsE;AACtE,eAAO,MAAM,eAAe,EAAE,mBAAmB,EAEW,CAAC;AAc7D;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CASR;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,gBAAgB,GACtB,qBAAqB,CAuBvB;AAMD,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,qBAAqB,GAC3B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxB;AAED,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,CAIrE"}

package/dist/theme/syntax/defineSyntaxTheme.js

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-"use strict";
+'use strict';
 
 /**
  * @file defineSyntaxTheme.ts
@@ -8,7 +8,7 @@
  * @output defineSyntaxTheme, SyntaxTheme, syntaxThemeStyle
  * @position Syntax theme definition API; consumed by presets, SyntaxTheme, defineTheme
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 import { syntaxTokenDefaults } from "./tokens.js";
 

package/dist/theme/syntax/presets.d.ts

@@ -6,7 +6,7 @@
  * All original themes are MIT licensed. Only color values are extracted.
  * See THIRD_PARTY_LICENSES.md for full attribution.
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 import { type SyntaxThemeDefinition } from './defineSyntaxTheme';
 /** One Dark Pro (Binaryify) — MIT */

package/dist/theme/syntax/presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../../src/theme/syntax/presets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAoB,KAAK,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AAElF,qCAAqC;AACrC,eAAO,MAAM,UAAU,EAAE,qBAkBvB,CAAC;AAEH,iCAAiC;AACjC,eAAO,MAAM,OAAO,EAAE,qBAkBpB,CAAC;AAEH,wDAAwD;AACxD,eAAO,MAAM,OAAO,EAAE,qBAkBpB,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,IAAI,EAAE,qBAkBjB,CAAC;AAEH,gCAAgC;AAChC,eAAO,MAAM,UAAU,EAAE,qBAkBvB,CAAC;AAEH,uDAAuD;AACvD,eAAO,MAAM,eAAe,EAAE,qBAkB5B,CAAC;AAEH,8CAA8C;AAC9C,eAAO,MAAM,WAAW,EAAE,qBAkBxB,CAAC;AAEH,6CAA6C;AAC7C,eAAO,MAAM,UAAU,EAAE,qBAkBvB,CAAC;AAEH,+CAA+C;AAC/C,eAAO,MAAM,cAAc,EAAE,qBAkB3B,CAAC;AAEH,2CAA2C;AAC3C,eAAO,MAAM,QAAQ,EAAE,qBAkBrB,CAAC;AAEH,uDAAuD;AACvD,eAAO,MAAM,eAAe,EAAE,qBAkB5B,CAAC;AAEH,sCAAsC;AACtC,eAAO,MAAM,eAAe,EAAE,qBAkB5B,CAAC;AAEH,oCAAoC;AACpC,eAAO,MAAM,iBAAiB,4KAQpB,CAAC;AAEX,qCAAqC;AACrC,eAAO,MAAM,kBAAkB,8HAMrB,CAAC;AAEX,+BAA+B;AAC/B,eAAO,MAAM,gBAAgB,+RAGnB,CAAC"}
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../../src/theme/syntax/presets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAE7B,qCAAqC;AACrC,eAAO,MAAM,UAAU,EAAE,qBAkBvB,CAAC;AAEH,iCAAiC;AACjC,eAAO,MAAM,OAAO,EAAE,qBAkBpB,CAAC;AAEH,wDAAwD;AACxD,eAAO,MAAM,OAAO,EAAE,qBAkBpB,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,IAAI,EAAE,qBAkBjB,CAAC;AAEH,gCAAgC;AAChC,eAAO,MAAM,UAAU,EAAE,qBAkBvB,CAAC;AAEH,uDAAuD;AACvD,eAAO,MAAM,eAAe,EAAE,qBAkB5B,CAAC;AAEH,8CAA8C;AAC9C,eAAO,MAAM,WAAW,EAAE,qBAkBxB,CAAC;AAEH,6CAA6C;AAC7C,eAAO,MAAM,UAAU,EAAE,qBAkBvB,CAAC;AAEH,+CAA+C;AAC/C,eAAO,MAAM,cAAc,EAAE,qBAkB3B,CAAC;AAEH,2CAA2C;AAC3C,eAAO,MAAM,QAAQ,EAAE,qBAkBrB,CAAC;AAEH,uDAAuD;AACvD,eAAO,MAAM,eAAe,EAAE,qBAkB5B,CAAC;AAEH,sCAAsC;AACtC,eAAO,MAAM,eAAe,EAAE,qBAkB5B,CAAC;AAEH,oCAAoC;AACpC,eAAO,MAAM,iBAAiB,4KAQpB,CAAC;AAEX,qCAAqC;AACrC,eAAO,MAAM,kBAAkB,8HAMrB,CAAC;AAEX,+BAA+B;AAC/B,eAAO,MAAM,gBAAgB,+RAGnB,CAAC"}

package/dist/theme/syntax/presets.js

@@ -8,7 +8,7 @@
  * All original themes are MIT licensed. Only color values are extracted.
  * See THIRD_PARTY_LICENSES.md for full attribution.
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 
 import { defineSyntaxTheme } from "./defineSyntaxTheme.js";

package/dist/theme/syntax/tokens.d.ts

@@ -14,7 +14,7 @@
  * 14-token architecture validated against 11 community code themes.
  * All themes map cleanly to these 14 slots.
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 export declare const syntaxTokenDefaults: {
     readonly '--color-syntax-keyword': "var(--color-text-accent)";

package/dist/theme/syntax/tokens.js

@@ -16,7 +16,7 @@
  * 14-token architecture validated against 11 community code themes.
  * All themes map cleanly to these 14 slots.
  *
- * @see https://github.com/facebookexperimental/xds/issues/1148
+ * @see https://github.com/facebook/astryx/issues/1148
  */
 
 export const syntaxTokenDefaults = {

package/dist/theme/types.d.ts

@@ -116,7 +116,7 @@ export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 /**
  * Text color variants for Text/Heading
  */
-export type TextColor = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'active' | 'inherit';
+export type TextColor = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit';
 /**
  * Display mode for Text/Heading
  */

package/dist/utils/dateTypes.d.ts

@@ -11,6 +11,18 @@
 export type ISODateString = `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
 /** Day of week: 0 = Sunday through 6 = Saturday */
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Three-letter lowercase weekday name, 'sun' through 'sat'.
+ * A more self-documenting alternative to the numeric {@link DayOfWeek}.
+ */
+export type DayOfWeekName = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+/**
+ * Normalize a weekday to its numeric {@link DayOfWeek}. Accepts either a
+ * number (0–6) or a three-letter day name ('sun'–'sat', case-insensitive),
+ * so APIs like `weekStartsOn` can take whichever is more readable at the
+ * call site. Unrecognized values fall back to 0 (Sunday).
+ */
+export declare function normalizeDayOfWeek(value: DayOfWeek | DayOfWeekName): DayOfWeek;
 /** Immutable date record with 1-based month. */
 export interface PlainDate {
     readonly year: number;

package/dist/utils/dateTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateTypes.d.ts","sourceRoot":"","sources":["../../src/utils/dateTypes.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GACvB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,MAAM,EAAE,CAAC;AAE/E,mDAAmD;AACnD,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,aAAa,CAAC;CACpB"}
+{"version":3,"file":"dateTypes.d.ts","sourceRoot":"","sources":["../../src/utils/dateTypes.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GACvB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,MAAM,EAAE,CAAC;AAE/E,mDAAmD;AACnD,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,aAAa,GACrB,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAaV;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,GAAG,aAAa,GAC/B,SAAS,CAMX;AAED,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,aAAa,CAAC;CACpB"}

package/dist/utils/dateTypes.js

@@ -1 +1,41 @@
-export {};
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file dateTypes.ts
+ * @input None
+ * @output Shared date type definitions used across Calendar, DateInput, and other components
+ * @position Core type definitions; imported by Calendar, DateInput, DateRangeInput, DateTimeInput, plainDate, dateParser
+ */
+
+/**
+ * ISO 8601 date string in YYYY-MM-DD format.
+ * Example: "2026-01-28"
+ */
+
+/** Day of week: 0 = Sunday through 6 = Saturday */
+
+/**
+ * Three-letter lowercase weekday name, 'sun' through 'sat'.
+ * A more self-documenting alternative to the numeric {@link DayOfWeek}.
+ */
+
+/** Weekday names indexed by {@link DayOfWeek} (0 = Sunday). */
+const WEEKDAY_NAMES = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+
+/**
+ * Normalize a weekday to its numeric {@link DayOfWeek}. Accepts either a
+ * number (0–6) or a three-letter day name ('sun'–'sat', case-insensitive),
+ * so APIs like `weekStartsOn` can take whichever is more readable at the
+ * call site. Unrecognized values fall back to 0 (Sunday).
+ */
+export function normalizeDayOfWeek(value) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  const index = WEEKDAY_NAMES.indexOf(value.toLowerCase());
+  return index === -1 ? 0 : index;
+}
+
+/** Immutable date record with 1-based month. */
+
+/** Date range with start and end dates */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.1",
+  "version": "0.1.2-canary.2581eb4",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -27,6 +27,8 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "unpkg": "./dist/astryx.umd.js",
+  "jsdelivr": "./dist/astryx.umd.js",
   "sideEffects": [
     "**/*.stylex.ts",
     "**/*.stylex.js",
@@ -47,6 +49,7 @@
       "types": "./src/astryx.css.d.ts",
       "default": "./dist/astryx.css"
     },
+    "./astryx.umd.js": "./dist/astryx.umd.js",
     "./tailwind-theme.css": {
       "types": "./src/tailwind-theme.css.d.ts",
       "default": "./src/tailwind-theme.css"
@@ -635,9 +638,10 @@
     "@testing-library/react": "^16.3.2"
   },
   "scripts": {
-    "build": "rm -rf dist && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css",
+    "build": "rm -rf dist && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && pnpm build:umd",
     "build:esm": "babel src --out-dir dist --extensions '.ts,.tsx' --out-file-extension '.js' --ignore '**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts' --config-file ./babel.config.json",
     "build:css": "node ../../scripts/build-css.mjs",
+    "build:umd": "node ../../scripts/build-umd.mjs",
     "dev": "babel src --watch --out-dir dist --extensions '.ts,.tsx' --out-file-extension '.js' --ignore '**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*' --config-file ./babel.config.json",
     "test": "vitest run --root ../..",
     "test:watch": "vitest --root ../..",

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -132,6 +132,7 @@ export function AvatarGroupOverflow({
   xstyle,
   className,
   style,
+  ...rest
 }: AvatarGroupOverflowProps): ReactNode {
   const group = useAvatarGroup();
   const numericSize = group?.numericSize ?? 36;
@@ -147,6 +148,7 @@ export function AvatarGroupOverflow({
         type="button"
         onClick={onClick}
         aria-label={label}
+        {...rest}
         {...mergeProps(
           themeProps('avatar-group-overflow'),
           stylex.props(
@@ -170,6 +172,7 @@ export function AvatarGroupOverflow({
     <span
       ref={ref}
       aria-label={label}
+      {...rest}
       {...mergeProps(
         themeProps('avatar-group-overflow'),
         stylex.props(

package/src/Banner/Banner.doc.mjs

@@ -87,6 +87,13 @@ export const docs = {
       description:
         'Content rendered in the card-background area below the colored header.',
     },
+    {
+      name: 'defaultIsExpanded',
+      type: 'boolean',
+      description:
+        'Whether the content area (children) starts expanded. Only relevant when children are provided.',
+      default: 'false',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -150,6 +157,7 @@ export const docsZh = {
     {name: 'endContent', type: 'ReactNode', description: '渲染在头部区域末端对齐的操作内容，通常是按钮或链接。'},
     {name: 'container', type: "'card' | 'section'", description: '视觉变体：card 带圆角；section 无圆角全宽，适用于页面级场景。', default: "'card'"},
     {name: 'children', type: 'ReactNode', description: '渲染在彩色头部下方卡片背景区域的内容。'},
+    {name: 'defaultIsExpanded', type: 'boolean', description: '内容区域（children）是否初始展开。仅在提供 children 时相关。', default: 'false'},
     {
       name: 'xstyle',
       type: 'StyleXStyles',

package/src/Banner/Banner.test.tsx

@@ -76,11 +76,22 @@ describe('Banner', () => {
     expect(screen.getByText('This is a description')).toBeInTheDocument();
   });
 
+  it('renders title and description as <div> (never <p>) for composition safety', () => {
+    const {container} = render(
+      <Banner status="info" title="Title" description="Description" />,
+    );
+    // Block content can be nested inside Banner text slots without tripping
+    // the phrasing-content trap that <p> imposes, so neither slot is a <p>.
+    expect(container.querySelector('p')).toBeNull();
+    expect(screen.getByText('Title').tagName).toBe('DIV');
+    expect(screen.getByText('Description').tagName).toBe('DIV');
+  });
+
   it('does not render description when not provided', () => {
-    const {container} = render(<Banner status="info" title="Title Only" />);
-    // Only one <p> for the title, no description
-    const paragraphs = container.querySelectorAll('p');
-    expect(paragraphs).toHaveLength(1);
+    render(<Banner status="info" title="Title Only" />);
+    // Title renders; no description text is present.
+    expect(screen.getByText('Title Only')).toBeInTheDocument();
+    expect(screen.queryByText('This is a description')).not.toBeInTheDocument();
   });
 
   it('renders dismiss button when isDismissable', () => {
@@ -158,9 +169,7 @@ describe('Banner', () => {
   });
 
   it('renders card container by default', () => {
-    const {container} = render(
-      <Banner status="info" title="Card Container" />,
-    );
+    const {container} = render(<Banner status="info" title="Card Container" />);
     const root = container.firstElementChild;
     expect(root).toBeInTheDocument();
   });

package/src/Banner/Banner.tsx

@@ -16,6 +16,13 @@
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - When children are provided, a collapse/expand toggle button appears in the end area
  *
+ * Title and description render as <div> (not <p>): they accept arbitrary
+ * ReactNode content, and <p> cannot legally contain block-level children
+ * (the HTML parser reparents them, desyncing SSR markup from the hydrated
+ * DOM). Using <div> keeps these slots composable with any content. Their
+ * StyleX styles set margin: 0 and explicit typography, so the rendered
+ * appearance is identical to the previous <p>.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Banner/Banner.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
@@ -441,9 +448,9 @@ export function Banner({
           )}
         </div>
         <div {...stylex.props(styles.headerContent)}>
-          <p {...stylex.props(styles.title)}>{title}</p>
+          <div {...stylex.props(styles.title)}>{title}</div>
           {description != null && (
-            <p {...stylex.props(styles.description)}>{description}</p>
+            <div {...stylex.props(styles.description)}>{description}</div>
           )}
         </div>
         {showEndArea && (

package/src/Button/Button.doc.mjs

@@ -78,6 +78,12 @@ export const docs = {
       description: 'Shows a loading spinner and disables interaction. Announces "Loading" via a live region.',
       default: 'false',
     },
+    {
+      name: 'isInterruptible',
+      type: 'boolean',
+      description: 'Keep the button clickable while a clickAction is pending: the spinner and aria-busy still show, but the button is not disabled and the action is not deduped, so a re-click lands and interrupts the in-flight action with a fresh one.',
+      default: 'false',
+    },
     {
       name: 'isDisabled',
       type: 'boolean',

package/src/Button/Button.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Button} from './Button';
 import {Badge} from '../Badge/Badge';
@@ -71,6 +71,32 @@ describe('Button', () => {
     expect(button).toBeDisabled();
   });
 
+  it('sets aria-busy synchronously while clickAction is pending', async () => {
+    // The spinner reveal is visually delayed (CSS animation-delay), but the
+    // loading DOM state — aria-busy and disabled — must not be delayed.
+    const user = userEvent.setup();
+    let resolveAction: (() => void) | undefined;
+    const clickAction = vi.fn(
+      async () =>
+        new Promise<void>(resolve => {
+          resolveAction = resolve;
+        }),
+    );
+    render(<Button label="Save" clickAction={clickAction} />);
+    const button = screen.getByRole('button');
+
+    await user.click(button);
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    expect(button).toBeDisabled();
+
+    await act(async () => {
+      resolveAction?.();
+      await Promise.resolve();
+    });
+    expect(button).not.toHaveAttribute('aria-busy', 'true');
+    expect(button).not.toBeDisabled();
+  });
+
   it('renders the loading spinner with the inherit shade for every variant (#2717)', () => {
     // The spinner must follow the button's resolved foreground color rather
     // than a hardcoded white, so it keeps contrast on themed variants like the
@@ -228,11 +254,7 @@ describe('Button', () => {
       order.push('clickAction');
     });
     render(
-      <Button
-        label="Test"
-        onClick={handleClick}
-        clickAction={handleAction}
-      />,
+      <Button label="Test" onClick={handleClick} clickAction={handleAction} />,
     );
 
     await user.click(screen.getByRole('button'));
@@ -246,11 +268,7 @@ describe('Button', () => {
     const handleClick = vi.fn((e: React.MouseEvent) => e.preventDefault());
     const handleAction = vi.fn();
     render(
-      <Button
-        label="Test"
-        onClick={handleClick}
-        clickAction={handleAction}
-      />,
+      <Button label="Test" onClick={handleClick} clickAction={handleAction} />,
     );
 
     await user.click(screen.getByRole('button'));
@@ -258,6 +276,82 @@ describe('Button', () => {
     expect(handleAction).not.toHaveBeenCalled();
   });
 
+  it('fires clickAction once on a fast double-click (no double-submit)', async () => {
+    let resolveAction: (() => void) | undefined;
+    const handleAction = vi.fn(
+      async () =>
+        new Promise<void>(resolve => {
+          resolveAction = resolve;
+        }),
+    );
+    render(<Button label="Pay" clickAction={handleAction} />);
+
+    const button = screen.getByRole('button');
+    await act(async () => {
+      fireEvent.click(button);
+      fireEvent.click(button);
+    });
+    expect(handleAction).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      resolveAction?.();
+      await Promise.resolve();
+    });
+  });
+
+  it('stays clickable (not disabled) while a clickAction is pending when isInterruptible', async () => {
+    const user = userEvent.setup();
+    let resolveAction: (() => void) | undefined;
+    const clickAction = vi.fn(
+      async () =>
+        new Promise<void>(resolve => {
+          resolveAction = resolve;
+        }),
+    );
+    render(<Button label="Toggle" isInterruptible clickAction={clickAction} />);
+    const button = screen.getByRole('button');
+
+    await user.click(button);
+    // Loading is announced via aria-busy, but the button is not disabled so it
+    // can be re-clicked to interrupt the in-flight action.
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    expect(button).not.toBeDisabled();
+
+    await act(async () => {
+      resolveAction?.();
+      await Promise.resolve();
+    });
+    expect(button).not.toHaveAttribute('aria-busy', 'true');
+    expect(button).not.toBeDisabled();
+  });
+
+  it('re-fires clickAction on re-click while pending when isInterruptible (no dedupe)', async () => {
+    // Unlike the fire-once default, an interruptible action is not deduped: a
+    // re-click while pending starts a fresh action that interrupts the prior.
+    const resolvers: (() => void)[] = [];
+    const clickAction = vi.fn(
+      async () =>
+        new Promise<void>(resolve => {
+          resolvers.push(resolve);
+        }),
+    );
+    render(<Button label="Toggle" isInterruptible clickAction={clickAction} />);
+
+    const button = screen.getByRole('button');
+    await act(async () => {
+      fireEvent.click(button);
+    });
+    await act(async () => {
+      fireEvent.click(button);
+    });
+    expect(clickAction).toHaveBeenCalledTimes(2);
+
+    await act(async () => {
+      resolvers.forEach(resolve => resolve());
+      await Promise.resolve();
+    });
+  });
+
   // type/name/value/form props
   it('defaults type to button', () => {
     render(<Button label="Test" />);

package/src/Button/Button.tsx

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
  *
- * Last synced props: label, variant, size, isDisabled, isLoading, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
+ * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
  */
 
 import {useRef, useTransition, type ReactNode} from 'react';
@@ -320,6 +320,16 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * Keep the button interactive while a `clickAction` is pending. The loading
+   * state still renders the spinner and `aria-busy`, but the button is not
+   * disabled and the in-flight action is not deduped — so a re-click lands and
+   * interrupts the previous action with a fresh one. Use for interruptible
+   * actions (e.g. a toggle whose action can be re-triggered before the previous
+   * one settles), not fire-once actions (submit/save/pay).
+   * @default false
+   */
+  isInterruptible?: boolean;
   /**
    * Click handler. For async actions that should show a loading state,
    * use `clickAction` instead.
@@ -380,6 +390,22 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
   rel?: string;
 }
 
+const spinnerReveal = stylex.keyframes({
+  from: {opacity: 0},
+  to: {opacity: 1},
+});
+
+const contentHide = stylex.keyframes({
+  from: {color: 'inherit'},
+  to: {color: 'transparent'},
+});
+
+// Hold the loading swap for a short delay so a fast action (e.g. clickAction)
+// that settles within the delay never flashes a spinner. The spinner fade-in
+// and the content hide share the same delay so the button never shows an empty
+// frame in between. Reduced motion is instant.
+const SPINNER_DELAY = durationVars['--duration-medium-min'];
+
 const loadingStyles = stylex.create({
   // Hide the button's own content while the spinner overlay is shown. Applied
   // to the content wrapper (not the button) so the button keeps its variant
@@ -387,6 +413,17 @@ const loadingStyles = stylex.create({
   hiddenContent: {
     color: 'transparent',
   },
+  // Delayed variant: keep content visible, then hide it in lockstep with the
+  // spinner reveal once the delay elapses.
+  hiddenContentDelayed: {
+    animationName: contentHide,
+    animationDuration: '1ms',
+    animationFillMode: 'forwards',
+    animationDelay: {
+      default: SPINNER_DELAY,
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+  },
   spinnerOverlay: {
     position: 'absolute',
     top: 0,
@@ -396,6 +433,15 @@ const loadingStyles = stylex.create({
     display: 'grid',
     placeItems: 'center',
   },
+  spinnerDelayed: {
+    animationName: spinnerReveal,
+    animationDuration: durationVars['--duration-fast'],
+    animationFillMode: 'backwards',
+    animationDelay: {
+      default: SPINNER_DELAY,
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+  },
 });
 
 const groupStyles = stylex.create({
@@ -493,6 +539,7 @@ export function Button({
   type = 'button',
   isDisabled = false,
   isLoading = false,
+  isInterruptible = false,
   clickAction,
   icon,
   isIconOnly = false,
@@ -513,10 +560,23 @@ export function Button({
   const buttonGroup = useButtonGroup();
 
   const [isPending, startTransition] = useTransition();
+  // clickAction is normally fire-once (submit/save/pay), so a same-tick
+  // double-click must dedupe — which neither isPending nor useOptimistic do.
+  // Hence the ref guard. Interruptible callers (e.g. ToggleButton) opt out so a
+  // re-click can land and interrupt the in-flight action with a fresh one.
   const actionInFlightRef = useRef(false);
   const isLoadingState = isLoading || isPending;
+  // Delay the spinner reveal for action-driven loading (clickAction's own
+  // transition) so a fast action that settles within the delay does not flash
+  // a spinner. Interruptible loading is delayed too, so rapid re-clicks settle
+  // before any spinner shows. Explicit isLoading-only stays immediate, since
+  // the consumer is deliberately showing it.
+  const delaySpinner = isPending || isInterruptible;
   const groupDisabled = buttonGroup?.isDisabled ?? false;
-  const buttonDisabled = isDisabled || groupDisabled || isLoadingState;
+  // When interruptible, the loading state drives the spinner and aria-busy but
+  // not disabled, so clicks keep landing and can interrupt the in-flight action.
+  const buttonDisabled =
+    isDisabled || groupDisabled || (isLoadingState && !isInterruptible);
   // isIconOnly prop is the source of truth for icon-only rendering.
   // When false (default), label is always rendered as visible text.
 
@@ -531,7 +591,9 @@ export function Button({
   const useAriaDisabled = tooltip != null && buttonDisabled;
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (buttonDisabled || actionInFlightRef.current) {
+    // The ref guard dedupes fire-once actions. Interruptible callers skip it so
+    // a re-click while pending starts a fresh action that interrupts the prior.
+    if (buttonDisabled || (actionInFlightRef.current && !isInterruptible)) {
       e.preventDefault();
       return;
     }
@@ -598,7 +660,10 @@ export function Button({
     <>
       {isLoadingState && (
         <span
-          {...stylex.props(loadingStyles.spinnerOverlay)}
+          {...stylex.props(
+            loadingStyles.spinnerOverlay,
+            delaySpinner && loadingStyles.spinnerDelayed,
+          )}
           aria-hidden="true">
           <Spinner size="sm" shade="inherit" />
         </span>
@@ -606,7 +671,10 @@ export function Button({
       <span
         {...stylex.props(
           styles.contentWrapper,
-          isLoadingState && loadingStyles.hiddenContent,
+          isLoadingState &&
+            (delaySpinner
+              ? loadingStyles.hiddenContentDelayed
+              : loadingStyles.hiddenContent),
         )}
         aria-hidden={isLoadingState || undefined}>
         {icon && (