@threadlabs/looma 0.3.1 → 0.5.0

package/vue/UiSelect.vue

@@ -0,0 +1,183 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 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-select/ui-select.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  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<{
+  disabled?: boolean | null;
+  invalid?: boolean | null;
+  multiple?: boolean | null;
+  required?: boolean | null;
+  value?: string | null;
+  modelValue?: string | null;
+}>(), {
+  disabled: false,
+  invalid: false,
+  multiple: false,
+  required: false,
+});
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+const updateModel = (event: Event): void => emit("update:modelValue", (event.target as HTMLInputElement).value);
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  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),
+  }),
+  refs: refs 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;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    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; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    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;
+  },
+  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;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  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();
+});
+</script>
+
+<template>
+  <select data-component="ui-select" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :required="hn.attr(props.required)" :multiple="hn.attr(props.multiple)" :aria-invalid="hn.enumerated(props.invalid)" @change="updateModel" ref="root"><slot></slot></select>
+</template>
+
+<style scoped>
+[data-component~="ui-select"] {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md, 2.5rem);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-select-radius, var(--ui-radius-2));
+      background-color: 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-md);
+      box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+      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);
+    }
+
+    /* Single selects draw their 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"]:not([multiple]) {
+      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) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    [data-component~="ui-select"]:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* 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-danger-solid);
+    }
+
+    [data-component~="ui-select"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    [data-component~="ui-select"]:disabled {
+      background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    [data-component~="ui-select"][multiple],
+    [data-component~="ui-select"][size]:not([size="1"]) {
+      min-block-size: 7rem;
+      padding: var(--ui-space-2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-select"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiSeparator.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    orientation?: "horizontal" | "vertical" | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiSeparator.js

@@ -0,0 +1,2 @@
+import { t as UiSeparator_default } from "./chunks/UiSeparator.js";
+export { UiSeparator_default as default };

package/vue/UiSeparator.vue

@@ -0,0 +1,38 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  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<{
+  orientation?: "horizontal" | "vertical" | null;
+}>(), {
+  orientation: "horizontal",
+});
+
+</script>
+
+<template>
+  <hr data-component="ui-separator" v-bind="$attrs" :aria-orientation="hn.enumerated(props.orientation)">
+</template>
+
+<style scoped>
+hr {
+      box-sizing: border-box;
+      align-self: stretch;
+      margin: 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+    }
+
+    hr[aria-orientation="vertical"] {
+      block-size: auto;
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+    }
+</style>

package/vue/UiSidebar.d.ts

@@ -0,0 +1,54 @@
+type __VLS_Props = {
+    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;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (detail: {
+        readonly width: number;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    toggle: (detail: {
+        readonly open: boolean;
+        readonly mode: "docked" | "drawer";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResize?: ((detail: {
+        readonly width: number;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    onToggle?: ((detail: {
+        readonly open: boolean;
+        readonly mode: "docked" | "drawer";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    width: number | null;
+    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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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;
+    };
+};

package/vue/UiSidebar.js

@@ -0,0 +1,2 @@
+import { t as UiSidebar_default } from "./chunks/UiSidebar.js";
+export { UiSidebar_default as default };

package/vue/UiSidebar.vue

@@ -0,0 +1,288 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 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";
+
+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 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);
+
+/** 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>;
+  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))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    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(" "));
+
+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];
+}
+
+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.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  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),
+  }),
+  refs: refs 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;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    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; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    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;
+  },
+  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;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  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();
+});
+</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>
+</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));
+    }
+
+    [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;
+    }
+
+    /* 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[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%);
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    /* 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%);
+    }
+
+    [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%);
+    }
+
+    @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));
+    }
+
+    @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;
+    }
+</style>

package/vue/UiStack.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    align?: "start" | "center" | "end" | "stretch" | null;
+    gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+    justify?: "start" | "center" | "end" | "between" | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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;
+    };
+};

package/vue/UiStack.js

@@ -0,0 +1,2 @@
+import { t as UiStack_default } from "./chunks/UiStack.js";
+export { UiStack_default as default };