@quidgest/ui 0.20.1 → 0.21.1

package/CHANGELOG.md

@@ -9,6 +9,34 @@ On `0.x`, breaking changes typically ship as a **minor** bump. The `/release` wo
 
 Entries below start at **0.16.0**. Earlier history is in git / GitLab MRs. Patch releases within a minor line may be summarized under that minor unless a break shipped in between.
 
+## [0.21.1] - 2026-09-11
+
+### Added
+
+- `QOverflow` — overflow scroll container
+
+### Fixed
+
+- `QObfuscation` — drop partial texts merge
+- `QButton` — tighten padding for append icons
+
+## [0.21.0] - 2026-09-10
+
+### Changed
+
+- **Breaking:** `useId` — no longer returns a UUID-based `Ref` (`uid-…`); wraps Vue `useId` as a `ComputedRef` with `q-…` ids (custom `app.config.idPrefix` becomes `q-<prefix>-…`) and must run during setup. Drop any reliance on the removed `uuid` dependency from `@quidgest/ui`.
+- **Breaking:** `useDialog` / `useToast` — require `createFramework` plus a mounted `QDialogProvider` / `QToaster`. `addDialog` / `addToast` no longer take a separate `id` argument and return `Promise<string>`; prefer `await addDialog(props)` / `await addToast(props)`, pass overrides via `props.id`, and use `cancelDialog` / `cancelToast` before registration. `removeDialog` / `removeToast` throw if the id is missing; do not mutate the public `dialogs` / `toasts` lists to update the store.
+- **Breaking:** Package exports — the `./*` catch-all export was removed; import only via documented entry points.
+- **Breaking:** Color utilities — public `isCssColor` removed; use `isThemeColor` for utility/BEM classification, or `tryParseColor` / `parseColor` to test parseability. Unsupported / unparsed CSS colors no longer silently fall back to primary-like CSS vars (expect `undefined` style and a non-production warning). Contrasting/`on*` text for custom colors may change where WCAG luminance disagrees with the old HSL-lightness heuristic.
+- **Breaking:** `QButton` / `QBadge` / `QToast` — utility color BEM modifiers (`q-button--primary`, `q-badge--…`, `q-toast--…`, etc.) are no longer emitted; style via bound `--q-*-main-color` / hover CSS variables (`.q-button--background` remains for that special case). Do not target those color modifier classes in consumer CSS.
+- Theme / `useColor` — Light/Dark schemes and default `on*` tokens aligned with WCAG; pure `on*` surface tokens; utility colors always bind style (including Dark-scheme hover).
+
+### Fixed
+
+- `QInputGroup` — restore radius for solo addons; equalize sibling control heights
+- `QIcon` — size uncropped SVGs correctly in controls
+- Storybook — set per-story Vue `idPrefix` to avoid id collisions across stories
+
 ## [0.20.1] - 2026-09-04
 
 ### Added

package/README.md

@@ -42,6 +42,16 @@ import framework from './plugins/quidgest-ui'
 createApp(App).use(framework).mount('#app')
 ```
 
+Mount **one** `QDialogProvider` and **one** `QToaster` in the app root (for example `App.vue`). `useDialog` / `useToast` share a single list per app; mounting a second provider or toaster for the same app throws.
+
+```vue
+<template>
+	<q-dialog-provider />
+	<q-toaster />
+	<router-view />
+</template>
+```
+
 Once installed, components can be used like so:
 
 ```vue

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.20.1",
+  "version": "0.21.1",
   "components": [
     {
       "name": "QAccordion",
@@ -712,6 +712,11 @@
           "description": "Displays an icon alongside the button label.",
           "code": "<div style=\"display: flex; align-items: center; gap: 0.25rem; flex-direction: column; width: fit-content\">\n\t\t\t  <div style=\"display: flex; gap: 0.25rem\">\n\t\t\t  \t<q-button icon-pos=\"start\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"start\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"end\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t  </div>\n\t\t\t  <div style=\"display: flex; gap: 0.25rem\">\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"top\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"bottom\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t  </div>\n\t\t\t</div>"
         },
+        {
+          "title": "Append",
+          "description": "Trailing content via the `append` slot — for example a chevron beside a leading icon. Labeled buttons tighten end padding when `#append` contains a `.q-icon`.",
+          "code": "<div style=\"display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap\">\n\t\t\t\t<q-button v-bind=\"args\">\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"expand\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t\t<q-button v-bind=\"args\">\n\t\t\t\t\t<q-icon icon=\"more-items\" />\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"expand\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t\t<q-button>\n\t\t\t\t\t<q-icon icon=\"more-items\" />\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"expand\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t</div>"
+        },
         {
           "title": "Loading",
           "description": "Displays a loading animation and cannot be clicked.",
@@ -2871,6 +2876,16 @@
             "default": "DEFAULT_ICONS",
             "required": false,
             "category": "Configuration"
+          },
+          {
+            "name": "entryKey",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "",
+            "default": "undefined",
+            "required": false
           }
         ],
         "events": [
@@ -4397,6 +4412,16 @@
           "description": "Groups buttons with fields.",
           "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Search\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"magnify\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
+        {
+          "title": "Append Only",
+          "description": "Append-only group — all four corners of the control should be rounded.",
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+        },
+        {
+          "title": "Prepend Only",
+          "description": "Prepend-only group — all four corners of the control should be rounded.",
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #prepend>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+        },
         {
           "title": "Button Group Addon",
           "description": "Further extends button addons with multiple buttons.",
@@ -4407,6 +4432,11 @@
           "description": "Provides a textual description for the group.",
           "code": "<QInputGroup :label=\"Full name\" :required=\"true\" />"
         },
+        {
+          "title": "Mixed Heights",
+          "description": "Keeps sibling controls aligned when one child has a larger intrinsic height.",
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Name\" />\n\t\t\t\t<q-text-area placeholder=\"Notes\" :rows=\"3\" />\n\t\t\t</q-input-group>"
+        },
         {
           "title": "Advanced Usage",
           "description": "Supports the creation of custom input groups using selects, text fields, buttons, and more.",
@@ -5091,8 +5121,8 @@
           {
             "name": "texts",
             "type": {
-              "kind": "unknown",
-              "raw": "Partial<{ restricted: string; showData: string; hideData: string; }> | undefined"
+              "kind": "object",
+              "fields": {}
             },
             "description": "Custom text configurations.",
             "default": "DEFAULT_TEXTS",
@@ -5227,6 +5257,182 @@
         }
       ]
     },
+    {
+      "name": "QOverflow",
+      "description": "Layout container that shows navigation arrows when content overflows. The content track is a plain block — strip layouts are owned by slotted markup. `scrollMode=\"item\"` needs flat direct children (see Scroll Item); wrapped-strip stories disable the `scrollMode` control so Autodocs cannot switch them to `item`. `remapWheel` defaults to `false` (matches the component). Horizontal demos that benefit from trackpad UX set `remapWheel: true` on the story.",
+      "meta": {
+        "props": [
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "direction",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "horizontal",
+                "vertical"
+              ]
+            },
+            "description": "Scroll axis of the overflow viewport.\n\nUses physical horizontal/vertical scrolling (`scrollLeft` / `scrollTop`). RTL and\nlogical start/end navigation are out of scope for v1.\n\n`vertical` sets `height: 100%` on the root — the host (or an ancestor) must have a\ndefinite height, or the track grows with content and overflow never appears.",
+            "default": "horizontal",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "arrowPlacement",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "outside",
+                "inside"
+              ]
+            },
+            "description": "Whether arrows sit beside the track (`outside`) or overlay its edges (`inside`).",
+            "default": "outside",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "arrowVisibility",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "hover",
+                "always"
+              ]
+            },
+            "description": "Whether arrows stay visible while overflowing, or only appear on hover / focus-within.\n\n`hover` is gated with `@media (hover: hover) and (pointer: fine)` so coarse-pointer\nand touch devices keep arrows visible (panning alone would otherwise leave them hidden).",
+            "default": "always",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "scrollMode",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "item",
+                "page",
+                "step"
+              ]
+            },
+            "description": "How far each navigation action advances the scroll position.\n\nFor `item`, targets are direct `HTMLElement` children of the content track only\n(see {@link QOverflowScrollMode}).",
+            "default": "page",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "scrollStep",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "Pixel distance used when `scrollMode` is `step`.",
+            "default": "200",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "remapWheel",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "When `true` and `direction` is `horizontal`, dominant vertical wheel / trackpad\ndeltas are mapped onto `scrollLeft` (and may `preventDefault` page scroll while\nthe strip can still move). Default `false` so long-page hosts (e.g. future tabs)\nare not surprised; enable for standalone strips that want trackpad UX.",
+            "default": "false",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "icons",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom icon configurations for navigation controls.\n\nIcons are chosen from physical `direction` (left/right or up/down), not document\n`dir` / writing mode. Logical start/end and RTL-aware chevrons are a follow-up.",
+            "default": "DEFAULT_ICONS",
+            "required": false,
+            "category": "Configuration"
+          },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom accessible strings for navigation controls.\n\nOptional `regionLabel` opts into a named landmark (`role=\"region\"` + `aria-label`).\nOmit it (the default) for a plain root — avoids N generic landmarks and an invalid\nunnamed `region`.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "prev",
+            "description": ""
+          },
+          {
+            "name": "default",
+            "description": ""
+          },
+          {
+            "name": "next",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "Horizontal overflow with arrows outside the content track.",
+          "code": "<div :style=\"horizontalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div :style=\"horizontalStripStyle\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t\t:style=\"horizontalItemStyle\">\n\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Vertical",
+          "description": "Vertical overflow with arrows beside the track. The host must be height-bounded — `direction=\"vertical\"` sets `height: 100%` on the root.",
+          "code": "<div :style=\"verticalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t:style=\"verticalItemStyle\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Arrows Inside",
+          "description": "Arrows overlay the content edges with an edge fade behind them.",
+          "code": "<div :style=\"horizontalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div :style=\"horizontalStripStyle\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t\t:style=\"horizontalItemStyle\">\n\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Arrows On Hover",
+          "description": "Navigation arrows appear only while the overflow is hovered or focused.",
+          "code": "<div :style=\"horizontalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div :style=\"horizontalStripStyle\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t\t:style=\"horizontalItemStyle\">\n\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Scroll Step",
+          "description": "Each navigation action advances by a fixed pixel step.",
+          "code": "<div :style=\"horizontalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div :style=\"horizontalStripStyle\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t\t:style=\"horizontalItemStyle\">\n\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Scroll Item",
+          "description": "Each navigation action centers the next or previous direct child in the viewport. Item mode expects flat `HTMLElement` children in the default slot (no nested wrappers). Horizontal strip layout uses inline-level items + nowrap on the host.",
+          "code": "<div :style=\"horizontalStripHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t:style=\"horizontalItemStyle\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Custom Arrows",
+          "description": "Custom previous and next controls via slots.",
+          "code": "<div :style=\"horizontalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<template #prev=\"{ disabled, onClick }\">\n\t\t\t\t\t\t<q-button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tlabel=\"Back\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t@click=\"onClick\" />\n\t\t\t\t\t</template>\n\n\t\t\t\t\t<div :style=\"horizontalStripStyle\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-for=\"item in demoItems\"\n\t\t\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t\t\t:style=\"horizontalItemStyle\">\n\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<template #next=\"{ disabled, onClick }\">\n\t\t\t\t\t\t<q-button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tlabel=\"Next\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t@click=\"onClick\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        },
+        {
+          "title": "Without Overflow",
+          "description": "When content fits the viewport, navigation arrows are omitted.",
+          "code": "<div :style=\"horizontalHostStyle\">\n\t\t\t\t<q-overflow v-bind=\"args\">\n\t\t\t\t\t<div :style=\"horizontalStripStyle\">\n\t\t\t\t\t\t<div :style=\"horizontalItemStyle\">Fits</div>\n\t\t\t\t\t\t<div :style=\"horizontalItemStyle\">Here</div>\n\t\t\t\t\t</div>\n\t\t\t\t</q-overflow>\n\t\t\t</div>"
+        }
+      ]
+    },
     {
       "name": "QOverlay",
       "description": "A generic overlay for creating floating elements.",
@@ -9485,6 +9691,16 @@
             "default": "DEFAULT_ICONS",
             "required": false,
             "category": "Configuration"
+          },
+          {
+            "name": "entryKey",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "",
+            "default": "undefined",
+            "required": false
           }
         ],
         "events": [

package/dist/manifest/components.json

@@ -40,6 +40,7 @@
   "QListItemGroup",
   "QMeter",
   "QObfuscation",
+  "QOverflow",
   "QOverlay",
   "QPasswordField",
   "QPhoneField",