@quidgest/ui 0.23.3 → 0.24.0

package/CHANGELOG.md

@@ -9,6 +9,12 @@ 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.24.0] - 2026-09-18
+
+### Changed
+
+- **Breaking:** `QIcon` `size` prop now sets the icon size in `em` units instead of pixels — convert existing pixel-like values (e.g. `:size="24"`) to their em equivalent (e.g. `:size="1.5"`). Icon size design tokens (`--q-icon-size-sm/md/lg-base`) are also now `em`-based, so default icon sizing scales with the surrounding font size instead of resolving to a fixed pixel value.
+
 ## [0.23.3] - 2026-09-17
 
 ### Added

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.23.3",
+  "version": "0.24.0",
   "components": [
     {
       "name": "QAccordion",
@@ -531,22 +531,22 @@
         {
           "title": "Default",
           "description": "The default badge indicator, displaying a numerical notification count.",
-          "code": "<q-badge-indicator v-bind=\"args\">\n        <q-icon icon=\"bell-outline\" :size=\"24\" />\n      </q-badge-indicator>"
+          "code": "<q-badge-indicator v-bind=\"args\">\n        <q-icon icon=\"bell-outline\" :size=\"1.5\" />\n      </q-badge-indicator>"
         },
         {
           "title": "Dot",
           "description": "A small dot indicator, automatically applied when no content is provided. Useful for status indicators.",
-          "code": "<q-badge-indicator v-bind=\"args\">\n        <q-icon icon=\"bell-outline\" :size=\"24\" />\n      </q-badge-indicator>"
+          "code": "<q-badge-indicator v-bind=\"args\">\n        <q-icon icon=\"bell-outline\" :size=\"1.5\" />\n      </q-badge-indicator>"
         },
         {
           "title": "Custom Content",
           "description": "A custom content badge, allowing rich elements like icons instead of text.",
-          "code": "<q-badge-indicator v-bind=\"args\">\n        <q-icon icon=\"bell-outline\" :size=\"24\" />\n        <template #content>\n          <q-icon icon=\"check\" />\n        </template>\n      </q-badge-indicator>"
+          "code": "<q-badge-indicator v-bind=\"args\">\n        <q-icon icon=\"bell-outline\" :size=\"1.5\" />\n        <template #content>\n          <q-icon icon=\"check\" />\n        </template>\n      </q-badge-indicator>"
         },
         {
           "title": "Placement",
           "description": "Demonstrates the badge indicator in different placements.",
-          "code": "<div style=\"display: flex; gap: 3rem;\">\n        <q-badge-indicator\n\t\t\tv-for=\"placement in placements\"\n\t\t\t:key=\"placement\"\n\t\t\t:placement=\"placement\"\n\t\t\tcolor=\"danger\"\n\t\t\tcontent=\"9+\"\n\t\t\tv-bind=\"args\">\n          <q-icon icon=\"message-outline\" :size=\"24\" />\n        </q-badge-indicator>\n      </div>"
+          "code": "<div style=\"display: flex; gap: 3rem;\">\n        <q-badge-indicator\n\t\t\tv-for=\"placement in placements\"\n\t\t\t:key=\"placement\"\n\t\t\t:placement=\"placement\"\n\t\t\tcolor=\"danger\"\n\t\t\tcontent=\"9+\"\n\t\t\tv-bind=\"args\">\n          <q-icon icon=\"message-outline\" :size=\"1.5\" />\n        </q-badge-indicator>\n      </div>"
         }
       ]
     },
@@ -4215,7 +4215,7 @@
               "kind": "primitive",
               "name": "number"
             },
-            "description": "The size of the icon, in pixels.",
+            "description": "The size of the icon, in em units.",
             "required": false,
             "category": "Presentation"
           },

package/dist/ui.css

@@ -1357,9 +1357,9 @@ to ensure consistent appearance across different browsers.
   --q-selection-control-size-base: 1.15rem;
   --q-field-padding-y-base: 0.26rem;
   --q-field-padding-x-base: 0.25rem;
-  --q-icon-size-sm-base: 14px;
-  --q-icon-size-md-base: 16px;
-  --q-icon-size-lg-base: 20px;
+  --q-icon-size-sm-base: 1em;
+  --q-icon-size-md-base: 1.15em;
+  --q-icon-size-lg-base: 1.45em;
   --q-icon-padding-base: 4px;
   --q-border-radius-base: 4px;
   --q-space-1: calc(var(--q-space-1-base) * var(--q-density-scale));
@@ -2464,7 +2464,7 @@ body *::-webkit-scrollbar-track {
 .q-carousel {
   --q-carousel-height: calc(360px * var(--q-density-scale));
   --q-carousel-control-size: calc(48px * var(--q-density-scale));
-  --q-carousel-control-icon-size: calc(24px * var(--q-density-scale));
+  --q-carousel-control-icon-size: var(--q-icon-size-lg);
   --q-carousel-control-inset: calc(1rem * var(--q-density-scale));
   --q-carousel-caption-bottom: calc(3.5rem * var(--q-density-scale));
   --q-carousel-indicator-width: calc(30px * var(--q-density-scale));
@@ -6230,6 +6230,9 @@ body *::-webkit-scrollbar-track {
   width: var(--q-icon-size-md);
   height: var(--q-icon-size-md);
 }
+.q-icon__font {
+  font-size: var(--q-icon-size-md);
+}
 
 .q-input-group__prepend > :first-child {
   border-top-left-radius: var(--q-border-radius);
@@ -6422,6 +6425,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-list-item__content {
   display: flex;
+  align-items: center;
   flex-grow: 1;
   gap: var(--q-space-2);
   cursor: inherit;
@@ -6556,8 +6560,8 @@ body *::-webkit-scrollbar-track {
   color: var(--q-theme-primary);
 }
 .q-obfuscation .q-obfuscation__label-action.q-button .q-obfuscation__icon.q-icon {
-  width: 1em;
-  height: 1em;
+  width: var(--q-icon-size-sm);
+  height: var(--q-icon-size-sm);
 }
 .q-obfuscation__icon.q-icon {
   flex-shrink: 0;

package/dist/ui.esm.js

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.23.3
+ * Quidgest UI v0.24.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -138,7 +138,7 @@ return(e,t)=>(N(),i("button",{id:n.id,type:"button",class:_(v.value),disabled:l.
 function v(e){f.value&&e.stopImmediatePropagation()}return(t,d)=>(N(),l(I(n.href?"a":"div"),{id:n.id,class:_(a.value),href:n.href&&!f.value?n.href:void 0,onClick:v},{default:X(()=>[n.loading?(N(),l(V(Se),{key:0,size:36})):(N(),i(e,{key:1},[r("div",kt,[T(t.$slots,"header",{},()=>[T(t.$slots,"header.prepend"),t.$slots.title||n.title||t.$slots.subtitle||n.subtitle?(N(),i("div",xt,[T(t.$slots,"header.content.prepend"),r("div",Ct,[t.$slots.title||n.title?(N(),i("p",qt,[t.$slots.title?T(t.$slots,"title",{key:0}):(N(),i(e,{key:1},[u(D(t.$props.title),1)],64))])):o("",!0),t.$slots.subtitle||n.subtitle?(N(),i("p",St,[t.$slots.subtitle?T(t.$slots,"subtitle",{key:0}):(N(),i(e,{key:1},[u(D(t.$props.subtitle),1)],64))])):o("",!0)]),T(t.$slots,"header.content.append")])):o("",!0),T(t.$slots,"header.append")])]),r("div",Nt,[T(t.$slots,"default")]),t.$slots.footer?(N(),i("div",Mt,[T(t.$slots,"footer")])):o("",!0)],64))]),_:3},8,["id","class","href"]))}})),Et=/*@__PURE__*/f({__name:"QIcon",props:{id:{},class:{},icon:{},size:{},color:{},type:{default:"svg"}},setup(e){const t=e,n=d(()=>{switch(t.type){case"svg":return Qt
 case"font":return Rt
 case"img":return Vt
-default:return}}),{style:a}=mt(F(t,"color")),o=d(()=>{const e=void 0!==t.size?`${t.size}px`:void 0
+default:return}}),{style:a}=mt(F(t,"color")),o=d(()=>{const e=void 0!==t.size?`${t.size}em`:void 0
 return{width:e,height:e,"font-size":e,color:void 0!==t.color&&"primary"!==t.color?a.value?.mainColor:void 0}})
 return(e,a)=>(N(),l(I(n.value),{id:t.id,class:_(t.class),icon:t.icon,style:k(o.value)},null,8,["id","class","icon","style"]))}}),At=["id"],Tt=/*@__PURE__*/f({__name:"QIconFont",props:{id:{},class:{},icon:{},variant:{},library:{default:""}},setup(e){const t=e,n=d(()=>t.variant?`${t.library}-${t.variant}`:t.library),a=d(()=>t.library&&t.icon?`${t.library}-${t.icon}`:t.icon)
 return(e,d)=>(N(),i("i",{id:t.id,class:_(["q-icon","q-icon__font",n.value,a.value,t.class])},null,10,At))}}),Bt=["id","src"],It=/*@__PURE__*/f({__name:"QIconImg",props:{id:{},class:{},icon:{}},setup(e){const t=e

package/dist/ui.js

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.23.3
+ * Quidgest UI v0.24.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -137,7 +137,7 @@ return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("button",{id:o.id,type:
 function l(e){r.value&&e.stopImmediatePropagation()}return(e,a)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.href?"a":"div"),{id:n.id,class:(0,t.normalizeClass)(o.value),href:n.href&&!r.value?n.href:void 0,onClick:l},{default:(0,t.withCtx)(()=>[n.loading?((0,t.openBlock)(),(0,t.createBlock)((0,t.unref)(_),{key:0,size:36})):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createElementVNode)("div",Ce,[(0,t.renderSlot)(e.$slots,"header",{},()=>[(0,t.renderSlot)(e.$slots,"header.prepend"),e.$slots.title||n.title||e.$slots.subtitle||n.subtitle?((0,t.openBlock)(),(0,t.createElementBlock)("div",we,[(0,t.renderSlot)(e.$slots,"header.content.prepend"),(0,t.createElementVNode)("div",xe,[e.$slots.title||n.title?((0,t.openBlock)(),(0,t.createElementBlock)("p",Be,[e.$slots.title?(0,t.renderSlot)(e.$slots,"title",{key:0}):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createTextVNode)((0,t.toDisplayString)(e.$props.title),1)],64))])):(0,t.createCommentVNode)("",!0),e.$slots.subtitle||n.subtitle?((0,t.openBlock)(),(0,t.createElementBlock)("p",_e,[e.$slots.subtitle?(0,t.renderSlot)(e.$slots,"subtitle",{key:0}):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createTextVNode)((0,t.toDisplayString)(e.$props.subtitle),1)],64))])):(0,t.createCommentVNode)("",!0)]),(0,t.renderSlot)(e.$slots,"header.content.append")])):(0,t.createCommentVNode)("",!0),(0,t.renderSlot)(e.$slots,"header.append")])]),(0,t.createElementVNode)("div",Ne,[(0,t.renderSlot)(e.$slots,"default")]),e.$slots.footer?((0,t.openBlock)(),(0,t.createElementBlock)("div",Se,[(0,t.renderSlot)(e.$slots,"footer")])):(0,t.createCommentVNode)("",!0)],64))]),_:3},8,["id","class","href"]))}})),Me=(0,t.defineComponent)({__name:"QIcon",props:{id:{},class:{},icon:{},size:{},color:{},type:{default:"svg"}},setup(e){const n=e,o=(0,t.computed)(()=>{switch(n.type){case"svg":return Oe
 case"font":return Re
 case"img":return Fe
-default:return}}),{style:a}=ve((0,t.toRef)(n,"color")),d=(0,t.computed)(()=>{const e=void 0!==n.size?`${n.size}px`:void 0
+default:return}}),{style:a}=ve((0,t.toRef)(n,"color")),d=(0,t.computed)(()=>{const e=void 0!==n.size?`${n.size}em`:void 0
 return{width:e,height:e,"font-size":e,color:void 0!==n.color&&"primary"!==n.color?a.value?.mainColor:void 0}})
 return(e,a)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.value),{id:n.id,class:(0,t.normalizeClass)(n.class),icon:n.icon,style:(0,t.normalizeStyle)(d.value)},null,8,["id","class","icon","style"]))}}),qe=["id"],Pe=(0,t.defineComponent)({__name:"QIconFont",props:{id:{},class:{},icon:{},variant:{},library:{default:""}},setup(e){const n=e,o=(0,t.computed)(()=>n.variant?`${n.library}-${n.variant}`:n.library),a=(0,t.computed)(()=>n.library&&n.icon?`${n.library}-${n.icon}`:n.icon)
 return(e,d)=>((0,t.openBlock)(),(0,t.createElementBlock)("i",{id:n.id,class:(0,t.normalizeClass)(["q-icon","q-icon__font",o.value,a.value,n.class])},null,10,qe))}}),Ve=["id","src"],Te=(0,t.defineComponent)({__name:"QIconImg",props:{id:{},class:{},icon:{}},setup(e){const n=e