@chayns-ui/layout 0.4.0 → 0.6.0

package/README.md

@@ -20,8 +20,10 @@ import '@chayns-ui/layout/styles.css';
 import { AppLayout } from '@chayns-ui/layout';
 ```
 
-`AppLayout` renders the application shell with a 64px header, recursive
-navigation, controlled or uncontrolled sidebar collapse, and consumer content.
+`AppLayout` wird über `Header`, `Logo`, `Navigation`, rekursive
+`Navigation.Item`, `Content` und `CollapseToggle` komponiert. Der frühere
+`items[]`-Vertrag wurde vor 1.0 entfernt. Tabs verwendet `Tabs.List`,
+`Tabs.Tab value` und `Tabs.Panel value` statt `tabs[]`.
 
 Alternatively, the component stylesheet is available as
 `@chayns-ui/layout/app-layout.css` or

package/dist/app-layout.css

@@ -18,6 +18,15 @@
     padding-inline: var(--sp-4);
   }
 
+  .chayns-app-layout__header-content {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: flex-end;
+    min-inline-size: 0;
+    margin-inline-start: var(--sp-4);
+  }
+
   .chayns-app-layout__logo {
     display: block;
     max-block-size: calc(var(--k32) + var(--k8));
@@ -30,7 +39,7 @@
     flex-direction: column;
     min-inline-size: 0;
     min-block-size: 0;
-    padding: var(--sp-2);
+    padding: 0 var(--sp-2) var(--sp-2);
   }
 
   .chayns-app-layout__navigation {

package/dist/components/app-layout/AppLayout.d.ts

@@ -1,3 +1,13 @@
-import type { AppLayoutProps } from './AppLayout.types.js';
-export declare const AppLayout: import("react").ForwardRefExoticComponent<Omit<AppLayoutProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { AppLayoutCollapseToggleProps, AppLayoutNavigationItemProps, AppLayoutProps } from './AppLayout.types.js';
+declare function NavigationItem({ children, className, href, isActive, label, ...props }: AppLayoutNavigationItemProps): import("react").JSX.Element;
+export declare const AppLayout: import("react").ForwardRefExoticComponent<Omit<AppLayoutProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    CollapseToggle: import("react").ForwardRefExoticComponent<Omit<AppLayoutCollapseToggleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Logo: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    Navigation: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+        Item: typeof NavigationItem;
+    };
+};
+export {};
 //# sourceMappingURL=AppLayout.d.ts.map

package/dist/components/app-layout/AppLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,eAAO,MAAM,SAAS,wHAmFrB,CAAC"}
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,4BAA4B,EAI5B,4BAA4B,EAE5B,cAAc,EACf,MAAM,sBAAsB,CAAC;AA4D9B,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,4BAA4B,+BA2D9B;AAgED,eAAO,MAAM,SAAS;;;;;;;;CAMpB,CAAC"}

package/dist/components/app-layout/AppLayout.js

@@ -1,77 +1,147 @@
-import AppLayoutIcon from "./app-layout-icon/AppLayoutIcon.js";
-import NavigationItems from "./navigation-items/NavigationItems.js";
-import { forwardRef, useId, useState } from "react";
+import { createContext, forwardRef, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/app-layout/AppLayout.tsx
-var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel, collapsed, defaultCollapsed = false, expandLabel, items, logo, navigationLabel, onClick, onCollapsedChange, ...rootProps }, ref) => {
-	const baseId = useId();
-	const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-	const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
-	const isCollapsed = collapsed ?? internalCollapsed;
-	const rootClassName = [
-		"chayns-app-layout",
-		isCollapsed ? "chayns-app-layout--collapsed" : void 0,
-		className
-	].filter(Boolean).join(" ");
-	const handleCollapsedChange = () => {
-		const nextCollapsed = !isCollapsed;
-		if (collapsed === void 0) setInternalCollapsed(nextCollapsed);
-		onCollapsedChange?.(nextCollapsed);
-	};
-	const handleToggle = (id) => {
-		setExpandedIds((current) => {
-			const next = new Set(current);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		...rootProps,
-		className: rootClassName,
+var LayoutContext = createContext(null);
+var NavigationContext = createContext(false);
+function useLayout(part) {
+	const context = useContext(LayoutContext);
+	if (context === null) throw new Error(`AppLayout.${part} must be rendered within AppLayout.`);
+	return context;
+}
+var Header = forwardRef(function Header({ children, className, ...props }, ref) {
+	useLayout("Header");
+	return /* @__PURE__ */ jsx("header", {
+		...props,
+		className: ["chayns-app-layout__header", className].filter(Boolean).join(" "),
 		ref,
-		children: [
-			/* @__PURE__ */ jsx("header", {
-				className: "chayns-app-layout__header",
-				children: /* @__PURE__ */ jsx("img", {
-					alt: "",
-					className: "chayns-app-layout__logo",
-					src: logo
-				})
-			}),
-			/* @__PURE__ */ jsxs("aside", {
-				className: "chayns-app-layout__sidebar",
-				children: [/* @__PURE__ */ jsx("nav", {
-					"aria-label": navigationLabel,
-					className: "chayns-app-layout__navigation",
-					children: /* @__PURE__ */ jsx(NavigationItems, {
-						activeItemId,
-						collapsed: isCollapsed,
-						expandedIds,
-						items,
-						onClick,
-						onToggle: handleToggle,
-						parentId: baseId
-					})
-				}), /* @__PURE__ */ jsx("div", {
-					className: "chayns-app-layout__footer",
-					children: /* @__PURE__ */ jsx("button", {
-						"aria-label": isCollapsed ? expandLabel : collapseLabel,
-						className: "chayns-app-layout__collapse",
-						onClick: handleCollapsedChange,
-						type: "button",
-						children: /* @__PURE__ */ jsx(AppLayoutIcon, { icon: "fa-sidebar" })
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsx("main", {
-				className: "chayns-app-layout__content",
+		children
+	});
+});
+var Logo = forwardRef(function Logo({ alt = "", className, ...props }, ref) {
+	useLayout("Logo");
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		alt,
+		className: ["chayns-app-layout__logo", className].filter(Boolean).join(" "),
+		ref
+	});
+});
+var Navigation = forwardRef(function Navigation({ children, className, ...props }, ref) {
+	useLayout("Navigation");
+	return /* @__PURE__ */ jsx(NavigationContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("nav", {
+			...props,
+			className: ["chayns-app-layout__navigation", className].filter(Boolean).join(" "),
+			ref,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "chayns-app-layout__list",
+				children
+			})
+		})
+	});
+});
+function NavigationItem({ children, className, href, isActive = false, label, ...props }) {
+	if (!useContext(NavigationContext)) throw new Error("AppLayout.Navigation.Item must be rendered within AppLayout.Navigation.");
+	const { collapsed } = useLayout("Navigation.Item");
+	const [expanded, setExpanded] = useState(false);
+	const hasChildren = children !== void 0;
+	const content = /* @__PURE__ */ jsx("span", {
+		className: `chayns-app-layout__label${collapsed ? " chayns-app-layout__label--hidden" : ""}`,
+		children: label
+	});
+	const actionClass = ["chayns-app-layout__action", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("li", {
+		className: `chayns-app-layout__item${isActive ? " chayns-app-layout__item--active" : ""}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "chayns-app-layout__row",
+			children: [href ? /* @__PURE__ */ jsx("a", {
+				...props,
+				"aria-current": isActive ? "page" : void 0,
+				className: actionClass,
+				href,
+				children: content
+			}) : /* @__PURE__ */ jsx("button", {
+				...props,
+				"aria-current": isActive ? "page" : void 0,
+				className: actionClass,
+				type: "button",
+				children: content
+			}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("button", {
+				"aria-label": typeof label === "string" ? label : void 0,
+				"aria-expanded": expanded,
+				className: "chayns-app-layout__disclosure",
+				onClick: () => setExpanded((current) => !current),
+				type: "button",
+				children: "⌄"
+			}) : null]
+		}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": !expanded,
+			className: `chayns-app-layout__children${expanded ? " chayns-app-layout__children--open" : ""}`,
+			inert: !expanded,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "chayns-app-layout__list",
 				children
 			})
-		]
+		}) : null]
+	});
+}
+var Content = forwardRef(function Content({ children, className, ...props }, ref) {
+	useLayout("Content");
+	return /* @__PURE__ */ jsx("main", {
+		...props,
+		className: ["chayns-app-layout__content", className].filter(Boolean).join(" "),
+		ref,
+		children
+	});
+});
+var CollapseToggle = forwardRef(function CollapseToggle({ children = "☰", className, collapseLabel, expandLabel, onClick, ...props }, ref) {
+	const layout = useLayout("CollapseToggle");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"aria-label": layout.collapsed ? expandLabel : collapseLabel,
+		className: ["chayns-app-layout__collapse", className].filter(Boolean).join(" "),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) layout.toggle();
+		},
+		ref,
+		type: "button",
+		children
 	});
 });
-AppLayout.displayName = "AppLayout";
+var Root = forwardRef(function Root({ children, className, collapsed, defaultCollapsed = false, onCollapsedChange, ...props }, ref) {
+	const [internal, setInternal] = useState(defaultCollapsed);
+	const isCollapsed = collapsed ?? internal;
+	const toggle = () => {
+		const next = !isCollapsed;
+		if (collapsed === void 0) setInternal(next);
+		onCollapsedChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(LayoutContext.Provider, {
+		value: {
+			collapsed: isCollapsed,
+			toggle
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className: [
+				"chayns-app-layout",
+				isCollapsed && "chayns-app-layout--collapsed",
+				className
+			].filter(Boolean).join(" "),
+			ref,
+			children
+		})
+	});
+});
+var AppLayout = Object.assign(Root, {
+	CollapseToggle,
+	Content,
+	Header,
+	Logo,
+	Navigation: Object.assign(Navigation, { Item: NavigationItem })
+});
 //#endregion
 export { AppLayout };
 

package/dist/components/app-layout/AppLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.js","names":[],"sources":["../../../src/components/app-layout/AppLayout.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\n\nimport type { AppLayoutProps } from './AppLayout.types.js';\nimport AppLayoutIcon from './app-layout-icon/AppLayoutIcon.js';\nimport NavigationItems from './navigation-items/NavigationItems.js';\n\nexport const AppLayout = forwardRef<HTMLDivElement, AppLayoutProps>(\n  (\n    {\n      activeItemId,\n      children,\n      className,\n      collapseLabel,\n      collapsed,\n      defaultCollapsed = false,\n      expandLabel,\n      items,\n      logo,\n      navigationLabel,\n      onClick,\n      onCollapsedChange,\n      ...rootProps\n    },\n    ref,\n  ) => {\n    const baseId = useId();\n    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n    const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => new Set());\n    const isCollapsed = collapsed ?? internalCollapsed;\n    const rootClassName = [\n      'chayns-app-layout',\n      isCollapsed ? 'chayns-app-layout--collapsed' : undefined,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleCollapsedChange = () => {\n      const nextCollapsed = !isCollapsed;\n      if (collapsed === undefined) {\n        setInternalCollapsed(nextCollapsed);\n      }\n      onCollapsedChange?.(nextCollapsed);\n    };\n\n    const handleToggle = (id: string) => {\n      setExpandedIds((current) => {\n        const next = new Set(current);\n        if (next.has(id)) {\n          next.delete(id);\n        } else {\n          next.add(id);\n        }\n        return next;\n      });\n    };\n\n    return (\n      <div {...rootProps} className={rootClassName} ref={ref}>\n        <header className=\"chayns-app-layout__header\">\n          <img alt=\"\" className=\"chayns-app-layout__logo\" src={logo} />\n        </header>\n        <aside className=\"chayns-app-layout__sidebar\">\n          <nav aria-label={navigationLabel} className=\"chayns-app-layout__navigation\">\n            <NavigationItems\n              activeItemId={activeItemId}\n              collapsed={isCollapsed}\n              expandedIds={expandedIds}\n              items={items}\n              onClick={onClick}\n              onToggle={handleToggle}\n              parentId={baseId}\n            />\n          </nav>\n          <div className=\"chayns-app-layout__footer\">\n            <button\n              aria-label={isCollapsed ? expandLabel : collapseLabel}\n              className=\"chayns-app-layout__collapse\"\n              onClick={handleCollapsedChange}\n              type=\"button\"\n            >\n              <AppLayoutIcon icon=\"fa-sidebar\" />\n            </button>\n          </div>\n        </aside>\n        <main className=\"chayns-app-layout__content\">{children}</main>\n      </div>\n    );\n  },\n);\n\nAppLayout.displayName = 'AppLayout';\n"],"mappings":";;;;;AAMA,IAAa,YAAY,YAErB,EACE,cACA,UACA,WACA,eACA,WACA,mBAAmB,OACnB,aACA,OACA,MACA,iBACA,SACA,mBACA,GAAG,aAEL,QACG;CACH,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,gBAAgB;CAC3E,MAAM,CAAC,aAAa,kBAAkB,+BAAoC,IAAI,IAAI,CAAC;CACnF,MAAM,cAAc,aAAa;CACjC,MAAM,gBAAgB;EACpB;EACA,cAAc,iCAAiC,KAAA;EAC/C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,8BAA8B;EAClC,MAAM,gBAAgB,CAAC;EACvB,IAAI,cAAc,KAAA,GAChB,qBAAqB,aAAa;EAEpC,oBAAoB,aAAa;CACnC;CAEA,MAAM,gBAAgB,OAAe;EACnC,gBAAgB,YAAY;GAC1B,MAAM,OAAO,IAAI,IAAI,OAAO;GAC5B,IAAI,KAAK,IAAI,EAAE,GACb,KAAK,OAAO,EAAE;QAEd,KAAK,IAAI,EAAE;GAEb,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAoB;EAAnD,UAAA;GACE,oBAAC,UAAD;IAAQ,WAAU;IAChB,UAAA,oBAAC,OAAD;KAAK,KAAI;KAAG,WAAU;KAA0B,KAAK;IAAO,CAAA;GACtD,CAAA;GACR,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,OAAD;KAAK,cAAY;KAAiB,WAAU;KAC1C,UAAA,oBAAC,iBAAD;MACgB;MACd,WAAW;MACE;MACN;MACE;MACT,UAAU;MACV,UAAU;KACX,CAAA;IACE,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,UAAD;MACE,cAAY,cAAc,cAAc;MACxC,WAAU;MACV,SAAS;MACT,MAAK;MAEL,UAAA,oBAAC,eAAD,EAAe,MAAK,aAAc,CAAA;KAC5B,CAAA;IACL,CAAA,CACA;;GACP,oBAAC,QAAD;IAAM,WAAU;IAA8B;GAAe,CAAA;EAC1D;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"AppLayout.js","names":[],"sources":["../../../src/components/app-layout/AppLayout.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useState } from 'react';\nimport type { ComponentPropsWithRef } from 'react';\nimport type {\n  AppLayoutCollapseToggleProps,\n  AppLayoutContentProps,\n  AppLayoutHeaderProps,\n  AppLayoutLogoProps,\n  AppLayoutNavigationItemProps,\n  AppLayoutNavigationProps,\n  AppLayoutProps,\n} from './AppLayout.types.js';\n\ninterface LayoutState {\n  collapsed: boolean;\n  toggle: () => void;\n}\nconst LayoutContext = createContext<LayoutState | null>(null);\nconst NavigationContext = createContext(false);\nfunction useLayout(part: string) {\n  const context = useContext(LayoutContext);\n  if (context === null) throw new Error(`AppLayout.${part} must be rendered within AppLayout.`);\n  return context;\n}\n\nconst Header = forwardRef<HTMLElement, AppLayoutHeaderProps>(function Header(\n  { children, className, ...props },\n  ref,\n) {\n  useLayout('Header');\n  return (\n    <header\n      {...props}\n      className={['chayns-app-layout__header', className].filter(Boolean).join(' ')}\n      ref={ref}\n    >\n      {children}\n    </header>\n  );\n});\nconst Logo = forwardRef<HTMLImageElement, AppLayoutLogoProps>(function Logo(\n  { alt = '', className, ...props },\n  ref,\n) {\n  useLayout('Logo');\n  return (\n    <img\n      {...props}\n      alt={alt}\n      className={['chayns-app-layout__logo', className].filter(Boolean).join(' ')}\n      ref={ref}\n    />\n  );\n});\nconst Navigation = forwardRef<HTMLElement, AppLayoutNavigationProps>(function Navigation(\n  { children, className, ...props },\n  ref,\n) {\n  useLayout('Navigation');\n  return (\n    <NavigationContext.Provider value>\n      <nav\n        {...props}\n        className={['chayns-app-layout__navigation', className].filter(Boolean).join(' ')}\n        ref={ref}\n      >\n        <ul className=\"chayns-app-layout__list\">{children}</ul>\n      </nav>\n    </NavigationContext.Provider>\n  );\n});\nfunction NavigationItem({\n  children,\n  className,\n  href,\n  isActive = false,\n  label,\n  ...props\n}: AppLayoutNavigationItemProps) {\n  if (!useContext(NavigationContext))\n    throw new Error('AppLayout.Navigation.Item must be rendered within AppLayout.Navigation.');\n  const { collapsed } = useLayout('Navigation.Item');\n  const [expanded, setExpanded] = useState(false);\n  const hasChildren = children !== undefined;\n  const content = (\n    <span\n      className={`chayns-app-layout__label${collapsed ? ' chayns-app-layout__label--hidden' : ''}`}\n    >\n      {label}\n    </span>\n  );\n  const actionClass = ['chayns-app-layout__action', className].filter(Boolean).join(' ');\n  return (\n    <li className={`chayns-app-layout__item${isActive ? ' chayns-app-layout__item--active' : ''}`}>\n      <div className=\"chayns-app-layout__row\">\n        {href ? (\n          <a\n            {...(props as ComponentPropsWithRef<'a'>)}\n            aria-current={isActive ? 'page' : undefined}\n            className={actionClass}\n            href={href}\n          >\n            {content}\n          </a>\n        ) : (\n          <button\n            {...props}\n            aria-current={isActive ? 'page' : undefined}\n            className={actionClass}\n            type=\"button\"\n          >\n            {content}\n          </button>\n        )}\n        {hasChildren && !collapsed ? (\n          <button\n            aria-label={typeof label === 'string' ? label : undefined}\n            aria-expanded={expanded}\n            className=\"chayns-app-layout__disclosure\"\n            onClick={() => setExpanded((current) => !current)}\n            type=\"button\"\n          >\n            ⌄\n          </button>\n        ) : null}\n      </div>\n      {hasChildren && !collapsed ? (\n        <div\n          aria-hidden={!expanded}\n          className={`chayns-app-layout__children${expanded ? ' chayns-app-layout__children--open' : ''}`}\n          inert={!expanded}\n        >\n          <ul className=\"chayns-app-layout__list\">{children}</ul>\n        </div>\n      ) : null}\n    </li>\n  );\n}\nconst Content = forwardRef<HTMLElement, AppLayoutContentProps>(function Content(\n  { children, className, ...props },\n  ref,\n) {\n  useLayout('Content');\n  return (\n    <main\n      {...props}\n      className={['chayns-app-layout__content', className].filter(Boolean).join(' ')}\n      ref={ref}\n    >\n      {children}\n    </main>\n  );\n});\nconst CollapseToggle = forwardRef<HTMLButtonElement, AppLayoutCollapseToggleProps>(\n  function CollapseToggle(\n    { children = '☰', className, collapseLabel, expandLabel, onClick, ...props },\n    ref,\n  ) {\n    const layout = useLayout('CollapseToggle');\n    return (\n      <button\n        {...props}\n        aria-label={layout.collapsed ? expandLabel : collapseLabel}\n        className={['chayns-app-layout__collapse', className].filter(Boolean).join(' ')}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) layout.toggle();\n        }}\n        ref={ref}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\nconst Root = forwardRef<HTMLDivElement, AppLayoutProps>(function Root(\n  { children, className, collapsed, defaultCollapsed = false, onCollapsedChange, ...props },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultCollapsed);\n  const isCollapsed = collapsed ?? internal;\n  const toggle = () => {\n    const next = !isCollapsed;\n    if (collapsed === undefined) setInternal(next);\n    onCollapsedChange?.(next);\n  };\n  return (\n    <LayoutContext.Provider value={{ collapsed: isCollapsed, toggle }}>\n      <div\n        {...props}\n        className={['chayns-app-layout', isCollapsed && 'chayns-app-layout--collapsed', className]\n          .filter(Boolean)\n          .join(' ')}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </LayoutContext.Provider>\n  );\n});\nexport const AppLayout = Object.assign(Root, {\n  CollapseToggle,\n  Content,\n  Header,\n  Logo,\n  Navigation: Object.assign(Navigation, { Item: NavigationItem }),\n});\n"],"mappings":"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"}

package/dist/components/app-layout/AppLayout.types.d.ts

@@ -1,103 +1,23 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-/**
- * @description A FontAwesome Classic icon name in its Regular form, used for
- * navigation item icons in `AppLayout`.
- */
-export type AppLayoutIcon = `fa-${string}`;
-/**
- * @description A single, recursively composable navigation entry in the
- * `AppLayout` sidebar. Parent and child items each act as their own action
- * button; a parent item with `children` additionally exposes a separate
- * disclosure control, so activating the parent's own action and toggling its
- * nested children are independent.
- */
-export interface AppLayoutItem {
-    /**
-     * @description Stable identifier passed to `onClick` and compared against
-     * `activeItemId`.
-     */
-    id: string;
-    /**
-     * @description Visible, localized navigation label. Remains accessible for
-     * each item even while the sidebar is collapsed.
-     */
-    name: string;
-    /**
-     * @description FontAwesome Classic icon name shown for this item, including
-     * in the collapsed sidebar.
-     */
-    icon: AppLayoutIcon;
-    /**
-     * @description Nested child items, rendered behind this item's own
-     * disclosure control and hidden while the sidebar is collapsed.
-     */
-    children?: AppLayoutItem[];
+export interface AppLayoutProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    children: ReactNode;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export type AppLayoutHeaderProps = ComponentPropsWithRef<'header'>;
+export type AppLayoutLogoProps = ComponentPropsWithRef<'img'>;
+export type AppLayoutNavigationProps = ComponentPropsWithRef<'nav'>;
+export interface AppLayoutNavigationItemProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'ref' | 'type'> {
+    label: ReactNode;
+    children?: ReactNode;
+    href?: string;
+    isActive?: boolean;
 }
-/**
- * @description Props for the top-level application shell: a header with a
- * logo, a collapsible sidebar of recursively nested navigation items, and a
- * consumer-owned content area. Forwards all remaining native `div` props
- * (except `children` and `onClick`, which have `AppLayout`-specific meaning),
- * `className` and `ref`.
- */
-export interface AppLayoutProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onClick'> {
-    /**
-     * @description URL of an image or SVG resource rendered as the header logo.
-     * Always decorative (`alt=""`); it does not itself provide any accessible
-     * name.
-     */
-    logo: string;
-    /**
-     * @description Top-level navigation items, recursively composable via each
-     * item's own `children`. An empty array renders an empty navigation list.
-     */
-    items: AppLayoutItem[];
-    /**
-     * @description Called with an item's `id` when that item's own action is
-     * activated, for both parent and child items. Toggling a parent's
-     * disclosure control does not call `onClick`.
-     */
-    onClick: (id: string) => void;
-    /**
-     * @description Localized accessible name for the navigation landmark.
-     */
-    navigationLabel: string;
-    /**
-     * @description Localized accessible name for the sidebar toggle control
-     * when activating it will collapse the sidebar.
-     */
+export type AppLayoutContentProps = ComponentPropsWithRef<'main'>;
+export interface AppLayoutCollapseToggleProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'type' | 'aria-label'> {
     collapseLabel: string;
-    /**
-     * @description Localized accessible name for the sidebar toggle control
-     * when activating it will expand the sidebar.
-     */
     expandLabel: string;
-    /**
-     * @description `id` of the currently active navigation item. `AppLayout`
-     * only renders the active visual state; it does not derive or own
-     * activeness from routing.
-     */
-    activeItemId?: string;
-    /**
-     * @description Consumer-provided content rendered in the area beside the
-     * sidebar. Owns its own internal semantics and scrolling.
-     */
     children?: ReactNode;
-    /**
-     * @description Controlled collapsed state of the sidebar.
-     */
-    collapsed?: boolean;
-    /**
-     * @description Uncontrolled initial collapsed state of the sidebar.
-     * Persisting the collapsed state across sessions is outside `AppLayout`'s
-     * responsibility.
-     * @default false
-     */
-    defaultCollapsed?: boolean;
-    /**
-     * @description Called with the next collapsed state when the sidebar
-     * toggle is activated, for both the controlled and uncontrolled usage.
-     */
-    onCollapsedChange?: (collapsed: boolean) => void;
 }
 //# sourceMappingURL=AppLayout.types.d.ts.map

package/dist/components/app-layout/AppLayout.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,MAAM,EAAE,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChG;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IAEvB;;;;OAIG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD"}
+{"version":3,"file":"AppLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AACD,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACnE,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAC9D,MAAM,MAAM,wBAAwB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AACpE,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CACxD,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,KAAK,GAAG,MAAM,CAC5B;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAClE,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CACxD,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,MAAM,GAAG,YAAY,CACnC;IACC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.d.ts

@@ -1,6 +1,6 @@
-import type { AppLayoutItem } from '../AppLayout.types.js';
+type AppLayoutIconName = `fa-${string}`;
 declare const AppLayoutIcon: ({ icon }: {
-    icon: AppLayoutItem["icon"];
+    icon: AppLayoutIconName;
 }) => import("react").JSX.Element;
 export default AppLayoutIcon;
 //# sourceMappingURL=AppLayoutIcon.d.ts.map

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayoutIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,QAAA,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,gCAS/D,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AppLayoutIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx"],"names":[],"mappings":"AAAA,KAAK,iBAAiB,GAAG,MAAM,MAAM,EAAE,CAAC;AAExC,QAAA,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,gCAS3D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/tabs/Tabs.d.ts

@@ -1,3 +1,8 @@
-import type { TabsProps } from './Tabs.types.js';
-export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { TabsPanelProps, TabsProps, TabsTabProps } from './Tabs.types.js';
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Add: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Tab: import("react").ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,eAAO,MAAM,IAAI,mHA6Gf,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,cAAc,EACd,SAAS,EACT,YAAY,EACb,MAAM,iBAAiB,CAAC;AAuJzB,eAAO,MAAM,IAAI;;;;;CAAiD,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -1,101 +1,127 @@
-import TabsIcon from "./tabs-icon/TabsIcon.js";
-import { forwardRef, useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/tabs/Tabs.tsx
-var Tabs = forwardRef(function Tabs({ addLabel, className, onAdd, tabs, ...rootProps }, ref) {
-	const baseId = useId();
-	const tabRefs = useRef([]);
-	const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.isActive));
-	const rootClassName = ["chayns-tabs", className].filter(Boolean).join(" ");
-	const focusTab = (index) => {
-		const nextIndex = (index + tabs.length) % tabs.length;
-		tabs[nextIndex]?.onClick();
-		tabRefs.current[nextIndex]?.focus();
-	};
-	const handleKeyDown = (event, index) => {
-		if ((event.key === "Delete" || event.key === "Backspace") && tabs[index]?.onRemove) {
+var TabsContext = createContext(null);
+function useTabs(part) {
+	const context = useContext(TabsContext);
+	if (context === null) throw new Error(`Tabs.${part} must be rendered within Tabs.`);
+	return context;
+}
+var List = forwardRef(function List({ children, className, ...props }, ref) {
+	useTabs("List");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: ["chayns-tabs__list", className].filter(Boolean).join(" "),
+		ref,
+		role: "tablist",
+		children
+	});
+});
+var Tab = forwardRef(function Tab({ children, className, onRemove, onClick, value, ...props }, ref) {
+	const tabs = useTabs("Tab");
+	const selected = tabs.value === value;
+	const tabId = `${tabs.baseId}-tab-${value}`;
+	const panelId = `${tabs.baseId}-panel-${value}`;
+	function handleKeyDown(event) {
+		if ((event.key === "Delete" || event.key === "Backspace") && onRemove) {
 			event.preventDefault();
-			tabs[index].onRemove();
+			onRemove();
 			return;
 		}
-		if (tabs.length === 0) return;
-		const nextIndex = event.key === "ArrowRight" || event.key === "ArrowDown" ? index + 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : -1;
-		if (nextIndex === -1) return;
-		event.preventDefault();
-		focusTab(nextIndex);
-	};
-	const activeTab = tabs[activeIndex];
-	const activeTabId = activeTab ? `${baseId}-tab-${activeIndex}` : void 0;
-	const activePanelId = activeTab ? `${baseId}-panel-${activeIndex}` : void 0;
-	return /* @__PURE__ */ jsxs("div", {
-		...rootProps,
-		className: rootClassName,
+		const values = [...tabs.tabs.keys()];
+		const index = values.indexOf(value);
+		const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? values.length - 1 : event.key === "ArrowRight" || event.key === "ArrowDown" ? (index + 1) % values.length : event.key === "ArrowLeft" || event.key === "ArrowUp" ? (index - 1 + values.length) % values.length : -1;
+		if (nextIndex >= 0) {
+			event.preventDefault();
+			const next = values[nextIndex];
+			if (next) {
+				tabs.select(next);
+				tabs.tabs.get(next)?.focus();
+			}
+		}
+	}
+	function setRef(node) {
+		if (node) tabs.tabs.set(value, node);
+		else tabs.tabs.delete(value);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"aria-controls": panelId,
+		"aria-selected": selected,
+		className: [
+			"chayns-tabs__tab",
+			selected && "chayns-tabs__tab--active",
+			className
+		].filter(Boolean).join(" "),
+		id: tabId,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) tabs.select(value);
+		},
+		onKeyDown: handleKeyDown,
+		ref: setRef,
+		role: "tab",
+		tabIndex: selected ? 0 : -1,
+		type: "button",
+		children
+	});
+});
+var Panel = forwardRef(function Panel({ children, className, value, ...props }, ref) {
+	const tabs = useTabs("Panel");
+	if (tabs.value !== value) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-labelledby": `${tabs.baseId}-tab-${value}`,
+		className: ["chayns-tabs__panel", className].filter(Boolean).join(" "),
+		id: `${tabs.baseId}-panel-${value}`,
 		ref,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "chayns-tabs__bar",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "chayns-tabs__list",
-				role: "tablist",
-				children: tabs.map((tab, index) => {
-					const tabId = `${baseId}-tab-${index}`;
-					const panelId = `${baseId}-panel-${index}`;
-					const isSelected = index === activeIndex;
-					return /* @__PURE__ */ jsx("div", {
-						className: "chayns-tabs__item",
-						role: "presentation",
-						children: /* @__PURE__ */ jsxs("button", {
-							"aria-controls": isSelected ? panelId : void 0,
-							"aria-selected": isSelected,
-							className: `chayns-tabs__tab${isSelected ? " chayns-tabs__tab--active" : ""}`,
-							id: tabId,
-							onClick: (event) => {
-								if (event.target.closest("[data-tabs-remove]")) {
-									tab.onRemove?.();
-									return;
-								}
-								tab.onClick();
-							},
-							onKeyDown: (event) => handleKeyDown(event, index),
-							ref: (element) => {
-								tabRefs.current[index] = element;
-							},
-							role: "tab",
-							tabIndex: isSelected ? 0 : -1,
-							type: "button",
-							children: [
-								/* @__PURE__ */ jsx(TabsIcon, { icon: tab.icon }),
-								/* @__PURE__ */ jsx("span", {
-									className: "chayns-tabs__label",
-									children: tab.name
-								}),
-								tab.onRemove ? /* @__PURE__ */ jsx("span", {
-									"aria-hidden": "true",
-									className: "chayns-tabs__remove",
-									"data-tabs-remove": true,
-									children: /* @__PURE__ */ jsx(TabsIcon, { icon: "fa-xmark" })
-								}) : null
-							]
-						})
-					}, tabId);
-				})
-			}), onAdd && addLabel ? /* @__PURE__ */ jsx("button", {
-				"aria-label": addLabel,
-				className: "chayns-tabs__add",
-				onClick: onAdd,
-				type: "button",
-				children: /* @__PURE__ */ jsx(TabsIcon, { icon: "fa-plus" })
-			}) : null]
-		}), activeTab && activeTabId && activePanelId ? /* @__PURE__ */ jsx("div", {
-			"aria-labelledby": activeTabId,
-			className: "chayns-tabs__panel",
-			id: activePanelId,
-			role: "tabpanel",
-			tabIndex: 0,
-			children: activeTab.content
-		}) : null]
+		role: "tabpanel",
+		tabIndex: 0,
+		children
 	});
 });
-Tabs.displayName = "Tabs";
+var Add = forwardRef(function Add({ children, className, ...props }, ref) {
+	useTabs("Add");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		className: ["chayns-tabs__add", className].filter(Boolean).join(" "),
+		ref,
+		type: "button",
+		children
+	});
+});
+var Root = forwardRef(function Root({ children, className, defaultValue, onValueChange, value, ...props }, ref) {
+	const baseId = useId();
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [tabMap] = useState(() => /* @__PURE__ */ new Map());
+	const selectedValue = value ?? internalValue;
+	const select = (next) => {
+		if (value === void 0) setInternalValue(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			baseId,
+			select,
+			tabs: tabMap,
+			value: selectedValue
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className: ["chayns-tabs", className].filter(Boolean).join(" "),
+			ref,
+			children
+		})
+	});
+});
+var Tabs = Object.assign(Root, {
+	Add,
+	List,
+	Panel,
+	Tab
+});
 //#endregion
 export { Tabs };
 

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { forwardRef, useId, useRef } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport type { TabsProps } from './Tabs.types.js';\nimport TabsIcon from './tabs-icon/TabsIcon.js';\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { addLabel, className, onAdd, tabs, ...rootProps },\n  ref,\n) {\n  const baseId = useId();\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const activeIndex = Math.max(\n    0,\n    tabs.findIndex((tab) => tab.isActive),\n  );\n  const rootClassName = ['chayns-tabs', className].filter(Boolean).join(' ');\n\n  const focusTab = (index: number) => {\n    const nextIndex = (index + tabs.length) % tabs.length;\n    tabs[nextIndex]?.onClick();\n    tabRefs.current[nextIndex]?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    if ((event.key === 'Delete' || event.key === 'Backspace') && tabs[index]?.onRemove) {\n      event.preventDefault();\n      tabs[index].onRemove();\n      return;\n    }\n\n    if (tabs.length === 0) return;\n\n    const nextIndex =\n      event.key === 'ArrowRight' || event.key === 'ArrowDown'\n        ? index + 1\n        : event.key === 'ArrowLeft' || event.key === 'ArrowUp'\n          ? index - 1\n          : event.key === 'Home'\n            ? 0\n            : event.key === 'End'\n              ? tabs.length - 1\n              : -1;\n\n    if (nextIndex === -1) return;\n    event.preventDefault();\n    focusTab(nextIndex);\n  };\n\n  const activeTab = tabs[activeIndex];\n  const activeTabId = activeTab ? `${baseId}-tab-${activeIndex}` : undefined;\n  const activePanelId = activeTab ? `${baseId}-panel-${activeIndex}` : undefined;\n\n  return (\n    <div {...rootProps} className={rootClassName} ref={ref}>\n      <div className=\"chayns-tabs__bar\">\n        <div className=\"chayns-tabs__list\" role=\"tablist\">\n          {tabs.map((tab, index) => {\n            const tabId = `${baseId}-tab-${index}`;\n            const panelId = `${baseId}-panel-${index}`;\n            const isSelected = index === activeIndex;\n\n            return (\n              <div className=\"chayns-tabs__item\" key={tabId} role=\"presentation\">\n                <button\n                  aria-controls={isSelected ? panelId : undefined}\n                  aria-selected={isSelected}\n                  className={`chayns-tabs__tab${isSelected ? ' chayns-tabs__tab--active' : ''}`}\n                  id={tabId}\n                  onClick={(event) => {\n                    if ((event.target as HTMLElement).closest('[data-tabs-remove]')) {\n                      tab.onRemove?.();\n                      return;\n                    }\n                    tab.onClick();\n                  }}\n                  onKeyDown={(event) => handleKeyDown(event, index)}\n                  ref={(element) => {\n                    tabRefs.current[index] = element;\n                  }}\n                  role=\"tab\"\n                  tabIndex={isSelected ? 0 : -1}\n                  type=\"button\"\n                >\n                  <TabsIcon icon={tab.icon} />\n                  <span className=\"chayns-tabs__label\">{tab.name}</span>\n                  {tab.onRemove ? (\n                    <span aria-hidden=\"true\" className=\"chayns-tabs__remove\" data-tabs-remove>\n                      <TabsIcon icon=\"fa-xmark\" />\n                    </span>\n                  ) : null}\n                </button>\n              </div>\n            );\n          })}\n        </div>\n        {onAdd && addLabel ? (\n          <button aria-label={addLabel} className=\"chayns-tabs__add\" onClick={onAdd} type=\"button\">\n            <TabsIcon icon=\"fa-plus\" />\n          </button>\n        ) : null}\n      </div>\n      {activeTab && activeTabId && activePanelId ? (\n        <div\n          aria-labelledby={activeTabId}\n          className=\"chayns-tabs__panel\"\n          id={activePanelId}\n          role=\"tabpanel\"\n          tabIndex={0}\n        >\n          {activeTab.content}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport type {\n  TabsAddProps,\n  TabsListProps,\n  TabsPanelProps,\n  TabsProps,\n  TabsTabProps,\n} from './Tabs.types.js';\n\ninterface TabsContextValue {\n  baseId: string;\n  select: (value: string) => void;\n  tabs: Map<string, HTMLButtonElement>;\n  value: string | undefined;\n}\nconst TabsContext = createContext<TabsContextValue | null>(null);\nfunction useTabs(part: string) {\n  const context = useContext(TabsContext);\n  if (context === null) throw new Error(`Tabs.${part} must be rendered within Tabs.`);\n  return context;\n}\n\nconst List = forwardRef<HTMLDivElement, TabsListProps>(function List(\n  { children, className, ...props },\n  ref,\n) {\n  useTabs('List');\n  return (\n    <div\n      {...props}\n      className={['chayns-tabs__list', className].filter(Boolean).join(' ')}\n      ref={ref}\n      role=\"tablist\"\n    >\n      {children}\n    </div>\n  );\n});\nconst Tab = forwardRef<HTMLButtonElement, TabsTabProps>(function Tab(\n  { children, className, onRemove, onClick, value, ...props },\n  ref,\n) {\n  const tabs = useTabs('Tab');\n  const selected = tabs.value === value;\n  const tabId = `${tabs.baseId}-tab-${value}`;\n  const panelId = `${tabs.baseId}-panel-${value}`;\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    if ((event.key === 'Delete' || event.key === 'Backspace') && onRemove) {\n      event.preventDefault();\n      onRemove();\n      return;\n    }\n    const values = [...tabs.tabs.keys()];\n    const index = values.indexOf(value);\n    const nextIndex =\n      event.key === 'Home'\n        ? 0\n        : event.key === 'End'\n          ? values.length - 1\n          : event.key === 'ArrowRight' || event.key === 'ArrowDown'\n            ? (index + 1) % values.length\n            : event.key === 'ArrowLeft' || event.key === 'ArrowUp'\n              ? (index - 1 + values.length) % values.length\n              : -1;\n    if (nextIndex >= 0) {\n      event.preventDefault();\n      const next = values[nextIndex];\n      if (next) {\n        tabs.select(next);\n        tabs.tabs.get(next)?.focus();\n      }\n    }\n  }\n  function setRef(node: HTMLButtonElement | null) {\n    if (node) tabs.tabs.set(value, node);\n    else tabs.tabs.delete(value);\n    if (typeof ref === 'function') ref(node);\n    else if (ref) ref.current = node;\n  }\n  return (\n    <button\n      {...props}\n      aria-controls={panelId}\n      aria-selected={selected}\n      className={['chayns-tabs__tab', selected && 'chayns-tabs__tab--active', className]\n        .filter(Boolean)\n        .join(' ')}\n      id={tabId}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) tabs.select(value);\n      }}\n      onKeyDown={handleKeyDown}\n      ref={setRef}\n      role=\"tab\"\n      tabIndex={selected ? 0 : -1}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\nconst Panel = forwardRef<HTMLDivElement, TabsPanelProps>(function Panel(\n  { children, className, value, ...props },\n  ref,\n) {\n  const tabs = useTabs('Panel');\n  if (tabs.value !== value) return null;\n  return (\n    <div\n      {...props}\n      aria-labelledby={`${tabs.baseId}-tab-${value}`}\n      className={['chayns-tabs__panel', className].filter(Boolean).join(' ')}\n      id={`${tabs.baseId}-panel-${value}`}\n      ref={ref}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n});\nconst Add = forwardRef<HTMLButtonElement, TabsAddProps>(function Add(\n  { children, className, ...props },\n  ref,\n) {\n  useTabs('Add');\n  return (\n    <button\n      {...props}\n      className={['chayns-tabs__add', className].filter(Boolean).join(' ')}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\nconst Root = forwardRef<HTMLDivElement, TabsProps>(function Root(\n  { children, className, defaultValue, onValueChange, value, ...props },\n  ref,\n) {\n  const baseId = useId();\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [tabMap] = useState(() => new Map<string, HTMLButtonElement>());\n  const selectedValue = value ?? internalValue;\n  const select = (next: string) => {\n    if (value === undefined) setInternalValue(next);\n    onValueChange?.(next);\n  };\n  return (\n    <TabsContext.Provider value={{ baseId, select, tabs: tabMap, value: selectedValue }}>\n      <div {...props} className={['chayns-tabs', className].filter(Boolean).join(' ')} ref={ref}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n});\nexport const Tabs = Object.assign(Root, { Add, List, Panel, Tab });\n"],"mappings":";;;AAgBA,IAAM,cAAc,cAAuC,IAAI;AAC/D,SAAS,QAAQ,MAAc;CAC7B,MAAM,UAAU,WAAW,WAAW;CACtC,IAAI,YAAY,MAAM,MAAM,IAAI,MAAM,QAAQ,KAAK,+BAA+B;CAClF,OAAO;AACT;AAEA,IAAM,OAAO,WAA0C,SAAS,KAC9D,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,QAAQ,MAAM;CACd,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,CAAC,qBAAqB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC/D;EACL,MAAK;EAEJ;CACE,CAAA;AAET,CAAC;AACD,IAAM,MAAM,WAA4C,SAAS,IAC/D,EAAE,UAAU,WAAW,UAAU,SAAS,OAAO,GAAG,SACpD,KACA;CACA,MAAM,OAAO,QAAQ,KAAK;CAC1B,MAAM,WAAW,KAAK,UAAU;CAChC,MAAM,QAAQ,GAAG,KAAK,OAAO,OAAO;CACpC,MAAM,UAAU,GAAG,KAAK,OAAO,SAAS;CACxC,SAAS,cAAc,OAAyC;EAC9D,KAAK,MAAM,QAAQ,YAAY,MAAM,QAAQ,gBAAgB,UAAU;GACrE,MAAM,eAAe;GACrB,SAAS;GACT;EACF;EACA,MAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,CAAC;EACnC,MAAM,QAAQ,OAAO,QAAQ,KAAK;EAClC,MAAM,YACJ,MAAM,QAAQ,SACV,IACA,MAAM,QAAQ,QACZ,OAAO,SAAS,IAChB,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,eACzC,QAAQ,KAAK,OAAO,SACrB,MAAM,QAAQ,eAAe,MAAM,QAAQ,aACxC,QAAQ,IAAI,OAAO,UAAU,OAAO,SACrC;EACZ,IAAI,aAAa,GAAG;GAClB,MAAM,eAAe;GACrB,MAAM,OAAO,OAAO;GACpB,IAAI,MAAM;IACR,KAAK,OAAO,IAAI;IAChB,KAAK,KAAK,IAAI,IAAI,CAAC,EAAE,MAAM;GAC7B;EACF;CACF;CACA,SAAS,OAAO,MAAgC;EAC9C,IAAI,MAAM,KAAK,KAAK,IAAI,OAAO,IAAI;OAC9B,KAAK,KAAK,OAAO,KAAK;EAC3B,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B;CACA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,iBAAe;EACf,iBAAe;EACf,WAAW;GAAC;GAAoB,YAAY;GAA4B;EAAS,CAAC,CAC/E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,IAAI;EACJ,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,KAAK,OAAO,KAAK;EAChD;EACA,WAAW;EACX,KAAK;EACL,MAAK;EACL,UAAU,WAAW,IAAI;EACzB,MAAK;EAEJ;CACK,CAAA;AAEZ,CAAC;AACD,IAAM,QAAQ,WAA2C,SAAS,MAChE,EAAE,UAAU,WAAW,OAAO,GAAG,SACjC,KACA;CACA,MAAM,OAAO,QAAQ,OAAO;CAC5B,IAAI,KAAK,UAAU,OAAO,OAAO;CACjC,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,mBAAiB,GAAG,KAAK,OAAO,OAAO;EACvC,WAAW,CAAC,sBAAsB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACrE,IAAI,GAAG,KAAK,OAAO,SAAS;EACvB;EACL,MAAK;EACL,UAAU;EAET;CACE,CAAA;AAET,CAAC;AACD,IAAM,MAAM,WAA4C,SAAS,IAC/D,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,QAAQ,KAAK;CACb,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,CAAC,oBAAoB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC9D;EACL,MAAK;EAEJ;CACK,CAAA;AAEZ,CAAC;AACD,IAAM,OAAO,WAAsC,SAAS,KAC1D,EAAE,UAAU,WAAW,cAAc,eAAe,OAAO,GAAG,SAC9D,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,CAAC,UAAU,+BAAe,IAAI,IAA+B,CAAC;CACpE,MAAM,gBAAgB,SAAS;CAC/B,MAAM,UAAU,SAAiB;EAC/B,IAAI,UAAU,KAAA,GAAW,iBAAiB,IAAI;EAC9C,gBAAgB,IAAI;CACtB;CACA,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE;GAAQ;GAAQ,MAAM;GAAQ,OAAO;EAAc;EAChF,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAO,WAAW,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAAQ;GACnF;EACE,CAAA;CACe,CAAA;AAE1B,CAAC;AACD,IAAa,OAAO,OAAO,OAAO,MAAM;CAAE;CAAK;CAAM;CAAO;AAAI,CAAC"}

package/dist/components/tabs/Tabs.types.d.ts

@@ -1,69 +1,19 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-/**
- * @description A FontAwesome Classic icon name in its Regular form, used for
- * tab entry icons.
- */
-export type TabsIcon = `fa-${string}`;
-/**
- * @description A single tab: its trigger button and the peer content it
- * represents. Selection is externally owned — `Tabs` never infers or
- * reconciles `isActive` itself; the consumer must update it on `onClick`.
- */
-export interface TabsEntry {
-    /**
-     * @description FontAwesome Classic icon name shown on the tab trigger.
-     */
-    icon: TabsIcon;
-    /**
-     * @description Visible, already-resolved localized tab label.
-     */
-    name: string;
-    /**
-     * @description Whether this entry is the currently selected tab. Exactly
-     * one entry in a `tabs` array is expected to be active at a time; the
-     * consumer, not `Tabs`, is responsible for keeping this consistent.
-     */
-    isActive: boolean;
-    /**
-     * @description Called when this tab's trigger is activated. The consumer
-     * is expected to update `isActive` in response.
-     */
-    onClick: () => void;
-    /**
-     * @description Optional remove handler. When supplied, a remove affordance
-     * is rendered as part of the same native tab button, and `Delete` or
-     * `Backspace` triggers it while the tab is focused.
-     */
+export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export type TabsListProps = ComponentPropsWithRef<'div'>;
+export interface TabsTabProps extends Omit<ComponentPropsWithRef<'button'>, 'aria-controls' | 'aria-selected' | 'children' | 'role' | 'tabIndex' | 'type'> {
+    value: string;
+    children: ReactNode;
     onRemove?: () => void;
-    /**
-     * @description Peer panel content for this tab. Only the active entry's
-     * `content` is rendered.
-     */
-    content: ReactNode;
 }
-/**
- * @description Props for a tabbed layout pattern that switches between peer
- * content regions. `Tabs` owns no routing, persistence, business state or
- * translation; selection state lives entirely in `tabs[].isActive`. Forwards
- * remaining native `div` props (except `children`, which `Tabs` derives from
- * `tabs`), `className` and `ref`.
- */
-export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
-    /**
-     * @description Ordered tab entries; exactly one should have `isActive`
-     * `true`.
-     */
-    tabs: TabsEntry[];
-    /**
-     * @description Optional handler that renders an add-tab trigger when
-     * supplied together with `addLabel`.
-     */
-    onAdd?: () => void;
-    /**
-     * @description Localized accessible name for the add-tab trigger. Required
-     * for the add trigger to render; supplying `onAdd` without `addLabel` does
-     * not render the control.
-     */
-    addLabel?: string;
+export interface TabsPanelProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-labelledby' | 'children' | 'role'> {
+    value: string;
+    children: ReactNode;
 }
+export type TabsAddProps = ComponentPropsWithRef<'button'>;
 //# sourceMappingURL=Tabs.types.d.ts.map

package/dist/components/tabs/Tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,EAAE,CAAC;AAEtC;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AACD,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,eAAe,GAAG,eAAe,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAC9E;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,iBAAiB,GAAG,UAAU,GAAG,MAAM,CACxC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/components/tabs/tabs-icon/TabsIcon.d.ts

@@ -1,6 +1,6 @@
-import type { TabsEntry } from '../Tabs.types.js';
+type TabsIconName = `fa-${string}`;
 declare const TabsIcon: ({ icon }: {
-    icon: TabsEntry["icon"];
+    icon: TabsIconName;
 }) => import("react").JSX.Element;
 export default TabsIcon;
 //# sourceMappingURL=TabsIcon.d.ts.map

package/dist/components/tabs/tabs-icon/TabsIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-icon/TabsIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,QAAQ,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;CAAE,gCAItD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabsIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-icon/TabsIcon.tsx"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG,MAAM,MAAM,EAAE,CAAC;AAEnC,QAAA,MAAM,QAAQ,GAAI,UAAU;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,gCAIjD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { AppLayout } from './components/app-layout/AppLayout.js';
-export type { AppLayoutIcon, AppLayoutItem, AppLayoutProps, } from './components/app-layout/AppLayout.types.js';
+export type { AppLayoutCollapseToggleProps, AppLayoutContentProps, AppLayoutHeaderProps, AppLayoutLogoProps, AppLayoutNavigationItemProps, AppLayoutNavigationProps, AppLayoutProps, } from './components/app-layout/AppLayout.types.js';
 export { Tabs } from './components/tabs/Tabs.js';
-export type { TabsEntry, TabsIcon, TabsProps } from './components/tabs/Tabs.types.js';
+export type { TabsAddProps, TabsListProps, TabsPanelProps, TabsProps, TabsTabProps, } from './components/tabs/Tabs.types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,GACf,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,YAAY,EACV,4BAA4B,EAC5B,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,EAClB,4BAA4B,EAC5B,wBAAwB,EACxB,cAAc,GACf,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,YAAY,EACV,YAAY,EACZ,aAAa,EACb,cAAc,EACd,SAAS,EACT,YAAY,GACb,MAAM,iCAAiC,CAAC"}

package/dist/tabs.css

@@ -123,9 +123,10 @@
     flex: 1 1 auto;
     min-inline-size: 0;
     min-block-size: 0;
-    padding: var(--sp-4);
+    padding: var(--sp-2);
     overflow: auto;
     background: var(--surface);
+    color: var(--text);
   }
 
   @container (max-width: 20rem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/layout",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Accessible application layout components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -28,11 +28,11 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@chayns-ui/core": ">=0.3.0",
+    "@chayns-ui/core": ">=0.4.0",
     "react": ">=18 <20"
   },
   "devDependencies": {
-    "@chayns-ui/core": "0.3.0"
+    "@chayns-ui/core": "0.4.0"
   },
   "engines": {
     "node": ">=18"

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.js

@@ -1,17 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx
-var AppLayoutIcon = ({ icon }) => /* @__PURE__ */ jsxs("span", {
-	"aria-hidden": "true",
-	className: "chayns-app-layout__icon",
-	children: [/* @__PURE__ */ jsx("span", {
-		className: "chayns-app-layout__weight",
-		children: /* @__PURE__ */ jsx("i", { className: `far ${icon}` })
-	}), /* @__PURE__ */ jsx("span", {
-		className: "chayns-app-layout__weight chayns-app-layout__weight--active",
-		children: /* @__PURE__ */ jsx("i", { className: `fas ${icon}` })
-	})]
-});
-//#endregion
-export { AppLayoutIcon as default };
-
-//# sourceMappingURL=AppLayoutIcon.js.map

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppLayoutIcon.js","names":[],"sources":["../../../../src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx"],"sourcesContent":["import type { AppLayoutItem } from '../AppLayout.types.js';\n\nconst AppLayoutIcon = ({ icon }: { icon: AppLayoutItem['icon'] }) => (\n  <span aria-hidden=\"true\" className=\"chayns-app-layout__icon\">\n    <span className=\"chayns-app-layout__weight\">\n      <i className={`far ${icon}`} />\n    </span>\n    <span className=\"chayns-app-layout__weight chayns-app-layout__weight--active\">\n      <i className={`fas ${icon}`} />\n    </span>\n  </span>\n);\n\nexport default AppLayoutIcon;\n"],"mappings":";;AAEA,IAAM,iBAAiB,EAAE,WACvB,qBAAC,QAAD;CAAM,eAAY;CAAO,WAAU;CAAnC,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;CAC1B,CAAA,GACN,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;CAC1B,CAAA,CACF"}

package/dist/components/app-layout/navigation-items/NavigationItems.d.ts

@@ -1,13 +0,0 @@
-import type { AppLayoutItem } from '../AppLayout.types.js';
-interface NavigationItemsProps {
-    items: AppLayoutItem[];
-    activeItemId?: string | undefined;
-    collapsed: boolean;
-    onClick: (id: string) => void;
-    expandedIds: ReadonlySet<string>;
-    onToggle: (id: string) => void;
-    parentId?: string;
-}
-declare const NavigationItems: ({ activeItemId, collapsed, expandedIds, items, onClick, onToggle, parentId, }: NavigationItemsProps) => import("react").JSX.Element;
-export default NavigationItems;
-//# sourceMappingURL=NavigationItems.d.ts.map

package/dist/components/app-layout/navigation-items/NavigationItems.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/app-layout/navigation-items/NavigationItems.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,oBAAoB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,eAAe,GAAI,+EAQtB,oBAAoB,gCAoEtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/app-layout/navigation-items/NavigationItems.js

@@ -1,54 +0,0 @@
-import AppLayoutIcon from "../app-layout-icon/AppLayoutIcon.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/app-layout/navigation-items/NavigationItems.tsx
-var NavigationItems = ({ activeItemId, collapsed, expandedIds, items, onClick, onToggle, parentId }) => /* @__PURE__ */ jsx("ul", {
-	className: "chayns-app-layout__list",
-	children: items.map((item) => {
-		const hasChildren = Boolean(item.children?.length);
-		const isExpanded = expandedIds.has(item.id);
-		const panelId = `${parentId ?? "root"}-${item.id}-children`;
-		return /* @__PURE__ */ jsxs("li", {
-			className: `chayns-app-layout__item${activeItemId === item.id ? " chayns-app-layout__item--active" : ""}`,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "chayns-app-layout__row",
-				children: [/* @__PURE__ */ jsxs("button", {
-					"aria-current": activeItemId === item.id ? "page" : void 0,
-					"aria-label": item.name,
-					className: "chayns-app-layout__action",
-					onClick: () => onClick(item.id),
-					type: "button",
-					children: [/* @__PURE__ */ jsx(AppLayoutIcon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
-						className: `chayns-app-layout__label${collapsed ? " chayns-app-layout__label--hidden" : ""}`,
-						children: item.name
-					})]
-				}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("button", {
-					"aria-controls": panelId,
-					"aria-expanded": isExpanded,
-					"aria-label": item.name,
-					className: "chayns-app-layout__disclosure",
-					onClick: () => onToggle(item.id),
-					type: "button",
-					children: /* @__PURE__ */ jsx(AppLayoutIcon, { icon: "fa-chevron-down" })
-				}) : null]
-			}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("div", {
-				"aria-hidden": !isExpanded,
-				className: `chayns-app-layout__children${isExpanded ? " chayns-app-layout__children--open" : ""}`,
-				id: panelId,
-				inert: !isExpanded,
-				children: /* @__PURE__ */ jsx(NavigationItems, {
-					activeItemId,
-					collapsed,
-					expandedIds,
-					items: item.children ?? [],
-					onClick,
-					onToggle,
-					parentId: item.id
-				})
-			}) : null]
-		}, item.id);
-	})
-});
-//#endregion
-export { NavigationItems as default };
-
-//# sourceMappingURL=NavigationItems.js.map

package/dist/components/app-layout/navigation-items/NavigationItems.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationItems.js","names":[],"sources":["../../../../src/components/app-layout/navigation-items/NavigationItems.tsx"],"sourcesContent":["import AppLayoutIcon from '../app-layout-icon/AppLayoutIcon.js';\nimport type { AppLayoutItem } from '../AppLayout.types.js';\n\ninterface NavigationItemsProps {\n  items: AppLayoutItem[];\n  activeItemId?: string | undefined;\n  collapsed: boolean;\n  onClick: (id: string) => void;\n  expandedIds: ReadonlySet<string>;\n  onToggle: (id: string) => void;\n  parentId?: string;\n}\n\nconst NavigationItems = ({\n  activeItemId,\n  collapsed,\n  expandedIds,\n  items,\n  onClick,\n  onToggle,\n  parentId,\n}: NavigationItemsProps) => (\n  <ul className=\"chayns-app-layout__list\">\n    {items.map((item) => {\n      const hasChildren = Boolean(item.children?.length);\n      const isExpanded = expandedIds.has(item.id);\n      const panelId = `${parentId ?? 'root'}-${item.id}-children`;\n\n      return (\n        <li\n          className={`chayns-app-layout__item${\n            activeItemId === item.id ? ' chayns-app-layout__item--active' : ''\n          }`}\n          key={item.id}\n        >\n          <div className=\"chayns-app-layout__row\">\n            <button\n              aria-current={activeItemId === item.id ? 'page' : undefined}\n              aria-label={item.name}\n              className=\"chayns-app-layout__action\"\n              onClick={() => onClick(item.id)}\n              type=\"button\"\n            >\n              <AppLayoutIcon icon={item.icon} />\n              <span\n                className={`chayns-app-layout__label${\n                  collapsed ? ' chayns-app-layout__label--hidden' : ''\n                }`}\n              >\n                {item.name}\n              </span>\n            </button>\n            {hasChildren && !collapsed ? (\n              <button\n                aria-controls={panelId}\n                aria-expanded={isExpanded}\n                aria-label={item.name}\n                className=\"chayns-app-layout__disclosure\"\n                onClick={() => onToggle(item.id)}\n                type=\"button\"\n              >\n                <AppLayoutIcon icon=\"fa-chevron-down\" />\n              </button>\n            ) : null}\n          </div>\n          {hasChildren && !collapsed ? (\n            <div\n              aria-hidden={!isExpanded}\n              className={`chayns-app-layout__children${\n                isExpanded ? ' chayns-app-layout__children--open' : ''\n              }`}\n              id={panelId}\n              inert={!isExpanded}\n            >\n              <NavigationItems\n                activeItemId={activeItemId}\n                collapsed={collapsed}\n                expandedIds={expandedIds}\n                items={item.children ?? []}\n                onClick={onClick}\n                onToggle={onToggle}\n                parentId={item.id}\n              />\n            </div>\n          ) : null}\n        </li>\n      );\n    })}\n  </ul>\n);\n\nexport default NavigationItems;\n"],"mappings":";;;AAaA,IAAM,mBAAmB,EACvB,cACA,WACA,aACA,OACA,SACA,UACA,eAEA,oBAAC,MAAD;CAAI,WAAU;CACX,UAAA,MAAM,KAAK,SAAS;EACnB,MAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;EACjD,MAAM,aAAa,YAAY,IAAI,KAAK,EAAE;EAC1C,MAAM,UAAU,GAAG,YAAY,OAAO,GAAG,KAAK,GAAG;EAEjD,OACE,qBAAC,MAAD;GACE,WAAW,0BACT,iBAAiB,KAAK,KAAK,qCAAqC;GAFpE,UAAA,CAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,UAAD;KACE,gBAAc,iBAAiB,KAAK,KAAK,SAAS,KAAA;KAClD,cAAY,KAAK;KACjB,WAAU;KACV,eAAe,QAAQ,KAAK,EAAE;KAC9B,MAAK;KALP,UAAA,CAOE,oBAAC,eAAD,EAAe,MAAM,KAAK,KAAO,CAAA,GACjC,oBAAC,QAAD;MACE,WAAW,2BACT,YAAY,sCAAsC;MAGnD,UAAA,KAAK;KACF,CAAA,CACA;IACP,CAAA,GAAA,eAAe,CAAC,YACf,oBAAC,UAAD;KACE,iBAAe;KACf,iBAAe;KACf,cAAY,KAAK;KACjB,WAAU;KACV,eAAe,SAAS,KAAK,EAAE;KAC/B,MAAK;KAEL,UAAA,oBAAC,eAAD,EAAe,MAAK,kBAAmB,CAAA;IACjC,CAAA,IACN,IACD;GACJ,CAAA,GAAA,eAAe,CAAC,YACf,oBAAC,OAAD;IACE,eAAa,CAAC;IACd,WAAW,8BACT,aAAa,uCAAuC;IAEtD,IAAI;IACJ,OAAO,CAAC;IAER,UAAA,oBAAC,iBAAD;KACgB;KACH;KACE;KACb,OAAO,KAAK,YAAY,CAAC;KAChB;KACC;KACV,UAAU,KAAK;IAChB,CAAA;GACE,CAAA,IACH,IACF;EApDG,GAAA,KAAK,EAoDR;CAER,CAAC;AACC,CAAA"}

package/dist/components/tabs/tabs-icon/TabsIcon.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/components/tabs/tabs-icon/TabsIcon.tsx
-var TabsIcon = ({ icon }) => /* @__PURE__ */ jsx("span", {
-	"aria-hidden": "true",
-	className: "chayns-tabs__icon",
-	children: /* @__PURE__ */ jsx("i", { className: `far ${icon}` })
-});
-//#endregion
-export { TabsIcon as default };
-
-//# sourceMappingURL=TabsIcon.js.map

package/dist/components/tabs/tabs-icon/TabsIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsIcon.js","names":[],"sources":["../../../../src/components/tabs/tabs-icon/TabsIcon.tsx"],"sourcesContent":["import type { TabsEntry } from '../Tabs.types.js';\n\nconst TabsIcon = ({ icon }: { icon: TabsEntry['icon'] }) => (\n  <span aria-hidden=\"true\" className=\"chayns-tabs__icon\">\n    <i className={`far ${icon}`} />\n  </span>\n);\n\nexport default TabsIcon;\n"],"mappings":";;AAEA,IAAM,YAAY,EAAE,WAClB,oBAAC,QAAD;CAAM,eAAY;CAAO,WAAU;CACjC,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;AAC1B,CAAA"}