@gnome-ui/react 1.41.0 → 1.43.0

package/README.md

@@ -40,7 +40,7 @@ export default function App() {
 
 ## Provider & formatting
 
-`GnomeProvider` supplies locale, text direction, and default `Intl` formatting options to gnome-ui components. When `locale` is omitted, the browser locale is used.
+`GnomeProvider` supplies locale, text direction, color scheme, and default `Intl` formatting options to gnome-ui components. When `locale` is omitted, the browser locale is used.
 
 ```tsx
 import { GnomeProvider } from "@gnome-ui/react";
@@ -79,6 +79,82 @@ function Metric({ value, date }: { value: number; date: Date }) {
 }
 ```
 
+## Color scheme
+
+Pass `colorScheme` to `GnomeProvider` to control the app theme. The provider applies the `data-theme` attribute to `document.documentElement` automatically — no manual DOM manipulation needed.
+
+| Value | Behavior |
+|-------|----------|
+| `"system"` (default) | Follows the OS `prefers-color-scheme` preference |
+| `"light"` | Forces light theme |
+| `"dark"` | Forces dark theme |
+
+```tsx
+import { GnomeProvider } from "@gnome-ui/react";
+
+// Controlled by user preference stored in your app state/localStorage
+export default function App({ colorScheme }) {
+  return (
+    <GnomeProvider colorScheme={colorScheme}>
+      {/* all gnome-ui components respond automatically */}
+    </GnomeProvider>
+  );
+}
+```
+
+Consume the current scheme in any component:
+
+```tsx
+import { useColorScheme, useResolvedColorScheme } from "@gnome-ui/react";
+
+function ThemeAwareImage() {
+  const resolvedColorScheme = useResolvedColorScheme(); // "light" | "dark"
+
+  return (
+    <img src={resolvedColorScheme === "dark" ? "/logo-dark.svg" : "/logo.svg"} />
+  );
+}
+```
+
+- `useColorScheme()` — returns the value passed to `GnomeProvider` (`"light"`, `"dark"`, or `"system"`).
+- `useResolvedColorScheme()` — always returns `"light"` or `"dark"`, resolving `"system"` against the OS preference in real time.
+
+## Accent color
+
+Pass `accentColor` to `GnomeProvider` to set the app-wide accent color. The provider applies the correct CSS custom properties to `document.documentElement` automatically.
+
+Two types of values are accepted:
+
+| Value | Behavior |
+|-------|----------|
+| Named palette (`"blue"`, `"green"`, `"yellow"`, `"orange"`, `"red"`, `"purple"`, `"brown"`) | Theme-aware — uses the correct shade for light/dark mode automatically. Defaults to `"blue"`. |
+| Any CSS color string (`"#ff0000"`, `"oklch(…)"`, etc.) | Applied directly; same value in light and dark mode. |
+
+```tsx
+import { GnomeProvider } from "@gnome-ui/react";
+
+export default function App({ accentColor }) {
+  return (
+    <GnomeProvider accentColor={accentColor}>
+      {/* "green", "#a020f0", or any CSS color */}
+    </GnomeProvider>
+  );
+}
+```
+
+Consume the accent color in any component:
+
+```tsx
+import { useAccentColor } from "@gnome-ui/react";
+
+function AccentDot() {
+  const accent = useAccentColor(); // e.g. "green" or "#ff0000"
+  return <span style={{ background: accent }} />;
+}
+```
+
+- `useAccentColor()` — returns the raw value passed to `GnomeProvider` (named color or CSS string).
+
 ## Tree-shaking
 
 The package ships per-component entry points, so bundlers (webpack, Rollup, esbuild, Vite) can eliminate unused components automatically. Named imports from the root entry work with any bundler that respects `"sideEffects"`:

package/dist/components/Card/Card.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_card_7f351_1`,t=`_interactive_7f351_19`,n={card:e,"padding-none":`_padding-none_7f351_12`,"padding-sm":`_padding-sm_7f351_13`,"padding-md":`_padding-md_7f351_14`,"padding-lg":`_padding-lg_7f351_15`,interactive:t};exports.default=n;
+var e=`_card_1716f_1`,t=`_interactive_1716f_19`,n={card:e,"padding-none":`_padding-none_1716f_12`,"padding-sm":`_padding-sm_1716f_13`,"padding-md":`_padding-md_1716f_14`,"padding-lg":`_padding-lg_1716f_15`,interactive:t};exports.default=n;
 //# sourceMappingURL=Card.module.css.cjs.map

package/dist/components/Card/Card.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.css.cjs","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none { padding: 0; }\n.padding-sm   { padding: var(--gnome-space-2); }\n.padding-md   { padding: var(--gnome-space-4); }\n.padding-lg   { padding: var(--gnome-space-5); }\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\n}\n\n.interactive:active {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 88%,\n    black 12%\n  );\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.css.cjs","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none { padding: 0; }\n.padding-sm   { padding: var(--gnome-space-2); }\n.padding-md   { padding: var(--gnome-space-4); }\n.padding-lg   { padding: var(--gnome-space-5); }\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\n}\n\n.interactive:active {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 88%,\n    black 12%\n  );\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}

package/dist/components/Card/Card.module.css.js

@@ -1,10 +1,10 @@
 //#region src/components/Card/Card.module.css
-var e = "_card_7f351_1", t = "_interactive_7f351_19", n = {
+var e = "_card_1716f_1", t = "_interactive_1716f_19", n = {
 	card: e,
-	"padding-none": "_padding-none_7f351_12",
-	"padding-sm": "_padding-sm_7f351_13",
-	"padding-md": "_padding-md_7f351_14",
-	"padding-lg": "_padding-lg_7f351_15",
+	"padding-none": "_padding-none_1716f_12",
+	"padding-sm": "_padding-sm_1716f_13",
+	"padding-md": "_padding-md_1716f_14",
+	"padding-lg": "_padding-lg_1716f_15",
 	interactive: t
 };
 //#endregion

package/dist/components/Card/Card.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.css.js","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none { padding: 0; }\n.padding-sm   { padding: var(--gnome-space-2); }\n.padding-md   { padding: var(--gnome-space-4); }\n.padding-lg   { padding: var(--gnome-space-5); }\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\n}\n\n.interactive:active {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 88%,\n    black 12%\n  );\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.css.js","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none { padding: 0; }\n.padding-sm   { padding: var(--gnome-space-2); }\n.padding-md   { padding: var(--gnome-space-4); }\n.padding-lg   { padding: var(--gnome-space-5); }\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\n}\n\n.interactive:active {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 88%,\n    black 12%\n  );\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}

package/dist/components/GnomeProvider/GnomeContext.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`);var t=(0,e.createContext)({locale:void 0,dir:`ltr`,numberFormat:void 0,dateTimeFormat:void 0});function n(){return(0,e.useContext)(t).locale}function r(){return(0,e.useContext)(t).dir}function i(n){let{locale:r,numberFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.NumberFormat(r,{...i,...n}),[r,i,n])}function a(n){let{locale:r,dateTimeFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.DateTimeFormat(r,{...i,...n}),[r,i,n])}exports.GnomeContext=t,exports.useDateTimeFormatter=a,exports.useDir=r,exports.useLocale=n,exports.useNumberFormatter=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`);var t=(0,e.createContext)({locale:void 0,dir:`ltr`,numberFormat:void 0,dateTimeFormat:void 0,colorScheme:`system`,resolvedColorScheme:`light`,accentColor:`blue`});function n(){return(0,e.useContext)(t).locale}function r(){return(0,e.useContext)(t).dir}function i(n){let{locale:r,numberFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.NumberFormat(r,{...i,...n}),[r,i,n])}function a(n){let{locale:r,dateTimeFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.DateTimeFormat(r,{...i,...n}),[r,i,n])}function o(){return(0,e.useContext)(t).colorScheme}function s(){return(0,e.useContext)(t).resolvedColorScheme}function c(){return(0,e.useContext)(t).accentColor}exports.GnomeContext=t,exports.useAccentColor=c,exports.useColorScheme=o,exports.useDateTimeFormatter=a,exports.useDir=r,exports.useLocale=n,exports.useNumberFormatter=i,exports.useResolvedColorScheme=s;
 //# sourceMappingURL=GnomeContext.cjs.map

package/dist/components/GnomeProvider/GnomeContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GnomeContext.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" | \"rtl\";\n\nexport interface GnomeContextValue {\n  locale: string | undefined;\n  dir: GnomeDir;\n  numberFormat: Intl.NumberFormatOptions | undefined;\n  dateTimeFormat: Intl.DateTimeFormatOptions | undefined;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n  locale: undefined,\n  dir: \"ltr\",\n  numberFormat: undefined,\n  dateTimeFormat: undefined,\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. */\nexport function useLocale(): string | undefined {\n  return useContext(GnomeContext).locale;\n}\n\n/** Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. */\nexport function useDir(): GnomeDir {\n  return useContext(GnomeContext).dir;\n}\n\n/** Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useNumberFormatter(\n  options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n  const { locale, numberFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n    [locale, numberFormat, options],\n  );\n}\n\n/** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useDateTimeFormatter(\n  options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n  const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n    [locale, dateTimeFormat, options],\n  );\n}\n"],"mappings":"0FAWA,IAAa,GAAA,EAAA,EAAA,eAAgD,CAC3D,OAAQ,IAAA,GACR,IAAK,MACL,aAAc,IAAA,GACd,eAAgB,IAAA,GACjB,CAAC,CAGF,SAAgB,GAAgC,CAC9C,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,OAIlC,SAAgB,GAAmB,CACjC,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,IAIlC,SAAgB,EACd,EACmB,CACnB,GAAM,CAAE,SAAQ,iBAAA,EAAA,EAAA,YAA4B,EAAa,CAEzD,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,aAAa,EAAQ,CAAE,GAAG,EAAc,GAAG,EAAS,CAAC,CACpE,CAAC,EAAQ,EAAc,EAAQ,CAChC,CAIH,SAAgB,EACd,EACqB,CACrB,GAAM,CAAE,SAAQ,mBAAA,EAAA,EAAA,YAA8B,EAAa,CAE3D,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,eAAe,EAAQ,CAAE,GAAG,EAAgB,GAAG,EAAS,CAAC,CACxE,CAAC,EAAQ,EAAgB,EAAQ,CAClC"}
+{"version":3,"file":"GnomeContext.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" | \"rtl\";\nexport type GnomeColorScheme = \"light\" | \"dark\" | \"system\";\nexport type GnomeNamedAccentColor =\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"brown\";\nexport type GnomeAccentColor = GnomeNamedAccentColor | (string & {});\n\nexport interface GnomeContextValue {\n  locale: string | undefined;\n  dir: GnomeDir;\n  numberFormat: Intl.NumberFormatOptions | undefined;\n  dateTimeFormat: Intl.DateTimeFormatOptions | undefined;\n  colorScheme: GnomeColorScheme;\n  resolvedColorScheme: \"light\" | \"dark\";\n  accentColor: GnomeAccentColor;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n  locale: undefined,\n  dir: \"ltr\",\n  numberFormat: undefined,\n  dateTimeFormat: undefined,\n  colorScheme: \"system\",\n  resolvedColorScheme: \"light\",\n  accentColor: \"blue\",\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. */\nexport function useLocale(): string | undefined {\n  return useContext(GnomeContext).locale;\n}\n\n/** Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. */\nexport function useDir(): GnomeDir {\n  return useContext(GnomeContext).dir;\n}\n\n/** Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useNumberFormatter(\n  options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n  const { locale, numberFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n    [locale, numberFormat, options],\n  );\n}\n\n/** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useDateTimeFormatter(\n  options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n  const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n    [locale, dateTimeFormat, options],\n  );\n}\n\n/** Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `\"system\"`. */\nexport function useColorScheme(): GnomeColorScheme {\n  return useContext(GnomeContext).colorScheme;\n}\n\n/** Returns the resolved color scheme (`\"light\"` or `\"dark\"`), accounting for the system preference when `colorScheme` is `\"system\"`. */\nexport function useResolvedColorScheme(): \"light\" | \"dark\" {\n  return useContext(GnomeContext).resolvedColorScheme;\n}\n\n/** Returns the accent color set by the nearest `GnomeProvider`. Defaults to `\"blue\"`. */\nexport function useAccentColor(): GnomeAccentColor {\n  return useContext(GnomeContext).accentColor;\n}\n"],"mappings":"0FAwBA,IAAa,GAAA,EAAA,EAAA,eAAgD,CAC3D,OAAQ,IAAA,GACR,IAAK,MACL,aAAc,IAAA,GACd,eAAgB,IAAA,GAChB,YAAa,SACb,oBAAqB,QACrB,YAAa,OACd,CAAC,CAGF,SAAgB,GAAgC,CAC9C,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,OAIlC,SAAgB,GAAmB,CACjC,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,IAIlC,SAAgB,EACd,EACmB,CACnB,GAAM,CAAE,SAAQ,iBAAA,EAAA,EAAA,YAA4B,EAAa,CAEzD,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,aAAa,EAAQ,CAAE,GAAG,EAAc,GAAG,EAAS,CAAC,CACpE,CAAC,EAAQ,EAAc,EAAQ,CAChC,CAIH,SAAgB,EACd,EACqB,CACrB,GAAM,CAAE,SAAQ,mBAAA,EAAA,EAAA,YAA8B,EAAa,CAE3D,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,eAAe,EAAQ,CAAE,GAAG,EAAgB,GAAG,EAAS,CAAC,CACxE,CAAC,EAAQ,EAAgB,EAAQ,CAClC,CAIH,SAAgB,GAAmC,CACjD,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,YAIlC,SAAgB,GAA2C,CACzD,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,oBAIlC,SAAgB,GAAmC,CACjD,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC"}

package/dist/components/GnomeProvider/GnomeContext.d.ts

@@ -1,9 +1,15 @@
 export type GnomeDir = "ltr" | "rtl";
+export type GnomeColorScheme = "light" | "dark" | "system";
+export type GnomeNamedAccentColor = "blue" | "green" | "yellow" | "orange" | "red" | "purple" | "brown";
+export type GnomeAccentColor = GnomeNamedAccentColor | (string & {});
 export interface GnomeContextValue {
     locale: string | undefined;
     dir: GnomeDir;
     numberFormat: Intl.NumberFormatOptions | undefined;
     dateTimeFormat: Intl.DateTimeFormatOptions | undefined;
+    colorScheme: GnomeColorScheme;
+    resolvedColorScheme: "light" | "dark";
+    accentColor: GnomeAccentColor;
 }
 export declare const GnomeContext: import('react').Context<GnomeContextValue>;
 /** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. */
@@ -14,3 +20,9 @@ export declare function useDir(): GnomeDir;
 export declare function useNumberFormatter(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 /** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */
 export declare function useDateTimeFormatter(options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `"system"`. */
+export declare function useColorScheme(): GnomeColorScheme;
+/** Returns the resolved color scheme (`"light"` or `"dark"`), accounting for the system preference when `colorScheme` is `"system"`. */
+export declare function useResolvedColorScheme(): "light" | "dark";
+/** Returns the accent color set by the nearest `GnomeProvider`. Defaults to `"blue"`. */
+export declare function useAccentColor(): GnomeAccentColor;

package/dist/components/GnomeProvider/GnomeContext.js

@@ -4,7 +4,10 @@ var r = e({
 	locale: void 0,
 	dir: "ltr",
 	numberFormat: void 0,
-	dateTimeFormat: void 0
+	dateTimeFormat: void 0,
+	colorScheme: "system",
+	resolvedColorScheme: "light",
+	accentColor: "blue"
 });
 function i() {
 	return t(r).locale;
@@ -34,7 +37,16 @@ function s(e) {
 		e
 	]);
 }
+function c() {
+	return t(r).colorScheme;
+}
+function l() {
+	return t(r).resolvedColorScheme;
+}
+function u() {
+	return t(r).accentColor;
+}
 //#endregion
-export { r as GnomeContext, s as useDateTimeFormatter, a as useDir, i as useLocale, o as useNumberFormatter };
+export { r as GnomeContext, u as useAccentColor, c as useColorScheme, s as useDateTimeFormatter, a as useDir, i as useLocale, o as useNumberFormatter, l as useResolvedColorScheme };
 
 //# sourceMappingURL=GnomeContext.js.map

package/dist/components/GnomeProvider/GnomeContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"GnomeContext.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" | \"rtl\";\n\nexport interface GnomeContextValue {\n  locale: string | undefined;\n  dir: GnomeDir;\n  numberFormat: Intl.NumberFormatOptions | undefined;\n  dateTimeFormat: Intl.DateTimeFormatOptions | undefined;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n  locale: undefined,\n  dir: \"ltr\",\n  numberFormat: undefined,\n  dateTimeFormat: undefined,\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. */\nexport function useLocale(): string | undefined {\n  return useContext(GnomeContext).locale;\n}\n\n/** Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. */\nexport function useDir(): GnomeDir {\n  return useContext(GnomeContext).dir;\n}\n\n/** Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useNumberFormatter(\n  options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n  const { locale, numberFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n    [locale, numberFormat, options],\n  );\n}\n\n/** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useDateTimeFormatter(\n  options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n  const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n    [locale, dateTimeFormat, options],\n  );\n}\n"],"mappings":";;AAWA,IAAa,IAAe,EAAiC;CAC3D,QAAQ,KAAA;CACR,KAAK;CACL,cAAc,KAAA;CACd,gBAAgB,KAAA;CACjB,CAAC;AAGF,SAAgB,IAAgC;AAC9C,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAAmB;AACjC,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,WAAQ,oBAAiB,EAAW,EAAa;AAEzD,QAAO,QACC,IAAI,KAAK,aAAa,GAAQ;EAAE,GAAG;EAAc,GAAG;EAAS,CAAC,EACpE;EAAC;EAAQ;EAAc;EAAQ,CAChC;;AAIH,SAAgB,EACd,GACqB;CACrB,IAAM,EAAE,WAAQ,sBAAmB,EAAW,EAAa;AAE3D,QAAO,QACC,IAAI,KAAK,eAAe,GAAQ;EAAE,GAAG;EAAgB,GAAG;EAAS,CAAC,EACxE;EAAC;EAAQ;EAAgB;EAAQ,CAClC"}
+{"version":3,"file":"GnomeContext.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" | \"rtl\";\nexport type GnomeColorScheme = \"light\" | \"dark\" | \"system\";\nexport type GnomeNamedAccentColor =\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"brown\";\nexport type GnomeAccentColor = GnomeNamedAccentColor | (string & {});\n\nexport interface GnomeContextValue {\n  locale: string | undefined;\n  dir: GnomeDir;\n  numberFormat: Intl.NumberFormatOptions | undefined;\n  dateTimeFormat: Intl.DateTimeFormatOptions | undefined;\n  colorScheme: GnomeColorScheme;\n  resolvedColorScheme: \"light\" | \"dark\";\n  accentColor: GnomeAccentColor;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n  locale: undefined,\n  dir: \"ltr\",\n  numberFormat: undefined,\n  dateTimeFormat: undefined,\n  colorScheme: \"system\",\n  resolvedColorScheme: \"light\",\n  accentColor: \"blue\",\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. */\nexport function useLocale(): string | undefined {\n  return useContext(GnomeContext).locale;\n}\n\n/** Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. */\nexport function useDir(): GnomeDir {\n  return useContext(GnomeContext).dir;\n}\n\n/** Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useNumberFormatter(\n  options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n  const { locale, numberFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n    [locale, numberFormat, options],\n  );\n}\n\n/** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useDateTimeFormatter(\n  options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n  const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n  return useMemo(\n    () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n    [locale, dateTimeFormat, options],\n  );\n}\n\n/** Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `\"system\"`. */\nexport function useColorScheme(): GnomeColorScheme {\n  return useContext(GnomeContext).colorScheme;\n}\n\n/** Returns the resolved color scheme (`\"light\"` or `\"dark\"`), accounting for the system preference when `colorScheme` is `\"system\"`. */\nexport function useResolvedColorScheme(): \"light\" | \"dark\" {\n  return useContext(GnomeContext).resolvedColorScheme;\n}\n\n/** Returns the accent color set by the nearest `GnomeProvider`. Defaults to `\"blue\"`. */\nexport function useAccentColor(): GnomeAccentColor {\n  return useContext(GnomeContext).accentColor;\n}\n"],"mappings":";;AAwBA,IAAa,IAAe,EAAiC;CAC3D,QAAQ,KAAA;CACR,KAAK;CACL,cAAc,KAAA;CACd,gBAAgB,KAAA;CAChB,aAAa;CACb,qBAAqB;CACrB,aAAa;CACd,CAAC;AAGF,SAAgB,IAAgC;AAC9C,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAAmB;AACjC,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,WAAQ,oBAAiB,EAAW,EAAa;AAEzD,QAAO,QACC,IAAI,KAAK,aAAa,GAAQ;EAAE,GAAG;EAAc,GAAG;EAAS,CAAC,EACpE;EAAC;EAAQ;EAAc;EAAQ,CAChC;;AAIH,SAAgB,EACd,GACqB;CACrB,IAAM,EAAE,WAAQ,sBAAmB,EAAW,EAAa;AAE3D,QAAO,QACC,IAAI,KAAK,eAAe,GAAQ;EAAE,GAAG;EAAgB,GAAG;EAAS,CAAC,EACxE;EAAC;EAAQ;EAAgB;EAAQ,CAClC;;AAIH,SAAgB,IAAmC;AACjD,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAA2C;AACzD,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAAmC;AACjD,QAAO,EAAW,EAAa,CAAC"}

package/dist/components/GnomeProvider/GnomeProvider.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./GnomeContext.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({locale:r,dir:i=`ltr`,numberFormat:a,dateTimeFormat:o,children:s}){let c=(0,t.useMemo)(()=>({locale:r,dir:i,numberFormat:a,dateTimeFormat:o}),[r,i,a,o]);return(0,n.jsx)(e.GnomeContext.Provider,{value:c,children:s})}exports.GnomeProvider=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./GnomeContext.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function i(){return typeof window<`u`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches}function a({locale:a,dir:o=`ltr`,numberFormat:s,dateTimeFormat:c,colorScheme:l=`system`,accentColor:u=`blue`,children:d}){let[,f]=(0,t.useReducer)(e=>e+1,0);(0,t.useEffect)(()=>{if(l!==`system`)return;let e=window.matchMedia(`(prefers-color-scheme: dark)`);return e.addEventListener(`change`,f),()=>e.removeEventListener(`change`,f)},[l]),(0,t.useEffect)(()=>{let e=document.documentElement;l===`system`?e.removeAttribute(`data-theme`):e.setAttribute(`data-theme`,l)},[l]);let p=l===`system`?i()?`dark`:`light`:l;(0,t.useEffect)(()=>{let e=document.documentElement;if(u===`blue`){e.style.removeProperty(`--gnome-accent-color`),e.style.removeProperty(`--gnome-accent-bg-color`);return}if(r.has(u)){let t=p===`dark`?`2`:`3`;e.style.setProperty(`--gnome-accent-color`,`var(--gnome-${u}-${t})`),e.style.setProperty(`--gnome-accent-bg-color`,`var(--gnome-${u}-3)`)}else e.style.setProperty(`--gnome-accent-color`,u),e.style.setProperty(`--gnome-accent-bg-color`,u)},[u,p]);let m=(0,t.useMemo)(()=>({locale:a,dir:o,numberFormat:s,dateTimeFormat:c,colorScheme:l,resolvedColorScheme:p,accentColor:u}),[a,o,s,c,l,p,u]);return(0,n.jsx)(e.GnomeContext.Provider,{value:m,children:d})}exports.GnomeProvider=a;
 //# sourceMappingURL=GnomeProvider.cjs.map

package/dist/components/GnomeProvider/GnomeProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GnomeProvider.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { GnomeContext, type GnomeDir } from \"./GnomeContext\";\n\nexport interface GnomeProviderProps {\n  /**\n   * BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n   * When omitted, components fall back to the browser locale.\n   */\n  locale?: string;\n  /** Text direction. Defaults to `\"ltr\"`. */\n  dir?: GnomeDir;\n  /**\n   * Global defaults for number formatting.\n   *\n   * Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n   * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n   * full values such as `1,000`.\n   */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Global defaults for date/time formatting. */\n  dateTimeFormat?: Intl.DateTimeFormatOptions;\n  children: ReactNode;\n}\n\n/** Provides locale and text direction to all descendant gnome-ui components. */\nexport function GnomeProvider({\n  locale,\n  dir = \"ltr\",\n  numberFormat,\n  dateTimeFormat,\n  children,\n}: GnomeProviderProps) {\n  const value = useMemo(\n    () => ({ locale, dir, numberFormat, dateTimeFormat }),\n    [locale, dir, numberFormat, dateTimeFormat],\n  );\n\n  return (\n    <GnomeContext.Provider value={value}>\n      {children}\n    </GnomeContext.Provider>\n  );\n}\n"],"mappings":"+JAyBA,SAAgB,EAAc,CAC5B,SACA,MAAM,MACN,eACA,iBACA,YACqB,CACrB,IAAM,GAAA,EAAA,EAAA,cACG,CAAE,SAAQ,MAAK,eAAc,iBAAgB,EACpD,CAAC,EAAQ,EAAK,EAAc,EAAe,CAC5C,CAED,OACE,EAAA,EAAA,KAAC,EAAA,aAAa,SAAd,CAA8B,QAC3B,WACqB,CAAA"}
+{"version":3,"file":"GnomeProvider.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, type ReactNode } from \"react\";\nimport {\n  GnomeContext,\n  type GnomeAccentColor,\n  type GnomeColorScheme,\n  type GnomeDir,\n} from \"./GnomeContext\";\n\nconst NAMED_ACCENT_COLORS = new Set<string>([\n  \"blue\", \"green\", \"yellow\", \"orange\", \"red\", \"purple\", \"brown\",\n]);\n\nexport interface GnomeProviderProps {\n  /**\n   * BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n   * When omitted, components fall back to the browser locale.\n   */\n  locale?: string;\n  /** Text direction. Defaults to `\"ltr\"`. */\n  dir?: GnomeDir;\n  /**\n   * Global defaults for number formatting.\n   *\n   * Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n   * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n   * full values such as `1,000`.\n   */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Global defaults for date/time formatting. */\n  dateTimeFormat?: Intl.DateTimeFormatOptions;\n  /**\n   * Color scheme preference. When set to `\"system\"` (default), the OS\n   * preference is respected via `prefers-color-scheme`. When set to\n   * `\"light\"` or `\"dark\"`, the `data-theme` attribute is applied to\n   * `document.documentElement` to force that theme.\n   */\n  colorScheme?: GnomeColorScheme;\n  /**\n   * Accent color. Accepts a named GNOME palette color (`\"blue\"`, `\"green\"`,\n   * `\"yellow\"`, `\"orange\"`, `\"red\"`, `\"purple\"`, `\"brown\"`) or any CSS color\n   * string (e.g. `\"#ff0000\"`). Named colors are theme-aware and use the\n   * correct shade for light/dark mode automatically. Defaults to `\"blue\"`.\n   */\n  accentColor?: GnomeAccentColor;\n  children: ReactNode;\n}\n\nfunction getSystemIsDark(): boolean {\n  return typeof window !== \"undefined\" &&\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n}\n\n/** Provides locale, text direction, color scheme, and accent color to all descendant gnome-ui components. */\nexport function GnomeProvider({\n  locale,\n  dir = \"ltr\",\n  numberFormat,\n  dateTimeFormat,\n  colorScheme = \"system\",\n  accentColor = \"blue\",\n  children,\n}: GnomeProviderProps) {\n  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);\n\n  useEffect(() => {\n    if (colorScheme !== \"system\") return;\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    mq.addEventListener(\"change\", forceUpdate);\n    return () => mq.removeEventListener(\"change\", forceUpdate);\n  }, [colorScheme]);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    if (colorScheme === \"system\") {\n      root.removeAttribute(\"data-theme\");\n    } else {\n      root.setAttribute(\"data-theme\", colorScheme);\n    }\n  }, [colorScheme]);\n\n  const resolvedColorScheme = colorScheme === \"system\"\n    ? (getSystemIsDark() ? \"dark\" : \"light\")\n    : colorScheme;\n\n  useEffect(() => {\n    const root = document.documentElement;\n    if (accentColor === \"blue\") {\n      root.style.removeProperty(\"--gnome-accent-color\");\n      root.style.removeProperty(\"--gnome-accent-bg-color\");\n      return;\n    }\n    if (NAMED_ACCENT_COLORS.has(accentColor)) {\n      const shade = resolvedColorScheme === \"dark\" ? \"2\" : \"3\";\n      root.style.setProperty(\"--gnome-accent-color\", `var(--gnome-${accentColor}-${shade})`);\n      root.style.setProperty(\"--gnome-accent-bg-color\", `var(--gnome-${accentColor}-3)`);\n    } else {\n      root.style.setProperty(\"--gnome-accent-color\", accentColor);\n      root.style.setProperty(\"--gnome-accent-bg-color\", accentColor);\n    }\n  }, [accentColor, resolvedColorScheme]);\n\n  const value = useMemo(\n    () => ({ locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor }),\n    [locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor],\n  );\n\n  return (\n    <GnomeContext.Provider value={value}>\n      {children}\n    </GnomeContext.Provider>\n  );\n}\n"],"mappings":"+JAQA,IAAM,EAAsB,IAAI,IAAY,CAC1C,OAAQ,QAAS,SAAU,SAAU,MAAO,SAAU,QACvD,CAAC,CAqCF,SAAS,GAA2B,CAClC,OAAO,OAAO,OAAW,KACvB,OAAO,WAAW,+BAA+B,CAAC,QAItD,SAAgB,EAAc,CAC5B,SACA,MAAM,MACN,eACA,iBACA,cAAc,SACd,cAAc,OACd,YACqB,CACrB,GAAM,EAAG,IAAA,EAAA,EAAA,YAA2B,GAAc,EAAI,EAAG,EAAE,EAE3D,EAAA,EAAA,eAAgB,CACd,GAAI,IAAgB,SAAU,OAC9B,IAAM,EAAK,OAAO,WAAW,+BAA+B,CAE5D,OADA,EAAG,iBAAiB,SAAU,EAAY,KAC7B,EAAG,oBAAoB,SAAU,EAAY,EACzD,CAAC,EAAY,CAAC,EAEjB,EAAA,EAAA,eAAgB,CACd,IAAM,EAAO,SAAS,gBAClB,IAAgB,SAClB,EAAK,gBAAgB,aAAa,CAElC,EAAK,aAAa,aAAc,EAAY,EAE7C,CAAC,EAAY,CAAC,CAEjB,IAAM,EAAsB,IAAgB,SACvC,GAAiB,CAAG,OAAS,QAC9B,GAEJ,EAAA,EAAA,eAAgB,CACd,IAAM,EAAO,SAAS,gBACtB,GAAI,IAAgB,OAAQ,CAC1B,EAAK,MAAM,eAAe,uBAAuB,CACjD,EAAK,MAAM,eAAe,0BAA0B,CACpD,OAEF,GAAI,EAAoB,IAAI,EAAY,CAAE,CACxC,IAAM,EAAQ,IAAwB,OAAS,IAAM,IACrD,EAAK,MAAM,YAAY,uBAAwB,eAAe,EAAY,GAAG,EAAM,GAAG,CACtF,EAAK,MAAM,YAAY,0BAA2B,eAAe,EAAY,KAAK,MAElF,EAAK,MAAM,YAAY,uBAAwB,EAAY,CAC3D,EAAK,MAAM,YAAY,0BAA2B,EAAY,EAE/D,CAAC,EAAa,EAAoB,CAAC,CAEtC,IAAM,GAAA,EAAA,EAAA,cACG,CAAE,SAAQ,MAAK,eAAc,iBAAgB,cAAa,sBAAqB,cAAa,EACnG,CAAC,EAAQ,EAAK,EAAc,EAAgB,EAAa,EAAqB,EAAY,CAC3F,CAED,OACE,EAAA,EAAA,KAAC,EAAA,aAAa,SAAd,CAA8B,QAC3B,WACqB,CAAA"}

package/dist/components/GnomeProvider/GnomeProvider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { GnomeDir } from './GnomeContext';
+import { GnomeAccentColor, GnomeColorScheme, GnomeDir } from './GnomeContext';
 export interface GnomeProviderProps {
     /**
      * BCP 47 locale tag (e.g. `"es-ES"`, `"de-DE"`).
@@ -18,7 +18,21 @@ export interface GnomeProviderProps {
     numberFormat?: Intl.NumberFormatOptions;
     /** Global defaults for date/time formatting. */
     dateTimeFormat?: Intl.DateTimeFormatOptions;
+    /**
+     * Color scheme preference. When set to `"system"` (default), the OS
+     * preference is respected via `prefers-color-scheme`. When set to
+     * `"light"` or `"dark"`, the `data-theme` attribute is applied to
+     * `document.documentElement` to force that theme.
+     */
+    colorScheme?: GnomeColorScheme;
+    /**
+     * Accent color. Accepts a named GNOME palette color (`"blue"`, `"green"`,
+     * `"yellow"`, `"orange"`, `"red"`, `"purple"`, `"brown"`) or any CSS color
+     * string (e.g. `"#ff0000"`). Named colors are theme-aware and use the
+     * correct shade for light/dark mode automatically. Defaults to `"blue"`.
+     */
+    accentColor?: GnomeAccentColor;
     children: ReactNode;
 }
-/** Provides locale and text direction to all descendant gnome-ui components. */
-export declare function GnomeProvider({ locale, dir, numberFormat, dateTimeFormat, children, }: GnomeProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Provides locale, text direction, color scheme, and accent color to all descendant gnome-ui components. */
+export declare function GnomeProvider({ locale, dir, numberFormat, dateTimeFormat, colorScheme, accentColor, children, }: GnomeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GnomeProvider/GnomeProvider.js

@@ -1,25 +1,64 @@
 import { GnomeContext as e } from "./GnomeContext.js";
-import { useMemo as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { useEffect as t, useMemo as n, useReducer as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/GnomeProvider/GnomeProvider.tsx
-function r({ locale: r, dir: i = "ltr", numberFormat: a, dateTimeFormat: o, children: s }) {
-	let c = t(() => ({
-		locale: r,
-		dir: i,
-		numberFormat: a,
-		dateTimeFormat: o
+var a = new Set([
+	"blue",
+	"green",
+	"yellow",
+	"orange",
+	"red",
+	"purple",
+	"brown"
+]);
+function o() {
+	return typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function s({ locale: s, dir: c = "ltr", numberFormat: l, dateTimeFormat: u, colorScheme: d = "system", accentColor: f = "blue", children: p }) {
+	let [, m] = r((e) => e + 1, 0);
+	t(() => {
+		if (d !== "system") return;
+		let e = window.matchMedia("(prefers-color-scheme: dark)");
+		return e.addEventListener("change", m), () => e.removeEventListener("change", m);
+	}, [d]), t(() => {
+		let e = document.documentElement;
+		d === "system" ? e.removeAttribute("data-theme") : e.setAttribute("data-theme", d);
+	}, [d]);
+	let h = d === "system" ? o() ? "dark" : "light" : d;
+	t(() => {
+		let e = document.documentElement;
+		if (f === "blue") {
+			e.style.removeProperty("--gnome-accent-color"), e.style.removeProperty("--gnome-accent-bg-color");
+			return;
+		}
+		if (a.has(f)) {
+			let t = h === "dark" ? "2" : "3";
+			e.style.setProperty("--gnome-accent-color", `var(--gnome-${f}-${t})`), e.style.setProperty("--gnome-accent-bg-color", `var(--gnome-${f}-3)`);
+		} else e.style.setProperty("--gnome-accent-color", f), e.style.setProperty("--gnome-accent-bg-color", f);
+	}, [f, h]);
+	let g = n(() => ({
+		locale: s,
+		dir: c,
+		numberFormat: l,
+		dateTimeFormat: u,
+		colorScheme: d,
+		resolvedColorScheme: h,
+		accentColor: f
 	}), [
-		r,
-		i,
-		a,
-		o
+		s,
+		c,
+		l,
+		u,
+		d,
+		h,
+		f
 	]);
-	return /* @__PURE__ */ n(e.Provider, {
-		value: c,
-		children: s
+	return /* @__PURE__ */ i(e.Provider, {
+		value: g,
+		children: p
 	});
 }
 //#endregion
-export { r as GnomeProvider };
+export { s as GnomeProvider };
 
 //# sourceMappingURL=GnomeProvider.js.map

package/dist/components/GnomeProvider/GnomeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"GnomeProvider.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { GnomeContext, type GnomeDir } from \"./GnomeContext\";\n\nexport interface GnomeProviderProps {\n  /**\n   * BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n   * When omitted, components fall back to the browser locale.\n   */\n  locale?: string;\n  /** Text direction. Defaults to `\"ltr\"`. */\n  dir?: GnomeDir;\n  /**\n   * Global defaults for number formatting.\n   *\n   * Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n   * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n   * full values such as `1,000`.\n   */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Global defaults for date/time formatting. */\n  dateTimeFormat?: Intl.DateTimeFormatOptions;\n  children: ReactNode;\n}\n\n/** Provides locale and text direction to all descendant gnome-ui components. */\nexport function GnomeProvider({\n  locale,\n  dir = \"ltr\",\n  numberFormat,\n  dateTimeFormat,\n  children,\n}: GnomeProviderProps) {\n  const value = useMemo(\n    () => ({ locale, dir, numberFormat, dateTimeFormat }),\n    [locale, dir, numberFormat, dateTimeFormat],\n  );\n\n  return (\n    <GnomeContext.Provider value={value}>\n      {children}\n    </GnomeContext.Provider>\n  );\n}\n"],"mappings":";;;;AAyBA,SAAgB,EAAc,EAC5B,WACA,SAAM,OACN,iBACA,mBACA,eACqB;CACrB,IAAM,IAAQ,SACL;EAAE;EAAQ;EAAK;EAAc;EAAgB,GACpD;EAAC;EAAQ;EAAK;EAAc;EAAe,CAC5C;AAED,QACE,kBAAC,EAAa,UAAd;EAA8B;EAC3B;EACqB,CAAA"}
+{"version":3,"file":"GnomeProvider.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, type ReactNode } from \"react\";\nimport {\n  GnomeContext,\n  type GnomeAccentColor,\n  type GnomeColorScheme,\n  type GnomeDir,\n} from \"./GnomeContext\";\n\nconst NAMED_ACCENT_COLORS = new Set<string>([\n  \"blue\", \"green\", \"yellow\", \"orange\", \"red\", \"purple\", \"brown\",\n]);\n\nexport interface GnomeProviderProps {\n  /**\n   * BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n   * When omitted, components fall back to the browser locale.\n   */\n  locale?: string;\n  /** Text direction. Defaults to `\"ltr\"`. */\n  dir?: GnomeDir;\n  /**\n   * Global defaults for number formatting.\n   *\n   * Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n   * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n   * full values such as `1,000`.\n   */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Global defaults for date/time formatting. */\n  dateTimeFormat?: Intl.DateTimeFormatOptions;\n  /**\n   * Color scheme preference. When set to `\"system\"` (default), the OS\n   * preference is respected via `prefers-color-scheme`. When set to\n   * `\"light\"` or `\"dark\"`, the `data-theme` attribute is applied to\n   * `document.documentElement` to force that theme.\n   */\n  colorScheme?: GnomeColorScheme;\n  /**\n   * Accent color. Accepts a named GNOME palette color (`\"blue\"`, `\"green\"`,\n   * `\"yellow\"`, `\"orange\"`, `\"red\"`, `\"purple\"`, `\"brown\"`) or any CSS color\n   * string (e.g. `\"#ff0000\"`). Named colors are theme-aware and use the\n   * correct shade for light/dark mode automatically. Defaults to `\"blue\"`.\n   */\n  accentColor?: GnomeAccentColor;\n  children: ReactNode;\n}\n\nfunction getSystemIsDark(): boolean {\n  return typeof window !== \"undefined\" &&\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n}\n\n/** Provides locale, text direction, color scheme, and accent color to all descendant gnome-ui components. */\nexport function GnomeProvider({\n  locale,\n  dir = \"ltr\",\n  numberFormat,\n  dateTimeFormat,\n  colorScheme = \"system\",\n  accentColor = \"blue\",\n  children,\n}: GnomeProviderProps) {\n  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);\n\n  useEffect(() => {\n    if (colorScheme !== \"system\") return;\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    mq.addEventListener(\"change\", forceUpdate);\n    return () => mq.removeEventListener(\"change\", forceUpdate);\n  }, [colorScheme]);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    if (colorScheme === \"system\") {\n      root.removeAttribute(\"data-theme\");\n    } else {\n      root.setAttribute(\"data-theme\", colorScheme);\n    }\n  }, [colorScheme]);\n\n  const resolvedColorScheme = colorScheme === \"system\"\n    ? (getSystemIsDark() ? \"dark\" : \"light\")\n    : colorScheme;\n\n  useEffect(() => {\n    const root = document.documentElement;\n    if (accentColor === \"blue\") {\n      root.style.removeProperty(\"--gnome-accent-color\");\n      root.style.removeProperty(\"--gnome-accent-bg-color\");\n      return;\n    }\n    if (NAMED_ACCENT_COLORS.has(accentColor)) {\n      const shade = resolvedColorScheme === \"dark\" ? \"2\" : \"3\";\n      root.style.setProperty(\"--gnome-accent-color\", `var(--gnome-${accentColor}-${shade})`);\n      root.style.setProperty(\"--gnome-accent-bg-color\", `var(--gnome-${accentColor}-3)`);\n    } else {\n      root.style.setProperty(\"--gnome-accent-color\", accentColor);\n      root.style.setProperty(\"--gnome-accent-bg-color\", accentColor);\n    }\n  }, [accentColor, resolvedColorScheme]);\n\n  const value = useMemo(\n    () => ({ locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor }),\n    [locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor],\n  );\n\n  return (\n    <GnomeContext.Provider value={value}>\n      {children}\n    </GnomeContext.Provider>\n  );\n}\n"],"mappings":";;;;AAQA,IAAM,IAAsB,IAAI,IAAY;CAC1C;CAAQ;CAAS;CAAU;CAAU;CAAO;CAAU;CACvD,CAAC;AAqCF,SAAS,IAA2B;AAClC,QAAO,OAAO,SAAW,OACvB,OAAO,WAAW,+BAA+B,CAAC;;AAItD,SAAgB,EAAc,EAC5B,WACA,SAAM,OACN,iBACA,mBACA,iBAAc,UACd,iBAAc,QACd,eACqB;CACrB,IAAM,GAAG,KAAe,GAAY,MAAc,IAAI,GAAG,EAAE;AAS3D,CAPA,QAAgB;AACd,MAAI,MAAgB,SAAU;EAC9B,IAAM,IAAK,OAAO,WAAW,+BAA+B;AAE5D,SADA,EAAG,iBAAiB,UAAU,EAAY,QAC7B,EAAG,oBAAoB,UAAU,EAAY;IACzD,CAAC,EAAY,CAAC,EAEjB,QAAgB;EACd,IAAM,IAAO,SAAS;AACtB,EAAI,MAAgB,WAClB,EAAK,gBAAgB,aAAa,GAElC,EAAK,aAAa,cAAc,EAAY;IAE7C,CAAC,EAAY,CAAC;CAEjB,IAAM,IAAsB,MAAgB,WACvC,GAAiB,GAAG,SAAS,UAC9B;AAEJ,SAAgB;EACd,IAAM,IAAO,SAAS;AACtB,MAAI,MAAgB,QAAQ;AAE1B,GADA,EAAK,MAAM,eAAe,uBAAuB,EACjD,EAAK,MAAM,eAAe,0BAA0B;AACpD;;AAEF,MAAI,EAAoB,IAAI,EAAY,EAAE;GACxC,IAAM,IAAQ,MAAwB,SAAS,MAAM;AAErD,GADA,EAAK,MAAM,YAAY,wBAAwB,eAAe,EAAY,GAAG,EAAM,GAAG,EACtF,EAAK,MAAM,YAAY,2BAA2B,eAAe,EAAY,KAAK;QAGlF,CADA,EAAK,MAAM,YAAY,wBAAwB,EAAY,EAC3D,EAAK,MAAM,YAAY,2BAA2B,EAAY;IAE/D,CAAC,GAAa,EAAoB,CAAC;CAEtC,IAAM,IAAQ,SACL;EAAE;EAAQ;EAAK;EAAc;EAAgB;EAAa;EAAqB;EAAa,GACnG;EAAC;EAAQ;EAAK;EAAc;EAAgB;EAAa;EAAqB;EAAY,CAC3F;AAED,QACE,kBAAC,EAAa,UAAd;EAA8B;EAC3B;EACqB,CAAA"}

package/dist/components/Icon/Icon.cjs

@@ -1,2 +1,2 @@
-let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n(e){return`paths`in e&&Array.isArray(e.paths)}function r({icon:r,size:i=`md`,label:a,width:o,height:s,...c}){let l=t[i],u=n(r)?r.viewBox:r.viewBox??`0 0 24 24`,d=n(r)?r.paths.map((t,n)=>(0,e.jsx)(`path`,{d:t.d,fillRule:t.fillRule,clipRule:t.clipRule},n)):[(0,e.jsx)(`path`,{d:r.path},0)];return(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:u,width:o??l,height:s??l,fill:`currentColor`,"aria-label":a,"aria-hidden":a?void 0:!0,role:a?`img`:void 0,focusable:`false`,...c,children:d})}exports.Icon=r;
+let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n(e){return`paths`in e&&Array.isArray(e.paths)}function r({icon:r,size:i=`md`,label:a,width:o,height:s,...c}){let l=t[i],u=n(r)?r.viewBox:r.viewBox??`0 0 24 24`,d=n(r)?r.paths.map((t,n)=>(0,e.jsx)(`path`,{d:t.d,fillRule:t.fillRule,clipRule:t.clipRule,transform:t.transform},n)):[(0,e.jsx)(`path`,{d:r.path},0)];return(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:u,width:o??l,height:s??l,fill:`currentColor`,"aria-label":a,"aria-hidden":a?void 0:!0,role:a?`img`:void 0,focusable:`false`,...c,children:d})}exports.Icon=r;
 //# sourceMappingURL=Icon.cjs.map

package/dist/components/Icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n  icon: AnyIconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n  // When an object has both `path` and `paths`, `paths` wins.\n  return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon)\n    ? icon.viewBox\n    : (icon.viewBox ?? \"0 0 24 24\");\n\n  const paths = isIconDefinition(icon)\n    ? icon.paths.map((p, i) => (\n        <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} />\n      ))\n    : [<path key={0} d={icon.path} />];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={resolvedViewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {paths}\n    </svg>\n  );\n}\n"],"mappings":"mCAqBA,IAAM,EAAqC,CAAE,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,CAErE,SAAS,EAAiB,EAAiD,CAEzE,MAAO,UAAW,GAAQ,MAAM,QAAS,EAAwB,MAAM,CAkBzE,SAAgB,EAAK,CACnB,OACA,OAAO,KACP,QACA,QACA,SACA,GAAG,GACS,CACZ,IAAM,EAAK,EAAS,GAEd,EAAkB,EAAiB,EAAK,CAC1C,EAAK,QACJ,EAAK,SAAW,YAEf,EAAQ,EAAiB,EAAK,CAChC,EAAK,MAAM,KAAK,EAAG,KACjB,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAE,EAAG,SAAU,EAAE,SAAU,SAAU,EAAE,SAAY,CAAzD,EAAyD,CACpE,CACF,EAAC,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAK,KAAQ,CAAnB,EAAmB,CAAC,CAEpC,OACE,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,6BACN,QAAS,EACT,MAAO,GAAS,EAChB,OAAQ,GAAU,EAClB,KAAK,eACL,aAAY,EACZ,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,GAAI,WAEH,EACG,CAAA"}
+{"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n  icon: AnyIconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n  // When an object has both `path` and `paths`, `paths` wins.\n  return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon)\n    ? icon.viewBox\n    : (icon.viewBox ?? \"0 0 24 24\");\n\n  const paths = isIconDefinition(icon)\n    ? icon.paths.map((p, i) => (\n        <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} transform={p.transform} />\n      ))\n    : [<path key={0} d={icon.path} />];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={resolvedViewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {paths}\n    </svg>\n  );\n}\n"],"mappings":"mCAqBA,IAAM,EAAqC,CAAE,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,CAErE,SAAS,EAAiB,EAAiD,CAEzE,MAAO,UAAW,GAAQ,MAAM,QAAS,EAAwB,MAAM,CAkBzE,SAAgB,EAAK,CACnB,OACA,OAAO,KACP,QACA,QACA,SACA,GAAG,GACS,CACZ,IAAM,EAAK,EAAS,GAEd,EAAkB,EAAiB,EAAK,CAC1C,EAAK,QACJ,EAAK,SAAW,YAEf,EAAQ,EAAiB,EAAK,CAChC,EAAK,MAAM,KAAK,EAAG,KACjB,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAE,EAAG,SAAU,EAAE,SAAU,SAAU,EAAE,SAAU,UAAW,EAAE,UAAa,CAAjF,EAAiF,CAC5F,CACF,EAAC,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAK,KAAQ,CAAnB,EAAmB,CAAC,CAEpC,OACE,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,6BACN,QAAS,EACT,MAAO,GAAS,EAChB,OAAQ,GAAU,EAClB,KAAK,eACL,aAAY,EACZ,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,GAAI,WAEH,EACG,CAAA"}

package/dist/components/Icon/Icon.js

@@ -12,7 +12,8 @@ function r({ icon: r, size: i = "md", label: a, width: o, height: s, ...c }) {
 	let l = t[i], u = n(r) ? r.viewBox : r.viewBox ?? "0 0 24 24", d = n(r) ? r.paths.map((t, n) => /* @__PURE__ */ e("path", {
 		d: t.d,
 		fillRule: t.fillRule,
-		clipRule: t.clipRule
+		clipRule: t.clipRule,
+		transform: t.transform
 	}, n)) : [/* @__PURE__ */ e("path", { d: r.path }, 0)];
 	return /* @__PURE__ */ e("svg", {
 		xmlns: "http://www.w3.org/2000/svg",

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n  icon: AnyIconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n  // When an object has both `path` and `paths`, `paths` wins.\n  return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon)\n    ? icon.viewBox\n    : (icon.viewBox ?? \"0 0 24 24\");\n\n  const paths = isIconDefinition(icon)\n    ? icon.paths.map((p, i) => (\n        <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} />\n      ))\n    : [<path key={0} d={icon.path} />];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={resolvedViewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {paths}\n    </svg>\n  );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAErE,SAAS,EAAiB,GAAiD;AAEzE,QAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,MAAM;;AAkBzE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,EAAK,GAC1C,EAAK,UACJ,EAAK,WAAW,aAEf,IAAQ,EAAiB,EAAK,GAChC,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAY,EAAzD,EAAyD,CACpE,GACF,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,MAAQ,EAAnB,EAAmB,CAAC;AAEpC,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH;EACG,CAAA"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n  icon: AnyIconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n  // When an object has both `path` and `paths`, `paths` wins.\n  return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon)\n    ? icon.viewBox\n    : (icon.viewBox ?? \"0 0 24 24\");\n\n  const paths = isIconDefinition(icon)\n    ? icon.paths.map((p, i) => (\n        <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} transform={p.transform} />\n      ))\n    : [<path key={0} d={icon.path} />];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={resolvedViewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {paths}\n    </svg>\n  );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAErE,SAAS,EAAiB,GAAiD;AAEzE,QAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,MAAM;;AAkBzE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,EAAK,GAC1C,EAAK,UACJ,EAAK,WAAW,aAEf,IAAQ,EAAiB,EAAK,GAChC,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAU,WAAW,EAAE;EAAa,EAAjF,EAAiF,CAC5F,GACF,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,MAAQ,EAAnB,EAAmB,CAAC;AAEpC,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH;EACG,CAAA"}

package/dist/components/NavigationSplitView/NavigationSplitView.module.css.cjs

@@ -1,2 +1,2 @@
-var e={root:`_root_yaj3r_3`,expanded:`_expanded_yaj3r_12`,sidebar:`_sidebar_yaj3r_16`,contentPane:`_contentPane_yaj3r_22`,collapsed:`_collapsed_yaj3r_30`,paneVisible:`_paneVisible_yaj3r_46`,paneHidden:`_paneHidden_yaj3r_50`,divider:`_divider_yaj3r_67`};exports.default=e;
+var e={root:`_root_16ve4_3`,expanded:`_expanded_16ve4_12`,sidebar:`_sidebar_16ve4_16`,contentPane:`_contentPane_16ve4_22`,collapsed:`_collapsed_16ve4_30`,paneVisible:`_paneVisible_16ve4_46`,paneHidden:`_paneHidden_16ve4_50`,divider:`_divider_16ve4_67`};exports.default=e;
 //# sourceMappingURL=NavigationSplitView.module.css.cjs.map

package/dist/components/NavigationSplitView/NavigationSplitView.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, clamp(180px, 25%, 280px));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationSplitView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/NavigationSplitView/NavigationSplitView.module.css.js

@@ -1,12 +1,12 @@
 var e = {
-	root: "_root_yaj3r_3",
-	expanded: "_expanded_yaj3r_12",
-	sidebar: "_sidebar_yaj3r_16",
-	contentPane: "_contentPane_yaj3r_22",
-	collapsed: "_collapsed_yaj3r_30",
-	paneVisible: "_paneVisible_yaj3r_46",
-	paneHidden: "_paneHidden_yaj3r_50",
-	divider: "_divider_yaj3r_67"
+	root: "_root_16ve4_3",
+	expanded: "_expanded_16ve4_12",
+	sidebar: "_sidebar_16ve4_16",
+	contentPane: "_contentPane_16ve4_22",
+	collapsed: "_collapsed_16ve4_30",
+	paneVisible: "_paneVisible_16ve4_46",
+	paneHidden: "_paneHidden_16ve4_50",
+	divider: "_divider_16ve4_67"
 };
 //#endregion
 export { e as default };

package/dist/components/NavigationSplitView/NavigationSplitView.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.module.css.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, clamp(180px, 25%, 280px));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationSplitView.module.css.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/OverlaySplitView/OverlaySplitView.module.css.cjs

@@ -1,2 +1,2 @@
-var e={root:`_root_1g9mq_3`,wide:`_wide_1g9mq_13`,end:`_end_1g9mq_17`,sidebar:`_sidebar_1g9mq_21`,collapsed:`_collapsed_1g9mq_28`,content:`_content_1g9mq_32`,narrow:`_narrow_1g9mq_40`,start:`_start_1g9mq_60`,sidebarOpen:`_sidebarOpen_1g9mq_64`,sidebarClosed:`_sidebarClosed_1g9mq_65`,backdrop:`_backdrop_1g9mq_77`,backdropVisible:`_backdropVisible_1g9mq_88`};exports.default=e;
+var e={root:`_root_1nzki_3`,wide:`_wide_1nzki_13`,end:`_end_1nzki_17`,sidebar:`_sidebar_1nzki_21`,collapsed:`_collapsed_1nzki_28`,content:`_content_1nzki_32`,narrow:`_narrow_1nzki_40`,start:`_start_1nzki_60`,sidebarOpen:`_sidebarOpen_1nzki_64`,sidebarClosed:`_sidebarClosed_1nzki_65`,backdrop:`_backdrop_1nzki_77`,backdropVisible:`_backdropVisible_1nzki_88`};exports.default=e;
 //# sourceMappingURL=OverlaySplitView.module.css.cjs.map

package/dist/components/OverlaySplitView/OverlaySplitView.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.module.css.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, clamp(180px, 25%, 280px));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: 56px;\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, clamp(180px, 75%, 280px));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen  { transform: translateX(0); }\n.narrow.start .sidebarClosed { transform: translateX(-100%); }\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen  { transform: translateX(0); }\n.narrow.end .sidebarClosed { transform: translateX(100%); }\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"OverlaySplitView.module.css.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-overlay-width, clamp(180px, 75%, 280px)));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen  { transform: translateX(0); }\n.narrow.start .sidebarClosed { transform: translateX(-100%); }\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen  { transform: translateX(0); }\n.narrow.end .sidebarClosed { transform: translateX(100%); }\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/OverlaySplitView/OverlaySplitView.module.css.js

@@ -1,16 +1,16 @@
 var e = {
-	root: "_root_1g9mq_3",
-	wide: "_wide_1g9mq_13",
-	end: "_end_1g9mq_17",
-	sidebar: "_sidebar_1g9mq_21",
-	collapsed: "_collapsed_1g9mq_28",
-	content: "_content_1g9mq_32",
-	narrow: "_narrow_1g9mq_40",
-	start: "_start_1g9mq_60",
-	sidebarOpen: "_sidebarOpen_1g9mq_64",
-	sidebarClosed: "_sidebarClosed_1g9mq_65",
-	backdrop: "_backdrop_1g9mq_77",
-	backdropVisible: "_backdropVisible_1g9mq_88"
+	root: "_root_1nzki_3",
+	wide: "_wide_1nzki_13",
+	end: "_end_1nzki_17",
+	sidebar: "_sidebar_1nzki_21",
+	collapsed: "_collapsed_1nzki_28",
+	content: "_content_1nzki_32",
+	narrow: "_narrow_1nzki_40",
+	start: "_start_1nzki_60",
+	sidebarOpen: "_sidebarOpen_1nzki_64",
+	sidebarClosed: "_sidebarClosed_1nzki_65",
+	backdrop: "_backdrop_1nzki_77",
+	backdropVisible: "_backdropVisible_1nzki_88"
 };
 //#endregion
 export { e as default };