@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiDialog.vue

@@ -1,19 +1,14 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 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'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiScrollArea from './UiScrollArea.vue'
@@ -172,38 +167,7 @@ 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 emit = defineEmits<{
   'update:open': [value: boolean]
@@ -234,32 +198,9 @@ const bodyElement = useTemplateRef<HTMLElement>('bodyElement')
 const footerElement = useTemplateRef<HTMLElement>('footerElement')
 const internalOpen = ref(false)
 const accessibleLabel = ref('Dialog')
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      accessibleLabel.value == null || typeof accessibleLabel.value === 'string',
-      '$accessibleLabel:accessibleLabel',
-      './components/ui-dialog/ui-dialog.html: HR007: Reference accessibleLabel does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = accessibleLabel.value
-})
 provide('html-next:ui-dialog:internalOpen', internalOpen)
 provide('html-next:ui-dialog:accessibleLabel', accessibleLabel)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('dialog'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-dialog> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-dialog> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('dialog', 'ui-dialog')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -334,9 +275,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 <template>
   <dialog
-    data-component="ui-dialog"
+    class="ui-dialog"
     v-bind="nativeAttrs($attrs)"
-    :aria-label="guarded"
+    :aria-label="accessibleLabel"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-alert="reflectedProp('alert', 'alert', checkedProps.alert, undefined, false)"
     :data-closedby="reflectedProp('closedby', 'closedby', checkedProps.closedby, undefined, false)"
@@ -353,7 +294,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       <h2 v-if="checkedProps.label" class="title">{{ checkedProps.label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="closeElement"></button>
     </header>
-    <div class="body" ref="bodyElement"><UiScrollArea :trim="true"><slot /></UiScrollArea></div>
+    <div class="body" ref="bodyElement">
+      <UiScrollArea class="ui-scroll-area" :trim="true"><slot /></UiScrollArea>
+    </div>
     <footer ref="footerElement"><slot name="actions" /></footer>
   </dialog>
 </template>
@@ -389,207 +332,211 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   inherits: false;
 }
 
-[data-component~="ui-dialog"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-dialog-duration: var(--ui-dialog-duration);
-
-  position: fixed;
-  inset: 0;
-  box-sizing: border-box;
-  inline-size: min(
-    calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
-    var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
-  );
-  max-inline-size: none;
-  max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
-  margin: auto;
-  padding: 0;
-  overflow: hidden;
-  flex-direction: column;
-  background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: var(--ui-border-width) solid
-    var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
-  box-shadow: var(
-    --ui-dialog-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
-  );
-  visibility: hidden;
-  pointer-events: none;
-  opacity: 0;
-  transform: scale(0.96);
-  transition:
-    opacity var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
-    transform var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
-    visibility var(--ui-dialog-duration, var(--ui-motion-base)),
-    display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
-    overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
-}
-
-[data-component~="ui-dialog"][open] {
-  display: flex;
-  visibility: visible;
-  pointer-events: auto;
-  opacity: 1;
-  transform: scale(1);
-  animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
-}
+/* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"] {
-  --_ui-dialog-size: 360px;
-}
+/* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"] {
-  --_ui-dialog-size: 640px;
-}
+/* A CSS-drawn X. */
 
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"] {
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100dvh;
-  max-block-size: none;
-  margin: 0;
-  border-radius: var(--ui-dialog-radius, 0);
-}
+/* A touch target, like Button on coarse pointers. */
 
-[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close {
-  display: none;
+@keyframes ui-dialog-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
 }
 
-/* Own the layout wrapper; nested component roots are outside these scoped rules. */
-header {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-  flex: none;
-  /* The title's ink sits inside its line box and the taller close target. Balance that
-     visible top inset against the action row's bottom inset, not just the boxes. */
-  padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
-    var(--ui-space-5);
+@keyframes ui-dialog-backdrop-enter {
+  from {
+    background-color: transparent;
+  }
 }
 
-/* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-[data-component~="ui-dialog"] .title {
-  flex: 1;
-  min-inline-size: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  color: var(--ui-text-primary);
-  letter-spacing: normal;
-  font-size: var(--ui-font-size-lg);
-  font-weight: var(--ui-font-semibold);
-  line-height: var(--ui-line-height-tight);
-}
+@scope (.ui-dialog) to (.ui-scroll-area) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-dialog-duration: var(--ui-dialog-duration);
+
+    position: fixed;
+    inset: 0;
+    box-sizing: border-box;
+    inline-size: min(
+      calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
+      var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
+    );
+    max-inline-size: none;
+    max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
+    margin: auto;
+    padding: 0;
+    overflow: hidden;
+    flex-direction: column;
+    background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+    border: var(--ui-border-width) solid
+      var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+    );
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.96);
+    transition:
+      opacity var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      transform var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      visibility var(--ui-dialog-duration, var(--ui-motion-base)),
+      display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+      overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+  }
 
-.close {
-  display: inline-grid;
-  place-items: center;
-  flex: none;
-  margin-inline-start: auto;
-  inline-size: var(--ui-control-size-sm);
-  block-size: var(--ui-control-size-sm);
-  padding: 0;
-  border: 0;
-  border-radius: var(--ui-radius-round);
-  background: transparent;
-  color: var(--ui-text-secondary);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease);
-}
+  :scope:where(:scope):is([open]) {
+    display: flex;
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1);
+    animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base))
+      var(--ui-motion-ease);
+  }
 
-/* A CSS-drawn X. */
-.close::before,
-.close::after {
-  content: "";
-  grid-area: 1 / 1;
-  inline-size: 0.875rem;
-  block-size: 1.5px;
-  border-radius: 1px;
-  background: currentColor;
-  transform: rotate(45deg);
-}
+  :scope:where(:scope):is([data-ui-dialog-state~="size=sm"]) {
+    --_ui-dialog-size: 360px;
+  }
 
-.close::after {
-  transform: rotate(-45deg);
-}
+  :scope:where(:scope):is([data-ui-dialog-state~="size=lg"]) {
+    --_ui-dialog-size: 640px;
+  }
 
-.close:hover {
-  background: var(--ui-surface-muted);
-  color: var(--ui-text-primary);
-}
+  :scope:where(:scope):is([data-ui-dialog-state~="size=fullscreen"]) {
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100dvh;
+    max-block-size: none;
+    margin: 0;
+    border-radius: var(--ui-dialog-radius, 0);
+  }
 
-.close:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-}
+  :scope[data-ui-dialog-state~="alert"] .close {
+    display: none;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-3);
+    flex: none;
+    /* The title's ink sits inside its line box and the taller close target. Balance that
+       visible top inset against the action row's bottom inset, not just the boxes. */
+    padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
+      var(--ui-space-5);
+  }
+  :scope .title {
+    flex: 1;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: var(--ui-text-primary);
+    letter-spacing: normal;
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-semibold);
+    line-height: var(--ui-line-height-tight);
+  }
 
-/* A touch target, like Button on coarse pointers. */
-@media (pointer: coarse) {
   .close {
-    inline-size: var(--ui-control-min-block-size);
-    block-size: var(--ui-control-min-block-size);
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: var(--ui-control-size-sm);
+    block-size: var(--ui-control-size-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-round);
+    background: transparent;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  .close::before, .close::after {
+    content: "";
+    grid-area: 1 / 1;
+    inline-size: 0.875rem;
+    block-size: 1.5px;
+    border-radius: 1px;
+    background: currentColor;
+    transform: rotate(45deg);
   }
-}
 
-html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close {
-  inline-size: var(--ui-control-min-block-size);
-  block-size: var(--ui-control-min-block-size);
-}
+  .close::after {
+    transform: rotate(-45deg);
+  }
 
-.body {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-block-size: 0;
-  padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
-}
+  .close:hover {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-primary);
+  }
 
-footer {
-  display: flex;
-  flex: none;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--ui-space-2);
-  padding: 0 var(--ui-space-5) var(--ui-space-5);
-}
+  .close:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+  }
+  @media (pointer: coarse) {
+    .close {
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
+    }
+  }
 
-footer:empty {
-  display: none;
-}
+  html[data-ui-input-modality="touch"] :scope .close {
+    inline-size: var(--ui-control-min-block-size);
+    block-size: var(--ui-control-min-block-size);
+  }
 
-@keyframes ui-dialog-enter {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
+  .body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
   }
-}
 
-[data-component~="ui-dialog"]::backdrop {
-  background-color: transparent;
-  transition:
-    background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
-    display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
-    overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
-}
+  footer {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ui-space-2);
+    padding: 0 var(--ui-space-5) var(--ui-space-5);
+  }
 
-[data-component~="ui-dialog"][open]:modal::backdrop {
-  background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base))
-    var(--ui-motion-ease);
-}
+  footer:empty {
+    display: none;
+  }
 
-[data-component~="ui-dialog"][open][data-ui-backdrop-hidden]::backdrop {
-  background-color: transparent;
-  animation: none;
-  transition: none;
-}
+  :scope:where(:scope)::backdrop {
+    background-color: transparent;
+    transition:
+      background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease)
+      allow-discrete,
+      overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease)
+      allow-discrete;
+  }
 
-@keyframes ui-dialog-backdrop-enter {
-  from {
+  :scope:where(:scope):is([open]:modal)::backdrop {
+    background-color: var(--ui-overlay-backdrop);
+    animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base))
+      var(--ui-motion-ease);
+  }
+
+  :scope:where(:scope):is([open][data-ui-backdrop-hidden])::backdrop {
     background-color: transparent;
+    animation: none;
+    transition: none;
   }
 }
 </style>

package/vue/UiDisclosure.d.ts

@@ -1,7 +1,15 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    summary?: (props: typeof __VLS_3) => any;
+} & {
+    indicator?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
         default: string;
@@ -39,17 +47,17 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (event: CustomEvent<{
+    close: (event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
-    "update:open": (value: boolean) => any;
-    close: (event: CustomEvent<{
+    open: (event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
@@ -88,36 +96,31 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         default: string;
     };
 }>> & Readonly<{
-    onOpen?: ((event: CustomEvent<{
+    onClose?: ((event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    onClose?: ((event: CustomEvent<{
+    onOpen?: ((event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     fill: boolean | null;
-    summary: string | null;
     name: string | null;
+    summary: string | null;
     open: boolean | null;
     variant: "plain" | "navigation" | null;
     disabled: boolean | null;
     density: "comfortable" | "compact" | null;
     headingLevel: number | null;
     requiredOpen: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    leading?: (props: {}) => any;
-} & {
-    summary?: (props: {}) => any;
-} & {
-    indicator?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
+}, {}, {}, {}, 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;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;