@synopackageland/ui 0.16.1 → 0.16.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.16.2 (2026-10-25)
+
+- `Wizard fit`: on a page, the wizard takes the height left below it in its scroll container, so the steps, band and footer stay in view and only the step scrolls; `fit-min-height` (320) is the least it takes. `rail-min-width` (600) sets where `stepper="auto"` switches from the band to the rail.
+- A wizard held to under 560px high (`fit` in a short window, or a dialog) draws a smaller headline, hero tile, stage and spacing.
+- `ConnectionTopology` stacks below 640px (was 600) and, below 240px, drops the node boxes for an icon tile over a smaller word, so three compact cards fit side by side at 960px. Node words, captions and link words wrap to two or three lines instead of cutting, host names break after their dots, and a word still cut shows its whole text on hover.
+- `KeyValueRow stacked`: the label as a small line above the value, for narrow cards.
+
 ## 0.16.1 (2026-10-25)
 
 - Defer `Tag` truncation measurements to `requestAnimationFrame` to avoid ResizeObserver delivery loops when the tooltip changes the layout. Measurements are coalesced into one update per frame, unchanged boxes are skipped, and pending updates are cancelled on unmount. The exposed `measure()` method still applies immediately. (#57)

package/README.md

@@ -596,9 +596,12 @@ maps its own states to six link states.
   End move between lanes. `selectable: false` renders plain rows.
   `lane-footer-<id>` content sits below the lane button, so it may hold its own
   buttons and links; `node-<id>` replaces a node's content.
-- **Layout.** Below 600px of container width (or with `compact`), each lane
+- **Layout.** Below 640px of container width (or with `compact`), each lane
   stacks with its own copy of the target and the link words move to a caption
-  line. With no lanes, one idle line shows `empty-label`.
+  line. Below 240px (a card in a row of three) the nodes drop their boxes for
+  an icon tile over a smaller word. Words wrap to two lines, host names after
+  their dots; a word still cut shows its whole text on hover. With no lanes,
+  one idle line shows `empty-label`.
 - **Motion.** The keyframes `ui-flow` and `ui-pulse` stop under
   `prefers-reduced-motion`; a working link then turns solid with an arrow.
 

package/dist/components/composite/connection-topology/ConnectionTopology.vue.d.ts

@@ -3,7 +3,8 @@ import { LinkState, TopologyLane, TopologyNode } from './types';
  * Paths from several sources, each through an optional relay, to one shared
  * target. Each link shows its state with colour, a glyph and text; working
  * links flow toward the target. Every lane is a button that emits
- * `select-lane`. Below 600px of container width the lanes stack compactly.
+ * `select-lane`. Below 640px of container width the lanes stack compactly,
+ * and below 240px the nodes lose their boxes.
  */
 type __VLS_Props = {
     target: TopologyNode;

package/dist/components/composite/key-value-row/KeyValueRow.vue.d.ts

@@ -2,6 +2,8 @@ type __VLS_Props = {
     label: string;
     value?: string | number;
     labelWidth?: string;
+    /** The label on a small secondary line above the value, for a column too narrow for two (a card in a row of three). */
+    stacked?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/components/composite/wizard/Wizard.vue.d.ts

@@ -16,6 +16,13 @@ type __VLS_Props = {
     showSteps?: boolean;
     /** Draws a border, rounded corners and a shadow, for a wizard placed on a page rather than in a dialog. */
     framed?: boolean;
+    /** On a page: takes the height left below it in its scroll container, so
+     * the rail, the band and the footer stay in view and only the step scrolls. */
+    fit?: boolean;
+    /** The least height `fit` takes; in a shorter window the page scrolls instead. */
+    fitMinHeight?: number;
+    /** With `stepper="auto"`, the wizard width from which the rail shows; narrower shows the band. */
+    railMinWidth?: number;
     progressText?: (current: number, total: number) => string;
 };
 declare function toNextStep(): Promise<void>;
@@ -62,10 +69,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onFinished?: (() => any) | undefined;
 }>, {
     footer: WizardFooterConfig;
+    fit: boolean;
     cancellable: boolean;
     stepper: WizardStepper;
     showSteps: boolean;
     framed: boolean;
+    fitMinHeight: number;
+    railMinWidth: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/composables/fitHeight.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+/** The room from the element's top to the bottom of its scroll container's
+ * view (the viewport when no ancestor scrolls), less the container's bottom
+ * padding, measured with the container scrolled to the top: what a page
+ * element can take and still end above the fold. `min` keeps a short window
+ * from squeezing it; below it the page scrolls instead. Zero is unknown or
+ * off. Size changes of the container and of its content re-measure, once per
+ * frame, so a height the element takes cannot loop the observer. */
+export declare function useFitHeight(element: Readonly<Ref<HTMLElement | null | undefined>>, enabled: () => boolean, min: () => number): {
+    height: Ref<number, number>;
+    measure: () => void;
+};
+/** The element's own height, committed once per frame like `useElementWidth`. */
+export declare function useElementHeight(element: Readonly<Ref<HTMLElement | null | undefined>>): Ref<number, number>;