@joanroucoux/cairn-ui 0.8.2 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-stat.mjs

@@ -1,48 +1,56 @@
-import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
-
-/** Available stat sizes. `StatSize` is derived from this tuple. */
-const STAT_SIZES = ['hero', 'tile'];
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const STAT_SIZES = ["hero", "tile"];
 const VALUE_CLASSES = {
-    hero: 'text-display font-semibold tracking-(--tracking-display) text-(--foreground)',
-    tile: 'text-title font-semibold tabular-nums text-(--foreground)',
+	hero: "text-display font-semibold tracking-(--tracking-display) text-(--foreground)",
+	tile: "text-title font-semibold tabular-nums text-(--foreground)"
 };
 const LABEL_CLASSES = {
-    hero: 'text-label font-medium text-(--muted-foreground)',
-    tile: 'text-label font-normal text-(--muted-foreground)',
+	hero: "text-label font-medium text-(--muted-foreground)",
+	tile: "text-label font-normal text-(--muted-foreground)"
 };
 const STACK_CLASSES = {
-    hero: 'flex flex-col gap-1',
-    tile: 'flex flex-col gap-0.5',
+	hero: "flex flex-col gap-1",
+	tile: "flex flex-col gap-0.5"
 };
-/**
- * Label, figure and a named period of change, at two sizes: a `hero` for a screen's single
- * headline number, or a smaller `tile` repeated in a grid. The figure itself, its delta and its
- * caption are all projected, so the component carries no formatting and no currency of its own.
- *
- * The `hero` size never sets `tabular-nums` on the figure: a lone headline number reads better
- * with its digits at their natural width, unlike a column of aligned figures.
- *
- * @example
- * <ui-stat label="Net worth" size="hero">
- *   <span uiStatValue>128,656 EUR</span>
- *   <ui-delta uiStatDelta [value]="dayChange()" unknownLabel="Not available">+316.54 EUR</ui-delta>
- *   <span uiStatCaption>today</span>
- * </ui-stat>
- */
-class UiStat {
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    size = input('tile', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    labelClasses = computed(() => LABEL_CLASSES[this.size()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
-    stackClasses = computed(() => STACK_CLASSES[this.size()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stackClasses" }] : /* istanbul ignore next */ []));
-    valueClasses = computed(() => VALUE_CLASSES[this.size()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiStat, isStandalone: true, selector: "ui-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+var UiStat = class UiStat {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	size = input("tile", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	labelClasses = computed(() => LABEL_CLASSES[this.size()], ...ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []);
+	stackClasses = computed(() => STACK_CLASSES[this.size()], ...ngDevMode ? [{ debugName: "stackClasses" }] : /* istanbul ignore next */ []);
+	valueClasses = computed(() => VALUE_CLASSES[this.size()], ...ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiStat,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiStat,
+		isStandalone: true,
+		selector: "ui-stat",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
     <div class="flex items-start justify-between gap-4">
       <div [class]="stackClasses()">
         <dl [class]="stackClasses()">
@@ -60,13 +68,20 @@ class UiStat {
 
       <ng-content select="[uiStatAside]" />
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStat, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-stat',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiStat,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-stat",
+			template: `
     <div class="flex items-start justify-between gap-4">
       <div [class]="stackClasses()">
         <dl [class]="stackClasses()">
@@ -84,13 +99,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
       <ng-content select="[uiStatAside]" />
     </div>
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
 export { STAT_SIZES, UiStat };
-//# sourceMappingURL=joanroucoux-cairn-ui-stat.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-stat.mjs.map

package/fesm2022/joanroucoux-cairn-ui-stat.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-stat.mjs","sources":["../../../projects/ui/stat/stat.ts","../../../projects/ui/stat/joanroucoux-cairn-ui-stat.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available stat sizes. `StatSize` is derived from this tuple. */\nexport const STAT_SIZES = ['hero', 'tile'] as const;\nexport type StatSize = (typeof STAT_SIZES)[number];\n\nconst VALUE_CLASSES: Record<StatSize, string> = {\n  hero: 'text-display font-semibold tracking-(--tracking-display) text-(--foreground)',\n  tile: 'text-title font-semibold tabular-nums text-(--foreground)',\n};\n\nconst LABEL_CLASSES: Record<StatSize, string> = {\n  hero: 'text-label font-medium text-(--muted-foreground)',\n  tile: 'text-label font-normal text-(--muted-foreground)',\n};\n\nconst STACK_CLASSES: Record<StatSize, string> = {\n  hero: 'flex flex-col gap-1',\n  tile: 'flex flex-col gap-0.5',\n};\n\n/**\n * Label, figure and a named period of change, at two sizes: a `hero` for a screen's single\n * headline number, or a smaller `tile` repeated in a grid. The figure itself, its delta and its\n * caption are all projected, so the component carries no formatting and no currency of its own.\n *\n * The `hero` size never sets `tabular-nums` on the figure: a lone headline number reads better\n * with its digits at their natural width, unlike a column of aligned figures.\n *\n * @example\n * <ui-stat label=\"Net worth\" size=\"hero\">\n *   <span uiStatValue>128,656 EUR</span>\n *   <ui-delta uiStatDelta [value]=\"dayChange()\" unknownLabel=\"Not available\">+316.54 EUR</ui-delta>\n *   <span uiStatCaption>today</span>\n * </ui-stat>\n */\n@Component({\n  selector: 'ui-stat',\n  template: `\n    <div class=\"flex items-start justify-between gap-4\">\n      <div [class]=\"stackClasses()\">\n        <dl [class]=\"stackClasses()\">\n          <dt [class]=\"labelClasses()\">{{ label() }}</dt>\n          <dd [class]=\"valueClasses()\">\n            <ng-content select=\"[uiStatValue]\" />\n          </dd>\n        </dl>\n\n        <div class=\"text-label flex flex-wrap items-center gap-x-1.5 gap-y-1 text-(--muted-foreground)\">\n          <ng-content select=\"[uiStatDelta]\" />\n          <ng-content select=\"[uiStatCaption]\" />\n        </div>\n      </div>\n\n      <ng-content select=\"[uiStatAside]\" />\n    </div>\n  `,\n})\nexport class UiStat {\n  readonly label = input.required<string>();\n  readonly size = input<StatSize>('tile');\n\n  protected readonly labelClasses = computed(() => LABEL_CLASSES[this.size()]);\n\n  protected readonly stackClasses = computed(() => STACK_CLASSES[this.size()]);\n\n  protected readonly valueClasses = computed(() => VALUE_CLASSES[this.size()]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;MACa,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM;AAGzC,MAAM,aAAa,GAA6B;AAC9C,IAAA,IAAI,EAAE,8EAA8E;AACpF,IAAA,IAAI,EAAE,2DAA2D;CAClE;AAED,MAAM,aAAa,GAA6B;AAC9C,IAAA,IAAI,EAAE,kDAAkD;AACxD,IAAA,IAAI,EAAE,kDAAkD;CACzD;AAED,MAAM,aAAa,GAA6B;AAC9C,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,IAAI,EAAE,uBAAuB;CAC9B;AAED;;;;;;;;;;;;;;AAcG;MAuBU,MAAM,CAAA;IACR,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,IAAI,GAAG,KAAK,CAAW,MAAM;6EAAC;AAEpB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;AAEzD,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;AAEzD,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;uGARjE,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBP;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,MAAM,EAAA,UAAA,EAAA,CAAA;kBAtBlB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,SAAS;AACnB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA;AACF,iBAAA;;;ACzDD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-stat.mjs","names":[],"sources":["../../../projects/ui/stat/stat.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available stat sizes. */\nexport const STAT_SIZES = ['hero', 'tile'] as const;\nexport type StatSize = (typeof STAT_SIZES)[number];\n\nconst VALUE_CLASSES: Record<StatSize, string> = {\n  hero: 'text-display font-semibold tracking-(--tracking-display) text-(--foreground)',\n  tile: 'text-title font-semibold tabular-nums text-(--foreground)',\n};\n\nconst LABEL_CLASSES: Record<StatSize, string> = {\n  hero: 'text-label font-medium text-(--muted-foreground)',\n  tile: 'text-label font-normal text-(--muted-foreground)',\n};\n\nconst STACK_CLASSES: Record<StatSize, string> = {\n  hero: 'flex flex-col gap-1',\n  tile: 'flex flex-col gap-0.5',\n};\n\n/**\n * Label, figure and a named period of change: a `hero` for a screen's single headline number, or a\n * smaller `tile` repeated in a grid. The figure, its delta and its caption are projected, so the\n * component does no formatting. The `hero` figure does not use `tabular-nums`.\n *\n * @example\n * <ui-stat label=\"Net worth\" size=\"hero\">\n *   <span uiStatValue>128,656 EUR</span>\n *   <ui-delta uiStatDelta [value]=\"dayChange()\" unknownLabel=\"Not available\">+316.54 EUR</ui-delta>\n *   <span uiStatCaption>today</span>\n * </ui-stat>\n */\n@Component({\n  selector: 'ui-stat',\n  template: `\n    <div class=\"flex items-start justify-between gap-4\">\n      <div [class]=\"stackClasses()\">\n        <dl [class]=\"stackClasses()\">\n          <dt [class]=\"labelClasses()\">{{ label() }}</dt>\n          <dd [class]=\"valueClasses()\">\n            <ng-content select=\"[uiStatValue]\" />\n          </dd>\n        </dl>\n\n        <div class=\"text-label flex flex-wrap items-center gap-x-1.5 gap-y-1 text-(--muted-foreground)\">\n          <ng-content select=\"[uiStatDelta]\" />\n          <ng-content select=\"[uiStatCaption]\" />\n        </div>\n      </div>\n\n      <ng-content select=\"[uiStatAside]\" />\n    </div>\n  `,\n})\nexport class UiStat {\n  readonly label = input.required<string>();\n  readonly size = input<StatSize>('tile');\n\n  protected readonly labelClasses = computed(() => LABEL_CLASSES[this.size()]);\n\n  protected readonly stackClasses = computed(() => STACK_CLASSES[this.size()]);\n\n  protected readonly valueClasses = computed(() => VALUE_CLASSES[this.size()]);\n}\n"],"mappings":";;AAGA,MAAa,aAAa,CAAC,QAAQ,MAAM;AAGzC,MAAM,gBAA0C;CAC9C,MAAM;CACN,MAAM;AACP;AAED,MAAM,gBAA0C;CAC9C,MAAM;CACN,MAAM;AACP;AAED,MAAM,gBAA0C;CAC9C,MAAM;CACN,MAAM;AACP;AAoCD,IAAa,SAAb,MAAa,OAAM;CACR,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,OAAO,MAAgB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,cAAc,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEzD,eAAe,eAAe,cAAc,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEzD,eAAe,eAAe,cAAc,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CARjE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UApBP;;;;;;;;;;;;;;;;;;;EAkBT,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAtBlB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;;;;EAmBX,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-switch.mjs

@@ -1,37 +1,50 @@
-import * as i0 from '@angular/core';
-import { Directive } from '@angular/core';
-import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
-
+import * as i0 from "@angular/core";
+import { Directive } from "@angular/core";
+import { holdTransitionsUntilRendered } from "@joanroucoux/cairn-ui/motion";
 const CLASSES = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
-/**
- * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
- * 51 by 31 on touch, 40 by 24 with a mouse.
- *
- * @example
- * <input type="checkbox" uiSwitch [checked]="hidden()" (change)="toggle()" aria-label="Hide amounts" />
- */
-class UiSwitch {
-    classes = CLASSES;
-    constructor() {
-        holdTransitionsUntilRendered();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiSwitch, isStandalone: true, selector: "input[type=checkbox][uiSwitch]", host: { attributes: { "role": "switch" }, properties: { "class": "classes" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSwitch, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[type=checkbox][uiSwitch]',
-                    host: {
-                        role: 'switch',
-                        '[class]': 'classes',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var UiSwitch = class UiSwitch {
+	classes = CLASSES;
+	constructor() {
+		holdTransitionsUntilRendered();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiSwitch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiSwitch,
+		isStandalone: true,
+		selector: "input[type=checkbox][uiSwitch]",
+		host: {
+			attributes: { "role": "switch" },
+			properties: { "class": "classes" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiSwitch,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[type=checkbox][uiSwitch]",
+			host: {
+				role: "switch",
+				"[class]": "classes"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
 export { UiSwitch };
-//# sourceMappingURL=joanroucoux-cairn-ui-switch.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-switch.mjs.map

package/fesm2022/joanroucoux-cairn-ui-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-switch.mjs","sources":["../../../projects/ui/switch/switch.ts","../../../projects/ui/switch/joanroucoux-cairn-ui-switch.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nconst CLASSES =\n  \"relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4\";\n\n/**\n * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role=\"switch\"`.\n * 51 by 31 on touch, 40 by 24 with a mouse.\n *\n * @example\n * <input type=\"checkbox\" uiSwitch [checked]=\"hidden()\" (change)=\"toggle()\" aria-label=\"Hide amounts\" />\n */\n@Directive({\n  selector: 'input[type=checkbox][uiSwitch]',\n  host: {\n    role: 'switch',\n    '[class]': 'classes',\n  },\n})\nexport class UiSwitch {\n  protected readonly classes = CLASSES;\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA,MAAM,OAAO,GACX,+xBAA+xB;AAEjyB;;;;;;AAMG;MAQU,QAAQ,CAAA;IACA,OAAO,GAAG,OAAO;AAEpC,IAAA,WAAA,GAAA;AACE,QAAA,4BAA4B,EAAE;IAChC;uGALW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAR,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gCAAgC;AAC1C,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA;;;ACpBD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-switch.mjs","names":[],"sources":["../../../projects/ui/switch/switch.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nconst CLASSES =\n  \"relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4\";\n\n/**\n * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role=\"switch\"`.\n *\n * @example\n * <input type=\"checkbox\" uiSwitch [checked]=\"hidden()\" (change)=\"toggle()\" aria-label=\"Hide amounts\" />\n */\n@Directive({\n  selector: 'input[type=checkbox][uiSwitch]',\n  host: {\n    role: 'switch',\n    '[class]': 'classes',\n  },\n})\nexport class UiSwitch {\n  protected readonly classes = CLASSES;\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n"],"mappings":";;;AAIA,MAAM,UACJ;AAeF,IAAa,WAAb,MAAa,SAAQ;CACA,UAAU;CAE7B,cAAA;EACE,6BAA4B;CAC9B;CALW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,SAAA;GAAA,YAAA,EAAA,SAAA,UAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAPpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,MAAM;IACN,WAAW;GACZ;EACF,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-tab-bar.mjs

@@ -1,75 +1,119 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, Component, input, booleanAttribute, computed } from '@angular/core';
-
-const HEIGHT_PROPERTY = '--tab-bar-height';
-const HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';
-const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
-const INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';
-const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
-/**
- * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area. While it is on the
- * page it publishes that height as `--tab-bar-height` on the root element, which `ui-action-bar` and
- * `ui-toaster` sit above; use it rather than restating 52px for anything that must clear the bar.
- *
- * @example
- * <nav ui-tab-bar>
- *   <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
- * </nav>
- */
-class UiTabBar {
-    constructor() {
-        const root = inject(DOCUMENT).documentElement;
-        root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);
-        inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTabBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiTabBar, isStandalone: true, selector: "nav[ui-tab-bar]", host: { classAttribute: "grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]" }, ngImport: i0, template: '<ng-content />', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTabBar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nav[ui-tab-bar]',
-                    template: '<ng-content />',
-                    host: {
-                        class: 'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-/**
- * One destination of `ui-tab-bar`.
- *
- * @example
- * <a ui-tab active routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
- */
-class UiTab {
-    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiTab, isStandalone: true, selector: "a[ui-tab]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "active() ? 'page' : null" } }, ngImport: i0, template: `
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, booleanAttribute, computed, inject, input } from "@angular/core";
+const HEIGHT_PROPERTY = "--tab-bar-height";
+const HEIGHT = "calc(52px + env(safe-area-inset-bottom))";
+const TAB_CLASSES = "flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)";
+const INACTIVE_TAB_CLASSES = "font-medium text-(--muted-foreground)";
+const ACTIVE_TAB_CLASSES = "font-semibold text-(--foreground)";
+var UiTabBar = class UiTabBar {
+	constructor() {
+		const root = inject(DOCUMENT).documentElement;
+		root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);
+		inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiTabBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiTabBar,
+		isStandalone: true,
+		selector: "nav[ui-tab-bar]",
+		host: { classAttribute: "grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]" },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiTabBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "nav[ui-tab-bar]",
+			template: "<ng-content />",
+			host: { class: "grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiTab = class UiTab {
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiTab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiTab,
+		isStandalone: true,
+		selector: "a[ui-tab]",
+		inputs: { active: {
+			classPropertyName: "active",
+			publicName: "active",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.aria-current": "active() ? 'page' : null"
+		} },
+		ngImport: i0,
+		template: `
     <span class="size-6" data-tab-icon><ng-content select="[tabIcon]" /></span>
     <span class="text-caption leading-none" data-tab-label><ng-content /></span>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTab, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'a[ui-tab]',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiTab,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[ui-tab]",
+			template: `
     <span class="size-6" data-tab-icon><ng-content select="[tabIcon]" /></span>
     <span class="text-caption leading-none" data-tab-label><ng-content /></span>
   `,
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.aria-current]': "active() ? 'page' : null",
-                    },
-                }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: {
+				"[class]": "classes()",
+				"[attr.aria-current]": "active() ? 'page' : null"
+			}
+		}]
+	}],
+	propDecorators: { active: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "active",
+			required: false
+		}]
+	}] }
+});
 export { UiTab, UiTabBar };
-//# sourceMappingURL=joanroucoux-cairn-ui-tab-bar.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-tab-bar.mjs.map

package/fesm2022/joanroucoux-cairn-ui-tab-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-tab-bar.mjs","sources":["../../../projects/ui/tab-bar/tab-bar.ts","../../../projects/ui/tab-bar/joanroucoux-cairn-ui-tab-bar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, DestroyRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nconst HEIGHT_PROPERTY = '--tab-bar-height';\n\nconst HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';\n\nconst TAB_CLASSES =\n  'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';\n\nconst ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';\n\n/**\n * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area. While it is on the\n * page it publishes that height as `--tab-bar-height` on the root element, which `ui-action-bar` and\n * `ui-toaster` sit above; use it rather than restating 52px for anything that must clear the bar.\n *\n * @example\n * <nav ui-tab-bar>\n *   <a ui-tab [active]=\"url === '/'\" routerLink=\"/\"><lucide-icon tabIcon name=\"house\" />Portfolio</a>\n * </nav>\n */\n@Component({\n  selector: 'nav[ui-tab-bar]',\n  template: '<ng-content />',\n  host: {\n    class:\n      'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',\n  },\n})\nexport class UiTabBar {\n  constructor() {\n    const root = inject(DOCUMENT).documentElement;\n\n    root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);\n    inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));\n  }\n}\n\n/**\n * One destination of `ui-tab-bar`.\n *\n * @example\n * <a ui-tab active routerLink=\"/\"><lucide-icon tabIcon name=\"house\" />Portfolio</a>\n */\n@Component({\n  selector: 'a[ui-tab]',\n  template: `\n    <span class=\"size-6\" data-tab-icon><ng-content select=\"[tabIcon]\" /></span>\n    <span class=\"text-caption leading-none\" data-tab-label><ng-content /></span>\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-current]': \"active() ? 'page' : null\",\n  },\n})\nexport class UiTab {\n  readonly active = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(\n    () => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,GAAG,kBAAkB;AAE1C,MAAM,MAAM,GAAG,0CAA0C;AAEzD,MAAM,WAAW,GACf,2QAA2Q;AAE7Q,MAAM,oBAAoB,GAAG,uCAAuC;AAEpE,MAAM,kBAAkB,GAAG,mCAAmC;AAE9D;;;;;;;;;AASG;MASU,QAAQ,CAAA;AACnB,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe;QAE7C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,MAAM,CAAC;AAC/C,QAAA,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChF;uGANW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,iUANT,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAMf,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EACH,0NAA0N;AAC7N,qBAAA;AACF,iBAAA;;AAUD;;;;;AAKG;MAYU,KAAK,CAAA;IACP,MAAM,GAAG,KAAK,CAAC,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAE5C,OAAO,GAAG,QAAQ,CACnC,MAAM,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,GAAG,kBAAkB,GAAG,oBAAoB,CAAA,CAAE;gFACpF;uGALU,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATN;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAMU,KAAK,EAAA,UAAA,EAAA,CAAA;kBAXjB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,QAAQ,EAAE;;;AAGT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,qBAAqB,EAAE,0BAA0B;AAClD,qBAAA;AACF,iBAAA;;;ACzDD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-tab-bar.mjs","names":[],"sources":["../../../projects/ui/tab-bar/tab-bar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, DestroyRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nconst HEIGHT_PROPERTY = '--tab-bar-height';\n\nconst HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';\n\nconst TAB_CLASSES =\n  'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';\n\nconst ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';\n\n/**\n * Bottom navigation bar for iPhone. While it is on the page it publishes its height as\n * `--tab-bar-height` on the root element, which `ui-action-bar` and `ui-toaster` sit above: use it\n * for anything else that must clear the bar.\n *\n * @example\n * <nav ui-tab-bar>\n *   <a ui-tab [active]=\"url === '/'\" routerLink=\"/\"><lucide-icon tabIcon name=\"house\" />Portfolio</a>\n * </nav>\n */\n@Component({\n  selector: 'nav[ui-tab-bar]',\n  template: '<ng-content />',\n  host: {\n    class:\n      'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',\n  },\n})\nexport class UiTabBar {\n  constructor() {\n    const root = inject(DOCUMENT).documentElement;\n\n    root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);\n    inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));\n  }\n}\n\n/**\n * One destination of `ui-tab-bar`.\n *\n * @example\n * <a ui-tab active routerLink=\"/\"><lucide-icon tabIcon name=\"house\" />Portfolio</a>\n */\n@Component({\n  selector: 'a[ui-tab]',\n  template: `\n    <span class=\"size-6\" data-tab-icon><ng-content select=\"[tabIcon]\" /></span>\n    <span class=\"text-caption leading-none\" data-tab-label><ng-content /></span>\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-current]': \"active() ? 'page' : null\",\n  },\n})\nexport class UiTab {\n  readonly active = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(\n    () => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`,\n  );\n}\n"],"mappings":";;;AAGA,MAAM,kBAAkB;AAExB,MAAM,SAAS;AAEf,MAAM,cACJ;AAEF,MAAM,uBAAuB;AAE7B,MAAM,qBAAqB;AAoB3B,IAAa,WAAb,MAAa,SAAQ;CACnB,cAAA;EACE,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC;EAE9B,KAAK,MAAM,YAAY,iBAAiB,MAAM;EAC9C,OAAO,UAAU,CAAC,CAAC,gBAAgB,KAAK,MAAM,eAAe,eAAe,CAAC;CAC/E;CANW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,2NAAA;EAAA,UAAA;EAAA,UANT;EAAgB,UAAA;CAAA,CAAA;;AAMf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EARpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,MAAM,EACJ,OACE,2NACH;EACF,CAAA;;;;AA2BD,IAAa,QAAb,MAAa,MAAK;CACP,SAAS,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAEzC,UAAU,eACrB,GAAG,YAAW,GAAI,KAAK,OAAM,IAAK,qBAAqB,wBAC9D,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CALU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAK,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAL,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAK,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,QAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UATN;;;;EAGT,UAAA;CAAA,CAAA;;AAMU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAK,YAAA,CAAA;EAXjB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;GAIV,MAAM;IACJ,WAAW;IACX,uBAAuB;GACxB;EACF,CAAA"}