@underlayerdev/ui 0.14.6 → 0.14.8

package/fesm2022/underlayerdev-ui.mjs

@@ -292,10 +292,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             args: [{ selector: 'ul-area-code', template: "<div class=\"ul-area-code\" [class.ul-area-code--no-line-numbers]=\"!showLineNumbers()\">\n  <div class=\"ul-area-code__container ul-scrollable\" [style.max-height]=\"maxHeight()\">\n    <!-- Code Display Area -->\n    <div class=\"ul-area-code__display\">\n      <!-- Line Numbers Column -->\n      @if (showLineNumbers()) {\n        <div class=\"ul-area-code__line-numbers\" role=\"presentation\" aria-hidden=\"true\">\n          @for (lineNumber of lineNumbers(); track lineNumber) {\n            <span class=\"ul-area-code__line-number\">{{ lineNumber }}.</span>\n          }\n        </div>\n      }\n      <!-- Code Content Column -->\n      <div class=\"ul-area-code__content\">\n        <pre class=\"ul-area-code__code\" [id]=\"codeId\"><code>{{ content() }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-area-code{position:relative;display:block;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-area-code__container{position:relative;border-radius:16px;border:2px solid rgba(255,255,255,.1);background-color:#ffffff1a}.ul-area-code__display{display:flex;min-height:2rem;overflow-x:auto}.ul-area-code__line-numbers{flex-shrink:0;display:flex;flex-direction:column;padding:12px 8px;border-right:2px solid rgba(255,255,255,.1);color:#ffffff80;-webkit-user-select:none;user-select:none;min-width:3rem;text-align:right}.ul-area-code__line-number{display:block;white-space:nowrap;padding-right:4px}.ul-area-code__content{flex:1;overflow-x:auto}.ul-area-code__code{display:block;margin:0;padding:12px;background:transparent;color:#fff;white-space:pre;overflow-x:auto;overflow-y:visible;tab-size:2}.ul-area-code__code code{background:transparent;padding:0;font-size:inherit;line-height:inherit;font-family:inherit;color:inherit}.ul-area-code--no-line-numbers .ul-area-code__code{padding-left:16px}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], showLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLineNumbers", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }] } });
 
+const DEFAULT_SIZE = '8';
 // <ul-icon class="ul-icon ul-icon-size-${size} ul-icon-weight-${weight} ul-icon-${icon}" />
 // (no ul-icon-weight-* class when weight is null)
 class IconComponent {
-    size = input('8', /* @ts-ignore */
+    /**
+     * Glyph size. Left unset it renders at '8' on its own, and a container that
+     * sizes its icons (e.g. ul-input) may resize it to fit; set it to keep that
+     * exact size even there.
+     */
+    size = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * Stroke weight of the glyph. Pass `null` to leave it out entirely, so the
@@ -307,9 +313,13 @@ class IconComponent {
     icon = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
+        const size = this.size();
+        const sizeClasses = size
+            ? `ul-icon-size-${size}`
+            : `ul-icon-size-${DEFAULT_SIZE} ul-icon--default-size`;
         const weight = this.weight();
         const weightClass = weight ? ` ul-icon-weight-${weight}` : '';
-        return `ul-icon ul-icon-size-${this.size()}${weightClass} ul-icon-${this.icon()}`;
+        return `ul-icon ${sizeClasses}${weightClass} ul-icon-${this.icon()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -829,7 +839,7 @@ class FormFieldLabelComponent {
         }
       </label>
     }
-  `, isInline: true, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-form-field__helper-text--error{color:#f69d9d}\n"], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;white-space:normal;overflow-wrap:break-word}.ul-form-field__helper-text--error{color:#f69d9d}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FormFieldLabelComponent, decorators: [{
             type: Component,
@@ -848,7 +858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
         }
       </label>
     }
-  `, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-form-field__helper-text--error{color:#f69d9d}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;white-space:normal;overflow-wrap:break-word}.ul-form-field__helper-text--error{color:#f69d9d}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }] } });
 
 /**
@@ -877,7 +887,7 @@ class FormFieldHelperComponent {
         {{ helperText() }}
       }
     </span>
-  `, isInline: true, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-form-field__helper-text--error{color:#f69d9d}\n"], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;white-space:normal;overflow-wrap:break-word}.ul-form-field__helper-text--error{color:#f69d9d}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FormFieldHelperComponent, decorators: [{
             type: Component,
@@ -893,7 +903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
         {{ helperText() }}
       }
     </span>
-  `, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-form-field__helper-text--error{color:#f69d9d}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-form-field__label{color:#fff;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;white-space:normal;overflow-wrap:break-word}.ul-form-field__helper-text--error{color:#f69d9d}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], 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 }] }] } });
 
 /**
@@ -1470,11 +1480,11 @@ class InputComponent {
         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:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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"] }] });
+    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:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){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:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){font-size:16px;line-height:16px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements,.ul-input--md .ul-input__right-elements{font-size:16px;line-height:16px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){font-size:16px;line-height:16px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){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--disabled .ul-input__left-elements,.ul-input--disabled .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--disabled .ul-input__right-elements,.ul-input--disabled .ul-input__right-elements ::ng-deep .ul-icon{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:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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:Underlayer 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"] }]
+            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:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){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:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){font-size:16px;line-height:16px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements,.ul-input--md .ul-input__right-elements{font-size:16px;line-height:16px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){font-size:16px;line-height:16px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Underlayer 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:where(.ul-icon--default-size,:not([class*=ul-icon-size-])),.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon:where(.ul-icon--default-size,:not([class*=ul-icon-size-])){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--disabled .ul-input__left-elements,.ul-input--disabled .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--disabled .ul-input__right-elements,.ul-input--disabled .ul-input__right-elements ::ng-deep .ul-icon{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"] }] } });
 
 /**
@@ -4941,6 +4951,9 @@ class SidebarComponent {
     ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
     hideItemFocusOutline = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hideItemFocusOutline" }] : /* istanbul ignore next */ []));
+    /** Look of the drawer's edge. Use 'borderless' where the sidebar sits beside content that already has its own edge (e.g. a settings page). */
+    appearance = input('bordered', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     itemSelected = output();
     close() {
         this.open.set(false);
@@ -4963,17 +4976,15 @@ class SidebarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SidebarComponent, isStandalone: true, selector: "ul-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hideItemFocusOutline: { classPropertyName: "hideItemFocusOutline", publicName: "hideItemFocusOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", open: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "<div class=\"ul-sidebar\">\n  <div\n    class=\"ul-sidebar__overlay\"\n    [class.ul-sidebar__overlay--visible]=\"open()\"\n    [attr.aria-hidden]=\"!open()\"\n    (click)=\"onOverlayClick()\"\n  ></div>\n\n  <aside\n    class=\"ul-sidebar__drawer\"\n    [class.ul-sidebar__drawer--open]=\"open()\"\n    role=\"navigation\"\n    [attr.aria-hidden]=\"!open()\"\n  >\n    <div class=\"ul-sidebar__inner\">\n      <header class=\"ul-sidebar__header\">\n        @if (open()) {\n          <ul-button\n            theme=\"ghost-white\"\n            [iconOnly]=\"true\"\n            class=\"ul-sidebar__close\"\n            ariaLabel=\"Close menu\"\n            (buttonClick)=\"close()\"\n          >\n            <ul-icon icon=\"close\" size=\"6\" />\n          </ul-button>\n        }\n        <ng-content select=\"[ul-sidebar-header]\" />\n      </header>\n      <nav class=\"ul-sidebar__nav ul-scrollable\">\n        @if (items().length > 0) {\n          @for (item of items(); track $index) {\n            <ul-list-item\n              [theme]=\"theme()\"\n              [disabled]=\"!!item.disabled\"\n              [selected]=\"selectedIndex() === $index\"\n              [hideFocusOutline]=\"hideItemFocusOutline()\"\n              (click)=\"onItemClick(item, $index)\"\n            >\n              <ng-container ul-list-item-before-label>\n                @if (item.leftIcons) {\n                  @for (icon of item.leftIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n              <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n              <ng-container ul-list-item-after-label>\n                @if (item.rightIcons) {\n                  @for (icon of item.rightIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n            </ul-list-item>\n          }\n        } @else {\n          <ng-content select=\"[ul-sidebar-nav]\" />\n        }\n      </nav>\n      <footer class=\"ul-sidebar__footer\">\n        <ng-content select=\"[ul-sidebar-footer]\" />\n      </footer>\n    </div>\n  </aside>\n</div>\n", styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-scrollable{scrollbar-width:none;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{width:0;height:0;display:none}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{z-index:1000;transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.ul-sidebar__footer:empty{display:none}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\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: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SidebarComponent, isStandalone: true, selector: "ul-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hideItemFocusOutline: { classPropertyName: "hideItemFocusOutline", publicName: "hideItemFocusOutline", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", open: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "<div class=\"ul-sidebar\">\n  <div\n    class=\"ul-sidebar__overlay\"\n    [class.ul-sidebar__overlay--visible]=\"open()\"\n    [attr.aria-hidden]=\"!open()\"\n    (click)=\"onOverlayClick()\"\n  ></div>\n\n  <aside\n    class=\"ul-sidebar__drawer\"\n    [class.ul-sidebar__drawer--open]=\"open()\"\n    [class.ul-sidebar__drawer--borderless]=\"appearance() === 'borderless'\"\n    role=\"navigation\"\n    [attr.aria-hidden]=\"!open()\"\n  >\n    <div class=\"ul-sidebar__inner\">\n      <header class=\"ul-sidebar__header\">\n        @if (open()) {\n          <ul-button\n            theme=\"ghost-white\"\n            [iconOnly]=\"true\"\n            class=\"ul-sidebar__close\"\n            ariaLabel=\"Close menu\"\n            (buttonClick)=\"close()\"\n          >\n            <ul-icon icon=\"close\" size=\"6\" />\n          </ul-button>\n        }\n        <ng-content select=\"[ul-sidebar-header]\" />\n      </header>\n      <nav class=\"ul-sidebar__nav ul-scrollable\">\n        @if (items().length > 0) {\n          @for (item of items(); track $index) {\n            <ul-list-item\n              [theme]=\"theme()\"\n              [disabled]=\"!!item.disabled\"\n              [selected]=\"selectedIndex() === $index\"\n              [hideFocusOutline]=\"hideItemFocusOutline()\"\n              (click)=\"onItemClick(item, $index)\"\n            >\n              <ng-container ul-list-item-before-label>\n                @if (item.leftIcons) {\n                  @for (icon of item.leftIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n              <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n              <ng-container ul-list-item-after-label>\n                @if (item.rightIcons) {\n                  @for (icon of item.rightIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n            </ul-list-item>\n          }\n        } @else {\n          <ng-content select=\"[ul-sidebar-nav]\" />\n        }\n      </nav>\n      <footer class=\"ul-sidebar__footer\">\n        <ng-content select=\"[ul-sidebar-footer]\" />\n      </footer>\n    </div>\n  </aside>\n</div>\n", styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-scrollable{scrollbar-width:none;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{width:0;height:0;display:none}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{z-index:1000;transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}.ul-sidebar__drawer--borderless{border-right:none}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}@media(min-width:1024px){.ul-sidebar__inner{padding:0 16px 0 0}}@media(min-width:1024px){.ul-sidebar__drawer--borderless .ul-sidebar__inner{padding-right:0}}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.ul-sidebar__footer:empty{display:none}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\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: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ul-sidebar', imports: [ButtonComponent, IconComponent, ListItemComponent], encapsulation: ViewEncapsulation.None, host: {
                         '[attr.aria-hidden]': '!open()',
-                    }, template: "<div class=\"ul-sidebar\">\n  <div\n    class=\"ul-sidebar__overlay\"\n    [class.ul-sidebar__overlay--visible]=\"open()\"\n    [attr.aria-hidden]=\"!open()\"\n    (click)=\"onOverlayClick()\"\n  ></div>\n\n  <aside\n    class=\"ul-sidebar__drawer\"\n    [class.ul-sidebar__drawer--open]=\"open()\"\n    role=\"navigation\"\n    [attr.aria-hidden]=\"!open()\"\n  >\n    <div class=\"ul-sidebar__inner\">\n      <header class=\"ul-sidebar__header\">\n        @if (open()) {\n          <ul-button\n            theme=\"ghost-white\"\n            [iconOnly]=\"true\"\n            class=\"ul-sidebar__close\"\n            ariaLabel=\"Close menu\"\n            (buttonClick)=\"close()\"\n          >\n            <ul-icon icon=\"close\" size=\"6\" />\n          </ul-button>\n        }\n        <ng-content select=\"[ul-sidebar-header]\" />\n      </header>\n      <nav class=\"ul-sidebar__nav ul-scrollable\">\n        @if (items().length > 0) {\n          @for (item of items(); track $index) {\n            <ul-list-item\n              [theme]=\"theme()\"\n              [disabled]=\"!!item.disabled\"\n              [selected]=\"selectedIndex() === $index\"\n              [hideFocusOutline]=\"hideItemFocusOutline()\"\n              (click)=\"onItemClick(item, $index)\"\n            >\n              <ng-container ul-list-item-before-label>\n                @if (item.leftIcons) {\n                  @for (icon of item.leftIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n              <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n              <ng-container ul-list-item-after-label>\n                @if (item.rightIcons) {\n                  @for (icon of item.rightIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n            </ul-list-item>\n          }\n        } @else {\n          <ng-content select=\"[ul-sidebar-nav]\" />\n        }\n      </nav>\n      <footer class=\"ul-sidebar__footer\">\n        <ng-content select=\"[ul-sidebar-footer]\" />\n      </footer>\n    </div>\n  </aside>\n</div>\n", styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-scrollable{scrollbar-width:none;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{width:0;height:0;display:none}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{z-index:1000;transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.ul-sidebar__footer:empty{display:none}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], hideItemFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideItemFocusOutline", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+                        '(document:keydown.escape)': 'onEscape()',
+                    }, template: "<div class=\"ul-sidebar\">\n  <div\n    class=\"ul-sidebar__overlay\"\n    [class.ul-sidebar__overlay--visible]=\"open()\"\n    [attr.aria-hidden]=\"!open()\"\n    (click)=\"onOverlayClick()\"\n  ></div>\n\n  <aside\n    class=\"ul-sidebar__drawer\"\n    [class.ul-sidebar__drawer--open]=\"open()\"\n    [class.ul-sidebar__drawer--borderless]=\"appearance() === 'borderless'\"\n    role=\"navigation\"\n    [attr.aria-hidden]=\"!open()\"\n  >\n    <div class=\"ul-sidebar__inner\">\n      <header class=\"ul-sidebar__header\">\n        @if (open()) {\n          <ul-button\n            theme=\"ghost-white\"\n            [iconOnly]=\"true\"\n            class=\"ul-sidebar__close\"\n            ariaLabel=\"Close menu\"\n            (buttonClick)=\"close()\"\n          >\n            <ul-icon icon=\"close\" size=\"6\" />\n          </ul-button>\n        }\n        <ng-content select=\"[ul-sidebar-header]\" />\n      </header>\n      <nav class=\"ul-sidebar__nav ul-scrollable\">\n        @if (items().length > 0) {\n          @for (item of items(); track $index) {\n            <ul-list-item\n              [theme]=\"theme()\"\n              [disabled]=\"!!item.disabled\"\n              [selected]=\"selectedIndex() === $index\"\n              [hideFocusOutline]=\"hideItemFocusOutline()\"\n              (click)=\"onItemClick(item, $index)\"\n            >\n              <ng-container ul-list-item-before-label>\n                @if (item.leftIcons) {\n                  @for (icon of item.leftIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n              <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n              <ng-container ul-list-item-after-label>\n                @if (item.rightIcons) {\n                  @for (icon of item.rightIcons; track icon) {\n                    <ul-icon size=\"5\" [icon]=\"icon\" />\n                  }\n                }\n              </ng-container>\n            </ul-list-item>\n          }\n        } @else {\n          <ng-content select=\"[ul-sidebar-nav]\" />\n        }\n      </nav>\n      <footer class=\"ul-sidebar__footer\">\n        <ng-content select=\"[ul-sidebar-footer]\" />\n      </footer>\n    </div>\n  </aside>\n</div>\n", styles: [".ul-rich-text{font-family:Underlayer 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:Underlayer Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Underlayer Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Underlayer Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Underlayer Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Underlayer Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Underlayer 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:Underlayer 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-scrollable{scrollbar-width:none;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{width:0;height:0;display:none}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{z-index:1000;transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}.ul-sidebar__drawer--borderless{border-right:none}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}@media(min-width:1024px){.ul-sidebar__inner{padding:0 16px 0 0}}@media(min-width:1024px){.ul-sidebar__drawer--borderless .ul-sidebar__inner{padding-right:0}}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.ul-sidebar__footer:empty{display:none}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], hideItemFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideItemFocusOutline", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class StatusComponent {
     status = input('info', /* @ts-ignore */