@synopackageland/ui 0.17.1 → 0.17.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.17.3 (2026-10-27)
+
+Additive only: existing props, defaults and DOM stay as they were.
+
+- Add `RefreshBar`: a 2px moving bar along the top of content that is being refreshed in the background, while the content stays visible and usable. It appears only after `delay` (300ms) and stays at least `minDuration` (400ms), so a quick read does not flash it, and takes no layout space (give the host `position: relative`). `stale` shows a "Could not refresh. Showing previous data" hint with a Retry button (`@retry`, disabled while `busy`) until you clear it; `stale-label` and `retry-label` replace the words, an empty `retry-label` hides the button. With reduced motion the bar is a still line. (#65)
+- New string in all nine built-in languages: "Could not refresh. Showing previous data".
+- The `DatePicker` calendar is named by the field's `aria-label`, or "Select date" in the UI language, instead of Reka's English "Event Date". (#66)
+- A dense `ConnectionTopology` lane that does not fit keeps its words at 12px (`--ui-font-size-sm`), DSM's smallest text tier, instead of shrinking them to 11px; words that still do not fit end with an ellipsis and a tooltip as before.
+
+## 0.17.2 (2026-10-26)
+
+- A dense `ConnectionTopology` (a compact lane under 240px, such as a card in a row of three) keeps every node word on one line: a lane that does not fit takes a smaller word, then ends the longest words with an ellipsis and a tooltip, instead of wrapping them onto two lines. Its two links share the room between the nodes equally, at least 12px each (8px when the words are cut).
+
 ## 0.17.1 (2026-10-26)
 
 - `WizardDialog` is sized like DSM's wizard windows: 75% of the app's width (560px to 860px) and its height less 48px (600px at most), so the app shows around it; it was DSM's widest dialog (860px) and 600px high, nearly the whole of a 960x600 window. `width`, `height` and `size` still set your own.

package/README.md

@@ -676,6 +676,58 @@ phone; use `DataGrid` for anything a user searches or arranges.
 
 `Spinner` is the DSM ring (`size` is the box in px, default 24). `LoadingMask` wraps content and covers it with a white 60% mask and a centred message box while `loading` (`delay` in ms holds the mask back so a quick load never flashes it; the region is `aria-busy` at once, so disable the actions it gates yourself); `LoadingArea` fills its container (give the parent a height) and centres the indicator, for whole-page or whole-panel waits. `Button loading` shows the 16px ring inline. Do not place a bare `Spinner` in a block container and expect it to be centred: use `LoadingArea`.
 
+### Background refresh
+
+`RefreshBar` overlays a 2px indeterminate bar at the top of existing content.
+It waits 300ms before appearing and stays at least 400ms from its appearance,
+so fast reads do not flash. Content remains visible and usable. The bar and
+optional failure hint are absolutely positioned and take no layout space.
+Give the host `position: relative` and set its `aria-busy` from the actual
+request state, independently of the visual delay:
+
+```vue
+<script setup lang="ts">
+import { RefreshBar } from '@synopackageland/ui'
+defineProps<{ refreshing: boolean; stale: string }>()
+const emit = defineEmits<{ retry: [] }>()
+</script>
+
+<template>
+  <section class="results" :aria-busy="refreshing">
+    <RefreshBar :busy="refreshing" :stale="stale" @retry="emit('retry')" />
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.results { position: relative; }
+</style>
+```
+
+| Prop / event | Default | Meaning |
+| --- | --- | --- |
+| `busy` | `false` | A background request is pending |
+| `delay` | `300` | Milliseconds before showing the bar; `0` shows immediately |
+| `minDuration` | `400` | Minimum visible time in milliseconds; `0` hides immediately when idle |
+| `stale` | `''` | Failure detail for the hint's title; empty hides the hint |
+| `staleLabel` | Localized “Could not refresh. Showing previous data” | Visible failure message |
+| `retryLabel` | Localized “Retry” | Retry action label; empty hides the action |
+| `@retry` | — | Requests another read; has no payload |
+
+The hint stays until the caller clears `stale`. Retry is disabled while `busy`;
+the caller owns the request and its result. Explicit labels are preserved,
+including empty strings; defaults follow the provider locale. A refresh that
+starts during the minimum stay keeps the same bar. Timing prop changes apply
+against elapsed time in the current interval; negative times count as zero.
+Reduced motion shows a static full-width line. The bar is decorative and the
+hint creates no live region; provide any required accessible error detail in
+your content. Only the failure hint accepts pointer events. A scrollable host
+scrolls the overlay with its content; place it in a stationary relative wrapper
+to keep feedback at the viewport's edge.
+
+See **Primitives / RefreshBar** in Histoire for interactive, continuous and
+failure examples.
+
 ### Toolbar
 
 `SplitButton` (button + menu arrow) and `SearchField variant="filter"` (the DSM funnel filter box) join `Button`, whose default look is the flat grey DSM toolbar button.

package/dist/components/primitives/refresh-bar/RefreshBar.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    busy?: boolean;
+    /** Failure detail shown in the hint's title. Empty hides the hint. */
+    stale?: string;
+    /** Milliseconds before a pending refresh is shown. */
+    delay?: number;
+    /** Milliseconds a shown bar stays visible, measured from its appearance. */
+    minDuration?: number;
+    staleLabel?: string;
+    /** An empty label hides the retry action. */
+    retryLabel?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {
+    busy: boolean;
+    delay: number;
+    stale: string;
+    minDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/i18n/text.d.ts

@@ -105,6 +105,7 @@ export declare const englishUiText: {
     readonly "Beta version {version} is available.": "Beta version {version} is available.";
     readonly "Could not check for updates.": "Could not check for updates.";
     readonly "You have the latest version.": "You have the latest version.";
+    readonly "Could not refresh. Showing previous data": "Could not refresh. Showing previous data";
     readonly Retry: "Retry";
     readonly "Release notes": "Release notes";
     readonly "Terms of Service": "Terms of Service";

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { default as LoadingMask } from './components/primitives/loading/LoadingM
 export { default as LoadingArea } from './components/primitives/loading/LoadingArea.vue';
 export { default as LoadingIndicator } from './components/primitives/loading/LoadingIndicator.vue';
 export { default as Progress } from './components/primitives/progress/Progress.vue';
+export { default as RefreshBar } from './components/primitives/refresh-bar/RefreshBar.vue';
 export { default as SizeBar } from './components/primitives/size-bar/SizeBar.vue';
 export { default as Skeleton } from './components/primitives/skeleton/Skeleton.vue';
 export { default as SectionSkeleton } from './components/primitives/skeleton/SectionSkeleton.vue';