mn-angular-lib 1.0.167 → 1.0.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.167",
+  "version": "1.0.169",
   "peerDependencies": {
     "@angular/common": "^21.1.3",
     "@angular/core": "^21.1.3",

package/types/mn-angular-lib.d.ts

@@ -385,6 +385,7 @@ declare const mnButtonVariants: tailwind_variants.TVReturnType<{
         two_xl: string;
         three_xl: string;
         four_xl: string;
+        full: string;
     };
     shape: {
         default: string;
@@ -436,6 +437,7 @@ declare const mnButtonVariants: tailwind_variants.TVReturnType<{
         two_xl: string;
         three_xl: string;
         four_xl: string;
+        full: string;
     };
     shape: {
         default: string;
@@ -487,6 +489,7 @@ declare const mnButtonVariants: tailwind_variants.TVReturnType<{
         two_xl: string;
         three_xl: string;
         four_xl: string;
+        full: string;
     };
     shape: {
         default: string;
@@ -2848,6 +2851,8 @@ declare class MnMultiSelect implements OnInit {
     /** Layout classes for the anchored popover panel. The mobile sheet is rendered by
      *  mn-bottom-sheet instead, so it no longer needs a branch here. */
     readonly panelClasses = "fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto";
+    /** The panel's own height cap in pixels: the `max-h-60` above, restated for the placement maths. */
+    static readonly PANEL_MAX_HEIGHT_PX = 240;
     /** Layout classes for the invisible click shield rendered under the anchored panel.
      *  One step below the panel's z-index so the panel itself stays clickable, and above
      *  any modal/drawer chrome (which tops out well under 9998). */
@@ -2910,10 +2915,13 @@ declare class MnMultiSelect implements OnInit {
     isDisabled: boolean;
     searchTerm: string;
     /** Dropdown position calculated from trigger bounding rect */
+    /** Inline placement of the anchored panel; `maxHeight` only binds when the viewport is the tighter cap. */
     dropdownStyle: {
         top: string;
+        bottom: string;
         left: string;
         width: string;
+        maxHeight: string | null;
     };
     private onChange;
     private onTouched;
@@ -2993,7 +3001,10 @@ declare class MnMultiSelect implements OnInit {
     private lockBodyScroll;
     /** Restores the pre-lock `overflow`. Idempotent. */
     private unlockBodyScroll;
-    /** Calculates the fixed position for the dropdown based on the trigger element */
+    /**
+     * Calculates the fixed position for the dropdown based on the trigger element: below it
+     * while the viewport has room, above it otherwise, never past the viewport's edge.
+     */
     private updateDropdownPosition;
     /**
      * Starts the open-only watchers: an `IntersectionObserver` on the trigger (closes the
@@ -3419,9 +3430,12 @@ declare class MnDropdown implements OnInit {
      *  is {@link MnDropdownProps.searchable}. */
     searchTerm: string;
     /** Popover position computed from the trigger's bounding rect. */
+    /** Inline placement of the anchored panel; `maxHeight` only binds when the viewport is the tighter cap. */
     dropdownStyle: {
         top: string;
+        bottom: string;
         left: string;
+        maxHeight: string | null;
     };
     /**
      * The popover panel, relocated to `document.body` on appearance (see mn-multi-select's
@@ -4035,6 +4049,8 @@ declare class MnSelect implements OnInit {
     /** Layout classes for the anchored popover panel. The mobile sheet is rendered by
      *  mn-bottom-sheet instead, so it no longer needs a branch here. */
     readonly panelClasses = "fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto";
+    /** The panel's own height cap in pixels: the `max-h-60` above, restated for the placement maths. */
+    static readonly PANEL_MAX_HEIGHT_PX = 240;
     /** Layout classes for the invisible click shield rendered under the anchored panel.
      *  One step below the panel's z-index so the panel itself stays clickable, and above
      *  any modal/drawer chrome (which tops out well under 9998). */
@@ -4077,10 +4093,13 @@ declare class MnSelect implements OnInit {
      */
     private scrollCapture;
     /** Dropdown position calculated from the trigger's bounding rect. */
+    /** Inline placement of the anchored panel; `maxHeight` only binds when the viewport is the tighter cap. */
     dropdownStyle: {
         top: string;
+        bottom: string;
         left: string;
         width: string;
+        maxHeight: string | null;
     };
     private onChange;
     private onTouched;
@@ -4202,7 +4221,10 @@ declare class MnSelect implements OnInit {
     private lockBodyScroll;
     /** Restores the pre-lock `overflow`. Idempotent. */
     private unlockBodyScroll;
-    /** Calculates the fixed position for the dropdown based on the trigger element. */
+    /**
+     * Calculates the fixed position for the dropdown based on the trigger element: below it
+     * while the viewport has room, above it otherwise, never past the viewport's edge.
+     */
     private updateDropdownPosition;
     /**
      * Starts the open-only watchers: an `IntersectionObserver` on the trigger (closes the panel
@@ -9041,62 +9063,49 @@ type MnBreadcrumbsVariants = VariantProps<typeof mnBreadcrumbsVariants>;
  * row of loose buttons: the segments share one bordered surface, so they read as
  * one control with one answer instead of several independent actions. Theme
  * tokens only, so it holds up in both light and dark.
+ *
+ * Each segment is an `mnButton`, which owns its own size, colour, radius and
+ * disabled look; the `segment` slot adds only what the button does not know
+ * about — how it sits inside the track.
  */
 declare const mnSegmentedVariants: tailwind_variants.TVReturnType<{
     /**
-     * Corner rounding of the track, with the segments rounded one step tighter so
-     * a filled segment nests inside the track's own corner instead of poking out
-     * of it. Token names match mn-button's; `full` makes a pill, where track and
-     * segment share the same fully-rounded ends.
+     * Corner rounding of the track. The segments are rounded one step tighter
+     * (see `SEGMENT_RADIUS` on the component) so a filled segment nests inside
+     * the track's own corner instead of poking out of it. Token names match
+     * mn-button's; `full` makes a pill, where track and segment share the same
+     * fully-rounded ends.
      */
     borderRadius: {
         none: {
             root: string;
-            segment: string;
         };
         xs: {
             root: string;
-            segment: string;
         };
         sm: {
             root: string;
-            segment: string;
         };
         md: {
             root: string;
-            segment: string;
         };
         lg: {
             root: string;
-            segment: string;
         };
         xl: {
             root: string;
-            segment: string;
         };
         two_xl: {
             root: string;
-            segment: string;
         };
         three_xl: {
             root: string;
-            segment: string;
         };
         four_xl: {
             root: string;
-            segment: string;
         };
         full: {
             root: string;
-            segment: string;
-        };
-    };
-    size: {
-        sm: {
-            segment: string;
-        };
-        md: {
-            segment: string;
         };
     };
     /**
@@ -9115,14 +9124,13 @@ declare const mnSegmentedVariants: tailwind_variants.TVReturnType<{
         false: {};
     };
     /**
-     * The picked segment. Filled rather than merely tinted: the control is often
-     * the only thing on its row, so the answer has to be readable at a glance
-     * without comparing two subtle shades.
+     * Whether the segment is the picked one. The colours come from the button
+     * itself (a filled primary button when active, a ghost one otherwise); this
+     * only keeps an inactive segment's box the same size as an active one, whose
+     * fill variant carries a real border.
      */
     active: {
-        true: {
-            segment: string;
-        };
+        true: {};
         false: {
             segment: string;
         };
@@ -9132,59 +9140,42 @@ declare const mnSegmentedVariants: tailwind_variants.TVReturnType<{
     segment: string;
 }, undefined, {
     /**
-     * Corner rounding of the track, with the segments rounded one step tighter so
-     * a filled segment nests inside the track's own corner instead of poking out
-     * of it. Token names match mn-button's; `full` makes a pill, where track and
-     * segment share the same fully-rounded ends.
+     * Corner rounding of the track. The segments are rounded one step tighter
+     * (see `SEGMENT_RADIUS` on the component) so a filled segment nests inside
+     * the track's own corner instead of poking out of it. Token names match
+     * mn-button's; `full` makes a pill, where track and segment share the same
+     * fully-rounded ends.
      */
     borderRadius: {
         none: {
             root: string;
-            segment: string;
         };
         xs: {
             root: string;
-            segment: string;
         };
         sm: {
             root: string;
-            segment: string;
         };
         md: {
             root: string;
-            segment: string;
         };
         lg: {
             root: string;
-            segment: string;
         };
         xl: {
             root: string;
-            segment: string;
         };
         two_xl: {
             root: string;
-            segment: string;
         };
         three_xl: {
             root: string;
-            segment: string;
         };
         four_xl: {
             root: string;
-            segment: string;
         };
         full: {
             root: string;
-            segment: string;
-        };
-    };
-    size: {
-        sm: {
-            segment: string;
-        };
-        md: {
-            segment: string;
         };
     };
     /**
@@ -9203,14 +9194,13 @@ declare const mnSegmentedVariants: tailwind_variants.TVReturnType<{
         false: {};
     };
     /**
-     * The picked segment. Filled rather than merely tinted: the control is often
-     * the only thing on its row, so the answer has to be readable at a glance
-     * without comparing two subtle shades.
+     * Whether the segment is the picked one. The colours come from the button
+     * itself (a filled primary button when active, a ghost one otherwise); this
+     * only keeps an inactive segment's box the same size as an active one, whose
+     * fill variant carries a real border.
      */
     active: {
-        true: {
-            segment: string;
-        };
+        true: {};
         false: {
             segment: string;
         };
@@ -9220,59 +9210,42 @@ declare const mnSegmentedVariants: tailwind_variants.TVReturnType<{
     segment: string;
 }, tailwind_variants.TVReturnType<{
     /**
-     * Corner rounding of the track, with the segments rounded one step tighter so
-     * a filled segment nests inside the track's own corner instead of poking out
-     * of it. Token names match mn-button's; `full` makes a pill, where track and
-     * segment share the same fully-rounded ends.
+     * Corner rounding of the track. The segments are rounded one step tighter
+     * (see `SEGMENT_RADIUS` on the component) so a filled segment nests inside
+     * the track's own corner instead of poking out of it. Token names match
+     * mn-button's; `full` makes a pill, where track and segment share the same
+     * fully-rounded ends.
      */
     borderRadius: {
         none: {
             root: string;
-            segment: string;
         };
         xs: {
             root: string;
-            segment: string;
         };
         sm: {
             root: string;
-            segment: string;
         };
         md: {
             root: string;
-            segment: string;
         };
         lg: {
             root: string;
-            segment: string;
         };
         xl: {
             root: string;
-            segment: string;
         };
         two_xl: {
             root: string;
-            segment: string;
         };
         three_xl: {
             root: string;
-            segment: string;
         };
         four_xl: {
             root: string;
-            segment: string;
         };
         full: {
             root: string;
-            segment: string;
-        };
-    };
-    size: {
-        sm: {
-            segment: string;
-        };
-        md: {
-            segment: string;
         };
     };
     /**
@@ -9291,14 +9264,13 @@ declare const mnSegmentedVariants: tailwind_variants.TVReturnType<{
         false: {};
     };
     /**
-     * The picked segment. Filled rather than merely tinted: the control is often
-     * the only thing on its row, so the answer has to be readable at a glance
-     * without comparing two subtle shades.
+     * Whether the segment is the picked one. The colours come from the button
+     * itself (a filled primary button when active, a ghost one otherwise); this
+     * only keeps an inactive segment's box the same size as an active one, whose
+     * fill variant carries a real border.
      */
     active: {
-        true: {
-            segment: string;
-        };
+        true: {};
         false: {
             segment: string;
         };
@@ -9372,6 +9344,10 @@ type MnSegmentedDataSource = {
  * URL, so it can sit on a page that already has a tab bar without the two
  * fighting over the query string.
  *
+ * Each segment is an `mnButton` — a filled primary one when active, a ghost one
+ * otherwise — so the control inherits the button's sizes, colours and disabled
+ * look rather than maintaining a parallel set.
+ *
  * For switching between panes of a page, reach for `mn-tab`; this is for
  * switching how one pane is rendered.
  */
@@ -9394,29 +9370,25 @@ declare class MnSegmented {
     valueChange: EventEmitter<string>;
     /** Resolves this control's own accessible names against the app's bundle. */
     private readonly lang;
-    /** Resolved slot classes for the current size and layout. */
+    /** Resolved slot classes for the current rounding and layout. */
     get styles(): {
         root: (slotProps?: ({
-            size?: "sm" | "md" | undefined;
             borderRadius?: "sm" | "md" | "lg" | "none" | "xs" | "xl" | "two_xl" | "three_xl" | "four_xl" | "full" | undefined;
             active?: boolean | undefined;
             justified?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
         segment: (slotProps?: ({
-            size?: "sm" | "md" | undefined;
             borderRadius?: "sm" | "md" | "lg" | "none" | "xs" | "xl" | "two_xl" | "three_xl" | "four_xl" | "full" | undefined;
             active?: boolean | undefined;
             justified?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
     } & {
         root: (slotProps?: ({
-            size?: "sm" | "md" | undefined;
             borderRadius?: "sm" | "md" | "lg" | "none" | "xs" | "xl" | "two_xl" | "three_xl" | "four_xl" | "full" | undefined;
             active?: boolean | undefined;
             justified?: boolean | undefined;
         } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
         segment: (slotProps?: ({
-            size?: "sm" | "md" | undefined;
             borderRadius?: "sm" | "md" | "lg" | "none" | "xs" | "xl" | "two_xl" | "three_xl" | "four_xl" | "full" | undefined;
             active?: boolean | undefined;
             justified?: boolean | undefined;
@@ -9432,10 +9404,20 @@ declare class MnSegmented {
      */
     isActive(item: MnSegmentedItem): boolean;
     /**
-     * Classes for one segment, which differ only in whether it is the active one.
+     * Layout classes for one segment — how it sits in the track. Its size, colour,
+     * radius and disabled look come from the button itself; see
+     * {@link segmentButton}.
      * @param item - The segment to style.
      */
     segmentClass(item: MnSegmentedItem): string;
+    /**
+     * The `mnButton` configuration of one segment: a filled primary button when it
+     * is the active choice, a ghost button otherwise, at the control's size and one
+     * radius step inside the track. The active segment has no hover — re-picking it
+     * does nothing, so nothing should invite the click.
+     * @param item - The segment to configure.
+     */
+    segmentButton(item: MnSegmentedItem): Partial<MnButtonTypes>;
     /**
      * Accessible name for an icon-only segment, or null when the segment shows a
      * label — that label already names it, and a second name would only compete.