@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiSelect.vue

@@ -1,9 +1,15 @@
-<!-- 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 { readBoundControl, SelectedOptions, vBindControl } from './control'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -112,38 +118,7 @@ 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 emit = defineEmits<{
   'update:modelValue': [value: string]
@@ -154,19 +129,7 @@ const model = computed({
 })
 
 const root = ref<HTMLElement | null>(null)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('select'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-select> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-select> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('select', 'ui-select')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -201,7 +164,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 
 <template>
   <select
-    data-component="ui-select"
+    class="ui-select"
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
     :required="checkedProps.required ?? undefined"
@@ -271,117 +234,122 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   inherits: false;
 }
 
-[data-component~="ui-select"] {
-  box-sizing: border-box;
-  display: inline-block;
-  inline-size: var(--ui-select-inline-size, 100%);
-  min-inline-size: 0;
-  min-block-size: var(--ui-control-size-md);
-  margin: 0;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border: var(--ui-border-width) solid
-    var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
-  border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
-  color: var(--ui-text-primary);
-  color-scheme: light dark;
-  font: inherit;
-  line-height: var(--ui-line-height-tight);
-  box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
 /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
  * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-[data-component~="ui-select"] {
-  appearance: none;
-  padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
-  background-image: var(
-    --ui-select-chevron,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-  );
-  background-repeat: no-repeat;
-  background-position: right var(--ui-space-3) center;
-  background-size: 1.125rem 1.125rem;
-}
 
-[data-component~="ui-select"]:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-  border-color: var(
-    --ui-select-border-hover,
-    var(--ui-control-border-hover, var(--ui-text-secondary))
-  );
-}
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
-[data-component~="ui-select"]:focus-visible {
-  border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
-  outline: none;
-  box-shadow: var(
-    --ui-select-focus-shadow,
-    var(--ui-shadow-sm),
-    var(--ui-control-focus-halo-shadow)
-  );
-}
+/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+   body-size text: below 16px, iOS zooms the page into the focused field. */
 
-/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-select"][aria-invalid="true"],
-[data-component~="ui-select"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-select"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow: var(
-    --ui-select-invalid-focus-shadow,
-    var(--ui-shadow-sm),
-    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-      in srgb,
-      var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-      transparent
-    )
-  );
-}
+@scope (.ui-select) {
+  :scope:where(:scope) {
+    box-sizing: border-box;
+    display: inline-block;
+    inline-size: var(--ui-select-inline-size, 100%);
+    min-inline-size: 0;
+    min-block-size: var(--ui-control-size-md);
+    margin: 0;
+    padding: var(--ui-space-2) var(--ui-space-3);
+    border: var(--ui-border-width) solid
+      var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
+    border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background-color: var(
+      --ui-select-surface,
+      var(--ui-control-surface, var(--ui-surface-elevated))
+    );
+    color: var(--ui-text-primary);
+    color-scheme: light dark;
+    font: inherit;
+    line-height: var(--ui-line-height-tight);
+    box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  :scope:where(:scope) {
+    appearance: none;
+    padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
+    background-image: var(
+      --ui-select-chevron,
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+    );
+    background-repeat: no-repeat;
+    background-position: right var(--ui-space-3) center;
+    background-size: 1.125rem 1.125rem;
+  }
 
-[data-component~="ui-select"]:disabled {
-  background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-disabled-text);
-  box-shadow: none;
-  cursor: not-allowed;
-}
+  :scope:where(:scope):is(:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
+    border-color: var(
+      --ui-select-border-hover,
+      var(--ui-control-border-hover, var(--ui-text-secondary))
+    );
+  }
 
-[data-component~="ui-select"][data-ui-select-state~="size=sm"] {
-  min-block-size: var(--ui-control-size-sm);
-  padding: var(--ui-space-1) var(--ui-space-2);
-  padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
-  background-position: right var(--ui-space-2) center;
-  background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
-  font-size: var(--ui-font-size-sm);
-}
+  :scope:where(:scope):is(:focus-visible) {
+    border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
+    outline: none;
+    box-shadow: var(
+      --ui-select-focus-shadow,
+      var(--ui-shadow-sm),
+      var(--ui-control-focus-halo-shadow)
+    );
+  }
+  :scope:where(:scope):is([aria-invalid="true"]),
+  :scope:where(:scope):is(:is(:user-invalid, [data-user-invalid])) {
+    border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
+  }
 
-[data-component~="ui-select"][data-ui-select-state~="size=lg"] {
-  min-block-size: var(--ui-control-size-lg);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
-  background-position: right var(--ui-space-4) center;
-  font-size: var(--ui-font-size-md);
-}
+  :scope:where(:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+    box-shadow: var(
+      --ui-select-invalid-focus-shadow,
+      var(--ui-shadow-sm),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
+    );
+  }
 
-/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
-   body-size text: below 16px, iOS zooms the page into the focused field. */
-@media (pointer: coarse) {
-  [data-component~="ui-select"] {
-    min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+  :scope:where(:scope):is(:disabled) {
+    background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
   }
 
-  [data-component~="ui-select"][data-ui-select-state~="size=sm"] {
-    min-block-size: var(--ui-control-min-block-size);
-    font-size: inherit;
+  :scope:where(:scope):is([data-ui-select-state~="size=sm"]) {
+    min-block-size: var(--ui-control-size-sm);
+    padding: var(--ui-space-1) var(--ui-space-2);
+    padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
+    background-position: right var(--ui-space-2) center;
+    background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+    font-size: var(--ui-font-size-sm);
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-select"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-select-state~="size=lg"]) {
+    min-block-size: var(--ui-control-size-lg);
+    padding: var(--ui-space-3) var(--ui-space-4);
+    padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
+    background-position: right var(--ui-space-4) center;
+    font-size: var(--ui-font-size-md);
+  }
+  @media (pointer: coarse) {
+    :scope:where(:scope) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
+
+    :scope:where(:scope):is([data-ui-select-state~="size=sm"]) {
+      min-block-size: var(--ui-control-min-block-size);
+      font-size: inherit;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiSeparator.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 })
@@ -93,56 +94,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 !== ('hr'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-separator> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-separator> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('hr', 'ui-separator')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -158,7 +112,7 @@ const hostState = computed(() =>
 
 <template>
   <hr
-    data-component="ui-separator"
+    class="ui-separator"
     v-bind="nativeAttrs($attrs)"
     :aria-orientation="checkedProps.orientation ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -178,41 +132,44 @@ const hostState = computed(() =>
 }
 
 /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
-[data-component~="ui-separator"] {
-  box-sizing: border-box;
-  align-self: stretch;
-  margin: 0;
-  border: 0;
-  border-block-start: var(--ui-border-width) solid
-    var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
-}
 
-[data-component~="ui-separator"][data-ui-separator-state~="emphasis=strong"] {
-  --_separator-color: var(--ui-border-strong);
-}
+@scope (.ui-separator) {
+  :scope:where(:scope) {
+    box-sizing: border-box;
+    align-self: stretch;
+    margin: 0;
+    border: 0;
+    border-block-start: var(--ui-border-width) solid
+      var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+  }
 
-[data-component~="ui-separator"][aria-orientation="vertical"] {
-  block-size: auto;
-  border-block-start: 0;
-  border-inline-start: var(--ui-border-width) solid
-    var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
-}
+  :scope:where(:scope):is([data-ui-separator-state~="emphasis=strong"]) {
+    --_separator-color: var(--ui-border-strong);
+  }
 
-[data-component~="ui-separator"][data-ui-separator-state~="selectable"] {
-  min-block-size: var(--ui-control-size-sm);
-  border: 0;
-  background: linear-gradient(
-    var(--ui-separator-color, var(--ui-border-divider)),
-    var(--ui-separator-color, var(--ui-border-divider))
-  ) center / 100% var(--ui-border-width) no-repeat;
-  cursor: pointer;
-}
-[data-component~="ui-separator"][data-ui-separator-state~="selectable"]:hover {
-  background-color: var(--ui-surface-hover);
-}
-[data-component~="ui-separator"][data-ui-separator-state~="selected"] {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-  border-radius: var(--ui-radius-sm);
+  :scope:where(:scope):is([aria-orientation="vertical"]) {
+    block-size: auto;
+    border-block-start: 0;
+    border-inline-start: var(--ui-border-width) solid
+      var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+  }
+
+  :scope:where(:scope):is([data-ui-separator-state~="selectable"]) {
+    min-block-size: var(--ui-control-size-sm);
+    border: 0;
+    background: linear-gradient(
+      var(--ui-separator-color, var(--ui-border-divider)),
+      var(--ui-separator-color, var(--ui-border-divider))
+    ) center / 100% var(--ui-border-width) no-repeat;
+    cursor: pointer;
+  }
+  :scope:where(:scope):is([data-ui-separator-state~="selectable"]:hover) {
+    background-color: var(--ui-surface-hover);
+  }
+  :scope:where(:scope):is([data-ui-separator-state~="selected"]) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+    border-radius: var(--ui-radius-sm);
+  }
 }
 </style>

package/vue/UiSidebar.d.ts

@@ -1,7 +1,9 @@
 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: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     breakpoint: {
         type: PropType<"sm" | "md" | "lg" | null>;
         default: string;
@@ -102,14 +104,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     resizable: boolean | null;
     breakpoint: "sm" | "md" | "lg" | null;
     collapsed: boolean | null;
+    side: "start" | "end" | null;
     maxWidth: number | null;
     minWidth: number | null;
     resizeLabel: string | null;
     resizeStep: number | null;
-    side: "start" | "end" | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (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;