@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiTabs.vue

@@ -1,17 +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, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  useTemplateRef,
-  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'
 
@@ -158,64 +158,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:value': [value: string]
@@ -237,19 +180,7 @@ const internalValue = ref('')
 const tabs = ref<{ id: string; label: string }[]>([])
 provide('html-next:ui-tabs:internalValue', internalValue)
 provide('html-next:ui-tabs:tabs', tabs)
-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-tabs> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-tabs> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-tabs')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -323,62 +254,11 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   refs: { list: listElement, panels: panelsElement },
   state: { internalValue, tabs },
 })
-
-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-tabs"
+    class="ui-tabs"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-activation="reflectedProp('activation', 'activation', checkedProps.activation, undefined, false)"
@@ -431,155 +311,147 @@ function uniqueKeys<T>(
 }
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
-[data-component~="ui-tabs"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
-  --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
-  --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
 
-  --_tab-min-block-size: var(--ui-control-size);
-  --_tab-padding-block: var(--ui-space-2);
-  --_tab-padding-inline: var(--ui-space-3);
-}
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
 
-[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"] {
-  --_tab-min-block-size: var(--ui-control-size-sm);
-  --_tab-padding-block: var(--ui-space-1);
-  --_tab-padding-inline: var(--ui-space-2);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-tabs"] {
-  display: grid;
-  inline-size: 100%;
-  min-inline-size: 0;
-}
+@scope (.ui-tabs) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
+    --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
+    --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
 
-.list {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  justify-content: start;
-  inline-size: 100%;
-  max-inline-size: 100%;
-  /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
-  overflow-x: auto;
-  /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-     strip or the page vertically. */
-  overflow-y: hidden;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-  border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
-}
+    --_tab-min-block-size: var(--ui-control-size);
+    --_tab-padding-block: var(--ui-space-2);
+    --_tab-padding-inline: var(--ui-space-3);
+  }
 
-.list button,
-.list > :slotted(button[slot="tab"]) {
-  min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
-  margin: 0 0 calc(-1 * var(--ui-border-width));
-  padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
-    var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
-  border: 0;
-  border-block-end: var(--ui-accent-line-width) solid transparent;
-  background: transparent;
-  color: var(--ui-text-secondary);
-  font: inherit;
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
-  cursor: pointer;
-  transition:
-    color var(--ui-motion-fast) var(--ui-motion-ease),
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
+  :scope:where(:scope):is([data-ui-tabs-state~="density=compact"]) {
+    --_tab-min-block-size: var(--ui-control-size-sm);
+    --_tab-padding-block: var(--ui-space-1);
+    --_tab-padding-inline: var(--ui-space-2);
+  }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers, so the box is a block with centred content. */
-@supports (text-box-trim: trim-both) {
-  .list button,
-  .list > :slotted(button[slot="tab"]) {
-    display: block;
-    text-align: center;
-    align-content: center;
-    text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
+  :scope:where(:scope) {
+    display: grid;
+    inline-size: 100%;
+    min-inline-size: 0;
   }
-}
 
-[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list {
-  grid-auto-columns: minmax(max-content, 1fr);
-}
+  .list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    justify-content: start;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
+    overflow-x: auto;
+    /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
+       strip or the page vertically. */
+    overflow-y: hidden;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
+  }
 
-.list button,
-.list > :slotted(button[slot="tab"]) {
-  white-space: nowrap;
-}
+  .list button, .list > :slotted(button[slot="tab"]) {
+    min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
+    margin: 0 0 calc(-1 * var(--ui-border-width));
+    padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
+      var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
+    border: 0;
+    border-block-end: var(--ui-accent-line-width) solid transparent;
+    background: transparent;
+    color: var(--ui-text-secondary);
+    font: inherit;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-medium);
+    cursor: pointer;
+    transition:
+      color var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  @supports (text-box-trim: trim-both) {
+    .list button, .list > :slotted(button[slot="tab"]) {
+      display: block;
+      text-align: center;
+      align-content: center;
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+  }
 
-.list button:hover,
-.list > :slotted(button[slot="tab"]:hover) {
-  color: var(--ui-text-primary);
-  background: var(--ui-surface-muted);
-}
-.list button[aria-selected="true"],
-.list > :slotted(button[slot="tab"][aria-selected="true"]) {
-  color: var(--ui-accent-solid);
-  border-block-end-color: var(--ui-accent-solid);
-}
-.list button:focus-visible,
-.list > :slotted(button[slot="tab"]:focus-visible) {
-  position: relative;
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ui-focus-width)
-    color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
-  border-radius: var(--ui-radius-sm);
-}
+  :scope[data-ui-tabs-state~="stretch"] .list {
+    grid-auto-columns: minmax(max-content, 1fr);
+  }
 
-.panels {
-  min-inline-size: 0;
-}
-.panels > :slotted(*) {
-  padding: var(--ui-space-4);
-}
+  .list button, .list > :slotted(button[slot="tab"]) {
+    white-space: nowrap;
+  }
 
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] {
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: start;
-}
+  .list button:hover, .list > :slotted(button[slot="tab"]:hover) {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-muted);
+  }
+  .list button[aria-selected="true"], .list > :slotted(button[slot="tab"][aria-selected="true"]) {
+    color: var(--ui-accent-solid);
+    border-block-end-color: var(--ui-accent-solid);
+  }
+  .list button:focus-visible, .list > :slotted(button[slot="tab"]:focus-visible) {
+    position: relative;
+    outline: none;
+    box-shadow: inset 0 0 0 var(--ui-focus-width)
+      color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    border-radius: var(--ui-radius-sm);
+  }
 
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list {
-  grid-auto-flow: row;
-  grid-auto-columns: auto;
-  border-block-end: 0;
-  border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
-}
+  .panels {
+    min-inline-size: 0;
+  }
+  .panels > :slotted(*) {
+    padding: var(--ui-space-4);
+  }
 
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button,
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
-  .list
-  > :slotted(button[slot="tab"]) {
-  margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
-  border-block-end: 0;
-  border-inline-end: var(--ui-accent-line-width) solid transparent;
-  text-align: start;
-}
+  :scope:where(:scope):is([data-ui-tabs-state~="orientation=vertical"]) {
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-items: start;
+  }
 
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
-  .list
-  button[aria-selected="true"],
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
-  .list
-  > :slotted(button[slot="tab"][aria-selected="true"]) {
-  border-inline-end-color: var(--ui-accent-solid);
-}
+  :scope[data-ui-tabs-state~="orientation=vertical"] .list {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    border-block-end: 0;
+    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .list button,
-  .list > :slotted(button[slot="tab"]) {
-    transition: none;
+  :scope[data-ui-tabs-state~="orientation=vertical"] .list button,
+  :scope[data-ui-tabs-state~="orientation=vertical"] .list > :slotted(button[slot="tab"]) {
+    margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
+    border-block-end: 0;
+    border-inline-end: var(--ui-accent-line-width) solid transparent;
+    text-align: start;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tabs"][hidden] {
-  display: none;
+  :scope[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"],
+  :scope[data-ui-tabs-state~="orientation=vertical"]
+    .list
+    > :slotted(button[slot="tab"][aria-selected="true"]) {
+    border-inline-end-color: var(--ui-accent-solid);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .list button, .list > :slotted(button[slot="tab"]) {
+      transition: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiText.d.ts

@@ -114,17 +114,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    font: "inherit" | "sans" | null;
     size: "inherit" | "xs" | "sm" | "md" | "lg" | null;
-    tone: "secondary" | "default" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
+    trim: boolean | null;
+    font: "inherit" | "sans" | null;
+    tone: "default" | "secondary" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
     variant: "code" | "body" | "eyebrow" | null;
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
     wrap: "normal" | "anywhere" | null;
-    trim: boolean | null;
     grow: boolean | null;
     truncate: boolean | null;
-    weight: "inherit" | "normal" | "medium" | "semibold" | null;
+    weight: "medium" | "inherit" | "normal" | "semibold" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;