@-reddacted-/react-ui 0.3.1 → 0.4.0

package/dist/style/accordionCss.js

@@ -0,0 +1,101 @@
+// Accordion on native <details> / <summary>: `rui-accordion` on the container,
+// `data-variant="separated|joined"` (default joined), `data-chevron="start|end|none"` (default end).
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const border = "1px solid var(--rui-accordion-border, var(--color-border))";
+const bg = "var(--rui-accordion-bg, var(--color-surface))";
+const padding = "var(--rui-accordion-padding, 0.875rem 1rem)";
+const chevron = `
+  content: "";
+  flex-shrink: 0;
+  width: 0.45em;
+  height: 0.45em;
+  border-right: 2px solid var(--color-text-muted);
+  border-bottom: 2px solid var(--color-text-muted);
+  transform: translateY(-25%) rotate(45deg);
+  transition: transform 150ms ease-out;
+`;
+const chevronOpen = "transform: translateY(25%) rotate(-135deg);";
+export const accordionCss = `
+:where(.rui-accordion:not([data-variant="separated"])) {
+  border: ${border};
+  border-radius: 12px;
+  background-color: ${bg};
+  overflow: hidden;
+}
+:where(.rui-accordion:not([data-variant="separated"])) > :where(details + details) {
+  border-top: ${border};
+}
+:where(.rui-accordion[data-variant="separated"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rui-accordion-gap, 0.5rem);
+}
+:where(.rui-accordion[data-variant="separated"]) > :where(details) {
+  border: ${border};
+  border-radius: 12px;
+  background-color: ${bg};
+  overflow: hidden;
+}
+
+:where(.rui-accordion) :where(summary) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: ${padding};
+  color: var(--color-text);
+  font-weight: 500;
+  list-style: none;
+  cursor: pointer;
+}
+:where(.rui-accordion) :where(summary)::-webkit-details-marker {
+  display: none;
+}
+:where(.rui-accordion) :where(summary:hover) {
+  background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
+}
+:where(.rui-accordion) :where(summary:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+:where(.rui-accordion) :where(details) > :where(:not(summary)) {
+  padding: ${padding};
+  color: var(--color-text);
+}
+
+:where(.rui-accordion:not([data-chevron="start"], [data-chevron="none"])) :where(summary)::after {
+  ${chevron}
+  margin-left: auto;
+}
+:where(.rui-accordion:not([data-chevron="start"], [data-chevron="none"])) :where(details[open] > summary)::after {
+  ${chevronOpen}
+}
+:where(.rui-accordion[data-chevron="start"]) :where(summary)::before {
+  ${chevron}
+}
+:where(.rui-accordion[data-chevron="start"]) :where(details[open] > summary)::before {
+  ${chevronOpen}
+}
+
+/* Progressive enhancement: animated where the browser can transition to height: auto. */
+@supports (interpolate-size: allow-keywords) {
+  :where(.rui-accordion) {
+    interpolate-size: allow-keywords;
+  }
+  :where(.rui-accordion details)::details-content {
+    height: 0;
+    overflow: hidden;
+    transition: height 200ms ease-out, content-visibility 200ms allow-discrete;
+  }
+  :where(.rui-accordion details[open])::details-content {
+    height: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-accordion) :where(summary)::before,
+  :where(.rui-accordion) :where(summary)::after,
+  :where(.rui-accordion details)::details-content {
+    transition: none;
+  }
+}
+`;

package/dist/style/badgeCss.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from "react";
+/** CSS variables shared by Badge and Tag. */
+export declare function badgeVars(color: string, size: string | number | undefined): CSSProperties;
+export declare const badgeCss = "\n:where(.rui-badge, .rui-tag) {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35em;\n  box-sizing: border-box;\n  padding: 0.2em 0.6em;\n  border: 1px solid var(--rui-badge-color, var(--color-primary));\n  border-radius: 999px;\n  background-color: var(--rui-badge-color, var(--color-primary));\n  color: var(--rui-badge-on, var(--color-bg));\n  font-size: var(--rui-badge-size, 0.75em);\n  font-weight: 500;\n  line-height: 1.2;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n:where(.rui-badge[data-variant=\"outline\"], .rui-tag[data-variant=\"outline\"]) {\n  background-color: transparent;\n  color: var(--rui-badge-color, var(--color-primary));\n}\n:where(.rui-badge[data-variant=\"soft\"], .rui-tag[data-variant=\"soft\"]) {\n  border-color: transparent;\n  background-color: color-mix(in srgb, var(--rui-badge-color, var(--color-primary)) 15%, transparent);\n  color: var(--rui-badge-color, var(--color-primary));\n}\n:where(.rui-tag-remove) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.2em;\n  height: 1.2em;\n  margin-right: -0.3em;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  opacity: 0.75;\n}\n:where(.rui-tag-remove:hover) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 20%, transparent);\n}\n:where(.rui-tag-remove:focus-visible) {\n  opacity: 1;\n  outline: 2px solid currentColor;\n  outline-offset: 1px;\n}\n";
+//# sourceMappingURL=badgeCss.d.ts.map

package/dist/style/badgeCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeCss.d.ts","sourceRoot":"","sources":["../../src/style/badgeCss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1C,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAMzF;AAOD,eAAO,MAAM,QAAQ,2/CAoDpB,CAAA"}

package/dist/style/badgeCss.js

@@ -0,0 +1,68 @@
+import { resolveColor, resolveOnColor } from "./resolveColor.js";
+import { toLength } from "./toLength.js";
+/** CSS variables shared by Badge and Tag. */
+export function badgeVars(color, size) {
+    return {
+        "--rui-badge-color": resolveColor(color),
+        "--rui-badge-on": resolveOnColor(color),
+        "--rui-badge-size": toLength(size),
+    };
+}
+// Badge and Tag labels, usable as bare classes (`rui-badge`, `rui-tag` + `rui-tag-remove`)
+// or through the Badge / Tag components. Variant through `data-variant="outline|soft"`.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Sizes are in em: padding and radius follow the font size.
+export const badgeCss = `
+:where(.rui-badge, .rui-tag) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  box-sizing: border-box;
+  padding: 0.2em 0.6em;
+  border: 1px solid var(--rui-badge-color, var(--color-primary));
+  border-radius: 999px;
+  background-color: var(--rui-badge-color, var(--color-primary));
+  color: var(--rui-badge-on, var(--color-bg));
+  font-size: var(--rui-badge-size, 0.75em);
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+:where(.rui-badge[data-variant="outline"], .rui-tag[data-variant="outline"]) {
+  background-color: transparent;
+  color: var(--rui-badge-color, var(--color-primary));
+}
+:where(.rui-badge[data-variant="soft"], .rui-tag[data-variant="soft"]) {
+  border-color: transparent;
+  background-color: color-mix(in srgb, var(--rui-badge-color, var(--color-primary)) 15%, transparent);
+  color: var(--rui-badge-color, var(--color-primary));
+}
+:where(.rui-tag-remove) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: -0.3em;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.75;
+}
+:where(.rui-tag-remove:hover) {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+:where(.rui-tag-remove:focus-visible) {
+  opacity: 1;
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+`;

package/dist/style/breadcrumbCss.d.ts

@@ -0,0 +1,2 @@
+export declare const breadcrumbCss = "\n:where(.rui-breadcrumb) :where(ol) {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--rui-breadcrumb-gap, 0.5rem);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: 0.875rem;\n}\n:where(.rui-breadcrumb) :where(li) {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-breadcrumb-gap, 0.5rem);\n  color: var(--color-text-muted);\n}\n:where(.rui-breadcrumb) :where(li + li)::before {\n  content: var(--rui-breadcrumb-separator, \"/\");\n  color: var(--color-text-muted);\n}\n:where(.rui-breadcrumb) :where(a) {\n  color: var(--color-text-muted);\n  text-decoration: none;\n}\n:where(.rui-breadcrumb) :where(a:hover) {\n  color: var(--color-text);\n}\n:where(.rui-breadcrumb) :where(a:focus-visible) {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n:where(.rui-breadcrumb) :where([aria-current=\"page\"]) {\n  color: var(--color-text);\n  text-decoration: none;\n}\n:where(.rui-breadcrumb) :where(ol[data-collapse] > li:not(:first-child, :nth-last-child(-n + 2))) {\n  display: none;\n}\n/* Items were hidden (4 or more): mark the gap after the first one. */\n:where(.rui-breadcrumb) :where(ol[data-collapse] > li:first-child:not(:nth-last-child(-n + 3)))::after {\n  content: var(--rui-breadcrumb-separator, \"/\") \" \u2026\";\n  color: var(--color-text-muted);\n}\n";
+//# sourceMappingURL=breadcrumbCss.d.ts.map

package/dist/style/breadcrumbCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbCss.d.ts","sourceRoot":"","sources":["../../src/style/breadcrumbCss.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,g2CA6CzB,CAAA"}

package/dist/style/breadcrumbCss.js

@@ -0,0 +1,53 @@
+// Breadcrumb, class only: `<nav class="rui-breadcrumb" aria-label="…"><ol><li>…</li></ol></nav>`,
+// the last item with `aria-current="page"`. `data-collapse` on the <ol> keeps the first and
+// the last two items, replacing the others with "…" (hidden items are not reachable).
+// `--rui-breadcrumb-separator` is a CSS string, e.g. `"›"`.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const separator = `var(--rui-breadcrumb-separator, "/")`;
+export const breadcrumbCss = `
+:where(.rui-breadcrumb) :where(ol) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rui-breadcrumb-gap, 0.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.875rem;
+}
+:where(.rui-breadcrumb) :where(li) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rui-breadcrumb-gap, 0.5rem);
+  color: var(--color-text-muted);
+}
+:where(.rui-breadcrumb) :where(li + li)::before {
+  content: ${separator};
+  color: var(--color-text-muted);
+}
+:where(.rui-breadcrumb) :where(a) {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+:where(.rui-breadcrumb) :where(a:hover) {
+  color: var(--color-text);
+}
+:where(.rui-breadcrumb) :where(a:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+:where(.rui-breadcrumb) :where([aria-current="page"]) {
+  color: var(--color-text);
+  text-decoration: none;
+}
+:where(.rui-breadcrumb) :where(ol[data-collapse] > li:not(:first-child, :nth-last-child(-n + 2))) {
+  display: none;
+}
+/* Items were hidden (4 or more): mark the gap after the first one. */
+:where(.rui-breadcrumb) :where(ol[data-collapse] > li:first-child:not(:nth-last-child(-n + 3)))::after {
+  content: ${separator} " …";
+  color: var(--color-text-muted);
+}
+`;

package/dist/style/cardCss.d.ts

@@ -0,0 +1,2 @@
+export declare const cardCss = "\n:where(.rui-card) {\n  display: block;\n  box-sizing: border-box;\n  padding: var(--rui-card-padding, 1.25rem);\n  border: 1px solid var(--rui-card-border, var(--color-border));\n  border-radius: var(--rui-card-radius, 12px);\n  background-color: var(--rui-card-bg, var(--color-surface));\n  box-shadow: var(--rui-card-shadow, none);\n  color: var(--color-text);\n}\n/* Custom properties inherit: a nested card must not take its parent's settings. */\n:where(.rui-card) > * {\n  --rui-card-bg: initial;\n  --rui-card-border: initial;\n  --rui-card-shadow: initial;\n  --rui-card-padding: initial;\n  --rui-card-radius: initial;\n  --rui-card-accent: initial;\n}\n:where(button.rui-card) {\n  font: inherit;\n  text-align: left;\n}\n:where(a.rui-card) {\n  color: inherit;\n  text-decoration: none;\n}\n:where(a.rui-card, button.rui-card, .rui-card[data-interactive]) {\n  cursor: pointer;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:hover) {\n  border-color: color-mix(in srgb, var(--rui-card-border, var(--color-border)) 70%, var(--color-text));\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text) 10%, transparent);\n}\n:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:focus-visible) {\n  outline: 2px solid var(--rui-card-accent, var(--color-primary));\n  outline-offset: 2px;\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-card) {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=cardCss.d.ts.map

package/dist/style/cardCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardCss.d.ts","sourceRoot":"","sources":["../../src/style/cardCss.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,m+CA6CnB,CAAA"}

package/dist/style/cardCss.js

@@ -0,0 +1,49 @@
+// Card surface, usable as a bare class (`rui-card`) or through the Card component.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+export const cardCss = `
+:where(.rui-card) {
+  display: block;
+  box-sizing: border-box;
+  padding: var(--rui-card-padding, 1.25rem);
+  border: 1px solid var(--rui-card-border, var(--color-border));
+  border-radius: var(--rui-card-radius, 12px);
+  background-color: var(--rui-card-bg, var(--color-surface));
+  box-shadow: var(--rui-card-shadow, none);
+  color: var(--color-text);
+}
+/* Custom properties inherit: a nested card must not take its parent's settings. */
+:where(.rui-card) > * {
+  --rui-card-bg: initial;
+  --rui-card-border: initial;
+  --rui-card-shadow: initial;
+  --rui-card-padding: initial;
+  --rui-card-radius: initial;
+  --rui-card-accent: initial;
+}
+:where(button.rui-card) {
+  font: inherit;
+  text-align: left;
+}
+:where(a.rui-card) {
+  color: inherit;
+  text-decoration: none;
+}
+:where(a.rui-card, button.rui-card, .rui-card[data-interactive]) {
+  cursor: pointer;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:hover) {
+  border-color: color-mix(in srgb, var(--rui-card-border, var(--color-border)) 70%, var(--color-text));
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text) 10%, transparent);
+}
+:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:focus-visible) {
+  outline: 2px solid var(--rui-card-accent, var(--color-primary));
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-card) {
+    transition: none;
+  }
+}
+`;

package/dist/style/inputCss.d.ts

@@ -0,0 +1,2 @@
+export declare const inputCss = "\n:where(.rui-input) {\n  --rui-input-accent-color: var(--rui-input-accent, var(--color-primary));\n  --rui-input-invalid-color: var(--rui-input-invalid, var(--color-text));\n}\n\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"])) {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 6px;\n  background-color: var(--color-bg);\n  color: var(--color-text);\n  font: inherit;\n  font-size: 0.875rem;\n  line-height: 1;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"]))::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"]):hover:not(:disabled)) {\n  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-text));\n}\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"]):focus-visible) {\n  outline: none;\n  border-color: var(--rui-input-accent-color);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-accent-color) 25%, transparent);\n}\n:where(.rui-input.rui-invalid:not([type=\"checkbox\"], [type=\"radio\"])) {\n  border-color: var(--rui-input-invalid-color);\n}\n:where(.rui-input.rui-invalid:not([type=\"checkbox\"], [type=\"radio\"]):focus-visible) {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-invalid-color) 25%, transparent);\n}\n:where(textarea.rui-input) {\n  min-height: calc(1em + 1rem + 2px);\n  line-height: 1.4;\n  resize: vertical;\n}\n:where(select.rui-input) option {\n  background-color: var(--color-bg);\n  color: var(--color-text);\n}\n:where(.rui-input:disabled) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n:where(input.rui-input[type=\"checkbox\"], input.rui-input[type=\"radio\"]) {\n  accent-color: var(--rui-input-accent-color);\n}\n\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]) {\n  appearance: none;\n  position: relative;\n  box-sizing: border-box;\n  width: 2.25rem;\n  height: 1.25rem;\n  margin: 0;\n  border: none;\n  border-radius: 999px;\n  background-color: var(--color-border);\n  vertical-align: middle;\n  cursor: pointer;\n  transition: background-color 120ms;\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"])::before {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(1.25rem - 4px);\n  height: calc(1.25rem - 4px);\n  border-radius: 50%;\n  background-color: var(--color-surface);\n  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 25%, transparent);\n  transition: transform 120ms;\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:checked) {\n  background-color: var(--rui-input-accent-color);\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:checked)::before {\n  transform: translateX(1rem);\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:focus-visible) {\n  outline: 2px solid var(--rui-input-accent-color);\n  outline-offset: 2px;\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:disabled) {\n  cursor: not-allowed;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-input),\n  :where(input.rui-input[type=\"checkbox\"][role=\"switch\"])::before {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=inputCss.d.ts.map

package/dist/style/inputCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputCss.d.ts","sourceRoot":"","sources":["../../src/style/inputCss.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,qsGAqGpB,CAAA"}

package/dist/style/inputCss.js

@@ -0,0 +1,107 @@
+// Themed look for native fields: the project puts `rui-input` on its own elements
+// (`rui-input rui-invalid` for the error state). Injected by ThemeProvider.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Text fields match Button: same vertical padding, font size, line height, border and radius.
+export const inputCss = `
+:where(.rui-input) {
+  --rui-input-accent-color: var(--rui-input-accent, var(--color-primary));
+  --rui-input-invalid-color: var(--rui-input-invalid, var(--color-text));
+}
+
+:where(.rui-input:not([type="checkbox"], [type="radio"])) {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+:where(.rui-input:not([type="checkbox"], [type="radio"]))::placeholder {
+  color: var(--color-text-muted);
+  opacity: 1;
+}
+:where(.rui-input:not([type="checkbox"], [type="radio"]):hover:not(:disabled)) {
+  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-text));
+}
+:where(.rui-input:not([type="checkbox"], [type="radio"]):focus-visible) {
+  outline: none;
+  border-color: var(--rui-input-accent-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-accent-color) 25%, transparent);
+}
+:where(.rui-input.rui-invalid:not([type="checkbox"], [type="radio"])) {
+  border-color: var(--rui-input-invalid-color);
+}
+:where(.rui-input.rui-invalid:not([type="checkbox"], [type="radio"]):focus-visible) {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-invalid-color) 25%, transparent);
+}
+:where(textarea.rui-input) {
+  min-height: calc(1em + 1rem + 2px);
+  line-height: 1.4;
+  resize: vertical;
+}
+:where(select.rui-input) option {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+:where(.rui-input:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:where(input.rui-input[type="checkbox"], input.rui-input[type="radio"]) {
+  accent-color: var(--rui-input-accent-color);
+}
+
+:where(input.rui-input[type="checkbox"][role="switch"]) {
+  appearance: none;
+  position: relative;
+  box-sizing: border-box;
+  width: 2.25rem;
+  height: 1.25rem;
+  margin: 0;
+  border: none;
+  border-radius: 999px;
+  background-color: var(--color-border);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: background-color 120ms;
+}
+:where(input.rui-input[type="checkbox"][role="switch"])::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.25rem - 4px);
+  height: calc(1.25rem - 4px);
+  border-radius: 50%;
+  background-color: var(--color-surface);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 25%, transparent);
+  transition: transform 120ms;
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:checked) {
+  background-color: var(--rui-input-accent-color);
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:checked)::before {
+  transform: translateX(1rem);
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:focus-visible) {
+  outline: 2px solid var(--rui-input-accent-color);
+  outline-offset: 2px;
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:disabled) {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-input),
+  :where(input.rui-input[type="checkbox"][role="switch"])::before {
+    transition: none;
+  }
+}
+`;

package/dist/style/loaderCss.d.ts

@@ -0,0 +1,2 @@
+export declare const loaderCss = "\n:where(.rui-spinner) {\n  display: inline-block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: var(--rui-spinner-size, 1em);\n  height: var(--rui-spinner-size, 1em);\n  border: var(--rui-spinner-thickness, 0.15em) solid var(--rui-spinner-color, currentColor);\n  border-top-color: transparent;\n  border-radius: 50%;\n  vertical-align: middle;\n  animation: rui-spin 0.8s linear infinite;\n}\n:where(.rui-skeleton) {\n  display: block;\n  border-radius: 4px;\n  background-color: var(--rui-skeleton-color, var(--color-border));\n  animation: rui-pulse 1.5s ease-in-out infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  /* The spinner is the only loading signal: slowed down, not stopped. */\n  :where(.rui-spinner) {\n    animation-duration: 2s;\n  }\n  :where(.rui-skeleton) {\n    animation: none;\n  }\n}\n@keyframes rui-spin {\n  to { transform: rotate(360deg); }\n}\n@keyframes rui-pulse {\n  50% { opacity: 0.5; }\n}\n";
+//# sourceMappingURL=loaderCss.d.ts.map

package/dist/style/loaderCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loaderCss.d.ts","sourceRoot":"","sources":["../../src/style/loaderCss.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,s7BAkCrB,CAAA"}

package/dist/style/loaderCss.js

@@ -0,0 +1,39 @@
+// Loading indicators, usable as bare classes (`rui-spinner`, `rui-skeleton`) or through
+// the Spinner / Skeleton components. Injected by ThemeProvider and by the components.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+export const loaderCss = `
+:where(.rui-spinner) {
+  display: inline-block;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: var(--rui-spinner-size, 1em);
+  height: var(--rui-spinner-size, 1em);
+  border: var(--rui-spinner-thickness, 0.15em) solid var(--rui-spinner-color, currentColor);
+  border-top-color: transparent;
+  border-radius: 50%;
+  vertical-align: middle;
+  animation: rui-spin 0.8s linear infinite;
+}
+:where(.rui-skeleton) {
+  display: block;
+  border-radius: 4px;
+  background-color: var(--rui-skeleton-color, var(--color-border));
+  animation: rui-pulse 1.5s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  /* The spinner is the only loading signal: slowed down, not stopped. */
+  :where(.rui-spinner) {
+    animation-duration: 2s;
+  }
+  :where(.rui-skeleton) {
+    animation: none;
+  }
+}
+@keyframes rui-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes rui-pulse {
+  50% { opacity: 0.5; }
+}
+`;

package/dist/style/menuCss.d.ts

@@ -0,0 +1,2 @@
+export declare const menuCss = "\n:where(.rui-menu) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid var(--rui-menu-border, var(--color-border));\n  border-radius: 8px;\n  background-color: var(--rui-menu-bg, var(--color-surface));\n  box-shadow: var(--rui-menu-shadow, 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent));\n  color: var(--color-text);\n  font-size: 0.875rem;\n  outline: none;\n  animation: rui-menu-in 120ms ease-out;\n}\n/* Not positioned yet: invisible but focusable, so the first item can take the focus. */\n:where(.rui-menu:not([data-placement])) {\n  opacity: 0;\n  animation: none;\n}\n:where(.rui-menu-item) {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.625rem;\n  border-radius: 4px;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n}\n:where(.rui-menu-item:not([aria-disabled=\"true\"]):hover, .rui-menu-item:not([aria-disabled=\"true\"]):focus) {\n  background-color: color-mix(in srgb, var(--rui-menu-accent, var(--color-primary)) 12%, transparent);\n}\n:where(.rui-menu-item[aria-disabled=\"true\"]) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n:where(.rui-menu-indicator) {\n  display: inline-flex;\n  justify-content: center;\n  width: 1em;\n  color: var(--rui-menu-accent, var(--color-primary));\n}\n:where(.rui-menu-label) {\n  padding: 0.375rem 0.625rem 0.25rem;\n  color: var(--color-text-muted);\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n:where(.rui-menu-separator) {\n  height: 1px;\n  margin: 0.25rem 0;\n  background-color: var(--color-border);\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-menu) {\n    animation: none;\n  }\n}\n@keyframes rui-menu-in {\n  from { opacity: 0; transform: translateY(-2px); }\n}\n";
+//# sourceMappingURL=menuCss.d.ts.map

package/dist/style/menuCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuCss.d.ts","sourceRoot":"","sources":["../../src/style/menuCss.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,mzDAkEnB,CAAA"}

package/dist/style/menuCss.js

@@ -0,0 +1,71 @@
+// DropdownMenu card and items.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const accent = "var(--rui-menu-accent, var(--color-primary))";
+export const menuCss = `
+:where(.rui-menu) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  min-width: 8rem;
+  padding: 0.25rem;
+  border: 1px solid var(--rui-menu-border, var(--color-border));
+  border-radius: 8px;
+  background-color: var(--rui-menu-bg, var(--color-surface));
+  box-shadow: var(--rui-menu-shadow, 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent));
+  color: var(--color-text);
+  font-size: 0.875rem;
+  outline: none;
+  animation: rui-menu-in 120ms ease-out;
+}
+/* Not positioned yet: invisible but focusable, so the first item can take the focus. */
+:where(.rui-menu:not([data-placement])) {
+  opacity: 0;
+  animation: none;
+}
+:where(.rui-menu-item) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 4px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+:where(.rui-menu-item:not([aria-disabled="true"]):hover, .rui-menu-item:not([aria-disabled="true"]):focus) {
+  background-color: color-mix(in srgb, ${accent} 12%, transparent);
+}
+:where(.rui-menu-item[aria-disabled="true"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:where(.rui-menu-indicator) {
+  display: inline-flex;
+  justify-content: center;
+  width: 1em;
+  color: ${accent};
+}
+:where(.rui-menu-label) {
+  padding: 0.375rem 0.625rem 0.25rem;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+:where(.rui-menu-separator) {
+  height: 1px;
+  margin: 0.25rem 0;
+  background-color: var(--color-border);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-menu) {
+    animation: none;
+  }
+}
+@keyframes rui-menu-in {
+  from { opacity: 0; transform: translateY(-2px); }
+}
+`;

package/dist/style/paginationCss.d.ts

@@ -0,0 +1,2 @@
+export declare const paginationCss = "\n:where(.rui-pagination) :where(ul, ol) {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.25rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n:where(.rui-pagination) :where(button, a) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: var(--rui-pagination-size, 2rem);\n  height: var(--rui-pagination-size, 2rem);\n  padding: 0 0.5rem;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background-color: transparent;\n  color: var(--color-text);\n  font: inherit;\n  font-size: 0.875rem;\n  text-decoration: none;\n  cursor: pointer;\n}\n:where(.rui-pagination) :where(button, a):where(:hover:not(:disabled, [aria-disabled=\"true\"], [aria-current=\"page\"])) {\n  background-color: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n:where(.rui-pagination) :where(button, a):where(:focus-visible) {\n  outline: 2px solid var(--rui-pagination-accent, var(--color-primary));\n  outline-offset: 2px;\n}\n:where(.rui-pagination) :where(button, a):where([aria-current=\"page\"]) {\n  border-color: var(--rui-pagination-accent, var(--color-primary));\n  background-color: var(--rui-pagination-accent, var(--color-primary));\n  color: var(--rui-pagination-on, var(--color-bg));\n}\n:where(.rui-pagination) :where(button, a):where(:disabled, [aria-disabled=\"true\"]) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n:where(.rui-pagination-ellipsis) {\n  display: inline-flex;\n  justify-content: center;\n  min-width: var(--rui-pagination-size, 2rem);\n  color: var(--color-text-muted);\n}\n";
+//# sourceMappingURL=paginationCss.d.ts.map

package/dist/style/paginationCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationCss.d.ts","sourceRoot":"","sources":["../../src/style/paginationCss.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,ykDAiDzB,CAAA"}

package/dist/style/paginationCss.js

@@ -0,0 +1,57 @@
+// Pagination: `rui-pagination` on a <nav> holding a list of `button` / `a` items;
+// the current page has `aria-current="page"`.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const accent = "var(--rui-pagination-accent, var(--color-primary))";
+const size = "var(--rui-pagination-size, 2rem)";
+const item = ":where(.rui-pagination) :where(button, a)";
+export const paginationCss = `
+:where(.rui-pagination) :where(ul, ol) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+${item} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: ${size};
+  height: ${size};
+  padding: 0 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-size: 0.875rem;
+  text-decoration: none;
+  cursor: pointer;
+}
+${item}:where(:hover:not(:disabled, [aria-disabled="true"], [aria-current="page"])) {
+  background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
+}
+${item}:where(:focus-visible) {
+  outline: 2px solid ${accent};
+  outline-offset: 2px;
+}
+${item}:where([aria-current="page"]) {
+  border-color: ${accent};
+  background-color: ${accent};
+  color: var(--rui-pagination-on, var(--color-bg));
+}
+${item}:where(:disabled, [aria-disabled="true"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:where(.rui-pagination-ellipsis) {
+  display: inline-flex;
+  justify-content: center;
+  min-width: ${size};
+  color: var(--color-text-muted);
+}
+`;

package/dist/style/resolveColor.d.ts

@@ -0,0 +1,8 @@
+/** `"--x"` → `"var(--x)"` (theme variable); anything else is kept as a raw CSS color. */
+export declare function resolveColor(color: string): string;
+/**
+ * Text color on a solid `color` background: `"--color-x"` reads `--color-on-x`,
+ * falling back to `--color-bg` (also used for raw colors).
+ */
+export declare function resolveOnColor(color: string): string;
+//# sourceMappingURL=resolveColor.d.ts.map

package/dist/style/resolveColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveColor.d.ts","sourceRoot":"","sources":["../../src/style/resolveColor.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIpD"}

package/dist/style/resolveColor.js

@@ -0,0 +1,13 @@
+/** `"--x"` → `"var(--x)"` (theme variable); anything else is kept as a raw CSS color. */
+export function resolveColor(color) {
+    return color.startsWith("--") ? `var(${color})` : color;
+}
+/**
+ * Text color on a solid `color` background: `"--color-x"` reads `--color-on-x`,
+ * falling back to `--color-bg` (also used for raw colors).
+ */
+export function resolveOnColor(color) {
+    return color.startsWith("--color-")
+        ? `var(${color.replace(/^--color-/, "--color-on-")}, var(--color-bg))`
+        : "var(--color-bg)";
+}

package/dist/style/stackCss.d.ts

@@ -0,0 +1,2 @@
+export declare const stackCss = "\n:where(.rui-stack) {\n  display: flex;\n  flex-direction: var(--rui-stack-direction, column);\n  flex-wrap: var(--rui-stack-wrap, nowrap);\n  gap: var(--rui-stack-gap, 0.75rem);\n  align-items: var(--rui-stack-align, stretch);\n  justify-content: var(--rui-stack-justify, flex-start);\n}\n/* Custom properties inherit: a nested stack must not take its parent's settings. */\n:where(.rui-stack) > * {\n  --rui-stack-direction: initial;\n  --rui-stack-wrap: initial;\n  --rui-stack-gap: initial;\n  --rui-stack-align: initial;\n  --rui-stack-justify: initial;\n}\n";
+//# sourceMappingURL=stackCss.d.ts.map

package/dist/style/stackCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackCss.d.ts","sourceRoot":"","sources":["../../src/style/stackCss.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,yjBAiBpB,CAAA"}