@threadlabs/looma 0.5.1 → 0.5.2

package/vue/UiSidebar.vue

@@ -1,288 +1,376 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import * as controllerModule from "../components/ui-sidebar/ui-sidebar.js";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watchEffect,
+} from 'vue'
+import * as controllerModule from '../components/ui-sidebar/ui-sidebar.js'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-};
-
-const props = withDefaults(defineProps<{
-  breakpoint?: "sm" | "md" | "lg" | null;
-  collapsed?: boolean | null;
-  maxWidth?: number | null;
-  minWidth?: number | null;
-  resizable?: boolean | null;
-  resizeLabel?: string | null;
-  resizeStep?: number | null;
-  side?: "start" | "end" | null;
-  width?: number | null;
-}>(), {
-  breakpoint: "md",
-  collapsed: false,
-  maxWidth: 480,
-  minWidth: 200,
-  resizable: false,
-  resizeLabel: "Resize sidebar",
-  resizeStep: 16,
-  side: "start",
-  width: 0,
-});
+const props = withDefaults(
+  defineProps<{
+    breakpoint?: 'sm' | 'md' | 'lg'
+    collapsed?: boolean
+    maxWidth?: number
+    minWidth?: number
+    resizable?: boolean
+    resizeLabel?: string
+    resizeStep?: number
+    side?: 'start' | 'end'
+    width?: number
+  }>(),
+  {
+    breakpoint: 'md',
+    collapsed: false,
+    maxWidth: 480,
+    minWidth: 200,
+    resizable: false,
+    resizeLabel: 'Resize sidebar',
+    resizeStep: 16,
+    side: 'start',
+    width: 0,
+  },
+)
 const emit = defineEmits<{
-  "resize": [detail: { readonly width: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "toggle": [detail: { readonly open: boolean; readonly mode: "docked" | "drawer"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_internalCollapsed = ref<any>(false);
-const state_drawer = ref<any>(false);
+  'update:width': [value: number]
+  resize: [
+    detail: { readonly width: number; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+  ]
+  toggle: [
+    detail: {
+      readonly open: boolean
+      readonly mode: 'docked' | 'drawer'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const resizerElement = useTemplateRef<HTMLElement>('resizer')
+const internalCollapsed = ref(false)
+const drawer = ref(false)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.side && `side side=${props.side}`,
+    internalCollapsed.value && 'internalCollapsed',
+  ].filter(Boolean).join(' ')
+)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"resize":{"bubbles":true,"composed":true,"cancelable":false},"toggle":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    resize: { bubbles: true, composed: true, cancelable: false },
+    toggle: { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "resize": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof (detail as Record<string, unknown>)["width"] === "number" && Number.isFinite((detail as Record<string, unknown>)["width"])) && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["width","trigger"].includes(key))),
-    "toggle": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["mode"] === "docked" || (detail as Record<string, unknown>)["mode"] === "drawer") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["open","mode","trigger"].includes(key))),
-  };
+    resize: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && (typeof (detail as Record<string, unknown>)['width'] === 'number'
+        && Number.isFinite((detail as Record<string, unknown>)['width']))
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['width', 'trigger'].includes(key)),
+    toggle: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
+      && ((detail as Record<string, unknown>)['mode'] === 'docked'
+        || (detail as Record<string, unknown>)['mode'] === 'drawer')
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['open', 'mode', 'trigger'].includes(key)),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["side","internalCollapsed"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  if (detail !== null && typeof detail === 'object' && 'width' in detail) {
+    emitEvent('update:width', (detail as Record<string, unknown>)['width'])
+  }
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "internalCollapsed") return state_internalCollapsed.value;
-  if (name === "drawer") return state_drawer.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'internalCollapsed') return internalCollapsed.value
+  if (name === 'drawer') return drawer.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "internalCollapsed") { state_internalCollapsed.value = value; return true; }
-  if (name === "drawer") { state_drawer.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'internalCollapsed') {
+    internalCollapsed.value = value as never
+    return true
+  }
+  if (name === 'drawer') {
+    drawer.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {
+    get resizer(): Element {
+      return resizerElement.value as Element
+    },
+  } as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <aside data-component="ui-sidebar" v-bind="$attrs" :data-ui-sidebar-state="hostState || undefined" ref="root"><div class="content"><slot></slot></div><div class="resizer" role="separator" aria-orientation="vertical" tabindex="0" data-ui-affordance="resize" :aria-label="hn.enumerated(props.resizeLabel)" :hidden="hn.attr((hn.t((hn.t(!hn.t(props.resizable)) || hn.t(state_drawer))) || hn.t(state_internalCollapsed)))" :ref="(element) => { refs['resizer'] = element as Element }"><span class="guide" aria-hidden="true"></span></div></aside>
+  <aside
+    data-component="ui-sidebar"
+    v-bind="$attrs"
+    :data-ui-sidebar-state="hostState || undefined"
+    ref="root"
+  >
+    <div class="content"><slot /></div>
+    <div
+      class="resizer"
+      role="separator"
+      aria-orientation="vertical"
+      tabindex="0"
+      data-ui-affordance="resize"
+      :aria-label="resizeLabel"
+      :hidden="!resizable || drawer || internalCollapsed"
+      ref="resizer"
+    >
+      <span class="guide" aria-hidden="true"></span>
+    </div>
+  </aside>
 </template>
 
 <style scoped>
 [data-component~="ui-sidebar"] {
-      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: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
-    }
+  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: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+}
 
-    [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] {
-      border-inline-end: 0;
-      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
-    }
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] {
+  border-inline-end: 0;
+  border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+}
 
-    .content {
-      flex: 1;
-      min-block-size: 0;
-      overflow: auto;
-    }
+.content {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+}
 
-    /* Collapsed while docked. */
-    [data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
-      display: none;
-    }
+/* Collapsed while docked. */
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
+  display: none;
+}
 
-    .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;
-    }
+.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;
+}
 
-    .resizer[hidden] {
-      display: none;
-    }
+.resizer[hidden] {
+  display: none;
+}
 
-    [data-component~="ui-sidebar"][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"] .resizer {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+  transform: translateX(-50%);
+}
 
-    .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: var(--ui-affordance-guide-opacity, 0.42);
-      transition:
-        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    }
+.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: var(--ui-affordance-guide-opacity, 0.42);
+  transition:
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
+    var(--ui-motion-ease, ease),
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+}
 
-    .guide {
-      position: absolute;
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
-      inline-size: 6px;
-      block-size: 22px;
-      border: 1px solid var(--ui-border-strong, #c8c8c4);
-      border-radius: var(--ui-radius-round, 999px);
-      background: var(--ui-surface-elevated, #fff);
-      opacity: 0;
-      transform: translate(-50%, -50%);
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-      pointer-events: none;
-    }
+.guide {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 6px;
+  block-size: 22px;
+  border: 1px solid var(--ui-border-strong, #c8c8c4);
+  border-radius: var(--ui-radius-round, 999px);
+  background: var(--ui-surface-elevated, #fff);
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
+    var(--ui-motion-ease, ease);
+  pointer-events: none;
+}
 
-    .resizer:is(:hover, :focus-visible)::after {
-      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
-      opacity: 1;
-    }
+.resizer:is(:hover, :focus-visible)::after {
+  background: var(
+    --ui-affordance-direct-color,
+    var(--ui-accent-solid, var(--ui-color-focus, Highlight))
+  );
+  opacity: 1;
+}
 
-    .resizer:is(:hover, :focus-visible) > .guide {
-      opacity: 1;
-    }
+.resizer:is(:hover, :focus-visible) > .guide {
+  opacity: 1;
+}
 
-    /* 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-base, 0.2s) var(--ui-motion-ease-out, ease-out),
-        display var(--ui-motion-base, 0.2s) allow-discrete,
-        overlay var(--ui-motion-base, 0.2s) allow-discrete;
-    }
+/* 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-base, 0.2s) var(--ui-motion-ease-out, ease-out),
+    display var(--ui-motion-base, 0.2s) allow-discrete,
+    overlay var(--ui-motion-base, 0.2s) allow-discrete;
+}
 
-    /* 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%);
-    }
+/* 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%);
+}
 
-    [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover] {
-      inset-inline-start: auto;
-      inset-inline-end: 0;
-    }
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover] {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
 
-    [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover]:not(:popover-open) {
-      transform: translateX(100%);
-    }
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover]:not(:popover-open) {
+  transform: translateX(100%);
+}
 
-    @starting-style {
-      [data-component~="ui-sidebar"][popover]:popover-open {
-        transform: translateX(-100%);
-      }
-      [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover]:popover-open {
-        transform: translateX(100%);
-      }
-    }
+@starting-style {
+  [data-component~="ui-sidebar"][popover]:popover-open {
+    transform: translateX(-100%);
+  }
+  [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover]: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]::backdrop {
+  background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+}
 
-    @media (prefers-reduced-motion: reduce) {
-      [data-component~="ui-sidebar"][popover] {
-        transition: none;
-      }
-    }
+@media (prefers-reduced-motion: reduce) {
+  [data-component~="ui-sidebar"][popover] {
+    transition: none;
+  }
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-sidebar"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-sidebar"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiStack.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
-    align?: "start" | "center" | "end" | "stretch" | null;
-    gap?: "xs" | "s" | "m" | "l" | "xl" | null;
-    justify?: "start" | "center" | "end" | "between" | null;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    justify?: 'start' | 'center' | 'end' | 'between';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {