@gnome-ui/react 1.44.0 → 1.45.1

package/dist/components/Tabs/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","names":[],"sources":["../../../src/components/Tabs/TabBar.tsx"],"sourcesContent":["import {\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./Tabs.module.css\";\n\nexport interface TabBarProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /** Accessible label for the tab list. */\n  \"aria-label\"?: string;\n  /**\n   * Removes the header-bar background so the tab bar blends into any surface.\n   * Use when placing the bar inside a card, content area, or custom container.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n}\n\n/**\n * Horizontal tab bar that holds `TabItem` elements.\n *\n * Manages roving-tabindex keyboard navigation (← → Home End).\n *\n * @see https://developer.gnome.org/hig/patterns/nav/tabs.html\n */\nexport function TabBar({\n  children,\n  className,\n  inline = false,\n  \"aria-label\": ariaLabel = \"Tabs\",\n  ...props\n}: TabBarProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const tabs = Array.from(\n      listRef.current?.querySelectorAll<HTMLButtonElement>(\n        \"[role=tab]:not(:disabled)\",\n      ) ?? [],\n    );\n    const idx = tabs.findIndex((t) => t === document.activeElement);\n    if (idx === -1) return;\n\n    let next = idx;\n    if (e.key === \"ArrowRight\") next = (idx + 1) % tabs.length;\n    else if (e.key === \"ArrowLeft\") next = (idx - 1 + tabs.length) % tabs.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = tabs.length - 1;\n    else return;\n\n    e.preventDefault();\n    tabs[next].focus();\n  }\n\n  return (\n    <div\n      className={[styles.bar, inline ? styles.inline : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        className={styles.list}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA2BA,SAAgB,EAAO,EACrB,aACA,cACA,YAAS,IACT,cAAc,IAAY,QAC1B,GAAG,KACW;CACd,IAAM,IAAU,EAAuB,KAAK;CAE5C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAO,MAAM,KACjB,EAAQ,SAAS,iBACf,4BACD,IAAI,EAAE,CACR,EACK,IAAM,EAAK,WAAW,MAAM,MAAM,SAAS,cAAc;AAC/D,MAAI,MAAQ,GAAI;EAEhB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aAAc,MAAQ,IAAM,KAAK,EAAK;WAC3C,EAAE,QAAQ,YAAa,MAAQ,IAAM,IAAI,EAAK,UAAU,EAAK;WAC7D,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAK,SAAS;MAC1C;AAGL,EADA,EAAE,gBAAgB,EAClB,EAAK,GAAM,OAAO;;AAGpB,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAK,IAAS,EAAO,SAAS;GAAM;GAAU,CAC9D,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEJ,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW,EAAO;GAClB,WAAW;GAEV;GACG,CAAA;EACF,CAAA"}
+{"version":3,"file":"TabBar.js","names":[],"sources":["../../../src/components/Tabs/TabBar.tsx"],"sourcesContent":["import { type HTMLAttributes, type KeyboardEvent, type ReactNode, useRef } from 'react';\n\nimport styles from './Tabs.module.css';\n\nexport interface TabBarProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /** Accessible label for the tab list. */\n  'aria-label'?: string;\n  /**\n   * Removes the header-bar background so the tab bar blends into any surface.\n   * Use when placing the bar inside a card, content area, or custom container.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n}\n\n/**\n * Horizontal tab bar that holds `TabItem` elements.\n *\n * Manages roving-tabindex keyboard navigation (← → Home End).\n *\n * @see https://developer.gnome.org/hig/patterns/nav/tabs.html\n */\nexport function TabBar({\n  children,\n  className,\n  inline = false,\n  'aria-label': ariaLabel = 'Tabs',\n  ...props\n}: TabBarProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const tabs = Array.from(\n      listRef.current?.querySelectorAll<HTMLButtonElement>('[role=tab]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? tabs.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = idx;\n    if (e.key === 'ArrowRight') {\n      next = (idx + 1) % tabs.length;\n    } else if (e.key === 'ArrowLeft') {\n      next = (idx - 1 + tabs.length) % tabs.length;\n    } else if (e.key === 'Home') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = tabs.length - 1;\n    } else {\n      return;\n    }\n\n    e.preventDefault();\n    tabs[next].focus();\n  }\n\n  return (\n    <div\n      className={[styles.bar, inline ? styles.inline : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        className={styles.list}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAuBA,SAAgB,EAAO,EACrB,aACA,cACA,YAAS,IACT,cAAc,IAAY,QAC1B,GAAG,KACW;CACd,IAAM,IAAU,EAAuB,KAAK;CAE5C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAO,MAAM,KACjB,EAAQ,SAAS,iBAAoC,4BAA4B,IAAI,EAAE,CACxF,EACK,IAAgB,SAAS,eACzB,IAAM,aAAyB,oBAAoB,EAAK,QAAQ,EAAc,GAAG;AAEvF,MAAI,MAAQ,GACV;EAGF,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aACZ,MAAQ,IAAM,KAAK,EAAK;WACf,EAAE,QAAQ,YACnB,MAAQ,IAAM,IAAI,EAAK,UAAU,EAAK;WAC7B,EAAE,QAAQ,OACnB,KAAO;WACE,EAAE,QAAQ,MACnB,KAAO,EAAK,SAAS;MAErB;AAIF,EADA,EAAE,gBAAgB,EAClB,EAAK,GAAM,OAAO;;AAGpB,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAK,IAAS,EAAO,SAAS;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC3F,GAAI;YAEJ,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW,EAAO;GAClB,WAAW;GAEV;GACG,CAAA;EACF,CAAA"}

package/dist/components/Tabs/TabItem.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Tabs.module.css.cjs`);let n=require(`react/jsx-runtime`);function r({label:r,icon:i,active:a=!1,panelId:o,onClose:s,closeLabel:c=`Close tab`,className:l,disabled:u,...d}){return(0,n.jsxs)(`button`,{role:`tab`,type:`button`,"aria-selected":a,"aria-controls":o,tabIndex:a?0:-1,disabled:u,className:[t.default.tab,a?t.default.active:null,s?t.default.closeable:null,l].filter(Boolean).join(` `),...d,children:[i&&(0,n.jsx)(`span`,{className:t.default.tabIcon,children:(0,n.jsx)(e.Icon,{icon:i,size:`sm`,"aria-hidden":!0})}),(0,n.jsx)(`span`,{className:t.default.tabLabel,children:r}),s&&(0,n.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":c,className:t.default.closeBtn,onClick:e=>{e.stopPropagation(),s()},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),s())},children:`×`})]})}exports.TabItem=r;
+const e=require(`../Badge/Badge.cjs`),t=require(`../Icon/Icon.cjs`),n=require(`./Tabs.module.css.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a=(0,r.memo)(function({label:r,icon:a,active:o=!1,panelId:s,onClose:c,closeLabel:l=`Close tab`,count:u,className:d,disabled:f,...p}){return(0,i.jsxs)(`button`,{role:`tab`,type:`button`,"aria-selected":o,"aria-controls":s,tabIndex:o?0:-1,disabled:f,className:[n.default.tab,o?n.default.active:null,c?n.default.closeable:null,d].filter(Boolean).join(` `),...p,children:[a&&(0,i.jsx)(`span`,{className:n.default.tabIcon,children:(0,i.jsx)(t.Icon,{icon:a,size:`sm`,"aria-hidden":!0})}),(0,i.jsx)(`span`,{className:n.default.tabLabel,children:r}),u!==void 0&&(0,i.jsx)(e.Badge,{className:n.default.tabBadge,children:u>99?`99+`:u}),c&&(0,i.jsx)(`button`,{type:`button`,"aria-label":l,className:n.default.closeBtn,onClick:e=>{e.stopPropagation(),c()},children:`×`})]})});exports.TabItem=a;
 //# sourceMappingURL=TabItem.cjs.map

package/dist/components/Tabs/TabItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.cjs","names":[],"sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Tabs.module.css\";\n\nexport interface TabItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tab label. */\n  label: string;\n  /** Optional icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this tab as the currently selected one. */\n  active?: boolean;\n  /**\n   * id of the `TabPanel` this tab controls.\n   * Sets `aria-controls` automatically.\n   */\n  panelId?: string;\n  /**\n   * When provided, a close (×) button is rendered at the trailing edge.\n   * Called when the user clicks the close button.\n   */\n  onClose?: () => void;\n  /** Accessible label for the close button. Defaults to `\"Close tab\"`. */\n  closeLabel?: string;\n  children?: ReactNode;\n}\n\n/**\n * Individual tab button inside a `TabBar`.\n */\nexport function TabItem({\n  label,\n  icon,\n  active = false,\n  panelId,\n  onClose,\n  closeLabel = \"Close tab\",\n  className,\n  disabled,\n  ...props\n}: TabItemProps) {\n  return (\n    <button\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={active}\n      aria-controls={panelId}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      className={[\n        styles.tab,\n        active ? styles.active : null,\n        onClose ? styles.closeable : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.tabIcon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.tabLabel}>{label}</span>\n\n      {onClose && (\n        <span\n          role=\"button\"\n          tabIndex={0}\n          aria-label={closeLabel}\n          className={styles.closeBtn}\n          onClick={(e) => { e.stopPropagation(); onClose(); }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              e.stopPropagation();\n              onClose();\n            }\n          }}\n        >\n          ×\n        </span>\n      )}\n    </button>\n  );\n}\n"],"mappings":"0GA8BA,SAAgB,EAAQ,CACtB,QACA,OACA,SAAS,GACT,UACA,UACA,aAAa,YACb,YACA,WACA,GAAG,GACY,CACf,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,MACL,KAAK,SACL,gBAAe,EACf,gBAAe,EACf,SAAU,EAAS,EAAI,GACb,WACV,UAAW,CACT,EAAA,QAAO,IACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAU,EAAA,QAAO,UAAY,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAa,CAAA,CAE/C,IACC,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,SACL,SAAU,EACV,aAAY,EACZ,UAAW,EAAA,QAAO,SAClB,QAAU,GAAM,CAAE,EAAE,iBAAiB,CAAE,GAAS,EAChD,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,CACnB,GAAS,YAGd,IAEM,CAAA,CAEF"}
+{"version":3,"file":"TabItem.cjs","names":[],"sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { memo } from 'react';\n\nimport { Badge } from '../Badge';\nimport { Icon } from '../Icon';\n\nimport styles from './Tabs.module.css';\n\nexport interface TabItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tab label. */\n  label: string;\n  /** Optional icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this tab as the currently selected one. */\n  active?: boolean;\n  /**\n   * id of the `TabPanel` this tab controls.\n   * Sets `aria-controls` automatically.\n   */\n  panelId?: string;\n  /**\n   * When provided, a close (×) button is rendered at the trailing edge.\n   * Called when the user clicks the close button.\n   */\n  onClose?: () => void;\n  /** Accessible label for the close button. Defaults to `\"Close tab\"`. */\n  closeLabel?: string;\n  /** Optional count shown as a badge next to the label (e.g. unread messages). Values above 99 render as \"99+\". */\n  count?: number;\n  children?: ReactNode;\n}\n\n/**\n * Individual tab button inside a `TabBar`.\n */\nexport const TabItem = memo(function TabItem({\n  label,\n  icon,\n  active = false,\n  panelId,\n  onClose,\n  closeLabel = 'Close tab',\n  count,\n  className,\n  disabled,\n  ...props\n}: TabItemProps) {\n  return (\n    <button\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={active}\n      aria-controls={panelId}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      className={[\n        styles.tab,\n        active ? styles.active : null,\n        onClose ? styles.closeable : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.tabIcon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.tabLabel}>{label}</span>\n\n      {count !== undefined && (\n        <Badge className={styles.tabBadge}>{count > 99 ? '99+' : count}</Badge>\n      )}\n\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          className={styles.closeBtn}\n          onClick={(e) => {\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          ×\n        </button>\n      )}\n    </button>\n  );\n});\n"],"mappings":"6JAoCA,IAAa,GAAA,EAAA,EAAA,MAAe,SAAiB,CAC3C,QACA,OACA,SAAS,GACT,UACA,UACA,aAAa,YACb,QACA,YACA,WACA,GAAG,GACY,CACf,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,MACL,KAAK,SACL,gBAAe,EACf,gBAAe,EACf,SAAU,EAAS,EAAI,GACb,WACV,UAAW,CACT,EAAA,QAAO,IACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAU,EAAA,QAAO,UAAY,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAa,CAAA,CAE/C,IAAU,IAAA,KACT,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAW,EAAA,QAAO,kBAAW,EAAQ,GAAK,MAAQ,EAAc,CAAA,CAGxE,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAY,EACZ,UAAW,EAAA,QAAO,SAClB,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAS,WAEZ,IAEQ,CAAA,CAEJ,IAEX"}

package/dist/components/Tabs/TabItem.d.ts

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { IconDefinition } from '@gnome-ui/icons';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface TabItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Tab label. */
     label: string;
@@ -19,9 +19,11 @@ export interface TabItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     onClose?: () => void;
     /** Accessible label for the close button. Defaults to `"Close tab"`. */
     closeLabel?: string;
+    /** Optional count shown as a badge next to the label (e.g. unread messages). Values above 99 render as "99+". */
+    count?: number;
     children?: ReactNode;
 }
 /**
  * Individual tab button inside a `TabBar`.
  */
-export declare function TabItem({ label, icon, active, panelId, onClose, closeLabel, className, disabled, ...props }: TabItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const TabItem: import('react').NamedExoticComponent<TabItemProps>;

package/dist/components/Tabs/TabItem.js

@@ -1,52 +1,54 @@
-import { Icon as e } from "../Icon/Icon.js";
-import t from "./Tabs.module.css.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Badge as e } from "../Badge/Badge.js";
+import { Icon as t } from "../Icon/Icon.js";
+import n from "./Tabs.module.css.js";
+import { memo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/Tabs/TabItem.tsx
-function i({ label: i, icon: a, active: o = !1, panelId: s, onClose: c, closeLabel: l = "Close tab", className: u, disabled: d, ...f }) {
-	return /* @__PURE__ */ r("button", {
+var o = r(function({ label: r, icon: o, active: s = !1, panelId: c, onClose: l, closeLabel: u = "Close tab", count: d, className: f, disabled: p, ...m }) {
+	return /* @__PURE__ */ a("button", {
 		role: "tab",
 		type: "button",
-		"aria-selected": o,
-		"aria-controls": s,
-		tabIndex: o ? 0 : -1,
-		disabled: d,
+		"aria-selected": s,
+		"aria-controls": c,
+		tabIndex: s ? 0 : -1,
+		disabled: p,
 		className: [
-			t.tab,
-			o ? t.active : null,
-			c ? t.closeable : null,
-			u
+			n.tab,
+			s ? n.active : null,
+			l ? n.closeable : null,
+			f
 		].filter(Boolean).join(" "),
-		...f,
+		...m,
 		children: [
-			a && /* @__PURE__ */ n("span", {
-				className: t.tabIcon,
-				children: /* @__PURE__ */ n(e, {
-					icon: a,
+			o && /* @__PURE__ */ i("span", {
+				className: n.tabIcon,
+				children: /* @__PURE__ */ i(t, {
+					icon: o,
 					size: "sm",
 					"aria-hidden": !0
 				})
 			}),
-			/* @__PURE__ */ n("span", {
-				className: t.tabLabel,
-				children: i
+			/* @__PURE__ */ i("span", {
+				className: n.tabLabel,
+				children: r
 			}),
-			c && /* @__PURE__ */ n("span", {
-				role: "button",
-				tabIndex: 0,
-				"aria-label": l,
-				className: t.closeBtn,
+			d !== void 0 && /* @__PURE__ */ i(e, {
+				className: n.tabBadge,
+				children: d > 99 ? "99+" : d
+			}),
+			l && /* @__PURE__ */ i("button", {
+				type: "button",
+				"aria-label": u,
+				className: n.closeBtn,
 				onClick: (e) => {
-					e.stopPropagation(), c();
-				},
-				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), c());
+					e.stopPropagation(), l();
 				},
 				children: "×"
 			})
 		]
 	});
-}
+});
 //#endregion
-export { i as TabItem };
+export { o as TabItem };
 
 //# sourceMappingURL=TabItem.js.map

package/dist/components/Tabs/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","names":[],"sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Tabs.module.css\";\n\nexport interface TabItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tab label. */\n  label: string;\n  /** Optional icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this tab as the currently selected one. */\n  active?: boolean;\n  /**\n   * id of the `TabPanel` this tab controls.\n   * Sets `aria-controls` automatically.\n   */\n  panelId?: string;\n  /**\n   * When provided, a close (×) button is rendered at the trailing edge.\n   * Called when the user clicks the close button.\n   */\n  onClose?: () => void;\n  /** Accessible label for the close button. Defaults to `\"Close tab\"`. */\n  closeLabel?: string;\n  children?: ReactNode;\n}\n\n/**\n * Individual tab button inside a `TabBar`.\n */\nexport function TabItem({\n  label,\n  icon,\n  active = false,\n  panelId,\n  onClose,\n  closeLabel = \"Close tab\",\n  className,\n  disabled,\n  ...props\n}: TabItemProps) {\n  return (\n    <button\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={active}\n      aria-controls={panelId}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      className={[\n        styles.tab,\n        active ? styles.active : null,\n        onClose ? styles.closeable : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.tabIcon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.tabLabel}>{label}</span>\n\n      {onClose && (\n        <span\n          role=\"button\"\n          tabIndex={0}\n          aria-label={closeLabel}\n          className={styles.closeBtn}\n          onClick={(e) => { e.stopPropagation(); onClose(); }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              e.stopPropagation();\n              onClose();\n            }\n          }}\n        >\n          ×\n        </span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;AA8BA,SAAgB,EAAQ,EACtB,UACA,SACA,YAAS,IACT,YACA,YACA,gBAAa,aACb,cACA,aACA,GAAG,KACY;AACf,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,UAAU,IAAS,IAAI;EACb;EACV,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAU,EAAO,YAAY;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAfN;GAiBG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;KAAc,CAAA;IACrC,CAAA;GAET,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAa,CAAA;GAE/C,KACC,kBAAC,QAAD;IACE,MAAK;IACL,UAAU;IACV,cAAY;IACZ,WAAW,EAAO;IAClB,UAAU,MAAM;AAAuB,KAArB,EAAE,iBAAiB,EAAE,GAAS;;IAChD,YAAY,MAAM;AAChB,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACnB,GAAS;;cAGd;IAEM,CAAA;GAEF"}
+{"version":3,"file":"TabItem.js","names":[],"sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { memo } from 'react';\n\nimport { Badge } from '../Badge';\nimport { Icon } from '../Icon';\n\nimport styles from './Tabs.module.css';\n\nexport interface TabItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tab label. */\n  label: string;\n  /** Optional icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this tab as the currently selected one. */\n  active?: boolean;\n  /**\n   * id of the `TabPanel` this tab controls.\n   * Sets `aria-controls` automatically.\n   */\n  panelId?: string;\n  /**\n   * When provided, a close (×) button is rendered at the trailing edge.\n   * Called when the user clicks the close button.\n   */\n  onClose?: () => void;\n  /** Accessible label for the close button. Defaults to `\"Close tab\"`. */\n  closeLabel?: string;\n  /** Optional count shown as a badge next to the label (e.g. unread messages). Values above 99 render as \"99+\". */\n  count?: number;\n  children?: ReactNode;\n}\n\n/**\n * Individual tab button inside a `TabBar`.\n */\nexport const TabItem = memo(function TabItem({\n  label,\n  icon,\n  active = false,\n  panelId,\n  onClose,\n  closeLabel = 'Close tab',\n  count,\n  className,\n  disabled,\n  ...props\n}: TabItemProps) {\n  return (\n    <button\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={active}\n      aria-controls={panelId}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      className={[\n        styles.tab,\n        active ? styles.active : null,\n        onClose ? styles.closeable : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.tabIcon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.tabLabel}>{label}</span>\n\n      {count !== undefined && (\n        <Badge className={styles.tabBadge}>{count > 99 ? '99+' : count}</Badge>\n      )}\n\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          className={styles.closeBtn}\n          onClick={(e) => {\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          ×\n        </button>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;AAoCA,IAAa,IAAU,EAAK,SAAiB,EAC3C,UACA,SACA,YAAS,IACT,YACA,YACA,gBAAa,aACb,UACA,cACA,aACA,GAAG,KACY;AACf,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,UAAU,IAAS,IAAI;EACb;EACV,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAU,EAAO,YAAY;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAfN;GAiBG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;KAAc,CAAA;IACrC,CAAA;GAET,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAa,CAAA;GAE/C,MAAU,KAAA,KACT,kBAAC,GAAD;IAAO,WAAW,EAAO;cAAW,IAAQ,KAAK,QAAQ;IAAc,CAAA;GAGxE,KACC,kBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,WAAW,EAAO;IAClB,UAAU,MAAM;AAEd,KADA,EAAE,iBAAiB,EACnB,GAAS;;cAEZ;IAEQ,CAAA;GAEJ;;EAEX"}

package/dist/components/Tabs/TabPanel.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Tabs.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({id:n,active:r=!1,className:i,children:a,...o}){return(0,t.jsx)(`div`,{id:n,role:`tabpanel`,hidden:!r,tabIndex:0,className:[e.default.panel,i].filter(Boolean).join(` `),...o,children:a})}exports.TabPanel=n;
+const e=require(`./Tabs.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({id:n,active:r=!1,className:i,children:a,...o}){return(0,t.jsx)(`div`,{id:n,role:`tabpanel`,hidden:!r,className:[e.default.panel,i].filter(Boolean).join(` `),...o,children:a})}exports.TabPanel=n;
 //# sourceMappingURL=TabPanel.cjs.map

package/dist/components/Tabs/TabPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.cjs","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Tabs.module.css\";\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Must match the `panelId` passed to the corresponding `TabItem`. */\n  id: string;\n  /** Controls whether this panel is rendered. */\n  active?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Content panel associated with a `TabItem`.\n * Hidden panels are kept in the DOM but visually hidden.\n */\nexport function TabPanel({\n  id,\n  active = false,\n  className,\n  children,\n  ...props\n}: TabPanelProps) {\n  return (\n    <div\n      id={id}\n      role=\"tabpanel\"\n      hidden={!active}\n      tabIndex={0}\n      className={[styles.panel, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"4EAeA,SAAgB,EAAS,CACvB,KACA,SAAS,GACT,YACA,WACA,GAAG,GACa,CAChB,OACE,EAAA,EAAA,KAAC,MAAD,CACM,KACJ,KAAK,WACL,OAAQ,CAAC,EACT,SAAU,EACV,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,EAEH,WACG,CAAA"}
+{"version":3,"file":"TabPanel.cjs","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Tabs.module.css';\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Must match the `panelId` passed to the corresponding `TabItem`. */\n  id: string;\n  /** Controls whether this panel is rendered. */\n  active?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Content panel associated with a `TabItem`.\n * Hidden panels are kept in the DOM but visually hidden.\n */\nexport function TabPanel({ id, active = false, className, children, ...props }: TabPanelProps) {\n  return (\n    <div\n      id={id}\n      role=\"tabpanel\"\n      hidden={!active}\n      className={[styles.panel, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"4EAgBA,SAAgB,EAAS,CAAE,KAAI,SAAS,GAAO,YAAW,WAAU,GAAG,GAAwB,CAC7F,OACE,EAAA,EAAA,KAAC,MAAD,CACM,KACJ,KAAK,WACL,OAAQ,CAAC,EACT,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,EAEH,WACG,CAAA"}

package/dist/components/Tabs/TabPanel.js

@@ -6,7 +6,6 @@ function n({ id: n, active: r = !1, className: i, children: a, ...o }) {
 		id: n,
 		role: "tabpanel",
 		hidden: !r,
-		tabIndex: 0,
 		className: [e.panel, i].filter(Boolean).join(" "),
 		...o,
 		children: a

package/dist/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Tabs.module.css\";\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Must match the `panelId` passed to the corresponding `TabItem`. */\n  id: string;\n  /** Controls whether this panel is rendered. */\n  active?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Content panel associated with a `TabItem`.\n * Hidden panels are kept in the DOM but visually hidden.\n */\nexport function TabPanel({\n  id,\n  active = false,\n  className,\n  children,\n  ...props\n}: TabPanelProps) {\n  return (\n    <div\n      id={id}\n      role=\"tabpanel\"\n      hidden={!active}\n      tabIndex={0}\n      className={[styles.panel, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAeA,SAAgB,EAAS,EACvB,OACA,YAAS,IACT,cACA,aACA,GAAG,KACa;AAChB,QACE,kBAAC,OAAD;EACM;EACJ,MAAK;EACL,QAAQ,CAAC;EACT,UAAU;EACV,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;EAEH;EACG,CAAA"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Tabs.module.css';\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Must match the `panelId` passed to the corresponding `TabItem`. */\n  id: string;\n  /** Controls whether this panel is rendered. */\n  active?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Content panel associated with a `TabItem`.\n * Hidden panels are kept in the DOM but visually hidden.\n */\nexport function TabPanel({ id, active = false, className, children, ...props }: TabPanelProps) {\n  return (\n    <div\n      id={id}\n      role=\"tabpanel\"\n      hidden={!active}\n      className={[styles.panel, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAS,EAAE,OAAI,YAAS,IAAO,cAAW,aAAU,GAAG,KAAwB;AAC7F,QACE,kBAAC,OAAD;EACM;EACJ,MAAK;EACL,QAAQ,CAAC;EACT,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;EAEH;EACG,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={bar:`_bar_12ars_3`,list:`_list_12ars_10`,tab:`_tab_12ars_26`,active:`_active_12ars_81`,tabIcon:`_tabIcon_12ars_102`,tabLabel:`_tabLabel_12ars_110`,closeBtn:`_closeBtn_12ars_119`,panel:`_panel_12ars_148`,inline:`_inline_12ars_158`};exports.default=e;
+var e={bar:`_bar_1faeq_3`,list:`_list_1faeq_10`,tab:`_tab_1faeq_26`,active:`_active_1faeq_81`,tabIcon:`_tabIcon_1faeq_102`,tabLabel:`_tabLabel_1faeq_110`,tabBadge:`_tabBadge_1faeq_119`,closeBtn:`_closeBtn_1faeq_126`,panel:`_panel_1faeq_164`,inline:`_inline_1faeq_174`};exports.default=e;
 //# sourceMappingURL=Tabs.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.css.cjs","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":["/* ─── Bar (outer wrapper) ──────────────────────────────────────────────────── */\n\n.bar {\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Tab list ─────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: stretch;\n  overflow-x: auto;\n  scrollbar-width: none;\n  padding: 0 var(--gnome-space-1, 6px);\n  gap: 2px;\n  min-height: 40px;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n/* ─── Tab button ───────────────────────────────────────────────────────────── */\n\n.tab {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 80px;\n  max-width: 200px;\n  white-space: nowrap;\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-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.7;\n\n  border-radius: var(--gnome-radius-md, 8px) var(--gnome-radius-md, 8px) 0 0;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: var(--gnome-space-2, 12px);\n  right: var(--gnome-space-2, 12px);\n  height: 2px;\n  border-radius: 1px 1px 0 0;\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab:hover {\n  opacity: 1;\n  background-color: var(--gnome-hover-overlay);\n}\n\n.tab:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active tab ───────────────────────────────────────────────────────────── */\n\n.active {\n  opacity: 1;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  background-color: var(--gnome-active-overlay);\n}\n\n.active::after {\n  opacity: 1;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-headerbar-bg-color, #ebebeb),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Icon inside tab ──────────────────────────────────────────────────────── */\n\n.tabIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Label inside tab ─────────────────────────────────────────────────────── */\n\n.tabLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Close button ─────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  font-size: 1rem;\n  line-height: 1;\n  opacity: 0.5;\n  margin-left: 2px;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n              background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  opacity: 1;\n  background-color: var(--gnome-active-overlay);\n}\n\n.closeBtn:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n/* ─── Panel ────────────────────────────────────────────────────────────────── */\n\n.panel {\n  outline: none;\n}\n\n.panel:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Inline variant ───────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.inline .tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .bar {\n    border-bottom-width: 2px;\n  }\n\n  .tab::after {\n    height: 3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .tab,\n  .tab::after,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tabs.module.css.cjs","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":["/* ─── Bar (outer wrapper) ──────────────────────────────────────────────────── */\n\n.bar {\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Tab list ─────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: stretch;\n  overflow-x: auto;\n  scrollbar-width: none;\n  padding: 0 var(--gnome-space-1, 6px);\n  gap: 2px;\n  min-height: 40px;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n/* ─── Tab button ───────────────────────────────────────────────────────────── */\n\n.tab {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 80px;\n  max-width: 200px;\n  white-space: nowrap;\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-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.7;\n\n  border-radius: var(--gnome-radius-md, 8px) var(--gnome-radius-md, 8px) 0 0;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: var(--gnome-space-2, 12px);\n  right: var(--gnome-space-2, 12px);\n  height: 2px;\n  border-radius: 1px 1px 0 0;\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab:hover {\n  opacity: 1;\n  background-color: var(--gnome-hover-overlay);\n}\n\n.tab:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active tab ───────────────────────────────────────────────────────────── */\n\n.active {\n  opacity: 1;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  background-color: var(--gnome-active-overlay);\n}\n\n.active::after {\n  opacity: 1;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-headerbar-bg-color, #ebebeb),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Icon inside tab ──────────────────────────────────────────────────────── */\n\n.tabIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Label inside tab ─────────────────────────────────────────────────────── */\n\n.tabLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Badge inside tab ─────────────────────────────────────────────────────── */\n\n.tabBadge {\n  margin-inline-start: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Close button ─────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  padding: 0;\n\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  font-size: 1rem;\n  line-height: 1;\n  opacity: 0.5;\n  margin-left: 2px;\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  opacity: 1;\n  background-color: var(--gnome-active-overlay);\n}\n\n.closeBtn:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n/* ─── Panel ────────────────────────────────────────────────────────────────── */\n\n.panel {\n  outline: none;\n}\n\n.panel:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Inline variant ───────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.inline .tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .bar {\n    border-bottom-width: 2px;\n  }\n\n  .tab::after {\n    height: 3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .tab,\n  .tab::after,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,13 +1,14 @@
 var e = {
-	bar: "_bar_12ars_3",
-	list: "_list_12ars_10",
-	tab: "_tab_12ars_26",
-	active: "_active_12ars_81",
-	tabIcon: "_tabIcon_12ars_102",
-	tabLabel: "_tabLabel_12ars_110",
-	closeBtn: "_closeBtn_12ars_119",
-	panel: "_panel_12ars_148",
-	inline: "_inline_12ars_158"
+	bar: "_bar_1faeq_3",
+	list: "_list_1faeq_10",
+	tab: "_tab_1faeq_26",
+	active: "_active_1faeq_81",
+	tabIcon: "_tabIcon_1faeq_102",
+	tabLabel: "_tabLabel_1faeq_110",
+	tabBadge: "_tabBadge_1faeq_119",
+	closeBtn: "_closeBtn_1faeq_126",
+	panel: "_panel_1faeq_164",
+	inline: "_inline_1faeq_174"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.css.js","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":["/* ─── Bar (outer wrapper) ──────────────────────────────────────────────────── */\n\n.bar {\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Tab list ─────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: stretch;\n  overflow-x: auto;\n  scrollbar-width: none;\n  padding: 0 var(--gnome-space-1, 6px);\n  gap: 2px;\n  min-height: 40px;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n/* ─── Tab button ───────────────────────────────────────────────────────────── */\n\n.tab {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 80px;\n  max-width: 200px;\n  white-space: nowrap;\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-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.7;\n\n  border-radius: var(--gnome-radius-md, 8px) var(--gnome-radius-md, 8px) 0 0;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: var(--gnome-space-2, 12px);\n  right: var(--gnome-space-2, 12px);\n  height: 2px;\n  border-radius: 1px 1px 0 0;\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab:hover {\n  opacity: 1;\n  background-color: var(--gnome-hover-overlay);\n}\n\n.tab:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active tab ───────────────────────────────────────────────────────────── */\n\n.active {\n  opacity: 1;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  background-color: var(--gnome-active-overlay);\n}\n\n.active::after {\n  opacity: 1;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-headerbar-bg-color, #ebebeb),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Icon inside tab ──────────────────────────────────────────────────────── */\n\n.tabIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Label inside tab ─────────────────────────────────────────────────────── */\n\n.tabLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Close button ─────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  font-size: 1rem;\n  line-height: 1;\n  opacity: 0.5;\n  margin-left: 2px;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n              background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  opacity: 1;\n  background-color: var(--gnome-active-overlay);\n}\n\n.closeBtn:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n/* ─── Panel ────────────────────────────────────────────────────────────────── */\n\n.panel {\n  outline: none;\n}\n\n.panel:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Inline variant ───────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.inline .tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .bar {\n    border-bottom-width: 2px;\n  }\n\n  .tab::after {\n    height: 3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .tab,\n  .tab::after,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tabs.module.css.js","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":["/* ─── Bar (outer wrapper) ──────────────────────────────────────────────────── */\n\n.bar {\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Tab list ─────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: stretch;\n  overflow-x: auto;\n  scrollbar-width: none;\n  padding: 0 var(--gnome-space-1, 6px);\n  gap: 2px;\n  min-height: 40px;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n/* ─── Tab button ───────────────────────────────────────────────────────────── */\n\n.tab {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 80px;\n  max-width: 200px;\n  white-space: nowrap;\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-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.7;\n\n  border-radius: var(--gnome-radius-md, 8px) var(--gnome-radius-md, 8px) 0 0;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: var(--gnome-space-2, 12px);\n  right: var(--gnome-space-2, 12px);\n  height: 2px;\n  border-radius: 1px 1px 0 0;\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tab:hover {\n  opacity: 1;\n  background-color: var(--gnome-hover-overlay);\n}\n\n.tab:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active tab ───────────────────────────────────────────────────────────── */\n\n.active {\n  opacity: 1;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  background-color: var(--gnome-active-overlay);\n}\n\n.active::after {\n  opacity: 1;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-headerbar-bg-color, #ebebeb),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Icon inside tab ──────────────────────────────────────────────────────── */\n\n.tabIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Label inside tab ─────────────────────────────────────────────────────── */\n\n.tabLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Badge inside tab ─────────────────────────────────────────────────────── */\n\n.tabBadge {\n  margin-inline-start: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Close button ─────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  padding: 0;\n\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  font-size: 1rem;\n  line-height: 1;\n  opacity: 0.5;\n  margin-left: 2px;\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  opacity: 1;\n  background-color: var(--gnome-active-overlay);\n}\n\n.closeBtn:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n/* ─── Panel ────────────────────────────────────────────────────────────────── */\n\n.panel {\n  outline: none;\n}\n\n.panel:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Inline variant ───────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.inline .tab:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .bar {\n    border-bottom-width: 2px;\n  }\n\n  .tab::after {\n    height: 3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .tab,\n  .tab::after,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
-export { TabBar } from './TabBar';
 export type { TabBarProps } from './TabBar';
-export { TabItem } from './TabItem';
+export { TabBar } from './TabBar';
 export type { TabItemProps } from './TabItem';
-export { TabPanel } from './TabPanel';
+export { TabItem } from './TabItem';
 export type { TabPanelProps } from './TabPanel';
+export { TabPanel } from './TabPanel';

package/dist/components/TerminalView/TerminalView.cjs

@@ -1,2 +1,2 @@
-const e=require(`./TerminalView.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({lines:r,variant:i=`default`,maxLines:a=500,autoScroll:o=!0,className:s,...c}){let l=(0,t.useRef)(null),u=r.slice(-a);return(0,t.useEffect)(()=>{o&&l.current?.scrollIntoView({block:`nearest`})},[u.length,o]),(0,n.jsx)(`div`,{className:[e.default.terminal,e.default[i],s].filter(Boolean).join(` `),...c,children:(0,n.jsxs)(`pre`,{className:e.default.pre,children:[u.map((t,r)=>(0,n.jsx)(`div`,{className:e.default.line,children:t},r)),(0,n.jsx)(`div`,{ref:l})]})})}exports.TerminalView=r;
+const e=require(`./TerminalView.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({lines:r,variant:i=`default`,maxLines:a=500,autoScroll:o=!0,className:s,...c}){let l=(0,t.useRef)(null),u=r.slice(-a);return(0,t.useEffect)(()=>{o&&l.current?.scrollIntoView({block:`nearest`})},[o]),(0,n.jsx)(`div`,{className:[e.default.terminal,e.default[i],s].filter(Boolean).join(` `),...c,children:(0,n.jsxs)(`pre`,{className:e.default.pre,children:[u.map((t,r)=>(0,n.jsx)(`div`,{className:e.default.line,children:t},r)),(0,n.jsx)(`div`,{ref:l})]})})}exports.TerminalView=r;
 //# sourceMappingURL=TerminalView.cjs.map

package/dist/components/TerminalView/TerminalView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TerminalView.cjs","names":[],"sources":["../../../src/components/TerminalView/TerminalView.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./TerminalView.module.css\";\n\nexport type TerminalVariant = \"default\" | \"success\" | \"warning\" | \"destructive\";\n\nexport interface TerminalViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Lines of text to display. */\n  lines: string[];\n  /** Colorize text based on semantic meaning. Defaults to `\"default\"`. */\n  variant?: TerminalVariant;\n  /** Maximum number of lines to keep in the buffer. Defaults to `500`. */\n  maxLines?: number;\n  /** Automatically scroll to the latest line when content changes. Defaults to `true`. */\n  autoScroll?: boolean;\n}\n\nexport function TerminalView({\n  lines,\n  variant = \"default\",\n  maxLines = 500,\n  autoScroll = true,\n  className,\n  ...props\n}: TerminalViewProps) {\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const visibleLines = lines.slice(-maxLines);\n\n  useEffect(() => {\n    if (autoScroll) {\n      bottomRef.current?.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [visibleLines.length, autoScroll]);\n\n  return (\n    <div\n      className={[styles.terminal, styles[variant], className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <pre className={styles.pre}>\n        {visibleLines.map((line, i) => (\n          <div key={i} className={styles.line}>\n            {line}\n          </div>\n        ))}\n        <div ref={bottomRef} />\n      </pre>\n    </div>\n  );\n}\n"],"mappings":"uGAoBA,SAAgB,EAAa,CAC3B,QACA,UAAU,UACV,WAAW,IACX,aAAa,GACb,YACA,GAAG,GACiB,CACpB,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,EAAe,EAAM,MAAM,CAAC,EAAS,CAQ3C,OANA,EAAA,EAAA,eAAgB,CACV,GACF,EAAU,SAAS,eAAe,CAAE,MAAO,UAAW,CAAC,EAExD,CAAC,EAAa,OAAQ,EAAW,CAAC,EAGnC,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAU,CACrD,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,YAEJ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,aAAvB,CACG,EAAa,KAAK,EAAM,KACvB,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,cAC5B,EACG,CAFI,EAEJ,CACN,EACF,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAa,CAAA,CACnB,GACF,CAAA"}
+{"version":3,"file":"TerminalView.cjs","names":[],"sources":["../../../src/components/TerminalView/TerminalView.tsx"],"sourcesContent":["import { type HTMLAttributes, useEffect, useRef } from 'react';\n\nimport styles from './TerminalView.module.css';\n\nexport type TerminalVariant = 'default' | 'success' | 'warning' | 'destructive';\n\nexport interface TerminalViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Lines of text to display. */\n  lines: string[];\n  /** Colorize text based on semantic meaning. Defaults to `\"default\"`. */\n  variant?: TerminalVariant;\n  /** Maximum number of lines to keep in the buffer. Defaults to `500`. */\n  maxLines?: number;\n  /** Automatically scroll to the latest line when content changes. Defaults to `true`. */\n  autoScroll?: boolean;\n}\n\nexport function TerminalView({\n  lines,\n  variant = 'default',\n  maxLines = 500,\n  autoScroll = true,\n  className,\n  ...props\n}: TerminalViewProps) {\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const visibleLines = lines.slice(-maxLines);\n\n  useEffect(() => {\n    if (autoScroll) {\n      bottomRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n  }, [autoScroll]);\n\n  return (\n    <div\n      className={[styles.terminal, styles[variant], className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <pre className={styles.pre}>\n        {visibleLines.map((line, i) => (\n          <div key={i} className={styles.line}>\n            {line}\n          </div>\n        ))}\n        <div ref={bottomRef} />\n      </pre>\n    </div>\n  );\n}\n"],"mappings":"uGAiBA,SAAgB,EAAa,CAC3B,QACA,UAAU,UACV,WAAW,IACX,aAAa,GACb,YACA,GAAG,GACiB,CACpB,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,EAAe,EAAM,MAAM,CAAC,EAAS,CAQ3C,OANA,EAAA,EAAA,eAAgB,CACV,GACF,EAAU,SAAS,eAAe,CAAE,MAAO,UAAW,CAAC,EAExD,CAAC,EAAW,CAAC,EAGd,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAClF,GAAI,YAEJ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,aAAvB,CACG,EAAa,KAAK,EAAM,KACvB,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,cAC5B,EACG,CAFI,EAEJ,CACN,EACF,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAa,CAAA,CACnB,GACF,CAAA"}

package/dist/components/TerminalView/TerminalView.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type TerminalVariant = "default" | "success" | "warning" | "destructive";
+export type TerminalVariant = 'default' | 'success' | 'warning' | 'destructive';
 export interface TerminalViewProps extends HTMLAttributes<HTMLDivElement> {
     /** Lines of text to display. */
     lines: string[];

package/dist/components/TerminalView/TerminalView.js

@@ -6,7 +6,7 @@ function a({ lines: a, variant: o = "default", maxLines: s = 500, autoScroll: c
 	let d = n(null), f = a.slice(-s);
 	return t(() => {
 		c && d.current?.scrollIntoView({ block: "nearest" });
-	}, [f.length, c]), /* @__PURE__ */ r("div", {
+	}, [c]), /* @__PURE__ */ r("div", {
 		className: [
 			e.terminal,
 			e[o],

package/dist/components/TerminalView/TerminalView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TerminalView.js","names":[],"sources":["../../../src/components/TerminalView/TerminalView.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./TerminalView.module.css\";\n\nexport type TerminalVariant = \"default\" | \"success\" | \"warning\" | \"destructive\";\n\nexport interface TerminalViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Lines of text to display. */\n  lines: string[];\n  /** Colorize text based on semantic meaning. Defaults to `\"default\"`. */\n  variant?: TerminalVariant;\n  /** Maximum number of lines to keep in the buffer. Defaults to `500`. */\n  maxLines?: number;\n  /** Automatically scroll to the latest line when content changes. Defaults to `true`. */\n  autoScroll?: boolean;\n}\n\nexport function TerminalView({\n  lines,\n  variant = \"default\",\n  maxLines = 500,\n  autoScroll = true,\n  className,\n  ...props\n}: TerminalViewProps) {\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const visibleLines = lines.slice(-maxLines);\n\n  useEffect(() => {\n    if (autoScroll) {\n      bottomRef.current?.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [visibleLines.length, autoScroll]);\n\n  return (\n    <div\n      className={[styles.terminal, styles[variant], className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <pre className={styles.pre}>\n        {visibleLines.map((line, i) => (\n          <div key={i} className={styles.line}>\n            {line}\n          </div>\n        ))}\n        <div ref={bottomRef} />\n      </pre>\n    </div>\n  );\n}\n"],"mappings":";;;;AAoBA,SAAgB,EAAa,EAC3B,UACA,aAAU,WACV,cAAW,KACX,gBAAa,IACb,cACA,GAAG,KACiB;CACpB,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAe,EAAM,MAAM,CAAC,EAAS;AAQ3C,QANA,QAAgB;AACd,EAAI,KACF,EAAU,SAAS,eAAe,EAAE,OAAO,WAAW,CAAC;IAExD,CAAC,EAAa,QAAQ,EAAW,CAAC,EAGnC,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAU,EAAO;GAAU;GAAU,CACrD,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,EAAa,KAAK,GAAM,MACvB,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;IACG,EAFI,EAEJ,CACN,EACF,kBAAC,OAAD,EAAK,KAAK,GAAa,CAAA,CACnB;;EACF,CAAA"}
+{"version":3,"file":"TerminalView.js","names":[],"sources":["../../../src/components/TerminalView/TerminalView.tsx"],"sourcesContent":["import { type HTMLAttributes, useEffect, useRef } from 'react';\n\nimport styles from './TerminalView.module.css';\n\nexport type TerminalVariant = 'default' | 'success' | 'warning' | 'destructive';\n\nexport interface TerminalViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Lines of text to display. */\n  lines: string[];\n  /** Colorize text based on semantic meaning. Defaults to `\"default\"`. */\n  variant?: TerminalVariant;\n  /** Maximum number of lines to keep in the buffer. Defaults to `500`. */\n  maxLines?: number;\n  /** Automatically scroll to the latest line when content changes. Defaults to `true`. */\n  autoScroll?: boolean;\n}\n\nexport function TerminalView({\n  lines,\n  variant = 'default',\n  maxLines = 500,\n  autoScroll = true,\n  className,\n  ...props\n}: TerminalViewProps) {\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const visibleLines = lines.slice(-maxLines);\n\n  useEffect(() => {\n    if (autoScroll) {\n      bottomRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n  }, [autoScroll]);\n\n  return (\n    <div\n      className={[styles.terminal, styles[variant], className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <pre className={styles.pre}>\n        {visibleLines.map((line, i) => (\n          <div key={i} className={styles.line}>\n            {line}\n          </div>\n        ))}\n        <div ref={bottomRef} />\n      </pre>\n    </div>\n  );\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAa,EAC3B,UACA,aAAU,WACV,cAAW,KACX,gBAAa,IACb,cACA,GAAG,KACiB;CACpB,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAe,EAAM,MAAM,CAAC,EAAS;AAQ3C,QANA,QAAgB;AACd,EAAI,KACF,EAAU,SAAS,eAAe,EAAE,OAAO,WAAW,CAAC;IAExD,CAAC,EAAW,CAAC,EAGd,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAU,EAAO;GAAU;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAClF,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,EAAa,KAAK,GAAM,MACvB,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;IACG,EAFI,EAEJ,CACN,EACF,kBAAC,OAAD,EAAK,KAAK,GAAa,CAAA,CACnB;;EACF,CAAA"}

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

@@ -1,2 +1,2 @@
+export type { TerminalVariant, TerminalViewProps } from './TerminalView';
 export { TerminalView } from './TerminalView';
-export type { TerminalViewProps, TerminalVariant } from './TerminalView';

package/dist/components/Text/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Text.module.css\";\n\nexport type TextVariant =\n  | \"large-title\"\n  | \"title-1\"\n  | \"title-2\"\n  | \"title-3\"\n  | \"title-4\"\n  | \"heading\"\n  | \"body\"\n  | \"document\"\n  | \"caption\"\n  | \"caption-heading\"\n  | \"monospace\"\n  | \"numeric\";\n\nexport type TextColor =\n  | \"default\"\n  | \"dim\"\n  | \"accent\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"error\";\n\n/** Default HTML element rendered for each variant */\nconst defaultElement: Record<TextVariant, ElementType> = {\n  \"large-title\": \"h1\",\n  \"title-1\": \"h1\",\n  \"title-2\": \"h2\",\n  \"title-3\": \"h3\",\n  \"title-4\": \"h4\",\n  heading: \"h3\",\n  body: \"p\",\n  document: \"p\",\n  caption: \"span\",\n  \"caption-heading\": \"span\",\n  monospace: \"code\",\n  numeric: \"span\",\n};\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Typography style. Mirrors Adwaita / GNOME HIG text styles. */\n  variant?: TextVariant;\n  /** Semantic color. */\n  color?: TextColor;\n  /** Override the rendered HTML element. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\n/**\n * Text component following GNOME Human Interface Guidelines typography styles.\n *\n * Variants map directly to Adwaita style classes:\n * `large-title`, `title-1`–`title-4`, `heading`, `body`, `document`,\n * `caption`, `caption-heading`, `monospace`, `numeric`.\n *\n * @see https://developer.gnome.org/hig/guidelines/typography.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html\n */\nexport function Text({\n  variant = \"body\",\n  color = \"default\",\n  as,\n  className,\n  children,\n  ...props\n}: TextProps) {\n  const Tag = as ?? defaultElement[variant];\n\n  const classes = [\n    styles.text,\n    styles[variant],\n    styles[`color-${color}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Tag className={classes} {...props}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"4EA2BA,IAAM,EAAmD,CACvD,cAAe,KACf,UAAW,KACX,UAAW,KACX,UAAW,KACX,UAAW,KACX,QAAS,KACT,KAAM,IACN,SAAU,IACV,QAAS,OACT,kBAAmB,OACnB,UAAW,OACX,QAAS,OACV,CAsBD,SAAgB,EAAK,CACnB,UAAU,OACV,QAAQ,UACR,KACA,YACA,WACA,GAAG,GACS,CAYZ,OACE,EAAA,EAAA,KAZU,GAAM,EAAe,GAY/B,CAAK,UAVS,CACd,EAAA,QAAO,KACP,EAAA,QAAO,GACP,EAAA,QAAO,SAAS,KAChB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAI,EAC1B,WACG,CAAA"}
+{"version":3,"file":"Text.cjs","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Text.module.css';\n\nexport type TextVariant =\n  | 'large-title'\n  | 'title-1'\n  | 'title-2'\n  | 'title-3'\n  | 'title-4'\n  | 'heading'\n  | 'body'\n  | 'document'\n  | 'caption'\n  | 'caption-heading'\n  | 'monospace'\n  | 'numeric';\n\nexport type TextColor =\n  | 'default'\n  | 'dim'\n  | 'accent'\n  | 'destructive'\n  | 'success'\n  | 'warning'\n  | 'error';\n\n/** Default HTML element rendered for each variant */\nconst defaultElement: Record<TextVariant, ElementType> = {\n  'large-title': 'h1',\n  'title-1': 'h1',\n  'title-2': 'h2',\n  'title-3': 'h3',\n  'title-4': 'h4',\n  heading: 'h3',\n  body: 'p',\n  document: 'p',\n  caption: 'span',\n  'caption-heading': 'span',\n  monospace: 'code',\n  numeric: 'span',\n};\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Typography style. Mirrors Adwaita / GNOME HIG text styles. */\n  variant?: TextVariant;\n  /** Semantic color. */\n  color?: TextColor;\n  /** Override the rendered HTML element. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\n/**\n * Text component following GNOME Human Interface Guidelines typography styles.\n *\n * Variants map directly to Adwaita style classes:\n * `large-title`, `title-1`–`title-4`, `heading`, `body`, `document`,\n * `caption`, `caption-heading`, `monospace`, `numeric`.\n *\n * @see https://developer.gnome.org/hig/guidelines/typography.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html\n */\nexport function Text({\n  variant = 'body',\n  color = 'default',\n  as,\n  className,\n  children,\n  ...props\n}: TextProps) {\n  const Tag = as ?? defaultElement[variant];\n\n  const classes = [styles.text, styles[variant], styles[`color-${color}`], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...props}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"4EA4BA,IAAM,EAAmD,CACvD,cAAe,KACf,UAAW,KACX,UAAW,KACX,UAAW,KACX,UAAW,KACX,QAAS,KACT,KAAM,IACN,SAAU,IACV,QAAS,OACT,kBAAmB,OACnB,UAAW,OACX,QAAS,OACV,CAsBD,SAAgB,EAAK,CACnB,UAAU,OACV,QAAQ,UACR,KACA,YACA,WACA,GAAG,GACS,CAOZ,OACE,EAAA,EAAA,KAPU,GAAM,EAAe,GAO/B,CAAK,UALS,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,GAAU,EAAA,QAAO,SAAS,KAAU,EAAU,CAChF,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAI,EAC1B,WACG,CAAA"}

package/dist/components/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, HTMLAttributes, ReactNode } from 'react';
-export type TextVariant = "large-title" | "title-1" | "title-2" | "title-3" | "title-4" | "heading" | "body" | "document" | "caption" | "caption-heading" | "monospace" | "numeric";
-export type TextColor = "default" | "dim" | "accent" | "destructive" | "success" | "warning" | "error";
+export type TextVariant = 'large-title' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'heading' | 'body' | 'document' | 'caption' | 'caption-heading' | 'monospace' | 'numeric';
+export type TextColor = 'default' | 'dim' | 'accent' | 'destructive' | 'success' | 'warning' | 'error';
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     /** Typography style. Mirrors Adwaita / GNOME HIG text styles. */
     variant?: TextVariant;

package/dist/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Text.module.css\";\n\nexport type TextVariant =\n  | \"large-title\"\n  | \"title-1\"\n  | \"title-2\"\n  | \"title-3\"\n  | \"title-4\"\n  | \"heading\"\n  | \"body\"\n  | \"document\"\n  | \"caption\"\n  | \"caption-heading\"\n  | \"monospace\"\n  | \"numeric\";\n\nexport type TextColor =\n  | \"default\"\n  | \"dim\"\n  | \"accent\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"error\";\n\n/** Default HTML element rendered for each variant */\nconst defaultElement: Record<TextVariant, ElementType> = {\n  \"large-title\": \"h1\",\n  \"title-1\": \"h1\",\n  \"title-2\": \"h2\",\n  \"title-3\": \"h3\",\n  \"title-4\": \"h4\",\n  heading: \"h3\",\n  body: \"p\",\n  document: \"p\",\n  caption: \"span\",\n  \"caption-heading\": \"span\",\n  monospace: \"code\",\n  numeric: \"span\",\n};\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Typography style. Mirrors Adwaita / GNOME HIG text styles. */\n  variant?: TextVariant;\n  /** Semantic color. */\n  color?: TextColor;\n  /** Override the rendered HTML element. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\n/**\n * Text component following GNOME Human Interface Guidelines typography styles.\n *\n * Variants map directly to Adwaita style classes:\n * `large-title`, `title-1`–`title-4`, `heading`, `body`, `document`,\n * `caption`, `caption-heading`, `monospace`, `numeric`.\n *\n * @see https://developer.gnome.org/hig/guidelines/typography.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html\n */\nexport function Text({\n  variant = \"body\",\n  color = \"default\",\n  as,\n  className,\n  children,\n  ...props\n}: TextProps) {\n  const Tag = as ?? defaultElement[variant];\n\n  const classes = [\n    styles.text,\n    styles[variant],\n    styles[`color-${color}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Tag className={classes} {...props}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";;;AA2BA,IAAM,IAAmD;CACvD,eAAe;CACf,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,SAAS;CACT,mBAAmB;CACnB,WAAW;CACX,SAAS;CACV;AAsBD,SAAgB,EAAK,EACnB,aAAU,QACV,WAAQ,WACR,OACA,cACA,aACA,GAAG,KACS;AAYZ,QACE,kBAZU,KAAM,EAAe,IAY/B;EAAK,WAVS;GACd,EAAO;GACP,EAAO;GACP,EAAO,SAAS;GAChB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAI;EAC1B;EACG,CAAA"}
+{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Text.module.css';\n\nexport type TextVariant =\n  | 'large-title'\n  | 'title-1'\n  | 'title-2'\n  | 'title-3'\n  | 'title-4'\n  | 'heading'\n  | 'body'\n  | 'document'\n  | 'caption'\n  | 'caption-heading'\n  | 'monospace'\n  | 'numeric';\n\nexport type TextColor =\n  | 'default'\n  | 'dim'\n  | 'accent'\n  | 'destructive'\n  | 'success'\n  | 'warning'\n  | 'error';\n\n/** Default HTML element rendered for each variant */\nconst defaultElement: Record<TextVariant, ElementType> = {\n  'large-title': 'h1',\n  'title-1': 'h1',\n  'title-2': 'h2',\n  'title-3': 'h3',\n  'title-4': 'h4',\n  heading: 'h3',\n  body: 'p',\n  document: 'p',\n  caption: 'span',\n  'caption-heading': 'span',\n  monospace: 'code',\n  numeric: 'span',\n};\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** Typography style. Mirrors Adwaita / GNOME HIG text styles. */\n  variant?: TextVariant;\n  /** Semantic color. */\n  color?: TextColor;\n  /** Override the rendered HTML element. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\n/**\n * Text component following GNOME Human Interface Guidelines typography styles.\n *\n * Variants map directly to Adwaita style classes:\n * `large-title`, `title-1`–`title-4`, `heading`, `body`, `document`,\n * `caption`, `caption-heading`, `monospace`, `numeric`.\n *\n * @see https://developer.gnome.org/hig/guidelines/typography.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html\n */\nexport function Text({\n  variant = 'body',\n  color = 'default',\n  as,\n  className,\n  children,\n  ...props\n}: TextProps) {\n  const Tag = as ?? defaultElement[variant];\n\n  const classes = [styles.text, styles[variant], styles[`color-${color}`], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...props}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";;;AA4BA,IAAM,IAAmD;CACvD,eAAe;CACf,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,SAAS;CACT,mBAAmB;CACnB,WAAW;CACX,SAAS;CACV;AAsBD,SAAgB,EAAK,EACnB,aAAU,QACV,WAAQ,WACR,OACA,cACA,aACA,GAAG,KACS;AAOZ,QACE,kBAPU,KAAM,EAAe,IAO/B;EAAK,WALS;GAAC,EAAO;GAAM,EAAO;GAAU,EAAO,SAAS;GAAU;GAAU,CAChF,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAI;EAC1B;EACG,CAAA"}

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

@@ -1,2 +1,2 @@
+export type { TextColor, TextProps, TextVariant } from './Text';
 export { Text } from './Text';
-export type { TextProps, TextVariant, TextColor } from './Text';

package/dist/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { useId, type InputHTMLAttributes } from \"react\";\nimport styles from \"./TextField.module.css\";\n\nexport interface TextFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"id\"> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport function TextField({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(\" \")}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[\n          styles.input,\n          error ? styles.errorInput : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"oGAyBA,SAAgB,EAAU,CACxB,QACA,aACA,QACA,GAAI,EACJ,YACA,WACA,GAAG,GACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAgB,CAChB,EAAK,GAAU,EACf,EAAS,GAAG,EAAG,OAErB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,QAAS,EAAW,EAAA,QAAO,SAAW,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAA7F,CACG,IACC,EAAA,EAAA,KAAC,QAAD,CAAO,QAAS,EAAI,UAAW,EAAA,QAAO,eACnC,EACK,CAAA,EAGV,EAAA,EAAA,KAAC,QAAD,CACM,KACM,WACV,mBAAkB,GAAS,EAAa,EAAS,IAAA,GACjD,eAAc,EAAQ,GAAO,IAAA,GAC7B,UAAW,CACT,EAAA,QAAO,MACP,EAAQ,EAAA,QAAO,WAAa,KAC5B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,EACJ,CAAA,EAEA,GAAS,KACT,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,KAAM,EAAQ,EAAA,QAAO,UAAY,KAAK,CACtD,OAAO,QAAQ,CACf,KAAK,IAAI,UAEX,GAAS,EACL,CAAA,CAEL"}
+{"version":3,"file":"TextField.cjs","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useId } from 'react';\n\nimport styles from './TextField.module.css';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport function TextField({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(' ')}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[styles.input, error ? styles.errorInput : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null].filter(Boolean).join(' ')}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"oGAyBA,SAAgB,EAAU,CACxB,QACA,aACA,QACA,GAAI,EACJ,YACA,WACA,GAAG,GACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAgB,CAChB,EAAK,GAAU,EACf,EAAS,GAAG,EAAG,OAErB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,QAAS,EAAW,EAAA,QAAO,SAAW,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAA7F,CACG,IACC,EAAA,EAAA,KAAC,QAAD,CAAO,QAAS,EAAI,UAAW,EAAA,QAAO,eACnC,EACK,CAAA,EAGV,EAAA,EAAA,KAAC,QAAD,CACM,KACM,WACV,mBAAkB,GAAS,EAAa,EAAS,IAAA,GACjD,eAAc,EAAQ,GAAO,IAAA,GAC7B,UAAW,CAAC,EAAA,QAAO,MAAO,EAAQ,EAAA,QAAO,WAAa,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,EACJ,CAAA,EAEA,GAAS,KACT,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,KAAM,EAAQ,EAAA,QAAO,UAAY,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAElF,GAAS,EACL,CAAA,CAEL"}

package/dist/components/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "id"> {
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {
     /** Visible label rendered above the input. */
     label?: string;
     /** Helper text rendered below the input. Hidden when `error` is set. */

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { useId, type InputHTMLAttributes } from \"react\";\nimport styles from \"./TextField.module.css\";\n\nexport interface TextFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"id\"> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport function TextField({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(\" \")}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[\n          styles.input,\n          error ? styles.errorInput : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,SAAgB,EAAU,EACxB,UACA,eACA,UACA,IAAI,GACJ,cACA,aACA,GAAG,KACc;CACjB,IAAM,IAAS,GAAO,EAChB,IAAK,KAAU,GACf,IAAS,GAAG,EAAG;AAErB,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,SAAS,IAAW,EAAO,WAAW,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7F;GACG,KACC,kBAAC,SAAD;IAAO,SAAS;IAAI,WAAW,EAAO;cACnC;IACK,CAAA;GAGV,kBAAC,SAAD;IACM;IACM;IACV,oBAAkB,KAAS,IAAa,IAAS,KAAA;IACjD,gBAAc,IAAQ,KAAO,KAAA;IAC7B,WAAW;KACT,EAAO;KACP,IAAQ,EAAO,aAAa;KAC5B;KACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;IACJ,CAAA;IAEA,KAAS,MACT,kBAAC,QAAD;IACE,IAAI;IACJ,WAAW,CAAC,EAAO,MAAM,IAAQ,EAAO,YAAY,KAAK,CACtD,OAAO,QAAQ,CACf,KAAK,IAAI;cAEX,KAAS;IACL,CAAA;GAEL"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useId } from 'react';\n\nimport styles from './TextField.module.css';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport function TextField({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(' ')}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[styles.input, error ? styles.errorInput : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null].filter(Boolean).join(' ')}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,SAAgB,EAAU,EACxB,UACA,eACA,UACA,IAAI,GACJ,cACA,aACA,GAAG,KACc;CACjB,IAAM,IAAS,GAAO,EAChB,IAAK,KAAU,GACf,IAAS,GAAG,EAAG;AAErB,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,SAAS,IAAW,EAAO,WAAW,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7F;GACG,KACC,kBAAC,SAAD;IAAO,SAAS;IAAI,WAAW,EAAO;cACnC;IACK,CAAA;GAGV,kBAAC,SAAD;IACM;IACM;IACV,oBAAkB,KAAS,IAAa,IAAS,KAAA;IACjD,gBAAc,IAAQ,KAAO,KAAA;IAC7B,WAAW;KAAC,EAAO;KAAO,IAAQ,EAAO,aAAa;KAAM;KAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;IACJ,CAAA;IAEA,KAAS,MACT,kBAAC,QAAD;IACE,IAAI;IACJ,WAAW,CAAC,EAAO,MAAM,IAAQ,EAAO,YAAY,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cAElF,KAAS;IACL,CAAA;GAEL"}

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

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_q91d8_3`,disabled:`_disabled_q91d8_9`,label:`_label_q91d8_15`,input:`_input_q91d8_25`,errorInput:`_errorInput_q91d8_74`,hint:`_hint_q91d8_89`,errorHint:`_errorHint_q91d8_97`};exports.default=e;
+var e={wrapper:`_wrapper_zlv0c_3`,disabled:`_disabled_zlv0c_9`,label:`_label_zlv0c_15`,input:`_input_zlv0c_25`,errorInput:`_errorInput_zlv0c_74`,hint:`_hint_zlv0c_89`,errorHint:`_errorHint_zlv0c_97`};exports.default=e;
 //# sourceMappingURL=TextField.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.module.css.cjs","names":[],"sources":["../../../src/components/TextField/TextField.module.css"],"sourcesContent":["/* ─── Wrapper ──────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Input ────────────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  -webkit-appearance: none;\n\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  background-color: var(--gnome-view-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n\n  transition:\n    border-color  var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow    var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  /* opacity handled by .disabled wrapper */\n}\n\n/* ─── Error state ──────────────────────────────────────────────────────────── */\n\n.errorInput {\n  border-color: var(--gnome-error-color, #e01b24);\n}\n\n.errorInput:focus-visible {\n  border-color: var(--gnome-error-color, #e01b24);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n      var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Hint / error text ────────────────────────────────────────────────────── */\n\n.hint {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.errorHint {\n  opacity: 1;\n  color: var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .input {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: var(--gnome-border-subtle);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .input {\n    border-width: 2px;\n    box-shadow: none;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TextField.module.css.cjs","names":[],"sources":["../../../src/components/TextField/TextField.module.css"],"sourcesContent":["/* ─── Wrapper ──────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Input ────────────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  -webkit-appearance: none;\n\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  background-color: var(--gnome-view-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n\n  transition:\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  /* opacity handled by .disabled wrapper */\n}\n\n/* ─── Error state ──────────────────────────────────────────────────────────── */\n\n.errorInput {\n  border-color: var(--gnome-error-color, #e01b24);\n}\n\n.errorInput:focus-visible {\n  border-color: var(--gnome-error-color, #e01b24);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n    var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Hint / error text ────────────────────────────────────────────────────── */\n\n.hint {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.errorHint {\n  opacity: 1;\n  color: var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .input {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: var(--gnome-border-subtle);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .input {\n    border-width: 2px;\n    box-shadow: none;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	wrapper: "_wrapper_q91d8_3",
-	disabled: "_disabled_q91d8_9",
-	label: "_label_q91d8_15",
-	input: "_input_q91d8_25",
-	errorInput: "_errorInput_q91d8_74",
-	hint: "_hint_q91d8_89",
-	errorHint: "_errorHint_q91d8_97"
+	wrapper: "_wrapper_zlv0c_3",
+	disabled: "_disabled_zlv0c_9",
+	label: "_label_zlv0c_15",
+	input: "_input_zlv0c_25",
+	errorInput: "_errorInput_zlv0c_74",
+	hint: "_hint_zlv0c_89",
+	errorHint: "_errorHint_zlv0c_97"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.module.css.js","names":[],"sources":["../../../src/components/TextField/TextField.module.css"],"sourcesContent":["/* ─── Wrapper ──────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Input ────────────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  -webkit-appearance: none;\n\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  background-color: var(--gnome-view-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n\n  transition:\n    border-color  var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow    var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  /* opacity handled by .disabled wrapper */\n}\n\n/* ─── Error state ──────────────────────────────────────────────────────────── */\n\n.errorInput {\n  border-color: var(--gnome-error-color, #e01b24);\n}\n\n.errorInput:focus-visible {\n  border-color: var(--gnome-error-color, #e01b24);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n      var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Hint / error text ────────────────────────────────────────────────────── */\n\n.hint {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.errorHint {\n  opacity: 1;\n  color: var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .input {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: var(--gnome-border-subtle);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .input {\n    border-width: 2px;\n    box-shadow: none;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TextField.module.css.js","names":[],"sources":["../../../src/components/TextField/TextField.module.css"],"sourcesContent":["/* ─── Wrapper ──────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Input ────────────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  -webkit-appearance: none;\n\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  background-color: var(--gnome-view-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n\n  transition:\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  /* opacity handled by .disabled wrapper */\n}\n\n/* ─── Error state ──────────────────────────────────────────────────────────── */\n\n.errorInput {\n  border-color: var(--gnome-error-color, #e01b24);\n}\n\n.errorInput:focus-visible {\n  border-color: var(--gnome-error-color, #e01b24);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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, 3px))\n    var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Hint / error text ────────────────────────────────────────────────────── */\n\n.hint {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.errorHint {\n  opacity: 1;\n  color: var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .input {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: var(--gnome-border-subtle);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .input {\n    border-width: 2px;\n    box-shadow: none;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}