@mittwald/flow-react-components 0.2.0-alpha.1047 → 0.2.0-alpha.1049

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

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
 import { Text } from "../Text/Text.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Link_module_default from "./Link.module.mjs";
 import { linkContext } from "./context.mjs";
 import { LinkIcon } from "./components/LinkIcon/LinkIcon.mjs";
@@ -16,7 +17,7 @@ import * as Aria from "react-aria-components";
 //#region src/components/Link/Link.tsx
 /** @flr-generate all */
 var Link = flowComponent("Link", (props) => {
-	const { children, className, inline, linkComponent: linkComponentFromProps, color = "default", unstyled = false, "aria-current": ariaCurrent, ref, slot: ignoredSlotProp, style, whiteSpace, size = "m", onClickCapture: onClickCaptureFromProps, ...rest } = props;
+	const { children, className, inline, linkComponent: linkComponentFromProps, color = "default", unstyled = false, "aria-current": ariaCurrent, ref, slot: ignoredSlotProp, style, whiteSpace, size = "m", onClickCapture: onClickCaptureFromProps, target, download, ...rest } = props;
 	const { linkComponent: linkComponentFromContext } = useContext(linkContext);
 	const Link = linkComponentFromProps ? linkComponentFromProps : props.href && linkComponentFromContext ? linkComponentFromContext : Aria.Link;
 	const router = useRouter();
@@ -34,6 +35,10 @@ var Link = flowComponent("Link", (props) => {
 	const rootClassName = unstyled ? className : clsx(Link_module_default.link, inline && Link_module_default.inline, isAlphaColor(color) && Link_module_default[color], size === "s" && Link_module_default["size-s"], className);
 	const propsContext = {
 		Icon: {
+			tunnel: {
+				component: "Link",
+				id: "icon"
+			},
 			className: Link_module_default.icon,
 			size: "s"
 		},
@@ -46,12 +51,18 @@ var Link = flowComponent("Link", (props) => {
 			size: props.size,
 			color: props.color === "default" ? void 0 : props.color,
 			isDisabled: props.isDisabled,
-			children: dynamic((buttonProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, { children: buttonProps.children }), /* @__PURE__ */ jsx(LinkIcon, { ...props })] }))
+			children: dynamic((buttonProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, { children: buttonProps.children }), /* @__PURE__ */ jsx(LinkIcon, {
+				download,
+				target,
+				unstyled
+			})] }))
 		}
 	};
 	return /* @__PURE__ */ jsx(Link, {
 		...ariaCurrent ? { "aria-current": true } : {},
 		...rest,
+		target,
+		download,
 		onClickCapture: handleClickCapture,
 		className: rootClassName,
 		ref,
@@ -61,7 +72,16 @@ var Link = flowComponent("Link", (props) => {
 		},
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
-			children: [children, /* @__PURE__ */ jsx(LinkIcon, { ...props })]
+			children: [children, /* @__PURE__ */ jsx(LinkIcon, {
+				withZeroWidthJoiner: true,
+				unstyled,
+				target,
+				download,
+				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "icon",
+					component: "Link"
+				})
+			})]
 		})
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { Text } from \"@/components/Text\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /** The name of the slot the link is placed in. */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          <Text>{buttonProps.children}</Text>\n          <LinkIcon {...props} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <LinkIcon {...props} />\n      </PropsContextProvider>\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UAAO,YAAY,SAAe,CAAA,GAClC,oBAAC,UAAD,EAAU,GAAI,MAAQ,CAAA,CACtB,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACJ,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD,EAAU,GAAI,MAAQ,CAAA,CACF;;CAClB,CAAA;AAEV,CAAC"}
+{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { Text } from \"@/components/Text\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /** The name of the slot the link is placed in. */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          <Text>{buttonProps.children}</Text>\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <LinkIcon\n          withZeroWidthJoiner\n          unstyled={unstyled}\n          target={target}\n          download={download}\n        >\n          <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n        </LinkIcon>\n      </PropsContextProvider>\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UAAO,YAAY,SAAe,CAAA,GAClC,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}

package/dist/js/packages/components/src/components/Link/Link.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n  font-weight: var(--link--font-weight);\n  transition-property: color;\n  transition-duration: var(--transition--duration--default);\n  color: var(--link--color--default);\n  width: fit-content;\n\n  &:hover {\n    color: var(--link--color--hover);\n  }\n\n  &[data-pressed] {\n    color: var(--link--color--pressed);\n  }\n\n  @include focus.focus;\n\n  &:not([aria-disabled]) {\n    cursor: pointer;\n  }\n\n  &.inline {\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-decoration: underline;\n  }\n\n  /* Elements */\n\n  .icon {\n    margin-inline-start: var(--link--spacing);\n    vertical-align: text-bottom;\n    height: var(--link--icon-height);\n  }\n\n  &[aria-disabled] {\n    color: var(--link--color--disabled);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    font-size: var(--font-size-text--s);\n\n    .icon {\n      height: var(--link--icon-height-s);\n    }\n  }\n\n  &:has(.button) {\n    > .linkIcon {\n      display: none;\n    }\n  }\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--link--color-#{$color}--default);\n\n      &:hover {\n        color: var(--link--color-#{$color}--hover);\n      }\n\n      &[data-pressed] {\n        color: var(--link--color-#{$color}--pressed);\n      }\n\n      &[aria-disabled] {\n        color: var(--link--color-#{$color}--disabled);\n      }\n    }\n  }\n\n  @include color(light);\n  @include color(dark);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* AlertText Colors */\n  @mixin status($status) {\n    &:has(.alertText[class*=\"#{$status}\"]) {\n      color: var(--alert-text--#{$status}-color);\n    }\n  }\n\n  @include status(danger);\n  @include status(success);\n  @include status(warning);\n  @include status(info);\n  @include status(unavailable);\n\n  &:has(> .accentBox),\n  &:has(> .layoutCard) {\n    color: unset;\n    font-weight: unset;\n    display: block;\n    min-width: 0;\n    width: auto;\n\n    .linkIcon {\n      display: none;\n    }\n  }\n\n  &:has(> .accentBox) {\n    border-radius: var(--accent-box--corner-radius);\n  }\n\n  &:has(> .layoutCard) {\n    border-radius: var(--layout-card--corner-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n  display: inline-block;\n  font-weight: var(--link--font-weight);\n  transition-property: color;\n  transition-duration: var(--transition--duration--default);\n  color: var(--link--color--default);\n  width: fit-content;\n\n  &:hover {\n    color: var(--link--color--hover);\n  }\n\n  &[data-pressed] {\n    color: var(--link--color--pressed);\n  }\n\n  @include focus.focus;\n\n  &:not([aria-disabled]) {\n    cursor: pointer;\n  }\n\n  &.inline {\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-decoration: underline;\n  }\n\n  /* Elements */\n\n  .icon {\n    margin-inline-start: var(--link--spacing);\n    vertical-align: text-bottom;\n    height: var(--link--icon-height);\n  }\n\n  &[aria-disabled] {\n    color: var(--link--color--disabled);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    font-size: var(--font-size-text--s);\n\n    .icon {\n      height: var(--link--icon-height-s);\n    }\n  }\n\n  &:has(.button) {\n    > .linkIcon {\n      display: none;\n    }\n  }\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--link--color-#{$color}--default);\n\n      &:hover {\n        color: var(--link--color-#{$color}--hover);\n      }\n\n      &[data-pressed] {\n        color: var(--link--color-#{$color}--pressed);\n      }\n\n      &[aria-disabled] {\n        color: var(--link--color-#{$color}--disabled);\n      }\n    }\n  }\n\n  @include color(light);\n  @include color(dark);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* AlertText Colors */\n  @mixin status($status) {\n    &:has(.alertText[class*=\"#{$status}\"]) {\n      color: var(--alert-text--#{$status}-color);\n    }\n  }\n\n  @include status(\"danger\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"info\");\n  @include status(\"unavailable\");\n\n  &:has(> .accentBox),\n  &:has(> .layoutCard) {\n    color: unset;\n    font-weight: unset;\n    display: block;\n    min-width: 0;\n    width: auto;\n\n    .linkIcon {\n      display: none;\n    }\n  }\n\n  &:has(> .accentBox) {\n    border-radius: var(--accent-box--corner-radius);\n  }\n\n  &:has(> .layoutCard) {\n    border-radius: var(--layout-card--corner-radius);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Link/components/LinkIcon/LinkIcon.mjs

@@ -3,23 +3,32 @@
 import { IconDownload } from "../../../Icon/components/icons/IconDownload.mjs";
 import { IconExternalLink } from "../../../Icon/components/icons/IconExternalLink.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import Link_module_default from "../../Link.module.mjs";
 import __locale_default from "../../../../../../../_virtual/_14.locale.mjs";
-import { jsx } from "react/jsx-runtime";
+import LinkIcon_module_default from "./LinkIcon.module.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Link/components/LinkIcon/LinkIcon.tsx
 var LinkIcon = (props) => {
-	const { unstyled, target, download } = props;
+	const { unstyled, target, download, withZeroWidthJoiner = false, children } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Link");
-	if (unstyled) return null;
-	if (download) return /* @__PURE__ */ jsx(IconDownload, {
-		className: Link_module_default.linkIcon,
+	let icon = null;
+	if (download) icon = /* @__PURE__ */ jsx(IconDownload, {
+		className: LinkIcon_module_default.linkIcon,
 		"aria-label": stringFormatter.format("download")
 	});
-	if (target === "_blank") return /* @__PURE__ */ jsx(IconExternalLink, {
-		className: Link_module_default.linkIcon,
+	else if (target === "_blank") icon = /* @__PURE__ */ jsx(IconExternalLink, {
+		className: LinkIcon_module_default.linkIcon,
 		"aria-label": stringFormatter.format("external")
 	});
-	return null;
+	if (unstyled) return children;
+	if (withZeroWidthJoiner) return /* @__PURE__ */ jsxs("span", {
+		className: LinkIcon_module_default.linkIcon,
+		children: [
+			"‍",
+			icon,
+			children
+		]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [icon, children] });
 };
 //#endregion
 export { LinkIcon, LinkIcon as default };

package/dist/js/packages/components/src/components/Link/components/LinkIcon/LinkIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkIcon.mjs","names":[],"sources":["../../../../../../../../../src/components/Link/components/LinkIcon/LinkIcon.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport {\n  IconDownload,\n  IconExternalLink,\n} from \"@/components/Icon/components/icons\";\nimport type { LinkProps } from \"@/components/Link\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport styles from \"../../Link.module.scss\";\n\nexport const LinkIcon: FC<LinkProps> = (props) => {\n  const { unstyled, target, download } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Link\");\n\n  if (unstyled) {\n    return null;\n  }\n\n  if (download) {\n    return (\n      <IconDownload\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"download\")}\n      />\n    );\n  }\n\n  if (target === \"_blank\") {\n    return (\n      <IconExternalLink\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"external\")}\n      />\n    );\n  }\n\n  return null;\n};\n\nexport default LinkIcon;\n"],"mappings":";;;;;;;;;AAUA,IAAa,YAA2B,UAAU;CAChD,MAAM,EAAE,UAAU,QAAQ,aAAa;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,IAAI,UACF,OAAO;CAGT,IAAI,UACF,OACE,oBAAC,cAAD;EACE,WAAW,oBAAO;EAClB,cAAY,gBAAgB,OAAO,UAAU;CAC9C,CAAA;CAIL,IAAI,WAAW,UACb,OACE,oBAAC,kBAAD;EACE,WAAW,oBAAO;EAClB,cAAY,gBAAgB,OAAO,UAAU;CAC9C,CAAA;CAIL,OAAO;AACT"}
+{"version":3,"file":"LinkIcon.mjs","names":[],"sources":["../../../../../../../../../src/components/Link/components/LinkIcon/LinkIcon.tsx"],"sourcesContent":["import type { FC, ReactElement } from \"react\";\nimport {\n  IconDownload,\n  IconExternalLink,\n} from \"@/components/Icon/components/icons\";\nimport type { LinkProps } from \"@/components/Link\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport styles from \"./LinkIcon.module.scss\";\n\nexport const LinkIcon: FC<LinkProps & { withZeroWidthJoiner?: boolean }> = (\n  props,\n) => {\n  const {\n    unstyled,\n    target,\n    download,\n    withZeroWidthJoiner = false,\n    children,\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Link\");\n  let icon: ReactElement | null = null;\n\n  if (download) {\n    icon = (\n      <IconDownload\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"download\")}\n      />\n    );\n  } else if (target === \"_blank\") {\n    icon = (\n      <IconExternalLink\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"external\")}\n      />\n    );\n  }\n\n  if (unstyled) {\n    return children;\n  }\n\n  if (withZeroWidthJoiner) {\n    return (\n      <span className={styles.linkIcon}>\n        {\"\\u200D\"}\n        {icon}\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      {icon}\n      {children}\n    </>\n  );\n};\n\nexport default LinkIcon;\n"],"mappings":";;;;;;;;;AAUA,IAAa,YACX,UACG;CACH,MAAM,EACJ,UACA,QACA,UACA,sBAAsB,OACtB,aACE;CAEJ,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CACnE,IAAI,OAA4B;CAEhC,IAAI,UACF,OACE,oBAAC,cAAD;EACE,WAAW,wBAAO;EAClB,cAAY,gBAAgB,OAAO,UAAU;CAC9C,CAAA;MAEE,IAAI,WAAW,UACpB,OACE,oBAAC,kBAAD;EACE,WAAW,wBAAO;EAClB,cAAY,gBAAgB,OAAO,UAAU;CAC9C,CAAA;CAIL,IAAI,UACF,OAAO;CAGT,IAAI,qBACF,OACE,qBAAC,QAAD;EAAM,WAAW,wBAAO;EAAxB,UAAA;GACG;GACA;GACA;EACG;;CAIV,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,MACA,QACD,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Link/components/LinkIcon/LinkIcon.module.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+//#region src/components/Link/components/LinkIcon/LinkIcon.module.scss
+var linkIcon = "flow--link--link-icon";
+var LinkIcon_module_default = { linkIcon };
+//#endregion
+export { LinkIcon_module_default as default, linkIcon };
+
+//# sourceMappingURL=LinkIcon.module.mjs.map

package/dist/js/packages/components/src/components/Link/components/LinkIcon/LinkIcon.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkIcon.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Link/components/LinkIcon/LinkIcon.module.scss"],"sourcesContent":[".linkIcon {\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n\n.navigation {\n  display: flex;\n  flex-direction: column;\n\n  ul {\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--menu--item-to-item-spacing);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .item {\n    @include menuItem.menuItem();\n\n    .badge {\n      margin-inline-start: auto;\n    }\n  }\n\n  hr {\n    margin-bottom: var(--menu--group-to-group-spacing);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n\n.navigation {\n  display: flex;\n  flex-direction: column;\n\n  ul {\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--menu--item-to-item-spacing);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .item {\n    @include menuItem.menuItem();\n\n    > .icon {\n      order: 0;\n    }\n\n    > :not(.icon) {\n      order: 1;\n    }\n\n    .badge {\n      margin-inline-start: auto;\n    }\n  }\n\n  hr {\n    margin-bottom: var(--menu--group-to-group-spacing);\n  }\n}\n"],"mappings":""}

package/dist/types/components/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,aAAa,EAEb,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAK9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAM3B,MAAM,WAAW,SACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,EAC1E,kBAAkB,CAAC,iBAAiB,CAAC,EACrC,kBAAkB;IACpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,aAAa,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IAChE,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAGlB;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,iGAoGf,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,aAAa,EAEb,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAK9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,WAAW,SACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,EAC1E,kBAAkB,CAAC,iBAAiB,CAAC,EACrC,kBAAkB;IACpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,aAAa,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IAChE,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAGlB;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,iGAmHf,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/dist/types/components/Link/components/LinkIcon/LinkIcon.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import { LinkProps } from '../..';
-export declare const LinkIcon: FC<LinkProps>;
+export declare const LinkIcon: FC<LinkProps & {
+    withZeroWidthJoiner?: boolean;
+}>;
 export default LinkIcon;
 //# sourceMappingURL=LinkIcon.d.ts.map

package/dist/types/components/Link/components/LinkIcon/LinkIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Link/components/LinkIcon/LinkIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAKnD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,SAAS,CA4BlC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LinkIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Link/components/LinkIcon/LinkIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAK9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAKnD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,SAAS,GAAG;IAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAAE,CAkDtE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.1047",
+  "version": "0.2.0-alpha.1049",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -74,9 +74,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "0.2.0-alpha.1047",
+    "@mittwald/flow-icons": "0.2.0-alpha.1049",
     "@mittwald/password-tools-js": "3.0.0-alpha.31",
-    "@mittwald/react-tunnel": "0.2.0-alpha.1047",
+    "@mittwald/react-tunnel": "0.2.0-alpha.1049",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -130,12 +130,12 @@
     "@internationalized/date": "^3.12.2",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "0.2.0-alpha.1047",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.1047",
-    "@mittwald/flow-icons-base": "0.2.0-alpha.1047",
+    "@mittwald/flow-core": "0.2.0-alpha.1049",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.1049",
+    "@mittwald/flow-icons-base": "0.2.0-alpha.1049",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "0.2.0-alpha.1047",
+    "@mittwald/typescript-config": "0.2.0-alpha.1049",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-actions": "^9.0.8",
@@ -186,7 +186,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "0.2.0-alpha.1047",
+    "@mittwald/flow-icons-pro": "0.2.0-alpha.1049",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -207,5 +207,5 @@
       "optional": true
     }
   },
-  "gitHead": "992aad553e107dd469fb9407a8d47d14b3296b61"
+  "gitHead": "fb93781f5e50a31ab2e5692832bcf1ff34973aa2"
 }