@threadlabs/looma 0.23.0 → 0.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.0",
+  "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/styles/ui-search-result-row.css

@@ -62,6 +62,17 @@
       font-family: var(--ui-font-family-sans, sans-serif);
     }
 
+    /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+    :scope[data-ui-search-result-row-state~="density=compact"] .title {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    :scope[data-ui-search-result-row-state~="density=compact"] .meta {
+      font-size: var(--ui-font-size-xs);
+      line-height: var(--ui-line-height);
+    }
+
     :scope:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
@@ -129,6 +140,8 @@
 @scope ([data-component~="ui-search-result-row"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+
     /* An unused region takes no space. */
 
     :where([data-slotted], [data-slotted] *):is([slot="title"]),

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/UiSearchResultRow.vue

@@ -221,6 +221,18 @@ const hostState = computed(() =>
   font-family: var(--ui-font-family-sans, sans-serif);
 }
 
+/* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"]
+  .title {
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"] .meta {
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--ui-line-height);
+}
+
 [data-component~="ui-search-result-row"]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,

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/chunks/UiSearchResultRow.js

@@ -144,6 +144,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-694c84bd"]]);
+}), [["__scopeId", "data-v-a72753f3"]]);
 //#endregion
 export { UiSearchResultRow_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;
 }
 
@@ -6359,7 +6359,7 @@ legend[data-v-f7b72b3f] + * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-search-result-row"][data-v-694c84bd] {
+[data-component~="ui-search-result-row"][data-v-a72753f3] {
   appearance: none;
   inline-size: 100%;
   min-block-size: var(--ui-search-result-row-min-height, 56px);
@@ -6377,7 +6377,7 @@ legend[data-v-f7b72b3f] + * {
   text-align: left;
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"][data-v-694c84bd] {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"][data-v-a72753f3] {
   min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
   padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
   padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
@@ -6385,67 +6385,78 @@ legend[data-v-f7b72b3f] + * {
   align-items: center;
   font-family: var(--ui-font-family-sans, sans-serif);
 }
-[data-component~="ui-search-result-row"][data-v-694c84bd]:hover:enabled {
+
+/* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"]
+  .title[data-v-a72753f3] {
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"] .meta[data-v-a72753f3] {
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--ui-line-height);
+}
+[data-component~="ui-search-result-row"][data-v-a72753f3]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,
     color-mix(in srgb, var(--ui-surface) 85%, black 3%)
   );
 }
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-694c84bd] {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-a72753f3] {
   background: var(
     --ui-search-result-row-selected-bg,
     var(--ui-selection-surface)
   );
   color: var(--ui-selection-text);
 }
-[data-component~="ui-search-result-row"][data-v-694c84bd]:focus-visible {
+[data-component~="ui-search-result-row"][data-v-a72753f3]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(-1 * var(--ui-focus-width));
 }
-[data-component~="ui-search-result-row"][data-v-694c84bd]:disabled {
+[data-component~="ui-search-result-row"][data-v-a72753f3]:disabled {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.leading[data-v-694c84bd],
-.trailing[data-v-694c84bd] {
+.leading[data-v-a72753f3],
+.trailing[data-v-a72753f3] {
   display: inline-flex;
   align-items: flex-start;
   flex-shrink: 0;
 }
-.content[data-v-694c84bd] {
+.content[data-v-a72753f3] {
   min-inline-size: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.title[data-v-694c84bd],
-.meta[data-v-694c84bd],
-.excerpt[data-v-694c84bd] {
+.title[data-v-a72753f3],
+.meta[data-v-a72753f3],
+.excerpt[data-v-a72753f3] {
   display: block;
   min-inline-size: 0;
 }
 
 /* An unused region takes no space. */
-.leading[data-v-694c84bd]:empty,
-.meta[data-v-694c84bd]:empty,
-.excerpt[data-v-694c84bd]:empty,
-.trailing[data-v-694c84bd]:empty {
+.leading[data-v-a72753f3]:empty,
+.meta[data-v-a72753f3]:empty,
+.excerpt[data-v-a72753f3]:empty,
+.trailing[data-v-a72753f3]:empty {
   display: none;
 }
-[slot="title"][data-v-694c84bd-s],[slot="meta"][data-v-694c84bd-s],[slot="excerpt"][data-v-694c84bd-s] {
+[slot="title"][data-v-a72753f3-s],[slot="meta"][data-v-a72753f3-s],[slot="excerpt"][data-v-a72753f3-s] {
   display: block;
   margin: 0;
 }
 @media (forced-colors: active) {
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-694c84bd]:not(:focus-visible):not(:disabled) {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-a72753f3]:not(:focus-visible):not(:disabled) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-result-row"][hidden][data-v-694c84bd] {
+[data-component~="ui-search-result-row"][hidden][data-v-a72753f3] {
   display: none;
 }