@gnome-ui/react 1.38.0 → 1.39.0

package/README.md

@@ -60,6 +60,7 @@ import { Button } from "@gnome-ui/react/components/Button";
 | Component | Description |
 |-----------|-------------|
 | [`Button`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-button--docs) | Default, Suggested, Destructive, Flat, Raised variants; `osd` overlay modifier; sm/md/lg sizes; pill and circular shapes |
+| [`IconButton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-iconbutton--docs) | Accessible icon-only action button composed from `Button`, `Icon`, and optional `Tooltip`; supports variants, sizes, disabled state, and refs |
 | [`SplitButton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-splitbutton--docs) | Primary action button with attached dropdown arrow; Default, Suggested, Destructive variants |
 | [`ButtonContent`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-buttoncontent--docs) | Icon + label layout helper for buttons that contain both an icon and text |
 | [`Switch`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-switch--docs) | On/off toggle for settings that apply immediately |
@@ -86,6 +87,7 @@ import { Button } from "@gnome-ui/react/components/Button";
 | [`Blockquote`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-blockquote--docs) | Styled pull-quote with left-border accent; default, info, warning, error, success variants; optional icon and attribution |
 | [`Spinner`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-spinner--docs) | Indeterminate loading indicator; sm/md/lg sizes |
 | [`ProgressBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-progressbar--docs) | Determinate (0–1) and indeterminate progress indicator |
+| [`Skeleton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-skeleton--docs) | Content-shaped loading placeholder; rectangular, circular, and multi-line text variants with optional shimmer |
 | [`CountDownTimer`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-countdowntimer--docs) | Countdown timer showing remaining time until a specified date; `date`, `time`, or `datetime` formats; executes callback on completion |
 | [`StatusPage`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-statuspage--docs) | Empty-state page with icon, title, description, and optional actions; `compact` prop for sidebars/popovers |
 | [`Separator`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-separator--docs) | Horizontal/vertical dividing line between content groups |

package/dist/components/Button/Button.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Button.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({variant:n=`default`,size:r=`md`,shape:i=`default`,osd:a=!1,leadingIcon:o,trailingIcon:s,children:c,className:l,...u}){return(0,t.jsxs)(`button`,{className:[e.default.button,e.default[n],r===`md`?null:e.default[r],i===`default`?null:e.default[i],a?e.default.osd:null,l].filter(Boolean).join(` `),...u,children:[o,c,s]})}exports.Button=n;
+const e=require(`./Button.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.forwardRef)(function({variant:t=`default`,size:r=`md`,shape:i=`default`,osd:a=!1,leadingIcon:o,trailingIcon:s,children:c,className:l,...u},d){return(0,n.jsxs)(`button`,{ref:d,className:[e.default.button,e.default[t],r===`md`?null:e.default[r],i===`default`?null:e.default[i],a?e.default.osd:null,l].filter(Boolean).join(` `),...u,children:[o,c,s]})});exports.Button=r;
 //# sourceMappingURL=Button.cjs.map

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n}\n"],"mappings":"8EAqCA,SAAgB,EAAO,CACrB,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GACW,CAYd,OACE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAZM,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGkB,GAAI,WAAhC,CACG,EACA,EACA,EACM"}
+{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps, ref) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAqCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAAgB,CAC/E,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GACW,EAAK,CAYnB,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAG4B,GAAI,WAA1C,CACG,EACA,EACA,EACM,IAEX"}

package/dist/components/Button/Button.d.ts

@@ -31,4 +31,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/controls/buttons.html
  */
-export declare function Button({ variant, size, shape, osd, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,11 +1,13 @@
 import e from "./Button.module.css.js";
-import { jsxs as t } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { jsxs as n } from "react/jsx-runtime";
 //#region src/components/Button/Button.tsx
-function n({ variant: n = "default", size: r = "md", shape: i = "default", osd: a = !1, leadingIcon: o, trailingIcon: s, children: c, className: l, ...u }) {
-	return /* @__PURE__ */ t("button", {
+var r = t(function({ variant: t = "default", size: r = "md", shape: i = "default", osd: a = !1, leadingIcon: o, trailingIcon: s, children: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ n("button", {
+		ref: d,
 		className: [
 			e.button,
-			e[n],
+			e[t],
 			r === "md" ? null : e[r],
 			i === "default" ? null : e[i],
 			a ? e.osd : null,
@@ -18,8 +20,8 @@ function n({ variant: n = "default", size: r = "md", shape: i = "default", osd:
 			s
 		]
 	});
-}
+});
 //#endregion
-export { n as Button };
+export { r as Button };
 
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n}\n"],"mappings":";;;AAqCA,SAAgB,EAAO,EACrB,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KACW;AAYd,QACE,kBAAC,UAAD;EAAQ,WAZM;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGkB,GAAI;YAAhC;GACG;GACA;GACA;GACM"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps, ref) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAqCA,IAAa,IAAS,EAA2C,SAAgB,EAC/E,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KACW,GAAK;AAYnB,QACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAG4B,GAAI;YAA1C;GACG;GACA;GACA;GACM;;EAEX"}

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

@@ -1,2 +1,2 @@
-var e={button:`_button_1qgdy_1`,pill:`_pill_1qgdy_52`,circular:`_circular_1qgdy_59`,default:`_default_1qgdy_71`,suggested:`_suggested_1qgdy_105`,destructive:`_destructive_1qgdy_120`,flat:`_flat_1qgdy_135`,raised:`_raised_1qgdy_150`,osd:`_osd_1qgdy_184`,sm:`_sm_1qgdy_228`,lg:`_lg_1qgdy_235`};exports.default=e;
+var e={button:`_button_mln0u_1`,pill:`_pill_mln0u_52`,circular:`_circular_mln0u_59`,default:`_default_mln0u_71`,suggested:`_suggested_mln0u_105`,destructive:`_destructive_mln0u_120`,flat:`_flat_mln0u_135`,raised:`_raised_mln0u_150`,osd:`_osd_mln0u_184`,sm:`_sm_mln0u_228`,lg:`_lg_mln0u_243`};exports.default=e;
 //# sourceMappingURL=Button.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\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    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\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/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\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:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\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      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\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    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\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/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\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:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\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      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

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

@@ -1,15 +1,15 @@
 var e = {
-	button: "_button_1qgdy_1",
-	pill: "_pill_1qgdy_52",
-	circular: "_circular_1qgdy_59",
-	default: "_default_1qgdy_71",
-	suggested: "_suggested_1qgdy_105",
-	destructive: "_destructive_1qgdy_120",
-	flat: "_flat_1qgdy_135",
-	raised: "_raised_1qgdy_150",
-	osd: "_osd_1qgdy_184",
-	sm: "_sm_1qgdy_228",
-	lg: "_lg_1qgdy_235"
+	button: "_button_mln0u_1",
+	pill: "_pill_mln0u_52",
+	circular: "_circular_mln0u_59",
+	default: "_default_mln0u_71",
+	suggested: "_suggested_mln0u_105",
+	destructive: "_destructive_mln0u_120",
+	flat: "_flat_mln0u_135",
+	raised: "_raised_mln0u_150",
+	osd: "_osd_mln0u_184",
+	sm: "_sm_mln0u_228",
+	lg: "_lg_mln0u_243"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\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    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\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/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\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:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\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      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\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    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\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/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\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:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\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      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

package/dist/components/IconButton/IconButton.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Button/Button.cjs`),t=require(`../Icon/Icon.cjs`),n=require(`../Tooltip/Tooltip.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a={sm:`sm`,md:`md`,lg:`lg`},o=(0,r.forwardRef)(function({icon:r,label:o,variant:s=`default`,size:c=`md`,iconSize:l,tooltip:u,tooltipPlacement:d,tooltipDelay:f,...p},m){let h=s===`osd`?`flat`:s,g=(0,i.jsx)(e.Button,{ref:m,"aria-label":o,shape:`circular`,size:c,variant:h,osd:s===`osd`,...p,children:(0,i.jsx)(t.Icon,{icon:r,size:l??a[c]})});return u?(0,i.jsx)(n.Tooltip,{label:u,placement:d,delay:f,children:g}):g});exports.IconButton=o;
+//# sourceMappingURL=IconButton.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,30 @@
+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 IconButtonSize = ButtonSize;
+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. */
+    label: string;
+    /** Visual style of the button. Use `"osd"` for media overlay controls. */
+    variant?: IconButtonVariant;
+    /** Size of the button. */
+    size?: IconButtonSize;
+    /** Override the rendered icon size. Defaults to a size matched to `size`. */
+    iconSize?: IconSize;
+    /** Optional tooltip text shown on hover/focus. */
+    tooltip?: string;
+    /** Preferred tooltip placement. */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip delay in milliseconds. */
+    tooltipDelay?: number;
+}
+/**
+ * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.
+ *
+ * `label` is required because the button has no visible text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,35 @@
+import { Button as e } from "../Button/Button.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { Tooltip as n } from "../Tooltip/Tooltip.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/IconButton/IconButton.tsx
+var a = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+}, o = r(function({ icon: r, label: o, variant: s = "default", size: c = "md", iconSize: l, tooltip: u, tooltipPlacement: d, tooltipDelay: f, ...p }, m) {
+	let h = s === "osd" ? "flat" : s, g = /* @__PURE__ */ i(e, {
+		ref: m,
+		"aria-label": o,
+		shape: "circular",
+		size: c,
+		variant: h,
+		osd: s === "osd",
+		...p,
+		children: /* @__PURE__ */ i(t, {
+			icon: r,
+			size: l ?? a[c]
+		})
+	});
+	return u ? /* @__PURE__ */ i(n, {
+		label: u,
+		placement: d,
+		delay: f,
+		children: g
+	}) : g;
+});
+//#endregion
+export { o as IconButton };
+
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/IconButton.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./IconButton/IconButton.cjs`);exports.IconButton=e.IconButton;

package/dist/components/IconButton.d.ts

@@ -0,0 +1,2 @@
+export * from './IconButton/index'
+export {}

package/dist/components/IconButton.js

@@ -0,0 +1,2 @@
+import { IconButton as e } from "./IconButton/IconButton.js";
+export { e as IconButton };

package/dist/components/Sidebar/SidebarItem.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Sidebar.module.css.cjs`),n=require(`./Sidebar.cjs`),r=require(`../Tooltip/Tooltip.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=n.useSidebarCollapsed(),y=(0,i.useContext)(n.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[t.default.itemBtn,l?t.default.active:null,v?t.default.itemCollapsed:null,C?t.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:t.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:t.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:t.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:t.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(r.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:t.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[t.default.contextMenuItem,e.destructive?t.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
+const e=require(`../Icon/Icon.cjs`),t=require(`../Tooltip/Tooltip.cjs`),n=require(`./Sidebar.module.css.cjs`),r=require(`./Sidebar.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
 //# sourceMappingURL=SidebarItem.cjs.map

package/dist/components/Sidebar/SidebarItem.js

@@ -1,13 +1,13 @@
 import { Icon as e } from "../Icon/Icon.js";
-import t from "./Sidebar.module.css.js";
-import { SidebarFilterContext as n, useSidebarCollapsed as r } from "./Sidebar.js";
-import { Tooltip as i } from "../Tooltip/Tooltip.js";
+import { Tooltip as t } from "../Tooltip/Tooltip.js";
+import n from "./Sidebar.module.css.js";
+import { SidebarFilterContext as r, useSidebarCollapsed as i } from "./Sidebar.js";
 import { useCallback as a, useContext as o, useEffect as s, useRef as c, useState as l } from "react";
 import { createPortal as u } from "react-dom";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/Sidebar/SidebarItem.tsx
 function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v, menuItems: y, onDrop: b, acceptTypes: x, className: S, ...C }) {
-	let w = r(), T = o(n), E = g ?? _, D = w ? v ?? p : v, O = T.length > 0 && !p.toLowerCase().includes(T.toLowerCase()), [k, A] = l(!1), j = (e) => {
+	let w = i(), T = o(r), E = g ?? _, D = w ? v ?? p : v, O = T.length > 0 && !p.toLowerCase().includes(T.toLowerCase()), [k, A] = l(!1), j = (e) => {
 		b && (x?.length && !x.some((t) => e.dataTransfer.types.includes(t)) || (e.preventDefault(), A(!0)));
 	}, M = () => A(!1), N = (e) => {
 		b && (e.preventDefault(), A(!1), b(e));
@@ -40,10 +40,10 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 		"aria-current": h ? "page" : void 0,
 		"aria-label": w ? p : void 0,
 		className: [
-			t.itemBtn,
-			h ? t.active : null,
-			w ? t.itemCollapsed : null,
-			k ? t.dragOver : null,
+			n.itemBtn,
+			h ? n.active : null,
+			w ? n.itemCollapsed : null,
+			k ? n.dragOver : null,
 			S
 		].filter(Boolean).join(" "),
 		onContextMenu: z,
@@ -54,7 +54,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 		...C,
 		children: [
 			m && /* @__PURE__ */ d("span", {
-				className: t.itemIcon,
+				className: n.itemIcon,
 				children: /* @__PURE__ */ d(e, {
 					icon: m,
 					size: "md",
@@ -62,25 +62,25 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 				})
 			}),
 			!w && /* @__PURE__ */ d("span", {
-				className: t.itemLabel,
+				className: n.itemLabel,
 				children: p
 			}),
 			!w && E && /* @__PURE__ */ d("span", {
-				className: t.itemSuffix,
+				className: n.itemSuffix,
 				children: E
 			})
 		]
 	});
 	return /* @__PURE__ */ f("li", {
-		className: t.item,
+		className: n.item,
 		hidden: O || void 0,
-		children: [D ? /* @__PURE__ */ d(i, {
+		children: [D ? /* @__PURE__ */ d(t, {
 			label: D,
 			placement: "right",
 			children: V
 		}) : V, P && y?.length && typeof document < "u" && u(/* @__PURE__ */ d("div", {
 			ref: I,
-			className: t.contextMenu,
+			className: n.contextMenu,
 			style: {
 				top: P.y,
 				left: P.x
@@ -90,7 +90,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 				type: "button",
 				role: "menuitem",
 				disabled: e.disabled,
-				className: [t.contextMenuItem, e.destructive ? t.contextMenuDestructive : null].filter(Boolean).join(" "),
+				className: [n.contextMenuItem, e.destructive ? n.contextMenuDestructive : null].filter(Boolean).join(" "),
 				onClick: () => {
 					e.onClick(), R();
 				},

package/dist/components/Skeleton/Skeleton.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Skeleton.module.css.cjs`);let t=require(`react/jsx-runtime`);function n(e){return typeof e==`number`?`${e}px`:e}function r({variant:r=`rect`,width:i=`100%`,height:a=16,size:o=40,lines:s=3,animated:c=!0,className:l,style:u,...d}){let f=[e.default.skeleton,e.default[r],c?e.default.animated:null,l].filter(Boolean).join(` `);if(r===`text`){let n=Math.max(1,Math.floor(s));return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:u,...d,children:Array.from({length:n},(r,i)=>(0,t.jsx)(`div`,{className:e.default.line,style:i===n-1?{"--skeleton-line-width":`60%`}:void 0},i))})}let p=r===`circle`?{width:`${o}px`,height:`${o}px`}:{width:n(i),height:n(a)};return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:{...p,...u},...d})}exports.Skeleton=r;
+//# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from \"react\";\nimport styles from \"./Skeleton.module.css\";\n\nexport type SkeletonVariant = \"rect\" | \"circle\" | \"text\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = \"rect\",\n  width = \"100%\",\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [\n    styles.skeleton,\n    styles[variant],\n    animated ? styles.animated : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (variant === \"text\") {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div\n        aria-hidden=\"true\"\n        className={classes}\n        style={style}\n        {...props}\n      >\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ \"--skeleton-line-width\": \"60%\" } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === \"circle\"\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={classes}\n      style={{ ...shapeStyle, ...style }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"gFAuBA,SAAS,EAAU,EAAwB,CACzC,OAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EASpD,SAAgB,EAAS,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,GACa,CAChB,IAAM,EAAU,CACd,EAAA,QAAO,SACP,EAAA,QAAO,GACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEZ,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,EAAM,CAAC,CAEhD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,EACJ,QACP,GAAI,WAEH,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,MAAO,CACnC,IAAA,GAEN,CAPK,EAOL,CACF,CACE,CAAA,CAIV,IAAM,EACJ,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,IAAK,CAC3C,CAAE,MAAO,EAAU,EAAM,CAAE,OAAQ,EAAU,EAAO,CAAE,CAE5D,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,EACX,MAAO,CAAE,GAAG,EAAY,GAAG,EAAO,CAClC,GAAI,EACJ,CAAA"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonVariant = "rect" | "circle" | "text";
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shape of the placeholder. Defaults to `"rect"`. */
+    variant?: SkeletonVariant;
+    /** Width for rectangular placeholders. Defaults to `"100%"`. */
+    width?: number | string;
+    /** Height for rectangular placeholders. Defaults to `16`. */
+    height?: number | string;
+    /** Diameter for circular placeholders. Defaults to `40`. */
+    size?: number;
+    /** Number of rows for text placeholders. Defaults to `3`. */
+    lines?: number;
+    /**
+     * Enables the shimmer animation.
+     * Respects `prefers-reduced-motion`. Defaults to `true`.
+     */
+    animated?: boolean;
+}
+/**
+ * Loading placeholder for content-shaped skeleton screens.
+ *
+ * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a
+ * pragmatic web-style extension for layouts that benefit from placeholder shape.
+ */
+export declare function Skeleton({ variant, width, height, size, lines, animated, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,47 @@
+import e from "./Skeleton.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Skeleton/Skeleton.tsx
+function n(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+function r({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 40, lines: s = 3, animated: c = !0, className: l, style: u, ...d }) {
+	let f = [
+		e.skeleton,
+		e[r],
+		c ? e.animated : null,
+		l
+	].filter(Boolean).join(" ");
+	if (r === "text") {
+		let n = Math.max(1, Math.floor(s));
+		return /* @__PURE__ */ t("div", {
+			"aria-hidden": "true",
+			className: f,
+			style: u,
+			...d,
+			children: Array.from({ length: n }, (r, i) => /* @__PURE__ */ t("div", {
+				className: e.line,
+				style: i === n - 1 ? { "--skeleton-line-width": "60%" } : void 0
+			}, i))
+		});
+	}
+	let p = r === "circle" ? {
+		width: `${o}px`,
+		height: `${o}px`
+	} : {
+		width: n(i),
+		height: n(a)
+	};
+	return /* @__PURE__ */ t("div", {
+		"aria-hidden": "true",
+		className: f,
+		style: {
+			...p,
+			...u
+		},
+		...d
+	});
+}
+//#endregion
+export { r as Skeleton };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from \"react\";\nimport styles from \"./Skeleton.module.css\";\n\nexport type SkeletonVariant = \"rect\" | \"circle\" | \"text\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = \"rect\",\n  width = \"100%\",\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [\n    styles.skeleton,\n    styles[variant],\n    animated ? styles.animated : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (variant === \"text\") {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div\n        aria-hidden=\"true\"\n        className={classes}\n        style={style}\n        {...props}\n      >\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ \"--skeleton-line-width\": \"60%\" } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === \"circle\"\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={classes}\n      style={{ ...shapeStyle, ...style }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AAuBA,SAAS,EAAU,GAAwB;AACzC,QAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;;AASpD,SAAgB,EAAS,EACvB,aAAU,QACV,WAAQ,QACR,YAAS,IACT,UAAO,IACP,WAAQ,GACR,cAAW,IACX,cACA,UACA,GAAG,KACa;CAChB,IAAM,IAAU;EACd,EAAO;EACP,EAAO;EACP,IAAW,EAAO,WAAW;EAC7B;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,KAAI,MAAY,QAAQ;EACtB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,CAAC;AAEhD,SACE,kBAAC,OAAD;GACE,eAAY;GACZ,WAAW;GACJ;GACP,GAAI;aAEH,MAAM,KAAK,EAAE,QAAQ,GAAW,GAAG,GAAG,MACrC,kBAAC,OAAD;IAEE,WAAW,EAAO;IAClB,OACE,MAAU,IAAY,IACjB,EAAE,yBAAyB,OAAO,GACnC,KAAA;IAEN,EAPK,EAOL,CACF;GACE,CAAA;;CAIV,IAAM,IACJ,MAAY,WACR;EAAE,OAAO,GAAG,EAAK;EAAK,QAAQ,GAAG,EAAK;EAAK,GAC3C;EAAE,OAAO,EAAU,EAAM;EAAE,QAAQ,EAAU,EAAO;EAAE;AAE5D,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW;EACX,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;EAClC,GAAI;EACJ,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={skeleton:`_skeleton_wkug0_3`,line:`_line_wkug0_15`,animated:`_animated_wkug0_28`,shimmer:`_shimmer_wkug0_1`,rect:`_rect_wkug0_35`,circle:`_circle_wkug0_39`,text:`_text_wkug0_43`};exports.default=e;
+//# sourceMappingURL=Skeleton.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.css.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["/* Base */\n\n.skeleton {\n  --skeleton-base: var(--gnome-skeleton-base-color, rgba(0, 0, 0, 0.09));\n  --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.55));\n\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  overflow: hidden;\n  background-color: var(--skeleton-base);\n}\n\n.skeleton::after,\n.line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(\n    90deg,\n    transparent,\n    var(--skeleton-highlight),\n    transparent\n  );\n}\n\n.animated::after,\n.animated .line::after {\n  animation: shimmer 1.4s var(--gnome-easing-default, ease) infinite;\n}\n\n/* Variants */\n\n.rect {\n  border-radius: var(--gnome-radius-md, 6px);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.text {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n  background-color: transparent;\n}\n\n.text::after {\n  display: none;\n}\n\n.line {\n  position: relative;\n  width: var(--skeleton-line-width, 100%);\n  height: 12px;\n  overflow: hidden;\n  border-radius: var(--gnome-radius-pill, 999px);\n  background-color: var(--skeleton-base);\n}\n\n/* Keyframes */\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Dark mode */\n\n@media (prefers-color-scheme: dark) {\n  .skeleton {\n    --skeleton-base: var(--gnome-skeleton-base-color, rgba(255, 255, 255, 0.12));\n    --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.18));\n  }\n}\n\n/* Reduced motion */\n\n@media (prefers-reduced-motion: reduce) {\n  .animated::after,\n  .animated .line::after {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+var e = {
+	skeleton: "_skeleton_wkug0_3",
+	line: "_line_wkug0_15",
+	animated: "_animated_wkug0_28",
+	shimmer: "_shimmer_wkug0_1",
+	rect: "_rect_wkug0_35",
+	circle: "_circle_wkug0_39",
+	text: "_text_wkug0_43"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Skeleton.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.css.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["/* Base */\n\n.skeleton {\n  --skeleton-base: var(--gnome-skeleton-base-color, rgba(0, 0, 0, 0.09));\n  --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.55));\n\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  overflow: hidden;\n  background-color: var(--skeleton-base);\n}\n\n.skeleton::after,\n.line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(\n    90deg,\n    transparent,\n    var(--skeleton-highlight),\n    transparent\n  );\n}\n\n.animated::after,\n.animated .line::after {\n  animation: shimmer 1.4s var(--gnome-easing-default, ease) infinite;\n}\n\n/* Variants */\n\n.rect {\n  border-radius: var(--gnome-radius-md, 6px);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.text {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n  background-color: transparent;\n}\n\n.text::after {\n  display: none;\n}\n\n.line {\n  position: relative;\n  width: var(--skeleton-line-width, 100%);\n  height: 12px;\n  overflow: hidden;\n  border-radius: var(--gnome-radius-pill, 999px);\n  background-color: var(--skeleton-base);\n}\n\n/* Keyframes */\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Dark mode */\n\n@media (prefers-color-scheme: dark) {\n  .skeleton {\n    --skeleton-base: var(--gnome-skeleton-base-color, rgba(255, 255, 255, 0.12));\n    --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.18));\n  }\n}\n\n/* Reduced motion */\n\n@media (prefers-reduced-motion: reduce) {\n  .animated::after,\n  .animated .line::after {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';

package/dist/components/Skeleton.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Skeleton/Skeleton.cjs`);exports.Skeleton=e.Skeleton;

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton/index'
+export {}

package/dist/components/Skeleton.js

@@ -0,0 +1,2 @@
+import { Skeleton as e } from "./Skeleton/Skeleton.js";
+export { e as Skeleton };

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Tooltip.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=6;function a(e,t,n){let r=window.innerWidth,a=window.innerHeight,o=[n,n===`top`||n===`bottom`?n===`top`?`bottom`:`top`:n===`left`?`right`:`left`,`top`,`bottom`,`left`,`right`];for(let n of o){let o=0,s=0;n===`top`?(o=e.top-t.height-i,s=e.left+e.width/2-t.width/2):n===`bottom`?(o=e.bottom+i,s=e.left+e.width/2-t.width/2):n===`left`?(o=e.top+e.height/2-t.height/2,s=e.left-t.width-i):(o=e.top+e.height/2-t.height/2,s=e.right+i);let c=s>=8&&s+t.width<=r-8,l=o>=8&&o+t.height<=a-8;if(c&&l)return{top:Math.max(8,Math.min(o,a-t.height-8)),left:Math.max(8,Math.min(s,r-t.width-8)),placement:n}}let s=0,c=0;return n===`top`&&(s=e.top-t.height-i,c=e.left+e.width/2-t.width/2),n===`bottom`&&(s=e.bottom+i,c=e.left+e.width/2-t.width/2),n===`left`&&(s=e.top+e.height/2-t.height/2,c=e.left-t.width-i),n===`right`&&(s=e.top+e.height/2-t.height/2,c=e.right+i),{top:Math.max(8,Math.min(s,a-t.height-8)),left:Math.max(8,Math.min(c,window.innerWidth-t.width-8)),placement:n}}function o({label:i,placement:o=`top`,delay:s=500,children:c}){let l=(0,t.useId)(),[u,d]=(0,t.useState)(!1),[f,p]=(0,t.useState)(null),m=(0,t.useRef)(null),h=(0,t.useRef)(null),g=(0,t.useRef)(null),_=()=>{g.current&&=(clearTimeout(g.current),null)},v=(0,t.useCallback)(()=>{!m.current||!h.current||p(a(m.current.getBoundingClientRect(),h.current.getBoundingClientRect(),o))},[o]);(0,t.useEffect)(()=>{if(u)return v(),window.addEventListener(`scroll`,v,{passive:!0,capture:!0}),window.addEventListener(`resize`,v,{passive:!0}),()=>{window.removeEventListener(`scroll`,v,{capture:!0}),window.removeEventListener(`resize`,v)}},[u,v]);let y=(0,t.useCallback)(()=>{_(),g.current=setTimeout(()=>d(!0),s)},[s]),b=(0,t.useCallback)(()=>{_(),d(!1),p(null)},[]);(0,t.useEffect)(()=>{u&&v()},[u,v]),(0,t.useEffect)(()=>{if(!u)return;let e=e=>{e.key===`Escape`&&b()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[u,b]);let x=(0,t.cloneElement)(c,{ref:m,"aria-describedby":l,onMouseEnter:e=>{y(),c.props.onMouseEnter?.(e)},onMouseLeave:e=>{b(),c.props.onMouseLeave?.(e)},onFocus:e=>{y(),c.props.onFocus?.(e)},onBlur:e=>{b(),c.props.onBlur?.(e)}}),S=(0,r.jsx)(`div`,{ref:h,id:l,role:`tooltip`,className:[e.default.tooltip,f?e.default[f.placement]:null,u&&f?e.default.visible:null].filter(Boolean).join(` `),style:f?{top:f.top,left:f.left}:{visibility:`hidden`,top:-9999,left:-9999},children:i});return(0,r.jsxs)(r.Fragment,{children:[x,typeof document<`u`?(0,n.createPortal)(S,document.body):S]})}exports.Tooltip=o;
+const e=require(`./Tooltip.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=6;function a(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function o(e,t,n){let r=window.innerWidth,a=window.innerHeight,o=[n,n===`top`||n===`bottom`?n===`top`?`bottom`:`top`:n===`left`?`right`:`left`,`top`,`bottom`,`left`,`right`];for(let n of o){let o=0,s=0;n===`top`?(o=e.top-t.height-i,s=e.left+e.width/2-t.width/2):n===`bottom`?(o=e.bottom+i,s=e.left+e.width/2-t.width/2):n===`left`?(o=e.top+e.height/2-t.height/2,s=e.left-t.width-i):(o=e.top+e.height/2-t.height/2,s=e.right+i);let c=s>=8&&s+t.width<=r-8,l=o>=8&&o+t.height<=a-8;if(c&&l)return{top:Math.max(8,Math.min(o,a-t.height-8)),left:Math.max(8,Math.min(s,r-t.width-8)),placement:n}}let s=0,c=0;return n===`top`&&(s=e.top-t.height-i,c=e.left+e.width/2-t.width/2),n===`bottom`&&(s=e.bottom+i,c=e.left+e.width/2-t.width/2),n===`left`&&(s=e.top+e.height/2-t.height/2,c=e.left-t.width-i),n===`right`&&(s=e.top+e.height/2-t.height/2,c=e.right+i),{top:Math.max(8,Math.min(s,a-t.height-8)),left:Math.max(8,Math.min(c,window.innerWidth-t.width-8)),placement:n}}function s({label:i,placement:s=`top`,delay:c=500,children:l}){let u=(0,t.useId)(),[d,f]=(0,t.useState)(!1),[p,m]=(0,t.useState)(null),h=(0,t.useRef)(null),g=(0,t.useRef)(null),_=(0,t.useRef)(null),v=()=>{_.current&&=(clearTimeout(_.current),null)},y=(0,t.useCallback)(()=>{!h.current||!g.current||m(o(h.current.getBoundingClientRect(),g.current.getBoundingClientRect(),s))},[s]);(0,t.useEffect)(()=>{if(d)return y(),window.addEventListener(`scroll`,y,{passive:!0,capture:!0}),window.addEventListener(`resize`,y,{passive:!0}),()=>{window.removeEventListener(`scroll`,y,{capture:!0}),window.removeEventListener(`resize`,y)}},[d,y]);let b=(0,t.useCallback)(()=>{v(),_.current=setTimeout(()=>f(!0),c)},[c]),x=(0,t.useCallback)(()=>{v(),f(!1),m(null)},[]);(0,t.useEffect)(()=>{d&&y()},[d,y]),(0,t.useEffect)(()=>{if(!d)return;let e=e=>{e.key===`Escape`&&x()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[d,x]);let S=l.props.ref,C=(0,t.cloneElement)(l,{ref:e=>{h.current=e,a(S,e)},"aria-describedby":u,onMouseEnter:e=>{b(),l.props.onMouseEnter?.(e)},onMouseLeave:e=>{x(),l.props.onMouseLeave?.(e)},onFocus:e=>{b(),l.props.onFocus?.(e)},onBlur:e=>{x(),l.props.onBlur?.(e)}}),w=(0,r.jsx)(`div`,{ref:g,id:u,role:`tooltip`,className:[e.default.tooltip,p?e.default[p.placement]:null,d&&p?e.default.visible:null].filter(Boolean).join(` `),style:p?{top:p.top,left:p.left}:{visibility:`hidden`,top:-9999,left:-9999},children:i});return(0,r.jsxs)(r.Fragment,{children:[C,typeof document<`u`?(0,n.createPortal)(w,document.body):w]})}exports.Tooltip=s;
 //# sourceMappingURL=Tooltip.cjs.map