@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiBreadcrumbItem.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 { attribute, checkHydratedRoot, concat, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
@@ -36,39 +37,7 @@ 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()
 
 let guardedPrevious: any = null
 const guarded = computed(() => {
@@ -105,22 +74,7 @@ const guarded = computed(() => {
         concat(checkedProps.value.current),
       ))
 })
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('li'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-breadcrumb-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-breadcrumb-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('li', 'ui-breadcrumb-item')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -128,49 +82,21 @@ const hostState = computed(() =>
     checkedProps.value.current && 'current',
   ].filter(Boolean).join(' ')
 )
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
 </script>
 
 <template>
   <li
-    data-component="ui-breadcrumb-item"
+    class="ui-breadcrumb-item"
     v-bind="nativeAttrs($attrs)"
     :aria-current="guarded"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-ui-breadcrumb-item-state="hostState || undefined"
   >
-    <span class="separator" aria-hidden="true"><UiIcon name="chevron-right" /></span>
+    <span class="separator" aria-hidden="true"><UiIcon
+        class="ui-icon"
+        name="chevron-right"
+      /></span>
     <span class="content"><slot /></span>
   </li>
 </template>
@@ -178,51 +104,54 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 <style scoped>
 /* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
        every step but the first. An icon slotted before the name sits with it. */
-[data-component~="ui-breadcrumb-item"] {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-inline-size: 0;
-  margin: 0;
-}
 
-.separator {
-  display: inline-flex;
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-breadcrumb-item"]:first-child .separator {
-  display: none;
-}
+@scope (.ui-breadcrumb-item) to (.ui-icon) {
+  :scope:where(:scope) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
+    margin: 0;
+  }
 
-.content {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-}
+  .separator {
+    display: inline-flex;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+  }
 
-.content > :slotted(a) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  color: var(--ui-text-secondary);
-  text-decoration: none;
-}
+  :scope:first-child .separator {
+    display: none;
+  }
 
-.content > :slotted(a:hover) {
-  color: var(--ui-text-primary);
-  text-decoration: underline;
-}
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+  }
 
-[data-component~="ui-breadcrumb-item"][data-ui-breadcrumb-item-state~="current"] .content {
-  color: var(--ui-text-primary);
-  font-weight: var(--ui-font-medium);
-}
+  .content > :slotted(a) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-1);
+    color: var(--ui-text-secondary);
+    text-decoration: none;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-breadcrumb-item"][hidden] {
-  display: none;
+  .content > :slotted(a:hover) {
+    color: var(--ui-text-primary);
+    text-decoration: underline;
+  }
+
+  :scope[data-ui-breadcrumb-item-state~="current"] .content {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-medium);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiBreadcrumbs.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 })
@@ -34,61 +35,14 @@ 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 !== ('nav'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-breadcrumbs> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-breadcrumbs> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('nav', 'ui-breadcrumbs')
 </script>
 
 <template>
   <nav
-    data-component="ui-breadcrumbs"
+    class="ui-breadcrumbs"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -101,25 +55,28 @@ if (
 <style scoped>
 /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */
-[data-component~="ui-breadcrumbs"] {
-  display: block;
-  min-inline-size: 0;
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-}
-
-ol {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-space-1) var(--ui-space-2);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-breadcrumbs"][hidden] {
-  display: none;
+
+@scope (.ui-breadcrumbs) {
+  :scope:where(:scope) {
+    display: block;
+    min-inline-size: 0;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+  }
+
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-1) var(--ui-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiButton.d.ts

@@ -136,9 +136,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    type: "button" | "submit" | "reset" | null;
-    shape: "pill" | "rounded" | null;
+    type: "button" | "reset" | "submit" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
+    shape: "pill" | "rounded" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "link" | "field" | "danger" | "solid" | "outline" | "ghost" | "card" | null;
     align: "center" | "start" | null;