@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiToastRegion.vue

@@ -1,16 +1,17 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- 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, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  watchSyncEffect,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
@@ -71,64 +72,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 KeyedFailure = defineComponent({
-  props: { error: { type: null, required: true } },
-  setup(props) {
-    return () => {
-      throw props.error
-    }
-  },
-})
-const KeyedBoundary = defineComponent({
-  setup(_props, { slots }) {
-    let last: VNode[] = []
-    return () => {
-      try {
-        last = slots.default?.() ?? []
-        return last
-      } catch (error) {
-        if (
-          !(error instanceof Error)
-          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
-        ) throw error
-        if (typeof window === 'undefined') throw error
-        return [...last, h(KeyedFailure, { error })]
-      }
-    }
-  },
-})
-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:duration': [value: number]
@@ -164,22 +108,7 @@ const toasts = ref<
   }[]
 >([])
 provide('html-next:ui-toast-region:toasts', toasts)
-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-toast-region> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-toast-region> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-toast-region')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -281,62 +210,11 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { toasts },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
-
-function uniqueKeys<T>(
-  items: readonly T[],
-  keyOf: (
-    item: T,
-    index: number,
-    loop: { index: number; first: boolean; last: boolean; count: number },
-  ) => unknown,
-): readonly T[] {
-  const seen = new Set<unknown>()
-  for (let index = 0; index < items.length; index += 1) {
-    const key = keyOf(items[index]!, index, {
-      index,
-      first: index === 0,
-      last: index === items.length - 1,
-      count: items.length,
-    })
-    if (seen.has(key)) {
-      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
-      throw Object.assign(new Error(`HR004: ${message}`), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({ code: 'HR004', message }),
-      })
-    }
-    seen.add(key)
-  }
-  return items
-}
 </script>
 
 <template>
   <div
-    data-component="ui-toast-region"
+    class="ui-toast-region"
     role="region"
     aria-label="Notifications"
     aria-live="polite"
@@ -360,11 +238,12 @@ function uniqueKeys<T>(
       >
         <span class="message">{{ toast.message }}</span>
         <span class="dismiss" :data-toast="toast.id"><UiIconButton
+            class="ui-icon-button"
             size="sm"
             variant="ghost"
             :round="true"
             :label="concat('Dismiss ', toast.message)"
-          ><UiIcon name="x" /></UiIconButton></span>
+          ><UiIcon class="ui-icon" name="x" /></UiIconButton></span>
       </div></KeyedBoundary>
   </div>
 </template>
@@ -396,131 +275,7 @@ function uniqueKeys<T>(
   inherits: false;
 }
 
-[data-component~="ui-toast-region"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-toast-region-surface: var(--ui-toast-region-surface);
-  --_ui-toast-region-border: var(--ui-toast-region-border);
-  --_ui-toast-region-radius: var(--ui-toast-region-radius);
-  --_ui-toast-region-shadow: var(--ui-toast-region-shadow);
-  --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
-  --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
-
-  position: fixed;
-  top: calc(var(--ui-space-4) + env(safe-area-inset-top));
-  right: auto;
-  bottom: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  display: grid;
-  gap: var(--ui-space-2);
-  inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
-  max-inline-size: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  overflow: visible;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  box-shadow: none;
-  pointer-events: none;
-}
-
-[data-component~="ui-toast-region"]:not(:popover-open) {
-  display: none;
-}
-
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-start"],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"] {
-  left: auto;
-  right: auto;
-  inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
-  transform: none;
-}
-
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-end"],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"] {
-  left: auto;
-  right: auto;
-  inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
-  transform: none;
-}
-
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"] {
-  top: auto;
-  bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
-}
-
-[data-component~="ui-toast-region"] > .toast,
-[data-component~="ui-toast-region"] > :slotted(*) {
-  pointer-events: auto;
-}
-
-.toast {
-  --_ui-toast-region-accent: var(--ui-border-strong);
-  --_ui-toast-region-tone-surface: var(--ui-surface-muted);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--ui-space-2);
-  align-items: start;
-  border: var(--ui-border-width) solid
-    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
-  border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  padding: var(--ui-space-3) var(--ui-space-4);
-  /* The close button's internal space supplies the rest of the trailing inset. */
-  padding-inline-end: var(--ui-space-2);
-  background: var(
-    --_ui-toast-region-surface,
-    var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
-  );
-  color: var(--ui-text-primary);
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-normal);
-  line-height: var(--ui-line-height-md);
-  box-shadow: var(
-    --_ui-toast-region-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-  );
-  animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s)
-    var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.toast[data-tone="info"] {
-  --_ui-toast-region-accent: var(--ui-info-solid);
-  --_ui-toast-region-tone-surface: var(--ui-info-soft);
-}
-.toast[data-tone="success"] {
-  --_ui-toast-region-accent: var(--ui-success-solid);
-  --_ui-toast-region-tone-surface: var(--ui-success-soft);
-}
-.toast[data-tone="warning"] {
-  --_ui-toast-region-accent: var(--ui-warning-solid);
-  --_ui-toast-region-tone-surface: var(--ui-warning-soft);
-}
-.toast[data-tone="danger"] {
-  --_ui-toast-region-accent: var(--ui-danger-solid);
-  --_ui-toast-region-tone-surface: var(--ui-danger-soft);
-}
-
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-.toast.closing {
-  animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
-  pointer-events: none;
-}
-
-:is([data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"])
-  .toast {
-  animation-name: ui-toast-enter-bottom;
-}
-
-:is([data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"])
-  .toast.closing {
-  animation-name: ui-toast-exit-bottom;
-}
 
 @keyframes ui-toast-enter {
   from {
@@ -566,23 +321,149 @@ function uniqueKeys<T>(
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .toast, .toast.closing {
-    animation: none;
+/* A component that sets its display still honours the hidden attribute on its root. */
+
+@scope (.ui-toast-region) to (.ui-icon-button, .ui-icon) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-toast-region-surface: var(--ui-toast-region-surface);
+    --_ui-toast-region-border: var(--ui-toast-region-border);
+    --_ui-toast-region-radius: var(--ui-toast-region-radius);
+    --_ui-toast-region-shadow: var(--ui-toast-region-shadow);
+    --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
+    --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
+
+    position: fixed;
+    top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: grid;
+    gap: var(--ui-space-2);
+    inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
   }
-}
 
-.message {
-  min-inline-size: 0;
-  align-self: center;
-}
+  :scope:where(:scope):is(:not(:popover-open)) {
+    display: none;
+  }
 
-.dismiss {
-  align-self: center;
-}
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=top-start"]),
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-start"]) {
+    left: auto;
+    right: auto;
+    inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
+    transform: none;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-toast-region"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=top-end"]),
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-end"]) {
+    left: auto;
+    right: auto;
+    inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
+    transform: none;
+  }
+
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom"]),
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-start"]),
+  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-end"]) {
+    top: auto;
+    bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
+  }
+
+  :scope > .toast, :scope > :slotted(*) {
+    pointer-events: auto;
+  }
+
+  .toast {
+    --_ui-toast-region-accent: var(--ui-border-strong);
+    --_ui-toast-region-tone-surface: var(--ui-surface-muted);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--ui-space-2);
+    align-items: start;
+    border: var(--ui-border-width) solid
+      var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
+    border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    padding: var(--ui-space-3) var(--ui-space-4);
+    /* The close button's internal space supplies the rest of the trailing inset. */
+    padding-inline-end: var(--ui-space-2);
+    background: var(
+      --_ui-toast-region-surface,
+      var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
+    );
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --_ui-toast-region-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s)
+      var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+  }
+
+  .toast[data-tone="info"] {
+    --_ui-toast-region-accent: var(--ui-info-solid);
+    --_ui-toast-region-tone-surface: var(--ui-info-soft);
+  }
+  .toast[data-tone="success"] {
+    --_ui-toast-region-accent: var(--ui-success-solid);
+    --_ui-toast-region-tone-surface: var(--ui-success-soft);
+  }
+  .toast[data-tone="warning"] {
+    --_ui-toast-region-accent: var(--ui-warning-solid);
+    --_ui-toast-region-tone-surface: var(--ui-warning-soft);
+  }
+  .toast[data-tone="danger"] {
+    --_ui-toast-region-accent: var(--ui-danger-solid);
+    --_ui-toast-region-tone-surface: var(--ui-danger-soft);
+  }
+  .toast.closing {
+    animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+      both;
+    pointer-events: none;
+  }
+
+  :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast {
+    animation-name: ui-toast-enter-bottom;
+  }
+
+  :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast.closing {
+    animation-name: ui-toast-exit-bottom;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast, .toast.closing {
+      animation: none;
+    }
+  }
+
+  .message {
+    min-inline-size: 0;
+    align-self: center;
+  }
+
+  .dismiss {
+    align-self: center;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiTooltip.d.ts

@@ -1,7 +1,11 @@
 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: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    shortcut?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     for: {
         type: PropType<string | null>;
         default: string;
@@ -31,18 +35,18 @@ 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;
-    "update:trigger": (value: string) => 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;
+    "update:trigger": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     for: {
         type: PropType<string | null>;
@@ -73,31 +77,30 @@ 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;
-    "onUpdate:trigger"?: ((value: string) => 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;
+    "onUpdate:trigger"?: ((value: string) => any) | undefined;
 }>, {
     open: boolean | null;
     inverse: boolean | null;
-    trigger: "hover" | "click" | "focus" | null;
+    trigger: "click" | "focus" | "hover" | null;
     for: string | null;
-    hideDelay: number | null;
     placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
+    hideDelay: number | null;
     showDelay: number | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    shortcut?: (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;