@godxjp/ui 18.4.0 → 18.6.0

package/dist/components/layout/sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronDown } from "lucide-react";
@@ -23,72 +23,91 @@ function SidebarSection({
     /* @__PURE__ */ jsx("div", { className: "sb-nav", children })
   ] });
 }
+function SidebarIcon({ icon: Icon }) {
+  return /* @__PURE__ */ jsx("span", { className: "sb-icon", children: Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) : null });
+}
+function SidebarRowContent({
+  item,
+  sub = false,
+  iconOnly = false
+}) {
+  if (iconOnly) return /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon });
+  const showBadge = item.badge !== void 0 && item.badge !== "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !sub ? /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+    showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+  ] });
+}
 function SidebarItem({
   item,
   active = false,
   sub = false,
   onActivate,
+  linkComponent: LinkComponent,
+  asChild = false,
   renderItem,
   children,
   ...props
 }) {
-  const Icon = item.icon;
-  const showBadge = item.badge !== void 0 && item.badge !== "";
   const disabled = item.disabled || props.disabled;
-  const custom = children ?? (renderItem ? renderItem(item) : void 0);
   const rowClass = cn("sb-nav-item", sub && "sb-nav-item--sub");
   const stateProps = {
     className: rowClass,
     "data-active": active ? "true" : void 0,
-    "aria-current": active ? "page" : void 0
+    "aria-current": active ? "page" : void 0,
+    "aria-disabled": disabled ? true : void 0
+  };
+  const content = /* @__PURE__ */ jsx(SidebarRowContent, { item, sub });
+  const activate = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onActivate?.(item.id);
   };
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(Slot, { ...stateProps, onClick: activate, children: React.cloneElement(children, void 0, content) });
+  }
+  const custom = children ?? (renderItem ? renderItem(item, { ...stateProps, children: content }) : void 0);
   if (custom !== void 0) {
-    return /* @__PURE__ */ jsx(Slot, { ...stateProps, "aria-disabled": disabled || void 0, children: custom });
+    return /* @__PURE__ */ jsx(Slot, { ...stateProps, children: custom });
+  }
+  if (LinkComponent && item.href) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        ...stateProps,
+        href: disabled ? void 0 : item.href,
+        "aria-disabled": disabled || void 0,
+        onClick: activate,
+        children: content
+      }
+    );
   }
   if (item.href) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "a",
       {
         ...props,
         href: disabled ? void 0 : item.href,
         ...stateProps,
         "aria-disabled": disabled || void 0,
-        onClick: (event) => {
-          if (disabled) event.preventDefault();
-          else onActivate?.(item.id);
-        },
-        children: [
-          !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
-          /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
-          showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
-        ]
+        onClick: activate,
+        children: content
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      ...stateProps,
-      "aria-disabled": disabled,
-      ...props,
-      onClick: () => {
-        if (disabled) return;
-        onActivate?.(item.id);
-      },
-      children: [
-        !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
-        /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
-        showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
-      ]
-    }
+  return (
+    // ui-audit-disable-next-line no-raw-button — raw <button> is the correct element here.
+    /* @__PURE__ */ jsx("button", { type: "button", ...stateProps, "aria-disabled": disabled, ...props, onClick: activate, children: content })
   );
 }
 function isItemActive(item, activeId) {
   if (item.id === activeId) return true;
   return (item.children ?? []).some((child) => isItemActive(child, activeId));
 }
-function NavLeaf({ item, activeId, onSelect, sub = false, renderItem }) {
+function NavLeaf({ item, activeId, onSelect, sub = false, linkComponent, renderItem }) {
   const active = item.id === activeId;
   return /* @__PURE__ */ jsx(
     SidebarItem,
@@ -97,6 +116,7 @@ function NavLeaf({ item, activeId, onSelect, sub = false, renderItem }) {
       active,
       onActivate: onSelect,
       sub,
+      linkComponent,
       renderItem
     }
   );
@@ -105,6 +125,7 @@ function NavLeafsInGroup({
   children,
   activeId,
   onSelect,
+  linkComponent,
   renderItem
 }) {
   return children.map((child) => /* @__PURE__ */ jsx(
@@ -114,13 +135,13 @@ function NavLeafsInGroup({
       activeId,
       onSelect,
       sub: true,
+      linkComponent,
       renderItem
     },
     child.id
   ));
 }
-function NavGroup({ item, activeId, onSelect, renderItem }) {
-  const Icon = item.icon;
+function NavGroup({ item, activeId, onSelect, linkComponent, renderItem }) {
   const active = isItemActive(item, activeId);
   const children = item.children ?? [];
   const [open, setOpen] = React.useState(active);
@@ -134,18 +155,25 @@ function NavGroup({ item, activeId, onSelect, renderItem }) {
         className: "sb-nav-item sb-nav-group-trigger",
         "data-active": active ? "true" : void 0,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+          /* @__PURE__ */ jsx(SidebarRowContent, { item }),
           /* @__PURE__ */ jsx(ChevronDown, { className: "sb-chevron", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "sb-nav-sub", children: children.length > 0 ? /* @__PURE__ */ jsx(NavLeafsInGroup, { activeId, onSelect, renderItem, children }) : null }) })
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "sb-nav-sub", children: children.length > 0 ? /* @__PURE__ */ jsx(
+      NavLeafsInGroup,
+      {
+        activeId,
+        onSelect,
+        linkComponent,
+        renderItem,
+        children
+      }
+    ) : null }) })
   ] });
 }
-function CollapsedRow({ item, activeId, onSelect }) {
+function CollapsedRow({ item, activeId, onSelect, linkComponent: LinkComponent }) {
   const [menuOpen, setMenuOpen] = React.useState(false);
-  const Icon = item.icon;
   const active = isItemActive(item, activeId);
   const children = item.children ?? [];
   const hasChildren = children.length > 0;
@@ -163,12 +191,31 @@ function CollapsedRow({ item, activeId, onSelect }) {
       onClick: () => {
         if (!hasChildren && !item.disabled) onSelect?.(item.id);
       },
-      children: /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) })
+      children: /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon })
     }
   );
+  const iconLink = LinkComponent && !hasChildren && item.href ? /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      className: "sb-nav-item",
+      "data-active": active ? "true" : void 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": item.disabled || void 0,
+      "aria-label": item.label,
+      href: item.disabled ? void 0 : item.href,
+      onClick: (event) => {
+        if (item.disabled) {
+          event.preventDefault();
+          return;
+        }
+        onSelect?.(item.id);
+      },
+      children: /* @__PURE__ */ jsx(SidebarRowContent, { item, iconOnly: true })
+    }
+  ) : null;
   if (!hasChildren) {
     return /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: iconButton }),
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: iconLink ?? iconButton }),
       /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: item.label })
     ] });
   }
@@ -187,27 +234,45 @@ function CollapsedRow({ item, activeId, onSelect }) {
         className: "sb-flyout-pop",
         children: [
           /* @__PURE__ */ jsx("div", { className: "sb-flyout-title", children: item.label }),
-          children.map((child) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
+          children.map((child) => {
+            const childActive = child.id === activeId;
+            const select = (event) => {
+              setMenuOpen(false);
+              if (child.disabled) {
+                event.preventDefault();
+                return;
+              }
+              onSelect?.(child.id);
+            };
+            const flyoutState = {
               role: "menuitem",
               className: "sb-nav-item",
-              "data-active": child.id === activeId ? "true" : void 0,
-              "aria-current": child.id === activeId ? "page" : void 0,
-              onClick: () => {
-                setMenuOpen(false);
-                if (!child.disabled) onSelect?.(child.id);
+              "data-active": childActive ? "true" : void 0,
+              "aria-current": childActive ? "page" : void 0,
+              "aria-disabled": child.disabled || void 0
+            };
+            return LinkComponent && child.href ? /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                ...flyoutState,
+                href: child.disabled ? void 0 : child.href,
+                onClick: select,
+                children: /* @__PURE__ */ jsx(SidebarRowContent, { item: child, sub: true })
               },
-              children: /* @__PURE__ */ jsx("span", { className: "sb-label", children: child.label })
-            },
-            child.id
-          ))
+              child.id
+            ) : (
+              // A collapsed-rail flyout entry is a `menuitem`-styled nav row owning `.sb-nav-item`
+              // composition, not a <Button> — same contract as the leaf row above.
+              // ui-audit-disable-next-line no-raw-button
+              /* @__PURE__ */ jsx("button", { type: "button", ...flyoutState, onClick: select, children: /* @__PURE__ */ jsx(SidebarRowContent, { item: child, sub: true }) }, child.id)
+            );
+          })
         ]
       }
     )
   ] });
 }
+import { createSidebarLink } from "./sidebar-link.js";
 function Sidebar({
   ariaLabel: ariaLabelCamel,
   activeId,
@@ -218,6 +283,7 @@ function Sidebar({
   brand,
   collapsed = false,
   children,
+  linkComponent,
   renderItem,
   footer,
   "aria-label": ariaLabel
@@ -257,35 +323,53 @@ function Sidebar({
         meta
       ] });
     })() : null,
-    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": ariaLabel ?? ariaLabelCamel ?? t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
-      SidebarSection,
+    /* @__PURE__ */ jsx(
+      "nav",
       {
-        label: section.label,
-        collapsed,
-        children: section.items.map(
-          (item) => collapsed ? /* @__PURE__ */ jsx(CollapsedRow, { item, activeId, onSelect }, item.id) : item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
-            NavGroup,
-            {
-              item,
-              activeId,
-              onSelect,
-              renderItem
-            },
-            item.id
-          ) : /* @__PURE__ */ jsx(
-            NavLeaf,
-            {
-              item,
-              activeId,
-              onSelect,
-              renderItem
-            },
-            item.id
-          )
-        )
-      },
-      section.label ?? sectionIndex
-    )) }),
+        className: "sb-nav-scroll",
+        "aria-label": ariaLabel ?? ariaLabelCamel ?? t("layout.sidebar.ariaLabel"),
+        children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+          SidebarSection,
+          {
+            label: section.label,
+            collapsed,
+            children: section.items.map(
+              (item) => collapsed ? /* @__PURE__ */ jsx(
+                CollapsedRow,
+                {
+                  item,
+                  activeId,
+                  onSelect,
+                  linkComponent
+                },
+                item.id
+              ) : item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
+                NavGroup,
+                {
+                  item,
+                  activeId,
+                  onSelect,
+                  linkComponent,
+                  renderItem
+                },
+                item.id
+              ) : /* @__PURE__ */ jsx(
+                NavLeaf,
+                {
+                  item,
+                  activeId,
+                  onSelect,
+                  linkComponent,
+                  renderItem
+                },
+                item.id
+              )
+            )
+          },
+          section.label ?? sectionIndex
+        ))
+      }
+    ),
     footer ? /* @__PURE__ */ jsx("div", { className: "sb-footer", children: footer }) : null
   ] });
 }
@@ -293,5 +377,6 @@ export {
   Sidebar,
   SidebarHeader,
   SidebarItem,
-  SidebarSection
+  SidebarSection,
+  createSidebarLink
 };

package/dist/components/navigation/app-setting-picker.js

@@ -63,7 +63,7 @@ const ARIA_KEY = {
 };
 const BRAND_NONE = "__app__";
 const AppSettingPicker = React.forwardRef(
-  function AppSettingPicker2({ kind, appearance, className, disabled, id, name, value, onValueChange }, ref) {
+  function AppSettingPicker2({ kind, appearance, compact = false, className, disabled, id, name, value, onValueChange }, ref) {
     const resolvedAppearance = appearance ?? (kind === "locale" ? "icon" : "labeled");
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
@@ -121,6 +121,8 @@ const AppSettingPicker = React.forwardRef(
     const unbound = current === void 0 || !handleChange;
     const Icon = ICON[kind];
     const iconOnly = resolvedAppearance === "icon";
+    const inline = resolvedAppearance === "inline";
+    const isCompact = compact && !inline;
     return /* @__PURE__ */ jsxs(
       Select,
       {
@@ -135,9 +137,9 @@ const AppSettingPicker = React.forwardRef(
             {
               ref,
               id,
-              showIndicator: !iconOnly,
+              showIndicator: !iconOnly && !inline,
               className: cn(
-                iconOnly ? (
+                inline ? "ui-app-setting-picker-inline h-auto min-h-0 w-auto rounded-none border-0 bg-transparent p-0 shadow-none" : iconOnly ? (
                   // Structurally icon-only: drop the owned width + value spacing and square the box to
                   // the density-aware --control-height tap target, centring the icon.
                   "w-[length:var(--control-height)] justify-center ps-0 pe-0"
@@ -147,16 +149,25 @@ const AppSettingPicker = React.forwardRef(
                   // `w-full` — so a labeled picker dropped into a narrow topbar no longer stretches to
                   // fill the bar (gh#165). A form field that wants a full-width control passes
                   // `className="w-full"`, which wins over `w-auto`.
-                  cn("w-auto max-w-full", TRIGGER_WIDTH[kind])
+                  // `compact` drops the per-kind width entirely so the trigger hugs its value.
+                  cn("w-auto max-w-full", !isCompact && TRIGGER_WIDTH[kind])
                 ),
+                // Compact re-tiers the box through tokens (--app-setting-picker-compact-*); the height
+                // still comes from the official --control-height-sm tier, never a literal. The gap is a
+                // utility (not the class rule) so it beats SelectTrigger's own `gap-2`.
+                isCompact && "ui-app-setting-picker-compact gap-[length:var(--app-setting-picker-compact-gap)]",
                 className
               ),
               "aria-label": t(ARIA_KEY[kind]),
               children: [
-                /* @__PURE__ */ jsx(
+                inline ? null : /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    className: cn("size-4 shrink-0 opacity-70", !iconOnly && "me-2"),
+                    className: cn(
+                      "size-4 shrink-0 opacity-70",
+                      // Compact relies on the trigger's tokenized flex gap instead of an icon margin.
+                      !iconOnly && !isCompact && "me-2"
+                    ),
                     "aria-hidden": "true"
                   }
                 ),

package/dist/components/navigation/filter-bar.d.ts

@@ -1,4 +1,13 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-export type { ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, sticky, className, children, }: ToolbarProp): import("react").JSX.Element;
-export declare function ToolbarGroup({ label, className, children }: ToolbarGroupProp): import("react").JSX.Element;
+export type { FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, className, children, }: ToolbarProp): import("react").JSX.Element;
+export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
+/**
+ * Canonical list-page filter strip.
+ *
+ * `Toolbar` remains available for backwards compatibility. `FilterBar` is the
+ * public domain-neutral name used by application design specifications.
+ */
+export declare const FilterBar: typeof Toolbar;
+/** Labelled control group for {@link FilterBar}. */
+export declare const FilterBarGroup: typeof ToolbarGroup;

package/dist/components/navigation/filter-bar.js

@@ -9,6 +9,7 @@ function Toolbar({
   onClear,
   hasActiveFilters = true,
   sticky = false,
+  overflow = "wrap",
   className,
   children
 }) {
@@ -18,6 +19,7 @@ function Toolbar({
     {
       role: "toolbar",
       "aria-label": t("navigation.toolbar.ariaLabel"),
+      "data-overflow": overflow,
       className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
       children: [
         children,
@@ -29,7 +31,7 @@ function Toolbar({
     }
   );
 }
-function ToolbarGroup({ label, className, children }) {
+function ToolbarGroup({ label, controlId, className, children }) {
   const labelId = useId();
   return /* @__PURE__ */ jsxs(
     "div",
@@ -38,13 +40,17 @@ function ToolbarGroup({ label, className, children }) {
       "aria-labelledby": label ? labelId : void 0,
       className: cn("ui-stack-xs ui-toolbar-group", className),
       children: [
-        label ? /* @__PURE__ */ jsx("div", { id: labelId, className: "ui-toolbar-label", children: label }) : null,
+        label ? controlId ? /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: controlId, className: "ui-toolbar-label", children: label }) : /* @__PURE__ */ jsx("div", { id: labelId, className: "ui-toolbar-label", children: label }) : null,
         children
       ]
     }
   );
 }
+const FilterBar = Toolbar;
+const FilterBarGroup = ToolbarGroup;
 export {
+  FilterBar,
+  FilterBarGroup,
   Toolbar,
   ToolbarGroup
 };

package/dist/components/navigation/index.d.ts

@@ -4,8 +4,8 @@ export { Pagination, PaginationContent, PaginationItem, PaginationLink, Paginati
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from "./menubar.js";
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
-export { Toolbar, ToolbarGroup } from "./filter-bar.js";
-export type { ToolbarGroupProps, ToolbarProps } from "./filter-bar.js";
+export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
+export type { FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/components/navigation/index.js

@@ -51,7 +51,7 @@ import {
   NavigationMenuViewport
 } from "./navigation-menu.js";
 import { Steps } from "./steps.js";
-import { Toolbar, ToolbarGroup } from "./filter-bar.js";
+import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
 import {
   DropdownMenu,
@@ -101,6 +101,8 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  FilterBar,
+  FilterBarGroup,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,

package/dist/components/navigation/steps.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Circle, Loader2, X } from "lucide-react";
+import { Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconClass } from "../../lib/control-styles.js";
@@ -68,12 +68,13 @@ function Steps({
   const base = defaultValue;
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
+  const inline = type === "inline";
   return /* @__PURE__ */ jsx(
     "ol",
     {
       className: cn(
         "flex w-full",
-        isVertical ? "flex-col gap-0" : "flex-row items-start",
+        inline ? "ui-steps-inline" : isVertical ? "flex-col gap-0" : "flex-row items-start",
         className
       ),
       "aria-label": t("navigation.steps.ariaLabel"),
@@ -84,12 +85,19 @@ function Steps({
         const clickable = interactive && !item.disabled;
         const description = item.description;
         const isCurrent = absoluteIndex === current;
+        const statusLabel = t(
+          stepStatus === "finish" ? "navigation.steps.status.finish" : stepStatus === "process" ? "navigation.steps.status.process" : stepStatus === "error" ? "navigation.steps.status.error" : "navigation.steps.status.wait"
+        );
         const stepClassName = cn(
           "group flex min-w-0",
-          isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
+          inline ? "ui-steps-inline-control" : isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
           clickable ? "cursor-pointer" : "cursor-default"
         );
-        const stepInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+        const stepInner = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ui-steps-inline-index", "aria-hidden": "true", children: absoluteIndex + 1 }),
+          /* @__PURE__ */ jsx("span", { className: "ui-steps-inline-title", children: item.title }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -119,26 +127,37 @@ function Steps({
             }
           )
         ] });
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "li",
           {
             "aria-current": isCurrent ? "step" : void 0,
             className: cn(
-              "relative flex min-w-0 flex-1",
-              isVertical ? "flex-row gap-3 pb-8 last:pb-0" : "flex-col items-center text-center",
-              !isVertical && index < items.length - 1 && "after:bg-border after:absolute after:top-4 after:h-px",
-              !isVertical && index < items.length - 1 && "after:left-[calc(50%+1.25rem)] after:w-[calc(100%-2.5rem)]"
+              "relative flex min-w-0",
+              !inline && "flex-1",
+              inline ? "ui-steps-inline-item" : isVertical ? "flex-row gap-3 pb-8 last:pb-0" : "flex-col items-center text-center",
+              !isVertical && !inline && index < items.length - 1 && "after:bg-border after:absolute after:top-4 after:h-px",
+              !isVertical && !inline && index < items.length - 1 && "after:left-[calc(50%+1.25rem)] after:w-[calc(100%-2.5rem)]"
             ),
-            children: interactive ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                disabled: !clickable,
-                onClick: clickable ? () => onValueChange?.(absoluteIndex) : void 0,
-                className: stepClassName,
-                children: stepInner
-              }
-            ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner })
+            "data-status": stepStatus,
+            children: [
+              interactive ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: !clickable,
+                  onClick: clickable ? () => onValueChange?.(absoluteIndex) : void 0,
+                  className: stepClassName,
+                  children: stepInner
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner }),
+              inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: "ui-steps-inline-separator rtl:rotate-180",
+                  "aria-hidden": "true"
+                }
+              ) : null
+            ]
           },
           index
         );