@mittwald/flow-react-components 1.4.0-next.0 → 1.4.0-next.1

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

@@ -28,8 +28,9 @@ var useCollapsingItems = () => {
 		if (!list || !more || !container) return;
 		const items = Array.from(list.children).filter((child) => child instanceof HTMLElement);
 		const containerStyle = window.getComputedStyle(container);
+		const scale = container.offsetWidth > 0 ? container.getBoundingClientRect().width / container.offsetWidth : 1;
 		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);
+		const visibleCount = getVisibleItemCount(items.map((item) => item.getBoundingClientRect().width / scale), availableWidth, more.getBoundingClientRect().width / scale);
 		items.forEach((item, index) => {
 			item.style.visibility = index < visibleCount ? "" : "hidden";
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"useCollapsingItems.mjs","names":[],"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"],"mappings":";;;;;;AAmBA,IAAM,eAAqC;CACzC,cAAc;CACd,aAAa;CACb,oBAAoB;AACtB;;;;;;;;;AAUA,IAAa,2BAAqD;CAChE,MAAM,UAAU,OAAyB,IAAI;CAC7C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAE/C,MAAM,SAAS,kBAAkB;EAC/B,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,MAAM;EAExB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WACrB;EAGF,MAAM,QAAQ,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,QACrC,UAAgC,iBAAiB,WACpD;EAEA,MAAM,iBAAiB,OAAO,iBAAiB,SAAS;EACxD,MAAM,iBACJ,UAAU,eACT,WAAW,eAAe,kBAAkB,KAAK,MACjD,WAAW,eAAe,gBAAgB,KAAK;EAElD,MAAM,eAAe,oBACnB,MAAM,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,KAAK,GACtD,gBACA,KAAK,sBAAsB,CAAC,CAAC,KAC/B;EAEA,MAAM,SAAS,MAAM,UAAU;GAC7B,KAAK,MAAM,aAAa,QAAQ,eAAe,KAAK;EACtD,CAAC;EAED,MAAM,qBAAqB,MACxB,MAAM,YAAY,CAAC,CACnB,MACE,SACC,CAAC,CAAC,KAAK,cAAc,8CAA4C,CACrE;EAEF,UAAU,aAAa;GACrB,MAAM,OAA6B;IACjC;IACA,aAAa,eAAe,MAAM;IAClC;GACF;GAOA,OAJE,SAAS,iBAAiB,KAAK,gBAC/B,SAAS,gBAAgB,KAAK,eAC9B,SAAS,uBAAuB,KAAK,qBAElB,WAAW;EAClC,CAAC;CACH,GAAG,CAAC,CAAC;CAKL,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,MAAM;EAExB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WACrB;EAGF,MAAM,WAAW,0BAA0B,MAAM;EACjD,SAAS,QAAQ;GAAC;GAAW;GAAM,GAAG,KAAK;EAAQ,CAAC;EAEpD,OAAO;EAEP,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EAAE,GAAG;EAAO;EAAS;CAAQ;AACtC"}
+{"version":3,"file":"useCollapsingItems.mjs","names":[],"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    /*\n     * `clientWidth` and a computed padding are layout pixels, while\n     * `getBoundingClientRect` below reports rendered ones. Where an ancestor\n     * scales the subtree — a `transform`, a CSS `zoom` — comparing the two\n     * overstates the room by the scale factor, and the items stay visible\n     * instead of collapsing. The container's own two border-box widths give\n     * the factor; `clientWidth` would be off by the border.\n     */\n    const scale =\n      container.offsetWidth > 0\n        ? container.getBoundingClientRect().width / container.offsetWidth\n        : 1;\n\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 / scale),\n      availableWidth,\n      more.getBoundingClientRect().width / scale,\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"],"mappings":";;;;;;AAmBA,IAAM,eAAqC;CACzC,cAAc;CACd,aAAa;CACb,oBAAoB;AACtB;;;;;;;;;AAUA,IAAa,2BAAqD;CAChE,MAAM,UAAU,OAAyB,IAAI;CAC7C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAE/C,MAAM,SAAS,kBAAkB;EAC/B,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,MAAM;EAExB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WACrB;EAGF,MAAM,QAAQ,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,QACrC,UAAgC,iBAAiB,WACpD;EAEA,MAAM,iBAAiB,OAAO,iBAAiB,SAAS;EASxD,MAAM,QACJ,UAAU,cAAc,IACpB,UAAU,sBAAsB,CAAC,CAAC,QAAQ,UAAU,cACpD;EAEN,MAAM,iBACJ,UAAU,eACT,WAAW,eAAe,kBAAkB,KAAK,MACjD,WAAW,eAAe,gBAAgB,KAAK;EAElD,MAAM,eAAe,oBACnB,MAAM,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,QAAQ,KAAK,GAC9D,gBACA,KAAK,sBAAsB,CAAC,CAAC,QAAQ,KACvC;EAEA,MAAM,SAAS,MAAM,UAAU;GAC7B,KAAK,MAAM,aAAa,QAAQ,eAAe,KAAK;EACtD,CAAC;EAED,MAAM,qBAAqB,MACxB,MAAM,YAAY,CAAC,CACnB,MACE,SACC,CAAC,CAAC,KAAK,cAAc,8CAA4C,CACrE;EAEF,UAAU,aAAa;GACrB,MAAM,OAA6B;IACjC;IACA,aAAa,eAAe,MAAM;IAClC;GACF;GAOA,OAJE,SAAS,iBAAiB,KAAK,gBAC/B,SAAS,gBAAgB,KAAK,eAC9B,SAAS,uBAAuB,KAAK,qBAElB,WAAW;EAClC,CAAC;CACH,GAAG,CAAC,CAAC;CAKL,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,MAAM;EAExB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WACrB;EAGF,MAAM,WAAW,0BAA0B,MAAM;EACjD,SAAS,QAAQ;GAAC;GAAW;GAAM,GAAG,KAAK;EAAQ,CAAC;EAEpD,OAAO;EAEP,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EAAE,GAAG;EAAO;EAAS;CAAQ;AACtC"}

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

@@ -31,9 +31,10 @@ var useTabIndicator = (isCollapsed) => {
 			}
 			const rootRect = root.getBoundingClientRect();
 			const selectedTabRect = selectedTab.getBoundingClientRect();
+			const scale = root.offsetWidth > 0 ? rootRect.width / root.offsetWidth : 1;
 			const nextIndicator = {
-				x: selectedTabRect.left - rootRect.left,
-				width: selectedTabRect.width,
+				x: (selectedTabRect.left - rootRect.left) / scale,
+				width: selectedTabRect.width / scale,
 				isAnimated: hasMeasuredRef.current
 			};
 			setIndicator((previousIndicator) => {

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

@@ -1 +1 @@
-{"version":3,"file":"useTabIndicator.mjs","names":[],"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"],"mappings":";;;;;AAeA,IAAM,wBACJ,UAEA,SAAS;CACP,qBAAqB,GAAG,MAAM,EAAE;CAChC,yBAAyB,GAAG,MAAM,MAAM;AAC1C;AAEF,IAAa,mBAAmB,gBAAyB;CACvD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAE1E,MAAM,uBAAuB;EAC3B,eAAe,UAAU;EAEzB,aAAa,KAAA,CAAS;CACxB;CAEA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ,CAAC,UAAU,aAAa;GACnC,eAAe;GACf;EACF;EAEA,MAAM,yBAAyB;GAC7B,MAAM,cAAc,OAAO,cAA2B,iBAAiB;GAEvE,IAAI,CAAC,aAAa;IAChB,eAAe;IACf;GACF;GAEA,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,kBAAkB,YAAY,sBAAsB;GAC1D,MAAM,gBAAmC;IACvC,GAAG,gBAAgB,OAAO,SAAS;IACnC,OAAO,gBAAgB;IACvB,YAAY,eAAe;GAC7B;GAEA,cAAc,sBAAsB;IAClC,IACE,qBACA,kBAAkB,MAAM,cAAc,KACtC,kBAAkB,UAAU,cAAc,SAC1C,kBAAkB,eAAe,cAAc,YAE/C,OAAO;IAGT,OAAO;GACT,CAAC;GAED,eAAe,UAAU;EAC3B;EAEA,iBAAiB;EAEjB,MAAM,WAAW,0BAA0B,gBAAgB;EAC3D,SAAS,QAAQ,CAAC,MAAM,MAAM,CAAC;EAE/B,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,qBAAqB,SAAS;EAC9C,YAAY,WAAW,cAAc;CACvC;AACF"}
+{"version":3,"file":"useTabIndicator.mjs","names":[],"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\n      /*\n       * `getBoundingClientRect` reports rendered pixels, but the custom\n       * properties below are read as lengths inside the same subtree. Where an\n       * ancestor scales it — a `transform`, a CSS `zoom` — the two differ, and\n       * writing the rendered value back scales it a second time. The root's own\n       * rendered and layout width give the factor between them.\n       */\n      const scale =\n        root.offsetWidth > 0 ? rootRect.width / root.offsetWidth : 1;\n\n      const nextIndicator: TabIndicatorState = {\n        x: (selectedTabRect.left - rootRect.left) / scale,\n        width: selectedTabRect.width / scale,\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"],"mappings":";;;;;AAeA,IAAM,wBACJ,UAEA,SAAS;CACP,qBAAqB,GAAG,MAAM,EAAE;CAChC,yBAAyB,GAAG,MAAM,MAAM;AAC1C;AAEF,IAAa,mBAAmB,gBAAyB;CACvD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAE1E,MAAM,uBAAuB;EAC3B,eAAe,UAAU;EAEzB,aAAa,KAAA,CAAS;CACxB;CAEA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ,CAAC,UAAU,aAAa;GACnC,eAAe;GACf;EACF;EAEA,MAAM,yBAAyB;GAC7B,MAAM,cAAc,OAAO,cAA2B,iBAAiB;GAEvE,IAAI,CAAC,aAAa;IAChB,eAAe;IACf;GACF;GAEA,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,kBAAkB,YAAY,sBAAsB;GAS1D,MAAM,QACJ,KAAK,cAAc,IAAI,SAAS,QAAQ,KAAK,cAAc;GAE7D,MAAM,gBAAmC;IACvC,IAAI,gBAAgB,OAAO,SAAS,QAAQ;IAC5C,OAAO,gBAAgB,QAAQ;IAC/B,YAAY,eAAe;GAC7B;GAEA,cAAc,sBAAsB;IAClC,IACE,qBACA,kBAAkB,MAAM,cAAc,KACtC,kBAAkB,UAAU,cAAc,SAC1C,kBAAkB,eAAe,cAAc,YAE/C,OAAO;IAGT,OAAO;GACT,CAAC;GAED,eAAe,UAAU;EAC3B;EAEA,iBAAiB;EAEjB,MAAM,WAAW,0BAA0B,gBAAgB;EAC3D,SAAS,QAAQ,CAAC,MAAM,MAAM,CAAC;EAE/B,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,qBAAqB,SAAS;EAC9C,YAAY,WAAW,cAAc;CACvC;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.4.0-next.0",
+  "version": "1.4.0-next.1",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.4.0-next.0",
+    "@mittwald/flow-icons": "^1.4.0-next.1",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.4.0-next.0",
+    "@mittwald/react-tunnel": "^1.4.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.4.0-next.0",
-    "@mittwald/flow-design-tokens": "1.4.0-next.0",
-    "@mittwald/flow-icons-base": "1.4.0-next.0",
+    "@mittwald/flow-core": "1.4.0-next.1",
+    "@mittwald/flow-design-tokens": "1.4.0-next.1",
+    "@mittwald/flow-icons-base": "1.4.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.4.0-next.0",
+    "@mittwald/typescript-config": "1.4.0-next.1",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.4.0-next.0",
+    "@mittwald/flow-icons-pro": "1.4.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "d3cf8325cc06635accd2c170750429f9c834c87c"
+  "gitHead": "31ec95af38164122f89af7755bd2c05a9f5ca807"
 }