@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/jsx/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/jsx/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/jsx/Skeleton/index.native.js

@@ -24,10 +24,229 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Skeleton_exports = {};
 __export(Skeleton_exports, {
-  Skeleton: () => import_forms.Skeleton,
-  SkeletonCircle: () => import_forms.SkeletonCircle,
-  SkeletonText: () => import_forms.SkeletonText
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonGroup: () => SkeletonGroup,
+  SkeletonText: () => SkeletonText
 });
 module.exports = __toCommonJS(Skeleton_exports);
-var import_forms = require("@multiplatform.one/forms");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("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__ */(0, import_react.createContext)(true);
+var SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"];
+var skeletonCircleTokenUp = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+function skeletonCircleSize(sizeToken) {
+  var _skeletonCircleTokenUp_sizeToken;
+  return (0, import_theme.sizeRecipeForToken)((_skeletonCircleTokenUp_sizeToken = skeletonCircleTokenUp[sizeToken]) !== null && _skeletonCircleTokenUp_sizeToken !== void 0 ? _skeletonCircleTokenUp_sizeToken : "$5").height;
+}
+var SHIMMER_STYLE_ID = "__mp-skeleton-shimmer";
+function ensureShimmerStyles() {
+  if (!import_tamagui.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 = (0, import_tamagui.styled)(import_tamagui.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 = (0, import_theme.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
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  var shouldAnnounce = (0, import_react.useContext)(AnnounceCtx);
+  var pulsing = Boolean(animate && knobProps.transition);
+  if (import_tamagui.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,
+    ...(0, import_theme.radiusClassProps)("R-PILL", "SkeletonCircle")
+  } : variant === "rectangular" ? {
+    borderRadius: 0
+  } : variant === "rounded" ? {
+    borderRadius: knobProps.borderRadius.borderRadius
+  } : {
+    borderRadius: textRadius
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SkeletonFrame, {
+    variant,
+    width,
+    height: height !== null && height !== void 0 ? height : variant === "text" ? resolveTextHeight(knobProps.sizeToken, "body") : void 0,
+    ...radiusProps,
+    ...props,
+    ...(import_tamagui.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
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  var shouldAnnounce = (0, import_react.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__ */(0, import_jsx_runtime.jsx)(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.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
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  var diameter = Math.max(0, sizeProp !== null && sizeProp !== void 0 ? sizeProp : skeletonCircleSize(knobProps.sizeToken));
+  return /* @__PURE__ */(0, import_jsx_runtime.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
+  } = (0, import_react_i18next.useTranslation)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"AAAA;;AAAA,IACEA,SAAA,GAAAC,MAAA,CAAAC,cAAA;AAAA,IACAC,gBAAA,GAAAF,MAAA,CAAAG,wBAAA;AAAA,IACAC,iBAAA,GAAAJ,MAAA,CAAAK,mBAAA;AAAA,IAAAC,YAIK,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Skeleton_exports","Skeleton","SkeletonCircle","SkeletonGroup","SkeletonText","module","exports","import_jsx_runtime","require","import_react","import_react_i18next","import_theme","import_tamagui","clampTextRadius","radiusToken","startsWith","num","Number","parseInt","slice","isFinite","AnnounceCtx","createContext","SKELETON_SIZE_TOKENS","skeletonCircleTokenUp","$3","$4","$5","skeletonCircleSize","sizeToken","_skeletonCircleTokenUp_sizeToken","sizeRecipeForToken","height","SHIMMER_STYLE_ID","ensureShimmerStyles","isWeb","document","getElementById","style","createElement","id","textContent","join","head","appendChild","SkeletonFrame","styled","View","backgroundColor","overflow","pointerEvents","flexShrink","variants","variant","text","circular","rectangular","borderRadius","rounded","defaultVariants","resolveTextHeight","textSize","known","includes","body","fontSize","param","width","animate","label","className","props","t","useTranslation","knobProps","useResolvedKnobs","component","shouldAnnounce","useContext","pulsing","Boolean","transition","decorative","boneClass","filter","textRadius","pointy","radiusProps","radiusClassProps","jsx","role","accessibilityElementsHidden","lines","gap","gapProp","lastLineWidth","size","_variant","count","Math","max","floor","lineHeight","Provider","children","Array","length","_","i","sizeProp","diameter","maxWidth"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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,