@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiEditorToolbar.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, useTemplateRef, 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 })
@@ -36,58 +42,12 @@ 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 stripElement = useTemplateRef<HTMLElement>('stripElement')
-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-editor-toolbar> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-toolbar> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editor-toolbar')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -122,7 +82,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
 
 <template>
   <div
-    data-component="ui-editor-toolbar"
+    class="ui-editor-toolbar"
     role="toolbar"
     aria-label="Editor toolbar"
     v-bind="nativeAttrs($attrs)"
@@ -136,159 +96,159 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
 </template>
 
 <style scoped>
-[data-component~="ui-editor-toolbar"] {
-  position: sticky;
-  top: 0;
-  z-index: var(--ui-editor-toolbar-z-index, 10);
-  display: flex;
-  align-items: center;
-  padding: var(--ui-editor-toolbar-padding-block, 6px)
-    var(--ui-editor-toolbar-padding-inline, 12px);
-  min-height: var(--ui-editor-toolbar-min-height, 48px);
-  background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-  border-bottom: var(--ui-border-width) solid
-    var(--ui-editor-toolbar-border, var(--ui-border-divider));
-}
-
 /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
-   wrapping into several lines, and a fade at each edge that has more to show says so. */
-.strip {
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--ui-editor-toolbar-gap, 2px);
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: none;
-}
-
-.strip::-webkit-scrollbar {
-  display: none;
-}
-
-.strip > :slotted(*) {
-  flex: 0 0 auto;
-}
+       wrapping into several lines, and a fade at each edge that has more to show says so. */
 
 /* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
    strip, so a floating toolbar's border and shadow stay whole. */
-.strip {
-  --_ui-scroll-fade-direction: to right;
-  --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self inline);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
-}
 
-[data-component~="ui-editor-toolbar"]:dir(rtl) .strip {
-  --_ui-scroll-fade-direction: to left;
-}
+/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
 
-:slotted(.divider) {
-  width: 1px;
-  height: 20px;
-  background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
-  flex-shrink: 0;
-  margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
-}
+/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
 
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-  position: relative;
-  top: auto;
-  width: max-content;
-  max-width: min(calc(100vw - 24px), 100%);
-  min-height: auto;
-  padding: var(--ui-editor-toolbar-floating-padding, 4px);
-  background: color-mix(
-    in srgb,
-    var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
-    transparent
-  );
-  border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
-  box-shadow: var(
-    --ui-editor-toolbar-floating-shadow,
-    var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
-  );
-  backdrop-filter: blur(10px);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-@media (max-width: 767px) {
-  [data-component~="ui-editor-toolbar"] {
-    position: fixed;
-    top: auto;
-    bottom: env(safe-area-inset-bottom);
-    left: 0;
-    right: 0;
-    min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-    border-top: var(--ui-border-width) solid
+@scope (.ui-editor-toolbar) {
+  :scope:where(:scope) {
+    position: sticky;
+    top: 0;
+    z-index: var(--ui-editor-toolbar-z-index, 10);
+    display: flex;
+    align-items: center;
+    padding: var(--ui-editor-toolbar-padding-block, 6px)
+      var(--ui-editor-toolbar-padding-inline, 12px);
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+    border-bottom: var(--ui-border-width) solid
       var(--ui-editor-toolbar-border, var(--ui-border-divider));
-    border-bottom: none;
-    box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+  }
+  .strip {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--ui-editor-toolbar-gap, 2px);
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+  }
+
+  .strip::-webkit-scrollbar {
+    display: none;
+  }
+
+  .strip > :slotted(*) {
+    flex: 0 0 auto;
+  }
+  .strip {
+    --_ui-scroll-fade-direction: to right;
+    --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self inline);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
+  }
+
+  :scope:dir(rtl) .strip {
+    --_ui-scroll-fade-direction: to left;
+  }
+
+  :slotted(.divider) {
+    width: 1px;
+    height: 20px;
+    background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
+    flex-shrink: 0;
+    margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
   }
 
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+  :scope:where(:scope):is([data-ui-editor-toolbar-state~="floating"]) {
     position: relative;
-    inset: auto;
+    top: auto;
+    width: max-content;
+    max-width: min(calc(100vw - 24px), 100%);
     min-height: auto;
+    padding: var(--ui-editor-toolbar-floating-padding, 4px);
+    background: color-mix(
+      in srgb,
+      var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
+      transparent
+    );
     border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
     border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
     box-shadow: var(
       --ui-editor-toolbar-floating-shadow,
       var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
     );
+    backdrop-filter: blur(10px);
   }
-}
-
-/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"] {
-  position: relative;
-  min-height: var(--ui-editor-toolbar-min-height, 48px);
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-}
 
-/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-.looma-editor__mobile-toolbar-shell
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-  width: 100%;
-  max-width: none;
-  min-height: 100%;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
-}
-
-.looma-editor__mobile-toolbar-shell
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"]
-  .strip {
-  scroll-snap-type: x mandatory;
-}
+  @media (max-width: 767px) {
+    :scope:where(:scope) {
+      position: fixed;
+      top: auto;
+      bottom: env(safe-area-inset-bottom);
+      left: 0;
+      right: 0;
+      min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+      border-top: var(--ui-border-width) solid
+        var(--ui-editor-toolbar-border, var(--ui-border-divider));
+      border-bottom: none;
+      box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+    }
+
+    :scope:where(:scope):is([data-ui-editor-toolbar-state~="floating"]) {
+      position: relative;
+      inset: auto;
+      min-height: auto;
+      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+      box-shadow: var(
+        --ui-editor-toolbar-floating-shadow,
+        var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+      );
+    }
+  }
+  :scope:where(:scope):is(.looma-editor__sticky-toolbar-shell *) {
+    position: relative;
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+  }
+  :scope:where(:scope):is(.looma-editor__mobile-toolbar-shell
+    [data-ui-editor-toolbar-state~="floating"]) {
+    width: 100%;
+    max-width: none;
+    min-height: 100%;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editor-toolbar"][hidden] {
-  display: none;
+  .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip {
+    scroll-snap-type: x mandatory;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiFloatingActionButton.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 })
@@ -67,56 +68,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 !== ('button'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-floating-action-button> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-floating-action-button> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('button', 'ui-floating-action-button')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -128,7 +82,7 @@ const hostState = computed(() =>
 
 <template>
   <button
-    data-component="ui-floating-action-button"
+    class="ui-floating-action-button"
     type="button"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
@@ -158,76 +112,78 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-floating-action-button"] {
-  position: fixed;
-  inset-block-end: calc(
-    var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
-      env(safe-area-inset-bottom)
-  );
-  inset-inline-end: max(
-    var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
-    env(safe-area-inset-right)
-  );
-  inline-size: var(--ui-control-min-block-size);
-  block-size: var(--ui-control-min-block-size);
-  display: inline-flex;
-  z-index: var(--ui-floating-action-button-z-index, 100);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-floating-action-button"] {
-  appearance: none;
-  border: none;
-  border-radius: var(--ui-radius-round);
-  margin: 0;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ui-accent);
-  color: var(--ui-on-accent);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
+@scope (.ui-floating-action-button) {
+  :scope:where(:scope) {
+    position: fixed;
+    inset-block-end: calc(
+      var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
+        env(safe-area-inset-bottom)
+    );
+    inset-inline-end: max(
+      var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
+      env(safe-area-inset-right)
+    );
+    inline-size: var(--ui-control-min-block-size);
+    block-size: var(--ui-control-min-block-size);
+    display: inline-flex;
+    z-index: var(--ui-floating-action-button-z-index, 100);
+  }
 
-[data-component~="ui-floating-action-button"]:hover:enabled {
-  background: var(--ui-accent-hover);
-  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
-}
+  :scope:where(:scope) {
+    appearance: none;
+    border: none;
+    border-radius: var(--ui-radius-round);
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ui-accent);
+    color: var(--ui-on-accent);
+    box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      transform var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-[data-component~="ui-floating-action-button"]:active:enabled {
-  transform: scale(0.94);
-}
+  :scope:where(:scope):is(:hover:enabled) {
+    background: var(--ui-accent-hover);
+    box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
+  }
 
-[data-component~="ui-floating-action-button"]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-}
+  :scope:where(:scope):is(:active:enabled) {
+    transform: scale(0.94);
+  }
 
-[data-component~="ui-floating-action-button"]:disabled {
-  background: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  box-shadow: none;
-  cursor: not-allowed;
-}
+  :scope:where(:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+  }
 
-:slotted(svg) {
-  inline-size: var(--ui-icon-size-lg);
-  block-size: var(--ui-icon-size-lg);
-  flex-shrink: 0;
-}
+  :scope:where(:scope):is(:disabled) {
+    background: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 
-@media (min-width: 768px) {
-  [data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"] {
-    display: none;
+  :slotted(svg) {
+    inline-size: var(--ui-icon-size-lg);
+    block-size: var(--ui-icon-size-lg);
+    flex-shrink: 0;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-floating-action-button"][hidden] {
-  display: none;
+  @media (min-width: 768px) {
+    :scope:where(:scope):is([data-ui-floating-action-button-state~="mobileOnly"]) {
+      display: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiFormField.d.ts

@@ -38,9 +38,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    required: boolean | null;
     invalid: boolean | null;
     disabled: boolean | null;
-    required: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;