@gnome-ui/react 1.45.0 → 1.45.1

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type InlineViewSwitcherVariant = "default" | "flat" | "round" | "pill";
+export type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';
 interface InlineViewSwitcherContextValue {
     value: string;
     onValueChange: (value: string) => void;
@@ -19,7 +19,7 @@ export interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement>
      */
     variant?: InlineViewSwitcherVariant;
     /** Accessible label for the group. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     children?: ReactNode;
 }
 /**
@@ -33,5 +33,5 @@ export interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement>
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html
  */
-export declare function InlineViewSwitcher({ value, onValueChange, variant, "aria-label": ariaLabel, children, className, ...props }: InlineViewSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineViewSwitcher({ value, onValueChange, variant, 'aria-label': ariaLabel, children, className, ...props }: InlineViewSwitcherProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.js

@@ -11,15 +11,15 @@ function o() {
 function s({ value: t, onValueChange: n, variant: o = "default", "aria-label": s = "View switcher", children: c, className: l, ...u }) {
 	let d = r(null);
 	function f(e) {
-		let t = Array.from(d.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n = t.findIndex((e) => e === document.activeElement);
-		if (n === -1) return;
-		let r = n;
-		if (e.key === "ArrowRight" || e.key === "ArrowDown") r = (n + 1) % t.length;
-		else if (e.key === "ArrowLeft" || e.key === "ArrowUp") r = (n - 1 + t.length) % t.length;
-		else if (e.key === "Home") r = 0;
-		else if (e.key === "End") r = t.length - 1;
+		let t = Array.from(d.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n = document.activeElement, r = n instanceof HTMLButtonElement ? t.indexOf(n) : -1;
+		if (r === -1) return;
+		let i = r;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") i = (r + 1) % t.length;
+		else if (e.key === "ArrowLeft" || e.key === "ArrowUp") i = (r - 1 + t.length) % t.length;
+		else if (e.key === "Home") i = 0;
+		else if (e.key === "End") i = t.length - 1;
 		else return;
-		e.preventDefault(), t[r].focus(), t[r].click();
+		e.preventDefault(), t[i].focus(), t[i].click();
 	}
 	return /* @__PURE__ */ i(a.Provider, {
 		value: {

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./InlineViewSwitcher.module.css\";\n\nexport type InlineViewSwitcherVariant = \"default\" | \"flat\" | \"round\" | \"pill\";\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst InlineViewSwitcherContext =\n  createContext<InlineViewSwitcherContextValue | null>(null);\n\nexport function useInlineViewSwitcher() {\n  const ctx = useContext(InlineViewSwitcherContext);\n  if (!ctx)\n    throw new Error(\n      \"InlineViewSwitcherItem must be used inside InlineViewSwitcher\",\n    );\n  return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Currently active view name. */\n  value: string;\n  /** Called with the new value when a view is selected. */\n  onValueChange: (value: string) => void;\n  /**\n   * Visual style of the switcher.\n   * - `default` — card background with border and shadow (same as `ToggleGroup`).\n   * - `flat`    — no background or border; active indicator only.\n   * - `round`   — pill-shaped container and items.\n   * - `pill`    — segmented-control style; active item appears lifted, no accent color.\n   */\n  variant?: InlineViewSwitcherVariant;\n  /** Accessible label for the group. */\n  \"aria-label\"?: string;\n  children?: ReactNode;\n}\n\n/**\n * Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n *\n * Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n *\n * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport function InlineViewSwitcher({\n  value,\n  onValueChange,\n  variant = \"default\",\n  \"aria-label\": ariaLabel = \"View switcher\",\n  children,\n  className,\n  ...props\n}: InlineViewSwitcherProps) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>(\n        \"[role=radio]:not(:disabled)\",\n      ) ?? [],\n    );\n    const idx = items.findIndex((el) => el === document.activeElement);\n    if (idx === -1) return;\n\n    let next = idx;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\")\n      next = (idx + 1) % items.length;\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\")\n      next = (idx - 1 + items.length) % items.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = items.length - 1;\n    else return;\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <InlineViewSwitcherContext.Provider value={{ value, onValueChange }}>\n      <div\n        ref={groupRef}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[styles.switcher, styles[variant], className]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </InlineViewSwitcherContext.Provider>\n  );\n}\n"],"mappings":";;;;AAmBA,IAAM,IACJ,EAAqD,KAAK;AAE5D,SAAgB,IAAwB;CACtC,IAAM,IAAM,EAAW,EAA0B;AACjD,KAAI,CAAC,EACH,OAAU,MACR,gEACD;AACH,QAAO;;AAkCT,SAAgB,EAAmB,EACjC,UACA,kBACA,aAAU,WACV,cAAc,IAAY,iBAC1B,aACA,cACA,GAAG,KACuB;CAC1B,IAAM,IAAW,EAAuB,KAAK;CAE7C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAChB,8BACD,IAAI,EAAE,CACR,EACK,IAAM,EAAM,WAAW,MAAO,MAAO,SAAS,cAAc;AAClE,MAAI,MAAQ,GAAI;EAEhB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YACtC,MAAQ,IAAM,KAAK,EAAM;WAClB,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAC1C,MAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;WACjC,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAIL,EAFA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO,EACnB,EAAM,GAAM,OAAO;;AAGrB,QACE,kBAAC,EAA0B,UAA3B;EAAoC,OAAO;GAAE;GAAO;GAAe;YACjE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW;GACX,WAAW;IAAC,EAAO;IAAU,EAAO;IAAU;IAAU,CACrD,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,GAAI;GAEH;GACG,CAAA;EAC6B,CAAA"}
+{"version":3,"file":"InlineViewSwitcher.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\nimport styles from './InlineViewSwitcher.module.css';\n\nexport type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n  const ctx = useContext(InlineViewSwitcherContext);\n\n  if (!ctx) {\n    throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n  }\n\n  return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Currently active view name. */\n  value: string;\n  /** Called with the new value when a view is selected. */\n  onValueChange: (value: string) => void;\n  /**\n   * Visual style of the switcher.\n   * - `default` — card background with border and shadow (same as `ToggleGroup`).\n   * - `flat`    — no background or border; active indicator only.\n   * - `round`   — pill-shaped container and items.\n   * - `pill`    — segmented-control style; active item appears lifted, no accent color.\n   */\n  variant?: InlineViewSwitcherVariant;\n  /** Accessible label for the group. */\n  'aria-label'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n *\n * Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n *\n * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport function InlineViewSwitcher({\n  value,\n  onValueChange,\n  variant = 'default',\n  'aria-label': ariaLabel = 'View switcher',\n  children,\n  className,\n  ...props\n}: InlineViewSwitcherProps) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = idx;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      next = (idx + 1) % items.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      next = (idx - 1 + items.length) % items.length;\n    } else if (e.key === 'Home') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <InlineViewSwitcherContext.Provider value={{ value, onValueChange }}>\n      <div\n        ref={groupRef}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[styles.switcher, styles[variant], className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {children}\n      </div>\n    </InlineViewSwitcherContext.Provider>\n  );\n}\n"],"mappings":";;;;AAoBA,IAAM,IAA4B,EAAqD,KAAK;AAG5F,SAAgB,IAAwB;CACtC,IAAM,IAAM,EAAW,EAA0B;AAEjD,KAAI,CAAC,EACH,OAAU,MAAM,gEAAgE;AAGlF,QAAO;;AAkCT,SAAgB,EAAmB,EACjC,UACA,kBACA,aAAU,WACV,cAAc,IAAY,iBAC1B,aACA,cACA,GAAG,KACuB;CAC1B,IAAM,IAAW,EAAuB,KAAK;CAE7C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,8BAA8B,IAAI,EAAE,CAC3F,EACK,IAAgB,SAAS,eACzB,IAAM,aAAyB,oBAAoB,EAAM,QAAQ,EAAc,GAAG;AAExF,MAAI,MAAQ,GACV;EAGF,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YACtC,MAAQ,IAAM,KAAK,EAAM;WAChB,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAC5C,MAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;WAC/B,EAAE,QAAQ,OACnB,KAAO;WACE,EAAE,QAAQ,MACnB,KAAO,EAAM,SAAS;MAEtB;AAKF,EAFA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO,EACnB,EAAM,GAAM,OAAO;;AAGrB,QACE,kBAAC,EAA0B,UAA3B;EAAoC,OAAO;GAAE;GAAO;GAAe;YACjE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW;GACX,WAAW;IAAC,EAAO;IAAU,EAAO;IAAU;IAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAClF,GAAI;GAEH;GACG,CAAA;EAC6B,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={switcher:`_switcher_15xk5_3`,item:`_item_15xk5_10`,iconOnly:`_iconOnly_15xk5_38`,itemIcon:`_itemIcon_15xk5_43`,itemLabel:`_itemLabel_15xk5_49`,default:`_default_15xk5_55`,active:`_active_15xk5_68`,flat:`_flat_15xk5_121`,round:`_round_15xk5_169`,pill:`_pill_15xk5_235`};exports.default=e;
+var e={switcher:`_switcher_2455r_3`,item:`_item_2455r_10`,iconOnly:`_iconOnly_2455r_38`,itemIcon:`_itemIcon_2455r_43`,itemLabel:`_itemLabel_2455r_49`,default:`_default_2455r_55`,active:`_active_2455r_68`,flat:`_flat_2455r_123`,round:`_round_2455r_171`,pill:`_pill_2455r_237`};exports.default=e;
 //# sourceMappingURL=InlineViewSwitcher.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\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.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .active {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.10);\n  }\n\n  .pill .active {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"InlineViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\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.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .active {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .pill .active {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,14 +1,14 @@
 var e = {
-	switcher: "_switcher_15xk5_3",
-	item: "_item_15xk5_10",
-	iconOnly: "_iconOnly_15xk5_38",
-	itemIcon: "_itemIcon_15xk5_43",
-	itemLabel: "_itemLabel_15xk5_49",
-	default: "_default_15xk5_55",
-	active: "_active_15xk5_68",
-	flat: "_flat_15xk5_121",
-	round: "_round_15xk5_169",
-	pill: "_pill_15xk5_235"
+	switcher: "_switcher_2455r_3",
+	item: "_item_2455r_10",
+	iconOnly: "_iconOnly_2455r_38",
+	itemIcon: "_itemIcon_2455r_43",
+	itemLabel: "_itemLabel_2455r_49",
+	default: "_default_2455r_55",
+	active: "_active_2455r_68",
+	flat: "_flat_2455r_123",
+	round: "_round_2455r_171",
+	pill: "_pill_2455r_237"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.module.css.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\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.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .active {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.10);\n  }\n\n  .pill .active {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"InlineViewSwitcher.module.css.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\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.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .active {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .pill .active {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcherItem.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useInlineViewSwitcher } from \"./InlineViewSwitcher\";\nimport styles from \"./InlineViewSwitcher.module.css\";\n\nexport interface InlineViewSwitcherItemProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport function InlineViewSwitcherItem({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) {\n  const { value, onValueChange } = useInlineViewSwitcher();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n}\n"],"mappings":"8JAsBA,SAAgB,EAAuB,CACrC,OACA,QACA,OACA,WACA,YACA,GAAG,GAC2B,CAC9B,GAAM,CAAE,QAAO,iBAAkB,EAAA,uBAAuB,CAClD,EAAS,IAAU,EACnB,EAAW,GAAQ,CAAC,EAE1B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,EAAK,CAClC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CACpD"}
+{"version":3,"file":"InlineViewSwitcherItem.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport function InlineViewSwitcherItem({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) {\n  const { value, onValueChange } = useInlineViewSwitcher();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n}\n"],"mappings":"8JAuBA,SAAgB,EAAuB,CACrC,OACA,QACA,OACA,WACA,YACA,GAAG,GAC2B,CAC9B,GAAM,CAAE,QAAO,iBAAkB,EAAA,uBAAuB,CAClD,EAAS,IAAU,EACnB,EAAW,GAAQ,CAAC,EAE1B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,EAAK,CAClC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CACpD"}

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.d.ts

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes } from 'react';
 import { IconDefinition } from '@gnome-ui/icons';
+import { ButtonHTMLAttributes } from 'react';
 export interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** String identifier — used as the switcher's `value` when this item is active. */
     name: string;

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcherItem.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useInlineViewSwitcher } from \"./InlineViewSwitcher\";\nimport styles from \"./InlineViewSwitcher.module.css\";\n\nexport interface InlineViewSwitcherItemProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport function InlineViewSwitcherItem({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) {\n  const { value, onValueChange } = useInlineViewSwitcher();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAuB,EACrC,SACA,UACA,SACA,aACA,cACA,GAAG,KAC2B;CAC9B,IAAM,EAAE,UAAO,qBAAkB,GAAuB,EAClD,IAAS,MAAU,GACnB,IAAW,KAAQ,CAAC;AAE1B,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,EAAK;EAClC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA,EAER,KAAS,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;GAAa,CAAA,CACpD"}
+{"version":3,"file":"InlineViewSwitcherItem.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport function InlineViewSwitcherItem({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) {\n  const { value, onValueChange } = useInlineViewSwitcher();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n}\n"],"mappings":";;;;;AAuBA,SAAgB,EAAuB,EACrC,SACA,UACA,SACA,aACA,cACA,GAAG,KAC2B;CAC9B,IAAM,EAAE,UAAO,qBAAkB,GAAuB,EAClD,IAAS,MAAU,GACnB,IAAW,KAAQ,CAAC;AAE1B,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,EAAK;EAClC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA,EAER,KAAS,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;GAAa,CAAA,CACpD"}

package/dist/components/InlineViewSwitcher/index.d.ts

@@ -1,4 +1,4 @@
-export { InlineViewSwitcher } from './InlineViewSwitcher';
 export type { InlineViewSwitcherProps, InlineViewSwitcherVariant, } from './InlineViewSwitcher';
-export { InlineViewSwitcherItem } from './InlineViewSwitcherItem';
+export { InlineViewSwitcher } from './InlineViewSwitcher';
 export type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';
+export { InlineViewSwitcherItem } from './InlineViewSwitcherItem';

package/dist/components/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Link.module.css\";\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport function Link({\n  external = false,\n  children,\n  className,\n  target,\n  rel,\n  ...props\n}: LinkProps) {\n  const isExternal = external || target === \"_blank\";\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(\" \")}\n      target={isExternal ? \"_blank\" : target}\n      rel={isExternal ? \"noopener noreferrer\" : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n}\n"],"mappings":"4EAoBA,SAAgB,EAAK,CACnB,WAAW,GACX,WACA,YACA,SACA,MACA,GAAG,GACS,CACZ,IAAM,EAAa,GAAY,IAAW,SAE1C,OACE,EAAA,EAAA,MAAC,IAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7D,OAAQ,EAAa,SAAW,EAChC,IAAK,EAAa,sBAAwB,EAC1C,GAAI,WAJN,CAMG,EACA,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aAAc,aAAW,8BAAqB,IAE/D,CAAA,CAEP"}
+{"version":3,"file":"Link.cjs","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport function Link({ external = false, children, className, target, rel, ...props }: LinkProps) {\n  const isExternal = external || target === '_blank';\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(' ')}\n      target={isExternal ? '_blank' : target}\n      rel={isExternal ? 'noopener noreferrer' : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n}\n"],"mappings":"4EAqBA,SAAgB,EAAK,CAAE,WAAW,GAAO,WAAU,YAAW,SAAQ,MAAK,GAAG,GAAoB,CAChG,IAAM,EAAa,GAAY,IAAW,SAE1C,OACE,EAAA,EAAA,MAAC,IAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7D,OAAQ,EAAa,SAAW,EAChC,IAAK,EAAa,sBAAwB,EAC1C,GAAI,WAJN,CAMG,EACA,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aAAc,aAAW,8BAAqB,IAE/D,CAAA,CAEP"}

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Link.module.css\";\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport function Link({\n  external = false,\n  children,\n  className,\n  target,\n  rel,\n  ...props\n}: LinkProps) {\n  const isExternal = external || target === \"_blank\";\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(\" \")}\n      target={isExternal ? \"_blank\" : target}\n      rel={isExternal ? \"noopener noreferrer\" : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n}\n"],"mappings":";;;AAoBA,SAAgB,EAAK,EACnB,cAAW,IACX,aACA,cACA,WACA,QACA,GAAG,KACS;CACZ,IAAM,IAAa,KAAY,MAAW;AAE1C,QACE,kBAAC,KAAD;EACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7D,QAAQ,IAAa,WAAW;EAChC,KAAK,IAAa,wBAAwB;EAC1C,GAAI;YAJN,CAMG,GACA,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAc,cAAW;aAAqB;GAE/D,CAAA,CAEP"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport function Link({ external = false, children, className, target, rel, ...props }: LinkProps) {\n  const isExternal = external || target === '_blank';\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(' ')}\n      target={isExternal ? '_blank' : target}\n      rel={isExternal ? 'noopener noreferrer' : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n}\n"],"mappings":";;;AAqBA,SAAgB,EAAK,EAAE,cAAW,IAAO,aAAU,cAAW,WAAQ,QAAK,GAAG,KAAoB;CAChG,IAAM,IAAa,KAAY,MAAW;AAE1C,QACE,kBAAC,KAAD;EACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7D,QAAQ,IAAa,WAAW;EAChC,KAAK,IAAa,wBAAwB;EAC1C,GAAI;YAJN,CAMG,GACA,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAc,cAAW;aAAqB;GAE/D,CAAA,CAEP"}

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

@@ -1,2 +1,2 @@
-var e={link:`_link_x1qyh_1`,externalIcon:`_externalIcon_x1qyh_36`};exports.default=e;
+var e={link:`_link_1xc0b_1`,externalIcon:`_externalIcon_1xc0b_37`};exports.default=e;
 //# sourceMappingURL=Link.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.css.cjs","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.css.cjs","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 var e = {
-	link: "_link_x1qyh_1",
-	externalIcon: "_externalIcon_x1qyh_36"
+	link: "_link_1xc0b_1",
+	externalIcon: "_externalIcon_1xc0b_37"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.css.js","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.css.js","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}

package/dist/components/Link/index.d.ts

@@ -1,2 +1,2 @@
-export { Link } from './Link';
 export type { LinkProps } from './Link';
+export { Link } from './Link';

package/dist/components/LinkedGroup/LinkedGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./LinkedGroup.module.css\";\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport function LinkedGroup({\n  children,\n  vertical = false,\n  className,\n  ...props\n}: LinkedGroupProps) {\n  const classes = [\n    styles.linked,\n    vertical ? styles.vertical : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mFAiCA,SAAgB,EAAY,CAC1B,WACA,WAAW,GACX,YACA,GAAG,GACgB,CASnB,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UATS,CACd,EAAA,QAAO,OACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAI,EAC1B,WACG,CAAA"}
+{"version":3,"file":"LinkedGroup.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './LinkedGroup.module.css';\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport function LinkedGroup({ children, vertical = false, className, ...props }: LinkedGroupProps) {\n  const classes = [styles.linked, vertical ? styles.vertical : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mFAkCA,SAAgB,EAAY,CAAE,WAAU,WAAW,GAAO,YAAW,GAAG,GAA2B,CAKjG,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UALS,CAAC,EAAA,QAAO,OAAQ,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAI,EAC1B,WACG,CAAA"}

package/dist/components/LinkedGroup/LinkedGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./LinkedGroup.module.css\";\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport function LinkedGroup({\n  children,\n  vertical = false,\n  className,\n  ...props\n}: LinkedGroupProps) {\n  const classes = [\n    styles.linked,\n    vertical ? styles.vertical : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,EAAY,EAC1B,aACA,cAAW,IACX,cACA,GAAG,KACgB;AASnB,QACE,kBAAC,OAAD;EAAK,WATS;GACd,EAAO;GACP,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAI;EAC1B;EACG,CAAA"}
+{"version":3,"file":"LinkedGroup.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './LinkedGroup.module.css';\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport function LinkedGroup({ children, vertical = false, className, ...props }: LinkedGroupProps) {\n  const classes = [styles.linked, vertical ? styles.vertical : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAkCA,SAAgB,EAAY,EAAE,aAAU,cAAW,IAAO,cAAW,GAAG,KAA2B;AAKjG,QACE,kBAAC,OAAD;EAAK,WALS;GAAC,EAAO;GAAQ,IAAW,EAAO,WAAW;GAAM;GAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAI;EAC1B;EACG,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={linked:`_linked_1tser_3`,vertical:`_vertical_1tser_9`};exports.default=e;
+var e={linked:`_linked_1uy8a_3`,vertical:`_vertical_1uy8a_9`};exports.default=e;
 //# sourceMappingURL=LinkedGroup.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.module.css.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0 !important;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-top-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"LinkedGroup.module.css.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-bottom-left-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-top-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 var e = {
-	linked: "_linked_1tser_3",
-	vertical: "_vertical_1tser_9"
+	linked: "_linked_1uy8a_3",
+	vertical: "_vertical_1uy8a_9"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.module.css.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0 !important;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-top-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"LinkedGroup.module.css.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-bottom-left-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-top-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}

package/dist/components/LinkedGroup/index.d.ts

@@ -1,2 +1,2 @@
-export { LinkedGroup } from './LinkedGroup';
 export type { LinkedGroupProps } from './LinkedGroup';
+export { LinkedGroup } from './LinkedGroup';

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./NavigationSplitView.module.css\";\n\nexport interface NavigationSplitViewProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport function NavigationSplitView({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.collapsed : styles.expanded,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--sidebar-width\": sidebarWidth, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"sIA2DA,SAAgB,EAAoB,CAClC,UACA,UACA,cAAc,GACd,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,GACwB,CAC3B,GAAM,CAAE,YAAa,EAAA,eAAe,CAG9B,EACJ,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,KAEjF,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,UAAY,EAAA,QAAO,SACrC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,kBAAmB,EAAc,GAAG,EAAO,CACpD,GAAI,WATN,EAYE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,GAAY,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,YACtD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,WAExB,EACG,CAAA,CAGL,CAAC,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,cAAY,OAAS,CAAA,EAGnE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,YACP,GAAY,CAAC,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,YACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,CAAC,WAEzB,EACG,CAAA,CACF"}
+{"version":3,"file":"NavigationSplitView.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './NavigationSplitView.module.css';\n\nexport interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport function NavigationSplitView({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[styles.root, isNarrow ? styles.collapsed : styles.expanded, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"sIA4DA,SAAgB,EAAoB,CAClC,UACA,UACA,cAAc,GACd,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,GACwB,CAC3B,GAAM,CAAE,YAAa,EAAA,eAAe,CAG9B,EAAe,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,KAEpG,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,UAAY,EAAA,QAAO,SAAU,EAAU,CAC/E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,kBAAmB,EAAc,GAAG,EAAO,CACpD,GAAI,WALN,EAQE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,GAAY,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,YACtD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,WAExB,EACG,CAAA,CAGL,CAAC,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,cAAY,OAAS,CAAA,EAGnE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,YACP,GAAY,CAAC,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,YACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,CAAC,WAEzB,EACG,CAAA,CACF"}

package/dist/components/NavigationSplitView/NavigationSplitView.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
+export interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /**
      * The sidebar / list pane (left side on wide screens).
      * On narrow screens this is the "list" view shown when `showContent` is false.

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./NavigationSplitView.module.css\";\n\nexport interface NavigationSplitViewProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport function NavigationSplitView({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.collapsed : styles.expanded,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--sidebar-width\": sidebarWidth, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA2DA,SAAgB,EAAoB,EAClC,YACA,YACA,iBAAc,IACd,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,KACwB;CAC3B,IAAM,EAAE,gBAAa,GAAe,EAG9B,IACJ,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAEjF,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAW,EAAO,YAAY,EAAO;GACrC;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,mBAAmB;GAAc,GAAG;GAAO;EACpD,GAAI;YATN;GAYE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,SACP,KAAY,IAAc,EAAO,aAAa,EAAO,YACtD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY;cAExB;IACG,CAAA;GAGL,CAAC,KAAY,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,eAAY;IAAS,CAAA;GAGnE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,aACP,KAAY,CAAC,IAAc,EAAO,aAAa,EAAO,YACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY,CAAC;cAEzB;IACG,CAAA;GACF"}
+{"version":3,"file":"NavigationSplitView.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './NavigationSplitView.module.css';\n\nexport interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport function NavigationSplitView({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[styles.root, isNarrow ? styles.collapsed : styles.expanded, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA4DA,SAAgB,EAAoB,EAClC,YACA,YACA,iBAAc,IACd,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,KACwB;CAC3B,IAAM,EAAE,gBAAa,GAAe,EAG9B,IAAe,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAEpG,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,YAAY,EAAO;GAAU;GAAU,CAC/E,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,mBAAmB;GAAc,GAAG;GAAO;EACpD,GAAI;YALN;GAQE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,SACP,KAAY,IAAc,EAAO,aAAa,EAAO,YACtD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY;cAExB;IACG,CAAA;GAGL,CAAC,KAAY,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,eAAY;IAAS,CAAA;GAGnE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,aACP,KAAY,CAAC,IAAc,EAAO,aAAa,EAAO,YACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY,CAAC;cAEzB;IACG,CAAA;GACF"}

package/dist/components/NavigationSplitView/index.d.ts

@@ -1,2 +1,2 @@
-export { NavigationSplitView } from './NavigationSplitView';
 export type { NavigationSplitViewProps } from './NavigationSplitView';
+export { NavigationSplitView } from './NavigationSplitView';

package/dist/components/NavigationView/NavigationView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./NavigationView.module.css\";\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: \"forward\" | \"back\";\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => { },\n  pop: () => { },\n  canGoBack: false,\n  currentTag: \"\",\n  direction: \"forward\",\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n  if (currentTag !== tag) return null;\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === \"forward\" ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<\"forward\" | \"back\">(\"forward\");\n\n  const navigate = (tag: string) => {\n    setDirection(\"forward\");\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) return;\n    setDirection(\"back\");\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div\n        className={[styles.view, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":"yGAwBA,IAAM,GAAA,EAAA,EAAA,eAA0D,CAC9D,aAAgB,GAChB,QAAW,GACX,UAAW,GACX,WAAY,GACZ,UAAW,UACZ,CAAC,CAGF,SAAgB,GAAgB,CAC9B,OAAA,EAAA,EAAA,YAAkB,EAAkB,CAiBtC,SAAgB,EAAe,CAC7B,MACA,QACA,WACA,YACA,GAAG,GACmB,CACtB,GAAM,CAAE,aAAY,cAAA,EAAA,EAAA,YAAyB,EAAkB,CAG/D,OAFI,IAAe,GAGjB,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAc,UAAY,EAAA,QAAO,aAAe,EAAA,QAAO,UACvD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WARN,EAUE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CAC7C,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,YAAc,WAAe,CAAA,CAChD,GAjBuB,KAkDjC,SAAgB,EAAe,CAC7B,cACA,WACA,YACA,GAAG,GACmB,CACtB,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+B,CAAC,EAAY,CAAC,CAErD,EAAa,EAAM,EAAM,OAAS,GAClC,EAAY,EAAM,OAAS,EAC3B,CAAC,EAAW,IAAA,EAAA,EAAA,UAA6C,UAAU,CAazE,OACE,EAAA,EAAA,KAAC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,SAZrB,GAAgB,CAChC,EAAa,UAAU,CACvB,EAAU,GAAM,CAAC,GAAG,EAAG,EAAI,CAAC,EAUmB,QAP/B,CACZ,EAAM,QAAU,IACpB,EAAa,OAAO,CACpB,EAAU,GAAM,EAAE,MAAM,EAAG,GAAG,CAAC,GAIqB,YAAW,aAAY,YAAW,WACpF,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7D,GAAI,EAEH,WACG,CAAA,CACqB,CAAA"}
+{"version":3,"file":"NavigationView.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import { createContext, type HTMLAttributes, type ReactNode, useContext, useState } from 'react';\n\nimport styles from './NavigationView.module.css';\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: 'forward' | 'back';\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => {},\n  pop: () => {},\n  canGoBack: false,\n  currentTag: '',\n  direction: 'forward',\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({ tag, title, children, className, ...props }: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n\n  if (currentTag !== tag) {\n    return null;\n  }\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === 'forward' ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<'forward' | 'back'>('forward');\n\n  const navigate = (tag: string) => {\n    setDirection('forward');\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) {\n      return;\n    }\n\n    setDirection('back');\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div className={[styles.view, className].filter(Boolean).join(' ')} {...props}>\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":"yGAmBA,IAAM,GAAA,EAAA,EAAA,eAA0D,CAC9D,aAAgB,GAChB,QAAW,GACX,UAAW,GACX,WAAY,GACZ,UAAW,UACZ,CAAC,CAIF,SAAgB,GAAgB,CAC9B,OAAA,EAAA,EAAA,YAAkB,EAAkB,CAiBtC,SAAgB,EAAe,CAAE,MAAK,QAAO,WAAU,YAAW,GAAG,GAA8B,CACjG,GAAM,CAAE,aAAY,cAAA,EAAA,EAAA,YAAyB,EAAkB,CAM/D,OAJI,IAAe,GAKjB,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAc,UAAY,EAAA,QAAO,aAAe,EAAA,QAAO,UACvD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WARN,EAUE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CAC7C,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,YAAc,WAAe,CAAA,CAChD,GAlBC,KAmDX,SAAgB,EAAe,CAC7B,cACA,WACA,YACA,GAAG,GACmB,CACtB,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+B,CAAC,EAAY,CAAC,CAErD,EAAa,EAAM,EAAM,OAAS,GAClC,EAAY,EAAM,OAAS,EAC3B,CAAC,EAAW,IAAA,EAAA,EAAA,UAA6C,UAAU,CAgBzE,OACE,EAAA,EAAA,KAAC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,SAfrB,GAAgB,CAChC,EAAa,UAAU,CACvB,EAAU,GAAM,CAAC,GAAG,EAAG,EAAI,CAAC,EAamB,QAV/B,CACZ,EAAM,QAAU,IAIpB,EAAa,OAAO,CACpB,EAAU,GAAM,EAAE,MAAM,EAAG,GAAG,CAAC,GAIqB,YAAW,aAAY,YAAW,WACpF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,EACrE,WACG,CAAA,CACqB,CAAA"}

package/dist/components/NavigationView/NavigationView.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 interface NavigationContextValue {
     /** Navigate to a page by its `tag`. Pushes onto the stack. */
     navigate: (tag: string) => void;
@@ -9,7 +9,7 @@ interface NavigationContextValue {
     /** Tag of the currently visible page. */
     currentTag: string;
     /** Direction of the last transition (`"forward"` or `"back"`). */
-    direction: "forward" | "back";
+    direction: 'forward' | 'back';
 }
 /** Access the nearest `NavigationView`'s navigation functions. */
 export declare function useNavigation(): NavigationContextValue;

package/dist/components/NavigationView/NavigationView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./NavigationView.module.css\";\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: \"forward\" | \"back\";\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => { },\n  pop: () => { },\n  canGoBack: false,\n  currentTag: \"\",\n  direction: \"forward\",\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n  if (currentTag !== tag) return null;\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === \"forward\" ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<\"forward\" | \"back\">(\"forward\");\n\n  const navigate = (tag: string) => {\n    setDirection(\"forward\");\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) return;\n    setDirection(\"back\");\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div\n        className={[styles.view, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":";;;;AAwBA,IAAM,IAAoB,EAAsC;CAC9D,gBAAgB;CAChB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ,CAAC;AAGF,SAAgB,IAAgB;AAC9B,QAAO,EAAW,EAAkB;;AAiBtC,SAAgB,EAAe,EAC7B,QACA,UACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,EAAE,eAAY,iBAAc,EAAW,EAAkB;AAG/D,QAFI,MAAe,IAGjB,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,MAAc,YAAY,EAAO,eAAe,EAAO;GACvD;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YARN,CAUE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAY;IAAa,CAAA;GAC7C,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAc;GAAe,CAAA,CAChD;MAjBuB;;AAkDjC,SAAgB,EAAe,EAC7B,gBACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,CAAC,GAAO,KAAY,EAAmB,CAAC,EAAY,CAAC,EAErD,IAAa,EAAM,EAAM,SAAS,IAClC,IAAY,EAAM,SAAS,GAC3B,CAAC,GAAW,KAAgB,EAA6B,UAAU;AAazE,QACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAE,WAZrB,MAAgB;AAEhC,IADA,EAAa,UAAU,EACvB,GAAU,MAAM,CAAC,GAAG,GAAG,EAAI,CAAC;;GAUmB,WAP/B;AACZ,MAAM,UAAU,MACpB,EAAa,OAAO,EACpB,GAAU,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC;;GAIqB;GAAW;GAAY;GAAW;YACpF,kBAAC,OAAD;GACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC7D,GAAI;GAEH;GACG,CAAA;EACqB,CAAA"}
+{"version":3,"file":"NavigationView.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import { createContext, type HTMLAttributes, type ReactNode, useContext, useState } from 'react';\n\nimport styles from './NavigationView.module.css';\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: 'forward' | 'back';\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => {},\n  pop: () => {},\n  canGoBack: false,\n  currentTag: '',\n  direction: 'forward',\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({ tag, title, children, className, ...props }: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n\n  if (currentTag !== tag) {\n    return null;\n  }\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === 'forward' ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<'forward' | 'back'>('forward');\n\n  const navigate = (tag: string) => {\n    setDirection('forward');\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) {\n      return;\n    }\n\n    setDirection('back');\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div className={[styles.view, className].filter(Boolean).join(' ')} {...props}>\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":";;;;AAmBA,IAAM,IAAoB,EAAsC;CAC9D,gBAAgB;CAChB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ,CAAC;AAIF,SAAgB,IAAgB;AAC9B,QAAO,EAAW,EAAkB;;AAiBtC,SAAgB,EAAe,EAAE,QAAK,UAAO,aAAU,cAAW,GAAG,KAA8B;CACjG,IAAM,EAAE,eAAY,iBAAc,EAAW,EAAkB;AAM/D,QAJI,MAAe,IAKjB,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,MAAc,YAAY,EAAO,eAAe,EAAO;GACvD;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YARN,CAUE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAY;IAAa,CAAA;GAC7C,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAc;GAAe,CAAA,CAChD;MAlBC;;AAmDX,SAAgB,EAAe,EAC7B,gBACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,CAAC,GAAO,KAAY,EAAmB,CAAC,EAAY,CAAC,EAErD,IAAa,EAAM,EAAM,SAAS,IAClC,IAAY,EAAM,SAAS,GAC3B,CAAC,GAAW,KAAgB,EAA6B,UAAU;AAgBzE,QACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAE,WAfrB,MAAgB;AAEhC,IADA,EAAa,UAAU,EACvB,GAAU,MAAM,CAAC,GAAG,GAAG,EAAI,CAAC;;GAamB,WAV/B;AACZ,MAAM,UAAU,MAIpB,EAAa,OAAO,EACpB,GAAU,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC;;GAIqB;GAAW;GAAY;GAAW;YACpF,kBAAC,OAAD;GAAK,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAAE,GAAI;GACrE;GACG,CAAA;EACqB,CAAA"}