@threadlabs/looma 0.19.0 → 0.20.0

package/vue/UiRadioGroup.vue

@@ -1,57 +1,167 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.11 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import * as controllerModule from '../components/ui-radio-group/ui-radio-group.js'
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    invalid?: boolean
-    label?: string
-    name?: string
-    orientation?: 'horizontal' | 'vertical'
-    required?: boolean
-    value?: string
-  }>(),
-  {
-    disabled: false,
-    invalid: false,
-    label: 'Options',
-    name: '',
-    orientation: 'horizontal',
-    required: false,
-    value: '',
+const props = defineProps({
+  disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  invalid: { type: null as unknown as PropType<boolean | null>, default: false },
+  label: { type: null as unknown as PropType<string | null>, default: 'Options' },
+  name: { type: null as unknown as PropType<string | null>, default: '' },
+  orientation: {
+    type: null as unknown as PropType<'horizontal' | 'vertical' | null>,
+    default: 'horizontal',
   },
-)
+  required: { type: null as unknown as PropType<boolean | null>, default: false },
+  value: { type: null as unknown as PropType<string | null>, default: '' },
+})
+const checkedProps = computed(() => ({
+  disabled: checkedProp<boolean>(
+    props['disabled'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'disabled',
+    undefined,
+    undefined,
+  ) as boolean,
+  invalid: checkedProp<boolean>(
+    props['invalid'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'invalid',
+    undefined,
+    undefined,
+  ) as boolean,
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    undefined,
+    undefined,
+  ) as string,
+  name: checkedProp<string>(
+    props['name'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'name',
+    undefined,
+    undefined,
+  ) as string,
+  orientation: checkedProp<'horizontal' | 'vertical'>(
+    props['orientation'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'orientation',
+    undefined,
+    ['horizontal', 'vertical'],
+  ) as 'horizontal' | 'vertical',
+  required: checkedProp<boolean>(
+    props['required'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'required',
+    undefined,
+    undefined,
+  ) as boolean,
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    undefined,
+    undefined,
+  ) as string,
+}))
+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 emit = defineEmits<{
   'update:value': [value: string]
   select: [
-    detail: {
-      readonly value: string
-      readonly previousValue: string
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly value: string
+        readonly previousValue: string
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
   change: [
-    detail: {
-      readonly checked: boolean
-      readonly value: string
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly checked: boolean
+        readonly value: string
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
 }>()
 
 const root = ref<HTMLElement | null>(null)
 const internalValue = ref('')
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('fieldset'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-radio-group> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-radio-group> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.invalid && 'invalid',
-    props.orientation && `orientation orientation=${props.orientation}`,
+    checkedProps.value.invalid && 'invalid',
+    checkedProps.value.orientation && 'orientation',
+    checkedProps.value.orientation != null
+    && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -81,10 +191,14 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   modeled: ['value'],
 })
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-radio-group/ui-radio-group.js',
+    definition: './components/ui-radio-group/ui-radio-group.html',
+  },
+  props: checkedProps,
   state: { internalValue },
 })
 </script>
@@ -93,14 +207,21 @@ useComponentHost(controllerModule.default, {
   <fieldset
     data-component="ui-radio-group"
     role="radiogroup"
-    v-bind="$attrs"
-    :aria-required="required"
-    :aria-invalid="invalid"
-    :disabled="disabled"
+    v-bind="nativeAttrs($attrs)"
+    :aria-required="checkedProps.required ?? undefined"
+    :aria-invalid="checkedProps.invalid ?? undefined"
+    :disabled="checkedProps.disabled ?? undefined"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-radio-group-state="hostState || undefined"
     ref="root"
   >
-    <legend>{{ label }}</legend>
+    <legend>{{ checkedProps.label }}</legend>
     <slot />
   </fieldset>
 </template>

package/vue/UiReel.d.ts

@@ -1,13 +1,39 @@
-type __VLS_Props = {
-    gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
-    itemWidth?: 'sm' | 'md' | 'lg';
-    snap?: 'start' | 'center';
-};
+import type { PropType } from 'vue';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    gap: {
+        type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
+        default: null;
+    };
+    itemWidth: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+        default: null;
+    };
+    snap: {
+        type: PropType<"start" | "center" | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    gap: {
+        type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
+        default: null;
+    };
+    itemWidth: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+        default: null;
+    };
+    snap: {
+        type: PropType<"start" | "center" | null>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    gap: "s" | "xs" | "m" | "l" | "xl" | null;
+    itemWidth: "sm" | "md" | "lg" | null;
+    snap: "center" | "start" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiReel.vue

@@ -1,21 +1,104 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.11 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import { checkedProp } from './props'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<{
-  gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
-  itemWidth?: 'sm' | 'md' | 'lg'
-  snap?: 'start' | 'center'
-}>()
+const props = defineProps({
+  gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
+  itemWidth: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: null },
+  snap: { type: null as unknown as PropType<'start' | 'center' | null>, default: null },
+})
+const checkedProps = computed(() => ({
+  gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
+    props['gap'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'gap',
+    undefined,
+    ['xs', 's', 'm', 'l', 'xl'],
+  ),
+  itemWidth: checkedProp<'sm' | 'md' | 'lg'>(
+    props['itemWidth'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'itemWidth',
+    undefined,
+    ['sm', 'md', 'lg'],
+  ),
+  snap: checkedProp<'start' | 'center'>(
+    props['snap'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'snap',
+    undefined,
+    ['start', 'center'],
+  ),
+}))
+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 !== ('div'))
+) {
+  throw Object.assign(new Error('HR005: Server markup for <ui-reel> has an incompatible root.'), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({
+      code: 'HR005',
+      message: 'Server markup for <ui-reel> has an incompatible root.',
+    }),
+  })
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.gap && `gap gap=${props.gap}`,
-    props.itemWidth && `itemWidth itemWidth=${props.itemWidth}`,
-    props.snap && `snap snap=${props.snap}`,
+    checkedProps.value.gap && 'gap',
+    checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
+    checkedProps.value.itemWidth && 'itemWidth',
+    checkedProps.value.itemWidth != null
+    && `itemWidth=${encodeURIComponent(checkedProps.value.itemWidth)}`,
+    checkedProps.value.snap && 'snap',
+    checkedProps.value.snap != null && `snap=${encodeURIComponent(checkedProps.value.snap)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -25,7 +108,10 @@ const hostState = computed(() =>
     data-component="ui-reel"
     role="region"
     tabindex="0"
-    v-bind="$attrs"
+    v-bind="nativeAttrs($attrs)"
+    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-item-width="reflectedProp('itemWidth', 'item-width', checkedProps.itemWidth, undefined, false)"
+    :data-snap="reflectedProp('snap', 'snap', checkedProps.snap, undefined, false)"
     :data-ui-reel-state="hostState || undefined"
   >
     <slot />

package/vue/UiScrollArea.d.ts

@@ -1,13 +1,21 @@
-type __VLS_Props = {
-    orientation?: 'vertical' | 'horizontal';
-};
+import type { PropType } from 'vue';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    orientation: "vertical" | "horizontal";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    orientation: {
+        type: PropType<"vertical" | "horizontal" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    orientation: {
+        type: PropType<"vertical" | "horizontal" | null>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiScrollArea.vue

@@ -1,36 +1,104 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.11 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
-import * as controllerModule from '../components/ui-scroll-area/ui-scroll-area.js'
+import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    orientation?: 'vertical' | 'horizontal'
-  }>(),
-  {
-    orientation: 'vertical',
+const props = defineProps({
+  orientation: {
+    type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
+    default: 'vertical',
   },
-)
+})
+const checkedProps = computed(() => ({
+  orientation: checkedProp<'vertical' | 'horizontal'>(
+    props['orientation'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'orientation',
+    undefined,
+    ['vertical', 'horizontal'],
+  ) as 'vertical' | 'horizontal',
+}))
+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 root = ref<HTMLElement | null>(null)
 const contentElement = useTemplateRef<HTMLElement>('content')
+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-scroll-area> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-scroll-area> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.orientation && `orientation orientation=${props.orientation}`,
+    checkedProps.value.orientation && 'orientation',
+    checkedProps.value.orientation != null
+    && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
   ].filter(Boolean).join(' ')
 )
 
 const dispatch = createDispatch(root)
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-scroll-area/ui-scroll-area.js',
+    definition: './components/ui-scroll-area/ui-scroll-area.html',
+  },
+  props: checkedProps,
   refs: { content: contentElement },
 })
 </script>
@@ -38,7 +106,8 @@ useComponentHost(controllerModule.default, {
 <template>
   <div
     data-component="ui-scroll-area"
-    v-bind="$attrs"
+    v-bind="nativeAttrs($attrs)"
+    :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
     ref="root"
   >

package/vue/UiSearchResultRow.d.ts

@@ -1,7 +1,4 @@
-type __VLS_Props = {
-    disabled?: boolean;
-    selected?: boolean;
-};
+import type { PropType } from 'vue';
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_1) => any;
@@ -14,10 +11,28 @@ type __VLS_Slots = {} & {
 } & {
     trailing?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    disabled: boolean;
-    selected: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean | null;
+    selected: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;