npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.9 → 1.5.0 - Mend

@mittwald/flow-react-components 1.5.0-next.9 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

package/dist/js/packages/components/src/components/Slider/Slider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /* Whether the marker for the initial value should be visible /\n showInitialMarker?: boolean;\n /* Whether the component is read only. /\n isReadOnly?: boolean;\n /* Whether the component is invalid. /\n isInvalid?: boolean;\n /* Hide Buttons, Label and Value /\n sliderOnly?: boolean;\n}\n\n/* @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {...~~fieldProps~~}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{\n \"--slider--value\": state.getThumbPercent(0),\n }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n \"--slider--initial-value\":\n state.getValuePercent(defaultValue),\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAgCA~~,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,~~YACA~~,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,sBAAO,QACP,~~cAAc~~,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,~~WAAW~~,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;~~EACP~~,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,~~WAAW~~,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN,~~EAAmB~~,~~WAAW,~~sBAAO,~~MAAQ~~,CAAA;OAAE;~~OAC/C~~,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,~~WAAW~~,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,~~qBAAA~~,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,~~WAAW~~,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,~~WAAW~~,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,~~WAAW~~,sBAAO;SAClB,OAAO,EACL,mBAAmB,MAAM,gBAAgB,CAAC,EAC5C;QACD,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,~~WAAW~~,sBAAO;SAClB,OAAO,EACL,2BACE,MAAM,gBAAgB,YAAY,EACtC;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;~~SACJ~~;SACN,~~WAAW~~,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}
1	+ {"version":3,"file":"Slider.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /* Whether the marker for the initial value should be visible /\n showInitialMarker?: boolean;\n /* Whether the component is read only. /\n isReadOnly?: boolean;\n /* Whether the component is invalid. /\n isInvalid?: boolean;\n /* Hide Buttons, Label and Value /\n sliderOnly?: boolean;\n}\n\n/* @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n // Reaches the thumb through `controlProps` – react-aria would add it a\n // second time from the slider.\n \"aria-describedby\": ignoredAriaDescribedBy,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n skeletonProps,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {...skeletonProps} className={wrapperProps.className}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value}>\n {({ defaultChildren }) => (\n <SkeletonTextContent defaultWidth=\"2em\">\n {defaultChildren}\n </SkeletonTextContent>\n )}\n </Aria.SliderOutput>{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{\n \"--slider--value\": state.getThumbPercent(0),\n }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n \"--slider--initial-value\":\n state.getValuePercent(defaultValue),\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n aria-describedby={controlProps[\"aria-describedby\"]}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,YAGA,oBAAoB,wBACpB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,sBAAO,QACP,cAAcA,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4BC,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAWD,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAe,WAAW,aAAa;EAC9C,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAWA,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN;QAAmB,WAAWA,sBAAO;QACjC,WAAA,EAAE,sBACF,oBAAC,qBAAD;SAAqB,cAAa;SAC/B,UAAA;QACkB,CAAA;OAEN,CAAA;OAAE;OACrB,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAWA,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAWF,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAWA,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,WAAWA,sBAAO;SAClB,OAAO,EACL,mBAAmB,MAAM,gBAAgB,CAAC,EAC5C;QACD,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,WAAWA,sBAAO;SAClB,OAAO,EACL,2BACE,MAAM,gBAAgB,YAAY,EACtC;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;SACV,oBAAkB,aAAa;SACzB;SACN,WAAWA,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/Slider/Slider.module.mjs CHANGED Viewed

@@ -23,7 +23,9 @@ var Slider_module_default = {
 	handle,
 	increment,
 	decrement,
-	disabled
+	disabled,
+	"skeleton-surface-shimmer": "flow--slider--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--slider--skeleton-text-shimmer"
 };
 //#endregion
 export { decrement, Slider_module_default as default, disabled, fill, handle, increment, initialMarker, label, slider, text, track, value };

package/dist/js/packages/components/src/components/Slider/Slider.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n width: calc(var(--slider--value) * 100%);\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n inset-inline-start: calc(var(--slider--initial-value) * 100% - 2px);\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/\n.slider {\n\n\n\n\n\n\n\n\n\n}\n/\n"],"mappings":""}
1	+ {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n width: calc(var(--slider--value) * 100%);\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n inset-inline-start: calc(var(--slider--initial-value) * 100% - 2px);\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n\n /* Skeleton: the track is the surface, the handle and the buttons in it\n disappear /\n .track {\n @include formControl.formSkeleton(var(--slider--corner-radius));\n }\n}\n\n/\n.slider {\n\n\n\n\n\n\n\n\n\n}\n*/\n"],"mappings":""}

package/dist/js/packages/components/src/components/Switch/Switch.mjs CHANGED Viewed

@@ -7,18 +7,19 @@ import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import Switch_module_default from "./Switch.module.mjs";
 import Label_module_default from "../Label/Label.module.mjs";
+import { SkeletonRawText } from "../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import clsx from "clsx";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
 import { useObjectRef } from "react-aria";
+import * as Aria from "react-aria-components";
 //#region src/components/Switch/Switch.tsx
 /** @flr-generate all */
 var Switch = flowComponent("Switch", (props) => {
 	const { children, className, labelPosition = "trailing", ref, ...rest } = props;
 	const rootClassName = clsx(Switch_module_default.switch, labelPosition !== "trailing" && Switch_module_default[`label-${labelPosition}`], className);
 	const objectRef = useObjectRef(ref);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Switch");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps, skeletonProps } = useFieldComponent(props, "Switch");
 	const propsContext = {
 		...fieldPropsContext,
 		Label: {
@@ -28,9 +29,11 @@ var Switch = flowComponent("Switch", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
+		...skeletonProps,
+		className: wrapperProps.className,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Switch, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			className: rootClassName,
 			inputRef: objectRef,
 			children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
@@ -43,7 +46,7 @@ var Switch = flowComponent("Switch", (props) => {
 					})
 				}), /* @__PURE__ */ jsx("div", {
 					className: Label_module_default.label,
-					children
+					children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
 				})]
 			})
 		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]

package/dist/js/packages/components/src/components/Switch/Switch.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" \| \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /*\n Whether the label should appear before or after the switch. @default\n * \"trailing\"\n /\n labelPosition?: \"leading\" \| \"trailing\";\n}\n\n/* @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n labelPosition !== \"trailing\" && styles[`label-${labelPosition}`],\n className,\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n ~~fieldProps~~,\n } = useFieldComponent(props, \"Switch\");\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n className: styles.label,\n },\n };\n\n return (\n <div {...~~fieldProps~~}>\n <FieldErrorCaptureContext>\n <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAwBA~~,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,gBAAgB,YAChB,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,sBAAO,QACP,kBAAkB,~~cAAc~~,sBAAO,SAAS,kBAChD,SACF;CAEA,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,QAAQ;CAErC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU;GACV,~~WAAW~~,sBAAO;EACpB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;~~EAAT~~,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,QAAN;~~GAAa~~,GAAI;~~GAAM~~,WAAW;~~GAAe~~,UAAU;~~GACvD~~,WAAA,EAAE,iBACF,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACE,oBAAC,OAAD;KAAK,~~WAAW~~,sBAAO;KACrB,UAAA,oBAAC,OAAD;MAAK,~~WAAW~~,sBAAO;MACpB,UAAA,aAAa,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA,IAAI,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA;KACzD,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,~~WAAW~~,qBAAY;~~KAAQ~~;~~IAAc~~,CAAA,~~CAC9B~~;;EAEb,CAAA,EACW,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
1	+ {"version":3,"file":"Switch.mjs","names":["styles","labelStyles"],"sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" \| \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /*\n Whether the label should appear before or after the switch. @default\n * \"trailing\"\n /\n labelPosition?: \"leading\" \| \"trailing\";\n}\n\n/* @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n labelPosition !== \"trailing\" && styles[`label-${labelPosition}`],\n className,\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n skeletonProps,\n } = useFieldComponent(props, \"Switch\");\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n className: styles.label,\n },\n };\n\n return (\n <div {...skeletonProps} className={wrapperProps.className}>\n <FieldErrorCaptureContext>\n <Aria.Switch\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={rootClassName}\n inputRef={objectRef}\n >\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>\n <SkeletonRawText>{children}</SkeletonRawText>\n </div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,gBAAgB,YAChB,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,sBAAO,QACP,kBAAkB,cAAcA,sBAAO,SAAS,kBAChD,SACF;CAEA,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU;GACV,WAAWA,sBAAO;EACpB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAe,WAAW,aAAa;EAAhD,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GAC/B,WAAW;GACX,UAAU;GAER,WAAA,EAAE,iBACF,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACE,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KACrB,UAAA,oBAAC,OAAD;MAAK,WAAWA,sBAAO;MACpB,UAAA,aAAa,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA,IAAI,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA;KACzD,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAWC,qBAAY;KAC1B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;IACzC,CAAA,CACe;;EAEb,CAAA,EACW,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

package/dist/js/packages/components/src/components/Switch/Switch.module.mjs CHANGED Viewed

@@ -9,7 +9,9 @@ var Switch_module_default = {
 	"label-leading": "flow--switch--label-leading",
 	track,
 	handle,
-	label
+	label,
+	"skeleton-surface-shimmer": "flow--switch--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--switch--skeleton-text-shimmer"
 };
 //#endregion
 export { Switch_module_default as default, handle, label, track };

package/dist/js/packages/components/src/components/Switch/Switch.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.module.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.switch {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n display: flex;\n align-items: center;\n column-gap: var(--switch--label-to-track-spacing);\n\n &.label-leading {\n flex-direction: row-reverse;\n }\n\n /* Elements /\n .track {\n width: var(--switch--track-width);\n height: var(--switch--track-height);\n background-color: var(--switch--track-background-color--default);\n border-radius: var(--switch--track-corner-radius);\n padding: var(--switch--track-padding);\n flex-shrink: 0;\n position: relative;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n align-self: start;\n\n @include focus.focus;\n }\n\n .handle {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--switch--handle-size);\n height: var(--switch--handle-size);\n background-color: var(--switch--handle-background-color);\n border-radius: var(--corner-radius--round);\n transition-property: transform;\n transition-duration: var(--transition--duration--default);\n\n / Subtle overshoot: the handle settles with a slight spring, like a\n physical toggle. /\n transition-timing-function: cubic-bezier(0.34, 1.35, 0.5, 1);\n transform: translateX(0);\n position: absolute;\n top: var(--switch--track-padding);\n inset-inline-start: var(--switch--track-padding);\n }\n\n .label {\n margin: 0;\n }\n\n / States */\n\n &[data-focus-visible] .track {\n outline-style: solid;\n }\n\n &[data-selected] {\n .track {\n background-color: var(--switch--track-background-color--selected);\n }\n\n .handle {\n transform: translate(100%);\n }\n }\n\n &[data-disabled] {\n .track {\n background-color: var(--switch--track-background-color--disabled);\n color: var(--switch--track-background-color--disabled);\n }\n\n .handle {\n color: var(--switch--handle-content-color--disabled);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Switch.module.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.switch {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n display: flex;\n align-items: center;\n column-gap: var(--switch--label-to-track-spacing);\n\n &.label-leading {\n flex-direction: row-reverse;\n }\n\n /* Elements /\n .track {\n width: var(--switch--track-width);\n height: var(--switch--track-height);\n background-color: var(--switch--track-background-color--default);\n border-radius: var(--switch--track-corner-radius);\n padding: var(--switch--track-padding);\n flex-shrink: 0;\n position: relative;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n align-self: start;\n\n @include focus.focus;\n }\n\n .handle {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--switch--handle-size);\n height: var(--switch--handle-size);\n background-color: var(--switch--handle-background-color);\n border-radius: var(--corner-radius--round);\n transition-property: transform;\n transition-duration: var(--transition--duration--default);\n\n / Subtle overshoot: the handle settles with a slight spring, like a\n physical toggle. /\n transition-timing-function: cubic-bezier(0.34, 1.35, 0.5, 1);\n transform: translateX(0);\n position: absolute;\n top: var(--switch--track-padding);\n inset-inline-start: var(--switch--track-padding);\n }\n\n .label {\n margin: 0;\n }\n\n / States /\n\n &[data-focus-visible] .track {\n outline-style: solid;\n }\n\n &[data-selected] {\n .track {\n background-color: var(--switch--track-background-color--selected);\n }\n\n .handle {\n transform: translate(100%);\n }\n }\n\n &[data-disabled] {\n .track {\n background-color: var(--switch--track-background-color--disabled);\n color: var(--switch--track-background-color--disabled);\n }\n\n .handle {\n color: var(--switch--handle-content-color--disabled);\n }\n }\n\n / Skeleton: the track is the surface, the handle in it disappears */\n .track {\n @include formControl.formSkeleton(var(--switch--track-corner-radius));\n }\n}\n"],"mappings":""}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
@@ -24,6 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var TabNavigation = flowComponent("TabNavigation", (props) => {
 	const { children, className, ref, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "TabNavigation");
+	const isSkeleton = useSkeletonMode();
 	const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
 	const rootClassName = clsx(TabNavigation_module_default.tabNavigation, hasOverflow && TabNavigation_module_default.collapsed, className);
 	const propsContext = { Link: {
@@ -47,6 +49,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 		}), /* @__PURE__ */ jsx("div", {
 			className: TabNavigation_module_default.more,
 			ref: moreRef,
+			inert: isSkeleton || void 0,
 			children: /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [/* @__PURE__ */ jsxs(Button, {
 				unstyled: true,
 				className: clsx(TabNavigation_module_default.moreButton, menuHasCurrentItem && TabNavigation_module_default.current),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNavigation.mjs","names":[],"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 className={styles.item} />,\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 className={styles.list} 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"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;AAkCA~~,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,eAAe;~~CAE5E~~,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,~~KACpB~~,6BAAO,eACP,~~eAAe~~,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,~~WAAW~~,6BAAO,KAAO,CAAA;EACvC,~~WAAW~~,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,~~WAAW~~,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;~~GAAK~~,~~WAAW~~,6BAAO;~~GAAM~~,KAAK;~~GAChC~~,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,~~KACT~~,6BAAO,YACP,~~sBAAsB~~,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}
1	+ {"version":3,"file":"TabNavigation.mjs","names":["locales","styles"],"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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 const isSkeleton = useSkeletonMode();\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 className={styles.item} />,\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 className={styles.list} ref={listRef}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n <div\n className={styles.more}\n ref={moreRef}\n inert={isSkeleton \|\| undefined}\n >\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4BA,kBAAS,eAAe;CAC5E,MAAM,aAAa,gBAAgB;CAEnC,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpBC,6BAAO,eACP,eAAeA,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,6BAAO,KAAO,CAAA;EACvC,WAAWA,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAWA,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GACE,WAAWA,6BAAO;GAClB,KAAK;GACL,OAAO,cAAc,KAAA;GAErB,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACTA,6BAAO,YACP,sBAAsBA,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkContent.mjs","names":[],"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"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,cAAc;CAEtB,MAAM,EACJ,UACA,MACA,QACA,KACA,UACA,UACA,MACA,gBACA,eACA,cAAc,WACd,gBAAgB,gBACd;CAEJ,OACE,~~qBAAA~~,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,kBAAA;EACJ,UAAA,oBAAC,QAAD;GAAM,~~WAAW~~,6BAAO;GAAO;EAAe,CAAA;CAC1C,CAAA,GACN,oBAAC,wBAAD;EAAwB,IAAG;EAAY,WAAU;EAC/C,UAAA,oBAAC,UAAD;GACE,gBAAc;GACR;GACE;GACH;GACK;GACA;GACJ;GACU;GACD;GACf,cAAY;GAEX;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"LinkContent.mjs","names":["_Fragment","styles"],"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"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,cAAc;CAEtB,MAAM,EACJ,UACA,MACA,QACA,KACA,UACA,UACA,MACA,gBACA,eACA,cAAc,WACd,gBAAgB,gBACd;CAEJ,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,kBAAA;EACJ,UAAA,oBAAC,QAAD;GAAM,WAAWC,6BAAO;GAAO;EAAe,CAAA;CAC1C,CAAA,GACN,oBAAC,wBAAD;EAAwB,IAAG;EAAY,WAAU;EAC/C,UAAA,oBAAC,UAAD;GACE,gBAAc;GACR;GACE;GACH;GACK;GACA;GACJ;GACU;GACD;GACf,cAAY;GAEX;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n Aria.TableProps,\n \"render\" \| \"className\" \| \"style\"\n> & {\n /** The vertical alignment of the table cells content. /\n verticalAlign?: \"top\" \| \"middle\";\n /\n The column-sizing algorithm of the table. Use \"fixed\" together with column\n * widths to enforce exact widths. @default \"auto\"\n /\n layout?: \"auto\" \| \"fixed\";\n /\n The minimum width of the table. Below this width the table scrolls\n * horizontally instead of shrinking its columns.\n /\n minWidth?: number \| string;\n /* The elements class name. /\n className?: string;\n};\n\n/* @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n const {\n children,\n className,\n verticalAlign = \"top\",\n layout = \"auto\",\n minWidth,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.table,\n verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n styles[`layout-${layout}`],\n className,\n );\n\n return (\n <div className={styles.tableContainer}>\n <div className={styles.tableScrollArea} style={{ minWidth }}>\n <Aria.Table className={rootClassName} {...rest}>\n {children}\n </Aria.Table>\n </div>\n </div>\n );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AA0BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,qBAAO,OACP,kBAAkB,~~SAAS~~,qBAAO,kBAAkB,~~kBACpD~~,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,~~WAAW~~,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,~~WAAW~~,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IAAY,WAAW;IAAe,GAAI;IACvC;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}
1	+ {"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n Aria.TableProps,\n \"render\" \| \"className\" \| \"style\"\n> & {\n /** The vertical alignment of the table cells content. /\n verticalAlign?: \"top\" \| \"middle\";\n /\n The column-sizing algorithm of the table. Use \"fixed\" together with column\n * widths to enforce exact widths. @default \"auto\"\n /\n layout?: \"auto\" \| \"fixed\";\n /\n The minimum width of the table. Below this width the table scrolls\n * horizontally instead of shrinking its columns.\n /\n minWidth?: number \| string;\n /* The elements class name. /\n className?: string;\n};\n\n/* @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n const {\n children,\n className,\n verticalAlign = \"top\",\n layout = \"auto\",\n minWidth,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.table,\n verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n styles[`layout-${layout}`],\n className,\n );\n\n return (\n <div className={styles.tableContainer}>\n <div className={styles.tableScrollArea} style={{ minWidth }}>\n <Aria.Table className={rootClassName} {...rest}>\n {children}\n </Aria.Table>\n </div>\n </div>\n );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AA0BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,OACP,kBAAkB,SAASA,qBAAO,kBAAkB,kBACpDA,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWA,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAWA,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IAAY,WAAW;IAAe,GAAI;IACvC;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}

package/dist/js/packages/components/src/components/Table/components/TableBody/TableBody.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableBody.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableBody/TableBody.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableBodyProps = Aria.TableBodyProps<never>;\n\n/** @flr-generate all */\nexport const TableBody: FC<TableBodyProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const rootClassName = clsx(styles.body, className);\n\n return (\n <Aria.TableBody className={rootClassName} {...rest}>\n {children}\n </Aria.TableBody>\n );\n};\n\nexport default TableBody;\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,~~KAAK~~,qBAAO,MAAM,SAAS;CAEjD,OACE,oBAAC,KAAK,WAAN;EAAgB,WAAW;EAAe,GAAI;EAC3C;CACa,CAAA;AAEpB"}
1	+ {"version":3,"file":"TableBody.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableBody/TableBody.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableBodyProps = Aria.TableBodyProps<never>;\n\n/** @flr-generate all */\nexport const TableBody: FC<TableBodyProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const rootClassName = clsx(styles.body, className);\n\n return (\n <Aria.TableBody className={rootClassName} {...rest}>\n {children}\n </Aria.TableBody>\n );\n};\n\nexport default TableBody;\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,MAAM,SAAS;CAEjD,OACE,oBAAC,KAAK,WAAN;EAAgB,WAAW;EAAe,GAAI;EAC3C;CACa,CAAA;AAEpB"}

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
+import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
 import { TableColumn } from "../TableColumn/TableColumn.mjs";
 import clsx from "clsx";
@@ -14,7 +15,7 @@ var TableCell = (props) => {
 	const rootClassName = clsx(Table_module_default.cell, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	const content = /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
-		children
+		children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
 	});
 	if (rowHeader) return /* @__PURE__ */ jsx(TableColumn, {
 		className: rootClassName,

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\n\nexport interface TableCellProps\n extends\n Omit<Aria.CellProps, \"children\" \| \"style\" \| \"render\">,\n PropsWithChildren {\n /** Use cell as row header /\n rowHeader?: boolean;\n /* Horizontal alignment of the cell content @default \"start\" /\n horizontalAlign?: \"start\" \| \"center\" \| \"end\";\n}\n\n/* @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n const {\n children,\n className,\n rowHeader,\n horizontalAlign = \"start\",\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.cell,\n horizontalAlign !== \"start\" &&\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const content = (\n <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n );\n\n if (rowHeader) {\n return (\n <TableColumn className={rootClassName} {...rest}>\n {content}\n </TableColumn>\n );\n }\n\n return (\n <Aria.Cell className={rootClassName} {...rest}>\n {content}\n </Aria.Cell>\n );\n};\n\nexport default TableCell;\n"],"mappings":"~~;;;;;;;;;;;AAmBA~~,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,qBAAO,MACP,oBAAoB,~~WAClB~~,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;~~EAAI~~;~~CAAmB~~,CAAA;~~CAG1E~~,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}
1	+ {"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n extends\n Omit<Aria.CellProps, \"children\" \| \"style\" \| \"render\">,\n PropsWithChildren {\n /** Use cell as row header /\n rowHeader?: boolean;\n /* Horizontal alignment of the cell content @default \"start\" /\n horizontalAlign?: \"start\" \| \"center\" \| \"end\";\n}\n\n/* @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n const {\n children,\n className,\n rowHeader,\n horizontalAlign = \"start\",\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.cell,\n horizontalAlign !== \"start\" &&\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const content = (\n <Suspense fallback={<SkeletonText width=\"100px\" />}>\n <SkeletonRawText>{children}</SkeletonRawText>\n </Suspense>\n );\n\n if (rowHeader) {\n return (\n <TableColumn className={rootClassName} {...rest}>\n {content}\n </TableColumn>\n );\n }\n\n return (\n <Aria.Cell className={rootClassName} {...rest}>\n {content}\n </Aria.Cell>\n );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;EAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;CACpC,CAAA;CAGZ,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
+import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -21,7 +22,7 @@ var TableColumn = (props) => {
 		},
 		children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
-			children
+			children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
 		})
 	});
 };

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableColumn.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n extends\n Omit<\n Aria.ColumnProps,\n \"children\" \| \"width\" \| \"minWidth\" \| \"maxWidth\" \| \"style\"\n >,\n PropsWithChildren {\n /** Horizontal alignment of the cell content @default \"start\" /\n horizontalAlign?: \"start\" \| \"center\" \| \"end\";\n /* The width of the column. /\n width?: number \| string;\n /* The minimum width of the column. /\n minWidth?: number \| string;\n}\n\n/* @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n const {\n children,\n className,\n horizontalAlign = \"start\",\n width,\n minWidth,\n ...rest\n } = props;\n const rootClassName = clsx(\n styles.column,\n horizontalAlign !== \"start\" &&\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n return (\n <Aria.Column\n isRowHeader\n className={rootClassName}\n {...rest}\n style={{ width, minWidth }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Column>\n );\n};\n\nexport default TableColumn;\n"],"mappings":"~~;;;;;;;;;AAsBA~~,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,~~KACpB~~,qBAAO,QACP,oBAAoB,~~WAClB~~,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;~~GAC1B~~;~~EACmB~~,CAAA;CACX,CAAA;AAEjB"}
1	+ {"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableColumnProps\n extends\n Omit<\n Aria.ColumnProps,\n \"children\" \| \"width\" \| \"minWidth\" \| \"maxWidth\" \| \"style\"\n >,\n PropsWithChildren {\n /** Horizontal alignment of the cell content @default \"start\" /\n horizontalAlign?: \"start\" \| \"center\" \| \"end\";\n /* The width of the column. /\n width?: number \| string;\n /* The minimum width of the column. /\n minWidth?: number \| string;\n}\n\n/* @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n const {\n children,\n className,\n horizontalAlign = \"start\",\n width,\n minWidth,\n ...rest\n } = props;\n const rootClassName = clsx(\n styles.column,\n horizontalAlign !== \"start\" &&\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n return (\n <Aria.Column\n isRowHeader\n className={rootClassName}\n {...rest}\n style={{ width, minWidth }}\n >\n <PropsContextProvider props={propsContext}>\n <SkeletonRawText>{children}</SkeletonRawText>\n </PropsContextProvider>\n </Aria.Column>\n );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}

package/dist/js/packages/components/src/components/Table/components/TableHeader/TableHeader.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const rootClassName = clsx(styles.header, className);\n\n return (\n <Aria.TableHeader className={rootClassName} {...rest}>\n {children}\n </Aria.TableHeader>\n );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,~~KAAK~~,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}
1	+ {"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const rootClassName = clsx(styles.header, className);\n\n return (\n <Aria.TableHeader className={rootClassName} {...rest}>\n {children}\n </Aria.TableHeader>\n );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}

package/dist/js/packages/components/src/components/Table/components/TableRow/TableRow.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableRow/TableRow.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableRowProps = Aria.RowProps<never> & {\n /** @internal /\n footer?: boolean;\n};\n\n/* @flr-generate all */\nexport const TableRow: FC<TableRowProps> = (props) => {\n const { children, className, footer, ...rest } = props;\n\n return (\n <Aria.Row\n className={(props) =>\n clsx(\n styles.row,\n footer && styles.footer,\n typeof className === \"function\" ? className(props) : className,\n )\n }\n {...rest}\n >\n {children}\n </Aria.Row>\n );\n};\n\nexport default TableRow;\n"],"mappings":";;;;;;;;AAWA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,QAAQ,GAAG,SAAS;CAEjD,OACE,oBAAC,KAAK,KAAN;EACE,YAAY,UACV,~~KACE~~,qBAAO,KACP,~~UAAU~~,qBAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAEF,GAAI;EAEH;CACO,CAAA;AAEd"}
1	+ {"version":3,"file":"TableRow.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableRow/TableRow.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableRowProps = Aria.RowProps<never> & {\n /** @internal /\n footer?: boolean;\n};\n\n/* @flr-generate all */\nexport const TableRow: FC<TableRowProps> = (props) => {\n const { children, className, footer, ...rest } = props;\n\n return (\n <Aria.Row\n className={(props) =>\n clsx(\n styles.row,\n footer && styles.footer,\n typeof className === \"function\" ? className(props) : className,\n )\n }\n {...rest}\n >\n {children}\n </Aria.Row>\n );\n};\n\nexport default TableRow;\n"],"mappings":";;;;;;;;AAWA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,QAAQ,GAAG,SAAS;CAEjD,OACE,oBAAC,KAAK,KAAN;EACE,YAAY,UACV,KACEA,qBAAO,KACP,UAAUA,qBAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAEF,GAAI;EAEH;CACO,CAAA;AAEd"}

package/dist/js/packages/components/src/components/Tabs/Tabs.mjs CHANGED Viewed

@@ -8,8 +8,8 @@ import { FallbackTab } from "./components/FallbackTab/FallbackTab.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
 import { useIsSSR } from "react-aria";
+import * as Aria from "react-aria-components";
 //#region src/components/Tabs/Tabs.tsx
 /** @flr-generate all */
 var Tabs = flowComponent("Tabs", (props) => {

package/dist/js/packages/components/src/components/Tabs/Tabs.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n extends\n Omit<Aria.TabsProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n /*\n An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n * how the group is named when the surrounding heading does not already do\n * it.\n /\n \"aria-label\"?: string;\n /* The id of an element that names the tab list. /\n \"aria-labelledby\"?: string;\n /\n The view rendered when the selected tab does not exist. Defaults to a\n * built-in IllustratedMessage.\n /\n tabNotFoundView?: ReactNode;\n}\n\n/* @flr-generate all /\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n const {\n children,\n className,\n defaultSelectedKey,\n selectedKey: selectedKeyProps,\n disabledKeys,\n ref,\n onSelectionChange,\n tabNotFoundView,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.tabs, className);\n const [selectedKeyState, setSelectedKeyState] = useState<\n Aria.Key \| undefined\n >(defaultSelectedKey);\n\n /\n * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n * selected yet — see the controlled-from-the-first-render convention in\n * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n * below.\n */\n const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\n\n const isSsr = useIsSSR();\n\n return (\n <>\n {children}\n <Aria.Tabs\n slot={null}\n className={rootClassName}\n {...rest}\n selectedKey={selectedKey as Aria.Key \| undefined}\n onSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n ref={ref}\n >\n <TabList\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n selection={selectedKey}\n onContextMenuSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n />\n <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n </Aria.Tabs>\n </>\n );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KAAK~~,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,MAAM,QAAQ,SAAS;CAEvB,OACE,~~qBAAA~~,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}
1	+ {"version":3,"file":"Tabs.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n extends\n Omit<Aria.TabsProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n /*\n An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n * how the group is named when the surrounding heading does not already do\n * it.\n /\n \"aria-label\"?: string;\n /* The id of an element that names the tab list. /\n \"aria-labelledby\"?: string;\n /\n The view rendered when the selected tab does not exist. Defaults to a\n * built-in IllustratedMessage.\n /\n tabNotFoundView?: ReactNode;\n}\n\n/* @flr-generate all /\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n const {\n children,\n className,\n defaultSelectedKey,\n selectedKey: selectedKeyProps,\n disabledKeys,\n ref,\n onSelectionChange,\n tabNotFoundView,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.tabs, className);\n const [selectedKeyState, setSelectedKeyState] = useState<\n Aria.Key \| undefined\n >(defaultSelectedKey);\n\n /\n * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n * selected yet — see the controlled-from-the-first-render convention in\n * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n * below.\n */\n const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\n\n const isSsr = useIsSSR();\n\n return (\n <>\n {children}\n <Aria.Tabs\n slot={null}\n className={rootClassName}\n {...rest}\n selectedKey={selectedKey as Aria.Key \| undefined}\n onSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n ref={ref}\n >\n <TabList\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n selection={selectedKey}\n onContextMenuSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n />\n <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n </Aria.Tabs>\n </>\n );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}

package/dist/js/packages/components/src/components/Tabs/components/FallbackTab/FallbackTab.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ import { Text } from "../../../Text/Text.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
 import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessage.mjs";
 import Tabs_module_default from "../../Tabs.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_32.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_33.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tabs/components/FallbackTab/FallbackTab.tsx
 var FallbackTab = (props) => {

package/dist/js/packages/components/src/components/Tabs/components/FallbackTab/FallbackTab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FallbackTab.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/FallbackTab/FallbackTab.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Tabs.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/*.locale.json\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { Heading } from \"@/components/Heading\";\nimport { Text } from \"@/components/Text\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { TabsProps } from \"@/components/Tabs\";\n\ntype FallbackTabProps = Pick<TabsProps, \"tabNotFoundView\">;\n\nexport const FallbackTab: FC<FallbackTabProps> = (props) => {\n const { tabNotFoundView } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Tabs\");\n\n if (tabNotFoundView) {\n return <div className={styles.fallbackTab}>{tabNotFoundView}</div>;\n }\n\n return (\n <IllustratedMessage className={styles.fallbackTab} color=\"unavailable\">\n <AlertIcon status=\"unavailable\" />\n <Heading>{stringFormatter.format(\"fallbackTab.heading\")}</Heading>\n <Text>{stringFormatter.format(\"fallbackTab.text\")}</Text>\n </IllustratedMessage>\n );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,oBAAoB;CAE5B,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,MAAM;CAEnE,IAAI,iBACF,OAAO,oBAAC,OAAD;EAAK,~~WAAW~~,oBAAO;EAAc,UAAA;CAAqB,CAAA;CAGnE,OACE,qBAAC,oBAAD;EAAoB,~~WAAW~~,oBAAO;EAAa,OAAM;EAAzD,UAAA;GACE,oBAAC,WAAD,EAAW,QAAO,cAAe,CAAA;GACjC,oBAAC,SAAD,EAAA,UAAU,gBAAgB,OAAO,qBAAqB,EAAW,CAAA;GACjE,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,kBAAkB,EAAQ,CAAA;EACtC;;AAExB"}
1	+ {"version":3,"file":"FallbackTab.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/Tabs/components/FallbackTab/FallbackTab.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Tabs.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/*.locale.json\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { Heading } from \"@/components/Heading\";\nimport { Text } from \"@/components/Text\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { TabsProps } from \"@/components/Tabs\";\n\ntype FallbackTabProps = Pick<TabsProps, \"tabNotFoundView\">;\n\nexport const FallbackTab: FC<FallbackTabProps> = (props) => {\n const { tabNotFoundView } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Tabs\");\n\n if (tabNotFoundView) {\n return <div className={styles.fallbackTab}>{tabNotFoundView}</div>;\n }\n\n return (\n <IllustratedMessage className={styles.fallbackTab} color=\"unavailable\">\n <AlertIcon status=\"unavailable\" />\n <Heading>{stringFormatter.format(\"fallbackTab.heading\")}</Heading>\n <Text>{stringFormatter.format(\"fallbackTab.text\")}</Text>\n </IllustratedMessage>\n );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,oBAAoB;CAE5B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,IAAI,iBACF,OAAO,oBAAC,OAAD;EAAK,WAAWC,oBAAO;EAAc,UAAA;CAAqB,CAAA;CAGnE,OACE,qBAAC,oBAAD;EAAoB,WAAWA,oBAAO;EAAa,OAAM;EAAzD,UAAA;GACE,oBAAC,WAAD,EAAW,QAAO,cAAe,CAAA;GACjC,oBAAC,SAAD,EAAA,UAAU,gBAAgB,OAAO,qBAAqB,EAAW,CAAA;GACjE,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,kBAAkB,EAAQ,CAAA;EACtC;;AAExB"}

package/dist/js/packages/components/src/components/Tabs/components/Tab/Tab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport type { TabPanelRenderProps } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Tabs.module.scss\";\nimport clsx from \"clsx\";\nimport { TabContextProvider } from \"@/components/Tabs/components/Tab/context\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Activity } from \"@/components/Activity\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabProps\n extends Omit<Aria.TabPanelProps, \"children\">, PropsWithChildren {}\n\n/** @flr-generate all */\nexport const Tab: FC<TabProps> = (props) => {\n const { children, className, id: idFromProps, ...rest } = props;\n\n const rootClassName = clsx(styles.tabPanel, className);\n\n const generatedId = useId();\n const id = idFromProps ?? generatedId;\n\n const TabPanelRenderer = (props: TabPanelRenderProps): Awaited<ReactNode> => {\n const isSelected = props.state.selectedKey === id;\n\n const propsContext: PropsContext = {\n Content: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n Section: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[isSelected, children]}\n >\n {children}\n </PropsContextProvider>\n );\n };\n\n return (\n <UiComponentTunnelEntry id=\"Panels\" component=\"Tabs\">\n <TabContextProvider value={{ id }}>\n <Aria.TabPanel\n className={rootClassName}\n shouldForceMount\n id={id}\n {...rest}\n >\n {TabPanelRenderer}\n </Aria.TabPanel>\n </TabContextProvider>\n </UiComponentTunnelEntry>\n );\n};\n\nexport default Tab;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,UAAU,WAAW,IAAI,aAAa,GAAG,SAAS;CAE1D,MAAM,gBAAgB,~~KAAK~~,oBAAO,UAAU,SAAS;CAErD,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,eAAe;CAE1B,MAAM,oBAAoB,UAAmD;EAC3E,MAAM,aAAa,MAAM,MAAM,gBAAgB;EAW/C,OACE,oBAAC,sBAAD;GACE,OAAO;IAVT,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;IACA,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;GAKS;GACP,cAAc,CAAC,YAAY,QAAQ;GAElC;EACmB,CAAA;CAE1B;CAEA,OACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,oBAAD;GAAoB,OAAO,EAAE,GAAG;GAC9B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,kBAAA;IACI;IACJ,GAAI;IAEH,UAAA;GACY,CAAA;EACG,CAAA;CACE,CAAA;AAE5B"}
1	+ {"version":3,"file":"Tab.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport type { TabPanelRenderProps } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Tabs.module.scss\";\nimport clsx from \"clsx\";\nimport { TabContextProvider } from \"@/components/Tabs/components/Tab/context\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Activity } from \"@/components/Activity\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabProps\n extends Omit<Aria.TabPanelProps, \"children\">, PropsWithChildren {}\n\n/** @flr-generate all */\nexport const Tab: FC<TabProps> = (props) => {\n const { children, className, id: idFromProps, ...rest } = props;\n\n const rootClassName = clsx(styles.tabPanel, className);\n\n const generatedId = useId();\n const id = idFromProps ?? generatedId;\n\n const TabPanelRenderer = (props: TabPanelRenderProps): Awaited<ReactNode> => {\n const isSelected = props.state.selectedKey === id;\n\n const propsContext: PropsContext = {\n Content: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n Section: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[isSelected, children]}\n >\n {children}\n </PropsContextProvider>\n );\n };\n\n return (\n <UiComponentTunnelEntry id=\"Panels\" component=\"Tabs\">\n <TabContextProvider value={{ id }}>\n <Aria.TabPanel\n className={rootClassName}\n shouldForceMount\n id={id}\n {...rest}\n >\n {TabPanelRenderer}\n </Aria.TabPanel>\n </TabContextProvider>\n </UiComponentTunnelEntry>\n );\n};\n\nexport default Tab;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,UAAU,WAAW,IAAI,aAAa,GAAG,SAAS;CAE1D,MAAM,gBAAgB,KAAKA,oBAAO,UAAU,SAAS;CAErD,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,eAAe;CAE1B,MAAM,oBAAoB,UAAmD;EAC3E,MAAM,aAAa,MAAM,MAAM,gBAAgB;EAW/C,OACE,oBAAC,sBAAD;GACE,OAAO;IAVT,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;IACA,SAAS,EACP,UAAU,oBAAC,UAAD;KAAU,UAAU;KAAY,qBAAA;IAAqB,CAAA,EACjE;GAKS;GACP,cAAc,CAAC,YAAY,QAAQ;GAElC;EACmB,CAAA;CAE1B;CAEA,OACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,oBAAD;GAAoB,OAAO,EAAE,GAAG;GAC9B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,kBAAA;IACI;IACJ,GAAI;IAEH,UAAA;GACY,CAAA;EACG,CAAA;CACE,CAAA;AAE5B"}

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { IconChevronDown } from "../../../Icon/components/icons/IconChevronDown.mjs";
 import { Button } from "../../../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTunnelExit.mjs";
@@ -17,6 +18,7 @@ import { useMergeRefs } from "use-callback-ref";
 var TabList = (props) => {
 	const { selection, disabledKeys, onContextMenuSelectionChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
 	const titleCollapsedElementId = useId();
+	const isSkeleton = useSkeletonMode();
 	const overflowObserver = useObserveOverflow();
 	const isCollapsed = overflowObserver.isOverflowing;
 	const rootClassName = clsx(TabList_module_default.tabList, isCollapsed && TabList_module_default.collapsed);
@@ -54,11 +56,13 @@ var TabList = (props) => {
 			component: "Tabs"
 		})
 	})] });
+	const showIndicator = !isCollapsed && !isSkeleton && tabIndicator.indicatorStyle;
 	return /* @__PURE__ */ jsxs("div", {
 		className: rootClassName,
 		ref: tabIndicator.rootRef,
+		inert: isSkeleton || void 0,
 		children: [
-			!isCollapsed && tabIndicator.indicatorStyle && /* @__PURE__ */ jsx("div", {
+			showIndicator && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
 				className: clsx(TabList_module_default.activeIndicator, tabIndicator.isAnimated && TabList_module_default.animated),
 				style: tabIndicator.indicatorStyle

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.mjs","names":[],"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 \| null;\n onContextMenuSelectionChange: (key: Aria.Key) => void;\n disabledKeys?: Iterable<Aria.Key>;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n const {\n selection,\n disabledKeys,\n onContextMenuSelectionChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n } = 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\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={styles.titles}\n ref={setTitlesRef}\n >\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"],"mappings":"~~;;;;;;;;;;;;;;;;AAsBA~~,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,~~KAAK~~,uBAAO,SAAS,~~eAAe~~,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,~~WAAW~~,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,~~WAAW~~,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;~~CAG1B~~,OACE,qBAAC,OAAD;~~EAAK~~,WAAW;~~EAAe~~,KAAK,aAAa;~~EAAjD~~,~~UAAA;GACG~~,~~CAAC~~,~~eAAe~~,~~aAAa~~,~~kBAC5B~~,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,~~KACT~~,uBAAO,iBACP,aAAa,~~cAAc~~,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}
1	+ {"version":3,"file":"TabList.mjs","names":["styles"],"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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props {\n selection: Aria.Key \| null;\n onContextMenuSelectionChange: (key: Aria.Key) => void;\n disabledKeys?: Iterable<Aria.Key>;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n const {\n selection,\n disabledKeys,\n onContextMenuSelectionChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n } = props;\n\n const titleCollapsedElementId = useId();\n const isSkeleton = useSkeletonMode();\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\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={styles.titles}\n ref={setTitlesRef}\n >\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 /* In the mode, no tab shows as selected. */\n const showIndicator =\n !isCollapsed && !isSkeleton && tabIndicator.indicatorStyle;\n\n return (\n <div\n className={rootClassName}\n ref={tabIndicator.rootRef}\n inert={isSkeleton \|\| undefined}\n >\n {showIndicator && (\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"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,aAAa,gBAAgB;CACnC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,eAAeA,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAWA,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAWA,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAI1B,MAAM,gBACJ,CAAC,eAAe,CAAC,cAAc,aAAa;CAE9C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,KAAK,aAAa;EAClB,OAAO,cAAc,KAAA;EAHvB,UAAA;GAKG,iBACC,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACTA,uBAAO,iBACP,aAAa,cAAcA,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { UiComponentTunnelEntry } from "../../../UiComponentTunnel/UiComponentTunnelEntry.mjs";
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { Text } from "../../../Text/Text.mjs";
 import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
 import TabTitle_module_default from "./TabTitle.module.mjs";
@@ -13,7 +14,8 @@ import * as Aria from "react-aria-components";
 var TabTitle = (props) => {
 	const { children, className, ...rest } = props;
 	const { id } = useTabContext();
-	const titleClassName = clsx(TabTitle_module_default.tabTitle, className);
+	const isSkeleton = useSkeletonMode();
+	const titleClassName = clsx(TabTitle_module_default.tabTitle, isSkeleton && TabTitle_module_default.skeleton, className);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UiComponentTunnelEntry, {
 		id: "Titles",
 		component: "Tabs",

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabTitle.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabTitleProps\n extends\n Omit<Aria.TabProps, \"children\" \| \"id\" \| \"isDisabled\">,\n PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const { id } = useTabContext();\n\n const titleClassName = clsx(styles.tabTitle, className);\n\n return (\n <>\n <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n <Aria.Tab {...rest} id={id} className={titleClassName}>\n {(p) => (\n <>\n <Text emulateBoldWidth>\n <span className={styles.text}>{children}</span>\n </Text>\n <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n {p.isSelected && children}\n </UiComponentTunnelEntry>\n </>\n )}\n </Aria.Tab>\n </UiComponentTunnelEntry>\n\n <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n <MenuItem {...rest} className={styles.menuItem} id={id}>\n {children}\n </MenuItem>\n </UiComponentTunnelEntry>\n </>\n );\n};\n\nexport default TabTitle;\n"],"mappings":"~~;;;;;;;;;;;;AAeA~~,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;~~CAE7B~~,MAAM,iBAAiB,~~KAAK~~,wBAAO,~~UAAU~~,~~SAAS~~;~~CAEtD~~,OACE,~~qBAAA~~,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,~~qBAAA~~,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,~~WAAW~~,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,~~WAAW~~,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"TabTitle.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TabTitleProps\n extends\n Omit<Aria.TabProps, \"children\" \| \"id\" \| \"isDisabled\">,\n PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const { id } = useTabContext();\n const isSkeleton = useSkeletonMode();\n\n const titleClassName = clsx(\n styles.tabTitle,\n isSkeleton && styles.skeleton,\n className,\n );\n\n return (\n <>\n <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n <Aria.Tab {...rest} id={id} className={titleClassName}>\n {(p) => (\n <>\n <Text emulateBoldWidth>\n <span className={styles.text}>{children}</span>\n </Text>\n <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n {p.isSelected && children}\n </UiComponentTunnelEntry>\n </>\n )}\n </Aria.Tab>\n </UiComponentTunnelEntry>\n\n <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n <MenuItem {...rest} className={styles.menuItem} id={id}>\n {children}\n </MenuItem>\n </UiComponentTunnelEntry>\n </>\n );\n};\n\nexport default TabTitle;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,aAAa,gBAAgB;CAEnC,MAAM,iBAAiB,KACrBA,wBAAO,UACP,cAAcA,wBAAO,UACrB,SACF;CAEA,OACE,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,WAAWD,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,WAAWA,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs CHANGED Viewed

@@ -3,13 +3,15 @@
 //#region src/components/Tabs/components/TabTitle/TabTitle.module.scss
 var tabTitle = "flow--tabs--tab-title";
 var text = "flow--tabs--tab-title--text";
+var skeleton = "flow--tabs--tab-title--skeleton";
 var menuItem = "flow--tabs--tab-title--menu-item";
 var TabTitle_module_default = {
 	tabTitle,
 	text,
+	skeleton,
 	menuItem
 };
 //#endregion
-export { TabTitle_module_default as default, menuItem, tabTitle, text };
+export { TabTitle_module_default as default, menuItem, skeleton, tabTitle, text };
 //# sourceMappingURL=TabTitle.module.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n position: relative;\n padding-block: var(--tabs--padding-y);\n padding-inline: var(--tabs--padding-x);\n color: var(--tabs--color--default);\n cursor: default;\n white-space: nowrap;\n transition-property: background-color;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n column-gap: var(--tabs--spacing);\n border-radius: var(--tabs--corner-radius);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) * -1);\n }\n\n /* The active indicator is painted below the titles (it precedes them in the\n tab list), so the selected title must not paint a background over it. /\n &:not([data-selected]) {\n &:hover {\n background-color: var(--tabs--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tabs--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--tabs--color--disabled);\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tabs--spacing);\n }\n}\n\n/ selected tab */\n.tabTitle[data-selected] {\n font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n // The tab's children are the consumer's; a `Text` child renders this span.\n // stylelint-disable-next-line selector-max-type -- consumer children\n > span {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: var(--tabs--spacing);\n flex-grow: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n position: relative;\n padding-block: var(--tabs--padding-y);\n padding-inline: var(--tabs--padding-x);\n color: var(--tabs--color--default);\n cursor: default;\n white-space: nowrap;\n transition-property: background-color;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n column-gap: var(--tabs--spacing);\n border-radius: var(--tabs--corner-radius);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) * -1);\n }\n\n /* The active indicator is painted below the titles (it precedes them in the\n tab list), so the selected title must not paint a background over it. /\n &:not([data-selected]) {\n &:hover {\n background-color: var(--tabs--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tabs--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--tabs--color--disabled);\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tabs--spacing);\n }\n}\n\n/ selected tab /\n.tabTitle[data-selected] {\n font-weight: var(--tabs--font-weight--selected);\n}\n\n/ SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n font-weight: inherit;\n}\n\n.menuItem {\n // The tab's children are the consumer's; a `Text` child renders this span.\n // stylelint-disable-next-line selector-max-type -- consumer children\n > span {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: var(--tabs--spacing);\n flex-grow: 1;\n }\n}\n"],"mappings":""}