@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiSearchResultRow.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -75,56 +76,9 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
-const hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('button'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-search-result-row> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-search-result-row> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('button', 'ui-search-result-row')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -139,7 +93,7 @@ const hostState = computed(() =>
 
 <template>
   <button
-    data-component="ui-search-result-row"
+    class="ui-search-result-row"
     type="button"
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
@@ -193,117 +147,110 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-search-result-row"] {
-  appearance: none;
-  inline-size: 100%;
-  min-block-size: var(--ui-search-result-row-min-height, 56px);
-  margin: 0;
-  padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
-  padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ui-search-result-row-gap, var(--ui-space-3));
-  background: var(--ui-search-result-row-surface, transparent);
-  border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
-  border-radius: var(--ui-selection-radius);
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-  transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
+/* 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"] {
-  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));
-  gap: var(--ui-search-result-row-gap, var(--ui-space-2));
-  align-items: center;
-  font-family: var(--ui-font-family-sans, sans-serif);
-}
+/* An unused region takes no space. */
 
-/* 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);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[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);
-}
+@scope (.ui-search-result-row) {
+  :scope:where(:scope) {
+    appearance: none;
+    inline-size: 100%;
+    min-block-size: var(--ui-search-result-row-min-height, 56px);
+    margin: 0;
+    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
+    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+    background: var(--ui-search-result-row-surface, transparent);
+    border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
+    border-radius: var(--ui-selection-radius);
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-[data-component~="ui-search-result-row"]:hover:enabled {
-  background: var(
-    --ui-search-result-row-hover-surface,
-    var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
-  );
-}
+  :scope:where(:scope):is([data-ui-search-result-row-state~="density=compact"]) {
+    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));
+    gap: var(--ui-search-result-row-gap, var(--ui-space-2));
+    align-items: center;
+    font-family: var(--ui-font-family-sans, sans-serif);
+  }
+  :scope[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~="selected"] {
-  background: var(
-    --ui-search-result-row-selected-bg,
-    var(--_ui-selection-context-surface, var(--ui-selection-surface))
-  );
-  color: var(--_ui-selection-context-text, var(--ui-selection-text));
-}
+  :scope[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"]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: calc(-1 * var(--ui-focus-width));
-}
+  :scope:where(:scope):is(:hover:enabled) {
+    background: var(
+      --ui-search-result-row-hover-surface,
+      var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
+    );
+  }
 
-[data-component~="ui-search-result-row"]:disabled {
-  background: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
+  :scope:where(:scope):is([data-ui-search-result-row-state~="selected"]) {
+    background: var(
+      --ui-search-result-row-selected-bg,
+      var(--_ui-selection-context-surface, var(--ui-selection-surface))
+    );
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  }
 
-.leading,
-.trailing {
-  display: inline-flex;
-  align-items: flex-start;
-  flex-shrink: 0;
-}
+  :scope:where(:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
+  }
 
-.content {
-  min-inline-size: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
+  :scope:where(:scope):is(:disabled) {
+    background: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
 
-.title,
-.meta,
-.excerpt {
-  display: block;
-  min-inline-size: 0;
-}
+  .leading, .trailing {
+    display: inline-flex;
+    align-items: flex-start;
+    flex-shrink: 0;
+  }
 
-/* An unused region takes no space. */
-.leading:empty,
-.meta:empty,
-.excerpt:empty,
-.trailing:empty {
-  display: none;
-}
+  .content {
+    min-inline-size: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
-:slotted([slot="title"]),
-:slotted([slot="meta"]),
-:slotted([slot="excerpt"]) {
-  display: block;
-  margin: 0;
-}
+  .title, .meta, .excerpt {
+    display: block;
+    min-inline-size: 0;
+  }
+  .leading:empty, .meta:empty, .excerpt:empty, .trailing:empty {
+    display: none;
+  }
 
-@media (forced-colors: active) {
-  [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled) {
-    outline: var(--ui-border-width) solid Highlight;
-    outline-offset: calc(-1 * var(--ui-border-width));
+  :slotted([slot="title"]), :slotted([slot="meta"]), :slotted([slot="excerpt"]) {
+    display: block;
+    margin: 0;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-result-row"][hidden] {
-  display: none;
+  @media (forced-colors: active) {
+    :scope:where(:scope):is([data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled)) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiSearchShell.d.ts

@@ -27,12 +27,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     close: (event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     dismissible: {
         type: PropType<boolean | null>;
@@ -51,12 +51,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onClose?: ((event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string | null;
     open: boolean | null;