create-ginko 0.4.0 → 0.6.0

package/templates/events/app/components/site/Header.vue

@@ -0,0 +1,52 @@
+<!-- Synced from templates/_features/site/app/components/site/Header.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// Name or logo, the navigation (at most 6 links), the language switch and the theme toggle. Below `md` the links and
+// the language switch move into a sheet, so the sheet opens for a site with languages but no links too. From `md` the
+// header has the language codes. A longer navigation stays in the sheet for longer, so labels never squeeze the
+// header: more than 4 links until `xl` (five German labels and the name did not fit at 1024 px); until `lg` when more
+// than 6 links and codes come together (5 links and 4 codes do not fit at 768 px in German or French) or when the
+// name, the labels and the codes are longer than 768 px holds: 70 characters of the page's language (about 7 px each
+// at the size of the links; the German events header with 78 did not fit, the English one with 61 does). More than
+// 6 links, or 150 characters, never fit inline, not even at `xl` (the 1280 px header holds about 150 characters at
+// that size; kept from the 7 px estimate, not measured in a build), so the sheet stays the only menu.
+const config = useSiteAppConfig()
+const { name } = useGinkoSite()
+const links = useSiteLinks(() => config.nav, 6)
+const more = useSiteLinks(() => config.footer)
+const { t, alternates } = useI18n('site')
+const path = useGinkoPath()
+const codes = computed(() => (alternates.value.length > 1 ? alternates.value.length : 0))
+/** The header's length in characters: the name (or the logo's width), each label with its padding, each code. */
+const length = computed(() => links.value.reduce((sum, link) => sum + link.label.length + 3, config.logo ? config.logo.width / 7 : name.length) + codes.value * 5)
+const until = computed(() => (links.value.length > 6 || length.value > 150 ? 'always' : links.value.length > 4 ? 'xl' : links.value.length + codes.value > 6 || length.value > 70 ? 'lg' : 'md'))
+// Whole class names, so Tailwind finds them in the source.
+const navHidden = { md: 'max-md:hidden', lg: 'max-lg:hidden', xl: 'max-xl:hidden', always: 'hidden' } as const
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 border-b bg-background print:static">
+    <div class="mx-auto flex h-16 max-w-page items-center gap-4 px-gutter md:h-18">
+      <NuxtLink :to="path('home')" class="-m-1 me-auto inline-flex min-h-11 shrink-0 items-center rounded-md p-1 whitespace-nowrap">
+        <SiteLogo />
+        <span class="sr-only">, {{ t('home') }}</span>
+      </NuxtLink>
+      <nav v-if="links.length" :aria-label="t('nav.label')" class="print:hidden" :class="navHidden[until]">
+        <ul class="flex items-center gap-1">
+          <li v-for="link in links" :key="link.key">
+            <SiteNavLink
+              :to="link.to"
+              class="inline-flex min-h-11 items-center rounded-md px-3 text-small font-medium whitespace-nowrap text-muted-foreground transition-[color,background-color,border-color] duration-150 hover:text-foreground aria-[current=page]:text-foreground underline-offset-4 aria-[current=page]:underline"
+            >
+              {{ link.label }}
+            </SiteNavLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="flex items-center gap-1">
+        <SiteLanguageSwitch class="max-md:hidden print:hidden" />
+        <SiteThemeToggle />
+        <SiteNavSheet v-if="links.length || alternates.length > 1" :links="links" :more="more" :until="until" />
+      </div>
+    </div>
+  </header>
+</template>

package/templates/events/app/components/site/LanguageSwitch.vue

@@ -0,0 +1,34 @@
+<!-- Synced from templates/_features/site/app/components/site/LanguageSwitch.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The same page in each language of the site (ginko-i18n alternates). A page without a translation links to that
+// language's home page and says so. Hidden when the site has one language. Two forms: codes in the header from `md`
+// up, full names in their own language in the phone nav sheet and the footer (`names`). The accessible name starts
+// with the visible text ("de Deutsch", "Deutsch"), so voice control users can say what they see (WCAG 2.5.3).
+defineProps<{ names?: boolean }>()
+const { t, alternates, language } = useI18n('site')
+</script>
+
+<template>
+  <ul v-if="alternates.length > 1" :class="names ? 'flex flex-wrap gap-x-5' : 'flex items-center'" :aria-label="t('language.label')">
+    <li v-for="alt in alternates" :key="alt.code">
+      <NuxtLink
+        :to="alt.path"
+        :hreflang="alt.language"
+        :lang="alt.language"
+        :aria-current="alt.current ? 'true' : undefined"
+        :class="names
+          ? 'inline-flex min-h-11 min-w-11 items-center text-muted-foreground underline-offset-4 hover:text-foreground hover:underline aria-[current]:text-foreground aria-[current]:underline'
+          : 'inline-flex size-11 items-center justify-center rounded-md text-small font-medium text-muted-foreground uppercase transition-[color,background-color,border-color] duration-150 hover:bg-accent hover:text-foreground aria-[current]:text-foreground aria-[current]:underline aria-[current]:underline-offset-4'"
+      >
+        <template v-if="names">
+          <template v-if="alt.translated">{{ alt.name }}</template>
+          <!-- The spoken name starts with the visible one: "Deutsch: Diese Seite ist nicht übersetzt, zur Startseite". -->
+          <template v-else><span aria-hidden="true">{{ alt.name }}</span><span class="sr-only" :lang="language">{{ t('language.untranslated', { language: alt.name }) }}</span></template>
+        </template>
+        <template v-else>
+          {{ alt.code }}<span class="sr-only normal-case">&nbsp;<template v-if="alt.translated">{{ alt.name }}</template><span v-else :lang="language">{{ t('language.untranslated', { language: alt.name }) }}</span></span>
+        </template>
+      </NuxtLink>
+    </li>
+  </ul>
+</template>

package/templates/events/app/components/site/Lightbox.vue

@@ -0,0 +1,62 @@
+<!-- Synced from templates/_features/gallery/app/components/site/Lightbox.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { ImageValue } from '@lupinum/ginko'
+import { ArrowLeft, ArrowRight } from '@lucide/vue'
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'
+
+/**
+ * The one lightbox of a gallery: the photo as large as fits on an opaque dark background (no page text shows behind
+ * it), its alt text as caption, previous and next (buttons and arrow keys), and Escape to close. reka-ui keeps the
+ * focus inside and the page still; on close the focus returns to the photo that is shown last (`focusPhoto`, from the
+ * gallery that opened it).
+ */
+const props = defineProps<{ images: ImageValue[], focusPhoto: (index: number) => void }>()
+const open = defineModel<boolean>('open', { required: true })
+const index = defineModel<number>('index', { required: true })
+const { t } = useI18n('gallery')
+const image = computed(() => props.images[index.value])
+const go = (step: number) => { index.value = (index.value + step + props.images.length) % props.images.length }
+function onKey(event: KeyboardEvent) {
+  const rtl = getComputedStyle(event.currentTarget as Element).direction === 'rtl'
+  if (event.key === 'ArrowRight') go(rtl ? -1 : 1)
+  if (event.key === 'ArrowLeft') go(rtl ? 1 : -1)
+}
+function returnFocus(event: Event) {
+  event.preventDefault()
+  props.focusPhoto(index.value)
+}
+</script>
+
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogPortal>
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+      <DialogContent
+        :aria-describedby="undefined"
+        class="dark fixed inset-0 z-50 flex bg-background flex-col items-center justify-center gap-4 p-4 text-foreground focus-visible:outline-none md:p-10"
+        @keydown="onKey"
+        @close-auto-focus="returnFocus"
+      >
+        <DialogTitle class="sr-only">{{ t('title') }}</DialogTitle>
+        <figure v-if="image" class="flex min-h-0 flex-1 flex-col items-center justify-center gap-3">
+          <GinkoImage :image="image" sizes="100vw" class="max-h-full min-h-0 w-auto max-w-full rounded-md object-contain" />
+          <figcaption v-if="image.alt" class="max-w-prose text-center text-small">{{ image.alt }}</figcaption>
+        </figure>
+        <div class="flex items-center gap-2">
+          <Button variant="ghost" size="icon" :disabled="images.length < 2" @click="go(-1)">
+            <ArrowLeft class="rtl:-scale-x-100" aria-hidden="true" />
+            <span class="sr-only">{{ t('previous') }}</span>
+          </Button>
+          <p class="min-w-16 text-center text-small tabular-nums" aria-live="polite">{{ t('counter', { n: index + 1, count: images.length }) }}</p>
+          <Button variant="ghost" size="icon" :disabled="images.length < 2" @click="go(1)">
+            <ArrowRight class="rtl:-scale-x-100" aria-hidden="true" />
+            <span class="sr-only">{{ t('next') }}</span>
+          </Button>
+          <DialogClose as-child>
+            <Button variant="outline">{{ t('close') }}</Button>
+          </DialogClose>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/templates/events/app/components/site/Logo.vue

@@ -0,0 +1,17 @@
+<!-- Synced from templates/_features/site/app/components/site/Logo.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The logo from app.config.ts, or the site name as text. On phones the short name, when there is one.
+const config = useSiteAppConfig()
+const { name } = useGinkoSite()
+</script>
+
+<template>
+  <img v-if="config.logo" :src="config.logo.src" :width="config.logo.width" :height="config.logo.height" :alt="name" class="h-8 w-auto">
+  <span v-else class="font-display text-body font-semibold whitespace-nowrap">
+    <template v-if="config.shortName">
+      <span class="sm:hidden">{{ config.shortName }}</span>
+      <span class="max-sm:hidden">{{ name }}</span>
+    </template>
+    <template v-else>{{ name }}</template>
+  </span>
+</template>

package/templates/events/app/components/site/NavLink.vue

@@ -0,0 +1,19 @@
+<!-- Synced from templates/_features/site/app/components/site/NavLink.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { safeHref } from '@lupinum/ginko'
+
+/** A navigation link that marks the current page with aria-current, so it can be styled and announced. An address on
+ *  another site (`https://…`, a nav item with `url`) is a plain link: it is never the current page. */
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{ to: string }>()
+const external = computed(() => /^https?:\/\//.test(props.to))
+</script>
+
+<template>
+  <a v-if="external" :href="safeHref(to)" v-bind="$attrs"><slot /></a>
+  <NuxtLink v-else v-slot="{ href, navigate, isExactActive }" :to="to" custom>
+    <a :href="href ?? undefined" :aria-current="isExactActive ? 'page' : undefined" v-bind="$attrs" @click="navigate">
+      <slot />
+    </a>
+  </NuxtLink>
+</template>

package/templates/events/app/components/site/NavSheet.vue

@@ -0,0 +1,63 @@
+<!-- Synced from templates/_features/site/app/components/site/NavSheet.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowRight, Menu } from '@lucide/vue'
+
+// The navigation on phones: a sheet from the inline start (the right in right-to-left languages). reka-ui keeps the
+// focus inside while open and returns it to the button on close. After a navigation the sheet closes and the focus
+// moves to the new page's content instead, so keyboard and screen reader users start there, not in the header.
+// The language switch sits at the top, with full names, since the header has no room for it on phones; from `md` the
+// header has the language codes, so the sheet leaves them out. The footer links (`more`: team, reports) follow the
+// menu as a second, quieter list, so they are one tap away on a phone too. `until`: the header shows its own links
+// from this breakpoint up, so the menu button hides there; `always`: the links never fit inline, so the button shows
+// at every width.
+type Link = { key: string, label: string, to: string }
+withDefaults(defineProps<{ links: Link[], more?: Link[], until?: 'md' | 'lg' | 'xl' | 'always' }>(), { more: () => [], until: 'md' })
+// Whole class names, so Tailwind finds them in the source.
+const buttonHidden = { md: 'md:hidden', lg: 'lg:hidden', xl: 'xl:hidden', always: '' } as const
+const { t } = useI18n('site')
+const open = ref(false)
+const route = useRoute()
+let navigated = false
+watch(() => route.fullPath, () => {
+  navigated = open.value
+  open.value = false
+})
+function returnFocus(event: Event) {
+  if (!navigated) return
+  navigated = false
+  event.preventDefault()
+  document.getElementById('main')?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <Sheet v-model:open="open">
+    <SheetTrigger as-child>
+      <Button variant="ghost" size="icon" class="print:hidden" :class="buttonHidden[until]">
+        <Menu aria-hidden="true" />
+        <span class="sr-only">{{ t('nav.open') }}</span>
+      </Button>
+    </SheetTrigger>
+    <SheetContent side="start" :close-label="t('close')" :aria-describedby="undefined" class="px-6 pt-5 pb-8" @close-auto-focus="returnFocus">
+      <SheetTitle class="flex h-11 items-center text-small text-muted-foreground">{{ t('nav.title') }}</SheetTitle>
+      <SiteLanguageSwitch names class="mb-4 text-small md:hidden" />
+      <nav v-if="links.length" :aria-label="t('nav.label')">
+        <ul class="flex flex-col border-t">
+          <li v-for="link in links" :key="link.key" class="border-b">
+            <SiteNavLink :to="link.to" class="flex min-h-14 items-center justify-between gap-4 py-3 text-h3 font-medium underline-offset-4 aria-[current=page]:underline">
+              {{ link.label }}
+              <ArrowRight class="size-5 shrink-0 text-muted-foreground rtl:-scale-x-100" aria-hidden="true" />
+            </SiteNavLink>
+          </li>
+        </ul>
+      </nav>
+      <ul v-if="more.length" class="mt-4 flex flex-col">
+        <li v-for="link in more" :key="link.key">
+          <SiteNavLink :to="link.to" class="flex min-h-11 items-center text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline aria-[current=page]:text-foreground aria-[current=page]:underline">
+            {{ link.label }}
+          </SiteNavLink>
+        </li>
+      </ul>
+    </SheetContent>
+  </Sheet>
+</template>

package/templates/events/app/components/site/Notice.vue

@@ -0,0 +1,21 @@
+<!-- Synced from templates/_features/site/app/components/site/Notice.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Info } from '@lucide/vue'
+
+// The owner's notices (content/notices/): every active one (the notices brick allows 5), in the owner's order, so
+// the newest goes first. A notice with "Shown until" leaves the site after that day by itself. There is no dismiss
+// button: owners end notices by date.
+const notices = useGinko('notices')
+const { t } = useI18n('site')
+</script>
+
+<template>
+  <section v-if="notices.items.length" :aria-label="t('notice')" class="bg-muted print:hidden">
+    <ul class="mx-auto flex max-w-page flex-col gap-1 px-gutter py-2.5">
+      <li v-for="notice in notices.items" :key="notice.id" class="flex items-start gap-2.5 text-small">
+        <Info class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+        <p>{{ notice.data.text }}</p>
+      </li>
+    </ul>
+  </section>
+</template>

package/templates/events/app/components/site/SkipLink.vue

@@ -0,0 +1,15 @@
+<!-- Synced from templates/_features/site/app/components/site/SkipLink.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The first tab stop of every page. Parked above the viewport until focused (not sr-only: Tailwind's not-sr-only
+// would reset its padding on focus).
+const { t } = useI18n('site')
+</script>
+
+<template>
+  <a
+    href="#main"
+    class="fixed start-3 top-3 z-60 -translate-y-24 rounded-md bg-primary px-4 py-3 font-medium text-primary-foreground focus:translate-y-0 print:hidden"
+  >
+    {{ t('skip') }}
+  </a>
+</template>

package/templates/events/app/components/site/ThemeToggle.vue

@@ -0,0 +1,28 @@
+<!-- Synced from templates/_features/site/app/components/site/ThemeToggle.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Moon, Sun } from '@lucide/vue'
+
+// Switches between light and dark (@nuxtjs/color-mode; the first visit follows the system). A toggle button: the name
+// stays "Dark mode" and aria-pressed says whether the page is dark now, also when that comes from the system, so a
+// screen reader says "Dark mode, pressed". The icon shows what a click gives (moon in light, sun in dark). The server
+// cannot know the visitor's choice, so the icons switch by CSS and aria-pressed is set only after hydration.
+const { t } = useI18n('site')
+const colorMode = useColorMode()
+const mounted = ref(false)
+onMounted(() => { mounted.value = true })
+const dark = computed(() => colorMode.value === 'dark')
+// Toggling back to the system's own scheme stores `system` again, so the site follows the system from then on.
+function toggle() {
+  const next = dark.value ? 'light' : 'dark'
+  const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  colorMode.preference = next === system ? 'system' : next
+}
+</script>
+
+<template>
+  <Button variant="ghost" size="icon" class="print:hidden" :aria-pressed="mounted ? dark : undefined" @click="toggle">
+    <Moon class="dark:hidden" aria-hidden="true" />
+    <Sun class="hidden dark:block" aria-hidden="true" />
+    <span class="sr-only">{{ t('theme') }}</span>
+  </Button>
+</template>

package/templates/events/app/components/ui/accordion/Accordion.vue

@@ -0,0 +1,16 @@
+<!-- Synced from templates/_features/faq/app/components/ui/accordion/Accordion.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

package/templates/events/app/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,26 @@
+<!-- Synced from templates/_features/faq/app/components/ui/accordion/AccordionContent.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+// On paper every answer shows: a closed one (kept in the page with `unmount-on-hide="false"`, hidden until found)
+// opens for print.
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down print:block print:h-auto print:[content-visibility:visible]"
+  >
+    <div :class="cn('max-w-prose pb-6 text-muted-foreground', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/templates/events/app/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<!-- Synced from templates/_features/faq/app/components/ui/accordion/AccordionItem.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionItem, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>

package/templates/events/app/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,35 @@
+<!-- Synced from templates/_features/faq/app/components/ui/accordion/AccordionTrigger.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { ChevronDown } from '@lucide/vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+// Trimmed from shadcn-vue: body-size question, the global focus ring, and the heading level from the block that
+// uses it (`headingLevel`), so the page outline stays right.
+const props = withDefaults(defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'], headingLevel?: 'h2' | 'h3' | 'h4' }>(), {
+  headingLevel: 'h3',
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'headingLevel')
+</script>
+
+<template>
+  <AccordionHeader :as="headingLevel" class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="cn(
+        'group flex min-h-11 flex-1 items-start justify-between gap-6 py-5 text-start text-body font-medium transition-[color,background-color,border-color] duration-150 hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-60',
+        props.class)"
+    >
+      <slot />
+      <ChevronDown
+        class="mt-1 size-5 shrink-0 text-muted-foreground transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 print:hidden"
+        aria-hidden="true"
+      />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/templates/events/app/components/ui/accordion/index.ts

@@ -0,0 +1,5 @@
+// Synced from templates/_features/faq/app/components/ui/accordion/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/templates/events/app/components/ui/button/Button.vue

@@ -0,0 +1,30 @@
+<!-- Synced from templates/_features/ui/app/components/ui/button/Button.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/templates/events/app/components/ui/button/index.ts

@@ -0,0 +1,44 @@
+// Synced from templates/_features/ui/app/components/ui/button/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+// shadcn-vue's variant and size names, so shadcn examples and blocks work as written; the look comes from the tokens
+// (tokens.css). Focus is the global :focus-visible ring. Sizes are at least 44px high on touch screens, the touch
+// target of the design rules; `sm` and `icon-sm` are smaller only with a mouse (`pointer-coarse`).
+export const buttonVariants = cva(
+  'inline-flex shrink-0 items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap transition-[color,background-color,border-color] duration-150 ease-out select-none disabled:pointer-events-none disabled:opacity-60 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-5',
+  {
+    variants: {
+      variant: {
+        /** The main action. One per view. On paper an outline, as printers leave out backgrounds. */
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 print:border print:bg-transparent print:text-foreground',
+        /** A second action next to the main one. */
+        outline: 'border border-input text-foreground hover:bg-accent',
+        /** A quiet filled action, for example in a toolbar. */
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        /** An action that deletes or cannot be undone. `text-background` keeps the contrast in both schemes. */
+        destructive: 'bg-destructive text-background hover:bg-destructive/90',
+        /** Icon buttons and quiet actions, for example in the header. */
+        ghost: 'text-foreground hover:bg-accent',
+        /** An action that reads as a link. */
+        link: 'text-primary underline underline-offset-4 hover:decoration-2',
+      },
+      size: {
+        default: 'h-11 px-5 text-small',
+        sm: 'h-9 px-3 text-small pointer-coarse:h-11',
+        lg: 'h-12 px-6 text-body',
+        icon: 'size-11',
+        'icon-sm': 'size-9 pointer-coarse:size-11',
+        'icon-lg': 'size-12',
+      },
+    },
+    compoundVariants: [{ variant: 'link', class: 'h-auto px-0' }],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/templates/events/app/components/ui/sheet/Sheet.vue

@@ -0,0 +1,16 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/Sheet.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/templates/events/app/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetClose.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

package/templates/events/app/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetContent.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { X } from '@lucide/vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import SheetOverlay from './SheetOverlay.vue'
+
+// Trimmed from shadcn-vue: a panel from the inline start or end, so it opens from the right in right-to-left
+// languages. Focus trap, Escape and focus return come from reka-ui. The close button's label is a prop, because
+// this component has no texts of its own.
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: 'start' | 'end'
+  closeLabel?: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'start',
+  closeLabel: 'Close',
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'side', 'closeLabel')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'fixed inset-y-0 z-50 flex h-full w-11/12 max-w-sm flex-col gap-6 bg-background shadow-overlay data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=open]:ease-out',
+        side === 'start' && 'start-0 border-e data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start',
+        side === 'end' && 'end-0 border-s data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute end-3 top-3 inline-flex size-11 items-center justify-center rounded-md text-foreground transition-[color,background-color,border-color] duration-150 hover:bg-accent"
+      >
+        <X class="size-5" aria-hidden="true" />
+        <span class="sr-only">{{ closeLabel }}</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/templates/events/app/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,23 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetDescription.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    v-bind="forwardedProps"
+    :class="cn('text-small text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>