@chayns-ui/layout 0.3.0 → 0.3.2

package/README.md

@@ -9,16 +9,21 @@ pnpm add @chayns-ui/layout @chayns-ui/core @chayns-ui/tokens react
 ```
 
 Load the resolved token stylesheet, Core stylesheet required by the host
-application, and the AppLayout stylesheet:
+application, and the Layout stylesheet:
 
 ```tsx
 import '@chayns-ui/tokens/baseline.css';
 import '@chayns-ui/tokens/patch.css';
 import '@chayns-ui/core/styles.css';
-import '@chayns-ui/layout/app-layout.css';
+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.
+navigation, controlled or uncontrolled sidebar collapse, optional
+`headerContent` beside the logo, and consumer content.
+
+Alternatively, the component stylesheet is available as
+`@chayns-ui/layout/app-layout.css` or
+`@chayns-ui/layout/tabs.css`.

package/dist/app-layout.css

@@ -10,152 +10,21 @@
     color: var(--on-accent);
   }
 
-  .chayns-tabs {
-    display: flex;
-    flex-direction: column;
-    container-type: inline-size;
-    inline-size: 100%;
-    block-size: 100%;
-    min-inline-size: 0;
-  }
-
-  .chayns-tabs__list {
-    display: flex;
-    gap: var(--sp-1);
-    align-items: stretch;
-    min-inline-size: 0;
-    overflow-x: auto;
-    background: transparent;
-  }
-
-  .chayns-tabs__bar {
+  .chayns-app-layout__header {
     display: flex;
-    align-items: stretch;
-    block-size: var(--ctrl-h);
-    min-inline-size: 0;
-  }
-
-  .chayns-tabs__item {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: stretch;
-    border-radius: var(--k12) var(--k12) 0 0;
-    overflow: hidden;
-  }
-
-  .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: 0;
-    color: var(--on-accent);
-    font: inherit;
-    cursor: pointer;
-    background: transparent;
-  }
-
-  .chayns-tabs__item:has(.chayns-tabs__tab--active) {
-    background: var(--surface);
-  }
-
-  .chayns-tabs__item:not(:has(.chayns-tabs__tab--active)) {
-    background: color-mix(in srgb, var(--surface) 10%, transparent);
-  }
-
-  .chayns-tabs__remove,
-  .chayns-tabs__add {
-    display: inline-flex;
-    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;
-  }
-
-  .chayns-tabs__remove {
-    inline-size: var(--icon);
-    padding: 0;
-    border-radius: 0;
-  }
-
-  .chayns-tabs__add {
-    flex: 0 0 auto;
-    border-radius: 0;
-    color: var(--on-accent);
-  }
-
-  .chayns-tabs__item:has(:focus-visible) {
-    outline: none;
-    box-shadow: inset 0 0 0 var(--focus-ring-size)
-      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
-  }
-
-  .chayns-tabs__tab:focus-visible,
-  .chayns-tabs__remove:focus-visible,
-  .chayns-tabs__add:focus-visible {
-    outline: none;
-  }
-
-  .chayns-tabs__icon {
-    display: inline-flex;
-    flex: none;
+    grid-area: header;
     align-items: center;
-    justify-content: center;
-    inline-size: var(--icon);
-    block-size: var(--icon);
-  }
-
-  .chayns-tabs__remove .chayns-tabs__icon {
-    inline-size: var(--fs-meta);
-    block-size: var(--fs-meta);
-    font-size: var(--fs-meta);
-  }
-
-  .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__tab,
-  .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__remove {
-    color: var(--accent);
-  }
-
-  .chayns-tabs__panel {
-    flex: 1 1 auto;
     min-inline-size: 0;
-    min-block-size: 0;
-    padding: var(--sp-4);
-    overflow: auto;
-    background: var(--surface);
-  }
-
-  @container (max-width: 20rem) {
-    .chayns-tabs__label {
-      position: absolute;
-      inline-size: 1px;
-      block-size: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
+    padding-inline: var(--sp-4);
   }
 
-  .chayns-app-layout__header {
+  .chayns-app-layout__header-content {
     display: flex;
-    grid-area: header;
+    flex: 1 1 auto;
     align-items: center;
+    justify-content: flex-end;
     min-inline-size: 0;
-    padding-inline: var(--sp-4);
+    margin-inline-start: var(--sp-4);
   }
 
   .chayns-app-layout__logo {
@@ -170,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.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,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,eAAO,MAAM,SAAS,wHAqFrB,CAAC"}

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

@@ -3,7 +3,7 @@ import NavigationItems from "./navigation-items/NavigationItems.js";
 import { forwardRef, useId, 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) => {
+var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel, collapsed, defaultCollapsed = false, expandLabel, headerContent, items, logo, navigationLabel, onClick, onCollapsedChange, ...rootProps }, ref) => {
 	const baseId = useId();
 	const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
 	const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
@@ -31,13 +31,16 @@ var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel,
 		className: rootClassName,
 		ref,
 		children: [
-			/* @__PURE__ */ jsx("header", {
+			/* @__PURE__ */ jsxs("header", {
 				className: "chayns-app-layout__header",
-				children: /* @__PURE__ */ jsx("img", {
+				children: [/* @__PURE__ */ jsx("img", {
 					alt: "",
 					className: "chayns-app-layout__logo",
 					src: logo
-				})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "chayns-app-layout__header-content",
+					children: headerContent
+				})]
 			}),
 			/* @__PURE__ */ jsxs("aside", {
 				className: "chayns-app-layout__sidebar",

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 { 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      headerContent,\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          <div className=\"chayns-app-layout__header-content\">{headerContent}</div>\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,eACA,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,qBAAC,UAAD;IAAQ,WAAU;IAAlB,UAAA,CACE,oBAAC,OAAD;KAAK,KAAI;KAAG,WAAU;KAA0B,KAAK;IAAO,CAAA,GAC5D,oBAAC,OAAD;KAAK,WAAU;KAAqC,UAAA;IAAmB,CAAA,CACjE;;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"}

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

@@ -47,6 +47,11 @@ export interface AppLayoutProps extends Omit<ComponentPropsWithRef<'div'>, 'chil
      * name.
      */
     logo: string;
+    /**
+     * @description Optional consumer-provided content rendered in the remaining
+     * header area to the right of the logo.
+     */
+    headerContent?: ReactNode;
     /**
      * @description Top-level navigation items, recursively composable via each
      * item's own `children`. An empty array renders an empty navigation list.

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;;;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,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;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"}

package/dist/styles.css

@@ -0,0 +1,2 @@
+@import url('./app-layout.css');
+@import url('./tabs.css');

package/dist/tabs.css

@@ -0,0 +1,142 @@
+@layer chayns.components {
+  .chayns-tabs {
+    display: flex;
+    flex-direction: column;
+    container-type: inline-size;
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .chayns-tabs__list {
+    display: flex;
+    gap: var(--sp-1);
+    align-items: stretch;
+    min-inline-size: 0;
+    overflow-x: auto;
+    background: transparent;
+  }
+
+  .chayns-tabs__bar {
+    display: flex;
+    align-items: stretch;
+    block-size: var(--ctrl-h);
+    min-inline-size: 0;
+  }
+
+  .chayns-tabs__item {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: stretch;
+    border-radius: var(--k12) var(--k12) 0 0;
+    overflow: hidden;
+  }
+
+  .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: 0;
+    color: var(--on-accent);
+    font: inherit;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .chayns-tabs__item:has(.chayns-tabs__tab--active) {
+    background: var(--surface);
+  }
+
+  .chayns-tabs__item:not(:has(.chayns-tabs__tab--active)) {
+    background: color-mix(in srgb, var(--surface) 10%, transparent);
+  }
+
+  .chayns-tabs__remove,
+  .chayns-tabs__add {
+    display: inline-flex;
+    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;
+  }
+
+  .chayns-tabs__remove {
+    inline-size: var(--icon);
+    padding: 0;
+    border-radius: 0;
+  }
+
+  .chayns-tabs__add {
+    flex: 0 0 auto;
+    border-radius: 0;
+    color: var(--on-accent);
+  }
+
+  .chayns-tabs__item:has(:focus-visible) {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+
+  .chayns-tabs__tab:focus-visible,
+  .chayns-tabs__remove:focus-visible,
+  .chayns-tabs__add:focus-visible {
+    outline: none;
+  }
+
+  .chayns-tabs__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon);
+    block-size: var(--icon);
+  }
+
+  .chayns-tabs__remove .chayns-tabs__icon {
+    inline-size: var(--fs-meta);
+    block-size: var(--fs-meta);
+    font-size: var(--fs-meta);
+  }
+
+  .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__tab,
+  .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__remove {
+    color: var(--accent);
+  }
+
+  .chayns-tabs__panel {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--sp-4);
+    overflow: auto;
+    background: var(--surface);
+    color: var(--text);
+  }
+
+  @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.3.0",
+  "version": "0.3.2",
   "description": "Accessible application layout components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -23,14 +23,16 @@
       "import": "./dist/index.js"
     },
     "./app-layout.css": "./dist/app-layout.css",
+    "./tabs.css": "./dist/tabs.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@chayns-ui/core": ">=0.3.0",
+    "@chayns-ui/core": ">=0.3.1",
     "react": ">=18 <20"
   },
   "devDependencies": {
-    "@chayns-ui/core": "0.3.0"
+    "@chayns-ui/core": "0.3.1"
   },
   "engines": {
     "node": ">=18"