@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Progress/Progress.module.scss

@@ -1,33 +1,32 @@
 @use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
+@use "../../recipes/typography" as typography;
 
 // Root container
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-1, $fui-space-1);
-  width: 100%;
-  font-family: var(--fui-font-sans, $fui-font-sans);
+  gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  inline-size: 100%;
 }
 
 // Header with label and value
 .header {
+  @include typography.role("ui-standard");
+
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--fui-space-2, $fui-space-2);
+  gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
 // Label text
 .label {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 // Value display
 .value {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   font-variant-numeric: tabular-nums;
 }
@@ -35,31 +34,40 @@
 // Track (background bar)
 .track {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
+  block-size: var(--_progress-track-size);
   overflow: hidden;
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 }
 
-// Size variants for track (using closest 7px grid values)
 .trackSm {
-  height: calc(var(--fui-space-1, $fui-space-1) / 2); // ~3.5px
+  --_progress-track-size: var(
+    --fui-progress-track-sm,
+    var(--fui-raw-space-4, #{measurements.raw-space(4)})
+  );
 }
 
 .trackMd {
-  height: var(--fui-space-1, $fui-space-1); // 7px
+  --_progress-track-size: var(
+    --fui-progress-track-md,
+    var(--fui-raw-space-6, #{measurements.raw-space(6)})
+  );
 }
 
 .trackLg {
-  height: var(--fui-space-2, $fui-space-2); // 14px
+  --_progress-track-size: var(
+    --fui-progress-track-lg,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
 }
 
 // Indicator (filled portion)
 .indicator {
-  height: 100%;
+  block-size: 100%;
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  transition: width var(--fui-transition-normal, $fui-transition-normal);
+  transition: inline-size var(--fui-transition-normal, $fui-transition-normal);
 }
 
 // Color variants
@@ -81,8 +89,8 @@
 
 // Indeterminate animation
 .indicatorIndeterminate {
-  width: 50% !important;
-  animation: indeterminate 1.5s ease-in-out infinite;
+  inline-size: 50%;
+  animation: indeterminate var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out infinite;
 }
 
 @keyframes indeterminate {
@@ -97,20 +105,19 @@
   }
 }
 
-// Complete state
-.root[data-complete] .indicator:not(.indicatorNeutral) {
-  background-color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
 // Circular progress variant
 .circular {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  inline-size: var(--_progress-diameter);
+  block-size: var(--_progress-diameter);
 }
 
 .circularSvg {
+  inline-size: 100%;
+  block-size: 100%;
   transform: rotate(-90deg);
 }
 
@@ -123,6 +130,7 @@
   stroke: var(--fui-color-accent, $fui-color-accent);
   fill: none;
   stroke-linecap: round;
+  transform-origin: center;
   transition: stroke-dashoffset var(--fui-transition-normal, $fui-transition-normal);
 }
 
@@ -139,51 +147,64 @@
 }
 
 .circularIndicatorIndeterminate {
-  animation: circularIndeterminate 1.5s ease-in-out infinite;
+  animation: circularIndeterminate var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out
+    infinite;
 }
 
 @keyframes circularIndeterminate {
   0% {
-    stroke-dashoffset: 280;
+    stroke-dashoffset: var(--_progress-dash-full);
     transform: rotate(0deg);
   }
   50% {
-    stroke-dashoffset: 70;
+    stroke-dashoffset: var(--_progress-dash-quarter);
   }
   100% {
-    stroke-dashoffset: 280;
+    stroke-dashoffset: var(--_progress-dash-full);
     transform: rotate(360deg);
   }
 }
 
 .circularValue {
   position: absolute;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
   font-variant-numeric: tabular-nums;
 }
 
-// Size variants for circular (using closest 7px grid values)
-.circularSm {
-  width: var(--fui-space-4, $fui-space-4); // 28px
-  height: var(--fui-space-4, $fui-space-4);
+.circularValueCompact {
+  @include typography.role("ui-compact");
+}
 
-  .circularValue {
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  }
+.circularValueStandard {
+  @include typography.role("ui-standard");
 }
 
-.circularMd {
-  width: var(--fui-space-6, $fui-space-6); // 42px
-  height: var(--fui-space-6, $fui-space-6);
+@media (prefers-reduced-motion: reduce) {
+  .indicator,
+  .circularIndicator {
+    transition: none;
+  }
+
+  .indicatorIndeterminate,
+  .circularIndicatorIndeterminate {
+    animation: none;
+  }
 }
 
-.circularLg {
-  width: var(--fui-space-8, $fui-space-8); // 56px
-  height: var(--fui-space-8, $fui-space-8);
+@media (forced-colors: active) {
+  .track {
+    background-color: GrayText;
+  }
+
+  .indicator {
+    background-color: Highlight;
+  }
+
+  .circularTrack {
+    stroke: GrayText;
+  }
 
-  .circularValue {
-    font-size: var(--fui-font-size-base, $fui-font-size-base);
+  .circularIndicator {
+    stroke: Highlight;
   }
 }

package/src/components/Progress/geometry.ts

@@ -0,0 +1,41 @@
+import { MEASUREMENT_PROFILES, measurementPx } from "../../measurements";
+
+export type ProgressSize = "sm" | "md" | "lg";
+
+export interface CircularProgressGeometry {
+  diameter: number;
+  strokeWidth: number;
+}
+
+const defaultStrokeWidths: Readonly<Record<ProgressSize, number>> = {
+  sm: 3,
+  md: 4,
+  lg: 5,
+};
+
+export const CIRCULAR_PROGRESS_GEOMETRY: Readonly<Record<ProgressSize, CircularProgressGeometry>> =
+  Object.freeze({
+    sm: Object.freeze({
+      diameter: measurementPx(MEASUREMENT_PROFILES.rawSpace[32], "rawSpace.32"),
+      strokeWidth: defaultStrokeWidths.sm,
+    }),
+    md: Object.freeze({
+      diameter: measurementPx(MEASUREMENT_PROFILES.rawSpace[48], "rawSpace.48"),
+      strokeWidth: defaultStrokeWidths.md,
+    }),
+    lg: Object.freeze({
+      diameter: measurementPx(MEASUREMENT_PROFILES.rawSpace[64], "rawSpace.64"),
+      strokeWidth: defaultStrokeWidths.lg,
+    }),
+  });
+
+export function resolveCircularStrokeWidth(
+  geometry: CircularProgressGeometry,
+  requested?: number
+): number {
+  if (requested === undefined || !Number.isFinite(requested) || requested <= 0) {
+    return geometry.strokeWidth;
+  }
+
+  return Math.min(requested, geometry.diameter / 2);
+}

package/src/components/Progress/index.tsx

@@ -2,6 +2,11 @@
 
 import * as React from "react";
 import { Progress as BaseProgress } from "@base-ui/react/progress";
+import {
+  CIRCULAR_PROGRESS_GEOMETRY,
+  resolveCircularStrokeWidth,
+  type ProgressSize,
+} from "./geometry";
 import styles from "./Progress.module.scss";
 
 // ============================================
@@ -16,7 +21,7 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** Maximum value */
   max?: number;
   /** Size of the progress bar */
-  size?: "sm" | "md" | "lg";
+  size?: ProgressSize;
   /** Color variant */
   variant?: "default" | "neutral" | "success" | "warning" | "danger";
   /** Label text */
@@ -31,7 +36,7 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
   /** Size of the circular progress */
-  size?: "sm" | "md" | "lg";
+  size?: ProgressSize;
   /** Color variant */
   variant?: "default" | "success" | "warning" | "danger";
   /** Show percentage in center */
@@ -61,7 +66,13 @@ function ProgressRoot({
 }: ProgressProps) {
   const isIndeterminate = value === null;
   const range = max - min;
-  const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : ((value - min) / range) * 100;
+  const clampedValue = isIndeterminate
+    ? null
+    : !Number.isFinite(value) || range <= 0
+      ? min
+      : Math.min(max, Math.max(min, value));
+  const normalizedPercentage =
+    clampedValue === null || range <= 0 ? 0 : ((clampedValue - min) / range) * 100;
   const percentage = isIndeterminate
     ? 0
     : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
@@ -97,7 +108,7 @@ function ProgressRoot({
   return (
     <BaseProgress.Root
       {...htmlProps}
-      value={value}
+      value={clampedValue}
       min={min}
       max={max}
       className={rootClasses}
@@ -115,7 +126,7 @@ function ProgressRoot({
       <BaseProgress.Track className={trackClasses}>
         <BaseProgress.Indicator
           className={indicatorClasses}
-          style={isIndeterminate ? undefined : { width: `${percentage}%` }}
+          style={isIndeterminate ? undefined : { inlineSize: `${percentage}%` }}
         />
       </BaseProgress.Track>
     </BaseProgress.Root>
@@ -126,12 +137,6 @@ function ProgressRoot({
 // Circular Progress
 // ============================================
 
-const CIRCLE_SIZES = {
-  sm: { size: 32, strokeWidth: 3 },
-  md: { size: 48, strokeWidth: 4 },
-  lg: { size: 64, strokeWidth: 5 },
-};
-
 function CircularProgressRoot({
   value = null,
   size = "md",
@@ -139,24 +144,23 @@ function CircularProgressRoot({
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
+  style: styleProp,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-valuetext": ariaValueText,
   ...htmlProps
 }: CircularProgressProps) {
   const isIndeterminate = value === null;
-  const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
+  const percentage =
+    isIndeterminate || !Number.isFinite(value) ? 0 : Math.min(100, Math.max(0, value));
 
-  const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];
-  const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;
+  const geometry = CIRCULAR_PROGRESS_GEOMETRY[size];
+  const strokeWidth = resolveCircularStrokeWidth(geometry, customStrokeWidth);
 
-  const radius = (svgSize - strokeWidth) / 2;
+  const radius = (geometry.diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - (percentage / 100) * circumference;
 
-  const sizeClass =
-    size === "sm" ? styles.circularSm : size === "lg" ? styles.circularLg : styles.circularMd;
-
   const indicatorClasses = [
     styles.circularIndicator,
     variant === "success" && styles.circularIndicatorSuccess,
@@ -167,20 +171,27 @@ function CircularProgressRoot({
     .filter(Boolean)
     .join(" ");
 
-  const rootClasses = [styles.circular, sizeClass, className].filter(Boolean).join(" ");
+  const rootClasses = [styles.circular, className].filter(Boolean).join(" ");
 
   // Default value text for screen readers
   const effectiveValueText =
     ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
+  const circularStyle = {
+    "--_progress-diameter": `${geometry.diameter}px`,
+    "--_progress-dash-full": circumference,
+    "--_progress-dash-quarter": circumference / 4,
+    ...styleProp,
+  } as React.CSSProperties;
 
   return (
     <BaseProgress.Root
       {...htmlProps}
-      value={value}
+      value={isIndeterminate ? null : percentage}
       min={0}
       max={100}
       className={rootClasses}
-      aria-label={ariaLabel}
+      style={circularStyle}
+      aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : "Progress")}
       aria-labelledby={ariaLabelledBy}
       aria-valuenow={isIndeterminate ? undefined : percentage}
       aria-valuemin={0}
@@ -190,33 +201,36 @@ function CircularProgressRoot({
     >
       <svg
         className={styles.circularSvg}
-        width={svgSize}
-        height={svgSize}
-        viewBox={`0 0 ${svgSize} ${svgSize}`}
+        viewBox={`0 0 ${geometry.diameter} ${geometry.diameter}`}
         aria-hidden="true"
       >
         {/* Track circle */}
         <circle
           className={styles.circularTrack}
-          cx={svgSize / 2}
-          cy={svgSize / 2}
+          cx={geometry.diameter / 2}
+          cy={geometry.diameter / 2}
           r={radius}
           strokeWidth={strokeWidth}
         />
         {/* Indicator circle */}
         <circle
           className={indicatorClasses}
-          cx={svgSize / 2}
-          cy={svgSize / 2}
+          cx={geometry.diameter / 2}
+          cy={geometry.diameter / 2}
           r={radius}
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={isIndeterminate ? undefined : offset}
-          style={isIndeterminate ? { transformOrigin: "center" } : undefined}
         />
       </svg>
       {showValue && !isIndeterminate && (
-        <span className={styles.circularValue} aria-hidden="true">
+        <span
+          className={[
+            styles.circularValue,
+            size === "sm" ? styles.circularValueCompact : styles.circularValueStandard,
+          ].join(" ")}
+          aria-hidden="true"
+        >
           {Math.round(percentage)}%
         </span>
       )}

package/src/components/Prompt/Prompt.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Prompt",
-  "description": "Multi-line input with toolbar for AI/chat interfaces",
+  "description": "Collects multi-line input for AI and chat interfaces.",
   "category": "ai",
-  "tags": [
-    "prompt",
-    "chat",
-    "ai",
-    "input",
-    "textarea",
-    "form"
-  ],
+  "tags": ["prompt", "chat", "ai", "input", "textarea", "form"],
   "status": "stable",
   "sourcePath": "src/components/Prompt/index.tsx",
   "exportName": "Prompt",
@@ -106,11 +99,7 @@
       "description": "Visual/positioning variant",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "fixed",
-        "sticky"
-      ]
+      "values": ["default", "fixed", "sticky"]
     },
     "onFiles": {
       "type": "function",
@@ -127,37 +116,30 @@
       "description": "How the card is divided up. \"panel\" keeps the toolbar as a filled footer under a rule; \"seamless\" makes the whole card one writing surface with the controls floating on it.",
       "default": "panel",
       "required": false,
-      "values": [
-        "panel",
-        "seamless"
-      ]
+      "values": ["panel", "seamless"]
     }
   },
   "usage": {
     "when": [
-      "Building chat or AI assistant interfaces",
-      "Need multi-line input with submit action",
-      "Require toolbar with actions like attachments or model selection"
+      "Chat and AI assistant interfaces",
+      "Multi-line input with a submit action",
+      "Toolbars carrying attachments or a model picker"
     ],
     "whenNot": [
-      "Simple single-line text input (use Input)",
-      "Basic multi-line without toolbar (use Textarea)",
-      "Search-only interface (use Input with search variant)"
+      "Single-line text (use Input)",
+      "Multi-line with no toolbar (use Textarea)",
+      "Search-only fields (use Input with the search variant)"
     ],
     "guidelines": [
-      "Always provide an onSubmit handler",
-      "Use loading state during API calls",
-      "Prompt.Textarea forwards native textarea props (autoComplete, inputMode, aria-*, data-*, handlers)",
-      "Prompt.Textarea composes your onChange/onKeyDown handlers with built-in submit and auto-resize behavior",
-      "Use appearance=\"seamless\" for agent composers where the controls should float on the writing surface rather than sit in a footer",
-      "Seamless controls share the dense 32px token scale with body-sized labels and standard glyphs so mixed Prompt.Select, Prompt.Attach and Prompt.Submit rows remain optically aligned",
-      "Seamless secondary controls keep transparent hover and open states so they read as inline tools; only Prompt.Submit carries a persistent filled shape",
-      "Seamless Prompt.Submit mirrors the trailing ink gutter established by Prompt.Attach at the leading edge",
-      "Prompt.Submit uses a neutral inverse surface by default so the primary action stays visible without consuming semantic brand color",
-      "Use Prompt.ModeButton for a setting you toggle and Prompt.Select for one you pick from a list",
-      "Wire onFiles once: the attach button, pasting a screenshot and dropping on the card all go through it",
-      "Render Prompt.Attachments above Prompt.Textarea — attachments are part of the message, not a setting on it",
-      "Consider showing usage/token limits for AI contexts"
+      "Always pass an onSubmit handler",
+      "Set loading while the request is in flight to block duplicate sends",
+      "Prompt.Textarea forwards native textarea props and composes your own handlers",
+      "appearance=\"seamless\" floats the controls on the writing surface instead of a footer",
+      "Seamless secondary controls stay transparent; only Prompt.Submit keeps a filled shape",
+      "Prompt.Submit uses a neutral inverse surface, never semantic brand color",
+      "Prompt.ModeButton toggles a setting; Prompt.Select picks one from a list",
+      "Wire onFiles once — the attach button, paste, and drop all route through it",
+      "Render Prompt.Attachments above Prompt.Textarea; they are part of the message"
     ],
     "accessibility": [
       "Enter submits, Shift+Enter for newline",
@@ -168,32 +150,37 @@
   "examples": [
     {
       "name": "Basic",
-      "description": "Simple prompt with submit button",
+      "description": "A textarea and a submit button, nothing else.",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions />\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "With Actions",
-      "description": "Prompt with attachment and mode buttons",
+      "description": "Attach and mode controls sit to the left of submit.",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "With Usage",
-      "description": "Shows token usage indicator",
+      "description": "A quota readout sits beside the submit button.",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton active>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "Agent Composer",
-      "description": "Seamless surface with the scope of the run chosen on the toolbar",
+      "description": "Controls float on the writing surface instead of a footer.",
       "code": "<Prompt\n  appearance=\"seamless\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
+    {
+      "name": "With Attachments",
+      "description": "Staged files list above the text they belong to.",
+      "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Attachments\n    items={[\n      { id: '1', name: 'findings-export.csv', size: 20480 },\n      { id: '2', name: 'dashboard.png', size: 153600 },\n    ]}\n    onRemove={(id) => console.log(id)}\n  />\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
+    },
     {
       "name": "Loading State",
-      "description": "During API submission",
+      "description": "Input locks and submit spins while the request runs.",
       "code": "<Prompt\n  onSubmit={(value) => console.log(value)}\n  loading\n  defaultValue=\"Tell me about the weather...\"\n>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive prompt",
+      "description": "Everything dims and stops responding to input.",
       "code": "<Prompt onSubmit={(value) => console.log(value)} disabled>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     }
   ],
@@ -220,10 +207,7 @@
       "submitOnEnter: boolean - Enter key behavior (default: true)",
       "Prompt.Textarea accepts native textarea props and optional aria-label override"
     ],
-    "a11yRules": [
-      "A11Y_TEXTAREA_LABEL",
-      "A11Y_BUTTON_LABEL"
-    ]
+    "a11yRules": ["A11Y_TEXTAREA_LABEL", "A11Y_BUTTON_LABEL"]
   },
   "ai": {
     "compositionPattern": "compound",