@underlayerdev/ui 0.14.10 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.14.10",
+  "version": "0.16.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 */
@@ -1126,7 +1132,7 @@ export declare class DockItemComponent {
     };
   }, {}, ["contentSlot"], ["[ul-dock-item-content]"], true, never>;
 }
-export type ListItemTheme = 'ghost-white' | 'transparent-white' | 'outline-white' | 'outline-purple';
+export type ListItemTheme = 'ghost-white' | 'ghost-red' | 'transparent-white' | 'outline-white' | 'outline-purple';
 export declare class ListItemComponent {
   checkbox: import("@angular/core").Signal<CheckboxComponent | undefined>;
   theme: import("@angular/core").InputSignal<ListItemTheme>;
@@ -1164,6 +1170,58 @@ export declare class ListItemComponent {
     };
   }, {}, ["checkbox"], ["[ul-list-item-before-label]", "[ul-list-item-label]", "[ul-list-item-after-label]"], true, never>;
 }
+/**
+ * One action in a `ul-menu`, written in the template of the component that
+ * owns the menu, so each item can choose its own icon, text and theme:
+ *
+ * @example
+ * ```html
+ * <ul-menu triggerIconOnly="more_options">
+ *   <ul-menu-item (triggered)="reconnect()">
+ *     <ul-icon ul-menu-item-icon icon="refresh_cw" size="5" />
+ *     Reconnect
+ *   </ul-menu-item>
+ *   <ul-menu-item theme="ghost-red" (triggered)="disconnect()">
+ *     <ul-icon ul-menu-item-icon icon="link_unlink" size="5" />
+ *     Disconnect
+ *   </ul-menu-item>
+ * </ul-menu>
+ * ```
+ *
+ * The menu closes when an item is triggered. For a list of plain label+icon
+ * actions, `ul-menu`'s `items` input is shorter; this is for items that need
+ * more than that, such as a different theme.
+ *
+ * The item only declares its content. The menu draws the row itself, inside
+ * its own panel, so keyboard navigation and closing work as they do for
+ * `items`; this element renders nothing where it is written.
+ */
+export declare class MenuItemComponent {
+  /** `ghost-red` marks an action that removes or ends something. */
+  theme: import("@angular/core").InputSignal<ListItemTheme>;
+  disabled: import("@angular/core").InputSignal<boolean>;
+  /** Emitted when the item is chosen, by click or keyboard. */
+  triggered: import("@angular/core").OutputEmitterRef<void>;
+  /** The icon the consumer put in the `ul-menu-item-icon` slot, for the menu to draw. */
+  readonly iconTemplate: import("@angular/core").Signal<TemplateRef<unknown>>;
+  /** The rest of the consumer's content, for the menu to draw as the label. */
+  readonly labelTemplate: import("@angular/core").Signal<TemplateRef<unknown>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "ul-menu-item", never, {
+    "theme": {
+      "alias": "theme";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "triggered": "triggered";
+  }, never, ["[ul-menu-item-icon]", "*"], true, never>;
+}
 /** A single row in a `ul-menu` or `ul-dropdown` menu panel. */
 export type MenuItem = {
   /** Display text for the item. */
@@ -1186,6 +1244,8 @@ export type MenuItem = {
  */
 export declare class MenuItemsComponent {
   items: import("@angular/core").InputSignal<MenuItem[]>;
+  /** Items written in the consumer's template (`ul-menu-item`), drawn before `items`. */
+  templateItems: import("@angular/core").InputSignal<readonly MenuItemComponent[]>;
   theme: import("@angular/core").InputSignal<ListItemTheme>;
   /**
    * Index of the item to render as checked/selected.
@@ -1200,6 +1260,11 @@ export declare class MenuItemsComponent {
       "required": false;
       "isSignal": true;
     };
+    "templateItems": {
+      "alias": "templateItems";
+      "required": false;
+      "isSignal": true;
+    };
     "theme": {
       "alias": "theme";
       "required": false;
@@ -2180,6 +2245,8 @@ export declare class LongPressDirective {
 export declare class MenuComponent {
   /** Visual theme, passed through to the trigger and to any items rendered via `items`. */
   theme: import("@angular/core").InputSignal<ListItemTheme>;
+  /** The `ul-menu-item`s written inside this menu in the consumer's template. */
+  readonly templateItems: import("@angular/core").Signal<readonly MenuItemComponent[]>;
   /** Simple label+icon action items. Optional — content projection covers everything else. */
   items: import("@angular/core").InputSignal<MenuItem[]>;
   disabled: import("@angular/core").InputSignal<boolean>;
@@ -2254,7 +2321,7 @@ export declare class MenuComponent {
   }, {
     "itemSelected": "itemSelected";
     "closed": "closed";
-  }, never, ["*"], true, never>;
+  }, ["templateItems"], ["*"], true, never>;
 }
 /**
  * The trigger button shared by `ul-dropdown` and `ul-menu`: either an