@surfnet/curve-angular 0.2.0

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-item-sub-indicator.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCaretRight } from '@ng-icons/phosphor-icons/regular';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-dropdown-menu-item-sub-indicator',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCaretRight })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ` <ng-icon name="phosphorCaretRight" class="text-base rtl:rotate-180" /> `,
+})
+export class HlmDropdownMenuItemSubIndicator {
+  constructor() {
+    classes(() => 'ms-auto size-4');
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-item.ts

@@ -0,0 +1,41 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem } from '@angular/cdk/menu';
+import { booleanAttribute, Directive, HOST_TAG_NAME, inject, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+import type { DropdownMenuItemVariantName } from '@surfnet/curve-contracts';
+
+@Directive({
+  selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
+  hostDirectives: [
+    {
+      directive: CdkMenuItem,
+      inputs: ['cdkMenuItemDisabled: disabled'],
+      outputs: ['cdkMenuItemTriggered: triggered'],
+    },
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-item',
+    '[attr.disabled]': '_isButton && disabled() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-inset]': 'inset() ? "" : null',
+  },
+})
+export class HlmDropdownMenuItem {
+  protected readonly _isButton = inject(HOST_TAG_NAME) === 'button';
+
+  public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  public readonly variant = input<DropdownMenuItemVariantName>('default');
+
+  public readonly inset = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(
+      () =>
+        "hover:bg-accent focus-visible:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:!text-destructive [&_ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_svg:not([class*='text-'])]:text-base",
+    );
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-label.ts

@@ -0,0 +1,20 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
+  host: {
+    'data-slot': 'dropdown-menu-label',
+    '[attr.data-inset]': 'inset() ? "" : null',
+  },
+})
+export class HlmDropdownMenuLabel {
+  constructor() {
+    classes(() => 'block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8');
+  }
+
+  public readonly inset = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-radio-indicator.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCircle } from '@ng-icons/phosphor-icons/regular';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-dropdown-menu-radio-indicator',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCircle })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ` <ng-icon name="phosphorCircle" class="text-[0.5rem] *:[svg]:fill-current" /> `,
+})
+export class HlmDropdownMenuRadioIndicator {
+  constructor() {
+    classes(
+      () =>
+        'pointer-events-none absolute start-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
+    );
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-radio.ts

@@ -0,0 +1,36 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItemRadio } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenuRadio]',
+  hostDirectives: [
+    {
+      directive: CdkMenuItemRadio,
+      inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+      outputs: ['cdkMenuItemTriggered: triggered'],
+    },
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-radio-item',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-checked]': 'checked() ? "" : null',
+  },
+})
+export class HlmDropdownMenuRadio {
+  private readonly _cdkMenuItem = inject(CdkMenuItemRadio);
+  public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, {
+    transform: booleanAttribute,
+  });
+  public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(
+      () =>
+        'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    );
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-separator.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
+  host: {
+    'data-slot': 'dropdown-menu-separator',
+  },
+})
+export class HlmDropdownMenuSeparator {
+  constructor() {
+    classes(() => 'bg-border -mx-1 my-1 block h-px');
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-shortcut.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
+  host: {
+    'data-slot': 'dropdown-menu-shortcut',
+  },
+})
+export class HlmDropdownMenuShortcut {
+  constructor() {
+    classes(() => 'text-muted-foreground ml-auto text-xs tracking-widest');
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-sub.ts

@@ -0,0 +1,58 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
+  hostDirectives: [CdkMenu],
+  host: {
+    'data-slot': 'dropdown-menu-sub',
+    '[attr.data-state]': '_state()',
+    '[attr.data-side]': '_side()',
+  },
+})
+export class HlmDropdownMenuSub {
+  private readonly _host = inject(CdkMenu);
+
+  protected readonly _state = signal('open');
+  protected readonly _side = signal('top');
+
+  constructor() {
+    this.setSideWithDarkMagic();
+    // this is a best effort, but does not seem to work currently
+    // TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+    this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+
+    classes(
+      () =>
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-top overflow-hidden rounded-md border p-1 shadow-lg',
+    );
+  }
+
+  private setSideWithDarkMagic() {
+    /**
+     * This is an ugly workaround to at least figure out the correct side of where a submenu
+     * will appear and set the attribute to the host accordingly
+     *
+     * First of all we take advantage of the menu stack not being aware of the root
+     * object immediately after it is added. This code executes before the root element is added,
+     * which means the stack is still empty and the peek method returns undefined.
+     */
+    const isRoot = this._host.menuStack.peek() === undefined;
+    setTimeout(() => {
+      // our menu trigger directive leaves the last position used for use immediately after opening
+      // we can access it here and determine the correct side.
+      // eslint-disable-next-line
+      const ps = (this._host as any)._parentTrigger._spartanLastPosition;
+      if (!ps) {
+        // if we have no last position we default to the most likely option
+        // I hate that we have to do this and hope we can revisit soon and improve
+        this._side.set(isRoot ? 'top' : 'left');
+        return;
+      }
+      const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
+      this._side.set(side);
+    });
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-token.ts

@@ -0,0 +1,26 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import { type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+
+export interface HlmDropdownMenuConfig {
+  align: MenuAlign;
+  side: MenuSide;
+}
+
+const defaultConfig: HlmDropdownMenuConfig = {
+  align: 'start',
+  side: 'bottom',
+};
+
+const HlmDropdownMenuConfigToken = new InjectionToken<HlmDropdownMenuConfig>(
+  'HlmDropdownMenuConfig',
+);
+
+export function provideHlmDropdownMenuConfig(
+  config: Partial<HlmDropdownMenuConfig>,
+): ValueProvider {
+  return { provide: HlmDropdownMenuConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmDropdownMenuConfig(): HlmDropdownMenuConfig {
+  return inject(HlmDropdownMenuConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-trigger.ts

@@ -0,0 +1,49 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { computed, Directive, effect, inject, input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+  selector: '[hlmDropdownMenuTrigger]',
+  hostDirectives: [
+    {
+      directive: CdkMenuTrigger,
+      inputs: [
+        'cdkMenuTriggerFor: hlmDropdownMenuTrigger',
+        'cdkMenuTriggerData: hlmDropdownMenuTriggerData',
+      ],
+      outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
+    },
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-trigger',
+  },
+})
+export class HlmDropdownMenuTrigger {
+  private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+  private readonly _config = injectHlmDropdownMenuConfig();
+
+  public readonly align = input<MenuAlign>(this._config.align);
+  public readonly side = input<MenuSide>(this._config.side);
+
+  private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+  constructor() {
+    // once the trigger opens we wait until the next tick and then grab the last position
+    // used to position the menu. we store this in our trigger which the brnMenu directive has
+    // access to through DI
+    this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
+      setTimeout(
+        () =>
+          // eslint-disable-next-line
+          ((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
+            (this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
+      ),
+    );
+
+    effect(() => {
+      this._cdkTrigger.menuPosition = this._menuPosition();
+    });
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu.stories.ts

@@ -0,0 +1,125 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorDotsThreeVertical } from '@ng-icons/phosphor-icons/regular';
+import { HlmDropdownMenu, HlmDropdownMenuImports } from '..';
+import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import { HlmButton, HlmButtonImports } from '../../../../../public-api';
+import { dropdownMenuContract } from '@surfnet/curve-contracts';
+
+const meta: Meta<HlmDropdownMenu> = {
+  title: 'Components/Dropdown Menu',
+  component: HlmDropdownMenu,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmDropdownMenuImports, HlmButton, NgIcon],
+      providers: [provideIcons({ phosphorDotsThreeVertical })],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: dropdownMenuContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmDropdownMenu>;
+
+/** A menu with a label, grouped items, and a destructive action. */
+export const Default: Story = {
+  render: () => ({
+    template: `
+    <div class="w-full flex justify-center items-center">
+      <button hlmBtn variant="outline" [hlmDropdownMenuTrigger]="menu">Open menu</button>
+    </div>
+    <ng-template #menu>
+      <hlm-dropdown-menu align="start" class="w-48">
+        <hlm-dropdown-menu-group>
+          <hlm-dropdown-menu-label>My Account</hlm-dropdown-menu-label>
+          <button hlmDropdownMenuItem>
+            <span>Profile</span>
+            <hlm-dropdown-menu-shortcut>⇧⌘P</hlm-dropdown-menu-shortcut>
+          </button>
+
+          <button hlmDropdownMenuItem>Settings</button>
+        </hlm-dropdown-menu-group>
+
+        <hlm-dropdown-menu-separator />
+        
+        <button hlmDropdownMenuItem variant="destructive">Delete</button>
+      </hlm-dropdown-menu>
+    </ng-template>`,
+  }),
+};
+
+/** The "⋯" row-actions pattern from a data table. */
+export const RowActions: Story = {
+  render: () => ({
+    template: `
+    <div class="w-full flex justify-center items-center">
+      <button hlmBtn variant="ghost" size="icon-sm" align="end" aria-label="Row actions" [hlmDropdownMenuTrigger]="menu">
+        <ng-icon name="phosphorDotsThreeVertical" />
+      </button>
+    </div>
+    <ng-template #menu>
+      <hlm-dropdown-menu class="w-40">
+        <button hlmDropdownMenuItem>View</button>
+        <button hlmDropdownMenuItem>Edit</button>
+        <hlm-dropdown-menu-separator />
+        <button hlmDropdownMenuItem variant="destructive">Remove</button>
+      </hlm-dropdown-menu>
+    </ng-template>`,
+  }),
+};
+
+/** Checkbox items for toggling options. */
+export const WithCheckboxItems: Story = {
+  render: () => ({
+    moduleMetadata: {
+      imports: [DropdownCheckboxes],
+    },
+    template: '<stateful-dropdown-story/>',
+  }),
+};
+
+@Component({
+  selector: 'stateful-dropdown-story',
+  imports: [HlmDropdownMenuImports, HlmButtonImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ` <div class="w-full flex justify-center items-center">
+      <button
+        hlmBtn
+        variant="outline"
+        aria-label="With Checkbox Items"
+        [hlmDropdownMenuTrigger]="menu"
+      >
+        Columns
+      </button>
+    </div>
+    <ng-template #menu>
+      <hlm-dropdown-menu class="w-44">
+        <hlm-dropdown-menu-label>Toggle columns</hlm-dropdown-menu-label>
+        <button hlmDropdownMenuCheckbox [checked]="true">
+          Name
+          <hlm-dropdown-menu-checkbox-indicator />
+        </button>
+        <button hlmDropdownMenuCheckbox [checked]="true">
+          Category
+          <hlm-dropdown-menu-checkbox-indicator />
+        </button>
+        <button
+          hlmDropdownMenuCheckbox
+          [checked]="isStatusChecked()"
+          (triggered)="isStatusChecked.set(!isStatusChecked())"
+        >
+          Status
+          <hlm-dropdown-menu-checkbox-indicator />
+        </button>
+      </hlm-dropdown-menu>
+    </ng-template>`,
+})
+class DropdownCheckboxes {
+  public readonly isStatusChecked = signal(false);
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu.ts

@@ -0,0 +1,62 @@
+import { type NumberInput } from '@angular/cdk/coercion';
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive, inject, input, numberAttribute, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenu],hlm-dropdown-menu',
+  hostDirectives: [CdkMenu],
+  host: {
+    'data-slot': 'dropdown-menu',
+    '[attr.data-state]': '_state()',
+    '[attr.data-side]': '_side()',
+    '[style.--side-offset]': 'sideOffset()',
+  },
+})
+export class HlmDropdownMenu {
+  private readonly _host = inject(CdkMenu);
+
+  protected readonly _state = signal('open');
+  protected readonly _side = signal('top');
+
+  public readonly sideOffset = input<number, NumberInput>(1, { transform: numberAttribute });
+
+  constructor() {
+    classes(
+      () =>
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 my-[--spacing(var(--side-offset))] min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+    );
+
+    this.setSideWithDarkMagic();
+    // this is a best effort, but does not seem to work currently
+    // TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+    this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+  }
+
+  private setSideWithDarkMagic() {
+    /**
+     * This is an ugly workaround to at least figure out the correct side of where a submenu
+     * will appear and set the attribute to the host accordingly
+     *
+     * First of all we take advantage of the menu stack not being aware of the root
+     * object immediately after it is added. This code executes before the root element is added,
+     * which means the stack is still empty and the peek method returns undefined.
+     */
+    const isRoot = this._host.menuStack.peek() === undefined;
+    setTimeout(() => {
+      // our menu trigger directive leaves the last position used for use immediately after opening
+      // we can access it here and determine the correct side.
+      // eslint-disable-next-line
+      const ps = (this._host as any)._parentTrigger._spartanLastPosition;
+      if (!ps) {
+        // if we have no last position we default to the most likely option
+        // I hate that we have to do this and hope we can revisit soon and improve
+        this._side.set(isRoot ? 'top' : 'left');
+        return;
+      }
+      const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
+      this._side.set(side);
+    });
+  }
+}

package/src/lib/ui/field/src/index.ts

@@ -0,0 +1,34 @@
+import { HlmField } from './lib/hlm-field';
+import { HlmFieldContent } from './lib/hlm-field-content';
+import { HlmFieldDescription } from './lib/hlm-field-description';
+import { HlmFieldError } from './lib/hlm-field-error';
+import { HlmFieldGroup } from './lib/hlm-field-group';
+import { HlmFieldLabel } from './lib/hlm-field-label';
+import { HlmFieldLegend } from './lib/hlm-field-legend';
+import { HlmFieldSeparator } from './lib/hlm-field-separator';
+import { HlmFieldSet } from './lib/hlm-field-set';
+import { HlmFieldTitle } from './lib/hlm-field-title';
+
+export * from './lib/hlm-field';
+export * from './lib/hlm-field-content';
+export * from './lib/hlm-field-description';
+export * from './lib/hlm-field-error';
+export * from './lib/hlm-field-group';
+export * from './lib/hlm-field-label';
+export * from './lib/hlm-field-legend';
+export * from './lib/hlm-field-separator';
+export * from './lib/hlm-field-set';
+export * from './lib/hlm-field-title';
+
+export const HlmFieldImports = [
+  HlmField,
+  HlmFieldContent,
+  HlmFieldDescription,
+  HlmFieldError,
+  HlmFieldGroup,
+  HlmFieldLabel,
+  HlmFieldLegend,
+  HlmFieldSeparator,
+  HlmFieldSet,
+  HlmFieldTitle,
+] as const;

package/src/lib/ui/field/src/lib/hlm-field-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmFieldContent],hlm-field-content',
+  host: { 'data-slot': 'field-content' },
+})
+export class HlmFieldContent {
+  constructor() {
+    classes(() => 'gap-1 group/field-content flex flex-1 flex-col leading-snug');
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-description.ts

@@ -0,0 +1,53 @@
+import { Directive, effect, EffectRef, inject, input, OnDestroy } from '@angular/core';
+import { BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmFieldDescription],hlm-field-description',
+  host: {
+    'data-slot': 'field-description',
+    '[attr.id]': 'id()',
+  },
+})
+export class HlmFieldDescription implements OnDestroy {
+  private static _id = 0;
+
+  private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+
+  public readonly id = input<string>(`hlm-field-description-${HlmFieldDescription._id++}`);
+
+  private _registeredId?: string;
+
+  private readonly _cleanup: EffectRef | null = this._a11y
+    ? effect(() => {
+        const a11y = this._a11y;
+        if (!a11y) return;
+
+        const id = this.id();
+        if (this._registeredId && this._registeredId !== id) {
+          a11y.unregisterDescription(this._registeredId);
+        }
+
+        if (this._registeredId !== id) {
+          a11y.registerDescription(id);
+          this._registeredId = id;
+        }
+      })
+    : null;
+
+  constructor() {
+    classes(() => [
+      'text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance',
+      'last:mt-0 nth-last-2:-mt-1',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+    ]);
+  }
+
+  ngOnDestroy() {
+    this._cleanup?.destroy();
+
+    if (this._registeredId) {
+      this._a11y?.unregisterDescription(this._registeredId);
+    }
+  }
+}