@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/esm/Skeleton/index.mjs

@@ -1,3 +1,214 @@
-import { Skeleton, SkeletonText, SkeletonCircle } from "@multiplatform.one/forms";
-export { Skeleton, SkeletonCircle, SkeletonText };
+import { createContext, useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { radiusClassProps, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { View, styled, isWeb } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+function clampTextRadius(radiusToken) {
+  if (!radiusToken) return "$2";
+  if (radiusToken === "$0") return 0;
+  if (radiusToken.startsWith("$")) {
+    const num = Number.parseInt(radiusToken.slice(1), 10);
+    return Number.isFinite(num) && num > 2 ? "$2" : radiusToken;
+  }
+  return radiusToken;
+}
+const AnnounceCtx = createContext(true);
+const SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"];
+const skeletonCircleTokenUp = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+function skeletonCircleSize(sizeToken) {
+  return sizeRecipeForToken(skeletonCircleTokenUp[sizeToken] ?? "$5").height;
+}
+const SHIMMER_STYLE_ID = "__mp-skeleton-shimmer";
+function ensureShimmerStyles() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(SHIMMER_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SHIMMER_STYLE_ID;
+  style.textContent = ["@keyframes mp-skeleton-shimmer{from{mask-position:200%}to{mask-position:0%}}", ".mp-skeleton-pulse{mask-image:linear-gradient(75deg,#000 30%,rgb(0,0,0,.65) 80%);mask-size:200%;animation:mp-skeleton-shimmer 1.2s ease-in-out infinite}", ".mp-skeleton-static{animation:none!important;mask-image:none}", "@media (prefers-reduced-motion:reduce){.mp-skeleton-pulse{animation:none!important;mask-image:none}}", "@media (forced-colors:active){.mp-skeleton-bone{outline:1px solid transparent;outline-offset:-1px}}"].join("");
+  document.head.appendChild(style);
+}
+const SkeletonFrame = styled(View, {
+  name: "Skeleton",
+  backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
+  variants: {
+    variant: {
+      text: {},
+      circular: {},
+      rectangular: {
+        borderRadius: 0
+      },
+      rounded: {}
+    }
+  },
+  defaultVariants: {
+    variant: "text"
+  }
+});
+function resolveTextHeight(sizeToken, textSize) {
+  const known = SKELETON_SIZE_TOKENS.includes(sizeToken) ? sizeToken : "$4";
+  const body = sizeRecipeForToken(known).fontSize - 2;
+  return textSize === "display" ? body * 2 : body;
+}
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  animate = true,
+  style,
+  label,
+  className,
+  ...props
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  const pulsing = Boolean(animate && knobProps.transition);
+  if (isWeb) ensureShimmerStyles();
+  const decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  const boneClass = ["mp-skeleton-bone", pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static", variant !== "rectangular" ? knobProps.borderRadius.className : void 0, className].filter(Boolean).join(" ");
+  const textRadius = knobProps.pointy ? 0 : clampTextRadius(knobProps.borderRadius.borderRadius);
+  const radiusProps = variant === "circular" ? {
+    borderRadius: 1e3,
+    ...radiusClassProps("R-PILL", "SkeletonCircle")
+  } : variant === "rectangular" ? {
+    borderRadius: 0
+  } : variant === "rounded" ? {
+    borderRadius: knobProps.borderRadius.borderRadius
+  } : {
+    borderRadius: textRadius
+  };
+  return /* @__PURE__ */jsx(SkeletonFrame, {
+    variant,
+    width,
+    height: height ?? (variant === "text" ? resolveTextHeight(knobProps.sizeToken, "body") : void 0),
+    ...radiusProps,
+    ...props,
+    ...(isWeb ? {
+      className: boneClass
+    } : void 0),
+    ...(style ? {
+      style
+    } : void 0),
+    pointerEvents: "none",
+    "data-skeleton": "",
+    "aria-hidden": decorative ? true : void 0,
+    role: decorative ? void 0 : "status",
+    "aria-busy": decorative ? void 0 : true,
+    "aria-live": decorative ? void 0 : "polite",
+    "aria-label": decorative ? void 0 : label ?? t("Loading"),
+    accessibilityElementsHidden: decorative
+  });
+}
+function SkeletonText({
+  lines = 1,
+  gap: gapProp,
+  lastLineWidth = "70%",
+  size: textSize = "body",
+  label,
+  width,
+  height,
+  animate,
+  style,
+  variant: _variant,
+  ...props
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  const count = Math.max(0, Math.floor(Number(lines) || 0));
+  const lineHeight = height ?? resolveTextHeight(knobProps.sizeToken, textSize);
+  const gap = gapProp ?? knobProps.gap.gap;
+  const decorative = !shouldAnnounce;
+  if (count === 0) {
+    return null;
+  }
+  return /* @__PURE__ */jsx(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */jsx(View, {
+      ...props,
+      width: width ?? "100%",
+      gap,
+      "data-skeleton-text": "",
+      "aria-hidden": decorative ? true : void 0,
+      role: decorative ? void 0 : "status",
+      "aria-busy": decorative ? void 0 : true,
+      "aria-live": decorative ? void 0 : "polite",
+      "aria-label": decorative ? void 0 : label ?? t("Loading"),
+      children: Array.from({
+        length: count
+      }, (_, i) => /* @__PURE__ */jsx(Skeleton, {
+        variant: "text",
+        animate,
+        style,
+        height: lineHeight,
+        width: count === 1 ? width ?? lastLineWidth : i === count - 1 ? lastLineWidth : "100%"
+      }, i))
+    })
+  });
+}
+function SkeletonCircle({
+  size: sizeProp,
+  label,
+  ...props
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  const diameter = Math.max(0, sizeProp ?? skeletonCircleSize(knobProps.sizeToken));
+  return /* @__PURE__ */jsx(Skeleton, {
+    variant: "circular",
+    label,
+    ...props,
+    width: "100%",
+    maxWidth: diameter,
+    aspectRatio: 1,
+    alignSelf: "flex-start"
+  });
+}
+function SkeletonGroup({
+  children,
+  label,
+  ...props
+}) {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */jsx(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */jsx(View, {
+      ...props,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      "aria-label": label ?? t("Loading"),
+      "data-skeleton-group": "",
+      children
+    })
+  });
+}
+Skeleton.Text = SkeletonText;
+Skeleton.Circle = SkeletonCircle;
+Skeleton.Group = SkeletonGroup;
+export { Skeleton, SkeletonCircle, SkeletonGroup, SkeletonText };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/Skeleton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Skeleton","SkeletonText","SkeletonCircle"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SACEA,QAAA,EACAC,YAAA,EACAC,cAAA,QAIK","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","useTranslation","radiusClassProps","sizeRecipeForToken","useResolvedKnobs","View","styled","isWeb","jsx","clampTextRadius","radiusToken","startsWith","num","Number","parseInt","slice","isFinite","AnnounceCtx","SKELETON_SIZE_TOKENS","skeletonCircleTokenUp","$3","$4","$5","skeletonCircleSize","sizeToken","height","SHIMMER_STYLE_ID","ensureShimmerStyles","document","getElementById","style","createElement","id","textContent","join","head","appendChild","SkeletonFrame","name","backgroundColor","overflow","pointerEvents","flexShrink","variants","variant","text","circular","rectangular","borderRadius","rounded","defaultVariants","resolveTextHeight","textSize","known","includes","body","fontSize","Skeleton","width","animate","label","className","props","t","knobProps","component","shouldAnnounce","pulsing","Boolean","transition","decorative","boneClass","filter","textRadius","pointy","radiusProps","role","accessibilityElementsHidden","SkeletonText","lines","gap","gapProp","lastLineWidth","size","_variant","count","Math","max","floor","lineHeight","Provider","value","children","Array","from","length","_","i","SkeletonCircle","sizeProp","diameter","maxWidth","aspectRatio","alignSelf","SkeletonGroup","Text","Circle","Group"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Skeleton/index.native.js

@@ -1,3 +1,221 @@
-import { Skeleton, SkeletonText, SkeletonCircle } from "@multiplatform.one/forms";
-export { Skeleton, SkeletonCircle, SkeletonText };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { radiusClassProps, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { View, styled, isWeb } from "tamagui";
+function clampTextRadius(radiusToken) {
+  if (!radiusToken) return "$2";
+  if (radiusToken === "$0") return 0;
+  if (radiusToken.startsWith("$")) {
+    var num = Number.parseInt(radiusToken.slice(1), 10);
+    return Number.isFinite(num) && num > 2 ? "$2" : radiusToken;
+  }
+  return radiusToken;
+}
+var AnnounceCtx = /* @__PURE__ */createContext(true);
+var SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"];
+var skeletonCircleTokenUp = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+function skeletonCircleSize(sizeToken) {
+  var _skeletonCircleTokenUp_sizeToken;
+  return sizeRecipeForToken((_skeletonCircleTokenUp_sizeToken = skeletonCircleTokenUp[sizeToken]) !== null && _skeletonCircleTokenUp_sizeToken !== void 0 ? _skeletonCircleTokenUp_sizeToken : "$5").height;
+}
+var SHIMMER_STYLE_ID = "__mp-skeleton-shimmer";
+function ensureShimmerStyles() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(SHIMMER_STYLE_ID)) return;
+  var style = document.createElement("style");
+  style.id = SHIMMER_STYLE_ID;
+  style.textContent = ["@keyframes mp-skeleton-shimmer{from{mask-position:200%}to{mask-position:0%}}", ".mp-skeleton-pulse{mask-image:linear-gradient(75deg,#000 30%,rgb(0,0,0,.65) 80%);mask-size:200%;animation:mp-skeleton-shimmer 1.2s ease-in-out infinite}", ".mp-skeleton-static{animation:none!important;mask-image:none}", "@media (prefers-reduced-motion:reduce){.mp-skeleton-pulse{animation:none!important;mask-image:none}}", "@media (forced-colors:active){.mp-skeleton-bone{outline:1px solid transparent;outline-offset:-1px}}"].join("");
+  document.head.appendChild(style);
+}
+var SkeletonFrame = styled(View, {
+  name: "Skeleton",
+  backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
+  variants: {
+    variant: {
+      text: {},
+      circular: {},
+      rectangular: {
+        borderRadius: 0
+      },
+      rounded: {}
+    }
+  },
+  defaultVariants: {
+    variant: "text"
+  }
+});
+function resolveTextHeight(sizeToken, textSize) {
+  var known = SKELETON_SIZE_TOKENS.includes(sizeToken) ? sizeToken : "$4";
+  var body = sizeRecipeForToken(known).fontSize - 2;
+  return textSize === "display" ? body * 2 : body;
+}
+function Skeleton(param) {
+  var {
+    variant = "text",
+    width,
+    height,
+    animate = true,
+    style,
+    label,
+    className,
+    ...props
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  var shouldAnnounce = useContext(AnnounceCtx);
+  var pulsing = Boolean(animate && knobProps.transition);
+  if (isWeb) ensureShimmerStyles();
+  var decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  var boneClass = ["mp-skeleton-bone", pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static", variant !== "rectangular" ? knobProps.borderRadius.className : void 0, className].filter(Boolean).join(" ");
+  var textRadius = knobProps.pointy ? 0 : clampTextRadius(knobProps.borderRadius.borderRadius);
+  var radiusProps = variant === "circular" ? {
+    borderRadius: 1e3,
+    ...radiusClassProps("R-PILL", "SkeletonCircle")
+  } : variant === "rectangular" ? {
+    borderRadius: 0
+  } : variant === "rounded" ? {
+    borderRadius: knobProps.borderRadius.borderRadius
+  } : {
+    borderRadius: textRadius
+  };
+  return /* @__PURE__ */_jsx(SkeletonFrame, {
+    variant,
+    width,
+    height: height !== null && height !== void 0 ? height : variant === "text" ? resolveTextHeight(knobProps.sizeToken, "body") : void 0,
+    ...radiusProps,
+    ...props,
+    ...(isWeb ? {
+      className: boneClass
+    } : void 0),
+    ...(style ? {
+      style
+    } : void 0),
+    pointerEvents: "none",
+    "data-skeleton": "",
+    "aria-hidden": decorative ? true : void 0,
+    role: decorative ? void 0 : "status",
+    "aria-busy": decorative ? void 0 : true,
+    "aria-live": decorative ? void 0 : "polite",
+    "aria-label": decorative ? void 0 : label !== null && label !== void 0 ? label : t("Loading"),
+    accessibilityElementsHidden: decorative
+  });
+}
+function SkeletonText(param) {
+  var {
+    lines = 1,
+    gap: gapProp,
+    lastLineWidth = "70%",
+    size: textSize = "body",
+    label,
+    width,
+    height,
+    animate,
+    style,
+    variant: _variant,
+    ...props
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  var shouldAnnounce = useContext(AnnounceCtx);
+  var count = Math.max(0, Math.floor(Number(lines) || 0));
+  var lineHeight = height !== null && height !== void 0 ? height : resolveTextHeight(knobProps.sizeToken, textSize);
+  var gap = gapProp !== null && gapProp !== void 0 ? gapProp : knobProps.gap.gap;
+  var decorative = !shouldAnnounce;
+  if (count === 0) {
+    return null;
+  }
+  return /* @__PURE__ */_jsx(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */_jsx(View, {
+      ...props,
+      width: width !== null && width !== void 0 ? width : "100%",
+      gap,
+      "data-skeleton-text": "",
+      "aria-hidden": decorative ? true : void 0,
+      role: decorative ? void 0 : "status",
+      "aria-busy": decorative ? void 0 : true,
+      "aria-live": decorative ? void 0 : "polite",
+      "aria-label": decorative ? void 0 : label !== null && label !== void 0 ? label : t("Loading"),
+      children: Array.from({
+        length: count
+      }, function (_, i) {
+        return /* @__PURE__ */_jsx(Skeleton, {
+          variant: "text",
+          animate,
+          style,
+          height: lineHeight,
+          width: count === 1 ? width !== null && width !== void 0 ? width : lastLineWidth : i === count - 1 ? lastLineWidth : "100%"
+        }, i);
+      })
+    })
+  });
+}
+function SkeletonCircle(param) {
+  var {
+    size: sizeProp,
+    label,
+    ...props
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  var diameter = Math.max(0, sizeProp !== null && sizeProp !== void 0 ? sizeProp : skeletonCircleSize(knobProps.sizeToken));
+  return /* @__PURE__ */_jsx(Skeleton, {
+    variant: "circular",
+    label,
+    ...props,
+    width: "100%",
+    maxWidth: diameter,
+    aspectRatio: 1,
+    alignSelf: "flex-start"
+  });
+}
+function SkeletonGroup(param) {
+  var {
+    children,
+    label,
+    ...props
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */_jsx(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */_jsx(View, {
+      ...props,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      "aria-label": label !== null && label !== void 0 ? label : t("Loading"),
+      "data-skeleton-group": "",
+      children
+    })
+  });
+}
+Skeleton.Text = SkeletonText;
+Skeleton.Circle = SkeletonCircle;
+Skeleton.Group = SkeletonGroup;
+export { Skeleton, SkeletonCircle, SkeletonGroup, SkeletonText };
 //# sourceMappingURL=index.native.js.map

package/dist/esm/Skeleton/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Skeleton","SkeletonText","SkeletonCircle"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAAA,QAAA,EAAAC,YAAA,EAAAC,cAAA;AAAA,SAEEF,QAAA,EACAE,cAAA,EAAAD,YAIK","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","createContext","useContext","useTranslation","radiusClassProps","sizeRecipeForToken","useResolvedKnobs","View","styled","isWeb","clampTextRadius","radiusToken","startsWith","num","Number","parseInt","slice","isFinite","AnnounceCtx","SKELETON_SIZE_TOKENS","skeletonCircleTokenUp","$3","$4","$5","skeletonCircleSize","sizeToken","_skeletonCircleTokenUp_sizeToken","height","SHIMMER_STYLE_ID","ensureShimmerStyles","document","getElementById","style","createElement","id","textContent","join","head","appendChild","SkeletonFrame","name","backgroundColor","overflow","pointerEvents","flexShrink","variants","variant","text","circular","rectangular","borderRadius","rounded","defaultVariants","resolveTextHeight","textSize","known","includes","body","fontSize","Skeleton","param","width","animate","label","className","props","t","knobProps","component","shouldAnnounce","pulsing","Boolean","transition","decorative","boneClass","filter","textRadius","pointy","radiusProps","role","accessibilityElementsHidden","SkeletonText","lines","gap","gapProp","lastLineWidth","size","_variant","count","Math","max","floor","lineHeight","Provider","value","children","Array","from","length","_","i","SkeletonCircle","sizeProp","diameter","maxWidth","aspectRatio","alignSelf","SkeletonGroup","Text","Circle","Group"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/SkipLink/index.mjs

@@ -1,43 +1,90 @@
-import { useState } from "react";
 import { zIndex } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { SizableText, YStack, isWeb, styled, useTheme } from "tamagui";
+import { FOCUS_RING_MIN_WIDTH, FOCUS_VISIBLE_RING, useResolvedKnobs } from "@multiplatform.one/theme";
+import { SizableText, YStack, getTokenValue, isWeb, styled } from "tamagui";
 import { jsx } from "react/jsx-runtime";
 const SkipLinkSurface = styled(YStack, {
   name: "SkipLink",
   paddingVertical: "$2.5",
   paddingHorizontal: "$3.5"
 });
-const hiddenStyle = {
-  position: "absolute",
-  top: 0,
-  insetInlineStart: 0,
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-  // Sheet tier (Axiom 14): the revealed chip must sit above page content
-  // and sticky chrome when the first Tab lands on it.
-  zIndex: zIndex.sheet,
-  textDecoration: "none"
-};
-const revealedStyle = {
-  position: "fixed",
-  top: 12,
-  insetInlineStart: 12,
-  width: "auto",
-  height: "auto",
-  margin: 0,
-  padding: 0,
-  overflow: "visible",
-  clip: "auto",
-  zIndex: zIndex.sheet,
-  textDecoration: "none"
-};
+const SKIP_LINK_STYLE_ID = "mp-skip-link-css";
+const SKIP_LINK_TARGET_CLASS = "mp-skip-link-target";
+const skipLinkCss = `.mp-skip-link {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  z-index: ${zIndex.sheet};
+  text-decoration: none;
+  color: inherit;
+}
+.mp-skip-link:focus,
+.mp-skip-link:focus-visible {
+  position: fixed;
+  top: 12px;
+  inset-inline-start: 12px;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  white-space: nowrap;
+  z-index: ${zIndex.sheet};
+  text-decoration: none;
+  border-radius: var(--mp-skip-link-radius, 0px);
+}
+.mp-skip-link:focus-visible {
+  outline: ${FOCUS_RING_MIN_WIDTH}px ${FOCUS_VISIBLE_RING.outlineStyle} var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: ${FOCUS_VISIBLE_RING.outlineOffset}px;
+}
+.mp-skip-link:focus:not(:focus-visible) {
+  outline: none;
+}
+.${SKIP_LINK_TARGET_CLASS}:focus {
+  outline: none;
+}`;
+function ensureSkipLinkStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SKIP_LINK_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = SKIP_LINK_STYLE_ID;
+  tag.textContent = skipLinkCss;
+  document.head.appendChild(tag);
+}
+function resolveRadiusPx(token) {
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (typeof token !== "string" || token.length === 0) return void 0;
+  try {
+    const value = getTokenValue(token, "radius");
+    return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function focusSkipTarget(target) {
+  const hadTabIndex = target.hasAttribute("tabindex");
+  if (!hadTabIndex) {
+    target.setAttribute("tabindex", "-1");
+  }
+  target.classList.add(SKIP_LINK_TARGET_CLASS);
+  const cleanup = () => {
+    if (!hadTabIndex) target.removeAttribute("tabindex");
+    target.classList.remove(SKIP_LINK_TARGET_CLASS);
+    target.removeEventListener("blur", cleanup);
+  };
+  target.addEventListener("blur", cleanup);
+  target.focus();
+}
 function SkipLink({
   targetId,
   targetRef,
@@ -49,46 +96,33 @@ function SkipLink({
   } = useResolvedKnobs({
     component: "SkipLink"
   });
-  const theme = useTheme();
-  const [focused, setFocused] = useState(false);
   if (!isWeb) return null;
+  ensureSkipLinkStyles();
+  const radiusPx = resolveRadiusPx(knobProps.elevatedSurface.borderRadius);
+  const href = targetId ? `#${targetId}` : "#";
   const handleActivate = event => {
-    event?.preventDefault?.();
     let target = null;
     if (targetRef?.current) {
+      event.preventDefault();
       const current = targetRef.current;
       if (typeof current.focus === "function") {
         target = current;
       }
     } else if (targetId && typeof document !== "undefined") {
       target = document.getElementById(targetId);
+    } else {
+      event.preventDefault();
     }
-    if (target) {
-      if (target instanceof HTMLElement && !target.hasAttribute("tabindex")) {
-        target.setAttribute("tabindex", "-1");
-      }
-      target.focus?.();
-      if (target instanceof HTMLElement) {
-        target.scrollIntoView?.({
-          block: "start"
-        });
-      }
-    }
+    if (target) focusSkipTarget(target);
     onSkip?.(target instanceof HTMLElement ? target : null);
   };
   return /* @__PURE__ */jsx("a", {
-    href: targetId ? `#${targetId}` : "#",
-    style: {
-      ...(focused ? revealedStyle : hiddenStyle),
-      // Focus ring on the revealed chip: the theme's $outlineColor token
-      // (DG-A11Y-01, ≥3:1 vs page surfaces). The previous color8 measured
-      // 1.89:1 on the light page — an invisible ring on the one control
-      // whose entire job is keyboard visibility.
-      outline: focused ? `2px solid ${theme.outlineColor?.get() ?? theme.color8?.get() ?? "currentColor"}` : "none",
-      outlineOffset: 2
-    },
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
+    className: "mp-skip-link",
+    href,
+    style: typeof radiusPx === "number" ? {
+      borderRadius: radiusPx,
+      ["--mp-skip-link-radius"]: `${radiusPx}px`
+    } : void 0,
     onClick: handleActivate,
     children: /* @__PURE__ */jsx(SkipLinkSurface, {
       ...knobProps.elevatedSurface,