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

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# @rcarls/rc-theme-tailwind
+
+## 0.0.0-next-20261103014840
+
+### Minor Changes
+
+- 81d4824: Adds `rc-breadcrumbs`, a breadcrumb trail enhancer for a native `<nav>` and ordered list of
+  links that follows the WAI-ARIA Breadcrumb pattern. It names an unlabeled landmark in the
+  element's language, draws separators that assistive technology skips, and moves
+  `aria-current="page"` to the link matching `current-href` after client-side navigation.
+  The aggregate, the React wrappers, and all four themes cover it.
+- 4db22ea: Adds `rc-data-table`, a sortable-header enhancer for a native `<table>` that follows the
+  WAI-ARIA sortable table example. Authored `<button>` or link controls in
+  `<th data-rc-sort-key>` headers request a sort; the element reflects it as `aria-sort` on the
+  active header, draws a distinct indicator for each sort state, and fires a cancelable
+  `rc-data-table-sort` for the consumer to re-render the rows. It never sorts data itself. The
+  host becomes a focusable group named by the caption while the table overflows. The aggregate,
+  the React wrappers, and all four themes cover it.
+
+  `rc-pagination` now places its live region on the document body instead of inside the
+  element, so it never joins the consumer's markup.
+
+- 34fa00a: Adds `rc-pagination`, a pagination enhancer for a native `<nav>` holding page links or
+  buttons tagged with `data-rc-page`. It keeps `aria-current="page"` on the current page, names
+  the landmark and numbered controls, disables steps past either end, and fires a cancelable
+  `rc-pagination-change` that can hand link navigation to a client-side router. The DOM-free
+  `paginationRange()` helper, also at `@rcarls/rc-pagination/range`, builds the page list on a
+  server. The aggregate, the React wrappers, and all four themes cover it.
+- 0f3f55e: Add `@rcarls/rc-theme-tailwind`, a CSS-only Tailwind CSS v4 token bridge and
+  calm SaaS reference theme. It maps Tailwind color, typography, spacing,
+  radius, shadow, and easing variables to the public `--rc-*` semantic contract,
+  with optional native controls and CSS-only component recipes.
+- f20279f: Adds `@rcarls/rc-theme-tailwind/layers.css`, a cascade layer order to import before Tailwind
+  and the theme. It keeps every `rc-*` layer above Tailwind's `base` layer, so Preflight resets
+  no longer override component structure (such as a modal dialog's centering), and below
+  `components` and `utilities`, so app classes still win.

package/README.md

@@ -0,0 +1,127 @@
+# `@rcarls/rc-theme-tailwind`
+
+Tailwind CSS v4 token bridge and calm SaaS reference theme for `rc-webcomponents` layouts.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/guide/theme-previews](https://richardcarls.github.io/rc-webcomponents/guide/theme-previews).
+
+It is CSS-only and has no Tailwind runtime dependency. The bridge consumes the
+Tailwind v4 `--color-*`, `--font-*`, `--radius-*`, `--shadow-*`, and
+`--ease-*` theme variables and maps them to the public `--rc-*` semantic
+contract. Without Tailwind, it supplies calm SaaS defaults with a cyan accent
+fallback, neutral surfaces, compact controls, system-color fallbacks, and
+component polish rules.
+
+## Installation
+
+```sh
+yarn add @rcarls/rc-theme-tailwind
+```
+
+## Full reference theme
+
+Import the full theme bundle:
+
+```css
+@import '@rcarls/rc-theme-tailwind/theme.css';
+```
+
+Apply the theme class to your app shell or any subtree:
+
+```html
+<main class="rc-theme-tailwind">
+  <rc-select>...</rc-select>
+  <rc-dialog>...</rc-dialog>
+</main>
+```
+
+## Build your own theme from it
+
+The bridge is token-first. Import it after your Tailwind v4 theme variables and
+override the Tailwind tokens at your theme boundary:
+
+```css
+@import '@rcarls/rc-theme-tailwind/bridge.css';
+@import '@rcarls/rc-theme-tailwind/components.css';
+
+.my-product-theme {
+  --color-cyan-600: oklch(58% 0.19 220);
+  --color-slate-950: oklch(20% 0.03 260);
+  --radius-lg: 0.75rem;
+  --font-sans: Inter, system-ui, sans-serif;
+}
+```
+
+### Layer order with Tailwind
+
+Cascade layers sort in the order they are first declared. Importing this theme
+before Tailwind puts every `rc-*` layer below Tailwind's `base` layer, so
+Preflight's resets (such as the universal `margin: 0` that undoes a modal
+dialog's centering) override component structure. Importing it after Tailwind
+puts the theme above Tailwind's utilities instead. Import `layers.css` first
+so the `rc-*` layers sit after `base` and before `components` and `utilities`:
+
+```css
+@import '@rcarls/rc-theme-tailwind/layers.css';
+@import '@rcarls/rc-theme-tailwind/bridge.css';
+@import '@rcarls/rc-theme-tailwind/components.css';
+@import 'tailwindcss';
+```
+
+Your own `@layer components` rules and utility classes still override the theme.
+
+If your Tailwind theme uses a different palette, set the documented
+`--color-*` tokens (or override the resulting `--rc-*` semantic tokens) at the
+same boundary. No utility classes or Tailwind build step are required by this
+package.
+
+Selective component styles are exported for apps that want only part of the
+reference layer:
+
+```css
+@import '@rcarls/rc-theme-tailwind/bridge.css';
+@import '@rcarls/rc-theme-tailwind/components/select.css';
+@import '@rcarls/rc-theme-tailwind/components/dialog.css';
+```
+
+Native HTML can opt into the same presentation without registering an RC
+element. Import the defaults and bridge when needed, then opt into the native
+layer and CSS-only recipes:
+
+```css
+@import '@rcarls/rc-theme-tailwind/defaults.css';
+@import '@rcarls/rc-theme-tailwind/bridge.css';
+@import '@rcarls/rc-theme-tailwind/native.css';
+@import '@rcarls/rc-theme-tailwind/css-components.css';
+```
+
+`native.css` is an optional convenience layer for styling ordinary buttons,
+text fields, selects, textareas, checkboxes, radios, ranges, and progress
+controls throughout `.rc-theme-tailwind`. Component recipes style native
+children when their presentation belongs to a themed menu, toolbar, or other
+component context. Add `data-rc-native="off"` to an element to opt it and its
+descendants out of the native layer. The
+opt-in `css-components.css` recipes cover `.rc-button`, `.rc-chip`,
+`.rc-chip-group`, `.rc-select`, `.rc-textarea`, `.rc-card`, `.rc-list`, and
+`details.rc-disclosure`; each is also exported as
+`css-components/<name>.css`. They provide appearance and CSS-visible states
+only, not behavior, events, popup replacement, or measured overflow.
+
+Tag general icon-font markup with `data-rc-icon`; component-specific markers
+such as `data-rc-button-icon` and `data-rc-navigation-icon` opt in
+automatically. The shared `--rc-icon-font-size` and
+`--rc-icon-font-line-height` tokens keep glyph geometry consistent and can be
+overridden at the theme boundary or on one component.
+
+## View transitions
+
+The theme includes stable CSS hooks for apps that opt into View Transitions,
+but it does not start transitions or require browser support:
+
+```css
+.rc-theme-tailwind [data-rc-view-transition='panel'] {
+  --rc-view-transition-name: rc-panel;
+}
+```
+
+Application code remains responsible for deciding when to call
+`document.startViewTransition()`.

package/bridge.css

@@ -0,0 +1,245 @@
+@layer rc-base, rc-theme-tailwind.defaults, rc-theme-tailwind.bridge, rc-theme-tailwind.native, rc-theme-tailwind.components, rc-theme-tailwind.css-components,
+  rc-theme-tailwind.overrides;
+
+@layer rc-theme-tailwind.bridge {
+  /*
+   * Maps Tailwind CSS v4 theme variables to the rc-webcomponents public
+   * styling contract. Import this file after the application's @theme block.
+   */
+  .rc-theme-tailwind,
+  :host(.rc-theme-tailwind) {
+    /* Internal recipe aliases keep every component stylesheet on the same
+     * Tailwind v4 source tokens, including bridge-only imports. */
+    --tailwind-primary: var(--color-cyan-600, #0891b2);
+    --tailwind-on-primary: var(--color-white, #fff);
+    --tailwind-primary-container: var(--color-cyan-100, #cffafe);
+    --tailwind-on-primary-container: var(--color-cyan-950, #083344);
+    --tailwind-surface: var(--color-slate-50, #f8fafc);
+    --tailwind-surface-raised: var(--color-white, #fff);
+    --tailwind-field: var(--color-white, #fff);
+    --tailwind-on-surface: var(--color-slate-950, #020617);
+    --tailwind-on-surface-muted: var(--color-slate-600, #475569);
+    --tailwind-border-color: var(--color-slate-200, #e2e8f0);
+    --tailwind-inverse-surface: var(--color-slate-900, #0f172a);
+    --tailwind-inverse-on-surface: var(--color-white, #fff);
+    --tailwind-error: var(--color-red-600, #dc2626);
+    --tailwind-font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+    --tailwind-font-size: var(--text-sm, 0.875rem);
+    --tailwind-font-weight: var(--font-weight-normal, 400);
+    --tailwind-line-height: var(--leading-normal, 1.5);
+    --tailwind-radius-sm: var(--radius-sm, 0.25rem);
+    --tailwind-radius-md: var(--radius-md, 0.375rem);
+    --tailwind-radius-lg: var(--radius-lg, 0.5rem);
+    --tailwind-radius-xl: var(--radius-xl, 0.75rem);
+    --tailwind-radius-pill: var(--radius-full, 999px);
+    --tailwind-control-block-size: calc(var(--spacing, 0.25rem) * 10);
+    --tailwind-control-padding-block: calc(var(--spacing, 0.25rem) * 2);
+    --tailwind-control-padding-inline: calc(var(--spacing, 0.25rem) * 3);
+    --tailwind-control-gap: calc(var(--spacing, 0.25rem) * 2);
+    --tailwind-item-padding-block: calc(var(--spacing, 0.25rem) * 2.5);
+    --tailwind-item-padding-inline: calc(var(--spacing, 0.25rem) * 3);
+    --tailwind-item-gap: calc(var(--spacing, 0.25rem) * 2);
+    --tailwind-shadow-md: var(--shadow-md, 0 4px 6px -1px rgb(2 6 23 / 12%));
+    --tailwind-shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgb(2 6 23 / 14%));
+    --tailwind-shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(2 6 23 / 10%));
+    --tailwind-motion-easing: var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
+    --tailwind-motion-duration-slow: 240ms;
+    --tailwind-motion-effects-duration-fast: 100ms;
+    --tailwind-motion-effects-duration-default: 160ms;
+    --tailwind-motion-effects-duration-slow: 240ms;
+    --tailwind-motion-spatial-duration-fast: 160ms;
+    --tailwind-motion-spatial-duration-default: 240ms;
+    --tailwind-motion-spatial-duration-slow: 320ms;
+    --tailwind-focus-ring: 2px solid var(--color-cyan-600, Highlight);
+    --tailwind-focus-ring-offset: 2px;
+    --tailwind-disabled-opacity: 0.5;
+    --rc-surface: var(--color-slate-50, Canvas);
+    --rc-field: var(--color-white, Field);
+    --rc-button-bg: var(--color-white, ButtonFace);
+    --rc-field-text: var(--color-slate-950, FieldText);
+    --rc-field-error-color: var(--color-red-600, red);
+    --rc-button-text: var(--color-slate-950, ButtonText);
+    --rc-highlight: var(--color-cyan-100, Highlight);
+    --rc-highlight-text: var(--color-cyan-950, HighlightText);
+    --rc-text-disabled: var(--color-slate-600, GrayText);
+    --rc-accent: var(--color-cyan-600, Highlight);
+    --rc-border-color: var(--color-slate-200, ButtonBorder);
+    --rc-border-width: 1px;
+    --rc-border-style: solid;
+    --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+    --rc-shadow: var(--shadow-md, 0 2px 8px rgb(0 0 0 / 15%));
+    --rc-popup-background: var(--color-slate-50, Canvas);
+    --rc-popup-color: var(--rc-field-text, CanvasText);
+    --rc-popup-border: var(--rc-border);
+    --rc-popup-radius: var(--radius-lg, 0.75rem);
+    --rc-popup-shadow: var(--shadow-lg, none);
+    --rc-popup-padding-block: 0.375rem;
+    --rc-font-family: var(--font-sans, inherit);
+    --rc-font-size: var(--text-sm, 1em);
+    --rc-font-weight: var(--font-weight-normal, 400);
+    --rc-line-height: var(--leading-normal, normal);
+    --rc-icon-font-size: 1.5rem;
+    --rc-icon-font-line-height: var(--rc-icon-font-size);
+    --rc-control-block-size: calc(var(--spacing, 0.25rem) * 10);
+    --rc-control-padding-block: calc(var(--spacing, 0.25rem) * 2);
+    --rc-control-padding-inline: calc(var(--spacing, 0.25rem) * 3);
+    --rc-control-gap: calc(var(--spacing, 0.25rem) * 2);
+    --rc-button-color: var(--rc-button-text, ButtonText);
+    --rc-button-block-size: var(--rc-control-block-size);
+    --rc-button-radius: var(--rc-control-radius);
+    --rc-button-border: var(--rc-border);
+    --rc-button-padding-block: var(--rc-control-padding-block);
+    --rc-button-padding-inline: var(--rc-control-padding-inline);
+    --rc-button-gap: var(--rc-control-gap);
+    --rc-button-font: var(--rc-font-weight) var(--rc-font-size) / var(--rc-line-height)
+      var(--rc-font-family);
+    --rc-button-hover-state-layer-opacity: 0.08;
+    --rc-button-focus-state-layer-opacity: 0.12;
+    --rc-button-pressed-state-layer-opacity: 0.12;
+    --rc-card-bg: var(--color-white, Canvas);
+    --rc-card-color: var(--color-slate-950, CanvasText);
+    --rc-card-radius: var(--radius-lg, 0.75rem);
+    --rc-card-padding-block: 0.75rem;
+    --rc-card-padding-inline: 0.75rem;
+    --rc-card-actions-gap: 0.5rem;
+    --rc-card-subtitle-color: color-mix(in srgb, currentColor 72%, transparent);
+    --rc-card-hover-state-layer-opacity: 0.08;
+    --rc-card-pressed-state-layer-opacity: 0.12;
+    --rc-chip-block-size: 2rem;
+    --rc-chip-gap: 0px;
+    --rc-chip-padding-inline: 0.75rem;
+    --rc-chip-border: var(--rc-border);
+    --rc-chip-radius: var(--radius-md, 0.5rem);
+    --rc-chip-bg: var(--color-white, ButtonFace);
+    --rc-chip-color: var(--color-slate-950, ButtonText);
+    --rc-chip-font: inherit;
+    --rc-chip-text-decoration: none;
+    --rc-chip-selected-bg: var(--rc-highlight, Highlight);
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: 3.25rem;
+    --rc-switch-track-block-size: 2rem;
+    --rc-switch-selected-track-bg: var(--rc-accent);
+    --rc-switch-thumb-translate: 1.125rem;
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size);
+    --rc-segmented-button-selected-bg: var(--rc-highlight, Highlight);
+    --rc-snackbar-bg: var(--color-slate-900, CanvasText);
+    --rc-snackbar-color: var(--color-white, Canvas);
+    --rc-snackbar-border: 0;
+    --rc-snackbar-action-color: var(--color-white, Canvas);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: 9999px;
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: 650 0.875rem / 1.25 var(--rc-font-family, inherit);
+    --rc-item-padding-block: calc(var(--spacing, 0.25rem) * 2.5);
+    --rc-item-padding-inline: calc(var(--spacing, 0.25rem) * 3);
+    --rc-item-gap: calc(var(--spacing, 0.25rem) * 2);
+    --rc-list-item-gap: var(--rc-item-gap);
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--rc-item-padding-block);
+    --rc-list-item-padding-inline: var(--rc-item-padding-inline);
+    --rc-list-item-selected-bg: var(--rc-highlight, Highlight);
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-radius-sm: var(--radius-sm, 0.25rem);
+    --rc-radius-md: var(--radius-md, 0.5rem);
+    --rc-control-radius: var(--radius-md, 0.5rem);
+    --rc-focus-ring: 2px solid var(--color-cyan-600, Highlight);
+    --rc-focus-ring-offset: 2px;
+    --rc-disabled-opacity: 0.5;
+    --rc-motion-effects-duration-fast: 100ms;
+    --rc-motion-effects-easing-fast: ease-out;
+    --rc-motion-effects-duration-default: 160ms;
+    --rc-motion-effects-easing-default: var(--rc-motion-effects-easing-fast);
+    --rc-motion-effects-duration-slow: 240ms;
+    --rc-motion-effects-easing-slow: var(--rc-motion-effects-easing-fast);
+    --rc-motion-spatial-duration-fast: 160ms;
+    --rc-motion-spatial-easing-fast: var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
+    --rc-motion-spatial-duration-default: 240ms;
+    --rc-motion-spatial-easing-default: var(--rc-motion-spatial-easing-fast);
+    --rc-motion-spatial-duration-slow: 320ms;
+    --rc-motion-spatial-easing-slow: var(--rc-motion-spatial-easing-fast);
+    /* Tailwind's one curve is decelerate-shaped, so it is the enter curve. */
+    --rc-motion-effects-easing-enter: ease-out;
+    --rc-motion-effects-easing-exit: ease-in;
+    --rc-motion-spatial-easing-enter: var(--rc-motion-spatial-easing-fast);
+    --rc-motion-spatial-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    /* Matches base.css: the compatibility token follows the effects default. */
+    --rc-motion-duration: var(--rc-motion-effects-duration-default);
+    /*
+     * Mixed against the theme's own inverse surface rather than `CanvasText`,
+     * so the scrim carries the palette's warmth and resolves to a real color
+     * rather than to a system one that cannot leave CSS.
+     */
+    --rc-dialog-scrim: color-mix(in srgb, var(--color-slate-900, CanvasText) 42%, transparent);
+  }
+
+  .rc-theme-tailwind rc-listbox,
+  :host(.rc-theme-tailwind) rc-listbox,
+  .rc-theme-tailwind rc-menu,
+  :host(.rc-theme-tailwind) rc-menu {
+    --rc-listbox-option-gap: var(--rc-list-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size, 2.25rem);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline, 0.75rem);
+    --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-list-item-selected-bg, Highlight);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color, HighlightText);
+  }
+
+  .rc-theme-tailwind rc-select,
+  :host(.rc-theme-tailwind) rc-select,
+  .rc-theme-tailwind rc-combobox,
+  :host(.rc-theme-tailwind) rc-combobox {
+    --rc-select-control-block-size: var(--rc-control-block-size);
+    --rc-select-radius: var(--rc-control-radius);
+    --rc-select-chip-radius: var(--radius-sm, 0.25rem);
+    --rc-combobox-control-block-size: var(--rc-control-block-size);
+    --rc-combobox-radius: var(--rc-control-radius);
+    --rc-combobox-chip-radius: var(--radius-sm, 0.25rem);
+  }
+
+  .rc-theme-tailwind rc-slider,
+  :host(.rc-theme-tailwind) rc-slider,
+  .rc-theme-tailwind rc-range-slider,
+  :host(.rc-theme-tailwind) rc-range-slider {
+    --rc-slider-track-size: 0.375rem;
+    --rc-slider-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-slider-progress-background: var(--rc-accent);
+    --rc-slider-track-radius: 999px;
+    --rc-range-slider-accent: var(--rc-accent);
+    --rc-range-slider-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-range-slider-thumb-background: var(--color-slate-50, Canvas);
+    --rc-range-slider-thumb-border: var(--rc-accent);
+    --rc-thumb-radius: 0.5625rem;
+  }
+
+  .rc-theme-tailwind rc-progress,
+  :host(.rc-theme-tailwind) rc-progress {
+    --rc-progress-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: 999px;
+    --rc-progress-fill-background: var(--rc-accent);
+    --rc-progress-value-color: var(--color-slate-600, GrayText);
+  }
+
+  .rc-theme-tailwind rc-bottom-sheet,
+  :host(.rc-theme-tailwind) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--color-white, Canvas);
+    --rc-bottom-sheet-color: var(--rc-field-text, CanvasText);
+    --rc-bottom-sheet-radius: var(--radius-xl, 1rem) var(--radius-xl, 1rem) 0 0;
+    --rc-bottom-sheet-shadow: var(--shadow-lg, none);
+    --rc-bottom-sheet-scrim: var(--rc-dialog-scrim);
+    --rc-bottom-sheet-handle-color: var(--rc-border-color, GrayText);
+    --rc-bottom-sheet-handle-radius: var(--radius-full, 999px);
+  }
+}

package/components/accordion.css

@@ -0,0 +1,18 @@
+@layer rc-theme-tailwind.components {
+  /*
+   * Only the group box. Panels inside an accordion take the same
+   * `--rc-disclosure-*` mapping as a standalone disclosure, which disclosure.css
+   * sets for `rc-accordion` as well, so the panel recipe is not repeated here.
+   */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-accordion {
+    --rc-accordion-gap: 0.5rem;
+
+    /* Laid out before the element upgrades; see disclosure.css. */
+    display: grid;
+    gap: var(--rc-accordion-gap, 0.5rem);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-accordion > rc-disclosure {
+    display: block;
+  }
+}

package/components/adaptive-menu.css

@@ -0,0 +1,98 @@
+@layer rc-theme-tailwind.components {
+  /*
+   * Declared on the theme root rather than on rc-adaptive-menu so menus
+   * rendered inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) {
+    --rc-adaptive-menu-gap: var(--tailwind-control-gap, 0.5rem);
+    --rc-adaptive-menu-icon-size: 1.25rem;
+
+    --rc-adaptive-menu-trigger-background: transparent;
+    --rc-adaptive-menu-trigger-border: 0;
+    --rc-adaptive-menu-trigger-color: var(--tailwind-on-surface-muted, ButtonText);
+    --rc-adaptive-menu-trigger-block-size: 2.25rem;
+    --rc-adaptive-menu-trigger-inline-size: 2.25rem;
+    --rc-adaptive-menu-trigger-padding: 0.375rem;
+    --rc-adaptive-menu-trigger-radius: var(--tailwind-radius-md, 0.5rem);
+    --rc-adaptive-menu-trigger-hover-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 10%,
+      var(--tailwind-surface, Canvas)
+    );
+
+    /*
+     * The trigger is drawn at 2.25rem for density, so the hit area is inflated
+     * separately to clear the 3rem touch minimum without widening the row.
+     */
+    --rc-adaptive-menu-touch-target-block-size: 3rem;
+    --rc-adaptive-menu-touch-target-inline-size: 3rem;
+    --rc-adaptive-menu-touch-target-overlap-inline-end: 0.375rem;
+
+    --rc-adaptive-menu-popup-min-inline-size: 12rem;
+
+    /*
+     * The sheet presentation exists because a finger is doing the pointing, so
+     * its rows take the larger list item height rather than the menu row height.
+     */
+    --rc-adaptive-menu-item-min-block-size: 3rem;
+    --rc-adaptive-menu-item-padding-block: var(--tailwind-item-padding-block, 0.55rem);
+    --rc-adaptive-menu-item-padding-inline: var(--tailwind-item-padding-inline, 0.75rem);
+    --rc-adaptive-menu-item-gap: var(--tailwind-item-gap, 0.5rem);
+  }
+}
+
+/*
+ * An action rc-adaptive-menu moves into its overflow renders as a menu row.
+ * rc-adaptive-menu maps the action's own tokens onto its item tokens in rc-base,
+ * which sits below every theme layer, so this layer repeats the mapping above the
+ * theme's button and menu-button variants (filled, tonal, icon-only sizes, and so
+ * on) that would otherwise restyle the row as a standalone control.
+ */
+@layer rc-theme-tailwind.overrides {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-adaptive-menu
+    > rc-button[data-rc-action-overflowed] {
+    --rc-button-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-icon-size: 100%;
+    --rc-button-touch-target-inline-size: 100%;
+    --rc-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-button-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-button-radius: 0;
+    --rc-button-bg: transparent;
+    --rc-button-color: currentColor;
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: currentColor;
+    --rc-button-progress-color: currentColor;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-overflowed] {
+    --rc-menu-button-trigger-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-icon-size: 100%;
+    --rc-menu-button-touch-target-inline-size: 100%;
+    --rc-menu-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-trigger-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-menu-button-trigger-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-menu-button-trigger-gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: currentColor;
+    --rc-menu-button-trigger-hover-color: currentColor;
+    --rc-menu-button-trigger-open-color: currentColor;
+  }
+}

package/components/app-bar.css

@@ -0,0 +1,21 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-app-bar {
+    --rc-app-bar-bg: color-mix(in srgb, var(--tailwind-surface, Canvas) 88%, transparent);
+    --rc-app-bar-color: var(--rc-field-text, CanvasText);
+    --rc-app-bar-scroll-divider: var(--rc-border, 1px solid ButtonBorder);
+    --rc-app-bar-shadow: none;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    font-family: var(--rc-font-family, inherit);
+    position: relative;
+    z-index: var(--rc-app-bar-z-index, 1);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-app-bar[data-scrolled] {
+    --rc-app-bar-shadow: var(--tailwind-shadow-sm, none);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-app-bar :is(button, [role='button']) {
+    border-radius: var(--tailwind-radius-md, 0.5rem);
+  }
+}

package/components/bottom-sheet.css

@@ -0,0 +1,90 @@
+@layer rc-theme-tailwind.components {
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--tailwind-surface-raised, Canvas);
+    --rc-bottom-sheet-handle-color: var(--rc-border-color, GrayText);
+    --rc-bottom-sheet-handle-radius: var(--tailwind-radius-pill, 999px);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-bottom-sheet > dialog {
+    position: fixed;
+    inset: auto 0 0;
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);
+    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);
+    margin-block: 0;
+    margin-inline: auto;
+    padding: var(--rc-bottom-sheet-padding, 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)));
+    overflow: auto;
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-block-end: 0;
+    border-radius: var(--rc-bottom-sheet-radius, 1rem 1rem 0 0);
+    background: var(--rc-bottom-sheet-bg, var(--tailwind-surface-raised, Canvas));
+    color: var(--rc-bottom-sheet-color, var(--rc-field-text, CanvasText));
+    box-shadow: var(--rc-bottom-sheet-shadow, var(--tailwind-shadow-lg, none));
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-bottom-sheet > dialog::backdrop {
+    background: var(
+      --rc-bottom-sheet-scrim,
+      var(--rc-dialog-scrim, color-mix(in srgb, CanvasText 32%, transparent))
+    );
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-bottom-sheet
+    > dialog
+    [data-rc-bottom-sheet-handle] {
+    position: relative;
+    display: block;
+    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);
+    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);
+    margin: var(--rc-bottom-sheet-handle-target-margin, 0);
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    appearance: none;
+    cursor: ns-resize;
+    touch-action: none;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-bottom-sheet
+    > dialog
+    [data-rc-bottom-sheet-handle]::before {
+    content: '';
+    position: absolute;
+    inset-block-start: var(--rc-bottom-sheet-handle-offset, 50%);
+    inset-inline-start: 50%;
+    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
+    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);
+    border-radius: 0;
+    background-color: transparent;
+    background-image:
+      radial-gradient(
+        circle 1px at calc(50% - 5px) 50%,
+        var(--rc-bottom-sheet-handle-color, ButtonBorder) 100%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle 1px at 50% 50%,
+        var(--rc-bottom-sheet-handle-color, ButtonBorder) 100%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle 1px at calc(50% + 5px) 50%,
+        var(--rc-bottom-sheet-handle-color, ButtonBorder) 100%,
+        transparent 100%
+      );
+    translate: -50% -50%;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-bottom-sheet
+    > dialog
+    [data-rc-bottom-sheet-handle]:focus-visible {
+    outline: 0.125rem solid var(--rc-accent, Highlight);
+    outline-offset: 0.25rem;
+  }
+}

package/components/breadcrumbs.css

@@ -0,0 +1,38 @@
+@layer rc-theme-tailwind.components {
+  /* A muted trail with the current page in the full text color. */
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-breadcrumbs {
+    --rc-breadcrumbs-gap: 0.375rem;
+    --rc-breadcrumbs-separator: '/';
+    --rc-breadcrumbs-separator-color: var(--tailwind-border-color, GrayText);
+    --rc-breadcrumbs-current-color: var(--tailwind-on-surface, CanvasText);
+
+    color: var(--tailwind-on-surface-muted, CanvasText);
+    font-size: var(--tailwind-font-size, 0.95rem);
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-breadcrumbs > nav > ol > li > a {
+    border-radius: var(--tailwind-radius-sm, 0.25rem);
+    color: inherit;
+    text-decoration: none;
+    text-underline-offset: 0.2em;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind)) rc-breadcrumbs > nav > ol > li > a:hover {
+    color: var(--tailwind-on-surface, CanvasText);
+    text-decoration: underline;
+  }
+
+  :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+    rc-breadcrumbs
+    > nav
+    > ol
+    > li
+    > a: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-breadcrumbs [aria-current='page'] {
+    font-weight: 600;
+  }
+}