@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiDescriptionItem.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 })
@@ -34,61 +35,14 @@ 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-description-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-description-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-description-item')
 </script>
 
 <template>
   <div
-    data-component="ui-description-item"
+    class="ui-description-item"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-term="reflectedProp('term', 'term', checkedProps.term, undefined, false)"
@@ -100,38 +54,41 @@ if (
 
 <style scoped>
 /* One term and its value in a ui-description-list, laid out by the list's layout. */
-[data-component~="ui-description-item"] {
-  display: var(--_ui-description-display, grid);
-  grid-column: var(--_ui-description-column, 1 / -1);
-  grid-template-columns: subgrid;
-  flex-direction: column;
-  align-items: var(--_ui-description-align, baseline);
-  gap: var(--ui-space-1) var(--ui-space-6);
-  min-inline-size: 0;
-  padding: var(--_ui-description-padding, 0);
-  border-width: var(--_ui-description-border-width, 0);
-  border-style: solid;
-  border-color: var(--_ui-description-border-color, var(--ui-border-default));
-  border-radius: var(--ui-radius-md);
-  font-size: var(--ui-font-size-sm);
-}
 
-dt {
-  color: var(--ui-text-muted);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-dd {
-  margin: 0;
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-  font-weight: var(--ui-font-medium);
-  font-size: var(--_ui-description-value-size, inherit);
-  text-align: start;
-  overflow-wrap: anywhere;
-}
+@scope (.ui-description-item) {
+  :scope:where(:scope) {
+    display: var(--_ui-description-display, grid);
+    grid-column: var(--_ui-description-column, 1 / -1);
+    grid-template-columns: subgrid;
+    flex-direction: column;
+    align-items: var(--_ui-description-align, baseline);
+    gap: var(--ui-space-1) var(--ui-space-6);
+    min-inline-size: 0;
+    padding: var(--_ui-description-padding, 0);
+    border-width: var(--_ui-description-border-width, 0);
+    border-style: solid;
+    border-color: var(--_ui-description-border-color, var(--ui-border-default));
+    border-radius: var(--ui-radius-md);
+    font-size: var(--ui-font-size-sm);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-description-item"][hidden] {
-  display: none;
+  dt {
+    color: var(--ui-text-muted);
+  }
+
+  dd {
+    margin: 0;
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-medium);
+    font-size: var(--_ui-description-value-size, inherit);
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiDescriptionList.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 })
@@ -79,56 +80,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 !== ('dl'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-description-list> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-description-list> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('dl', 'ui-description-list')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -147,7 +101,7 @@ const hostState = computed(() =>
 
 <template>
   <dl
-    data-component="ui-description-list"
+    class="ui-description-list"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
@@ -162,70 +116,73 @@ const hostState = computed(() =>
 <style scoped>
 /* Named values: a term and what it is, for each item (ui-description-item). */
 /* Rows line every term up in one column and every value in the next, through subgrid. */
-[data-component~="ui-description-list"] {
-  --_gap: var(--ui-space-2);
-  --_gap-compact: var(--ui-space-1);
-  --_column-gap: var(--ui-space-6);
-  --_min: 10rem;
-  --_track: var(--_min);
-  --_tile-padding: var(--ui-space-3);
-  display: grid;
-  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-  gap: var(--_gap) var(--_column-gap);
-  min-inline-size: 0;
-  margin: 0;
-}
 
 /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
    private properties, which cross into each item. */
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=stacked"],
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
-  --_ui-description-display: flex;
-  --_ui-description-column: auto;
-  --_ui-description-align: stretch;
-  --_gap: var(--ui-space-4);
-  --_gap-compact: var(--ui-space-2);
-  grid-template-columns: minmax(0, 1fr);
-}
 
 /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
    than that many fit. */
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
-  inline-size: 100%;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
-}
-
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
-  --_ui-description-align: flex-start;
-  --_ui-description-value-size: var(--ui-font-size-lg);
-  --_ui-description-padding: var(--_tile-padding);
-  --_ui-description-border-width: var(--ui-border-width);
-  --_ui-description-border-color: var(--ui-border-strong);
-  --_gap: var(--ui-space-3);
-  --_gap-compact: var(--ui-space-2);
-  --_column-gap: var(--_gap);
-}
-
-[data-component~="ui-description-list"][data-ui-description-list-state~="columns=2"] {
-  --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
-}
-[data-component~="ui-description-list"][data-ui-description-list-state~="columns=3"] {
-  --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
-}
-[data-component~="ui-description-list"][data-ui-description-list-state~="columns=4"] {
-  --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
-}
 
 /* Compact takes each layout's closer spacing. */
-[data-component~="ui-description-list"][data-ui-description-list-state~="density=compact"] {
-  --_gap: var(--_gap-compact);
-  --_tile-padding: var(--ui-space-2);
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-description-list"][hidden] {
-  display: none;
+
+@scope (.ui-description-list) {
+  :scope:where(:scope) {
+    --_gap: var(--ui-space-2);
+    --_gap-compact: var(--ui-space-1);
+    --_column-gap: var(--ui-space-6);
+    --_min: 10rem;
+    --_track: var(--_min);
+    --_tile-padding: var(--ui-space-3);
+    display: grid;
+    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+    gap: var(--_gap) var(--_column-gap);
+    min-inline-size: 0;
+    margin: 0;
+  }
+  :scope:where(:scope):is([data-ui-description-list-state~="layout=stacked"]),
+  :scope:where(:scope):is([data-ui-description-list-state~="layout=grid"]),
+  :scope:where(:scope):is([data-ui-description-list-state~="layout=tiles"]) {
+    --_ui-description-display: flex;
+    --_ui-description-column: auto;
+    --_ui-description-align: stretch;
+    --_gap: var(--ui-space-4);
+    --_gap-compact: var(--ui-space-2);
+    grid-template-columns: minmax(0, 1fr);
+  }
+  :scope:where(:scope):is([data-ui-description-list-state~="layout=grid"]),
+  :scope:where(:scope):is([data-ui-description-list-state~="layout=tiles"]) {
+    inline-size: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+  }
+
+  :scope:where(:scope):is([data-ui-description-list-state~="layout=tiles"]) {
+    --_ui-description-align: flex-start;
+    --_ui-description-value-size: var(--ui-font-size-lg);
+    --_ui-description-padding: var(--_tile-padding);
+    --_ui-description-border-width: var(--ui-border-width);
+    --_ui-description-border-color: var(--ui-border-strong);
+    --_gap: var(--ui-space-3);
+    --_gap-compact: var(--ui-space-2);
+    --_column-gap: var(--_gap);
+  }
+
+  :scope:where(:scope):is([data-ui-description-list-state~="columns=2"]) {
+    --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+  }
+  :scope:where(:scope):is([data-ui-description-list-state~="columns=3"]) {
+    --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+  }
+  :scope:where(:scope):is([data-ui-description-list-state~="columns=4"]) {
+    --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+  }
+  :scope:where(:scope):is([data-ui-description-list-state~="density=compact"]) {
+    --_gap: var(--_gap-compact);
+    --_tile-padding: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiDialog.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_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     alert: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -35,17 +39,17 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (event: CustomEvent<{
+    close: (event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic";
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
-    "update:open": (value: boolean) => any;
-    close: (event: CustomEvent<{
+    open: (event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly reason: "action" | "programmatic";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     alert: {
         type: PropType<boolean | null>;
@@ -80,31 +84,30 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         default: string;
     };
 }>> & Readonly<{
-    onOpen?: ((event: CustomEvent<{
+    onClose?: ((event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic";
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    onClose?: ((event: CustomEvent<{
+    onOpen?: ((event: CustomEvent<{
         readonly open: boolean;
-        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly reason: "action" | "programmatic";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string | null;
-    open: boolean | null;
     size: "sm" | "md" | "lg" | "fullscreen" | null;
+    open: boolean | null;
     for: string | null;
     alert: boolean | null;
     closedby: "none" | "any" | "closerequest" | null;
     modal: boolean | null;
     modeless: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    actions?: (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;