@underlayerdev/ui 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",

package/styles/foundations.css

@@ -345,7 +345,7 @@ a:active {
   }
 }
 @media (min-width: 1600px) {
-  .ul-container-gallery.content {
+  .ul-container-gallery > * {
     max-width: 2176px;
   }
 }
@@ -368,7 +368,7 @@ a:active {
     padding-left: 192px;
     padding-right: 192px;
   }
-  .ul-container-product.content {
+  .ul-container-product > * {
     max-width: 1920px;
   }
 }
@@ -377,17 +377,23 @@ a:active {
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.ul-container-form > * {
+  max-width: 720px;
+}
+@media (min-width: 768px) {
+  .ul-container-form {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
 }
 @media (min-width: 1024px) {
   .ul-container-form {
     padding-left: 64px;
     padding-right: 64px;
   }
-  .ul-container-form.content {
-    max-width: 960px;
-  }
 }
 @media (min-width: 1600px) {
   .ul-container-form {

package/types/underlayerdev-ui.d.ts

@@ -113,6 +113,12 @@ export declare class AreaCodeComponent {
   }, {}, never, never, true, never>;
 }
 type UiSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Button sizes: the shared scale plus 'xs', for a control that has to fit in a tight
+ * spot (a corner of a thumbnail). Like AvatarSize, it is kept out of UiSize so the
+ * other controls that share that scale don't gain a size they have no design for.
+ */
+type ButtonSize = UiSize | 'xs';
 type UiCheckboxSize = 'default' | 'sm' | 'lg';
 type UiTheme = 'fill-purple' | 'fill-white' | 'fill-yellow' | 'fill-red' | 'fill-green' | 'transparent-purple' | 'transparent-white' | 'transparent-red' | 'transparent-black' | 'ghost-purple' | 'ghost-white' | 'ghost-red' | 'ghost-green' | 'outline-white' | 'outline-purple' | 'outline-red' | 'outline-green';
 type IconSize$1 = '5' | '6' | '7' | '8' | '16';
@@ -348,7 +354,7 @@ export declare class BreadcrumbComponent {
  */
 export declare class ButtonComponent {
   /** The size of the button */
-  size: import("@angular/core").InputSignal<UiSize>;
+  size: import("@angular/core").InputSignal<ButtonSize>;
   /** The visual theme of the button */
   theme: import("@angular/core").InputSignal<UiTheme>;
   /** Whether the button only contains an icon */
@@ -2399,6 +2405,101 @@ export declare class MenuTriggerComponent {
     "closed": "closed";
   }, never, never, true, never>;
 }
+/**
+ * Footer of any paginated list: asks for the next page when it scrolls near the viewport,
+ * and shows the matching indicator (loading, load more button, retry, end of list).
+ * It knows nothing about what is listed and never fetches: bind `hasMore`/`loading`/`error`
+ * to your store and react to `loadMore` and `retry`.
+ *
+ * On screens below the `sm` breakpoint it loads pages automatically for as long as there are
+ * any. From `sm` up it does so for `autoLoadPages` pages, then waits for the button so the
+ * page footer stays reachable.
+ *
+ * @example
+ * <ul-load-more [hasMore]="hasMore()" [loading]="loading()" [error]="failed()"
+ *   (loadMore)="loadMore()" (retry)="retry()">
+ *   Load more
+ *   <span ulLoadMoreError>Could not load more.</span>
+ *   <span ulLoadMoreEnd>You have seen everything.</span>
+ * </ul-load-more>
+ */
+export declare class LoadMoreComponent {
+  /** Whether another page exists */
+  readonly hasMore: import("@angular/core").InputSignal<boolean>;
+  /** Whether a page is being fetched */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Whether the last fetch failed; shows the retry action and stops automatic loading */
+  readonly error: import("@angular/core").InputSignal<boolean>;
+  /** Pages loaded automatically from `sm` up before the button takes over */
+  readonly autoLoadPages: import("@angular/core").InputSignal<number>;
+  /** Show the end-of-list content once `hasMore` is false. Turn off while the list is empty */
+  readonly showEnd: import("@angular/core").InputSignal<boolean>;
+  /** Distance from the viewport at which the next page is requested early */
+  readonly rootMargin: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the loading indicator */
+  readonly loadingLabel: import("@angular/core").InputSignal<string>;
+  /** Change it when the list is replaced (new filters), to count automatic pages from zero */
+  readonly resetKey: import("@angular/core").InputSignal<unknown>;
+  readonly loadMore: import("@angular/core").OutputEmitterRef<void>;
+  readonly retry: import("@angular/core").OutputEmitterRef<void>;
+  private readonly sentinel;
+  private readonly isBrowser;
+  private readonly destroyRef;
+  private readonly autoLoaded;
+  private readonly isWide;
+  protected readonly isAuto: import("@angular/core").Signal<boolean>;
+  protected readonly showButton: import("@angular/core").Signal<boolean>;
+  protected readonly showEndContent: import("@angular/core").Signal<boolean>;
+  private readonly canObserve;
+  constructor();
+  protected onButtonClick(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<LoadMoreComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LoadMoreComponent, "ul-load-more", never, {
+    "hasMore": {
+      "alias": "hasMore";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoLoadPages": {
+      "alias": "autoLoadPages";
+      "required": false;
+      "isSignal": true;
+    };
+    "showEnd": {
+      "alias": "showEnd";
+      "required": false;
+      "isSignal": true;
+    };
+    "rootMargin": {
+      "alias": "rootMargin";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingLabel": {
+      "alias": "loadingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "resetKey": {
+      "alias": "resetKey";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "loadMore": "loadMore";
+    "retry": "retry";
+  }, never, ["[ulLoadMoreError]", "[ulLoadMoreEnd]", "[ulLoadMoreRetry]", "*"], true, never>;
+}
 export type ModalVariant = 'default' | 'success' | 'error' | 'custom' | 'bottom-sheet' | 'confirmation';
 export declare class ModalComponent {
   /** Whether the modal is open. Supports two-way binding with [(open)]. */
@@ -3078,7 +3179,7 @@ export declare class StepperComponent {
   }, {}, never, never, true, never>;
 }
 export type ToastKind = 'info' | 'success' | 'warning' | 'error';
-export declare const toastIcon: (kind: ToastKind) => "info" | "alert" | "check_circle" | "cross_circle";
+export declare const toastIcon: (kind: ToastKind) => "alert" | "check_circle" | "cross_circle" | "info";
 export interface ToastConfig {
   readonly id: string;
   readonly message: string;