@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-toggle-group.mjs

@@ -0,0 +1,477 @@
+import "@angular/cdk/a11y";
+import { Directionality } from "@angular/cdk/bidi";
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, booleanAttribute, computed, contentChildren, forwardRef, inject, input, model, numberAttribute, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { toggleVariants } from "@loomui-ng/ui/toggle";
+const toggleGroupClass = "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch";
+const toggleGroupItemClass = "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 border border-input bg-transparent hover:bg-muted h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2";
+const UI_TOGGLE_GROUP_GENERATED = [];
+var UiToggleGroup = class UiToggleGroup {
+	type = input("single", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	spacing = input(0, {
+		...ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	dir = inject(Directionality);
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	items = contentChildren(forwardRef(() => UiToggleGroupItem), {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	classes = computed(() => cn(toggleGroupClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	isOn(v) {
+		return this.value().includes(v);
+	}
+	toggle(v) {
+		const on = this.isOn(v);
+		const next = this.type() === "multiple" ? on ? this.value().filter((x) => x !== v) : [...this.value(), v] : on ? [] : [v];
+		this.value.set(next);
+		this.onChange(next);
+	}
+	tabStop = computed(() => {
+		const enabled = this.items().filter((i) => !i.isDisabled());
+		return (enabled.find((i) => this.isOn(i.value())) ?? enabled[0])?.value() ?? null;
+	}, ...ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []);
+	onKeydown(e) {
+		const enabled = this.items().filter((i) => !i.isDisabled());
+		const i = enabled.findIndex((it) => it.el === document.activeElement);
+		if (i < 0) return;
+		const horizontal = this.orientation() === "horizontal";
+		const rtl = this.dir.value === "rtl";
+		const next = horizontal ? rtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+		const prev = horizontal ? rtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+		let t = -1;
+		if (e.key === next) t = (i + 1) % enabled.length;
+		else if (e.key === prev) t = (i - 1 + enabled.length) % enabled.length;
+		else if (e.key === "Home") t = 0;
+		else if (e.key === "End") t = enabled.length - 1;
+		if (t >= 0) {
+			e.preventDefault();
+			enabled[t].el.focus();
+		}
+	}
+	writeValue(v) {
+		this.value.set(Array.isArray(v) ? v : v ? [v] : []);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.cvaDisabled.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiToggleGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiToggleGroup,
+		isStandalone: true,
+		selector: "[uiToggleGroup], ui-toggle-group",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spacing: {
+				classPropertyName: "spacing",
+				publicName: "spacing",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			attributes: {
+				"role": "group",
+				"data-slot": "toggle-group"
+			},
+			listeners: { "keydown": "onKeydown($event)" },
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-size": "size()",
+				"attr.data-spacing": "spacing()",
+				"attr.data-orientation": "orientation()",
+				"style.--gap": "spacing()",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiToggleGroup),
+			multi: true
+		}],
+		queries: [{
+			propertyName: "items",
+			predicate: i0.forwardRef(() => UiToggleGroupItem),
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiToggleGroup"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiToggleGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiToggleGroup], ui-toggle-group",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiToggleGroup",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiToggleGroup),
+				multi: true
+			}],
+			host: {
+				role: "group",
+				"data-slot": "toggle-group",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-size]": "size()",
+				"[attr.data-spacing]": "spacing()",
+				"[attr.data-orientation]": "orientation()",
+				"[style.--gap]": "spacing()",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		spacing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spacing",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiToggleGroupItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiToggleGroupItem = class UiToggleGroupItem {
+	group = inject(UiToggleGroup);
+	el = inject(ElementRef).nativeElement;
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	on = computed(() => this.group.isOn(this.value()), ...ngDevMode ? [{ debugName: "on" }] : /* istanbul ignore next */ []);
+	resolvedVariant = computed(() => this.variant() ?? this.group.variant(), ...ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []);
+	resolvedSize = computed(() => this.size() ?? this.group.size(), ...ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []);
+	get disabled() {
+		return this.isDisabled();
+	}
+	isDisabled = () => this.disabledInput() || this.group.isDisabled();
+	focus() {
+		this.el.focus();
+	}
+	classes = computed(() => cn(toggleVariants({
+		variant: this.resolvedVariant(),
+		size: this.resolvedSize()
+	}), toggleGroupItemClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiToggleGroupItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiToggleGroupItem,
+		isStandalone: true,
+		selector: "button[uiToggleGroupItem], ui-toggle-group-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"type": "button",
+				"data-slot": "toggle-group-item"
+			},
+			listeners: {
+				"click": "group.toggle(value())",
+				"blur": "group.onTouched()"
+			},
+			properties: {
+				"attr.role": "group.type() === \"single\" ? \"radio\" : null",
+				"attr.aria-checked": "group.type() === \"single\" ? on() : null",
+				"attr.aria-pressed": "group.type() === \"multiple\" ? on() : null",
+				"attr.data-state": "on() ? \"on\" : \"off\"",
+				"attr.data-variant": "resolvedVariant()",
+				"attr.data-size": "resolvedSize()",
+				"attr.data-spacing": "group.spacing()",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.disabled": "(isDisabled()) ? \"\" : null",
+				"attr.tabindex": "group.tabStop() === value() ? 0 : -1",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiToggleGroupItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiToggleGroupItem], ui-toggle-group-item",
+			hostDirectives: [UiElementHost],
+			host: {
+				type: "button",
+				"data-slot": "toggle-group-item",
+				"[attr.role]": "group.type() === \"single\" ? \"radio\" : null",
+				"[attr.aria-checked]": "group.type() === \"single\" ? on() : null",
+				"[attr.aria-pressed]": "group.type() === \"multiple\" ? on() : null",
+				"[attr.data-state]": "on() ? \"on\" : \"off\"",
+				"[attr.data-variant]": "resolvedVariant()",
+				"[attr.data-size]": "resolvedSize()",
+				"[attr.data-spacing]": "group.spacing()",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.disabled]": "(isDisabled()) ? \"\" : null",
+				"[attr.tabindex]": "group.tabStop() === value() ? 0 : -1",
+				"[attr.class]": "classes()",
+				"(click)": "group.toggle(value())",
+				"(blur)": "group.onTouched()"
+			}
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_TOGGLE_GROUP = [UiToggleGroup, UiToggleGroupItem];
+export { UI_TOGGLE_GROUP, UI_TOGGLE_GROUP_GENERATED, UiToggleGroup, UiToggleGroupItem, toggleGroupClass, toggleGroupItemClass };
+
+//# sourceMappingURL=loomui-ng-ui-toggle-group.mjs.map

package/fesm2022/loomui-ng-ui-toggle-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-toggle-group.mjs","names":[],"sources":["../../../libs/ui/toggle-group/toggle-group.ts","../../../libs/ui/toggle-group/toggle-group.manual.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/toggle-group.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./toggle-group.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\n\nexport const toggleGroupClass =\n  'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch';\n\nexport const toggleGroupItemClass =\n  'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4 border border-input bg-transparent hover:bg-muted h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2';\n\nexport const UI_TOGGLE_GROUP_GENERATED = [] as const;\n","import { FocusKeyManager, FocusableOption } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { toggleVariants } from '@loomui-ng/ui/toggle';\nimport { toggleGroupClass, toggleGroupItemClass } from './toggle-group';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiToggleGroup type=\"multiple\" variant=\"outline\" [(value)]=\"v\">\n *   <button uiToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">B</button>\n * </div>\n * single → items are role=\"radio\" (aria-checked); multiple → items are aria-pressed buttons. `value` is always an array.\n */\n@Directive({\n  selector: '[uiToggleGroup], ui-toggle-group', hostDirectives: [UiElementHost],\n  exportAs: 'uiToggleGroup',\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiToggleGroup), multi: true }],\n  host: {\n    role: 'group',\n    'data-slot': 'toggle-group',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-size]': 'size()',\n    '[attr.data-spacing]': 'spacing()',\n    '[attr.data-orientation]': 'orientation()',\n    '[style.--gap]': 'spacing()',\n    '[attr.dir]': 'dir.value',\n    '[attr.class]': 'classes()',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class UiToggleGroup implements ControlValueAccessor {\n  readonly type = input<'single' | 'multiple'>('single');\n  readonly value = model<string[]>([]);\n  readonly variant = input<'default' | 'outline'>('default');\n  readonly size = input<'default' | 'sm' | 'lg'>('default');\n  readonly spacing = input(0, { transform: numberAttribute });\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly dir = inject(Directionality);\n  private readonly cvaDisabled = signal(false);\n  readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n  readonly items = contentChildren(forwardRef(() => UiToggleGroupItem), { descendants: true });\n  protected readonly classes = computed(() => cn(toggleGroupClass, this.userClass()));\n  private onChange: (v: string[]) => void = () => {};\n  onTouched: () => void = () => {};\n\n  isOn(v: string): boolean {\n    return this.value().includes(v);\n  }\n\n  toggle(v: string): void {\n    const on = this.isOn(v);\n    const next = this.type() === 'multiple' ? (on ? this.value().filter((x) => x !== v) : [...this.value(), v]) : on ? [] : [v];\n    this.value.set(next);\n    this.onChange(next);\n  }\n\n  /** Roving tabindex: the first \"on\" item, else the first enabled item, is the tab stop. */\n  tabStop = computed(() => {\n    const enabled = this.items().filter((i) => !i.isDisabled());\n    return (enabled.find((i) => this.isOn(i.value())) ?? enabled[0])?.value() ?? null;\n  });\n\n  protected onKeydown(e: KeyboardEvent): void {\n    const enabled = this.items().filter((i) => !i.isDisabled());\n    const i = enabled.findIndex((it) => it.el === document.activeElement);\n    if (i < 0) return;\n    const horizontal = this.orientation() === 'horizontal';\n    const rtl = this.dir.value === 'rtl';\n    const next = horizontal ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';\n    const prev = horizontal ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';\n    let t = -1;\n    if (e.key === next) t = (i + 1) % enabled.length;\n    else if (e.key === prev) t = (i - 1 + enabled.length) % enabled.length;\n    else if (e.key === 'Home') t = 0;\n    else if (e.key === 'End') t = enabled.length - 1;\n    if (t >= 0) {\n      e.preventDefault();\n      enabled[t].el.focus();\n    }\n  }\n\n  writeValue(v: string[] | string | null): void {\n    this.value.set(Array.isArray(v) ? v : v ? [v] : []);\n  }\n  registerOnChange(fn: (v: string[]) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.cvaDisabled.set(d);\n  }\n}\n\n@Directive({\n  selector: 'button[uiToggleGroupItem], ui-toggle-group-item', hostDirectives: [UiElementHost],\n  host: {\n    type: 'button',\n    'data-slot': 'toggle-group-item',\n    '[attr.role]': 'group.type() === \"single\" ? \"radio\" : null',\n    '[attr.aria-checked]': 'group.type() === \"single\" ? on() : null',\n    '[attr.aria-pressed]': 'group.type() === \"multiple\" ? on() : null',\n    '[attr.data-state]': 'on() ? \"on\" : \"off\"',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-spacing]': 'group.spacing()',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.disabled]': '(isDisabled()) ? \"\" : null',\n    '[attr.tabindex]': 'group.tabStop() === value() ? 0 : -1',\n    '[attr.class]': 'classes()',\n    '(click)': 'group.toggle(value())',\n    '(blur)': 'group.onTouched()',\n  },\n})\nexport class UiToggleGroupItem implements FocusableOption {\n  protected readonly group = inject(UiToggleGroup);\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  readonly value = input<string>('');\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n  readonly variant = input<'default' | 'outline' | undefined>(undefined);\n  readonly size = input<'default' | 'sm' | 'lg' | undefined>(undefined);\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly on = computed(() => this.group.isOn(this.value()));\n  protected readonly resolvedVariant = computed(() => this.variant() ?? this.group.variant());\n  protected readonly resolvedSize = computed(() => this.size() ?? this.group.size());\n  get disabled(): boolean {\n    return this.isDisabled();\n  }\n  isDisabled = () => this.disabledInput() || this.group.isDisabled();\n  focus(): void {\n    this.el.focus();\n  }\n  protected readonly classes = computed(() =>\n    cn(toggleVariants({ variant: this.resolvedVariant(), size: this.resolvedSize() }), toggleGroupItemClass, this.userClass()),\n  );\n}\n\nexport const UI_TOGGLE_GROUP = [UiToggleGroup, UiToggleGroupItem] as const;\nvoid FocusKeyManager;\n"],"mappings":"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"}