@gnome-ui/react 1.49.0 → 1.50.0

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

@@ -1,4 +1,4 @@
-var e = { frame: "_frame_1bq7b_2" };
+var e = { frame: "_frame_1w00f_2" };
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Frame.module.css.js","names":[],"sources":["../../../src/components/Frame/Frame.module.css"],"sourcesContent":["/* ─── Frame ───────────────────────────────────────────────────────────────────\n   Bordered surface without background fill — mirrors GtkFrame / .frame.\n   ─────────────────────────────────────────────────────────────────────────── */\n\n.frame {\n  border: 1px solid var(--gnome-borders, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md);\n  overflow: hidden;\n}\n\n@media (prefers-color-scheme: dark) {\n  .frame {\n    border-color: var(--gnome-borders, rgba(255, 255, 255, 0.12));\n  }\n}\n\n@media (prefers-contrast: more) {\n  .frame {\n    border-width: 2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Frame.module.css.js","names":[],"sources":["../../../src/components/Frame/Frame.module.css"],"sourcesContent":["/* ─── Frame ───────────────────────────────────────────────────────────────────\n   Bordered surface without background fill — mirrors GtkFrame / .frame.\n   ─────────────────────────────────────────────────────────────────────────── */\n\n.frame {\n  border: 1px solid var(--gnome-borders, rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-md);\n  overflow: hidden;\n}\n\n@media (prefers-color-scheme: dark) {\n  .frame {\n    border-color: var(--gnome-borders, rgb(255 255 255 / 0.12));\n  }\n}\n\n@media (prefers-contrast: more) {\n  .frame {\n    border-width: 2px;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={headerBar:`_headerBar_1rr5r_3`,flat:`_flat_1rr5r_22`,slot:`_slot_1rr5r_29`,slotEnd:`_slotEnd_1rr5r_36`,titleSlot:`_titleSlot_1rr5r_42`,title:`_title_1rr5r_42`};exports.default=e;
+var e={headerBar:`_headerBar_1pi1b_3`,flat:`_flat_1pi1b_18`,slot:`_slot_1pi1b_25`,slotEnd:`_slotEnd_1pi1b_32`,titleSlot:`_titleSlot_1pi1b_38`,title:`_title_1pi1b_38`};exports.default=e;
 //# sourceMappingURL=HeaderBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.module.css.cjs","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.headerBar {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 47px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n\n  font-family: var(--gnome-font-family);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Title slot (center) ──────────────────────────────────────────────────── */\n\n.titleSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Title text ───────────────────────────────────────────────────────────── */\n\n.title {\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-heading, 1.2);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .headerBar {\n    border-bottom-color: var(--gnome-headerbar-border-color, rgba(255, 255, 255, 0.1));\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"HeaderBar.module.css.cjs","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.headerBar {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 47px;\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgb(0 0 0 / 0.8));\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgb(0 0 0 / 0.12));\n  font-family: var(--gnome-font-family);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Title slot (center) ──────────────────────────────────────────────────── */\n\n.titleSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Title text ───────────────────────────────────────────────────────────── */\n\n.title {\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-heading, 1.2);\n  color: var(--gnome-headerbar-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .headerBar {\n    border-bottom-color: var(--gnome-headerbar-border-color, rgb(255 255 255 / 0.1));\n  }\n}\n"],"mappings":""}

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

@@ -1,10 +1,10 @@
 var e = {
-	headerBar: "_headerBar_1rr5r_3",
-	flat: "_flat_1rr5r_22",
-	slot: "_slot_1rr5r_29",
-	slotEnd: "_slotEnd_1rr5r_36",
-	titleSlot: "_titleSlot_1rr5r_42",
-	title: "_title_1rr5r_42"
+	headerBar: "_headerBar_1pi1b_3",
+	flat: "_flat_1pi1b_18",
+	slot: "_slot_1pi1b_25",
+	slotEnd: "_slotEnd_1pi1b_32",
+	titleSlot: "_titleSlot_1pi1b_38",
+	title: "_title_1pi1b_38"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.module.css.js","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.headerBar {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 47px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n\n  font-family: var(--gnome-font-family);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Title slot (center) ──────────────────────────────────────────────────── */\n\n.titleSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Title text ───────────────────────────────────────────────────────────── */\n\n.title {\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-heading, 1.2);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .headerBar {\n    border-bottom-color: var(--gnome-headerbar-border-color, rgba(255, 255, 255, 0.1));\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"HeaderBar.module.css.js","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.headerBar {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 47px;\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgb(0 0 0 / 0.8));\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgb(0 0 0 / 0.12));\n  font-family: var(--gnome-font-family);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Title slot (center) ──────────────────────────────────────────────────── */\n\n.titleSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Title text ───────────────────────────────────────────────────────────── */\n\n.title {\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-heading, 1.2);\n  color: var(--gnome-headerbar-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .headerBar {\n    border-bottom-color: var(--gnome-headerbar-border-color, rgb(255 255 255 / 0.1));\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={"color-blue":`_color-blue_wmix2_7`,"color-green":`_color-green_wmix2_11`,"color-yellow":`_color-yellow_wmix2_15`,"color-orange":`_color-orange_wmix2_19`,"color-red":`_color-red_wmix2_23`,"color-purple":`_color-purple_wmix2_27`,"color-brown":`_color-brown_wmix2_31`};exports.default=e;
+var e={"color-blue":`_color-blue_7mnnl_7`,"color-green":`_color-green_7mnnl_11`,"color-yellow":`_color-yellow_7mnnl_15`,"color-orange":`_color-orange_7mnnl_19`,"color-red":`_color-red_7mnnl_23`,"color-purple":`_color-purple_7mnnl_27`,"color-brown":`_color-brown_7mnnl_31`};exports.default=e;
 //# sourceMappingURL=Icon.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.module.css.cjs","names":[],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":["/* ─── Palette color overrides ───────────────────────────────────────────────── */\n/* Applied via the `color` prop. Each class sets the CSS `color` property so   */\n/* the SVG's fill=\"currentColor\" resolves to the palette token.                */\n\n/* stylelint-disable selector-class-pattern */\n\n.color-blue {\n  color: var(--gnome-blue-3, #3584e4);\n}\n\n.color-green {\n  color: var(--gnome-green-4, #2ec27e);\n}\n\n.color-yellow {\n  color: var(--gnome-yellow-4, #f5c211);\n}\n\n.color-orange {\n  color: var(--gnome-orange-3, #ff7800);\n}\n\n.color-red {\n  color: var(--gnome-red-3, #e01b24);\n}\n\n.color-purple {\n  color: var(--gnome-purple-3, #9141ac);\n}\n\n.color-brown {\n  color: var(--gnome-brown-3, #986a44);\n}\n\n/* stylelint-enable selector-class-pattern */\n"],"mappings":""}
+{"version":3,"file":"Icon.module.css.cjs","names":[],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":["/* ─── Palette color overrides ───────────────────────────────────────────────── */\n\n/* Applied via the `color` prop. Each class sets the CSS `color` property so   */\n\n/* the SVG's fill=\"currentColor\" resolves to the palette token.                */\n\n.color-blue {\n  color: var(--gnome-blue-3, #3584e4);\n}\n\n.color-green {\n  color: var(--gnome-green-4, #2ec27e);\n}\n\n.color-yellow {\n  color: var(--gnome-yellow-4, #f5c211);\n}\n\n.color-orange {\n  color: var(--gnome-orange-3, #ff7800);\n}\n\n.color-red {\n  color: var(--gnome-red-3, #e01b24);\n}\n\n.color-purple {\n  color: var(--gnome-purple-3, #9141ac);\n}\n\n.color-brown {\n  color: var(--gnome-brown-3, #986a44);\n}\n"],"mappings":""}

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

@@ -1,12 +1,12 @@
 //#region src/components/Icon/Icon.module.css
 var e = {
-	"color-blue": "_color-blue_wmix2_7",
-	"color-green": "_color-green_wmix2_11",
-	"color-yellow": "_color-yellow_wmix2_15",
-	"color-orange": "_color-orange_wmix2_19",
-	"color-red": "_color-red_wmix2_23",
-	"color-purple": "_color-purple_wmix2_27",
-	"color-brown": "_color-brown_wmix2_31"
+	"color-blue": "_color-blue_7mnnl_7",
+	"color-green": "_color-green_7mnnl_11",
+	"color-yellow": "_color-yellow_7mnnl_15",
+	"color-orange": "_color-orange_7mnnl_19",
+	"color-red": "_color-red_7mnnl_23",
+	"color-purple": "_color-purple_7mnnl_27",
+	"color-brown": "_color-brown_7mnnl_31"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.module.css.js","names":[],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":["/* ─── Palette color overrides ───────────────────────────────────────────────── */\n/* Applied via the `color` prop. Each class sets the CSS `color` property so   */\n/* the SVG's fill=\"currentColor\" resolves to the palette token.                */\n\n/* stylelint-disable selector-class-pattern */\n\n.color-blue {\n  color: var(--gnome-blue-3, #3584e4);\n}\n\n.color-green {\n  color: var(--gnome-green-4, #2ec27e);\n}\n\n.color-yellow {\n  color: var(--gnome-yellow-4, #f5c211);\n}\n\n.color-orange {\n  color: var(--gnome-orange-3, #ff7800);\n}\n\n.color-red {\n  color: var(--gnome-red-3, #e01b24);\n}\n\n.color-purple {\n  color: var(--gnome-purple-3, #9141ac);\n}\n\n.color-brown {\n  color: var(--gnome-brown-3, #986a44);\n}\n\n/* stylelint-enable selector-class-pattern */\n"],"mappings":""}
+{"version":3,"file":"Icon.module.css.js","names":[],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":["/* ─── Palette color overrides ───────────────────────────────────────────────── */\n\n/* Applied via the `color` prop. Each class sets the CSS `color` property so   */\n\n/* the SVG's fill=\"currentColor\" resolves to the palette token.                */\n\n.color-blue {\n  color: var(--gnome-blue-3, #3584e4);\n}\n\n.color-green {\n  color: var(--gnome-green-4, #2ec27e);\n}\n\n.color-yellow {\n  color: var(--gnome-yellow-4, #f5c211);\n}\n\n.color-orange {\n  color: var(--gnome-orange-3, #ff7800);\n}\n\n.color-red {\n  color: var(--gnome-red-3, #e01b24);\n}\n\n.color-purple {\n  color: var(--gnome-purple-3, #9141ac);\n}\n\n.color-brown {\n  color: var(--gnome-brown-3, #986a44);\n}\n"],"mappings":""}

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.cjs

@@ -1,2 +1,2 @@
-const e=require("../BottomSheet/BottomSheet.cjs"),t=require("../Icon/Icon.cjs"),n=require("./InlineViewSwitcher.module.css.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.createContext)(null);function o(){let e=(0,r.useContext)(a);if(!e)throw Error(`InlineViewSwitcherItem must be used inside InlineViewSwitcher`);return e}var s=({value:o,onValueChange:s,variant:c=`default`,overflow:l=`wrap`,"aria-label":u=`View switcher`,children:d,className:f,...p})=>{let m=(0,r.useRef)(null),h=(0,r.useRef)(0),[g,_]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),[b,x]=(0,r.useState)({width:0,transform:`translateX(0)`});(0,r.useEffect)(()=>{if(l!==`compact`&&l!==`menu`){_(!1);return}let e=m.current;if(!e)return;let t=new ResizeObserver(()=>{_(t=>{if(!t){let t=e.scrollWidth;return t>e.clientWidth?(h.current=t,!0):!1}return h.current>e.clientWidth+30})});return t.observe(e),()=>t.disconnect()},[l]);let S=r.Children.toArray(d).filter(r.isValidElement).filter(e=>e.type.displayName===`InlineViewSwitcherItem`).map(e=>e.props),C=S.find(e=>e.name===o)??S[0],w=l===`compact`&&g,T=l===`menu`&&g;(0,r.useLayoutEffect)(()=>{if(T)return;let e=m.current;if(!e)return;let t=e.querySelector(`[aria-checked="true"]`);t&&x({width:t.offsetWidth,transform:`translateX(${t.offsetLeft}px)`})},[o,T,w]);function E(e){let t=Array.from(m.current?.querySelectorAll(`[role=radio]:not(:disabled)`)??[]),n=document.activeElement,r=n instanceof HTMLButtonElement?t.indexOf(n):-1;if(r===-1)return;let i=r;if(e.key===`ArrowRight`||e.key===`ArrowDown`)i=(r+1)%t.length;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)i=(r-1+t.length)%t.length;else if(e.key===`Home`)i=0;else if(e.key===`End`)i=t.length-1;else return;e.preventDefault(),t[i].focus(),t[i].click()}return(0,i.jsx)(a.Provider,{value:{value:o,onValueChange:s,compact:w},children:(0,i.jsxs)(`div`,{ref:m,role:T?void 0:`radiogroup`,"aria-label":u,onKeyDown:E,className:[n.default.switcher,n.default[c],l===`scroll`?n.default.overflowScroll:null,l===`compact`||l===`menu`?n.default.overflowDetect:null,w?n.default.compact:null,f].filter(Boolean).join(` `),...p,children:[!T&&(0,i.jsx)(`span`,{className:n.default.indicator,style:b,"aria-hidden":!0}),T?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`button`,{type:`button`,className:[n.default.item,n.default.active,n.default.menuTrigger].filter(Boolean).join(` `),onClick:()=>y(!0),"aria-haspopup":`dialog`,"aria-label":`${u}: ${C?.label??C?.name}`,children:[C?.icon&&(0,i.jsx)(`span`,{className:n.default.itemIcon,children:(0,i.jsx)(t.Icon,{icon:C.icon,size:`md`,"aria-hidden":!0})}),C?.label&&(0,i.jsx)(`span`,{className:n.default.itemLabel,children:C.label}),(0,i.jsx)(`span`,{className:n.default.menuChevron,"aria-hidden":`true`,children:`▾`})]}),(0,i.jsx)(e.BottomSheet,{open:v,title:u,onClose:()=>y(!1),children:(0,i.jsx)(`div`,{className:n.default.menuList,role:`radiogroup`,"aria-label":u,children:S.map(e=>(0,i.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":e.name===o,className:[n.default.menuListItem,e.name===o?n.default.menuListItemActive:null].filter(Boolean).join(` `),onClick:()=>{s(e.name),y(!1)},children:[e.icon&&(0,i.jsx)(`span`,{className:n.default.menuListItemIcon,children:(0,i.jsx)(t.Icon,{icon:e.icon,size:`md`,"aria-hidden":!0})}),(0,i.jsx)(`span`,{className:n.default.menuListItemLabel,children:e.label??e.name}),e.name===o&&(0,i.jsx)(`span`,{className:n.default.menuListItemCheck,"aria-hidden":`true`,children:`✓`})]},e.name))})})]}):d]})})};exports.InlineViewSwitcher=s,exports.useInlineViewSwitcher=o;
+const e=require("../BottomSheet/BottomSheet.cjs"),t=require("../Icon/Icon.cjs"),n=require("./InlineViewSwitcher.module.css.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.createContext)(null);function o(){let e=(0,r.useContext)(a);if(!e)throw Error(`InlineViewSwitcherItem must be used inside InlineViewSwitcher`);return e}var s=({value:o,onValueChange:s,variant:c=`default`,overflow:l=`wrap`,"aria-label":u=`View switcher`,children:d,className:f,...p})=>{let m=(0,r.useRef)(null),h=(0,r.useRef)(0),[g,_]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),[b,x]=(0,r.useState)({width:0,transform:`translateX(0)`});(0,r.useEffect)(()=>{if(l!==`compact`&&l!==`menu`){_(!1);return}let e=m.current;if(!e)return;let t=new ResizeObserver(()=>{_(t=>{if(!t){let t=e.scrollWidth;return t>e.clientWidth?(h.current=t,!0):!1}return h.current>e.clientWidth+30})});return t.observe(e),()=>t.disconnect()},[l]);let S=r.Children.toArray(d).filter(r.isValidElement).filter(e=>e.type.displayName===`InlineViewSwitcherItem`).map(e=>e.props),C=S.find(e=>e.name===o)??S[0],w=l===`compact`&&g,T=l===`menu`&&g;(0,r.useLayoutEffect)(()=>{if(T)return;let e=m.current;if(!e)return;let t=e.querySelector(`[aria-checked="true"]`);t&&x({width:t.offsetWidth,transform:`translateX(${t.offsetLeft}px)`})},[o,T,w]);function E(e){let t=Array.from(m.current?.querySelectorAll(`[role=radio]:not(:disabled)`)??[]),{activeElement:n}=document,r=n instanceof HTMLButtonElement?t.indexOf(n):-1;if(r===-1)return;let i=r;if(e.key===`ArrowRight`||e.key===`ArrowDown`)i=(r+1)%t.length;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)i=(r-1+t.length)%t.length;else if(e.key===`Home`)i=0;else if(e.key===`End`)i=t.length-1;else return;e.preventDefault(),t[i].focus(),t[i].click()}return(0,i.jsx)(a.Provider,{value:{value:o,onValueChange:s,compact:w},children:(0,i.jsxs)(`div`,{ref:m,role:T?void 0:`radiogroup`,"aria-label":u,onKeyDown:E,className:[n.default.switcher,n.default[c],l===`scroll`?n.default.overflowScroll:null,l===`compact`||l===`menu`?n.default.overflowDetect:null,w?n.default.compact:null,f].filter(Boolean).join(` `),...p,children:[!T&&(0,i.jsx)(`span`,{className:n.default.indicator,style:b,"aria-hidden":!0}),T?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`button`,{type:`button`,className:[n.default.item,n.default.active,n.default.menuTrigger].filter(Boolean).join(` `),onClick:()=>y(!0),"aria-haspopup":`dialog`,"aria-label":`${u}: ${C?.label??C?.name}`,children:[C?.icon&&(0,i.jsx)(`span`,{className:n.default.itemIcon,children:(0,i.jsx)(t.Icon,{icon:C.icon,size:`md`,"aria-hidden":!0})}),C?.label&&(0,i.jsx)(`span`,{className:n.default.itemLabel,children:C.label}),(0,i.jsx)(`span`,{className:n.default.menuChevron,"aria-hidden":`true`,children:`▾`})]}),(0,i.jsx)(e.BottomSheet,{open:v,title:u,onClose:()=>y(!1),children:(0,i.jsx)(`div`,{className:n.default.menuList,role:`radiogroup`,"aria-label":u,children:S.map(e=>(0,i.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":e.name===o,className:[n.default.menuListItem,e.name===o?n.default.menuListItemActive:null].filter(Boolean).join(` `),onClick:()=>{s(e.name),y(!1)},children:[e.icon&&(0,i.jsx)(`span`,{className:n.default.menuListItemIcon,children:(0,i.jsx)(t.Icon,{icon:e.icon,size:`md`,"aria-hidden":!0})}),(0,i.jsx)(`span`,{className:n.default.menuListItemLabel,children:e.label??e.name}),e.name===o&&(0,i.jsx)(`span`,{className:n.default.menuListItemCheck,"aria-hidden":`true`,children:`✓`})]},e.name))})})]}):d]})})};exports.InlineViewSwitcher=s,exports.useInlineViewSwitcher=o;
 //# sourceMappingURL=InlineViewSwitcher.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n  Children,\n  type CSSProperties,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { BottomSheet } from '../BottomSheet';\nimport { Icon } from '../Icon';\n\nimport styles from './InlineViewSwitcher.module.css';\nimport type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';\n\nexport type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';\n\nexport type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  compact: boolean;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n  const ctx = useContext(InlineViewSwitcherContext);\n\n  if (!ctx) {\n    throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n  }\n\n  return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Currently active view name. */\n  value: string;\n  /** Called with the new value when a view is selected. */\n  onValueChange: (value: string) => void;\n  /**\n   * Visual style of the switcher.\n   * - `default` — card background with border and shadow (same as `ToggleGroup`).\n   * - `flat`    — no background or border; active indicator only.\n   * - `round`   — pill-shaped container and items.\n   * - `pill`    — segmented-control style; active item appears lifted, no accent color.\n   */\n  variant?: InlineViewSwitcherVariant;\n  /**\n   * Overflow strategy when the container is too narrow for all items.\n   * - `wrap`    — default; items overflow with no special handling.\n   * - `scroll`  — horizontal scroll with hidden scrollbar.\n   * - `compact` — collapses item labels to icons-only when overflowing (requires icons on all items).\n   * - `menu`    — shows the active item and a chevron trigger; all items open in a BottomSheet.\n   */\n  overflow?: InlineViewSwitcherOverflow;\n  /** Accessible label for the group. */\n  'aria-label'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n *\n * Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n *\n * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport const InlineViewSwitcher = ({\n  value,\n  onValueChange,\n  variant = 'default',\n  overflow = 'wrap',\n  'aria-label': ariaLabel = 'View switcher',\n  children,\n  className,\n  ...props\n}: InlineViewSwitcherProps) => {\n  const groupRef = useRef<HTMLDivElement>(null);\n  const naturalWidthRef = useRef<number>(0);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const [indicatorStyle, setIndicatorStyle] = useState<CSSProperties>({\n    width: 0,\n    transform: 'translateX(0)',\n  });\n\n  useEffect(() => {\n    if (overflow !== 'compact' && overflow !== 'menu') {\n      setIsOverflowing(false);\n      return;\n    }\n    const el = groupRef.current;\n    if (!el) {\n      return;\n    }\n\n    const check = () => {\n      setIsOverflowing((prev) => {\n        if (!prev) {\n          const scrollW = el.scrollWidth;\n          if (scrollW > el.clientWidth) {\n            naturalWidthRef.current = scrollW;\n            return true;\n          }\n          return false;\n        }\n        // 30px hysteresis: stay collapsed until container is comfortably wider\n        return naturalWidthRef.current > el.clientWidth + 30;\n      });\n    };\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [overflow]);\n\n  const allItems = Children.toArray(children)\n    .filter(isValidElement)\n    .filter(\n      (child) => (child.type as { displayName?: string }).displayName === 'InlineViewSwitcherItem',\n    )\n    .map((child) => (child as ReactElement<InlineViewSwitcherItemProps>).props);\n\n  const activeItem = allItems.find((i) => i.name === value) ?? allItems[0];\n  const compact = overflow === 'compact' && isOverflowing;\n  const inMenuMode = overflow === 'menu' && isOverflowing;\n\n  // Track active item position for the sliding indicator\n  useLayoutEffect(() => {\n    if (inMenuMode) {\n      return;\n    }\n    const group = groupRef.current;\n    if (!group) {\n      return;\n    }\n    const activeEl = group.querySelector<HTMLElement>('[aria-checked=\"true\"]');\n    if (!activeEl) {\n      return;\n    }\n\n    setIndicatorStyle({\n      width: activeEl.offsetWidth,\n      transform: `translateX(${activeEl.offsetLeft}px)`,\n    });\n  }, [value, inMenuMode, compact]);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = idx;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      next = (idx + 1) % items.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      next = (idx - 1 + items.length) % items.length;\n    } else if (e.key === 'Home') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <InlineViewSwitcherContext.Provider value={{ value, onValueChange, compact }}>\n      <div\n        ref={groupRef}\n        role={inMenuMode ? undefined : 'radiogroup'}\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[\n          styles.switcher,\n          styles[variant],\n          overflow === 'scroll' ? styles.overflowScroll : null,\n          overflow === 'compact' || overflow === 'menu' ? styles.overflowDetect : null,\n          compact ? styles.compact : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      >\n        {!inMenuMode && <span className={styles.indicator} style={indicatorStyle} aria-hidden />}\n        {inMenuMode ? (\n          <>\n            <button\n              type=\"button\"\n              className={[styles.item, styles.active, styles.menuTrigger].filter(Boolean).join(' ')}\n              onClick={() => setSheetOpen(true)}\n              aria-haspopup=\"dialog\"\n              aria-label={`${ariaLabel}: ${activeItem?.label ?? activeItem?.name}`}\n            >\n              {activeItem?.icon && (\n                <span className={styles.itemIcon}>\n                  <Icon icon={activeItem.icon} size=\"md\" aria-hidden />\n                </span>\n              )}\n              {activeItem?.label && <span className={styles.itemLabel}>{activeItem.label}</span>}\n              <span className={styles.menuChevron} aria-hidden=\"true\">\n                ▾\n              </span>\n            </button>\n            <BottomSheet open={sheetOpen} title={ariaLabel} onClose={() => setSheetOpen(false)}>\n              <div className={styles.menuList} role=\"radiogroup\" aria-label={ariaLabel}>\n                {allItems.map((item) => (\n                  <button\n                    key={item.name}\n                    type=\"button\"\n                    role=\"radio\"\n                    aria-checked={item.name === value}\n                    className={[\n                      styles.menuListItem,\n                      item.name === value ? styles.menuListItemActive : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    onClick={() => {\n                      onValueChange(item.name);\n                      setSheetOpen(false);\n                    }}\n                  >\n                    {item.icon && (\n                      <span className={styles.menuListItemIcon}>\n                        <Icon icon={item.icon} size=\"md\" aria-hidden />\n                      </span>\n                    )}\n                    <span className={styles.menuListItemLabel}>{item.label ?? item.name}</span>\n                    {item.name === value && (\n                      <span className={styles.menuListItemCheck} aria-hidden=\"true\">\n                        ✓\n                      </span>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </BottomSheet>\n          </>\n        ) : (\n          children\n        )}\n      </div>\n    </InlineViewSwitcherContext.Provider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"InlineViewSwitcher.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n  Children,\n  type CSSProperties,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { BottomSheet } from '../BottomSheet';\nimport { Icon } from '../Icon';\n\nimport styles from './InlineViewSwitcher.module.css';\nimport type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';\n\nexport type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';\n\nexport type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  compact: boolean;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n  const ctx = useContext(InlineViewSwitcherContext);\n\n  if (!ctx) {\n    throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n  }\n\n  return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Currently active view name. */\n  value: string;\n  /** Called with the new value when a view is selected. */\n  onValueChange: (value: string) => void;\n  /**\n   * Visual style of the switcher.\n   * - `default` — card background with border and shadow (same as `ToggleGroup`).\n   * - `flat`    — no background or border; active indicator only.\n   * - `round`   — pill-shaped container and items.\n   * - `pill`    — segmented-control style; active item appears lifted, no accent color.\n   */\n  variant?: InlineViewSwitcherVariant;\n  /**\n   * Overflow strategy when the container is too narrow for all items.\n   * - `wrap`    — default; items overflow with no special handling.\n   * - `scroll`  — horizontal scroll with hidden scrollbar.\n   * - `compact` — collapses item labels to icons-only when overflowing (requires icons on all items).\n   * - `menu`    — shows the active item and a chevron trigger; all items open in a BottomSheet.\n   */\n  overflow?: InlineViewSwitcherOverflow;\n  /** Accessible label for the group. */\n  'aria-label'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n *\n * Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n *\n * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport const InlineViewSwitcher = ({\n  value,\n  onValueChange,\n  variant = 'default',\n  overflow = 'wrap',\n  'aria-label': ariaLabel = 'View switcher',\n  children,\n  className,\n  ...props\n}: InlineViewSwitcherProps) => {\n  const groupRef = useRef<HTMLDivElement>(null);\n  const naturalWidthRef = useRef<number>(0);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const [indicatorStyle, setIndicatorStyle] = useState<CSSProperties>({\n    width: 0,\n    transform: 'translateX(0)',\n  });\n\n  useEffect(() => {\n    if (overflow !== 'compact' && overflow !== 'menu') {\n      setIsOverflowing(false);\n      return;\n    }\n    const el = groupRef.current;\n    if (!el) {\n      return;\n    }\n\n    const check = () => {\n      setIsOverflowing((prev) => {\n        if (!prev) {\n          const scrollW = el.scrollWidth;\n          if (scrollW > el.clientWidth) {\n            naturalWidthRef.current = scrollW;\n            return true;\n          }\n          return false;\n        }\n        // 30px hysteresis: stay collapsed until container is comfortably wider\n        return naturalWidthRef.current > el.clientWidth + 30;\n      });\n    };\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [overflow]);\n\n  const allItems = Children.toArray(children)\n    .filter(isValidElement)\n    .filter(\n      (child) => (child.type as { displayName?: string }).displayName === 'InlineViewSwitcherItem',\n    )\n    .map((child) => (child as ReactElement<InlineViewSwitcherItemProps>).props);\n\n  const activeItem = allItems.find((i) => i.name === value) ?? allItems[0];\n  const compact = overflow === 'compact' && isOverflowing;\n  const inMenuMode = overflow === 'menu' && isOverflowing;\n\n  // Track active item position for the sliding indicator\n  useLayoutEffect(() => {\n    if (inMenuMode) {\n      return;\n    }\n    const group = groupRef.current;\n    if (!group) {\n      return;\n    }\n    const activeEl = group.querySelector<HTMLElement>('[aria-checked=\"true\"]');\n    if (!activeEl) {\n      return;\n    }\n\n    setIndicatorStyle({\n      width: activeEl.offsetWidth,\n      transform: `translateX(${activeEl.offsetLeft}px)`,\n    });\n  }, [value, inMenuMode, compact]);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const { activeElement } = document;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = idx;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      next = (idx + 1) % items.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      next = (idx - 1 + items.length) % items.length;\n    } else if (e.key === 'Home') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <InlineViewSwitcherContext.Provider value={{ value, onValueChange, compact }}>\n      <div\n        ref={groupRef}\n        role={inMenuMode ? undefined : 'radiogroup'}\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[\n          styles.switcher,\n          styles[variant],\n          overflow === 'scroll' ? styles.overflowScroll : null,\n          overflow === 'compact' || overflow === 'menu' ? styles.overflowDetect : null,\n          compact ? styles.compact : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      >\n        {!inMenuMode && <span className={styles.indicator} style={indicatorStyle} aria-hidden />}\n        {inMenuMode ? (\n          <>\n            <button\n              type=\"button\"\n              className={[styles.item, styles.active, styles.menuTrigger].filter(Boolean).join(' ')}\n              onClick={() => setSheetOpen(true)}\n              aria-haspopup=\"dialog\"\n              aria-label={`${ariaLabel}: ${activeItem?.label ?? activeItem?.name}`}\n            >\n              {activeItem?.icon && (\n                <span className={styles.itemIcon}>\n                  <Icon icon={activeItem.icon} size=\"md\" aria-hidden />\n                </span>\n              )}\n              {activeItem?.label && <span className={styles.itemLabel}>{activeItem.label}</span>}\n              <span className={styles.menuChevron} aria-hidden=\"true\">\n                ▾\n              </span>\n            </button>\n            <BottomSheet open={sheetOpen} title={ariaLabel} onClose={() => setSheetOpen(false)}>\n              <div className={styles.menuList} role=\"radiogroup\" aria-label={ariaLabel}>\n                {allItems.map((item) => (\n                  <button\n                    key={item.name}\n                    type=\"button\"\n                    role=\"radio\"\n                    aria-checked={item.name === value}\n                    className={[\n                      styles.menuListItem,\n                      item.name === value ? styles.menuListItemActive : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    onClick={() => {\n                      onValueChange(item.name);\n                      setSheetOpen(false);\n                    }}\n                  >\n                    {item.icon && (\n                      <span className={styles.menuListItemIcon}>\n                        <Icon icon={item.icon} size=\"md\" aria-hidden />\n                      </span>\n                    )}\n                    <span className={styles.menuListItemLabel}>{item.label ?? item.name}</span>\n                    {item.name === value && (\n                      <span className={styles.menuListItemCheck} aria-hidden=\"true\">\n                        ✓\n                      </span>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </BottomSheet>\n          </>\n        ) : (\n          children\n        )}\n      </div>\n    </InlineViewSwitcherContext.Provider>\n  );\n};\n"],"mappings":"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"}

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.js

@@ -49,7 +49,7 @@ var g = ({ value: i, onValueChange: o, variant: h = "default", overflow: g = "wr
 		j
 	]);
 	function N(e) {
-		let t = Array.from(x.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n = document.activeElement, r = n instanceof HTMLButtonElement ? t.indexOf(n) : -1;
+		let t = Array.from(x.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), { activeElement: n } = document, r = n instanceof HTMLButtonElement ? t.indexOf(n) : -1;
 		if (r === -1) return;
 		let i = r;
 		if (e.key === "ArrowRight" || e.key === "ArrowDown") i = (r + 1) % t.length;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n  Children,\n  type CSSProperties,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { BottomSheet } from '../BottomSheet';\nimport { Icon } from '../Icon';\n\nimport styles from './InlineViewSwitcher.module.css';\nimport type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';\n\nexport type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';\n\nexport type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  compact: boolean;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n  const ctx = useContext(InlineViewSwitcherContext);\n\n  if (!ctx) {\n    throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n  }\n\n  return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Currently active view name. */\n  value: string;\n  /** Called with the new value when a view is selected. */\n  onValueChange: (value: string) => void;\n  /**\n   * Visual style of the switcher.\n   * - `default` — card background with border and shadow (same as `ToggleGroup`).\n   * - `flat`    — no background or border; active indicator only.\n   * - `round`   — pill-shaped container and items.\n   * - `pill`    — segmented-control style; active item appears lifted, no accent color.\n   */\n  variant?: InlineViewSwitcherVariant;\n  /**\n   * Overflow strategy when the container is too narrow for all items.\n   * - `wrap`    — default; items overflow with no special handling.\n   * - `scroll`  — horizontal scroll with hidden scrollbar.\n   * - `compact` — collapses item labels to icons-only when overflowing (requires icons on all items).\n   * - `menu`    — shows the active item and a chevron trigger; all items open in a BottomSheet.\n   */\n  overflow?: InlineViewSwitcherOverflow;\n  /** Accessible label for the group. */\n  'aria-label'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n *\n * Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n *\n * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport const InlineViewSwitcher = ({\n  value,\n  onValueChange,\n  variant = 'default',\n  overflow = 'wrap',\n  'aria-label': ariaLabel = 'View switcher',\n  children,\n  className,\n  ...props\n}: InlineViewSwitcherProps) => {\n  const groupRef = useRef<HTMLDivElement>(null);\n  const naturalWidthRef = useRef<number>(0);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const [indicatorStyle, setIndicatorStyle] = useState<CSSProperties>({\n    width: 0,\n    transform: 'translateX(0)',\n  });\n\n  useEffect(() => {\n    if (overflow !== 'compact' && overflow !== 'menu') {\n      setIsOverflowing(false);\n      return;\n    }\n    const el = groupRef.current;\n    if (!el) {\n      return;\n    }\n\n    const check = () => {\n      setIsOverflowing((prev) => {\n        if (!prev) {\n          const scrollW = el.scrollWidth;\n          if (scrollW > el.clientWidth) {\n            naturalWidthRef.current = scrollW;\n            return true;\n          }\n          return false;\n        }\n        // 30px hysteresis: stay collapsed until container is comfortably wider\n        return naturalWidthRef.current > el.clientWidth + 30;\n      });\n    };\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [overflow]);\n\n  const allItems = Children.toArray(children)\n    .filter(isValidElement)\n    .filter(\n      (child) => (child.type as { displayName?: string }).displayName === 'InlineViewSwitcherItem',\n    )\n    .map((child) => (child as ReactElement<InlineViewSwitcherItemProps>).props);\n\n  const activeItem = allItems.find((i) => i.name === value) ?? allItems[0];\n  const compact = overflow === 'compact' && isOverflowing;\n  const inMenuMode = overflow === 'menu' && isOverflowing;\n\n  // Track active item position for the sliding indicator\n  useLayoutEffect(() => {\n    if (inMenuMode) {\n      return;\n    }\n    const group = groupRef.current;\n    if (!group) {\n      return;\n    }\n    const activeEl = group.querySelector<HTMLElement>('[aria-checked=\"true\"]');\n    if (!activeEl) {\n      return;\n    }\n\n    setIndicatorStyle({\n      width: activeEl.offsetWidth,\n      transform: `translateX(${activeEl.offsetLeft}px)`,\n    });\n  }, [value, inMenuMode, compact]);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = idx;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      next = (idx + 1) % items.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      next = (idx - 1 + items.length) % items.length;\n    } else if (e.key === 'Home') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <InlineViewSwitcherContext.Provider value={{ value, onValueChange, compact }}>\n      <div\n        ref={groupRef}\n        role={inMenuMode ? undefined : 'radiogroup'}\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[\n          styles.switcher,\n          styles[variant],\n          overflow === 'scroll' ? styles.overflowScroll : null,\n          overflow === 'compact' || overflow === 'menu' ? styles.overflowDetect : null,\n          compact ? styles.compact : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      >\n        {!inMenuMode && <span className={styles.indicator} style={indicatorStyle} aria-hidden />}\n        {inMenuMode ? (\n          <>\n            <button\n              type=\"button\"\n              className={[styles.item, styles.active, styles.menuTrigger].filter(Boolean).join(' ')}\n              onClick={() => setSheetOpen(true)}\n              aria-haspopup=\"dialog\"\n              aria-label={`${ariaLabel}: ${activeItem?.label ?? activeItem?.name}`}\n            >\n              {activeItem?.icon && (\n                <span className={styles.itemIcon}>\n                  <Icon icon={activeItem.icon} size=\"md\" aria-hidden />\n                </span>\n              )}\n              {activeItem?.label && <span className={styles.itemLabel}>{activeItem.label}</span>}\n              <span className={styles.menuChevron} aria-hidden=\"true\">\n                ▾\n              </span>\n            </button>\n            <BottomSheet open={sheetOpen} title={ariaLabel} onClose={() => setSheetOpen(false)}>\n              <div className={styles.menuList} role=\"radiogroup\" aria-label={ariaLabel}>\n                {allItems.map((item) => (\n                  <button\n                    key={item.name}\n                    type=\"button\"\n                    role=\"radio\"\n                    aria-checked={item.name === value}\n                    className={[\n                      styles.menuListItem,\n                      item.name === value ? styles.menuListItemActive : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    onClick={() => {\n                      onValueChange(item.name);\n                      setSheetOpen(false);\n                    }}\n                  >\n                    {item.icon && (\n                      <span className={styles.menuListItemIcon}>\n                        <Icon icon={item.icon} size=\"md\" aria-hidden />\n                      </span>\n                    )}\n                    <span className={styles.menuListItemLabel}>{item.label ?? item.name}</span>\n                    {item.name === value && (\n                      <span className={styles.menuListItemCheck} aria-hidden=\"true\">\n                        ✓\n                      </span>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </BottomSheet>\n          </>\n        ) : (\n          children\n        )}\n      </div>\n    </InlineViewSwitcherContext.Provider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"InlineViewSwitcher.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n  Children,\n  type CSSProperties,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { BottomSheet } from '../BottomSheet';\nimport { Icon } from '../Icon';\n\nimport styles from './InlineViewSwitcher.module.css';\nimport type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';\n\nexport type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';\n\nexport type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  compact: boolean;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n  const ctx = useContext(InlineViewSwitcherContext);\n\n  if (!ctx) {\n    throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n  }\n\n  return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Currently active view name. */\n  value: string;\n  /** Called with the new value when a view is selected. */\n  onValueChange: (value: string) => void;\n  /**\n   * Visual style of the switcher.\n   * - `default` — card background with border and shadow (same as `ToggleGroup`).\n   * - `flat`    — no background or border; active indicator only.\n   * - `round`   — pill-shaped container and items.\n   * - `pill`    — segmented-control style; active item appears lifted, no accent color.\n   */\n  variant?: InlineViewSwitcherVariant;\n  /**\n   * Overflow strategy when the container is too narrow for all items.\n   * - `wrap`    — default; items overflow with no special handling.\n   * - `scroll`  — horizontal scroll with hidden scrollbar.\n   * - `compact` — collapses item labels to icons-only when overflowing (requires icons on all items).\n   * - `menu`    — shows the active item and a chevron trigger; all items open in a BottomSheet.\n   */\n  overflow?: InlineViewSwitcherOverflow;\n  /** Accessible label for the group. */\n  'aria-label'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n *\n * Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n *\n * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport const InlineViewSwitcher = ({\n  value,\n  onValueChange,\n  variant = 'default',\n  overflow = 'wrap',\n  'aria-label': ariaLabel = 'View switcher',\n  children,\n  className,\n  ...props\n}: InlineViewSwitcherProps) => {\n  const groupRef = useRef<HTMLDivElement>(null);\n  const naturalWidthRef = useRef<number>(0);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const [indicatorStyle, setIndicatorStyle] = useState<CSSProperties>({\n    width: 0,\n    transform: 'translateX(0)',\n  });\n\n  useEffect(() => {\n    if (overflow !== 'compact' && overflow !== 'menu') {\n      setIsOverflowing(false);\n      return;\n    }\n    const el = groupRef.current;\n    if (!el) {\n      return;\n    }\n\n    const check = () => {\n      setIsOverflowing((prev) => {\n        if (!prev) {\n          const scrollW = el.scrollWidth;\n          if (scrollW > el.clientWidth) {\n            naturalWidthRef.current = scrollW;\n            return true;\n          }\n          return false;\n        }\n        // 30px hysteresis: stay collapsed until container is comfortably wider\n        return naturalWidthRef.current > el.clientWidth + 30;\n      });\n    };\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [overflow]);\n\n  const allItems = Children.toArray(children)\n    .filter(isValidElement)\n    .filter(\n      (child) => (child.type as { displayName?: string }).displayName === 'InlineViewSwitcherItem',\n    )\n    .map((child) => (child as ReactElement<InlineViewSwitcherItemProps>).props);\n\n  const activeItem = allItems.find((i) => i.name === value) ?? allItems[0];\n  const compact = overflow === 'compact' && isOverflowing;\n  const inMenuMode = overflow === 'menu' && isOverflowing;\n\n  // Track active item position for the sliding indicator\n  useLayoutEffect(() => {\n    if (inMenuMode) {\n      return;\n    }\n    const group = groupRef.current;\n    if (!group) {\n      return;\n    }\n    const activeEl = group.querySelector<HTMLElement>('[aria-checked=\"true\"]');\n    if (!activeEl) {\n      return;\n    }\n\n    setIndicatorStyle({\n      width: activeEl.offsetWidth,\n      transform: `translateX(${activeEl.offsetLeft}px)`,\n    });\n  }, [value, inMenuMode, compact]);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const { activeElement } = document;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = idx;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      next = (idx + 1) % items.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      next = (idx - 1 + items.length) % items.length;\n    } else if (e.key === 'Home') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <InlineViewSwitcherContext.Provider value={{ value, onValueChange, compact }}>\n      <div\n        ref={groupRef}\n        role={inMenuMode ? undefined : 'radiogroup'}\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[\n          styles.switcher,\n          styles[variant],\n          overflow === 'scroll' ? styles.overflowScroll : null,\n          overflow === 'compact' || overflow === 'menu' ? styles.overflowDetect : null,\n          compact ? styles.compact : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      >\n        {!inMenuMode && <span className={styles.indicator} style={indicatorStyle} aria-hidden />}\n        {inMenuMode ? (\n          <>\n            <button\n              type=\"button\"\n              className={[styles.item, styles.active, styles.menuTrigger].filter(Boolean).join(' ')}\n              onClick={() => setSheetOpen(true)}\n              aria-haspopup=\"dialog\"\n              aria-label={`${ariaLabel}: ${activeItem?.label ?? activeItem?.name}`}\n            >\n              {activeItem?.icon && (\n                <span className={styles.itemIcon}>\n                  <Icon icon={activeItem.icon} size=\"md\" aria-hidden />\n                </span>\n              )}\n              {activeItem?.label && <span className={styles.itemLabel}>{activeItem.label}</span>}\n              <span className={styles.menuChevron} aria-hidden=\"true\">\n                ▾\n              </span>\n            </button>\n            <BottomSheet open={sheetOpen} title={ariaLabel} onClose={() => setSheetOpen(false)}>\n              <div className={styles.menuList} role=\"radiogroup\" aria-label={ariaLabel}>\n                {allItems.map((item) => (\n                  <button\n                    key={item.name}\n                    type=\"button\"\n                    role=\"radio\"\n                    aria-checked={item.name === value}\n                    className={[\n                      styles.menuListItem,\n                      item.name === value ? styles.menuListItemActive : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    onClick={() => {\n                      onValueChange(item.name);\n                      setSheetOpen(false);\n                    }}\n                  >\n                    {item.icon && (\n                      <span className={styles.menuListItemIcon}>\n                        <Icon icon={item.icon} size=\"md\" aria-hidden />\n                      </span>\n                    )}\n                    <span className={styles.menuListItemLabel}>{item.label ?? item.name}</span>\n                    {item.name === value && (\n                      <span className={styles.menuListItemCheck} aria-hidden=\"true\">\n                        ✓\n                      </span>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </BottomSheet>\n          </>\n        ) : (\n          children\n        )}\n      </div>\n    </InlineViewSwitcherContext.Provider>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={switcher:`_switcher_l6v4v_3`,indicator:`_indicator_l6v4v_11`,item:`_item_l6v4v_26`,iconOnly:`_iconOnly_l6v4v_57`,itemIcon:`_itemIcon_l6v4v_62`,itemLabel:`_itemLabel_l6v4v_68`,default:`_default_l6v4v_74`,active:`_active_l6v4v_87`,flat:`_flat_l6v4v_148`,round:`_round_l6v4v_202`,pill:`_pill_l6v4v_271`,overflowDetect:`_overflowDetect_l6v4v_342`,overflowScroll:`_overflowScroll_l6v4v_350`,compact:`_compact_l6v4v_370`,menuTrigger:`_menuTrigger_l6v4v_376`,menuChevron:`_menuChevron_l6v4v_380`,menuList:`_menuList_l6v4v_388`,menuListItem:`_menuListItem_l6v4v_395`,menuListItemActive:`_menuListItemActive_l6v4v_434`,menuListItemIcon:`_menuListItemIcon_l6v4v_439`,menuListItemLabel:`_menuListItemLabel_l6v4v_445`,menuListItemCheck:`_menuListItemCheck_l6v4v_449`};exports.default=e;
+var e={switcher:`_switcher_1pziq_3`,indicator:`_indicator_1pziq_11`,item:`_item_1pziq_26`,iconOnly:`_iconOnly_1pziq_51`,itemIcon:`_itemIcon_1pziq_56`,itemLabel:`_itemLabel_1pziq_62`,default:`_default_1pziq_68`,active:`_active_1pziq_81`,flat:`_flat_1pziq_142`,round:`_round_1pziq_196`,pill:`_pill_1pziq_265`,overflowDetect:`_overflowDetect_1pziq_336`,overflowScroll:`_overflowScroll_1pziq_344`,compact:`_compact_1pziq_363`,menuTrigger:`_menuTrigger_1pziq_369`,menuChevron:`_menuChevron_1pziq_373`,menuList:`_menuList_1pziq_381`,menuListItem:`_menuListItem_1pziq_388`,menuListItemActive:`_menuListItemActive_1pziq_423`,menuListItemIcon:`_menuListItemIcon_1pziq_428`,menuListItemLabel:`_menuListItemLabel_1pziq_434`,menuListItemCheck:`_menuListItemCheck_1pziq_438`};exports.default=e;
 //# sourceMappingURL=InlineViewSwitcher.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n\n  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: left;\n  width: 100%;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"InlineViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.default .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .default .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.6));\n}\n\n.flat .item:hover:not(:disabled, .active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled, .active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgb(255 255 255 / 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.round .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #fff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .round .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgb(0 0 0 / 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.04);\n}\n\n.pill .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #fff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgb(255 255 255 / 0.08));\n  }\n\n  .pill .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.05);\n  }\n\n  .pill .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow: auto hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  text-align: left;\n  width: 100%;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,26 +1,26 @@
 var e = {
-	switcher: "_switcher_l6v4v_3",
-	indicator: "_indicator_l6v4v_11",
-	item: "_item_l6v4v_26",
-	iconOnly: "_iconOnly_l6v4v_57",
-	itemIcon: "_itemIcon_l6v4v_62",
-	itemLabel: "_itemLabel_l6v4v_68",
-	default: "_default_l6v4v_74",
-	active: "_active_l6v4v_87",
-	flat: "_flat_l6v4v_148",
-	round: "_round_l6v4v_202",
-	pill: "_pill_l6v4v_271",
-	overflowDetect: "_overflowDetect_l6v4v_342",
-	overflowScroll: "_overflowScroll_l6v4v_350",
-	compact: "_compact_l6v4v_370",
-	menuTrigger: "_menuTrigger_l6v4v_376",
-	menuChevron: "_menuChevron_l6v4v_380",
-	menuList: "_menuList_l6v4v_388",
-	menuListItem: "_menuListItem_l6v4v_395",
-	menuListItemActive: "_menuListItemActive_l6v4v_434",
-	menuListItemIcon: "_menuListItemIcon_l6v4v_439",
-	menuListItemLabel: "_menuListItemLabel_l6v4v_445",
-	menuListItemCheck: "_menuListItemCheck_l6v4v_449"
+	switcher: "_switcher_1pziq_3",
+	indicator: "_indicator_1pziq_11",
+	item: "_item_1pziq_26",
+	iconOnly: "_iconOnly_1pziq_51",
+	itemIcon: "_itemIcon_1pziq_56",
+	itemLabel: "_itemLabel_1pziq_62",
+	default: "_default_1pziq_68",
+	active: "_active_1pziq_81",
+	flat: "_flat_1pziq_142",
+	round: "_round_1pziq_196",
+	pill: "_pill_1pziq_265",
+	overflowDetect: "_overflowDetect_1pziq_336",
+	overflowScroll: "_overflowScroll_1pziq_344",
+	compact: "_compact_1pziq_363",
+	menuTrigger: "_menuTrigger_1pziq_369",
+	menuChevron: "_menuChevron_1pziq_373",
+	menuList: "_menuList_1pziq_381",
+	menuListItem: "_menuListItem_1pziq_388",
+	menuListItemActive: "_menuListItemActive_1pziq_423",
+	menuListItemIcon: "_menuListItemIcon_1pziq_428",
+	menuListItemLabel: "_menuListItemLabel_1pziq_434",
+	menuListItemCheck: "_menuListItemCheck_1pziq_438"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.module.css.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n\n  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: left;\n  width: 100%;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"InlineViewSwitcher.module.css.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.default .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .default .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.6));\n}\n\n.flat .item:hover:not(:disabled, .active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled, .active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgb(255 255 255 / 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.round .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #fff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .round .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgb(0 0 0 / 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.04);\n}\n\n.pill .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #fff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgb(255 255 255 / 0.08));\n  }\n\n  .pill .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.05);\n  }\n\n  .pill .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow: auto hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  text-align: left;\n  width: 100%;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-var e={backdrop:`_backdrop_1g4xm_3`,"backdrop-in":`_backdrop-in_1g4xm_1`,closing:`_closing_1g4xm_19`,"backdrop-out":`_backdrop-out_1g4xm_1`,modal:`_modal_1g4xm_43`,entering:`_entering_1g4xm_60`,"modal-in":`_modal-in_1g4xm_1`,"modal-out":`_modal-out_1g4xm_1`,header:`_header_1g4xm_92`,closeBtn:`_closeBtn_1g4xm_103`,title:`_title_1g4xm_144`,actions:`_actions_1g4xm_156`,btn:`_btn_1g4xm_165`,"btn-default":`_btn-default_1g4xm_210`,"btn-suggested":`_btn-suggested_1g4xm_214`,"btn-destructive":`_btn-destructive_1g4xm_228`,body:`_body_1g4xm_236`};exports.default=e;
+var e={backdrop:`_backdrop_y62af_3`,"backdrop-in":`_backdrop-in_y62af_1`,closing:`_closing_y62af_15`,"backdrop-out":`_backdrop-out_y62af_1`,modal:`_modal_y62af_41`,entering:`_entering_y62af_55`,"modal-in":`_modal-in_y62af_1`,"modal-out":`_modal-out_y62af_1`,header:`_header_y62af_89`,closeBtn:`_closeBtn_y62af_100`,title:`_title_y62af_138`,actions:`_actions_y62af_149`,btn:`_btn_y62af_158`,"btn-default":`_btn-default_y62af_198`,"btn-suggested":`_btn-suggested_y62af_202`,"btn-destructive":`_btn-destructive_y62af_216`,body:`_body_y62af_222`};exports.default=e;
 //# sourceMappingURL=Modal.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.module.css.cjs","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgba(0, 0, 0, 0.22),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  overflow: hidden;\n}\n\n.modal.entering {\n  animation: modal-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.modal.closing {\n  animation: modal-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modal-out {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 8px);\n  padding: 10px var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  flex-shrink: 0;\n}\n\n/* ─── Close button ──────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  flex-shrink: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.closeBtn:active {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.closeBtn:focus {\n  outline: none;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n/* Grows to fill center space — always present to keep actions right-aligned */\n.title {\n  flex: 1 1 auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Actions ───────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action buttons ────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 6px 14px;\n  border-radius: var(--gnome-radius-sm, 6px);\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-accent-color, #3584e4);\n\n  cursor: pointer;\n  white-space: nowrap;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 16%, transparent);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n/* stylelint-disable selector-class-pattern */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.btn-suggested {\n  background-color: var(--gnome-accent-color, #3584e4);\n  color: #fff;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-suggested:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 85%, #000);\n}\n\n.btn-suggested:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 70%, #000);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* stylelint-enable selector-class-pattern */\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .modal {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 40px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .backdrop.closing,\n  .modal.entering,\n  .modal.closing {\n    animation: none;\n  }\n\n  .btn,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Modal.module.css.cjs","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gnome-dialog-backdrop-color, rgb(0 0 0 / 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgb(0 0 0 / 0.22),\n    0 0 0 1px rgb(0 0 0 / 0.06);\n  overflow: hidden;\n}\n\n.modal.entering {\n  animation: modal-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.modal.closing {\n  animation: modal-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modal-out {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 8px);\n  padding: 10px var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.08));\n  flex-shrink: 0;\n}\n\n/* ─── Close button ──────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n}\n\n.closeBtn:active {\n  background-color: color-mix(in srgb, currentcolor 18%, transparent);\n}\n\n.closeBtn:focus {\n  outline: none;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n/* Grows to fill center space — always present to keep actions right-aligned */\n.title {\n  flex: 1 1 auto;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Actions ───────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action buttons ────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 6px 14px;\n  border-radius: var(--gnome-radius-sm, 6px);\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-accent-color, #3584e4);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 8%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 16%, transparent);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.btn-suggested {\n  background-color: var(--gnome-accent-color, #3584e4);\n  color: #fff;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-suggested:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 85%, #000);\n}\n\n.btn-suggested:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 70%, #000);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .modal {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 40px rgb(0 0 0 / 0.5),\n      0 0 0 1px rgb(255 255 255 / 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgb(255 255 255 / 0.08);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .backdrop.closing,\n  .modal.entering,\n  .modal.closing {\n    animation: none;\n  }\n\n  .btn,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}