@underlayerdev/ui 0.13.3 → 0.14.0

package/fesm2022/underlayerdev-ui.mjs

@@ -1,17 +1,16 @@
 import * as i1 from '@angular/cdk/accordion';
 import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, input, DestroyRef, contentChildren, computed, ViewEncapsulation, signal, effect, Directive, output, model, booleanAttribute, viewChild, ViewChild, contentChild, HostListener, Pipe, SecurityContext, Injectable, HostBinding } from '@angular/core';
+import { inject, ElementRef, Component, input, DestroyRef, contentChildren, computed, ViewEncapsulation, signal, effect, Directive, output, model, booleanAttribute, contentChild, HostListener, ViewChild, viewChild, Pipe, SecurityContext, Injectable, HostBinding } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
-import Splide from '@splidejs/splide';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { fromEvent, map } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { ImageCropperComponent as ImageCropperComponent$1 } from 'ngx-image-cropper';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
@@ -1314,112 +1313,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     }, encapsulation: ViewEncapsulation.None, template: "@if (loading()) {\n  <div class=\"ul-card__skeleton\">\n    <div class=\"ul-card__media\">\n      <ul-skeleton variant=\"rect\" borderRadius=\"lg\" [show]=\"true\" />\n    </div>\n    <div class=\"ul-card__content\">\n      <div class=\"ul-card__content-title ul-card__content-title--single-line\">\n        <ul-skeleton variant=\"text\" [lines]=\"2\" borderRadius=\"sm\" />\n      </div>\n      <div class=\"ul-card__content-subtitle ul-card__content-subtitle--single-line\">\n        <ul-skeleton variant=\"text\" [lines]=\"1\" borderRadius=\"sm\" />\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"ul-card__media\">\n    <ng-content select=\"[ulCardMedia]\" />\n    <ng-content select=\"[ulCardMediaOverlay]\" />\n  </div>\n  <div class=\"ul-card__media-action\">\n    <ng-content select=\"[ulCardMediaAction]\" />\n  </div>\n\n  <div class=\"ul-card__content\">\n    @if (cardCaption()) {\n      <div class=\"ul-card__content-caption\">\n        {{ cardCaption() }}\n      </div>\n    }\n    @if (cardTitle()) {\n      <div\n        class=\"ul-card__content-title\"\n        [class.ul-card__content-title--single-line]=\"cardTitleSingleLine()\"\n      >\n        {{ cardTitle() }}\n      </div>\n    }\n    @if (cardSubtitle()) {\n      <div\n        class=\"ul-card__content-subtitle\"\n        [class.ul-card__content-subtitle--single-line]=\"cardSubtitleSingleLine()\"\n      >\n        {{ cardSubtitle() }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ul-card__footer\">\n    <ng-content select=\"[ulCardFooter]\" />\n  </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-card{display:flex;position:relative;flex-direction:column;overflow:visible;width:100%;color:#ffffff80;border-radius:8px;gap:12px;outline:8px solid transparent;background-color:transparent;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;transition:background-color .25s cubic-bezier(.4,0,.2,1),outline .25s cubic-bezier(.4,0,.2,1)}@media(min-width:0px){.ul-card{min-width:100px}}@media(min-width:768px){.ul-card{min-width:180px}}@media(min-width:1280px){.ul-card{min-width:150px}}.ul-card:hover,.ul-card:focus,.ul-card:focus-within,.ul-card--focused{outline-color:#ffffff1a;background-color:#ffffff1a}.ul-card__media{position:relative;overflow:hidden;width:100%;background-color:#ffffff1a;border-radius:8px}@media(min-width:0px){.ul-card__media{min-height:100px}}@media(min-width:768px){.ul-card__media{min-height:180px}}@media(min-width:1280px){.ul-card__media{min-height:150px}}.ul-card__media>:first-child{width:100%;height:100%;display:block;object-fit:cover;filter:blur(var(--ul-card__media-blur, 0)) grayscale(var(--ul-card__media-grayscale, 0))}.ul-card__media>:nth-child(2){position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.ul-card__media-action{opacity:0;position:absolute;top:8px;right:8px;z-index:2;transition:opacity .15s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-card__media-action{opacity:1}}.ul-card:hover .ul-card__media-action,.ul-card:focus .ul-card__media-action,.ul-card:focus-within .ul-card__media-action{opacity:1}.ul-card__content{flex:1}.ul-card__content-caption{color:#ffffff80;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.ul-card__content-title{color:#fff;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ul-card__content-title--single-line{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.ul-card__content-subtitle{color:#ffffff80;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ul-card__content-subtitle--single-line{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.ul-card__footer{display:flex;gap:8px}.ul-card--disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.ul-card--caption-sm .ul-card__content-caption{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-card--footer-equal .ul-card__footer>*{flex:1}.ul-card--media-square .ul-card__media{aspect-ratio:1/1}.ul-card--media-portrait .ul-card__media{aspect-ratio:3/4}.ul-card__media img{width:100%;height:100%;object-fit:cover}.ul-card--media-blurred{--ul-card__media-blur: 16px}.ul-card--media-blurred .ul-card__media>:first-child{fill:#0000004d}.ul-card--media-grayscale{--ul-card__media-grayscale: 1}.ul-card--media-grayscale .ul-card__media>:first-child{opacity:.5;mix-blend-mode:luminosity}.ul-card__skeleton{display:flex;flex-direction:column;gap:12px;min-height:100px}.ul-card__skeleton>.ul-skeleton:first-child{width:100%;aspect-ratio:16/9}.ul-card__skeleton-body{margin-top:12px;display:flex;flex-direction:column;gap:8px}\n"] }]
         }], propDecorators: { focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardDirection", required: false }] }], cardCaptionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardCaptionSize", required: false }] }], footerDist: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerDist", required: false }] }], mediaAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaAspectRatio", required: false }] }], mediaBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaBlur", required: false }] }], mediaGrayscale: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaGrayscale", required: false }] }], cardCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardCaption", required: false }] }], cardTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitle", required: false }] }], cardTitleSingleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitleSingleLine", required: false }] }], cardSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSubtitle", required: false }] }], cardSubtitleSingleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSubtitleSingleLine", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
-class CarouselItemComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: CarouselItemComponent, isStandalone: true, selector: "ul-carousel-item", host: { classAttribute: "splide__slide ul-carousel__item" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CarouselItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ul-carousel-item',
-                    template: ` <ng-content /> `,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        class: 'splide__slide ul-carousel__item',
-                    },
-                }]
-        }] });
-class CarouselComponent {
-    options = input({
-        autoplay: true,
+/**
+ * A reusable input component that follows UDS design system guidelines.
+ * Implements FormValueControl for use with Signal Forms [formField] directive.
+ *
+ * Use [(value)] for two-way binding, or bind with [formField]="myForm().email" for Signal Forms.
+ *
+ * Content projection: [ul-input-left-elements], [ul-input-right-elements].
+ */
+class InputComponent {
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Border/hover style: border-only (hover = border only), subtle-tint (hover = border + 5% fill). */
+    appearance = input('border-only', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    error = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    showRequiredIndicator = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    helperText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    maxLength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    minLength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minLength" }] : /* istanbul ignore next */ []));
+    pattern = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    /** Native step for type="number". Defaults to 'any' (decimals allowed) rather than the
+     * browser's own default of 1, which would silently reject e.g. "19.99" — pass an explicit
+     * step (e.g. 1) to restrict to whole numbers. */
+    step = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    autocomplete = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** When provided (e.g. by a parent form field), the input element uses this id instead of the internal one. */
+    controlId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "controlId" }] : /* istanbul ignore next */ []));
+    /** Aria-label for the toggle button when the password is hidden (i.e. the action reveals it). */
+    showPasswordLabel = input('Show password', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
+    /** Aria-label for the toggle button when the password is visible (i.e. the action hides it). */
+    hidePasswordLabel = input('Hide password', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
+    /** FormUiControl optional: bound by [formField] when invalid */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** FormUiControl optional: bound by [formField] for validation errors */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** FormUiControl optional: control sets on blur */
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
+    touch = output();
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ids = createFormFieldIds('ul-input');
+    effectiveControlId = computed(() => this.controlId() ?? this.ids.controlId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveControlId" }] : /* istanbul ignore next */ []));
+    effectiveHelperId = computed(() => this.controlId() ? `${this.controlId()}-helper` : this.ids.helperId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHelperId" }] : /* istanbul ignore next */ []));
+    effectiveErrorId = computed(() => this.controlId() ? `${this.controlId()}-error` : this.ids.errorId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveErrorId" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.error() || this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    // [attr.pattern]="pattern()" would stringify an empty array to "" instead
+    // of omitting the attribute — an empty native pattern matches only the
+    // empty string, so every non-empty value would fail native validation.
+    // Native <input pattern> only accepts one regex source, so multiple
+    // patterns are combined as alternatives.
+    nativePattern = computed(() => {
+        const patterns = this.pattern();
+        return patterns.length ? patterns.map((p) => p.source).join('|') : null;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    autoMount = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autoMount" }] : /* istanbul ignore next */ []));
-    mounted = output();
-    carousel = viewChild('carousel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "carousel" }] : /* istanbul ignore next */ []));
-    items = contentChildren(CarouselItemComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    instance = null;
-    constructor() {
-        effect(() => {
-            this.items(); // trigger change detection
-            this.updateCarouselOnItemsChange();
-        });
-    }
-    ngAfterViewInit() {
-        this.init();
-    }
-    ngOnDestroy() {
-        this.instance?.destroy();
-    }
-    // Get the Splide instance
-    getInstance() {
-        return this.instance;
-    }
-    // Methods to control the carousel
-    goNext() {
-        this.instance?.go('>');
+    ...(ngDevMode ? [{ debugName: "nativePattern" }] : /* istanbul ignore next */ []));
+    nativeStep = computed(() => {
+        const step = this.step();
+        if (step !== undefined)
+            return step;
+        return this.type() === 'number' ? 'any' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeStep" }] : /* istanbul ignore next */ []));
+    isPasswordType = computed(() => this.type() === 'password', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPasswordType" }] : /* istanbul ignore next */ []));
+    passwordRevealed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordRevealed" }] : /* istanbul ignore next */ []));
+    effectiveType = computed(() => this.isPasswordType() && this.passwordRevealed() ? 'text' : this.type(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
+    passwordToggleIcon = computed(() => this.passwordRevealed() ? 'eye_on' : 'eye_dashed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []));
+    passwordToggleLabel = computed(() => this.passwordRevealed() ? this.hidePasswordLabel() : this.showPasswordLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => getFormFieldDescribedBy(this.effectiveHelperId(), this.effectiveErrorId(), !!this.helperText(), this.hasError(), !!this.errorText() || this.errors().length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // Outputs
+    inputBlur = output();
+    inputFocus = output();
+    /** Emitted when Enter is pressed in the field; typically used to submit a form. */
+    inputEnter = output();
+    onInput(event) {
+        const value = event.target.value;
+        this.value.set(value);
     }
-    goPrev() {
-        this.instance?.go('<');
+    onBlur(event) {
+        this.isFocused.set(false);
+        this.touched.set(true);
+        this.touch.emit();
+        this.inputBlur.emit(event);
     }
-    goTo(index) {
-        this.instance?.go(index);
+    onFocus(event) {
+        this.isFocused.set(true);
+        this.inputFocus.emit(event);
     }
-    // Mount the carousel
-    mount() {
-        if (!this.instance) {
-            throw new Error('Carousel instance not found');
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            this.inputEnter.emit(event);
         }
-        this.instance.mount();
-        this.mounted.emit(this.instance);
     }
-    init() {
-        const carousel = this.carousel();
-        if (!carousel) {
-            throw new Error('Carousel element not found');
-        }
-        // initialize the carousel
-        this.instance = new Splide(carousel.nativeElement, {
-            arrows: false,
-            classes: {
-                page: 'splide__pagination__page ul-carousel__pagination-dot',
-            },
-            ...this.options(),
-        });
-        // mount the carousel
-        if (this.autoMount()) {
-            this.mount();
-        }
+    togglePasswordVisibility() {
+        this.passwordRevealed.update((revealed) => !revealed);
     }
-    updateCarouselOnItemsChange() {
-        this.instance?.refresh();
+    /**
+     * Programmatically focuses the input element
+     */
+    focus() {
+        const inputEl = document.getElementById(this.effectiveControlId());
+        inputEl?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: CarouselComponent, isStandalone: true, selector: "ul-carousel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoMount: { classPropertyName: "autoMount", publicName: "autoMount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mounted: "mounted" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent, isSignal: true }], viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="splide ul-carousel" #carousel role="region" aria-roledescription="carousel">
-      <div class="splide__track ul-carousel__track">
-        <div class="splide__list">
-          <ng-content />
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}\n"], encapsulation: i0.ViewEncapsulation.None });
+    select() {
+        const inputEl = document.getElementById(this.effectiveControlId());
+        inputEl?.select();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: InputComponent, isStandalone: true, selector: "ul-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus", inputEnter: "inputEnter" }, ngImport: i0, template: "<div\n  class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n  [class.ul-input--error]=\"hasError()\"\n  [class.ul-input--disabled]=\"disabled()\"\n  [class.ul-input--read-only]=\"readOnly()\"\n  [class.ul-input--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"effectiveControlId()\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n    <div class=\"ul-input__left-elements\">\n      <ng-content select=\"[ul-input-left-elements]\" />\n    </div>\n\n    <input\n      [id]=\"effectiveControlId()\"\n      [type]=\"effectiveType()\"\n      class=\"ul-input__field\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readOnly()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [attr.pattern]=\"nativePattern()\"\n      [attr.step]=\"nativeStep()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"describedBy()\"\n    />\n\n    <div class=\"ul-input__right-elements\">\n      @if (isPasswordType()) {\n        <ul-button\n          class=\"ul-input__password-toggle\"\n          theme=\"ghost-white\"\n          size=\"sm\"\n          type=\"button\"\n          [iconOnly]=\"true\"\n          [ariaLabel]=\"passwordToggleLabel()\"\n          (buttonClick)=\"togglePasswordVisibility()\"\n        >\n          <ul-icon [icon]=\"passwordToggleIcon()\" />\n        </ul-button>\n      }\n      <ng-content select=\"[ul-input-right-elements]\" />\n    </div>\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"effectiveHelperId()\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size", "showRequiredIndicator"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ul-carousel', template: `
-    <div class="splide ul-carousel" #carousel role="region" aria-roledescription="carousel">
-      <div class="splide__track ul-carousel__track">
-        <div class="splide__list">
-          <ng-content />
-        </div>
-      </div>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], autoMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMount", required: false }] }], mounted: [{ type: i0.Output, args: ["mounted"] }], carousel: [{ type: i0.ViewChild, args: ['carousel', { isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselItemComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'ul-input', imports: [FormFieldLabelComponent, FormFieldHelperComponent, ButtonComponent, IconComponent], template: "<div\n  class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n  [class.ul-input--error]=\"hasError()\"\n  [class.ul-input--disabled]=\"disabled()\"\n  [class.ul-input--read-only]=\"readOnly()\"\n  [class.ul-input--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"effectiveControlId()\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n    <div class=\"ul-input__left-elements\">\n      <ng-content select=\"[ul-input-left-elements]\" />\n    </div>\n\n    <input\n      [id]=\"effectiveControlId()\"\n      [type]=\"effectiveType()\"\n      class=\"ul-input__field\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readOnly()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [attr.pattern]=\"nativePattern()\"\n      [attr.step]=\"nativeStep()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"describedBy()\"\n    />\n\n    <div class=\"ul-input__right-elements\">\n      @if (isPasswordType()) {\n        <ul-button\n          class=\"ul-input__password-toggle\"\n          theme=\"ghost-white\"\n          size=\"sm\"\n          type=\"button\"\n          [iconOnly]=\"true\"\n          [ariaLabel]=\"passwordToggleLabel()\"\n          (buttonClick)=\"togglePasswordVisibility()\"\n        >\n          <ul-icon [icon]=\"passwordToggleIcon()\" />\n        </ul-button>\n      }\n      <ng-content select=\"[ul-input-right-elements]\" />\n    </div>\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"effectiveHelperId()\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputEnter: [{ type: i0.Output, args: ["inputEnter"] }] } });
 
 /**
  * Checkbox component. Implements FormCheckboxControl for Signal Forms [formField].
@@ -1585,67 +1632,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
   `, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ul-checkbox__row{display:inline-flex;align-items:flex-start;cursor:pointer}.ul-checkbox__row:has(.ul-checkbox__input:disabled){cursor:not-allowed}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:has(.ul-checkbox__input:indeterminate) .ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__row--accessible-zone{padding:12px}.ul-checkbox__row--visible-zone{padding:12px;background:#fff3;border-radius:12px}.ul-checkbox__row--checked-visible-zone{padding:12px;border-radius:12px;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__row--checked-visible-zone:has(.ul-checkbox__input:checked){background:#fff3}.ul-checkbox__row--error .ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input,.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#f69d9d}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--lg .ul-checkbox__pseudo-input{width:24px;height:24px}.ul-checkbox__row--lg .ul-checkbox__pseudo-input:before{width:24px;height:24px;line-height:24px;font-size:24px}.ul-checkbox__input{position:absolute;opacity:0}.ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#ffffff80}.ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#fff;box-shadow:none}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__input:disabled+.ul-checkbox__pseudo-input{border-color:#ffffff1a}.ul-checkbox__input:disabled~.ul-checkbox__label{color:#ffffff4d}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input:before{content:\"minus_small\";opacity:1}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__pseudo-input{margin:2px;border-radius:4px;border:1px solid rgba(255,255,255,.5);width:16px;height:16px;position:relative;flex-shrink:0;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__pseudo-input:before{content:\"check_small\";font-family:Ultra Icons;top:-1px;left:-1px;width:16px;height:16px;position:absolute;color:#fff;line-height:16px;opacity:0;text-align:center;font-size:16px}.ul-checkbox__label{margin-left:8px;color:#fff;transition:color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-checkbox--sm .ul-checkbox__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-checkbox:not(.ul-checkbox--sm) .ul-checkbox__label{margin-top:-2px;margin-bottom:-2px}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], zone: [{ type: i0.Input, args: [{ isSignal: true, alias: "zone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
-/**
- * A collapsible content component that supports both text and icon variants.
- * Uses CSS transitions for smooth animations and provides accessibility features.
- *
- * @example
- * ```html
- * <ul-collapse [maxHeight]="300" variant="text">
- *   <div>Collapsible content here</div>
- * </ul-collapse>
- * ```
- */
-class CollapseComponent {
-    destroyRef = inject(DestroyRef);
-    content;
-    /**
-     * The visual variant of the collapse toggle.
-     * @default 'text'
-     */
-    variant = input('text', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /**
-     * Controls the collapsed state of the component.
-     * @default true
-     */
-    collapsed = model(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    /**
-     * Maximum height of the content when collapsed.
-     * @default 200
-     */
-    maxHeight = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom label for the expand action.
-     * @default 'See more'
-     */
-    expandLabel = input('See more', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom label for the collapse action.
-     * @default 'See less'
-     */
-    collapseLabel = input('See less', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
-    /** Current full height of the content */
-    fullHeight = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []));
-    /** Whether the content is collapsible based on its height */
-    isCollapsible = computed(() => {
-        const max = Math.max(0, this.maxHeight());
-        return this.fullHeight() > max;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isCollapsible" }] : /* istanbul ignore next */ []));
-    ngAfterViewInit() {
-        // Initial height calculation
-        this.updateFullHeight();
-        // Listen for window resize events to recalculate height
-        const resizeSubscription = fromEvent(window, 'resize')
-            .pipe(debounceTime(100))
-            .subscribe(() => this.updateFullHeight());
-        this.destroyRef.onDestroy(() => resizeSubscription.unsubscribe());
+class ListItemComponent {
+    checkbox = contentChild(CheckboxComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
+    theme = input('ghost-white', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hideFocusOutline = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideFocusOutline" }] : /* istanbul ignore next */ []));
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    clickHandler() {
+        if (this.disabled() || this.loading()) {
+            return;
+        }
+        if (!this.disabled()) {
+            this.checkbox()?.checked.update((value) => !value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: ListItemComponent, isStandalone: true, selector: "ul-list-item", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideFocusOutline: { classPropertyName: "hideFocusOutline", publicName: "hideFocusOutline", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ul-skeleton [show]="loading()" variant="rect">
+      <button
+        type="button"
+        class="ul-list-item ul-list-item--{{ theme() }}"
+        [class.ul-list-item--no-focus-outline]="hideFocusOutline()"
+        [class.ul-list-item--selected]="selected() || !!checkbox()?.checked()"
+        (click)="clickHandler()"
+        [disabled]="disabled() || loading()"
+      >
+        <div class="ul-list-item__before-label">
+          <ng-content select="[ul-list-item-before-label]" />
+        </div>
+        <div class="ul-list-item__label">
+          <ng-content select="[ul-list-item-label]" />
+        </div>
+        <div class="ul-list-item__after-label">
+          <ng-content select="[ul-list-item-after-label]" />
+        </div>
+      </button>
+    </ul-skeleton>
+  `, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul-list-item', imports: [SkeletonComponent], template: `
+    <ul-skeleton [show]="loading()" variant="rect">
+      <button
+        type="button"
+        class="ul-list-item ul-list-item--{{ theme() }}"
+        [class.ul-list-item--no-focus-outline]="hideFocusOutline()"
+        [class.ul-list-item--selected]="selected() || !!checkbox()?.checked()"
+        (click)="clickHandler()"
+        [disabled]="disabled() || loading()"
+      >
+        <div class="ul-list-item__before-label">
+          <ng-content select="[ul-list-item-before-label]" />
+        </div>
+        <div class="ul-list-item__label">
+          <ng-content select="[ul-list-item-label]" />
+        </div>
+        <div class="ul-list-item__after-label">
+          <ng-content select="[ul-list-item-after-label]" />
+        </div>
+      </button>
+    </ul-skeleton>
+  `, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"] }]
+        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CheckboxComponent), { isSignal: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFocusOutline", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+class ModalComponent {
+    /** Whether the modal is open. Supports two-way binding with [(open)]. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Visual variant: default, success, error, custom, or bottom-sheet (mobile-only layout). */
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Optional title shown in the header. */
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Whether clicking the backdrop closes the modal. */
+    closeOnBackdropClick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    /** Whether to show the close button in the header. */
+    showCloseButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    /** Label for the primary confirm action in the confirmation variant. */
+    confirmLabel = input('Confirm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the secondary cancel action in the confirmation variant. */
+    cancelLabel = input('Cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** Optional CSS class for the panel (e.g. for custom variant). */
+    customClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Below the phone breakpoint, fills the entire viewport edge-to-edge (no
+     * margin, no rounded corners, no visible backdrop) instead of the default
+     * bottom-pinned sheet every variant otherwise gets there. Has no effect
+     * above that breakpoint — desktop/tablet layout is unchanged either way.
+     */
+    fullScreenInMobile = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullScreenInMobile" }] : /* istanbul ignore next */ []));
+    /** Emitted when the modal is closed (button, backdrop, or escape). */
+    closed = output();
+    /** Emitted when the user confirms in the confirmation variant. */
+    confirmed = output();
+    /** Emitted when the user cancels in the confirmation variant. */
+    cancelled = output();
+    panelClass = computed(() => {
+        const variant = this.variant();
+        const custom = this.customClass();
+        const classes = ['ul-modal__panel', `ul-modal__panel--${variant}`];
+        if (this.fullScreenInMobile()) {
+            classes.push('ul-modal__panel--fullscreen-mobile');
+        }
+        if (custom) {
+            classes.push(custom);
+        }
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    isConfirmation = computed(() => this.variant() === 'confirmation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isConfirmation" }] : /* istanbul ignore next */ []));
+    isSuccess = computed(() => this.variant() === 'success', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
+    isError = computed(() => this.variant() === 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
+    modalTitle = computed(() => (this.isSuccess() || this.isError() ? '' : this.title()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
+    titleId = `ul-modal-title-${Math.random().toString(36).slice(2, 11)}`;
+    bodyId = `ul-modal-body-${Math.random().toString(36).slice(2, 11)}`;
+    close() {
+        this.open.set(false);
+        this.closed.emit();
+    }
+    onConfirm() {
+        if (!this.isConfirmation()) {
+            return;
+        }
+        this.confirmed.emit();
+        this.close();
+    }
+    onCancel() {
+        if (!this.isConfirmation()) {
+            return;
+        }
+        this.cancelled.emit();
+        this.close();
+    }
+    onBackdropClick(event) {
+        if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
+            this.close();
+        }
+    }
+    onEscape() {
+        if (this.open()) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ModalComponent, isStandalone: true, selector: "ul-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, fullScreenInMobile: { classPropertyName: "fullScreenInMobile", publicName: "fullScreenInMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"ul-modal ul-modal--backdrop\"\n    role=\"dialog\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"bodyId\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n      @if (modalTitle() || showCloseButton()) {\n        <header class=\"ul-modal__header\">\n          @if (modalTitle()) {\n            <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n          }\n          @if (showCloseButton()) {\n            <ul-button\n              type=\"button\"\n              theme=\"ghost-white\"\n              [iconOnly]=\"true\"\n              ariaLabel=\"Close\"\n              class=\"ul-modal__close\"\n              (buttonClick)=\"close()\"\n            >\n              <ul-icon icon=\"close\" size=\"6\" />\n            </ul-button>\n          }\n        </header>\n      }\n      <div class=\"ul-modal__body\" [id]=\"bodyId\">\n        @if (isSuccess() || isError()) {\n          <div class=\"ul-modal__status\" aria-hidden=\"true\">\n            <ul-icon\n              class=\"ul-modal__status-icon\"\n              [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n              size=\"16\"\n            />\n          </div>\n        }\n        <ng-content />\n      </div>\n      <div class=\"ul-modal__footer\">\n        @if (isConfirmation()) {\n          <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n            {{ cancelLabel() }}\n          </ul-button>\n          <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n            {{ confirmLabel() }}\n          </ul-button>\n        } @else {\n          <ng-content select=\"[ul-modal-footer]\" />\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul-modal', imports: [CdkTrapFocus, ButtonComponent, IconComponent], encapsulation: ViewEncapsulation.None, host: {
+                        '[attr.aria-hidden]': '!open()',
+                    }, template: "@if (open()) {\n  <div\n    class=\"ul-modal ul-modal--backdrop\"\n    role=\"dialog\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"bodyId\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n      @if (modalTitle() || showCloseButton()) {\n        <header class=\"ul-modal__header\">\n          @if (modalTitle()) {\n            <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n          }\n          @if (showCloseButton()) {\n            <ul-button\n              type=\"button\"\n              theme=\"ghost-white\"\n              [iconOnly]=\"true\"\n              ariaLabel=\"Close\"\n              class=\"ul-modal__close\"\n              (buttonClick)=\"close()\"\n            >\n              <ul-icon icon=\"close\" size=\"6\" />\n            </ul-button>\n          }\n        </header>\n      }\n      <div class=\"ul-modal__body\" [id]=\"bodyId\">\n        @if (isSuccess() || isError()) {\n          <div class=\"ul-modal__status\" aria-hidden=\"true\">\n            <ul-icon\n              class=\"ul-modal__status-icon\"\n              [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n              size=\"16\"\n            />\n          </div>\n        }\n        <ng-content />\n      </div>\n      <div class=\"ul-modal__footer\">\n        @if (isConfirmation()) {\n          <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n            {{ cancelLabel() }}\n          </ul-button>\n          <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n            {{ confirmLabel() }}\n          </ul-button>\n        } @else {\n          <ng-content select=\"[ul-modal-footer]\" />\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], fullScreenInMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreenInMobile", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Picker for a hierarchical category tree of unbounded depth: a closed field
+ * that opens a drill-down + search modal (one level of children at a time,
+ * with a breadcrumb trail back to root) and resolves to a single leaf
+ * node's id. Implements FormValueControl for Signal Forms [formField]. Use
+ * [(value)] for two-way binding.
+ *
+ * Rows are real buttons (ul-list-item), so Tab/Shift+Tab and Enter/Space
+ * already give full keyboard access without extra arrow-key wiring — unlike
+ * ul-search-select's single-line combobox overlay, there's no need for
+ * ComboboxState here.
+ *
+ * @example
+ * <ul-category-picker label="Category" [nodes]="categoryNodes" [(value)]="categoryId" />
+ */
+class CategoryPickerComponent {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    helperText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    error = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    showRequiredIndicator = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select a category', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search categories', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    modalTitle = input('Select a category', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
+    rootLabel = input('All categories', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootLabel" }] : /* istanbul ignore next */ []));
+    noResultsText = input('No results', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Emitted when the modal closes, whether or not a value was picked — mirrors ul-select's touch. */
+    touch = output();
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ids = createFormFieldIds('ul-category-picker');
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    currentParentId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentParentId" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.error() || this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => getFormFieldDescribedBy(this.ids.helperId, this.ids.errorId, !!this.helperText(), this.hasError(), !!this.errorText() || this.errors().length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    nodesById = computed(() => new Map(this.nodes().map((node) => [node.id, node])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodesById" }] : /* istanbul ignore next */ []));
+    selectedNode = computed(() => {
+        const id = this.value();
+        return id == null ? null : (this.nodesById().get(id) ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const node = this.selectedNode();
+        return node ? this.ancestorLabels(node.id).join(' › ') : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    currentChildren = computed(() => this.nodes().filter((node) => node.parentId === this.currentParentId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentChildren" }] : /* istanbul ignore next */ []));
+    /** Root→current ancestor chain, for the breadcrumb trail (empty at the root level). */
+    breadcrumb = computed(() => {
+        const parentId = this.currentParentId();
+        return parentId == null ? [] : this.ancestorNodes(parentId);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "breadcrumb" }] : /* istanbul ignore next */ []));
+    normalizedQuery = computed(() => this.query().trim().toLowerCase(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedQuery" }] : /* istanbul ignore next */ []));
+    isSearching = computed(() => this.normalizedQuery().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
+    searchResults = computed(() => {
+        const q = this.normalizedQuery();
+        if (!q)
+            return [];
+        return this.nodes()
+            .filter((node) => node.isLeaf && node.label.toLowerCase().includes(q))
+            .map((node) => ({
+            node,
+            breadcrumb: this.ancestorLabels(node.id).slice(0, -1).join(' › '),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
+    hasNoResults = computed(() => this.isSearching() && this.searchResults().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasNoResults" }] : /* istanbul ignore next */ []));
+    openPicker() {
+        if (this.disabled())
+            return;
+        const selected = this.selectedNode();
+        this.currentParentId.set(selected ? selected.parentId : null);
+        this.query.set('');
+        this.open.set(true);
+    }
+    closePicker() {
+        this.open.set(false);
+        this.touch.emit();
+    }
+    selectNode(node) {
+        if (node.isLeaf) {
+            this.value.set(node.id);
+            this.closePicker();
+        }
+        else {
+            this.currentParentId.set(node.id);
+            this.query.set('');
+        }
+    }
+    goToBreadcrumb(parentId) {
+        this.currentParentId.set(parentId);
+        this.query.set('');
+    }
+    ancestorNodes(id) {
+        const chain = [];
+        let current = this.nodesById().get(id);
+        while (current) {
+            chain.unshift(current);
+            current = current.parentId == null ? undefined : this.nodesById().get(current.parentId);
+        }
+        return chain;
+    }
+    ancestorLabels(id) {
+        return this.ancestorNodes(id).map((node) => node.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoryPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: CategoryPickerComponent, isStandalone: true, selector: "ul-category-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, modalTitle: { classPropertyName: "modalTitle", publicName: "modalTitle", isSignal: true, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, ngImport: i0, template: "<div\n  class=\"ul-category-picker ul-category-picker--{{ size() }}\"\n  [class.ul-category-picker--disabled]=\"disabled()\"\n  [class.ul-category-picker--error]=\"hasError()\"\n  [class.ul-category-picker--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <button\n    type=\"button\"\n    [id]=\"ids.controlId\"\n    class=\"ul-category-picker__control\"\n    [disabled]=\"disabled()\"\n    (click)=\"openPicker()\"\n  >\n    <span\n      class=\"ul-category-picker__control-text\"\n      [class.ul-category-picker__control-text--placeholder]=\"!selectedNode()\"\n    >\n      {{ selectedLabel() || placeholder() }}\n    </span>\n    <ul-icon size=\"5\" icon=\"chevron_down\" />\n  </button>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n\n<ul-modal\n  variant=\"bottom-sheet\"\n  [fullScreenInMobile]=\"true\"\n  [(open)]=\"open\"\n  [title]=\"modalTitle()\"\n  (closed)=\"closePicker()\"\n>\n  @if (open()) {\n    <div class=\"ul-category-picker__modal\">\n      <ul-input\n        [controlId]=\"ids.controlId + '-search'\"\n        [value]=\"query()\"\n        (valueChange)=\"query.set($event)\"\n        [placeholder]=\"searchPlaceholder()\"\n        [label]=\"null\"\n        [helperText]=\"null\"\n        [autocomplete]=\"'off'\"\n      >\n        <ng-container ul-input-right-elements>\n          <ul-icon size=\"5\" icon=\"search\" />\n        </ng-container>\n      </ul-input>\n\n      @if (isSearching()) {\n        <div class=\"ul-category-picker__list ul-scrollable\" role=\"listbox\">\n          @if (hasNoResults()) {\n            <div class=\"ul-category-picker__empty\" role=\"status\">{{ noResultsText() }}</div>\n          } @else {\n            @for (result of searchResults(); track result.node.id) {\n              <ul-list-item theme=\"ghost-white\" (click)=\"selectNode(result.node)\">\n                <ng-container ul-list-item-before-label>\n                  @if (result.node.icon) {\n                    <ul-icon size=\"5\" [icon]=\"result.node.icon\" />\n                  }\n                </ng-container>\n                <ng-container ul-list-item-label>\n                  <div class=\"ul-category-picker__option-label\">{{ result.node.label }}</div>\n                  @if (result.breadcrumb) {\n                    <div class=\"ul-category-picker__option-breadcrumb\">{{ result.breadcrumb }}</div>\n                  }\n                </ng-container>\n              </ul-list-item>\n            }\n          }\n        </div>\n      } @else {\n        @if (breadcrumb().length) {\n          <div class=\"ul-category-picker__breadcrumb\">\n            <button\n              type=\"button\"\n              class=\"ul-category-picker__breadcrumb-item\"\n              (click)=\"goToBreadcrumb(null)\"\n            >\n              {{ rootLabel() }}\n            </button>\n            @for (ancestor of breadcrumb(); track ancestor.id; let last = $last) {\n              <ul-icon size=\"4\" icon=\"chevron_right\" />\n              @if (last) {\n                <span\n                  class=\"ul-category-picker__breadcrumb-item ul-category-picker__breadcrumb-item--current\"\n                  aria-current=\"page\"\n                >\n                  {{ ancestor.label }}\n                </span>\n              } @else {\n                <button\n                  type=\"button\"\n                  class=\"ul-category-picker__breadcrumb-item\"\n                  (click)=\"goToBreadcrumb(ancestor.id)\"\n                >\n                  {{ ancestor.label }}\n                </button>\n              }\n            }\n          </div>\n        }\n\n        <div class=\"ul-category-picker__list ul-scrollable\" role=\"listbox\">\n          @for (node of currentChildren(); track node.id) {\n            <ul-list-item theme=\"ghost-white\" (click)=\"selectNode(node)\">\n              <ng-container ul-list-item-before-label>\n                @if (node.icon) {\n                  <ul-icon size=\"5\" [icon]=\"node.icon\" />\n                }\n              </ng-container>\n              <ng-container ul-list-item-label>{{ node.label }}</ng-container>\n              <ng-container ul-list-item-after-label>\n                @if (!node.isLeaf) {\n                  <ul-icon size=\"5\" icon=\"chevron_right\" />\n                }\n              </ng-container>\n            </ul-list-item>\n          }\n        </div>\n      }\n    </div>\n  }\n</ul-modal>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-category-picker{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-category-picker__control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:0 12px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-category-picker__control:hover{border-color:#ffffff4d}.ul-category-picker__control:focus-visible{border-color:#ffffff80}.ul-category-picker__control-text{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;overflow:hidden;text-overflow:ellipsis}.ul-category-picker__control-text--placeholder{color:#ffffffb3}.ul-category-picker--disabled .ul-category-picker__control{opacity:.6;cursor:not-allowed}.ul-category-picker--disabled .ul-category-picker__control:hover,.ul-category-picker--disabled .ul-category-picker__control:focus-visible{border-color:#ffffff1a}.ul-category-picker--error .ul-category-picker__control{border-color:#f69d9d}.ul-category-picker__modal{display:flex;flex-direction:column;gap:12px;min-height:0}.ul-category-picker__breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.ul-category-picker__breadcrumb-item{font-weight:400;background:none;border:none;padding:0;color:#ffffffb3;cursor:pointer}.ul-category-picker__breadcrumb-item:hover{color:#fff}.ul-category-picker__breadcrumb-item--current{color:#fff;cursor:default}.ul-category-picker__list{display:flex;flex-direction:column;gap:4px;overflow-y:auto}.ul-category-picker__option-label{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-category-picker__option-breadcrumb{font-weight:400;color:#ffffffb3}.ul-category-picker__empty{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3;padding:12px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: InputComponent, selector: "ul-input", inputs: ["type", "size", "appearance", "error", "disabled", "readOnly", "required", "showRequiredIndicator", "placeholder", "label", "helperText", "errorText", "maxLength", "minLength", "pattern", "step", "autocomplete", "controlId", "showPasswordLabel", "hidePasswordLabel", "invalid", "errors", "touched", "value"], outputs: ["touchedChange", "touch", "valueChange", "inputBlur", "inputFocus", "inputEnter"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }, { kind: "component", type: ModalComponent, selector: "ul-modal", inputs: ["open", "variant", "title", "closeOnBackdropClick", "showCloseButton", "confirmLabel", "cancelLabel", "customClass", "fullScreenInMobile"], outputs: ["openChange", "closed", "confirmed", "cancelled"] }, { kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size", "showRequiredIndicator"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoryPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul-category-picker', imports: [
+                        IconComponent,
+                        InputComponent,
+                        ListItemComponent,
+                        ModalComponent,
+                        FormFieldLabelComponent,
+                        FormFieldHelperComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ul-category-picker ul-category-picker--{{ size() }}\"\n  [class.ul-category-picker--disabled]=\"disabled()\"\n  [class.ul-category-picker--error]=\"hasError()\"\n  [class.ul-category-picker--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <button\n    type=\"button\"\n    [id]=\"ids.controlId\"\n    class=\"ul-category-picker__control\"\n    [disabled]=\"disabled()\"\n    (click)=\"openPicker()\"\n  >\n    <span\n      class=\"ul-category-picker__control-text\"\n      [class.ul-category-picker__control-text--placeholder]=\"!selectedNode()\"\n    >\n      {{ selectedLabel() || placeholder() }}\n    </span>\n    <ul-icon size=\"5\" icon=\"chevron_down\" />\n  </button>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n\n<ul-modal\n  variant=\"bottom-sheet\"\n  [fullScreenInMobile]=\"true\"\n  [(open)]=\"open\"\n  [title]=\"modalTitle()\"\n  (closed)=\"closePicker()\"\n>\n  @if (open()) {\n    <div class=\"ul-category-picker__modal\">\n      <ul-input\n        [controlId]=\"ids.controlId + '-search'\"\n        [value]=\"query()\"\n        (valueChange)=\"query.set($event)\"\n        [placeholder]=\"searchPlaceholder()\"\n        [label]=\"null\"\n        [helperText]=\"null\"\n        [autocomplete]=\"'off'\"\n      >\n        <ng-container ul-input-right-elements>\n          <ul-icon size=\"5\" icon=\"search\" />\n        </ng-container>\n      </ul-input>\n\n      @if (isSearching()) {\n        <div class=\"ul-category-picker__list ul-scrollable\" role=\"listbox\">\n          @if (hasNoResults()) {\n            <div class=\"ul-category-picker__empty\" role=\"status\">{{ noResultsText() }}</div>\n          } @else {\n            @for (result of searchResults(); track result.node.id) {\n              <ul-list-item theme=\"ghost-white\" (click)=\"selectNode(result.node)\">\n                <ng-container ul-list-item-before-label>\n                  @if (result.node.icon) {\n                    <ul-icon size=\"5\" [icon]=\"result.node.icon\" />\n                  }\n                </ng-container>\n                <ng-container ul-list-item-label>\n                  <div class=\"ul-category-picker__option-label\">{{ result.node.label }}</div>\n                  @if (result.breadcrumb) {\n                    <div class=\"ul-category-picker__option-breadcrumb\">{{ result.breadcrumb }}</div>\n                  }\n                </ng-container>\n              </ul-list-item>\n            }\n          }\n        </div>\n      } @else {\n        @if (breadcrumb().length) {\n          <div class=\"ul-category-picker__breadcrumb\">\n            <button\n              type=\"button\"\n              class=\"ul-category-picker__breadcrumb-item\"\n              (click)=\"goToBreadcrumb(null)\"\n            >\n              {{ rootLabel() }}\n            </button>\n            @for (ancestor of breadcrumb(); track ancestor.id; let last = $last) {\n              <ul-icon size=\"4\" icon=\"chevron_right\" />\n              @if (last) {\n                <span\n                  class=\"ul-category-picker__breadcrumb-item ul-category-picker__breadcrumb-item--current\"\n                  aria-current=\"page\"\n                >\n                  {{ ancestor.label }}\n                </span>\n              } @else {\n                <button\n                  type=\"button\"\n                  class=\"ul-category-picker__breadcrumb-item\"\n                  (click)=\"goToBreadcrumb(ancestor.id)\"\n                >\n                  {{ ancestor.label }}\n                </button>\n              }\n            }\n          </div>\n        }\n\n        <div class=\"ul-category-picker__list ul-scrollable\" role=\"listbox\">\n          @for (node of currentChildren(); track node.id) {\n            <ul-list-item theme=\"ghost-white\" (click)=\"selectNode(node)\">\n              <ng-container ul-list-item-before-label>\n                @if (node.icon) {\n                  <ul-icon size=\"5\" [icon]=\"node.icon\" />\n                }\n              </ng-container>\n              <ng-container ul-list-item-label>{{ node.label }}</ng-container>\n              <ng-container ul-list-item-after-label>\n                @if (!node.isLeaf) {\n                  <ul-icon size=\"5\" icon=\"chevron_right\" />\n                }\n              </ng-container>\n            </ul-list-item>\n          }\n        </div>\n      }\n    </div>\n  }\n</ul-modal>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-category-picker{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-category-picker__control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:0 12px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-category-picker__control:hover{border-color:#ffffff4d}.ul-category-picker__control:focus-visible{border-color:#ffffff80}.ul-category-picker__control-text{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;overflow:hidden;text-overflow:ellipsis}.ul-category-picker__control-text--placeholder{color:#ffffffb3}.ul-category-picker--disabled .ul-category-picker__control{opacity:.6;cursor:not-allowed}.ul-category-picker--disabled .ul-category-picker__control:hover,.ul-category-picker--disabled .ul-category-picker__control:focus-visible{border-color:#ffffff1a}.ul-category-picker--error .ul-category-picker__control{border-color:#f69d9d}.ul-category-picker__modal{display:flex;flex-direction:column;gap:12px;min-height:0}.ul-category-picker__breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.ul-category-picker__breadcrumb-item{font-weight:400;background:none;border:none;padding:0;color:#ffffffb3;cursor:pointer}.ul-category-picker__breadcrumb-item:hover{color:#fff}.ul-category-picker__breadcrumb-item--current{color:#fff;cursor:default}.ul-category-picker__list{display:flex;flex-direction:column;gap:4px;overflow-y:auto}.ul-category-picker__option-label{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-category-picker__option-breadcrumb{font-weight:400;color:#ffffffb3}.ul-category-picker__empty{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3;padding:12px}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], modalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalTitle", required: false }] }], rootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootLabel", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * A collapsible content component that supports both text and icon variants.
+ * Uses CSS transitions for smooth animations and provides accessibility features.
+ *
+ * @example
+ * ```html
+ * <ul-collapse [maxHeight]="300" variant="text">
+ *   <div>Collapsible content here</div>
+ * </ul-collapse>
+ * ```
+ */
+class CollapseComponent {
+    destroyRef = inject(DestroyRef);
+    content;
+    /**
+     * The visual variant of the collapse toggle.
+     * @default 'text'
+     */
+    variant = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls the collapsed state of the component.
+     * @default true
+     */
+    collapsed = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum height of the content when collapsed.
+     * @default 200
+     */
+    maxHeight = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom label for the expand action.
+     * @default 'See more'
+     */
+    expandLabel = input('See more', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom label for the collapse action.
+     * @default 'See less'
+     */
+    collapseLabel = input('See less', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
+    /** Current full height of the content */
+    fullHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []));
+    /** Whether the content is collapsible based on its height */
+    isCollapsible = computed(() => {
+        const max = Math.max(0, this.maxHeight());
+        return this.fullHeight() > max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsible" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        // Initial height calculation
+        this.updateFullHeight();
+        // Listen for window resize events to recalculate height
+        const resizeSubscription = fromEvent(window, 'resize')
+            .pipe(debounceTime(100))
+            .subscribe(() => this.updateFullHeight());
+        this.destroyRef.onDestroy(() => resizeSubscription.unsubscribe());
     }
     /** Updates the full height of the content */
     updateFullHeight() {
@@ -1829,77 +2204,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             args: [{ selector: 'ul-dock-item', imports: [IconComponent], encapsulation: ViewEncapsulation.None, template: "<button\n  type=\"button\"\n  class=\"ul-dock-item\"\n  [class.ul-dock-item--active]=\"active()\"\n  [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n  [disabled]=\"disabled()\"\n  [attr.aria-current]=\"active() ? 'page' : null\"\n>\n  @if (hasContentSlot()) {\n    <ng-content select=\"[ul-dock-item-content]\" />\n  } @else {\n    <ul-icon [icon]=\"icon()!\" size=\"6\" />\n    @if (label()) {\n      <span class=\"ul-dock-item__label\">{{ label() }}</span>\n    }\n  }\n  @if (badge()) {\n    <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n  }\n</button>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% - 16px);min-width:16px;height:16px;padding:0 4px;border-radius:4096px;background-color:#6f3de0;color:#fff;font-size:10px;line-height:16px;text-align:center}.ul-dock-item:disabled,.ul-dock-item[disabled]{cursor:not-allowed;color:#ffffff4d}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DockItemContentSlotDirective), { isSignal: true }] }] } });
 
-class ListItemComponent {
-    checkbox = contentChild(CheckboxComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
-    theme = input('ghost-white', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    hideFocusOutline = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideFocusOutline" }] : /* istanbul ignore next */ []));
-    selected = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    loading = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    clickHandler() {
-        if (this.disabled() || this.loading()) {
-            return;
-        }
-        if (!this.disabled()) {
-            this.checkbox()?.checked.update((value) => !value);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: ListItemComponent, isStandalone: true, selector: "ul-list-item", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideFocusOutline: { classPropertyName: "hideFocusOutline", publicName: "hideFocusOutline", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ul-skeleton [show]="loading()" variant="rect">
-      <button
-        type="button"
-        class="ul-list-item ul-list-item--{{ theme() }}"
-        [class.ul-list-item--no-focus-outline]="hideFocusOutline()"
-        [class.ul-list-item--selected]="selected() || !!checkbox()?.checked()"
-        (click)="clickHandler()"
-        [disabled]="disabled() || loading()"
-      >
-        <div class="ul-list-item__before-label">
-          <ng-content select="[ul-list-item-before-label]" />
-        </div>
-        <div class="ul-list-item__label">
-          <ng-content select="[ul-list-item-label]" />
-        </div>
-        <div class="ul-list-item__after-label">
-          <ng-content select="[ul-list-item-after-label]" />
-        </div>
-      </button>
-    </ul-skeleton>
-  `, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul-list-item', imports: [SkeletonComponent], template: `
-    <ul-skeleton [show]="loading()" variant="rect">
-      <button
-        type="button"
-        class="ul-list-item ul-list-item--{{ theme() }}"
-        [class.ul-list-item--no-focus-outline]="hideFocusOutline()"
-        [class.ul-list-item--selected]="selected() || !!checkbox()?.checked()"
-        (click)="clickHandler()"
-        [disabled]="disabled() || loading()"
-      >
-        <div class="ul-list-item__before-label">
-          <ng-content select="[ul-list-item-before-label]" />
-        </div>
-        <div class="ul-list-item__label">
-          <ng-content select="[ul-list-item-label]" />
-        </div>
-        <div class="ul-list-item__after-label">
-          <ng-content select="[ul-list-item-after-label]" />
-        </div>
-      </button>
-    </ul-skeleton>
-  `, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"] }]
-        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CheckboxComponent), { isSignal: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFocusOutline", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
-
 /**
  * Renders `items` as `ul-list-item` + `cdkMenuItem` rows inside an
  * already-open `cdkMenu` panel. Shared by `ul-dropdown` (which passes
@@ -2293,11 +2597,11 @@ class DropdownComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: DropdownComponent, isStandalone: true, selector: "ul-dropdown", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerIcons: { classPropertyName: "menuTriggerIcons", publicName: "menuTriggerIcons", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "triggerIconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedItemChange: "selectedItemChange", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ul-dropdown\">\n  <ul-menu-trigger\n    [theme]=\"theme()\"\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"triggerIconOnly()\"\n    [iconOnlyLabel]=\"iconOnlyLabel()\"\n    [label]=\"selectedItem().label\"\n    [leftIcons]=\"selectedItem().leftIcons ?? []\"\n    [rightIcons]=\"triggerRightIcons()\"\n    [menuTemplate]=\"menu\"\n    [menuId]=\"menuId\"\n    [isOpen]=\"isOpen()\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"\n  />\n\n  <ng-template #menu>\n    <div class=\"ul-dropdown__backdrop\" (click)=\"closeMenu()\"></div>\n    <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n      <ul-menu-items\n        [items]=\"items()\"\n        [theme]=\"theme()\"\n        [selectedIndex]=\"selectedIndex()\"\n        (itemTriggered)=\"handleItemTriggered($event)\"\n      />\n    </div>\n  </ng-template>\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__backdrop{display:none}@media(max-width:1023px){.ul-dropdown__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}@media(max-width:1023px){.ul-dropdown__content{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-dropdown__content ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: MenuItemsComponent, selector: "ul-menu-items", inputs: ["items", "theme", "selectedIndex"], outputs: ["itemTriggered"] }, { kind: "component", type: MenuTriggerComponent, selector: "ul-menu-trigger", inputs: ["theme", "disabled", "iconOnly", "iconOnlyLabel", "label", "leftIcons", "rightIcons", "menuTemplate", "menuId", "isOpen"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: DropdownComponent, isStandalone: true, selector: "ul-dropdown", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerIcons: { classPropertyName: "menuTriggerIcons", publicName: "menuTriggerIcons", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "triggerIconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedItemChange: "selectedItemChange", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ul-dropdown\">\n  <ul-menu-trigger\n    [theme]=\"theme()\"\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"triggerIconOnly()\"\n    [iconOnlyLabel]=\"iconOnlyLabel()\"\n    [label]=\"selectedItem().label\"\n    [leftIcons]=\"selectedItem().leftIcons ?? []\"\n    [rightIcons]=\"triggerRightIcons()\"\n    [menuTemplate]=\"menu\"\n    [menuId]=\"menuId\"\n    [isOpen]=\"isOpen()\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"\n  />\n\n  <ng-template #menu>\n    <div class=\"ul-dropdown__backdrop\" (click)=\"closeMenu()\"></div>\n    <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n      <ul-menu-items\n        [items]=\"items()\"\n        [theme]=\"theme()\"\n        [selectedIndex]=\"selectedIndex()\"\n        (itemTriggered)=\"handleItemTriggered($event)\"\n      />\n    </div>\n  </ng-template>\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__backdrop{display:none}@media(max-width:1023px){.ul-dropdown__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}@media(max-width:1023px){.ul-dropdown__content{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;padding-bottom:8px;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-dropdown__content ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: MenuItemsComponent, selector: "ul-menu-items", inputs: ["items", "theme", "selectedIndex"], outputs: ["itemTriggered"] }, { kind: "component", type: MenuTriggerComponent, selector: "ul-menu-trigger", inputs: ["theme", "disabled", "iconOnly", "iconOnlyLabel", "label", "leftIcons", "rightIcons", "menuTemplate", "menuId", "isOpen"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ul-dropdown', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"ul-dropdown\">\n  <ul-menu-trigger\n    [theme]=\"theme()\"\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"triggerIconOnly()\"\n    [iconOnlyLabel]=\"iconOnlyLabel()\"\n    [label]=\"selectedItem().label\"\n    [leftIcons]=\"selectedItem().leftIcons ?? []\"\n    [rightIcons]=\"triggerRightIcons()\"\n    [menuTemplate]=\"menu\"\n    [menuId]=\"menuId\"\n    [isOpen]=\"isOpen()\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"\n  />\n\n  <ng-template #menu>\n    <div class=\"ul-dropdown__backdrop\" (click)=\"closeMenu()\"></div>\n    <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n      <ul-menu-items\n        [items]=\"items()\"\n        [theme]=\"theme()\"\n        [selectedIndex]=\"selectedIndex()\"\n        (itemTriggered)=\"handleItemTriggered($event)\"\n      />\n    </div>\n  </ng-template>\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__backdrop{display:none}@media(max-width:1023px){.ul-dropdown__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}@media(max-width:1023px){.ul-dropdown__content{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-dropdown__content ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}\n"] }]
+            args: [{ selector: 'ul-dropdown', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"ul-dropdown\">\n  <ul-menu-trigger\n    [theme]=\"theme()\"\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"triggerIconOnly()\"\n    [iconOnlyLabel]=\"iconOnlyLabel()\"\n    [label]=\"selectedItem().label\"\n    [leftIcons]=\"selectedItem().leftIcons ?? []\"\n    [rightIcons]=\"triggerRightIcons()\"\n    [menuTemplate]=\"menu\"\n    [menuId]=\"menuId\"\n    [isOpen]=\"isOpen()\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"\n  />\n\n  <ng-template #menu>\n    <div class=\"ul-dropdown__backdrop\" (click)=\"closeMenu()\"></div>\n    <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n      <ul-menu-items\n        [items]=\"items()\"\n        [theme]=\"theme()\"\n        [selectedIndex]=\"selectedIndex()\"\n        (itemTriggered)=\"handleItemTriggered($event)\"\n      />\n    </div>\n  </ng-template>\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__backdrop{display:none}@media(max-width:1023px){.ul-dropdown__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}@media(max-width:1023px){.ul-dropdown__content{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;padding-bottom:8px;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-dropdown__content ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}\n"] }]
         }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuTriggerIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerIcons", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedItemChange: [{ type: i0.Output, args: ["selectedItemChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuTriggerComponent), { isSignal: true }] }] } });
 
 /**
@@ -2592,201 +2896,98 @@ class HeroComponent {
     ...(ngDevMode ? [{ debugName: "badgesSlot" }] : /* istanbul ignore next */ []));
     titleSlot = contentChild(PeHeroTitleSlotDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "titleSlot" }] : /* istanbul ignore next */ []));
-    subtitleSlot = contentChild(PeHeroSubtitleSlotDirective, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "subtitleSlot" }] : /* istanbul ignore next */ []));
-    actionsSlot = contentChild(PeHeroActionsSlotDirective, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "actionsSlot" }] : /* istanbul ignore next */ []));
-    contentSlot = contentChild(PeHeroContentSlotDirective, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
-    hasBadgesSlot = computed(() => !!this.badgesSlot(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasBadgesSlot" }] : /* istanbul ignore next */ []));
-    hasTitleSlot = computed(() => !!this.titleSlot(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
-    hasSubtitleSlot = computed(() => !!this.subtitleSlot(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasSubtitleSlot" }] : /* istanbul ignore next */ []));
-    hasActionsSlot = computed(() => !!this.actionsSlot(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasActionsSlot" }] : /* istanbul ignore next */ []));
-    hasContentSlot = computed(() => !!this.contentSlot(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasContentSlot" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: HeroComponent, isStandalone: true, selector: "ul-hero", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null }, backgroundImage: { classPropertyName: "backgroundImage", publicName: "backgroundImage", isSignal: true, isRequired: false, transformFunction: null }, backgroundOverlayGradient: { classPropertyName: "backgroundOverlayGradient", publicName: "backgroundOverlayGradient", isSignal: true, isRequired: false, transformFunction: null }, backgroundFilter: { classPropertyName: "backgroundFilter", publicName: "backgroundFilter", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "badgesSlot", first: true, predicate: PeHeroBadgesSlotDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: PeHeroTitleSlotDirective, descendants: true, isSignal: true }, { propertyName: "subtitleSlot", first: true, predicate: PeHeroSubtitleSlotDirective, descendants: true, isSignal: true }, { propertyName: "actionsSlot", first: true, predicate: PeHeroActionsSlotDirective, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: PeHeroContentSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  class=\"ul-hero ul-hero-alignment-{{ alignment() }} ul-hero-size-{{ size() }}\"\n  role=\"banner\"\n  [attr.aria-label]=\"title()\"\n  [class.ul-hero--full-height]=\"fullHeight()\"\n  [class.ul-hero--has-background]=\"!!backgroundImage()\"\n>\n  @if (backgroundImage()) {\n    <div\n      class=\"ul-hero__background\"\n      [style.background-image]=\"'url(' + backgroundImage() + ')'\"\n      [style.filter]=\"backgroundFilter() || null\"\n      aria-hidden=\"true\"\n    ></div>\n    <div\n      class=\"ul-hero__overlay\"\n      [style.background]=\"backgroundOverlayGradient() || 'rgba(0, 0, 0, 0.4)'\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  <div class=\"ul-hero__content\">\n    @if (hasBadgesSlot()) {\n      <div class=\"ul-hero__badges\">\n        <ng-content select=\"[ul-hero-badges]\" />\n      </div>\n    } @else if (badges().length) {\n      <div class=\"ul-hero__badges\">\n        @for (badge of badges(); track badge) {\n          <ul-pill variant=\"read-only\" theme=\"transparent-white\" size=\"md\">\n            {{ badge }}\n          </ul-pill>\n        }\n      </div>\n    }\n\n    @if (hasTitleSlot()) {\n      <div class=\"ul-hero__title\">\n        <ng-content select=\"[ul-hero-title]\" />\n      </div>\n    } @else {\n      <h1 class=\"ul-hero__title\">{{ title() }}</h1>\n    }\n\n    @if (hasSubtitleSlot()) {\n      <div class=\"ul-hero__subtitle\">\n        <ng-content select=\"[ul-hero-subtitle]\" />\n      </div>\n    } @else if (subtitle()) {\n      <p class=\"ul-hero__subtitle\">{{ subtitle() }}</p>\n    }\n\n    @if (hasContentSlot()) {\n      <div class=\"ul-hero__extra\">\n        <ng-content select=\"[ul-hero-content]\" />\n      </div>\n    }\n\n    @if (hasActionsSlot()) {\n      <div class=\"ul-hero__actions\">\n        <ng-content select=\"[ul-hero-actions]\" />\n      </div>\n    } @else if (primaryAction() || secondaryAction()) {\n      <div class=\"ul-hero__actions\">\n        @if (primaryAction()) {\n          @if (primaryAction()!.href) {\n            <a [href]=\"primaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (primaryAction()!.routerLink) {\n            <a [routerLink]=\"primaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n              [size]=\"primaryAction()!.size ?? 'md'\"\n            >\n              @if (primaryAction()!.icon) {\n                <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ primaryAction()!.label }}\n            </ul-button>\n          }\n        }\n        @if (secondaryAction()) {\n          @if (secondaryAction()!.href) {\n            <a [href]=\"secondaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button theme=\"ghost-white\" [size]=\"secondaryAction()!.size ?? 'md'\">\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (secondaryAction()!.routerLink) {\n            <a [routerLink]=\"secondaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n                [size]=\"secondaryAction()!.size ?? 'md'\"\n              >\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n              [size]=\"secondaryAction()!.size ?? 'md'\"\n            >\n              @if (secondaryAction()!.icon) {\n                <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ secondaryAction()!.label }}\n            </ul-button>\n          }\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:32px 16px;color:#fff}.ul-hero--full-height{min-height:100vh}.ul-hero--has-background .ul-hero__content{position:relative;z-index:1}.ul-hero--alignment-left .ul-hero__content{align-items:flex-start;text-align:left}.ul-hero--alignment-left .ul-hero__badges,.ul-hero--alignment-left .ul-hero__actions{justify-content:flex-start}.ul-hero--alignment-center .ul-hero__content{align-items:center;text-align:center}.ul-hero--alignment-center .ul-hero__badges,.ul-hero--alignment-center .ul-hero__actions{justify-content:center}.ul-hero--alignment-right .ul-hero__content{align-items:flex-end;text-align:right}.ul-hero--alignment-right .ul-hero__badges,.ul-hero--alignment-right .ul-hero__actions{justify-content:flex-end}.ul-hero__background{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#232323}.ul-hero__overlay{position:absolute;inset:0;pointer-events:none}.ul-hero__content{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:100%}.ul-hero__badges{display:flex;flex-wrap:wrap;gap:8px}.ul-hero__title{margin:0;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero__subtitle{margin:0;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;max-width:100%}.ul-hero__extra{display:flex;flex-direction:column;gap:16px;width:100%}.ul-hero__actions{display:flex;flex-wrap:wrap;gap:12px;flex-direction:column}.ul-hero__action-link{color:inherit;text-decoration:none;display:inline-flex}.ul-hero--size-sm{padding:24px 16px}.ul-hero--size-sm .ul-hero__content{gap:12px}.ul-hero--size-sm .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero--size-sm .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero--size-md .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero--size-md .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero--size-lg{padding:48px 16px}.ul-hero--size-lg .ul-hero__content{gap:24px}.ul-hero--size-lg .ul-hero__title{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-hero--size-lg .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(max-width:1279px){.ul-hero{padding:24px 16px}.ul-hero--size-sm{padding:16px}.ul-hero--size-lg{padding:32px 16px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:column;width:100%;max-width:100%}.ul-hero .ul-hero__action-link,.ul-hero .ul-hero__actions>ul-button{width:100%}.ul-hero .ul-hero__action-link ul-button{width:100%}}@media(min-width:1024px)and (max-width:1279px){.ul-hero{padding:32px 24px}.ul-hero--size-lg{padding:40px 24px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:row;flex-wrap:wrap}}@media(min-width:1280px){.ul-hero{padding:40px 32px}.ul-hero--size-sm{padding:24px 32px}.ul-hero--size-lg{padding:64px 32px}.ul-hero .ul-hero__content{max-width:800px}.ul-hero .ul-hero__actions{flex-direction:row}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: PillComponent, selector: "ul-pill", inputs: ["variant", "theme", "size", "disabled"], outputs: ["dismiss"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HeroComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul-hero', imports: [ButtonComponent, IconComponent, PillComponent, RouterLink], encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"ul-hero ul-hero-alignment-{{ alignment() }} ul-hero-size-{{ size() }}\"\n  role=\"banner\"\n  [attr.aria-label]=\"title()\"\n  [class.ul-hero--full-height]=\"fullHeight()\"\n  [class.ul-hero--has-background]=\"!!backgroundImage()\"\n>\n  @if (backgroundImage()) {\n    <div\n      class=\"ul-hero__background\"\n      [style.background-image]=\"'url(' + backgroundImage() + ')'\"\n      [style.filter]=\"backgroundFilter() || null\"\n      aria-hidden=\"true\"\n    ></div>\n    <div\n      class=\"ul-hero__overlay\"\n      [style.background]=\"backgroundOverlayGradient() || 'rgba(0, 0, 0, 0.4)'\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  <div class=\"ul-hero__content\">\n    @if (hasBadgesSlot()) {\n      <div class=\"ul-hero__badges\">\n        <ng-content select=\"[ul-hero-badges]\" />\n      </div>\n    } @else if (badges().length) {\n      <div class=\"ul-hero__badges\">\n        @for (badge of badges(); track badge) {\n          <ul-pill variant=\"read-only\" theme=\"transparent-white\" size=\"md\">\n            {{ badge }}\n          </ul-pill>\n        }\n      </div>\n    }\n\n    @if (hasTitleSlot()) {\n      <div class=\"ul-hero__title\">\n        <ng-content select=\"[ul-hero-title]\" />\n      </div>\n    } @else {\n      <h1 class=\"ul-hero__title\">{{ title() }}</h1>\n    }\n\n    @if (hasSubtitleSlot()) {\n      <div class=\"ul-hero__subtitle\">\n        <ng-content select=\"[ul-hero-subtitle]\" />\n      </div>\n    } @else if (subtitle()) {\n      <p class=\"ul-hero__subtitle\">{{ subtitle() }}</p>\n    }\n\n    @if (hasContentSlot()) {\n      <div class=\"ul-hero__extra\">\n        <ng-content select=\"[ul-hero-content]\" />\n      </div>\n    }\n\n    @if (hasActionsSlot()) {\n      <div class=\"ul-hero__actions\">\n        <ng-content select=\"[ul-hero-actions]\" />\n      </div>\n    } @else if (primaryAction() || secondaryAction()) {\n      <div class=\"ul-hero__actions\">\n        @if (primaryAction()) {\n          @if (primaryAction()!.href) {\n            <a [href]=\"primaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (primaryAction()!.routerLink) {\n            <a [routerLink]=\"primaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n              [size]=\"primaryAction()!.size ?? 'md'\"\n            >\n              @if (primaryAction()!.icon) {\n                <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ primaryAction()!.label }}\n            </ul-button>\n          }\n        }\n        @if (secondaryAction()) {\n          @if (secondaryAction()!.href) {\n            <a [href]=\"secondaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button theme=\"ghost-white\" [size]=\"secondaryAction()!.size ?? 'md'\">\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (secondaryAction()!.routerLink) {\n            <a [routerLink]=\"secondaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n                [size]=\"secondaryAction()!.size ?? 'md'\"\n              >\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n              [size]=\"secondaryAction()!.size ?? 'md'\"\n            >\n              @if (secondaryAction()!.icon) {\n                <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ secondaryAction()!.label }}\n            </ul-button>\n          }\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:32px 16px;color:#fff}.ul-hero--full-height{min-height:100vh}.ul-hero--has-background .ul-hero__content{position:relative;z-index:1}.ul-hero--alignment-left .ul-hero__content{align-items:flex-start;text-align:left}.ul-hero--alignment-left .ul-hero__badges,.ul-hero--alignment-left .ul-hero__actions{justify-content:flex-start}.ul-hero--alignment-center .ul-hero__content{align-items:center;text-align:center}.ul-hero--alignment-center .ul-hero__badges,.ul-hero--alignment-center .ul-hero__actions{justify-content:center}.ul-hero--alignment-right .ul-hero__content{align-items:flex-end;text-align:right}.ul-hero--alignment-right .ul-hero__badges,.ul-hero--alignment-right .ul-hero__actions{justify-content:flex-end}.ul-hero__background{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#232323}.ul-hero__overlay{position:absolute;inset:0;pointer-events:none}.ul-hero__content{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:100%}.ul-hero__badges{display:flex;flex-wrap:wrap;gap:8px}.ul-hero__title{margin:0;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero__subtitle{margin:0;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;max-width:100%}.ul-hero__extra{display:flex;flex-direction:column;gap:16px;width:100%}.ul-hero__actions{display:flex;flex-wrap:wrap;gap:12px;flex-direction:column}.ul-hero__action-link{color:inherit;text-decoration:none;display:inline-flex}.ul-hero--size-sm{padding:24px 16px}.ul-hero--size-sm .ul-hero__content{gap:12px}.ul-hero--size-sm .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero--size-sm .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero--size-md .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero--size-md .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero--size-lg{padding:48px 16px}.ul-hero--size-lg .ul-hero__content{gap:24px}.ul-hero--size-lg .ul-hero__title{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-hero--size-lg .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(max-width:1279px){.ul-hero{padding:24px 16px}.ul-hero--size-sm{padding:16px}.ul-hero--size-lg{padding:32px 16px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:column;width:100%;max-width:100%}.ul-hero .ul-hero__action-link,.ul-hero .ul-hero__actions>ul-button{width:100%}.ul-hero .ul-hero__action-link ul-button{width:100%}}@media(min-width:1024px)and (max-width:1279px){.ul-hero{padding:32px 24px}.ul-hero--size-lg{padding:40px 24px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:row;flex-wrap:wrap}}@media(min-width:1280px){.ul-hero{padding:40px 32px}.ul-hero--size-sm{padding:24px 32px}.ul-hero--size-lg{padding:64px 32px}.ul-hero .ul-hero__content{max-width:800px}.ul-hero .ul-hero__actions{flex-direction:row}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }], secondaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryAction", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], backgroundImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundImage", required: false }] }], backgroundOverlayGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundOverlayGradient", required: false }] }], backgroundFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundFilter", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], badgesSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroBadgesSlotDirective), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroTitleSlotDirective), { isSignal: true }] }], subtitleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroSubtitleSlotDirective), { isSignal: true }] }], actionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroActionsSlotDirective), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroContentSlotDirective), { isSignal: true }] }] } });
-
-/**
- * Directive to handle image loading errors and display placeholders
- */
-class ImageNotFoundDirective {
-    // Controls whether to show a placeholder when image fails to load
-    showPlaceholder = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showPlaceholder" }] : /* istanbul ignore next */ []));
-    // Signal to track if image failed to load
-    imageNotFound = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "imageNotFound" }] : /* istanbul ignore next */ []));
-    // Signal to control alt and icon visibility of broken images.
-    visibility = signal('hidden', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibility" }] : /* istanbul ignore next */ []));
-    /**
-     * Handles image loading errors
-     * Hides the image and optionally shows placeholder
-     */
-    handleError() {
-        this.visibility.set('hidden');
-        if (this.showPlaceholder()) {
-            this.imageNotFound.set(true);
-        }
-    }
-    /**
-     * Handles successful image load
-     * Shows the image and removes placeholder
-     */
-    handleLoad() {
-        this.imageNotFound.set(false);
-        this.visibility.set('visible');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ImageNotFoundDirective, isStandalone: true, selector: "[ulCatchImageNotFound]", inputs: { showPlaceholder: { classPropertyName: "showPlaceholder", publicName: "showPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "load": "handleLoad()", "error": "handleError()" }, properties: { "class.ul-image--not-found": "imageNotFound()", "style.visibility": "visibility()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ulCatchImageNotFound]',
-                    host: {
-                        '(load)': 'handleLoad()',
-                        '(error)': 'handleError()',
-                        '[class.ul-image--not-found]': 'imageNotFound()',
-                        '[style.visibility]': 'visibility()',
-                    },
-                }]
-        }], propDecorators: { showPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlaceholder", required: false }] }] } });
-/**
- * Standalone placeholder for the case `ulCatchImageNotFound` can't cover: there is
- * no `<img>` to fail in the first place, because the source has no URL at all.
- * Renders the same icon-over-a-grey-box look as the directive's own placeholder —
- * both draw from the design system's `image_dashed` glyph and grey-lvl-1
- * background — so a "no image" listing and a "broken image" listing read
- * identically to a user.
- *
- * Positioned to fill its nearest positioned ancestor, same as the directive's
- * pseudo-element placeholder: the caller supplies a sized, `position: relative`
- * box (a gallery slot, a card's media area) and drops this in.
- */
-class ImageNotFoundComponent {
-    iconSize = input('12', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ImageNotFoundComponent, isStandalone: true, selector: "ul-image-not-found", inputs: { iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ul-icon icon="image_dashed" [size]="iconSize()" />`, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}:host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#232323;color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul-image-not-found', template: `<ul-icon icon="image_dashed" [size]="iconSize()" />`, imports: [IconComponent], styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}:host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#232323;color:#ffffff4d}\n"] }]
-        }], propDecorators: { iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
-
-class ModalComponent {
-    /** Whether the modal is open. Supports two-way binding with [(open)]. */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /** Visual variant: default, success, error, custom, or bottom-sheet (mobile-only layout). */
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Optional title shown in the header. */
-    title = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Whether clicking the backdrop closes the modal. */
-    closeOnBackdropClick = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
-    /** Whether to show the close button in the header. */
-    showCloseButton = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
-    /** Label for the primary confirm action in the confirmation variant. */
-    confirmLabel = input('Confirm', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
-    /** Label for the secondary cancel action in the confirmation variant. */
-    cancelLabel = input('Cancel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
-    /** Optional CSS class for the panel (e.g. for custom variant). */
-    customClass = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Below the phone breakpoint, fills the entire viewport edge-to-edge (no
-     * margin, no rounded corners, no visible backdrop) instead of the default
-     * bottom-pinned sheet every variant otherwise gets there. Has no effect
-     * above that breakpoint — desktop/tablet layout is unchanged either way.
-     */
-    fullScreenInMobile = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fullScreenInMobile" }] : /* istanbul ignore next */ []));
-    /** Emitted when the modal is closed (button, backdrop, or escape). */
-    closed = output();
-    /** Emitted when the user confirms in the confirmation variant. */
-    confirmed = output();
-    /** Emitted when the user cancels in the confirmation variant. */
-    cancelled = output();
-    panelClass = computed(() => {
-        const variant = this.variant();
-        const custom = this.customClass();
-        const classes = ['ul-modal__panel', `ul-modal__panel--${variant}`];
-        if (this.fullScreenInMobile()) {
-            classes.push('ul-modal__panel--fullscreen-mobile');
-        }
-        if (custom) {
-            classes.push(custom);
-        }
-        return classes.join(' ');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    isConfirmation = computed(() => this.variant() === 'confirmation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isConfirmation" }] : /* istanbul ignore next */ []));
-    isSuccess = computed(() => this.variant() === 'success', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
-    isError = computed(() => this.variant() === 'error', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
-    modalTitle = computed(() => (this.isSuccess() || this.isError() ? '' : this.title()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
-    titleId = `ul-modal-title-${Math.random().toString(36).slice(2, 11)}`;
-    bodyId = `ul-modal-body-${Math.random().toString(36).slice(2, 11)}`;
-    close() {
-        this.open.set(false);
-        this.closed.emit();
-    }
-    onConfirm() {
-        if (!this.isConfirmation()) {
-            return;
-        }
-        this.confirmed.emit();
-        this.close();
-    }
-    onCancel() {
-        if (!this.isConfirmation()) {
-            return;
-        }
-        this.cancelled.emit();
-        this.close();
-    }
-    onBackdropClick(event) {
-        if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
-            this.close();
+    subtitleSlot = contentChild(PeHeroSubtitleSlotDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitleSlot" }] : /* istanbul ignore next */ []));
+    actionsSlot = contentChild(PeHeroActionsSlotDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsSlot" }] : /* istanbul ignore next */ []));
+    contentSlot = contentChild(PeHeroContentSlotDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
+    hasBadgesSlot = computed(() => !!this.badgesSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasBadgesSlot" }] : /* istanbul ignore next */ []));
+    hasTitleSlot = computed(() => !!this.titleSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
+    hasSubtitleSlot = computed(() => !!this.subtitleSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSubtitleSlot" }] : /* istanbul ignore next */ []));
+    hasActionsSlot = computed(() => !!this.actionsSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActionsSlot" }] : /* istanbul ignore next */ []));
+    hasContentSlot = computed(() => !!this.contentSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasContentSlot" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: HeroComponent, isStandalone: true, selector: "ul-hero", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null }, backgroundImage: { classPropertyName: "backgroundImage", publicName: "backgroundImage", isSignal: true, isRequired: false, transformFunction: null }, backgroundOverlayGradient: { classPropertyName: "backgroundOverlayGradient", publicName: "backgroundOverlayGradient", isSignal: true, isRequired: false, transformFunction: null }, backgroundFilter: { classPropertyName: "backgroundFilter", publicName: "backgroundFilter", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "badgesSlot", first: true, predicate: PeHeroBadgesSlotDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: PeHeroTitleSlotDirective, descendants: true, isSignal: true }, { propertyName: "subtitleSlot", first: true, predicate: PeHeroSubtitleSlotDirective, descendants: true, isSignal: true }, { propertyName: "actionsSlot", first: true, predicate: PeHeroActionsSlotDirective, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: PeHeroContentSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  class=\"ul-hero ul-hero-alignment-{{ alignment() }} ul-hero-size-{{ size() }}\"\n  role=\"banner\"\n  [attr.aria-label]=\"title()\"\n  [class.ul-hero--full-height]=\"fullHeight()\"\n  [class.ul-hero--has-background]=\"!!backgroundImage()\"\n>\n  @if (backgroundImage()) {\n    <div\n      class=\"ul-hero__background\"\n      [style.background-image]=\"'url(' + backgroundImage() + ')'\"\n      [style.filter]=\"backgroundFilter() || null\"\n      aria-hidden=\"true\"\n    ></div>\n    <div\n      class=\"ul-hero__overlay\"\n      [style.background]=\"backgroundOverlayGradient() || 'rgba(0, 0, 0, 0.4)'\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  <div class=\"ul-hero__content\">\n    @if (hasBadgesSlot()) {\n      <div class=\"ul-hero__badges\">\n        <ng-content select=\"[ul-hero-badges]\" />\n      </div>\n    } @else if (badges().length) {\n      <div class=\"ul-hero__badges\">\n        @for (badge of badges(); track badge) {\n          <ul-pill variant=\"read-only\" theme=\"transparent-white\" size=\"md\">\n            {{ badge }}\n          </ul-pill>\n        }\n      </div>\n    }\n\n    @if (hasTitleSlot()) {\n      <div class=\"ul-hero__title\">\n        <ng-content select=\"[ul-hero-title]\" />\n      </div>\n    } @else {\n      <h1 class=\"ul-hero__title\">{{ title() }}</h1>\n    }\n\n    @if (hasSubtitleSlot()) {\n      <div class=\"ul-hero__subtitle\">\n        <ng-content select=\"[ul-hero-subtitle]\" />\n      </div>\n    } @else if (subtitle()) {\n      <p class=\"ul-hero__subtitle\">{{ subtitle() }}</p>\n    }\n\n    @if (hasContentSlot()) {\n      <div class=\"ul-hero__extra\">\n        <ng-content select=\"[ul-hero-content]\" />\n      </div>\n    }\n\n    @if (hasActionsSlot()) {\n      <div class=\"ul-hero__actions\">\n        <ng-content select=\"[ul-hero-actions]\" />\n      </div>\n    } @else if (primaryAction() || secondaryAction()) {\n      <div class=\"ul-hero__actions\">\n        @if (primaryAction()) {\n          @if (primaryAction()!.href) {\n            <a [href]=\"primaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (primaryAction()!.routerLink) {\n            <a [routerLink]=\"primaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n              [size]=\"primaryAction()!.size ?? 'md'\"\n            >\n              @if (primaryAction()!.icon) {\n                <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ primaryAction()!.label }}\n            </ul-button>\n          }\n        }\n        @if (secondaryAction()) {\n          @if (secondaryAction()!.href) {\n            <a [href]=\"secondaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button theme=\"ghost-white\" [size]=\"secondaryAction()!.size ?? 'md'\">\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (secondaryAction()!.routerLink) {\n            <a [routerLink]=\"secondaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n                [size]=\"secondaryAction()!.size ?? 'md'\"\n              >\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n              [size]=\"secondaryAction()!.size ?? 'md'\"\n            >\n              @if (secondaryAction()!.icon) {\n                <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ secondaryAction()!.label }}\n            </ul-button>\n          }\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:32px 16px;color:#fff}.ul-hero--full-height{min-height:100vh}.ul-hero--has-background .ul-hero__content{position:relative;z-index:1}.ul-hero--alignment-left .ul-hero__content{align-items:flex-start;text-align:left}.ul-hero--alignment-left .ul-hero__badges,.ul-hero--alignment-left .ul-hero__actions{justify-content:flex-start}.ul-hero--alignment-center .ul-hero__content{align-items:center;text-align:center}.ul-hero--alignment-center .ul-hero__badges,.ul-hero--alignment-center .ul-hero__actions{justify-content:center}.ul-hero--alignment-right .ul-hero__content{align-items:flex-end;text-align:right}.ul-hero--alignment-right .ul-hero__badges,.ul-hero--alignment-right .ul-hero__actions{justify-content:flex-end}.ul-hero__background{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#232323}.ul-hero__overlay{position:absolute;inset:0;pointer-events:none}.ul-hero__content{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:100%}.ul-hero__badges{display:flex;flex-wrap:wrap;gap:8px}.ul-hero__title{margin:0;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero__subtitle{margin:0;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;max-width:100%}.ul-hero__extra{display:flex;flex-direction:column;gap:16px;width:100%}.ul-hero__actions{display:flex;flex-wrap:wrap;gap:12px;flex-direction:column}.ul-hero__action-link{color:inherit;text-decoration:none;display:inline-flex}.ul-hero--size-sm{padding:24px 16px}.ul-hero--size-sm .ul-hero__content{gap:12px}.ul-hero--size-sm .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero--size-sm .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero--size-md .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero--size-md .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero--size-lg{padding:48px 16px}.ul-hero--size-lg .ul-hero__content{gap:24px}.ul-hero--size-lg .ul-hero__title{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-hero--size-lg .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(max-width:1279px){.ul-hero{padding:24px 16px}.ul-hero--size-sm{padding:16px}.ul-hero--size-lg{padding:32px 16px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:column;width:100%;max-width:100%}.ul-hero .ul-hero__action-link,.ul-hero .ul-hero__actions>ul-button{width:100%}.ul-hero .ul-hero__action-link ul-button{width:100%}}@media(min-width:1024px)and (max-width:1279px){.ul-hero{padding:32px 24px}.ul-hero--size-lg{padding:40px 24px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:row;flex-wrap:wrap}}@media(min-width:1280px){.ul-hero{padding:40px 32px}.ul-hero--size-sm{padding:24px 32px}.ul-hero--size-lg{padding:64px 32px}.ul-hero .ul-hero__content{max-width:800px}.ul-hero .ul-hero__actions{flex-direction:row}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: PillComponent, selector: "ul-pill", inputs: ["variant", "theme", "size", "disabled"], outputs: ["dismiss"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HeroComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul-hero', imports: [ButtonComponent, IconComponent, PillComponent, RouterLink], encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"ul-hero ul-hero-alignment-{{ alignment() }} ul-hero-size-{{ size() }}\"\n  role=\"banner\"\n  [attr.aria-label]=\"title()\"\n  [class.ul-hero--full-height]=\"fullHeight()\"\n  [class.ul-hero--has-background]=\"!!backgroundImage()\"\n>\n  @if (backgroundImage()) {\n    <div\n      class=\"ul-hero__background\"\n      [style.background-image]=\"'url(' + backgroundImage() + ')'\"\n      [style.filter]=\"backgroundFilter() || null\"\n      aria-hidden=\"true\"\n    ></div>\n    <div\n      class=\"ul-hero__overlay\"\n      [style.background]=\"backgroundOverlayGradient() || 'rgba(0, 0, 0, 0.4)'\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  <div class=\"ul-hero__content\">\n    @if (hasBadgesSlot()) {\n      <div class=\"ul-hero__badges\">\n        <ng-content select=\"[ul-hero-badges]\" />\n      </div>\n    } @else if (badges().length) {\n      <div class=\"ul-hero__badges\">\n        @for (badge of badges(); track badge) {\n          <ul-pill variant=\"read-only\" theme=\"transparent-white\" size=\"md\">\n            {{ badge }}\n          </ul-pill>\n        }\n      </div>\n    }\n\n    @if (hasTitleSlot()) {\n      <div class=\"ul-hero__title\">\n        <ng-content select=\"[ul-hero-title]\" />\n      </div>\n    } @else {\n      <h1 class=\"ul-hero__title\">{{ title() }}</h1>\n    }\n\n    @if (hasSubtitleSlot()) {\n      <div class=\"ul-hero__subtitle\">\n        <ng-content select=\"[ul-hero-subtitle]\" />\n      </div>\n    } @else if (subtitle()) {\n      <p class=\"ul-hero__subtitle\">{{ subtitle() }}</p>\n    }\n\n    @if (hasContentSlot()) {\n      <div class=\"ul-hero__extra\">\n        <ng-content select=\"[ul-hero-content]\" />\n      </div>\n    }\n\n    @if (hasActionsSlot()) {\n      <div class=\"ul-hero__actions\">\n        <ng-content select=\"[ul-hero-actions]\" />\n      </div>\n    } @else if (primaryAction() || secondaryAction()) {\n      <div class=\"ul-hero__actions\">\n        @if (primaryAction()) {\n          @if (primaryAction()!.href) {\n            <a [href]=\"primaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (primaryAction()!.routerLink) {\n            <a [routerLink]=\"primaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n                [size]=\"primaryAction()!.size ?? 'md'\"\n              >\n                @if (primaryAction()!.icon) {\n                  <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ primaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"primaryAction()!.theme ?? 'fill-purple'\"\n              [size]=\"primaryAction()!.size ?? 'md'\"\n            >\n              @if (primaryAction()!.icon) {\n                <ul-icon [icon]=\"primaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ primaryAction()!.label }}\n            </ul-button>\n          }\n        }\n        @if (secondaryAction()) {\n          @if (secondaryAction()!.href) {\n            <a [href]=\"secondaryAction()!.href\" class=\"ul-hero__action-link\">\n              <ul-button theme=\"ghost-white\" [size]=\"secondaryAction()!.size ?? 'md'\">\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else if (secondaryAction()!.routerLink) {\n            <a [routerLink]=\"secondaryAction()!.routerLink\" class=\"ul-hero__action-link\">\n              <ul-button\n                [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n                [size]=\"secondaryAction()!.size ?? 'md'\"\n              >\n                @if (secondaryAction()!.icon) {\n                  <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n                }\n                {{ secondaryAction()!.label }}\n              </ul-button>\n            </a>\n          } @else {\n            <ul-button\n              [theme]=\"secondaryAction()!.theme ?? 'ghost-white'\"\n              [size]=\"secondaryAction()!.size ?? 'md'\"\n            >\n              @if (secondaryAction()!.icon) {\n                <ul-icon [icon]=\"secondaryAction()!.icon!\" size=\"6\" />\n              }\n              {{ secondaryAction()!.label }}\n            </ul-button>\n          }\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:32px 16px;color:#fff}.ul-hero--full-height{min-height:100vh}.ul-hero--has-background .ul-hero__content{position:relative;z-index:1}.ul-hero--alignment-left .ul-hero__content{align-items:flex-start;text-align:left}.ul-hero--alignment-left .ul-hero__badges,.ul-hero--alignment-left .ul-hero__actions{justify-content:flex-start}.ul-hero--alignment-center .ul-hero__content{align-items:center;text-align:center}.ul-hero--alignment-center .ul-hero__badges,.ul-hero--alignment-center .ul-hero__actions{justify-content:center}.ul-hero--alignment-right .ul-hero__content{align-items:flex-end;text-align:right}.ul-hero--alignment-right .ul-hero__badges,.ul-hero--alignment-right .ul-hero__actions{justify-content:flex-end}.ul-hero__background{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#232323}.ul-hero__overlay{position:absolute;inset:0;pointer-events:none}.ul-hero__content{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:100%}.ul-hero__badges{display:flex;flex-wrap:wrap;gap:8px}.ul-hero__title{margin:0;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero__subtitle{margin:0;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;max-width:100%}.ul-hero__extra{display:flex;flex-direction:column;gap:16px;width:100%}.ul-hero__actions{display:flex;flex-wrap:wrap;gap:12px;flex-direction:column}.ul-hero__action-link{color:inherit;text-decoration:none;display:inline-flex}.ul-hero--size-sm{padding:24px 16px}.ul-hero--size-sm .ul-hero__content{gap:12px}.ul-hero--size-sm .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero--size-sm .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero--size-md .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero--size-md .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero--size-lg{padding:48px 16px}.ul-hero--size-lg .ul-hero__content{gap:24px}.ul-hero--size-lg .ul-hero__title{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-hero--size-lg .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(max-width:1279px){.ul-hero{padding:24px 16px}.ul-hero--size-sm{padding:16px}.ul-hero--size-lg{padding:32px 16px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:column;width:100%;max-width:100%}.ul-hero .ul-hero__action-link,.ul-hero .ul-hero__actions>ul-button{width:100%}.ul-hero .ul-hero__action-link ul-button{width:100%}}@media(min-width:1024px)and (max-width:1279px){.ul-hero{padding:32px 24px}.ul-hero--size-lg{padding:40px 24px}.ul-hero .ul-hero__title{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-hero .ul-hero__subtitle{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-hero .ul-hero__actions{flex-direction:row;flex-wrap:wrap}}@media(min-width:1280px){.ul-hero{padding:40px 32px}.ul-hero--size-sm{padding:24px 32px}.ul-hero--size-lg{padding:64px 32px}.ul-hero .ul-hero__content{max-width:800px}.ul-hero .ul-hero__actions{flex-direction:row}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }], secondaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryAction", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], backgroundImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundImage", required: false }] }], backgroundOverlayGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundOverlayGradient", required: false }] }], backgroundFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundFilter", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], badgesSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroBadgesSlotDirective), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroTitleSlotDirective), { isSignal: true }] }], subtitleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroSubtitleSlotDirective), { isSignal: true }] }], actionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroActionsSlotDirective), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PeHeroContentSlotDirective), { isSignal: true }] }] } });
+
+/**
+ * Directive to handle image loading errors and display placeholders
+ */
+class ImageNotFoundDirective {
+    // Controls whether to show a placeholder when image fails to load
+    showPlaceholder = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPlaceholder" }] : /* istanbul ignore next */ []));
+    // Signal to track if image failed to load
+    imageNotFound = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageNotFound" }] : /* istanbul ignore next */ []));
+    // Signal to control alt and icon visibility of broken images.
+    visibility = signal('hidden', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibility" }] : /* istanbul ignore next */ []));
+    /**
+     * Handles image loading errors
+     * Hides the image and optionally shows placeholder
+     */
+    handleError() {
+        this.visibility.set('hidden');
+        if (this.showPlaceholder()) {
+            this.imageNotFound.set(true);
         }
     }
-    onEscape() {
-        if (this.open()) {
-            this.close();
-        }
+    /**
+     * Handles successful image load
+     * Shows the image and removes placeholder
+     */
+    handleLoad() {
+        this.imageNotFound.set(false);
+        this.visibility.set('visible');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ModalComponent, isStandalone: true, selector: "ul-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, fullScreenInMobile: { classPropertyName: "fullScreenInMobile", publicName: "fullScreenInMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"ul-modal ul-modal--backdrop\"\n    role=\"dialog\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"bodyId\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n      @if (modalTitle() || showCloseButton()) {\n        <header class=\"ul-modal__header\">\n          @if (modalTitle()) {\n            <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n          }\n          @if (showCloseButton()) {\n            <ul-button\n              type=\"button\"\n              theme=\"ghost-white\"\n              [iconOnly]=\"true\"\n              ariaLabel=\"Close\"\n              class=\"ul-modal__close\"\n              (buttonClick)=\"close()\"\n            >\n              <ul-icon icon=\"close\" size=\"6\" />\n            </ul-button>\n          }\n        </header>\n      }\n      <div class=\"ul-modal__body\" [id]=\"bodyId\">\n        @if (isSuccess() || isError()) {\n          <div class=\"ul-modal__status\" aria-hidden=\"true\">\n            <ul-icon\n              class=\"ul-modal__status-icon\"\n              [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n              size=\"16\"\n            />\n          </div>\n        }\n        <ng-content />\n      </div>\n      <div class=\"ul-modal__footer\">\n        @if (isConfirmation()) {\n          <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n            {{ cancelLabel() }}\n          </ul-button>\n          <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n            {{ confirmLabel() }}\n          </ul-button>\n        } @else {\n          <ng-content select=\"[ul-modal-footer]\" />\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ImageNotFoundDirective, isStandalone: true, selector: "[ulCatchImageNotFound]", inputs: { showPlaceholder: { classPropertyName: "showPlaceholder", publicName: "showPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "load": "handleLoad()", "error": "handleError()" }, properties: { "class.ul-image--not-found": "imageNotFound()", "style.visibility": "visibility()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ulCatchImageNotFound]',
+                    host: {
+                        '(load)': 'handleLoad()',
+                        '(error)': 'handleError()',
+                        '[class.ul-image--not-found]': 'imageNotFound()',
+                        '[style.visibility]': 'visibility()',
+                    },
+                }]
+        }], propDecorators: { showPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlaceholder", required: false }] }] } });
+/**
+ * Standalone placeholder for the case `ulCatchImageNotFound` can't cover: there is
+ * no `<img>` to fail in the first place, because the source has no URL at all.
+ * Renders the same icon-over-a-grey-box look as the directive's own placeholder —
+ * both draw from the design system's `image_dashed` glyph and grey-lvl-1
+ * background — so a "no image" listing and a "broken image" listing read
+ * identically to a user.
+ *
+ * Positioned to fill its nearest positioned ancestor, same as the directive's
+ * pseudo-element placeholder: the caller supplies a sized, `position: relative`
+ * box (a gallery slot, a card's media area) and drops this in.
+ */
+class ImageNotFoundComponent {
+    iconSize = input('12', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ImageNotFoundComponent, isStandalone: true, selector: "ul-image-not-found", inputs: { iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ul-icon icon="image_dashed" [size]="iconSize()" />`, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}:host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#232323;color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ul-modal', imports: [CdkTrapFocus, ButtonComponent, IconComponent], encapsulation: ViewEncapsulation.None, host: {
-                        '[attr.aria-hidden]': '!open()',
-                    }, template: "@if (open()) {\n  <div\n    class=\"ul-modal ul-modal--backdrop\"\n    role=\"dialog\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"bodyId\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n      @if (modalTitle() || showCloseButton()) {\n        <header class=\"ul-modal__header\">\n          @if (modalTitle()) {\n            <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n          }\n          @if (showCloseButton()) {\n            <ul-button\n              type=\"button\"\n              theme=\"ghost-white\"\n              [iconOnly]=\"true\"\n              ariaLabel=\"Close\"\n              class=\"ul-modal__close\"\n              (buttonClick)=\"close()\"\n            >\n              <ul-icon icon=\"close\" size=\"6\" />\n            </ul-button>\n          }\n        </header>\n      }\n      <div class=\"ul-modal__body\" [id]=\"bodyId\">\n        @if (isSuccess() || isError()) {\n          <div class=\"ul-modal__status\" aria-hidden=\"true\">\n            <ul-icon\n              class=\"ul-modal__status-icon\"\n              [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n              size=\"16\"\n            />\n          </div>\n        }\n        <ng-content />\n      </div>\n      <div class=\"ul-modal__footer\">\n        @if (isConfirmation()) {\n          <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n            {{ cancelLabel() }}\n          </ul-button>\n          <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n            {{ confirmLabel() }}\n          </ul-button>\n        } @else {\n          <ng-content select=\"[ul-modal-footer]\" />\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"] }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], fullScreenInMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreenInMobile", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+            args: [{ selector: 'ul-image-not-found', template: `<ul-icon icon="image_dashed" [size]="iconSize()" />`, imports: [IconComponent], styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}:host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#232323;color:#ffffff4d}\n"] }]
+        }], propDecorators: { iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
 
 const DEFAULT_MAX_OUTPUT_SIZE = 1024;
 // Matches $spacing-spacing-60 (240px) — the longer side of the fixed crop
@@ -2998,161 +3199,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             args: [{ selector: 'ul-image-cropper', imports: [ImageCropperComponent$1, ModalComponent, ButtonComponent], template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n  @if (imageFile()) {\n    <div class=\"ul-image-cropper\">\n      <image-cropper\n        class=\"ul-image-cropper__frame\"\n        [imageFile]=\"cropperImageFile()\"\n        [maintainAspectRatio]=\"isLocked()\"\n        [aspectRatio]=\"effectiveAspectRatio()\"\n        [roundCropper]=\"isRound()\"\n        [cropperStaticWidth]=\"frameWidth()\"\n        [cropperStaticHeight]=\"frameHeight()\"\n        [allowMoveImage]=\"isLocked()\"\n        [transform]=\"transform()\"\n        [resizeToWidth]=\"maxOutputSize()\"\n        [resizeToHeight]=\"maxOutputSize()\"\n        [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n        format=\"jpeg\"\n        output=\"blob\"\n        (cropperReady)=\"onCropperReady($event)\"\n        (transformChange)=\"onTransformChange($event)\"\n        (loadImageFailed)=\"loadFailed.emit()\"\n      />\n\n      @if (isLocked()) {\n        <label class=\"ul-image-cropper__zoom\">\n          <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n          <input\n            type=\"range\"\n            class=\"ul-image-cropper__zoom-input\"\n            [min]=\"minZoom\"\n            [max]=\"maxZoom\"\n            [step]=\"zoomStep\"\n            [value]=\"zoom()\"\n            (input)=\"onZoomInput($event)\"\n          />\n        </label>\n      }\n    </div>\n  }\n\n  <div class=\"ul-modal__foter-content\" ul-modal-footer>\n    <ul-button\n      theme=\"fill-purple\"\n      size=\"md\"\n      [disabled]=\"!cropperReady()\"\n      (buttonClick)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </ul-button>\n  </div>\n</ul-modal>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], imageFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFile", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxOutputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOutputSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], zoomLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomLabel", required: false }] }], frameAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameAriaLabel", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], cropperRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ImageCropperComponent$1), { isSignal: true }] }] } });
 
-/**
- * A reusable input component that follows UDS design system guidelines.
- * Implements FormValueControl for use with Signal Forms [formField] directive.
- *
- * Use [(value)] for two-way binding, or bind with [formField]="myForm().email" for Signal Forms.
- *
- * Content projection: [ul-input-left-elements], [ul-input-right-elements].
- */
-class InputComponent {
-    type = input('text', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Border/hover style: border-only (hover = border only), subtle-tint (hover = border + 5% fill). */
-    appearance = input('border-only', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    error = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readOnly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
-    required = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    showRequiredIndicator = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
-    placeholder = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    label = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    helperText = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    errorText = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    maxLength = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
-    minLength = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "minLength" }] : /* istanbul ignore next */ []));
-    pattern = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
-    /** Native step for type="number". Defaults to 'any' (decimals allowed) rather than the
-     * browser's own default of 1, which would silently reject e.g. "19.99" — pass an explicit
-     * step (e.g. 1) to restrict to whole numbers. */
-    step = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    autocomplete = input('off', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    /** When provided (e.g. by a parent form field), the input element uses this id instead of the internal one. */
-    controlId = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "controlId" }] : /* istanbul ignore next */ []));
-    /** Aria-label for the toggle button when the password is hidden (i.e. the action reveals it). */
-    showPasswordLabel = input('Show password', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
-    /** Aria-label for the toggle button when the password is visible (i.e. the action hides it). */
-    hidePasswordLabel = input('Hide password', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
-    /** FormUiControl optional: bound by [formField] when invalid */
-    invalid = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    /** FormUiControl optional: bound by [formField] for validation errors */
-    errors = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    /** FormUiControl optional: control sets on blur */
-    touched = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    /** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
-    touch = output();
-    value = model('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    ids = createFormFieldIds('ul-input');
-    effectiveControlId = computed(() => this.controlId() ?? this.ids.controlId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveControlId" }] : /* istanbul ignore next */ []));
-    effectiveHelperId = computed(() => this.controlId() ? `${this.controlId()}-helper` : this.ids.helperId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveHelperId" }] : /* istanbul ignore next */ []));
-    effectiveErrorId = computed(() => this.controlId() ? `${this.controlId()}-error` : this.ids.errorId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveErrorId" }] : /* istanbul ignore next */ []));
-    isFocused = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => this.error() || this.invalid(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    // [attr.pattern]="pattern()" would stringify an empty array to "" instead
-    // of omitting the attribute — an empty native pattern matches only the
-    // empty string, so every non-empty value would fail native validation.
-    // Native <input pattern> only accepts one regex source, so multiple
-    // patterns are combined as alternatives.
-    nativePattern = computed(() => {
-        const patterns = this.pattern();
-        return patterns.length ? patterns.map((p) => p.source).join('|') : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nativePattern" }] : /* istanbul ignore next */ []));
-    nativeStep = computed(() => {
-        const step = this.step();
-        if (step !== undefined)
-            return step;
-        return this.type() === 'number' ? 'any' : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nativeStep" }] : /* istanbul ignore next */ []));
-    isPasswordType = computed(() => this.type() === 'password', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isPasswordType" }] : /* istanbul ignore next */ []));
-    passwordRevealed = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "passwordRevealed" }] : /* istanbul ignore next */ []));
-    effectiveType = computed(() => this.isPasswordType() && this.passwordRevealed() ? 'text' : this.type(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
-    passwordToggleIcon = computed(() => this.passwordRevealed() ? 'eye_on' : 'eye_dashed', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []));
-    passwordToggleLabel = computed(() => this.passwordRevealed() ? this.hidePasswordLabel() : this.showPasswordLabel(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => getFormFieldDescribedBy(this.effectiveHelperId(), this.effectiveErrorId(), !!this.helperText(), this.hasError(), !!this.errorText() || this.errors().length > 0), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    // Outputs
-    inputBlur = output();
-    inputFocus = output();
-    /** Emitted when Enter is pressed in the field; typically used to submit a form. */
-    inputEnter = output();
-    onInput(event) {
-        const value = event.target.value;
-        this.value.set(value);
-    }
-    onBlur(event) {
-        this.isFocused.set(false);
-        this.touched.set(true);
-        this.touch.emit();
-        this.inputBlur.emit(event);
-    }
-    onFocus(event) {
-        this.isFocused.set(true);
-        this.inputFocus.emit(event);
-    }
-    onKeydown(event) {
-        if (event.key === 'Enter') {
-            this.inputEnter.emit(event);
-        }
-    }
-    togglePasswordVisibility() {
-        this.passwordRevealed.update((revealed) => !revealed);
-    }
-    /**
-     * Programmatically focuses the input element
-     */
-    focus() {
-        const inputEl = document.getElementById(this.effectiveControlId());
-        inputEl?.focus();
-    }
-    select() {
-        const inputEl = document.getElementById(this.effectiveControlId());
-        inputEl?.select();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: InputComponent, isStandalone: true, selector: "ul-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus", inputEnter: "inputEnter" }, ngImport: i0, template: "<div\n  class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n  [class.ul-input--error]=\"hasError()\"\n  [class.ul-input--disabled]=\"disabled()\"\n  [class.ul-input--read-only]=\"readOnly()\"\n  [class.ul-input--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"effectiveControlId()\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n    <div class=\"ul-input__left-elements\">\n      <ng-content select=\"[ul-input-left-elements]\" />\n    </div>\n\n    <input\n      [id]=\"effectiveControlId()\"\n      [type]=\"effectiveType()\"\n      class=\"ul-input__field\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readOnly()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [attr.pattern]=\"nativePattern()\"\n      [attr.step]=\"nativeStep()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"describedBy()\"\n    />\n\n    <div class=\"ul-input__right-elements\">\n      @if (isPasswordType()) {\n        <ul-button\n          class=\"ul-input__password-toggle\"\n          theme=\"ghost-white\"\n          size=\"sm\"\n          type=\"button\"\n          [iconOnly]=\"true\"\n          [ariaLabel]=\"passwordToggleLabel()\"\n          (buttonClick)=\"togglePasswordVisibility()\"\n        >\n          <ul-icon [icon]=\"passwordToggleIcon()\" />\n        </ul-button>\n      }\n      <ng-content select=\"[ul-input-right-elements]\" />\n    </div>\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"effectiveHelperId()\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size", "showRequiredIndicator"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul-input', imports: [FormFieldLabelComponent, FormFieldHelperComponent, ButtonComponent, IconComponent], template: "<div\n  class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n  [class.ul-input--error]=\"hasError()\"\n  [class.ul-input--disabled]=\"disabled()\"\n  [class.ul-input--read-only]=\"readOnly()\"\n  [class.ul-input--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"effectiveControlId()\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n    <div class=\"ul-input__left-elements\">\n      <ng-content select=\"[ul-input-left-elements]\" />\n    </div>\n\n    <input\n      [id]=\"effectiveControlId()\"\n      [type]=\"effectiveType()\"\n      class=\"ul-input__field\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readOnly()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [attr.pattern]=\"nativePattern()\"\n      [attr.step]=\"nativeStep()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"describedBy()\"\n    />\n\n    <div class=\"ul-input__right-elements\">\n      @if (isPasswordType()) {\n        <ul-button\n          class=\"ul-input__password-toggle\"\n          theme=\"ghost-white\"\n          size=\"sm\"\n          type=\"button\"\n          [iconOnly]=\"true\"\n          [ariaLabel]=\"passwordToggleLabel()\"\n          (buttonClick)=\"togglePasswordVisibility()\"\n        >\n          <ul-icon [icon]=\"passwordToggleIcon()\" />\n        </ul-button>\n      }\n      <ng-content select=\"[ul-input-right-elements]\" />\n    </div>\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"effectiveHelperId()\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputEnter: [{ type: i0.Output, args: ["inputEnter"] }] } });
-
 const DEFAULT_DURATION_MS = 500;
 const MOVE_CANCEL_THRESHOLD_PX = 10;
 /**
@@ -3303,11 +3349,11 @@ class MenuComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: MenuComponent, isStandalone: true, selector: "ul-menu", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "triggerIconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLeftIcons: { classPropertyName: "triggerLeftIcons", publicName: "triggerLeftIcons", isSignal: true, isRequired: false, transformFunction: null }, triggerRightIcons: { classPropertyName: "triggerRightIcons", publicName: "triggerRightIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul-menu-trigger\n  [theme]=\"theme()\"\n  [disabled]=\"disabled()\"\n  [iconOnly]=\"triggerIconOnly()\"\n  [iconOnlyLabel]=\"iconOnlyLabel()\"\n  [label]=\"triggerLabel()\"\n  [leftIcons]=\"triggerLeftIcons()\"\n  [rightIcons]=\"triggerRightIcons()\"\n  [menuTemplate]=\"menu\"\n  [menuId]=\"menuId\"\n  [isOpen]=\"isOpen()\"\n  (opened)=\"onMenuOpened()\"\n  (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n  <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n  <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n    <ul-menu-items\n      [items]=\"items()\"\n      [theme]=\"theme()\"\n      (itemTriggered)=\"handleItemTriggered($event)\"\n    />\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: MenuItemsComponent, selector: "ul-menu-items", inputs: ["items", "theme", "selectedIndex"], outputs: ["itemTriggered"] }, { kind: "component", type: MenuTriggerComponent, selector: "ul-menu-trigger", inputs: ["theme", "disabled", "iconOnly", "iconOnlyLabel", "label", "leftIcons", "rightIcons", "menuTemplate", "menuId", "isOpen"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: MenuComponent, isStandalone: true, selector: "ul-menu", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "triggerIconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLeftIcons: { classPropertyName: "triggerLeftIcons", publicName: "triggerLeftIcons", isSignal: true, isRequired: false, transformFunction: null }, triggerRightIcons: { classPropertyName: "triggerRightIcons", publicName: "triggerRightIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul-menu-trigger\n  [theme]=\"theme()\"\n  [disabled]=\"disabled()\"\n  [iconOnly]=\"triggerIconOnly()\"\n  [iconOnlyLabel]=\"iconOnlyLabel()\"\n  [label]=\"triggerLabel()\"\n  [leftIcons]=\"triggerLeftIcons()\"\n  [rightIcons]=\"triggerRightIcons()\"\n  [menuTemplate]=\"menu\"\n  [menuId]=\"menuId\"\n  [isOpen]=\"isOpen()\"\n  (opened)=\"onMenuOpened()\"\n  (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n  <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n  <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n    <ul-menu-items\n      [items]=\"items()\"\n      [theme]=\"theme()\"\n      (itemTriggered)=\"handleItemTriggered($event)\"\n    />\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;padding-bottom:8px;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: MenuItemsComponent, selector: "ul-menu-items", inputs: ["items", "theme", "selectedIndex"], outputs: ["itemTriggered"] }, { kind: "component", type: MenuTriggerComponent, selector: "ul-menu-trigger", inputs: ["theme", "disabled", "iconOnly", "iconOnlyLabel", "label", "leftIcons", "rightIcons", "menuTemplate", "menuId", "isOpen"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ul-menu', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<ul-menu-trigger\n  [theme]=\"theme()\"\n  [disabled]=\"disabled()\"\n  [iconOnly]=\"triggerIconOnly()\"\n  [iconOnlyLabel]=\"iconOnlyLabel()\"\n  [label]=\"triggerLabel()\"\n  [leftIcons]=\"triggerLeftIcons()\"\n  [rightIcons]=\"triggerRightIcons()\"\n  [menuTemplate]=\"menu\"\n  [menuId]=\"menuId\"\n  [isOpen]=\"isOpen()\"\n  (opened)=\"onMenuOpened()\"\n  (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n  <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n  <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n    <ul-menu-items\n      [items]=\"items()\"\n      [theme]=\"theme()\"\n      (itemTriggered)=\"handleItemTriggered($event)\"\n    />\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"] }]
+            args: [{ selector: 'ul-menu', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<ul-menu-trigger\n  [theme]=\"theme()\"\n  [disabled]=\"disabled()\"\n  [iconOnly]=\"triggerIconOnly()\"\n  [iconOnlyLabel]=\"iconOnlyLabel()\"\n  [label]=\"triggerLabel()\"\n  [leftIcons]=\"triggerLeftIcons()\"\n  [rightIcons]=\"triggerRightIcons()\"\n  [menuTemplate]=\"menu\"\n  [menuId]=\"menuId\"\n  [isOpen]=\"isOpen()\"\n  (opened)=\"onMenuOpened()\"\n  (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n  <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n  <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n    <ul-menu-items\n      [items]=\"items()\"\n      [theme]=\"theme()\"\n      (itemTriggered)=\"handleItemTriggered($event)\"\n    />\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;padding-bottom:8px;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"] }]
         }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerLeftIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLeftIcons", required: false }] }], triggerRightIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerRightIcons", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuTriggerComponent), { isSignal: true }] }] } });
 
 /** Place on the element projected into [ul-navbar-logo] so the navbar can detect logo content. */
@@ -5149,5 +5195,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
+export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
 //# sourceMappingURL=underlayerdev-ui.mjs.map