@threadlabs/looma 0.23.0 → 0.23.1

package/package.json

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

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/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/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

@@ -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;
 }