@usefragments/ui 1.6.0 → 2.0.0

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

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/feedback" as feedback;
 
@@ -6,7 +7,7 @@
   width: 100%;
 
   > * {
-    border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+    border-bottom: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 
     &:last-child {
       border-bottom: none;
@@ -15,12 +16,13 @@
 }
 
 .item[data-disabled] {
-  opacity: 0.5;
+  @include disabled-state;
+
   pointer-events: none;
 }
 
 .heading {
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   font: inherit;
 }
 

package/src/components/Alert/Alert.contract.json

@@ -1,21 +1,16 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Alert",
-  "description": "Contextual feedback messages for user actions or system status. Supports multiple severity levels with optional actions and dismissibility.",
+  "description": "Tells the user what just happened, or what is about to.",
   "category": "feedback",
-  "tags": [
-    "notification",
-    "message",
-    "feedback",
-    "banner",
-    "toast"
-  ],
+  "tags": ["notification", "message", "feedback", "banner", "toast"],
   "status": "stable",
   "sourcePath": "src/components/Alert/index.tsx",
   "exportName": "Alert",
   "propsSummary": [
     "children: node (required)",
-    "severity: info|success|warning|error (default: info)"
+    "tone: info|success|warning|danger (default: info)",
+    "emphasis: tint|surface (default: tint)"
   ],
   "props": {
     "children": {
@@ -23,79 +18,78 @@
       "description": "Alert content - use Alert.Icon, Alert.Body, Alert.Title, Alert.Content, Alert.Actions, Alert.Close sub-components",
       "required": true
     },
-    "severity": {
+    "tone": {
       "type": "enum",
-      "description": "Visual severity level",
+      "description": "Tone; controls colour, icon and live-region role",
       "default": "info",
       "required": false,
-      "values": [
-        "info",
-        "success",
-        "warning",
-        "error"
-      ]
+      "values": ["info", "success", "warning", "danger"]
+    },
+    "emphasis": {
+      "type": "enum",
+      "description": "How much surface the tone claims. `tint` washes the card in the tone colour; `surface` keeps the page background and colours only the hairline and title.",
+      "default": "tint",
+      "required": false,
+      "values": ["tint", "surface"]
     }
   },
   "usage": {
     "when": [
-      "Communicating the result of a user action (success, error)",
-      "Warning about potential issues before they occur",
-      "Providing important contextual information inline",
-      "System status notifications that require attention"
+      "Reporting the outcome of something the user did",
+      "Flagging a risk before the user hits it",
+      "Standing status that must stay on screen"
     ],
     "whenNot": [
-      "Brief status labels (use Badge instead)",
-      "Transient notifications (use Toast/Snackbar)",
-      "Form-field-level errors (use Input error prop)",
-      "Confirmation before destructive actions (use Dialog)"
+      "A one-word status (use Badge)",
+      "A message that should fade away (use Toast)",
+      "An invalid field (use the Input error prop)",
+      "A decision the user must make first (use Dialog)"
     ],
     "guidelines": [
-      "Match severity to the actual importance: info for context, warning for potential issues, error for failures",
-      "Always provide actionable guidance in error alerts",
-      "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"
+      "Match tone to real stakes \u2014 an error that is not an error trains people to ignore you",
+      "Every danger alert says what to do next",
+      "Add Alert.Title only when the message needs two lines",
+      "One action per alert",
+      "Only dismissible when losing the message costs nothing",
+      "Alert.Action and Alert.Close default to type=\"button\", so they are safe inside a form",
+      "Alert.Close runs your onClick and still respects preventDefault()"
     ],
     "accessibility": [
-      "Uses role=\"alert\" for screen reader announcement",
-      "Error and warning alerts are announced immediately by assistive technology",
-      "Alert.Close must have an accessible label",
-      "Color alone must not convey meaning - icons and text reinforce severity"
+      "role=\"alert\" means assistive tech announces it on arrival",
+      "Alert.Close needs its own label",
+      "Icon plus wording carry the tone \u2014 never color alone"
     ]
   },
   "examples": [
     {
       "name": "Info",
-      "description": "Informational context for the user",
-      "code": "import { Alert } from '@/components/Alert';\n\n<Alert severity=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      Your session will expire in 15 minutes. Save your work to avoid losing changes.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
+      "description": "Neutral context \u2014 nothing went wrong, nothing needs doing.",
+      "code": "import { Alert } from '@/components/Alert';\n\n<Alert tone=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      Your session will expire in 15 minutes. Save your work to avoid losing changes.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
     },
     {
       "name": "Success",
-      "description": "Positive confirmation of completed action",
-      "code": "import { Alert } from '@/components/Alert';\n\n<Alert severity=\"success\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Payment processed</Alert.Title>\n    <Alert.Content>\n      Your order #12345 has been confirmed. You will receive a confirmation email shortly.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
+      "description": "Confirms the thing the user just did actually landed.",
+      "code": "import { Alert } from '@/components/Alert';\n\n<Alert tone=\"success\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Payment processed</Alert.Title>\n    <Alert.Content>\n      Your order #12345 has been confirmed. You will receive a confirmation email shortly.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
     },
     {
       "name": "Warning",
-      "description": "Caution about potential issues",
-      "code": "import { Alert } from '@/components/Alert';\n\n<Alert severity=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Storage almost full</Alert.Title>\n    <Alert.Content>\n      You have used 90% of your storage quota. Consider deleting unused files.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
+      "description": "Nothing is broken yet \u2014 act before it is.",
+      "code": "import { Alert } from '@/components/Alert';\n\n<Alert tone=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Storage almost full</Alert.Title>\n    <Alert.Content>\n      You have used 90% of your storage quota. Consider deleting unused files.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
     },
     {
       "name": "Error",
-      "description": "Error state requiring user attention",
-      "code": "import { Alert } from '@/components/Alert';\n\n<Alert severity=\"error\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Upload failed</Alert.Title>\n    <Alert.Content>\n      The file could not be uploaded. Check your connection and try again.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
+      "description": "Something failed; say what to do about it.",
+      "code": "import { Alert } from '@/components/Alert';\n\n<Alert tone=\"danger\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Upload failed</Alert.Title>\n    <Alert.Content>\n      The file could not be uploaded. Check your connection and try again.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"
     },
     {
       "name": "With Action",
-      "description": "Alert with an actionable button",
-      "code": "import { Alert } from '@/components/Alert';\n\n<Alert severity=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Update available</Alert.Title>\n    <Alert.Content>\n      A new version is available with important security fixes.\n    </Alert.Content>\n    <Alert.Actions>\n      <Alert.Action onClick={() => {}}>Update now</Alert.Action>\n    </Alert.Actions>\n  </Alert.Body>\n</Alert>"
+      "description": "One button, one job \u2014 more than one stalls the reader.",
+      "code": "import { Alert } from '@/components/Alert';\n\n<Alert tone=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Update available</Alert.Title>\n    <Alert.Content>\n      A new version is available with important security fixes.\n    </Alert.Content>\n    <Alert.Actions>\n      <Alert.Action onClick={() => {}}>Update now</Alert.Action>\n    </Alert.Actions>\n  </Alert.Body>\n</Alert>"
     },
     {
       "name": "Dismissible",
-      "description": "Alert that can be closed by the user",
-      "code": "import { Alert } from '@/components/Alert';\n\n<Alert severity=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      You can customize your notification preferences in Settings.\n    </Alert.Content>\n  </Alert.Body>\n  <Alert.Close />\n</Alert>"
+      "description": "A close button suits news the user can safely ignore.",
+      "code": "import { Alert } from '@/components/Alert';\n\n<Alert tone=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      You can customize your notification preferences in Settings.\n    </Alert.Content>\n  </Alert.Body>\n  <Alert.Close />\n</Alert>"
     }
   ],
   "relations": [
@@ -117,7 +111,7 @@
   ],
   "contract": {
     "propsSummary": [
-      "severity: info|success|warning|error - visual severity",
+      "tone: info|success|warning|danger - colour, icon and live-region role",
       "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\""
     ],
@@ -130,22 +124,12 @@
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Icon",
-      "Body",
-      "Title",
-      "Content",
-      "Actions",
-      "Action",
-      "Close"
-    ],
-    "requiredChildren": [
-      "Body"
-    ],
+    "subComponents": ["Icon", "Body", "Title", "Content", "Actions", "Action", "Close"],
+    "requiredChildren": ["Body"],
     "commonPatterns": [
-      "<Alert severity=\"info\"><Alert.Icon /><Alert.Body><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>",
-      "<Alert severity=\"warning\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>",
-      "<Alert severity=\"error\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body><Alert.Close /></Alert>"
+      "<Alert tone=\"info\"><Alert.Icon /><Alert.Body><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>",
+      "<Alert tone=\"warning\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>",
+      "<Alert tone=\"danger\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body><Alert.Close /></Alert>"
     ]
   },
   "provenance": {

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

@@ -1,42 +1,70 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/feedback" as feedback;
 
+// The tone publishes its ramp on three channels; the alert paints wash, hairline
+// and ink from them, and `emphasis="surface"` keeps only the hairline + title.
 .alert {
   @include feedback.contextual;
+  @include high-contrast-outline;
 
+  --_alert-tint: var(--fui-color-info-bg, #{$fui-color-info-bg});
+  --_alert-ink: var(--fui-color-info-text, #{$fui-color-info-text});
+  --_alert-line: var(--fui-color-info-border, #{$fui-color-info-border});
+
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--_alert-line, var(--fui-color-info-border, #{$fui-color-info-border}));
   border-radius: var(--fui-card-radius, var(--fui-radius-lg, $fui-radius-lg));
+  background: var(--_alert-tint, var(--fui-color-info-bg, #{$fui-color-info-bg}));
+  color: var(--_alert-ink, var(--fui-color-info-text, #{$fui-color-info-text}));
 }
 
 .alert:has(.title) {
   align-items: flex-start;
 }
 
-.info {
-  background: var(--fui-color-info-bg, $fui-color-info-bg);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-color-info-border, $fui-color-info-border);
-  color: var(--fui-color-info-text, $fui-color-info-text);
+@mixin _tone($tone, $bg, $text, $border) {
+  --_alert-tint: var(--fui-color-#{$tone}-bg, #{$bg});
+  --_alert-ink: var(--fui-color-#{$tone}-text, #{$text});
+  --_alert-line: var(--fui-color-#{$tone}-border, #{$border});
+}
+
+.toneInfo {
+  @include _tone("info", $fui-color-info-bg, $fui-color-info-text, $fui-color-info-border);
 }
 
-.success {
-  background: var(--fui-color-success-bg, $fui-color-success-bg);
-  border: var(--fui-stroke-hairline, 1px) solid
-    var(--fui-color-success-border, $fui-color-success-border);
-  color: var(--fui-color-success-text, $fui-color-success-text);
+.toneSuccess {
+  @include _tone(
+    "success",
+    $fui-color-success-bg,
+    $fui-color-success-text,
+    $fui-color-success-border
+  );
 }
 
-.warning {
-  background: var(--fui-color-warning-bg, $fui-color-warning-bg);
-  border: var(--fui-stroke-hairline, 1px) solid
-    var(--fui-color-warning-border, $fui-color-warning-border);
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
+.toneWarning {
+  @include _tone(
+    "warning",
+    $fui-color-warning-bg,
+    $fui-color-warning-text,
+    $fui-color-warning-border
+  );
 }
 
-.error {
-  background: var(--fui-color-danger-bg, $fui-color-danger-bg);
-  border: var(--fui-stroke-hairline, 1px) solid
-    var(--fui-color-danger-border, $fui-color-danger-border);
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+.toneDanger {
+  @include _tone("danger", $fui-color-danger-bg, $fui-color-danger-text, $fui-color-danger-border);
+}
+
+// `emphasis="surface"`: the card keeps the page's own surface and spends the
+// tone only on the hairline and the title.
+.surface {
+  background: var(--fui-bg-secondary, $fui-bg-secondary);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  .title {
+    color: var(--_alert-ink, var(--fui-color-info-text, #{$fui-color-info-text}));
+  }
 }
 
 .icon {
@@ -45,35 +73,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  border-radius: var(--fui-radius-full, #{$fui-radius-full});
+  background-color: var(--_alert-ink, var(--fui-color-info-text, #{$fui-color-info-text}));
   color: var(--fui-text-inverse, $fui-text-inverse);
   font: inherit;
 }
 
 .alert:has(.title) .icon {
-  margin-block-start: var(--fui-stroke-hairline, 1px);
-}
-
-.info .icon {
-  background-color: var(--fui-color-info-text, $fui-color-info-text);
-}
-
-.success .icon {
-  background-color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
-.warning .icon {
-  background-color: var(--fui-color-warning-text, $fui-color-warning-text);
-}
-
-.error .icon {
-  background-color: var(--fui-color-danger-text, $fui-color-danger-text);
+  margin-block-start: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
 .body {
   display: grid;
   flex: 1;
-  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)}));
   min-inline-size: 0;
 }
 
@@ -83,14 +96,12 @@
 
 .content {
   @include feedback.body;
-
-  opacity: 0.9;
 }
 
 .actions {
   display: flex;
   align-items: 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)}));
 }
 
 .close {
@@ -99,13 +110,12 @@
   @include feedback.close;
 
   margin-inline-start: auto;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  color: inherit;
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
+  color: color-mix(in srgb, currentColor 60%, transparent);
   line-height: 1;
-  opacity: 0.6;
 
   &:hover {
-    opacity: 1;
+    color: currentColor;
   }
 }
 
@@ -113,12 +123,12 @@
   @include button-reset;
   @include feedback.compact-action;
 
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
   color: inherit;
   text-decoration: underline;
 
   &:hover {
-    opacity: 0.8;
+    color: color-mix(in srgb, currentColor 80%, transparent);
   }
 
   &:focus-visible {

package/src/components/Alert/index.tsx

@@ -1,25 +1,31 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Button as BaseButton } from '@base-ui/react/button';
-import styles from './Alert.module.scss';
+import * as React from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+import styles from "./Alert.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
+export type AlertTone = "info" | "success" | "warning" | "danger";
 
 /**
- * Alert for contextual feedback messages (info, success, warning, error).
+ * Alert for contextual feedback messages (info, success, warning, danger).
  * @see https://usefragments.com/components/alert
  */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Alert severity level. Controls color and default icon.
+  /** Tone. Controls color and default icon.
    * @default "info"
-   * @see https://usefragments.com/components/alert#variants */
-  severity?: AlertSeverity;
+   * @see https://usefragments.com/components/alert#tones */
+  tone?: AlertTone;
+  /** How much surface the tone claims. `tint` washes the whole card in the
+   * tone colour. `surface` keeps the card on the page's own background and
+   * spends the colour only on the hairline and the title — for a standing
+   * failure that owns the view, where a full wash would read as a red page.
+   * @default "tint" */
+  emphasis?: "tint" | "surface";
 }
 
 export interface AlertIconProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -38,12 +44,18 @@ export interface AlertActionsProps extends React.HTMLAttributes<HTMLDivElement>
   children: React.ReactNode;
 }
 
-export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+export interface AlertActionProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onClick"
+> {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface AlertCloseProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
   children?: React.ReactNode;
 }
 
@@ -56,7 +68,7 @@ export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 // ============================================
 
 interface AlertContextValue {
-  severity: AlertSeverity;
+  tone: AlertTone;
   titleId: string;
   descId: string;
   dismiss: () => void;
@@ -67,7 +79,7 @@ const AlertContext = React.createContext<AlertContextValue | null>(null);
 function useAlertContext() {
   const context = React.useContext(AlertContext);
   if (!context) {
-    throw new Error('Alert compound components must be used within an Alert');
+    throw new Error("Alert compound components must be used within an Alert");
   }
   return context;
 }
@@ -84,14 +96,21 @@ function composeEventHandlers<E extends { defaultPrevented: boolean }>(
 }
 
 // ============================================
-// Severity Icons
+// Tone Icons
 // ============================================
 
-const severityIcons: Record<AlertSeverity, string> = {
-  info: 'i',
-  success: '\u2713',
-  warning: '!',
-  error: '\u2717',
+const toneIcons: Record<AlertTone, string> = {
+  info: "i",
+  success: "\u2713",
+  warning: "!",
+  danger: "\u2717",
+};
+
+const TONE_CLASS: Record<AlertTone, string> = {
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger,
 };
 
 // ============================================
@@ -100,7 +119,8 @@ const severityIcons: Record<AlertSeverity, string> = {
 
 function AlertRoot({
   children,
-  severity = 'info',
+  tone = "info",
+  emphasis = "tint",
   className,
   ...htmlProps
 }: AlertProps) {
@@ -114,13 +134,18 @@ function AlertRoot({
 
   if (dismissed) return null;
 
-  const classes = [styles.alert, styles[severity], className]
+  const classes = [
+    styles.alert,
+    TONE_CLASS[tone],
+    emphasis === "surface" ? styles.surface : null,
+    className,
+  ]
     .filter(Boolean)
-    .join(' ');
-  const role = severity === 'warning' || severity === 'error' ? 'alert' : 'status';
+    .join(" ");
+  const role = tone === "warning" || tone === "danger" ? "alert" : "status";
 
   const contextValue: AlertContextValue = {
-    severity,
+    tone,
     titleId,
     descId,
     dismiss,
@@ -142,24 +167,28 @@ function AlertRoot({
 }
 
 function AlertIcon({ children, className, ...htmlProps }: AlertIconProps) {
-  const { severity } = useAlertContext();
-  const classes = [styles.icon, className].filter(Boolean).join(' ');
+  const { tone } = useAlertContext();
+  const classes = [styles.icon, className].filter(Boolean).join(" ");
 
   return (
     <span {...htmlProps} className={classes} aria-hidden="true">
-      {children ?? severityIcons[severity]}
+      {children ?? toneIcons[tone]}
     </span>
   );
 }
 
 function AlertBody({ children, className, ...htmlProps }: AlertBodyProps) {
-  const classes = [styles.body, className].filter(Boolean).join(' ');
-  return <div {...htmlProps} className={classes}>{children}</div>;
+  const classes = [styles.body, className].filter(Boolean).join(" ");
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
 }
 
 function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps) {
   const { titleId } = useAlertContext();
-  const classes = [styles.title, className].filter(Boolean).join(' ');
+  const classes = [styles.title, className].filter(Boolean).join(" ");
   return (
     <div {...htmlProps} id={htmlProps.id ?? titleId} className={classes}>
       {children}
@@ -169,7 +198,7 @@ function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps) {
 
 function AlertContent({ children, className, ...htmlProps }: AlertContentProps) {
   const { descId } = useAlertContext();
-  const classes = [styles.content, className].filter(Boolean).join(' ');
+  const classes = [styles.content, className].filter(Boolean).join(" ");
   return (
     <div {...htmlProps} id={htmlProps.id ?? descId} className={classes}>
       {children}
@@ -178,18 +207,22 @@ function AlertContent({ children, className, ...htmlProps }: AlertContentProps)
 }
 
 function AlertActions({ children, className, ...htmlProps }: AlertActionsProps) {
-  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>
+  );
 }
 
 function AlertAction({
   children,
   onClick,
-  type = 'button',
+  type = "button",
   className,
   ...htmlProps
 }: AlertActionProps) {
-  const classes = [styles.action, className].filter(Boolean).join(' ');
+  const classes = [styles.action, className].filter(Boolean).join(" ");
   return (
     <BaseButton {...htmlProps} onClick={onClick} type={type} className={classes}>
       {children}
@@ -201,12 +234,12 @@ function AlertClose({
   children,
   className,
   onClick,
-  type = 'button',
-  'aria-label': ariaLabel = 'Dismiss alert',
+  type = "button",
+  "aria-label": ariaLabel = "Dismiss alert",
   ...htmlProps
 }: AlertCloseProps) {
   const { dismiss } = useAlertContext();
-  const classes = [styles.close, className].filter(Boolean).join(' ');
+  const classes = [styles.close, className].filter(Boolean).join(" ");
 
   return (
     <BaseButton
@@ -216,7 +249,7 @@ function AlertClose({
       aria-label={ariaLabel}
       className={classes}
     >
-      {children ?? '\u00D7'}
+      {children ?? "\u00D7"}
     </BaseButton>
   );
 }