@yahoo/uds 3.157.0 → 3.158.0

package/dist/styles/styler.d.cts

@@ -24,17 +24,17 @@ declare const getStylesInternal: (props?: ({
   bannerSizeIcon?: "default" | undefined;
   bannerSizeRoot?: "default" | undefined;
   bannerSizeTitle?: "default" | undefined;
-  bannerVariantDescription?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
-  bannerVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
-  bannerVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
-  bannerVariantTitle?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
+  bannerVariantDescription?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
+  bannerVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
+  bannerVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
+  bannerVariantTitle?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
   bottomsheetVariantHandleIndicator?: "default" | undefined;
   bottomsheetVariantHeader?: "default" | undefined;
   bottomsheetVariantRoot?: "default" | undefined;
   buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
   buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
-  buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
-  buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
+  buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
+  buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
   checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
   checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
   checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
@@ -114,6 +114,7 @@ declare const getStylesInternal: (props?: ({
   menuitemSizeEndIcon?: "default" | undefined;
   menuitemSizeRoot?: "default" | undefined;
   menuitemSizeStartIcon?: "default" | undefined;
+  menuitemSizeText?: "default" | undefined;
   modalSizeActions?: "default" | undefined;
   modalSizeCloseIcon?: "default" | undefined;
   modalSizeCloseIconContainer?: "default" | undefined;
@@ -159,6 +160,22 @@ declare const getStylesInternal: (props?: ({
   radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
   radioVariantValueRoot?: "checked" | "unchecked" | undefined;
   scrimVariantRoot?: "default" | undefined;
+  selectVariantRoot?: "default" | undefined;
+  selectcontentSizeRoot?: "default" | undefined;
+  selectcontentVariantRoot?: "default" | undefined;
+  selectitemDividerVariantLine?: "default" | undefined;
+  selectitemDividerVariantRoot?: "default" | undefined;
+  selectitemDividerVariantText?: "default" | undefined;
+  selectitemItemVariantActiveIcon?: "off" | "on" | undefined;
+  selectitemItemVariantActiveRoot?: "off" | "on" | undefined;
+  selectitemItemVariantActiveText?: "off" | "on" | undefined;
+  selectitemItemVariantIcon?: "default" | undefined;
+  selectitemItemVariantRoot?: "default" | undefined;
+  selectitemItemVariantText?: "default" | undefined;
+  selectitemSizeEndIcon?: "default" | undefined;
+  selectitemSizeRoot?: "default" | undefined;
+  selectitemSizeStartIcon?: "default" | undefined;
+  selectitemSizeText?: "default" | undefined;
   switchSizeHandle?: "sm" | "md" | "default" | undefined;
   switchSizeHandleIcon?: "sm" | "md" | "default" | undefined;
   switchSizeRoot?: "sm" | "md" | "default" | undefined;
@@ -183,10 +200,10 @@ declare const getStylesInternal: (props?: ({
   toastSizeIcon?: "default" | undefined;
   toastSizeLabel?: "default" | undefined;
   toastSizeRoot?: "default" | undefined;
-  toastVariantActionButton?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
-  toastVariantCloseIcon?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
-  toastVariantIcon?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
-  toastVariantRoot?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
+  toastVariantActionButton?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantCloseIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantRoot?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
   tooltipSizeBody?: "default" | undefined;
   tooltipSizeEndContent?: "default" | undefined;
   tooltipSizeIcon?: "default" | undefined;
@@ -201,10 +218,10 @@ declare const getStylesInternal: (props?: ({
   placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
   fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
   fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "extralight" | "light" | "regular" | "semibold" | "bold" | "extrabold" | undefined;
+  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  textAlign?: "center" | "start" | "end" | "justify" | undefined;
+  textAlign?: "center" | "justify" | "start" | "end" | undefined;
   textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
   spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;

package/dist/styles/styler.d.ts

@@ -24,17 +24,17 @@ declare const getStylesInternal: (props?: ({
   bannerSizeIcon?: "default" | undefined;
   bannerSizeRoot?: "default" | undefined;
   bannerSizeTitle?: "default" | undefined;
-  bannerVariantDescription?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
-  bannerVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
-  bannerVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
-  bannerVariantTitle?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "success" | "success-secondary" | "default" | undefined;
+  bannerVariantDescription?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
+  bannerVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
+  bannerVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
+  bannerVariantTitle?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
   bottomsheetVariantHandleIndicator?: "default" | undefined;
   bottomsheetVariantHeader?: "default" | undefined;
   bottomsheetVariantRoot?: "default" | undefined;
   buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
   buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
-  buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
-  buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
+  buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
+  buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
   checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
   checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
   checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
@@ -114,6 +114,7 @@ declare const getStylesInternal: (props?: ({
   menuitemSizeEndIcon?: "default" | undefined;
   menuitemSizeRoot?: "default" | undefined;
   menuitemSizeStartIcon?: "default" | undefined;
+  menuitemSizeText?: "default" | undefined;
   modalSizeActions?: "default" | undefined;
   modalSizeCloseIcon?: "default" | undefined;
   modalSizeCloseIconContainer?: "default" | undefined;
@@ -159,6 +160,22 @@ declare const getStylesInternal: (props?: ({
   radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
   radioVariantValueRoot?: "checked" | "unchecked" | undefined;
   scrimVariantRoot?: "default" | undefined;
+  selectVariantRoot?: "default" | undefined;
+  selectcontentSizeRoot?: "default" | undefined;
+  selectcontentVariantRoot?: "default" | undefined;
+  selectitemDividerVariantLine?: "default" | undefined;
+  selectitemDividerVariantRoot?: "default" | undefined;
+  selectitemDividerVariantText?: "default" | undefined;
+  selectitemItemVariantActiveIcon?: "off" | "on" | undefined;
+  selectitemItemVariantActiveRoot?: "off" | "on" | undefined;
+  selectitemItemVariantActiveText?: "off" | "on" | undefined;
+  selectitemItemVariantIcon?: "default" | undefined;
+  selectitemItemVariantRoot?: "default" | undefined;
+  selectitemItemVariantText?: "default" | undefined;
+  selectitemSizeEndIcon?: "default" | undefined;
+  selectitemSizeRoot?: "default" | undefined;
+  selectitemSizeStartIcon?: "default" | undefined;
+  selectitemSizeText?: "default" | undefined;
   switchSizeHandle?: "sm" | "md" | "default" | undefined;
   switchSizeHandleIcon?: "sm" | "md" | "default" | undefined;
   switchSizeRoot?: "sm" | "md" | "default" | undefined;
@@ -183,10 +200,10 @@ declare const getStylesInternal: (props?: ({
   toastSizeIcon?: "default" | undefined;
   toastSizeLabel?: "default" | undefined;
   toastSizeRoot?: "default" | undefined;
-  toastVariantActionButton?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
-  toastVariantCloseIcon?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
-  toastVariantIcon?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
-  toastVariantRoot?: "warning" | "info" | "loading" | "success" | "default" | "error" | undefined;
+  toastVariantActionButton?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantCloseIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantRoot?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
   tooltipSizeBody?: "default" | undefined;
   tooltipSizeEndContent?: "default" | undefined;
   tooltipSizeIcon?: "default" | undefined;
@@ -201,10 +218,10 @@ declare const getStylesInternal: (props?: ({
   placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
   fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
   fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "extralight" | "light" | "regular" | "semibold" | "bold" | "extrabold" | undefined;
+  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  textAlign?: "center" | "start" | "end" | "justify" | undefined;
+  textAlign?: "center" | "justify" | "start" | "end" | undefined;
   textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
   spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;

package/dist/styles/variants.d.cts

@@ -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/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 };