@synopackageland/ui 0.11.3 → 0.11.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.11.4 (2026-10-17)
+
+- Fixed: five `SectionTabs` in a 390 px dialog were cut off, with no sign of the hidden tabs and no way to reach them with a mouse wheel. `SectionTabs` and `Tabs` now fade the side of the strip that hides tabs (`data-overflow-start`, `data-overflow-end`), scroll sideways on a vertical mouse wheel until the strip ends (then the page scrolls), and scroll the selected tab into view, clear of the fade, when it is selected and when the strip resizes. In `SectionTabs`, the arrow keys, Home and End move focus between enabled tabs.
+- Fixed: a compact `FilePicker` showed its raw `accept` (`.yml,.yaml`) as the hint. It now reads `File types: YML, YAML`; `image/*`, `video/*` and `audio/*` read as `Images`, `Videos`, `Audio`. New text keys `acceptedTypes`, `images`, `videos`, `audio` (nine locales).
+- Fixed: a `FilePicker` without `multiple` said "Choose files" and "Drop files here". It now words its button and drop zone for one file (`Choose file`, `Drop a file here`, `Datei auswählen`…); `multiple` and `directory` keep the plural. New text keys `chooseFile`, `titleOne`, `descriptionOne` (nine locales).
+- Fixed: in a `MultipleSelect` (and `Combobox`, `SuperboxSelect`) about 214 px wide, wrapped tags pushed the arrow onto a row of its own. Only the tags and the input wrap now; clear and the arrow stay on the right, centred on the first row. `displayLimit` still collapses extra tags into `+N`.
+- Fixed: Vue's "Invalid prop: type check failed for prop "ariaHidden"" warning when `TreeView` (or any parent) writes `aria-hidden="true"` on an icon that renders `FileTypeIcon`: `Icon`'s `ariaHidden` also takes `'true'` and `'false'`.
+- New browser check `pnpm check:narrow` (390/800/1280 px, en and zh-TW).
+- Visible changes for apps: no code changes needed. Download Hub can go back to `SectionTabs` for the source kind in its 390 px dialog instead of a row of buttons. The SDK range `>=0.10.1 <0.12.0` accepts this version.
+
+繁中摘要：修正 `SectionTabs` 在 390px Dialog 內放 5 個分頁被裁切、看不出還有分頁、滑鼠滾輪也捲不到的問題：`SectionTabs` 與 `Tabs` 在藏有分頁的一側淡出（`data-overflow-start`／`data-overflow-end`），垂直滾輪會橫向捲動分頁列（到底後交還頁面捲動），選中的分頁在切換與分頁列尺寸改變時會捲進可視範圍且不被淡出遮住；`SectionTabs` 可用方向鍵、Home、End 在分頁間移動焦點。compact `FilePicker` 不再把 `accept` 原字串（`.yml,.yaml`）當提示，改為「檔案類型：YML, YAML」，`image/*`、`video/*`、`audio/*` 顯示為「圖片／影片／音訊」（新 text key，九語系）。未設 `multiple` 的 `FilePicker` 改用單數文字（「選擇檔案」、"Choose file"、"Drop a file here" 等，九語系；`multiple` 與 `directory` 維持複數）。`MultipleSelect`（以及 `Combobox`、`SuperboxSelect`）約 214px 寬時 tag 換行不再把下拉箭頭擠到獨立一行：只有 tag 與輸入框換行，清除鈕與箭頭固定在右側、與第一行垂直置中；`displayLimit` 的「+N」收合不變。修正 `TreeView` 等對渲染 `FileTypeIcon` 的圖示寫 `aria-hidden="true"` 時出現的 `ariaHidden` prop 型別警告（`Icon` 的 `ariaHidden` 也接受字串 `'true'`／`'false'`）。新增瀏覽器檢查 `pnpm check:narrow`。App 程式不必改；Download Hub 可在 390px Dialog 改回用 `SectionTabs` 選來源種類。SDK 範圍 `>=0.10.1 <0.12.0` 接受此版。
+
 ## 0.11.3 (2026-10-17)
 
 - Fixed: on an iPhone a Portal/standalone app opened with the desktop layout (a 200 px sidebar, the page cut off on the right). DSM sizes its Portal window to the ~980 px page before the app sets a device-width viewport and refits it only on a window resize, which iOS Safari does not fire for a viewport change. `ensureDeviceViewport()` now fires one `resize` on the next frame after it changes the viewport (and after it restores it), so the window narrows to the phone and the app reaches mobile mode.

package/README.md

@@ -430,9 +430,12 @@ DSM-style application building blocks:
 `Tabs` and `SectionTabs` move a raised selection notch in 120ms. Selected labels
 are blue; main labels are bold 14px and section labels bold 13px. `Tabs` fades its
 new panel in over 160ms, with immediate selection and keyboard response.
-A strip narrower than its tabs keeps one row and scrolls sideways (trackpad,
-touch, Shift+wheel or keyboard focus) with no visible scrollbar; it never
-scrolls vertically. In a grid or flex parent, give the strip's track or item
+A strip narrower than its tabs keeps one row and scrolls sideways (mouse
+wheel, trackpad, touch or keyboard) with no visible scrollbar; it never
+scrolls vertically. A side that hides tabs fades out (`data-overflow-start`,
+`data-overflow-end` on the strip), and the selected tab is scrolled into view
+when it changes or the strip resizes. In `SectionTabs`, the arrow keys, Home
+and End move focus between tabs; Enter or Space selects one. In a grid or flex parent, give the strip's track or item
 `min-width: 0` (`minmax(0, 1fr)`) so it can be narrower than its tabs.
 `SectionTabs` can also render content using named `panel-${value}` slots:
 
@@ -787,10 +790,16 @@ fails there. `PathDisplay` and `CopyCutField` use it.
 
 FilePicker retains browser `File[]` semantics. Built-in `locale` values are
 `en`, `zh-TW`, `zh-CN`, `ja`, `ko`, `de`, `fr`, `es`, `it`; an explicit picker
-locale overrides ConfigProvider. Its `text` accepts partial overrides of
-`title`, `description`, `chooseFiles`, `chooseFolder`, `maxSize`, `maxFiles`,
-`remove`, `typeRejected`, `sizeRejected`, `countRejected`, `duplicateRejected`.
-The messages use `{name}`, `{size}` and `{count}` placeholders. Existing
+locale overrides ConfigProvider. Without `multiple` it words the button and
+drop zone for one file (`Choose file`, `Drop a file here`). The hint under it
+names the `accept` types rather than repeating the attribute:
+`accept=".yml,.yaml"` reads `File types: YML, YAML`, and `image/*`, `video/*`
+and `audio/*` read as `Images`, `Videos`, `Audio`. Its `text` accepts
+partial overrides of `title`, `description`, `chooseFiles`, `chooseFolder`,
+`titleOne`, `descriptionOne`, `chooseFile`, `acceptedTypes`, `images`,
+`videos`, `audio`, `maxSize`, `maxFiles`, `remove`,
+`typeRejected`, `sizeRejected`, `countRejected`, `duplicateRejected`.
+The messages use `{name}`, `{size}`, `{count}` and `{types}` placeholders. Existing
 `title`/`description` props still win. Other controls retain their exposed text
 props and partial text objects; built-in text throughout the library now follows
 Provider locale. Explicit strings, including `''`, win over built-in translations.

package/dist/components/primitives/icon/Icon.vue.d.ts

@@ -9,8 +9,11 @@ type __VLS_Props = {
     /** Colour group; see ICON_SET_COLORS. */
     svgIconSet?: IconSet;
     disabled?: boolean;
-    /** Decorative by default: hidden from assistive technology. */
-    ariaHidden?: boolean;
+    /**
+     * Decorative by default: hidden from assistive technology. Also takes the
+     * HTML attribute strings, since `aria-hidden="true"` binds to this prop.
+     */
+    ariaHidden?: boolean | 'true' | 'false';
     /** Gives the icon a name, which makes it informative (`role="img"`). */
     ariaLabel?: string;
     /** Names the icon through an existing element, like `ariaLabel`. */
@@ -32,7 +35,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
     size: IconSize;
     disabled: boolean;
     svgIconSet: IconSet;
-    ariaHidden: boolean;
+    ariaHidden: boolean | "true" | "false";
     redundant: boolean;
     sprite: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/composables/tabStripScroll.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+/**
+ * A tab strip narrower than its tabs: marks the sides that hide tabs
+ * (`data-overflow-start`, `data-overflow-end`), keeps the selected tab in view
+ * clear of those hints, and scrolls sideways on a vertical mouse wheel.
+ */
+export declare function useTabStripScroll(bar: Ref<HTMLElement | null>, selected: () => string): {
+    overflowStart: Ref<boolean, boolean>;
+    overflowEnd: Ref<boolean, boolean>;
+};

package/dist/i18n/filePicker.d.ts

@@ -4,6 +4,15 @@ export type FilePickerText = {
     description: string;
     chooseFiles: string;
     chooseFolder: string;
+    /** Wording for one file, used when `multiple` is not set. */
+    titleOne: string;
+    descriptionOne: string;
+    chooseFile: string;
+    /** The `accept` hint; `{types}` lists extensions and the kinds below. */
+    acceptedTypes: string;
+    images: string;
+    videos: string;
+    audio: string;
     maxSize: string;
     maxFiles: string;
     remove: string;