@underlayerdev/ui 0.14.10 → 0.15.0

package/package.json

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

package/types/underlayerdev-ui.d.ts

@@ -1126,7 +1126,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 +1164,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 +1238,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 +1254,11 @@ export declare class MenuItemsComponent {
       "required": false;
       "isSignal": true;
     };
+    "templateItems": {
+      "alias": "templateItems";
+      "required": false;
+      "isSignal": true;
+    };
     "theme": {
       "alias": "theme";
       "required": false;
@@ -2180,6 +2239,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 +2315,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