@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiFormField.vue

@@ -1,8 +1,14 @@
-<!-- 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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -68,57 +74,11 @@ 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 reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-form-field> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-form-field> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-form-field')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -152,7 +112,7 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
 
 <template>
   <div
-    data-component="ui-form-field"
+    class="ui-form-field"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
@@ -202,81 +162,80 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
   inherits: false;
 }
 
-[data-component~="ui-form-field"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-form-field-danger: var(--ui-form-field-danger);
-  --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
-  --_ui-form-field-label-text: var(--ui-form-field-label-text);
-  --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
-  --_ui-form-field-help-text: var(--ui-form-field-help-text);
-  --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
-
-  display: grid;
-  gap: var(--ui-space-2);
-  min-inline-size: var(--ui-form-field-min-inline-size, 0);
-  align-content: start;
-  color: var(--ui-text-primary);
-}
-
 /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
    in Vue), and generates no box of its own, so an empty region adds no gap. */
-.label,
-.help,
-.error {
-  display: contents;
-}
-
-.label {
-  color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
-  font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
-}
 
 /* A label action, such as a small help button, sits after the label text in a box one line
    tall, centred on the first line and overflowing it. A button taller than a line of label
    text then never makes this field's label row taller than its neighbours' in a grid row. */
-.label:has(> .label-action > *) {
-  display: flex;
-  align-items: start;
-  gap: var(--ui-space-1);
-}
-
-.label-action {
-  display: flex;
-  align-items: unsafe center;
-  block-size: 1lh;
-}
-
-.label-action:not(:has(> *)) {
-  display: none;
-}
-
-.help {
-  color: var(--_ui-form-field-help-text, var(--ui-text-muted));
-  font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
-  line-height: var(--ui-line-height-md);
-}
-
-.help > :slotted(*) {
-  min-block-size: var(--_ui-form-field-help-min-block-size, 0);
-}
-
-.error {
-  display: none;
-}
-
-[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error {
-  display: contents;
-}
 
 /* An error reads in the danger colour, the one the invalid control's border takes. */
-.error,
-:slotted([role="alert"]) {
-  color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
-  font-size: var(--ui-font-size-sm);
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-form-field"][hidden] {
-  display: none;
+
+@scope (.ui-form-field) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-form-field-danger: var(--ui-form-field-danger);
+    --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+    --_ui-form-field-label-text: var(--ui-form-field-label-text);
+    --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+    --_ui-form-field-help-text: var(--ui-form-field-help-text);
+    --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
+
+    display: grid;
+    gap: var(--ui-space-2);
+    min-inline-size: var(--ui-form-field-min-inline-size, 0);
+    align-content: start;
+    color: var(--ui-text-primary);
+  }
+  .label, .help, .error {
+    display: contents;
+  }
+
+  .label {
+    color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+    font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+  }
+  .label:has(> .label-action > *) {
+    display: flex;
+    align-items: start;
+    gap: var(--ui-space-1);
+  }
+
+  .label-action {
+    display: flex;
+    align-items: unsafe center;
+    block-size: 1lh;
+  }
+
+  .label-action:not(:has(> *)) {
+    display: none;
+  }
+
+  .help {
+    color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+    font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
+    line-height: var(--ui-line-height-md);
+  }
+
+  .help > :slotted(*) {
+    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+  }
+
+  .error {
+    display: none;
+  }
+
+  :scope[data-ui-form-field-state~="invalid"] .error {
+    display: contents;
+  }
+  .error, :slotted([role="alert"]) {
+    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+    font-size: var(--ui-font-size-sm);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiGrid.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>> & Readonly<{}>, {
+    min: "sm" | "md" | "lg" | null;
     columns: number | null;
     gap: "s" | "xs" | "m" | "l" | "xl" | null;
-    min: "sm" | "md" | "lg" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiGrid.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 })
@@ -66,53 +67,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 !== ('div'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-grid> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-grid> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-grid')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -127,9 +84,9 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-grid"
+    class="ui-grid"
     v-bind="nativeAttrs($attrs)"
-    :style="{ '--_grid-column-cap': checkedProps.columns ?? undefined }"
+    :style="{ '--_grid-column-cap': checkedProps.columns?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
@@ -151,60 +108,65 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-grid"] {
-  --_grid-gap: var(--ui-space-4);
-  --_grid-min: 12rem;
-  display: grid;
-  gap: var(--ui-grid-gap, var(--_grid-gap));
-  grid-template-columns:
-    repeat(
-      auto-fit,
-      minmax(
-        min(
-          max(
-            var(--ui-grid-min, var(--_grid-min)),
-            calc(
-              (
-                100% -
-                  (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))
-              ) /
-                max(1, var(--_grid-column-cap, 9999))
-            )
-          ),
-          100%
-        ),
-        1fr
-      )
-    );
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  margin: 0;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-grid"][data-ui-grid-state~="gap=xs"] {
-  --_grid-gap: var(--ui-space-2);
-}
-[data-component~="ui-grid"][data-ui-grid-state~="gap=s"] {
-  --_grid-gap: var(--ui-space-3);
-}
-[data-component~="ui-grid"][data-ui-grid-state~="gap=m"] {
-  --_grid-gap: var(--ui-space-4);
-}
-[data-component~="ui-grid"][data-ui-grid-state~="gap=l"] {
-  --_grid-gap: var(--ui-space-5);
-}
-[data-component~="ui-grid"][data-ui-grid-state~="gap=xl"] {
-  --_grid-gap: var(--ui-space-6);
-}
-[data-component~="ui-grid"][data-ui-grid-state~="min=md"] {
-  --_grid-min: 16rem;
-}
-[data-component~="ui-grid"][data-ui-grid-state~="min=lg"] {
-  --_grid-min: 20rem;
-}
+@scope (.ui-grid) {
+  :scope:where(:scope) {
+    --_grid-gap: var(--ui-space-4);
+    --_grid-min: 12rem;
+    display: grid;
+    gap: var(--ui-grid-gap, var(--_grid-gap));
+    grid-template-columns:
+      repeat(
+        auto-fit,
+        minmax(
+          min(
+            max(
+              var(--ui-grid-min, var(--_grid-min)),
+              calc(
+                (
+                  100% -
+                    (
+                    max(1, var(--_grid-column-cap, 9999)) - 1
+                  ) *
+                    var(--ui-grid-gap, var(--_grid-gap))
+                ) /
+                  max(1, var(--_grid-column-cap, 9999))
+              )
+            ),
+            100%
+          ),
+          1fr
+        )
+      );
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-grid"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-grid-state~="gap=xs"]) {
+    --_grid-gap: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-grid-state~="gap=s"]) {
+    --_grid-gap: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-grid-state~="gap=m"]) {
+    --_grid-gap: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-grid-state~="gap=l"]) {
+    --_grid-gap: var(--ui-space-5);
+  }
+  :scope:where(:scope):is([data-ui-grid-state~="gap=xl"]) {
+    --_grid-gap: var(--ui-space-6);
+  }
+  :scope:where(:scope):is([data-ui-grid-state~="min=md"]) {
+    --_grid-min: 16rem;
+  }
+  :scope:where(:scope):is([data-ui-grid-state~="min=lg"]) {
+    --_grid-min: 20rem;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiIcon.vue

@@ -1,7 +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, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import {
+  attribute,
+  checkHydratedRoot,
+  cycleCheckedComputed,
+  list,
+  nativeAttrs,
+  useReflectedProp,
+} from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -35,63 +43,8 @@ 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()
 
-// Vue may return an in-progress computed value on a cyclic read; guard the public value access instead.
-function cycleCheckedComputed<T>(evaluate: () => T) {
-  const value = computed(evaluate)
-  let reading = false
-  return new Proxy(value, {
-    get(target, property) {
-      if (property !== 'value') return Reflect.get(target, property)
-      if (reading) {
-        const message = 'A reactive computed value depends on itself.'
-        throw Object.assign(new Error(`HR006: ${message}`), {
-          name: 'HtmlDiagnosticError',
-          diagnostic: Object.freeze({ code: 'HR006', message }),
-        })
-      }
-      reading = true
-      try {
-        return target.value
-      } finally {
-        reading = false
-      }
-    },
-  })
-}
 const shapes = cycleCheckedComputed(() =>
   (({
     'align-center': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M17 12H7' }, {
@@ -464,41 +417,12 @@ const shapes = cycleCheckedComputed(() =>
     x: [{ tag: 'path', d: 'M18 6 6 18' }, { tag: 'path', d: 'm6 6 12 12' }],
   }) as Record<string, any>)[checkedProps.value.name]
 )
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-icon> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-icon> has an incompatible root.',
-    }),
-  })
-}
-
-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)
-}
-
-function list(value: unknown): any[] {
-  return Array.isArray(value) ? value : []
-}
+checkHydratedRoot('span', 'ui-icon')
 </script>
 
 <template>
   <span
-    data-component="ui-icon"
+    class="ui-icon"
     aria-hidden="true"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -554,25 +478,27 @@ function list(value: unknown): any[] {
   inherits: false;
 }
 
-[data-component~="ui-icon"] {
-  /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
-     sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
-  --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-  display: inline-flex;
-  flex: none;
-  inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
-  block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
-}
+@scope (.ui-icon) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
+       sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
+    --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
 
-svg {
-  inline-size: 100%;
-  block-size: 100%;
-  stroke-width: var(--_ui-icon-stroke-width, 2);
-}
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+    block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon"][hidden] {
-  display: none;
+  svg {
+    inline-size: 100%;
+    block-size: 100%;
+    stroke-width: var(--_ui-icon-stroke-width, 2);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiIconButton.d.ts

@@ -95,9 +95,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     label: string | null;
-    guide: "bar" | "dot" | null;
-    round: boolean | null;
     size: "sm" | "md" | "lg" | null;
+    round: boolean | null;
+    guide: "bar" | "dot" | null;
     tone: "neutral" | "accent" | null;
     variant: "solid" | "outline" | "ghost" | null;
     disabled: boolean | null;