@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiEditorSlashMenuItem.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'
 import UiIcon from './UiIcon.vue'
 
@@ -102,61 +103,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 !== ('li'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-editor-slash-menu-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-slash-menu-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('li', 'ui-editor-slash-menu-item')
 </script>
 
 <template>
   <li
-    data-component="ui-editor-slash-menu-item"
+    class="ui-editor-slash-menu-item"
     role="option"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
@@ -169,6 +123,7 @@ if (
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
   >
     <span v-if="checkedProps.icon" class="icon" aria-hidden="true"><UiIcon
+        class="ui-icon"
         :name="checkedProps.icon"
       /></span>
     <span class="body"><span class="title"><slot /></span>
@@ -179,68 +134,65 @@ if (
 </template>
 
 <style scoped>
-[data-component~="ui-editor-slash-menu-item"] {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-  min-block-size: 44px;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  cursor: pointer;
-  list-style: none;
-}
-
-[data-component~="ui-editor-slash-menu-item"][aria-selected="true"] {
-  background: var(--ui-accent-subtle);
-}
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] {
-  background: var(--ui-disabled-surface);
-  cursor: not-allowed;
-}
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .title,
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .description,
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .icon {
-  color: var(--ui-disabled-text);
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 32px;
-  block-size: 32px;
-  flex: 0 0 auto;
-  color: var(--ui-text-secondary);
-  background: var(--ui-surface-hover);
-  border: var(--ui-border-width) solid var(--ui-border);
-  border-radius: var(--ui-radius-md);
-}
-
-.icon {
-  --_ui-default-icon-size: 1rem;
-}
-
-.body {
-  display: flex;
-  min-inline-size: 0;
-  flex-direction: column;
-  gap: 1px;
-}
-.title, .description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.title {
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
-}
-.description {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
-}
-
-[data-component~="ui-editor-slash-menu-item"][hidden] {
-  display: none;
+@scope (.ui-editor-slash-menu-item) to (.ui-icon) {
+  :scope:where(:scope) {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-3);
+    min-block-size: 44px;
+    padding: var(--ui-space-2) var(--ui-space-3);
+    cursor: pointer;
+    list-style: none;
+  }
+  :scope:where(:scope):is([aria-selected="true"]) {
+    background: var(--ui-accent-subtle);
+  }
+  :scope:where(:scope):is([aria-disabled="true"]) {
+    background: var(--ui-disabled-surface);
+    cursor: not-allowed;
+  }
+  :scope[aria-disabled="true"] .title,
+  :scope[aria-disabled="true"] .description,
+  :scope[aria-disabled="true"] .icon {
+    color: var(--ui-disabled-text);
+  }
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 32px;
+    block-size: 32px;
+    flex: 0 0 auto;
+    color: var(--ui-text-secondary);
+    background: var(--ui-surface-hover);
+    border: var(--ui-border-width) solid var(--ui-border);
+    border-radius: var(--ui-radius-md);
+  }
+  .icon {
+    --_ui-default-icon-size: 1rem;
+  }
+  .body {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: 1px;
+  }
+  .title, .description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .title {
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-medium);
+  }
+  .description {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiEditorSurface.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 })
@@ -39,56 +40,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-editor-surface> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-surface> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editor-surface')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -102,7 +56,7 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-editor-surface"
+    class="ui-editor-surface"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
@@ -113,17 +67,19 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
-[data-component~="ui-editor-surface"] {
-  display: flex;
-  flex-direction: column;
-  min-inline-size: 0;
-  max-inline-size: 100%;
-}
 /* The document renderer consumes these inherited surface settings. They do not style controls. */
-[data-component~="ui-editor-surface"][data-ui-editor-surface-state~="density=compact"] {
-  --_ui-editor-content-min-height: 0px;
-  --_ui-editor-content-padding-block: 0px;
-  --_ui-editor-content-padding-inline: 0px;
-  --_ui-editor-mobile-bottom-space: 0px;
+@scope (.ui-editor-surface) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  :scope:where(:scope):is([data-ui-editor-surface-state~="density=compact"]) {
+    --_ui-editor-content-min-height: 0px;
+    --_ui-editor-content-padding-block: 0px;
+    --_ui-editor-content-padding-inline: 0px;
+    --_ui-editor-mobile-bottom-space: 0px;
+  }
 }
 </style>