@namroodinc/liquid-editorial 0.1.6 → 0.1.8

package/dist/components/SideNav/index.js

@@ -1,106 +1,109 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { createContext as t, forwardRef as n, useCallback as r, useContext as i, useMemo as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Button as t } from "../Button/index.js";
+import { createContext as n, forwardRef as r, useCallback as i, useContext as a, useMemo as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/SideNav/index.tsx
-var l = t({ isCollapsed: !1 });
-function u() {
-	return i(l).isCollapsed;
+var u = n({ isCollapsed: !1 });
+function d() {
+	return a(u).isCollapsed;
 }
-var d = n(function({ isCollapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, label: i = "Main", className: c, children: u, ...d }, p) {
-	let [m, h] = o(t), g = e ?? m, _ = r(() => {
+var f = r(function({ isCollapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, label: r = "Main", className: a, children: l, ...d }, f) {
+	let [m, h] = s(t), g = e ?? m, _ = i(() => {
 		let t = !g;
 		e === void 0 && h(t), n?.(t);
 	}, [
 		e,
 		g,
 		n
-	]), v = a(() => ({ isCollapsed: g }), [g]);
-	return /* @__PURE__ */ s(l.Provider, {
+	]), v = o(() => ({ isCollapsed: g }), [g]);
+	return /* @__PURE__ */ c(u.Provider, {
 		value: v,
-		children: /* @__PURE__ */ s(f.Provider, {
+		children: /* @__PURE__ */ c(p.Provider, {
 			value: _,
-			children: /* @__PURE__ */ s("nav", {
-				ref: p,
-				"aria-label": i,
+			children: /* @__PURE__ */ c("nav", {
+				ref: f,
+				"aria-label": r,
 				"data-collapsed": g || void 0,
-				className: ["ds-sidenav", c].filter(Boolean).join(" "),
+				className: ["ds-sidenav", a].filter(Boolean).join(" "),
 				...d,
-				children: u
+				children: l
 			})
 		})
 	});
-}), f = t(() => {}), p = n(function({ title: t, mark: n, isCollapsible: r = !0, className: a, children: o, ...u }, d) {
-	let { isCollapsed: p } = i(l), m = i(f);
-	return /* @__PURE__ */ c("div", {
+}), p = n(() => {}), m = r(function({ title: e, mark: n, isCollapsible: r = !0, className: i, children: o, ...s }, d) {
+	let { isCollapsed: f } = a(u), m = a(p);
+	return /* @__PURE__ */ l("div", {
 		ref: d,
-		className: ["ds-sidenav__header", a].filter(Boolean).join(" "),
-		...u,
+		className: ["ds-sidenav__header", i].filter(Boolean).join(" "),
+		...s,
 		children: [
-			n && /* @__PURE__ */ s("span", {
+			n && /* @__PURE__ */ c("span", {
 				className: "ds-sidenav__mark",
 				children: n
 			}),
-			!p && (t || o) && /* @__PURE__ */ s("span", {
+			!f && (e || o) && /* @__PURE__ */ c("span", {
 				className: "ds-sidenav__title",
-				children: t ?? o
+				children: e ?? o
 			}),
-			r && /* @__PURE__ */ s("button", {
-				type: "button",
+			r && /* @__PURE__ */ c(t, {
+				variant: "simple",
+				size: "sm",
+				isIconOnly: !0,
+				iconStart: f ? "chevrons-right" : "chevrons-left",
 				className: "ds-sidenav__toggle",
-				"aria-label": p ? "Expand navigation" : "Collapse navigation",
-				"aria-expanded": !p,
-				title: p ? "Expand navigation" : "Collapse navigation",
-				onClick: m,
-				children: /* @__PURE__ */ s(e, { name: p ? "chevrons-right" : "chevrons-left" })
+				"aria-label": f ? "Expand navigation" : "Collapse navigation",
+				"aria-expanded": !f,
+				title: f ? "Expand navigation" : "Collapse navigation",
+				onClick: m
 			})
 		]
 	});
-}), m = n(function({ label: e, className: t, children: n, ...r }, a) {
-	let { isCollapsed: o } = i(l);
-	return /* @__PURE__ */ c("div", {
-		ref: a,
+}), h = r(function({ label: e, className: t, children: n, ...r }, i) {
+	let { isCollapsed: o } = a(u);
+	return /* @__PURE__ */ l("div", {
+		ref: i,
 		className: ["ds-sidenav__section", t].filter(Boolean).join(" "),
 		"aria-label": e,
 		role: e ? "group" : void 0,
 		...r,
-		children: [e && !o && /* @__PURE__ */ s("span", {
+		children: [e && !o && /* @__PURE__ */ c("span", {
 			className: "ds-sidenav__section-label",
 			children: e
-		}), /* @__PURE__ */ s("ul", {
+		}), /* @__PURE__ */ c("ul", {
 			className: "ds-sidenav__list",
 			children: n
 		})]
 	});
-}), h = n(function({ icon: t, label: n, isActive: r, badge: a, className: o, ...u }, d) {
-	let { isCollapsed: f } = i(l);
-	return /* @__PURE__ */ s("li", {
+}), g = r(function({ icon: t, label: n, isActive: r, badge: i, className: o, ...s }, d) {
+	let { isCollapsed: f } = a(u);
+	return /* @__PURE__ */ c("li", {
 		className: "ds-sidenav__row",
-		children: /* @__PURE__ */ c("a", {
+		children: /* @__PURE__ */ l("a", {
 			ref: d,
 			className: ["ds-sidenav__item", o].filter(Boolean).join(" "),
 			"data-active": r || void 0,
 			"aria-current": r ? "page" : void 0,
 			title: f ? n : void 0,
-			...u,
+			...s,
 			children: [
-				/* @__PURE__ */ s(e, { name: t }),
-				!f && /* @__PURE__ */ s("span", {
+				/* @__PURE__ */ c(e, { name: t }),
+				!f && /* @__PURE__ */ c("span", {
 					className: "ds-sidenav__label",
 					children: n
 				}),
-				!f && a && /* @__PURE__ */ s("span", {
+				!f && i && /* @__PURE__ */ c("span", {
 					className: "ds-sidenav__badge",
-					children: a
+					children: i
 				}),
-				f && /* @__PURE__ */ s("span", {
+				f && /* @__PURE__ */ c("span", {
 					className: "ds-sidenav__sr",
 					children: n
 				})
 			]
 		})
 	});
-}), g = n(function({ className: e, children: t, ...n }, r) {
-	return /* @__PURE__ */ s("div", {
+}), _ = r(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ c("div", {
 		ref: r,
 		className: ["ds-sidenav__footer", e].filter(Boolean).join(" "),
 		...n,
@@ -108,6 +111,6 @@ var d = n(function({ isCollapsed: e, defaultCollapsed: t = !1, onCollapsedChange
 	});
 });
 //#endregion
-export { d as SideNav, g as SideNavFooter, p as SideNavHeader, h as SideNavItem, m as SideNavSection, u as useSideNavCollapsed };
+export { f as SideNav, _ as SideNavFooter, m as SideNavHeader, g as SideNavItem, h as SideNavSection, d as useSideNavCollapsed };
 
 //# sourceMappingURL=index.js.map

package/dist/components/SideNav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","SideNavContext","createContext","useSideNavCollapsed","useContext","SideNav","forwardRef","controlled","rest","uncontrolled","setUncontrolled","useState","defaultCollapsed","isCollapsed","toggle","useCallback","next","onCollapsedChange","value","useMemo","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n  isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n  return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n  /** Controlled collapsed state. Omit to let the rail own it. */\n  isCollapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Fired by the header's collapse toggle. */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n  {\n    isCollapsed: controlled,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isCollapsed = controlled ?? uncontrolled;\n\n  const toggle = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlled === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [controlled, isCollapsed, onCollapsedChange]);\n\n  const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <SideNavContext.Provider value={value}>\n      <SideNavToggleContext.Provider value={toggle}>\n        <nav\n          ref={ref}\n          aria-label={label}\n          data-collapsed={isCollapsed || undefined}\n          className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n          {...rest}\n        >\n          {children}\n        </nav>\n      </SideNavToggleContext.Provider>\n    </SideNavContext.Provider>\n  );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Shown when the rail is open; hidden when it collapses. */\n  title?: ReactNode;\n  /** A mark that survives the collapse — a logo, a monogram. */\n  mark?: ReactNode;\n  /** Set false when the rail is permanently open. */\n  isCollapsible?: boolean;\n  children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n  function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n    const toggle = useContext(SideNavToggleContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n        {!isCollapsed && (title || children) && (\n          <span className=\"ds-sidenav__title\">{title ?? children}</span>\n        )}\n        {isCollapsible && (\n          <button\n            type=\"button\"\n            className=\"ds-sidenav__toggle\"\n            aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            aria-expanded={!isCollapsed}\n            title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            onClick={toggle}\n          >\n            <Icon name={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Section label. Hidden — but still announced — when collapsed. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n  function SideNavSection({ label, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n        aria-label={label}\n        role={label ? \"group\" : undefined}\n        {...rest}\n      >\n        {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n        <ul className=\"ds-sidenav__list\">{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: IconName;\n  /** The words. Kept in the accessible name even when the rail is collapsed. */\n  label: string;\n  isActive?: boolean;\n  /** A count or status pill at the end of the row. Hidden when collapsed. */\n  badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n  function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <li className=\"ds-sidenav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          title={isCollapsed ? label : undefined}\n          {...rest}\n        >\n          <Icon name={icon} />\n          {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n          {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n          {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n  function SideNavFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Icon","SideNavContext","createContext","useSideNavCollapsed","useContext","SideNav","forwardRef","controlled","rest","uncontrolled","setUncontrolled","useState","defaultCollapsed","isCollapsed","toggle","useCallback","next","onCollapsedChange","value","useMemo","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","Button","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n  isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n  return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n  /** Controlled collapsed state. Omit to let the rail own it. */\n  isCollapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Fired by the header's collapse toggle. */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n  {\n    isCollapsed: controlled,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isCollapsed = controlled ?? uncontrolled;\n\n  const toggle = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlled === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [controlled, isCollapsed, onCollapsedChange]);\n\n  const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <SideNavContext.Provider value={value}>\n      <SideNavToggleContext.Provider value={toggle}>\n        <nav\n          ref={ref}\n          aria-label={label}\n          data-collapsed={isCollapsed || undefined}\n          className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n          {...rest}\n        >\n          {children}\n        </nav>\n      </SideNavToggleContext.Provider>\n    </SideNavContext.Provider>\n  );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Shown when the rail is open; hidden when it collapses. */\n  title?: ReactNode;\n  /** A mark that survives the collapse — a logo, a monogram. */\n  mark?: ReactNode;\n  /** Set false when the rail is permanently open. */\n  isCollapsible?: boolean;\n  children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n  function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n    const toggle = useContext(SideNavToggleContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n        {!isCollapsed && (title || children) && (\n          <span className=\"ds-sidenav__title\">{title ?? children}</span>\n        )}\n        {isCollapsible && (\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            isIconOnly\n            iconStart={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"}\n            className=\"ds-sidenav__toggle\"\n            aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            aria-expanded={!isCollapsed}\n            title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            onClick={toggle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Section label. Hidden — but still announced — when collapsed. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n  function SideNavSection({ label, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n        aria-label={label}\n        role={label ? \"group\" : undefined}\n        {...rest}\n      >\n        {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n        <ul className=\"ds-sidenav__list\">{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: IconName;\n  /** The words. Kept in the accessible name even when the rail is collapsed. */\n  label: string;\n  isActive?: boolean;\n  /** A count or status pill at the end of the row. Hidden when collapsed. */\n  badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n  function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <li className=\"ds-sidenav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          title={isCollapsed ? label : undefined}\n          {...rest}\n        >\n          <Icon name={icon} />\n          {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n          {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n          {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n  function SideNavFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SideNav/style.css

@@ -42,33 +42,8 @@
     text-overflow: ellipsis;
   }
 
-  .ds-sidenav__toggle {
-    margin-inline-start: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--space-8);
-    block-size: var(--space-8);
-    border: 0;
-    border-radius: var(--field-radius);
-    background: none;
-    color: var(--color-text-muted);
-    cursor: pointer;
-  }
-
-  .ds-sidenav[data-collapsed] .ds-sidenav__toggle {
-    margin-inline-start: 0;
-  }
-
-  .ds-sidenav__toggle:hover {
-    background: var(--field-hover);
-    color: var(--color-text);
-  }
-
-  .ds-sidenav__toggle:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
+  .ds-sidenav__toggle { margin-inline-start: auto; }
+  .ds-sidenav[data-collapsed] .ds-sidenav__toggle { margin-inline-start: 0; }
 
   .ds-sidenav__section {
     padding-block: var(--space-3);

package/dist/components/SortableList/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@dnd-kit/core"),i=require("@dnd-kit/modifiers"),a=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities");function s(e){return(0,t.isValidElement)(e)&&typeof e.props.id==`string`}var c=(0,t.forwardRef)(function({items:o,onReorder:c,renderDragOverlay:l,className:u,children:d,...f},p){let m=(0,t.useId)(),[h,g]=(0,t.useState)(null),[_,v]=(0,t.useState)(o),[y,b]=(0,t.useState)(o);o!==y&&o.join(`\0`)!==y.join(`\0`)&&(b(o),v(o));let x=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:4}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:a.sortableKeyboardCoordinates})),S=(0,t.useCallback)(e=>{g(String(e.active.id))},[]),C=(0,t.useCallback)(e=>{g(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=_.indexOf(String(t.id)),i=_.indexOf(String(n.id));if(r<0||i<0)return;let o=(0,a.arrayMove)(_,r,i);v(o),c?.(o)},[_,c]),w=t.Children.toArray(d),T=new Map(w.filter(s).map(e=>[e.props.id,e])),E=[..._.flatMap(e=>T.get(e)??[]),...w.filter(e=>!s(e)||!_.includes(e.props.id))],D=h?T.get(h):void 0;return(0,n.jsxs)(r.DndContext,{id:`ds-sortable-list-${m}`,sensors:x,collisionDetection:r.closestCenter,modifiers:[i.restrictToVerticalAxis],onDragStart:S,onDragEnd:C,onDragCancel:()=>g(null),children:[(0,n.jsx)(a.SortableContext,{items:_,strategy:a.verticalListSortingStrategy,children:(0,n.jsx)(`ul`,{ref:p,className:[`ds-sortable-list`,u].filter(Boolean).join(` `),...f,children:E})}),(0,n.jsx)(r.DragOverlay,{children:h?(0,n.jsxs)(`div`,{className:`ds-sortable-item`,"data-overlay":!0,children:[(0,n.jsx)(`span`,{className:`ds-sortable-item__handle`,"aria-hidden":`true`,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:l?l(h):D?.props.children})]}):null})]})}),l=(0,t.forwardRef)(function({id:t,label:r,action:i,className:s,children:c,...l},u){let{attributes:d,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,a.useSortable)({id:t});return(0,n.jsxs)(`li`,{ref:e=>{p(e),typeof u==`function`?u(e):u&&(u.current=e)},style:{transform:o.CSS.Translate.toString(m),transition:h},className:[`ds-sortable-item`,s].filter(Boolean).join(` `),"data-dragging":g||void 0,...l,children:[(0,n.jsx)(`button`,{type:`button`,className:`ds-sortable-item__handle`,"aria-label":r?`Move ${r}`:`Move item`,...d,...f,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:c}),i&&(0,n.jsx)(`div`,{className:`ds-sortable-item__action`,children:i})]})});exports.SortableList=c,exports.SortableListItem=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs"),n=require("../../chunks/mergeRefs-Bc3qS0Tt.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@dnd-kit/core"),o=require("@dnd-kit/modifiers"),s=require("@dnd-kit/sortable"),c=require("@dnd-kit/utilities");function l(e){return(0,r.isValidElement)(e)&&typeof e.props.id==`string`}var u=(0,r.forwardRef)(function({items:t,onReorder:n,renderDragOverlay:c,className:u,children:d,...f},p){let m=(0,r.useId)(),[h,g]=(0,r.useState)(null),[_,v]=(0,r.useState)(t),[y,b]=(0,r.useState)(t);t!==y&&t.join(`\0`)!==y.join(`\0`)&&(b(t),v(t));let x=(0,a.useSensors)((0,a.useSensor)(a.PointerSensor,{activationConstraint:{distance:4}}),(0,a.useSensor)(a.KeyboardSensor,{coordinateGetter:s.sortableKeyboardCoordinates})),S=(0,r.useCallback)(e=>{g(String(e.active.id))},[]),C=(0,r.useCallback)(e=>{g(null);let{active:t,over:r}=e;if(!r||t.id===r.id)return;let i=_.indexOf(String(t.id)),a=_.indexOf(String(r.id));if(i<0||a<0)return;let o=(0,s.arrayMove)(_,i,a);v(o),n?.(o)},[_,n]),w=r.Children.toArray(d),T=new Map(w.filter(l).map(e=>[e.props.id,e])),E=[..._.flatMap(e=>T.get(e)??[]),...w.filter(e=>!l(e)||!_.includes(e.props.id))],D=h?T.get(h):void 0;return(0,i.jsxs)(a.DndContext,{id:`ds-sortable-list-${m}`,sensors:x,collisionDetection:a.closestCenter,modifiers:[o.restrictToVerticalAxis],onDragStart:S,onDragEnd:C,onDragCancel:()=>g(null),children:[(0,i.jsx)(s.SortableContext,{items:_,strategy:s.verticalListSortingStrategy,children:(0,i.jsx)(`ul`,{ref:p,className:[`ds-sortable-list`,u].filter(Boolean).join(` `),...f,children:E})}),(0,i.jsx)(a.DragOverlay,{children:h?(0,i.jsxs)(`div`,{className:`ds-sortable-item`,"data-overlay":!0,children:[(0,i.jsx)(`span`,{className:`ds-sortable-item__handle`,"aria-hidden":`true`,children:(0,i.jsx)(e.t,{name:`grip-vertical`})}),(0,i.jsx)(`div`,{className:`ds-sortable-item__content`,children:c?c(h):D?.props.children})]}):null})]})}),d=(0,r.forwardRef)(function({id:e,label:r,action:a,className:o,children:l,...u},d){let{attributes:f,listeners:p,setNodeRef:m,transform:h,transition:g,isDragging:_}=(0,s.useSortable)({id:e});return(0,i.jsxs)(`li`,{ref:n.t(m,d),style:{transform:c.CSS.Translate.toString(h),transition:g},className:[`ds-sortable-item`,o].filter(Boolean).join(` `),"data-dragging":_||void 0,...u,children:[(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`grip-vertical`,className:`ds-sortable-item__handle`,"aria-label":r?`Move ${r}`:`Move item`,...f,...p}),(0,i.jsx)(`div`,{className:`ds-sortable-item__content`,children:l}),a&&(0,i.jsx)(`div`,{className:`ds-sortable-item__action`,children:a})]})});exports.SortableList=u,exports.SortableListItem=d;
 //# sourceMappingURL=index.cjs.map

package/dist/components/SortableList/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["isValidElement","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","Children","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","CSS","require_Icon","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","isItem","child","SortableList","rest","dndId","activeId","setActiveId","order","setOrder","items","prevItems","setPrevItems","sensors","handleStart","event","handleEnd","over","active","from","to","next","onReorder","childArray","children","rows","ordered","id","activeRow","className","renderDragOverlay","SortableListItem","setNodeRef","node","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        >\n          <Icon name=\"grip-vertical\" />\n        </button>\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["isValidElement","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","Children","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","mergeRefs","CSS","Button","require_Icon","require_components_Button_index","require_mergeRefs","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","isItem","child","SortableList","rest","dndId","activeId","setActiveId","order","setOrder","items","prevItems","setPrevItems","sensors","handleStart","event","handleEnd","over","active","from","to","next","onReorder","childArray","children","rows","ordered","id","activeRow","className","renderDragOverlay","SortableListItem","setNodeRef","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { mergeRefs } from \"../../internal/mergeRefs\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={mergeRefs(setNodeRef, ref)}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"grip-vertical\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        />\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SortableList/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHA6B5B,CAAC"}

package/dist/components/SortableList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHA6B5B,CAAC"}

package/dist/components/SortableList/index.js

@@ -1,92 +1,94 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { Children as t, forwardRef as n, isValidElement as r, useCallback as i, useId as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { DndContext as l, DragOverlay as u, KeyboardSensor as d, PointerSensor as f, closestCenter as p, useSensor as m, useSensors as h } from "@dnd-kit/core";
-import { restrictToVerticalAxis as g } from "@dnd-kit/modifiers";
-import { SortableContext as _, arrayMove as v, sortableKeyboardCoordinates as y, useSortable as b, verticalListSortingStrategy as x } from "@dnd-kit/sortable";
-import { CSS as S } from "@dnd-kit/utilities";
+import { Button as t } from "../Button/index.js";
+import { t as n } from "../../chunks/mergeRefs-DGM402mE.js";
+import { Children as r, forwardRef as i, isValidElement as a, useCallback as o, useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { DndContext as d, DragOverlay as f, KeyboardSensor as p, PointerSensor as m, closestCenter as h, useSensor as g, useSensors as _ } from "@dnd-kit/core";
+import { restrictToVerticalAxis as v } from "@dnd-kit/modifiers";
+import { SortableContext as y, arrayMove as b, sortableKeyboardCoordinates as x, useSortable as S, verticalListSortingStrategy as C } from "@dnd-kit/sortable";
+import { CSS as w } from "@dnd-kit/utilities";
 //#region src/components/SortableList/index.tsx
-function C(e) {
-	return r(e) && typeof e.props.id == "string";
+function T(e) {
+	return a(e) && typeof e.props.id == "string";
 }
-var w = n(function({ items: n, onReorder: r, renderDragOverlay: b, className: S, children: w, ...T }, E) {
-	let D = a(), [O, k] = o(null), [A, j] = o(n), [M, N] = o(n);
-	n !== M && n.join("\0") !== M.join("\0") && (N(n), j(n));
-	let P = h(m(f, { activationConstraint: { distance: 4 } }), m(d, { coordinateGetter: y })), F = i((e) => {
+var E = i(function({ items: t, onReorder: n, renderDragOverlay: i, className: a, children: S, ...w }, E) {
+	let D = s(), [O, k] = c(null), [A, j] = c(t), [M, N] = c(t);
+	t !== M && t.join("\0") !== M.join("\0") && (N(t), j(t));
+	let P = _(g(m, { activationConstraint: { distance: 4 } }), g(p, { coordinateGetter: x })), F = o((e) => {
 		k(String(e.active.id));
-	}, []), I = i((e) => {
+	}, []), I = o((e) => {
 		k(null);
-		let { active: t, over: n } = e;
-		if (!n || t.id === n.id) return;
-		let i = A.indexOf(String(t.id)), a = A.indexOf(String(n.id));
+		let { active: t, over: r } = e;
+		if (!r || t.id === r.id) return;
+		let i = A.indexOf(String(t.id)), a = A.indexOf(String(r.id));
 		if (i < 0 || a < 0) return;
-		let o = v(A, i, a);
-		j(o), r?.(o);
-	}, [A, r]), L = t.toArray(w), R = new Map(L.filter(C).map((e) => [e.props.id, e])), z = [...A.flatMap((e) => R.get(e) ?? []), ...L.filter((e) => !C(e) || !A.includes(e.props.id))], B = O ? R.get(O) : void 0;
-	return /* @__PURE__ */ c(l, {
+		let o = b(A, i, a);
+		j(o), n?.(o);
+	}, [A, n]), L = r.toArray(S), R = new Map(L.filter(T).map((e) => [e.props.id, e])), z = [...A.flatMap((e) => R.get(e) ?? []), ...L.filter((e) => !T(e) || !A.includes(e.props.id))], B = O ? R.get(O) : void 0;
+	return /* @__PURE__ */ u(d, {
 		id: `ds-sortable-list-${D}`,
 		sensors: P,
-		collisionDetection: p,
-		modifiers: [g],
+		collisionDetection: h,
+		modifiers: [v],
 		onDragStart: F,
 		onDragEnd: I,
 		onDragCancel: () => k(null),
-		children: [/* @__PURE__ */ s(_, {
+		children: [/* @__PURE__ */ l(y, {
 			items: A,
-			strategy: x,
-			children: /* @__PURE__ */ s("ul", {
+			strategy: C,
+			children: /* @__PURE__ */ l("ul", {
 				ref: E,
-				className: ["ds-sortable-list", S].filter(Boolean).join(" "),
-				...T,
+				className: ["ds-sortable-list", a].filter(Boolean).join(" "),
+				...w,
 				children: z
 			})
-		}), /* @__PURE__ */ s(u, { children: O ? /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ l(f, { children: O ? /* @__PURE__ */ u("div", {
 			className: "ds-sortable-item",
 			"data-overlay": !0,
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ l("span", {
 				className: "ds-sortable-item__handle",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ s(e, { name: "grip-vertical" })
-			}), /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ l(e, { name: "grip-vertical" })
+			}), /* @__PURE__ */ l("div", {
 				className: "ds-sortable-item__content",
-				children: b ? b(O) : B?.props.children
+				children: i ? i(O) : B?.props.children
 			})]
 		}) : null })]
 	});
-}), T = n(function({ id: t, label: n, action: r, className: i, children: a, ...o }, l) {
-	let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } = b({ id: t });
-	return /* @__PURE__ */ c("li", {
-		ref: (e) => {
-			f(e), typeof l == "function" ? l(e) : l && (l.current = e);
-		},
+}), D = i(function({ id: e, label: r, action: i, className: a, children: o, ...s }, c) {
+	let { attributes: d, listeners: f, setNodeRef: p, transform: m, transition: h, isDragging: g } = S({ id: e });
+	return /* @__PURE__ */ u("li", {
+		ref: n(p, c),
 		style: {
-			transform: S.Translate.toString(p),
-			transition: m
+			transform: w.Translate.toString(m),
+			transition: h
 		},
-		className: ["ds-sortable-item", i].filter(Boolean).join(" "),
-		"data-dragging": h || void 0,
-		...o,
+		className: ["ds-sortable-item", a].filter(Boolean).join(" "),
+		"data-dragging": g || void 0,
+		...s,
 		children: [
-			/* @__PURE__ */ s("button", {
-				type: "button",
+			/* @__PURE__ */ l(t, {
+				variant: "simple",
+				size: "sm",
+				isIconOnly: !0,
+				iconStart: "grip-vertical",
 				className: "ds-sortable-item__handle",
-				"aria-label": n ? `Move ${n}` : "Move item",
-				...u,
+				"aria-label": r ? `Move ${r}` : "Move item",
 				...d,
-				children: /* @__PURE__ */ s(e, { name: "grip-vertical" })
+				...f
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "ds-sortable-item__content",
-				children: a
+				children: o
 			}),
-			r && /* @__PURE__ */ s("div", {
+			i && /* @__PURE__ */ l("div", {
 				className: "ds-sortable-item__action",
-				children: r
+				children: i
 			})
 		]
 	});
 });
 //#endregion
-export { w as SortableList, T as SortableListItem };
+export { E as SortableList, D as SortableListItem };
 
 //# sourceMappingURL=index.js.map

package/dist/components/SortableList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","isItem","isValidElement","child","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","order","setOrder","items","prevItems","setPrevItems","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","to","next","arrayMove","onReorder","childArray","Children","children","rows","ordered","id","activeRow","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","className","DragOverlay","renderDragOverlay","SortableListItem","useSortable","setNodeRef","node","ref","CSS","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        >\n          <Icon name=\"grip-vertical\" />\n        </button>\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Icon","mergeRefs","isItem","isValidElement","child","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","order","setOrder","items","prevItems","setPrevItems","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","to","next","arrayMove","onReorder","childArray","Children","children","rows","ordered","id","activeRow","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","className","DragOverlay","renderDragOverlay","SortableListItem","useSortable","setNodeRef","ref","CSS","transform","isDragging","Button","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { mergeRefs } from \"../../internal/mergeRefs\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={mergeRefs(setNodeRef, ref)}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"grip-vertical\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        />\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SortableList/style.css

@@ -35,25 +35,19 @@
   }
 
   .ds-sortable-item__handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    padding: 0;
-    background: none;
-    color: var(--color-text-muted);
+    flex: none;
     cursor: grab;
     touch-action: none;
   }
 
-  .ds-sortable-item__handle:hover {
-    color: var(--color-text);
-  }
-
-  .ds-sortable-item__handle:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
+  /* The drag overlay's grip is a picture of the handle, not a second control. */
+  span.ds-sortable-item__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--field-height-sm);
+    block-size: var(--field-height-sm);
+    color: var(--color-text-muted);
   }
 
   .ds-sortable-item[data-overlay] .ds-sortable-item__handle {

package/dist/components/Stepper/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}var i=(0,t.forwardRef)(function({steps:t,activeStep:i,size:a=`md`,label:o=`Progress`,onStepChange:s,className:c,...l},u){return(0,n.jsx)(`nav`,{ref:u,"aria-label":o,"data-size":a,className:[`ds-stepper`,c].filter(Boolean).join(` `),...l,children:(0,n.jsx)(`ol`,{className:`ds-stepper__list`,children:t.map((t,a)=>{let o=r(a,i),c=!!s&&o!==`upcoming`;return(0,n.jsxs)(`li`,{className:`ds-stepper__step`,"data-status":o,"aria-current":o===`current`?`step`:void 0,children:[(0,n.jsxs)(`span`,{className:`ds-stepper__track`,"aria-hidden":`true`,children:[(0,n.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`start`}),(0,n.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`end`})]}),(0,n.jsxs)(c?`button`:`span`,{className:`ds-stepper__marker`,...c?{type:`button`,onClick:()=>s?.(a,t.id)}:{},children:[o===`complete`?(0,n.jsx)(e.t,{name:`check`,size:16,"aria-hidden":`true`}):a+1,(0,n.jsx)(`span`,{className:`ds-stepper__sr`,children:o})]}),(0,n.jsxs)(`span`,{className:`ds-stepper__text`,children:[(0,n.jsx)(`span`,{className:`ds-stepper__label`,children:t.label}),t.description&&(0,n.jsx)(`span`,{className:`ds-stepper__description`,children:t.description})]})]},t.id)})})})});exports.Stepper=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}var a=(0,n.forwardRef)(function({steps:a,activeStep:o,size:s=`md`,label:c=`Progress`,onStepChange:l,className:u,...d},f){let p=(0,n.useId)();return(0,r.jsx)(`nav`,{ref:f,"aria-label":c,"data-size":s,className:[`ds-stepper`,u].filter(Boolean).join(` `),...d,children:(0,r.jsx)(`ol`,{className:`ds-stepper__list`,children:a.map((n,a)=>{let s=i(a,o),c=!!l&&s!==`upcoming`,u=(0,r.jsxs)(r.Fragment,{children:[s===`complete`?(0,r.jsx)(e.t,{name:`check`,size:16,"aria-hidden":`true`}):a+1,(0,r.jsx)(`span`,{id:`${p}-${a}-status`,className:`ds-stepper__sr`,children:s})]});return(0,r.jsxs)(`li`,{className:`ds-stepper__step`,"data-status":s,"aria-current":s===`current`?`step`:void 0,children:[(0,r.jsxs)(`span`,{className:`ds-stepper__track`,"aria-hidden":`true`,children:[(0,r.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`start`}),(0,r.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`end`})]}),c?(0,r.jsx)(t.Button,{className:`ds-stepper__marker`,variant:s===`complete`?`primary`:`active`,size:`sm`,isIconOnly:!0,"aria-labelledby":`${p}-${a}-label`,"aria-describedby":`${p}-${a}-status`,onClick:()=>l?.(a,n.id),children:u}):(0,r.jsx)(`span`,{className:`ds-stepper__marker`,children:u}),(0,r.jsxs)(`span`,{className:`ds-stepper__text`,children:[(0,r.jsx)(`span`,{id:`${p}-${a}-label`,className:`ds-stepper__label`,children:n.label}),n.description&&(0,r.jsx)(`span`,{className:`ds-stepper__description`,children:n.description})]})]},n.id)})})})});exports.Stepper=a;
 //# sourceMappingURL=index.cjs.map