@rokkit/themes 1.0.0-next.14 → 1.0.0-next.141

package/dist/base.css

@@ -0,0 +1,4934 @@
+@layer base {
+  :root {
+    --scroll-width: 0.5rem;
+    --tab-size: 2;
+    --color-surface:148,163,184;--color-surface-50:248,250,252;--color-surface-100:241,245,249;--color-surface-200:226,232,240;--color-surface-300:203,213,225;--color-surface-400:148,163,184;--color-surface-500:100,116,139;--color-surface-600:71,85,105;--color-surface-700:51,65,85;--color-surface-800:30,41,59;--color-surface-900:15,23,42;--color-surface-950:2,6,23;--color-primary:251,146,60;--color-primary-50:255,247,237;--color-primary-100:255,237,213;--color-primary-200:254,215,170;--color-primary-300:253,186,116;--color-primary-400:251,146,60;--color-primary-500:249,115,22;--color-primary-600:234,88,12;--color-primary-700:194,65,12;--color-primary-800:154,52,18;--color-primary-900:124,45,18;--color-primary-950:67,20,7;--color-secondary:244,114,182;--color-secondary-50:253,242,248;--color-secondary-100:252,231,243;--color-secondary-200:251,207,232;--color-secondary-300:249,168,212;--color-secondary-400:244,114,182;--color-secondary-500:236,72,153;--color-secondary-600:219,39,119;--color-secondary-700:190,24,93;--color-secondary-800:157,23,77;--color-secondary-900:131,24,67;--color-secondary-950:80,7,36;--color-accent:56,189,248;--color-accent-50:240,249,255;--color-accent-100:224,242,254;--color-accent-200:186,230,253;--color-accent-300:125,211,252;--color-accent-400:56,189,248;--color-accent-500:14,165,233;--color-accent-600:2,132,199;--color-accent-700:3,105,161;--color-accent-800:7,89,133;--color-accent-900:12,74,110;--color-accent-950:8,47,73;--color-success:74,222,128;--color-success-50:240,253,244;--color-success-100:220,252,231;--color-success-200:187,247,208;--color-success-300:134,239,172;--color-success-400:74,222,128;--color-success-500:34,197,94;--color-success-600:22,163,74;--color-success-700:21,128,61;--color-success-800:22,101,52;--color-success-900:20,83,45;--color-success-950:5,46,22;--color-warning:250,204,21;--color-warning-50:254,252,232;--color-warning-100:254,249,195;--color-warning-200:254,240,138;--color-warning-300:253,224,71;--color-warning-400:250,204,21;--color-warning-500:234,179,8;--color-warning-600:202,138,4;--color-warning-700:161,98,7;--color-warning-800:133,77,14;--color-warning-900:113,63,18;--color-warning-950:66,32,6;--color-danger:248,113,113;--color-danger-50:254,242,242;--color-danger-100:254,226,226;--color-danger-200:254,202,202;--color-danger-300:252,165,165;--color-danger-400:248,113,113;--color-danger-500:239,68,68;--color-danger-600:220,38,38;--color-danger-700:185,28,28;--color-danger-800:153,27,27;--color-danger-900:127,29,29;--color-danger-950:69,10,10;--color-error:248,113,113;--color-error-50:254,242,242;--color-error-100:254,226,226;--color-error-200:254,202,202;--color-error-300:252,165,165;--color-error-400:248,113,113;--color-error-500:239,68,68;--color-error-600:220,38,38;--color-error-700:185,28,28;--color-error-800:153,27,27;--color-error-900:127,29,29;--color-error-950:69,10,10;--color-info:34,211,238;--color-info-50:236,254,255;--color-info-100:207,250,254;--color-info-200:165,243,252;--color-info-300:103,232,249;--color-info-400:34,211,238;--color-info-500:6,182,212;--color-info-600:8,145,178;--color-info-700:14,116,144;--color-info-800:21,94,117;--color-info-900:22,78,99;--color-info-950:8,51,68;
+  }
+}
+
+/**
+ * @rokkit/themes - Base Styles
+ *
+ * Structural styles for all components.
+ * Import individual files for tree-shaking, or this file for all base styles.
+ */
+
+/**
+ * Button - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Button
+   ============================================================================= */
+
+[data-button] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  user-select: none;
+  text-decoration: none;
+  transition: all 150ms ease;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  line-height: 1;
+}
+
+[data-button]:focus {
+  outline: none;
+}
+
+[data-button]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Disabled */
+[data-button][data-disabled],
+[data-button]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading */
+[data-button][data-loading] {
+  pointer-events: none;
+  position: relative;
+}
+
+/* Icon-only */
+[data-button][data-icon-only] {
+  aspect-ratio: 1;
+  padding: 0;
+}
+
+[data-button][data-icon-only] [data-item-text] {
+  display: none;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+/* Small */
+[data-button][data-size='sm'] {
+  height: 1.75rem;
+  padding-inline: 0.625rem;
+  font-size: 0.75rem;
+  gap: 0.375rem;
+}
+
+[data-button][data-size='sm'][data-icon-only] {
+  width: 1.75rem;
+}
+
+[data-button][data-size='sm'] [data-item-icon],
+[data-button][data-size='sm'] [data-button-icon-right] {
+  font-size: 1.25rem;
+}
+
+/* Medium (default) */
+[data-button][data-size='md'],
+[data-button]:not([data-size]) {
+  height: 2.25rem;
+  padding-inline: 1rem;
+  font-size: 0.875rem;
+  gap: 0.5rem;
+}
+
+[data-button][data-size='md'][data-icon-only],
+[data-button]:not([data-size])[data-icon-only] {
+  width: 2.25rem;
+}
+
+[data-button][data-size='md'] [data-item-icon],
+[data-button][data-size='md'] [data-button-icon-right],
+[data-button]:not([data-size]) [data-item-icon],
+[data-button]:not([data-size]) [data-button-icon-right] {
+  font-size: 1.5rem;
+}
+
+/* Large */
+[data-button][data-size='lg'] {
+  height: 2.75rem;
+  padding-inline: 1.5rem;
+  font-size: 1rem;
+  gap: 0.625rem;
+}
+
+[data-button][data-size='lg'][data-icon-only] {
+  width: 2.75rem;
+}
+
+[data-button][data-size='lg'] [data-item-icon],
+[data-button][data-size='lg'] [data-button-icon-right] {
+  font-size: 1.875rem;
+}
+
+/* =============================================================================
+   Button Elements
+   ============================================================================= */
+
+[data-button] [data-item-icon],
+[data-button] [data-button-icon-right] {
+  flex-shrink: 0;
+}
+
+[data-button] [data-item-text] {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Hide description and badge inside buttons (ItemContent renders them but we don't need them) */
+[data-button] [data-item-description],
+[data-button] [data-item-badge] {
+  display: none;
+}
+
+/* =============================================================================
+   Gradient Style — Structural
+   ============================================================================= */
+
+[data-button][data-style='gradient'] {
+  border: none;
+}
+
+/* =============================================================================
+   Link Style — Structural
+   ============================================================================= */
+
+[data-button][data-style='link'] {
+  background: transparent;
+  border: none;
+  height: auto;
+  padding-inline: 0.25rem;
+  border-radius: 0;
+  font-weight: inherit;
+}
+
+[data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* =============================================================================
+   Micro-Animations
+   ============================================================================= */
+
+/* Hover lift — subtle elevation on hover (not on link or ghost style) */
+[data-button]:not([data-style='link']):not([data-style='ghost']):hover:not(:disabled):not(
+    [data-disabled]
+  ) {
+  transform: translateY(-1px);
+}
+
+/* Press feedback — scale down on active */
+[data-button]:active:not(:disabled):not([data-disabled]) {
+  transform: scale(0.97) translateY(0);
+}
+
+/* Icon shift — trailing icon moves right on hover */
+[data-button]:hover:not(:disabled):not([data-disabled]) [data-button-icon-right] {
+  translate: 0.125rem 0;
+}
+
+[data-button] [data-button-icon-right] {
+  transition: translate 150ms ease;
+}
+
+/* Loading pulse */
+[data-button][data-loading] {
+  animation: button-loading-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes button-loading-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* =============================================================================
+   Loading Spinner
+   ============================================================================= */
+
+[data-button-spinner] {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: button-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* =============================================================================
+   Button Group
+   ============================================================================= */
+
+[data-button-group] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[data-button-group] [data-button] {
+  border-radius: 0;
+}
+
+[data-button-group] [data-button]:first-child {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+[data-button-group] [data-button]:last-child {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+[data-button-group] [data-button]:not(:first-child) {
+  margin-left: -1px;
+}
+
+/**
+ * Item Content - Base Structural Styles
+ *
+ * Shared styles for icon, text, description, and badge elements
+ * used by List, Tree, and other components.
+ */
+
+/* =============================================================================
+   Item Icon
+   ============================================================================= */
+
+[data-item-icon] {
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Item Avatar
+   ============================================================================= */
+
+[data-item-avatar] {
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+/* =============================================================================
+   Item Text Container
+   ============================================================================= */
+
+[data-item-text] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+[data-item-label] {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-item-description] {
+  font-size: 0.75em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* =============================================================================
+   Item Badge
+   ============================================================================= */
+
+[data-item-badge] {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75em;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+/* =============================================================================
+   Item Shortcut
+   ============================================================================= */
+
+[data-item-shortcut] {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 0.75em;
+  font-weight: 500;
+  border-radius: 0.25rem;
+}
+
+/**
+ * Menu - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Menu Container
+   ============================================================================= */
+
+[data-menu] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-menu][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Trigger Button
+   ============================================================================= */
+
+[data-menu-trigger] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+[data-menu-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-menu-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants */
+[data-menu][data-size='sm'] [data-menu-trigger] {
+  height: 1.5rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-menu][data-size='md'] [data-menu-trigger],
+[data-menu]:not([data-size]) [data-menu-trigger] {
+  height: 2rem;
+  padding-inline: 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-menu][data-size='lg'] [data-menu-trigger] {
+  height: 2.5rem;
+  padding-inline: 0.75rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Trigger Elements (icon, label, arrow)
+   ============================================================================= */
+
+[data-menu-trigger] > [data-menu-icon] {
+  flex-shrink: 0;
+}
+
+[data-menu-trigger] > [data-menu-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-menu-trigger] > [data-menu-arrow] {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-menu][data-open='true'] [data-menu-arrow] {
+  transform: rotate(180deg);
+}
+
+/* Arrow sizes */
+[data-menu][data-size='sm'] [data-menu-arrow] {
+  font-size: 0.75rem;
+}
+[data-menu][data-size='md'] [data-menu-arrow],
+[data-menu]:not([data-size]) [data-menu-arrow] {
+  font-size: 0.875rem;
+}
+[data-menu][data-size='lg'] [data-menu-arrow] {
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Dropdown Panel
+   ============================================================================= */
+
+[data-menu-dropdown] {
+  position: absolute;
+  z-index: 50;
+  min-width: 200px;
+  max-height: 400px;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+}
+
+/* Menu dropdown — no focus ring on container, focus managed on individual items */
+[data-menu-dropdown]:focus-within {
+  outline: none;
+}
+
+/* Direction: down (default) */
+[data-menu][data-direction='down'] [data-menu-dropdown],
+[data-menu]:not([data-direction]) [data-menu-dropdown] {
+  top: calc(100% + 4px);
+  animation: menu-dropdown-down 150ms ease;
+}
+
+/* Direction: up */
+[data-menu][data-direction='up'] [data-menu-dropdown] {
+  bottom: calc(100% + 4px);
+  animation: menu-dropdown-up 150ms ease;
+}
+
+/* Alignment */
+[data-menu][data-align='left'] [data-menu-dropdown],
+[data-menu]:not([data-align]) [data-menu-dropdown] {
+  left: 0;
+}
+
+[data-menu][data-align='right'] [data-menu-dropdown] {
+  right: 0;
+}
+
+@keyframes menu-dropdown-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes menu-dropdown-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Menu Items
+   ============================================================================= */
+
+[data-menu-item] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 150ms ease;
+}
+
+[data-menu-item][data-disabled='true'],
+[data-menu-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-menu-item]:focus,
+[data-menu-item]:focus-visible {
+  outline: none;
+}
+
+/* Size variants for items */
+[data-menu][data-size='sm'] [data-menu-item] {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-menu][data-size='md'] [data-menu-item],
+[data-menu]:not([data-size]) [data-menu-item] {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-menu][data-size='lg'] [data-menu-item] {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements - uses shared [data-item-*] from item.css
+   ============================================================================= */
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-menu-group] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+/* Group sizes */
+[data-menu][data-size='sm'] [data-menu-group] {
+  padding: 0.25rem 0.5rem;
+}
+[data-menu][data-size='md'] [data-menu-group],
+[data-menu]:not([data-size]) [data-menu-group] {
+  padding: 0.375rem 0.75rem;
+}
+[data-menu][data-size='lg'] [data-menu-group] {
+  padding: 0.5rem 1rem;
+}
+
+[data-menu-group]:focus {
+  outline: none;
+}
+
+[data-menu-group] > [data-menu-group-icon] {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+[data-menu-group] > [data-menu-group-text] {
+  flex: 1;
+  text-align: left;
+}
+
+[data-menu-expand-icon] {
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-menu-separator] {
+  height: 1px;
+  margin-block: 0.25rem;
+  border: none;
+}
+
+/**
+ * Select - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Select Container
+   ============================================================================= */
+
+[data-select] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-select][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Trigger Button
+   ============================================================================= */
+
+[data-select-trigger] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 180px;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+[data-select-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-select-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants */
+[data-select][data-size='sm'] [data-select-trigger] {
+  height: 1.75rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-trigger],
+[data-select]:not([data-size]) [data-select-trigger] {
+  height: 2.25rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-trigger] {
+  height: 2.75rem;
+  padding-inline: 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Trigger Value Display
+   ============================================================================= */
+
+[data-select-value] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+[data-select-value-icon] {
+  flex-shrink: 0;
+}
+
+[data-select-value-text] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-select-value-custom] {
+  display: contents;
+}
+
+[data-select-value-custom] > button,
+[data-select-value-custom] > a {
+  display: contents;
+}
+
+[data-select-placeholder] {
+  opacity: 0.6;
+}
+
+[data-select-arrow] {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-select][data-open='true'] [data-select-arrow] {
+  transform: rotate(180deg);
+}
+
+/* Arrow sizes */
+[data-select][data-size='sm'] [data-select-arrow] {
+  font-size: 0.875rem;
+}
+[data-select][data-size='md'] [data-select-arrow],
+[data-select]:not([data-size]) [data-select-arrow] {
+  font-size: 1rem;
+}
+[data-select][data-size='lg'] [data-select-arrow] {
+  font-size: 1.125rem;
+}
+
+/* =============================================================================
+   MultiSelect Tags
+   ============================================================================= */
+
+[data-select-tags] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-select-tag] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75em;
+  line-height: 1.25;
+}
+
+[data-select-tag-text] {
+  white-space: nowrap;
+}
+
+[data-select-tag-remove] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  font-size: 0.75em;
+  opacity: 0.7;
+  transition: opacity 150ms ease;
+}
+
+[data-select-tag-remove]:hover {
+  opacity: 1;
+}
+
+[data-select-count] {
+  font-weight: 500;
+}
+
+/* =============================================================================
+   Dropdown Panel
+   ============================================================================= */
+
+[data-select-dropdown] {
+  position: absolute;
+  z-index: 50;
+  min-width: 100%;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+}
+
+/* Direction: down (default) */
+[data-select][data-direction='down'] [data-select-dropdown],
+[data-select]:not([data-direction]) [data-select-dropdown] {
+  top: calc(100% + 4px);
+  animation: select-dropdown-down 150ms ease;
+}
+
+/* Direction: up */
+[data-select][data-direction='up'] [data-select-dropdown] {
+  bottom: calc(100% + 4px);
+  animation: select-dropdown-up 150ms ease;
+}
+
+/* Alignment */
+[data-select][data-align='left'] [data-select-dropdown],
+[data-select]:not([data-align]) [data-select-dropdown] {
+  left: 0;
+}
+
+[data-select][data-align='right'] [data-select-dropdown] {
+  right: 0;
+}
+
+@keyframes select-dropdown-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes select-dropdown-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Select Options
+   ============================================================================= */
+
+[data-select-option] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 150ms ease;
+}
+
+[data-select-option][data-disabled='true'],
+[data-select-option]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-select-option]:focus,
+[data-select-option]:focus-visible {
+  outline: none;
+}
+
+/* Size variants for options */
+[data-select][data-size='sm'] [data-select-option] {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-option],
+[data-select]:not([data-size]) [data-select-option] {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-option] {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* Check mark for single select */
+[data-select-check] {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Checkbox for multi select */
+[data-select-checkbox] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid currentColor;
+  font-size: 0.75rem;
+}
+
+/* =============================================================================
+   Custom Snippet Wrapper
+   ============================================================================= */
+
+[data-select-option-custom] {
+  display: contents;
+}
+
+[data-select-option-custom] > button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+/* Size variants for custom snippet buttons */
+[data-select][data-size='sm'] [data-select-option-custom] > button {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-option-custom] > button,
+[data-select]:not([data-size]) [data-select-option-custom] > button {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-option-custom] > button {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-select-group] {
+  padding-block: 0.25rem;
+}
+
+[data-select-group-label] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Group label sizes */
+[data-select][data-size='sm'] [data-select-group-label] {
+  padding: 0.25rem 0.5rem;
+}
+[data-select][data-size='md'] [data-select-group-label],
+[data-select]:not([data-size]) [data-select-group-label] {
+  padding: 0.375rem 0.75rem;
+}
+[data-select][data-size='lg'] [data-select-group-label] {
+  padding: 0.5rem 1rem;
+}
+
+[data-select-group-label] > [data-select-group-icon] {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* =============================================================================
+   Divider
+   ============================================================================= */
+
+[data-select-divider] {
+  height: 1px;
+  margin-block: 0.25rem;
+}
+
+/* =============================================================================
+   Filter Input (filterable mode)
+   ============================================================================= */
+
+[data-select-filter] {
+  padding: 0.375rem;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+[data-select-filter-input] {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  font-size: inherit;
+  outline: none;
+  background: transparent;
+}
+
+/* =============================================================================
+   Empty State (no filter results)
+   ============================================================================= */
+
+[data-select-empty] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: center;
+  opacity: 0.6;
+}
+
+/**
+ * Toolbar - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-toolbar] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[data-toolbar][data-toolbar-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Position variants - horizontal */
+[data-toolbar][data-toolbar-position='top'],
+[data-toolbar][data-toolbar-position='bottom'],
+[data-toolbar]:not([data-toolbar-position]) {
+  flex-direction: row;
+}
+
+/* Position variants - vertical */
+[data-toolbar][data-toolbar-position='left'],
+[data-toolbar][data-toolbar-position='right'] {
+  flex-direction: column;
+  height: 100%;
+  width: auto;
+}
+
+/* Sticky positioning */
+[data-toolbar][data-toolbar-sticky='true'] {
+  position: sticky;
+  z-index: 10;
+}
+
+[data-toolbar][data-toolbar-sticky='true'][data-toolbar-position='top'],
+[data-toolbar][data-toolbar-sticky='true']:not([data-toolbar-position]) {
+  top: 0;
+}
+
+[data-toolbar][data-toolbar-sticky='true'][data-toolbar-position='bottom'] {
+  bottom: 0;
+}
+
+[data-toolbar][data-toolbar-sticky='true'][data-toolbar-position='left'] {
+  left: 0;
+}
+
+[data-toolbar][data-toolbar-sticky='true'][data-toolbar-position='right'] {
+  right: 0;
+}
+
+/* Size variants - horizontal */
+[data-toolbar][data-toolbar-size='sm'],
+[data-toolbar][data-size='sm'] {
+  height: 2rem;
+  padding-inline: 0.5rem;
+  gap: 0.25rem;
+}
+
+[data-toolbar][data-toolbar-size='md'],
+[data-toolbar][data-size='md'],
+[data-toolbar]:not([data-toolbar-size]):not([data-size]) {
+  height: 2.5rem;
+  padding-inline: 0.75rem;
+  gap: 0.5rem;
+}
+
+[data-toolbar][data-toolbar-size='lg'],
+[data-toolbar][data-size='lg'] {
+  height: 3rem;
+  padding-inline: 1rem;
+  gap: 0.75rem;
+}
+
+/* Compact mode */
+[data-toolbar][data-toolbar-compact='true'] {
+  padding-block: 0;
+}
+
+[data-toolbar]:not([data-toolbar-compact='true']) {
+  padding-block: 0.25rem;
+}
+
+/* Vertical toolbar size adjustments */
+[data-toolbar][data-toolbar-position='left'],
+[data-toolbar][data-toolbar-position='right'] {
+  height: auto;
+  padding-block: 0.5rem;
+  padding-inline: 0.25rem;
+}
+
+/* =============================================================================
+   Toolbar Items (buttons, toggles)
+   ============================================================================= */
+
+[data-toolbar-item] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: all 150ms ease;
+}
+
+[data-toolbar-item]:focus {
+  outline: none;
+}
+
+[data-toolbar-item][data-disabled='true'],
+[data-toolbar-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Size variants for items */
+[data-toolbar][data-toolbar-size='sm'] [data-toolbar-item],
+[data-toolbar][data-size='sm'] [data-toolbar-item] {
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.25rem;
+}
+
+[data-toolbar][data-toolbar-size='md'] [data-toolbar-item],
+[data-toolbar][data-size='md'] [data-toolbar-item],
+[data-toolbar]:not([data-toolbar-size]):not([data-size]) [data-toolbar-item] {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+}
+
+[data-toolbar][data-toolbar-size='lg'] [data-toolbar-item],
+[data-toolbar][data-size='lg'] [data-toolbar-item] {
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.5rem;
+}
+
+/* =============================================================================
+   Toolbar Item Elements (icon, label)
+   ============================================================================= */
+
+[data-toolbar-icon] {
+  flex-shrink: 0;
+}
+
+[data-toolbar-label] {
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+/* Icon sizes */
+[data-toolbar][data-toolbar-size='sm'] [data-toolbar-icon],
+[data-toolbar][data-size='sm'] [data-toolbar-icon] {
+  font-size: 0.875rem;
+}
+
+[data-toolbar][data-toolbar-size='md'] [data-toolbar-icon],
+[data-toolbar][data-size='md'] [data-toolbar-icon],
+[data-toolbar]:not([data-toolbar-size]):not([data-size]) [data-toolbar-icon] {
+  font-size: 1rem;
+}
+
+[data-toolbar][data-toolbar-size='lg'] [data-toolbar-icon],
+[data-toolbar][data-size='lg'] [data-toolbar-icon] {
+  font-size: 1.25rem;
+}
+
+/* Label sizes */
+[data-toolbar][data-toolbar-size='sm'] [data-toolbar-label],
+[data-toolbar][data-size='sm'] [data-toolbar-label] {
+  font-size: 0.75rem;
+  padding-inline: 0.25rem;
+}
+
+[data-toolbar][data-toolbar-size='md'] [data-toolbar-label],
+[data-toolbar][data-size='md'] [data-toolbar-label],
+[data-toolbar]:not([data-toolbar-size]):not([data-size]) [data-toolbar-label] {
+  font-size: 0.875rem;
+  padding-inline: 0.375rem;
+}
+
+[data-toolbar][data-toolbar-size='lg'] [data-toolbar-label],
+[data-toolbar][data-size='lg'] [data-toolbar-label] {
+  font-size: 1rem;
+  padding-inline: 0.5rem;
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-toolbar-separator] {
+  flex-shrink: 0;
+}
+
+/* Horizontal toolbar separator (vertical line) */
+[data-toolbar][data-toolbar-position='top'] [data-toolbar-separator],
+[data-toolbar][data-toolbar-position='bottom'] [data-toolbar-separator],
+[data-toolbar]:not([data-toolbar-position]) [data-toolbar-separator] {
+  width: 1px;
+  margin-inline: 0.5rem;
+}
+
+[data-toolbar][data-toolbar-size='sm'] [data-toolbar-separator],
+[data-toolbar][data-size='sm'] [data-toolbar-separator] {
+  height: 1rem;
+}
+
+[data-toolbar][data-toolbar-size='md'] [data-toolbar-separator],
+[data-toolbar][data-size='md'] [data-toolbar-separator],
+[data-toolbar]:not([data-toolbar-size]):not([data-size]) [data-toolbar-separator] {
+  height: 1.25rem;
+}
+
+[data-toolbar][data-toolbar-size='lg'] [data-toolbar-separator],
+[data-toolbar][data-size='lg'] [data-toolbar-separator] {
+  height: 1.5rem;
+}
+
+/* Vertical toolbar separator (horizontal line) */
+[data-toolbar][data-toolbar-position='left'] [data-toolbar-separator],
+[data-toolbar][data-toolbar-position='right'] [data-toolbar-separator] {
+  height: 1px;
+  width: 1.5rem;
+  margin-block: 0.5rem;
+}
+
+/* =============================================================================
+   Divider (between sections)
+   ============================================================================= */
+
+[data-toolbar-divider] {
+  flex-shrink: 0;
+}
+
+/* Horizontal toolbar divider (vertical line) */
+[data-toolbar][data-toolbar-position='top'] [data-toolbar-divider],
+[data-toolbar][data-toolbar-position='bottom'] [data-toolbar-divider],
+[data-toolbar]:not([data-toolbar-position]) [data-toolbar-divider] {
+  width: 1px;
+  height: 1.5rem;
+  margin-inline: 0.5rem;
+}
+
+/* Vertical toolbar divider (horizontal line) */
+[data-toolbar][data-toolbar-position='left'] [data-toolbar-divider],
+[data-toolbar][data-toolbar-position='right'] [data-toolbar-divider] {
+  height: 1px;
+  width: 1.5rem;
+  margin-block: 0.5rem;
+}
+
+/* =============================================================================
+   Spacer
+   ============================================================================= */
+
+[data-toolbar-spacer] {
+  flex: 1;
+}
+
+/* =============================================================================
+   Sections
+   ============================================================================= */
+
+[data-toolbar-section] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+[data-toolbar-section='center'] {
+  flex: 1;
+  justify-content: center;
+}
+
+[data-toolbar-section='content'] {
+  flex: 1;
+}
+
+/* Vertical toolbar sections */
+[data-toolbar][data-toolbar-position='left'] [data-toolbar-section],
+[data-toolbar][data-toolbar-position='right'] [data-toolbar-section] {
+  flex-direction: column;
+}
+
+/* =============================================================================
+   Toolbar Group
+   ============================================================================= */
+
+[data-toolbar-group] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+[data-toolbar-group][data-toolbar-group-gap='none'] {
+  gap: 0;
+}
+
+[data-toolbar-group][data-toolbar-group-gap='sm'],
+[data-toolbar-group]:not([data-toolbar-group-gap]) {
+  gap: 0.25rem;
+}
+
+[data-toolbar-group][data-toolbar-group-gap='md'] {
+  gap: 0.5rem;
+}
+
+[data-toolbar-group][data-toolbar-group-gap='lg'] {
+  gap: 0.75rem;
+}
+
+/* Vertical toolbar groups */
+[data-toolbar][data-toolbar-position='left'] [data-toolbar-group],
+[data-toolbar][data-toolbar-position='right'] [data-toolbar-group] {
+  flex-direction: column;
+}
+
+/* =============================================================================
+   Custom Item Wrapper
+   ============================================================================= */
+
+[data-toolbar-item-custom] {
+  display: contents;
+}
+
+/**
+ * Tabs - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Tabs Container
+   ============================================================================= */
+
+[data-tabs] {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+/* Position: after → tab list below panels */
+[data-tabs][data-position='after'] {
+  flex-direction: column-reverse;
+}
+
+/* Vertical orientation → row layout */
+[data-tabs][data-orientation='vertical'] {
+  flex-direction: row;
+}
+
+[data-tabs][data-orientation='vertical'][data-position='after'] {
+  flex-direction: row-reverse;
+}
+
+[data-tabs][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Tab List
+   ============================================================================= */
+
+[data-tabs-list] {
+  display: flex;
+  flex-shrink: 0;
+}
+
+[data-tabs][data-orientation='vertical'] [data-tabs-list] {
+  flex-direction: column;
+}
+
+/* Alignment */
+[data-tabs][data-align='center'] [data-tabs-list] {
+  justify-content: center;
+}
+
+[data-tabs][data-align='end'] [data-tabs-list] {
+  justify-content: flex-end;
+}
+
+/* =============================================================================
+   Tab Triggers
+   ============================================================================= */
+
+[data-tabs-trigger] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  transition: all 150ms ease;
+  position: relative;
+}
+
+[data-tabs-trigger]:focus {
+  outline: none;
+}
+
+[data-tabs-trigger]:focus-visible {
+  outline: none;
+}
+
+[data-tabs-trigger][data-disabled],
+[data-tabs-trigger]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Tab Elements
+   ============================================================================= */
+
+[data-tabs-icon] {
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
+[data-tabs-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* =============================================================================
+   Tab Panels
+   ============================================================================= */
+
+[data-tabs-panel] {
+  display: none;
+}
+
+[data-tabs-panel][data-panel-active] {
+  display: block;
+}
+
+[data-tabs-content] {
+  padding: 0.75rem;
+  flex-grow: 1;
+}
+
+/* =============================================================================
+   Empty / Placeholder
+   ============================================================================= */
+
+[data-tabs-empty],
+[data-tabs-placeholder] {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  opacity: 0.6;
+}
+
+/* =============================================================================
+   Editable Mode
+   ============================================================================= */
+
+[data-tabs-remove] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 0.75rem;
+  opacity: 0.5;
+  transition: opacity 150ms ease;
+  margin-left: 0.25rem;
+}
+
+[data-tabs-remove]:hover {
+  opacity: 1;
+}
+
+[data-tabs-add] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  opacity: 0.5;
+  transition: opacity 150ms ease;
+}
+
+[data-tabs-add]:hover {
+  opacity: 1;
+}
+
+/**
+ * Toggle - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Toggle Container
+   ============================================================================= */
+
+[data-toggle] {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  gap: 0.125rem;
+}
+
+[data-toggle][data-toggle-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[dir='rtl'] [data-toggle] {
+  flex-direction: row-reverse;
+}
+
+/* =============================================================================
+   Toggle Options
+   ============================================================================= */
+
+[data-toggle-option] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  user-select: none;
+  background: transparent;
+}
+
+[data-toggle-option]:focus {
+  outline: none;
+}
+
+[data-toggle-option]:focus-visible {
+  outline: none;
+}
+
+[data-toggle-option][data-disabled='true'],
+[data-toggle-option]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+/* Small */
+[data-toggle][data-toggle-size='sm'] [data-toggle-option] {
+  height: 1.5rem;
+  font-size: 0.75rem;
+  gap: 0.25rem;
+}
+
+[data-toggle][data-toggle-size='sm'][data-toggle-labels='true'] [data-toggle-option] {
+  padding-inline: 0.375rem;
+}
+
+[data-toggle][data-toggle-size='sm']:not([data-toggle-labels='true']) [data-toggle-option] {
+  padding-inline: 0.25rem;
+}
+
+[data-toggle][data-toggle-size='sm'] [data-toggle-icon] {
+  font-size: 0.875rem;
+}
+
+/* Medium (default) */
+[data-toggle][data-toggle-size='md'] [data-toggle-option],
+[data-toggle]:not([data-toggle-size]) [data-toggle-option] {
+  height: 2rem;
+  font-size: 0.875rem;
+  gap: 0.375rem;
+}
+
+[data-toggle][data-toggle-size='md'][data-toggle-labels='true'] [data-toggle-option],
+[data-toggle]:not([data-toggle-size])[data-toggle-labels='true'] [data-toggle-option] {
+  padding-inline: 0.5rem;
+}
+
+[data-toggle][data-toggle-size='md']:not([data-toggle-labels='true']) [data-toggle-option],
+[data-toggle]:not([data-toggle-size]):not([data-toggle-labels='true']) [data-toggle-option] {
+  padding-inline: 0.375rem;
+}
+
+[data-toggle][data-toggle-size='md'] [data-toggle-icon],
+[data-toggle]:not([data-toggle-size]) [data-toggle-icon] {
+  font-size: 1rem;
+}
+
+/* Large */
+[data-toggle][data-toggle-size='lg'] [data-toggle-option] {
+  height: 2.5rem;
+  font-size: 1rem;
+  gap: 0.5rem;
+}
+
+[data-toggle][data-toggle-size='lg'][data-toggle-labels='true'] [data-toggle-option] {
+  padding-inline: 0.75rem;
+}
+
+[data-toggle][data-toggle-size='lg']:not([data-toggle-labels='true']) [data-toggle-option] {
+  padding-inline: 0.5rem;
+}
+
+[data-toggle][data-toggle-size='lg'] [data-toggle-icon] {
+  font-size: 1.25rem;
+}
+
+/* =============================================================================
+   Toggle Elements
+   ============================================================================= */
+
+[data-toggle-icon] {
+  flex-shrink: 0;
+}
+
+[data-toggle-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/**
+ * List - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   List Container
+   ============================================================================= */
+
+[data-list] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-list][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[dir='rtl'] [data-list] [data-list-item] {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+/* =============================================================================
+   List Items (shared for links and buttons)
+   ============================================================================= */
+
+[data-list-item] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+a[data-list-item],
+button[data-list-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-list-item][data-disabled='true'],
+[data-list-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-list-item]:focus {
+  outline: none;
+}
+
+/* Size variants for items */
+[data-list][data-size='sm'] [data-list-item],
+[data-list][data-size='sm'] a[data-list-item],
+[data-list][data-size='sm'] button[data-list-item] {
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-list][data-size='md'] [data-list-item],
+[data-list]:not([data-size]) [data-list-item],
+[data-list][data-size='md'] a[data-list-item],
+[data-list]:not([data-size]) a[data-list-item],
+[data-list][data-size='md'] button[data-list-item],
+[data-list]:not([data-size]) button[data-list-item] {
+  gap: 0.625rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-list][data-size='lg'] [data-list-item],
+[data-list][data-size='lg'] a[data-list-item],
+[data-list][data-size='lg'] button[data-list-item] {
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements - uses shared [data-item-*] from item.css
+   ============================================================================= */
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-list-group] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  padding-block: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+/* Non-collapsible group labels are not interactive */
+[data-list]:not([data-collapsible='true']) [data-list-group] {
+  cursor: default;
+}
+
+[data-list-group]:focus {
+  outline: none;
+}
+
+/* Group label sizes */
+[data-list][data-size='sm'] [data-list-group] {
+  padding: 0.25rem 0.5rem;
+}
+[data-list][data-size='md'] [data-list-group],
+[data-list]:not([data-size]) [data-list-group] {
+  padding: 0.375rem 0.75rem;
+}
+[data-list][data-size='lg'] [data-list-group] {
+  padding: 0.5rem 1rem;
+}
+
+/* Group item content — inherits font from [data-list-group], label stays inline */
+[data-list-group] > [data-item-icon] {
+  opacity: 0.7;
+}
+
+[data-list-group] > [data-item-text] {
+  display: contents;
+}
+
+[data-list-group] [data-item-label] {
+  font-weight: inherit;
+}
+
+/* Expand/collapse chevron — pushed to the right edge */
+[data-list-expand-icon] {
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+
+/* =============================================================================
+   Multi-selection
+   ============================================================================= */
+
+[data-list][data-multiselect='true'] [data-list-item] {
+  user-select: none;
+}
+
+/* =============================================================================
+   Separator / Spacer
+   ============================================================================= */
+
+[data-list-separator] {
+  height: 1px;
+  margin-block: 0.25rem;
+  border: none;
+}
+
+[data-list-spacer] {
+  height: 0.5rem;
+}
+
+/**
+ * Connector - Base Structural Styles
+ *
+ * Tree line connector component based on @rokkit/ui Connector.
+ * Supports LTR and RTL layouts.
+ */
+
+/* =============================================================================
+   Connector Container
+   ============================================================================= */
+
+[data-connector] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 1rem;
+  min-height: 1.5rem;
+}
+
+/* Size variants (inherited from parent tree) */
+[data-tree][data-size='sm'] [data-connector] {
+  width: 1rem;
+  min-height: 1.5rem;
+}
+
+[data-tree][data-size='md'] [data-connector],
+[data-tree]:not([data-size]) [data-connector] {
+  width: 1.25rem;
+  min-height: 1.75rem;
+}
+
+[data-tree][data-size='lg'] [data-connector] {
+  width: 1.5rem;
+  min-height: 2rem;
+}
+
+/* =============================================================================
+   Line Elements
+   ============================================================================= */
+
+[data-connector] > i {
+  display: block;
+}
+
+/* Vertical line - half height (for 'last' connector) */
+[data-connector-v] {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+/* Vertical line - full height (for 'child' and 'sibling' connectors) */
+[data-connector-v][data-connector-full] {
+  grid-row: 1 / -1;
+}
+
+/* Horizontal line (connects to node content) - positioned in row 1 with border-bottom */
+[data-connector-h] {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+/* Corner connector for RTL - combines vertical and horizontal */
+[data-connector-corner] {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+/* =============================================================================
+   RTL Support
+   ============================================================================= */
+
+[data-connector][data-connector-rtl] [data-connector-v] {
+  grid-column: 2;
+}
+
+[data-connector][data-connector-rtl] [data-connector-h] {
+  grid-column: 1;
+}
+
+[data-connector][data-connector-rtl] [data-connector-corner] {
+  grid-column: 2;
+}
+
+/* =============================================================================
+   Empty Connector (spacer)
+   ============================================================================= */
+
+[data-connector][data-connector-type='empty'] {
+  /* Just takes up space, no visible lines */
+}
+
+/**
+ * Tree - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ *
+ * Note: Connector styles are in connector.css
+ */
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-tree] {
+  display: flex;
+  flex-direction: column;
+}
+
+/* =============================================================================
+   Tree Node
+   ============================================================================= */
+
+[data-tree-node] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-tree-node]:focus {
+  outline: none;
+}
+
+[data-tree-node-row] {
+  display: flex;
+  align-items: stretch;
+}
+
+/* =============================================================================
+   Tree Toggle Button (Expand/Collapse)
+   ============================================================================= */
+
+[data-tree-toggle-btn] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: background-color 150ms ease;
+}
+
+/* Size variants for toggle */
+[data-tree][data-size='sm'] [data-tree-toggle-btn] {
+  width: 1rem;
+  height: 1rem;
+}
+
+[data-tree][data-size='md'] [data-tree-toggle-btn],
+[data-tree]:not([data-size]) [data-tree-toggle-btn] {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+[data-tree][data-size='lg'] [data-tree-toggle-btn] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Toggle icon container */
+[data-tree-toggle] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+[data-tree-toggle]:not([data-tree-has-children]) {
+  /* Leaf node - no toggle needed */
+  visibility: hidden;
+}
+
+/* =============================================================================
+   Line Style Variants
+   Connectors have no borders by default. data-line-style activates them.
+   'none' keeps connectors in DOM for spacing but lines stay invisible.
+   ============================================================================= */
+
+/* Shared: activate 1px border for all visible line styles (solid/dashed/dotted).
+   Uses longhand width+style so theme border-color is not overridden. */
+[data-tree]:not([data-line-style='none']) [data-connector-v] {
+  border-right-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-h] {
+  border-bottom-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-rtl] [data-connector-v] {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-rtl] [data-connector-corner] {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
+
+/* Solid (default visible style) */
+[data-tree][data-line-style='solid'] [data-connector-v] {
+  border-right-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-h] {
+  border-bottom-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-corner] {
+  border-bottom-style: solid;
+  border-right-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-v] {
+  border-left-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-corner] {
+  border-left-style: solid;
+}
+
+/* Dashed */
+[data-tree][data-line-style='dashed'] [data-connector-v] {
+  border-right-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-h] {
+  border-bottom-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-corner] {
+  border-bottom-style: dashed;
+  border-right-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-v] {
+  border-left-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-corner] {
+  border-left-style: dashed;
+}
+
+/* Dotted */
+[data-tree][data-line-style='dotted'] [data-connector-v] {
+  border-right-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-h] {
+  border-bottom-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-corner] {
+  border-bottom-style: dotted;
+  border-right-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-v] {
+  border-left-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-corner] {
+  border-left-style: dotted;
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-tree-item-content] {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  flex: 1;
+  min-width: 0;
+  padding: 0.25rem 0.375rem;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  font: inherit;
+  color: inherit;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* Size variants for item content */
+[data-tree][data-size='sm'] [data-tree-item-content] {
+  gap: 0.375rem;
+  font-size: 0.75rem;
+}
+
+[data-tree][data-size='md'] [data-tree-item-content],
+[data-tree]:not([data-size]) [data-tree-item-content] {
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+[data-tree][data-size='lg'] [data-tree-item-content] {
+  gap: 0.625rem;
+  font-size: 1rem;
+}
+
+/* Item elements use shared [data-item-*] from item.css */
+
+/* =============================================================================
+   Loading Spinner
+   ============================================================================= */
+
+[data-tree-spinner] {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: tree-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes tree-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* =============================================================================
+   Multi-selection
+   ============================================================================= */
+
+[data-tree][data-multiselect='true'] [data-tree-item-content] {
+  user-select: none;
+}
+
+/**
+ * FloatingAction - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   FAB Container
+   ============================================================================= */
+
+[data-fab] {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: transparent;
+  /* Ensure the container only sizes to the trigger button */
+  width: fit-content;
+  height: fit-content;
+}
+
+/* Contained mode - position relative to parent instead of viewport */
+[data-fab][data-contained] {
+  position: absolute;
+}
+
+[data-fab][data-contained] [data-fab-backdrop] {
+  position: absolute;
+}
+
+/* Position variants */
+[data-fab][data-position='bottom-right'] {
+  bottom: 1.5rem;
+  right: 1.5rem;
+}
+
+[data-fab][data-position='bottom-left'] {
+  bottom: 1.5rem;
+  left: 1.5rem;
+}
+
+[data-fab][data-position='top-right'] {
+  top: 1.5rem;
+  right: 1.5rem;
+}
+
+[data-fab][data-position='top-left'] {
+  top: 1.5rem;
+  left: 1.5rem;
+}
+
+[data-fab][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   FAB Trigger Button
+   ============================================================================= */
+
+[data-fab-trigger] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+[data-fab-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-fab-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants for trigger */
+[data-fab][data-size='sm'] [data-fab-trigger] {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.25rem;
+}
+
+[data-fab][data-size='md'] [data-fab-trigger],
+[data-fab]:not([data-size]) [data-fab-trigger] {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1.5rem;
+}
+
+[data-fab][data-size='lg'] [data-fab-trigger] {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.75rem;
+}
+
+/* Trigger rotation when open */
+[data-fab][data-open='true'] [data-fab-trigger] {
+  transform: rotate(45deg);
+}
+
+/* Icon inside trigger */
+[data-fab-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 150ms ease;
+}
+
+/* Counter-rotate icon when trigger rotates (if using plus icon) */
+[data-fab][data-open='true'] [data-fab-icon] {
+  transform: rotate(-45deg);
+}
+
+/* =============================================================================
+   FAB Menu (Action Items Container)
+   ============================================================================= */
+
+[data-fab-menu] {
+  position: absolute;
+  display: flex;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+[data-fab][data-open='true'] [data-fab-menu] {
+  pointer-events: auto;
+}
+
+/* Vertical expansion (default) */
+[data-fab][data-expand='vertical'] [data-fab-menu],
+[data-fab]:not([data-expand]) [data-fab-menu] {
+  flex-direction: column-reverse;
+  align-items: center;
+}
+
+/* Item alignment for vertical expansion - align relative to trigger button */
+[data-fab][data-expand='vertical'][data-item-align='start'] [data-fab-menu],
+[data-fab]:not([data-expand])[data-item-align='start'] [data-fab-menu] {
+  align-items: flex-start;
+  left: 0;
+}
+
+[data-fab][data-expand='vertical'][data-item-align='center'] [data-fab-menu],
+[data-fab]:not([data-expand])[data-item-align='center'] [data-fab-menu],
+[data-fab][data-expand='vertical']:not([data-item-align]) [data-fab-menu],
+[data-fab]:not([data-expand]):not([data-item-align]) [data-fab-menu] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-fab][data-expand='vertical'][data-item-align='end'] [data-fab-menu],
+[data-fab]:not([data-expand])[data-item-align='end'] [data-fab-menu] {
+  align-items: flex-end;
+  right: 0;
+}
+
+/* Position menu based on FAB position */
+[data-fab][data-position='bottom-right'][data-expand='vertical'] [data-fab-menu],
+[data-fab][data-position='bottom-right']:not([data-expand]) [data-fab-menu],
+[data-fab][data-position='bottom-left'][data-expand='vertical'] [data-fab-menu],
+[data-fab][data-position='bottom-left']:not([data-expand]) [data-fab-menu] {
+  bottom: calc(100% + 0.75rem);
+}
+
+[data-fab][data-position='top-right'][data-expand='vertical'] [data-fab-menu],
+[data-fab][data-position='top-right']:not([data-expand]) [data-fab-menu],
+[data-fab][data-position='top-left'][data-expand='vertical'] [data-fab-menu],
+[data-fab][data-position='top-left']:not([data-expand]) [data-fab-menu] {
+  top: calc(100% + 0.75rem);
+  flex-direction: column;
+}
+
+/* Horizontal expansion */
+[data-fab][data-expand='horizontal'] [data-fab-menu] {
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Item alignment for horizontal expansion */
+[data-fab][data-expand='horizontal'][data-item-align='start'] [data-fab-menu] {
+  align-items: flex-start;
+}
+
+[data-fab][data-expand='horizontal'][data-item-align='end'] [data-fab-menu] {
+  align-items: flex-end;
+}
+
+[data-fab][data-position='bottom-right'][data-expand='horizontal'] [data-fab-menu],
+[data-fab][data-position='top-right'][data-expand='horizontal'] [data-fab-menu] {
+  right: calc(100% + 0.75rem);
+  flex-direction: row-reverse;
+}
+
+[data-fab][data-position='bottom-left'][data-expand='horizontal'] [data-fab-menu],
+[data-fab][data-position='top-left'][data-expand='horizontal'] [data-fab-menu] {
+  left: calc(100% + 0.75rem);
+}
+
+/* Radial expansion */
+[data-fab][data-expand='radial'] [data-fab-menu] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+}
+
+/* =============================================================================
+   FAB Items
+   ============================================================================= */
+
+[data-fab-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    transform 200ms ease,
+    opacity 200ms ease,
+    background-color 150ms ease;
+  transition-delay: var(--fab-delay, 0ms);
+}
+
+/* Hidden state (before animation) */
+[data-fab]:not([data-open='true']) [data-fab-item] {
+  opacity: 0;
+  transform: scale(0.5);
+  pointer-events: none;
+}
+
+/* Visible state (after animation) */
+[data-fab][data-open='true'] [data-fab-item] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+[data-fab-item][data-disabled='true'],
+[data-fab-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-fab-item]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants for items */
+[data-fab][data-size='sm'] [data-fab-item] {
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-fab][data-size='md'] [data-fab-item],
+[data-fab]:not([data-size]) [data-fab-item] {
+  min-width: 3rem;
+  height: 3rem;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+}
+
+[data-fab][data-size='lg'] [data-fab-item] {
+  min-width: 3.5rem;
+  height: 3.5rem;
+  padding: 0 1.25rem;
+  font-size: 1rem;
+}
+
+/* Icon-only items (no label) */
+[data-fab-item]:not(:has([data-fab-item-label])) {
+  padding: 0;
+  aspect-ratio: 1;
+  justify-content: center;
+}
+
+[data-fab-item-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+[data-fab-item-label] {
+  flex: 1;
+}
+
+/* =============================================================================
+   Radial Expansion Positioning
+   ============================================================================= */
+
+[data-fab][data-expand='radial'][data-open='true'] [data-fab-item] {
+  position: absolute;
+}
+
+/* Radial positions for bottom-right (expanding up-left arc) */
+[data-fab][data-expand='radial'][data-position='bottom-right'][data-open='true']
+  [data-fab-item]:nth-child(1) {
+  transform: translate(-120%, -20%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-right'][data-open='true']
+  [data-fab-item]:nth-child(2) {
+  transform: translate(-85%, -85%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-right'][data-open='true']
+  [data-fab-item]:nth-child(3) {
+  transform: translate(-20%, -120%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-right'][data-open='true']
+  [data-fab-item]:nth-child(4) {
+  transform: translate(45%, -120%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-right'][data-open='true']
+  [data-fab-item]:nth-child(5) {
+  transform: translate(-120%, 45%);
+}
+
+/* Radial positions for bottom-left (expanding up-right arc) */
+[data-fab][data-expand='radial'][data-position='bottom-left'][data-open='true']
+  [data-fab-item]:nth-child(1) {
+  transform: translate(20%, -120%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-left'][data-open='true']
+  [data-fab-item]:nth-child(2) {
+  transform: translate(85%, -85%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-left'][data-open='true']
+  [data-fab-item]:nth-child(3) {
+  transform: translate(120%, -20%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-left'][data-open='true']
+  [data-fab-item]:nth-child(4) {
+  transform: translate(-45%, -120%);
+}
+[data-fab][data-expand='radial'][data-position='bottom-left'][data-open='true']
+  [data-fab-item]:nth-child(5) {
+  transform: translate(120%, 45%);
+}
+
+/* =============================================================================
+   Backdrop
+   ============================================================================= */
+
+[data-fab-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: transparent;
+}
+
+/* =============================================================================
+   Custom Snippet Wrapper
+   ============================================================================= */
+
+[data-fab-item-custom] {
+  display: contents;
+}
+
+[data-fab-item-custom] > button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    transform 200ms ease,
+    opacity 200ms ease,
+    background-color 150ms ease;
+}
+
+/* Base structural styles for form fields and inputs */
+
+/* Form root: vertical stack */
+[data-form-root] {
+  display:flex;flex-direction:column;gap:0.75rem;
+}
+
+/* Form field container */
+[data-form-field] {
+  display:flex;flex-direction:column;
+}
+
+/* Separator between form fields */
+[data-form-separator] {
+  margin-top:0.25rem;margin-bottom:0.25rem;border-top-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-200),var(--un-border-opacity));
+}[data-mode="dark"] [data-form-separator]{--un-border-opacity:1;border-color:rgba(var(--color-surface-800),var(--un-border-opacity));}
+
+/* Form group (fieldset for nested objects) */
+[data-form-group] {
+  margin:0;display:flex;flex-direction:column;gap:0.75rem;border-left-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-200),var(--un-border-opacity));border-style:none;padding:0;padding-left:0.75rem;
+}[data-mode="dark"] [data-form-group]{--un-border-opacity:1;border-color:rgba(var(--color-surface-800),var(--un-border-opacity));}
+
+[data-form-group-label] {
+  padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:600;
+}
+
+/* Validation report */
+[data-validation-report] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-validation-group] {
+  display:flex;flex-direction:column;gap:0.125rem;
+}
+
+[data-validation-group-header] {
+  display:flex;align-items:center;gap:0.375rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:600;
+}
+
+[data-validation-count] {
+  height:18px;min-width:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding-left:0.25rem;padding-right:0.25rem;font-size:10px;font-weight:700;
+}
+
+[data-severity='error'] > [data-validation-group-header] {
+  --un-text-opacity:1;color:rgba(var(--color-error),var(--un-text-opacity));
+}
+
+[data-severity='error'] [data-validation-count] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-error-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
+}[data-mode="dark"] [data-severity="error"] [data-validation-count]{--un-bg-opacity:1;background-color:rgba(var(--color-error-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
+
+[data-severity='warning'] > [data-validation-group-header] {
+  --un-text-opacity:1;color:rgba(var(--color-warning),var(--un-text-opacity));
+}
+
+[data-severity='warning'] [data-validation-count] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-warning-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
+}[data-mode="dark"] [data-severity="warning"] [data-validation-count]{--un-bg-opacity:1;background-color:rgba(var(--color-warning-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
+
+[data-severity='info'] > [data-validation-group-header] {
+  --un-text-opacity:1;color:rgba(var(--color-info),var(--un-text-opacity));
+}
+
+[data-severity='info'] [data-validation-count] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-info-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info-700),var(--un-text-opacity));
+}[data-mode="dark"] [data-severity="info"] [data-validation-count]{--un-bg-opacity:1;background-color:rgba(var(--color-info-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info-300),var(--un-text-opacity));}
+
+[data-severity='success'] > [data-validation-group-header] {
+  --un-text-opacity:1;color:rgba(var(--color-success),var(--un-text-opacity));
+}
+
+[data-severity='success'] [data-validation-count] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-success-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
+}[data-mode="dark"] [data-severity="success"] [data-validation-count]{--un-bg-opacity:1;background-color:rgba(var(--color-success-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
+
+[data-validation-item] {
+  border-radius:0.25rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;text-align:left;font-size:0.75rem;line-height:1rem;
+}
+
+button[data-validation-item] {
+  cursor:pointer;border-style:none;background-color:transparent;
+}button[data-validation-item]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));}[data-mode="dark"] button[data-validation-item]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
+
+/* Form actions (submit/reset buttons) */
+[data-form-actions] {
+  display:flex;flex-direction:row;justify-content:flex-end;gap:0.5rem;padding-top:0.5rem;
+}
+
+button[data-form-submit],
+button[data-form-reset] {
+  cursor:pointer;border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));border-radius:0.25rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));padding-left:1rem;padding-right:1rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
+}[data-mode="dark"] button[data-form-submit],[data-mode="dark"] button[data-form-reset]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}button[data-form-submit]:hover,button[data-form-reset]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));}[data-mode="dark"] button[data-form-submit]:hover,[data-mode="dark"] button[data-form-reset]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
+
+button[data-form-submit] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}button[data-form-submit]:hover{opacity:0.9;}
+
+button[data-form-submit]:disabled,
+button[data-form-reset]:disabled {
+  cursor:not-allowed;opacity:0.5;
+}
+
+/* Submitting state: reduce interactivity */
+[data-form-submitting] > :not([data-form-actions]) {
+  pointer-events:none;opacity:0.6;
+}
+
+/* Field root container */
+[data-field-root] {
+  box-sizing:border-box;display:flex;flex-direction:column;
+}
+
+/* Field wrapper: vertical by default */
+[data-field-root] > [data-field] {
+  display:flex;flex-direction:column;gap:0.25rem;
+}
+
+/* Checkbox and switch: inline layout */
+[data-field-type='switch'] > [data-field],
+[data-field-type='checkbox'] > [data-field] {
+  flex-direction:row;align-items:center;gap:0.5rem;
+}
+
+/* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
+[data-input-root] [data-select] {
+  flex:1 1 0%;align-self:stretch;
+  display: flex;
+}
+
+[data-input-root] [data-select] [data-select-trigger] {
+  flex:1 1 0%;align-self:stretch;
+  min-width: 0;
+}
+
+/* Checkbox icon */
+[data-checkbox-root] {
+  display:flex;align-items:center;
+}
+
+/* Label: fills available space */
+[data-field] > label {
+  flex:1 1 0%;font-size:0.75rem;line-height:1rem;
+}
+
+/* Info field: horizontal layout */
+[data-field-type='info'] > [data-field] {
+  flex-direction:row;align-items:center;justify-content:space-between;
+}
+
+[data-field-info] {
+  font-size:0.75rem;line-height:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+}
+
+/* Numeric/date input alignment */
+[data-field-type='number'] input,
+[data-field-type='integer'] input,
+[data-field-type='date'] input,
+[data-field-type='time'] input {
+  text-align:right;
+}
+
+/* Input wrapper: horizontal for input + icon */
+[data-input-root] {
+  display:flex;flex-direction:row;align-items:center;
+}
+
+/* Input elements fill available width */
+[data-input-root] input,
+[data-input-root] textarea,
+[data-input-root] select {
+  margin:0;min-width:0;flex:1 1 0%;line-height:2;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
+}
+
+/* Icons inside inputs */
+[data-input-root] [data-icon] {
+  aspect-ratio:1/1;min-height:100%;flex-shrink:0;
+}
+
+/* Description below input */
+[data-description] {
+  font-size:0.75rem;line-height:1rem;line-height:1.375;
+}
+
+/* Validation message */
+[data-message] {
+  font-size:0.75rem;line-height:1rem;line-height:1.375;
+}
+
+/* Checkbox icon: focus handling */
+[data-checkbox-icon] {
+  
+}[data-checkbox-icon]:focus{outline:2px solid transparent;outline-offset:2px;}
+
+/* Range slider thumb */
+input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+  border: none;
+}
+
+/* Color input */
+input[type='color'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  padding:0;
+}
+
+[data-input-root] [data-input-icon] {
+  margin-left:0.5rem;margin-right:0.5rem;aspect-ratio:1/1;min-height:100%;flex-shrink:0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  [data-field-root] {
+    padding:0.25rem;
+  }
+  [data-field] {
+    min-height:1.75rem;gap:0.25rem;
+  }
+  [data-description],
+  [data-message] {
+    font-size:0.875rem;line-height:1.25rem;
+  }
+}
+
+/* Base structural styles for display components */
+
+/* Display section: key-value pairs */
+[data-display-section] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-display-title] {
+  font-size:0.875rem;line-height:1.25rem;--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));font-weight:600;
+}
+
+[data-display-field] {
+  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
+}
+
+[data-display-label] {
+  flex-shrink:0;font-size:0.875rem;line-height:1.25rem;
+}
+
+[data-display-value] {
+  text-align:right;font-size:0.875rem;line-height:1.25rem;--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}
+
+/* Badge format: pill style */
+[data-display-value][data-format='badge'] {
+  border-radius:9999px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;font-size:0.75rem;line-height:1rem;font-weight:500;
+}[data-mode="dark"] [data-display-value][data-format="badge"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
+
+/* Boolean format */
+[data-display-value][data-format='boolean'] {
+  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+}
+
+/* Display table wrapper */
+[data-display-table] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+/* Display card grid */
+[data-display-cards] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-display-grid] {
+  display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:0.75rem;
+}
+
+@media (min-width: 640px) {
+  [data-display-grid] {
+    grid-template-columns:repeat(2,minmax(0,1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  [data-display-grid] {
+    grid-template-columns:repeat(3,minmax(0,1fr));
+  }
+}
+
+[data-display-card] {
+  display:flex;flex-direction:column;gap:0.25rem;border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-200),var(--un-border-opacity));border-radius:0.25rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface),var(--un-bg-opacity));padding:0.75rem;
+}[data-mode="dark"] [data-display-card]{--un-border-opacity:1;border-color:rgba(var(--color-surface-800),var(--un-border-opacity));}
+
+[data-display-card][data-selected] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary),var(--un-ring-opacity));
+}
+
+[data-selectable] [data-display-card] {
+  cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
+}
+
+[data-selectable] [data-display-card]:hover {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
+}[data-mode="dark"] [data-selectable] [data-display-card]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
+
+/* Display list */
+[data-display-list] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-display-list] ul {
+  display:flex;flex-direction:column;gap:0.25rem;
+}
+
+[data-display-list-item] {
+  display:flex;align-items:baseline;gap:1rem;border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-200),var(--un-border-opacity));padding-top:0.25rem;padding-bottom:0.25rem;
+}[data-display-list-item]:last-child{border-width:0px;}[data-mode="dark"] [data-display-list-item]{--un-border-opacity:1;border-color:rgba(var(--color-surface-800),var(--un-border-opacity));}
+
+[data-display-list-item] [data-display-field] {
+  display:flex;gap:0.25rem;
+}
+
+/* Tilt — base structural styles */
+
+[data-tilt] {
+  perspective: var(--tilt-perspective, 600px);
+}
+
+[data-tilt] > * {
+  transform: rotateX(var(--tilt-rotate-x, 0deg)) rotateY(var(--tilt-rotate-y, 0deg));
+  transition: transform 0.1s ease-out;
+}
+
+[data-tilt][data-tilt-brightness] > * {
+  filter: brightness(var(--tilt-brightness, 1));
+}
+
+/* Shine — base structural styles */
+
+[data-shine-filter] {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
+
+[data-shine] {
+  display: inline-block;
+}
+
+/* BreadCrumbs — base structural styles */
+
+[data-breadcrumbs] {
+  display: block;
+}
+
+[data-breadcrumb-list] {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 0.25rem;
+}
+
+[data-breadcrumb-item] {
+  display: flex;
+  align-items: center;
+}
+
+[data-breadcrumb-separator] {
+  display: flex;
+  align-items: center;
+  opacity: 0.5;
+}
+
+[data-breadcrumb-link] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
+}
+
+[data-breadcrumb-current] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-weight: 600;
+}
+
+/* Card — base structural styles */
+
+[data-card] {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+}
+
+button[data-card] {
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: inherit;
+  font: inherit;
+  padding: 0;
+}
+
+a[data-card] {
+  cursor: pointer;
+}
+
+[data-card-header] {
+  padding: 1rem 1rem 0.5rem;
+}
+
+[data-card-body] {
+  padding: 0.5rem 1rem;
+  flex: 1;
+}
+
+[data-card-footer] {
+  padding: 0.5rem 1rem 1rem;
+}
+
+/* ProgressBar — base structural styles */
+
+[data-progress] {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+[data-progress-bar] {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+[data-progress][data-indeterminate] [data-progress-bar] {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+    width: 50%;
+  }
+  50% {
+    transform: translateX(50%);
+    width: 50%;
+  }
+  100% {
+    transform: translateX(200%);
+    width: 50%;
+  }
+}
+
+/* Carousel — base structural styles */
+
+[data-carousel] {
+  position: relative;
+  overflow: hidden;
+  outline: none;
+}
+
+[data-carousel-viewport] {
+  overflow: hidden;
+  width: 100%;
+}
+
+/* ─── Slide transition ─── */
+
+[data-carousel-transition='slide'] [data-carousel-track] {
+  display: flex;
+  transition: transform 0.4s ease;
+  transform: translateX(calc(-100% * var(--carousel-current, 0)));
+}
+
+[data-carousel-transition='slide'] [data-carousel-slide] {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+/* ─── Fade transition ─── */
+
+[data-carousel-transition='fade'] [data-carousel-track] {
+  position: relative;
+}
+
+[data-carousel-transition='fade'] [data-carousel-slide] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+[data-carousel-transition='fade'] [data-carousel-slide][data-active] {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ─── No transition ─── */
+
+[data-carousel-transition='none'] [data-carousel-track] {
+  display: flex;
+  transform: translateX(calc(-100% * var(--carousel-current, 0)));
+}
+
+[data-carousel-transition='none'] [data-carousel-slide] {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+/* ─── Arrow buttons ─── */
+
+[data-carousel-prev],
+[data-carousel-next] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3);
+  color: white;
+  font-size: 1.25rem;
+  z-index: 1;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+[data-carousel-prev]:hover,
+[data-carousel-next]:hover {
+  opacity: 1;
+}
+
+[data-carousel-prev]:disabled,
+[data-carousel-next]:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+[data-carousel-prev] {
+  left: 0.5rem;
+}
+
+[data-carousel-next] {
+  right: 0.5rem;
+}
+
+/* ─── Dots ─── */
+
+[data-carousel-dots] {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+}
+
+[data-carousel-dot] {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  background: currentColor;
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+  padding: 0;
+}
+
+[data-carousel-dot][data-active] {
+  opacity: 1;
+}
+
+[data-carousel-dot]:hover {
+  opacity: 0.7;
+}
+
+/* Pill — base structural styles */
+
+[data-pill] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.125rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  outline: none;
+  vertical-align: middle;
+}
+
+[data-pill-icon] {
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+[data-pill-text] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-pill-remove] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin-left: 0.125rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+[data-pill-remove]:hover {
+  opacity: 1;
+}
+
+[data-pill-remove]:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+[data-pill-disabled] {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Rating — base structural styles */
+
+[data-rating] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  outline: none;
+  cursor: pointer;
+}
+
+[data-rating-disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+[data-rating-item] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 1.5rem;
+  transition:
+    transform 0.15s ease,
+    opacity 0.15s ease;
+  user-select: none;
+}
+
+[data-rating-disabled] [data-rating-item] {
+  cursor: default;
+}
+
+[data-rating-item]:not([data-filled]) {
+  opacity: 0.3;
+}
+
+[data-rating-item][data-hovering] {
+  transform: scale(1.15);
+}
+
+[data-rating-item][data-filled] {
+  opacity: 1;
+}
+
+/* Stepper — base structural styles */
+
+[data-stepper] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+[data-stepper][data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+/* ─── Step container ─── */
+
+[data-stepper-step] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+/* ─── Step circle ─── */
+
+[data-stepper-circle] {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.875rem;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-stepper-circle]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+[data-stepper-step][data-completed] [data-stepper-circle] {
+  background-color: var(--color-primary-500, #3b82f6);
+  border-color: var(--color-primary-500, #3b82f6);
+  color: white;
+}
+
+[data-stepper-step][data-active] [data-stepper-circle] {
+  border-color: var(--color-primary-500, #3b82f6);
+  color: var(--color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, transparent);
+}
+
+/* ─── Connector line ─── */
+
+[data-stepper-connector] {
+  flex: 1;
+  height: 2px;
+  min-width: 2rem;
+  align-self: center;
+  /* Vertically center with the circle (half of 2.5rem) */
+  margin-top: 1.25rem;
+  background-color: var(--color-surface-300, #d1d5db);
+  transition: background-color 0.2s ease;
+}
+
+[data-stepper-connector][data-completed] {
+  background-color: var(--color-primary-500, #3b82f6);
+}
+
+/* Vertical orientation connectors */
+[data-stepper][data-orientation='vertical'] [data-stepper-connector] {
+  width: 2px;
+  height: 2rem;
+  min-width: auto;
+  margin-top: 0;
+  margin-left: 1.25rem;
+  align-self: flex-start;
+}
+
+/* ─── Label ─── */
+
+[data-stepper-label] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
+}
+
+/* ─── Sub-stage dots ─── */
+
+[data-stepper-dots] {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
+}
+
+[data-stepper-dot] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-surface-400, #9ca3af);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+[data-stepper-dot]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+[data-stepper-dot][data-completed] {
+  background-color: var(--color-primary-500, #3b82f6);
+  border-color: var(--color-primary-500, #3b82f6);
+}
+
+[data-stepper-dot][data-active] {
+  border-color: var(--color-primary-500, #3b82f6);
+  background-color: var(--color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent);
+}
+
+/* ─── Content area ─── */
+
+[data-stepper-content] {
+  width: 100%;
+  margin-top: 1.5rem;
+}
+
+/**
+ * Switch - Base Structural Styles
+ *
+ * These styles provide layout, positioning, size variants, and transitions.
+ * No colors, shadows, or visual theming — those belong in theme styles.
+ */
+
+/* =============================================================================
+   Switch Root (button)
+   ============================================================================= */
+
+[data-switch] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  user-select: none;
+}
+
+[data-switch]:focus {
+  outline: none;
+}
+
+[data-switch][data-switch-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Track
+   ============================================================================= */
+
+[data-switch-track] {
+  position: relative;
+  display: inline-block;
+  border-radius: 9999px;
+  transition: background-color 200ms ease;
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Thumb
+   ============================================================================= */
+
+[data-switch-thumb] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(0);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 200ms ease,
+    background-color 200ms ease;
+}
+
+[data-switch][aria-checked='true'] [data-switch-thumb] {
+  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+/* Small: track 28×16, thumb 12px */
+[data-switch][data-switch-size='sm'] [data-switch-track] {
+  width: 1.75rem;
+  height: 1rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-thumb] {
+  width: 0.75rem;
+  height: 0.75rem;
+  left: 0.125rem;
+  --switch-thumb-travel: 0.75rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-icon] {
+  font-size: 0.5rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-label] {
+  font-size: 0.75rem;
+}
+
+/* Medium (default): track 44×24, thumb 18px */
+[data-switch][data-switch-size='md'] [data-switch-track],
+[data-switch]:not([data-switch-size]) [data-switch-track] {
+  width: 2.75rem;
+  height: 1.5rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-thumb],
+[data-switch]:not([data-switch-size]) [data-switch-thumb] {
+  width: 1.125rem;
+  height: 1.125rem;
+  left: 0.1875rem;
+  --switch-thumb-travel: 1.25rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-icon],
+[data-switch]:not([data-switch-size]) [data-switch-icon] {
+  font-size: 0.625rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-label],
+[data-switch]:not([data-switch-size]) [data-switch-label] {
+  font-size: 0.875rem;
+}
+
+/* Large: track 56×32, thumb 24px */
+[data-switch][data-switch-size='lg'] [data-switch-track] {
+  width: 3.5rem;
+  height: 2rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-thumb] {
+  width: 1.5rem;
+  height: 1.5rem;
+  left: 0.25rem;
+  --switch-thumb-travel: 1.5rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-icon] {
+  font-size: 0.75rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-label] {
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Label
+   ============================================================================= */
+
+[data-switch-label] {
+  font-weight: 500;
+  user-select: none;
+}
+
+/* =============================================================================
+   Icon (inside thumb)
+   ============================================================================= */
+
+[data-switch-icon] {
+  flex-shrink: 0;
+}
+
+/**
+ * Table - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Table Container
+   ============================================================================= */
+
+[data-table] {
+  overflow-x: auto;
+}
+
+[data-table][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-table] table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+/* =============================================================================
+   Caption
+   ============================================================================= */
+
+[data-table-caption] {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5rem 0.75rem;
+  caption-side: top;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-table-header] th {
+  text-align: left;
+  font-weight: 600;
+  white-space: nowrap;
+  user-select: none;
+}
+
+[data-table-header-cell] {
+  display: table-cell;
+  cursor: default;
+}
+
+[data-table-header-cell][data-sortable='true'] {
+  cursor: pointer;
+}
+
+[data-table-header-text] {
+  vertical-align: middle;
+}
+
+[data-table-sort-icon] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+  opacity: 0.4;
+  transition: opacity 150ms ease;
+}
+
+[data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
+[data-table-header-cell][data-sort-order='descending'] [data-table-sort-icon] {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Body & Rows
+   ============================================================================= */
+
+[data-table-row] {
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+[data-table-row]:focus {
+  outline: none;
+}
+
+/* =============================================================================
+   Cells
+   ============================================================================= */
+
+[data-table-cell] {
+  vertical-align: middle;
+}
+
+[data-cell-icon] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.375rem;
+  flex-shrink: 0;
+}
+
+[data-cell-value] {
+  vertical-align: middle;
+}
+
+/* =============================================================================
+   Empty State
+   ============================================================================= */
+
+[data-table-empty] {
+  text-align: center;
+  font-style: italic;
+  opacity: 0.6;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+[data-table][data-size='sm'] [data-table-header-cell],
+[data-table][data-size='sm'] [data-table-cell] {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-table][data-size='sm'] [data-table-caption] {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-table][data-size='md'] [data-table-header-cell],
+[data-table]:not([data-size]) [data-table-header-cell],
+[data-table][data-size='md'] [data-table-cell],
+[data-table]:not([data-size]) [data-table-cell] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-table][data-size='md'] [data-table-caption],
+[data-table]:not([data-size]) [data-table-caption] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-table][data-size='lg'] [data-table-header-cell],
+[data-table][data-size='lg'] [data-table-cell] {
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+[data-table][data-size='lg'] [data-table-caption] {
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+[data-table-empty] {
+  padding: 1.5rem 0.75rem;
+}
+
+/**
+ * SearchFilter - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-search-filter] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* =============================================================================
+   Input Wrapper
+   ============================================================================= */
+
+[data-search-input-wrapper] {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+[data-search-input] {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  outline: none;
+  font-size: inherit;
+  background: transparent;
+}
+
+/* Remove native search decoration */
+[data-search-input]::-webkit-search-decoration,
+[data-search-input]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+[data-search-clear] {
+  position: absolute;
+  right: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1.125rem;
+  line-height: 1;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+/* =============================================================================
+   Tags
+   ============================================================================= */
+
+[data-search-tags] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+[data-search-tag] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+[data-search-tag-text] {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-search-tag-remove] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1;
+  padding: 0;
+  border-radius: 0.125rem;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+[data-search-filter][data-size='sm'] [data-search-input] {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-search-filter][data-size='md'] [data-search-input],
+[data-search-filter]:not([data-size]) [data-search-input] {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-search-filter][data-size='lg'] [data-search-input] {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+}
+
+[data-search-filter][data-size='sm'] [data-search-tag] {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+}
+
+[data-search-filter][data-size='md'] [data-search-tag],
+[data-search-filter]:not([data-size]) [data-search-tag] {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-search-filter][data-size='lg'] [data-search-tag] {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+/**
+ * Range - Base Structural Styles
+ *
+ * Layout, positioning, and sizing for the range slider.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Range Container
+   ============================================================================= */
+
+[data-range] {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto auto;
+  height: 2.5rem;
+  user-select: none;
+}
+
+[data-range][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Track
+   ============================================================================= */
+
+[data-range-track] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  cursor: pointer;
+}
+
+[data-range-bar] {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  border-radius: 9999px;
+}
+
+[data-range-selected] {
+  position: absolute;
+  top: 50%;
+  height: 4px;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  pointer-events: none;
+}
+
+/* =============================================================================
+   Thumb
+   ============================================================================= */
+
+[data-range-thumb] {
+  position: absolute;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  z-index: 1;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  transition: box-shadow 150ms ease;
+}
+
+[data-range-thumb]:focus {
+  outline: none;
+}
+
+[data-range-thumb]:focus-visible {
+  outline: none;
+}
+
+[data-range-thumb][data-disabled] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Ticks
+   ============================================================================= */
+
+[data-range-ticks] {
+  display: grid;
+  grid-gap: calc((100% - 1rem * (var(--count) + 1)) / var(--count));
+  grid-template-columns: repeat(var(--count), 1rem) 1rem;
+  grid-template-rows: 7px auto;
+}
+
+[data-range-tick] {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-range-tick][data-disabled] {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+[data-tick-bar] {
+  grid-column-start: 2;
+  height: 5px;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+[data-tick-label] {
+  grid-column: span 2;
+  display: flex;
+  justify-content: center;
+  font-size: 0.625rem;
+  line-height: 1.2;
+}
+
+/**
+ * Timeline - Base Structural Styles
+ *
+ * Layout for vertical numbered steps with content beside them.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Timeline Container
+   ============================================================================= */
+
+[data-timeline] {
+  display: flex;
+  flex-direction: column;
+}
+
+/* =============================================================================
+   Timeline Item
+   ============================================================================= */
+
+[data-timeline-item] {
+  display: grid;
+  grid-template-columns: 2.5rem 1fr;
+  gap: 0.75rem;
+}
+
+/* =============================================================================
+   Marker (circle + connector)
+   ============================================================================= */
+
+[data-timeline-marker] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+[data-timeline-circle] {
+  width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-timeline-connector] {
+  width: 2px;
+  flex: 1;
+  min-height: 1.5rem;
+  transition: background-color 0.2s ease;
+}
+
+/* =============================================================================
+   Body (title + description + content)
+   ============================================================================= */
+
+[data-timeline-body] {
+  padding-bottom: 1.5rem;
+  min-height: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-top: 0.25rem;
+}
+
+[data-timeline-title] {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+}
+
+[data-timeline-description] {
+  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+/* Reveal — scroll-triggered entry animations */
+
+[data-reveal] {
+  opacity: 0;
+  transition:
+    opacity var(--reveal-duration, 600ms) var(--reveal-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    translate var(--reveal-duration, 600ms) var(--reveal-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+[data-reveal='up'] {
+  translate: 0 var(--reveal-distance, 1.5rem);
+}
+[data-reveal='down'] {
+  translate: 0 calc(-1 * var(--reveal-distance, 1.5rem));
+}
+[data-reveal='left'] {
+  translate: var(--reveal-distance, 1.5rem) 0;
+}
+[data-reveal='right'] {
+  translate: calc(-1 * var(--reveal-distance, 1.5rem)) 0;
+}
+[data-reveal='none'] {
+  translate: 0 0;
+}
+
+[data-reveal][data-reveal-visible] {
+  opacity: 1;
+  translate: 0 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-reveal] {
+    transition-duration: 0ms !important;
+    opacity: 1 !important;
+    translate: 0 !important;
+  }
+}
+
+/* Graph paper — minor + major grid background utility
+ *
+ * Override any variable on the element or a parent to customise:
+ *   --unit              minor cell size       (default 0.5rem)
+ *   --size              major cell size       (default calc(5 * --unit))
+ *   --minor-grid        minor line thickness  (default 0.5px)
+ *   --major-grid        major line thickness  (default 0.5px)
+ *   --graph-paper-color line color            (default currentColor)
+ */
+
+/* Grid paper — simple H+V grid (no major/minor distinction)
+ *
+ * Override any variable on the element or a parent to customise:
+ *   --unit              cell size             (default 0.5rem)
+ *   --grid-line         line thickness        (default 0.5px)
+ *   --grid-paper-color  line color            (default currentColor)
+ */
+
+/* Ruled paper — horizontal lines only
+ *
+ * Override any variable on the element or a parent to customise:
+ *   --unit              line spacing          (default 1.5rem)
+ *   --rule-size         line thickness        (default 0.5px)
+ *   --ruled-paper-color line color            (default currentColor)
+ */
+
+[data-graph-paper] {
+  background-image:
+    linear-gradient(
+      var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
+      transparent var(--major-grid, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
+      transparent var(--major-grid, 0.5px)
+    ),
+    linear-gradient(
+      var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
+      transparent var(--minor-grid, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
+      transparent var(--minor-grid, 0.5px)
+    );
+  background-size:
+    var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
+    var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
+    var(--unit, 0.5rem) var(--unit, 0.5rem),
+    var(--unit, 0.5rem) var(--unit, 0.5rem);
+  background-position:
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px));
+}
+
+[data-grid-paper] {
+  background-image:
+    linear-gradient(
+      var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
+      transparent var(--grid-line, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
+      transparent var(--grid-line, 0.5px)
+    );
+  background-size: var(--unit, 0.5rem) var(--unit, 0.5rem);
+  background-position:
+    calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px)),
+    calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px));
+}
+
+[data-ruled-paper] {
+  background-image: linear-gradient(
+    var(--ruled-paper-color, currentColor) var(--rule-size, 0.5px),
+    transparent var(--rule-size, 0.5px)
+  );
+  background-size: 100% var(--unit, 1.5rem);
+  background-position: 0 calc(-1 * var(--rule-size, 0.5px));
+}
+
+/**
+ * FloatingNavigation - Base Structural Styles
+ *
+ * Layout, positioning, transitions, and animations.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-floating-nav] {
+  position: fixed;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  overflow: hidden;
+  transition:
+    width var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    height var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  [data-floating-nav] {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+  [data-floating-nav] * {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+}
+
+/* =============================================================================
+   Position Variants
+   ============================================================================= */
+
+/* Right edge — vertically centered */
+[data-floating-nav][data-position='right'] {
+  right: 1rem;
+  top: 50%;
+  translate: 0 -50%;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-right 0.5s ease-out 0.5s both;
+}
+
+/* Left edge — vertically centered */
+[data-floating-nav][data-position='left'] {
+  left: 1rem;
+  top: 50%;
+  translate: 0 -50%;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-left 0.5s ease-out 0.5s both;
+}
+
+/* Top edge — horizontally centered */
+[data-floating-nav][data-position='top'] {
+  top: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: row;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-top 0.5s ease-out 0.5s both;
+}
+
+/* Bottom edge — horizontally centered */
+[data-floating-nav][data-position='bottom'] {
+  bottom: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: row;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-bottom 0.5s ease-out 0.5s both;
+}
+
+/* =============================================================================
+   Entrance Animations
+   ============================================================================= */
+
+@keyframes fn-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fn-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fn-slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fn-slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Header (Title + Pin)
+   ============================================================================= */
+
+[data-floating-nav-header] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  min-height: 2rem;
+}
+
+/* Vertical positions: header above items */
+[data-floating-nav][data-position='left'] [data-floating-nav-header],
+[data-floating-nav][data-position='right'] [data-floating-nav-header] {
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* When expanded, push pin to end */
+[data-floating-nav][data-expanded] [data-floating-nav-header] {
+  justify-content: space-between;
+}
+
+/* Horizontal positions: header before items */
+[data-floating-nav][data-position='top'] [data-floating-nav-header],
+[data-floating-nav][data-position='bottom'] [data-floating-nav-header] {
+  flex-direction: column;
+  justify-content: center;
+}
+
+[data-floating-nav-title] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--fn-label-duration, 200ms) ease;
+}
+
+[data-floating-nav][data-expanded] [data-floating-nav-title] {
+  opacity: 1;
+}
+
+[data-floating-nav-pin] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background: transparent;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-floating-nav-pin]:hover {
+  transform: scale(1.1);
+}
+
+[data-floating-nav-pin]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+   Items Container
+   ============================================================================= */
+
+[data-floating-nav-items] {
+  position: relative;
+  display: flex;
+  padding: 0.25rem;
+  gap: 0.125rem;
+}
+
+/* Vertical layout (left/right positions) */
+[data-floating-nav][data-position='left'] [data-floating-nav-items],
+[data-floating-nav][data-position='right'] [data-floating-nav-items] {
+  flex-direction: column;
+}
+
+/* Horizontal layout (top/bottom positions) */
+[data-floating-nav][data-position='top'] [data-floating-nav-items],
+[data-floating-nav][data-position='bottom'] [data-floating-nav-items] {
+  flex-direction: row;
+}
+
+/* =============================================================================
+   Navigation Items
+   ============================================================================= */
+
+[data-floating-nav-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  background: transparent;
+  transition:
+    transform 150ms ease,
+    background-color 150ms ease;
+  animation: fn-item-enter 0.3s ease both;
+  animation-delay: calc(var(--fn-index, 0) * 60ms + 0.6s);
+}
+
+@keyframes fn-item-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+[data-floating-nav-item]:hover {
+  transform: scale(1.02);
+}
+
+[data-floating-nav-item]:active {
+  transform: scale(0.98);
+}
+
+[data-floating-nav-item]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+}
+
+/* =============================================================================
+   Size Variants — Items
+   ============================================================================= */
+
+/* Small */
+[data-floating-nav][data-size='sm'] [data-floating-nav-item] {
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+}
+
+[data-floating-nav][data-size='sm'] [data-floating-nav-icon] {
+  font-size: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Medium (default) */
+[data-floating-nav][data-size='md'] [data-floating-nav-item],
+[data-floating-nav]:not([data-size]) [data-floating-nav-item] {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-floating-nav][data-size='md'] [data-floating-nav-icon],
+[data-floating-nav]:not([data-size]) [data-floating-nav-icon] {
+  font-size: 1.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Large */
+[data-floating-nav][data-size='lg'] [data-floating-nav-item] {
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+}
+
+[data-floating-nav][data-size='lg'] [data-floating-nav-icon] {
+  font-size: 1.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+/* =============================================================================
+   Icon & Label
+   ============================================================================= */
+
+[data-floating-nav-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+[data-floating-nav-label] {
+  overflow: hidden;
+  max-width: 0;
+  opacity: 0;
+  transition:
+    max-width var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    opacity var(--fn-label-duration, 200ms) ease;
+}
+
+/* Expanded: reveal labels */
+[data-floating-nav][data-expanded] [data-floating-nav-label] {
+  max-width: 12rem;
+  opacity: 1;
+}
+
+/* =============================================================================
+   Active Indicator
+   ============================================================================= */
+
+[data-floating-nav-indicator] {
+  position: absolute;
+  border-radius: 0.25rem;
+  pointer-events: none;
+  transition:
+    top var(--fn-indicator-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1),
+    left var(--fn-indicator-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Vertical indicator (left/right positions) — bar on the side */
+[data-floating-nav][data-position='left'] [data-floating-nav-indicator] {
+  right: 0;
+  width: 3px;
+  height: 1.5rem;
+  top: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+[data-floating-nav][data-position='right'] [data-floating-nav-indicator] {
+  left: 0;
+  width: 3px;
+  height: 1.5rem;
+  top: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+/* Horizontal indicator (top/bottom positions) — bar on the edge */
+[data-floating-nav][data-position='top'] [data-floating-nav-indicator] {
+  bottom: 0;
+  height: 3px;
+  width: 1.5rem;
+  left: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+[data-floating-nav][data-position='bottom'] [data-floating-nav-indicator] {
+  top: 0;
+  height: 3px;
+  width: 1.5rem;
+  left: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+/* Size adjustments for indicator position */
+[data-floating-nav][data-size='sm'][data-position='left'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='sm'][data-position='right'] [data-floating-nav-indicator] {
+  height: 1.25rem;
+  top: calc(var(--fn-active-index, 0) * (2rem + 0.125rem) + 0.375rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='lg'][data-position='left'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='lg'][data-position='right'] [data-floating-nav-indicator] {
+  height: 1.75rem;
+  top: calc(var(--fn-active-index, 0) * (3rem + 0.125rem) + 0.625rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='sm'][data-position='top'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='sm'][data-position='bottom'] [data-floating-nav-indicator] {
+  width: 1.25rem;
+  left: calc(var(--fn-active-index, 0) * (2rem + 0.125rem) + 0.375rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='lg'][data-position='top'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='lg'][data-position='bottom'] [data-floating-nav-indicator] {
+  width: 1.75rem;
+  left: calc(var(--fn-active-index, 0) * (3rem + 0.125rem) + 0.625rem + 0.25rem);
+}
+
+/**
+ * Grid - Base Structural Styles
+ *
+ * Layout: CSS grid with auto-fill, tile padding/sizing.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Grid Container
+   ============================================================================= */
+
+[data-grid] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-size, 120px), 1fr));
+  gap: var(--grid-gap, 1rem);
+}
+
+[data-grid][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Grid Tiles
+   ============================================================================= */
+
+[data-grid-item] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+  background: transparent;
+  text-align: center;
+  word-break: break-word;
+}
+
+[data-grid-item]:focus {
+  outline: none;
+}
+
+[data-grid-item][data-disabled],
+[data-grid-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+[data-grid][data-size='sm'] [data-grid-item] {
+  padding: 0.5rem;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}
+
+[data-grid][data-size='md'] [data-grid-item],
+[data-grid]:not([data-size]) [data-grid-item] {
+  padding: 1rem;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+[data-grid][data-size='lg'] [data-grid-item] {
+  padding: 1.5rem;
+  gap: 0.75rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements (reuse shared data-item-* from item.css)
+   ============================================================================= */
+
+[data-grid-item] [data-item-icon] {
+  font-size: 1.5rem;
+}
+
+[data-grid][data-size='sm'] [data-grid-item] [data-item-icon] {
+  font-size: 1.25rem;
+}
+
+[data-grid][data-size='lg'] [data-grid-item] [data-item-icon] {
+  font-size: 2rem;
+}
+
+/**
+ * UploadTarget - Base Structural Styles
+ *
+ * Layout: flex centering, dashed border, sizing, transitions.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Drop Zone Container
+   ============================================================================= */
+
+[data-upload-target] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 10rem;
+  padding: 2rem;
+  border: 2px dashed currentColor;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+  user-select: none;
+}
+
+[data-upload-target]:focus {
+  outline: none;
+}
+
+[data-upload-target][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Upload Icon
+   ============================================================================= */
+
+[data-upload-target] [data-upload-icon] {
+  font-size: 2rem;
+}
+
+/* =============================================================================
+   Browse Button
+   ============================================================================= */
+
+[data-upload-target] [data-upload-button] {
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-upload-target] [data-upload-button]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/**
+ * UploadProgress - Base Structural Styles
+ *
+ * Layout: header flex, file row layout, progress bar track, action positioning.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-upload-progress] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-upload-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+[data-upload-clear] {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   File Status
+   ============================================================================= */
+
+[data-upload-file-status] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  transition: background-color 150ms ease;
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-upload-file-icon] {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+}
+
+[data-upload-file-name] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-upload-file-size] {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-upload-bar] {
+  position: relative;
+  width: 6rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+[data-upload-fill] {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+/* =============================================================================
+   Status Badge
+   ============================================================================= */
+
+[data-upload-status] {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-upload-actions] {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+[data-upload-actions] button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  background: transparent;
+  font-size: 0.875rem;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   Grid View Tiles
+   ============================================================================= */
+
+[data-grid] [data-upload-file-status] {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1rem;
+  gap: 0.5rem;
+}
+
+[data-grid] [data-upload-file-status] [data-upload-file-icon] {
+  font-size: 2rem;
+}
+
+[data-grid] [data-upload-file-status] [data-upload-bar] {
+  width: 100%;
+}
+