@ngstarter-ui/components 21.0.48 → 21.0.50

package/ai/component-registry.json

@@ -3080,6 +3080,7 @@
         "Data view pinning pagination",
         "Data view refresh",
         "Data view resizable columns",
+        "Data view row click selection",
         "Data view server side empty state",
         "Data view server side",
         "Data view sticky columns",
@@ -3142,10 +3143,12 @@
         "DataViewPinAlign",
         "DataViewRowModelType",
         "DataViewRowSelectionEvent",
+        "DataViewRowSelectionEventSource",
         "DataViewState",
         "provideDataView"
       ],
       "inputs": [
+        "allowSingleRowSelectionByClick",
         "autoHeight",
         "bodyScroll",
         "bufferRows",
@@ -4185,13 +4188,13 @@
           "name": "file-type-gallery-example",
           "title": "File type gallery",
           "file": "projects/docs/src/app/components/file-type/_examples/file-type-gallery-example/file-type-gallery-example.html",
-          "source": "<div class=\"grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5\">\n  @for (type of types(); track type) {\n    <div class=\"flex flex-col items-center gap-2 rounded-lg border border-subtle p-4\">\n      <ngs-file-type [extension]=\"type\" class=\"size-16\"/>\n      <div class=\"text-xs uppercase text-secondary\">{{ type }}</div>\n    </div>\n  }\n</div>"
+          "source": "<div class=\"grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5\">\n  @for (type of types(); track type) {\n    <div class=\"flex flex-col items-center gap-2 rounded-lg border border-border p-4\">\n      <ngs-file-type [extension]=\"type\" class=\"size-16\"/>\n      <div class=\"text-xs uppercase text-secondary\">{{ type }}</div>\n    </div>\n  }\n</div>"
         },
         {
           "name": "file-type-mime-example",
           "title": "File type mime",
           "file": "projects/docs/src/app/components/file-type/_examples/file-type-mime-example/file-type-mime-example.html",
-          "source": "<div class=\"grid gap-4 sm:grid-cols-2\">\n  @for (file of files(); track file.name) {\n    <div class=\"flex items-center gap-4 rounded-lg border border-subtle p-4\">\n      <ngs-file-type [mimeType]=\"file.mimeType\" [fallback]=\"file.fallback\" class=\"size-12\"/>\n      <div class=\"min-w-0\">\n        <div class=\"truncate text-sm\">{{ file.name }}</div>\n        <div class=\"truncate text-xs text-secondary\">{{ file.mimeType }}</div>\n      </div>\n    </div>\n  }\n</div>"
+          "source": "<div class=\"grid gap-4 sm:grid-cols-2\">\n  @for (file of files(); track file.name) {\n    <div class=\"flex items-center gap-4 rounded-lg border border-border p-4\">\n      <ngs-file-type [mimeType]=\"file.mimeType\" [fallback]=\"file.fallback\" class=\"size-12\"/>\n      <div class=\"min-w-0\">\n        <div class=\"truncate text-sm\">{{ file.name }}</div>\n        <div class=\"truncate text-xs text-secondary\">{{ file.mimeType }}</div>\n      </div>\n    </div>\n  }\n</div>"
         }
       ],
       "previewAsset": "projects/components/file-type/preview.svg",
@@ -4373,7 +4376,7 @@
         "Static blocks are represented as fields with kind: \"static\". The built-in spacer block uses type: \"spacer\", width: 12, and settings.height with one of 8, 16, 24, 32, 48, or 64.",
         "Use width as a 12-column span. Default fields are 12 columns unless a narrower width is set. Nested children in group are sorted and rendered inside that group container.",
         "Option fields use options entries { label: string; value: any; selected?: boolean }. For select, multiple controls array values; clearable enables the clear action. For radio, settings.orientation is \"vertical\" by default and can be \"horizontal\". Hidden fields use type: \"hidden\" and render as native <input type=\"hidden\"> controls included in raw form values. Date and time fields include type: \"date\" for a single date, type: \"time\" for HH:mm time values, and type: \"date-range\" for a DateRange-like value with start/end dates. Upload fields use type: \"upload\", multiple for File[] values, and settings.accept for comma-separated MIME types such as \"*/*\" or \"image/*,application/pdf\". Upload handling can be provided with [uploadCallback] on ngs-form-builder/ngs-form-renderer or globally through provideFormBuilder({ uploadCallback }). The callback receives { field, control, event, files, fileList, multiple } and may return sync/async value stored in the form control.",
-        "Use <ngs-form-renderer> from @ngstarter-ui/components/form-builder to render a saved FormBuilderSchema as a runtime form. The Angular class export is FormBuilderRenderer.",
+        "Use <ngs-form-renderer> from @ngstarter-ui/components/form-builder to render a saved FormBuilderSchema as a runtime form. The Angular class export is FormRenderer.",
         "Register custom placeholders through provideFormBuilder({ fields/items/settings }) using formBuilderField(), formBuilderItem(), and formBuilderSettings(). Custom field definitions can provide defaults, renderer, settings, validators, acceptsChildren, group, icon, and kind."
       ],
       "exampleTopics": [
@@ -4426,6 +4429,7 @@
         "FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA",
         "FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA",
         "FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA",
+        "FORM_BUILDER_SELECT_DATA_SOURCES",
         "FORM_BUILDER_SETTINGS",
         "FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA",
         "FORM_BUILDER_UPLOAD_CALLBACK",
@@ -4444,10 +4448,12 @@
         "FormBuilderItemKind",
         "FormBuilderLayoutItem",
         "FormBuilderOption",
-        "FormBuilderRenderer",
         "FormBuilderSchema",
         "FormBuilderSection",
         "FormBuilderSectionSettingsContext",
+        "FormBuilderSelectDataSourceDefinition",
+        "FormBuilderSelectDataSourceOptions",
+        "FormBuilderSelectOptionsSource",
         "formBuilderSettings",
         "FormBuilderSettingsConfig",
         "FormBuilderSettingsContext",
@@ -4458,12 +4464,16 @@
         "FormBuilderUploadCallback",
         "FormBuilderUploadContext",
         "FormBuilderValidationRule",
+        "FormRenderer",
         "provideFormBuilder",
         "provideFormBuilderField",
         "provideFormBuilderFields",
+        "provideFormBuilderSelectDataSource",
+        "provideFormBuilderSelectDataSources",
         "validatorsFromRules"
       ],
       "inputs": [
+        "canvasDropPlaceholderDelay",
         "control",
         "definitions",
         "editableCanvas",
@@ -4486,6 +4496,7 @@
       ],
       "cssTokens": [
         "--ngs-card-padding",
+        "--ngs-color-border",
         "--ngs-color-danger",
         "--ngs-color-on-primary-container",
         "--ngs-color-on-surface",
@@ -4494,7 +4505,6 @@
         "--ngs-color-primary",
         "--ngs-color-primary-container",
         "--ngs-color-surface",
-        "--ngs-color-surface-container-low",
         "--ngs-color-surface-container-lowest",
         "--ngs-field-radius",
         "--ngs-font-size-base",
@@ -4502,6 +4512,7 @@
         "--ngs-font-size-sm",
         "--ngs-font-size-xs",
         "--ngs-line-height-base",
+        "--ngs-radius-current",
         "--ngs-radius-lg",
         "--ngs-radius-md",
         "--ngs-radius-sm",
@@ -5720,13 +5731,13 @@
         "Layout with nested layouts example",
         "Layout with nested layouts"
       ],
-      "minimalExample": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-l border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>",
+      "minimalExample": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-s border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>",
       "exampleFiles": [
         {
           "name": "layout-aside-example",
           "title": "Layout aside",
           "file": "projects/docs/src/app/components/layout/_examples/layout-aside-example/layout-aside-example.html",
-          "source": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-l border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>"
+          "source": "<div class=\"h-[300px] border border-muted\">\n  <ngs-layout>\n    <ngs-layout-sidebar>\n      <div class=\"p-6 border-r border-e-muted h-full w-[240px]\">Sidebar</div>\n    </ngs-layout-sidebar>\n    <ngs-layout-content class=\"p-6\">\n      Body\n    </ngs-layout-content>\n    <ngs-layout-aside>\n      <div class=\"p-6 border-s border-s-muted h-full w-[200px]\">Aside</div>\n    </ngs-layout-aside>\n  </ngs-layout>\n</div>"
         },
         {
           "name": "layout-footer-example",
@@ -6024,6 +6035,7 @@
         "Menu With Icons",
         "Menu Divider",
         "Menu Heading",
+        "Data Driven Menu",
         "Menu Header & Footer",
         "Nested Menu",
         "Menu Positioning",
@@ -6046,10 +6058,10 @@
           "source": "<div class=\"w-[300px] h-[300px] p-10 rounded-2xl text-center border border-muted flex items-center justify-center\"\n     [ngsContextMenuTriggerFor]=\"contextMenu\">\n  Right click here to trigger a context menu\n</div>\n<ngs-menu #contextMenu>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:cut-24-regular\"/>\n    Cut\n  </button>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:copy-24-regular\"/>\n    Copy\n  </button>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:clipboard-text-24-regular\"/>\n    Paste\n  </button>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:print-24-regular\"/>\n    Print\n  </button>\n</ngs-menu>"
         },
         {
-          "name": "lazy-rendering-example",
-          "title": "Lazy rendering",
-          "file": "projects/docs/src/app/components/menu/_examples/lazy-rendering-example/lazy-rendering-example.html",
-          "source": "<ngs-menu #appMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-name=\"name\">\n    <button ngs-menu-item>Settings</button>\n    <button ngs-menu-item>Log off {{name}}</button>\n  </ng-template>\n</ngs-menu>\n<button ngsIconButton [ngsMenuTriggerFor]=\"appMenu\" [ngsMenuTriggerData]=\"{name: 'Sally'}\">\n  <ngs-icon name=\"fluent:more-vertical-24-regular\"/>\n</button>\n<button ngsIconButton [ngsMenuTriggerFor]=\"appMenu\" [ngsMenuTriggerData]=\"{name: 'Bob'}\">\n  <ngs-icon name=\"fluent:more-vertical-24-regular\"/>\n</button>"
+          "name": "data-driven-menu-example",
+          "title": "Data driven menu",
+          "file": "projects/docs/src/app/components/menu/_examples/data-driven-menu-example/data-driven-menu-example.html",
+          "source": "<div class=\"flex flex-col items-start gap-3\">\n  <button ngsButton [ngsMenuTriggerFor]=\"projectMenu\">\n    Project actions\n  </button>\n  <span class=\"text-sm text-neutral-600\">{{ selectedAction() }}</span>\n</div>\n<ngs-menu #projectMenu=\"ngsMenu\">\n  @for (action of actions; track action.id) {\n    <button ngs-menu-item [disabled]=\"action.disabled ?? false\" (click)=\"selectAction(action)\">\n      <ngs-icon [name]=\"action.icon\"/>\n      <span>{{ action.label }}</span>\n    </button>\n  }\n</ngs-menu>"
         }
       ],
       "previewAsset": "projects/components/menu/preview.svg",
@@ -8002,10 +8014,12 @@
         "Multiple Selection",
         "Customizing the trigger label",
         "Select with search feature",
+        "Async Data Source",
         "Get set value",
         "Resetting value",
         "Custom trigger",
-        "Select search"
+        "Select search",
+        "Async data source select"
       ],
       "minimalExample": "<p>Basic ngs-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>",
       "exampleFiles": [
@@ -8015,22 +8029,24 @@
           "file": "projects/docs/src/app/forms/select/_examples/basic-select-example/basic-select-example.html",
           "source": "<p>Basic ngs-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
         },
+        {
+          "name": "async-data-source-select-example",
+          "title": "Async data source select",
+          "file": "projects/docs/src/app/forms/select/_examples/async-data-source-select-example/async-data-source-select-example.html",
+          "source": "<ngs-form-field class=\"w-full max-w-md\">\n  <ngs-label>Owner</ngs-label>\n  <ngs-select\n    [formControl]=\"owner\"\n    [dataSource]=\"usersDataSource\"\n    placeholder=\"Assign owner\"\n    searchable\n    clearable\n    [pageSize]=\"20\"\n    [searchDebounce]=\"150\">\n    <ng-template ngsOptionContentDef let-user let-label=\"label\">\n      <span class=\"flex min-w-0 flex-col\">\n        <span class=\"truncate\">{{ user.name }}</span>\n        <span class=\"truncate text-xs text-neutral-500\">{{ user.team }} - {{ label }}</span>\n      </span>\n    </ng-template>\n    <ng-template ngsSelectValueDef let-user>\n      {{ user.name }} - {{ user.team }}\n    </ng-template>\n  </ngs-select>\n</ngs-form-field>"
+        },
         {
           "name": "clearable-select-example",
           "title": "Clearable select",
           "file": "projects/docs/src/app/forms/select/_examples/clearable-select-example/clearable-select-example.html",
           "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Status</ngs-label>\n  <ngs-select [formControl]=\"status()\" clearable>\n    @for (statusOption of statuses(); track statusOption.value) {\n      <ngs-option [value]=\"statusOption.value\">{{ statusOption.label }}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
-        },
-        {
-          "name": "custom-trigger-example",
-          "title": "Custom trigger",
-          "file": "projects/docs/src/app/forms/select/_examples/custom-trigger-example/custom-trigger-example.html",
-          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Toppings</ngs-label>\n  <ngs-select [formControl]=\"toppings\" multiple>\n    <ngs-select-trigger>\n      {{ toppings.value?.[0] || '' }}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"opacity-75 text-sm\">\n          (+{{ (toppings.value?.length || 0) - 1 }} {{ toppings.value?.length === 2 ? 'other' : 'others' }})\n        </span>\n      }\n    </ngs-select-trigger>\n    @for (topping of toppingList; track topping) {\n      <ngs-option [value]=\"topping\">{{topping}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
         }
       ],
       "previewAsset": "projects/components/select/preview.svg",
       "selectors": [
         "ng-template[ngsFilterTriggerValue]",
+        "ng-template[ngsOptionContentDef]",
+        "ng-template[ngsSelectValueDef]",
         "ngs-filter-trigger",
         "ngs-select",
         "ngs-select-body",
@@ -8046,21 +8062,35 @@
         "SELECT",
         "SelectBody",
         "SelectChange",
+        "SelectDataSource",
+        "SelectDataSourceOption",
+        "SelectDataSourceRequest",
+        "SelectDataSourceResult",
         "SelectFooter",
         "SelectHeader",
-        "SelectTrigger"
+        "SelectOptionContentContext",
+        "SelectOptionContentDef",
+        "SelectTrigger",
+        "SelectValueContext",
+        "SelectValueDef"
       ],
       "inputs": [
         "aria-describedby",
         "aria-label",
         "clearable",
+        "dataSource",
         "disabled",
         "hideCheckIcon",
         "id",
+        "loadOnOpen",
         "maxCount",
+        "minSearchLength",
         "multiple",
+        "pageSize",
         "placeholder",
         "required",
+        "searchable",
+        "searchDebounce",
         "showZero",
         "tabIndex",
         "value"
@@ -8076,7 +8106,10 @@
         "--ngs-color-on-surface",
         "--ngs-color-on-surface-variant",
         "--ngs-color-outline",
+        "--ngs-color-outline-variant",
         "--ngs-color-primary",
+        "--ngs-color-surface-container-high",
+        "--ngs-color-surface-container-lowest",
         "--ngs-dropdown-bg",
         "--ngs-dropdown-border",
         "--ngs-dropdown-item-gap",
@@ -8101,6 +8134,7 @@
         "--ngs-filter-trigger-gap",
         "--ngs-filter-trigger-value-color",
         "--ngs-filter-trigger-value-font-weight",
+        "--ngs-font-size-sm",
         "--ngs-select-arrow-color",
         "--ngs-select-arrow-container-width",
         "--ngs-select-arrow-size",
@@ -8118,6 +8152,18 @@
         "--ngs-select-panel-max-height",
         "--ngs-select-panel-shadow",
         "--ngs-select-placeholder-color",
+        "--ngs-select-search-bg",
+        "--ngs-select-search-border",
+        "--ngs-select-search-color",
+        "--ngs-select-search-focus-border-color",
+        "--ngs-select-search-font-size",
+        "--ngs-select-search-height",
+        "--ngs-select-search-padding-inline",
+        "--ngs-select-state-action-color",
+        "--ngs-select-state-color",
+        "--ngs-select-state-font-size",
+        "--ngs-select-state-min-height",
+        "--ngs-select-state-padding",
         "--ngs-select-trigger-gap"
       ],
       "example": "<ngs-select [value]=\"value\">...</ngs-select>"
@@ -9426,7 +9472,7 @@
           "name": "tab-panel-with-panels-inside-example",
           "title": "Tab panel with panels inside",
           "file": "projects/docs/src/app/navigation/tab-panel/_examples/tab-panel-with-panels-inside-example/tab-panel-with-panels-inside-example.html",
-          "source": "<div class=\"flex gap-10\">\n  <ngs-tab-panel activeItemId=\"home\" class=\"h-[500px]\">\n    <ngs-tab-panel-content>\n      <ngs-tab-panel-nav>\n        <ngs-tab-panel-item for=\"home\">\n          <ngs-icon name=\"fluent:home-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Home</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n        <ngs-tab-panel-item for=\"code\">\n          <ngs-icon name=\"fluent:code-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Code</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n      </ngs-tab-panel-nav>\n    </ngs-tab-panel-content>\n    <ngs-tab-panel-aside class=\"bg-surface-container-low rounded-xl\">\n      <ng-template ngsTabPanelAsideContent=\"home\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-subtle flex items-center px-4\">Home Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Home Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-subtle flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-template>\n      <ng-template ngsTabPanelAsideContent=\"code\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-subtle flex items-center px-4\">Code Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Code Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-subtle flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-\n..."
+          "source": "<div class=\"flex gap-10\">\n  <ngs-tab-panel activeItemId=\"home\" class=\"h-[500px]\">\n    <ngs-tab-panel-content>\n      <ngs-tab-panel-nav>\n        <ngs-tab-panel-item for=\"home\">\n          <ngs-icon name=\"fluent:home-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Home</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n        <ngs-tab-panel-item for=\"code\">\n          <ngs-icon name=\"fluent:code-24-regular\" ngsTabPanelItemIcon/>\n          <ngs-tab-panel-item-text>Code</ngs-tab-panel-item-text>\n        </ngs-tab-panel-item>\n      </ngs-tab-panel-nav>\n    </ngs-tab-panel-content>\n    <ngs-tab-panel-aside class=\"bg-surface-container-low rounded-xl\">\n      <ng-template ngsTabPanelAsideContent=\"home\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Home Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Home Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-border flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-template>\n      <ng-template ngsTabPanelAsideContent=\"code\">\n        <ngs-panel>\n          <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Code Header</ngs-panel-header>\n          <ngs-panel-content class=\"p-4\">\n            <div class=\"h-[1000px]\">Code Content</div>\n          </ngs-panel-content>\n          <ngs-panel-footer class=\"border-t border-t-border flex items-center px-4\">Footer</ngs-panel-footer>\n        </ngs-panel>\n      </ng-\n..."
         }
       ],
       "previewAsset": "projects/components/tab-panel/preview.svg",
@@ -9731,12 +9777,12 @@
         "--ngs-color-border",
         "--ngs-color-on-surface-variant",
         "--ngs-color-primary",
-        "--ngs-color-subtle",
         "--ngs-color-surface-container-high",
         "--ngs-tab-content-padding",
         "--ngs-tab-group-animation-duration",
         "--ngs-tab-group-header-border-bottom",
         "--ngs-tab-group-header-border-top",
+        "--ngs-tab-group-header-height",
         "--ngs-tab-group-pagination-control-after-border-left",
         "--ngs-tab-group-pagination-control-before-border-right",
         "--ngs-tab-label-active-border-bottom",
@@ -10300,25 +10346,25 @@
         "Toolbar overflow",
         "Toolbar nav"
       ],
-      "minimalExample": "<ngs-toolbar>\n  <ngs-toolbar-title>My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>",
+      "minimalExample": "<ngs-toolbar>\n  <ngs-toolbar-title appearance=\"large\">My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>",
       "exampleFiles": [
         {
           "name": "basic-toolbar-example",
           "title": "Basic toolbar",
           "file": "projects/docs/src/app/components/toolbar/_examples/basic-toolbar-example/basic-toolbar-example.html",
-          "source": "<ngs-toolbar>\n  <ngs-toolbar-title>My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>"
+          "source": "<ngs-toolbar>\n  <ngs-toolbar-title appearance=\"large\">My App</ngs-toolbar-title>\n  <ngs-toolbar-spacer/>\n  <button>Login</button>\n</ngs-toolbar>"
         },
         {
           "name": "multi-row-toolbar-example",
           "title": "Multi row toolbar",
           "file": "projects/docs/src/app/components/toolbar/_examples/multi-row-toolbar-example/multi-row-toolbar-example.html",
-          "source": "<ngs-toolbar>\n  <ngs-toolbar-row>\n    <ngs-toolbar-title>Multi-row Toolbar</ngs-toolbar-title>\n    <ngs-toolbar-spacer></ngs-toolbar-spacer>\n    <ngs-toolbar-item>Menu</ngs-toolbar-item>\n  </ngs-toolbar-row>\n  <ngs-toolbar-row>\n    <ngs-toolbar-item>Second row content</ngs-toolbar-item>\n  </ngs-toolbar-row>\n</ngs-toolbar>"
+          "source": "<ngs-toolbar>\n  <ngs-toolbar-row>\n    <ngs-toolbar-title appearance=\"large\">Multi-row Toolbar</ngs-toolbar-title>\n    <ngs-toolbar-spacer></ngs-toolbar-spacer>\n    <ngs-toolbar-item>Menu</ngs-toolbar-item>\n  </ngs-toolbar-row>\n  <ngs-toolbar-row>\n    <ngs-toolbar-item>Second row content</ngs-toolbar-item>\n  </ngs-toolbar-row>\n</ngs-toolbar>"
         },
         {
           "name": "toolbar-nav-example",
           "title": "Toolbar nav",
           "file": "projects/docs/src/app/components/toolbar/_examples/toolbar-nav-example/toolbar-nav-example.html",
-          "source": "<ngs-toolbar>\n  <ngs-toolbar-title>Nav Example</ngs-toolbar-title>\n  <ngs-toolbar-nav>\n    <ngs-toolbar-nav-link [active]=\"true\">Home</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>About</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>Contact</ngs-toolbar-nav-link>\n  </ngs-toolbar-nav>\n  <ngs-toolbar-spacer />\n  <ngs-toolbar-nav>\n    <a ngs-toolbar-nav-link [routerLink]=\"['/dashboard']\">Dashboard</a>\n  </ngs-toolbar-nav>\n</ngs-toolbar>"
+          "source": "<ngs-toolbar>\n  <ngs-toolbar-title appearance=\"large\">Nav Example</ngs-toolbar-title>\n  <ngs-toolbar-nav>\n    <ngs-toolbar-nav-link [active]=\"true\">Home</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>About</ngs-toolbar-nav-link>\n    <ngs-toolbar-nav-link>Contact</ngs-toolbar-nav-link>\n  </ngs-toolbar-nav>\n  <ngs-toolbar-spacer />\n  <ngs-toolbar-nav>\n    <a ngs-toolbar-nav-link [routerLink]=\"['/dashboard']\">Dashboard</a>\n  </ngs-toolbar-nav>\n</ngs-toolbar>"
         }
       ],
       "previewAsset": "projects/components/toolbar/preview.svg",
@@ -10342,10 +10388,12 @@
         "ToolbarRow",
         "ToolbarSpacer",
         "ToolbarSubtitle",
-        "ToolbarTitle"
+        "ToolbarTitle",
+        "ToolbarTitleAppearance"
       ],
       "inputs": [
         "active",
+        "appearance",
         "hidden"
       ],
       "outputs": [],
@@ -10360,6 +10408,7 @@
         "--ngs-nav-item-hover-color",
         "--ngs-nav-item-padding",
         "--ngs-nav-item-radius",
+        "--ngs-toolbar-gap",
         "--ngs-toolbar-nav-link-active-color",
         "--ngs-toolbar-nav-link-color",
         "--ngs-toolbar-nav-link-font-size",
@@ -10369,7 +10418,9 @@
         "--ngs-toolbar-nav-link-radius",
         "--ngs-toolbar-subtitle-color",
         "--ngs-toolbar-subtitle-font-size",
-        "--ngs-toolbar-subtitle-weight"
+        "--ngs-toolbar-subtitle-weight",
+        "--ngs-toolbar-title-font-size",
+        "--ngs-toolbar-title-font-weight"
       ],
       "example": null
     },

package/fesm2022/ngstarter-ui-components-country-select.mjs

@@ -557,7 +557,7 @@ class CountrySelect {
                 provide: FormFieldControl,
                 useExisting: forwardRef(() => CountrySelect),
             },
-        ], viewQueries: [{ propertyName: "ngsSelect", first: true, predicate: ["ngsSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["ngsCountrySelect"], ngImport: i0, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [id]=\"id + '-select'\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\"\n  [multiple]=\"multiple()\"\n  [hideCheckIcon]=\"hideCheckIcon()\"\n  [clearable]=\"clearable()\"\n  [aria-label]=\"ariaLabel()\"\n  [tabIndex]=\"tabIndex()\"\n  [aria-describedby]=\"ariaDescribedby()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountries = selectedCountryDisplays();\n    @if (selectedCountries.length === 1) {\n      @let selectedCountry = selectedCountries[0];\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"flag-icon\" aria-hidden=\"true\">{{ selectedCountry.flag }}</span>\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountry.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ selectedCountry.code }})</span>\n          }\n        </span>\n      </span>\n    } @else if (selectedCountries.length > 1) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountriesText() }}\n        </span>\n      </span>\n    }\n\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [ngModel]=\"searchTerm()\"\n             (ngModelChange)=\"onCountrySearch($event)\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of visibleCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"select-option-icon text-2xl\" aria-hidden=\"true\">{{ country.flag }}</span>\n        <span class=\"select-option-text\">\n        {{ country.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ country.code }})</span>\n          }\n      </span>\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n\n  @if (visibleCountryCount() < filteredCountries().length) {\n    <div class=\"select-loading\">\n      Loading more countries...\n    </div>\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .flag-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;font-size:22px;line-height:1}:host .select-option-content{display:flex;align-items:center;gap:var(--ngs-dropdown-item-gap);min-width:0;width:100%;height:100%;overflow:hidden;white-space:nowrap}:host .select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}:host .select-loading{padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "directive", type: SelectTrigger, selector: "ngs-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "ngsSelect", first: true, predicate: ["ngsSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["ngsCountrySelect"], ngImport: i0, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [id]=\"id + '-select'\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\"\n  [multiple]=\"multiple()\"\n  [hideCheckIcon]=\"hideCheckIcon()\"\n  [clearable]=\"clearable()\"\n  [aria-label]=\"ariaLabel()\"\n  [tabIndex]=\"tabIndex()\"\n  [aria-describedby]=\"ariaDescribedby()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountries = selectedCountryDisplays();\n    @if (selectedCountries.length === 1) {\n      @let selectedCountry = selectedCountries[0];\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"flag-icon\" aria-hidden=\"true\">{{ selectedCountry.flag }}</span>\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountry.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ selectedCountry.code }})</span>\n          }\n        </span>\n      </span>\n    } @else if (selectedCountries.length > 1) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountriesText() }}\n        </span>\n      </span>\n    }\n\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [ngModel]=\"searchTerm()\"\n             (ngModelChange)=\"onCountrySearch($event)\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of visibleCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"select-option-icon text-2xl\" aria-hidden=\"true\">{{ country.flag }}</span>\n        <span class=\"select-option-text\">\n        {{ country.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ country.code }})</span>\n          }\n      </span>\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n\n  @if (visibleCountryCount() < filteredCountries().length) {\n    <div class=\"select-loading\">\n      Loading more countries...\n    </div>\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .flag-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;font-size:22px;line-height:1}:host .select-option-content{display:flex;align-items:center;gap:var(--ngs-dropdown-item-gap);min-width:0;width:100%;height:100%;overflow:hidden;white-space:nowrap}:host .select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}:host .select-loading{padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "dataSource", "pageSize", "searchable", "searchDebounce", "minSearchLength", "loadOnOpen", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "directive", type: SelectTrigger, selector: "ngs-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountrySelect, decorators: [{
             type: Component,