@threadlabs/looma 0.21.5 → 0.22.0

package/vue/UiSearchShell.vue

@@ -1,12 +1,45 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    dismissible: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'dismissible' },
+      description:
+        'Allows backdrop activation to close the search surface. Escape always closes it.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Provides the native dialog\'s accessible name.',
+      default: 'Search',
+    },
+    modal: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'modal' },
+      description: 'Makes the rest of the page inert while the search surface is open.',
+      default: false,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Shows the search surface.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   dismissible: { type: null as unknown as PropType<boolean | null>, default: false },
   label: { type: null as unknown as PropType<string | null>, default: 'Search' },
@@ -19,32 +52,24 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'dismissible',
-    undefined,
-    undefined,
   ) as boolean,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   modal: checkedProp<boolean>(
     props['modal'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'modal',
-    undefined,
-    undefined,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -100,6 +125,7 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 const dialogElement = useTemplateRef<HTMLElement>('dialog')
 const internalOpen = ref(false)
+provide('html-next:ui-search-shell:internalOpen', internalOpen)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -152,6 +178,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   <div
     data-component="ui-search-shell"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-dismissible="reflectedProp('dismissible', 'dismissible', checkedProps.dismissible, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-modal="reflectedProp('modal', 'modal', checkedProps.modal, undefined, false)"

package/vue/UiSection.vue

@@ -1,11 +1,41 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    heading: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'heading' },
+      description:
+        'The section\'s heading, an h2. Leave it empty for a section with no visible heading, and name the section with aria-label.',
+      default: '',
+    },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'danger marks a section of destructive actions (a danger zone): its heading and a card\'s border take the danger colour.',
+      values: ['neutral', 'danger'],
+      default: 'neutral',
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'How the section is set apart. plain is a heading and content in the flow of the page; card sits it on a bordered surface, for a settings group; divided\n      rules it off from the section before it, for a long form.',
+      values: ['plain', 'card', 'divided'],
+      default: 'plain',
+    },
+  },
+}
 const props = defineProps({
   heading: { type: null as unknown as PropType<string | null>, default: '' },
   tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
@@ -20,24 +50,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'heading',
-    undefined,
-    undefined,
   ) as string,
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
-    undefined,
-    ['neutral', 'danger'],
   ) as 'neutral' | 'danger',
   variant: checkedProp<'plain' | 'card' | 'divided'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
-    undefined,
-    ['plain', 'card', 'divided'],
   ) as 'plain' | 'card' | 'divided',
 }))
 void checkedProps.value
@@ -111,6 +135,7 @@ const hostState = computed(() =>
   <section
     data-component="ui-section"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"

package/vue/UiSelect.d.ts

@@ -57,9 +57,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     value: string | null;
+    invalid: boolean | null;
     size: "sm" | "md" | "lg" | null;
     disabled: boolean | null;
-    invalid: boolean | null;
     required: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiSelect.vue

@@ -1,13 +1,54 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { readBoundControl, SelectedOptions, vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Prevents selection and form submission.',
+      default: false,
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-invalid' },
+      description: 'Exposes invalid state to assistive technology and styling.',
+      default: false,
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description: 'Requires a non-empty option for form validation.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Height, padding, chevron, and type size, matching Button\'s sizes so a field and a button of one size share a row. sm is the small control height (2rem by\n      default) with smaller text and a smaller chevron, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller\n      with roomier padding. Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. It is not the native size attribute: a select\n      is always a single-choice dropdown. Change it after render through this option; the element\'s size property is the native one.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The value of the selected option, initially or when set externally. It is also the default, so a form reset returns to it rather than to the first\n      option.',
+    },
+  },
+}
 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 },
@@ -22,48 +63,31 @@ const checkedProps = computed(() => ({
     { 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,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md', 'lg'],
   ) as 'sm' | 'md' | 'lg',
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    undefined,
-    undefined,
-  ),
+  value: checkedProp<string>(props['value'], { kind: 'terminal', name: 'string' }, false, 'value'),
   modelValue: checkedProp<string | null>(
     props.modelValue,
     { kind: 'terminal', name: 'string' },
     false,
     'modelValue',
-    undefined,
-    undefined,
   ),
 }))
 void checkedProps.value
@@ -154,6 +178,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     :disabled="checkedProps.disabled ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"

package/vue/UiSeparator.vue

@@ -1,11 +1,24 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    orientation: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'aria-orientation' },
+      description:
+        'Whether the separator divides stacked content (horizontal) or inline content (vertical).',
+      values: ['horizontal', 'vertical'],
+      default: 'horizontal',
+    },
+  },
+}
 const props = defineProps({
   orientation: {
     type: null as unknown as PropType<'horizontal' | 'vertical' | null>,
@@ -18,8 +31,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
-    undefined,
-    ['horizontal', 'vertical'],
   ) as 'horizontal' | 'vertical',
 }))
 void checkedProps.value
@@ -83,6 +94,7 @@ if (
     data-component="ui-separator"
     v-bind="nativeAttrs($attrs)"
     :aria-orientation="checkedProps.orientation ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
   >
 </template>

package/vue/UiSidebar.d.ts

@@ -103,12 +103,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     width: number | null;
     breakpoint: "sm" | "md" | "lg" | null;
     collapsed: boolean | null;
+    resizable: boolean | null;
+    side: "start" | "end" | null;
     maxWidth: number | null;
     minWidth: number | null;
-    resizable: boolean | null;
     resizeLabel: string | null;
     resizeStep: number | null;
-    side: "start" | "end" | 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/UiSidebar.vue

@@ -1,12 +1,83 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    breakpoint: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'breakpoint' },
+      description:
+        'Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    collapsed: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'collapsed' },
+      description: 'Whether the docked sidebar is collapsed.',
+      default: false,
+    },
+    maxWidth: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'maxwidth' },
+      description: 'The widest width the resize handle allows, in pixels.',
+      default: 480,
+    },
+    minWidth: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'minwidth' },
+      description: 'The narrowest width the resize handle allows, in pixels.',
+      default: 200,
+    },
+    resizable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'resizable' },
+      description: 'Adds a resize handle on the inner edge (drag, or arrow keys, Home, and End).',
+      default: false,
+    },
+    resizeLabel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name of the resize handle.',
+      default: 'Resize sidebar',
+    },
+    resizeStep: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'resizestep' },
+      description: 'Arrow-key resize step in pixels.',
+      default: 16,
+    },
+    side: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'side' },
+      description: 'The edge the sidebar sits on. The page places it beside its main content.',
+      values: ['start', 'end'],
+      default: 'start',
+    },
+    width: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'width' },
+      description:
+        'Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.',
+      default: 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 },
@@ -24,72 +95,54 @@ const checkedProps = computed(() => ({
     { 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
@@ -151,6 +204,16 @@ const root = ref<HTMLElement | null>(null)
 const resizerElement = useTemplateRef<HTMLElement>('resizer')
 const internalCollapsed = ref(false)
 const drawer = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (
+    !((drawer.value == null || typeof drawer.value === 'boolean')
+      && (internalCollapsed.value == null || typeof internalCollapsed.value === 'boolean'))
+  ) return guardedPrevious
+  return guardedPrevious = !checkedProps.value.resizable || drawer.value || internalCollapsed.value
+})
+provide('html-next:ui-sidebar:internalCollapsed', internalCollapsed)
+provide('html-next:ui-sidebar:drawer', drawer)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -219,6 +282,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   <aside
     data-component="ui-sidebar"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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)"
@@ -239,7 +303,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       tabindex="0"
       data-ui-affordance="resize"
       :aria-label="checkedProps.resizeLabel ?? undefined"
-      :hidden="!checkedProps.resizable || drawer || internalCollapsed"
+      :hidden="guarded"
       ref="resizer"
     >
       <span class="guide" aria-hidden="true"></span>

package/vue/UiSpinner.vue

@@ -1,11 +1,31 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'What is loading, for assistive technology ("Loading pages"). With a label the spinner is a status that is announced; without one it is decoration, for a\n      spinner beside visible text that already says so.',
+      default: '',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description: 'sm fits inside a button or a line of small text; md sits beside body text.',
+      values: ['sm', 'md'],
+      default: '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' },
@@ -16,16 +36,12 @@ const checkedProps = computed(() => ({
     { 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
@@ -140,6 +156,7 @@ function attribute(value: unknown): any {
     : attribute(
       (({ true: null, false: 'true' }) as Record<string, any>)[`${checkedProps.label !== ''}`],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-spinner-state="hostState || undefined"