@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiInputGroup.vue

@@ -1,8 +1,14 @@
-<!-- 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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -111,57 +117,11 @@ 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 root = ref<HTMLElement | null>(null)
-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-input-group> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-input-group> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-input-group')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -205,7 +165,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 
 <template>
   <div
-    data-component="ui-input-group"
+    class="ui-input-group"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-action-position="reflectedProp('actionPosition', 'action-position', checkedProps.actionPosition, undefined, false)"
@@ -244,220 +204,220 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
    whole value is. The action slot takes one button at the end, inside the border, for the one
    thing the field is for ("Continue" after a site's address), so it reads as the field's action
    and not the form's. */
-[data-component~="ui-input-group"] {
-  /* The group's own border and height stand for the input's, so the group is a lone Input's height.
-     Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
-  --_ui-default-input-border-width: 0;
-  --_ui-default-input-min-block-size: 0;
-  --_ui-default-input-border: transparent;
-  --_ui-default-input-border-hover: transparent;
-  --_ui-default-input-focus-border: transparent;
-  --_ui-default-input-invalid-border: transparent;
-  --_ui-default-input-invalid-focus-shadow: none;
-  --_ui-default-input-shadow: none;
-  --_ui-default-input-focus-shadow: none;
-  --_ui-default-input-focus-outline: none;
-  --_ui-default-input-radius: 0;
-  --_ui-default-input-surface: transparent;
-  --_ui-default-textarea-border-width: 0;
-  --_ui-default-textarea-border: transparent;
-  --_ui-default-textarea-border-hover: transparent;
-  --_ui-default-textarea-focus-border: transparent;
-  --_ui-default-textarea-invalid-border: transparent;
-  --_ui-default-textarea-invalid-focus-shadow: none;
-  --_ui-default-textarea-shadow: none;
-  --_ui-default-textarea-focus-shadow: none;
-  --_ui-default-textarea-focus-outline: none;
-  --_ui-default-textarea-radius: 0;
-  --_ui-default-textarea-surface: transparent;
-
-  display: flex;
-  align-items: stretch;
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-inline-size: 0;
-  min-block-size: var(--ui-control-size-md);
-  /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
-  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background: var(--ui-control-surface, var(--ui-surface-elevated));
-  box-shadow: var(--ui-control-inset);
-  overflow: hidden;
-  /* A press anywhere in the frame focuses the input. */
-  cursor: text;
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-[data-component~="ui-input-group"][data-ui-input-group-state~="variant=subtle"] {
-  border-color: var(--ui-border);
-  background: var(--ui-surface-muted);
-  box-shadow: none;
-}
 
 /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-[data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=sm"]) {
-  min-block-size: var(--ui-control-size-sm);
-}
 
-[data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=lg"]) {
-  min-block-size: var(--ui-control-size-lg);
-}
+/* The ring shows when the field's input would show its own: when it is focus-visible, which a
+   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
 
-@media (pointer: coarse) {
-  [data-component~="ui-input-group"] {
-    min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-  }
+/* Forced colors drop box shadows, so the focus ring becomes an outline. */
 
-  [data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=sm"]) {
-    min-block-size: var(--ui-control-min-block-size);
-  }
-}
+/* Fixed text is part of the value, but should not look editable. */
 
-[data-component~="ui-input-group"]:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
-}
+/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
+   small button sits inside it with the difference split evenly, and the field keeps its height. */
 
-/* The ring shows when the field's input would show its own: when it is focus-visible, which a
-   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-[data-component~="ui-input-group"]:has(.field :is(input, textarea):focus-visible) {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
-  box-shadow:
-    var(--ui-control-inset),
-    var(--ui-control-focus-halo-shadow);
-}
+/* Multiline text owns the first row; its action remains inside the same frame below it. */
 
-[data-component~="ui-input-group"]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
-  border-color: var(
-    --ui-input-group-invalid-border,
-    var(--ui-field-danger, var(--ui-danger-solid))
-  );
-}
+/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+   so a translated label or pending indicator cannot cover what the person types. */
 
-[data-component~="ui-input-group"]:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
-  box-shadow: var(
-    --ui-input-group-invalid-focus-shadow,
-    var(--ui-control-inset),
-    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-      in srgb,
-      var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-      transparent
-    )
-  );
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-/* Forced colors drop box shadows, so the focus ring becomes an outline. */
-@media (forced-colors: active) {
-  [data-component~="ui-input-group"]:has(:is(input, textarea):focus-visible) {
-    outline: var(--ui-focus-width) solid Highlight;
-    outline-offset: var(--ui-border-width);
+@scope (.ui-input-group) {
+  :scope:where(:scope) {
+    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
+       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
+    --_ui-default-input-border-width: 0;
+    --_ui-default-input-min-block-size: 0;
+    --_ui-default-input-border: transparent;
+    --_ui-default-input-border-hover: transparent;
+    --_ui-default-input-focus-border: transparent;
+    --_ui-default-input-invalid-border: transparent;
+    --_ui-default-input-invalid-focus-shadow: none;
+    --_ui-default-input-shadow: none;
+    --_ui-default-input-focus-shadow: none;
+    --_ui-default-input-focus-outline: none;
+    --_ui-default-input-radius: 0;
+    --_ui-default-input-surface: transparent;
+    --_ui-default-textarea-border-width: 0;
+    --_ui-default-textarea-border: transparent;
+    --_ui-default-textarea-border-hover: transparent;
+    --_ui-default-textarea-focus-border: transparent;
+    --_ui-default-textarea-invalid-border: transparent;
+    --_ui-default-textarea-invalid-focus-shadow: none;
+    --_ui-default-textarea-shadow: none;
+    --_ui-default-textarea-focus-shadow: none;
+    --_ui-default-textarea-focus-outline: none;
+    --_ui-default-textarea-radius: 0;
+    --_ui-default-textarea-surface: transparent;
+
+    display: flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-control-size-md);
+    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-elevated));
+    box-shadow: var(--ui-control-inset);
+    overflow: hidden;
+    /* A press anywhere in the frame focuses the input. */
+    cursor: text;
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
-}
 
-[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"],
-[data-component~="ui-input-group"]:has(:is(input, textarea):disabled) {
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.field {
-  display: flex;
-  flex: 1;
-  min-inline-size: 0;
-}
+  :scope:where(:scope):is([data-ui-input-group-state~="variant=subtle"]) {
+    border-color: var(--ui-border);
+    background: var(--ui-surface-muted);
+    box-shadow: none;
+  }
+  :scope:where(:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+    min-block-size: var(--ui-control-size-sm);
+  }
 
-.affix {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  padding-inline: var(--ui-space-2);
-  color: var(--ui-text-muted);
-  font-family: var(--ui-font-family-mono);
-  font-size: var(--ui-font-size-sm);
-  white-space: nowrap;
-}
+  :scope:where(:scope):is(:has(.field [data-ui-input-state~="size=lg"])) {
+    min-block-size: var(--ui-control-size-lg);
+  }
 
-/* Fixed text is part of the value, but should not look editable. */
-.affix:has([slot="prefix"]),
-.affix:has([slot="suffix"]) {
-  background: var(--ui-surface-muted);
-}
+  @media (pointer: coarse) {
+    :scope:where(:scope) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
 
-.affix:has([slot="prefix"]) {
-  border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
-}
+    :scope:where(:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+      min-block-size: var(--ui-control-min-block-size);
+    }
+  }
 
-.affix:has([slot="suffix"]) {
-  border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
+  :scope:where(:scope):is(:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid])))) {
+    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+  }
+  :scope:where(:scope):is(:has(.field :is(input, textarea):focus-visible)) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
+  }
 
-[data-component~="ui-input-group"][data-ui-input-group-state~="prefixKind=icon"] {
-  --_ui-default-input-padding-inline-start: var(--ui-space-2);
-}
-[data-component~="ui-input-group"][data-ui-input-group-state~="prefixKind=icon"]
-  .affix:first-child {
-  padding-inline-end: 0;
-  border-inline-end: 0;
-  background: transparent;
-}
+  :scope:where(:scope):is(:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+    border-color: var(
+      --ui-input-group-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
+  }
 
-/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
-   small button sits inside it with the difference split evenly, and the field keeps its height. */
-.action {
-  display: flex;
-  flex: none;
-  align-items: center;
-  padding-inline: var(--ui-space-1);
-}
+  :scope:where(:scope):is(:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible)) {
+    box-shadow: var(
+      --ui-input-group-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
+    );
+  }
+  @media (forced-colors: active) {
+    :scope:where(:scope):is(:has(:is(input, textarea):focus-visible)) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: var(--ui-border-width);
+    }
+  }
 
-/* Multiline text owns the first row; its action remains inside the same frame below it. */
-[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"] {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-}
+  :scope:where(:scope):is([data-ui-input-group-state~="disabled"]),
+  :scope:where(:scope):is(:has(:is(input, textarea):disabled)) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 
-[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"] .field {
-  grid-column: 2;
-}
+  .field {
+    display: flex;
+    flex: 1;
+    min-inline-size: 0;
+  }
 
-[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"] .action {
-  grid-column: 1 / -1;
-  justify-content: end;
-  padding: var(--ui-space-2);
-  padding-block-start: 0;
-}
+  .affix {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-2);
+    color: var(--ui-text-muted);
+    font-family: var(--ui-font-family-mono);
+    font-size: var(--ui-font-size-sm);
+    white-space: nowrap;
+  }
+  .affix:has([slot="prefix"]), .affix:has([slot="suffix"]) {
+    background: var(--ui-surface-muted);
+  }
 
-/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
-   so a translated label or pending indicator cannot cover what the person types. */
-[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] {
-  --_ui-default-textarea-padding-inline-end: calc(
-    var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
-  );
-}
+  .affix:has([slot="prefix"]) {
+    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
+  }
 
-[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-  .field {
-  grid-row: 1;
-}
+  .affix:has([slot="suffix"]) {
+    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
+  }
 
-[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+  :scope:where(:scope):is([data-ui-input-group-state~="prefixKind=icon"]) {
+    --_ui-default-input-padding-inline-start: var(--ui-space-2);
+  }
+  :scope[data-ui-input-group-state~="prefixKind=icon"] .affix:first-child {
+    padding-inline-end: 0;
+    border-inline-end: 0;
+    background: transparent;
+  }
   .action {
-  grid-column: 2;
-  grid-row: 1;
-  align-self: start;
-  justify-self: end;
-  padding: var(--ui-space-2);
-}
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-1);
+  }
+  :scope:where(:scope):is([data-ui-input-group-state~="multiline"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
 
-.affix:empty,
-.action:empty {
-  display: none;
-}
+  :scope[data-ui-input-group-state~="multiline"] .field {
+    grid-column: 2;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input-group"][hidden] {
-  display: none;
+  :scope[data-ui-input-group-state~="multiline"] .action {
+    grid-column: 1 / -1;
+    justify-content: end;
+    padding: var(--ui-space-2);
+    padding-block-start: 0;
+  }
+  :scope:where(:scope):is([data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]) {
+    --_ui-default-textarea-padding-inline-end: calc(
+      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
+    );
+  }
+
+  :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .field {
+    grid-row: 1;
+  }
+
+  :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .action {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    padding: var(--ui-space-2);
+  }
+
+  .affix:empty, .action:empty {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>