@yahoo/uds 3.157.1 → 3.158.1

package/dist/styles/variants.d.ts

@@ -630,6 +630,9 @@ declare const variants: {
   menuitemSizeStartIcon: {
     readonly default: "uds-menuitem-size-default-starticon";
   };
+  menuitemSizeText: {
+    readonly default: "uds-menuitem-size-default-text";
+  };
   modalSizeActions: {
     readonly default: "uds-modal-size-default-actions";
   };
@@ -812,6 +815,57 @@ declare const variants: {
   scrimVariantRoot: {
     readonly default: "uds-scrim-variant-default-root";
   };
+  selectVariantRoot: {
+    readonly default: "uds-select-variant-default-root";
+  };
+  selectcontentSizeRoot: {
+    readonly default: "uds-selectcontent-size-default-root";
+  };
+  selectcontentVariantRoot: {
+    readonly default: "uds-selectcontent-variant-default-root";
+  };
+  selectitemDividerVariantLine: {
+    readonly default: "uds-selectitem-divider-variant-default-line";
+  };
+  selectitemDividerVariantRoot: {
+    readonly default: "uds-selectitem-divider-variant-default-root";
+  };
+  selectitemDividerVariantText: {
+    readonly default: "uds-selectitem-divider-variant-default-text";
+  };
+  selectitemItemVariantActiveIcon: {
+    readonly off: "uds-selectitem-item-variant-active-off-icon";
+    readonly on: "uds-selectitem-item-variant-active-on-icon";
+  };
+  selectitemItemVariantActiveRoot: {
+    readonly off: "uds-selectitem-item-variant-active-off-root";
+    readonly on: "uds-selectitem-item-variant-active-on-root";
+  };
+  selectitemItemVariantActiveText: {
+    readonly off: "uds-selectitem-item-variant-active-off-text";
+    readonly on: "uds-selectitem-item-variant-active-on-text";
+  };
+  selectitemItemVariantIcon: {
+    readonly default: "uds-selectitem-item-variant-default-icon";
+  };
+  selectitemItemVariantRoot: {
+    readonly default: "uds-selectitem-item-variant-default-root";
+  };
+  selectitemItemVariantText: {
+    readonly default: "uds-selectitem-item-variant-default-text";
+  };
+  selectitemSizeEndIcon: {
+    readonly default: "uds-selectitem-size-default-endicon";
+  };
+  selectitemSizeRoot: {
+    readonly default: "uds-selectitem-size-default-root";
+  };
+  selectitemSizeStartIcon: {
+    readonly default: "uds-selectitem-size-default-starticon";
+  };
+  selectitemSizeText: {
+    readonly default: "uds-selectitem-size-default-text";
+  };
   switchSizeHandle: {
     readonly default: "uds-switch-size-default-handle";
     readonly md: "uds-switch-size-md-handle";

package/dist/tailwind/utils/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_getInputStyles = require("../../tailwind-internal/dist/components/getInputStyles.cjs");
 const require_defaultTailwindThemeAsUdsConfig = require("../../tailwind-internal/dist/defaultTailwindThemeAsUdsConfig.cjs");
+const require_getFocusRingStyles = require("../../tailwind-internal/dist/components/getFocusRingStyles.cjs");
 const require_composeTailwindPlugins = require("../../tailwind-internal/dist/utils/composeTailwindPlugins.cjs");
 const require_getColorModeStyles = require("../../tailwind-internal/dist/utils/getColorModeStyles.cjs");
 const require_opacity = require("../../tailwind-internal/dist/utils/opacity.cjs");
@@ -24,6 +25,8 @@ exports.composeTailwindPlugins = require_composeTailwindPlugins.composeTailwindP
 exports.getBaseTextVars = require_getResponsiveTextStyles.getBaseTextVars;
 exports.getColorModeStyles = require_getColorModeStyles.getColorModeStyles;
 exports.getElevationStyles = require_getElevationStyles.getElevationStyles;
+exports.getFocusRingStyleRules = require_getFocusRingStyles.getFocusRingStyleRules;
+exports.getFocusRingStyles = require_getFocusRingStyles.getFocusRingStyles;
 exports.getFontFaceDeclarations = require_getFontFaceDeclarations.getFontFaceDeclarations;
 exports.getFontStyles = require_getFontStyles.getFontStyles;
 exports.getIconStyles = require_getIconStyles.getIconStyles;

package/dist/tailwind/utils/index.d.cts

@@ -7,6 +7,7 @@ import { getUDSContent, tailwindPlugin } from "../../tailwind-internal/dist/tail
 import { parseOpacityStep } from "../../tailwind-internal/dist/utils/opacity.cjs";
 import { WebTokens, parseTokens } from "../../tailwind-internal/dist/utils/parseTokens.cjs";
 import { PreserveVarsOptions, preserveVars, preserveVarsCleanup } from "../../tailwind-internal/dist/utils/postcssPreserveVars.cjs";
+import { getFocusRingStyleRules, getFocusRingStyles } from "../../tailwind-internal/dist/components/getFocusRingStyles.cjs";
 import { getIconStyles } from "../../tailwind-internal/dist/components/getIconStyles.cjs";
 import { getBaseTextVars, getResponsiveTextStyles, textVariantsSafe } from "../../tailwind-internal/dist/components/getResponsiveTextStyles.cjs";
 import { addFontsPlugin } from "../../tailwind-internal/dist/utils/addFontsPlugin.cjs";
@@ -18,4 +19,4 @@ import { getScaleModeStyles } from "../../tailwind-internal/dist/utils/getScaleM
 import { getShadowPresetValues } from "../../tailwind-internal/dist/utils/getShadowPresetValues.cjs";
 import { getShadowStyles } from "../../tailwind-internal/dist/utils/getShadowStyles.cjs";
 import { getShadowVars } from "../../tailwind-internal/dist/utils/getShadowVars.cjs";
-export { type FontFamilyOverrides, type PreserveVarsOptions, type TailwindPluginOptions, type WebTokens, addFontsPlugin, composeTailwindPlugins, getBaseTextVars, getColorModeStyles, getElevationStyles, getFontFaceDeclarations, getFontStyles, getIconStyles, getInputStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowPresetValues, getShadowStyles, getShadowVars, getUDSContent, parseOpacityStep, parseTokens, preserveVars, preserveVarsCleanup, tailwindPlugin, textVariantsSafe, udsToTailwindMap };
+export { type FontFamilyOverrides, type PreserveVarsOptions, type TailwindPluginOptions, type WebTokens, addFontsPlugin, composeTailwindPlugins, getBaseTextVars, getColorModeStyles, getElevationStyles, getFocusRingStyleRules, getFocusRingStyles, getFontFaceDeclarations, getFontStyles, getIconStyles, getInputStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowPresetValues, getShadowStyles, getShadowVars, getUDSContent, parseOpacityStep, parseTokens, preserveVars, preserveVarsCleanup, tailwindPlugin, textVariantsSafe, udsToTailwindMap };

package/dist/tailwind/utils/index.d.ts

@@ -7,6 +7,7 @@ import { getUDSContent, tailwindPlugin } from "../../tailwind-internal/dist/tail
 import { parseOpacityStep } from "../../tailwind-internal/dist/utils/opacity.js";
 import { WebTokens, parseTokens } from "../../tailwind-internal/dist/utils/parseTokens.js";
 import { PreserveVarsOptions, preserveVars, preserveVarsCleanup } from "../../tailwind-internal/dist/utils/postcssPreserveVars.js";
+import { getFocusRingStyleRules, getFocusRingStyles } from "../../tailwind-internal/dist/components/getFocusRingStyles.js";
 import { getIconStyles } from "../../tailwind-internal/dist/components/getIconStyles.js";
 import { getBaseTextVars, getResponsiveTextStyles, textVariantsSafe } from "../../tailwind-internal/dist/components/getResponsiveTextStyles.js";
 import { addFontsPlugin } from "../../tailwind-internal/dist/utils/addFontsPlugin.js";
@@ -18,4 +19,4 @@ import { getScaleModeStyles } from "../../tailwind-internal/dist/utils/getScaleM
 import { getShadowPresetValues } from "../../tailwind-internal/dist/utils/getShadowPresetValues.js";
 import { getShadowStyles } from "../../tailwind-internal/dist/utils/getShadowStyles.js";
 import { getShadowVars } from "../../tailwind-internal/dist/utils/getShadowVars.js";
-export { type FontFamilyOverrides, type PreserveVarsOptions, type TailwindPluginOptions, type WebTokens, addFontsPlugin, composeTailwindPlugins, getBaseTextVars, getColorModeStyles, getElevationStyles, getFontFaceDeclarations, getFontStyles, getIconStyles, getInputStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowPresetValues, getShadowStyles, getShadowVars, getUDSContent, parseOpacityStep, parseTokens, preserveVars, preserveVarsCleanup, tailwindPlugin, textVariantsSafe, udsToTailwindMap };
+export { type FontFamilyOverrides, type PreserveVarsOptions, type TailwindPluginOptions, type WebTokens, addFontsPlugin, composeTailwindPlugins, getBaseTextVars, getColorModeStyles, getElevationStyles, getFocusRingStyleRules, getFocusRingStyles, getFontFaceDeclarations, getFontStyles, getIconStyles, getInputStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowPresetValues, getShadowStyles, getShadowVars, getUDSContent, parseOpacityStep, parseTokens, preserveVars, preserveVarsCleanup, tailwindPlugin, textVariantsSafe, udsToTailwindMap };

package/dist/tailwind/utils/index.js

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { getInputStyles } from "../../tailwind-internal/dist/components/getInputStyles.js";
 import { udsToTailwindMap } from "../../tailwind-internal/dist/defaultTailwindThemeAsUdsConfig.js";
+import { getFocusRingStyleRules, getFocusRingStyles } from "../../tailwind-internal/dist/components/getFocusRingStyles.js";
 import { composeTailwindPlugins } from "../../tailwind-internal/dist/utils/composeTailwindPlugins.js";
 import { getColorModeStyles } from "../../tailwind-internal/dist/utils/getColorModeStyles.js";
 import { parseOpacityStep } from "../../tailwind-internal/dist/utils/opacity.js";
@@ -18,4 +19,4 @@ import { getUDSContent, tailwindPlugin } from "../../tailwind-internal/dist/tail
 import { preserveVars, preserveVarsCleanup } from "../../tailwind-internal/dist/utils/postcssPreserveVars.js";
 import { addFontsPlugin } from "../../tailwind-internal/dist/utils/addFontsPlugin.js";
 import { getShadowVars } from "../../tailwind-internal/dist/utils/getShadowVars.js";
-export { addFontsPlugin, composeTailwindPlugins, getBaseTextVars, getColorModeStyles, getElevationStyles, getFontFaceDeclarations, getFontStyles, getIconStyles, getInputStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowPresetValues, getShadowStyles, getShadowVars, getUDSContent, parseOpacityStep, parseTokens, preserveVars, preserveVarsCleanup, tailwindPlugin, textVariantsSafe, udsToTailwindMap };
+export { addFontsPlugin, composeTailwindPlugins, getBaseTextVars, getColorModeStyles, getElevationStyles, getFocusRingStyleRules, getFocusRingStyles, getFontFaceDeclarations, getFontStyles, getIconStyles, getInputStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowPresetValues, getShadowStyles, getShadowVars, getUDSContent, parseOpacityStep, parseTokens, preserveVars, preserveVarsCleanup, tailwindPlugin, textVariantsSafe, udsToTailwindMap };

package/dist/tailwind-internal/dist/base/addColorModeVars.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 require("../../../_virtual/_rolldown/runtime.cjs");
-const require_getColorModeStyles = require("../utils/getColorModeStyles.cjs");
 const require_index = require("../packages/css-tokens/dist/index.cjs");
+const require_getColorModeStyles = require("../utils/getColorModeStyles.cjs");
 const require_index$1 = require("../packages/modes/dist/index.cjs");
 let lodash_es = require("lodash-es");
 //#region ../tailwind-internal/dist/base/addColorModeVars.js

package/dist/tailwind-internal/dist/base/addColorModeVars.js

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { getColorModeStyles } from "../utils/getColorModeStyles.js";
 import { DARK_COLOR_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME } from "../packages/css-tokens/dist/index.js";
+import { getColorModeStyles } from "../utils/getColorModeStyles.js";
 import { DEFAULT_COLOR_MODE } from "../packages/modes/dist/index.js";
 import { isString } from "lodash-es";
 //#region ../tailwind-internal/dist/base/addColorModeVars.js

package/dist/tailwind-internal/dist/base/addColorModeVarsV2.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 require("../../../_virtual/_rolldown/runtime.cjs");
-const require_getColorModeStyles = require("../utils/getColorModeStyles.cjs");
 const require_index = require("../packages/css-tokens/dist/index.cjs");
+const require_getColorModeStyles = require("../utils/getColorModeStyles.cjs");
 const require_index$1 = require("../packages/modes/dist/index.cjs");
 let lodash_es = require("lodash-es");
 //#region ../tailwind-internal/dist/base/addColorModeVarsV2.js

package/dist/tailwind-internal/dist/base/addColorModeVarsV2.js

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { getColorModeStyles } from "../utils/getColorModeStyles.js";
 import { DARK_COLOR_MODE_CLASSNAME, INVERT_COLOR_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, SYSTEM_COLOR_MODE_CLASSNAME } from "../packages/css-tokens/dist/index.js";
+import { getColorModeStyles } from "../utils/getColorModeStyles.js";
 import { DEFAULT_COLOR_MODE } from "../packages/modes/dist/index.js";
 import { isString } from "lodash-es";
 //#region ../tailwind-internal/dist/base/addColorModeVarsV2.js

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

@@ -2,23 +2,91 @@
 const require_index = require("../packages/css-tokens/dist/index.cjs");
 //#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${require_index.PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringStyles,
-		[`.focused .uds-ring:not(:disabled)`]: ringStyles,
-		[`.uds-ring.uds-ring-within${require_index.PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}:not(:disabled)`]: ringStyles
+	const styles = {
+		/** Focusable children delegate the ring to a `.uds-ring-within` ancestor. */
+		[`.uds-ring-within ${require_index.PSEUDO_STYLE_SELECTOR_MAP.focused}`]: ringWithinFocusResetStyles,
+		/** Outline-based ring for standard interactive components */
+		[`.uds-ring${notInputWrapperDynamic}${require_index.PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringOutlineStyles,
+		[`.uds-ring.uds-ring-within${require_index.PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}:not(:disabled)`]: ringOutlineStyles,
+		/** Shadow-based ring for elements that receive focus directly */
+		[`.uds-ring-shadow${require_index.PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringShadowStyles,
+		[`[class*="inputwrapperdynamic"].uds-ring${require_index.PSEUDO_STYLE_SELECTOR_MAP.focused}:not(:disabled)`]: ringShadowStyles
 	};
+	addRingShadowWithinRules(styles, `.uds-ring-shadow.uds-ring-within${require_index.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
+exports.getFocusRingStyleRules = getFocusRingStyleRules;
 exports.getFocusRingStyles = getFocusRingStyles;

package/dist/tailwind-internal/dist/components/getFocusRingStyles.d.cts

@@ -0,0 +1,14 @@
+
+import { CssStyleObject } from "./types.cjs";
+
+//#region ../tailwind-internal/dist/components/getFocusRingStyles.d.ts
+//#region src/components/getFocusRingStyles.d.ts
+/**
+ * Generates focus ring styles using CSS variables.
+ * The CSS variable values (--uds-outline-*) are set per color mode via parseTokens/UdsThemeProvider.
+ */
+declare function getFocusRingStyles(): CssStyleObject;
+/** CSS-ready focus ring rules (kebab-case properties) for runtime injection. */
+declare function getFocusRingStyleRules(): Record<string, Record<string, string>>; //#endregion
+//#endregion
+export { getFocusRingStyleRules, getFocusRingStyles };

package/dist/tailwind-internal/dist/components/getFocusRingStyles.d.ts

@@ -0,0 +1,14 @@
+
+import { CssStyleObject } from "./types.js";
+
+//#region ../tailwind-internal/dist/components/getFocusRingStyles.d.ts
+//#region src/components/getFocusRingStyles.d.ts
+/**
+ * Generates focus ring styles using CSS variables.
+ * The CSS variable values (--uds-outline-*) are set per color mode via parseTokens/UdsThemeProvider.
+ */
+declare function getFocusRingStyles(): CssStyleObject;
+/** CSS-ready focus ring rules (kebab-case properties) for runtime injection. */
+declare function getFocusRingStyleRules(): Record<string, Record<string, string>>; //#endregion
+//#endregion
+export { getFocusRingStyleRules, getFocusRingStyles };

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";