@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/element/UiSyncDot.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+/**
+ * Sync status indicator: pulsing dot + optional label.
+ * Replaces repeated inline sync dot markup across SiteGroup components.
+ *
+ * - 'syncing' → blue pulse (bg-info)
+ * - 'error' / 'failed' → red, solid (bg-error, no pulse — it is not in progress)
+ * - 'pending' / other -> muted pulse
+ */
+const { status, label, size = '1.5' } = defineProps<{
+  status?: 'syncing' | 'pending' | 'error' | string | null
+  label?: string
+  size?: '1.5' | '2'
+}>()
+
+const sizeClass = { 1.5: 'size-1.5', 2: 'size-2' } as const
+
+const isError = computed(() => status === 'error' || status === 'failed')
+const dotClass = computed(() => [
+  sizeClass[size],
+  isError.value ? 'bg-error' : status === 'syncing' ? 'bg-info' : 'bg-accented',
+  // An error is a resting state, not progress, so it should not pulse.
+  isError.value ? '' : 'motion-safe:animate-pulse',
+])
+const ariaLabel = computed(() => isError.value ? 'Sync error' : status === 'syncing' ? 'Syncing' : 'Sync pending')
+</script>
+
+<template>
+  <div v-if="label" class="flex items-center gap-2">
+    <span
+      class="rounded-full shrink-0"
+      :class="dotClass"
+      aria-hidden="true"
+    />
+    <span class="text-xs tabular-nums" :class="isError ? 'text-error' : 'text-muted'">{{ label }}</span>
+    <slot />
+  </div>
+  <span
+    v-else
+    class="rounded-full shrink-0"
+    :class="dotClass"
+    role="img"
+    :aria-label="ariaLabel"
+  />
+</template>

package/app/components/element/UiTabs.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts" generic="T extends string = string">
+import type { ComponentPublicInstance } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { useRoute } from 'nuxt/app'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { NuxtLink } from '#components'
+import { useEdgeFade } from '../../composables/useEdgeFade'
+/**
+ * Horizontal tab strip. Owned primitive (ejected from `UTabs`) — the tab
+ * *intents* in DESIGN.md map to a semantic `kind`, and the responsive + a11y
+ * behaviour lives in one place. Two modes, one look:
+ *
+ *  - **Route mode** (`:links`, each with a `to`): tabs that change the URL and
+ *    render via `<NuxtPage />`. This is *navigation*, so it renders a `<nav>` of
+ *    `NuxtLink`s with `aria-current="page"` (set by NuxtLink); active derives
+ *    from the route and navigation is `:to` (no `@click`/`router.push`).
+ *
+ *  - **Select mode** (`:items` + `v-model`): an in-page view switch that flips a
+ *    reactive value the page reads (panels rendered by the consumer via `v-if`).
+ *    Renders a `role="tablist"` of `<button role="tab">` with `aria-selected`.
+ *
+ * Both modes share `kind`:
+ *  - `kind="page"`   — primary strip under `ProPageHeader`; white underline on
+ *                      the active tab (text-level emphasis, never the CTA violet).
+ *  - `kind="subnav"` — nested one level below; quiet `bg-elevated` pill.
+ *
+ * For a compact, enclosed segmented toggle in a section header, use `UiTogglePill`.
+ * For tabs that need the primitive to render panel slots, use `UTabs`.
+ */
+
+export interface UiTabLink {
+  label: string
+  /** Any NuxtLink target: a path string or a `{ name, params }` route object. */
+  to: RouteLocationRaw
+  /**
+   * Match a section when its landing link differs from the current page, e.g.
+   * a Guides tab that stays active on every page below `/guides`. Replaces the
+   * exact-route match for this tab.
+   */
+  active?: (path: string) => boolean
+  disabled?: boolean
+  /** Route tab links default to no prefetch so tabs never start data work on hover/visibility. */
+  prefetch?: boolean
+  /**
+   * Extra classes for this tab (e.g. `text-dimmed` to mark a tab whose feature
+   * isn't set up yet). Applied alongside the shared tab styling; the active
+   * state still wins via `exact-active-class`.
+   */
+  class?: string
+}
+export interface UiTabItem<T extends string = string> {
+  label: string
+  value: T
+  disabled?: boolean
+  /** Stable id for the tab control when the consumer renders a tabpanel. */
+  tabId?: string
+  /** Stable id of the tabpanel controlled by this tab. */
+  panelId?: string
+}
+
+const { kind = 'page', links, items, ariaLabel = 'Tabs', modelValue } = defineProps<{
+  kind?: 'page' | 'subnav'
+  /** Route mode: NuxtLink tabs; active derives from the route. */
+  links?: UiTabLink[]
+  /** Select mode: in-page selection bound to `v-model`. Pass with v-model, not `links`. */
+  items?: UiTabItem<T>[]
+  /** Accessible name for the nav landmark / tablist. */
+  ariaLabel?: string
+  /** Select-mode value. Ignored in route mode. */
+  modelValue?: T
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: T] }>()
+
+defineSlots<{
+  /** Trailing content inside a tab (e.g. a lock icon). Receives the link/item. */
+  trailing?: (props: { link: UiTabLink | UiTabItem<T> }) => unknown
+}>()
+
+const model = computed({
+  get: () => modelValue,
+  set: (value: T) => emit('update:modelValue', value),
+})
+const route = useRoute()
+
+const isSelect = computed(() => !!items)
+const enabledItems = computed(() => items?.filter(i => !i.disabled) ?? [])
+
+// Root is the horizontal scroll container; one ref drives both keyboard roving
+// (select mode) and the overflow-fade affordance (both modes).
+const rootEl = ref<HTMLElement>()
+function setRoot(el: Element | ComponentPublicInstance | null) {
+  const root = el && '$el' in el ? el.$el : el
+  rootEl.value = root instanceof HTMLElement ? root : undefined
+}
+
+// Edge fades: only show the gradient on a side that actually has more tabs to
+// reach. Self-activates when the strip overflows (i.e. narrow / mobile widths)
+// and clears when it fits, so desktop never masks.
+const { fadeStart, fadeEnd, update: updateFades } = useEdgeFade(rootEl, scrollSelectedIntoView)
+
+onMounted(scrollSelectedIntoView)
+watch(() => (items?.length ?? 0) + (links?.length ?? 0), scrollSelectedIntoView)
+
+// Bring the active tab into view on load and after URL/model-driven selection.
+// This is especially important for grouped strips where the selected item may
+// live beyond the narrow viewport.
+function scrollSelectedIntoView() {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      const root = rootEl.value
+      const selected = root?.querySelector<HTMLElement>('[aria-selected="true"], [aria-current="true"], [aria-current="page"], .router-link-exact-active')
+      if (root && selected) {
+        const rootBounds = root.getBoundingClientRect()
+        const selectedBounds = selected.getBoundingClientRect()
+        const selectedLeft = selectedBounds.left - rootBounds.left + root.scrollLeft
+        root.scrollLeft = Math.max(0, selectedLeft - (root.clientWidth - selectedBounds.width) / 2)
+      }
+      updateFades()
+    })
+  })
+}
+watch(model, scrollSelectedIntoView)
+watch(() => route.fullPath, scrollSelectedIntoView, { flush: 'post' })
+
+// Roving tabindex: only the active tab is in the Tab sequence (APG tablist).
+// When nothing is selected yet, the first enabled tab is the entry point so the
+// tablist stays keyboard-reachable.
+function isTabStop(item: UiTabItem<T>): boolean {
+  if (item.disabled)
+    return false
+  if (enabledItems.value.some(enabled => enabled.value === model.value))
+    return model.value === item.value
+  return item.value === enabledItems.value[0]?.value
+}
+
+// Arrow/Home/End move between tabs with automatic activation (switching is
+// cheap — the consumer just re-renders a v-if panel). Horizontal orientation.
+function onKeydown(e: KeyboardEvent) {
+  if (!items || !['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key))
+    return
+  const enabled = enabledItems.value
+  if (!enabled.length)
+    return
+  e.preventDefault()
+  const current = enabled.findIndex(i => i.value === model.value)
+  let nextIdx: number
+  if (e.key === 'Home')
+    nextIdx = 0
+  else if (e.key === 'End')
+    nextIdx = enabled.length - 1
+  else
+    nextIdx = ((current === -1 ? 0 : current) + (e.key === 'ArrowRight' ? 1 : -1) + enabled.length) % enabled.length
+  const next = enabled[nextIdx]!
+  model.value = next.value
+  const domIdx = items.findIndex(i => i.value === next.value)
+  nextTick(() => rootEl.value?.querySelectorAll<HTMLElement>('[role="tab"]')[domIdx]?.focus())
+}
+
+// Shared styling so route + select tabs are visually identical; `kind` and
+// active-state are the only differences. The focus ring is inset: the strip
+// scrolls (`overflow-x-auto`), and an outset ring on a tab that fills the strip
+// height was clipped to a sliver.
+const baseClass = 'group/uitab relative inline-flex items-center justify-center gap-1.5 shrink-0 whitespace-nowrap min-h-11 min-w-11 sm:min-h-0 sm:min-w-0 text-sm font-medium text-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:rounded-sm'
+const kindBase = computed(() => kind === 'page'
+  ? 'px-1 pb-2.5 -mb-px border-b-2 border-transparent'
+  : 'px-2.5 py-1 rounded-md')
+// A section tab (`active`) names itself current. Only it binds `aria-current`:
+// a bound attribute, even an undefined one, replaces the `aria-current="page"`
+// the link sets on an exact route.
+function sectionCurrent(link: UiTabLink): { 'aria-current'?: 'true' } {
+  if (link.disabled || !link.active)
+    return {}
+  return { 'aria-current': link.active(route.path) ? 'true' : undefined }
+}
+const activeClass = computed(() => kind === 'page'
+  ? 'text-highlighted border-inverted!'
+  : 'bg-elevated text-default')
+</script>
+
+<template>
+  <component
+    :is="isSelect ? 'div' : 'nav'"
+    :ref="setRoot"
+    :role="isSelect ? 'tablist' : undefined"
+    :aria-orientation="isSelect ? 'horizontal' : undefined"
+    :aria-label="ariaLabel"
+    class="ui-tabs ui-edge-fade flex items-stretch overflow-x-auto"
+    :class="kind === 'page' ? 'gap-4 border-b border-default' : 'gap-0 w-fit max-w-full rounded-lg bg-muted p-0.5'"
+    :data-fade-start="fadeStart || undefined"
+    :data-fade-end="fadeEnd || undefined"
+    @keydown="isSelect ? onKeydown($event) : undefined"
+  >
+    <!-- Select mode: in-page view switch -->
+    <template v-if="isSelect">
+      <button
+        v-for="item in items"
+        :id="item.tabId"
+        :key="item.value"
+        type="button"
+        role="tab"
+        :aria-controls="item.panelId"
+        :aria-selected="model === item.value"
+        :tabindex="isTabStop(item) ? 0 : -1"
+        :disabled="item.disabled"
+        class="cursor-pointer"
+        :class="[
+          baseClass,
+          kindBase,
+          model === item.value ? activeClass : '',
+          item.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:text-default',
+        ]"
+        @click="model = item.value"
+      >
+        <span>{{ item.label }}</span>
+        <slot name="trailing" :link="item" />
+      </button>
+    </template>
+
+    <!-- Route mode: navigation -->
+    <template v-else>
+      <component
+        :is="link.disabled ? 'span' : NuxtLink"
+        v-for="link in links"
+        :key="link.label"
+        :to="link.disabled ? undefined : link.to"
+        :prefetch="link.disabled ? undefined : (link.prefetch ?? false)"
+        :aria-disabled="link.disabled || undefined"
+        :tabindex="link.disabled ? -1 : undefined"
+        :exact-active-class="link.disabled || link.active ? undefined : activeClass"
+        v-bind="sectionCurrent(link)"
+        :class="[
+          baseClass,
+          kindBase,
+          link.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:text-default',
+          !link.disabled && link.active?.(route.path) ? activeClass : '',
+          link.class,
+        ]"
+      >
+        <span>{{ link.label }}</span>
+        <slot name="trailing" :link="link" />
+      </component>
+    </template>
+  </component>
+</template>

package/app/components/element/UiTogglePill.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts" generic="T extends string | number = string">
+import { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
+import { UiIcon, UiTooltip } from '#components'
+
+export interface TogglePillOption<T extends string | number = string> {
+  value: T
+  label: string
+  icon?: string
+  disabled?: boolean
+  tooltip?: string
+}
+
+const { options, label } = defineProps<{
+  options: TogglePillOption<T>[]
+  /** Accessible name for the segmented control (screen-reader only). */
+  label?: string
+}>()
+
+const modelValue = defineModel<T>({ required: true })
+
+// reka ToggleGroup (type=single) round-trips the value through a DOM attr, so
+// it always emits a string; map back to the original option so a numeric `T`
+// keeps its type. `null`/deselect is swallowed — this is a required single-select.
+function onUpdate(value: unknown) {
+  if (typeof value !== 'string')
+    return
+  const match = options.find(o => String(o.value) === value)
+  if (match)
+    modelValue.value = match.value
+}
+
+// An iconed option marks its label `data-toolbar-label`, so `ProDataToolbar`
+// can drop it to the icon (the item keeps its aria-label) before a line wraps.
+// Outside that toolbar the attribute does nothing.
+//
+// Canonical segmented-control proportions come from the Search Console
+// portfolio toolbar: a fixed 28px desktop item inside a bordered, inset shell.
+// Keeping the dimensions here prevents each dashboard concern from drifting.
+const itemClass = 'h-11 min-w-11 sm:h-7 sm:min-w-0 px-2.5 inline-flex items-center justify-center gap-1.5 text-sm font-medium rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary'
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :model-value="String(modelValue)"
+    type="single"
+    :aria-label="label"
+    class="flex items-center gap-0.5 p-0.5 rounded-lg bg-[var(--ui-bg-elevated)]/60 border border-default"
+    @update:model-value="onUpdate"
+  >
+    <template v-for="opt in options" :key="String(opt.value)">
+      <UiTooltip v-if="opt.tooltip" :text="opt.tooltip" :delay-duration="200">
+        <ToggleGroupItem
+          :value="String(opt.value)"
+          :disabled="opt.disabled"
+          :aria-label="opt.label"
+          class="data-disabled:text-dimmed/60 data-disabled:cursor-not-allowed cursor-pointer"
+          :class="[
+            itemClass,
+            modelValue === opt.value
+              ? 'bg-default text-default shadow-sm'
+              : 'text-muted hover:text-default',
+          ]"
+        >
+          <UiIcon v-if="opt.icon" :name="opt.icon" class="size-3.5" aria-hidden="true" />
+          <span :data-toolbar-label="opt.icon ? '' : undefined">{{ opt.label }}</span>
+        </ToggleGroupItem>
+      </UiTooltip>
+      <ToggleGroupItem
+        v-else
+        :value="String(opt.value)"
+        :disabled="opt.disabled"
+        :aria-label="opt.label"
+        class="data-disabled:text-dimmed/60 data-disabled:cursor-not-allowed cursor-pointer"
+        :class="[
+          itemClass,
+          modelValue === opt.value
+            ? 'bg-default text-default shadow-sm'
+            : 'text-muted hover:text-default',
+        ]"
+      >
+        <UiIcon v-if="opt.icon" :name="opt.icon" class="size-3.5" aria-hidden="true" />
+        <span :data-toolbar-label="opt.icon ? '' : undefined">{{ opt.label }}</span>
+      </ToggleGroupItem>
+    </template>
+  </ToggleGroupRoot>
+</template>