@gnome-ui/react 1.44.0 → 1.45.1

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

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

package/dist/components/HeaderBar/HeaderBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.cjs","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./HeaderBar.module.css\";\n\nexport interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Centered title. Pass a string or a custom element. */\n  title?: ReactNode;\n  /** Controls placed at the leading (left) edge — back button, menu, etc. */\n  start?: ReactNode;\n  /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */\n  end?: ReactNode;\n  /**\n   * When true the header bar blends into the window chrome\n   * (no bottom border, slightly transparent background).\n   * Use for the topmost bar of a full-window layout.\n   */\n  flat?: boolean;\n}\n\n/**\n * Title bar with centered title and leading/trailing action slots.\n *\n * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons\n * (`<Button variant=\"flat\">`) inside the header bar per GNOME HIG.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function HeaderBar({\n  title,\n  start,\n  end,\n  flat = false,\n  className,\n  ...props\n}: HeaderBarProps) {\n  return (\n    <header\n      className={[styles.headerBar, flat ? styles.flat : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Leading slot */}\n      <div className={styles.slot}>\n        {start}\n      </div>\n\n      {/* Centered title */}\n      <div className={styles.titleSlot} aria-live=\"polite\">\n        {typeof title === \"string\" ? (\n          <span className={styles.title}>{title}</span>\n        ) : (\n          title\n        )}\n      </div>\n\n      {/* Trailing slot */}\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(\" \")}>\n        {end}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"iFA2BA,SAAgB,EAAU,CACxB,QACA,QACA,MACA,OAAO,GACP,YACA,GAAG,GACc,CACjB,OACE,EAAA,EAAA,MAAC,SAAD,CACE,UAAW,CAAC,EAAA,QAAO,UAAW,EAAO,EAAA,QAAO,KAAO,KAAM,EAAU,CAChE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAOE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cACpB,EACG,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,UAAW,YAAU,kBACzC,OAAO,GAAU,UAChB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAE7C,EAEE,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UACpE,EACG,CAAA,CACC"}
+{"version":3,"file":"HeaderBar.cjs","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './HeaderBar.module.css';\n\nexport interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** Centered title. Pass a string or a custom element. */\n  title?: ReactNode;\n  /** Controls placed at the leading (left) edge — back button, menu, etc. */\n  start?: ReactNode;\n  /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */\n  end?: ReactNode;\n  /**\n   * When true the header bar blends into the window chrome\n   * (no bottom border, slightly transparent background).\n   * Use for the topmost bar of a full-window layout.\n   */\n  flat?: boolean;\n}\n\n/**\n * Title bar with centered title and leading/trailing action slots.\n *\n * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons\n * (`<Button variant=\"flat\">`) inside the header bar per GNOME HIG.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function HeaderBar({\n  title,\n  start,\n  end,\n  flat = false,\n  className,\n  ...props\n}: HeaderBarProps) {\n  return (\n    <header\n      className={[styles.headerBar, flat ? styles.flat : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {/* Leading slot */}\n      <div className={styles.slot}>{start}</div>\n\n      {/* Centered title */}\n      <div className={styles.titleSlot} aria-live=\"polite\">\n        {typeof title === 'string' ? <span className={styles.title}>{title}</span> : title}\n      </div>\n\n      {/* Trailing slot */}\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(' ')}>{end}</div>\n    </header>\n  );\n}\n"],"mappings":"iFA4BA,SAAgB,EAAU,CACxB,QACA,QACA,MACA,OAAO,GACP,YACA,GAAG,GACc,CACjB,OACE,EAAA,EAAA,MAAC,SAAD,CACE,UAAW,CAAC,EAAA,QAAO,UAAW,EAAO,EAAA,QAAO,KAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7F,GAAI,WAFN,EAKE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAO,EAAY,CAAA,EAG1C,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,UAAW,YAAU,kBACzC,OAAO,GAAU,UAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAAG,EACzE,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAAG,EAAU,CAAA,CAC7E"}

package/dist/components/HeaderBar/HeaderBar.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+export interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Centered title. Pass a string or a custom element. */
     title?: ReactNode;
     /** Controls placed at the leading (left) edge — back button, menu, etc. */

package/dist/components/HeaderBar/HeaderBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.js","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./HeaderBar.module.css\";\n\nexport interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Centered title. Pass a string or a custom element. */\n  title?: ReactNode;\n  /** Controls placed at the leading (left) edge — back button, menu, etc. */\n  start?: ReactNode;\n  /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */\n  end?: ReactNode;\n  /**\n   * When true the header bar blends into the window chrome\n   * (no bottom border, slightly transparent background).\n   * Use for the topmost bar of a full-window layout.\n   */\n  flat?: boolean;\n}\n\n/**\n * Title bar with centered title and leading/trailing action slots.\n *\n * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons\n * (`<Button variant=\"flat\">`) inside the header bar per GNOME HIG.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function HeaderBar({\n  title,\n  start,\n  end,\n  flat = false,\n  className,\n  ...props\n}: HeaderBarProps) {\n  return (\n    <header\n      className={[styles.headerBar, flat ? styles.flat : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Leading slot */}\n      <div className={styles.slot}>\n        {start}\n      </div>\n\n      {/* Centered title */}\n      <div className={styles.titleSlot} aria-live=\"polite\">\n        {typeof title === \"string\" ? (\n          <span className={styles.title}>{title}</span>\n        ) : (\n          title\n        )}\n      </div>\n\n      {/* Trailing slot */}\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(\" \")}>\n        {end}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;AA2BA,SAAgB,EAAU,EACxB,UACA,UACA,QACA,UAAO,IACP,cACA,GAAG,KACc;AACjB,QACE,kBAAC,UAAD;EACE,WAAW;GAAC,EAAO;GAAW,IAAO,EAAO,OAAO;GAAM;GAAU,CAChE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN;GAOE,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB;IACG,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAW,aAAU;cACzC,OAAO,KAAU,WAChB,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;KAAa,CAAA,GAE7C;IAEE,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,CAAC,EAAO,MAAM,EAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cACpE;IACG,CAAA;GACC"}
+{"version":3,"file":"HeaderBar.js","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './HeaderBar.module.css';\n\nexport interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** Centered title. Pass a string or a custom element. */\n  title?: ReactNode;\n  /** Controls placed at the leading (left) edge — back button, menu, etc. */\n  start?: ReactNode;\n  /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */\n  end?: ReactNode;\n  /**\n   * When true the header bar blends into the window chrome\n   * (no bottom border, slightly transparent background).\n   * Use for the topmost bar of a full-window layout.\n   */\n  flat?: boolean;\n}\n\n/**\n * Title bar with centered title and leading/trailing action slots.\n *\n * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons\n * (`<Button variant=\"flat\">`) inside the header bar per GNOME HIG.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function HeaderBar({\n  title,\n  start,\n  end,\n  flat = false,\n  className,\n  ...props\n}: HeaderBarProps) {\n  return (\n    <header\n      className={[styles.headerBar, flat ? styles.flat : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {/* Leading slot */}\n      <div className={styles.slot}>{start}</div>\n\n      {/* Centered title */}\n      <div className={styles.titleSlot} aria-live=\"polite\">\n        {typeof title === 'string' ? <span className={styles.title}>{title}</span> : title}\n      </div>\n\n      {/* Trailing slot */}\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(' ')}>{end}</div>\n    </header>\n  );\n}\n"],"mappings":";;;AA4BA,SAAgB,EAAU,EACxB,UACA,UACA,QACA,UAAO,IACP,cACA,GAAG,KACc;AACjB,QACE,kBAAC,UAAD;EACE,WAAW;GAAC,EAAO;GAAW,IAAO,EAAO,OAAO;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7F,GAAI;YAFN;GAKE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAO;IAAY,CAAA;GAG1C,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAW,aAAU;cACzC,OAAO,KAAU,WAAW,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;KAAa,CAAA,GAAG;IACzE,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,CAAC,EAAO,MAAM,EAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cAAG;IAAU,CAAA;GAC7E"}

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

@@ -1,2 +1,2 @@
-export { HeaderBar } from './HeaderBar';
 export type { HeaderBarProps } from './HeaderBar';
+export { HeaderBar } from './HeaderBar';

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

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

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
-import { SVGAttributes } from 'react';
 import { AnyIconDefinition } from '@gnome-ui/icons';
-export type IconSize = "sm" | "md" | "lg";
+import { SVGAttributes } from 'react';
+export type IconSize = 'sm' | 'md' | 'lg';
 export interface IconProps extends SVGAttributes<SVGSVGElement> {
     /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */
     icon: AnyIconDefinition;

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

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

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

@@ -1,2 +1,2 @@
-export { Icon } from './Icon';
 export type { IconProps, IconSize } from './Icon';
+export { Icon } from './Icon';

package/dist/components/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from \"../Button\";\nimport { Icon, type IconSize } from \"../Icon\";\nimport { Tooltip, type TooltipPlacement } from \"../Tooltip\";\n\nexport type IconButtonVariant = ButtonVariant | \"osd\";\nexport type IconButtonSize = ButtonSize;\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    \"aria-label\" | \"children\" | \"leadingIcon\" | \"osd\" | \"shape\" | \"trailingIcon\" | \"variant\"\n  > {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /** Accessible name for the icon-only button. */\n  label: string;\n  /** Visual style of the button. Use `\"osd\"` for media overlay controls. */\n  variant?: IconButtonVariant;\n  /** Size of the button. */\n  size?: IconButtonSize;\n  /** Override the rendered icon size. Defaults to a size matched to `size`. */\n  iconSize?: IconSize;\n  /** Optional tooltip text shown on hover/focus. */\n  tooltip?: string;\n  /** Preferred tooltip placement. */\n  tooltipPlacement?: TooltipPlacement;\n  /** Tooltip delay in milliseconds. */\n  tooltipDelay?: number;\n}\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: \"sm\",\n  md: \"md\",\n  lg: \"lg\",\n};\n\n/**\n * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.\n *\n * `label` is required because the button has no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton({\n  icon,\n  label,\n  variant = \"default\",\n  size = \"md\",\n  iconSize,\n  tooltip,\n  tooltipPlacement,\n  tooltipDelay,\n  ...props\n}, ref) {\n  const buttonVariant = variant === \"osd\" ? \"flat\" : variant;\n\n  const button = (\n    <Button\n      ref={ref}\n      aria-label={label}\n      shape=\"circular\"\n      size={size}\n      variant={buttonVariant}\n      osd={variant === \"osd\"}\n      {...props}\n    >\n      <Icon icon={icon} size={iconSize ?? ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <Tooltip\n      label={tooltip}\n      placement={tooltipPlacement}\n      delay={tooltipDelay}\n    >\n      {button}\n    </Tooltip>\n  );\n});\n"],"mappings":"gKAgCA,IAAM,EAA6D,CACjE,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAOY,GAAA,EAAA,EAAA,YAA4D,SAAoB,CAC3F,OACA,QACA,UAAU,UACV,OAAO,KACP,WACA,UACA,mBACA,eACA,GAAG,GACF,EAAK,CACN,IAAM,EAAgB,IAAY,MAAQ,OAAS,EAE7C,GACJ,EAAA,EAAA,KAAC,EAAA,OAAD,CACO,MACL,aAAY,EACZ,MAAM,WACA,OACN,QAAS,EACT,IAAK,IAAY,MACjB,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAM,GAAY,EAAyB,GAAS,CAAA,CAC/D,CAAA,CAKX,OAFK,GAGH,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,EACP,UAAW,EACX,MAAO,WAEN,EACO,CAAA,CATS,GAWrB"}
+{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { forwardRef } from 'react';\n\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from '../Button';\nimport { Icon, type IconSize } from '../Icon';\nimport { Tooltip, type TooltipPlacement } from '../Tooltip';\n\nexport type IconButtonVariant = ButtonVariant | 'osd';\nexport type IconButtonSize = ButtonSize;\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    'aria-label' | 'children' | 'leadingIcon' | 'osd' | 'shape' | 'trailingIcon' | 'variant'\n  > {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /** Accessible name for the icon-only button. */\n  label: string;\n  /** Visual style of the button. Use `\"osd\"` for media overlay controls. */\n  variant?: IconButtonVariant;\n  /** Size of the button. */\n  size?: IconButtonSize;\n  /** Override the rendered icon size. Defaults to a size matched to `size`. */\n  iconSize?: IconSize;\n  /** Optional tooltip text shown on hover/focus. */\n  tooltip?: string;\n  /** Preferred tooltip placement. */\n  tooltipPlacement?: TooltipPlacement;\n  /** Tooltip delay in milliseconds. */\n  tooltipDelay?: number;\n}\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n};\n\n/**\n * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.\n *\n * `label` is required because the button has no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    icon,\n    label,\n    variant = 'default',\n    size = 'md',\n    iconSize,\n    tooltip,\n    tooltipPlacement,\n    tooltipDelay,\n    ...props\n  },\n  ref,\n) {\n  const buttonVariant = variant === 'osd' ? 'flat' : variant;\n\n  const button = (\n    <Button\n      ref={ref}\n      aria-label={label}\n      shape=\"circular\"\n      size={size}\n      variant={buttonVariant}\n      osd={variant === 'osd'}\n      {...props}\n    >\n      <Icon icon={icon} size={iconSize ?? ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  return (\n    <Tooltip label={tooltip} placement={tooltipPlacement} delay={tooltipDelay}>\n      {button}\n    </Tooltip>\n  );\n});\n"],"mappings":"gKAiCA,IAAM,EAA6D,CACjE,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAOY,GAAA,EAAA,EAAA,YAA4D,SACvE,CACE,OACA,QACA,UAAU,UACV,OAAO,KACP,WACA,UACA,mBACA,eACA,GAAG,GAEL,EACA,CACA,IAAM,EAAgB,IAAY,MAAQ,OAAS,EAE7C,GACJ,EAAA,EAAA,KAAC,EAAA,OAAD,CACO,MACL,aAAY,EACZ,MAAM,WACA,OACN,QAAS,EACT,IAAK,IAAY,MACjB,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAM,GAAY,EAAyB,GAAS,CAAA,CAC/D,CAAA,CAOX,OAJK,GAKH,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,EAAS,UAAW,EAAkB,MAAO,WAC1D,EACO,CAAA,CANH,GAQT"}

package/dist/components/IconButton/IconButton.d.ts

@@ -2,9 +2,9 @@ import { IconDefinition } from '@gnome-ui/icons';
 import { ButtonProps, ButtonSize, ButtonVariant } from '../Button';
 import { IconSize } from '../Icon';
 import { TooltipPlacement } from '../Tooltip';
-export type IconButtonVariant = ButtonVariant | "osd";
+export type IconButtonVariant = ButtonVariant | 'osd';
 export type IconButtonSize = ButtonSize;
-export interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "leadingIcon" | "osd" | "shape" | "trailingIcon" | "variant"> {
+export interface IconButtonProps extends Omit<ButtonProps, 'aria-label' | 'children' | 'leadingIcon' | 'osd' | 'shape' | 'trailingIcon' | 'variant'> {
     /** Icon definition imported from `@gnome-ui/icons`. */
     icon: IconDefinition;
     /** Accessible name for the icon-only button. */

package/dist/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from \"../Button\";\nimport { Icon, type IconSize } from \"../Icon\";\nimport { Tooltip, type TooltipPlacement } from \"../Tooltip\";\n\nexport type IconButtonVariant = ButtonVariant | \"osd\";\nexport type IconButtonSize = ButtonSize;\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    \"aria-label\" | \"children\" | \"leadingIcon\" | \"osd\" | \"shape\" | \"trailingIcon\" | \"variant\"\n  > {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /** Accessible name for the icon-only button. */\n  label: string;\n  /** Visual style of the button. Use `\"osd\"` for media overlay controls. */\n  variant?: IconButtonVariant;\n  /** Size of the button. */\n  size?: IconButtonSize;\n  /** Override the rendered icon size. Defaults to a size matched to `size`. */\n  iconSize?: IconSize;\n  /** Optional tooltip text shown on hover/focus. */\n  tooltip?: string;\n  /** Preferred tooltip placement. */\n  tooltipPlacement?: TooltipPlacement;\n  /** Tooltip delay in milliseconds. */\n  tooltipDelay?: number;\n}\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: \"sm\",\n  md: \"md\",\n  lg: \"lg\",\n};\n\n/**\n * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.\n *\n * `label` is required because the button has no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton({\n  icon,\n  label,\n  variant = \"default\",\n  size = \"md\",\n  iconSize,\n  tooltip,\n  tooltipPlacement,\n  tooltipDelay,\n  ...props\n}, ref) {\n  const buttonVariant = variant === \"osd\" ? \"flat\" : variant;\n\n  const button = (\n    <Button\n      ref={ref}\n      aria-label={label}\n      shape=\"circular\"\n      size={size}\n      variant={buttonVariant}\n      osd={variant === \"osd\"}\n      {...props}\n    >\n      <Icon icon={icon} size={iconSize ?? ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <Tooltip\n      label={tooltip}\n      placement={tooltipPlacement}\n      delay={tooltipDelay}\n    >\n      {button}\n    </Tooltip>\n  );\n});\n"],"mappings":";;;;;;AAgCA,IAAM,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAOY,IAAa,EAA+C,SAAoB,EAC3F,SACA,UACA,aAAU,WACV,UAAO,MACP,aACA,YACA,qBACA,iBACA,GAAG,KACF,GAAK;CACN,IAAM,IAAgB,MAAY,QAAQ,SAAS,GAE7C,IACJ,kBAAC,GAAD;EACO;EACL,cAAY;EACZ,OAAM;EACA;EACN,SAAS;EACT,KAAK,MAAY;EACjB,GAAI;YAEJ,kBAAC,GAAD;GAAY;GAAM,MAAM,KAAY,EAAyB;GAAS,CAAA;EAC/D,CAAA;AAKX,QAFK,IAGH,kBAAC,GAAD;EACE,OAAO;EACP,WAAW;EACX,OAAO;YAEN;EACO,CAAA,GATS;EAWrB"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { forwardRef } from 'react';\n\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from '../Button';\nimport { Icon, type IconSize } from '../Icon';\nimport { Tooltip, type TooltipPlacement } from '../Tooltip';\n\nexport type IconButtonVariant = ButtonVariant | 'osd';\nexport type IconButtonSize = ButtonSize;\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    'aria-label' | 'children' | 'leadingIcon' | 'osd' | 'shape' | 'trailingIcon' | 'variant'\n  > {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /** Accessible name for the icon-only button. */\n  label: string;\n  /** Visual style of the button. Use `\"osd\"` for media overlay controls. */\n  variant?: IconButtonVariant;\n  /** Size of the button. */\n  size?: IconButtonSize;\n  /** Override the rendered icon size. Defaults to a size matched to `size`. */\n  iconSize?: IconSize;\n  /** Optional tooltip text shown on hover/focus. */\n  tooltip?: string;\n  /** Preferred tooltip placement. */\n  tooltipPlacement?: TooltipPlacement;\n  /** Tooltip delay in milliseconds. */\n  tooltipDelay?: number;\n}\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n};\n\n/**\n * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.\n *\n * `label` is required because the button has no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    icon,\n    label,\n    variant = 'default',\n    size = 'md',\n    iconSize,\n    tooltip,\n    tooltipPlacement,\n    tooltipDelay,\n    ...props\n  },\n  ref,\n) {\n  const buttonVariant = variant === 'osd' ? 'flat' : variant;\n\n  const button = (\n    <Button\n      ref={ref}\n      aria-label={label}\n      shape=\"circular\"\n      size={size}\n      variant={buttonVariant}\n      osd={variant === 'osd'}\n      {...props}\n    >\n      <Icon icon={icon} size={iconSize ?? ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  return (\n    <Tooltip label={tooltip} placement={tooltipPlacement} delay={tooltipDelay}>\n      {button}\n    </Tooltip>\n  );\n});\n"],"mappings":";;;;;;AAiCA,IAAM,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAOY,IAAa,EAA+C,SACvE,EACE,SACA,UACA,aAAU,WACV,UAAO,MACP,aACA,YACA,qBACA,iBACA,GAAG,KAEL,GACA;CACA,IAAM,IAAgB,MAAY,QAAQ,SAAS,GAE7C,IACJ,kBAAC,GAAD;EACO;EACL,cAAY;EACZ,OAAM;EACA;EACN,SAAS;EACT,KAAK,MAAY;EACjB,GAAI;YAEJ,kBAAC,GAAD;GAAY;GAAM,MAAM,KAAY,EAAyB;GAAS,CAAA;EAC/D,CAAA;AAOX,QAJK,IAKH,kBAAC,GAAD;EAAS,OAAO;EAAS,WAAW;EAAkB,OAAO;YAC1D;EACO,CAAA,GANH;EAQT"}

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

@@ -1,2 +1,2 @@
-export { IconButton } from './IconButton';
 export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';
+export { IconButton } from './IconButton';

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.cjs

@@ -1,2 +1,2 @@
-const e=require(`./InlineViewSwitcher.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.createContext)(null);function i(){let e=(0,t.useContext)(r);if(!e)throw Error(`InlineViewSwitcherItem must be used inside InlineViewSwitcher`);return e}function a({value:i,onValueChange:a,variant:o=`default`,"aria-label":s=`View switcher`,children:c,className:l,...u}){let d=(0,t.useRef)(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;else return;e.preventDefault(),t[r].focus(),t[r].click()}return(0,n.jsx)(r.Provider,{value:{value:i,onValueChange:a},children:(0,n.jsx)(`div`,{ref:d,role:`radiogroup`,"aria-label":s,onKeyDown:f,className:[e.default.switcher,e.default[o],l].filter(Boolean).join(` `),...u,children:c})})}exports.InlineViewSwitcher=a,exports.useInlineViewSwitcher=i;
+const e=require(`./InlineViewSwitcher.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.createContext)(null);function i(){let e=(0,t.useContext)(r);if(!e)throw Error(`InlineViewSwitcherItem must be used inside InlineViewSwitcher`);return e}function a({value:i,onValueChange:a,variant:o=`default`,"aria-label":s=`View switcher`,children:c,className:l,...u}){let d=(0,t.useRef)(null);function f(e){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[i].focus(),t[i].click()}return(0,n.jsx)(r.Provider,{value:{value:i,onValueChange:a},children:(0,n.jsx)(`div`,{ref:d,role:`radiogroup`,"aria-label":s,onKeyDown:f,className:[e.default.switcher,e.default[o],l].filter(Boolean).join(` `),...u,children:c})})}exports.InlineViewSwitcher=a,exports.useInlineViewSwitcher=i;
 //# sourceMappingURL=InlineViewSwitcher.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.cjs","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":"6GAmBA,IAAM,GAAA,EAAA,EAAA,eACiD,KAAK,CAE5D,SAAgB,GAAwB,CACtC,IAAM,GAAA,EAAA,EAAA,YAAiB,EAA0B,CACjD,GAAI,CAAC,EACH,MAAU,MACR,gEACD,CACH,OAAO,EAkCT,SAAgB,EAAmB,CACjC,QACA,gBACA,UAAU,UACV,aAAc,EAAY,gBAC1B,WACA,YACA,GAAG,GACuB,CAC1B,IAAM,GAAA,EAAA,EAAA,QAAkC,KAAK,CAE7C,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAChB,8BACD,EAAI,EAAE,CACR,CACK,EAAM,EAAM,UAAW,GAAO,IAAO,SAAS,cAAc,CAClE,GAAI,IAAQ,GAAI,OAEhB,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,eAClB,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC1C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,eACjC,EAAE,MAAQ,OAAQ,EAAO,UACzB,EAAE,MAAQ,MAAO,EAAO,EAAM,OAAS,OAC3C,OAEL,EAAE,gBAAgB,CAClB,EAAM,GAAM,OAAO,CACnB,EAAM,GAAM,OAAO,CAGrB,OACE,EAAA,EAAA,KAAC,EAA0B,SAA3B,CAAoC,MAAO,CAAE,QAAO,gBAAe,WACjE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EACX,UAAW,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAU,CACrD,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,EAEH,WACG,CAAA,CAC6B,CAAA"}
+{"version":3,"file":"InlineViewSwitcher.cjs","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":"6GAoBA,IAAM,GAAA,EAAA,EAAA,eAAiF,KAAK,CAG5F,SAAgB,GAAwB,CACtC,IAAM,GAAA,EAAA,EAAA,YAAiB,EAA0B,CAEjD,GAAI,CAAC,EACH,MAAU,MAAM,gEAAgE,CAGlF,OAAO,EAkCT,SAAgB,EAAmB,CACjC,QACA,gBACA,UAAU,UACV,aAAc,EAAY,gBAC1B,WACA,YACA,GAAG,GACuB,CAC1B,IAAM,GAAA,EAAA,EAAA,QAAkC,KAAK,CAE7C,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,8BAA8B,EAAI,EAAE,CAC3F,CACK,EAAgB,SAAS,cACzB,EAAM,aAAyB,kBAAoB,EAAM,QAAQ,EAAc,CAAG,GAExF,GAAI,IAAQ,GACV,OAGF,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,eAChB,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC5C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,eAC/B,EAAE,MAAQ,OACnB,EAAO,UACE,EAAE,MAAQ,MACnB,EAAO,EAAM,OAAS,OAEtB,OAGF,EAAE,gBAAgB,CAClB,EAAM,GAAM,OAAO,CACnB,EAAM,GAAM,OAAO,CAGrB,OACE,EAAA,EAAA,KAAC,EAA0B,SAA3B,CAAoC,MAAO,CAAE,QAAO,gBAAe,WACjE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EACX,UAAW,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAClF,GAAI,EAEH,WACG,CAAA,CAC6B,CAAA"}

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 };