@fragments-sdk/ui 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -230,7 +230,7 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@fragments-sdk/cli": "0.10.1"
+    "@fragments-sdk/core": "0.2.0"
   },
   "files": [
     "src",

package/src/blocks/AccountSettings.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Account Settings',

package/src/blocks/ActivityFeed.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Activity Feed',

package/src/blocks/ActivityFeedSkeleton.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Activity Feed Skeleton',

package/src/blocks/BlogEditor.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Blog Editor',

package/src/blocks/ChatInterface.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Chat Interface',

package/src/blocks/ChatMessages.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Chat Messages',

package/src/blocks/CheckoutForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Checkout Form',

package/src/blocks/CommandPalette.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Command Palette',

package/src/blocks/ContactForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Contact Form',

package/src/blocks/DashboardLayout.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Dashboard Layout',

package/src/blocks/DashboardPage.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Dashboard Page',

package/src/blocks/DashboardSkeleton.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Dashboard Skeleton',

package/src/blocks/DataTable.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Data Table',

package/src/blocks/EmptyState.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Empty State',

package/src/blocks/FAQSection.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'FAQ Section',

package/src/blocks/FeatureGrid.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Feature Grid',

package/src/blocks/HeroSection.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Hero Section',

package/src/blocks/LoginForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Login Form',

package/src/blocks/NavigationHeader.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Navigation Header',

package/src/blocks/PaginatedTable.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Paginated Table',

package/src/blocks/PricingComparison.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Pricing Comparison',

package/src/blocks/ProductCard.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Product Card',

package/src/blocks/RegistrationForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Registration Form',

package/src/blocks/SettingsDrawer.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Settings Drawer',

package/src/blocks/SettingsPanel.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Settings Panel',

package/src/blocks/ShoppingCart.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Shopping Cart',

package/src/blocks/StatsCard.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Stats Card',

package/src/blocks/StatsCardSkeleton.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Stats Card Skeleton',

package/src/blocks/TableSkeleton.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Table Skeleton',

package/src/blocks/ThinkingStates.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments-sdk/cli/core';
+import { defineBlock } from '@fragments-sdk/core';
 
 export default defineBlock({
   name: 'Thinking States',

package/src/components/Accordion/Accordion.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Accordion } from '.';
 
 export default defineFragment({
@@ -36,7 +36,6 @@ export default defineFragment({
     ],
     accessibility: [
       'Keyboard navigation with Enter/Space to toggle',
-      'Arrow keys navigate between accordion headers',
       'Uses proper ARIA expanded/controls attributes',
       'Focus is visible on accordion triggers',
     ],
@@ -56,15 +55,15 @@ export default defineFragment({
     },
     value: {
       type: 'union',
-      description: 'Controlled open item(s)',
+      description: 'Controlled open item(s): string in single mode, string[] in multiple mode',
     },
     defaultValue: {
       type: 'union',
-      description: 'Initially open item(s) for uncontrolled usage',
+      description: 'Initially open item(s): string in single mode, string[] in multiple mode',
     },
     onValueChange: {
       type: 'function',
-      description: 'Called when open items change',
+      description: 'Called when open items change (single: string | undefined, multiple: string[])',
     },
     collapsible: {
       type: 'boolean',
@@ -88,9 +87,10 @@ export default defineFragment({
   contract: {
     propsSummary: [
       'type: single|multiple - controls how many items can be open',
-      'value: string|string[] - controlled open items',
-      'defaultValue: string|string[] - initial open items',
+      'value/defaultValue are type-discriminated (single -> string, multiple -> string[])',
+      'onValueChange is type-discriminated by mode (single -> string|undefined, multiple -> string[])',
       'collapsible: boolean - allow all closed in single mode',
+      'Accordion.Trigger forwards button props and defaults type="button"',
     ],
     scenarioTags: [
       'layout.disclosure',

package/src/components/Accordion/Accordion.module.scss

@@ -38,7 +38,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) 0;
+  padding: var(--fui-space-2, $fui-space-2) 0;
   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);
@@ -91,7 +91,7 @@
 }
 
 .contentInner {
-  padding-bottom: var(--fui-padding-item-xs, $fui-padding-item-xs);
+  padding-bottom: var(--fui-space-1, $fui-space-1);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);

package/src/components/Accordion/Accordion.test.tsx

@@ -4,7 +4,7 @@ import { Accordion } from './index';
 
 function renderAccordion(props: Partial<React.ComponentProps<typeof Accordion>> = {}) {
   return render(
-    <Accordion {...props}>
+    <Accordion {...(props as any)}>
       <Accordion.Item value="one">
         <Accordion.Trigger>Item One</Accordion.Trigger>
         <Accordion.Content>Content One</Accordion.Content>
@@ -193,11 +193,14 @@ describe('Accordion', () => {
     expect(screen.getByTestId('content')).toHaveAttribute('aria-label', 'Accordion panel');
   });
 
+  it('uses type="button" for triggers by default to avoid form submission', () => {
+    renderAccordion();
+    const trigger = screen.getByRole('button', { name: /item one/i });
+    expect(trigger).toHaveAttribute('type', 'button');
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderAccordion({ defaultValue: 'one' });
-    await expectNoA11yViolations(container, {
-      // Accordion root role="region" + content panel role="region" triggers this.
-      disabledRules: ['landmark-unique'],
-    });
+    await expectNoA11yViolations(container);
   });
 });

package/src/components/Accordion/index.tsx

@@ -10,16 +10,8 @@ import styles from './Accordion.module.scss';
 
 export type AccordionValue = string | string[];
 
-export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+interface AccordionSharedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
   children: React.ReactNode;
-  /** Allow multiple items to be open at once */
-  type?: 'single' | 'multiple';
-  /** Controlled value - string for single, string[] for multiple */
-  value?: AccordionValue;
-  /** Default value for uncontrolled usage */
-  defaultValue?: AccordionValue;
-  /** Callback when value changes */
-  onValueChange?: (value: AccordionValue | undefined) => void;
   /** Whether items can be fully collapsed (only for type="single") */
   collapsible?: boolean;
   /**
@@ -30,6 +22,30 @@ export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement
   headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
 
+export interface AccordionSingleProps extends AccordionSharedProps {
+  /** Allow multiple items to be open at once */
+  type?: 'single';
+  /** Controlled value for single mode */
+  value?: string;
+  /** Default value for uncontrolled usage */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string | undefined) => void;
+}
+
+export interface AccordionMultipleProps extends AccordionSharedProps {
+  /** Allow multiple items to be open at once */
+  type: 'multiple';
+  /** Controlled values for multiple mode */
+  value?: string[];
+  /** Default values for uncontrolled usage */
+  defaultValue?: string[];
+  /** Callback when value changes */
+  onValueChange?: (value: string[]) => void;
+}
+
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+
 export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /** Unique value for this item */
@@ -38,7 +54,7 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
   disabled?: boolean;
 }
 
-export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
 }
 
@@ -136,8 +152,10 @@ function AccordionRoot({
       setOpenItems(newItems);
     }
 
-    if (onValueChange) {
-      onValueChange(type === 'single' ? newItems[0] : newItems);
+    if (type === 'single') {
+      (onValueChange as AccordionSingleProps['onValueChange'] | undefined)?.(newItems[0]);
+    } else {
+      (onValueChange as AccordionMultipleProps['onValueChange'] | undefined)?.(newItems);
     }
   }, [type, currentOpenItems, collapsible, controlledOpenItems, onValueChange]);
 
@@ -145,7 +163,7 @@ function AccordionRoot({
 
   return (
     <AccordionContext.Provider value={{ type, openItems: currentOpenItems, toggle, collapsible, headingLevel }}>
-      <div {...htmlProps} className={classes} data-orientation="vertical" role="region">
+      <div {...htmlProps} className={classes} data-orientation="vertical">
         {children}
       </div>
     </AccordionContext.Provider>
@@ -186,6 +204,7 @@ function AccordionItem({
 function AccordionTrigger({
   children,
   className,
+  type: buttonType,
   onClick,
   ...htmlProps
 }: AccordionTriggerProps) {
@@ -209,6 +228,7 @@ function AccordionTrigger({
     <HeadingTag className={styles.heading}>
       <BaseCollapsible.Trigger
         {...htmlProps}
+        type={buttonType ?? 'button'}
         id={triggerId}
         className={classes}
         onClick={handleClick}

package/src/components/Alert/Alert.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Alert } from '.';
 
 export default defineFragment({
@@ -33,6 +33,9 @@ export default defineFragment({
       'Use Alert.Title for complex messages; skip titles for brief one-liners',
       'Limit to one action per alert to avoid decision paralysis',
       'Use Alert.Close only for non-critical information',
+      'Alert.Action and Alert.Close render buttons with type="button" by default (safe inside forms)',
+      'Alert.Close composes your onClick handler with built-in dismiss behavior and respects preventDefault()',
+      'Alert sub-components forward DOM props (aria-*, data-*, id, handlers) to their rendered elements',
     ],
     accessibility: [
       'Uses role="alert" for screen reader announcement',
@@ -66,6 +69,7 @@ export default defineFragment({
     propsSummary: [
       'severity: info|success|warning|error - visual severity',
       'Sub-components: Alert.Icon, Alert.Body, Alert.Title, Alert.Content, Alert.Actions, Alert.Action, Alert.Close',
+      'Alert.Action / Alert.Close accept button props and default type="button"',
     ],
     scenarioTags: [
       'feedback.message',

package/src/components/Alert/Alert.module.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-padding-inline-sm, $fui-padding-inline-sm) var(--fui-padding-inline-md, $fui-padding-inline-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   font-family: var(--fui-font-sans, $fui-font-sans);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);

package/src/components/Alert/Alert.test.tsx

@@ -102,6 +102,31 @@ describe('Alert', () => {
     expect(handleAction).toHaveBeenCalledTimes(1);
   });
 
+  it('uses button semantics and forwards props for actions/close', async () => {
+    const user = userEvent.setup();
+    const handleCloseClick = vi.fn((event: MouseEvent) => event.preventDefault());
+
+    render(
+      <form>
+        <Alert>
+          <Alert.Title>Alert</Alert.Title>
+          <Alert.Actions data-testid="actions">
+            <Alert.Action data-testid="retry">Retry</Alert.Action>
+          </Alert.Actions>
+          <Alert.Close data-testid="close" onClick={handleCloseClick} />
+        </Alert>
+      </form>
+    );
+
+    expect(screen.getByTestId('retry')).toHaveAttribute('type', 'button');
+    expect(screen.getByTestId('close')).toHaveAttribute('type', 'button');
+    expect(screen.getByTestId('actions')).toBeInTheDocument();
+
+    await user.click(screen.getByTestId('close'));
+    expect(handleCloseClick).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
   it('defaults to info severity', () => {
     render(
       <Alert>

package/src/components/Alert/index.tsx

@@ -22,40 +22,33 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   severity?: AlertSeverity;
 }
 
-export interface AlertIconProps {
+export interface AlertIconProps extends React.HTMLAttributes<HTMLSpanElement> {
   children?: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertTitleProps {
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertContentProps {
+export interface AlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertActionsProps {
+export interface AlertActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertActionProps {
+export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
   children: React.ReactNode;
-  onClick: () => void;
-  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-export interface AlertCloseProps {
+export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   children?: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertBodyProps {
+export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
 // ============================================
@@ -79,6 +72,17 @@ function useAlertContext() {
   return context;
 }
 
+function composeEventHandlers<E extends { defaultPrevented: boolean }>(
+  userHandler?: (event: E) => void,
+  internalHandler?: (event: E) => void
+) {
+  return (event: E) => {
+    userHandler?.(event);
+    if (event.defaultPrevented) return;
+    internalHandler?.(event);
+  };
+}
+
 // ============================================
 // Severity Icons
 // ============================================
@@ -136,64 +140,79 @@ function AlertRoot({
   );
 }
 
-function AlertIcon({ children, className }: AlertIconProps) {
+function AlertIcon({ children, className, ...htmlProps }: AlertIconProps) {
   const { severity } = useAlertContext();
   const classes = [styles.icon, className].filter(Boolean).join(' ');
 
   return (
-    <span className={classes} aria-hidden="true">
+    <span {...htmlProps} className={classes} aria-hidden="true">
       {children ?? severityIcons[severity]}
     </span>
   );
 }
 
-function AlertBody({ children, className }: AlertBodyProps) {
+function AlertBody({ children, className, ...htmlProps }: AlertBodyProps) {
   const classes = [styles.body, className].filter(Boolean).join(' ');
-  return <div className={classes}>{children}</div>;
+  return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function AlertTitle({ children, className }: AlertTitleProps) {
+function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps) {
   const { titleId } = useAlertContext();
   const classes = [styles.title, className].filter(Boolean).join(' ');
   return (
-    <div id={titleId} className={classes}>
+    <div {...htmlProps} id={htmlProps.id ?? titleId} className={classes}>
       {children}
     </div>
   );
 }
 
-function AlertContent({ children, className }: AlertContentProps) {
+function AlertContent({ children, className, ...htmlProps }: AlertContentProps) {
   const { descId } = useAlertContext();
   const classes = [styles.content, className].filter(Boolean).join(' ');
   return (
-    <div id={descId} className={classes}>
+    <div {...htmlProps} id={htmlProps.id ?? descId} className={classes}>
       {children}
     </div>
   );
 }
 
-function AlertActions({ children, className }: AlertActionsProps) {
+function AlertActions({ children, className, ...htmlProps }: AlertActionsProps) {
   const classes = [styles.actions, className].filter(Boolean).join(' ');
-  return <div className={classes}>{children}</div>;
+  return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function AlertAction({ children, onClick, className }: AlertActionProps) {
+function AlertAction({
+  children,
+  onClick,
+  type = 'button',
+  className,
+  ...htmlProps
+}: AlertActionProps) {
   const classes = [styles.action, className].filter(Boolean).join(' ');
   return (
-    <BaseButton onClick={onClick} className={classes}>
+    <BaseButton {...htmlProps} onClick={onClick} type={type} className={classes}>
       {children}
     </BaseButton>
   );
 }
 
-function AlertClose({ children, className }: AlertCloseProps) {
+function AlertClose({
+  children,
+  className,
+  onClick,
+  type = 'button',
+  'aria-label': ariaLabel = 'Dismiss alert',
+  ...htmlProps
+}: AlertCloseProps) {
   const { dismiss } = useAlertContext();
   const classes = [styles.close, className].filter(Boolean).join(' ');
 
   return (
     <BaseButton
-      onClick={dismiss}
-      aria-label="Dismiss alert"
+      {...htmlProps}
+      onClick={composeEventHandlers(onClick, dismiss)}
+      type={type}
+      aria-label={ariaLabel}
       className={classes}
     >
       {children ?? '\u00D7'}