@threadlabs/looma 0.23.1 → 0.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-scroll-area.css

@@ -38,7 +38,7 @@
     }
 
     :scope[data-ui-scroll-area-state~="size=sm"] {
-      max-block-size: 9.375rem;
+      max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
     }
     :scope[data-ui-scroll-area-state~="size=md"] {
       max-block-size: 20rem;

package/vue/UiScrollArea.vue

@@ -23,7 +23,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.',
+        'Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows before the overflow fade, md is 20rem, and lg is\n      30rem.',
       values: ['content', 'sm', 'md', 'lg'],
       default: 'content',
     },
@@ -201,7 +201,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
 }
 
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"] {
-  max-block-size: 9.375rem;
+  max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
 }
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"] {
   max-block-size: 20rem;

package/vue/chunks/UiScrollArea.js

@@ -47,7 +47,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.",
+				description: "Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows before the overflow fade, md is 20rem, and lg is\n      30rem.",
 				values: [
 					"content",
 					"sm",
@@ -140,6 +140,6 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-97150230"]]);
+}), [["__scopeId", "data-v-c514834a"]]);
 //#endregion
 export { UiScrollArea_default as t };

package/vue/components.css

@@ -2340,7 +2340,7 @@ dd[data-v-7a7db3d1] {
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
-[data-component~="ui-scroll-area"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-v-c514834a] {
   display: block;
   box-sizing: border-box;
   min-block-size: 0;
@@ -2359,29 +2359,29 @@ dd[data-v-7a7db3d1] {
     transparent
   );
 }
-.content[data-v-97150230] {
+.content[data-v-c514834a] {
   display: flow-root;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"][data-v-c514834a] {
   overflow-x: auto;
   overflow-y: hidden;
   --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
 }
-[data-component~="ui-scroll-area"][data-v-97150230]:dir(rtl) {
+[data-component~="ui-scroll-area"][data-v-c514834a]:dir(rtl) {
   --_ui-scroll-fade-inline: to left;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"][data-v-97150230] {
-  max-block-size: 9.375rem;
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"][data-v-c514834a] {
+  max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"][data-v-c514834a] {
   max-block-size: 20rem;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"][data-v-c514834a] {
   max-block-size: 30rem;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-scroll-area"][hidden][data-v-97150230] {
+[data-component~="ui-scroll-area"][hidden][data-v-c514834a] {
   display: none;
 }