@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiDisclosure.vue

@@ -1,19 +1,15 @@
-<!-- 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,
+  warnUnless,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -190,38 +186,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]
@@ -256,7 +221,7 @@ const headingAriaLevel = ref<number | null>(null)
 let guardedPrevious: any
 const guarded = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
+    !(warnUnless(
       headingRole.value == null || true,
       '$headingRole:headingRole',
       './components/ui-disclosure/ui-disclosure.html: HR007: Reference headingRole does not satisfy its declared type.',
@@ -264,70 +229,11 @@ const guarded = computed(() => {
   ) return guardedPrevious
   return guardedPrevious = headingRole.value ?? undefined
 })
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      headingAriaLevel.value == null || Number.isInteger(headingAriaLevel.value),
-      '$headingAriaLevel:headingAriaLevel',
-      './components/ui-disclosure/ui-disclosure.html: HR007: Reference headingAriaLevel does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = headingAriaLevel.value ?? undefined
-})
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      contentId.value == null || typeof contentId.value === 'string',
-      '$contentId:contentId',
-      './components/ui-disclosure/ui-disclosure.html: HR007: Reference contentId does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = contentId.value
-})
-let guardedBinding3Previous: any
-const guardedBinding3 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalOpen.value == null || typeof internalOpen.value === 'boolean',
-      '$internalOpen:internalOpen',
-      './components/ui-disclosure/ui-disclosure.html: HR007: Reference internalOpen does not satisfy its declared type.',
-    ))
-  ) return guardedBinding3Previous
-  return guardedBinding3Previous = internalOpen.value
-})
-let guardedBinding4Previous: any
-const guardedBinding4 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      contentId.value == null || typeof contentId.value === 'string',
-      '$contentId:contentId',
-      './components/ui-disclosure/ui-disclosure.html: HR007: Reference contentId does not satisfy its declared type.',
-    ))
-  ) return guardedBinding4Previous
-  return guardedBinding4Previous = contentId.value
-})
 provide('html-next:ui-disclosure:internalOpen', internalOpen)
 provide('html-next:ui-disclosure:contentId', contentId)
 provide('html-next:ui-disclosure:headingRole', headingRole)
 provide('html-next:ui-disclosure:headingAriaLevel', headingAriaLevel)
-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-disclosure> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-disclosure> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-disclosure')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -409,7 +315,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 
 <template>
   <div
-    data-component="ui-disclosure"
+    class="ui-disclosure"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
@@ -424,12 +330,17 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <div class="heading" :role="guarded" :aria-level="guardedBinding" ref="headingElement">
+    <div
+      class="heading"
+      :role="guarded"
+      :aria-level="headingAriaLevel ?? undefined"
+      ref="headingElement"
+    >
       <button
         class="trigger"
         type="button"
-        :aria-controls="guardedBinding2"
-        :aria-expanded="guardedBinding3"
+        :aria-controls="contentId"
+        :aria-expanded="internalOpen"
         :disabled="checkedProps.disabled ?? undefined"
         ref="triggerElement"
       >
@@ -440,7 +351,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
             ></span></slot></span>
       </button>
     </div>
-    <div class="panel" :id="guardedBinding4" ref="panelElement">
+    <div class="panel" :id="contentId" ref="panelElement">
       <div class="panel-inner"><slot /></div>
     </div>
   </div>
@@ -462,194 +373,192 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 }
 
 /* Density resolves into the summary row's own values; the public tokens still override them. */
-[data-component~="ui-disclosure"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
-  --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
-  --_ui-disclosure-trigger-padding-inline: var(--ui-disclosure-trigger-padding-inline);
-
-  --_trigger-min-block-size: var(--ui-control-size);
-  --_trigger-padding-block: var(--ui-space-2);
-  --_trigger-padding-inline: var(--ui-space-3);
-}
-
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"] {
-  --_trigger-min-block-size: var(--ui-control-size-sm);
-  --_trigger-padding-block: var(--ui-space-1);
-  --_trigger-padding-inline: var(--ui-space-2);
-}
 
 /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
  * select or combobox. Stacked disclosures share their dividers. */
-[data-component~="ui-disclosure"] {
-  display: block;
-  inline-size: 100%;
-  overflow: clip;
-  border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
-  color: var(--ui-text-primary);
-}
 
-.trigger {
-  display: flex;
-  gap: var(--ui-space-3);
-  align-items: center;
-  inline-size: 100%;
-  min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
-  padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
-    var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-weight: var(--ui-font-semibold);
-  text-align: start;
-  cursor: pointer;
-  border-radius: var(--ui-radius-sm);
-  transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
+/* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+ * normal content-sized layout and its animation remain unchanged when fill is omitted. */
 
-.trigger:hover:not(:disabled) {
-  background: color-mix(in srgb, currentColor 6%, transparent);
-}
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ui-focus-width)
-    color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
-}
-.trigger:disabled {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.summary {
-  flex: 1;
-  min-inline-size: 0;
-}
+@scope (.ui-disclosure) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
+    --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
+    --_ui-disclosure-trigger-padding-inline: var(--ui-disclosure-trigger-padding-inline);
 
-.leading,
-.indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-.leading:empty {
-  display: none;
-}
-.indicator {
-  transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .indicator {
-  transform: rotate(180deg);
-}
+    --_trigger-min-block-size: var(--ui-control-size);
+    --_trigger-padding-block: var(--ui-space-2);
+    --_trigger-padding-inline: var(--ui-space-3);
+  }
 
-.chevron {
-  inline-size: 0.5rem;
-  block-size: 0.5rem;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
-  transform: rotate(45deg) translate(-1px, -1px);
-}
+  :scope:where(:scope):is([data-ui-disclosure-state~="density=compact"]) {
+    --_trigger-min-block-size: var(--ui-control-size-sm);
+    --_trigger-padding-block: var(--ui-space-1);
+    --_trigger-padding-inline: var(--ui-space-2);
+  }
+  :scope:where(:scope) {
+    display: block;
+    inline-size: 100%;
+    overflow: clip;
+    border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
+    color: var(--ui-text-primary);
+  }
 
-.panel {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition:
-    grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
-    content-visibility var(--ui-motion-reveal) allow-discrete;
-}
+  .trigger {
+    display: flex;
+    gap: var(--ui-space-3);
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+    padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+      var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--ui-font-semibold);
+    text-align: start;
+    cursor: pointer;
+    border-radius: var(--ui-radius-sm);
+    transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-.panel-inner {
-  min-block-size: 0;
-  overflow: hidden;
-  padding-inline: var(--ui-space-3);
-}
+  .trigger:hover:not(:disabled) {
+    background: color-mix(in srgb, currentColor 6%, transparent);
+  }
+  .trigger:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--ui-focus-width)
+      color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+  }
+  .trigger:disabled {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
 
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel {
-  grid-template-rows: 1fr;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner {
-  padding-block: 0 var(--ui-space-3);
-}
+  .summary {
+    flex: 1;
+    min-inline-size: 0;
+  }
 
-/* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
- * normal content-sized layout and its animation remain unchanged when fill is omitted. */
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
-  min-block-size: calc(
-    var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width)
-  );
-  transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
-  border-block-end: 0;
-  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] {
-  flex-grow: 1;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading {
-  flex: none;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .trigger {
-  border-radius: 0;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel {
-  flex: 1;
-  min-block-size: 0;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel-inner {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-block-size: 0;
-  padding: 0;
-}
+  .leading, .indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+  }
+  .leading:empty {
+    display: none;
+  }
+  .indicator {
+    transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
+  }
+  :scope[data-ui-disclosure-state~="internalOpen"] .indicator {
+    transform: rotate(180deg);
+  }
 
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"] .trigger {
-  gap: var(--ui-nav-gap);
-  padding-inline: var(--ui-nav-padding-inline);
-  min-block-size: var(--ui-nav-min-block-size);
-  padding-block: var(--ui-nav-padding-block);
-  border-radius: var(--ui-selection-radius);
-  font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-normal);
-  color: var(--ui-text-secondary);
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
-  .trigger {
-  padding-inline: var(--ui-nav-compact-padding-inline);
-  padding-block: var(--ui-nav-compact-padding-block);
-  min-block-size: var(--ui-nav-compact-min-block-size);
-  font-size: var(--ui-font-size-sm);
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
-  .trigger:hover:not(:disabled) {
-  background: var(--ui-nav-hover-surface);
-  color: var(--ui-text-primary);
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
-  :is(.leading, .indicator) {
-  inline-size: var(--ui-nav-icon-size);
-  font-size: var(--ui-nav-icon-size);
-}
-@media (pointer: coarse) {
-  [data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
-    .trigger {
-    min-block-size: var(--ui-control-min-block-size);
+  .chevron {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentColor;
+    border-block-end: 2px solid currentColor;
+    transform: rotate(45deg) translate(-1px, -1px);
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"],
-  .panel,
-  .indicator {
-    transition: none;
+  .panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition:
+      grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+      content-visibility var(--ui-motion-reveal) allow-discrete;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-disclosure"][hidden] {
-  display: none;
+  .panel-inner {
+    min-block-size: 0;
+    overflow: hidden;
+    padding-inline: var(--ui-space-3);
+  }
+
+  :scope[data-ui-disclosure-state~="internalOpen"] .panel {
+    grid-template-rows: 1fr;
+  }
+  :scope[data-ui-disclosure-state~="internalOpen"] .panel-inner {
+    padding-block: 0 var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-disclosure-state~="fill"]) {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
+    min-block-size: calc(
+      var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width)
+    );
+    transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
+    border-block-end: 0;
+    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+  }
+  :scope:where(:scope):is(:scope[data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"]) {
+    flex-grow: 1;
+  }
+  :scope[data-ui-disclosure-state~="fill"] .heading {
+    flex: none;
+  }
+  :scope[data-ui-disclosure-state~="fill"] .trigger {
+    border-radius: 0;
+  }
+  :scope[data-ui-disclosure-state~="fill"] .panel {
+    flex: 1;
+    min-block-size: 0;
+  }
+  :scope[data-ui-disclosure-state~="fill"] .panel-inner {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-block-size: 0;
+    padding: 0;
+  }
+
+  :scope[data-ui-disclosure-state~="variant=navigation"] .trigger {
+    gap: var(--ui-nav-gap);
+    padding-inline: var(--ui-nav-padding-inline);
+    min-block-size: var(--ui-nav-min-block-size);
+    padding-block: var(--ui-nav-padding-block);
+    border-radius: var(--ui-selection-radius);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-normal);
+    color: var(--ui-text-secondary);
+  }
+  :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+    .trigger {
+    padding-inline: var(--ui-nav-compact-padding-inline);
+    padding-block: var(--ui-nav-compact-padding-block);
+    min-block-size: var(--ui-nav-compact-min-block-size);
+    font-size: var(--ui-font-size-sm);
+  }
+  :scope[data-ui-disclosure-state~="variant=navigation"] .trigger:hover:not(:disabled) {
+    background: var(--ui-nav-hover-surface);
+    color: var(--ui-text-primary);
+  }
+  :scope[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
+    inline-size: var(--ui-nav-icon-size);
+    font-size: var(--ui-nav-icon-size);
+  }
+  @media (pointer: coarse) {
+    :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+      .trigger {
+      min-block-size: var(--ui-control-min-block-size);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :scope:where(:scope):is([data-ui-disclosure-state~="fill"]), .panel, .indicator {
+      transition: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiEditable.d.ts

@@ -1,6 +1,4 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     actions: {
         type: PropType<boolean | null>;
@@ -126,15 +124,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
 }>, {
-    label: string | null;
     value: string | null;
-    disabled: boolean | null;
     required: boolean | null;
+    label: string | null;
+    disabled: boolean | null;
     placeholder: string | null;
     actions: boolean | null;
-    cancelLabel: string | null;
     edit: boolean | null;
     hint: string | null;
+    cancelLabel: string | null;
     maxLength: number | null;
     saveLabel: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;