@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiNavItem.vue

@@ -1,8 +1,15 @@
-<!-- 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, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { preserveRootFocus } from './host'
+import {
+  attribute,
+  checkHydratedRoot,
+  concat,
+  nativeAttrs,
+  preserveRootFocus,
+  useReflectedProp,
+} from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -146,39 +153,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()
 
 const rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
 const root = rootArmElement
@@ -259,23 +234,7 @@ const guardedBinding = computed(() => {
         concat(checkedProps.value.current),
       ))
 })
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element)
-    || hydrationNode.localName !== ((checkedProps.value.as === 'a') ? 'a' : ('button')))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-nav-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-nav-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot((checkedProps.value.as === 'a') ? 'a' : ('button'), 'ui-nav-item')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -288,43 +247,12 @@ const hostState = computed(() =>
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
   ].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>
   <a
     v-if="checkedProps.as === 'a'"
-    data-component="ui-nav-item"
+    class="ui-nav-item"
     v-bind="nativeAttrs($attrs)"
     :href="checkedProps.href ?? undefined"
     :target="checkedProps.target ?? undefined"
@@ -347,7 +275,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     <span class="trailing"><slot name="trailing" /></span></a>
   <button
     v-else
-    data-component="ui-nav-item"
+    class="ui-nav-item"
     type="button"
     v-bind="nativeAttrs($attrs)"
     :aria-current="guardedBinding"
@@ -393,158 +321,157 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
    default slot), and an optional line under it (description), such as the record a section
    belongs to. Label and description are one line each and end in an ellipsis, so every item in a
    navigation has the same height and the rail never grows sideways. */
-[data-component~="ui-nav-item"] {
-  --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
-  --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--ui-nav-gap);
-  inline-size: var(--ui-nav-item-inline-size, 100%);
-  min-inline-size: 0;
-  min-block-size: var(--ui-nav-min-block-size);
-  margin: 0;
-  padding-block: var(--ui-nav-padding-block);
-  padding-inline: var(--ui-nav-padding-inline);
-  border: 0;
-  border-radius: var(--ui-selection-radius);
-  background: transparent;
-  color: var(--ui-text-secondary);
-  font: inherit;
-  font-weight: var(--ui-font-normal);
-  text-align: start;
-  text-decoration: none;
-  cursor: pointer;
-  appearance: none;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-[data-component~="ui-nav-item"]:hover:not([aria-current]) {
-  background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
-  color: var(--ui-text-primary);
-}
 
 /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
    box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
-[data-component~="ui-nav-item"]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: calc(-1 * var(--ui-focus-width));
-}
-
-[data-component~="ui-nav-item"][aria-current] {
-  background: var(
-    --ui-nav-item-current-surface,
-    var(--_ui-selection-context-surface, var(--ui-selection-surface))
-  );
-  color: var(--_ui-selection-context-text, var(--ui-selection-text));
-}
 
 /* A complete inset edge separates pale fills without changing rail geometry. */
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
-  box-shadow: inset 0 0 0 var(--ui-border-width)
-    var(--_ui-selection-context-border, var(--ui-selection-border));
-}
-
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"] {
-  border-radius: 0;
-}
 
 /* A line treatment has straight corners and a continuous edge. Surface treatment has
    shared rounded corners and no edge marker; never combine the two geometries.
    The line is a border, not a fill: forced colors replace backgrounds but keep a
    border, so the current item stays marked in high contrast. Logical edges mirror it in a
    right-to-left page. */
-.indicator {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  display: none;
-  border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
-}
 
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
-  display: block;
-}
+/* An unused region takes no space. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+
+@scope (.ui-nav-item) {
+  :scope:where(:scope) {
+    --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
+    --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-nav-gap);
+    inline-size: var(--ui-nav-item-inline-size, 100%);
+    min-inline-size: 0;
+    min-block-size: var(--ui-nav-min-block-size);
+    margin: 0;
+    padding-block: var(--ui-nav-padding-block);
+    padding-inline: var(--ui-nav-padding-inline);
+    border: 0;
+    border-radius: var(--ui-selection-radius);
+    background: transparent;
+    color: var(--ui-text-secondary);
+    font: inherit;
+    font-weight: var(--ui-font-normal);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    appearance: none;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-@media (forced-colors: active) {
-  /* System colors may erase the selected fill. Trace the complete surface, without
-     creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
-  [data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible) {
-    outline: var(--ui-border-width) solid Highlight;
-    outline-offset: calc(-1 * var(--ui-border-width));
+  :scope:where(:scope):is(:hover:not([aria-current])) {
+    background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
+    color: var(--ui-text-primary);
+  }
+  :scope:where(:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
+  }
+
+  :scope:where(:scope):is([aria-current]) {
+    background: var(
+      --ui-nav-item-current-surface,
+      var(--_ui-selection-context-surface, var(--ui-selection-surface))
+    );
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  }
+  :scope:where(:scope):is([data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current])) {
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
+  }
+
+  :scope:where(:scope):is([data-ui-nav-item-state~="variant=line"]) {
+    border-radius: 0;
   }
   .indicator {
-    border-inline-start-color: Highlight;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    display: none;
+    border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
   }
-}
 
-.leading,
-.trailing {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--ui-nav-icon-size);
-  color: inherit;
-  font-size: var(--ui-nav-icon-size);
-}
+  :scope[data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
+    display: block;
+  }
 
-.content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--ui-space-0-5, 2px);
-  min-inline-size: 0;
-}
+  @media (forced-colors: active) {
+    /* System colors may erase the selected fill. Trace the complete surface, without
+       creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
+    :scope:where(:scope):is([data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible)) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+    .indicator {
+      border-inline-start-color: Highlight;
+    }
+  }
 
-.label,
-.description {
-  display: block;
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .leading, .trailing {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ui-nav-icon-size);
+    color: inherit;
+    font-size: var(--ui-nav-icon-size);
+  }
 
-.label {
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height-tight);
-}
+  .content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--ui-space-0-5, 2px);
+    min-inline-size: 0;
+  }
 
-.description {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-normal);
-  line-height: var(--ui-line-height-tight);
-}
+  .label, .description {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] {
-  min-block-size: var(--ui-nav-compact-min-block-size);
-  padding-block: var(--ui-nav-compact-padding-block);
-  padding-inline: var(--ui-nav-compact-padding-inline);
-}
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label {
-  font-size: var(--ui-font-size-sm);
-}
+  .label {
+    font-size: var(--ui-font-size-md);
+    line-height: var(--ui-line-height-tight);
+  }
 
-@media (pointer: coarse) {
-  [data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] {
-    min-block-size: var(--ui-control-min-block-size);
+  .description {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-tight);
   }
-}
 
-/* An unused region takes no space. */
-.leading:empty,
-.trailing:empty,
-.description:empty {
-  display: none;
-}
+  :scope:where(:scope):is([data-ui-nav-item-state~="density=compact"]) {
+    min-block-size: var(--ui-nav-compact-min-block-size);
+    padding-block: var(--ui-nav-compact-padding-block);
+    padding-inline: var(--ui-nav-compact-padding-inline);
+  }
+  :scope[data-ui-nav-item-state~="density=compact"] .label {
+    font-size: var(--ui-font-size-sm);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-nav-item"][hidden] {
-  display: none;
+  @media (pointer: coarse) {
+    :scope:where(:scope):is([data-ui-nav-item-state~="density=compact"]) {
+      min-block-size: var(--ui-control-min-block-size);
+    }
+  }
+  .leading:empty, .trailing:empty, .description:empty {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiPageHeader.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 })
@@ -36,56 +37,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 hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('header'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-page-header> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-page-header> has an incompatible root.',
-      }),
-    },
-  )
-}
+const reflectedProp = useReflectedProp()
+
+checkHydratedRoot('header', 'ui-page-header')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -98,7 +52,7 @@ const hostState = computed(() =>
 
 <template>
   <header
-    data-component="ui-page-header"
+    class="ui-page-header"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -116,81 +70,81 @@ const hostState = computed(() =>
 /* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
        short eyebrow above it, a line or two of description under it, and the view's own actions at
        the end. Every view titles itself the same way, at the same size. */
-[data-component~="ui-page-header"] {
-  display: flex;
-  flex-wrap: wrap;
-  inline-size: 100%;
-  align-items: center;
-  gap: var(--ui-space-3) var(--ui-space-4);
-  min-inline-size: 0;
-}
-
-.leading {
-  display: inline-flex;
-  flex: none;
-  align-self: center;
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-2xl);
-}
-
-.copy {
-  display: flex;
-  flex: 1 1 16rem;
-  flex-direction: column;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-}
-
-.eyebrow {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.title {
-  margin: 0;
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-2xl);
-  font-weight: var(--ui-font-bold, 700);
-  line-height: var(--ui-line-height-tight);
-  overflow-wrap: anywhere;
-}
-
-.description {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height);
-}
-
-.actions {
-  display: inline-flex;
-  flex: none;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-space-2);
-}
-
-[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"] {
-  flex-direction: column;
-  text-align: center;
-}
-
-[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"] .copy {
-  align-items: center;
-  flex-basis: auto;
-}
-
-.leading:empty,
-.eyebrow:empty,
-.description:empty,
-.actions:empty {
-  display: none;
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-page-header"][hidden] {
-  display: none;
+
+@scope (.ui-page-header) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-wrap: wrap;
+    inline-size: 100%;
+    align-items: center;
+    gap: var(--ui-space-3) var(--ui-space-4);
+    min-inline-size: 0;
+  }
+
+  .leading {
+    display: inline-flex;
+    flex: none;
+    align-self: center;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-2xl);
+  }
+
+  .copy {
+    display: flex;
+    flex: 1 1 16rem;
+    flex-direction: column;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+  }
+
+  .eyebrow {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-semibold);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .title {
+    margin: 0;
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-2xl);
+    font-weight: var(--ui-font-bold, 700);
+    line-height: var(--ui-line-height-tight);
+    overflow-wrap: anywhere;
+  }
+
+  .description {
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-md);
+    line-height: var(--ui-line-height);
+  }
+
+  .actions {
+    display: inline-flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  :scope:where(:scope):is([data-ui-page-header-state~="align=center"]) {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  :scope[data-ui-page-header-state~="align=center"] .copy {
+    align-items: center;
+    flex-basis: auto;
+  }
+
+  .leading:empty, .eyebrow:empty, .description:empty, .actions:empty {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>