@filipgutica/ui 1.14.1 → 1.16.0

package/dist/{use-active-section-DCS_wyYq.js → use-active-section-DMbpGE2f.js}

@@ -154,20 +154,72 @@ var N = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), H = { class: "fg-tabs" }, U = ["aria-label", "data-clipped"], W = [
+}), H = [
+	"aria-label",
+	"data-size",
+	"data-icon-only"
+], U = [
+	"aria-pressed",
+	"aria-label",
+	"title",
+	"disabled",
+	"onClick"
+], W = {
+	key: 0,
+	class: "fg-segmented__label"
+}, G = /* @__PURE__ */ c({
+	__name: "UiSegmentedControl",
+	props: {
+		label: {},
+		items: {},
+		modelValue: { default: () => void 0 },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let a = n;
+		return (n, o) => (f(), i("div", {
+			class: "fg-segmented",
+			role: "group",
+			"aria-label": t.label,
+			"data-size": t.size,
+			"data-icon-only": t.iconOnly ? "true" : void 0
+		}, [(f(!0), i(e, null, h(t.items, (e) => (f(), i("button", {
+			key: e.value,
+			type: "button",
+			class: "fg-segmented__item",
+			"aria-pressed": t.modelValue === e.value,
+			"aria-label": t.iconOnly ? e.label : void 0,
+			title: t.iconOnly ? e.label : void 0,
+			disabled: t.disabled || e.disabled,
+			onClick: (t) => a("update:modelValue", e.value)
+		}, [g(n.$slots, "icon", {
+			item: e,
+			pressed: t.modelValue === e.value
+		}), t.iconOnly ? r("", !0) : (f(), i("span", W, _(e.label), 1))], 8, U))), 128))], 8, H));
+	}
+}), K = { class: "fg-tabs" }, q = ["aria-label", "data-clipped"], J = [
 	"id",
 	"aria-controls",
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], G = [
+], Y = [
 	"id",
 	"role",
 	"aria-labelledby",
 	"hidden",
 	"tabindex"
-], K = ["id", "hidden"], q = /* @__PURE__ */ c({
+], X = ["id", "hidden"], Z = /* @__PURE__ */ c({
 	__name: "UiTabs",
 	props: {
 		items: {},
@@ -224,7 +276,7 @@ var N = /* @__PURE__ */ c({
 				inline: "nearest"
 			}));
 		};
-		return (t, o) => (f(), i("div", H, [l.value ? (f(), i("div", {
+		return (t, o) => (f(), i("div", K, [l.value ? (f(), i("div", {
 			key: 0,
 			ref_key: "list",
 			ref: C,
@@ -245,7 +297,7 @@ var N = /* @__PURE__ */ c({
 			tabindex: e.value === d.value ? 0 : -1,
 			onClick: (t) => O(e.value),
 			onFocus: (t) => O(e.value)
-		}, _(e.label), 41, W))), 128))], 40, U)) : r("", !0), (f(!0), i(e, null, h(n.items, (e) => (f(), i("section", {
+		}, _(e.label), 41, J))), 128))], 40, q)) : r("", !0), (f(!0), i(e, null, h(n.items, (e) => (f(), i("section", {
 			id: v(e.value),
 			key: e.value,
 			class: "fg-tabs__panel",
@@ -257,9 +309,9 @@ var N = /* @__PURE__ */ c({
 			id: S(e.value),
 			class: "fg-tabs__heading",
 			hidden: l.value
-		}, _(e.label), 9, K), g(t.$slots, "panel", { value: e.value })], 8, G))), 128))]));
+		}, _(e.label), 9, X), g(t.$slots, "panel", { value: e.value })], 8, Y))), 128))]));
 	}
-}), J = ({ targetIds: e }) => {
+}), Q = ({ targetIds: e }) => {
 	let t = m(e[0]), n, r, i;
 	return u(() => {
 		let a = e.flatMap((e) => {
@@ -302,4 +354,4 @@ var N = /* @__PURE__ */ c({
 	}), p(t);
 };
 //#endregion
-export { P as a, R as i, q as n, N as o, V as r, J as t };
+export { R as a, V as i, Z as n, P as o, G as r, N as s, Q as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.14.1",
+  "version": "1.16.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [

package/src/components.css

@@ -5,7 +5,7 @@
   /* Package-owned typography keeps controls consistent across consuming apps. */
   .fg-button, .fg-input, .fg-select, .fg-checkbox, .fg-field,
   .fg-radio-card, .fg-badge, .fg-alert, .fg-surface, .fg-card,
-  .fg-dialog__content, .fg-code-block, .fg-toggle-button, .fg-switch {
+  .fg-dialog__content, .fg-code-block, .fg-toggle-button, .fg-switch, .fg-segmented {
     font-family: var(--font-ui);
     font-size: var(--text-md);
     font-weight: var(--weight-regular);
@@ -172,7 +172,8 @@
   .fg-select:disabled,
   .fg-checkbox[data-disabled="true"],
   .fg-switch[data-disabled="true"],
-  .fg-toggle-button:disabled {
+  .fg-toggle-button:disabled,
+  .fg-segmented__item:disabled {
     cursor: not-allowed;
     opacity: 0.58;
   }
@@ -721,6 +722,50 @@
   .fg-toggle-button:hover:not(:disabled, [aria-pressed="true"]) { border-color: var(--color-border); }
   .fg-toggle-button[aria-pressed="true"] { border-color: var(--color-accent); }
 
+  /* Segmented control: one pressed choice on a muted track, so it reads as a raised thumb in both themes. */
+  .fg-segmented {
+    --fg-segmented-item: var(--control-md);
+    /* The thumb is lighter than the track in both themes; the dark raised surface is darker than the track. */
+    --fg-segmented-thumb: light-dark(var(--color-row-selected), color-mix(in srgb, var(--color-text) 10%, var(--color-surface-muted)));
+    display: inline-flex;
+    flex: none;
+    /* The fill alone marks the track. The transparent border keeps its size, and forced colors draw it. */
+    border: 1px solid transparent;
+    border-radius: var(--radius-control);
+    background: var(--color-surface-muted);
+  }
+  .fg-segmented[data-size="sm"] { --fg-segmented-item: var(--control-sm); font-size: var(--text-sm); }
+  .fg-segmented[data-size="lg"] { --fg-segmented-item: var(--control-lg); font-size: var(--text-lg); }
+  .fg-segmented__item {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    gap: var(--space-2);
+    min-height: var(--fg-segmented-item);
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-3);
+    border: 0;
+    border-radius: var(--radius-control);
+    color: var(--color-muted);
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+  }
+  .fg-segmented[data-icon-only="true"] .fg-segmented__item { width: var(--fg-segmented-item); padding: 0; }
+  /* The thumb is inset inside each full-size button, so it floats on the track and the hit target keeps its size. */
+  .fg-segmented__item::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: var(--radius-inline); }
+  .fg-segmented__item:hover:not(:disabled, [aria-pressed="true"]) { color: var(--color-text); }
+  .fg-segmented__item:hover:not(:disabled, [aria-pressed="true"])::before { background: color-mix(in srgb, var(--fg-segmented-thumb) 45%, transparent); }
+  /* The ring gives the pressed choice 3:1 against the track in both themes (WCAG 1.4.11). */
+  .fg-segmented__item[aria-pressed="true"] { color: var(--color-text); }
+  /* Drawn inside the button, the ring hugs the thumb instead of reaching the next choice. */
+  .fg-segmented .fg-segmented__item:focus-visible { outline-offset: -2px; }
+  .fg-segmented__item[aria-pressed="true"]::before {
+    background: var(--fg-segmented-thumb);
+    box-shadow: inset 0 0 0 1px var(--color-border);
+  }
+
   .fg-switch { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
   .fg-switch__control {
     display: inline-flex;
@@ -943,6 +988,7 @@
   .fg-dialog__close:focus-visible,
   .fg-dialog__content:focus-visible,
   .fg-toggle-button:focus-visible,
+  .fg-segmented__item:focus-visible,
   .fg-switch__control:focus-visible .fg-switch__track {
     outline: 2px solid var(--color-focus);
     outline-offset: 2px;
@@ -979,6 +1025,9 @@
   }
 
   @media (forced-colors: active) {
+    /* Forced colors drop the fill and the ring, so the pressed choice takes the system highlight. */
+    .fg-segmented__item[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; }
+    .fg-segmented__item[aria-pressed="true"]::before { forced-color-adjust: none; background: Highlight; }
     .fg-switch__track { border-color: ButtonText; background: Canvas; }
     .fg-switch__track::after { background: ButtonText; }
     .fg-switch__control[aria-checked="true"] .fg-switch__track { border-color: Highlight; background: Highlight; forced-color-adjust: none; }

package/src/site.css

@@ -224,48 +224,15 @@
   .fg-site-nav a[aria-current="location"] { box-shadow: inset 2px 0 0 var(--color-project); color: var(--color-text); font-weight: var(--weight-medium); }
   .fg-site-nav a code { font-family: var(--font-mono); font-size: var(--text-sm); }
 
-  .fg-site-appearance {
-    display: inline-flex;
-    flex: none;
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-control);
-    /* A muted track, so the pressed choice reads as a raised thumb in both themes. */
-    background: var(--color-surface-muted);
-  }
-  .fg-site-appearance__choice {
-    display: inline-flex;
-    width: var(--control-lg);
-    min-height: var(--control-lg);
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: 0;
-    color: var(--color-muted);
-    background: transparent;
-    font: inherit;
-    cursor: pointer;
-  }
-  .fg-site-appearance__choice + .fg-site-appearance__choice { border-left: 1px solid var(--color-border-subtle); }
-  .fg-site-appearance__choice:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
-  .fg-site-appearance__choice:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
-  .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
-  /* The ring gives the pressed choice 3:1 against the track in both themes (WCAG 1.4.11). */
-  .fg-site-appearance__choice[aria-pressed="true"] {
-    color: var(--color-text);
-    background: var(--color-row-selected);
-    box-shadow: inset 0 0 0 1px var(--color-border);
-  }
-  /* Forced colors drop the fill and the ring, so the pressed choice takes the system highlight. */
+  /* Forced colors drop the inset marker, so the current link takes a system border. */
   @media (forced-colors: active) {
     .fg-site-nav a[aria-current] { border-inline-start: 2px solid Highlight; }
-    .fg-site-appearance__choice[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; background: Highlight; }
   }
 
   /* Focus is a 2px outline outside the control, which forced-colors mode keeps. An
    * inset ring is used only where a scrolling ancestor would clip an outer one. */
   .fg-site-header a:focus-visible,
-  .fg-site-projects__trigger:focus-visible,
-  .fg-site-appearance__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+  .fg-site-projects__trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
   /* Inset: the desktop rail and the phone drawer scroll. */
   .fg-site-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }