/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
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 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() {
	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 { getFocusRingStyleRules, getFocusRingStyles };
