@quidgest/ui 0.21.0 → 0.21.1

package/CHANGELOG.md

@@ -9,6 +9,17 @@ 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

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.21.0",
+  "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.",
@@ -5116,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",
@@ -5252,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.",

package/dist/manifest/components.json

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

package/dist/ui.css

@@ -1769,7 +1769,10 @@ body *::-webkit-scrollbar-track {
   padding: 0.4rem 0.8rem;
 }
 .q-button.q-button--labeled:where(:has(.q-button__content > .q-icon)):where(:not(.q-button--icon-end)):where(:not(.q-button--icon-top)):where(:not(.q-button--icon-bottom)) {
-  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
+  padding-inline-start: 0.6rem;
+}
+.q-button.q-button--labeled:where(.q-button--icon-end):where(:has(.q-button__content > .q-icon)), .q-button.q-button--labeled:where(:has(.q-button__append .q-icon)) {
+  padding-inline-end: 0.6rem;
 }
 .q-button__content {
   display: inline-flex;
@@ -1895,10 +1898,10 @@ body *::-webkit-scrollbar-track {
   padding: 0.25rem 0.5rem;
 }
 .q-button--small.q-button--labeled:where(:has(.q-button__content > .q-icon)):where(:not(.q-button--icon-end)):where(:not(.q-button--icon-top)):where(:not(.q-button--icon-bottom)) {
-  padding: 0.25rem 0.5rem 0.25rem 0.375rem;
+  padding-inline-start: 0.375rem;
 }
-.q-button--small.q-button--icon-end.q-button--labeled:where(:has(.q-button__content > .q-icon)) {
-  padding: 0.25rem 0.375rem 0.25rem 0.5rem;
+.q-button--small.q-button--labeled:where(.q-button--icon-end):where(:has(.q-button__content > .q-icon)), .q-button--small.q-button--labeled:where(:has(.q-button__append .q-icon)) {
+  padding-inline-end: 0.375rem;
 }
 .q-button--borderless {
   border-color: transparent;
@@ -1909,9 +1912,6 @@ body *::-webkit-scrollbar-track {
 .q-button--icon-end .q-button__content {
   flex-direction: row-reverse;
 }
-.q-button--icon-end.q-button--labeled:where(:has(.q-button__content > .q-icon)) {
-  padding: 0.4rem 0.6rem 0.4rem 0.8rem;
-}
 .q-button--icon-top .q-button__content {
   flex-direction: column;
 }
@@ -5998,6 +5998,193 @@ body *::-webkit-scrollbar-track {
   flex-shrink: 0;
 }
 
+.q-overflow {
+  --q-overflow-fade-size: 2.5rem;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  outline: none;
+}
+
+.q-overflow__viewport:focus-visible {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+
+.q-overflow__control .q-overflow__button:focus-visible {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+
+.q-overflow__viewport {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  outline: none;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.q-overflow__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.q-overflow__content {
+  position: relative;
+}
+
+.q-overflow__control {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.q-overflow__button {
+  min-width: 2.25rem;
+  min-height: 2.25rem;
+}
+
+.q-overflow--horizontal {
+  flex-direction: row;
+}
+.q-overflow--horizontal .q-overflow__viewport {
+  overflow: auto hidden;
+}
+
+.q-overflow--vertical {
+  flex-direction: column;
+  height: 100%;
+}
+.q-overflow--vertical .q-overflow__viewport {
+  overflow: hidden auto;
+}
+
+.q-overflow--horizontal.q-overflow--can-scroll-start.q-overflow--can-scroll-end .q-overflow__viewport {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--q-overflow-fade-size), #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+          mask-image: linear-gradient(to right, transparent, #000 var(--q-overflow-fade-size), #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+}
+
+.q-overflow--horizontal.q-overflow--can-scroll-start:not(.q-overflow--can-scroll-end) .q-overflow__viewport {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--q-overflow-fade-size), #000);
+          mask-image: linear-gradient(to right, transparent, #000 var(--q-overflow-fade-size), #000);
+}
+
+.q-overflow--horizontal.q-overflow--can-scroll-end:not(.q-overflow--can-scroll-start) .q-overflow__viewport {
+  -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+          mask-image: linear-gradient(to right, #000, #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+}
+
+.q-overflow--vertical.q-overflow--can-scroll-start.q-overflow--can-scroll-end .q-overflow__viewport {
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--q-overflow-fade-size), #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+          mask-image: linear-gradient(to bottom, transparent, #000 var(--q-overflow-fade-size), #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+}
+
+.q-overflow--vertical.q-overflow--can-scroll-start:not(.q-overflow--can-scroll-end) .q-overflow__viewport {
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--q-overflow-fade-size), #000);
+          mask-image: linear-gradient(to bottom, transparent, #000 var(--q-overflow-fade-size), #000);
+}
+
+.q-overflow--vertical.q-overflow--can-scroll-end:not(.q-overflow--can-scroll-start) .q-overflow__viewport {
+  -webkit-mask-image: linear-gradient(to bottom, #000, #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+          mask-image: linear-gradient(to bottom, #000, #000 calc(100% - var(--q-overflow-fade-size)), transparent);
+}
+
+.q-overflow--arrows-outside .q-overflow__control {
+  position: relative;
+  z-index: 1;
+  align-self: stretch;
+  align-items: stretch;
+}
+.q-overflow--arrows-outside .q-overflow__control > *,
+.q-overflow--arrows-outside .q-overflow__button {
+  align-self: stretch;
+}
+
+.q-overflow--horizontal.q-overflow--arrows-outside .q-overflow__control > *,
+.q-overflow--horizontal.q-overflow--arrows-outside .q-overflow__button {
+  height: 100%;
+}
+
+.q-overflow--vertical.q-overflow--arrows-outside .q-overflow__control {
+  width: 100%;
+}
+.q-overflow--vertical.q-overflow--arrows-outside .q-overflow__control > *,
+.q-overflow--vertical.q-overflow--arrows-outside .q-overflow__button {
+  width: 100%;
+}
+
+.q-overflow--arrows-inside {
+  position: relative;
+}
+.q-overflow--arrows-inside .q-overflow__viewport {
+  width: 100%;
+}
+.q-overflow--arrows-inside .q-overflow__control {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+}
+.q-overflow--arrows-inside .q-overflow__control > * {
+  pointer-events: auto;
+}
+.q-overflow--arrows-inside .q-overflow__control .q-overflow__button.q-button {
+  background-color: rgb(var(--q-theme-background-rgb)/80%);
+}
+@media (hover: hover) {
+  .q-overflow--arrows-inside .q-overflow__control .q-overflow__button.q-button:hover:not(:disabled) {
+    background-color: rgb(var(--q-theme-background-rgb)/95%);
+  }
+}
+
+.q-overflow--horizontal.q-overflow--arrows-inside .q-overflow__control--prev {
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+.q-overflow--horizontal.q-overflow--arrows-inside .q-overflow__control--next {
+  inset-block: 0;
+  inset-inline-end: 0;
+}
+
+.q-overflow--vertical.q-overflow--arrows-inside .q-overflow__control--prev {
+  inset-inline: 0;
+  inset-block-start: 0;
+}
+.q-overflow--vertical.q-overflow--arrows-inside .q-overflow__control--next {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .q-overflow--arrows-hover .q-overflow__control {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+  .q-overflow--arrows-hover:hover .q-overflow__control, .q-overflow--arrows-hover:focus-within .q-overflow__control {
+    opacity: 1;
+  }
+}
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
+  .q-overflow--arrows-hover .q-overflow__control {
+    transition: none;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .q-overflow--arrows-hover.q-overflow--arrows-inside .q-overflow__control {
+    pointer-events: none;
+  }
+  .q-overflow--arrows-hover.q-overflow--arrows-inside .q-overflow__control > * {
+    pointer-events: none;
+  }
+  .q-overflow--arrows-hover.q-overflow--arrows-inside:hover .q-overflow__control, .q-overflow--arrows-hover.q-overflow--arrows-inside:focus-within .q-overflow__control {
+    pointer-events: auto;
+  }
+  .q-overflow--arrows-hover.q-overflow--arrows-inside:hover .q-overflow__control > *, .q-overflow--arrows-hover.q-overflow--arrows-inside:focus-within .q-overflow__control > * {
+    pointer-events: auto;
+  }
+}
+
 .q-overlay {
   --q-overlay-bg: var(--q-theme-container);
   --q-overlay-color: var(--q-theme-on-background);