@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/package.json

@@ -1,8 +1,157 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.1-beta",
+  "version": "0.0.2",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brijbyte/agentic-ui.git",
+    "directory": "packages/agentic-ui"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/index.css",
+    "./layer-order": "./dist/layer-order.css",
+    "./tokens": "./dist/tokens.css",
+    "./reset": "./dist/reset.css",
+    "./tailwind-theme": "./dist/tailwind-theme.css",
+    "./alert-dialog": {
+      "import": "./dist/alert-dialog/index.js",
+      "types": "./dist/alert-dialog/index.d.ts"
+    },
+    "./context-menu": {
+      "import": "./dist/context-menu/index.js",
+      "types": "./dist/context-menu/index.d.ts"
+    },
+    "./accordion": {
+      "import": "./dist/accordion/index.js",
+      "types": "./dist/accordion/index.d.ts"
+    },
+    "./alert-dialog.css": "./dist/alert-dialog/alert-dialog.css",
+    "./context-menu.css": "./dist/context-menu/context-menu.css",
+    "./accordion.css": "./dist/accordion/accordion.css",
+    "./badge": {
+      "import": "./dist/badge/index.js",
+      "types": "./dist/badge/index.d.ts"
+    },
+    "./badge.css": "./dist/badge/badge.css",
+    "./button": {
+      "import": "./dist/button/index.js",
+      "types": "./dist/button/index.d.ts"
+    },
+    "./button.css": "./dist/button/button.css",
+    "./card": {
+      "import": "./dist/card/index.js",
+      "types": "./dist/card/index.d.ts"
+    },
+    "./card.css": "./dist/card/card.css",
+    "./checkbox": {
+      "import": "./dist/checkbox/index.js",
+      "types": "./dist/checkbox/index.d.ts"
+    },
+    "./checkbox.css": "./dist/checkbox/checkbox.css",
+    "./collapsible": {
+      "import": "./dist/collapsible/index.js",
+      "types": "./dist/collapsible/index.d.ts"
+    },
+    "./collapsible.css": "./dist/collapsible/collapsible.css",
+    "./dialog": {
+      "import": "./dist/dialog/index.js",
+      "types": "./dist/dialog/index.d.ts"
+    },
+    "./dialog.css": "./dist/dialog/dialog.css",
+    "./drawer": {
+      "import": "./dist/drawer/index.js",
+      "types": "./dist/drawer/index.d.ts"
+    },
+    "./drawer.css": "./dist/drawer/drawer.css",
+    "./input": {
+      "import": "./dist/input/index.js",
+      "types": "./dist/input/index.d.ts"
+    },
+    "./input.css": "./dist/input/input.css",
+    "./menu": {
+      "import": "./dist/menu/index.js",
+      "types": "./dist/menu/index.d.ts"
+    },
+    "./menu.css": "./dist/menu/menu.css",
+    "./number-field": {
+      "import": "./dist/number-field/index.js",
+      "types": "./dist/number-field/index.d.ts"
+    },
+    "./number-field.css": "./dist/number-field/number-field.css",
+    "./progress": {
+      "import": "./dist/progress/index.js",
+      "types": "./dist/progress/index.d.ts"
+    },
+    "./progress.css": "./dist/progress/progress.css",
+    "./select": {
+      "import": "./dist/select/index.js",
+      "types": "./dist/select/index.d.ts"
+    },
+    "./select.css": "./dist/select/select.css",
+    "./separator": {
+      "import": "./dist/separator/index.js",
+      "types": "./dist/separator/index.d.ts"
+    },
+    "./slider": {
+      "import": "./dist/slider/index.js",
+      "types": "./dist/slider/index.d.ts"
+    },
+    "./separator.css": "./dist/separator/separator.css",
+    "./slider.css": "./dist/slider/slider.css",
+    "./switch": {
+      "import": "./dist/switch/index.js",
+      "types": "./dist/switch/index.d.ts"
+    },
+    "./switch.css": "./dist/switch/switch.css",
+    "./tabs": {
+      "import": "./dist/tabs/index.js",
+      "types": "./dist/tabs/index.d.ts"
+    },
+    "./tabs.css": "./dist/tabs/tabs.css",
+    "./toast": {
+      "import": "./dist/toast/index.js",
+      "types": "./dist/toast/index.d.ts"
+    },
+    "./toast.css": "./dist/toast/toast.css",
+    "./tooltip": {
+      "import": "./dist/tooltip/index.js",
+      "types": "./dist/tooltip/index.d.ts"
+    },
+    "./tooltip.css": "./dist/tooltip/tooltip.css"
+  },
   "publishConfig": {
-    "tag": "beta",
-    "access": "public"
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsgo --noEmit"
   }
-}
+}

package/src/accordion/accordion.module.css

@@ -0,0 +1,75 @@
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+  .item {
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
+  }
+  .item:last-child {
+    border-bottom: none;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+  }
+  .trigger {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    text-align: left;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    user-select: none;
+  }
+  .trigger:hover {
+    background-color: var(--color-hover);
+  }
+  .trigger:focus-visible {
+    box-shadow: inset var(--shadow-focus);
+  }
+  .trigger[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+  .trigger-icon {
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+    transition: transform var(--duration-normal) var(--easing-standard);
+  }
+  .trigger[data-panel-open] .trigger-icon {
+    transform: rotate(180deg);
+  }
+  .panel {
+    height: var(--accordion-panel-height);
+    overflow: hidden;
+    transition: height var(--duration-normal) var(--easing-standard);
+  }
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    height: 0;
+  }
+  .panel-content {
+    padding: var(--space-2) var(--space-4) var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+}

package/src/accordion/accordion.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import styles from "./accordion.module.css";
+
+export interface AccordionItem {
+  value: string;
+  header: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  multiple?: boolean;
+  defaultValue?: string[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  className?: string;
+}
+
+function ChevronIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {
+  return (
+    <BaseAccordion.Root className={`${styles.root} ${className ?? ""}`} multiple={multiple} {...props}>
+      {items.map((item) => (
+        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>
+          <BaseAccordion.Header className={styles.header}>
+            <BaseAccordion.Trigger className={styles.trigger}>
+              {item.header}
+              <span className={styles["trigger-icon"]}>
+                <ChevronIcon />
+              </span>
+            </BaseAccordion.Trigger>
+          </BaseAccordion.Header>
+          <BaseAccordion.Panel className={styles.panel}>
+            <div className={styles["panel-content"]}>{item.content}</div>
+          </BaseAccordion.Panel>
+        </BaseAccordion.Item>
+      ))}
+    </BaseAccordion.Root>
+  );
+}
+export { styles as AccordionStyles };

package/src/accordion/index.ts

@@ -0,0 +1,6 @@
+export { Accordion } from "./accordion";
+export type { AccordionProps, AccordionItem } from "./accordion";
+
+export { AccordionItem as AccordionItemPart, AccordionHeader, AccordionTrigger, AccordionPanel } from "./parts";
+export type { AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps } from "./parts";
+export { AccordionStyles } from "./accordion";

package/src/accordion/parts.tsx

@@ -0,0 +1,68 @@
+/**
+ * Styled primitives for Accordion.
+ *
+ * @example
+ * ```tsx
+ * import { Accordion } from '@base-ui/react/accordion';
+ * import { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@brijbyte/agentic-ui/accordion';
+ *
+ * <Accordion.Root defaultValue={['a']}>
+ *   <AccordionItem value="a">
+ *     <AccordionHeader>
+ *       <AccordionTrigger>Section A</AccordionTrigger>
+ *     </AccordionHeader>
+ *     <AccordionPanel>Content A</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import styles from "./accordion.module.css";
+
+type BaseItemProps = ComponentPropsWithoutRef<typeof BaseAccordion.Item>;
+type BaseHeaderProps = ComponentPropsWithoutRef<typeof BaseAccordion.Header>;
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>;
+type BasePanelProps = ComponentPropsWithoutRef<typeof BaseAccordion.Panel>;
+
+export interface AccordionItemProps extends Omit<BaseItemProps, "className"> {
+  className?: string;
+}
+export interface AccordionHeaderProps extends Omit<BaseHeaderProps, "className"> {
+  className?: string;
+}
+export interface AccordionTriggerProps extends Omit<BaseTriggerProps, "className"> {
+  className?: string;
+}
+export interface AccordionPanelProps extends Omit<BasePanelProps, "className"> {
+  className?: string;
+}
+
+export const AccordionItem = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItem(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAccordion.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+});
+
+export const AccordionHeader = forwardRef<ComponentRef<typeof BaseAccordion.Header>, AccordionHeaderProps>(function AccordionHeader(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAccordion.Header ref={ref} className={`${styles.header} ${className ?? ""}`} {...props} />;
+});
+
+export const AccordionTrigger = forwardRef<ComponentRef<typeof BaseAccordion.Trigger>, AccordionTriggerProps>(function AccordionTrigger(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAccordion.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...props} />;
+});
+
+export const AccordionPanel = forwardRef<ComponentRef<typeof BaseAccordion.Panel>, AccordionPanelProps>(function AccordionPanel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAccordion.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+});

package/src/alert-dialog/alert-dialog.module.css

@@ -0,0 +1,91 @@
+@layer components {
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    min-height: 100dvh;
+    background-color: rgba(0, 0, 0, 0.48);
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  .popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--z-modal);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-5) var(--space-6);
+    width: min(380px, calc(100vw - var(--space-8)));
+    outline: none;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    transition:
+      opacity 200ms var(--easing-ease-out),
+      transform 200ms var(--easing-spring);
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+    transition:
+      opacity 150ms var(--easing-ease-in),
+      transform 150ms var(--easing-ease-in);
+  }
+
+  /* ─── Header ──────────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+  }
+
+  .icon {
+    margin-bottom: var(--space-1);
+  }
+
+  .title {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+  }
+
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  /* ─── Actions ─────────────────────────────────────────────────── */
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+}

package/src/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode, ReactElement } from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Button } from "../button/button";
+import styles from "./alert-dialog.module.css";
+
+export interface AlertAction {
+  label: ReactNode;
+  /** Called when the action button is clicked. The dialog closes automatically. */
+  onAction?: () => void;
+  /** Renders as a filled accent button — use for the primary confirm action. */
+  primary?: boolean;
+  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */
+  destructive?: boolean;
+}
+
+export interface AlertDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  trigger?: ReactElement;
+  /** Optional icon shown above the title. */
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /**
+   * Action buttons rendered right-aligned.
+   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).
+   * Use `destructive: true` to apply destructive tone to the confirm action.
+   */
+  actions: AlertAction[];
+  className?: string;
+}
+
+export function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {
+  return (
+    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>
+      {trigger && <BaseAlertDialog.Trigger render={trigger} />}
+      <BaseAlertDialog.Portal>
+        <BaseAlertDialog.Backdrop className={styles.backdrop} />
+        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? ""}`}>
+          <div className={styles.header}>
+            {icon && <div className={styles.icon}>{icon}</div>}
+            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>
+            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}
+          </div>
+          <div className={styles.actions}>
+            {actions.map((action, i) => (
+              <BaseAlertDialog.Close
+                key={i}
+                render={
+                  <Button
+                    variant={action.primary ? "solid" : "outline"}
+                    tone={action.destructive ? "destructive" : "primary"}
+                    size="sm"
+                    onClick={action.onAction}
+                  />
+                }
+              >
+                {action.label}
+              </BaseAlertDialog.Close>
+            ))}
+          </div>
+        </BaseAlertDialog.Popup>
+      </BaseAlertDialog.Portal>
+    </BaseAlertDialog.Root>
+  );
+}
+
+export { styles as AlertDialogStyles };

package/src/alert-dialog/index.ts

@@ -0,0 +1,7 @@
+export { AlertDialog } from "./alert-dialog";
+export type { AlertDialogProps, AlertAction } from "./alert-dialog";
+
+export { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from "./parts";
+export type { AlertDialogBackdropProps, AlertDialogPopupProps, AlertDialogTitleProps, AlertDialogDescriptionProps } from "./parts";
+
+export { AlertDialogStyles } from "./alert-dialog";

package/src/alert-dialog/parts.tsx

@@ -0,0 +1,73 @@
+/**
+ * Styled primitives for AlertDialog.
+ *
+ * @example
+ * ```tsx
+ * import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+ * import { Button } from '@brijbyte/agentic-ui/button';
+ * import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';
+ *
+ * <BaseAlertDialog.Root>
+ *   <BaseAlertDialog.Trigger render={<button>Open</button>} />
+ *   <BaseAlertDialog.Portal>
+ *     <AlertDialogBackdrop />
+ *     <AlertDialogPopup>
+ *       <AlertDialogTitle>Delete account?</AlertDialogTitle>
+ *       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+ *       <div>
+ *         <BaseAlertDialog.Close render={<Button variant="soft" tone="destructive" size="sm" />}>Delete</BaseAlertDialog.Close>
+ *         <BaseAlertDialog.Close render={<Button variant="outline" size="sm" />}>Cancel</BaseAlertDialog.Close>
+ *       </div>
+ *     </AlertDialogPopup>
+ *   </BaseAlertDialog.Portal>
+ * </BaseAlertDialog.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import styles from "./alert-dialog.module.css";
+
+type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>;
+
+export interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
+  className?: string;
+}
+export interface AlertDialogPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface AlertDialogTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+
+export const AlertDialogBackdrop = forwardRef<ComponentRef<typeof BaseAlertDialog.Backdrop>, AlertDialogBackdropProps>(
+  function AlertDialogBackdrop({ className, ...props }, ref) {
+    return <BaseAlertDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const AlertDialogPopup = forwardRef<ComponentRef<typeof BaseAlertDialog.Popup>, AlertDialogPopupProps>(function AlertDialogPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAlertDialog.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const AlertDialogTitle = forwardRef<ComponentRef<typeof BaseAlertDialog.Title>, AlertDialogTitleProps>(function AlertDialogTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAlertDialog.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const AlertDialogDescription = forwardRef<ComponentRef<typeof BaseAlertDialog.Description>, AlertDialogDescriptionProps>(
+  function AlertDialogDescription({ className, ...props }, ref) {
+    return <BaseAlertDialog.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  },
+);

package/src/badge/badge.module.css

@@ -0,0 +1,60 @@
+@layer components {
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: 1;
+    border-radius: var(--radius-sm);
+    border: var(--border-width-base) solid transparent;
+    padding: 2px var(--space-1-5);
+    white-space: nowrap;
+  }
+  /* Variants */
+  .variant-default {
+    background-color: var(--color-surface-3);
+    border-color: var(--color-line);
+    color: var(--color-secondary);
+  }
+  .variant-solid {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+  .variant-soft {
+    background-color: var(--color-accent-tint);
+    border-color: var(--color-accent-tint-hover);
+    color: var(--color-accent);
+  }
+  .variant-success {
+    background-color: var(--color-success-bg);
+    border-color: var(--color-success-border);
+    color: var(--color-success-text);
+  }
+  .variant-warning {
+    background-color: var(--color-warning-bg);
+    border-color: var(--color-warning-border);
+    color: var(--color-warning-text);
+  }
+  .variant-error {
+    background-color: var(--color-error-bg);
+    border-color: var(--color-error-border);
+    color: var(--color-error-text);
+  }
+  .variant-info {
+    background-color: var(--color-info-bg);
+    border-color: var(--color-info-border);
+    color: var(--color-info-text);
+  }
+  /* Dot indicator */
+  .dot {
+    width: 5px;
+    height: 5px;
+    border-radius: var(--radius-full);
+    background-color: currentColor;
+    flex-shrink: 0;
+  }
+}