@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiSidebar.vue

@@ -1,19 +1,14 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -181,38 +176,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:width': [value: number]
@@ -237,41 +201,10 @@ const resizerElement = useTemplateRef<HTMLElement>('resizerElement')
 const internalCollapsed = ref(false)
 const drawer = ref(false)
 const resizing = ref(false)
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      drawer.value == null || typeof drawer.value === 'boolean',
-      'not $resizable or $drawer or $internalCollapsed:drawer',
-      './components/ui-sidebar/ui-sidebar.html: HR007: Reference drawer does not satisfy its declared type.',
-    )
-      && htmlNextAuthoredCheck2(
-        internalCollapsed.value == null || typeof internalCollapsed.value === 'boolean',
-        'not $resizable or $drawer or $internalCollapsed:internalCollapsed',
-        './components/ui-sidebar/ui-sidebar.html: HR007: Reference internalCollapsed does not satisfy its declared type.',
-      ))
-  ) return guardedPrevious
-  return guardedPrevious = !checkedProps.value.resizable || drawer.value || internalCollapsed.value
-})
 provide('html-next:ui-sidebar:internalCollapsed', internalCollapsed)
 provide('html-next:ui-sidebar:drawer', drawer)
 provide('html-next:ui-sidebar:resizing', resizing)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('aside'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-sidebar> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-sidebar> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('aside', 'ui-sidebar')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -355,7 +288,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 
 <template>
   <aside
-    data-component="ui-sidebar"
+    class="ui-sidebar"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
@@ -378,7 +311,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       tabindex="0"
       data-ui-affordance="resize"
       :aria-label="checkedProps.resizeLabel ?? undefined"
-      :hidden="guarded"
+      :hidden="!checkedProps.resizable || drawer || internalCollapsed"
       ref="resizerElement"
     >
       <span class="guide" aria-hidden="true"></span>
@@ -409,210 +342,210 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   inherits: false;
 }
 
-[data-component~="ui-sidebar"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
-  --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
-
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex: none;
-  inline-size: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
-  max-inline-size: 100%;
-  min-block-size: 0;
-  background: var(--ui-sidebar-surface, var(--ui-surface-default));
-  border-inline-end: var(--ui-border-width) solid
-    var(--ui-sidebar-border, var(--ui-border-divider));
-  transition:
-    inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease),
-    visibility var(--ui-motion-layout);
-}
-
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] {
-  border-inline-end: 0;
-  border-inline-start: var(--ui-border-width) solid
-    var(--ui-sidebar-border, var(--ui-border-divider));
-}
-
 /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
    Looma scroller uses (see ui-scroll-area). */
-.viewport {
-  flex: 1;
-  min-block-size: 0;
-  overflow: clip;
-}
-.content {
-  block-size: 100%;
-  inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
-  min-block-size: 0;
-  overflow: auto;
-  transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-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 block);
-  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%;
-}
 
 /* Collapsed while docked. */
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
-  inline-size: var(--ui-sidebar-collapsed-width, 0px);
-  visibility: hidden;
-}
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="resizing"] {
-  transition: none;
-}
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
-  transform: translateX(-100%);
-}
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
-  .content {
-  transform: translateX(100%);
-}
 
-.resizer {
-  position: absolute;
-  z-index: 1;
-  inset-block: 0;
-  /* On the panel's inner edge: the end edge of a start sidebar. */
-  inset-inline-end: 0;
-  inline-size: 8px;
-  min-inline-size: 8px;
-  transform: translateX(50%);
-  cursor: col-resize;
-  touch-action: none;
-  outline: none;
-}
+/* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
 
-.resizer[hidden] {
-  display: none;
-}
+/* The author display above would otherwise override the UA rule that hides a closed popover. */
 
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer {
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-  transform: translateX(-50%);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.resizer::after {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 3px;
-  inline-size: 2px;
-  background: color-mix(
-    in srgb,
-    var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%,
-    transparent
-  );
-  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-  transition:
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-}
+@scope (.ui-sidebar) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+    --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
-.guide {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  inline-size: 6px;
-  block-size: 22px;
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-surface-elevated);
-  opacity: 0;
-  transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-  pointer-events: none;
-}
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    inline-size: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
+    max-inline-size: 100%;
+    min-block-size: 0;
+    background: var(--ui-sidebar-surface, var(--ui-surface-default));
+    border-inline-end: var(--ui-border-width) solid
+      var(--ui-sidebar-border, var(--ui-border-divider));
+    transition:
+      inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease),
+      visibility var(--ui-motion-layout);
+  }
 
-.resizer:is(:hover, :focus-visible)::after {
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
-  opacity: 1;
-}
+  :scope:where(:scope):is([data-ui-sidebar-state~="side=end"]) {
+    border-inline-end: 0;
+    border-inline-start: var(--ui-border-width) solid
+      var(--ui-sidebar-border, var(--ui-border-divider));
+  }
+  .viewport {
+    flex: 1;
+    min-block-size: 0;
+    overflow: clip;
+  }
+  .content {
+    block-size: 100%;
+    inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
+    min-block-size: 0;
+    overflow: auto;
+    transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
+    --_ui-scroll-fade-direction: to bottom;
+    --_ui-scroll-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 block);
+    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:where(:scope):is([data-ui-sidebar-state~="internalCollapsed"]:not([popover])) {
+    inline-size: var(--ui-sidebar-collapsed-width, 0px);
+    visibility: hidden;
+  }
+  :scope:where(:scope):is([data-ui-sidebar-state~="resizing"]) {
+    transition: none;
+  }
+  :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+    transform: translateX(-100%);
+  }
+  :scope[data-ui-sidebar-state~="side=end"]:scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+    .content {
+    transform: translateX(100%);
+  }
 
-.resizer:is(:hover, :focus-visible) > .guide {
-  opacity: 1;
-}
+  .resizer {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    /* On the panel's inner edge: the end edge of a start sidebar. */
+    inset-inline-end: 0;
+    inline-size: 8px;
+    min-inline-size: 8px;
+    transform: translateX(50%);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
 
-/* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
-[data-component~="ui-sidebar"][popover] {
-  position: fixed;
-  inset-block: 0;
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  margin: 0;
-  padding: 0;
-  inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, 280px)), 85vw);
-  max-block-size: none;
-  block-size: 100dvh;
-  border-block: 0;
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-  transform: translateX(0);
-  transition:
-    transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
-    display var(--ui-motion-reveal) allow-discrete,
-    overlay var(--ui-motion-reveal) allow-discrete;
-}
+  .resizer[hidden] {
+    display: none;
+  }
 
-/* The author display above would otherwise override the UA rule that hides a closed popover. */
-[data-component~="ui-sidebar"][popover]:not(:popover-open) {
-  display: none;
-  transform: translateX(-100%);
-}
+  :scope[data-ui-sidebar-state~="side=end"] .resizer {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    transform: translateX(-50%);
+  }
 
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover] {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}
+  .resizer::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 3px;
+    inline-size: 2px;
+    background: color-mix(
+      in srgb,
+      var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%,
+      transparent
+    );
+    opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+    transition:
+      background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+      opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  }
 
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover]:not(:popover-open) {
-  transform: translateX(100%);
-}
+  .guide {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 6px;
+    block-size: 22px;
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-round);
+    background: var(--ui-surface-elevated);
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+    pointer-events: none;
+  }
 
-@starting-style {
-  [data-component~="ui-sidebar"][popover]:popover-open {
+  .resizer:is(:hover, :focus-visible)::after {
+    background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
+    opacity: 1;
+  }
+
+  .resizer:is(:hover, :focus-visible) > .guide {
+    opacity: 1;
+  }
+  :scope:where(:scope):is([popover]) {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    margin: 0;
+    padding: 0;
+    inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, 280px)), 85vw);
+    max-block-size: none;
+    block-size: 100dvh;
+    border-block: 0;
+    box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+    transform: translateX(0);
+    transition:
+      transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+      display var(--ui-motion-reveal) allow-discrete,
+      overlay var(--ui-motion-reveal) allow-discrete;
+  }
+  :scope:where(:scope):is([popover]:not(:popover-open)) {
+    display: none;
     transform: translateX(-100%);
   }
-  [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover]:popover-open {
+
+  :scope:where(:scope):is([data-ui-sidebar-state~="side=end"][popover]) {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  :scope:where(:scope):is([data-ui-sidebar-state~="side=end"][popover]:not(:popover-open)) {
     transform: translateX(100%);
   }
-}
 
-[data-component~="ui-sidebar"][popover]::backdrop {
-  background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
-}
-[data-component~="ui-sidebar"][popover] .content {
-  inline-size: 100%;
-}
+  @starting-style {
+    :scope:where(:scope):is([popover]:popover-open) {
+      transform: translateX(-100%);
+    }
+    :scope:where(:scope):is([data-ui-sidebar-state~="side=end"][popover]:popover-open) {
+      transform: translateX(100%);
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-sidebar"],
-  [data-component~="ui-sidebar"][popover],
-  .content {
-    transition: none;
+  :scope:where(:scope):is([popover])::backdrop {
+    background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+  }
+  :scope[popover] .content {
+    inline-size: 100%;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-sidebar"][hidden] {
-  display: none;
+  @media (prefers-reduced-motion: reduce) {
+    :scope:where(:scope), :scope:where(:scope):is([popover]), .content {
+      transition: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>