@joanroucoux/cairn-ui 0.9.1 → 0.10.0

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

@@ -31,10 +31,11 @@ var UiDrawer = class UiDrawer {
 	descriptionId = `${this.headingId}-description`;
 	describedBy = computed(() => this.heading() && this.description() ? this.descriptionId : null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
 	ariaLabel = computed(() => {
-		if (this.heading()) return null;
-		if (!this.label()) throw new Error("ui-drawer needs a heading or a label: without either it has no accessible name.");
-		return this.label();
+		if (this.label()) return this.label();
+		if (!this.heading()) throw new Error("ui-drawer needs a heading or a label: without either it has no accessible name.");
+		return null;
 	}, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	labelledBy = computed(() => this.heading() && !this.label() ? this.headingId : null, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
 	modal = new ModalClose({
 		open: this.open,
 		busy: this.busy,
@@ -43,7 +44,7 @@ var UiDrawer = class UiDrawer {
 	});
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiDrawer,
 		deps: [],
@@ -51,7 +52,7 @@ var UiDrawer = class UiDrawer {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiDrawer,
 		isStandalone: true,
 		selector: "ui-drawer",
@@ -122,7 +123,7 @@ var UiDrawer = class UiDrawer {
       [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-label]="ariaLabel()"
-      [attr.aria-labelledby]="heading() ? headingId : null"
+      [attr.aria-labelledby]="labelledBy()"
       [style.--drawer-width]="width()"
       (cancel)="modal.onCancel($event)"
       (close)="modal.onNativeClose()"
@@ -169,7 +170,7 @@ var UiDrawer = class UiDrawer {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiDrawer,
 	decorators: [{
@@ -187,7 +188,7 @@ i0.ɵɵngDeclareClassMetadata({
       [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-label]="ariaLabel()"
-      [attr.aria-labelledby]="heading() ? headingId : null"
+      [attr.aria-labelledby]="labelledBy()"
       [style.--drawer-width]="width()"
       (cancel)="modal.onCancel($event)"
       (close)="modal.onNativeClose()"

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-drawer.mjs","names":[],"sources":["../../../projects/ui/drawer/internal/drawer-styles.ts","../../../projects/ui/drawer/drawer.ts"],"sourcesContent":["export const DRAWER_STYLES = `\ndialog {\n  transition:\n    opacity var(--duration-base) var(--ease-out),\n    transform var(--duration-base) var(--ease-out),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  opacity: 1;\n  transform: none;\n}\n\ndialog:not([open]) {\n  opacity: 0;\n  transform: translateX(24px);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog:not([open]) {\n    transform: none;\n  }\n\n  @starting-style {\n    dialog[open] {\n      transform: none;\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { ModalClose } from '@joanroucoux/cairn-ui/dialog';\n\nimport { DRAWER_STYLES } from './internal/drawer-styles';\n\n/** What started a close, as `closed` reports it. */\nexport const DRAWER_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'programmatic'] as const;\nexport type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-drawer-${++count}`;\n})();\n\n/**\n * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.\n *\n * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.\n *\n * @example\n * <ui-drawer heading=\"Northwind Monde\" closeLabel=\"Fermer le détail\" [open]=\"open()\" (dismissed)=\"open.set(false)\">\n *   <p>Body</p>\n * </ui-drawer>\n */\n@Component({\n  selector: 'ui-drawer',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      class=\"fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] outline-none backdrop:bg-black/[0.36] open:flex\"\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"heading() ? headingId : null\"\n      [style.--drawer-width]=\"width()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      @if (heading()) {\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-col gap-0.5\">\n            <h2 class=\"text-title font-semibold text-pretty\" [id]=\"headingId\">{{ heading() }}</h2>\n\n            @if (description()) {\n              <p class=\"text-label text-(--muted-foreground)\" [id]=\"descriptionId\">{{ description() }}</p>\n            }\n          </div>\n\n          @if (closeLabel()) {\n            <button\n              class=\"rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40\"\n              type=\"button\"\n              [attr.aria-label]=\"closeLabel()\"\n              [disabled]=\"busy()\"\n              (click)=\"modal.close('cross')\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                class=\"block size-5 fill-none stroke-current stroke-[1.75]\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <ng-content />\n    </dialog>\n  `,\n  styles: DRAWER_STYLES,\n})\nexport class UiDrawer {\n  readonly heading = input<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly label = input<string>();\n  readonly width = input('440px');\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DrawerCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n\n  protected readonly describedBy = computed(() => (this.heading() && this.description() ? this.descriptionId : null));\n\n  protected readonly ariaLabel = computed(() => {\n    if (this.heading()) {\n      return null;\n    }\n    if (!this.label()) {\n      throw new Error('ui-drawer needs a heading or a label: without either it has no accessible name.');\n    }\n    return this.label();\n  });\n\n  protected readonly modal = new ModalClose<DrawerCloseReason>({\n    open: this.open,\n    busy: this.busy,\n    dismissed: this.dismissed,\n    closed: this.closed,\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-drawer.mjs","names":[],"sources":["../../../projects/ui/drawer/internal/drawer-styles.ts","../../../projects/ui/drawer/drawer.ts"],"sourcesContent":["export const DRAWER_STYLES = `\ndialog {\n  transition:\n    opacity var(--duration-base) var(--ease-out),\n    transform var(--duration-base) var(--ease-out),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  opacity: 1;\n  transform: none;\n}\n\ndialog:not([open]) {\n  opacity: 0;\n  transform: translateX(24px);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog:not([open]) {\n    transform: none;\n  }\n\n  @starting-style {\n    dialog[open] {\n      transform: none;\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { ModalClose } from '@joanroucoux/cairn-ui/dialog';\n\nimport { DRAWER_STYLES } from './internal/drawer-styles';\n\n/** What started a close, as `closed` reports it. */\nexport const DRAWER_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'programmatic'] as const;\nexport type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-drawer-${++count}`;\n})();\n\n/**\n * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.\n *\n * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.\n * With both, `label` names the panel and the heading stays its visible title.\n *\n * @example\n * <ui-drawer heading=\"Northwind Monde\" closeLabel=\"Fermer le détail\" [open]=\"open()\" (dismissed)=\"open.set(false)\">\n *   <p>Body</p>\n * </ui-drawer>\n */\n@Component({\n  selector: 'ui-drawer',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      class=\"fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] outline-none backdrop:bg-black/[0.36] open:flex\"\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [style.--drawer-width]=\"width()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      @if (heading()) {\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-col gap-0.5\">\n            <h2 class=\"text-title font-semibold text-pretty\" [id]=\"headingId\">{{ heading() }}</h2>\n\n            @if (description()) {\n              <p class=\"text-label text-(--muted-foreground)\" [id]=\"descriptionId\">{{ description() }}</p>\n            }\n          </div>\n\n          @if (closeLabel()) {\n            <button\n              class=\"rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40\"\n              type=\"button\"\n              [attr.aria-label]=\"closeLabel()\"\n              [disabled]=\"busy()\"\n              (click)=\"modal.close('cross')\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                class=\"block size-5 fill-none stroke-current stroke-[1.75]\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <ng-content />\n    </dialog>\n  `,\n  styles: DRAWER_STYLES,\n})\nexport class UiDrawer {\n  readonly heading = input<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly label = input<string>();\n  readonly width = input('440px');\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DrawerCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n\n  protected readonly describedBy = computed(() => (this.heading() && this.description() ? this.descriptionId : null));\n\n  protected readonly ariaLabel = computed(() => {\n    if (this.label()) {\n      return this.label();\n    }\n    if (!this.heading()) {\n      throw new Error('ui-drawer needs a heading or a label: without either it has no accessible name.');\n    }\n    return null;\n  });\n\n  protected readonly labelledBy = computed(() => (this.heading() && !this.label() ? this.headingId : null));\n\n  protected readonly modal = new ModalClose<DrawerCloseReason>({\n    open: this.open,\n    busy: this.busy,\n    dismissed: this.dismissed,\n    closed: this.closed,\n  });\n}\n"],"mappings":";;;ACOA,MAAa,uBAAuB;CAAC;CAAU;CAAY;CAAS;AAAc;AAGlF,MAAM,gBAAe;CACnB,IAAI,QAAQ;CAEZ,aAAa,aAAa,EAAE;AAC9B,EAAA,CAAE;AAqEF,IAAa,WAAb,MAAa,SAAQ;CACV,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,cAAc,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,aAAa,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,QAAQ,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACjD,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACjD,YAAY,OAAM;CAClB,SAAS,OAAM;CAEL,YAAY,OAAM;CAClB,gBAAgB,GAAG,KAAK,UAAS;CAEjC,cAAc,eAAgB,KAAK,QAAO,KAAM,KAAK,YAAW,IAAK,KAAK,gBAAgB,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEhG,YAAY,eAAc;EAC3C,IAAI,KAAK,MAAK,GACZ,OAAO,KAAK,MAAK;EAEnB,IAAI,CAAC,KAAK,QAAO,GACf,MAAM,IAAI,MAAM,iFAAiF;EAEnG,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,aAAa,eAAgB,KAAK,QAAO,KAAM,CAAC,KAAK,MAAK,IAAK,KAAK,YAAY,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEtF,QAAQ,IAAI,WAA8B;EAC3D,MAAM,KAAK;EACX,MAAM,KAAK;EACX,WAAW,KAAK;EAChB,QAAQ,KAAK;CACd,CAAA;CAjCU,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,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;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;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,WAAA;GAAA,eAAA;GAAA,SAAA;GAAA,WAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UAjDT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CT,UAAA;EAAA,QAAA,CAAA,gtBAAA;CAAA,CAAA;;AAGU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAxDpB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,MACf;IACJ,iBAAiB;IACjB,WAAW;IACX,aAAa;GACd;GAAA,UACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT,QAAA,CAAA,gtBAAA;EAAA,CAAA"}

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

@@ -5,7 +5,7 @@ var UiEmpty = class UiEmpty {
 	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiEmpty,
 		deps: [],
@@ -13,7 +13,7 @@ var UiEmpty = class UiEmpty {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiEmpty,
 		isStandalone: true,
 		selector: "ui-empty",
@@ -47,7 +47,7 @@ var UiEmpty = class UiEmpty {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiEmpty,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-external-link.mjs

@@ -3,7 +3,7 @@ import { Component } from "@angular/core";
 var UiExternalLink = class UiExternalLink {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiExternalLink,
 		deps: [],
@@ -11,7 +11,7 @@ var UiExternalLink = class UiExternalLink {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiExternalLink,
 		isStandalone: true,
 		selector: "a[ui-external-link]",
@@ -40,7 +40,7 @@ var UiExternalLink = class UiExternalLink {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiExternalLink,
 	decorators: [{

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

@@ -37,7 +37,7 @@ var UiFacts = class UiFacts {
 	classes = computed(() => this.ruled() ? "m-0 flex flex-col shadow-[inset_0_1px_0_var(--hairline)]" : "m-0 flex flex-col", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiFacts,
 		deps: [],
@@ -45,7 +45,7 @@ var UiFacts = class UiFacts {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiFacts,
 		isStandalone: true,
 		selector: "dl[uiFacts]",
@@ -62,7 +62,7 @@ var UiFacts = class UiFacts {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiFacts,
 	decorators: [{
@@ -91,7 +91,7 @@ var UiFact = class UiFact {
 	subClasses = computed(() => `text-caption ${SUB_TONE_CLASSES[this.subTone()]}`, ...ngDevMode ? [{ debugName: "subClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiFact,
 		deps: [],
@@ -99,7 +99,7 @@ var UiFact = class UiFact {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiFact,
 		isStandalone: true,
 		selector: "div[ui-fact]",
@@ -149,7 +149,7 @@ var UiFact = class UiFact {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiFact,
 	decorators: [{

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

@@ -8,7 +8,7 @@ const nextId = (() => {
 var UiFieldLeading = class UiFieldLeading {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiFieldLeading,
 		deps: [],
@@ -16,7 +16,7 @@ var UiFieldLeading = class UiFieldLeading {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiFieldLeading,
 		isStandalone: true,
 		selector: "[uiFieldLeading]",
@@ -29,7 +29,7 @@ var UiFieldLeading = class UiFieldLeading {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiFieldLeading,
 	decorators: [{
@@ -46,7 +46,7 @@ i0.ɵɵngDeclareClassMetadata({
 var UiFieldTrailing = class UiFieldTrailing {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiFieldTrailing,
 		deps: [],
@@ -54,7 +54,7 @@ var UiFieldTrailing = class UiFieldTrailing {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiFieldTrailing,
 		isStandalone: true,
 		selector: "[uiFieldTrailing]",
@@ -64,7 +64,7 @@ var UiFieldTrailing = class UiFieldTrailing {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiFieldTrailing,
 	decorators: [{
@@ -130,7 +130,7 @@ var UiField = class UiField {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiField,
 		deps: [],
@@ -138,7 +138,7 @@ var UiField = class UiField {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiField,
 		isStandalone: true,
 		selector: "ui-field",
@@ -252,7 +252,7 @@ var UiField = class UiField {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiField,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-filter-chips.mjs

@@ -17,7 +17,7 @@ var UiFilterChips = class UiFilterChips {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiFilterChips,
 		deps: [],
@@ -25,7 +25,7 @@ var UiFilterChips = class UiFilterChips {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiFilterChips,
 		isStandalone: true,
 		selector: "ui-filter-chips",
@@ -91,7 +91,7 @@ var UiFilterChips = class UiFilterChips {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiFilterChips,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-group-header.mjs

@@ -19,7 +19,7 @@ var UiGroupHeader = class UiGroupHeader {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiGroupHeader,
 		deps: [],
@@ -27,7 +27,7 @@ var UiGroupHeader = class UiGroupHeader {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiGroupHeader,
 		isStandalone: true,
 		selector: "ui-group-header",
@@ -146,7 +146,7 @@ var UiGroupHeader = class UiGroupHeader {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiGroupHeader,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs

@@ -0,0 +1,43 @@
+import * as i0 from "@angular/core";
+import { Directive } from "@angular/core";
+var UiIconToggle = class UiIconToggle {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiIconToggle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiIconToggle,
+		isStandalone: true,
+		selector: "button[uiIconToggle]",
+		host: {
+			attributes: { "type": "button" },
+			classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center text-(--foreground) cursor-pointer select-none touch-manipulation transition-[scale] duration-(--duration-press) ease-out pointer-fine:hover:bg-(--glow) aria-pressed:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiIconToggle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiIconToggle]",
+			host: {
+				type: "button",
+				class: "rounded-pill grid size-11 lg:size-10 place-items-center text-(--foreground) cursor-pointer select-none touch-manipulation transition-[scale] duration-(--duration-press) ease-out pointer-fine:hover:bg-(--glow) aria-pressed:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
+			}
+		}]
+	}]
+});
+export { UiIconToggle };
+
+//# sourceMappingURL=joanroucoux-cairn-ui-icon-toggle.mjs.map

package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-icon-toggle.mjs","names":[],"sources":["../../../projects/ui/icon-toggle/icon-toggle.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Round icon button that switches something on and off, such as the header eye that hides the amounts.\n * The state lives in `aria-pressed`, which also draws the soft fill. Only the press scale transitions:\n * the fill changes at once.\n *\n * @example\n * <button uiIconToggle aria-label=\"Hide amounts\" [attr.aria-pressed]=\"hidden\"><svg>...</svg></button>\n */\n@Directive({\n  selector: 'button[uiIconToggle]',\n  host: {\n    type: 'button',\n    class:\n      'rounded-pill grid size-11 lg:size-10 place-items-center text-(--foreground) cursor-pointer select-none touch-manipulation transition-[scale] duration-(--duration-press) ease-out pointer-fine:hover:bg-(--glow) aria-pressed:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n  },\n})\nexport class UiIconToggle {}\n"],"mappings":";;AAkBA,IAAa,eAAb,MAAa,aAAY;CAAZ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,SAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EARxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,MAAM;IACN,OACE;GACH;EACF,CAAA"}

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

@@ -28,7 +28,7 @@ var UiInput = class UiInput {
 	classes = computed(() => `${CONTROL_BASE_CLASSES} ${SEARCH_CLASSES} ${CONTROL_SURFACE_CLASSES[this.surface()]} ${CONTROL_SIZE_CLASSES[this.size()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiInput,
 		deps: [],
@@ -36,7 +36,7 @@ var UiInput = class UiInput {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiInput,
 		isStandalone: true,
 		selector: "input[uiInput]",
@@ -80,7 +80,7 @@ var UiInput = class UiInput {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiInput,
 	decorators: [{
@@ -134,7 +134,7 @@ var UiTextarea = class UiTextarea {
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiTextarea,
 		deps: [],
@@ -142,7 +142,7 @@ var UiTextarea = class UiTextarea {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiTextarea,
 		isStandalone: true,
 		selector: "textarea[uiTextarea]",
@@ -172,7 +172,7 @@ var UiTextarea = class UiTextarea {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiTextarea,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-line-chart.mjs

@@ -550,7 +550,7 @@ var UiLineChart = class UiLineChart {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiLineChart,
 		deps: [],
@@ -558,7 +558,7 @@ var UiLineChart = class UiLineChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiLineChart,
 		isStandalone: true,
 		selector: "ui-line-chart",
@@ -858,7 +858,7 @@ var UiLineChart = class UiLineChart {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiLineChart,
 	decorators: [{

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

@@ -30,7 +30,7 @@ var UiMenuItem = class UiMenuItem {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiMenuItem,
 		deps: [],
@@ -38,7 +38,7 @@ var UiMenuItem = class UiMenuItem {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiMenuItem,
 		isStandalone: true,
 		selector: "button[uiMenuItem]",
@@ -72,7 +72,7 @@ var UiMenuItem = class UiMenuItem {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiMenuItem,
 	decorators: [{
@@ -203,7 +203,7 @@ var UiMenu = class UiMenu {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiMenu,
 		deps: [],
@@ -211,7 +211,7 @@ var UiMenu = class UiMenu {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiMenu,
 		isStandalone: true,
 		selector: "ui-menu",
@@ -280,7 +280,7 @@ var UiMenu = class UiMenu {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiMenu,
 	decorators: [{
@@ -356,7 +356,7 @@ var UiMenuTrigger = class UiMenuTrigger {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiMenuTrigger,
 		deps: [],
@@ -364,7 +364,7 @@ var UiMenuTrigger = class UiMenuTrigger {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiMenuTrigger,
 		isStandalone: true,
 		selector: "[uiMenuTrigger]",
@@ -388,7 +388,7 @@ var UiMenuTrigger = class UiMenuTrigger {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiMenuTrigger,
 	decorators: [{

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

@@ -32,7 +32,7 @@ var UiMeter = class UiMeter {
 	fillClasses = computed(() => `h-full rounded-pill ${TONE_CLASSES[this.tone()]}`, ...ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		ngImport: i0,
 		type: UiMeter,
 		deps: [],
@@ -40,7 +40,7 @@ var UiMeter = class UiMeter {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.1",
 		type: UiMeter,
 		isStandalone: true,
 		selector: "ui-meter",
@@ -101,7 +101,7 @@ var UiMeter = class UiMeter {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.1",
 	ngImport: i0,
 	type: UiMeter,
 	decorators: [{