@threadlabs/looma 0.19.1 → 0.21.0

package/vue/UiSidebar.vue

@@ -1,46 +1,149 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
-import * as controllerModule from '../components/ui-sidebar/ui-sidebar.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<{
-    breakpoint?: 'sm' | 'md' | 'lg'
-    collapsed?: boolean
-    maxWidth?: number
-    minWidth?: number
-    resizable?: boolean
-    resizeLabel?: string
-    resizeStep?: number
-    side?: 'start' | 'end'
-    width?: number
-  }>(),
-  {
-    breakpoint: 'md',
-    collapsed: false,
-    maxWidth: 480,
-    minWidth: 200,
-    resizable: false,
-    resizeLabel: 'Resize sidebar',
-    resizeStep: 16,
-    side: 'start',
-    width: 0,
-  },
-)
+const props = defineProps({
+  breakpoint: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  collapsed: { type: null as unknown as PropType<boolean | null>, default: false },
+  maxWidth: { type: null as unknown as PropType<number | null>, default: 480 },
+  minWidth: { type: null as unknown as PropType<number | null>, default: 200 },
+  resizable: { type: null as unknown as PropType<boolean | null>, default: false },
+  resizeLabel: { type: null as unknown as PropType<string | null>, default: 'Resize sidebar' },
+  resizeStep: { type: null as unknown as PropType<number | null>, default: 16 },
+  side: { type: null as unknown as PropType<'start' | 'end' | null>, default: 'start' },
+  width: { type: null as unknown as PropType<number | null>, default: 0 },
+})
+const checkedProps = computed(() => ({
+  breakpoint: checkedProp<'sm' | 'md' | 'lg'>(
+    props['breakpoint'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'breakpoint',
+    undefined,
+    ['sm', 'md', 'lg'],
+  ) as 'sm' | 'md' | 'lg',
+  collapsed: checkedProp<boolean>(
+    props['collapsed'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'collapsed',
+    undefined,
+    undefined,
+  ) as boolean,
+  maxWidth: checkedProp<number>(
+    props['maxWidth'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'maxWidth',
+    undefined,
+    undefined,
+  ) as number,
+  minWidth: checkedProp<number>(
+    props['minWidth'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'minWidth',
+    undefined,
+    undefined,
+  ) as number,
+  resizable: checkedProp<boolean>(
+    props['resizable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'resizable',
+    undefined,
+    undefined,
+  ) as boolean,
+  resizeLabel: checkedProp<string>(
+    props['resizeLabel'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'resizeLabel',
+    undefined,
+    undefined,
+  ) as string,
+  resizeStep: checkedProp<number>(
+    props['resizeStep'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'resizeStep',
+    undefined,
+    undefined,
+  ) as number,
+  side: checkedProp<'start' | 'end'>(
+    props['side'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'side',
+    undefined,
+    ['start', 'end'],
+  ) as 'start' | 'end',
+  width: checkedProp<number>(
+    props['width'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'width',
+    undefined,
+    undefined,
+  ) as number,
+}))
+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:width': [value: number]
   resize: [
-    detail: { readonly width: number; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+    event: CustomEvent<
+      { readonly width: number; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' }
+    >,
   ]
   toggle: [
-    detail: {
-      readonly open: boolean
-      readonly mode: 'docked' | 'drawer'
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly open: boolean
+        readonly mode: 'docked' | 'drawer'
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
 }>()
 
@@ -48,11 +151,28 @@ const root = ref<HTMLElement | null>(null)
 const resizerElement = useTemplateRef<HTMLElement>('resizer')
 const internalCollapsed = ref(false)
 const drawer = ref(false)
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('aside'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-sidebar> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-sidebar> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.side && `side side=${props.side}`,
+    checkedProps.value.side && 'side',
+    checkedProps.value.side != null && `side=${encodeURIComponent(checkedProps.value.side)}`,
     internalCollapsed.value && 'internalCollapsed',
   ].filter(Boolean).join(' ')
 )
@@ -82,10 +202,14 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   modeled: ['width'],
 })
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-sidebar/ui-sidebar.js',
+    definition: './components/ui-sidebar/ui-sidebar.html',
+  },
+  props: checkedProps,
   refs: { resizer: resizerElement },
   state: { internalCollapsed, drawer },
 })
@@ -94,7 +218,16 @@ useComponentHost(controllerModule.default, {
 <template>
   <aside
     data-component="ui-sidebar"
-    v-bind="$attrs"
+    v-bind="nativeAttrs($attrs)"
+    :data-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
+    :data-collapsed="reflectedProp('collapsed', 'collapsed', checkedProps.collapsed, undefined, false)"
+    :data-max-width="reflectedProp('maxWidth', 'max-width', checkedProps.maxWidth, undefined, false)"
+    :data-min-width="reflectedProp('minWidth', 'min-width', checkedProps.minWidth, undefined, false)"
+    :data-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
+    :data-resize-label="reflectedProp('resizeLabel', 'resize-label', checkedProps.resizeLabel, undefined, false)"
+    :data-resize-step="reflectedProp('resizeStep', 'resize-step', checkedProps.resizeStep, undefined, false)"
+    :data-side="reflectedProp('side', 'side', checkedProps.side, undefined, false)"
+    :data-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
     :data-ui-sidebar-state="hostState || undefined"
     ref="root"
   >
@@ -105,8 +238,8 @@ useComponentHost(controllerModule.default, {
       aria-orientation="vertical"
       tabindex="0"
       data-ui-affordance="resize"
-      :aria-label="resizeLabel"
-      :hidden="!resizable || drawer || internalCollapsed"
+      :aria-label="checkedProps.resizeLabel ?? undefined"
+      :hidden="!checkedProps.resizable || drawer || internalCollapsed"
       ref="resizer"
     >
       <span class="guide" aria-hidden="true"></span>

package/vue/UiSpinner.d.ts

@@ -1,10 +1,25 @@
-type __VLS_Props = {
-    label?: string;
-    size?: 'sm' | 'md';
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    size: "sm" | "md";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md" | null>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string | null;
+    size: "sm" | "md" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiSpinner.vue

@@ -1,24 +1,93 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 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 = withDefaults(
-  defineProps<{
-    label?: string
-    size?: 'sm' | 'md'
-  }>(),
-  {
-    label: '',
-    size: 'md',
-  },
-)
+const props = defineProps({
+  label: { type: null as unknown as PropType<string | null>, default: '' },
+  size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
+})
+const checkedProps = computed(() => ({
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    undefined,
+    undefined,
+  ) as string,
+  size: checkedProp<'sm' | 'md'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    undefined,
+    ['sm', 'md'],
+  ) as 'sm' | 'md',
+}))
+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 !== ('span'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-spinner> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-spinner> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.size && `size size=${props.size}`,
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -40,17 +109,39 @@ function attribute(value: unknown): any {
   <span
     data-component="ui-spinner"
     class="ring"
-    v-bind="$attrs"
-    :role="attribute(({ true: 'status', false: null })[`${label !== ''}`])"
-    :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
-    ? String(({ true: label, false: null })[`${label !== ''}`])
-    : attribute(({ true: label, false: null })[`${label !== ''}`])"
-    :aria-live="typeof (({ true: 'polite', false: null })[`${label !== ''}`]) === 'boolean'
-    ? String(({ true: 'polite', false: null })[`${label !== ''}`])
-    : attribute(({ true: 'polite', false: null })[`${label !== ''}`])"
-    :aria-hidden="typeof (({ true: null, false: 'true' })[`${label !== ''}`]) === 'boolean'
-    ? String(({ true: null, false: 'true' })[`${label !== ''}`])
-    : attribute(({ true: null, false: 'true' })[`${label !== ''}`])"
+    v-bind="nativeAttrs($attrs)"
+    :role="attribute(
+      (({ true: 'status', false: null }) as Record<string, any>)[`${checkedProps.label !== ''}`],
+    )"
+    :aria-label="typeof ((({ true: checkedProps.label, false: null }) as Record<string, any>)[
+      `${checkedProps.label !== ''}`
+    ]) === 'boolean'
+    ? String(
+      (({ true: checkedProps.label, false: null }) as Record<string, any>)[
+        `${checkedProps.label !== ''}`
+      ],
+    )
+    : attribute(
+      (({ true: checkedProps.label, false: null }) as Record<string, any>)[
+        `${checkedProps.label !== ''}`
+      ],
+    )"
+    :aria-live="typeof ((({ true: 'polite', false: null }) as Record<string, any>)[`${checkedProps.label !== ''}`])
+      === 'boolean'
+    ? String(
+      (({ true: 'polite', false: null }) as Record<string, any>)[`${checkedProps.label !== ''}`],
+    )
+    : attribute(
+      (({ true: 'polite', false: null }) as Record<string, any>)[`${checkedProps.label !== ''}`],
+    )"
+    :aria-hidden="typeof ((({ true: null, false: 'true' }) as Record<string, any>)[`${checkedProps.label !== ''}`])
+      === 'boolean'
+    ? String((({ true: null, false: 'true' }) as Record<string, any>)[`${checkedProps.label !== ''}`])
+    : attribute(
+      (({ true: null, false: 'true' }) as Record<string, any>)[`${checkedProps.label !== ''}`],
+    )"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-spinner-state="hostState || undefined"
   ><svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
       <circle class="track" cx="25" cy="25" r="20"></circle>

package/vue/UiStack.d.ts

@@ -1,13 +1,39 @@
-type __VLS_Props = {
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
-    justify?: 'start' | 'center' | 'end' | 'between';
-};
+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<{
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | null>;
+        default: null;
+    };
+    gap: {
+        type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
+        default: null;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "between" | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | null>;
+        default: null;
+    };
+    gap: {
+        type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
+        default: null;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "between" | null>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    align: "center" | "start" | "stretch" | "end" | null;
+    gap: "s" | "xs" | "m" | "l" | "xl" | null;
+    justify: "center" | "start" | "end" | "between" | 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/UiStack.vue

@@ -1,27 +1,123 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 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<{
-  align?: 'start' | 'center' | 'end' | 'stretch'
-  gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
-  justify?: 'start' | 'center' | 'end' | 'between'
-}>()
+const props = defineProps({
+  align: {
+    type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
+    default: null,
+  },
+  gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
+  justify: {
+    type: null as unknown as PropType<'start' | 'center' | 'end' | 'between' | null>,
+    default: null,
+  },
+})
+const checkedProps = computed(() => ({
+  align: checkedProp<'start' | 'center' | 'end' | 'stretch'>(
+    props['align'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'align',
+    undefined,
+    ['start', 'center', 'end', 'stretch'],
+  ),
+  gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
+    props['gap'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'gap',
+    undefined,
+    ['xs', 's', 'm', 'l', 'xl'],
+  ),
+  justify: checkedProp<'start' | 'center' | 'end' | 'between'>(
+    props['justify'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'justify',
+    undefined,
+    ['start', 'center', 'end', 'between'],
+  ),
+}))
+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-stack> has an incompatible root.'), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({
+      code: 'HR005',
+      message: 'Server markup for <ui-stack> has an incompatible root.',
+    }),
+  })
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.gap && `gap gap=${props.gap}`,
-    props.align && `align align=${props.align}`,
-    props.justify && `justify justify=${props.justify}`,
+    checkedProps.value.gap && 'gap',
+    checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
+    checkedProps.value.align && 'align',
+    checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`,
+    checkedProps.value.justify && 'justify',
+    checkedProps.value.justify != null
+    && `justify=${encodeURIComponent(checkedProps.value.justify)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
 
 <template>
-  <div data-component="ui-stack" v-bind="$attrs" :data-ui-stack-state="hostState || undefined">
+  <div
+    data-component="ui-stack"
+    v-bind="nativeAttrs($attrs)"
+    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
+    :data-ui-stack-state="hostState || undefined"
+  >
     <slot />
   </div>
 </template>