@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiCard.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 })
@@ -125,61 +125,19 @@ 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 === 'section')
-        ? 'section'
-        : ((checkedProps.value.as === 'article')
-          ? 'article'
-          : ((checkedProps.value.as === 'aside') ? 'aside' : ('div')))))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-card> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-card> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot(
+  (checkedProps.value.as === 'section')
+    ? 'section'
+    : ((checkedProps.value.as === 'article')
+      ? 'article'
+      : ((checkedProps.value.as === 'aside') ? 'aside' : ('div'))),
+  'ui-card',
+)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -201,7 +159,7 @@ const hostState = computed(() =>
 <template>
   <section
     v-if="checkedProps.as === 'section'"
-    data-component="ui-card"
+    class="ui-card"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
@@ -216,7 +174,7 @@ const hostState = computed(() =>
   </section>
   <article
     v-else-if="checkedProps.as === 'article'"
-    data-component="ui-card"
+    class="ui-card"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
@@ -231,7 +189,7 @@ const hostState = computed(() =>
   </article>
   <aside
     v-else-if="checkedProps.as === 'aside'"
-    data-component="ui-card"
+    class="ui-card"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
@@ -246,7 +204,7 @@ const hostState = computed(() =>
   </aside>
   <div
     v-else
-    data-component="ui-card"
+    class="ui-card"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
@@ -264,111 +222,114 @@ const hostState = computed(() =>
 <style scoped>
 /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */
-[data-component~="ui-card"] {
-  --_ui-card-surface: var(--ui-surface-raised);
-  --_ui-selection-context-surface: initial;
-  --_ui-selection-context-border: initial;
-  --_ui-selection-context-text: initial;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-4);
-  box-sizing: border-box;
-  min-inline-size: 0;
-  padding: var(--ui-space-5);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-lg);
-  background: var(--_ui-card-surface);
-  color: var(--ui-text-primary);
-}
 
-[data-component~="ui-card"][data-ui-card-state~="padding=xs"] {
-  gap: var(--ui-space-1);
-  padding: var(--ui-space-2);
-}
-[data-component~="ui-card"][data-ui-card-state~="padding=sm"] {
-  gap: var(--ui-space-2);
-  padding: var(--ui-space-3);
-}
+/* A colored panel shades rows in its own hue, without changing button intent. */
 
-[data-component~="ui-card"][data-ui-card-state~="padding=lg"] {
-  padding: var(--ui-space-6);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-card"][data-ui-card-state~="variant=subtle"] {
-  border-color: transparent;
-  --_ui-card-surface: var(--ui-surface-muted);
-}
+@scope (.ui-card) {
+  :scope:where(:scope) {
+    --_ui-card-surface: var(--ui-surface-raised);
+    --_ui-selection-context-surface: initial;
+    --_ui-selection-context-border: initial;
+    --_ui-selection-context-text: initial;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--ui-space-5);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+    background: var(--_ui-card-surface);
+    color: var(--ui-text-primary);
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="variant=elevated"] {
-  border-color: var(--ui-border-subtle);
-  box-shadow: var(--ui-shadow-lg);
-}
+  :scope:where(:scope):is([data-ui-card-state~="padding=xs"]) {
+    gap: var(--ui-space-1);
+    padding: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-card-state~="padding=sm"]) {
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-3);
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="tone=accent"] {
-  border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
-  --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
-}
+  :scope:where(:scope):is([data-ui-card-state~="padding=lg"]) {
+    padding: var(--ui-space-6);
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="tone=info"] {
-  border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
-  --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
-}
+  :scope:where(:scope):is([data-ui-card-state~="variant=subtle"]) {
+    border-color: transparent;
+    --_ui-card-surface: var(--ui-surface-muted);
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="tone=success"] {
-  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
-  --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
-}
+  :scope:where(:scope):is([data-ui-card-state~="variant=elevated"]) {
+    border-color: var(--ui-border-subtle);
+    box-shadow: var(--ui-shadow-lg);
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="tone=warning"] {
-  border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
-  --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
-}
+  :scope:where(:scope):is([data-ui-card-state~="tone=accent"]) {
+    border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
+    --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
-  border-color: transparent;
-}
+  :scope:where(:scope):is([data-ui-card-state~="tone=info"]) {
+    border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
+    --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
-  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-  /* An accent edge keeps the corners on its side straight. */
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  --_ui-card-surface: var(--ui-danger-soft);
-}
+  :scope:where(:scope):is([data-ui-card-state~="tone=success"]) {
+    border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
+    --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
+  }
 
-/* A colored panel shades rows in its own hue, without changing button intent. */
-[data-component~="ui-card"][data-ui-card-state~="tone=accent"],
-[data-component~="ui-card"][data-ui-card-state~="tone=info"],
-[data-component~="ui-card"][data-ui-card-state~="tone=success"],
-[data-component~="ui-card"][data-ui-card-state~="tone=warning"],
-[data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
-  --_ui-selection-context-surface: light-dark(
-    oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
-    oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
-  );
-  --_ui-selection-context-border: light-dark(
-    oklch(from var(--_ui-card-surface) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
-    oklch(from var(--_ui-card-surface) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
-  );
-  --_ui-selection-context-text: var(--ui-text-primary);
-}
+  :scope:where(:scope):is([data-ui-card-state~="tone=warning"]) {
+    border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
+    --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
+  }
 
-[data-component~="ui-card"][data-ui-card-state~="size=sm"] {
-  inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
-  max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
-}
-[data-component~="ui-card"][data-ui-card-state~="size=md"] {
-  inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
-  max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
-}
-[data-component~="ui-card"][data-ui-card-state~="size=lg"] {
-  inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
-  max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
-}
+  :scope:where(:scope):is([data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"])) {
+    border-color: transparent;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-card"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-card-state~="tone=danger"]) {
+    border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+    border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+    /* An accent edge keeps the corners on its side straight. */
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    --_ui-card-surface: var(--ui-danger-soft);
+  }
+  :scope:where(:scope):is([data-ui-card-state~="tone=accent"]),
+  :scope:where(:scope):is([data-ui-card-state~="tone=info"]),
+  :scope:where(:scope):is([data-ui-card-state~="tone=success"]),
+  :scope:where(:scope):is([data-ui-card-state~="tone=warning"]),
+  :scope:where(:scope):is([data-ui-card-state~="tone=danger"]) {
+    --_ui-selection-context-surface: light-dark(
+      oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+      oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+    );
+    --_ui-selection-context-border: light-dark(
+      oklch(from var(--_ui-card-surface) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+      oklch(from var(--_ui-card-surface) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+    );
+    --_ui-selection-context-text: var(--ui-text-primary);
+  }
+
+  :scope:where(:scope):is([data-ui-card-state~="size=sm"]) {
+    inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+  }
+  :scope:where(:scope):is([data-ui-card-state~="size=md"]) {
+    inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+  }
+  :scope:where(:scope):is([data-ui-card-state~="size=lg"]) {
+    inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiCheckbox.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;
+} & {
+    description?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     checked: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -92,20 +96,19 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
-    label: string | null;
     name: string | null;
     value: string | null;
+    required: boolean | null;
+    label: string | null;
     invalid: boolean | null;
     size: "sm" | "md" | "lg" | null;
     disabled: boolean | null;
     checked: boolean | null;
     indeterminate: boolean | null;
-    required: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    description?: (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;