@mittwald/flow-react-components 0.2.0-alpha.976 → 0.2.0-alpha.977

package/dist/js/_virtual/_.locale.json@7a653b01c4df8873ee850d41727b7e3c.mjs

@@ -0,0 +1,12 @@
+"use client"
+/* */
+const locales = {"de-DE":{
+  "moreButton.title": "Weitere"
+}
+,"en-US":{
+  "moreButton.title": "More"
+}
+};
+
+export { locales as default };
+//# sourceMappingURL=_.locale.json@7a653b01c4df8873ee850d41727b7e3c.mjs.map

package/dist/js/_virtual/_.locale.json@7a653b01c4df8873ee850d41727b7e3c.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_.locale.json@7a653b01c4df8873ee850d41727b7e3c.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/js/default.mjs

@@ -73,6 +73,7 @@ export { Flex } from './packages/components/src/components/Flex/Flex.mjs';
 export { Header } from './packages/components/src/components/Header/Header.mjs';
 export { HeaderNavigation } from './packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs';
 export { Heading } from './packages/components/src/components/Heading/Heading.mjs';
+export { TabNavigation } from './packages/components/src/components/TabNavigation/TabNavigation.mjs';
 export { iconCategories } from '@mittwald/flow-icons';
 export { IconSetProvider } from './packages/components/src/components/Icon/components/IconSetProvider.mjs';
 export { Icon } from './packages/components/src/components/Icon/Icon.mjs';

package/dist/js/default.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/flr-universal.mjs

@@ -206,6 +206,7 @@ import './packages/components/src/components/FileCardList/FileCardList.mjs';
 import './packages/components/src/components/FileDropZone/FileDropZone.mjs';
 import './packages/components/src/components/FileField/FileField.mjs';
 import './packages/components/src/components/Header/Header.mjs';
+import './packages/components/src/components/TabNavigation/TabNavigation.mjs';
 import '@mittwald/flow-icons';
 import './packages/components/src/components/Icon/components/IconSetProvider.mjs';
 import './packages/components/src/components/Icon/Icon.mjs';

package/dist/js/flr-universal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.mjs

@@ -14,8 +14,8 @@ const LayoutCard = flowComponent(
     const rootClassName = clsx(styles.layoutCard, className);
     const Element = elementType;
     const propsContext = {
-      Tabs: {
-        className: styles.tabs
+      TabNavigation: {
+        className: styles.tabNavigation
       },
       AccentBox: { className: styles.accentBox }
     };

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.mjs","sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n  \"LayoutCard\",\n  (props) => {\n    const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.layoutCard, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      Tabs: {\n        className: styles.tabs,\n      },\n      AccentBox: { className: styles.accentBox },\n    };\n\n    return (\n      <Element className={rootClassName} {...rest} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,UAAA,GAAa,aAAA;AAAA,EACxB,YAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,WAAA,GAAc,OAAO,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEnE,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,IAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,SAAA,EAAW,EAAE,SAAA,EAAW,MAAA,CAAO,SAAA;AAAU,KAC3C;AAEA,IAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA,EAAE,MAAM,QAAA;AACV;;;;"}
+{"version":3,"file":"LayoutCard.mjs","sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n  \"LayoutCard\",\n  (props) => {\n    const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.layoutCard, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      TabNavigation: {\n        className: styles.tabNavigation,\n      },\n      AccentBox: { className: styles.accentBox },\n    };\n\n    return (\n      <Element className={rootClassName} {...rest} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,UAAA,GAAa,aAAA;AAAA,EACxB,YAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,WAAA,GAAc,OAAO,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEnE,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,IAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,aAAA,EAAe;AAAA,QACb,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,SAAA,EAAW,EAAE,SAAA,EAAW,MAAA,CAAO,SAAA;AAAU,KAC3C;AAEA,IAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA,EAAE,MAAM,QAAA;AACV;;;;"}

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.module.scss.mjs

@@ -1,13 +1,13 @@
 "use client"
 /* */
 const layoutCard = "flow--layout-card";
-const tabs = "flow--layout-card--tabs";
+const tabNavigation = "flow--layout-card--tab-navigation";
 const accentBox = "flow--layout-card--accent-box";
 const styles = {
 	layoutCard: layoutCard,
-	tabs: tabs,
+	tabNavigation: tabNavigation,
 	accentBox: accentBox
 };
 
-export { accentBox, styles as default, layoutCard, tabs };
+export { accentBox, styles as default, layoutCard, tabNavigation };
 //# sourceMappingURL=LayoutCard.module.scss.mjs.map

package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs

@@ -36,11 +36,13 @@ const MenuItem = flowComponent("MenuItem", (props) => {
     id,
     ref,
     "aria-disabled": ariaDisabled,
+    "aria-current": ariaCurrent,
     isPending,
     isSucceeded,
     isFailed,
     ...rest
   } = props;
+  const currentProps = ariaCurrent && ariaCurrent !== "false" ? { "data-current": true } : {};
   const rootClassName = clsx(
     styles.menuItem,
     (ariaDisabled || isFailed || isSucceeded || isPending) && styles.ariaDisabled,
@@ -60,6 +62,7 @@ const MenuItem = flowComponent("MenuItem", (props) => {
     Aria.MenuItem,
     {
       ...rest,
+      ...currentProps,
       key: id,
       id,
       className: rootClassName,

package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.mjs","sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n  extends\n    Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    children,\n    className,\n    selectionVariant,\n    id,\n    ref,\n    \"aria-disabled\": ariaDisabled,\n    isPending,\n    isSucceeded,\n    isFailed,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.menuItem /**\n     * Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n     * now, so this MenuItem will be visually disabled via CSS.\n     */,\n    (ariaDisabled || isFailed || isSucceeded || isPending) &&\n      styles.ariaDisabled,\n    className,\n  );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <div className={styles.stateIcon}>\n      <StateIconComponent\n        status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n      />\n    </div>\n  );\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <>\n          <MenuItemContent {...props} selectionVariant={selectionVariant}>\n            {children}\n          </MenuItemContent>\n          {stateIcon}\n        </>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;;;AA2BA,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAyB;AACpD,EAAA,IACE,KAAA,CAAM,aACN,KAAA,CAAM,WAAA,IACN,MAAM,QAAA,IACN,KAAA,CAAM,eAAe,CAAA,EACrB;AACA,IAAA,KAAA,GAAQ,EAAE,GAAG,KAAA,EAAM;AACnB,IAAA,KAAA,CAAM,OAAA,GAAU,MAAA;AAChB,IAAA,KAAA,CAAM,YAAA,GAAe,MAAA;AACrB,IAAA,KAAA,CAAM,UAAA,GAAa,MAAA;AACnB,IAAA,KAAA,CAAM,aAAA,GAAgB,MAAA;AACtB,IAAA,KAAA,CAAM,SAAA,GAAY,MAAA;AAAA,EACpB;AAEA,EAAA,OAAO,KAAA;AACT,CAAA;AAGO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,KAAA,GAAQ,oBAAoB,KAAK,CAAA;AAEjC,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,eAAA,EAAiB,YAAA;AAAA,IACjB,SAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IAAA,CAIN,YAAA,IAAgB,QAAA,IAAY,WAAA,IAAe,SAAA,KAC1C,MAAA,CAAO,YAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,0BAAA;AAAA,IACE,SAAA,GACI,WAAA,GACA,WAAA,GACE,aAAA,GACA,WACE,UAAA,GACA;AAAA,GACV;AAEA,EAAA,MAAM,qBAAqB,WAAA,GACvB,aAAA,GACA,QAAA,GACE,UAAA,GACA,YACE,cAAA,GACA,MAAA;AAER,EAAA,MAAM,YAAY,kBAAA,oBAChB,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,QAAA,GAAW,QAAA,GAAW,WAAA,GAAc,SAAA,GAAY;AAAA;AAAA,GAC1D,EACF,CAAA;AAGF,EAAA,uBACE,aAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA,EAAK,EAAA;AAAA,MACL,EAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX;AAAA,KAAA;AAAA,IAEC,CAACA,2BACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eAAA,EAAA,EAAiB,GAAGA,MAAAA,EAAO,gBAAA,EACzB,QAAA,EACH,CAAA;AAAA,MACC;AAAA,KAAA,EACH;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MenuItem.mjs","sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n  extends\n    Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Marks the menu item as referring to the currently active page. */\n  \"aria-current\"?: string;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    children,\n    className,\n    selectionVariant,\n    id,\n    ref,\n    \"aria-disabled\": ariaDisabled,\n    \"aria-current\": ariaCurrent,\n    isPending,\n    isSucceeded,\n    isFailed,\n    ...rest\n  } = props;\n\n  /**\n   * React Aria drops `aria-current` from the props it forwards to the DOM, so\n   * the current state is exposed as a data attribute (`data-*` passes the\n   * filter) — that is what the `menuItem` styling matches on. Every\n   * `aria-current` value marks the item as current, except an explicit\n   * \"false\".\n   */\n  const currentProps =\n    ariaCurrent && ariaCurrent !== \"false\" ? { \"data-current\": true } : {};\n\n  const rootClassName = clsx(\n    styles.menuItem /**\n     * Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n     * now, so this MenuItem will be visually disabled via CSS.\n     */,\n    (ariaDisabled || isFailed || isSucceeded || isPending) &&\n      styles.ariaDisabled,\n    className,\n  );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <div className={styles.stateIcon}>\n      <StateIconComponent\n        status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n      />\n    </div>\n  );\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      {...currentProps}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <>\n          <MenuItemContent {...props} selectionVariant={selectionVariant}>\n            {children}\n          </MenuItemContent>\n          {stateIcon}\n        </>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;;;AA6BA,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAyB;AACpD,EAAA,IACE,KAAA,CAAM,aACN,KAAA,CAAM,WAAA,IACN,MAAM,QAAA,IACN,KAAA,CAAM,eAAe,CAAA,EACrB;AACA,IAAA,KAAA,GAAQ,EAAE,GAAG,KAAA,EAAM;AACnB,IAAA,KAAA,CAAM,OAAA,GAAU,MAAA;AAChB,IAAA,KAAA,CAAM,YAAA,GAAe,MAAA;AACrB,IAAA,KAAA,CAAM,UAAA,GAAa,MAAA;AACnB,IAAA,KAAA,CAAM,aAAA,GAAgB,MAAA;AACtB,IAAA,KAAA,CAAM,SAAA,GAAY,MAAA;AAAA,EACpB;AAEA,EAAA,OAAO,KAAA;AACT,CAAA;AAGO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,KAAA,GAAQ,oBAAoB,KAAK,CAAA;AAEjC,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,eAAA,EAAiB,YAAA;AAAA,IACjB,cAAA,EAAgB,WAAA;AAAA,IAChB,SAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AASJ,EAAA,MAAM,YAAA,GACJ,eAAe,WAAA,KAAgB,OAAA,GAAU,EAAE,cAAA,EAAgB,IAAA,KAAS,EAAC;AAEvE,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IAAA,CAIN,YAAA,IAAgB,QAAA,IAAY,WAAA,IAAe,SAAA,KAC1C,MAAA,CAAO,YAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,0BAAA;AAAA,IACE,SAAA,GACI,WAAA,GACA,WAAA,GACE,aAAA,GACA,WACE,UAAA,GACA;AAAA,GACV;AAEA,EAAA,MAAM,qBAAqB,WAAA,GACvB,aAAA,GACA,QAAA,GACE,UAAA,GACA,YACE,cAAA,GACA,MAAA;AAER,EAAA,MAAM,YAAY,kBAAA,oBAChB,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,QAAA,GAAW,QAAA,GAAW,WAAA,GAAc,SAAA,GAAY;AAAA;AAAA,GAC1D,EACF,CAAA;AAGF,EAAA,uBACE,aAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,YAAA;AAAA,MACJ,GAAA,EAAK,EAAA;AAAA,MACL,EAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX;AAAA,KAAA;AAAA,IAEC,CAACA,2BACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eAAA,EAAA,EAAiB,GAAGA,MAAAA,EAAO,gBAAA,EACzB,QAAA,EACH,CAAA;AAAA,MACC;AAAA,KAAA,EACH;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.mjs

@@ -0,0 +1,74 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Button } from '../Button/Button.mjs';
+import 'react';
+import '@mittwald/flow-icons';
+import '../Icon/components/IconSetProvider.mjs';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
+import { Text } from '../Text/Text.mjs';
+import '../TranslationProvider/TranslationProvider.mjs';
+import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import ContextMenuTriggerView from '../../views/ContextMenuTriggerView.mjs';
+import ContextMenuView from '../../views/ContextMenuView.mjs';
+import { LinkContent } from './components/LinkContent/LinkContent.mjs';
+import styles from './TabNavigation.module.scss.mjs';
+import locales from '../../../../../_virtual/_.locale.json@7a653b01c4df8873ee850d41727b7e3c.mjs';
+import { useCollapsingItems } from './lib/useCollapsingItems.mjs';
+
+const TabNavigation = flowComponent("TabNavigation", (props) => {
+  const { children, className, ref, ...rest } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales, "TabNavigation");
+  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
+  const rootClassName = clsx(
+    styles.tabNavigation,
+    hasOverflow && styles.collapsed,
+    className
+  );
+  const propsContext = {
+    Link: {
+      wrapWith: /* @__PURE__ */ jsx("li", {}),
+      className: styles.link,
+      unstyled: true,
+      children: dynamic((linkProps) => /* @__PURE__ */ jsx(LinkContent, { linkProps }))
+    }
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: rootClassName, role: "navigation", ...rest, ref, children: [
+    /* @__PURE__ */ jsx("ul", { ref: listRef, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.more, ref: moreRef, children: /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          unstyled: true,
+          className: clsx(
+            styles.moreButton,
+            menuHasCurrentItem && styles.current
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: stringFormatter.format("moreButton.title") }),
+            /* @__PURE__ */ jsx(IconChevronDown, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ContextMenuView, { placement: "bottom end", children: /* @__PURE__ */ jsx(
+        UiComponentTunnelExit,
+        {
+          id: "menuItems",
+          component: "TabNavigation",
+          children: (menuItems) => Array.isArray(menuItems) ? menuItems.slice(visibleCount ?? menuItems.length) : menuItems
+        }
+      ) })
+    ] }) })
+  ] });
+});
+
+export { TabNavigation };
+//# sourceMappingURL=TabNavigation.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.mjs","sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,eAAe,CAAA;AAE5E,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,cAAc,WAAA,EAAa,kBAAA,KACnD,kBAAA,EAAmB;AAErB,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,aAAA;AAAA,IACP,eAAe,MAAA,CAAO,SAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,MACd,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,EAAU,IAAA;AAAA,MACV,UAAU,OAAA,CAAQ,CAAC,8BAAc,GAAA,CAAC,WAAA,EAAA,EAAY,WAAsB,CAAE;AAAA;AACxE,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAe,MAAK,YAAA,EAAc,GAAG,MAAM,GAAA,EACzD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAK,OAAA,EACP,QAAA,kBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,MAAM,GAAA,EAAK,OAAA,EAChC,+BAAC,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAQ,IAAA;AAAA,UACR,SAAA,EAAW,IAAA;AAAA,YACT,MAAA,CAAO,UAAA;AAAA,YACP,sBAAsB,MAAA,CAAO;AAAA,WAC/B;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAK,gBAAA,EAAgB,IAAA,EACnB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,kBAAkB,CAAA,EAC5C,CAAA;AAAA,gCACC,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,OACnB;AAAA,sBACA,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,YAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,WAAA;AAAA,UACH,SAAA,EAAU,eAAA;AAAA,UACV,QAAA,EAAU,CAAC,SAAA,KACT,KAAA,CAAM,OAAA,CAAQ,SAAS,CAAA,GACnB,SAAA,CAAU,KAAA,CAAM,YAAA,IAAgB,SAAA,CAAU,MAAM,CAAA,GAChD;AAAA;AAAA,OAER,EACF;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.module.scss.mjs

@@ -0,0 +1,21 @@
+"use client"
+/* */
+const tabNavigation = "flow--tab-navigation";
+const link = "flow--tab-navigation--link";
+const text = "flow--tab-navigation--text";
+const more = "flow--tab-navigation--more";
+const moreButton = "flow--tab-navigation--more-button";
+const current = "flow--tab-navigation--current";
+const collapsed = "flow--tab-navigation--collapsed";
+const styles = {
+	tabNavigation: tabNavigation,
+	link: link,
+	text: text,
+	more: more,
+	moreButton: moreButton,
+	current: current,
+	collapsed: collapsed
+};
+
+export { collapsed, current, styles as default, link, more, moreButton, tabNavigation, text };
+//# sourceMappingURL=TabNavigation.module.scss.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/TabNavigation/components/LinkContent/LinkContent.mjs

@@ -0,0 +1,46 @@
+"use client"
+/* */
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { MenuItem } from '../../../MenuItem/MenuItem.mjs';
+import { Text } from '../../../Text/Text.mjs';
+import { UiComponentTunnelEntry } from '../../../UiComponentTunnel/UiComponentTunnelEntry.mjs';
+import styles from '../../TabNavigation.module.scss.mjs';
+
+const LinkContent = (props) => {
+  const { linkProps } = props;
+  const {
+    children,
+    href,
+    target,
+    rel,
+    download,
+    hrefLang,
+    ping,
+    referrerPolicy,
+    routerOptions,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent
+  } = linkProps;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: /* @__PURE__ */ jsx("span", { className: styles.text, children }) }),
+    /* @__PURE__ */ jsx(UiComponentTunnelEntry, { id: "menuItems", component: "TabNavigation", children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        "aria-current": ariaCurrent,
+        href,
+        target,
+        rel,
+        download,
+        hrefLang,
+        ping,
+        referrerPolicy,
+        routerOptions,
+        "aria-label": ariaLabel,
+        children
+      }
+    ) })
+  ] });
+};
+
+export { LinkContent };
+//# sourceMappingURL=LinkContent.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/components/LinkContent/LinkContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkContent.mjs","sources":["../../../../../../../../../src/components/TabNavigation/components/LinkContent/LinkContent.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { LinkProps } from \"@/components/Link\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { Text } from \"@/components/Text\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport styles from \"../../TabNavigation.module.scss\";\n\ninterface Props {\n  linkProps: Partial<LinkProps>;\n}\n\n/**\n * Renders the content of a link inside the tab navigation and mirrors the link\n * as a menu item into the overflow context menu (via tunnel). The context menu\n * only renders the menu items of the currently collapsed links.\n */\nexport const LinkContent: FC<Props> = (props) => {\n  const { linkProps } = props;\n\n  const {\n    children,\n    href,\n    target,\n    rel,\n    download,\n    hrefLang,\n    ping,\n    referrerPolicy,\n    routerOptions,\n    \"aria-label\": ariaLabel,\n    \"aria-current\": ariaCurrent,\n  } = linkProps;\n\n  return (\n    <>\n      <Text emulateBoldWidth>\n        <span className={styles.text}>{children}</span>\n      </Text>\n      <UiComponentTunnelEntry id=\"menuItems\" component=\"TabNavigation\">\n        <MenuItem\n          aria-current={ariaCurrent}\n          href={href}\n          target={target}\n          rel={rel}\n          download={download}\n          hrefLang={hrefLang}\n          ping={ping}\n          referrerPolicy={referrerPolicy}\n          routerOptions={routerOptions}\n          aria-label={ariaLabel}\n        >\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default LinkContent;\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,WAAA,GAAyB,CAAC,KAAA,KAAU;AAC/C,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AAEtB,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,cAAA,EAAgB;AAAA,GAClB,GAAI,SAAA;AAEJ,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,kBAAgB,IAAA,EACpB,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAS,CAAA,EAC1C,CAAA;AAAA,oBACA,GAAA,CAAC,sBAAA,EAAA,EAAuB,EAAA,EAAG,WAAA,EAAY,WAAU,eAAA,EAC/C,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAc,WAAA;AAAA,QACd,IAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,cAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QAEX;AAAA;AAAA,KACH,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/TabNavigation/lib/getVisibleItemCount.mjs

@@ -0,0 +1,22 @@
+"use client"
+/* */
+const floatTolerance = 0.5;
+const getVisibleItemCount = (itemWidths, availableWidth, moreItemWidth) => {
+  const totalWidth = itemWidths.reduce((sum, width) => sum + width, 0);
+  if (totalWidth <= availableWidth + floatTolerance) {
+    return itemWidths.length;
+  }
+  let usedWidth = moreItemWidth;
+  let visibleCount = 0;
+  for (const itemWidth of itemWidths) {
+    if (usedWidth + itemWidth > availableWidth + floatTolerance) {
+      break;
+    }
+    usedWidth += itemWidth;
+    visibleCount++;
+  }
+  return visibleCount;
+};
+
+export { getVisibleItemCount };
+//# sourceMappingURL=getVisibleItemCount.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/lib/getVisibleItemCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVisibleItemCount.mjs","sources":["../../../../../../../../src/components/TabNavigation/lib/getVisibleItemCount.ts"],"sourcesContent":["/**\n * Tolerance for sub-pixel rounding differences between measured item widths and\n * the available width.\n */\nconst floatTolerance = 0.5;\n\nexport const getVisibleItemCount = (\n  itemWidths: number[],\n  availableWidth: number,\n  moreItemWidth: number,\n): number => {\n  const totalWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n\n  if (totalWidth <= availableWidth + floatTolerance) {\n    return itemWidths.length;\n  }\n\n  let usedWidth = moreItemWidth;\n  let visibleCount = 0;\n\n  for (const itemWidth of itemWidths) {\n    if (usedWidth + itemWidth > availableWidth + floatTolerance) {\n      break;\n    }\n    usedWidth += itemWidth;\n    visibleCount++;\n  }\n\n  return visibleCount;\n};\n"],"names":[],"mappings":"AAIA,MAAM,cAAA,GAAiB,GAAA;AAEhB,MAAM,mBAAA,GAAsB,CACjC,UAAA,EACA,cAAA,EACA,aAAA,KACW;AACX,EAAA,MAAM,UAAA,GAAa,WAAW,MAAA,CAAO,CAAC,KAAK,KAAA,KAAU,GAAA,GAAM,OAAO,CAAC,CAAA;AAEnE,EAAA,IAAI,UAAA,IAAc,iBAAiB,cAAA,EAAgB;AACjD,IAAA,OAAO,UAAA,CAAW,MAAA;AAAA,EACpB;AAEA,EAAA,IAAI,SAAA,GAAY,aAAA;AAChB,EAAA,IAAI,YAAA,GAAe,CAAA;AAEnB,EAAA,KAAA,MAAW,aAAa,UAAA,EAAY;AAClC,IAAA,IAAI,SAAA,GAAY,SAAA,GAAY,cAAA,GAAiB,cAAA,EAAgB;AAC3D,MAAA;AAAA,IACF;AACA,IAAA,SAAA,IAAa,SAAA;AACb,IAAA,YAAA,EAAA;AAAA,EACF;AAEA,EAAA,OAAO,YAAA;AACT;;;;"}

package/dist/js/packages/components/src/components/TabNavigation/lib/useCollapsingItems.mjs

@@ -0,0 +1,65 @@
+"use client"
+/* */
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { createFrameResizeObserver } from '../../../lib/dom/createFrameResizeObserver.mjs';
+import { getVisibleItemCount } from './getVisibleItemCount.mjs';
+
+const initialState = {
+  visibleCount: null,
+  hasOverflow: false,
+  menuHasCurrentItem: false
+};
+const useCollapsingItems = () => {
+  const listRef = useRef(null);
+  const moreRef = useRef(null);
+  const [state, setState] = useState(initialState);
+  const update = useCallback(() => {
+    const list = listRef.current;
+    const more = moreRef.current;
+    const container = list?.parentElement;
+    if (!list || !more || !container) {
+      return;
+    }
+    const items = Array.from(list.children).filter(
+      (child) => child instanceof HTMLElement
+    );
+    const containerStyle = window.getComputedStyle(container);
+    const availableWidth = container.clientWidth - (parseFloat(containerStyle.paddingInlineStart) || 0) - (parseFloat(containerStyle.paddingInlineEnd) || 0);
+    const visibleCount = getVisibleItemCount(
+      items.map((item) => item.getBoundingClientRect().width),
+      availableWidth,
+      more.getBoundingClientRect().width
+    );
+    items.forEach((item, index) => {
+      item.style.visibility = index < visibleCount ? "" : "hidden";
+    });
+    const menuHasCurrentItem = items.slice(visibleCount).some(
+      (item) => !!item.querySelector('[aria-current]:not([aria-current="false"])')
+    );
+    setState((previous) => {
+      const next = {
+        visibleCount,
+        hasOverflow: visibleCount < items.length,
+        menuHasCurrentItem
+      };
+      const isUnchanged = previous.visibleCount === next.visibleCount && previous.hasOverflow === next.hasOverflow && previous.menuHasCurrentItem === next.menuHasCurrentItem;
+      return isUnchanged ? previous : next;
+    });
+  }, []);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const more = moreRef.current;
+    const container = list?.parentElement;
+    if (!list || !more || !container) {
+      return;
+    }
+    const observer = createFrameResizeObserver(update);
+    observer.observe([container, more, ...list.children]);
+    update();
+    return () => observer.disconnect();
+  });
+  return { ...state, listRef, moreRef };
+};
+
+export { useCollapsingItems };
+//# sourceMappingURL=useCollapsingItems.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/lib/useCollapsingItems.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapsingItems.mjs","sources":["../../../../../../../../src/components/TabNavigation/lib/useCollapsingItems.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\nimport { getVisibleItemCount } from \"./getVisibleItemCount\";\n\ninterface CollapsingItemsState {\n  /** Number of visible items. `null` until the first measurement was done. */\n  visibleCount: number | null;\n  /** Whether at least one item does not fit and is collapsed. */\n  hasOverflow: boolean;\n  /** Whether one of the collapsed items contains the current page link. */\n  menuHasCurrentItem: boolean;\n}\n\ninterface UseCollapsingItemsReturn extends CollapsingItemsState {\n  listRef: RefObject<HTMLUListElement | null>;\n  moreRef: RefObject<HTMLDivElement | null>;\n}\n\nconst initialState: CollapsingItemsState = {\n  visibleCount: null,\n  hasOverflow: false,\n  menuHasCurrentItem: false,\n};\n\n/**\n * Observes the items of the list and computes how many of them fit into the\n * available width of the list's parent element. Items that do not fit are\n * hidden via `visibility: hidden` (removes them from the accessibility tree and\n * the tab order while keeping them measurable). The width of the \"more\" element\n * is reserved whenever items are collapsed, so it must always be rendered\n * (visually hidden when there is no overflow).\n */\nexport const useCollapsingItems = (): UseCollapsingItemsReturn => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const moreRef = useRef<HTMLDivElement>(null);\n\n  const [state, setState] = useState(initialState);\n\n  const update = useCallback(() => {\n    const list = listRef.current;\n    const more = moreRef.current;\n    const container = list?.parentElement;\n\n    if (!list || !more || !container) {\n      return;\n    }\n\n    const items = Array.from(list.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement,\n    );\n\n    const containerStyle = window.getComputedStyle(container);\n    const availableWidth =\n      container.clientWidth -\n      (parseFloat(containerStyle.paddingInlineStart) || 0) -\n      (parseFloat(containerStyle.paddingInlineEnd) || 0);\n\n    const visibleCount = getVisibleItemCount(\n      items.map((item) => item.getBoundingClientRect().width),\n      availableWidth,\n      more.getBoundingClientRect().width,\n    );\n\n    items.forEach((item, index) => {\n      item.style.visibility = index < visibleCount ? \"\" : \"hidden\";\n    });\n\n    const menuHasCurrentItem = items\n      .slice(visibleCount)\n      .some(\n        (item) =>\n          !!item.querySelector('[aria-current]:not([aria-current=\"false\"])'),\n      );\n\n    setState((previous) => {\n      const next: CollapsingItemsState = {\n        visibleCount,\n        hasOverflow: visibleCount < items.length,\n        menuHasCurrentItem,\n      };\n\n      const isUnchanged =\n        previous.visibleCount === next.visibleCount &&\n        previous.hasOverflow === next.hasOverflow &&\n        previous.menuHasCurrentItem === next.menuHasCurrentItem;\n\n      return isUnchanged ? previous : next;\n    });\n  }, []);\n\n  // Runs after every render (no dependency array): the rendered items may\n  // have changed, so the observed elements are re-collected and re-measured.\n  // `update()` only triggers a re-render when the computed state changed.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const more = moreRef.current;\n    const container = list?.parentElement;\n\n    if (!list || !more || !container) {\n      return;\n    }\n\n    const observer = createFrameResizeObserver(update);\n    observer.observe([container, more, ...list.children]);\n\n    update();\n\n    return () => observer.disconnect();\n  });\n\n  return { ...state, listRef, moreRef };\n};\n\nexport default useCollapsingItems;\n"],"names":[],"mappings":";;;;AAmBA,MAAM,YAAA,GAAqC;AAAA,EACzC,YAAA,EAAc,IAAA;AAAA,EACd,WAAA,EAAa,KAAA;AAAA,EACb,kBAAA,EAAoB;AACtB,CAAA;AAUO,MAAM,qBAAqB,MAAgC;AAChE,EAAA,MAAM,OAAA,GAAU,OAAyB,IAAI,CAAA;AAC7C,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,MAAA,GAAS,YAAY,MAAM;AAC/B,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,YAAY,IAAA,EAAM,aAAA;AAExB,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,IAAA,IAAQ,CAAC,SAAA,EAAW;AAChC,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,IAAA,CAAK,IAAA,CAAK,QAAQ,CAAA,CAAE,MAAA;AAAA,MACtC,CAAC,UAAgC,KAAA,YAAiB;AAAA,KACpD;AAEA,IAAA,MAAM,cAAA,GAAiB,MAAA,CAAO,gBAAA,CAAiB,SAAS,CAAA;AACxD,IAAA,MAAM,cAAA,GACJ,SAAA,CAAU,WAAA,IACT,UAAA,CAAW,cAAA,CAAe,kBAAkB,CAAA,IAAK,CAAA,CAAA,IACjD,UAAA,CAAW,cAAA,CAAe,gBAAgB,CAAA,IAAK,CAAA,CAAA;AAElD,IAAA,MAAM,YAAA,GAAe,mBAAA;AAAA,MACnB,MAAM,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,qBAAA,GAAwB,KAAK,CAAA;AAAA,MACtD,cAAA;AAAA,MACA,IAAA,CAAK,uBAAsB,CAAE;AAAA,KAC/B;AAEA,IAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,EAAM,KAAA,KAAU;AAC7B,MAAA,IAAA,CAAK,KAAA,CAAM,UAAA,GAAa,KAAA,GAAQ,YAAA,GAAe,EAAA,GAAK,QAAA;AAAA,IACtD,CAAC,CAAA;AAED,IAAA,MAAM,kBAAA,GAAqB,KAAA,CACxB,KAAA,CAAM,YAAY,CAAA,CAClB,IAAA;AAAA,MACC,CAAC,IAAA,KACC,CAAC,CAAC,IAAA,CAAK,cAAc,4CAA4C;AAAA,KACrE;AAEF,IAAA,QAAA,CAAS,CAAC,QAAA,KAAa;AACrB,MAAA,MAAM,IAAA,GAA6B;AAAA,QACjC,YAAA;AAAA,QACA,WAAA,EAAa,eAAe,KAAA,CAAM,MAAA;AAAA,QAClC;AAAA,OACF;AAEA,MAAA,MAAM,WAAA,GACJ,QAAA,CAAS,YAAA,KAAiB,IAAA,CAAK,YAAA,IAC/B,QAAA,CAAS,WAAA,KAAgB,IAAA,CAAK,WAAA,IAC9B,QAAA,CAAS,kBAAA,KAAuB,IAAA,CAAK,kBAAA;AAEvC,MAAA,OAAO,cAAc,QAAA,GAAW,IAAA;AAAA,IAClC,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAKL,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,YAAY,IAAA,EAAM,aAAA;AAExB,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,IAAA,IAAQ,CAAC,SAAA,EAAW;AAChC,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,0BAA0B,MAAM,CAAA;AACjD,IAAA,QAAA,CAAS,QAAQ,CAAC,SAAA,EAAW,MAAM,GAAG,IAAA,CAAK,QAAQ,CAAC,CAAA;AAEpD,IAAA,MAAA,EAAO;AAEP,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAC,CAAA;AAED,EAAA,OAAO,EAAE,GAAG,KAAA,EAAO,OAAA,EAAS,OAAA,EAAQ;AACtC;;;;"}

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs

@@ -4,9 +4,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import * as Aria from 'react-aria-components';
 import styles from './TabList.module.scss.mjs';
+import { useTabIndicator } from '../../lib/useTabIndicator.mjs';
 import { useObserveOverflow } from '../../../../lib/hooks/dom/useObserveOverflow.mjs';
 import { Button } from '../../../Button/Button.mjs';
 import clsx from 'clsx';
+import { useMergeRefs } from 'use-callback-ref';
 import ContextMenuTriggerView from '../../../../views/ContextMenuTriggerView.mjs';
 import ContextMenuView from '../../../../views/ContextMenuView.mjs';
 import '@mittwald/flow-icons';
@@ -22,10 +24,15 @@ const TabList = (props) => {
   const overflowObserver = useObserveOverflow();
   const isCollapsed = overflowObserver.isOverflowing;
   const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);
+  const tabIndicator = useTabIndicator(isCollapsed);
+  const setTitlesRef = useMergeRefs([
+    overflowObserver.ref,
+    tabIndicator.titlesRef
+  ]);
   const handleContextMenuSelectionChange = (key) => {
     onContextMenuSelectionChange(key);
   };
-  const regularTabTitles = /* @__PURE__ */ jsx(Aria.TabList, { className: styles.titles, ref: overflowObserver.ref, children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "Titles", component: "Tabs" }) });
+  const regularTabTitles = /* @__PURE__ */ jsx(Aria.TabList, { className: styles.titles, ref: setTitlesRef, children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "Titles", component: "Tabs" }) });
   const contextMenuWhenCollapsed = isCollapsed && /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
     /* @__PURE__ */ jsxs(
       Button,
@@ -51,7 +58,18 @@ const TabList = (props) => {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, ref: tabIndicator.rootRef, children: [
+    !isCollapsed && tabIndicator.indicatorStyle && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: clsx(
+          styles.activeIndicator,
+          tabIndicator.isAnimated && styles.animated
+        ),
+        style: tabIndicator.indicatorStyle
+      }
+    ),
     regularTabTitles,
     contextMenuWhenCollapsed
   ] });

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n  selection: Aria.Key | undefined;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const { selection, disabledKeys, onContextMenuSelectionChange } = props;\n\n  const titleCollapsedElementId = useId();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList className={styles.titles} ref={overflowObserver.ref}>\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  return (\n    <div className={rootClassName}>\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBO,MAAM,OAAA,GAAqB,CAAC,KAAA,KAAU;AAC3C,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,4BAAA,EAA6B,GAAI,KAAA;AAElE,EAAA,MAAM,0BAA0B,KAAA,EAAM;AACtC,EAAA,MAAM,mBAAmB,kBAAA,EAAmB;AAC5C,EAAA,MAAM,cAAc,gBAAA,CAAiB,aAAA;AACrC,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,WAAA,IAAe,OAAO,SAAS,CAAA;AAE1E,EAAA,MAAM,gCAAA,GAAmC,CAAC,GAAA,KAAkB;AAC1D,IAAA,4BAAA,CAA6B,GAAG,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,mCACJ,GAAA,CAAC,IAAA,CAAK,OAAA,EAAL,EAAa,WAAW,MAAA,CAAO,MAAA,EAAQ,GAAA,EAAK,gBAAA,CAAiB,KAC5D,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,IAAG,QAAA,EAAS,SAAA,EAAU,QAAO,CAAA,EACtD,CAAA;AAGF,EAAA,MAAM,wBAAA,GAA2B,WAAA,oBAC/B,IAAA,CAAC,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,WAAW,MAAA,CAAO,iBAAA;AAAA,QAClB,KAAA,EAAM,OAAA;AAAA,QACN,iBAAA,EAAiB,uBAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,aAAA,EAAc,SAAA,EAAU,MAAA,EAAO,CAAA;AAAA,8BACxD,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,KACnB;AAAA,oBAEA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QACA,YAAA,EAAc,SAAA,GAAY,CAAC,SAAS,CAAA,GAAI,MAAA;AAAA,QACxC,aAAA,EAAc,YAAA;AAAA,QACd,QAAA,EAAU,CAAC,GAAA,KAAQ,gCAAA,CAAiC,GAAG,CAAA;AAAA,QAEvD,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,kBAAA,EAAmB,WAAU,MAAA,EAAO;AAAA;AAAA;AAChE,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA;AAAA,IAAA,gBAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TabList.mjs","sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n  selection: Aria.Key | undefined;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const { selection, disabledKeys, onContextMenuSelectionChange } = props;\n\n  const titleCollapsedElementId = useId();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n  const tabIndicator = useTabIndicator(isCollapsed);\n\n  const setTitlesRef = useMergeRefs<HTMLDivElement>([\n    overflowObserver.ref,\n    tabIndicator.titlesRef,\n  ]);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList className={styles.titles} ref={setTitlesRef}>\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  return (\n    <div className={rootClassName} ref={tabIndicator.rootRef}>\n      {!isCollapsed && tabIndicator.indicatorStyle && (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            styles.activeIndicator,\n            tabIndicator.isAnimated && styles.animated,\n          )}\n          style={tabIndicator.indicatorStyle}\n        />\n      )}\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoBO,MAAM,OAAA,GAAqB,CAAC,KAAA,KAAU;AAC3C,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,4BAAA,EAA6B,GAAI,KAAA;AAElE,EAAA,MAAM,0BAA0B,KAAA,EAAM;AACtC,EAAA,MAAM,mBAAmB,kBAAA,EAAmB;AAC5C,EAAA,MAAM,cAAc,gBAAA,CAAiB,aAAA;AACrC,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,WAAA,IAAe,OAAO,SAAS,CAAA;AAC1E,EAAA,MAAM,YAAA,GAAe,gBAAgB,WAAW,CAAA;AAEhD,EAAA,MAAM,eAAe,YAAA,CAA6B;AAAA,IAChD,gBAAA,CAAiB,GAAA;AAAA,IACjB,YAAA,CAAa;AAAA,GACd,CAAA;AAED,EAAA,MAAM,gCAAA,GAAmC,CAAC,GAAA,KAAkB;AAC1D,IAAA,4BAAA,CAA6B,GAAG,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,mCACJ,GAAA,CAAC,IAAA,CAAK,OAAA,EAAL,EAAa,WAAW,MAAA,CAAO,MAAA,EAAQ,GAAA,EAAK,YAAA,EAC3C,8BAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,QAAA,EAAS,SAAA,EAAU,QAAO,CAAA,EACtD,CAAA;AAGF,EAAA,MAAM,wBAAA,GAA2B,WAAA,oBAC/B,IAAA,CAAC,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,WAAW,MAAA,CAAO,iBAAA;AAAA,QAClB,KAAA,EAAM,OAAA;AAAA,QACN,iBAAA,EAAiB,uBAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,aAAA,EAAc,SAAA,EAAU,MAAA,EAAO,CAAA;AAAA,8BACxD,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,KACnB;AAAA,oBAEA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QACA,YAAA,EAAc,SAAA,GAAY,CAAC,SAAS,CAAA,GAAI,MAAA;AAAA,QACxC,aAAA,EAAc,YAAA;AAAA,QACd,QAAA,EAAU,CAAC,GAAA,KAAQ,gCAAA,CAAiC,GAAG,CAAA;AAAA,QAEvD,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,kBAAA,EAAmB,WAAU,MAAA,EAAO;AAAA;AAAA;AAChE,GAAA,EACF,CAAA;AAGF,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,GAAA,EAAK,aAAa,OAAA,EAC9C,QAAA,EAAA;AAAA,IAAA,CAAC,WAAA,IAAe,aAAa,cAAA,oBAC5B,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,SAAA,EAAW,IAAA;AAAA,UACT,MAAA,CAAO,eAAA;AAAA,UACP,YAAA,CAAa,cAAc,MAAA,CAAO;AAAA,SACpC;AAAA,QACA,OAAO,YAAA,CAAa;AAAA;AAAA,KACtB;AAAA,IAED,gBAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.module.scss.mjs

@@ -1,15 +1,19 @@
 "use client"
 /* */
 const tabList = "flow--tabs--tab-list";
+const activeIndicator = "flow--tabs--tab-list--active-indicator";
+const animated = "flow--tabs--tab-list--animated";
 const contextMenuButton = "flow--tabs--tab-list--context-menu-button";
 const titles = "flow--tabs--tab-list--titles";
 const collapsed = "flow--tabs--tab-list--collapsed";
 const styles = {
 	tabList: tabList,
+	activeIndicator: activeIndicator,
+	animated: animated,
 	contextMenuButton: contextMenuButton,
 	titles: titles,
 	collapsed: collapsed
 };
 
-export { collapsed, contextMenuButton, styles as default, tabList, titles };
+export { activeIndicator, animated, collapsed, contextMenuButton, styles as default, tabList, titles };
 //# sourceMappingURL=TabList.module.scss.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"TabList.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs

@@ -0,0 +1,61 @@
+"use client"
+/* */
+import { useRef, useState, useLayoutEffect } from 'react';
+import { createFrameResizeObserver } from '../../../lib/dom/createFrameResizeObserver.mjs';
+
+const getTabIndicatorStyle = (state) => state && {
+  "--tab-indicator-x": `${state.x}px`,
+  "--tab-indicator-width": `${state.width}px`
+};
+const useTabIndicator = (isCollapsed) => {
+  const rootRef = useRef(null);
+  const titlesRef = useRef(null);
+  const hasMeasuredRef = useRef(false);
+  const [indicator, setIndicator] = useState();
+  const resetIndicator = () => {
+    hasMeasuredRef.current = false;
+    setIndicator(void 0);
+  };
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const titles = titlesRef.current;
+    if (!root || !titles || isCollapsed) {
+      resetIndicator();
+      return;
+    }
+    const measureIndicator = () => {
+      const selectedTab = titles.querySelector("[data-selected]");
+      if (!selectedTab) {
+        resetIndicator();
+        return;
+      }
+      const rootRect = root.getBoundingClientRect();
+      const selectedTabRect = selectedTab.getBoundingClientRect();
+      const nextIndicator = {
+        x: selectedTabRect.left - rootRect.left,
+        width: selectedTabRect.width,
+        isAnimated: hasMeasuredRef.current
+      };
+      setIndicator((previousIndicator) => {
+        if (previousIndicator && previousIndicator.x === nextIndicator.x && previousIndicator.width === nextIndicator.width && previousIndicator.isAnimated === nextIndicator.isAnimated) {
+          return previousIndicator;
+        }
+        return nextIndicator;
+      });
+      hasMeasuredRef.current = true;
+    };
+    measureIndicator();
+    const observer = createFrameResizeObserver(measureIndicator);
+    observer.observe([root, titles]);
+    return () => observer.disconnect();
+  });
+  return {
+    rootRef,
+    titlesRef,
+    indicatorStyle: getTabIndicatorStyle(indicator),
+    isAnimated: indicator?.isAnimated ?? false
+  };
+};
+
+export { useTabIndicator };
+//# sourceMappingURL=useTabIndicator.mjs.map

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabIndicator.mjs","sources":["../../../../../../../../src/components/Tabs/lib/useTabIndicator.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\n\ninterface TabIndicatorState {\n  x: number;\n  width: number;\n  isAnimated: boolean;\n}\n\ninterface TabIndicatorStyle extends CSSProperties {\n  \"--tab-indicator-x\": string;\n  \"--tab-indicator-width\": string;\n}\n\nconst getTabIndicatorStyle = (\n  state: TabIndicatorState | undefined,\n): TabIndicatorStyle | undefined =>\n  state && {\n    \"--tab-indicator-x\": `${state.x}px`,\n    \"--tab-indicator-width\": `${state.width}px`,\n  };\n\nexport const useTabIndicator = (isCollapsed: boolean) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const titlesRef = useRef<HTMLDivElement | null>(null);\n  const hasMeasuredRef = useRef(false);\n  const [indicator, setIndicator] = useState<TabIndicatorState | undefined>();\n\n  const resetIndicator = () => {\n    hasMeasuredRef.current = false;\n    // React bails out of the re-render when the state is already `undefined`.\n    setIndicator(undefined);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const titles = titlesRef.current;\n\n    if (!root || !titles || isCollapsed) {\n      resetIndicator();\n      return;\n    }\n\n    const measureIndicator = () => {\n      const selectedTab = titles.querySelector<HTMLElement>(\"[data-selected]\");\n\n      if (!selectedTab) {\n        resetIndicator();\n        return;\n      }\n\n      const rootRect = root.getBoundingClientRect();\n      const selectedTabRect = selectedTab.getBoundingClientRect();\n      const nextIndicator: TabIndicatorState = {\n        x: selectedTabRect.left - rootRect.left,\n        width: selectedTabRect.width,\n        isAnimated: hasMeasuredRef.current,\n      };\n\n      setIndicator((previousIndicator) => {\n        if (\n          previousIndicator &&\n          previousIndicator.x === nextIndicator.x &&\n          previousIndicator.width === nextIndicator.width &&\n          previousIndicator.isAnimated === nextIndicator.isAnimated\n        ) {\n          return previousIndicator;\n        }\n\n        return nextIndicator;\n      });\n\n      hasMeasuredRef.current = true;\n    };\n\n    measureIndicator();\n\n    const observer = createFrameResizeObserver(measureIndicator);\n    observer.observe([root, titles]);\n\n    return () => observer.disconnect();\n  });\n\n  return {\n    rootRef,\n    titlesRef,\n    indicatorStyle: getTabIndicatorStyle(indicator),\n    isAnimated: indicator?.isAnimated ?? false,\n  };\n};\n"],"names":[],"mappings":";;;AAeA,MAAM,oBAAA,GAAuB,CAC3B,KAAA,KAEA,KAAA,IAAS;AAAA,EACP,mBAAA,EAAqB,CAAA,EAAG,KAAA,CAAM,CAAC,CAAA,EAAA,CAAA;AAAA,EAC/B,uBAAA,EAAyB,CAAA,EAAG,KAAA,CAAM,KAAK,CAAA,EAAA;AACzC,CAAA;AAEK,MAAM,eAAA,GAAkB,CAAC,WAAA,KAAyB;AACvD,EAAA,MAAM,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,SAAA,GAAY,OAA8B,IAAI,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,OAAO,KAAK,CAAA;AACnC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,EAAwC;AAE1E,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,cAAA,CAAe,OAAA,GAAU,KAAA;AAEzB,IAAA,YAAA,CAAa,MAAS,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AAEzB,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,MAAA,IAAU,WAAA,EAAa;AACnC,MAAA,cAAA,EAAe;AACf,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAA,MAAM,WAAA,GAAc,MAAA,CAAO,aAAA,CAA2B,iBAAiB,CAAA;AAEvE,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,cAAA,EAAe;AACf,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,QAAA,GAAW,KAAK,qBAAA,EAAsB;AAC5C,MAAA,MAAM,eAAA,GAAkB,YAAY,qBAAA,EAAsB;AAC1D,MAAA,MAAM,aAAA,GAAmC;AAAA,QACvC,CAAA,EAAG,eAAA,CAAgB,IAAA,GAAO,QAAA,CAAS,IAAA;AAAA,QACnC,OAAO,eAAA,CAAgB,KAAA;AAAA,QACvB,YAAY,cAAA,CAAe;AAAA,OAC7B;AAEA,MAAA,YAAA,CAAa,CAAC,iBAAA,KAAsB;AAClC,QAAA,IACE,iBAAA,IACA,iBAAA,CAAkB,CAAA,KAAM,aAAA,CAAc,CAAA,IACtC,iBAAA,CAAkB,KAAA,KAAU,aAAA,CAAc,KAAA,IAC1C,iBAAA,CAAkB,UAAA,KAAe,aAAA,CAAc,UAAA,EAC/C;AACA,UAAA,OAAO,iBAAA;AAAA,QACT;AAEA,QAAA,OAAO,aAAA;AAAA,MACT,CAAC,CAAA;AAED,MAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,IAC3B,CAAA;AAEA,IAAA,gBAAA,EAAiB;AAEjB,IAAA,MAAM,QAAA,GAAW,0BAA0B,gBAAgB,CAAA;AAC3D,IAAA,QAAA,CAAS,OAAA,CAAQ,CAAC,IAAA,EAAM,MAAM,CAAC,CAAA;AAE/B,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAC,CAAA;AAED,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA,EAAgB,qBAAqB,SAAS,CAAA;AAAA,IAC9C,UAAA,EAAY,WAAW,UAAA,IAAc;AAAA,GACvC;AACF;;;;"}

package/dist/js/packages/components/src/components/propTypes/index.mjs

@@ -38,6 +38,7 @@ const propsContextSupportingComponentsMap = {
   FileDropZone: true,
   Header: true,
   Heading: true,
+  TabNavigation: true,
   Icon: true,
   IllustratedMessage: true,
   Image: true,