@usefragments/ui 1.6.0 → 2.0.0

package/src/components/EmptyState/EmptyState.contract.json

@@ -1,21 +1,16 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "EmptyState",
-  "description": "Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.",
+  "description": "Explains why an area is blank and offers the next step.",
   "category": "feedback",
-  "tags": [
-    "empty",
-    "placeholder",
-    "no-data",
-    "zero-state",
-    "blank-slate"
-  ],
+  "tags": ["empty", "placeholder", "no-data", "zero-state", "blank-slate"],
   "status": "stable",
   "sourcePath": "src/components/EmptyState/index.tsx",
   "exportName": "EmptyState",
   "propsSummary": [
     "children: node (required)",
-    "size: sm|md|lg (default: md)"
+    "size: sm|md|lg (default: md)",
+    "variant: ghost|outline (default: ghost)"
   ],
   "props": {
     "children": {
@@ -28,31 +23,33 @@
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
+    },
+    "variant": {
+      "type": "enum",
+      "description": "Chrome. `outline` draws a dashed hairline around the reserved region; `ghost` leaves framing to the surrounding surface.",
+      "default": "ghost",
+      "required": false,
+      "values": ["ghost", "outline"]
     }
   },
   "usage": {
     "when": [
-      "Empty lists, tables, or search results",
-      "New user onboarding (no content yet)",
-      "Filtered views with no matches",
-      "Error states where content failed to load"
+      "Lists, tables, or search results with nothing to show",
+      "First-run screens before any content exists",
+      "Filtered views that matched nothing"
     ],
     "whenNot": [
-      "Loading states (use skeleton or spinner)",
-      "Error messages with retry (use Alert)",
-      "Temporary messages (use Toast)"
+      "Content still loading (use Skeleton)",
+      "Failures that need a retry (use Alert)",
+      "Transient confirmations (use Toast)"
     ],
     "guidelines": [
-      "Always explain why the area is empty",
-      "Provide a clear action to resolve the empty state",
-      "Use appropriate icons to reinforce the message",
-      "Keep messaging positive and actionable",
-      "EmptyState compound sub-components forward DOM props for ids, aria attributes, and handlers"
+      "Say why the area is empty, not just that it is",
+      "Give one clear action out of the state",
+      "Keep to two actions at most, primary first",
+      "Match the icon to the cause \u2014 search, inbox, folder",
+      "Use size=\"sm\" inline and size=\"lg\" for full-page states"
     ],
     "accessibility": [
       "Empty state content is accessible to screen readers",
@@ -62,27 +59,27 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic empty state with action",
+      "description": "First-run state: nothing exists yet, so offer the create action.",
       "code": "<EmptyState>\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>No projects yet</EmptyState.Title>\n  <EmptyState.Description>Get started by creating your first project.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"
     },
     {
       "name": "No Results",
-      "description": "Empty search results",
-      "code": "<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"secondary\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+      "description": "A filter or query matched nothing \u2014 offer a way back.",
+      "code": "<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"soft\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"
     },
     {
       "name": "With Secondary Action",
-      "description": "Empty state with two actions",
-      "code": "<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"secondary\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+      "description": "One primary action plus a quieter alternative.",
+      "code": "<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"soft\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"
     },
     {
       "name": "Small",
-      "description": "Compact empty state for inline use",
+      "description": "Compact size for inline panels; no icon, no action.",
       "code": "<EmptyState size=\"sm\">\n  <EmptyState.Title>No items</EmptyState.Title>\n  <EmptyState.Description>Add items to see them here.</EmptyState.Description>\n</EmptyState>"
     },
     {
       "name": "Large",
-      "description": "Prominent empty state for full-page use",
+      "description": "Full-page size for a workspace or onboarding screen.",
       "code": "<EmptyState size=\"lg\">\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>Welcome to your workspace</EmptyState.Title>\n  <EmptyState.Description>\n    This is where your projects will appear. Create your first project to get started.\n  </EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Your First Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"
     }
   ],
@@ -104,21 +101,12 @@
       "Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions",
       "Compound sub-components forward DOM props to their rendered elements"
     ],
-    "a11yRules": [
-      "A11Y_EMPTY_STATE_CONTENT"
-    ]
+    "a11yRules": ["A11Y_EMPTY_STATE_CONTENT"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Icon",
-      "Title",
-      "Description",
-      "Actions"
-    ],
-    "requiredChildren": [
-      "Title"
-    ],
+    "subComponents": ["Icon", "Title", "Description", "Actions"],
+    "requiredChildren": ["Title"],
     "commonPatterns": [
       "<EmptyState><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description></EmptyState>",
       "<EmptyState><EmptyState.Icon>{icon}</EmptyState.Icon><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description><EmptyState.Actions><Button>{action}</Button></EmptyState.Actions></EmptyState>"

package/src/components/EmptyState/EmptyState.module.scss

@@ -1,30 +1,32 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/feedback" as feedback;
+@use "../../recipes/typography" as typography;
 
 .emptyState {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
   text-align: center;
   font-family: var(--fui-font-sans, $fui-font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
+  // Icon and actions sit a section step (16) away from the copy, netted
+  // against the flex gap so the copy block keeps its own text rhythm.
   > .icon {
     margin-block-end: calc(
-      var(--fui-feedback-section-gap, var(--fui-raw-space-16, 16px)) - var(
+      var(--fui-raw-space-16, #{measurements.raw-space(16)}) - var(
           --fui-feedback-text-gap,
-          var(--fui-raw-space-4, 4px)
+          var(--fui-raw-space-4, #{measurements.raw-space(4)})
         )
     );
   }
 
   > .actions {
     margin-block-start: calc(
-      var(--fui-feedback-section-gap, var(--fui-raw-space-16, 16px)) - var(
+      var(--fui-raw-space-16, #{measurements.raw-space(16)}) - var(
           --fui-feedback-text-gap,
-          var(--fui-raw-space-4, 4px)
+          var(--fui-raw-space-4, #{measurements.raw-space(4)})
         )
     );
   }
@@ -42,6 +44,15 @@
   @include feedback.empty-state("lg");
 }
 
+// Reserved-but-empty region: a dashed hairline says the space belongs to
+// content that has not arrived, without claiming the weight of a real card.
+.outline {
+  justify-content: center;
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) dashed
+    var(--fui-border-default, $fui-border-default);
+  border-radius: var(--fui-card-radius, var(--fui-radius-lg, $fui-radius-lg));
+}
+
 .icon {
   display: flex;
   align-items: center;
@@ -49,30 +60,35 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
   svg {
-    inline-size: var(--_fui-feedback-empty-icon-size);
-    block-size: var(--_fui-feedback-empty-icon-size);
+    inline-size: var(--_fui-feedback-empty-icon-size, var(--fui-icon-2xl, #{$fui-icon-2xl}));
+    block-size: var(--_fui-feedback-empty-icon-size, var(--fui-icon-2xl, #{$fui-icon-2xl}));
   }
 }
 
+// The size recipe (feedback.empty-state) authors the type channels per size;
+// the md role is the fallback when a size class is missing.
 .title {
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-primary, $fui-text-primary);
   font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--_fui-feedback-empty-title-size);
-  font-weight: var(--_fui-feedback-empty-title-weight);
-  line-height: var(--_fui-feedback-empty-title-line);
-  letter-spacing: var(--_fui-feedback-empty-title-tracking);
+  font-size: var(--_fui-feedback-empty-title-size, #{typography.font-size("ui-standard")});
+  font-weight: var(--_fui-feedback-empty-title-weight, #{typography.weight("ui-standard")});
+  line-height: var(--_fui-feedback-empty-title-line, #{typography.line-height("ui-standard")});
+  letter-spacing: var(--_fui-feedback-empty-title-tracking, #{typography.tracking("ui-standard")});
 }
 
 .description {
-  max-inline-size: var(--_fui-feedback-empty-max-inline);
-  margin: 0;
+  max-inline-size: var(
+    --_fui-feedback-empty-max-inline,
+    var(--fui-overlay-tooltip-max, #{measurements.target-value("overlay", "tooltip-max")})
+  );
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
   font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--_fui-feedback-empty-copy-size);
-  font-weight: var(--_fui-feedback-empty-copy-weight);
-  line-height: var(--_fui-feedback-empty-copy-line);
-  letter-spacing: var(--_fui-feedback-empty-copy-tracking);
+  font-size: var(--_fui-feedback-empty-copy-size, #{typography.font-size("body-compact")});
+  font-weight: var(--_fui-feedback-empty-copy-weight, #{typography.weight("body-compact")});
+  line-height: var(--_fui-feedback-empty-copy-line, #{typography.line-height("body-compact")});
+  letter-spacing: var(--_fui-feedback-empty-copy-tracking, #{typography.tracking("body-compact")});
 }
 
 .actions {
@@ -80,5 +96,5 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, 8px));
+  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
 }

package/src/components/EmptyState/index.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './EmptyState.module.scss';
+import * as React from "react";
+import styles from "./EmptyState.module.scss";
 
 // ============================================
 // Types
@@ -9,7 +9,12 @@ import styles from './EmptyState.module.scss';
 
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
+  /** Chrome. `outline` draws the dashed hairline that marks a reserved-but-empty
+   * region. Default `ghost` keeps the state inside whatever already frames it
+   * (a Card, a table body) so the frame is never doubled.
+   * @default "ghost" */
+  variant?: "ghost" | "outline";
 }
 
 export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,6 +23,9 @@ export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement
 
 export interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
+  /** Heading level follows the surrounding outline: `h2` for a page-level
+   * state, `h3` under a section heading. Defaults to `h3`. */
+  as?: "h2" | "h3" | "h4" | "p";
 }
 
 export interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -33,7 +41,7 @@ export interface EmptyStateActionsProps extends React.HTMLAttributes<HTMLDivElem
 // ============================================
 
 interface EmptyStateContextValue {
-  size: 'sm' | 'md' | 'lg';
+  size: "sm" | "md" | "lg";
 }
 
 const EmptyStateContext = React.createContext<EmptyStateContextValue | null>(null);
@@ -41,7 +49,7 @@ const EmptyStateContext = React.createContext<EmptyStateContextValue | null>(nul
 function useEmptyStateContext() {
   const context = React.useContext(EmptyStateContext);
   if (!context) {
-    throw new Error('EmptyState compound components must be used within an EmptyState');
+    throw new Error("EmptyState compound components must be used within an EmptyState");
   }
   return context;
 }
@@ -52,45 +60,70 @@ function useEmptyStateContext() {
 
 function EmptyStateRoot({
   children,
-  size = 'md',
+  size = "md",
+  variant = "ghost",
   className,
   ...htmlProps
 }: EmptyStateProps) {
-  const classes = [styles.emptyState, styles[size], className]
+  const classes = [
+    styles.emptyState,
+    styles[size],
+    variant === "outline" ? styles.outline : null,
+    className,
+  ]
     .filter(Boolean)
-    .join(' ');
+    .join(" ");
 
   const contextValue: EmptyStateContextValue = { size };
 
   return (
     <EmptyStateContext.Provider value={contextValue}>
-      <div {...htmlProps} className={classes}>{children}</div>
+      <div {...htmlProps} className={classes}>
+        {children}
+      </div>
     </EmptyStateContext.Provider>
   );
 }
 
 function EmptyStateIcon({ children, className, ...htmlProps }: EmptyStateIconProps) {
-  const classes = [styles.icon, className].filter(Boolean).join(' ');
-  return <div {...htmlProps} className={classes}>{children}</div>;
-}
-
-function EmptyStateTitle({ children, className, ...htmlProps }: EmptyStateTitleProps) {
-  const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <h3 {...htmlProps} className={classes}>{children}</h3>;
+  const classes = [styles.icon, className].filter(Boolean).join(" ");
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
 }
 
-function EmptyStateDescription({
+function EmptyStateTitle({
   children,
   className,
+  as: Component = "h3",
   ...htmlProps
-}: EmptyStateDescriptionProps) {
-  const classes = [styles.description, className].filter(Boolean).join(' ');
-  return <p {...htmlProps} className={classes}>{children}</p>;
+}: EmptyStateTitleProps) {
+  const classes = [styles.title, className].filter(Boolean).join(" ");
+  return (
+    <Component {...htmlProps} className={classes}>
+      {children}
+    </Component>
+  );
+}
+
+function EmptyStateDescription({ children, className, ...htmlProps }: EmptyStateDescriptionProps) {
+  const classes = [styles.description, className].filter(Boolean).join(" ");
+  return (
+    <p {...htmlProps} className={classes}>
+      {children}
+    </p>
+  );
 }
 
 function EmptyStateActions({ children, className, ...htmlProps }: EmptyStateActionsProps) {
-  const classes = [styles.actions, className].filter(Boolean).join(' ');
-  return <div {...htmlProps} className={classes}>{children}</div>;
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
 }
 
 // ============================================

package/src/components/Field/Field.contract.json

@@ -1,17 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Field",
-  "description": "Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props.",
-  "category": "forms",
-  "tags": [
-    "form",
-    "field",
-    "validation",
-    "label",
-    "error",
-    "input",
-    "accessible"
-  ],
+  "description": "Composes labels, descriptions, validation, and errors around a form control.",
+  "category": "inputs",
+  "tags": ["form", "field", "validation", "label", "error", "input", "accessible"],
   "status": "stable",
   "sourcePath": "src/components/Field/index.tsx",
   "exportName": "Field",
@@ -54,11 +46,7 @@
       "type": "enum",
       "description": "When to trigger validation",
       "required": false,
-      "values": [
-        "onSubmit",
-        "onBlur",
-        "onChange"
-      ]
+      "values": ["onSubmit", "onBlur", "onChange"]
     },
     "validationDebounceTime": {
       "type": "number",
@@ -68,42 +56,47 @@
   },
   "usage": {
     "when": [
-      "You need granular validation with match-based error messages",
-      "Custom form controls need accessible labels and descriptions",
-      "Server-side errors need to be distributed to specific fields",
-      "You need dirty/touched tracking or custom validation logic"
+      "One error message per failure reason, not one catch-all",
+      "A custom control needs a real label and description",
+      "Server errors must land on the field that caused them",
+      "You need dirty and touched tracking"
     ],
     "whenNot": [
-      "Simple inputs with basic label and helper text (use Input with label prop)",
-      "Standalone selects or textareas with built-in error display"
+      "A plain input with a label and helper text (use Input's own props)",
+      "A Select or Textarea whose built-in error display is enough"
     ],
     "guidelines": [
-      "Always provide a Field.Label for accessibility",
-      "Wrap any form control in Field.Control to connect it to the field context",
-      "Use match prop on Field.Error for granular native validation messages",
-      "Wrap in Form to enable server-side error distribution by field name"
+      "Every Field gets a Field.Label",
+      "Wrap the control in Field.Control so it joins the field context",
+      "Give each Field.Error a match so the message fits the failure",
+      "Nest inside Form to route server errors by field name"
     ],
     "accessibility": [
-      "Label automatically linked to control via aria-labelledby",
-      "Description linked via aria-describedby",
-      "Error messages announced to screen readers",
-      "Supports data-disabled and data-invalid attributes for styling"
+      "Label links to the control via aria-labelledby",
+      "Description links via aria-describedby",
+      "Errors are announced when they appear",
+      "data-disabled and data-invalid are available for styling"
     ]
   },
   "examples": [
     {
       "name": "Single field",
-      "description": "A single field with label, control, and description",
+      "description": "Label, control and description wired together automatically.",
       "code": "<Field name=\"email\">\n  <Field.Label>Email address</Field.Label>\n  <Field.Control>\n    <Input type=\"email\" placeholder=\"jane@example.com\" />\n  </Field.Control>\n  <Field.Description>We will never share your email.</Field.Description>\n</Field>"
     },
     {
       "name": "Two-column layout",
-      "description": "Fields arranged in a two-column grid",
+      "description": "Grid places two short fields side by side and one full-width.",
       "code": "<Grid columns={2} gap=\"md\">\n  <Field name=\"firstName\">\n    <Field.Label>First Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Jane\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"lastName\">\n    <Field.Label>Last Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Doe\" />\n    </Field.Control>\n  </Field>\n  <Grid.Item colSpan=\"full\">\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n    </Field>\n  </Grid.Item>\n</Grid>"
     },
+    {
+      "name": "Invalid",
+      "description": "invalid marks the field failed and reveals Field.Error.",
+      "code": "<Field name=\"username\" invalid>\n  <Field.Label>Username</Field.Label>\n  <Field.Control>\n    <Input value=\"ada lovelace\" error />\n  </Field.Control>\n  <Field.Error match>Usernames cannot contain spaces</Field.Error>\n</Field>"
+    },
     {
       "name": "Custom validation",
-      "description": "Field with custom validate function",
+      "description": "validate runs on change and feeds Field.Error.",
       "code": "<Field\n  name=\"age\"\n  validate={(value) => {\n    const num = Number(value);\n    if (isNaN(num) || num < 18) return 'Must be 18 or older';\n    return null;\n  }}\n  validationMode=\"onChange\"\n  validationDebounceTime={500}\n>\n  <Field.Label>Age</Field.Label>\n  <Field.Control>\n    <Input type=\"number\" placeholder=\"18\" />\n  </Field.Control>\n  <Field.Description>You must be at least 18 years old.</Field.Description>\n  <Field.Error match=\"customError\" />\n</Field>"
     }
   ],
@@ -132,22 +125,11 @@
       "Field.Control: wraps any form component (Input, Textarea, etc.)",
       "Field.Error match: valueMissing|typeMismatch|customError|... - granular errors"
     ],
-    "a11yRules": [
-      "A11Y_FIELD_LABEL",
-      "A11Y_FIELD_ERROR",
-      "A11Y_FIELD_DESCRIPTION"
-    ]
+    "a11yRules": ["A11Y_FIELD_LABEL", "A11Y_FIELD_ERROR", "A11Y_FIELD_DESCRIPTION"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Label",
-      "Control",
-      "Description",
-      "Error",
-      "Validity",
-      "Required"
-    ]
+    "subComponents": ["Label", "Control", "Description", "Error", "Validity", "Required"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Field/Field.module.scss

@@ -1,3 +1,4 @@
+@use "../../tokens/variables" as *;
 @use "../../recipes/field";
 
 .root {
@@ -8,7 +9,7 @@
   @include field.label;
 
   &[data-disabled] {
-    opacity: 0.5;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
 }
 

package/src/components/Field/index.tsx

@@ -140,7 +140,11 @@ function FieldValidity({ children }: FieldValidityProps) {
 
 function FieldRequired({ children = "*", className, ...htmlProps }: FieldRequiredProps) {
   return (
-    <span {...htmlProps} className={[styles.required, className].filter(Boolean).join(" ")} aria-hidden>
+    <span
+      {...htmlProps}
+      className={[styles.required, className].filter(Boolean).join(" ")}
+      aria-hidden
+    >
       {children}
     </span>
   );