@yahoo/uds 3.157.1 → 3.158.0

package/dist/tailwind-internal/dist/components/getFocusRingStyles.js

@@ -2,23 +2,90 @@
 import { PSEUDO_STYLE_SELECTOR_MAP } from "../packages/css-tokens/dist/index.js";
 //#region ../tailwind-internal/dist/components/getFocusRingStyles.js
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
-const ringStyles = {
+const ringOutlineStyles = {
 	outlineOffset: "var(--uds-outline-offset)",
 	outlineWidth: "var(--uds-outline-width)",
 	outlineColor: "var(--uds-outline-color)",
 	outlineStyle: "var(--uds-outline-style)"
 };
 /**
+* Shadow-based focus ring for elements that receive focus directly and do not
+* use `outline` for their resting border.
+*/
+const ringShadowStyles = { boxShadow: "0 0 0 var(--uds-outline-offset) transparent, 0 0 0 calc(var(--uds-outline-offset) + var(--uds-outline-width)) var(--uds-outline-color)" };
+/**
+* Focus ring for outline-border wrappers (Input/Select) that delegate focus to a
+* child via `.uds-ring-within`. A `::after` ring avoids fighting the inset
+* `outline` border on the same element — box-shadow cannot reliably show the
+* offset gap when an outline border is also present.
+*/
+const ringShadowWithinHostStyles = { position: "relative" };
+const ringShadowWithinAfterStyles = {
+	content: "\"\"",
+	position: "absolute",
+	top: "calc(-1 * (var(--uds-outline-offset) + var(--uds-outline-width)))",
+	right: "calc(-1 * (var(--uds-outline-offset) + var(--uds-outline-width)))",
+	bottom: "calc(-1 * (var(--uds-outline-offset) + var(--uds-outline-width)))",
+	left: "calc(-1 * (var(--uds-outline-offset) + var(--uds-outline-width)))",
+	border: "var(--uds-outline-width) solid var(--uds-outline-color)",
+	borderRadius: "calc(var(--uds-nested-border-radius-size) + var(--uds-outline-offset) + var(--uds-outline-width))",
+	pointerEvents: "none"
+};
+const ringWithinFocusResetStyles = { outline: "none" };
+/** Input/select wrappers use outline for borders — they get the shadow ring instead. */
+const notInputWrapperDynamic = ":not([class*=\"inputwrapperdynamic\"])";
+const previewOutlineRingSelectors = [
+	`.focused .uds-ring${notInputWrapperDynamic}:not(:disabled)`,
+	`.focus-visible .uds-ring${notInputWrapperDynamic}:not(:disabled)`,
+	`.focus .uds-ring${notInputWrapperDynamic}:not(:disabled)`
+];
+const previewShadowRingWithinHostSelectors = [
+	".focused .uds-ring-shadow.uds-ring-within:not(:disabled)",
+	".focus-visible .uds-ring-shadow.uds-ring-within:not(:disabled)",
+	".focus .uds-ring-shadow.uds-ring-within:not(:disabled)",
+	".focused [class*=\"inputwrapperdynamic\"].uds-ring-shadow.uds-ring-within:not(:disabled)",
+	".focus-visible [class*=\"inputwrapperdynamic\"].uds-ring-shadow.uds-ring-within:not(:disabled)",
+	".focus [class*=\"inputwrapperdynamic\"].uds-ring-shadow.uds-ring-within:not(:disabled)"
+];
+const previewShadowRingSelectors = [
+	".focused [class*=\"inputwrapperdynamic\"].uds-ring:not(:disabled)",
+	".focus-visible [class*=\"inputwrapperdynamic\"].uds-ring:not(:disabled)",
+	".focus [class*=\"inputwrapperdynamic\"].uds-ring:not(:disabled)"
+];
+function addRingShadowWithinRules(styles, hostSelector) {
+	styles[hostSelector] = ringShadowWithinHostStyles;
+	styles[`${hostSelector}::after`] = ringShadowWithinAfterStyles;
+}
+function toKebabCase(property) {
+	return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+/**
 * Generates focus ring styles using CSS variables.
 * The CSS variable values (--uds-outline-*) are set per color mode via parseTokens/UdsThemeProvider.
 */
 function getFocusRingStyles() {
-	return {
-		/** Apply styles */
-		[`.uds-ring${PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringStyles,
-		[`.focused .uds-ring:not(:disabled)`]: ringStyles,
-		[`.uds-ring.uds-ring-within${PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}:not(:disabled)`]: ringStyles
+	const styles = {
+		/** Focusable children delegate the ring to a `.uds-ring-within` ancestor. */
+		[`.uds-ring-within ${PSEUDO_STYLE_SELECTOR_MAP.focused}`]: ringWithinFocusResetStyles,
+		/** Outline-based ring for standard interactive components */
+		[`.uds-ring${notInputWrapperDynamic}${PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringOutlineStyles,
+		[`.uds-ring.uds-ring-within${PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}:not(:disabled)`]: ringOutlineStyles,
+		/** Shadow-based ring for elements that receive focus directly */
+		[`.uds-ring-shadow${PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringShadowStyles,
+		[`[class*="inputwrapperdynamic"].uds-ring${PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringShadowStyles
 	};
+	addRingShadowWithinRules(styles, `.uds-ring-shadow.uds-ring-within${PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}:not(:disabled)`);
+	for (const selector of previewOutlineRingSelectors) styles[selector] = ringOutlineStyles;
+	for (const selector of previewShadowRingWithinHostSelectors) addRingShadowWithinRules(styles, selector);
+	for (const selector of previewShadowRingSelectors) styles[selector] = ringShadowStyles;
+	return styles;
+}
+/** CSS-ready focus ring rules (kebab-case properties) for runtime injection. */
+function getFocusRingStyleRules() {
+	const styles = getFocusRingStyles();
+	const rules = {};
+	for (const [selector, declarations] of Object.entries(styles)) rules[selector] = Object.fromEntries(Object.entries(declarations).map(([property, value]) => [toKebabCase(property), value]));
+	return rules;
 }
 //#endregion
-export { getFocusRingStyles };
+export { getFocusRingStyleRules, getFocusRingStyles };

package/dist/tailwind-internal/dist/components/getResponsiveTextStyles.cjs

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 require("../../../_virtual/_rolldown/runtime.cjs");
-const require_entries = require("../packages/utils/dist/entries.cjs");
 const require_index = require("../packages/fixtures/dist/index.cjs");
 const require_index$1 = require("../packages/css-tokens/dist/index.cjs");
+const require_entries = require("../packages/utils/dist/entries.cjs");
 const require_assertUnreachable = require("../packages/utils/dist/assertUnreachable.cjs");
 let lodash_es = require("lodash-es");
 //#region ../tailwind-internal/dist/components/getResponsiveTextStyles.js

package/dist/tailwind-internal/dist/components/getResponsiveTextStyles.js

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { entries as entries$1 } from "../packages/utils/dist/entries.js";
 import { textVariants } from "../packages/fixtures/dist/index.js";
 import { FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, LETTER_SPACING_PREFIX, LINE_HEIGHT_PREFIX, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX } from "../packages/css-tokens/dist/index.js";
+import { entries as entries$1 } from "../packages/utils/dist/entries.js";
 import { assertUnreachable } from "../packages/utils/dist/assertUnreachable.js";
 import { isString } from "lodash-es";
 //#region ../tailwind-internal/dist/components/getResponsiveTextStyles.js

package/dist/tailwind-internal/dist/index.d.cts

@@ -8,6 +8,7 @@ import { ALLOWED_ENTRY_FILE_EXTENSIONS, DEFAULT_ENTRY, EntryValue, ResolvedEntry
 import { parseOpacityStep } from "./utils/opacity.cjs";
 import { WebTokens, parseTokens } from "./utils/parseTokens.cjs";
 import { PreserveVarsOptions, preserveVars, preserveVarsCleanup } from "./utils/postcssPreserveVars.cjs";
+import { getFocusRingStyleRules, getFocusRingStyles } from "./components/getFocusRingStyles.cjs";
 import { getIconStyles } from "./components/getIconStyles.cjs";
 import { getBaseTextVars, getResponsiveTextStyles, textVariantsSafe } from "./components/getResponsiveTextStyles.cjs";
 import { addFontsPlugin } from "./utils/addFontsPlugin.cjs";

package/dist/tailwind-internal/dist/index.d.ts

@@ -8,6 +8,7 @@ import { ALLOWED_ENTRY_FILE_EXTENSIONS, DEFAULT_ENTRY, EntryValue, ResolvedEntry
 import { parseOpacityStep } from "./utils/opacity.js";
 import { WebTokens, parseTokens } from "./utils/parseTokens.js";
 import { PreserveVarsOptions, preserveVars, preserveVarsCleanup } from "./utils/postcssPreserveVars.js";
+import { getFocusRingStyleRules, getFocusRingStyles } from "./components/getFocusRingStyles.js";
 import { getIconStyles } from "./components/getIconStyles.js";
 import { getBaseTextVars, getResponsiveTextStyles, textVariantsSafe } from "./components/getResponsiveTextStyles.js";
 import { addFontsPlugin } from "./utils/addFontsPlugin.js";