@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiText.vue

@@ -1,8 +1,8 @@
-<!-- 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, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { preserveRootFocus } from './host'
+import { checkHydratedRoot, nativeAttrs, preserveRootFocus, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -252,75 +252,33 @@ 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 reflectedProp = useReflectedProp()
 
 const rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
 const root = rootArmElement
 preserveRootFocus(root)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element)
-    || hydrationNode.localName !== ((checkedProps.value.as === 'span')
-        ? 'span'
-        : ((checkedProps.value.as === 'div')
-          ? 'div'
-          : ((checkedProps.value.as === 'small')
-            ? 'small'
-            : ((checkedProps.value.as === 'strong')
-              ? 'strong'
-              : ((checkedProps.value.as === 'label')
-                ? 'label'
-                : ((checkedProps.value.as === 'h2')
-                  ? 'h2'
-                  : ((checkedProps.value.as === 'h3')
-                    ? 'h3'
-                    : ((checkedProps.value.as === 'h4')
-                      ? 'h4'
-                      : ((checkedProps.value.as === 'h5')
-                        ? 'h5'
-                        : ((checkedProps.value.as === 'h6') ? 'h6' : ('p'))))))))))))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-text> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-text> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot(
+  (checkedProps.value.as === 'span')
+    ? 'span'
+    : ((checkedProps.value.as === 'div')
+      ? 'div'
+      : ((checkedProps.value.as === 'small')
+        ? 'small'
+        : ((checkedProps.value.as === 'strong')
+          ? 'strong'
+          : ((checkedProps.value.as === 'label')
+            ? 'label'
+            : ((checkedProps.value.as === 'h2')
+              ? 'h2'
+              : ((checkedProps.value.as === 'h3')
+                ? 'h3'
+                : ((checkedProps.value.as === 'h4')
+                  ? 'h4'
+                  : ((checkedProps.value.as === 'h5')
+                    ? 'h5'
+                    : ((checkedProps.value.as === 'h6') ? 'h6' : ('p')))))))))),
+  'ui-text',
+)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -350,7 +308,7 @@ const hostState = computed(() =>
 <template>
   <span
     v-if="checkedProps.as === 'span'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -369,7 +327,7 @@ const hostState = computed(() =>
   ><slot /></span>
   <div
     v-else-if="checkedProps.as === 'div'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -390,7 +348,7 @@ const hostState = computed(() =>
   </div>
   <small
     v-else-if="checkedProps.as === 'small'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -409,7 +367,7 @@ const hostState = computed(() =>
   ><slot /></small>
   <strong
     v-else-if="checkedProps.as === 'strong'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -428,7 +386,7 @@ const hostState = computed(() =>
   ><slot /></strong>
   <label
     v-else-if="checkedProps.as === 'label'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -447,7 +405,7 @@ const hostState = computed(() =>
   ><slot /></label>
   <h2
     v-else-if="checkedProps.as === 'h2'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -468,7 +426,7 @@ const hostState = computed(() =>
   </h2>
   <h3
     v-else-if="checkedProps.as === 'h3'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -489,7 +447,7 @@ const hostState = computed(() =>
   </h3>
   <h4
     v-else-if="checkedProps.as === 'h4'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -510,7 +468,7 @@ const hostState = computed(() =>
   </h4>
   <h5
     v-else-if="checkedProps.as === 'h5'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -531,7 +489,7 @@ const hostState = computed(() =>
   </h5>
   <h6
     v-else-if="checkedProps.as === 'h6'"
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -552,7 +510,7 @@ const hostState = computed(() =>
   </h6>
   <p
     v-else
-    data-component="ui-text"
+    class="ui-text"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -577,126 +535,129 @@ const hostState = computed(() =>
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
        heading. */
-[data-component~="ui-text"][data-ui-text-state~="grow"] {
-  flex: 1;
-}
-
-[data-component~="ui-text"] {
-  margin: 0;
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-  text-align: start;
-}
 
 /* A heading drops the browser's heading size and weight, so size and weight set it as they set
    any text, and inherit keeps the text around it. */
-[data-component~="ui-text"]:is(h2, h3, h4, h5, h6) {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-[data-component~="ui-text"][data-ui-text-state~="size=xs"] {
-  font-size: var(--ui-font-size-xs);
-  line-height: var(--ui-line-height);
-}
-[data-component~="ui-text"][data-ui-text-state~="size=sm"] {
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height);
-}
-[data-component~="ui-text"][data-ui-text-state~="size=md"] {
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height);
-}
-[data-component~="ui-text"][data-ui-text-state~="size=lg"] {
-  font-size: var(--ui-font-size-lg);
-  line-height: var(--ui-line-height-relaxed);
-}
 
 /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
-[data-component~="ui-text"][data-ui-text-state~="trim"] {
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
-}
-
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"] {
-  color: var(--ui-text-secondary);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"] {
-  color: var(--ui-text-muted);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"] {
-  color: var(--ui-accent-active);
-}
 /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
    in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"] {
-  color: var(--ui-danger-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=success"] {
-  color: var(--ui-success-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=info"] {
-  color: var(--ui-info-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=warning"] {
-  color: var(--ui-warning-subtle-text);
-}
-
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"] {
-  font-weight: var(--ui-font-normal);
-}
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"] {
-  font-weight: var(--ui-font-medium);
-}
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"] {
-  font-weight: var(--ui-font-semibold);
-}
-
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"] {
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-[data-component~="ui-text"][data-ui-text-state~="variant=code"] {
-  font-family: var(--ui-font-family-mono);
-}
 
 /* A link in running text is underlined, so it stands apart from the words around it by more than
    colour. */
-[data-component~="ui-text"] :slotted(a) {
-  color: var(--ui-accent-active);
-  text-decoration: underline;
-  text-decoration-thickness: 0.06em;
-  text-underline-offset: 0.18em;
-}
-
-[data-component~="ui-text"][data-ui-text-state~="truncate"] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
-[data-component~="ui-text"][data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
-  overflow-x: clip;
-  overflow-y: visible;
-}
 
-[data-component~="ui-text"][data-ui-text-state~="align=center"] {
-  text-align: center;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-text"][data-ui-text-state~="font=sans"] {
-  font-family: var(--ui-font-family-sans, sans-serif);
-}
+@scope (.ui-text) {
+  :scope:where(:scope):is([data-ui-text-state~="grow"]) {
+    flex: 1;
+  }
 
-[data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"] {
-  overflow-wrap: anywhere;
-}
+  :scope:where(:scope) {
+    margin: 0;
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+    text-align: start;
+  }
+  :scope:where(:scope):is(:is(h2, h3, h4, h5, h6)) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-text-state~="size=xs"]) {
+    font-size: var(--ui-font-size-xs);
+    line-height: var(--ui-line-height);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="size=sm"]) {
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="size=md"]) {
+    font-size: var(--ui-font-size-md);
+    line-height: var(--ui-line-height);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="size=lg"]) {
+    font-size: var(--ui-font-size-lg);
+    line-height: var(--ui-line-height-relaxed);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="trim"]) {
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="tone=secondary"]) {
+    color: var(--ui-text-secondary);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="tone=muted"]) {
+    color: var(--ui-text-muted);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="tone=accent"]) {
+    color: var(--ui-accent-active);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="tone=danger"]) {
+    color: var(--ui-danger-subtle-text);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="tone=success"]) {
+    color: var(--ui-success-subtle-text);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="tone=info"]) {
+    color: var(--ui-info-subtle-text);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="tone=warning"]) {
+    color: var(--ui-warning-subtle-text);
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="weight=normal"]) {
+    font-weight: var(--ui-font-normal);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="weight=medium"]) {
+    font-weight: var(--ui-font-medium);
+  }
+  :scope:where(:scope):is([data-ui-text-state~="weight=semibold"]) {
+    font-weight: var(--ui-font-semibold);
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="variant=eyebrow"]) {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-semibold);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  :scope:where(:scope):is([data-ui-text-state~="variant=code"]) {
+    font-family: var(--ui-font-family-mono);
+  }
+  :scope :slotted(a) {
+    color: var(--ui-accent-active);
+    text-decoration: underline;
+    text-decoration-thickness: 0.06em;
+    text-underline-offset: 0.18em;
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="truncate"]) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :scope:where(:scope):is([data-ui-text-state~="trim"][data-ui-text-state~="truncate"]) {
+    overflow-x: clip;
+    overflow-y: visible;
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="align=center"]) {
+    text-align: center;
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="font=sans"]) {
+    font-family: var(--ui-font-family-sans, sans-serif);
+  }
+
+  :scope:where(:scope):is([data-ui-text-state~="wrap=anywhere"]) {
+    overflow-wrap: anywhere;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiTextarea.d.ts

@@ -85,11 +85,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     value: string | null;
+    required: boolean | null;
     invalid: boolean | null;
-    rows: number | null;
     size: "sm" | "md" | "lg" | null;
+    rows: number | null;
     disabled: boolean | null;
-    required: boolean | null;
     readonly: boolean | null;
     maxRows: number | null;
     autosize: boolean | null;