@quidgest/ui 0.24.0 → 0.26.0

package/CHANGELOG.md

@@ -9,6 +9,40 @@ 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.26.0] - 2026-09-23
+
+### Added
+
+- `QSection` — title `prepend`/`append` slots
+
+### Changed
+
+- **Breaking:** `QTextField` / `QTextArea` — the `id` prop now resolves onto the `.q-field` wrapper element instead of the native `<input>`/`<textarea>`; the interactive control renders with a derived `${id}_input` id instead. Update selectors or `document.getElementById` calls that target the input/textarea by the raw `id` to use `${id}_input`; the component's own `<label for>` association is unaffected. This also affects `QPhoneField`, `QPasswordField`, and `QColorPicker`, which build on `QTextField`.
+- Dropped `!important` from component styles, making consumer style overrides easier
+
+### Fixed
+
+- Consolidated border handling on `q-border-color`, affecting `QDivider`, `QOverlay`, `QPropertyList`, `QSection`
+- `QBadge` — icons sized at `sm` instead of `md`
+
+## [0.25.0] - 2026-09-21
+
+### Added
+
+- `QButton` — `effect="ripple"` plays a click ripple effect from the pointer position (opt-in; default remains `'none'`)
+
+### Changed
+
+- **Breaking:** Every package-exported type now carries a `Q` prefix; generic/portable primitives (`RGB`, `HSL`, `Point`, `Placement`, …) are unchanged. Update imports from `@quidgest/ui` (root): `DialogItem` → `QDialogItem`, `UseDialogReturn` → `QUseDialogReturn`, `ToastItem` → `QToastItem`, `UseToastReturn` → `QUseToastReturn`, `ThemeDefinition` → `QThemeDefinition`; from `@quidgest/ui/framework`: `FrameworkConfig` → `QFrameworkConfig`; from `@quidgest/ui/utils` (and `/utils/color`): `ColorScheme` → `QColorScheme`, `BaseColorScheme` → `QBaseColorScheme`, `ThemeColorKey` → `QThemeColorKey`; from `@quidgest/ui/components` (and each component's own subpath): `Icon` → `QIconProps` (alias removed, `QIcon`), `DialogButton` → `QDialogButton` (`QDialog`), `Slide` → `QCarouselSlide` (`QCarousel`), `Item`/`Group` → `QListItemData`/`QListItemGroupData` (`QList`), `PanelPosition` → `QPropertyListPanelPosition` (`QPropertyList`), `CalendarMode`/`CalendarDay`/`TimeField` → `QDateTimePickerCalendarMode`/`QDateTimePickerCalendarDay`/`QDateTimePickerTimeField` (`QDateTimePicker`), `PasswordStrengthLevel`/`PasswordStrengthEvalResult` → `QPasswordFieldStrengthLevel`/`QPasswordFieldStrengthEvalResult` (`QPasswordField`), `PointerDownOutsideEvent`/`FocusOutsideEvent` → `QPointerDownOutsideEvent`/`QFocusOutsideEvent` (`QDismissibleLayer`). Other renamed types (composable-internal return/context types, `AppThemes`/`ThemeInstance`/`ThemeMode`, `Defaults`/`ComponentDefaults`, `TabRegistration`/`TabsContext`, `SidebarItemRegistration`/`SidebarContext`, `GapMode`/`GapOffset`) were never reachable from a published export — nothing to migrate.
+- **Breaking:** `QIcon` `size` prop now emits `rem` units instead of `em`, and only applies as `font-size` when `type="font"` (non-font icon types now get explicit `width`/`height` instead). Existing numeric `:size` values render at a different pixel size when nested inside an element with a non-default font-size — previously the size scaled with that inherited font-size via `em`; now it resolves against the root font-size via `rem`.
+- **Breaking:** Density base tokens (`--q-space-*-base`, `--q-control-height-*-base`, `--q-control-padding-*-base`, `--q-icon-padding-base`, `--q-border-radius-base`) now resolve in `rem` instead of `px` — numerically identical at the default 16px root, but they now scale with the root font-size like `--q-font-size-*` already did. The standalone `--q-font-size-base` token is removed; `body`'s base font-size now comes from the density-scaled `--q-font-size-md` (previously a fixed `0.9rem` regardless of density). Consumers overriding `--q-font-size-base`, or relying on `body`'s font-size staying fixed across densities, should switch to `--q-font-size-md` or set their own fixed font-size explicitly.
+- **Breaking:** `QToast` SCSS `!default` variables (`$q-toast-width`, `$q-toast-duration`, `$q-toast-duration-leave`, `$q-toast-spacing-buffer`, `$q-toast-slide-distance`) are removed — override the equivalent `--q-toast-*` CSS custom properties instead. The toast-stack transition classes are renamed `.toast-stack-*` → `.q-toast-stack-*`.
+- **Breaking:** `QSidebar` SCSS variable `$sidebar-border-color` is removed — override `--q-sidebar-border-color` instead.
+
+### Fixed
+
+- `useColor` / theme system — on-color overrides (`onPrimary`, `onSecondary`, …) from a custom color scheme are now respected instead of falling back to computed defaults
+
 ## [0.24.0] - 2026-09-18
 
 ### Changed

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.0",
+  "version": "0.26.0",
   "components": [
     {
       "name": "QAccordion",
@@ -673,6 +673,20 @@
             "required": false,
             "category": "Presentation"
           },
+          {
+            "name": "effect",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "none",
+                "ripple"
+              ]
+            },
+            "description": "The visual feedback effect played from the pointer position on click.\nSet to `'ripple'` to enable it.",
+            "default": "none",
+            "required": false,
+            "category": "Presentation"
+          },
           {
             "name": "disabled",
             "type": {
@@ -708,7 +722,7 @@
           {
             "name": "click",
             "description": "",
-            "type": "[event: Event]"
+            "type": "[event: MouseEvent]"
           }
         ],
         "slots": [
@@ -768,6 +782,11 @@
           "description": "Occupies the available space.",
           "code": "<QButton :label=\"Button\" :block=\"true\" />"
         },
+        {
+          "title": "Effect",
+          "description": "Plays a ripple effect from the pointer position on click. Opt in with `effect=\"ripple\"` — the default is `'none'`.",
+          "code": "<div style=\"display: flex; align-items: center; gap: 0.5rem\">\n\t\t\t\t<q-button label=\"Ripple\" effect=\"ripple\" />\n\t\t\t\t<q-button label=\"None\" />\n\t\t\t</div>"
+        },
         {
           "title": "Size",
           "description": "Local size overrides. Useful for slotting buttons within other components. Combines with the global density toolbar (product = global × size).",
@@ -2650,7 +2669,7 @@
             "name": "defaults",
             "type": {
               "kind": "unknown",
-              "raw": "Defaults"
+              "raw": "QDefaults"
             },
             "description": "The default configuration values to provide to child components.\nThese values will be **merged with each component's own defaults**.",
             "required": true,
@@ -3071,22 +3090,22 @@
           {
             "name": "pointer-down-outside",
             "description": "",
-            "type": "[event: PointerDownOutsideEvent]"
+            "type": "[event: QPointerDownOutsideEvent]"
           },
           {
             "name": "focus-outside",
             "description": "",
-            "type": "[event: FocusOutsideEvent]"
+            "type": "[event: QFocusOutsideEvent]"
           },
           {
             "name": "interact-outside",
             "description": "",
-            "type": "[event: PointerDownOutsideEvent | FocusOutsideEvent]"
+            "type": "[event: QPointerDownOutsideEvent | QFocusOutsideEvent]"
           },
           {
             "name": "dismiss",
             "description": "",
-            "type": "[event: KeyboardEvent | PointerDownOutsideEvent | FocusOutsideEvent]"
+            "type": "[event: KeyboardEvent | QPointerDownOutsideEvent | QFocusOutsideEvent]"
           }
         ],
         "slots": [
@@ -4215,7 +4234,7 @@
               "kind": "primitive",
               "name": "number"
             },
-            "description": "The size of the icon, in em units.",
+            "description": "The size of the icon, in rem units.",
             "required": false,
             "category": "Presentation"
           },
@@ -8191,6 +8210,14 @@
         ],
         "events": [],
         "slots": [
+          {
+            "name": "title.prepend",
+            "description": ""
+          },
+          {
+            "name": "title.append",
+            "description": ""
+          },
           {
             "name": "default",
             "description": ""
@@ -8223,6 +8250,11 @@
           "description": "Group box with different styling variants.",
           "code": "<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\t\t\t\t<q-section title=\"Default\" variant=\"default\">\n\t\t\t\t\t<p>Default variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Background\" variant=\"background\">\n\t\t\t\t\t<p>Background variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Minor\" variant=\"minor\">\n\t\t\t\t\t<p>Minor variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Minor Border Top\" variant=\"minor-border-top\">\n\t\t\t\t\t<p>Minor with border top variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Title Background\" variant=\"title-background\">\n\t\t\t\t\t<p>Title background variant content</p>\n\t\t\t\t</q-section>\n\t\t\t</div>"
         },
+        {
+          "title": "Custom Title",
+          "description": "A section with custom content prepended and appended to the title.",
+          "code": "<q-section v-bind=\"args\">\n\t\t\t\t<template #title.prepend>\n\t\t\t\t\t<q-badge\n\t\t\t\t\t\tcolor=\"warning\"\n\t\t\t\t\t\tvariant=\"bold\">\n\t\t\t\t\t\tBadge\n\t\t\t\t\t</q-badge>\n\t\t\t\t</template>\n\t\t\t\t<template #title.append>\n\t\t\t\t\t<q-icon icon=\"file-chart-outline\" />\n\t\t\t\t</template>\n\t\t\t\t<span>Example of a group box</span>\n\t\t\t</q-section>"
+        },
         {
           "title": "Nested Groups",
           "description": "Nested group boxes demonstrating hierarchy.",
@@ -9246,7 +9278,7 @@
         {
           "title": "With Title Slots",
           "description": "Tabs with title, prepend, and append slots.",
-          "code": "<q-tabs v-bind=\"args\">\n\t\t\t\t<q-tab title=\"Inbox\" value=\"inbox\">\n\t\t\t\t\t<template #title.prepend>📥</template>\n\t\t\t\t\t<template #title.append>(3)</template>\n\t\t\t\t\tInbox messages.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"Sent\" value=\"sent\">\n\t\t\t\t\t<template #title.prepend>📤</template>\n\t\t\t\t\tSent messages.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab value=\"alerts\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<q-badge\n\t\t\t\t\t\t\tvariant=\"bold\"\n\t\t\t\t\t\t\tpill\n\t\t\t\t\t\t\tstyle=\"height: 1.25rem; margin-block: -0.25rem\">\n\t\t\t\t\t\t\tAlerts\n\t\t\t\t\t\t</q-badge>\n\t\t\t\t\t</template>\n\t\t\t\t\tAlert notifications.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
+          "code": "<q-tabs v-bind=\"args\">\n\t\t\t\t<q-tab title=\"Inbox\" value=\"inbox\">\n\t\t\t\t\t<template #title.prepend>📥</template>\n\t\t\t\t\t<template #title.append>(3)</template>\n\t\t\t\t\tInbox messages.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"Sent\" value=\"sent\">\n\t\t\t\t\t<template #title.prepend>📤</template>\n\t\t\t\t\tSent messages.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab value=\"alerts\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<q-badge\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tpill\n\t\t\t\t\t\t\tvariant=\"bold\">\n\t\t\t\t\t\t\tAlerts\n\t\t\t\t\t\t</q-badge>\n\t\t\t\t\t</template>\n\t\t\t\t\tAlert notifications.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
         },
         {
           "title": "Disabled",
@@ -10193,6 +10225,19 @@
             "required": false,
             "category": "Presentation"
           },
+          {
+            "name": "effect",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "none",
+                "ripple"
+              ]
+            },
+            "description": "The visual feedback effect played from the pointer position on click.\nSet to `'ripple'` to enable it.",
+            "required": false,
+            "category": "Presentation"
+          },
           {
             "name": "disabled",
             "type": {