@vaneui/ui 0.2.2-alpha.20250907183237.5f63365 → 0.2.2-alpha.20250913214402.427a7ea

package/dist/index.esm.js

@@ -9,16 +9,382 @@ import { createContext, useContext, useMemo, forwardRef } from 'react';
 class BaseTheme {
 }
 
+/** Default neutral appearance - uses default color variables */
+const DEFAULT = 'default';
+/** Accent appearance - uses accent/rose color variables for brand secondary styling */
+const ACCENT = 'accent';
+/** Primary appearance - uses primary/blue color variables for main brand styling */
+const PRIMARY = 'primary';
+/** Secondary appearance - uses secondary/gray color variables for muted styling */
+const SECONDARY = 'secondary';
+/** Tertiary appearance - uses tertiary/gray color variables for subtle styling */
+const TERTIARY = 'tertiary';
+/** Success appearance - uses success/emerald color variables for positive states */
+const SUCCESS = 'success';
+/** Danger appearance - uses danger/red color variables for error/destructive states */
+const DANGER = 'danger';
+/** Warning appearance - uses warning/amber color variables for caution states */
+const WARNING = 'warning';
+/** Info appearance - uses info/cyan color variables for informational states */
+const INFO = 'info';
+/** Link appearance - uses link/blue color variables for hyperlinks and navigation */
+const LINK = 'link';
+/** All appearance property values */
+const APPEARANCE_VALUES = [DEFAULT, ACCENT, PRIMARY, SECONDARY, TERTIARY, SUCCESS, DANGER, WARNING, INFO, LINK];
+
+/** Show border - adds appearance-based border styling */
+const BORDER = 'border';
+/** Hide border - removes border styling (overrides appearance colors) */
+const NO_BORDER = 'noBorder';
+/** All border property values */
+const BORDER_VALUES = [BORDER, NO_BORDER];
+
+/** Extra-small column breakpoint - responsive grid column sizing for xs screens */
+const XS_COL = 'xsCol';
+/** Small column breakpoint - responsive grid column sizing for sm screens */
+const SM_COL = 'smCol';
+/** Medium column breakpoint - responsive grid column sizing for md screens */
+const MD_COL = 'mdCol';
+/** Large column breakpoint - responsive grid column sizing for lg screens */
+const LG_COL = 'lgCol';
+/** Extra-large column breakpoint - responsive grid column sizing for xl screens */
+const XL_COL = 'xlCol';
+/** All breakpoint property values */
+const BREAKPOINT_VALUES = [XS_COL, SM_COL, MD_COL, LG_COL, XL_COL];
+
+/** Inline display - flows with text */
+const INLINE = 'inline';
+/** Block display - takes full width, new line */
+const BLOCK = 'block';
+/** Inline-block display - inline but with block properties */
+const INLINE_BLOCK = 'inlineBlock';
+/** Flex display - flexbox container */
+const FLEX = 'flex';
+/** Inline-flex display - inline flexbox container */
+const INLINE_FLEX = 'inlineFlex';
+/** Grid display - CSS grid container */
+const GRID = 'grid';
+/** Inline-grid display - inline grid container */
+const INLINE_GRID = 'inlineGrid';
+/** Contents display - element's box is removed, children display as if parent didn't exist */
+const CONTENTS = 'contents';
+/** Table display - behaves like table element */
+const TABLE = 'table';
+/** Table-cell display - behaves like td element */
+const TABLE_CELL = 'tableCell';
+/** Hidden display - element is not visible */
+const HIDDEN = 'hidden';
+/** All display property values */
+const DISPLAY_VALUES = [INLINE, BLOCK, INLINE_BLOCK, FLEX, INLINE_FLEX, GRID, INLINE_GRID, CONTENTS, TABLE, TABLE_CELL, HIDDEN];
+
+/** Horizontal flex direction (left to right) */
+const ROW = 'row';
+/** Vertical flex direction (top to bottom) */
+const COLUMN = 'column';
+/** Horizontal flex direction reversed (right to left) */
+const ROW_REVERSE = 'rowReverse';
+/** Vertical flex direction reversed (bottom to top) */
+const COLUMN_REVERSE = 'columnReverse';
+/** All flex direction property values */
+const FLEX_DIRECTION_VALUES = [ROW, COLUMN, ROW_REVERSE, COLUMN_REVERSE];
+
+/** Sans-serif font family - clean, modern typeface without serifs */
+const SANS = 'sans';
+/** Serif font family - traditional typeface with small decorative strokes */
+const SERIF = 'serif';
+/** Monospace font family - fixed-width typeface for code and data */
+const MONO = 'mono';
+/** All font family property values */
+const FONT_FAMILY_VALUES = [SANS, SERIF, MONO];
+
+/** Italic font style - slanted text styling */
+const ITALIC = 'italic';
+/** Normal font style - upright text styling (not italic) */
+const NOT_ITALIC = 'notItalic';
+/** All font style property values */
+const FONT_STYLE_VALUES = [ITALIC, NOT_ITALIC];
+
+/** Thin font weight - CSS font-weight: 100 */
+const THIN = 'thin';
+/** Extra light font weight - CSS font-weight: 200 */
+const EXTRALIGHT = 'extralight';
+/** Light font weight - CSS font-weight: 300 */
+const LIGHT = 'light';
+/** Normal font weight - CSS font-weight: 400 (default) */
+const NORMAL = 'normal';
+/** Medium font weight - CSS font-weight: 500 */
+const MEDIUM = 'medium';
+/** Semibold font weight - CSS font-weight: 600 */
+const SEMIBOLD = 'semibold';
+/** Bold font weight - CSS font-weight: 700 */
+const BOLD = 'bold';
+/** Extra bold font weight - CSS font-weight: 800 */
+const EXTRABOLD = 'extrabold';
+/** Black font weight - CSS font-weight: 900 (heaviest) */
+const BLACK = 'black';
+/** All font weight property values */
+const FONT_WEIGHT_VALUES = [THIN, EXTRALIGHT, LIGHT, NORMAL, MEDIUM, SEMIBOLD, BOLD, EXTRABOLD, BLACK];
+
+/** Enable spacing between flex/grid items - uses size-responsive gap values */
+const GAP = 'gap';
+/** Disable spacing between flex/grid items - no gap applied */
+const NO_GAP = 'noGap';
+/** All gap property values */
+const GAP_VALUES = [GAP, NO_GAP];
+
+/** Hide element on extra-small screens and up - visible only on mobile */
+const XS_HIDE = 'xsHide';
+/** Hide element on small screens and up - visible only on extra-small mobile */
+const SM_HIDE = 'smHide';
+/** Hide element on medium screens and up - visible only on small screens and below */
+const MD_HIDE = 'mdHide';
+/** Hide element on large screens and up - visible only on medium screens and below */
+const LG_HIDE = 'lgHide';
+/** Hide element on extra-large screens and up - visible only on large screens and below */
+const XL_HIDE = 'xlHide';
+/** All hide property values */
+const HIDE_VALUES = [XS_HIDE, SM_HIDE, MD_HIDE, LG_HIDE, XL_HIDE];
+
+/** Align items to the start of the cross axis */
+const ITEMS_START = 'itemsStart';
+/** Align items to the end of the cross axis */
+const ITEMS_END = 'itemsEnd';
+/** Center items along the cross axis */
+const ITEMS_CENTER = 'itemsCenter';
+/** Align items along their baseline */
+const ITEMS_BASELINE = 'itemsBaseline';
+/** Stretch items to fill the cross axis */
+const ITEMS_STRETCH = 'itemsStretch';
+/** All items property values */
+const ITEMS_VALUES = [ITEMS_START, ITEMS_END, ITEMS_CENTER, ITEMS_BASELINE, ITEMS_STRETCH];
+
+/** Pack items toward the start of the main axis */
+const JUSTIFY_START = 'justifyStart';
+/** Pack items toward the end of the main axis */
+const JUSTIFY_END = 'justifyEnd';
+/** Center items along the main axis */
+const JUSTIFY_CENTER = 'justifyCenter';
+/** Distribute items with space between them */
+const JUSTIFY_BETWEEN = 'justifyBetween';
+/** Distribute items with space around them */
+const JUSTIFY_AROUND = 'justifyAround';
+/** Distribute items with equal space around them */
+const JUSTIFY_EVENLY = 'justifyEvenly';
+/** Stretch items to fill the main axis */
+const JUSTIFY_STRETCH = 'justifyStretch';
+/** Align items along their baseline on main axis */
+const JUSTIFY_BASELINE = 'justifyBaseline';
+/** All justify property values */
+const JUSTIFY_VALUES = [JUSTIFY_START, JUSTIFY_END, JUSTIFY_CENTER, JUSTIFY_BETWEEN, JUSTIFY_AROUND, JUSTIFY_EVENLY, JUSTIFY_STRETCH, JUSTIFY_BASELINE];
+
+/** Disc bullet points - circular bullets for list items */
+const DISC = 'disc';
+/** Decimal numbers - numbered list items (1, 2, 3...) */
+const DECIMAL = 'decimal';
+/** All list style property values */
+const LIST_STYLE_VALUES = [DISC, DECIMAL];
+
+/** Auto overflow - show scrollbars if needed */
+const OVERFLOW_AUTO = 'overflowAuto';
+/** Hidden overflow - clip content without scrollbars */
+const OVERFLOW_HIDDEN = 'overflowHidden';
+/** Clip overflow - hard clip without scrollbars */
+const OVERFLOW_CLIP = 'overflowClip';
+/** Visible overflow - content extends beyond bounds */
+const OVERFLOW_VISIBLE = 'overflowVisible';
+/** Scroll overflow - always show scrollbars */
+const OVERFLOW_SCROLL = 'overflowScroll';
+/** Auto overflow on X-axis only */
+const OVERFLOW_X_AUTO = 'overflowXAuto';
+/** Auto overflow on Y-axis only */
+const OVERFLOW_Y_AUTO = 'overflowYAuto';
+/** Hidden overflow on X-axis only */
+const OVERFLOW_X_HIDDEN = 'overflowXHidden';
+/** Hidden overflow on Y-axis only */
+const OVERFLOW_Y_HIDDEN = 'overflowYHidden';
+/** Clip overflow on X-axis only */
+const OVERFLOW_X_CLIP = 'overflowXClip';
+/** Clip overflow on Y-axis only */
+const OVERFLOW_Y_CLIP = 'overflowYClip';
+/** Visible overflow on X-axis only */
+const OVERFLOW_X_VISIBLE = 'overflowXVisible';
+/** Visible overflow on Y-axis only */
+const OVERFLOW_Y_VISIBLE = 'overflowYVisible';
+/** Scroll overflow on X-axis only */
+const OVERFLOW_X_SCROLL = 'overflowXScroll';
+/** Scroll overflow on Y-axis only */
+const OVERFLOW_Y_SCROLL = 'overflowYScroll';
+/** All overflow property values */
+const OVERFLOW_VALUES = [
+    OVERFLOW_AUTO, OVERFLOW_HIDDEN, OVERFLOW_CLIP, OVERFLOW_VISIBLE, OVERFLOW_SCROLL,
+    OVERFLOW_X_AUTO, OVERFLOW_Y_AUTO, OVERFLOW_X_HIDDEN, OVERFLOW_Y_HIDDEN,
+    OVERFLOW_X_CLIP, OVERFLOW_Y_CLIP, OVERFLOW_X_VISIBLE, OVERFLOW_Y_VISIBLE,
+    OVERFLOW_X_SCROLL, OVERFLOW_Y_SCROLL
+];
+
+/** Enable internal padding - uses size-responsive padding values */
+const PADDING$1 = 'padding';
+/** Disable internal padding - no padding applied */
+const NO_PADDING = 'noPadding';
+/** All padding property values */
+const PADDING_VALUES = [PADDING$1, NO_PADDING];
+
+/** Relative positioning - offset from normal position */
+const RELATIVE = 'relative';
+/** Absolute positioning - removed from normal flow */
+const ABSOLUTE = 'absolute';
+/** Fixed positioning - positioned relative to viewport */
+const FIXED = 'fixed';
+/** Sticky positioning - toggles between relative and fixed */
+const STICKY = 'sticky';
+/** Static positioning - normal document flow (default) */
+const STATIC = 'static';
+/** All position property values */
+const POSITION_VALUES = [RELATIVE, ABSOLUTE, FIXED, STICKY, STATIC];
+
+/** Reverse flex direction - converts row to row-reverse or column to column-reverse */
+const REVERSE = 'reverse';
+/** All reverse property values */
+const REVERSE_VALUES = [REVERSE];
+
+/** Show ring - adds decorative ring/outline border around element */
+const RING = 'ring';
+/** Hide ring - removes ring/outline border styling */
+const NO_RING = 'noRing';
+/** All ring property values */
+const RING_VALUES = [RING, NO_RING];
+
+/** Enable drop shadow - adds size-responsive shadow styling */
+const SHADOW = 'shadow';
+/** Disable drop shadow - removes all shadow styling */
+const NO_SHADOW = 'noShadow';
+/** All shadow property values */
+const SHADOW_VALUES = [SHADOW, NO_SHADOW];
+
+/** Show focus-visible outline - adds visible focus indicator for keyboard navigation */
+const FOCUS_VISIBLE_OUTLINE = 'focusVisible';
+/** Hide focus-visible outline - removes focus-visible outline styling */
+const NO_FOCUS_VISIBLE_OUTLINE = 'noFocusVisible';
+/** All focusVisible property values */
+const FOCUS_VISIBLE_VALUES = [FOCUS_VISIBLE_OUTLINE, NO_FOCUS_VISIBLE_OUTLINE];
+
+/** Pill shape - fully rounded corners (rounded-full) */
+const PILL = 'pill';
+/** Sharp shape - no border radius (rounded-none) */
+const SHARP = 'sharp';
+/** Rounded shape - size-responsive border radius (varies by component size) */
+const ROUNDED = 'rounded';
+/** All shape property values */
+const SHAPE_VALUES = [PILL, SHARP, ROUNDED];
+
+/** Extra small size - affects padding, font-size, border-radius, and spacing */
+const XS = 'xs';
+/** Small size - affects padding, font-size, border-radius, and spacing */
+const SM = 'sm';
+/** Medium size (default) - affects padding, font-size, border-radius, and spacing */
+const MD = 'md';
+/** Large size - affects padding, font-size, border-radius, and spacing */
+const LG = 'lg';
+/** Extra large size - affects padding, font-size, border-radius, and spacing */
+const XL = 'xl';
+/** All size property values */
+const SIZE_VALUES = [XS, SM, MD, LG, XL];
+
+/** Left-aligned text */
+const TEXT_LEFT = 'textLeft';
+/** Center-aligned text */
+const TEXT_CENTER = 'textCenter';
+/** Right-aligned text */
+const TEXT_RIGHT = 'textRight';
+/** Justified text */
+const TEXT_JUSTIFY = 'textJustify';
+/** All text align property values */
+const TEXT_ALIGN_VALUES = [TEXT_LEFT, TEXT_CENTER, TEXT_RIGHT, TEXT_JUSTIFY];
+
+/** Add underline decoration below text */
+const UNDERLINE = 'underline';
+/** Add strikethrough/line-through decoration across text */
+const LINE_THROUGH = 'lineThrough';
+/** Remove text decoration (no underline, strikethrough, etc.) */
+const NO_UNDERLINE = 'noUnderline';
+/** Add overline decoration above text */
+const OVERLINE = 'overline';
+/** All text decoration property values */
+const TEXT_DECORATION_VALUES = [UNDERLINE, LINE_THROUGH, NO_UNDERLINE, OVERLINE];
+
+/** Transform text to UPPERCASE */
+const UPPERCASE = 'uppercase';
+/** Transform text to lowercase */
+const LOWERCASE = 'lowercase';
+/** Transform text to Capitalize Each Word */
+const CAPITALIZE = 'capitalize';
+/** Normal case - no transformation */
+const NORMAL_CASE = 'normalCase';
+/** All text transform property values */
+const TEXT_TRANSFORM_VALUES = [UPPERCASE, LOWERCASE, CAPITALIZE, NORMAL_CASE];
+
+/** Make background transparent for layout/UI components or text transparent for typography components */
+const TRANSPARENT = 'transparent';
+/** All transparent property values */
+const TRANSPARENT_VALUES = [TRANSPARENT];
+
+/** Filled variant - solid background with contrasting text color */
+const FILLED = 'filled';
+/** Outline variant - transparent background with border and colored text (default) */
+const OUTLINE = 'outline';
+/** All variant property values */
+const VARIANT_VALUES = [FILLED, OUTLINE];
+
+/** Allow flex items to wrap to new lines when container is too narrow */
+const FLEX_WRAP = 'flexWrap';
+/** Force flex items to stay on single line (may overflow) */
+const FLEX_NO_WRAP = 'flexNoWrap';
+/** Wrap flex items in reverse order (last items wrap first) */
+const FLEX_WRAP_REVERSE = 'flexWrapReverse';
+/** All wrap property values */
+const WRAP_VALUES = [FLEX_WRAP, FLEX_NO_WRAP, FLEX_WRAP_REVERSE];
+
+/** Base state - default resting appearance */
+const BASE = 'base';
+/** Hover state - appearance when cursor hovers over element */
+const HOVER = 'hover';
+/** Active state - appearance when element is being pressed/clicked */
+const ACTIVE = 'active';
+/** Focus state - appearance when element receives focus */
+const FOCUS = 'focus';
+/** Focus visible state - appearance when element has visible focus indicator */
+const FOCUS_VISIBLE = 'focusVisible';
+/** All mode property values */
+const MODE_VALUES = [BASE, HOVER, ACTIVE, FOCUS, FOCUS_VISIBLE];
+/** Styling mode keys for different interaction states */
+const ModeKeys = {
+    /** Interaction states for styling: base, hover, active, focus, focusVisible */
+    mode: MODE_VALUES,
+};
+
+/** Core layout properties for positioning and sizing elements */
 const LAYOUT_CORE = ['size', 'hide', 'items', 'justify', 'position', 'display', 'overflow'];
+/** Flexbox-specific layout properties for flex containers */
 const LAYOUT_FLEX = ['wrap', 'gap', 'flexDirection', 'reverse'];
+/** Padding properties for internal spacing control */
 const PADDING = ['padding'];
+/** Responsive breakpoint properties for different screen sizes */
 const BREAKPOINT = ['breakpoint'];
+/** Core visual properties including appearance colors and transparency */
 const VISUAL_CORE = ['appearance', 'transparent'];
-const VISUAL_DECORATION = ['border', 'shadow', 'ring'];
+/** Visual decoration properties for borders, shadows, and focus rings */
+const VISUAL_DECORATION = ['border', 'shadow', 'ring', 'focusVisible'];
+/** Layout-specific visual decoration (excluding focusVisible for non-interactive elements) */
+const VISUAL_DECORATION_LAYOUT = ['border', 'shadow', 'ring'];
+/** Shape properties for border radius and corner rounding */
 const SHAPE = ['shape'];
+/** Typography styling properties for text appearance and formatting */
 const TYPOGRAPHY_STYLE = ['fontWeight', 'fontStyle', 'textDecoration', 'textTransform', 'fontFamily', 'textAlign'];
+/** List-specific styling properties for bullet points and numbering */
 const LIST_STYLE = ['listStyle'];
+/** Variant properties for filled/outline styling modes */
 const VARIANT = ['variant'];
+/** All available component property categories combined */
 const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_CORE,
     ...LAYOUT_FLEX,
@@ -30,71 +396,126 @@ const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_DECORATION,
     ...SHAPE,
     ...VARIANT,
-    'mode',
 ];
 /**
- * Describes what the @ComponentKeys.appearance can be applied to
+ * Describes category for which the appearance can be applied
  * @see ComponentKeys.appearance
  */
-const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent'];
+const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent', 'focusVisible'];
+/** Component property keys mapping categories to their available values */
 const ComponentKeys = {
-    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'link'],
-    border: ['border', 'noBorder'],
-    breakpoint: ['xsCol', 'smCol', 'mdCol', 'lgCol', 'xlCol'],
-    display: ['inline', 'block', 'inlineBlock', 'flex', 'inlineFlex', 'grid', 'inlineGrid', 'contents', 'table', 'tableCell', 'hidden'],
-    flexDirection: ['row', 'column', 'rowReverse', 'columnReverse'],
-    fontFamily: ['sans', 'serif', 'mono'],
-    fontStyle: ['italic', 'notItalic'],
-    fontWeight: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
-    gap: ['gap', 'noGap'],
-    hide: ['xsHide', 'smHide', 'mdHide', 'lgHide', 'xlHide'],
-    items: ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'],
-    justify: ['justifyStart', 'justifyEnd', 'justifyCenter', 'justifyBetween', 'justifyAround', 'justifyEvenly', 'justifyStretch', 'justifyBaseline'],
-    listStyle: ['disc', 'decimal'],
-    mode: ['base', 'hover', 'active'],
-    overflow: ['overflowAuto', 'overflowHidden', 'overflowClip', 'overflowVisible', 'overflowScroll', 'overflowXAuto', 'overflowYAuto', 'overflowXHidden', 'overflowYHidden', 'overflowXClip', 'overflowYClip', 'overflowXVisible', 'overflowYVisible', 'overflowXScroll', 'overflowYScroll'],
-    padding: ['padding', 'noPadding'],
-    position: ['relative', 'absolute', 'fixed', 'sticky', 'static'],
-    reverse: ['reverse'],
-    ring: ['ring', 'noRing'],
-    shadow: ['shadow', 'noShadow'],
-    shape: ['pill', 'sharp', 'rounded'],
-    size: ['xs', 'sm', 'md', 'lg', 'xl'],
-    textAlign: ['textLeft', 'textCenter', 'textRight', 'textJustify'],
-    textDecoration: ['underline', 'lineThrough', 'noUnderline', 'overline'],
-    textTransform: ['uppercase', 'lowercase', 'capitalize', 'normalCase'],
-    transparent: ['transparent'],
-    variant: ['filled', 'outline'],
-    wrap: ['flexWrap', 'flexNoWrap', 'flexWrapReverse'],
+    /** Color appearance options */
+    appearance: APPEARANCE_VALUES,
+    /** Border visibility: border (show) or noBorder (hide) */
+    border: BORDER_VALUES,
+    /** Column breakpoints for responsive grid layouts */
+    breakpoint: BREAKPOINT_VALUES,
+    /** CSS display property values for element layout behavior */
+    display: DISPLAY_VALUES,
+    /** Flex direction: row (horizontal), column (vertical), or reversed variants */
+    flexDirection: FLEX_DIRECTION_VALUES,
+    /** Font family types: sans-serif, serif, or monospace */
+    fontFamily: FONT_FAMILY_VALUES,
+    /** Font style: italic or notItalic (normal) */
+    fontStyle: FONT_STYLE_VALUES,
+    /** Font weight from thin (100) to black (900) */
+    fontWeight: FONT_WEIGHT_VALUES,
+    /** Spacing between flex/grid items: gap (enabled) or noGap (disabled) */
+    gap: GAP_VALUES,
+    /** Hide elements at specific breakpoint sizes */
+    hide: HIDE_VALUES,
+    /** Cross-axis alignment for flex items (align-items) */
+    items: ITEMS_VALUES,
+    /** Main-axis alignment for flex items (justify-content) */
+    justify: JUSTIFY_VALUES,
+    /** List bullet/numbering style: disc (bullets) or decimal (numbers) */
+    listStyle: LIST_STYLE_VALUES,
+    /** Overflow behavior for content that exceeds container bounds */
+    overflow: OVERFLOW_VALUES,
+    /** Internal spacing: padding (enabled) or noPadding (disabled) */
+    padding: PADDING_VALUES,
+    /** CSS positioning: relative, absolute, fixed, sticky, static */
+    position: POSITION_VALUES,
+    /** Reverse the order of flex items */
+    reverse: REVERSE_VALUES,
+    /** Focus ring visibility: ring (show) or noRing (hide) */
+    ring: RING_VALUES,
+    /** Drop shadow visibility: shadow (enabled) or noShadow (disabled) */
+    shadow: SHADOW_VALUES,
+    /** Focus-visible outline visibility: focusVisible (show) or noFocusVisible (hide) */
+    focusVisible: FOCUS_VISIBLE_VALUES,
+    /** Border radius shape: pill (fully rounded), sharp (no radius), rounded (medium radius) */
+    shape: SHAPE_VALUES,
+    /** Size scale from extra-small to extra-large */
+    size: SIZE_VALUES,
+    /** Text alignment: left, center, right, justify */
+    textAlign: TEXT_ALIGN_VALUES,
+    /** Text decoration: underline, strikethrough (lineThrough), none (noUnderline), overline */
+    textDecoration: TEXT_DECORATION_VALUES,
+    /** Text case transformation: UPPERCASE, lowercase, Capitalize, normalCase */
+    textTransform: TEXT_TRANSFORM_VALUES,
+    /** Make background (layout/UI) or text (typography) transparent */
+    transparent: TRANSPARENT_VALUES,
+    /** Style variant: filled (solid background) or outline (border only) */
+    variant: VARIANT_VALUES,
+    /** Flex item wrapping behavior: wrap, no-wrap, or wrap-reverse */
+    wrap: WRAP_VALUES,
 };
-// Composite categories built from core blocks
+/** Composite categories built from core blocks */
+/** Complete layout category including core and flex properties */
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
+/** Complete visual category including core, decoration, and shape properties */
 const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+/** Layout-specific visual category (excludes focusVisible for non-interactive elements) */
+const VISUAL_LAYOUT = [...VISUAL_CORE, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
+/** Complete typography category for text styling */
 const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
+/** Categories for interactive components like buttons, badges, chips */
 const INTERACTIVE_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...PADDING, ...VARIANT];
+/** Button component categories */
 const BUTTON_CATEGORIES = INTERACTIVE_CATEGORIES;
+/** Badge component categories */
 const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
+/** Chip component categories */
 const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
+/** Code component categories */
 const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
-//typography:
+/** Typography component categories */
+/** Categories for typography components like Text, Title, Link */
 const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
+/** Categories for list components with typography and list-specific styling */
 const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
-//layout:
+/** Layout component categories */
+/** Categories for grid layout components */
 const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
-const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
-const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
-const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...VARIANT];
-const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL, ...VARIANT];
-const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING, ...VARIANT];
+/** Categories for container layout components */
+const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
+/** Categories for column layout components */
+const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
+/** Categories for row layout components with responsive breakpoints */
+const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...VARIANT];
+/** Categories for stack layout components with responsive and padding support */
+const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_LAYOUT, ...VARIANT];
+/** Categories for card components with full typography and layout support */
+const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...PADDING, ...VARIANT];
+/** Categories for divider components with basic layout and visual properties */
 const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
-const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT, ...VARIANT];
-// Form component categories
+/** Categories for section layout components with full responsive support */
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
+/** Form component categories */
+/** Categories for checkbox form components */
 const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+/** Categories for label form components with typography support */
 const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
-// Media component categories
+/** Categories for input form components with interactive and form-specific properties */
+const INPUT_CATEGORIES = [...INTERACTIVE_CATEGORIES];
+/** Media component categories */
+/** Categories for image media components */
 const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+/** All available component names in the library */
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
-    'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
+    'grid2', 'grid3', 'grid4', 'grid5', 'grid6', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img', 'input'];
+/** Mapping of each component to its available property categories */
 const ComponentCategories = {
     badge: BADGE_CATEGORIES,
     button: BUTTON_CATEGORIES,
@@ -108,7 +529,10 @@ const ComponentCategories = {
     grid2: GRID_CATEGORIES,
     grid3: GRID_CATEGORIES,
     grid4: GRID_CATEGORIES,
+    grid5: GRID_CATEGORIES,
+    grid6: GRID_CATEGORIES,
     img: IMG_CATEGORIES,
+    input: INPUT_CATEGORIES,
     label: LABEL_CATEGORIES,
     link: TYPOGRAPHY_CATEGORIES,
     list: LIST_CATEGORIES,
@@ -3039,7 +3463,7 @@ function pickFirstTruthyKeyByCategory(props, defaults, category) {
     return undefined;
 }
 
-const defaultLayoutTheme = {
+const defaultLayoutsThemes = {
     hide: new HideTheme(),
     items: new ItemsTheme(),
     justify: new JustifyTheme(),
@@ -3047,7 +3471,7 @@ const defaultLayoutTheme = {
     display: new DisplayTheme(),
     overflow: new OverflowTheme(),
 };
-const defaultTypographyTheme = {
+const defaultTypographyThemes = {
     fontFamily: new FontFamilyTheme(),
     fontWeight: new FontWeightTheme(),
     fontStyle: new FontStyleTheme(),
@@ -3180,18 +3604,18 @@ class GapTheme extends BaseTheme {
 }
 
 const uiBorderRadiusClasses = {
-    xs: "rounded-(--ui-border-radius-xs)",
-    sm: "rounded-(--ui-border-radius-sm)",
-    md: "rounded-(--ui-border-radius-md)",
-    lg: "rounded-(--ui-border-radius-lg)",
-    xl: "rounded-(--ui-border-radius-xl)",
+    xs: "rounded-(--ui-br-xs)",
+    sm: "rounded-(--ui-br-sm)",
+    md: "rounded-(--ui-br-md)",
+    lg: "rounded-(--ui-br-lg)",
+    xl: "rounded-(--ui-br-xl)",
 };
 const layoutBorderRadiusClasses = {
-    xs: "rounded-(--layout-border-radius-xs)",
-    sm: "rounded-(--layout-border-radius-sm)",
-    md: "rounded-(--layout-border-radius-md)",
-    lg: "rounded-(--layout-border-radius-lg)",
-    xl: "rounded-(--layout-border-radius-xl)",
+    xs: "rounded-(--layout-br-xs)",
+    sm: "rounded-(--layout-br-sm)",
+    md: "rounded-(--layout-br-md)",
+    lg: "rounded-(--layout-br-lg)",
+    xl: "rounded-(--layout-br-xl)",
 };
 
 class RadiusTheme extends BaseTheme {
@@ -3232,10 +3656,12 @@ class BorderTheme extends BaseTheme {
         this.base = "border";
         this.hover = "";
         this.active = "";
+        this.focus = "";
+        this.focusVisible = "";
     }
     getClasses(extractedKeys) {
         return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border) === "border"
-            ? ComponentKeys.mode.map((mode) => this[mode])
+            ? ModeKeys.mode.map((mode) => this[mode])
             : [];
     }
 }
@@ -3246,10 +3672,28 @@ class RingTheme extends BaseTheme {
         this.base = "ring ring-inset";
         this.hover = "";
         this.active = "";
+        this.focus = "";
+        this.focusVisible = "";
     }
     getClasses(extractedKeys) {
         return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.ring) === 'ring'
-            ? ComponentKeys.mode.map(mode => this[mode] || '').filter(Boolean)
+            ? ModeKeys.mode.map(mode => this[mode] || '').filter(Boolean)
+            : [];
+    }
+}
+
+class FocusVisibleTheme extends BaseTheme {
+    constructor() {
+        super(...arguments);
+        this.base = "";
+        this.hover = "";
+        this.active = "";
+        this.focus = "";
+        this.focusVisible = "focus-visible:outline-2 focus-visible:outline-offset-2";
+    }
+    getClasses(extractedKeys) {
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.focusVisible) === 'focusVisible'
+            ? ModeKeys.mode.map(mode => this[mode] || '').filter(Boolean)
             : [];
     }
 }
@@ -3309,25 +3753,29 @@ class PyTheme extends PaddingTheme {
 }
 
 class AppearanceTheme extends BaseTheme {
-    constructor(config, category, transparentClasses) {
+    constructor(config, category, transparentClasses, ignoreTransparent = false) {
         super();
         Object.assign(this, config);
         this.category = category;
         this.transparentClasses = transparentClasses;
+        this.ignoreTransparent = ignoreTransparent;
     }
     getClasses(extractedKeys) {
         var _a;
-        if (this.category === 'border' && extractedKeys.border === 'noBorder') {
+        if (this.category === 'border' && (extractedKeys.border === 'noBorder' || extractedKeys.border === undefined)) {
             return [];
         }
-        if (this.category === 'ring' && extractedKeys.ring === 'noRing') {
+        if (this.category === 'ring' && (extractedKeys.ring === 'noRing' || extractedKeys.ring === undefined)) {
             return [];
         }
-        if (this.category === 'shadow' && extractedKeys.shadow === 'noShadow') {
+        if (this.category === 'shadow' && (extractedKeys.shadow === 'noShadow' || extractedKeys.shadow === undefined)) {
+            return [];
+        }
+        if (this.category === 'focusVisible' && (extractedKeys.focusVisible === 'noFocusVisible' || extractedKeys.focusVisible === undefined)) {
             return [];
         }
         // Check for specific transparent styles first
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) && !this.ignoreTransparent) {
             const transparentClass = ((_a = this.transparentClasses) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
             return [transparentClass];
         }
@@ -3336,50 +3784,50 @@ class AppearanceTheme extends BaseTheme {
         if (pickedAppearanceKey) {
             const modes = this[pickedAppearanceKey];
             if (modes) {
-                return ComponentKeys.mode.map(mode => modes[mode] || '');
+                return ModeKeys.mode.map(mode => modes[mode] || '');
             }
         }
         return [];
     }
-    static createTheme(src = {}, category) {
-        const config = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
-            textKey,
-            Object.fromEntries(ComponentKeys.mode.map(modeKey => {
+    static createTheme(src = {}, category, ignoreTransparent = false) {
+        const config = Object.fromEntries(ComponentKeys.appearance.map(key => [
+            key,
+            Object.fromEntries(ModeKeys.mode.map(modeKey => {
                 var _a;
                 return [
                     modeKey,
-                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
+                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[key]) || ''
                 ];
             })),
         ]));
-        return new AppearanceTheme(config, category, src.base);
+        return new AppearanceTheme(config, category, src.base, ignoreTransparent);
     }
 }
 
 const filledTextAppearanceClasses = {
-    default: "text-(--filled-text-color-default)",
-    primary: "text-(--filled-text-color-primary)",
-    secondary: "text-(--filled-text-color-secondary)",
-    tertiary: "text-(--filled-text-color-tertiary)",
-    link: "text-(--filled-text-color-link)",
-    accent: "text-(--filled-text-color-accent)",
-    success: "text-(--filled-text-color-success)",
-    danger: "text-(--filled-text-color-danger)",
-    warning: "text-(--filled-text-color-warning)",
-    info: "text-(--filled-text-color-info)",
-    transparent: "text-(--filled-text-color-transparent)",
+    default: "text-(--color-text-filled-default)",
+    primary: "text-(--color-text-filled-primary)",
+    secondary: "text-(--color-text-filled-secondary)",
+    tertiary: "text-(--color-text-filled-tertiary)",
+    link: "text-(--color-text-filled-link)",
+    accent: "text-(--color-text-filled-accent)",
+    success: "text-(--color-text-filled-success)",
+    danger: "text-(--color-text-filled-danger)",
+    warning: "text-(--color-text-filled-warning)",
+    info: "text-(--color-text-filled-info)",
+    transparent: "text-transparent",
 };
 const textAppearanceClasses = {
-    default: "text-(--text-color-default)",
-    primary: "text-(--text-color-primary)",
-    secondary: "text-(--text-color-secondary)",
-    tertiary: "text-(--text-color-tertiary)",
-    link: "text-(--text-color-link)",
-    accent: "text-(--text-color-accent)",
-    success: "text-(--text-color-success)",
-    danger: "text-(--text-color-danger)",
-    warning: "text-(--text-color-warning)",
-    info: "text-(--text-color-info)",
+    default: "text-(--color-text-default)",
+    primary: "text-(--color-text-primary)",
+    secondary: "text-(--color-text-secondary)",
+    tertiary: "text-(--color-text-tertiary)",
+    link: "text-(--color-text-link)",
+    accent: "text-(--color-text-accent)",
+    success: "text-(--color-text-success)",
+    danger: "text-(--color-text-danger)",
+    warning: "text-(--color-text-warning)",
+    info: "text-(--color-text-info)",
     transparent: "text-transparent",
 };
 const textSizeClasses = {
@@ -3391,233 +3839,258 @@ const textSizeClasses = {
 };
 
 const filledBackgroundAppearanceClasses = {
-    default: "bg-(--filled-background-color-default)",
-    primary: "bg-(--filled-background-color-primary)",
-    secondary: "bg-(--filled-background-color-secondary)",
-    tertiary: "bg-(--filled-background-color-tertiary)",
-    accent: "bg-(--filled-background-color-accent)",
-    success: "bg-(--filled-background-color-success)",
-    danger: "bg-(--filled-background-color-danger)",
-    warning: "bg-(--filled-background-color-warning)",
-    info: "bg-(--filled-background-color-info)",
+    default: "bg-(--color-bg-filled-default)",
+    primary: "bg-(--color-bg-filled-primary)",
+    secondary: "bg-(--color-bg-filled-secondary)",
+    tertiary: "bg-(--color-bg-filled-tertiary)",
+    accent: "bg-(--color-bg-filled-accent)",
+    success: "bg-(--color-bg-filled-success)",
+    danger: "bg-(--color-bg-filled-danger)",
+    warning: "bg-(--color-bg-filled-warning)",
+    info: "bg-(--color-bg-filled-info)",
     transparent: "bg-transparent",
-    link: "bg-(--filled-background-color-link)",
+    link: "bg-(--color-bg-filled-link)",
 };
 const filledHoverBackgroundAppearanceClasses = {
-    default: "hover:bg-(--filled-background-color-hover-default)",
-    primary: "hover:bg-(--filled-background-color-hover-primary)",
-    secondary: "hover:bg-(--filled-background-color-hover-secondary)",
-    tertiary: "hover:bg-(--filled-background-color-hover-tertiary)",
-    accent: "hover:bg-(--filled-background-color-hover-accent)",
-    success: "hover:bg-(--filled-background-color-hover-success)",
-    danger: "hover:bg-(--filled-background-color-hover-danger)",
-    warning: "hover:bg-(--filled-background-color-hover-warning)",
-    info: "hover:bg-(--filled-background-color-hover-info)",
+    default: "hover:bg-(--color-bg-filled-hover-default)",
+    primary: "hover:bg-(--color-bg-filled-hover-primary)",
+    secondary: "hover:bg-(--color-bg-filled-hover-secondary)",
+    tertiary: "hover:bg-(--color-bg-filled-hover-tertiary)",
+    accent: "hover:bg-(--color-bg-filled-hover-accent)",
+    success: "hover:bg-(--color-bg-filled-hover-success)",
+    danger: "hover:bg-(--color-bg-filled-hover-danger)",
+    warning: "hover:bg-(--color-bg-filled-hover-warning)",
+    info: "hover:bg-(--color-bg-filled-hover-info)",
     transparent: "hover:bg-transparent",
-    link: "hover:bg-(--filled-background-color-hover-link)",
+    link: "hover:bg-(--color-bg-filled-hover-link)",
 };
 const filledActiveBackgroundAppearanceClasses = {
-    default: "active:bg-(--filled-background-color-active-default)",
-    primary: "active:bg-(--filled-background-color-active-primary)",
-    secondary: "active:bg-(--filled-background-color-active-secondary)",
-    tertiary: "active:bg-(--filled-background-color-active-tertiary)",
-    accent: "active:bg-(--filled-background-color-active-accent)",
-    success: "active:bg-(--filled-background-color-active-success)",
-    danger: "active:bg-(--filled-background-color-active-danger)",
-    warning: "active:bg-(--filled-background-color-active-warning)",
-    info: "active:bg-(--filled-background-color-active-info)",
+    default: "active:bg-(--color-bg-filled-active-default)",
+    primary: "active:bg-(--color-bg-filled-active-primary)",
+    secondary: "active:bg-(--color-bg-filled-active-secondary)",
+    tertiary: "active:bg-(--color-bg-filled-active-tertiary)",
+    accent: "active:bg-(--color-bg-filled-active-accent)",
+    success: "active:bg-(--color-bg-filled-active-success)",
+    danger: "active:bg-(--color-bg-filled-active-danger)",
+    warning: "active:bg-(--color-bg-filled-active-warning)",
+    info: "active:bg-(--color-bg-filled-active-info)",
     transparent: "active:bg-transparent",
-    link: "active:bg-(--filled-background-color-active-link)",
+    link: "active:bg-(--color-bg-filled-active-link)",
 };
 const backgroundAppearanceClasses = {
-    default: "bg-(--background-color-default)",
-    primary: "bg-(--background-color-primary)",
-    secondary: "bg-(--background-color-secondary)",
-    tertiary: "bg-(--background-color-tertiary)",
-    accent: "bg-(--background-color-accent)",
-    success: "bg-(--background-color-success)",
-    danger: "bg-(--background-color-danger)",
-    warning: "bg-(--background-color-warning)",
-    info: "bg-(--background-color-info)",
+    default: "bg-(--color-bg-default)",
+    primary: "bg-(--color-bg-primary)",
+    secondary: "bg-(--color-bg-secondary)",
+    tertiary: "bg-(--color-bg-tertiary)",
+    accent: "bg-(--color-bg-accent)",
+    success: "bg-(--color-bg-success)",
+    danger: "bg-(--color-bg-danger)",
+    warning: "bg-(--color-bg-warning)",
+    info: "bg-(--color-bg-info)",
     transparent: "bg-transparent",
-    link: "bg-(--background-color-link)",
+    link: "bg-(--color-bg-link)",
 };
 const hoverBackgroundAppearanceClasses = {
-    default: "hover:bg-(--background-color-hover-default)",
-    primary: "hover:bg-(--background-color-hover-primary)",
-    secondary: "hover:bg-(--background-color-hover-secondary)",
-    tertiary: "hover:bg-(--background-color-hover-tertiary)",
-    accent: "hover:bg-(--background-color-hover-accent)",
-    success: "hover:bg-(--background-color-hover-success)",
-    danger: "hover:bg-(--background-color-hover-danger)",
-    warning: "hover:bg-(--background-color-hover-warning)",
-    info: "hover:bg-(--background-color-hover-info)",
+    default: "hover:bg-(--color-bg-hover-default)",
+    primary: "hover:bg-(--color-bg-hover-primary)",
+    secondary: "hover:bg-(--color-bg-hover-secondary)",
+    tertiary: "hover:bg-(--color-bg-hover-tertiary)",
+    accent: "hover:bg-(--color-bg-hover-accent)",
+    success: "hover:bg-(--color-bg-hover-success)",
+    danger: "hover:bg-(--color-bg-hover-danger)",
+    warning: "hover:bg-(--color-bg-hover-warning)",
+    info: "hover:bg-(--color-bg-hover-info)",
     transparent: "hover:bg-transparent",
-    link: "hover:bg-(--background-color-hover-link)",
+    link: "hover:bg-(--color-bg-hover-link)",
 };
 const activeBackgroundAppearanceClasses = {
-    default: "active:bg-(--background-color-active-default)",
-    primary: "active:bg-(--background-color-active-primary)",
-    secondary: "active:bg-(--background-color-active-secondary)",
-    tertiary: "active:bg-(--background-color-active-tertiary)",
-    accent: "active:bg-(--background-color-active-accent)",
-    success: "active:bg-(--background-color-active-success)",
-    danger: "active:bg-(--background-color-active-danger)",
-    warning: "active:bg-(--background-color-active-warning)",
-    info: "active:bg-(--background-color-active-info)",
+    default: "active:bg-(--color-bg-active-default)",
+    primary: "active:bg-(--color-bg-active-primary)",
+    secondary: "active:bg-(--color-bg-active-secondary)",
+    tertiary: "active:bg-(--color-bg-active-tertiary)",
+    accent: "active:bg-(--color-bg-active-accent)",
+    success: "active:bg-(--color-bg-active-success)",
+    danger: "active:bg-(--color-bg-active-danger)",
+    warning: "active:bg-(--color-bg-active-warning)",
+    info: "active:bg-(--color-bg-active-info)",
     transparent: "active:bg-transparent",
-    link: "active:bg-(--background-color-active-link)",
+    link: "active:bg-(--color-bg-active-link)",
 };
 const layoutBackgroundAppearanceClasses = {
-    default: "bg-(--layout-background-default)",
-    primary: "bg-(--layout-background-primary)",
-    secondary: "bg-(--layout-background-secondary)",
-    tertiary: "bg-(--layout-background-tertiary)",
-    accent: "bg-(--layout-background-accent)",
-    success: "bg-(--layout-background-success)",
-    danger: "bg-(--layout-background-danger)",
-    warning: "bg-(--layout-background-warning)",
-    info: "bg-(--layout-background-info)",
+    default: "bg-(--color-bg-layout-default)",
+    primary: "bg-(--color-bg-layout-primary)",
+    secondary: "bg-(--color-bg-layout-secondary)",
+    tertiary: "bg-(--color-bg-layout-tertiary)",
+    accent: "bg-(--color-bg-layout-accent)",
+    success: "bg-(--color-bg-layout-success)",
+    danger: "bg-(--color-bg-layout-danger)",
+    warning: "bg-(--color-bg-layout-warning)",
+    info: "bg-(--color-bg-layout-info)",
     transparent: "bg-transparent",
-    link: "bg-(--layout-background-link)",
+    link: "bg-(--color-bg-layout-link)",
 };
 const layoutFilledBackgroundAppearanceClasses = {
-    default: "bg-(--layout-filled-background-color-default)",
-    primary: "bg-(--layout-filled-background-color-primary)",
-    secondary: "bg-(--layout-filled-background-color-secondary)",
-    tertiary: "bg-(--layout-filled-background-color-tertiary)",
-    accent: "bg-(--layout-filled-background-color-accent)",
-    success: "bg-(--layout-filled-background-color-success)",
-    danger: "bg-(--layout-filled-background-color-danger)",
-    warning: "bg-(--layout-filled-background-color-warning)",
-    info: "bg-(--layout-filled-background-color-info)",
+    default: "bg-(--color-bg-filled-layout-default)",
+    primary: "bg-(--color-bg-filled-layout-primary)",
+    secondary: "bg-(--color-bg-filled-layout-secondary)",
+    tertiary: "bg-(--color-bg-filled-layout-tertiary)",
+    accent: "bg-(--color-bg-filled-layout-accent)",
+    success: "bg-(--color-bg-filled-layout-success)",
+    danger: "bg-(--color-bg-filled-layout-danger)",
+    warning: "bg-(--color-bg-filled-layout-warning)",
+    info: "bg-(--color-bg-filled-layout-info)",
     transparent: "bg-transparent",
-    link: "bg-(--layout-filled-background-color-link)",
+    link: "bg-(--color-bg-filled-layout-link)",
 };
 const bgBorderAppearanceClasses = {
-    default: "bg-(--border-color-default)",
-    primary: "bg-(--border-color-primary)",
-    secondary: "bg-(--border-color-secondary)",
-    tertiary: "bg-(--border-color-tertiary)",
-    accent: "bg-(--border-color-accent)",
-    success: "bg-(--border-color-success)",
-    danger: "bg-(--border-color-danger)",
-    warning: "bg-(--border-color-warning)",
-    info: "bg-(--border-color-info)",
-    link: "bg-(--border-color-link)",
+    default: "bg-(--color-border-default)",
+    primary: "bg-(--color-border-primary)",
+    secondary: "bg-(--color-border-secondary)",
+    tertiary: "bg-(--color-border-tertiary)",
+    accent: "bg-(--color-border-accent)",
+    success: "bg-(--color-border-success)",
+    danger: "bg-(--color-border-danger)",
+    warning: "bg-(--color-border-warning)",
+    info: "bg-(--color-border-info)",
+    link: "bg-(--color-border-link)",
     transparent: "bg-transparent",
 };
 const borderAppearanceClasses = {
-    default: "border-(--border-color-default)",
-    primary: "border-(--border-color-primary)",
-    secondary: "border-(--border-color-secondary)",
-    tertiary: "border-(--border-color-tertiary)",
-    accent: "border-(--border-color-accent)",
-    success: "border-(--border-color-success)",
-    danger: "border-(--border-color-danger)",
-    warning: "border-(--border-color-warning)",
-    info: "border-(--border-color-info)",
-    link: "border-(--border-color-link)",
+    default: "border-(--color-border-default)",
+    primary: "border-(--color-border-primary)",
+    secondary: "border-(--color-border-secondary)",
+    tertiary: "border-(--color-border-tertiary)",
+    accent: "border-(--color-border-accent)",
+    success: "border-(--color-border-success)",
+    danger: "border-(--color-border-danger)",
+    warning: "border-(--color-border-warning)",
+    info: "border-(--color-border-info)",
+    link: "border-(--color-border-link)",
     transparent: "border-transparent",
 };
 const filledBorderAppearanceClasses = {
-    default: "border-(--filled-border-color-default)",
-    primary: "border-(--filled-border-color-primary)",
-    secondary: "border-(--filled-border-color-secondary)",
-    tertiary: "border-(--filled-border-color-tertiary)",
-    accent: "border-(--filled-border-color-accent)",
-    success: "border-(--filled-border-color-success)",
-    danger: "border-(--filled-border-color-danger)",
-    warning: "border-(--filled-border-color-warning)",
-    info: "border-(--filled-border-color-info)",
-    link: "border-(--filled-border-color-link)",
+    default: "border-(--color-border-filled-default)",
+    primary: "border-(--color-border-filled-primary)",
+    secondary: "border-(--color-border-filled-secondary)",
+    tertiary: "border-(--color-border-filled-tertiary)",
+    accent: "border-(--color-border-filled-accent)",
+    success: "border-(--color-border-filled-success)",
+    danger: "border-(--color-border-filled-danger)",
+    warning: "border-(--color-border-filled-warning)",
+    info: "border-(--color-border-filled-info)",
+    link: "border-(--color-border-filled-link)",
     transparent: "border-transparent",
 };
 const ringAppearanceClasses = {
-    default: "ring-(--border-color-default)",
-    primary: "ring-(--border-color-primary)",
-    secondary: "ring-(--border-color-secondary)",
-    tertiary: "ring-(--border-color-tertiary)",
-    accent: "ring-(--border-color-accent)",
-    success: "ring-(--border-color-success)",
-    danger: "ring-(--border-color-danger)",
-    warning: "ring-(--border-color-warning)",
-    info: "ring-(--border-color-info)",
-    link: "ring-(--border-color-link)",
+    default: "ring-(--color-border-default)",
+    primary: "ring-(--color-border-primary)",
+    secondary: "ring-(--color-border-secondary)",
+    tertiary: "ring-(--color-border-tertiary)",
+    accent: "ring-(--color-border-accent)",
+    success: "ring-(--color-border-success)",
+    danger: "ring-(--color-border-danger)",
+    warning: "ring-(--color-border-warning)",
+    info: "ring-(--color-border-info)",
+    link: "ring-(--color-border-link)",
     transparent: "ring-transparent",
 };
 const filledRingAppearanceClasses = {
-    default: "ring-(--filled-border-color-default)",
-    primary: "ring-(--filled-border-color-primary)",
-    secondary: "ring-(--filled-border-color-secondary)",
-    tertiary: "ring-(--filled-border-color-tertiary)",
-    accent: "ring-(--filled-border-color-accent)",
-    success: "ring-(--filled-border-color-success)",
-    danger: "ring-(--filled-border-color-danger)",
-    warning: "ring-(--filled-border-color-warning)",
-    info: "ring-(--filled-border-color-info)",
-    link: "ring-(--filled-border-color-link)",
+    default: "ring-(--color-border-filled-default)",
+    primary: "ring-(--color-border-filled-primary)",
+    secondary: "ring-(--color-border-filled-secondary)",
+    tertiary: "ring-(--color-border-filled-tertiary)",
+    accent: "ring-(--color-border-filled-accent)",
+    success: "ring-(--color-border-filled-success)",
+    danger: "ring-(--color-border-filled-danger)",
+    warning: "ring-(--color-border-filled-warning)",
+    info: "ring-(--color-border-filled-info)",
+    link: "ring-(--color-border-filled-link)",
     transparent: "ring-transparent",
 };
+const focusVisibleOutlineAppearanceClasses = {
+    default: "focus-visible:outline-(--color-border-default)",
+    primary: "focus-visible:outline-(--color-border-primary)",
+    secondary: "focus-visible:outline-(--color-border-secondary)",
+    tertiary: "focus-visible:outline-(--color-border-tertiary)",
+    accent: "focus-visible:outline-(--color-border-accent)",
+    success: "focus-visible:outline-(--color-border-success)",
+    danger: "focus-visible:outline-(--color-border-danger)",
+    warning: "focus-visible:outline-(--color-border-warning)",
+    info: "focus-visible:outline-(--color-border-info)",
+    link: "focus-visible:outline-(--color-border-link)",
+    transparent: "focus-visible:outline-transparent",
+};
+const filledFocusVisibleOutlineAppearanceClasses = {
+    default: "focus-visible:outline-(--color-border-filled-default)",
+    primary: "focus-visible:outline-(--color-border-filled-primary)",
+    secondary: "focus-visible:outline-(--color-border-filled-secondary)",
+    tertiary: "focus-visible:outline-(--color-border-filled-tertiary)",
+    accent: "focus-visible:outline-(--color-border-filled-accent)",
+    success: "focus-visible:outline-(--color-border-filled-success)",
+    danger: "focus-visible:outline-(--color-border-filled-danger)",
+    warning: "focus-visible:outline-(--color-border-filled-warning)",
+    info: "focus-visible:outline-(--color-border-filled-info)",
+    link: "focus-visible:outline-(--color-border-filled-link)",
+    transparent: "focus-visible:outline-transparent",
+};
 const accentColorAppearanceClasses = {
-    default: "accent-(--background-color-default)",
-    primary: "accent-(--background-color-primary)",
-    secondary: "accent-(--background-color-secondary)",
-    tertiary: "accent-(--background-color-tertiary)",
-    accent: "accent-(--background-color-accent)",
-    success: "accent-(--background-color-success)",
-    danger: "accent-(--background-color-danger)",
-    warning: "accent-(--background-color-warning)",
-    info: "accent-(--background-color-info)",
+    default: "accent-(--color-bg-default)",
+    primary: "accent-(--color-bg-primary)",
+    secondary: "accent-(--color-bg-secondary)",
+    tertiary: "accent-(--color-bg-tertiary)",
+    accent: "accent-(--color-bg-accent)",
+    success: "accent-(--color-bg-success)",
+    danger: "accent-(--color-bg-danger)",
+    warning: "accent-(--color-bg-warning)",
+    info: "accent-(--color-bg-info)",
     transparent: "accent-transparent",
-    link: "accent-(--background-color-link)",
+    link: "accent-(--color-bg-link)",
 };
 const filledAccentColorAppearanceClasses = {
-    default: "accent-(--filled-background-color-default)",
-    primary: "accent-(--filled-background-color-primary)",
-    secondary: "accent-(--filled-background-color-secondary)",
-    tertiary: "accent-(--filled-background-color-tertiary)",
-    accent: "accent-(--filled-background-color-accent)",
-    success: "accent-(--filled-background-color-success)",
-    danger: "accent-(--filled-background-color-danger)",
-    warning: "accent-(--filled-background-color-warning)",
-    info: "accent-(--filled-background-color-info)",
+    default: "accent-(--color-bg-filled-default)",
+    primary: "accent-(--color-bg-filled-primary)",
+    secondary: "accent-(--color-bg-filled-secondary)",
+    tertiary: "accent-(--color-bg-filled-tertiary)",
+    accent: "accent-(--color-bg-filled-accent)",
+    success: "accent-(--color-bg-filled-success)",
+    danger: "accent-(--color-bg-filled-danger)",
+    warning: "accent-(--color-bg-filled-warning)",
+    info: "accent-(--color-bg-filled-info)",
     transparent: "accent-transparent",
-    link: "accent-(--filled-background-color-link)",
+    link: "accent-(--color-bg-filled-link)",
 };
 const checkedBackgroundAppearanceClasses = {
-    default: "checked:bg-(--background-color-default)",
-    primary: "checked:bg-(--background-color-primary)",
-    secondary: "checked:bg-(--background-color-secondary)",
-    tertiary: "checked:bg-(--background-color-tertiary)",
-    accent: "checked:bg-(--background-color-accent)",
-    success: "checked:bg-(--background-color-success)",
-    danger: "checked:bg-(--background-color-danger)",
-    warning: "checked:bg-(--background-color-warning)",
-    info: "checked:bg-(--background-color-info)",
+    default: "checked:bg-(--color-bg-default)",
+    primary: "checked:bg-(--color-bg-primary)",
+    secondary: "checked:bg-(--color-bg-secondary)",
+    tertiary: "checked:bg-(--color-bg-tertiary)",
+    accent: "checked:bg-(--color-bg-accent)",
+    success: "checked:bg-(--color-bg-success)",
+    danger: "checked:bg-(--color-bg-danger)",
+    warning: "checked:bg-(--color-bg-warning)",
+    info: "checked:bg-(--color-bg-info)",
     transparent: "checked:bg-transparent",
-    link: "checked:bg-(--background-color-link)",
+    link: "checked:bg-(--color-bg-link)",
 };
 const filledCheckedBackgroundAppearanceClasses = {
-    default: "checked:bg-(--filled-background-color-default)",
-    primary: "checked:bg-(--filled-background-color-primary)",
-    secondary: "checked:bg-(--filled-background-color-secondary)",
-    tertiary: "checked:bg-(--filled-background-color-tertiary)",
-    accent: "checked:bg-(--filled-background-color-accent)",
-    success: "checked:bg-(--filled-background-color-success)",
-    danger: "checked:bg-(--filled-background-color-danger)",
-    warning: "checked:bg-(--filled-background-color-warning)",
-    info: "checked:bg-(--filled-background-color-info)",
+    default: "checked:bg-(--color-bg-filled-default)",
+    primary: "checked:bg-(--color-bg-filled-primary)",
+    secondary: "checked:bg-(--color-bg-filled-secondary)",
+    tertiary: "checked:bg-(--color-bg-filled-tertiary)",
+    accent: "checked:bg-(--color-bg-filled-accent)",
+    success: "checked:bg-(--color-bg-filled-success)",
+    danger: "checked:bg-(--color-bg-filled-danger)",
+    warning: "checked:bg-(--color-bg-filled-warning)",
+    info: "checked:bg-(--color-bg-filled-info)",
     transparent: "checked:bg-transparent",
-    link: "checked:bg-(--filled-background-color-link)",
+    link: "checked:bg-(--color-bg-filled-link)",
 };
 
 class ShadowAppearanceTheme extends BaseTheme {
     constructor(initial) {
         super();
         ComponentKeys.appearance.forEach((key) => {
-            const initialAppearance = initial === null || initial === void 0 ? void 0 : initial[key];
-            this[key] = initialAppearance === undefined ? ShadowAppearanceTheme.defaultShadow : null;
+            this[key] = initial;
         });
     }
     getClasses(extractedKeys) {
@@ -3625,37 +4098,30 @@ class ShadowAppearanceTheme extends BaseTheme {
         const appearance = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance) !== null && _a !== void 0 ? _a : 'default';
         const size = (_b = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _b !== void 0 ? _b : 'md';
         const shadow = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.shadow;
-        if (shadow === undefined || shadow === 'noShadow') {
-            return [];
-        }
-        return ComponentKeys.mode.map(mode => { var _a, _b, _c; return (_c = (_b = (_a = this[appearance]) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[mode]) !== null && _c !== void 0 ? _c : ""; });
+        return shadow === undefined || shadow === 'noShadow'
+            ? []
+            : ModeKeys.mode.map(mode => { var _a, _b, _c; return (_c = (_b = (_a = this[appearance]) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[mode]) !== null && _c !== void 0 ? _c : ""; });
     }
-    static createTheme(src = {}) {
-        return new ShadowAppearanceTheme(src);
+    static createUITheme() {
+        return new ShadowAppearanceTheme(ShadowAppearanceTheme.defaultUIShadow);
     }
-    static createLayoutTheme(src = {}) {
-        const theme = new ShadowAppearanceTheme(src);
-        ComponentKeys.appearance.forEach((key) => {
-            if (theme[key] === ShadowAppearanceTheme.defaultShadow) {
-                theme[key] = ShadowAppearanceTheme.layoutShadow;
-            }
-        });
-        return theme;
+    static createLayoutTheme() {
+        return new ShadowAppearanceTheme(ShadowAppearanceTheme.defaultLayoutShadow);
     }
 }
-ShadowAppearanceTheme.defaultShadow = {
-    xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "" },
-    sm: { base: "shadow-xs", hover: "hover:shadow-sm", active: "" },
-    md: { base: "shadow-sm", hover: "hover:shadow-md", active: "" },
-    lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "" },
-    xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "" }
+ShadowAppearanceTheme.defaultUIShadow = {
+    xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "", focus: "", focusVisible: "" },
+    sm: { base: "shadow-xs", hover: "hover:shadow-sm", active: "", focus: "", focusVisible: "" },
+    md: { base: "shadow-sm", hover: "hover:shadow-md", active: "", focus: "", focusVisible: "" },
+    lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "", focus: "", focusVisible: "" },
+    xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "", focus: "", focusVisible: "" }
 };
-ShadowAppearanceTheme.layoutShadow = {
-    xs: { base: "shadow-2xs", hover: "", active: "" },
-    sm: { base: "shadow-xs", hover: "", active: "" },
-    md: { base: "shadow-sm", hover: "", active: "" },
-    lg: { base: "shadow-md", hover: "", active: "" },
-    xl: { base: "shadow-lg", hover: "", active: "" }
+ShadowAppearanceTheme.defaultLayoutShadow = {
+    xs: { base: "shadow-2xs", hover: "", active: "", focus: "", focusVisible: "" },
+    sm: { base: "shadow-xs", hover: "", active: "", focus: "", focusVisible: "" },
+    md: { base: "shadow-sm", hover: "", active: "", focus: "", focusVisible: "" },
+    lg: { base: "shadow-md", hover: "", active: "", focus: "", focusVisible: "" },
+    xl: { base: "shadow-lg", hover: "", active: "", focus: "", focusVisible: "" }
 };
 
 class GenericVariantTheme extends BaseTheme {
@@ -3668,63 +4134,107 @@ class GenericVariantTheme extends BaseTheme {
     getClasses(extractedKeys) {
         var _a;
         const variantKey = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.variant) !== null && _a !== void 0 ? _a : 'outline';
-        const activeTheme = this[variantKey];
-        if (!activeTheme) {
-            return [];
-        }
-        return activeTheme.getClasses(extractedKeys);
+        return this[variantKey].getClasses(extractedKeys);
     }
-    // used for button, bages, chips, etc
+    // used for button, badges, chips, etc - UI elements where transparent affects background
     static createUIElementTextTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: textAppearanceClasses
-            }, 'text'),
+            }, 'text', true), // Layout/UI components: text themes should ignore transparent
+            filled: AppearanceTheme.createTheme({
+                base: filledTextAppearanceClasses
+            }, 'text', true)
+        });
+    }
+    // used for typography components where transparent affects text color
+    static createTypographyTextTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: textAppearanceClasses
+            }, 'text', false), // Typography components: text themes should respect transparent
+            filled: AppearanceTheme.createTheme({
+                base: filledTextAppearanceClasses
+            }, 'text', false)
+        });
+    }
+    // used for typography components where transparent should NOT affect background
+    static createTypographyBgTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: backgroundAppearanceClasses,
+                hover: hoverBackgroundAppearanceClasses,
+                active: activeBackgroundAppearanceClasses
+            }, 'bg', true), // Typography components: bg themes should ignore transparent
+            filled: AppearanceTheme.createTheme({
+                base: filledBackgroundAppearanceClasses,
+                hover: filledHoverBackgroundAppearanceClasses,
+                active: filledActiveBackgroundAppearanceClasses
+            }, 'bg', true)
+        });
+    }
+    // used for typography components where transparent should NOT affect border
+    static createTypographyBorderTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: borderAppearanceClasses
+            }, 'border', true), // Typography components: border themes should ignore transparent
+            filled: AppearanceTheme.createTheme({
+                base: filledBorderAppearanceClasses
+            }, 'border', true)
+        });
+    }
+    // used for layout/UI components where transparent should NOT affect text
+    static createUIElementTextThemeIgnoreTransparent() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: textAppearanceClasses
+            }, 'text', true), // Layout/UI components: text themes should ignore transparent
             filled: AppearanceTheme.createTheme({
                 base: filledTextAppearanceClasses
-            }, 'text')
+            }, 'text', true)
         });
     }
     static createUIElementShadowTheme() {
         return new GenericVariantTheme({
-            outline: ShadowAppearanceTheme.createTheme({}),
-            filled: ShadowAppearanceTheme.createTheme({})
+            outline: ShadowAppearanceTheme.createUITheme(),
+            filled: ShadowAppearanceTheme.createUITheme()
         });
     }
     static createLayoutShadowTheme() {
         return new GenericVariantTheme({
-            outline: ShadowAppearanceTheme.createLayoutTheme({}),
-            filled: ShadowAppearanceTheme.createLayoutTheme({})
+            outline: ShadowAppearanceTheme.createLayoutTheme(),
+            filled: ShadowAppearanceTheme.createLayoutTheme()
         });
     }
     static createUIElementBorderTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: borderAppearanceClasses
-            }, 'border'),
+            }, 'border', true), // Layout/UI components: border themes should ignore transparent
             filled: AppearanceTheme.createTheme({
                 base: filledBorderAppearanceClasses
-            }, 'border')
+            }, 'border', true)
         });
     }
     static createUIElementRingTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: ringAppearanceClasses
-            }, 'ring'),
+            }, 'ring', true), // Layout/UI components: ring themes should ignore transparent
             filled: AppearanceTheme.createTheme({
                 base: filledRingAppearanceClasses
-            }, 'ring')
+            }, 'ring', true)
         });
     }
     static createCheckboxBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
-            }, 'bg'),
+            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
             filled: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
-            }, 'bg')
+            }, 'bg', false)
         });
     }
     static createBgAppearanceTheme() {
@@ -3733,52 +4243,62 @@ class GenericVariantTheme extends BaseTheme {
                 base: backgroundAppearanceClasses,
                 hover: hoverBackgroundAppearanceClasses,
                 active: activeBackgroundAppearanceClasses
-            }, 'bg'),
+            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
             filled: AppearanceTheme.createTheme({
                 base: filledBackgroundAppearanceClasses,
                 hover: filledHoverBackgroundAppearanceClasses,
                 active: filledActiveBackgroundAppearanceClasses
-            }, 'bg')
+            }, 'bg', false)
         });
     }
     static createSimpleUIElementBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
-            }, 'bg'),
+            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
             filled: AppearanceTheme.createTheme({
                 base: filledBackgroundAppearanceClasses,
-            }, 'bg')
+            }, 'bg', false)
         });
     }
     static createAccentColorAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: accentColorAppearanceClasses
-            }, 'accent'),
+            }, 'accent', true), // Layout/UI components: accent themes should ignore transparent
             filled: AppearanceTheme.createTheme({
                 base: filledAccentColorAppearanceClasses
-            }, 'accent')
+            }, 'accent', true)
         });
     }
     static createCheckedAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: checkedBackgroundAppearanceClasses
-            }, 'bg'),
+            }, 'bg', false), // Layout/UI components: bg themes should respect transparent
             filled: AppearanceTheme.createTheme({
                 base: filledCheckedBackgroundAppearanceClasses
-            }, 'bg')
+            }, 'bg', false)
         });
     }
     static createLayoutBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: layoutBackgroundAppearanceClasses
-            }, 'bg'),
+            }, 'bg', false), // Layout components: bg themes should respect transparent
             filled: AppearanceTheme.createTheme({
                 base: layoutFilledBackgroundAppearanceClasses
-            }, 'bg')
+            }, 'bg', false)
+        });
+    }
+    static createUIElementFocusVisibleTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                focusVisible: focusVisibleOutlineAppearanceClasses
+            }, 'focusVisible', true), // UI components: focusVisible themes should ignore transparent
+            filled: AppearanceTheme.createTheme({
+                focusVisible: filledFocusVisibleOutlineAppearanceClasses
+            }, 'focusVisible', true)
         });
     }
 }
@@ -3833,6 +4353,7 @@ const themeDefaults = {
         padding: true,
         ring: true,
         shadow: true,
+        focusVisible: true,
     },
     card: {
         md: true,
@@ -3939,6 +4460,16 @@ const themeDefaults = {
         grid: true,
         gap: true,
     },
+    grid5: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    grid6: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
     divider: {
         md: true,
         default: true,
@@ -4011,6 +4542,7 @@ const themeDefaults = {
             noRing: true,
             noShadow: true,
             filled: true,
+            focusVisible: true,
         },
         check: {
             default: true,
@@ -4025,6 +4557,18 @@ const themeDefaults = {
             filled: true,
         },
     },
+    input: {
+        md: true,
+        default: true,
+        rounded: true,
+        outline: true,
+        sans: true,
+        normal: true,
+        padding: true,
+        ring: true,
+        noShadow: true,
+        focusVisible: true,
+    },
 };
 
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
@@ -4038,20 +4582,22 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
     },
     appearance: {
         background: GenericVariantTheme.createBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
         shadow: GenericVariantTheme.createUIElementShadowTheme()
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
         radius: RadiusTheme.createUITheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-    typography: defaultTypographyTheme,
+    typography: defaultTypographyThemes,
 }, themeDefaults.button, BUTTON_CATEGORIES, (props) => {
     // Determine tag based on href prop
     return props.href ? "a" : "button";
@@ -4066,20 +4612,22 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
         radius: RadiusTheme.createUITheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-    typography: defaultTypographyTheme,
+    typography: defaultTypographyThemes,
 }, themeDefaults.badge, BADGE_CATEGORIES, (props) => {
     return props.href ? "a" : "span";
 });
@@ -4093,20 +4641,22 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         radius: RadiusTheme.createUITheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-    typography: defaultTypographyTheme,
+    typography: defaultTypographyThemes,
 }, themeDefaults.chip, CHIP_CATEGORIES, (props) => {
     return props.href ? "a" : "span";
 });
@@ -4120,20 +4670,22 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         radius: RadiusTheme.createUITheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-    typography: defaultTypographyTheme,
+    typography: defaultTypographyThemes,
 }, themeDefaults.code, CODE_CATEGORIES);
 
 const isObject = (item) => {
@@ -4249,10 +4801,10 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
             text: new SizeTheme(textSizeMap),
         },
         appearance: {
-            text: GenericVariantTheme.createUIElementTextTheme(),
+            text: GenericVariantTheme.createTypographyTextTheme(),
         },
-        typography: defaultTypographyTheme,
-        layout: defaultLayoutTheme,
+        typography: defaultTypographyThemes,
+        layout: defaultLayoutsThemes,
     }, defaults, TYPOGRAPHY_CATEGORIES, (props) => {
         // Determine tag based on href prop
         return props.href ? "a" : tag;
@@ -4284,10 +4836,10 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
         text: new SizeTheme(textSizeClasses, false),
     },
     appearance: {
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createTypographyTextTheme(),
     },
-    typography: defaultTypographyTheme,
-    layout: defaultLayoutTheme,
+    typography: defaultTypographyThemes,
+    layout: defaultLayoutsThemes,
 }, themeDefaults.link, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listItemTheme = new ComponentTheme("li", "", {
@@ -4295,9 +4847,9 @@ const listItemTheme = new ComponentTheme("li", "", {
         text: new SizeTheme(textSizeClasses, false),
     },
     appearance: {
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createTypographyTextTheme(),
     },
-    typography: defaultTypographyTheme,
+    typography: defaultTypographyThemes,
 }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listTheme = new ComponentTheme("ul", "list-inside", {
@@ -4306,10 +4858,10 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
         paddingLeft: new PlTheme(),
     },
     appearance: {
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createTypographyTextTheme(),
     },
-    typography: defaultTypographyTheme,
-    layout: defaultLayoutTheme,
+    typography: defaultTypographyThemes,
+    layout: defaultLayoutsThemes,
     listStyle: new ListStyleTheme(),
 }, themeDefaults.list, LIST_CATEGORIES, (props) => {
     // Determine tag based on list style from props
@@ -4336,23 +4888,29 @@ class BreakpointTheme extends BaseTheme {
 const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
         px: new PxTheme({
-            xs: "px-2",
-            sm: "px-3 max-lg:px-2",
-            md: "px-4 max-lg:px-3",
-            lg: "px-5 max-lg:px-4 max-md:px-3",
-            xl: "px-6 max-lg:px-5 max-md:px-4"
+            xs: "px-4",
+            sm: "px-5 max-lg:px-4",
+            md: "px-6 max-lg:px-5",
+            lg: "px-7 max-lg:px-6 max-md:px-5",
+            xl: "px-8 max-lg:px-7 max-md:px-6"
         }),
         py: new PyTheme({
-            xs: "py-2",
-            sm: "py-3 max-lg:py-2",
-            md: "py-4 max-lg:py-3",
-            lg: "py-5 max-lg:py-4 max-md:py-3",
-            xl: "py-6 max-lg:py-5 max-md:py-4"
+            xs: "py-4",
+            sm: "py-5 max-lg:py-4",
+            md: "py-6 max-lg:py-5",
+            lg: "py-7 max-lg:py-6 max-md:py-5",
+            xl: "py-8 max-lg:py-7 max-md:py-6"
+        }),
+        gap: new GapTheme({
+            xs: "gap-2",
+            sm: "gap-3 max-lg:gap-2",
+            md: "gap-4 max-lg:gap-3",
+            lg: "gap-5 max-lg:gap-4 max-md:gap-3",
+            xl: "gap-6 max-lg:gap-5 max-md:gap-4"
         }),
-        gap: new GapTheme(),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
         radius: RadiusTheme.createLayoutTheme(),
@@ -4363,14 +4921,12 @@ const defaultCardTheme = new ComponentTheme("div", "", {
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
     },
-    typography: defaultTypographyTheme,
-}, themeDefaults.card, CARD_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
+    typography: defaultTypographyThemes,
+}, themeDefaults.card, CARD_CATEGORIES);
 
 const defaultRowTheme = new ComponentTheme("div", "", {
     size: {
@@ -4378,7 +4934,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         breakpoint: new BreakpointTheme(),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         border: new BorderTheme(),
@@ -4387,15 +4943,12 @@ const defaultRowTheme = new ComponentTheme("div", "", {
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.row, ROW_CATEGORIES, (props) => {
-    // Determine tag based on href prop
-    return props.href ? "a" : "div";
-});
+}, themeDefaults.row, ROW_CATEGORIES);
 
 const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
     size: {
@@ -4406,7 +4959,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
             base: bgBorderAppearanceClasses,
         }, 'bg'),
     },
-    layout: defaultLayoutTheme,
+    layout: defaultLayoutsThemes,
 }, themeDefaults.divider, DIVIDER_CATEGORIES);
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
@@ -4421,7 +4974,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
         wrap: new WrapTheme(),
@@ -4430,21 +4983,19 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.container, CONTAINER_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
+}, themeDefaults.container, CONTAINER_CATEGORIES);
 
 const defaultColTheme = new ComponentTheme("div", "", {
     size: {
         gap: new GapTheme(),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         border: new BorderTheme(),
@@ -4453,14 +5004,12 @@ const defaultColTheme = new ComponentTheme("div", "", {
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.col, COL_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
+}, themeDefaults.col, COL_CATEGORIES);
 
 const defaultStackTheme = new ComponentTheme("div", "", {
     size: {
@@ -4470,7 +5019,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         breakpoint: new BreakpointTheme(),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         border: new BorderTheme(),
@@ -4479,14 +5028,12 @@ const defaultStackTheme = new ComponentTheme("div", "", {
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.stack, STACK_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
+}, themeDefaults.stack, STACK_CATEGORIES);
 
 const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
     size: {
@@ -4509,22 +5056,20 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         border: new BorderTheme(),
         ring: new RingTheme(),
         radius: RadiusTheme.createLayoutTheme(),
     },
-}, themeDefaults.section, SECTION_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
+}, themeDefaults.section, SECTION_CATEGORIES);
 
 const gridSubThemes = {
     size: {
@@ -4538,23 +5083,19 @@ const gridSubThemes = {
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
 };
-const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
-const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
-const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES, (props) => {
-    return props.href ? "a" : "div";
-});
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES);
+const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES);
+const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES);
+const defaultGrid5Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5", gridSubThemes, themeDefaults.grid5, GRID_CATEGORIES);
+const defaultGrid6Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6", gridSubThemes, themeDefaults.grid6, GRID_CATEGORIES);
 
 var _a, _b, _c;
 const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
@@ -4569,15 +5110,16 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
         text: new SizeTheme(textSizeClasses)
     },
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
         radius: RadiusTheme.createUITheme({
-            xs: 'rounded-(--ui-border-radius-xs)',
-            sm: 'rounded-(--ui-border-radius-xs)',
-            md: 'rounded-(--ui-border-radius-sm)',
-            lg: 'rounded-(--ui-border-radius-sm)',
-            xl: 'rounded-(--ui-border-radius-md)'
+            xs: 'rounded-(--ui-br-xs)',
+            sm: 'rounded-(--ui-br-xs)',
+            md: 'rounded-(--ui-br-sm)',
+            lg: 'rounded-(--ui-br-sm)',
+            xl: 'rounded-(--ui-br-md)'
         }),
     },
     appearance: {
@@ -4585,6 +5127,7 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
         border: GenericVariantTheme.createUIElementBorderTheme(),
         background: GenericVariantTheme.createCheckboxBgAppearanceTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
         check: GenericVariantTheme.createCheckedAppearanceTheme(),
         shadow: GenericVariantTheme.createUIElementShadowTheme(),
     }
@@ -4592,9 +5135,13 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
 const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-start-1 peer-checked:visible", {
     checkElement: () => jsx("svg", { viewBox: "0 0 14 14", fill: "none", children: jsx("path", { d: "M3 8L6 11L11 3.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "currentColor" }) }),
     appearance: {
-        color: GenericVariantTheme.createUIElementTextTheme()
+        color: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme()
+    },
+    layout: {
+        ...defaultLayoutsThemes,
+        focusVisible: new FocusVisibleTheme()
     },
-    layout: defaultLayoutTheme,
 }, ((_b = themeDefaults.checkbox) === null || _b === void 0 ? void 0 : _b.check) || {}, CHECKBOX_CATEGORIES);
 const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
     size: {
@@ -4606,9 +5153,13 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
             xl: 'h-7'
         })
     },
-    layout: defaultLayoutTheme,
+    layout: {
+        ...defaultLayoutsThemes,
+        focusVisible: new FocusVisibleTheme()
+    },
     appearance: {
-        variant: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme()
+        variant: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme()
     }
 }, ((_c = themeDefaults.checkbox) === null || _c === void 0 ? void 0 : _c.wrapper) || {}, CHECKBOX_CATEGORIES);
 
@@ -4618,11 +5169,11 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
         gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
     },
     appearance: {
-        text: GenericVariantTheme.createUIElementTextTheme(),
+        text: GenericVariantTheme.createTypographyTextTheme(),
     },
-    typography: defaultTypographyTheme,
+    typography: defaultTypographyThemes,
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
@@ -4631,18 +5182,48 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
 const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to cover for better image display
 {
     layout: {
-        ...defaultLayoutTheme,
+        ...defaultLayoutsThemes,
         border: new BorderTheme(),
         ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
+        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme()
     }
 }, themeDefaults.img, IMG_CATEGORIES);
 
+const defaultInputTheme = new ComponentTheme("input", "w-full transition-all duration-200", {
+    size: {
+        px: new PxTheme({ xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6', }),
+        py: new PyTheme({ xs: 'py-1', sm: 'py-1.5', md: 'py-2', lg: 'py-2.5', xl: 'py-3' }),
+        gap: new GapTheme({ xs: 'gap-1', sm: 'gap-1.5', md: 'gap-2', lg: 'gap-2.5', xl: 'gap-3' }),
+        text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
+    },
+    appearance: {
+        background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextThemeIgnoreTransparent(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
+        focusVisible: GenericVariantTheme.createUIElementFocusVisibleTheme(),
+        shadow: GenericVariantTheme.createUIElementShadowTheme()
+    },
+    layout: {
+        ...defaultLayoutsThemes,
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        focusVisible: new FocusVisibleTheme(),
+        radius: RadiusTheme.createUITheme(),
+        wrap: new WrapTheme(),
+        flexDirection: new DirectionTheme(),
+    },
+    typography: defaultTypographyThemes,
+}, themeDefaults.input, INPUT_CATEGORIES, () => "input");
+
 const defaultTheme = {
     button: defaultButtonTheme,
     badge: defaultBadgeTheme,
@@ -4658,6 +5239,8 @@ const defaultTheme = {
     grid2: defaultGrid2Theme,
     grid3: defaultGrid3Theme,
     grid4: defaultGrid4Theme,
+    grid5: defaultGrid5Theme,
+    grid6: defaultGrid6Theme,
     pageTitle: pageTitleTheme,
     sectionTitle: sectionTitleTheme,
     title: titleTheme,
@@ -4672,6 +5255,7 @@ const defaultTheme = {
     },
     label: defaultLabelTheme,
     img: defaultImgTheme,
+    input: defaultInputTheme,
 };
 /**
  * Recursively applies defaults to theme objects while preserving structure.
@@ -4847,6 +5431,11 @@ const Img = forwardRef(function Img(props, ref) {
     return (jsx(ThemedComponent, { theme: theme.img, ref: ref, ...props }));
 });
 
+const Input = forwardRef(function Input(props, ref) {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { ref: ref, theme: theme.input, ...props });
+});
+
 const Section = forwardRef(function Section(props, ref) {
     const theme = useTheme();
     return jsx(ThemedComponent, { theme: theme.section, ref: ref, ...props });
@@ -4879,6 +5468,14 @@ const Grid4 = forwardRef(function Grid4(props, ref) {
     const theme = useTheme();
     return jsx(ThemedComponent, { theme: theme.grid4, ref: ref, ...props });
 });
+const Grid5 = forwardRef(function Grid5(props, ref) {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.grid5, ref: ref, ...props });
+});
+const Grid6 = forwardRef(function Grid6(props, ref) {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.grid6, ref: ref, ...props });
+});
 
 const Card = forwardRef(function Card(props, ref) {
     const theme = useTheme();
@@ -4920,5 +5517,5 @@ const List = forwardRef(function List(props, ref) {
     return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
 
-export { APPEARANCE_CATEGORY, BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, themeDefaults, useTheme };
+export { ABSOLUTE, ACCENT, ACTIVE, APPEARANCE_CATEGORY, APPEARANCE_VALUES, BADGE_CATEGORIES, BASE, BLACK, BLOCK, BOLD, BORDER, BORDER_VALUES, BREAKPOINT, BREAKPOINT_VALUES, BUTTON_CATEGORIES, Badge, Button, CAPITALIZE, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COLUMN, COLUMN_REVERSE, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, CONTENTS, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DANGER, DECIMAL, DEFAULT, DISC, DISPLAY_VALUES, DIVIDER_CATEGORIES, Divider, EXTRABOLD, EXTRALIGHT, FILLED, FIXED, FLEX, FLEX_DIRECTION_VALUES, FLEX_NO_WRAP, FLEX_WRAP, FLEX_WRAP_REVERSE, FOCUS, FOCUS_VISIBLE, FOCUS_VISIBLE_OUTLINE, FOCUS_VISIBLE_VALUES, FONT_FAMILY_VALUES, FONT_STYLE_VALUES, FONT_WEIGHT_VALUES, GAP, GAP_VALUES, GRID, GRID_CATEGORIES, Grid2, Grid3, Grid4, Grid5, Grid6, HIDDEN, HIDE_VALUES, HOVER, IMG_CATEGORIES, INFO, INLINE, INLINE_BLOCK, INLINE_FLEX, INLINE_GRID, INPUT_CATEGORIES, INTERACTIVE_CATEGORIES, ITALIC, ITEMS_BASELINE, ITEMS_CENTER, ITEMS_END, ITEMS_START, ITEMS_STRETCH, ITEMS_VALUES, Img, Input, JUSTIFY_AROUND, JUSTIFY_BASELINE, JUSTIFY_BETWEEN, JUSTIFY_CENTER, JUSTIFY_END, JUSTIFY_EVENLY, JUSTIFY_START, JUSTIFY_STRETCH, JUSTIFY_VALUES, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LG, LG_COL, LG_HIDE, LIGHT, LINE_THROUGH, LINK, LIST_CATEGORIES, LIST_STYLE, LIST_STYLE_VALUES, LOWERCASE, Label, Link, List, ListItem, MD, MD_COL, MD_HIDE, MEDIUM, MODE_VALUES, MONO, ModeKeys, NORMAL, NORMAL_CASE, NOT_ITALIC, NO_BORDER, NO_FOCUS_VISIBLE_OUTLINE, NO_GAP, NO_PADDING, NO_RING, NO_SHADOW, NO_UNDERLINE, OUTLINE, OVERFLOW_AUTO, OVERFLOW_CLIP, OVERFLOW_HIDDEN, OVERFLOW_SCROLL, OVERFLOW_VALUES, OVERFLOW_VISIBLE, OVERFLOW_X_AUTO, OVERFLOW_X_CLIP, OVERFLOW_X_HIDDEN, OVERFLOW_X_SCROLL, OVERFLOW_X_VISIBLE, OVERFLOW_Y_AUTO, OVERFLOW_Y_CLIP, OVERFLOW_Y_HIDDEN, OVERFLOW_Y_SCROLL, OVERFLOW_Y_VISIBLE, OVERLINE, PADDING, PADDING_VALUES, PILL, POSITION_VALUES, PRIMARY, PageTitle, RELATIVE, REVERSE, REVERSE_VALUES, RING, RING_VALUES, ROUNDED, ROW, ROW_CATEGORIES, ROW_REVERSE, Row, SANS, SECONDARY, SECTION_CATEGORIES, SEMIBOLD, SERIF, SHADOW, SHADOW_VALUES, SHAPE, SHAPE_VALUES, SHARP, SIZE_VALUES, SM, SM_COL, SM_HIDE, STACK_CATEGORIES, STATIC, STICKY, SUCCESS, Section, SectionTitle, Stack, TABLE, TABLE_CELL, TERTIARY, TEXT_ALIGN_VALUES, TEXT_CENTER, TEXT_DECORATION_VALUES, TEXT_JUSTIFY, TEXT_LEFT, TEXT_RIGHT, TEXT_TRANSFORM_VALUES, THIN, TRANSPARENT, TRANSPARENT_VALUES, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, UNDERLINE, UPPERCASE, VARIANT, VARIANT_VALUES, VISUAL_CORE, VISUAL_DECORATION, VISUAL_DECORATION_LAYOUT, VISUAL_FULL, VISUAL_LAYOUT, WARNING, WRAP_VALUES, XL, XL_COL, XL_HIDE, XS, XS_COL, XS_HIDE, defaultTheme, themeDefaults, useTheme };
 //# sourceMappingURL=index.esm.js.map