@underlayerdev/ui 0.17.1 → 0.18.1

package/fesm2022/underlayerdev-ui.mjs

@@ -1114,140 +1114,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var BreadcrumbComponent = class BreadcrumbComponent {
-	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
-	separator = input("chevron_right", ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
-	maxItems = input(void 0, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
-	isLastItem(index) {
-		return index === this.items().length - 1;
-	}
-	shouldShowOnMobile(index) {
-		const items = this.items();
-		const max = this.maxItems();
-		if (!max || items.length <= max) return true;
-		if (index === 0) return true;
-		if (index >= items.length - 2) return true;
-		return false;
-	}
-	shouldShowEllipsisOnMobile() {
-		const items = this.items();
-		const max = this.maxItems();
-		if (!max || items.length <= max) return false;
-		return items.length > max + 1;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: BreadcrumbComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.2",
-		type: BreadcrumbComponent,
-		isStandalone: true,
-		selector: "ul-breadcrumb",
-		inputs: {
-			items: {
-				classPropertyName: "items",
-				publicName: "items",
-				isSignal: true,
-				isRequired: true,
-				transformFunction: null
-			},
-			separator: {
-				classPropertyName: "separator",
-				publicName: "separator",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			maxItems: {
-				classPropertyName: "maxItems",
-				publicName: "maxItems",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		ngImport: i0,
-		template: "<nav class=\"ul-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ul-breadcrumb__list\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"ul-breadcrumb__item\"\n        [class.ul-breadcrumb__item--current]=\"isLastItem($index)\"\n        [class.ul-breadcrumb__item--with-icon]=\"item.icon\"\n        [class.ul-breadcrumb__item--hidden-mobile]=\"maxItems() && !shouldShowOnMobile($index)\"\n      >\n        @if (isLastItem($index)) {\n          <span class=\"ul-breadcrumb__text\" aria-current=\"page\">\n            @if (item.icon) {\n              <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n            }\n            {{ item.label }}\n          </span>\n        } @else {\n          @if (item.href) {\n            <a [href]=\"item.href\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else if (item.routerLink) {\n            <a [routerLink]=\"item.routerLink\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else {\n            <span class=\"ul-breadcrumb__text\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </span>\n          }\n        }\n\n        @if (!isLastItem($index)) {\n          <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (separator() === 'chevron_right') {\n              <ul-icon icon=\"chevron_right\" size=\"5\" />\n            } @else if (separator() === 'slash') {\n              <span class=\"ul-breadcrumb__separator-text\">/</span>\n            } @else if (separator() === 'dot') {\n              <span class=\"ul-breadcrumb__separator-text\">·</span>\n            }\n          </span>\n        }\n      </li>\n    }\n\n    @if (shouldShowEllipsisOnMobile()) {\n      <li class=\"ul-breadcrumb__item ul-breadcrumb__item--ellipsis\" aria-hidden=\"true\">\n        <span class=\"ul-breadcrumb__ellipsis\">...</span>\n        <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separator() === 'chevron_right') {\n            <ul-icon icon=\"chevron_right\" size=\"5\" />\n          } @else if (separator() === 'slash') {\n            <span class=\"ul-breadcrumb__separator-text\">/</span>\n          } @else if (separator() === 'dot') {\n            <span class=\"ul-breadcrumb__separator-text\">·</span>\n          }\n        </span>\n      </li>\n    }\n  </ol>\n</nav>\n",
-		styles: [".ul-breadcrumb{display:flex;align-items:center;width:100%}.ul-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}.ul-breadcrumb__item{display:flex;align-items:center;gap:4px}.ul-breadcrumb__item--current .ul-breadcrumb__text{color:#fff;font-weight:800}.ul-breadcrumb__item--with-icon .ul-breadcrumb__icon{flex-shrink:0}@media(max-width:1023px){.ul-breadcrumb__item--hidden-mobile{display:none}}@media(min-width:1024px){.ul-breadcrumb__item--ellipsis{display:none}}.ul-breadcrumb__link{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#ffffffb3;text-decoration:none;transition:color .25s cubic-bezier(.4,0,.2,1)}.ul-breadcrumb__link:hover{color:#fff}.ul-breadcrumb__link:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px;border-radius:4px}.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#fff}.ul-breadcrumb__icon{flex-shrink:0;color:inherit}.ul-breadcrumb__separator{display:inline-flex;align-items:center;color:#ffffff4d;margin:0 4px;flex-shrink:0}.ul-breadcrumb__separator-text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;-webkit-user-select:none;user-select:none}.ul-breadcrumb__ellipsis{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;color:#ffffff4d;margin:0 4px;-webkit-user-select:none;user-select:none}@media(max-width:1023px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__link,.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-breadcrumb__separator{margin:0 4px}}@media(min-width:1024px)and (max-width:1279px){.ul-breadcrumb__list{gap:8px}.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__separator{margin:0 8px}}@media(min-width:1280px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:8px}.ul-breadcrumb__separator{margin:0 8px}}\n"],
-		dependencies: [{
-			kind: "component",
-			type: IconComponent,
-			selector: "ul-icon",
-			inputs: [
-				"size",
-				"weight",
-				"icon"
-			]
-		}, {
-			kind: "directive",
-			type: RouterLink,
-			selector: "[routerLink]",
-			inputs: [
-				"target",
-				"queryParams",
-				"fragment",
-				"queryParamsHandling",
-				"state",
-				"info",
-				"relativeTo",
-				"preserveFragment",
-				"skipLocationChange",
-				"replaceUrl",
-				"browserUrl",
-				"routerLink"
-			]
-		}],
-		encapsulation: i0.ViewEncapsulation.None
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: BreadcrumbComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ul-breadcrumb",
-			imports: [IconComponent, RouterLink],
-			encapsulation: ViewEncapsulation.None,
-			template: "<nav class=\"ul-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ul-breadcrumb__list\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"ul-breadcrumb__item\"\n        [class.ul-breadcrumb__item--current]=\"isLastItem($index)\"\n        [class.ul-breadcrumb__item--with-icon]=\"item.icon\"\n        [class.ul-breadcrumb__item--hidden-mobile]=\"maxItems() && !shouldShowOnMobile($index)\"\n      >\n        @if (isLastItem($index)) {\n          <span class=\"ul-breadcrumb__text\" aria-current=\"page\">\n            @if (item.icon) {\n              <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n            }\n            {{ item.label }}\n          </span>\n        } @else {\n          @if (item.href) {\n            <a [href]=\"item.href\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else if (item.routerLink) {\n            <a [routerLink]=\"item.routerLink\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else {\n            <span class=\"ul-breadcrumb__text\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </span>\n          }\n        }\n\n        @if (!isLastItem($index)) {\n          <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (separator() === 'chevron_right') {\n              <ul-icon icon=\"chevron_right\" size=\"5\" />\n            } @else if (separator() === 'slash') {\n              <span class=\"ul-breadcrumb__separator-text\">/</span>\n            } @else if (separator() === 'dot') {\n              <span class=\"ul-breadcrumb__separator-text\">·</span>\n            }\n          </span>\n        }\n      </li>\n    }\n\n    @if (shouldShowEllipsisOnMobile()) {\n      <li class=\"ul-breadcrumb__item ul-breadcrumb__item--ellipsis\" aria-hidden=\"true\">\n        <span class=\"ul-breadcrumb__ellipsis\">...</span>\n        <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separator() === 'chevron_right') {\n            <ul-icon icon=\"chevron_right\" size=\"5\" />\n          } @else if (separator() === 'slash') {\n            <span class=\"ul-breadcrumb__separator-text\">/</span>\n          } @else if (separator() === 'dot') {\n            <span class=\"ul-breadcrumb__separator-text\">·</span>\n          }\n        </span>\n      </li>\n    }\n  </ol>\n</nav>\n",
-			styles: [".ul-breadcrumb{display:flex;align-items:center;width:100%}.ul-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}.ul-breadcrumb__item{display:flex;align-items:center;gap:4px}.ul-breadcrumb__item--current .ul-breadcrumb__text{color:#fff;font-weight:800}.ul-breadcrumb__item--with-icon .ul-breadcrumb__icon{flex-shrink:0}@media(max-width:1023px){.ul-breadcrumb__item--hidden-mobile{display:none}}@media(min-width:1024px){.ul-breadcrumb__item--ellipsis{display:none}}.ul-breadcrumb__link{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#ffffffb3;text-decoration:none;transition:color .25s cubic-bezier(.4,0,.2,1)}.ul-breadcrumb__link:hover{color:#fff}.ul-breadcrumb__link:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px;border-radius:4px}.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#fff}.ul-breadcrumb__icon{flex-shrink:0;color:inherit}.ul-breadcrumb__separator{display:inline-flex;align-items:center;color:#ffffff4d;margin:0 4px;flex-shrink:0}.ul-breadcrumb__separator-text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;-webkit-user-select:none;user-select:none}.ul-breadcrumb__ellipsis{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;color:#ffffff4d;margin:0 4px;-webkit-user-select:none;user-select:none}@media(max-width:1023px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__link,.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-breadcrumb__separator{margin:0 4px}}@media(min-width:1024px)and (max-width:1279px){.ul-breadcrumb__list{gap:8px}.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__separator{margin:0 8px}}@media(min-width:1280px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:8px}.ul-breadcrumb__separator{margin:0 8px}}\n"]
-		}]
-	}],
-	propDecorators: {
-		items: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "items",
-				required: true
-			}]
-		}],
-		separator: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "separator",
-				required: false
-			}]
-		}],
-		maxItems: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "maxItems",
-				required: false
-			}]
-		}]
-	}
-});
 var ButtonDirective = class ButtonDirective {
 	baseClass = `ul-btn`;
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -1573,6 +1439,280 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const TONE_ICONS = {
+	info: "info",
+	alert: "alert",
+	confirm: "check",
+	error: "cross"
+};
+var BannerComponent = class BannerComponent {
+	tone = input("info", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+	dismissLabel = input("Dismiss", ...ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	resolvedIcon = computed(() => this.icon() ?? TONE_ICONS[this.tone()], ...ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: BannerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: BannerComponent,
+		isStandalone: true,
+		selector: "ul-banner",
+		inputs: {
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissLabel: {
+				classPropertyName: "dismissLabel",
+				publicName: "dismissLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismissed: "dismissed" },
+		ngImport: i0,
+		template: "<section class=\"ul-banner ul-banner--{{ tone() }}\">\n  <ul-icon class=\"ul-banner__icon\" [icon]=\"resolvedIcon()\" size=\"6\" />\n\n  <div class=\"ul-banner__body\">\n    <div class=\"ul-banner__title\"><ng-content select=\"[ul-banner-title]\" /></div>\n    <div class=\"ul-banner__message\"><ng-content /></div>\n  </div>\n\n  <div class=\"ul-banner__actions\"><ng-content select=\"[ul-banner-actions]\" /></div>\n\n  @if (dismissible()) {\n    <ul-button\n      class=\"ul-banner__close\"\n      theme=\"ghost-white\"\n      size=\"xs\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"dismissLabel()\"\n      (buttonClick)=\"dismissed.emit()\"\n    >\n      <ul-icon icon=\"cross\" size=\"4\" />\n    </ul-button>\n  }\n</section>\n",
+		styles: [":host{display:block}.ul-banner{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background-color:#232323;color:#fff}@media(max-width:767px){.ul-banner{flex-wrap:wrap;align-items:flex-start}}.ul-banner__icon{flex-shrink:0}.ul-banner__body{flex:1 1 0;min-width:0}.ul-banner__title:not(:empty){margin-block-end:4px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-banner__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-banner__actions{display:flex;flex-shrink:0;justify-content:end;gap:8px}.ul-banner__actions:empty{display:none}@media(max-width:767px){.ul-banner__actions{order:3;width:100%}}.ul-banner__close{flex-shrink:0}@media(max-width:767px){.ul-banner__close{order:2}}.ul-banner--info{border-color:#c2a8ff}.ul-banner--alert{border-color:#ffd9af}.ul-banner--confirm{border-color:#7edc96}.ul-banner--error{border-color:#f69d9d}\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"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BannerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ul-banner",
+			imports: [ButtonComponent, IconComponent],
+			template: "<section class=\"ul-banner ul-banner--{{ tone() }}\">\n  <ul-icon class=\"ul-banner__icon\" [icon]=\"resolvedIcon()\" size=\"6\" />\n\n  <div class=\"ul-banner__body\">\n    <div class=\"ul-banner__title\"><ng-content select=\"[ul-banner-title]\" /></div>\n    <div class=\"ul-banner__message\"><ng-content /></div>\n  </div>\n\n  <div class=\"ul-banner__actions\"><ng-content select=\"[ul-banner-actions]\" /></div>\n\n  @if (dismissible()) {\n    <ul-button\n      class=\"ul-banner__close\"\n      theme=\"ghost-white\"\n      size=\"xs\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"dismissLabel()\"\n      (buttonClick)=\"dismissed.emit()\"\n    >\n      <ul-icon icon=\"cross\" size=\"4\" />\n    </ul-button>\n  }\n</section>\n",
+			styles: [":host{display:block}.ul-banner{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background-color:#232323;color:#fff}@media(max-width:767px){.ul-banner{flex-wrap:wrap;align-items:flex-start}}.ul-banner__icon{flex-shrink:0}.ul-banner__body{flex:1 1 0;min-width:0}.ul-banner__title:not(:empty){margin-block-end:4px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-banner__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-banner__actions{display:flex;flex-shrink:0;justify-content:end;gap:8px}.ul-banner__actions:empty{display:none}@media(max-width:767px){.ul-banner__actions{order:3;width:100%}}.ul-banner__close{flex-shrink:0}@media(max-width:767px){.ul-banner__close{order:2}}.ul-banner--info{border-color:#c2a8ff}.ul-banner--alert{border-color:#ffd9af}.ul-banner--confirm{border-color:#7edc96}.ul-banner--error{border-color:#f69d9d}\n"]
+		}]
+	}],
+	propDecorators: {
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		dismissLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissLabel",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+var BreadcrumbComponent = class BreadcrumbComponent {
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	separator = input("chevron_right", ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
+	maxItems = input(void 0, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
+	isLastItem(index) {
+		return index === this.items().length - 1;
+	}
+	shouldShowOnMobile(index) {
+		const items = this.items();
+		const max = this.maxItems();
+		if (!max || items.length <= max) return true;
+		if (index === 0) return true;
+		if (index >= items.length - 2) return true;
+		return false;
+	}
+	shouldShowEllipsisOnMobile() {
+		const items = this.items();
+		const max = this.maxItems();
+		if (!max || items.length <= max) return false;
+		return items.length > max + 1;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: BreadcrumbComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: BreadcrumbComponent,
+		isStandalone: true,
+		selector: "ul-breadcrumb",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			separator: {
+				classPropertyName: "separator",
+				publicName: "separator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxItems: {
+				classPropertyName: "maxItems",
+				publicName: "maxItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<nav class=\"ul-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ul-breadcrumb__list\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"ul-breadcrumb__item\"\n        [class.ul-breadcrumb__item--current]=\"isLastItem($index)\"\n        [class.ul-breadcrumb__item--with-icon]=\"item.icon\"\n        [class.ul-breadcrumb__item--hidden-mobile]=\"maxItems() && !shouldShowOnMobile($index)\"\n      >\n        @if (isLastItem($index)) {\n          <span class=\"ul-breadcrumb__text\" aria-current=\"page\">\n            @if (item.icon) {\n              <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n            }\n            {{ item.label }}\n          </span>\n        } @else {\n          @if (item.href) {\n            <a [href]=\"item.href\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else if (item.routerLink) {\n            <a [routerLink]=\"item.routerLink\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else {\n            <span class=\"ul-breadcrumb__text\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </span>\n          }\n        }\n\n        @if (!isLastItem($index)) {\n          <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (separator() === 'chevron_right') {\n              <ul-icon icon=\"chevron_right\" size=\"5\" />\n            } @else if (separator() === 'slash') {\n              <span class=\"ul-breadcrumb__separator-text\">/</span>\n            } @else if (separator() === 'dot') {\n              <span class=\"ul-breadcrumb__separator-text\">·</span>\n            }\n          </span>\n        }\n      </li>\n    }\n\n    @if (shouldShowEllipsisOnMobile()) {\n      <li class=\"ul-breadcrumb__item ul-breadcrumb__item--ellipsis\" aria-hidden=\"true\">\n        <span class=\"ul-breadcrumb__ellipsis\">...</span>\n        <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separator() === 'chevron_right') {\n            <ul-icon icon=\"chevron_right\" size=\"5\" />\n          } @else if (separator() === 'slash') {\n            <span class=\"ul-breadcrumb__separator-text\">/</span>\n          } @else if (separator() === 'dot') {\n            <span class=\"ul-breadcrumb__separator-text\">·</span>\n          }\n        </span>\n      </li>\n    }\n  </ol>\n</nav>\n",
+		styles: [".ul-breadcrumb{display:flex;align-items:center;width:100%}.ul-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}.ul-breadcrumb__item{display:flex;align-items:center;gap:4px}.ul-breadcrumb__item--current .ul-breadcrumb__text{color:#fff;font-weight:800}.ul-breadcrumb__item--with-icon .ul-breadcrumb__icon{flex-shrink:0}@media(max-width:1023px){.ul-breadcrumb__item--hidden-mobile{display:none}}@media(min-width:1024px){.ul-breadcrumb__item--ellipsis{display:none}}.ul-breadcrumb__link{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#ffffffb3;text-decoration:none;transition:color .25s cubic-bezier(.4,0,.2,1)}.ul-breadcrumb__link:hover{color:#fff}.ul-breadcrumb__link:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px;border-radius:4px}.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#fff}.ul-breadcrumb__icon{flex-shrink:0;color:inherit}.ul-breadcrumb__separator{display:inline-flex;align-items:center;color:#ffffff4d;margin:0 4px;flex-shrink:0}.ul-breadcrumb__separator-text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;-webkit-user-select:none;user-select:none}.ul-breadcrumb__ellipsis{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;color:#ffffff4d;margin:0 4px;-webkit-user-select:none;user-select:none}@media(max-width:1023px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__link,.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-breadcrumb__separator{margin:0 4px}}@media(min-width:1024px)and (max-width:1279px){.ul-breadcrumb__list{gap:8px}.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__separator{margin:0 8px}}@media(min-width:1280px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:8px}.ul-breadcrumb__separator{margin:0 8px}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "ul-icon",
+			inputs: [
+				"size",
+				"weight",
+				"icon"
+			]
+		}, {
+			kind: "directive",
+			type: RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BreadcrumbComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ul-breadcrumb",
+			imports: [IconComponent, RouterLink],
+			encapsulation: ViewEncapsulation.None,
+			template: "<nav class=\"ul-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ul-breadcrumb__list\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"ul-breadcrumb__item\"\n        [class.ul-breadcrumb__item--current]=\"isLastItem($index)\"\n        [class.ul-breadcrumb__item--with-icon]=\"item.icon\"\n        [class.ul-breadcrumb__item--hidden-mobile]=\"maxItems() && !shouldShowOnMobile($index)\"\n      >\n        @if (isLastItem($index)) {\n          <span class=\"ul-breadcrumb__text\" aria-current=\"page\">\n            @if (item.icon) {\n              <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n            }\n            {{ item.label }}\n          </span>\n        } @else {\n          @if (item.href) {\n            <a [href]=\"item.href\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else if (item.routerLink) {\n            <a [routerLink]=\"item.routerLink\" class=\"ul-breadcrumb__link\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </a>\n          } @else {\n            <span class=\"ul-breadcrumb__text\">\n              @if (item.icon) {\n                <ul-icon [icon]=\"item.icon\" size=\"5\" class=\"ul-breadcrumb__icon\" />\n              }\n              {{ item.label }}\n            </span>\n          }\n        }\n\n        @if (!isLastItem($index)) {\n          <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (separator() === 'chevron_right') {\n              <ul-icon icon=\"chevron_right\" size=\"5\" />\n            } @else if (separator() === 'slash') {\n              <span class=\"ul-breadcrumb__separator-text\">/</span>\n            } @else if (separator() === 'dot') {\n              <span class=\"ul-breadcrumb__separator-text\">·</span>\n            }\n          </span>\n        }\n      </li>\n    }\n\n    @if (shouldShowEllipsisOnMobile()) {\n      <li class=\"ul-breadcrumb__item ul-breadcrumb__item--ellipsis\" aria-hidden=\"true\">\n        <span class=\"ul-breadcrumb__ellipsis\">...</span>\n        <span class=\"ul-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separator() === 'chevron_right') {\n            <ul-icon icon=\"chevron_right\" size=\"5\" />\n          } @else if (separator() === 'slash') {\n            <span class=\"ul-breadcrumb__separator-text\">/</span>\n          } @else if (separator() === 'dot') {\n            <span class=\"ul-breadcrumb__separator-text\">·</span>\n          }\n        </span>\n      </li>\n    }\n  </ol>\n</nav>\n",
+			styles: [".ul-breadcrumb{display:flex;align-items:center;width:100%}.ul-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}.ul-breadcrumb__item{display:flex;align-items:center;gap:4px}.ul-breadcrumb__item--current .ul-breadcrumb__text{color:#fff;font-weight:800}.ul-breadcrumb__item--with-icon .ul-breadcrumb__icon{flex-shrink:0}@media(max-width:1023px){.ul-breadcrumb__item--hidden-mobile{display:none}}@media(min-width:1024px){.ul-breadcrumb__item--ellipsis{display:none}}.ul-breadcrumb__link{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#ffffffb3;text-decoration:none;transition:color .25s cubic-bezier(.4,0,.2,1)}.ul-breadcrumb__link:hover{color:#fff}.ul-breadcrumb__link:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px;border-radius:4px}.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;display:inline-flex;align-items:center;gap:4px;color:#fff}.ul-breadcrumb__icon{flex-shrink:0;color:inherit}.ul-breadcrumb__separator{display:inline-flex;align-items:center;color:#ffffff4d;margin:0 4px;flex-shrink:0}.ul-breadcrumb__separator-text{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;-webkit-user-select:none;user-select:none}.ul-breadcrumb__ellipsis{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500;color:#ffffff4d;margin:0 4px;-webkit-user-select:none;user-select:none}@media(max-width:1023px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__link,.ul-breadcrumb__text{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-breadcrumb__separator{margin:0 4px}}@media(min-width:1024px)and (max-width:1279px){.ul-breadcrumb__list{gap:8px}.ul-breadcrumb__item{gap:4px}.ul-breadcrumb__separator{margin:0 8px}}@media(min-width:1280px){.ul-breadcrumb__list,.ul-breadcrumb__item{gap:8px}.ul-breadcrumb__separator{margin:0 8px}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		separator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "separator",
+				required: false
+			}]
+		}],
+		maxItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxItems",
+				required: false
+			}]
+		}]
+	}
+});
 function createFormFieldIds(prefix) {
 	const id = `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
 	return {
@@ -5979,17 +6119,24 @@ var DropdownComponent = class DropdownComponent {
 	menuTriggerIcons = input(DEFAULT_MENU_TRIGGER_ICONS, ...ngDevMode ? [{ debugName: "menuTriggerIcons" }] : /* istanbul ignore next */ []);
 	triggerIconOnly = input(...ngDevMode ? [void 0, { debugName: "triggerIconOnly" }] : /* istanbul ignore next */ []);
 	iconOnlyLabel = input("Open menu", ...ngDevMode ? [{ debugName: "iconOnlyLabel" }] : /* istanbul ignore next */ []);
+	placeholder = input(...ngDevMode ? [void 0, { debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	selectedIndex = model(0, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
 	selectedItem = computed(() => {
 		const items = this.items();
+		const index = this.selectedIndex();
+		const fallback = {
+			label: "",
+			value: void 0,
+			leftIcons: [],
+			rightIcons: [],
+			disabled: false
+		};
+		const placeholder = this.placeholder();
 		return {
-			...items[this.selectedIndex()] ?? items[0] ?? {
-				label: "",
-				value: void 0,
-				leftIcons: [],
-				rightIcons: [],
-				disabled: false
-			},
+			...placeholder !== void 0 && !items[index] ? {
+				...fallback,
+				label: placeholder
+			} : items[index] ?? items[0] ?? fallback,
 			...this.menuTriggerIcons() ?? DEFAULT_MENU_TRIGGER_ICONS
 		};
 	}, ...ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []);
@@ -6075,6 +6222,13 @@ var DropdownComponent = class DropdownComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			selectedIndex: {
 				classPropertyName: "selectedIndex",
 				publicName: "selectedIndex",
@@ -6208,6 +6362,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
 		selectedIndex: [{
 			type: i0.Input,
 			args: [{
@@ -13133,6 +13295,9 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+function canHover() {
+	return typeof window.matchMedia !== "function" || window.matchMedia("(hover: hover)").matches;
+}
 var TooltipComponent = class TooltipComponent {
 	text = input("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
 	position = input("top", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
@@ -13147,7 +13312,7 @@ var TooltipComponent = class TooltipComponent {
 		return this.visible() && !!this.text() ? this.tooltipId : null;
 	}
 	handlePointerEnter() {
-		if (this.disabled() || !this.text()) return;
+		if (this.disabled() || !this.text() || !canHover()) return;
 		this.scheduleShow();
 	}
 	handlePointerLeave() {
@@ -13252,7 +13417,7 @@ var TooltipComponent = class TooltipComponent {
 		},
 		ngImport: i0,
 		template: "<span class=\"ul-tooltip-wrapper\">\n  <ng-content />\n\n  @if (isVisible() && text()) {\n    <span class=\"ul-tooltip ul-tooltip--{{ position() }}\" role=\"tooltip\" [attr.id]=\"tooltipId\">\n      {{ text() }}\n    </span>\n  }\n</span>\n",
-		styles: [".ul-tooltip-wrapper{position:relative;display:inline-flex;align-items:center}.ul-tooltip{position:absolute;z-index:200;padding:8px 16px;border-radius:8px;background-color:#232323;font-weight:400;white-space:nowrap;pointer-events:none}.ul-tooltip--top{inset-block-end:100%;inset-inline-start:50%;margin-block-end:4px;transform:translate(-50%)}.ul-tooltip--bottom{inset-block-start:100%;inset-inline-start:50%;margin-block-start:4px;transform:translate(-50%)}.ul-tooltip--left{inset-inline-end:100%;inset-block-start:50%;margin-inline-end:4px;transform:translateY(-50%)}.ul-tooltip--right{inset-inline-start:100%;inset-block-start:50%;margin-inline-start:4px;transform:translateY(-50%)}\n"],
+		styles: [".ul-tooltip-wrapper{position:relative;display:inline-flex;align-items:center}.ul-tooltip{position:absolute;z-index:200;padding:8px 16px;border-radius:8px;background-color:#232323;font-weight:400;white-space:nowrap;pointer-events:none}.ul-tooltip--top{inset-block-end:100%;inset-inline-start:50%;margin-block-end:4px;transform:translate(-50%)}.ul-tooltip--bottom{inset-block-start:100%;inset-inline-start:50%;margin-block-start:4px;transform:translate(-50%)}.ul-tooltip--left{inset-inline-end:100%;inset-block-start:50%;margin-inline-end:4px;transform:translateY(-50%)}.ul-tooltip--right{inset-inline-start:100%;inset-block-start:50%;margin-inline-start:4px;transform:translateY(-50%)}@media(hover:none){.ul-tooltip{display:none}}\n"],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
@@ -13267,7 +13432,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ul-tooltip",
 			encapsulation: ViewEncapsulation.None,
 			template: "<span class=\"ul-tooltip-wrapper\">\n  <ng-content />\n\n  @if (isVisible() && text()) {\n    <span class=\"ul-tooltip ul-tooltip--{{ position() }}\" role=\"tooltip\" [attr.id]=\"tooltipId\">\n      {{ text() }}\n    </span>\n  }\n</span>\n",
-			styles: [".ul-tooltip-wrapper{position:relative;display:inline-flex;align-items:center}.ul-tooltip{position:absolute;z-index:200;padding:8px 16px;border-radius:8px;background-color:#232323;font-weight:400;white-space:nowrap;pointer-events:none}.ul-tooltip--top{inset-block-end:100%;inset-inline-start:50%;margin-block-end:4px;transform:translate(-50%)}.ul-tooltip--bottom{inset-block-start:100%;inset-inline-start:50%;margin-block-start:4px;transform:translate(-50%)}.ul-tooltip--left{inset-inline-end:100%;inset-block-start:50%;margin-inline-end:4px;transform:translateY(-50%)}.ul-tooltip--right{inset-inline-start:100%;inset-block-start:50%;margin-inline-start:4px;transform:translateY(-50%)}\n"]
+			styles: [".ul-tooltip-wrapper{position:relative;display:inline-flex;align-items:center}.ul-tooltip{position:absolute;z-index:200;padding:8px 16px;border-radius:8px;background-color:#232323;font-weight:400;white-space:nowrap;pointer-events:none}.ul-tooltip--top{inset-block-end:100%;inset-inline-start:50%;margin-block-end:4px;transform:translate(-50%)}.ul-tooltip--bottom{inset-block-start:100%;inset-inline-start:50%;margin-block-start:4px;transform:translate(-50%)}.ul-tooltip--left{inset-inline-end:100%;inset-block-start:50%;margin-inline-end:4px;transform:translateY(-50%)}.ul-tooltip--right{inset-inline-start:100%;inset-block-start:50%;margin-inline-start:4px;transform:translateY(-50%)}@media(hover:none){.ul-tooltip{display:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -14333,6 +14498,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const NO_SELECTION = -1;
 var SelectComponent = class SelectComponent {
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	theme = input("transparent-white", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
@@ -14368,17 +14534,11 @@ var SelectComponent = class SelectComponent {
 		effect(() => {
 			const currentValue = this.value();
 			const options = this.options();
-			if (currentValue == null) {
-				this.selectedIndex.set(0);
-				return;
-			}
-			const index = options.findIndex((opt) => opt.value === currentValue);
-			this.selectedIndex.set(index >= 0 ? index : 0);
+			this.selectedIndex.set(currentValue == null ? NO_SELECTION : options.findIndex((opt) => opt.value === currentValue));
 		});
 	}
-	onSelectedIndexChange(index) {
-		const option = this.options()[index];
-		this.selectedIndex.set(index);
+	onItemSelected(item) {
+		const option = this.options().find((candidate) => candidate.value === item.value);
 		this.value.set(option?.value ?? null);
 	}
 	onDropdownClosed() {
@@ -14511,7 +14671,7 @@ var SelectComponent = class SelectComponent {
 			selectedIndex: "selectedIndexChange"
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [disabled]=\"disabled()\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
+		template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [selectedIndex]=\"selectedIndex()\"\n      (selectedItemChange)=\"onItemSelected($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
 		styles: [".ul-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"],
 		dependencies: [
 			{
@@ -14525,6 +14685,7 @@ var SelectComponent = class SelectComponent {
 					"menuTriggerIcons",
 					"triggerIconOnly",
 					"iconOnlyLabel",
+					"placeholder",
 					"selectedIndex"
 				],
 				outputs: [
@@ -14575,7 +14736,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FormFieldHelperComponent
 			],
 			encapsulation: ViewEncapsulation.None,
-			template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [disabled]=\"disabled()\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
+			template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [selectedIndex]=\"selectedIndex()\"\n      (selectedItemChange)=\"onItemSelected($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
 			styles: [".ul-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"]
 		}]
 	}],
@@ -16097,6 +16258,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LoadMoreComponent, LongPressDirective, MenuComponent, MenuItemComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
+export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BannerComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LoadMoreComponent, LongPressDirective, MenuComponent, MenuItemComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
 
 //# sourceMappingURL=underlayerdev-ui.mjs.map