@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiCallout.vue

@@ -1,7 +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, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -81,56 +82,9 @@ 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 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-callout> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-callout> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-callout')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -143,7 +97,7 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-callout"
+    class="ui-callout"
     role="note"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -297,143 +251,145 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-callout"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-callout-icon-column: var(--ui-callout-icon-column);
-  --_ui-callout-icon: var(--ui-callout-icon);
-  --_ui-callout-icon-size: var(--ui-callout-icon-size);
+/* One line box tall, so the icon centres on the first line of text. */
 
-  --_callout-surface: var(--ui-info-soft);
-  --_ui-selection-context-surface: light-dark(
-    oklch(
-      from var(--ui-callout-surface, var(--_callout-surface))
-      calc(l - 0.045)
-      calc(max(c, min(0.045, c * 3)))
-      h
-    ),
-    oklch(
-      from var(--ui-callout-surface, var(--_callout-surface))
-      calc(l + 0.045)
-      calc(max(c, min(0.045, c * 3)))
-      h
-    )
-  );
-  --_ui-selection-context-border: light-dark(
-    oklch(
-      from var(--ui-callout-surface, var(--_callout-surface))
-      calc(l - 0.085)
-      calc(max(c, min(0.045, c * 3)))
-      h
-    ),
-    oklch(
-      from var(--ui-callout-surface, var(--_callout-surface))
-      calc(l + 0.085)
-      calc(max(c, min(0.045, c * 3)))
-      h
-    )
-  );
-  --_ui-selection-context-text: var(--ui-text-primary);
+/* A link in the callout's text is underlined, so it reads as a link by more than colour. */
 
-  --_callout-border: var(--ui-info-solid);
-  --_callout-icon: var(--ui-info-solid);
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-  display: grid;
-  grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
-  gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
-  align-items: start;
-  max-width: 100%;
-  padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
-  padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
-  padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
-  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
-    color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-  border-inline-start: var(
-    --ui-callout-leading-border-width,
-    var(--ui-callout-border-width, var(--ui-border-width))
-  ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-  border-radius: var(--ui-radius-md);
-  background: var(--ui-callout-surface, var(--_callout-surface));
-  color: var(--ui-callout-text, 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);
-}
+@scope (.ui-callout) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-callout-icon-column: var(--ui-callout-icon-column);
+    --_ui-callout-icon: var(--ui-callout-icon);
+    --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-/* One line box tall, so the icon centres on the first line of text. */
-.icon {
-  display: grid;
-  place-items: center;
-  inline-size: var(--_ui-callout-icon-column, 1.125rem);
-  block-size: 1lh;
-  color: var(--_ui-callout-icon, var(--_callout-icon));
-}
+    --_callout-surface: var(--ui-info-soft);
+    --_ui-selection-context-surface: light-dark(
+      oklch(
+        from var(--ui-callout-surface, var(--_callout-surface))
+        calc(l - 0.045)
+        calc(max(c, min(0.045, c * 3)))
+        h
+      ),
+      oklch(
+        from var(--ui-callout-surface, var(--_callout-surface))
+        calc(l + 0.045)
+        calc(max(c, min(0.045, c * 3)))
+        h
+      )
+    );
+    --_ui-selection-context-border: light-dark(
+      oklch(
+        from var(--ui-callout-surface, var(--_callout-surface))
+        calc(l - 0.085)
+        calc(max(c, min(0.045, c * 3)))
+        h
+      ),
+      oklch(
+        from var(--ui-callout-surface, var(--_callout-surface))
+        calc(l + 0.085)
+        calc(max(c, min(0.045, c * 3)))
+        h
+      )
+    );
+    --_ui-selection-context-text: var(--ui-text-primary);
 
-.icon svg {
-  inline-size: var(--_ui-callout-icon-size, 1.125rem);
-  block-size: var(--_ui-callout-icon-size, 1.125rem);
-}
+    --_callout-border: var(--ui-info-solid);
+    --_callout-icon: var(--ui-info-solid);
 
-.content {
-  min-inline-size: 0;
-}
+    display: grid;
+    grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
+    gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
+    align-items: start;
+    max-width: 100%;
+    padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
+    padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
+    padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
+    border: var(--ui-callout-border-width, var(--ui-border-width)) solid
+      color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+    border-inline-start: var(
+      --ui-callout-leading-border-width,
+      var(--ui-callout-border-width, var(--ui-border-width))
+    ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+    border-radius: var(--ui-radius-md);
+    background: var(--ui-callout-surface, var(--_callout-surface));
+    color: var(--ui-callout-text, 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);
+  }
+  .icon {
+    display: grid;
+    place-items: center;
+    inline-size: var(--_ui-callout-icon-column, 1.125rem);
+    block-size: 1lh;
+    color: var(--_ui-callout-icon, var(--_callout-icon));
+  }
 
-.heading {
-  display: block;
-  font-weight: var(--ui-font-semibold);
-}
+  .icon svg {
+    inline-size: var(--_ui-callout-icon-size, 1.125rem);
+    block-size: var(--_ui-callout-icon-size, 1.125rem);
+  }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"],
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"] {
-  --_ui-selection-context-surface: initial;
-  --_ui-selection-context-border: initial;
-  --_ui-selection-context-text: initial;
-  --_callout-surface: var(--ui-surface-muted);
-  --_callout-border: var(--ui-border-strong);
-  --_callout-icon: var(--ui-text-secondary);
-}
+  .content {
+    min-inline-size: 0;
+  }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=tip"] {
-  --_callout-surface: var(--ui-success-soft);
-  --_callout-border: var(--ui-success-solid);
-  --_callout-icon: var(--ui-success-solid);
-}
+  .heading {
+    display: block;
+    font-weight: var(--ui-font-semibold);
+  }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=important"] {
-  --_callout-surface: var(--ui-accent-soft);
-  --_callout-border: var(--ui-accent-solid);
-  --_callout-icon: var(--ui-accent-solid);
-}
+  :scope:where(:scope):is([data-ui-callout-state~="tone=neutral"]),
+  :scope:where(:scope):is([data-ui-callout-state~="tone=note"]) {
+    --_ui-selection-context-surface: initial;
+    --_ui-selection-context-border: initial;
+    --_ui-selection-context-text: initial;
+    --_callout-surface: var(--ui-surface-muted);
+    --_callout-border: var(--ui-border-strong);
+    --_callout-icon: var(--ui-text-secondary);
+  }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"] {
-  --_callout-surface: var(--ui-warning-soft);
-  --_callout-border: var(--ui-warning-solid);
-  --_callout-icon: var(--ui-warning-solid);
-}
+  :scope:where(:scope):is([data-ui-callout-state~="tone=tip"]) {
+    --_callout-surface: var(--ui-success-soft);
+    --_callout-border: var(--ui-success-solid);
+    --_callout-icon: var(--ui-success-solid);
+  }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=success"] {
-  --_callout-surface: var(--ui-success-soft);
-  --_callout-border: var(--ui-success-solid);
-  --_callout-icon: var(--ui-success-solid);
-}
+  :scope:where(:scope):is([data-ui-callout-state~="tone=important"]) {
+    --_callout-surface: var(--ui-accent-soft);
+    --_callout-border: var(--ui-accent-solid);
+    --_callout-icon: var(--ui-accent-solid);
+  }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"],
-[data-component~="ui-callout"][data-ui-callout-state~="tone=caution"] {
-  --_callout-surface: var(--ui-danger-soft);
-  --_callout-border: var(--ui-danger-solid);
-  --_callout-icon: var(--ui-danger-solid);
-}
+  :scope:where(:scope):is([data-ui-callout-state~="tone=warning"]) {
+    --_callout-surface: var(--ui-warning-soft);
+    --_callout-border: var(--ui-warning-solid);
+    --_callout-icon: var(--ui-warning-solid);
+  }
 
-/* A link in the callout's text is underlined, so it reads as a link by more than colour. */
-.content :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-callout-state~="tone=success"]) {
+    --_callout-surface: var(--ui-success-soft);
+    --_callout-border: var(--ui-success-solid);
+    --_callout-icon: var(--ui-success-solid);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-callout"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-callout-state~="tone=danger"]),
+  :scope:where(:scope):is([data-ui-callout-state~="tone=caution"]) {
+    --_callout-surface: var(--ui-danger-soft);
+    --_callout-border: var(--ui-danger-solid);
+    --_callout-icon: var(--ui-danger-solid);
+  }
+  .content :slotted(a) {
+    color: var(--ui-accent-active);
+    text-decoration: underline;
+    text-decoration-thickness: 0.06em;
+    text-underline-offset: 0.18em;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiCard.d.ts

@@ -55,7 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: "sm" | "md" | "lg" | "content" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "subtle" | "outlined" | "elevated" | null;
-    as: "div" | "article" | "aside" | "section" | null;
+    as: "article" | "aside" | "div" | "section" | null;
     padding: "xs" | "sm" | "md" | "lg" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;