@threadlabs/looma 0.23.20 → 0.23.22

package/vue/UiImage.vue

@@ -0,0 +1,463 @@
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import { createDispatch, useComponentHost } from './host'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    alt: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'alt' },
+      description: 'A text alternative for the image.',
+      default: '',
+    },
+    height: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'height' },
+      description: 'Image height in CSS pixels; resizing preserves the intrinsic aspect ratio.',
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'placement' },
+      description:
+        'Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.',
+      values: ['block', 'center', 'wrap-left', 'wrap-right'],
+      default: 'block',
+    },
+    resizable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'resizable' },
+      description:
+        'Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.',
+      default: false,
+    },
+    selected: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'selected' },
+      description: 'Outlines the media as the current selection.',
+      default: false,
+    },
+    src: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'src' },
+      description: 'The image source, used by the default media.',
+      default: '',
+    },
+    width: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'width' },
+      description:
+        'Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping.',
+    },
+  },
+} as const
+const props = defineProps({
+  alt: { type: null as unknown as PropType<string | null>, default: '' },
+  height: { type: null as unknown as PropType<number | null>, default: null },
+  placement: {
+    type: null as unknown as PropType<'block' | 'center' | 'wrap-left' | 'wrap-right' | null>,
+    default: 'block',
+  },
+  resizable: { type: null as unknown as PropType<boolean | null>, default: false },
+  selected: { type: null as unknown as PropType<boolean | null>, default: false },
+  src: { type: null as unknown as PropType<string | null>, default: '' },
+  width: { type: null as unknown as PropType<number | null>, default: null },
+})
+const acceptedProps: Record<string, unknown> = {
+  alt: '',
+  height: null,
+  placement: 'block',
+  resizable: false,
+  selected: false,
+  src: '',
+  width: null,
+}
+const checkedProps = computed(() => ({
+  alt: checkedProp<string>(
+    props['alt'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'alt',
+    acceptedProps,
+  ) as string,
+  height: checkedProp<number>(
+    props['height'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'height',
+    acceptedProps,
+  ),
+  placement: checkedProp<'block' | 'center' | 'wrap-left' | 'wrap-right'>(
+    props['placement'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'placement',
+    acceptedProps,
+  ) as 'block' | 'center' | 'wrap-left' | 'wrap-right',
+  resizable: checkedProp<boolean>(
+    props['resizable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'resizable',
+    acceptedProps,
+  ) as boolean,
+  selected: checkedProp<boolean>(
+    props['selected'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'selected',
+    acceptedProps,
+  ) as boolean,
+  src: checkedProp<string>(
+    props['src'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'src',
+    acceptedProps,
+  ) as string,
+  width: checkedProp<number>(
+    props['width'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'width',
+    acceptedProps,
+  ),
+}))
+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:height': [value: number]
+  'update:width': [value: number]
+  resize: [
+    event: CustomEvent<
+      {
+        readonly width: number
+        readonly height: number
+        readonly phase: 'preview' | 'commit' | 'cancel'
+        readonly trigger: 'pointer' | 'keyboard'
+      }
+    >,
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const frameElement = useTemplateRef<HTMLElement>('frame')
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('figure'))
+) {
+  throw Object.assign(new Error('HR005: Server markup for <ui-image> has an incompatible root.'), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({
+      code: 'HR005',
+      message: 'Server markup for <ui-image> has an incompatible root.',
+    }),
+  })
+}
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.placement && 'placement',
+    checkedProps.value.placement != null
+    && `placement=${encodeURIComponent(checkedProps.value.placement)}`,
+    checkedProps.value.selected && 'selected',
+  ].filter(Boolean).join(' ')
+)
+
+const isResizeDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Number.isInteger((detail as Record<string, unknown>)['width'])
+  && Number.isInteger((detail as Record<string, unknown>)['height'])
+  && ((detail as Record<string, unknown>)['phase'] === 'preview'
+    || (detail as Record<string, unknown>)['phase'] === 'commit'
+    || (detail as Record<string, unknown>)['phase'] === 'cancel')
+  && ((detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'keyboard')
+  && Object.keys(detail as object).every((key) =>
+    ['width', 'height', 'phase', 'trigger'].includes(key)
+  )
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    resize: isResizeDetail,
+  },
+  modeled: ['height', 'width'],
+})
+
+useComponentHost(() => import('../components/ui-image/ui-image.js'), {
+  root,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-image/ui-image.js',
+    definition: './components/ui-image/ui-image.html',
+  },
+  props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['alt', 'height', 'placement', 'resizable', 'selected', 'src', 'width'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  refs: { frame: frameElement },
+})
+</script>
+
+<template>
+  <figure
+    data-component="ui-image"
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
+    :data-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
+    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
+    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
+    :data-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
+    :data-ui-image-state="hostState || undefined"
+    ref="root"
+  >
+    <div class="frame" ref="frame">
+      <slot name="media"><img
+          :src="checkedProps.src ?? undefined"
+          :alt="checkedProps.alt ?? undefined"
+          :width="checkedProps.width ?? undefined"
+          :height="checkedProps.height ?? undefined"
+        ></slot>
+      <div class="handles" :hidden="!(checkedProps.selected && checkedProps.resizable)">
+        <button
+          type="button"
+          class="handle"
+          data-corner="top-left"
+          aria-label="Resize image from top left"
+        >
+        </button>
+        <button
+          type="button"
+          class="handle"
+          data-corner="top-right"
+          aria-label="Resize image from top right"
+        >
+        </button>
+        <button
+          type="button"
+          class="handle"
+          data-corner="bottom-left"
+          aria-label="Resize image from bottom left"
+        >
+        </button>
+        <button
+          type="button"
+          class="handle"
+          data-corner="bottom-right"
+          aria-label="Resize image from bottom right"
+        >
+        </button>
+      </div>
+      <slot name="controls" />
+    </div>
+  </figure>
+</template>
+
+<style scoped>
+[data-component~="ui-image"] {
+  display: flex;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--ui-space-3) 0;
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=center"] {
+  justify-content: center;
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"] {
+  float: left;
+  padding-inline-end: var(--ui-space-4);
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"] {
+  float: right;
+  padding-inline-start: var(--ui-space-4);
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+  inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame {
+  inline-size: 100%;
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame
+  img,
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame
+  :slotted(img) {
+  inline-size: 100%;
+}
+.frame {
+  position: relative;
+  flex: 0 1 auto;
+  inline-size: var(--_ui-image-width, fit-content);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  align-self: flex-start;
+  border-radius: var(--ui-radius-md);
+}
+.frame img, .frame :slotted(img) {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+  margin: 0;
+  border-radius: inherit;
+}
+[data-component~="ui-image"][data-resizing] .frame img,
+[data-component~="ui-image"][data-resizing] .frame :slotted(img) {
+  inline-size: 100%;
+}
+[data-component~="ui-image"][data-ui-image-state~="selected"] .frame {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-border-width);
+}
+.handle {
+  position: absolute;
+  z-index: 1;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  touch-action: none;
+}
+.handle::after {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-focus-ring);
+  border-radius: var(--ui-radius-sm);
+}
+.handle:focus-visible {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  border-radius: var(--ui-radius-sm);
+}
+.handle[data-corner="top-left"] {
+  top: -12px;
+  left: -12px;
+  cursor: nwse-resize;
+}
+.handle[data-corner="top-right"] {
+  top: -12px;
+  right: -12px;
+  cursor: nesw-resize;
+}
+.handle[data-corner="bottom-left"] {
+  bottom: -12px;
+  left: -12px;
+  cursor: nesw-resize;
+}
+.handle[data-corner="bottom-right"] {
+  bottom: -12px;
+  right: -12px;
+  cursor: nwse-resize;
+}
+.handles[hidden], [data-component~="ui-image"][hidden] {
+  display: none;
+}
+@media (max-width: 767px) {
+  [data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+    float: none;
+    inline-size: 100%;
+    padding-inline: 0;
+  }
+  [data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+    .handles {
+    display: none;
+  }
+}
+@media (pointer: coarse) {
+  .handle {
+    inline-size: 44px;
+    block-size: 44px;
+  }
+  .handle::after {
+    inset: 18px;
+  }
+  .handle[data-corner="top-left"] {
+    top: -22px;
+    left: -22px;
+  }
+  .handle[data-corner="top-right"] {
+    top: -22px;
+    right: -22px;
+  }
+  .handle[data-corner="bottom-left"] {
+    bottom: -22px;
+    left: -22px;
+  }
+  .handle[data-corner="bottom-right"] {
+    bottom: -22px;
+    right: -22px;
+  }
+}
+@media (forced-colors: active) {
+  [data-component~="ui-image"][data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+    outline-color: Highlight;
+  }
+  .handle::after {
+    border-color: Highlight;
+    background: Canvas;
+  }
+}
+</style>

package/vue/UiInput.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script
   setup
   lang="ts"

package/vue/UiInputGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListbox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,

package/vue/UiMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiMenuGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiMeter.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script lang="ts">
 function createFormatValue(): any {
   // FIFO bounds native instances and retained keys; only constructor inputs, never values, are cached.

package/vue/UiNavItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiPageHeader.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiPopover.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiRadio.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiRadioGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiReel.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiScrollArea.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSearchResultRow.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSearchShell.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSection.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSelect.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSeparator.d.ts

@@ -4,13 +4,31 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<"horizontal" | "vertical" | null>;
         default: string;
     };
+    selectable: {
+        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<{
     orientation: {
         type: PropType<"horizontal" | "vertical" | null>;
         default: string;
     };
+    selectable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
+    selected: boolean | null;
     orientation: "vertical" | "horizontal" | null;
+    selectable: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;