@chayns-ui/layout 0.6.1 → 0.6.2

package/dist/app-layout.css

@@ -18,6 +18,15 @@
     padding-inline: var(--sp-4);
   }
 
+  .chayns-app-layout__header > :not(.chayns-app-layout__logo) {
+    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__header-content {
     display: flex;
     flex: 1 1 auto;
@@ -43,8 +52,12 @@
   }
 
   .chayns-app-layout__navigation {
+    display: flex;
+    grid-area: sidebar;
+    flex-direction: column;
     min-block-size: 0;
     overflow: auto;
+    padding: 0 var(--sp-2) var(--sp-2);
   }
 
   .chayns-app-layout__list {
@@ -143,9 +156,12 @@
     justify-content: center;
     inline-size: var(--ctrl-h);
     block-size: var(--ctrl-h);
-    align-self: flex-end;
     border-radius: 50%;
     background: transparent;
+    grid-area: sidebar;
+    place-self: end;
+    margin: 0 var(--sp-2) var(--sp-2) 0;
+    z-index: 1;
   }
 
   .chayns-app-layout__footer {

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

@@ -1,5 +1,5 @@
 import type { AppLayoutCollapseToggleProps, AppLayoutNavigationItemProps, AppLayoutProps } from './AppLayout.types.js';
-declare function NavigationItem({ children, className, href, isActive, label, ...props }: AppLayoutNavigationItemProps): import("react").JSX.Element;
+declare function NavigationItem({ children, className, href, icon, 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>>;

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,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"}
+{"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;AA6D9B,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,4BAA4B,+BAgE9B;AAgED,eAAO,MAAM,SAAS;;;;;;;;CAMpB,CAAC"}

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

@@ -1,4 +1,5 @@
-import { createContext, forwardRef, useContext, useState } from "react";
+import AppLayoutIcon from "./app-layout-icon/AppLayoutIcon.js";
+import { createContext, forwardRef, useContext, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/app-layout/AppLayout.tsx
 var LayoutContext = createContext(null);
@@ -41,10 +42,11 @@ var Navigation = forwardRef(function Navigation({ children, className, ...props
 		})
 	});
 });
-function NavigationItem({ children, className, href, isActive = false, label, ...props }) {
+function NavigationItem({ children, className, href, icon, 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 childrenId = useId();
 	const hasChildren = children !== void 0;
 	const content = /* @__PURE__ */ jsx("span", {
 		className: `chayns-app-layout__label${collapsed ? " chayns-app-layout__label--hidden" : ""}`,
@@ -55,29 +57,31 @@ function NavigationItem({ children, className, href, isActive = false, label, ..
 		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", {
+			children: [href ? /* @__PURE__ */ jsxs("a", {
 				...props,
 				"aria-current": isActive ? "page" : void 0,
 				className: actionClass,
 				href,
-				children: content
-			}) : /* @__PURE__ */ jsx("button", {
+				children: [icon ? /* @__PURE__ */ jsx(AppLayoutIcon, { icon }) : null, content]
+			}) : /* @__PURE__ */ jsxs("button", {
 				...props,
 				"aria-current": isActive ? "page" : void 0,
 				className: actionClass,
 				type: "button",
-				children: content
+				children: [icon ? /* @__PURE__ */ jsx(AppLayoutIcon, { icon }) : null, content]
 			}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("button", {
 				"aria-label": typeof label === "string" ? label : void 0,
+				"aria-controls": childrenId,
 				"aria-expanded": expanded,
 				className: "chayns-app-layout__disclosure",
 				onClick: () => setExpanded((current) => !current),
 				type: "button",
-				children: "⌄"
+				children: /* @__PURE__ */ jsx(AppLayoutIcon, { icon: "fa-chevron-down" })
 			}) : null]
 		}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("div", {
 			"aria-hidden": !expanded,
 			className: `chayns-app-layout__children${expanded ? " chayns-app-layout__children--open" : ""}`,
+			id: childrenId,
 			inert: !expanded,
 			children: /* @__PURE__ */ jsx("ul", {
 				className: "chayns-app-layout__list",
@@ -95,7 +99,7 @@ var Content = forwardRef(function Content({ children, className, ...props }, ref
 		children
 	});
 });
-var CollapseToggle = forwardRef(function CollapseToggle({ children = "☰", className, collapseLabel, expandLabel, onClick, ...props }, ref) {
+var CollapseToggle = forwardRef(function CollapseToggle({ children, className, collapseLabel, expandLabel, onClick, ...props }, ref) {
 	const layout = useLayout("CollapseToggle");
 	return /* @__PURE__ */ jsx("button", {
 		...props,
@@ -107,7 +111,7 @@ var CollapseToggle = forwardRef(function CollapseToggle({ children = "☰", clas
 		},
 		ref,
 		type: "button",
-		children
+		children: children ?? /* @__PURE__ */ jsx(AppLayoutIcon, { icon: "fa-sidebar" })
 	});
 });
 var Root = forwardRef(function Root({ children, className, collapsed, defaultCollapsed = false, onCollapsedChange, ...props }, ref) {

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 { 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":";;;AAgBA,IAAM,gBAAgB,cAAkC,IAAI;AAC5D,IAAM,oBAAoB,cAAc,KAAK;AAC7C,SAAS,UAAU,MAAc;CAC/B,MAAM,UAAU,WAAW,aAAa;CACxC,IAAI,YAAY,MAAM,MAAM,IAAI,MAAM,aAAa,KAAK,oCAAoC;CAC5F,OAAO;AACT;AAEA,IAAM,SAAS,WAA8C,SAAS,OACpE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,UAAU,QAAQ;CAClB,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,CAAC,6BAA6B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACvE;EAEJ;CACK,CAAA;AAEZ,CAAC;AACD,IAAM,OAAO,WAAiD,SAAS,KACrE,EAAE,MAAM,IAAI,WAAW,GAAG,SAC1B,KACA;CACA,UAAU,MAAM;CAChB,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,2BAA2B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACrE;CACN,CAAA;AAEL,CAAC;AACD,IAAM,aAAa,WAAkD,SAAS,WAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,UAAU,YAAY;CACtB,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAA;EAC1B,UAAA,oBAAC,OAAD;GACE,GAAI;GACJ,WAAW,CAAC,iCAAiC,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC3E;GAEL,UAAA,oBAAC,MAAD;IAAI,WAAU;IAA2B;GAAa,CAAA;EACnD,CAAA;CACqB,CAAA;AAEhC,CAAC;AACD,SAAS,eAAe,EACtB,UACA,WACA,MACA,WAAW,OACX,OACA,GAAG,SAC4B;CAC/B,IAAI,CAAC,WAAW,iBAAiB,GAC/B,MAAM,IAAI,MAAM,yEAAyE;CAC3F,MAAM,EAAE,cAAc,UAAU,iBAAiB;CACjD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,cAAc,aAAa,KAAA;CACjC,MAAM,UACJ,oBAAC,QAAD;EACE,WAAW,2BAA2B,YAAY,sCAAsC;EAEvF,UAAA;CACG,CAAA;CAER,MAAM,cAAc,CAAC,6BAA6B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACrF,OACE,qBAAC,MAAD;EAAI,WAAW,0BAA0B,WAAW,qCAAqC;EAAzF,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,OACC,oBAAC,KAAD;IACE,GAAK;IACL,gBAAc,WAAW,SAAS,KAAA;IAClC,WAAW;IACL;IAEL,UAAA;GACA,CAAA,IAEH,oBAAC,UAAD;IACE,GAAI;IACJ,gBAAc,WAAW,SAAS,KAAA;IAClC,WAAW;IACX,MAAK;IAEJ,UAAA;GACK,CAAA,GAET,eAAe,CAAC,YACf,oBAAC,UAAD;IACE,cAAY,OAAO,UAAU,WAAW,QAAQ,KAAA;IAChD,iBAAe;IACf,WAAU;IACV,eAAe,aAAa,YAAY,CAAC,OAAO;IAChD,MAAK;IACN,UAAA;GAEO,CAAA,IACN,IACD;EACJ,CAAA,GAAA,eAAe,CAAC,YACf,oBAAC,OAAD;GACE,eAAa,CAAC;GACd,WAAW,8BAA8B,WAAW,uCAAuC;GAC3F,OAAO,CAAC;GAER,UAAA,oBAAC,MAAD;IAAI,WAAU;IAA2B;GAAa,CAAA;EACnD,CAAA,IACH,IACF;;AAER;AACA,IAAM,UAAU,WAA+C,SAAS,QACtE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,UAAU,SAAS;CACnB,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,WAAW,CAAC,8BAA8B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACxE;EAEJ;CACG,CAAA;AAEV,CAAC;AACD,IAAM,iBAAiB,WACrB,SAAS,eACP,EAAE,WAAW,KAAK,WAAW,eAAe,aAAa,SAAS,GAAG,SACrE,KACA;CACA,MAAM,SAAS,UAAU,gBAAgB;CACzC,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,cAAY,OAAO,YAAY,cAAc;EAC7C,WAAW,CAAC,+BAA+B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC9E,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,OAAO,OAAO;EAC7C;EACK;EACL,MAAK;EAEJ;CACK,CAAA;AAEZ,CACF;AACA,IAAM,OAAO,WAA2C,SAAS,KAC/D,EAAE,UAAU,WAAW,WAAW,mBAAmB,OAAO,mBAAmB,GAAG,SAClF,KACA;CACA,MAAM,CAAC,UAAU,eAAe,SAAS,gBAAgB;CACzD,MAAM,cAAc,aAAa;CACjC,MAAM,eAAe;EACnB,MAAM,OAAO,CAAC;EACd,IAAI,cAAc,KAAA,GAAW,YAAY,IAAI;EAC7C,oBAAoB,IAAI;CAC1B;CACA,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;GAAE,WAAW;GAAa;EAAO;EAC9D,UAAA,oBAAC,OAAD;GACE,GAAI;GACJ,WAAW;IAAC;IAAqB,eAAe;IAAgC;GAAS,CAAC,CACvF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACN;GAEJ;EACE,CAAA;CACiB,CAAA;AAE5B,CAAC;AACD,IAAa,YAAY,OAAO,OAAO,MAAM;CAC3C;CACA;CACA;CACA;CACA,YAAY,OAAO,OAAO,YAAY,EAAE,MAAM,eAAe,CAAC;AAChE,CAAC"}
+{"version":3,"file":"AppLayout.js","names":[],"sources":["../../../src/components/app-layout/AppLayout.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, 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';\nimport AppLayoutIcon from './app-layout-icon/AppLayoutIcon.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  icon,\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 childrenId = useId();\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            {icon ? <AppLayoutIcon icon={icon} /> : null}\n            {content}\n          </a>\n        ) : (\n          <button\n            {...props}\n            aria-current={isActive ? 'page' : undefined}\n            className={actionClass}\n            type=\"button\"\n          >\n            {icon ? <AppLayoutIcon icon={icon} /> : null}\n            {content}\n          </button>\n        )}\n        {hasChildren && !collapsed ? (\n          <button\n            aria-label={typeof label === 'string' ? label : undefined}\n            aria-controls={childrenId}\n            aria-expanded={expanded}\n            className=\"chayns-app-layout__disclosure\"\n            onClick={() => setExpanded((current) => !current)}\n            type=\"button\"\n          >\n            <AppLayoutIcon icon=\"fa-chevron-down\" />\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          id={childrenId}\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 ?? <AppLayoutIcon icon=\"fa-sidebar\" />}\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

@@ -9,6 +9,8 @@ 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'> {
+    /** FontAwesome icon restored from the pre-compound navigation contract. */
+    icon?: `fa-${string}`;
     label: ReactNode;
     children?: ReactNode;
     href?: string;

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,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"}
+{"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,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IACtB,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.js

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayoutIcon.js","names":[],"sources":["../../../../src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx"],"sourcesContent":["type AppLayoutIconName = `fa-${string}`;\n\nconst AppLayoutIcon = ({ icon }: { icon: AppLayoutIconName }) => (\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/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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;AAmKzB,eAAO,MAAM,IAAI;;;;;CAAiD,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { createContext, forwardRef, useContext, useId, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tabs/Tabs.tsx
 var TabsContext = createContext(null);
 function useTabs(part) {
@@ -17,12 +17,14 @@ var List = forwardRef(function List({ children, className, ...props }, ref) {
 		children
 	});
 });
-var Tab = forwardRef(function Tab({ children, className, onRemove, onClick, value, ...props }, ref) {
+var Tab = forwardRef(function Tab({ children, className, onKeyDown, 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) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
 		if ((event.key === "Delete" || event.key === "Backspace") && onRemove) {
 			event.preventDefault();
 			onRemove();
@@ -46,7 +48,7 @@ var Tab = forwardRef(function Tab({ children, className, onRemove, onClick, valu
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	}
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("button", {
 		...props,
 		"aria-controls": panelId,
 		"aria-selected": selected,
@@ -57,6 +59,10 @@ var Tab = forwardRef(function Tab({ children, className, onRemove, onClick, valu
 		].filter(Boolean).join(" "),
 		id: tabId,
 		onClick: (event) => {
+			if (event.target.closest("[data-tabs-remove]")) {
+				onRemove?.();
+				return;
+			}
 			onClick?.(event);
 			if (!event.defaultPrevented) tabs.select(value);
 		},
@@ -65,7 +71,12 @@ var Tab = forwardRef(function Tab({ children, className, onRemove, onClick, valu
 		role: "tab",
 		tabIndex: selected ? 0 : -1,
 		type: "button",
-		children
+		children: [children, onRemove ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "chayns-tabs__remove",
+			"data-tabs-remove": true,
+			children: /* @__PURE__ */ jsx("i", { className: "far fa-xmark" })
+		}) : null]
 	});
 });
 var Panel = forwardRef(function Panel({ children, className, value, ...props }, ref) {

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

@@ -1 +1 @@
-{"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":"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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, onKeyDown, 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    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\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        if ((event.target as HTMLElement).closest('[data-tabs-remove]')) {\n          onRemove?.();\n          return;\n        }\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      {onRemove ? (\n        <span aria-hidden=\"true\" className=\"chayns-tabs__remove\" data-tabs-remove>\n          <i className=\"far fa-xmark\" />\n        </span>\n      ) : null}\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,WAAW,UAAU,SAAS,OAAO,GAAG,SAC/D,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,YAAY,KAAK;EACjB,IAAI,MAAM,kBAAkB;EAE5B,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,qBAAC,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,IAAK,MAAM,OAAuB,QAAQ,oBAAoB,GAAG;IAC/D,WAAW;IACX;GACF;GACA,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,KAAK,OAAO,KAAK;EAChD;EACA,WAAW;EACX,KAAK;EACL,MAAK;EACL,UAAU,WAAW,IAAI;EACzB,MAAK;EApBP,UAAA,CAsBG,UACA,WACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAAsB,oBAAA;GACvD,UAAA,oBAAC,KAAD,EAAG,WAAU,eAAgB,CAAA;EACzB,CAAA,IACJ,IACE;;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/tabs.css

@@ -1,91 +1,108 @@
 @layer chayns.components {
   .chayns-tabs {
+    position: relative;
     display: flex;
     flex-direction: column;
+    container-type: inline-size;
+    inline-size: 100%;
+    block-size: 100%;
     min-inline-size: 0;
   }
 
   .chayns-tabs__list {
     display: flex;
-    flex-wrap: wrap;
-    gap: var(--k8);
-    align-items: center;
+    gap: var(--sp-1);
+    align-items: stretch;
+    block-size: var(--ctrl-h);
     min-inline-size: 0;
+    overflow-x: auto;
+    padding-inline-end: var(--ctrl-h);
+    background: transparent;
   }
 
-  .chayns-tabs__tab,
-  .chayns-tabs__add {
+  .chayns-tabs__tab {
     display: inline-flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
+    gap: var(--sp-2);
+    block-size: var(--ctrl-h);
+    min-block-size: var(--ctrl-h);
+    min-inline-size: var(--ctrl-h);
+    padding-block: 0;
+    padding-inline: var(--sp-3) var(--sp-2);
     border: 0;
+    border-radius: var(--k12) var(--k12) 0 0;
+    color: var(--on-accent);
     font: inherit;
     cursor: pointer;
-    transition:
-      background 0.2s ease,
-      color 0.2s ease,
-      box-shadow 0.2s ease,
-      transform 0.15s ease;
-  }
-
-  .chayns-tabs__tab {
-    gap: var(--k8);
-    padding: var(--k8) var(--k15);
-    border-radius: 999px;
-    background: var(--surface-alt);
-    color: var(--text-2);
-    font-size: var(--fs-body);
-    font-weight: 500;
-    line-height: 1.1;
+    background: color-mix(in srgb, var(--surface) 10%, transparent);
   }
 
   .chayns-tabs__tab--active {
-    background: var(--accent);
-    color: var(--on-accent);
-  }
-
-  .chayns-tabs__add {
-    inline-size: var(--k32);
-    block-size: var(--k32);
-    padding: 0;
-    border-radius: 50%;
-    background: var(--surface-alt);
+    background: var(--surface);
     color: var(--accent);
-    font-size: var(--fs-meta);
   }
 
-  .chayns-tabs__tab:hover,
-  .chayns-tabs__add:hover {
-    background: var(--hover);
+  .chayns-tabs__add {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ctrl-h);
+    block-size: var(--ctrl-h);
+    min-block-size: var(--ctrl-h);
+    padding: 0 var(--sp-2);
+    border: 0;
+    color: var(--on-accent);
+    font: inherit;
+    cursor: pointer;
+    background: transparent;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
   }
 
-  .chayns-tabs__tab--active:hover {
-    background: var(--accent-hover);
-    box-shadow: var(--shadow-btn-hover);
-    transform: translateY(-1px);
+  .chayns-tabs__remove {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon);
+    block-size: var(--icon);
+    margin-inline-start: calc(var(--sp-2) * -1);
+    color: inherit;
   }
 
-  .chayns-tabs__tab:active,
-  .chayns-tabs__add:active {
-    transform: scale(0.97);
+  .chayns-tabs__remove > i {
+    font-size: var(--fs-meta);
   }
 
   .chayns-tabs__tab:focus-visible,
   .chayns-tabs__add:focus-visible {
-    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
   }
 
   .chayns-tabs__panel {
+    flex: 1 1 auto;
     min-inline-size: 0;
-    margin-block-start: var(--k12);
+    min-block-size: 0;
+    padding: var(--sp-2);
+    overflow: auto;
+    background: var(--surface);
     color: var(--text);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .chayns-tabs__tab,
-    .chayns-tabs__add {
-      transition: none;
+  @container (max-width: 20rem) {
+    .chayns-tabs__label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/layout",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Accessible application layout components for chayns UI",
   "license": "MIT",
   "type": "module",