@loomui-ng/ui 0.0.0-stage → 0.1.0

package/textarea/README.md

@@ -0,0 +1,28 @@
+# Textarea
+
+```ts
+import { UI_TEXTAREA } from '@loomui-ng/ui/textarea';
+// add to the component `imports` array
+```
+
+```html
+<textarea uiTextarea placeholder="Type here"></textarea>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-textarea placeholder="Type here"></ui-textarea>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `rows` | `number \| string \| null` | `null` |
+| `cols` | `number \| string \| null` | `null` |
+| `maxlength` | `number \| null` | `null` |
+| `minlength` | `number \| null` | `null` |
+| `wrap` | `string` | `''` |
+
+Parts (selectors): `ui-textarea`, `textarea[uiTextarea]`.
+
+Spec: `docs/behavior-specs/textarea.md` · Manual test: `docs/manual-tests/textarea.md`

package/toast/README.md

@@ -0,0 +1,27 @@
+# uiToast
+
+```ts
+import { UiToaster, UiToastService } from '@loomui-ng/ui/toast';
+// add to the component imports array
+```
+
+```html
+// app root template
+<ui-toaster position="bottom-right" />
+
+// anywhere
+private toast = inject(UiToastService);
+this.toast.show('Event has been created', { description: 'Sunday', action: { label: 'Undo', onClick: () => {} } });
+this.toast.success('Saved');
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `position` (ui-toaster) | `top-left` `top-center` `top-right` `bottom-left` `bottom-center` `bottom-right` | `bottom-right` |
+| `visibleToasts` | number | `3` |
+| `duration` | ms | `4000` |
+| `theme` | `light` `dark` `system` | `system` |
+
+Import libs/ui/toast/toast.css once (see libs/ui/README.md). Not implemented: swipe, close button, promise toasts.
+
+Spec: docs/behavior-specs/toast.md - Manual checks: docs/manual-tests/toast.md

package/toggle/README.md

@@ -0,0 +1,27 @@
+# Toggle
+
+```ts
+import { UI_TOGGLE } from '@loomui-ng/ui/toggle';
+// add to the component `imports` array
+```
+
+```html
+<button uiToggle [(pressed)]="bold" aria-label="Bold">B</button>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-toggle [(pressed)]="bold" aria-label="Bold">B</ui-toggle>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `pressed` (model) |  | `false` |
+| `variant` | `NonNullable<ToggleVariants['variant']>` | `'default'` |
+| `size` | `NonNullable<ToggleVariants['size']>` | `'default'` |
+| `disabled` |  | `false` |
+
+Parts (selectors): `button[uiToggle], ui-toggle`.
+
+Spec: `docs/behavior-specs/toggle.md` · Manual test: `docs/manual-tests/toggle.md`

package/toggle-group/README.md

@@ -0,0 +1,37 @@
+# Toggle Group
+
+```ts
+import { UI_TOGGLE_GROUP } from '@loomui-ng/ui/toggle-group';
+// add to the component `imports` array
+```
+
+```html
+<div uiToggleGroup type="multiple" [(value)]="v">
+  <button uiToggleGroupItem value="bold">B</button>
+  <button uiToggleGroupItem value="italic">I</button>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-toggle-group type="multiple" [(value)]="v">
+  <ui-toggle-group-item value="bold">B</ui-toggle-group-item>
+  <ui-toggle-group-item value="italic">I</ui-toggle-group-item>
+</ui-toggle-group>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `type` | `'single' \| 'multiple'` | `'single'` |
+| `value` (model) | `string[]` | `[]` |
+| `variant` | `'default' \| 'outline'` | `'default'` |
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` |
+| `spacing` |  | `0` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `disabled` |  | `false` |
+| `disabledInput` |  | `false` |
+
+Parts (selectors): `[uiToggleGroup], ui-toggle-group`, `button[uiToggleGroupItem], ui-toggle-group-item`.
+
+Spec: `docs/behavior-specs/toggle-group.md` · Manual test: `docs/manual-tests/toggle-group.md`

package/tooltip/README.md

@@ -0,0 +1,31 @@
+# uiTooltip
+
+```ts
+import { UI_TOOLTIP } from '@loomui-ng/ui/tooltip';
+// add to the component imports array
+```
+
+```html
+<div uiTooltip [delay]="0" class="contents">
+  <button uiButton uiTooltipTrigger>Hover</button>
+  <div uiTooltipContent side="top">Add to library</div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-tooltip [delay]="0" class="contents">
+  <ui-button uiTooltipTrigger>Hover</ui-button>
+  <ui-tooltip-content side="top">Add to library</ui-tooltip-content>
+</ui-tooltip>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `delay` (uiTooltip) | ms | `0` |
+| `side` / `align` / `sideOffset` | as Popover | `top`-less: `bottom` |
+
+Opens on hover (delayed-open) and keyboard focus (instant-open); a visually hidden role=tooltip copy is referenced by aria-describedby.
+
+Spec: docs/behavior-specs/tooltip.md - Manual checks: docs/manual-tests/tooltip.md

package/types/loomui-ng-ui-accordion.d.ts

@@ -0,0 +1,141 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const accordionClass = "flex w-full flex-col";
+export declare const accordionItemClass = "not-last:border-b border-b px-4 last:border-b-0";
+export declare const accordionTriggerClass = "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground";
+export declare const accordionContentClass = "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up";
+export declare const UI_ACCORDION_GENERATED: readonly [];
+/**
+ * <div uiAccordion type="single" [(value)]="open" class="rounded-lg border">
+ *   <div uiAccordionItem value="a">
+ *     <button uiAccordionTrigger>Question</button>
+ *     <div uiAccordionContent>Answer</div>
+ *   </div>
+ * </div>
+ * `value` is always an array (single mode holds at most one entry).
+ */
+export declare class UiAccordion {
+  readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
+  readonly collapsible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  readonly value: import("@angular/core").ModelSignal<string[]>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  readonly baseId: string;
+  private readonly dir;
+  private readonly triggers;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  isOpen(v: string): boolean;
+  toggle(v: string): void;
+  protected onKeydown(e: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAccordion, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAccordion, "[uiAccordion], ui-accordion", ["uiAccordion"], {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapsible": {
+      "alias": "collapsible";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, ["triggers"], never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAccordionItem {
+  protected readonly root: UiAccordion;
+  readonly value: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  readonly open: import("@angular/core").Signal<boolean>;
+  readonly triggerId: import("@angular/core").Signal<string>;
+  readonly contentId: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAccordionItem, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAccordionItem, "[uiAccordionItem], ui-accordion-item", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAccordionTrigger {
+  protected readonly root: UiAccordion;
+  protected readonly item: UiAccordionItem;
+  readonly el: HTMLElement;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  isDisabled: () => boolean;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAccordionTrigger, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiAccordionTrigger, "button[uiAccordionTrigger], ui-accordion-trigger", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAccordionContent {
+  protected readonly root: UiAccordion;
+  protected readonly item: UiAccordionItem;
+  private readonly el;
+  private readonly inner;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  /** Stays true during the exit animation so `animate-accordion-up` can play. */
+  protected readonly present: import("@angular/core").WritableSignal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  constructor();
+  private setHeight;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAccordionContent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiAccordionContent, "[uiAccordionContent], ui-accordion-content", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_ACCORDION: readonly [typeof UiAccordion, typeof UiAccordionItem, typeof UiAccordionTrigger, typeof UiAccordionContent];

package/types/loomui-ng-ui-alert-dialog.d.ts

@@ -0,0 +1,175 @@
+import * as i1 from "@loomui-ng/ui/utils";
+import { ModalContentConfig, UiModalContentBase, UiModalRoot } from "@loomui-ng/ui/utils";
+import * as i0 from "@angular/core";
+export declare const alertDialogOverlayClass = "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
+export declare const alertDialogContentClass = "group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rtl:translate-x-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95";
+export declare const alertDialogHeaderClass = "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]";
+export declare const alertDialogTitleClass = "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2";
+export declare const alertDialogDescriptionClass = "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground";
+export declare const alertDialogFooterClass = "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end";
+export declare const UI_ALERT_DIALOG_GENERATED: readonly [];
+/**
+ * <div uiAlertDialog class="contents">
+ *   <button uiButton variant="outline" uiAlertDialogTrigger>Delete</button>
+ *   <div uiAlertDialogContent>
+ *     <div uiAlertDialogHeader><h2 uiAlertDialogTitle>Are you sure?</h2><p uiAlertDialogDescription>…</p></div>
+ *     <div uiAlertDialogFooter><button uiAlertDialogCancel>Cancel</button><button uiAlertDialogAction>Continue</button></div>
+ *   </div>
+ * </div>
+ * Differences from Dialog (Radix AlertDialog): role="alertdialog", clicking the overlay does NOT dismiss, no corner close
+ * button, and initial focus goes to the Cancel button.
+ */
+export declare class UiAlertDialog extends UiModalRoot {
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialog, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialog, "[uiAlertDialog], ui-alert-dialog", ["uiAlertDialog"], {}, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDialogTrigger {
+  protected readonly root: UiAlertDialog;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogTrigger, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogTrigger, "[uiAlertDialogTrigger], ui-alert-dialog-trigger", never, {}, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDialogContent extends UiModalContentBase {
+  protected readonly root: UiAlertDialog;
+  protected readonly config: ModalContentConfig;
+  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogContent, "[uiAlertDialogContent], ui-alert-dialog-content", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDialogHeader {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogHeader, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogHeader, "[uiAlertDialogHeader], ui-alert-dialog-header", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDialogFooter {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogFooter, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogFooter, "[uiAlertDialogFooter], ui-alert-dialog-footer", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDialogTitle {
+  protected readonly root: UiAlertDialog;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogTitle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogTitle, "[uiAlertDialogTitle], ui-alert-dialog-title", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDialogDescription {
+  protected readonly root: UiAlertDialog;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogDescription, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogDescription, "[uiAlertDialogDescription], ui-alert-dialog-description", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Observed: outline Button. Closes the dialog. */
+export declare class UiAlertDialogCancel {
+  /** Reflected as the `disabled` attribute so it also works on the custom element. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly root: UiAlertDialog;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogCancel, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogCancel, "button[uiAlertDialogCancel], ui-alert-dialog-cancel", never, {
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Observed: default Button. Closes the dialog after your own (click) handler runs. */
+export declare class UiAlertDialogAction {
+  /** Reflected as the `disabled` attribute so it also works on the custom element. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly root: UiAlertDialog;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDialogAction, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDialogAction, "button[uiAlertDialogAction], ui-alert-dialog-action", never, {
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_ALERT_DIALOG: readonly [typeof UiAlertDialog, typeof UiAlertDialogTrigger, typeof UiAlertDialogContent, typeof UiAlertDialogHeader, typeof UiAlertDialogFooter, typeof UiAlertDialogTitle, typeof UiAlertDialogDescription, typeof UiAlertDialogCancel, typeof UiAlertDialogAction];

package/types/loomui-ng-ui-alert.d.ts

@@ -0,0 +1,77 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare class UiAlert {
+  readonly variant: import("@angular/core").InputSignal<"default" | "destructive">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlert, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlert, "[uiAlert], ui-alert", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertTitle {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertTitle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertTitle, "[uiAlertTitle], ui-alert-title", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertDescription {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertDescription, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertDescription, "[uiAlertDescription], ui-alert-description", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiAlertAction {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertAction, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAlertAction, "[uiAlertAction], ui-alert-action", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_ALERT_GENERATED: readonly [typeof UiAlert, typeof UiAlertTitle, typeof UiAlertDescription, typeof UiAlertAction];
+export declare const UI_ALERT: readonly [typeof UiAlert, typeof UiAlertTitle, typeof UiAlertDescription, typeof UiAlertAction];

package/types/loomui-ng-ui-aspect-ratio.d.ts

@@ -0,0 +1,31 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const aspectRatioClass = "";
+export declare const UI_ASPECT_RATIO_GENERATED: readonly [];
+/**
+ * <div uiAspectRatio [ratio]="16 / 9"><img class="size-full object-cover" … /></div>
+ * Uses the CSS `aspect-ratio` property (Radix uses a padding-bottom wrapper; the visible result is the same).
+ */
+export declare class UiAspectRatio {
+  readonly ratio: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAspectRatio, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAspectRatio, "[uiAspectRatio], ui-aspect-ratio", never, {
+    "ratio": {
+      "alias": "ratio";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_ASPECT_RATIO: readonly [typeof UiAspectRatio];