@rcarls/rc-theme-tailwind 0.0.0-next-20261103014840

package/components/icons.css

@@ -0,0 +1,19 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    :where(
+      [data-rc-icon],
+      [data-rc-button-icon],
+      [data-rc-button-selected-icon],
+      [data-rc-navigation-icon]
+    ) {
+    display: inline-grid;
+    place-items: center;
+    font-size: var(--rc-icon-font-size, 1.5rem);
+    /*
+     * Unlayered icon-font boilerplate otherwise beats this layered theme rule.
+     * Keep the geometry invariant important, but let consumers opt out by
+     * overriding the normally-cascaded custom property.
+     */
+    line-height: var(--rc-icon-font-line-height, var(--rc-icon-font-size, 1.5rem)) !important;
+  }
+}

package/components/list-item.css

@@ -0,0 +1,70 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) {
+    /* Compatibility tokens retained for rc-listbox and embedded selectors. */
+    --rc-list-item-gap: var(--tailwind-item-gap, 0.5rem);
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--tailwind-item-padding-block, 0.55rem);
+    --rc-list-item-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+    --rc-list-item-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-list-item-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-list-item-selected-bg: var(--rc-highlight, Highlight);
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-list-item-disabled-opacity: var(--rc-disabled-opacity, 0.52);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-list {
+    --rc-list-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+    --rc-list-leading-gap: var(--tailwind-item-gap, 0.5rem);
+    --rc-list-trailing-gap: var(--tailwind-item-gap, 0.5rem);
+    --rc-list-row-gap: 0;
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--tailwind-item-padding-block, 0.55rem);
+    --rc-list-item-color: var(--rc-field-text, FieldText);
+    --rc-list-item-background: transparent;
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-list-item-selected-background: var(--rc-highlight, Highlight);
+    --rc-list-item-divider: 1px solid var(--tailwind-border-color, GrayText);
+    --rc-list-item-state-layer-color: var(--rc-accent, Highlight);
+    --rc-list-item-hover-state-layer-opacity: 0.1;
+    --rc-list-item-focus-state-layer-opacity: 0.12;
+    --rc-list-item-pressed-state-layer-opacity: 0.16;
+    --rc-list-item-disabled-opacity: var(--rc-disabled-opacity, 0.52);
+    --rc-list-item-transition-duration: var(--rc-motion-effects-duration-fast, 100ms);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-list[variant='segmented'] {
+    --rc-list-padding-inline: 0;
+    --rc-list-row-gap: 0.25rem;
+    --rc-list-item-background: var(--tailwind-surface-raised, Field);
+    --rc-list-item-divider: 0;
+    --rc-list-item-border: 1px solid var(--tailwind-border-color, GrayText);
+    --rc-list-item-border-radius: var(--tailwind-radius-md, 0.375rem);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-list-item
+    > :where([data-rc-list-supporting], small) {
+    display: block;
+    color: var(--tailwind-on-surface-muted, GrayText);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-list-item
+    > :is(input[type='checkbox'], input[type='radio'])[slot='leading'] {
+    margin: 0;
+    accent-color: var(--rc-accent, Highlight);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-listbox,
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) [part~='listbox'] {
+    --rc-listbox-option-gap: var(--rc-list-item-gap);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline);
+    --rc-listbox-hover-bg: var(--rc-list-item-hover-bg);
+    --rc-listbox-active-bg: var(--rc-list-item-active-bg);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color);
+    --rc-listbox-disabled-opacity: var(--rc-list-item-disabled-opacity);
+  }
+}

package/components/listbox.css

@@ -0,0 +1,29 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-listbox {
+    --rc-listbox-option-gap: var(--rc-list-item-gap, var(--tailwind-item-gap, 0.5rem));
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --rc-listbox-option-padding-block: var(--tailwind-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+    --rc-listbox-option-transition:
+      background-color var(--tailwind-motion-effects-duration-default, 160ms)
+        var(--tailwind-motion-easing, ease),
+      color var(--tailwind-motion-effects-duration-default, 160ms)
+        var(--tailwind-motion-easing, ease);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+    display: block;
+    border-radius: var(--tailwind-radius-lg, 0.75rem);
+    font: var(--rc-font-weight, 400) var(--rc-font-size, 1em) / var(--rc-line-height, normal)
+      var(--rc-font-family, inherit);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-listbox[checkmark]
+    [part~='option-checkmark'] {
+    color: var(--rc-accent, Highlight);
+  }
+}

package/components/markdown-editor.css

@@ -0,0 +1,53 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-markdown-editor {
+    --rc-markdown-editor-padding: 0.75rem;
+    --rc-markdown-editor-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-border-radius: 0 0 var(--tailwind-radius-lg, 0.75rem)
+      var(--tailwind-radius-lg, 0.75rem);
+    --rc-markdown-editor-background: var(--rc-field, Field);
+    --rc-markdown-editor-color: var(--rc-field-text, FieldText);
+    --rc-markdown-editor-toolbar-background: var(--tailwind-surface-raised, Canvas);
+    --rc-markdown-editor-toolbar-color: var(--tailwind-on-surface, CanvasText);
+    --rc-markdown-editor-toolbar-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-toolbar-gap: 0.125rem;
+    --rc-markdown-editor-toolbar-padding: 0.25rem;
+    --rc-markdown-editor-toolbar-radius: var(--tailwind-radius-lg, 0.75rem)
+      var(--tailwind-radius-lg, 0.75rem) 0 0;
+    --rc-markdown-editor-toolbar-button-size: var(--rc-control-block-size, 2.5rem);
+    --rc-markdown-editor-toolbar-button-color: var(--tailwind-on-surface, ButtonText);
+    --rc-markdown-editor-toolbar-button-border: 1px solid transparent;
+    --rc-markdown-editor-toolbar-button-radius: var(--tailwind-radius-md, 0.5rem);
+    --rc-markdown-editor-toolbar-button-active-background: var(
+      --tailwind-primary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-button-active-color: var(
+      --tailwind-on-primary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-button-active-border: 1px solid var(--tailwind-primary, Highlight);
+    --rc-markdown-editor-toolbar-focus-outline: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-markdown-editor-toolbar-focus-outline-offset: var(--rc-focus-ring-offset, 2px);
+    --rc-markdown-editor-toolbar-select-background: var(--tailwind-field, Field);
+    --rc-markdown-editor-toolbar-select-color: var(--tailwind-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-select-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-toolbar-select-radius: var(--tailwind-radius-sm, 0.25rem);
+    --rc-markdown-editor-toolbar-select-active-background: var(
+      --tailwind-primary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-select-active-color: var(
+      --tailwind-on-primary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-select-active-border-color: var(--tailwind-primary, Highlight);
+    --rc-markdown-editor-toolbar-input-background: var(--tailwind-field, Field);
+    --rc-markdown-editor-toolbar-input-color: var(--tailwind-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-input-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-markdown-editor-toolbar-input-radius: var(--tailwind-radius-sm, 0.25rem);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-markdown-editor::part(rich-view) {
+    line-height: var(--rc-line-height, normal);
+  }
+}

package/components/menu-button.css

@@ -0,0 +1,18 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-menu-button {
+    --rc-menu-button-trigger-background: var(--rc-button-bg, ButtonFace);
+    --rc-menu-button-trigger-color: var(--rc-button-text, ButtonText);
+    --rc-menu-button-trigger-hover-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 10%,
+      var(--rc-button-bg, ButtonFace)
+    );
+    --rc-menu-button-trigger-open-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 16%,
+      var(--rc-button-bg, ButtonFace)
+    );
+    --rc-menu-button-indicator-color: var(--rc-accent, Highlight);
+    display: inline-block;
+  }
+}

package/components/menu.css

@@ -0,0 +1,28 @@
+@layer rc-theme-tailwind.components {
+  /*
+   * Declared on the theme root rather than on rc-menu so menus rendered
+   * inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) {
+    --rc-menu-item-gap: var(--tailwind-item-gap, 0.5rem);
+    --rc-menu-item-min-block-size: 2.25rem;
+    --rc-menu-item-padding-block: var(--tailwind-item-padding-block, 0.55rem);
+    --rc-menu-item-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+    --rc-menu-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-menu-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-menu-check-size: 1.25rem;
+    --rc-menu-background: var(--tailwind-surface-raised, Canvas);
+    --rc-menu-shadow: var(--rc-shadow, none);
+    --rc-menu-padding-block: 0.25rem;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-menu {
+    display: inline-block;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-menu [data-group-label] {
+    color: var(--tailwind-on-surface-muted, GrayText);
+    font-size: 0.8em;
+    font-weight: 650;
+  }
+}

package/components/menubar.css

@@ -0,0 +1,17 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-menubar {
+    --rc-menubar-item-block-size: 2.25rem;
+    --rc-menubar-item-padding-inline: 0.75rem;
+    --rc-menubar-item-background: transparent;
+    --rc-menubar-item-open-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 14%,
+      transparent
+    );
+    display: inline-block;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-menubar::part(root) {
+    gap: 0.125rem;
+  }
+}

package/components/modes.css

@@ -0,0 +1,60 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) {
+    background: var(--tailwind-surface, Canvas);
+    color: var(--tailwind-on-surface, CanvasText);
+    font-family: var(--rc-font-family, inherit);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) *,
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) *::before,
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) *::after {
+    box-sizing: border-box;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) :focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  @supports (view-transition-name: none) {
+    :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) [data-rc-view-transition] {
+      view-transition-name: var(--rc-view-transition-name, none);
+    }
+  }
+
+  /*
+   * The vestibular harm reduced motion guards against is movement across the
+   * visual field, which a color or opacity change does not trigger; removing
+   * every transition over-corrected. Spatial motion still goes fully to
+   * zero. Effects motion is kept but shortened, scaled down from
+   * Tailwind's own already-quick 100/160/240ms scale. The two legacy
+   * primitives (--tailwind-motion-duration and its -slow companion,
+   * predating the effects/spatial split) and the cross-theme compatibility
+   * token stay at zero: dialog.css is their one remaining direct consumer,
+   * animating opacity, display, and transform together in one declaration
+   * that mixes spatial and effects properties and can't be cleanly
+   * classified into one bucket. (That file's own transform-based entrance
+   * is a separate, pre-existing conflict with rc-dialog's pointer-resize
+   * geometry reads and remains outside this theme-level override.)
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .rc-theme-tailwind,
+    :host(.rc-theme-tailwind) {
+      --tailwind-motion-duration: 0ms;
+      --tailwind-motion-duration-slow: 0ms;
+      --tailwind-motion-effects-duration-fast: 40ms;
+      --tailwind-motion-effects-duration-default: 55ms;
+      --tailwind-motion-effects-duration-slow: 70ms;
+      --tailwind-motion-spatial-duration-fast: 0ms;
+      --tailwind-motion-spatial-duration-default: 0ms;
+      --tailwind-motion-spatial-duration-slow: 0ms;
+      --rc-motion-duration: 0ms;
+      --rc-motion-effects-duration-fast: 40ms;
+      --rc-motion-effects-duration-default: 55ms;
+      --rc-motion-effects-duration-slow: 70ms;
+      --rc-motion-spatial-duration-fast: 0ms;
+      --rc-motion-spatial-duration-default: 0ms;
+      --rc-motion-spatial-duration-slow: 0ms;
+    }
+  }
+}

package/components/navigation-bar.css

@@ -0,0 +1,43 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-navigation-bar {
+    --rc-navigation-bar-bg: var(--rc-surface, Canvas);
+    --rc-navigation-bar-color: var(--rc-color, CanvasText);
+    --rc-navigation-bar-block-size: 4rem;
+    --rc-navigation-bar-padding-block: 0;
+    --rc-navigation-bar-padding-inline: 0;
+    --rc-navigation-bar-gap: 0;
+    --rc-navigation-bar-item-gap: 0.25rem;
+    --rc-navigation-bar-item-min-block-size: 3rem;
+    --rc-navigation-bar-item-padding-block: 0.5rem;
+    --rc-navigation-bar-item-padding-inline: var(--rc-item-padding-inline, 0.75rem);
+    --rc-navigation-bar-item-color: var(--rc-muted-color, CanvasText);
+    --rc-navigation-bar-item-text-decoration: none;
+    --rc-navigation-bar-active-color: var(--rc-accent, Highlight);
+    --rc-navigation-bar-indicator-bg: transparent;
+    --rc-navigation-bar-indicator-border: 0;
+    --rc-navigation-bar-indicator-radius: 0;
+    --rc-navigation-bar-indicator-duration: 0ms;
+    --rc-navigation-bar-indicator-easing: ease;
+    --rc-icon-font-line-height: 2.5rem;
+    --rc-navigation-bar-focus-ring: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-navigation-bar-focus-ring-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-navigation-bar
+    > a
+    :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--rc-radius-pill, 9999px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-navigation-bar
+    > a[aria-current]:not([aria-current='false']) {
+    border-radius: var(--rc-radius-md, 0.5rem);
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 12%, transparent);
+  }
+}

package/components/navigation-rail.css

@@ -0,0 +1,72 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-navigation-rail {
+    --rc-navigation-rail-bg: var(--rc-surface, Canvas);
+    --rc-navigation-rail-color: var(--rc-color, CanvasText);
+    --rc-navigation-rail-inline-size: 6rem;
+    --rc-navigation-rail-expanded-inline-size: 15rem;
+    --rc-navigation-rail-padding-block: 0.75rem;
+    --rc-navigation-rail-padding-inline: 0.5rem;
+    --rc-navigation-rail-gap: var(--rc-item-gap, 0.75rem);
+    --rc-navigation-rail-item-gap: var(--rc-item-gap, 0.75rem);
+    --rc-navigation-rail-link-gap: 0.25rem;
+    --rc-navigation-rail-item-min-block-size: 3.5rem;
+    --rc-navigation-rail-expanded-item-min-block-size: 3.5rem;
+    --rc-navigation-rail-item-padding-block: 0.25rem;
+    --rc-navigation-rail-item-padding-inline: 0.5rem;
+    --rc-navigation-rail-expanded-item-padding-inline: var(--rc-item-padding-inline, 1rem);
+    --rc-navigation-rail-item-color: var(--rc-muted-color, CanvasText);
+    --rc-navigation-rail-item-text-decoration: none;
+    --rc-navigation-rail-active-color: var(--rc-accent, Highlight);
+    --rc-navigation-rail-indicator-bg: transparent;
+    --rc-navigation-rail-indicator-border: 0;
+    --rc-navigation-rail-indicator-radius: 0;
+    --rc-navigation-rail-indicator-duration: 0ms;
+    --rc-navigation-rail-indicator-easing: ease;
+    --rc-icon-font-line-height: 2.5rem;
+    --rc-navigation-rail-toggle-size: 3rem;
+    --rc-navigation-rail-toggle-inline-offset: 0.5rem;
+    --rc-navigation-rail-duration: var(--rc-motion-duration, 200ms);
+    --rc-navigation-rail-easing: ease;
+    --rc-navigation-rail-focus-ring: var(--rc-focus-ring, 2px solid Highlight);
+    --rc-navigation-rail-focus-ring-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-navigation-rail > a {
+    inline-size: 100%;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-navigation-rail
+    > a[aria-current]:not([aria-current='false']) {
+    border-radius: var(--rc-radius-md, 0.5rem);
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 12%, transparent);
+  }
+
+  /*
+   * Size the icon itself (whether a direct `<a>` child or nested in
+   * [data-rc-navigation-indicator]) rather than the indicator wrapper, so the
+   * wrapper stays sized to its normal-flow content (icon + label) and the
+   * active-state background above wraps the whole item, not just the icon.
+   */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-navigation-rail:not([expanded])
+    > a
+    [data-rc-navigation-icon] {
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--rc-radius-pill, 9999px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-navigation-rail[expanded]
+    > a
+    > :where([data-rc-navigation-icon], [data-rc-navigation-indicator]) {
+    justify-content: flex-start;
+    gap: var(--rc-item-gap, 0.75rem);
+    inline-size: 100%;
+    block-size: 3.5rem;
+    padding-inline: var(--rc-item-padding-inline, 1rem);
+    box-sizing: border-box;
+    text-align: start;
+  }
+}

package/components/page-turner.css

@@ -0,0 +1,19 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-page-turner {
+    --rc-page-turner-color: var(--color-slate-950, CanvasText);
+    --rc-page-turner-duration: var(--rc-motion-spatial-duration-default, 400ms);
+    --rc-page-turner-easing: var(--rc-motion-spatial-easing-default, cubic-bezier(0.2, 0, 0, 1));
+    --rc-page-turner-page-back-background: var(--color-slate-50, Canvas);
+    --rc-page-turner-navigation-button-background: color-mix(
+      in srgb,
+      var(--color-slate-50, Canvas) 75%,
+      transparent
+    );
+    --rc-page-turner-navigation-button-color: var(--color-slate-950, CanvasText);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-page-turner-page {
+    --rc-page-turner-page-background: var(--color-slate-50, Canvas);
+    --rc-page-turner-page-color: var(--color-slate-950, CanvasText);
+  }
+}

package/components/pagination.css

@@ -0,0 +1,50 @@
+@layer rc-theme-tailwind.components {
+  /* Compact square page buttons with the current page on the primary container. */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-pagination {
+    --rc-pagination-gap: 0.25rem;
+    --rc-pagination-item-min-inline-size: var(--tailwind-control-block-size, 2.25rem);
+
+    color: var(--tailwind-on-surface, CanvasText);
+    font-size: var(--tailwind-font-size, 0.95rem);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-pagination [data-rc-page] {
+    box-sizing: border-box;
+    min-block-size: var(--tailwind-control-block-size, 2.25rem);
+    padding-inline: 0.625rem;
+    border: 1px solid var(--tailwind-border-color, ButtonBorder);
+    border-radius: var(--tailwind-radius-md, 0.5rem);
+    background: var(--tailwind-surface-raised, ButtonFace);
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-pagination [data-rc-page]:hover {
+    background: color-mix(
+      in srgb,
+      var(--tailwind-primary, Highlight) 8%,
+      var(--tailwind-surface-raised, ButtonFace)
+    );
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-pagination [data-rc-page]:focus-visible {
+    outline: var(--tailwind-focus-ring, 2px solid Highlight);
+    outline-offset: var(--tailwind-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-pagination [aria-current='page'] {
+    border-color: var(--tailwind-primary, Highlight);
+    background: var(--tailwind-primary-container, Highlight);
+    color: var(--tailwind-on-primary-container, HighlightText);
+    font-weight: 600;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-pagination
+    :is([data-rc-page]:disabled, [data-rc-page][aria-disabled='true']) {
+    opacity: var(--tailwind-disabled-opacity, 0.5);
+    cursor: default;
+  }
+}

package/components/popover.css

@@ -0,0 +1,13 @@
+@layer rc-theme-tailwind.components {
+  /*
+   * The border, corner, and elevation come from the bridge's --rc-popup-*
+   * tokens. A popover sits on the raised surface like a menu, with item-scale
+   * padding. Declared on the theme root so popovers rendered inside other
+   * shadow roots inherit the same values.
+   */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) {
+    --rc-popover-background: var(--tailwind-surface-raised, Canvas);
+    --rc-popover-padding-block: var(--tailwind-item-padding-block, 0.55rem);
+    --rc-popover-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+  }
+}

package/components/progress.css

@@ -0,0 +1,11 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-progress::part(value-display) {
+    color: var(--tailwind-on-surface-muted, GrayText);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-progress {
+    --rc-progress-fill-transition-duration: var(--rc-motion-effects-duration-fast, 100ms);
+    --rc-progress-fill-transition-easing: var(--rc-motion-effects-easing-fast, ease-out);
+  }
+}

package/components/range-slider.css

@@ -0,0 +1,18 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-range-slider::part(thumb) {
+    box-shadow: var(--tailwind-shadow-sm, none);
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--tailwind-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--tailwind-motion-easing, ease),
+      scale var(--rc-motion-duration, 160ms) var(--tailwind-motion-easing, ease);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-range-slider::part(thumb):hover {
+    scale: 1.04;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-range-slider::part(value-display) {
+    color: var(--tailwind-on-surface-muted, GrayText);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/components/scroller.css

@@ -0,0 +1,19 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-scroller {
+    /*
+     * Capped a little narrower than Material's 1200px: Tailwind runs a smaller
+     * base font, so the same pixel width carries more characters per line.
+     */
+    --rc-scroller-content-max-inline-size: 68rem;
+    --rc-scroller-content-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+    --rc-scroller-content-row-gap: var(--tailwind-item-gap, 0.5rem);
+
+    --rc-scroller-scrollbar-width: thin;
+    --rc-scroller-scrollbar-color: color-mix(
+        in srgb,
+        var(--tailwind-on-surface-muted, GrayText) 45%,
+        transparent
+      )
+      transparent;
+  }
+}

package/components/search-bar.css

@@ -0,0 +1,30 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-search-bar {
+    display: inline-block;
+    --rc-search-bar-radius: var(--tailwind-radius-lg, 0.75rem);
+    --rc-search-bar-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-search-bar-shadow: var(--tailwind-shadow-sm, none);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-search-bar::part(root) {
+    background: var(--rc-field, Field);
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--tailwind-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--tailwind-motion-easing, ease);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-search-bar:hover::part(root) {
+    border-color: color-mix(in srgb, var(--rc-accent, Highlight) 55%, var(--rc-border-color));
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-search-bar:focus-within::part(root) {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-search-bar
+    > input[type='search']:focus-visible {
+    outline: none;
+  }
+}

package/components/segmented-button.css

@@ -0,0 +1,19 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-segmented-button {
+    /* One switch turns on the component-owned segmented recipe. */
+    --rc-segmented-button-appearance: segmented;
+    --rc-segmented-button-border: var(--rc-border);
+    --rc-segmented-button-radius: var(--rc-control-radius);
+    --rc-segmented-button-divider: 0;
+    --rc-segmented-button-bg: var(--tailwind-surface-raised, ButtonFace);
+    --rc-segmented-button-color: var(--tailwind-on-surface, ButtonText);
+    --rc-segmented-button-selected-bg: var(--rc-highlight, Highlight);
+    --rc-segmented-button-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size, 2.5rem);
+    --rc-segmented-button-segment-padding-inline: var(--rc-control-padding-inline, 0.75rem);
+    --rc-segmented-button-segment-gap: 0.5em;
+    --rc-segmented-button-focus-ring: var(--rc-focus-ring);
+    --rc-segmented-button-focus-ring-offset: -2px;
+    --rc-segmented-button-disabled-opacity: var(--rc-disabled-opacity);
+  }
+}