npm - @gnome-ui/react - Versions diffs - 1.47.0 → 1.48.0 - Mend

@gnome-ui/react 1.47.0 → 1.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/components/EntryRow/EntryRow.module.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={row:`_row_1m20y_3`,focused:`_focused_1m20y_16`,disabled:`_disabled_1m20y_25`,leading:`_leading_1m20y_33`,trailing:`_trailing_1m20y_40`,fieldWrap:`_fieldWrap_1m20y_49`,label:`_label_1m20y_61`,labelFloated:`_labelFloated_1m20y_82`,input:`_input_1m20y_91`,inputFloated:`_inputFloated_1m20y_114`};exports.default=e;
+var e={row:`_row_14iw1_3`,focused:`_focused_14iw1_16`,disabled:`_disabled_14iw1_25`,leading:`_leading_14iw1_33`,trailing:`_trailing_14iw1_40`,fieldWrap:`_fieldWrap_14iw1_49`,label:`_label_14iw1_61`,labelFloated:`_labelFloated_14iw1_82`,input:`_input_14iw1_91`,inputFloated:`_inputFloated_14iw1_114`};exports.default=e;
 //# sourceMappingURL=EntryRow.module.css.cjs.map

package/dist/components/EntryRow/EntryRow.module.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntryRow.module.css.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 0 var(--gnome-space-4, 24px);\n min-height: ~~52px~~;\n width: 100%;\n cursor: text;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Disabled ──────────────────────────────────────────────────────────────── /\n\n.disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ ─── Leading / trailing ────────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--gnome-space-1, 6px);\n}\n\n/ ─── Field wrap ────────────────────────────────────────────────────────────── /\n\n.fieldWrap {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n min-width: 0;\n min-height: ~~52px~~;\n}\n\n/ ─── Floating label ────────────────────────────────────────────────────────── /\n\n.label {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n\n transition:\n top var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default),\n font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/ When floated (focused or has value) the label moves up /\n.labelFloated {\n top: ~~10px~~;\n transform: translateY(0);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: 0.7;\n}\n\n/ ─── Input field ───────────────────────────────────────────────────────────── /\n\n.input {\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n / Hide until floated — the label is the placeholder /\n opacity: 0;\n padding-top: ~~18px~~;\n padding-bottom: 4px;\n\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0\n calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .row,\n .label,\n .input {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"EntryRow.module.css.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 0 var(--gnome-space-4, 24px);\n min-height: 56px;\n width: 100%;\n cursor: text;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Disabled ──────────────────────────────────────────────────────────────── /\n\n.disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ ─── Leading / trailing ────────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--gnome-space-1, 6px);\n}\n\n/ ─── Field wrap ────────────────────────────────────────────────────────────── /\n\n.fieldWrap {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n min-width: 0;\n min-height: 56px;\n}\n\n/ ─── Floating label ────────────────────────────────────────────────────────── /\n\n.label {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n\n transition:\n top var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default),\n font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/ When floated (focused or has value) the label moves up /\n.labelFloated {\n top: 6px;\n transform: translateY(0);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: 0.7;\n}\n\n/ ─── Input field ───────────────────────────────────────────────────────────── /\n\n.input {\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n / Hide until floated — the label is the placeholder /\n opacity: 0;\n padding-top: 24px;\n padding-bottom: 4px;\n\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0\n calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .row,\n .label,\n .input {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/EntryRow/EntryRow.module.css.js CHANGED Viewed

@@ -1,14 +1,14 @@
 var e = {
-	row: "_row_1m20y_3",
-	focused: "_focused_1m20y_16",
-	disabled: "_disabled_1m20y_25",
-	leading: "_leading_1m20y_33",
-	trailing: "_trailing_1m20y_40",
-	fieldWrap: "_fieldWrap_1m20y_49",
-	label: "_label_1m20y_61",
-	labelFloated: "_labelFloated_1m20y_82",
-	input: "_input_1m20y_91",
-	inputFloated: "_inputFloated_1m20y_114"
+	row: "_row_14iw1_3",
+	focused: "_focused_14iw1_16",
+	disabled: "_disabled_14iw1_25",
+	leading: "_leading_14iw1_33",
+	trailing: "_trailing_14iw1_40",
+	fieldWrap: "_fieldWrap_14iw1_49",
+	label: "_label_14iw1_61",
+	labelFloated: "_labelFloated_14iw1_82",
+	input: "_input_14iw1_91",
+	inputFloated: "_inputFloated_14iw1_114"
 };
 //#endregion
 export { e as default };

package/dist/components/EntryRow/EntryRow.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntryRow.module.css.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 0 var(--gnome-space-4, 24px);\n min-height: ~~52px~~;\n width: 100%;\n cursor: text;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Disabled ──────────────────────────────────────────────────────────────── /\n\n.disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ ─── Leading / trailing ────────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--gnome-space-1, 6px);\n}\n\n/ ─── Field wrap ────────────────────────────────────────────────────────────── /\n\n.fieldWrap {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n min-width: 0;\n min-height: ~~52px~~;\n}\n\n/ ─── Floating label ────────────────────────────────────────────────────────── /\n\n.label {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n\n transition:\n top var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default),\n font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/ When floated (focused or has value) the label moves up /\n.labelFloated {\n top: ~~10px~~;\n transform: translateY(0);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: 0.7;\n}\n\n/ ─── Input field ───────────────────────────────────────────────────────────── /\n\n.input {\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n / Hide until floated — the label is the placeholder /\n opacity: 0;\n padding-top: ~~18px~~;\n padding-bottom: 4px;\n\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0\n calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .row,\n .label,\n .input {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"EntryRow.module.css.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 0 var(--gnome-space-4, 24px);\n min-height: 56px;\n width: 100%;\n cursor: text;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Disabled ──────────────────────────────────────────────────────────────── /\n\n.disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ ─── Leading / trailing ────────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--gnome-space-1, 6px);\n}\n\n/ ─── Field wrap ────────────────────────────────────────────────────────────── /\n\n.fieldWrap {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n min-width: 0;\n min-height: 56px;\n}\n\n/ ─── Floating label ────────────────────────────────────────────────────────── /\n\n.label {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n\n transition:\n top var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default),\n font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/ When floated (focused or has value) the label moves up /\n.labelFloated {\n top: 6px;\n transform: translateY(0);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: 0.7;\n}\n\n/ ─── Input field ───────────────────────────────────────────────────────────── /\n\n.input {\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n / Hide until floated — the label is the placeholder /\n opacity: 0;\n padding-top: 24px;\n padding-bottom: 4px;\n\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .focused {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0\n calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .row,\n .label,\n .input {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineViewSwitcher.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n createContext,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useContext,\n useRef,\n} from 'react';\n\nimport styles from './InlineViewSwitcher.module.css';\n\nexport type InlineViewSwitcherVariant = 'default' \| 'flat' \| 'round' \| 'pill';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue \| null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n const ctx = useContext(InlineViewSwitcherContext);\n\n if (!ctx) {\n throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n }\n\n return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n /** Currently active view name. /\n value: string;\n /* Called with the new value when a view is selected. /\n onValueChange: (value: string) => void;\n /\n Visual style of the switcher.\n * - `default` — card background with border and shadow (same as `ToggleGroup`).\n * - `flat` — no background or border; active indicator only.\n * - `round` — pill-shaped container and items.\n * - `pill` — segmented-control style; active item appears lifted, no accent color.\n /\n variant?: InlineViewSwitcherVariant;\n /* Accessible label for the group. /\n 'aria-label'?: string;\n children?: ReactNode;\n}\n\n/\n Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n \n Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n \n Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport const InlineViewSwitcher = ({\n value,\n onValueChange,\n variant = 'default',\n 'aria-label': ariaLabel = 'View switcher',\n children,\n className,\n ...props\n}: InlineViewSwitcherProps) => {\n const groupRef = useRef<HTMLDivElement>(null);\n\n function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n const items = Array.from(\n groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n );\n const activeElement = document.activeElement;\n const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n if (idx === -1) {\n return;\n }\n\n let next = idx;\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n next = (idx + 1) % items.length;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n next = (idx - 1 + items.length) % items.length;\n } else if (e.key === 'Home') {\n next = 0;\n } else if (e.key === 'End') {\n next = items.length - 1;\n } else {\n return;\n }\n\n e.preventDefault();\n items[next].focus();\n items[next].click();\n }\n\n return (\n <InlineViewSwitcherContext.Provider value={{ value, onValueChange }}>\n <div\n ref={groupRef}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n onKeyDown={handleKeyDown}\n className={[styles.switcher, styles[variant], className].filter(Boolean).join(' ')}\n {...props}\n >\n {children}\n </div>\n </InlineViewSwitcherContext.Provider>\n );\n};\n"],"mappings":"6GAoBA,IAAM,GAAA,EAAA,EAAA,eAAiF,IAAI,EAG3F,SAAgB,GAAwB,CACtC,IAAM,GAAA,EAAA,EAAA,YAAiB,CAAyB,EAEhD,GAAI,CAAC,EACH,MAAU,MAAM,+DAA+D,EAGjF,OAAO,CACT,CAiCA,IAAa,GAAsB,CACjC,QACA,gBACA,UAAU,UACV,aAAc,EAAY,gBAC1B,WACA,YACA,GAAG,KAC0B,CAC7B,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EAE5C,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,6BAA6B,GAAK,CAAC,CAC3F,EACM,EAAgB,SAAS,cACzB,EAAM,aAAyB,kBAAoB,EAAM,QAAQ,CAAa,EAAI,GAExF,GAAI,IAAQ,GACV,OAGF,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,YACpB,GAAI,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC5C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,YACnC,GAAI,EAAE,MAAQ,OACnB,EAAO,OACF,GAAI,EAAE,MAAQ,MACnB,EAAO,EAAM,OAAS,OAEtB,OAGF,EAAE,eAAe,EACjB,EAAM,GAAM,MAAM,EAClB,EAAM,GAAM,MAAM,CACpB,CAEA,OACE,EAAA,EAAA,KAAC,EAA0B,SAA3B,CAAoC,MAAO,CAAE,QAAO,eAAc,YAChE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EACX,UAAW,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACjF,GAAI,EAEH,UACE,CAAA,CAC6B,CAAA,CAExC"}
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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"}

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

@@ -1,8 +1,10 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';
+export type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';
 interface InlineViewSwitcherContextValue {
     value: string;
     onValueChange: (value: string) => void;
+    compact: boolean;
 }
 export declare function useInlineViewSwitcher(): InlineViewSwitcherContextValue;
 export interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {
@@ -18,6 +20,14 @@ export interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement>
      * - `pill`    — segmented-control style; active item appears lifted, no accent color.
      */
     variant?: InlineViewSwitcherVariant;
+    /**
+     * Overflow strategy when the container is too narrow for all items.
+     * - `wrap`    — default; items overflow with no special handling.
+     * - `scroll`  — horizontal scroll with hidden scrollbar.
+     * - `compact` — collapses item labels to icons-only when overflowing (requires icons on all items).
+     * - `menu`    — shows the active item and a chevron trigger; all items open in a BottomSheet.
+     */
+    overflow?: InlineViewSwitcherOverflow;
     /** Accessible label for the group. */
     'aria-label'?: string;
     children?: ReactNode;
@@ -33,5 +43,5 @@ export interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement>
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html
  */
-export declare const InlineViewSwitcher: ({ value, onValueChange, variant, "aria-label": ariaLabel, children, className, ...props }: InlineViewSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineViewSwitcher: ({ value, onValueChange, variant, overflow, "aria-label": ariaLabel, children, className, ...props }: InlineViewSwitcherProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineViewSwitcher.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.tsx"],"sourcesContent":["import {\n createContext,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useContext,\n useRef,\n} from 'react';\n\nimport styles from './InlineViewSwitcher.module.css';\n\nexport type InlineViewSwitcherVariant = 'default' \| 'flat' \| 'round' \| 'pill';\n\n// ─── Internal context ──────────────────────────────────────────────────────────\n\ninterface InlineViewSwitcherContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst InlineViewSwitcherContext = createContext<InlineViewSwitcherContextValue \| null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useInlineViewSwitcher() {\n const ctx = useContext(InlineViewSwitcherContext);\n\n if (!ctx) {\n throw new Error('InlineViewSwitcherItem must be used inside InlineViewSwitcher');\n }\n\n return ctx;\n}\n\n// ─── InlineViewSwitcher ────────────────────────────────────────────────────────\n\nexport interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n /** Currently active view name. /\n value: string;\n /* Called with the new value when a view is selected. /\n onValueChange: (value: string) => void;\n /\n Visual style of the switcher.\n * - `default` — card background with border and shadow (same as `ToggleGroup`).\n * - `flat` — no background or border; active indicator only.\n * - `round` — pill-shaped container and items.\n * - `pill` — segmented-control style; active item appears lifted, no accent color.\n /\n variant?: InlineViewSwitcherVariant;\n /* Accessible label for the group. /\n 'aria-label'?: string;\n children?: ReactNode;\n}\n\n/\n Compact inline view switcher for placing inside content areas, cards, or\n * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.\n \n Built on `ToggleGroup` internals with `flat` and `round` style variants.\n * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).\n \n Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html\n */\nexport const InlineViewSwitcher = ({\n value,\n onValueChange,\n variant = 'default',\n 'aria-label': ariaLabel = 'View switcher',\n children,\n className,\n ...props\n}: InlineViewSwitcherProps) => {\n const groupRef = useRef<HTMLDivElement>(null);\n\n function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n const items = Array.from(\n groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n );\n const activeElement = document.activeElement;\n const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n if (idx === -1) {\n return;\n }\n\n let next = idx;\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n next = (idx + 1) % items.length;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n next = (idx - 1 + items.length) % items.length;\n } else if (e.key === 'Home') {\n next = 0;\n } else if (e.key === 'End') {\n next = items.length - 1;\n } else {\n return;\n }\n\n e.preventDefault();\n items[next].focus();\n items[next].click();\n }\n\n return (\n <InlineViewSwitcherContext.Provider value={{ value, onValueChange }}>\n <div\n ref={groupRef}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n onKeyDown={handleKeyDown}\n className={[styles.switcher, styles[variant], className].filter(Boolean).join(' ')}\n {...props}\n >\n {children}\n </div>\n </InlineViewSwitcherContext.Provider>\n );\n};\n"],"mappings":";;;;AAoBA,IAAM,IAA4B,EAAqD,IAAI;AAG3F,SAAgB,IAAwB;CACtC,IAAM,IAAM,EAAW,CAAyB;CAEhD,IAAI,CAAC,GACH,MAAU,MAAM,+DAA+D;CAGjF,OAAO;AACT;AAiCA,IAAa,KAAsB,EACjC,UACA,kBACA,aAAU,WACV,cAAc,IAAY,iBAC1B,aACA,cACA,GAAG,QAC0B;CAC7B,IAAM,IAAW,EAAuB,IAAI;CAE5C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,6BAA6B,KAAK,CAAC,CAC3F,GACM,IAAgB,SAAS,eACzB,IAAM,aAAyB,oBAAoB,EAAM,QAAQ,CAAa,IAAI;EAExF,IAAI,MAAQ,IACV;EAGF,IAAI,IAAO;EACX,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aACtC,KAAQ,IAAM,KAAK,EAAM;OACpB,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAC5C,KAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;OACnC,IAAI,EAAE,QAAQ,QACnB,IAAO;OACF,IAAI,EAAE,QAAQ,OACnB,IAAO,EAAM,SAAS;OAEtB;EAKF,AAFA,EAAE,eAAe,GACjB,EAAM,GAAM,MAAM,GAClB,EAAM,GAAM,MAAM;CACpB;CAEA,OACE,kBAAC,EAA0B,UAA3B;EAAoC,OAAO;GAAE;GAAO;EAAc;YAChE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW;GACX,WAAW;IAAC,EAAO;IAAU,EAAO;IAAU;GAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GACjF,GAAI;GAEH;EACE,CAAA;CAC6B,CAAA;AAExC"}
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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"}

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

@@ -1,2 +1,2 @@
-var e={switcher:`_switcher_2455r_3`,item:`_item_2455r_10`,iconOnly:`_iconOnly_2455r_38`,itemIcon:`_itemIcon_2455r_43`,itemLabel:`_itemLabel_2455r_49`,default:`_default_2455r_55`,active:`_active_2455r_68`,flat:`_flat_2455r_123`,round:`_round_2455r_171`,pill:`_pill_2455r_237`};exports.default=e;
+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;
 //# sourceMappingURL=InlineViewSwitcher.module.css.cjs.map

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

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

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

@@ -1,14 +1,26 @@
 var e = {
-	switcher: "_switcher_2455r_3",
-	item: "_item_2455r_10",
-	iconOnly: "_iconOnly_2455r_38",
-	itemIcon: "_itemIcon_2455r_43",
-	itemLabel: "_itemLabel_2455r_49",
-	default: "_default_2455r_55",
-	active: "_active_2455r_68",
-	flat: "_flat_2455r_123",
-	round: "_round_2455r_171",
-	pill: "_pill_2455r_237"
+	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"
 };
 //#endregion
 export { e as default };

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

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

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../Icon/Icon.cjs"),t=require("./InlineViewSwitcher.module.css.cjs"),n=require("./InlineViewSwitcher.cjs");let r=require("react/jsx-runtime");var i=({name:i,label:a,icon:o,disabled:s,className:c,...l})=>{let{value:u,onValueChange:d}=n.useInlineViewSwitcher(),f=u===i,p=o&&!a;return(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":f,tabIndex:f?0:-1,disabled:s,onClick:()=>d(i),className:[t.default.item,f?t.default.active:null,p?t.default.iconOnly:null,c].filter(Boolean).join(` `),...l,children:[o&&(0,r.jsx)(`span`,{className:t.default.itemIcon,children:(0,r.jsx)(e.Icon,{icon:o,size:`md`,"aria-hidden":!0})}),a&&(0,r.jsx)(`span`,{className:t.default.itemLabel,children:a})]})};exports.InlineViewSwitcherItem=i;
+const e=require("../Icon/Icon.cjs"),t=require("./InlineViewSwitcher.module.css.cjs"),n=require("./InlineViewSwitcher.cjs");let r=require("react/jsx-runtime");var i=({name:i,label:a,icon:o,disabled:s,className:c,...l})=>{let{value:u,onValueChange:d,compact:f}=n.useInlineViewSwitcher(),p=u===i,m=!!a&&!(f&&o),h=!!o&&!m;return(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":p,tabIndex:p?0:-1,disabled:s,onClick:()=>d(i),className:[t.default.item,p?t.default.active:null,h?t.default.iconOnly:null,c].filter(Boolean).join(` `),...l,children:[o&&(0,r.jsx)(`span`,{className:t.default.itemIcon,children:(0,r.jsx)(e.Icon,{icon:o,size:`md`,"aria-hidden":!0})}),m&&(0,r.jsx)(`span`,{className:t.default.itemLabel,children:a})]})};i.displayName=`InlineViewSwitcherItem`,exports.InlineViewSwitcherItem=i;
 //# sourceMappingURL=InlineViewSwitcherItem.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineViewSwitcherItem.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** String identifier — used as the switcher's `value` when this item is active. /\n name: string;\n /* Visible label. /\n label?: string;\n /* Icon from `@gnome-ui/icons`. /\n icon?: IconDefinition;\n}\n\n/\n Individual view option inside an `InlineViewSwitcher`.\n \n Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport const InlineViewSwitcherItem = ({\n name,\n label,\n icon,\n disabled,\n className,\n ...props\n}: InlineViewSwitcherItemProps) => {\n const { value, onValueChange } = useInlineViewSwitcher();\n const active = value === name;\n const ~~iconOnly~~ = icon && !~~label~~;\n\n return (\n <button\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n tabIndex={active ? 0 : -1}\n disabled={disabled}\n onClick={() => onValueChange(name)}\n className={[\n styles.item,\n active ? styles.active : null,\n ~~iconOnly~~ ? styles.iconOnly : null,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n >\n {icon && (\n <span className={styles.itemIcon}>\n <Icon icon={icon} size=\"md\" aria-hidden />\n </span>\n )}\n {~~label~~ && <span className={styles.itemLabel}>{label}</span>}\n </button>\n );\n};\n"],"mappings":"8JAuBA,IAAa,GAA0B,CACrC,OACA,QACA,OACA,WACA,YACA,GAAG,KAC8B,CACjC,GAAM,CAAE,QAAO,~~iBAAkB~~,EAAA,sBAAsB,~~EACjD~~,EAAS,IAAU,~~EACnB~~,~~EAAW~~,GAAQ,CAAC,~~EAE1B~~,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,CAAI,EACjC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,~~EAAW~~,EAAA,QAAO,SAAW,~~KAC7B~~,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,~~IAAS~~,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,~~CACpD~~,GAEZ"}
1	+ {"version":3,"file":"InlineViewSwitcherItem.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** String identifier — used as the switcher's `value` when this item is active. /\n name: string;\n /* Visible label. /\n label?: string;\n /* Icon from `@gnome-ui/icons`. /\n icon?: IconDefinition;\n}\n\n/\n Individual view option inside an `InlineViewSwitcher`.\n \n Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport const InlineViewSwitcherItem = ({\n name,\n label,\n icon,\n disabled,\n className,\n ...props\n}: InlineViewSwitcherItemProps) => {\n const { value, onValueChange, compact } = useInlineViewSwitcher();\n const active = value === name;\n // In compact mode, hide the label when an icon is present as a fallback\n const showLabel = !!label && !(compact && icon);\n const isIconOnly = !!icon && !showLabel;\n\n return (\n <button\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n tabIndex={active ? 0 : -1}\n disabled={disabled}\n onClick={() => onValueChange(name)}\n className={[\n styles.item,\n active ? styles.active : null,\n isIconOnly ? styles.iconOnly : null,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n >\n {icon && (\n <span className={styles.itemIcon}>\n <Icon icon={icon} size=\"md\" aria-hidden />\n </span>\n )}\n {showLabel && <span className={styles.itemLabel}>{label}</span>}\n </button>\n );\n};\n\nInlineViewSwitcherItem.displayName = 'InlineViewSwitcherItem';\n"],"mappings":"8JAuBA,IAAa,GAA0B,CACrC,OACA,QACA,OACA,WACA,YACA,GAAG,KAC8B,CACjC,GAAM,CAAE,QAAO,gBAAe,WAAY,EAAA,sBAAsB,EAC1D,EAAS,IAAU,EAEnB,EAAY,CAAC,CAAC,GAAS,EAAE,GAAW,GACpC,EAAa,CAAC,CAAC,GAAQ,CAAC,EAE9B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,CAAI,EACjC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAa,EAAA,QAAO,SAAW,KAC/B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,IAAa,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,CACxD,GAEZ,EAEA,EAAuB,YAAc"}