@mkatogui/uds-vue 0.2.1 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @mkatogui/uds-vue
 
-Vue 3 Composition API components for the Universal Design System. 32 accessible, themeable components built with `<script setup lang="ts">` and `defineProps`.
+Vue 3 Composition API components for the Universal Design System. 43 accessible, themeable components built with `<script setup lang="ts">` and `defineProps`.
 
 ## Installation
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mkatogui/uds-vue",
-  "version": "0.2.1",
-  "description": "Vue 3 components for Universal Design System — 31 accessible, themeable components",
+  "version": "0.5.0",
+  "description": "Vue 3 components for Universal Design System — 43 accessible, themeable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/components/UdsBox.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  padding?: string | number
+  margin?: string | number
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+const classes = computed(() => ['uds-box', props.class].filter(Boolean).join(' '))
+
+const style = computed(() => {
+  const s: Record<string, string> = {}
+  if (props.padding != null)
+    s.padding = typeof props.padding === 'number' ? `${props.padding}px` : `var(--space-${props.padding}, ${props.padding})`
+  if (props.margin != null)
+    s.margin = typeof props.margin === 'number' ? `${props.margin}px` : `var(--space-${props.margin}, ${props.margin})`
+  return s
+})
+</script>
+
+<template>
+  <div :class="classes" :style="style">
+    <slot />
+  </div>
+</template>

package/src/components/UdsCarousel.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref, watch, onUnmounted } from 'vue'
+
+interface Props {
+  items: unknown[]
+  autoPlay?: boolean
+  interval?: number
+  showDots?: boolean
+  showArrows?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoPlay: false,
+  interval: 5000,
+  showDots: true,
+  showArrows: true,
+  ariaLabel: 'Content carousel',
+})
+
+const emit = defineEmits<{
+  slideChange: [index: number]
+}>()
+
+const current = ref(0)
+const isPaused = ref(false)
+let timer: ReturnType<typeof setInterval> | null = null
+
+function goTo(index: number) {
+  const next = Math.max(0, Math.min(index, props.items.length - 1))
+  current.value = next
+  emit('slideChange', next)
+}
+
+function next() {
+  goTo(current.value + 1)
+}
+function prev() {
+  goTo(current.value - 1)
+}
+
+watch([() => props.autoPlay, isPaused], ([autoPlay, paused]) => {
+  if (timer) clearInterval(timer)
+  if (autoPlay && !paused && props.items.length > 1) {
+    timer = setInterval(() => {
+      current.value = (current.value + 1) % props.items.length
+      emit('slideChange', current.value)
+    }, props.interval)
+  }
+  return () => { if (timer) clearInterval(timer) }
+})
+
+onUnmounted(() => { if (timer) clearInterval(timer) })
+</script>
+
+<template>
+  <section
+    v-if="items.length"
+    class="uds-carousel"
+    role="region"
+    aria-roledescription="carousel"
+    :aria-label="ariaLabel"
+    @focus="isPaused = true"
+    @blur="isPaused = false"
+    @mouseenter="isPaused = true"
+    @mouseleave="isPaused = false"
+  >
+    <div class="uds-carousel__track" :style="{ transform: `translateX(-${current * 100}%)` }">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="uds-carousel__slide"
+        role="group"
+        aria-roledescription="slide"
+        :aria-label="`Slide ${i + 1} of ${items.length}`"
+      >
+        <slot name="item" :item="item" :index="i" />
+      </div>
+    </div>
+    <template v-if="showArrows && items.length > 1">
+      <button
+        type="button"
+        class="uds-carousel__arrow uds-carousel__arrow--prev"
+        aria-label="Previous slide"
+        :disabled="current === 0"
+        @click="prev"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg>
+      </button>
+      <button
+        type="button"
+        class="uds-carousel__arrow uds-carousel__arrow--next"
+        aria-label="Next slide"
+        :disabled="current === items.length - 1"
+        @click="next"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6" /></svg>
+      </button>
+    </template>
+    <div v-if="showDots && items.length > 1" class="uds-carousel__dots" role="tablist" aria-label="Slide indicators">
+      <button
+        v-for="(_, i) in items"
+        :key="i"
+        type="button"
+        role="tab"
+        :aria-selected="i === current"
+        :aria-label="`Slide ${i + 1}`"
+        :class="['uds-carousel__dot', i === current && 'uds-carousel__dot--active'].filter(Boolean).join(' ')"
+        @click="goTo(i)"
+      />
+    </div>
+  </section>
+</template>

package/src/components/UdsChipInput.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  value?: string[]
+  defaultValue?: string[]
+  maxChips?: number
+  placeholder?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultValue: () => [],
+  placeholder: 'Add...',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  change: [chips: string[]]
+  add: [chip: string]
+  remove: [index: number]
+}>()
+
+const internalValue = ref<string[]>([...(props.defaultValue ?? [])])
+const inputValue = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const chips = computed(() => props.value ?? internalValue.value)
+
+watch(() => props.value, (v) => { if (v !== undefined) internalValue.value = [...v] })
+
+const classes = computed(() =>
+  ['uds-chip-input', props.disabled && 'uds-chip-input--disabled'].filter(Boolean).join(' ')
+)
+
+function updateChips(next: string[]) {
+  if (props.value === undefined) internalValue.value = next
+  emit('change', next)
+}
+
+function handleAdd() {
+  const trimmed = inputValue.value.trim()
+  if (!trimmed || (props.maxChips != null && chips.value.length >= props.maxChips)) return
+  if (chips.value.includes(trimmed)) return
+  updateChips([...chips.value, trimmed])
+  emit('add', trimmed)
+  inputValue.value = ''
+}
+
+function handleRemove(index: number) {
+  updateChips(chips.value.filter((_, i) => i !== index))
+  emit('remove', index)
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    handleAdd()
+  }
+  if (e.key === 'Backspace' && inputValue.value === '' && chips.value.length > 0) {
+    handleRemove(chips.value.length - 1)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="listbox"
+    aria-label="Chips"
+    :aria-disabled="disabled"
+    @click="inputRef?.focus()"
+  >
+    <span
+      v-for="(chip, index) in chips"
+      :key="`${chip}-${index}`"
+      class="uds-chip-input__chip"
+      role="option"
+    >
+      <span class="uds-chip-input__chip-label">{{ chip }}</span>
+      <button
+        type="button"
+        class="uds-chip-input__chip-remove"
+        :aria-label="`Remove ${chip}`"
+        :disabled="disabled"
+        @click.stop="handleRemove(index)"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </span>
+    <input
+      v-if="maxChips == null || chips.length < maxChips"
+      ref="inputRef"
+      v-model="inputValue"
+      type="text"
+      class="uds-chip-input__input"
+      :placeholder="placeholder"
+      aria-label="Add chip"
+      :disabled="disabled"
+      @keydown="handleKeydown"
+    >
+  </div>
+</template>

package/src/components/UdsColorPicker.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: string
+  label?: string
+  showHexInput?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '#000000',
+  showHexInput: true,
+})
+
+const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
+
+const id = 'uds-color-picker-' + Math.random().toString(36).slice(2, 9)
+const classes = computed(() => ['uds-color-picker'].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <div :class="classes">
+    <label v-if="label" :for="id" class="uds-color-picker__label">{{ label }}</label>
+    <div class="uds-color-picker__row">
+      <input
+        :id="id"
+        type="color"
+        :value="modelValue"
+        :disabled="disabled"
+        class="uds-color-picker__swatch"
+        :aria-describedby="showHexInput ? `${id}-hex` : undefined"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      >
+      <input
+        v-if="showHexInput"
+        :id="`${id}-hex`"
+        type="text"
+        :value="modelValue"
+        :disabled="disabled"
+        class="uds-color-picker__hex"
+        aria-label="Hex color"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      >
+    </div>
+  </div>
+</template>

package/src/components/UdsContainer.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: 'sm' | 'md' | 'lg' | 'full'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
+
+const classes = computed(() =>
+  ['uds-container', `uds-container--${props.size}`, props.class].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/src/components/UdsDivider.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  orientation?: 'horizontal' | 'vertical'
+  variant?: 'line' | 'dashed'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: 'horizontal',
+  variant: 'line',
+})
+
+const classes = computed(() =>
+  [
+    'uds-divider',
+    `uds-divider--${props.orientation}`,
+    props.variant === 'dashed' && 'uds-divider--dashed',
+    props.class,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <hr :class="classes" role="separator" />
+</template>

package/src/components/UdsForm.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+interface Props {
+  id?: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <form class="uds-form" :class="props.class" :id="props.id">
+    <slot />
+  </form>
+</template>

package/src/components/UdsGrid.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  columns?: 1 | 2 | 3 | 4 | 12
+  gap?: 'sm' | 'md' | 'lg'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 1,
+  gap: 'md',
+})
+
+const classes = computed(() =>
+  ['uds-grid', `uds-grid--cols-${props.columns}`, `uds-grid--gap-${props.gap}`, props.class].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/src/components/UdsLink.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  href: string
+  variant?: 'default' | 'muted' | 'primary'
+  external?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  external: false,
+})
+
+const classes = computed(() =>
+  ['uds-link', `uds-link--${props.variant}`, props.class].filter(Boolean).join(' ')
+)
+
+const rel = computed(() => (props.external ? 'noopener noreferrer' : undefined))
+const target = computed(() => (props.external ? '_blank' : undefined))
+</script>
+
+<template>
+  <a :class="classes" :href="href" :rel="rel" :target="target">
+    <slot />
+  </a>
+</template>

package/src/components/UdsNumberInput.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: number | string
+  min?: number
+  max?: number
+  step?: number
+  showStepper?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  showStepper: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [v: number | string] }>()
+
+const classes = computed(() =>
+  [
+    'uds-number-input',
+    `uds-number-input--${props.size}`,
+    props.showStepper && 'uds-number-input--stepper',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function handleStep(delta: number) {
+  const next = (Number(props.modelValue) || 0) + delta
+  const clamped =
+    props.min != null && next < props.min ? props.min : props.max != null && next > props.max ? props.max : next
+  emit('update:modelValue', clamped)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <button
+      v-if="showStepper"
+      type="button"
+      class="uds-number-input__stepper uds-number-input__stepper--minus"
+      aria-label="Decrease"
+      :disabled="disabled || (min != null && Number(modelValue) <= min)"
+      @click="handleStep(-step)"
+    >
+      −
+    </button>
+    <input
+      type="number"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      class="uds-number-input__input"
+      :aria-valuenow="modelValue != null ? Number(modelValue) : undefined"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    >
+    <button
+      v-if="showStepper"
+      type="button"
+      class="uds-number-input__stepper uds-number-input__stepper--plus"
+      aria-label="Increase"
+      :disabled="disabled || (max != null && Number(modelValue) >= max)"
+      @click="handleStep(step)"
+    >
+      +
+    </button>
+  </div>
+</template>

package/src/components/UdsOTPInput.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  length?: 4 | 6
+  value?: string
+  defaultValue?: string
+  autoFocus?: boolean
+  inputMode?: 'numeric' | 'text'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  length: 4,
+  defaultValue: '',
+  autoFocus: false,
+  inputMode: 'numeric',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  change: [value: string]
+}>()
+
+const internalValue = ref(props.defaultValue.slice(0, props.length))
+const value = computed(() => (props.value ?? internalValue.value).slice(0, props.length).padEnd(props.length, ''))
+
+watch(() => props.value, (v) => { if (v !== undefined) internalValue.value = v.slice(0, props.length) })
+
+const classes = computed(() =>
+  ['uds-otp-input', props.disabled && 'uds-otp-input--disabled'].filter(Boolean).join(' ')
+)
+
+function setValue(next: string) {
+  const s = next.slice(0, props.length)
+  if (props.value === undefined) internalValue.value = s
+  emit('change', s)
+}
+
+function handleChange(index: number, digit: string) {
+  const char = props.inputMode === 'numeric' ? digit.replace(/\D/g, '').slice(-1) : digit.slice(-1)
+  const arr = value.value.split('')
+  arr[index] = char
+  setValue(arr.join(''))
+}
+
+function handleKeydown(e: KeyboardEvent, index: number) {
+  if (e.key === 'Backspace' && value.value[index] === '' && index > 0) {
+    const inputs = document.querySelectorAll<HTMLInputElement>('.uds-otp-input__digit')
+    inputs[index - 1]?.focus()
+  }
+}
+</script>
+
+<template>
+  <div :class="classes" role="group" aria-label="One-time code">
+    <input
+      v-for="i in length"
+      :key="i"
+      type="text"
+      :inputmode="inputMode"
+      maxlength="1"
+      autocomplete="one-time-code"
+      :class="['uds-otp-input__digit']"
+      :value="value[i - 1] ?? ''"
+      :aria-label="`Digit ${i}`"
+      :disabled="disabled"
+      :autofocus="autoFocus && i === 1"
+      @input="(e: Event) => handleChange(i - 1, (e.target as HTMLInputElement).value)"
+      @keydown="(e: KeyboardEvent) => handleKeydown(e, i - 1)"
+    />
+  </div>
+</template>

package/src/components/UdsPopover.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  open?: boolean
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto'
+  size?: 'sm' | 'md'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'bottom',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'open-change': [open: boolean]
+}>()
+
+const internalOpen = ref(false)
+const open = computed(() => props.open ?? internalOpen.value)
+
+const contentRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const contentStyle = ref<Record<string, string>>({ position: 'fixed', left: '0', top: '0', zIndex: '9999' })
+
+watch(open, (isOpen) => {
+  if (isOpen && triggerRef.value && contentRef.value) {
+    requestAnimationFrame(() => {
+      if (!triggerRef.value || !contentRef.value) return
+      const tr = triggerRef.value.getBoundingClientRect()
+      const cr = contentRef.value.getBoundingClientRect()
+      let top = tr.bottom + 8
+      let left = tr.left + (tr.width - cr.width) / 2
+      if (props.placement === 'top') {
+        top = tr.top - cr.height - 8
+      }
+      left = Math.max(8, Math.min(window.innerWidth - cr.width - 8, left))
+      top = Math.max(8, Math.min(window.innerHeight - cr.height - 8, top))
+      contentStyle.value = { position: 'fixed', left: `${left}px`, top: `${top}px`, zIndex: '9999' }
+    })
+  }
+})
+
+const classes = computed(() =>
+  ['uds-popover', `uds-popover--${props.size}`, `uds-popover--${props.placement}`, props.class].filter(Boolean).join(' ')
+)
+
+function setOpen(v: boolean) {
+  if (props.open === undefined) internalOpen.value = v
+  emit('open-change', v)
+}
+
+function handleEscape(e: KeyboardEvent) {
+  if (e.key === 'Escape') setOpen(false)
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) document.addEventListener('keydown', handleEscape)
+  else document.removeEventListener('keydown', handleEscape)
+  return () => document.removeEventListener('keydown', handleEscape)
+})
+</script>
+
+<template>
+  <div class="uds-popover__wrapper">
+    <div ref="triggerRef" @click="setOpen(!open)">
+      <slot name="trigger" :open="open" />
+    </div>
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="contentRef"
+        :class="classes"
+        role="dialog"
+        aria-modal="false"
+        :style="contentStyle"
+      >
+        <div class="uds-popover__content">
+          <slot />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/UdsRating.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: number
+  max?: number
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  max: 5,
+  size: 'md',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [v: number] }>()
+
+const classes = computed(() => ['uds-rating', `uds-rating--${props.size}`].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <div :class="classes" role="group" :aria-label="`Rating ${modelValue} of ${max}`">
+    <button
+      v-for="i in max"
+      :key="i"
+      type="button"
+      :class="['uds-rating__star', modelValue >= i && 'uds-rating__star--filled']"
+      :aria-label="`${i} star${i > 1 ? 's' : ''}`"
+      :disabled="disabled"
+      @click="emit('update:modelValue', i)"
+    >
+      <span aria-hidden="true">{{ modelValue >= i ? '★' : '☆' }}</span>
+    </button>
+  </div>
+</template>

package/src/components/UdsSegmentedControl.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export interface SegmentedControlOption {
+  value: string
+  label: string
+  icon?: unknown
+}
+
+interface Props {
+  options: SegmentedControlOption[]
+  value?: string
+  defaultValue?: string
+  size?: 'sm' | 'md' | 'lg'
+  iconOnly?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  iconOnly: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  change: [value: string]
+}>()
+
+const internalValue = ref(props.defaultValue ?? props.options[0]?.value ?? '')
+const value = computed(() => props.value ?? internalValue.value)
+
+const classes = computed(() =>
+  [
+    'uds-segmented-control',
+    `uds-segmented-control--${props.size}`,
+    props.iconOnly && 'uds-segmented-control--icon-only',
+    props.disabled && 'uds-segmented-control--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function select(optionValue: string) {
+  if (props.disabled) return
+  if (props.value === undefined) internalValue.value = optionValue
+  emit('change', optionValue)
+}
+
+function handleKeydown(e: KeyboardEvent, currentIndex: number) {
+  if (props.disabled) return
+  let nextIndex = currentIndex
+  if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    nextIndex = Math.max(0, currentIndex - 1)
+  } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    e.preventDefault()
+    nextIndex = Math.min(props.options.length - 1, currentIndex + 1)
+  } else if (e.key === 'Home') {
+    e.preventDefault()
+    nextIndex = 0
+  } else if (e.key === 'End') {
+    e.preventDefault()
+    nextIndex = props.options.length - 1
+  } else return
+  const nextValue = props.options[nextIndex]?.value
+  if (nextValue != null) select(nextValue)
+}
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="radiogroup"
+    aria-label="Options"
+    :aria-disabled="disabled"
+  >
+    <button
+      v-for="(option, index) in options"
+      :key="option.value"
+      type="button"
+      role="radio"
+      :aria-checked="value === option.value"
+      :disabled="disabled"
+      :class="['uds-segmented-control__option', value === option.value && 'uds-segmented-control__option--selected'].filter(Boolean).join(' ')"
+      @click="select(option.value)"
+      @keydown="(e: KeyboardEvent) => handleKeydown(e, index)"
+    >
+      <span v-if="option.icon" class="uds-segmented-control__icon" aria-hidden="true"><slot name="icon" :option="option" /></span>
+      <span v-if="!iconOnly" class="uds-segmented-control__label">{{ option.label }}</span>
+    </button>
+  </div>
+</template>

package/src/components/UdsSlider.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  size: 'md',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [v: number] }>()
+
+const value = computed(() => props.modelValue ?? props.min)
+const classes = computed(() => ['uds-slider', `uds-slider--${props.size}`].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <div :class="classes">
+    <input
+      type="range"
+      :value="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      role="slider"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-valuenow="value"
+      class="uds-slider__input"
+      @input="emit('update:modelValue', Number(($event.target as HTMLInputElement).value))"
+    >
+  </div>
+</template>

package/src/components/UdsStack.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  direction?: 'row' | 'column'
+  gap?: 'sm' | 'md' | 'lg'
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  wrap?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'column',
+  gap: 'md',
+  align: 'stretch',
+  wrap: false,
+})
+
+const classes = computed(() =>
+  [
+    'uds-stack',
+    `uds-stack--${props.direction}`,
+    `uds-stack--gap-${props.gap}`,
+    props.align !== 'stretch' && `uds-stack--align-${props.align}`,
+    props.wrap && 'uds-stack--wrap',
+    props.class,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/src/components/UdsStepper.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+export interface StepperStep {
+  id: string
+  label: string
+  optional?: boolean
+}
+
+interface Props {
+  steps: StepperStep[]
+  activeStep?: number
+  defaultActiveStep?: number
+  orientation?: 'horizontal' | 'vertical'
+  linear?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultActiveStep: 0,
+  orientation: 'horizontal',
+  linear: true,
+})
+
+const emit = defineEmits<{
+  change: [index: number]
+  stepClick: [index: number]
+}>()
+
+const internalStep = ref(props.defaultActiveStep)
+const activeStep = computed(() => props.activeStep ?? internalStep.value)
+
+watch(
+  () => props.activeStep,
+  (v) => { if (v !== undefined) internalStep.value = v },
+)
+
+const classes = computed(() =>
+  ['uds-stepper', `uds-stepper--${props.orientation}`].filter(Boolean).join(' ')
+)
+
+function handleStepClick(index: number) {
+  if (props.linear && index > activeStep.value) return
+  if (props.activeStep === undefined) internalStep.value = index
+  emit('change', index)
+  emit('stepClick', index)
+}
+</script>
+
+<template>
+  <nav :class="classes" aria-label="Progress">
+    <template v-for="(step, index) in steps" :key="step.id">
+      <div
+        :class="[
+          'uds-stepper__step',
+          index < activeStep && 'uds-stepper__step--completed',
+          index === activeStep && 'uds-stepper__step--active',
+          index > activeStep && 'uds-stepper__step--pending',
+        ].filter(Boolean).join(' ')"
+        :aria-current="index === activeStep ? 'step' : undefined"
+        :aria-disabled="index > activeStep && linear ? 'true' : undefined"
+        role="button"
+        :tabindex="!linear || index <= activeStep ? 0 : -1"
+        @click="(!linear || index <= activeStep) && handleStepClick(index)"
+        @keydown.enter.prevent="(!linear || index <= activeStep) && handleStepClick(index)"
+        @keydown.space.prevent="(!linear || index <= activeStep) && handleStepClick(index)"
+      >
+        <span class="uds-stepper__step-indicator">
+          <template v-if="index < activeStep">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M20 6L9 17l-5-5" />
+            </svg>
+          </template>
+          <template v-else>{{ index + 1 }}</template>
+        </span>
+        <span class="uds-stepper__step-label">{{ step.label }}</span>
+        <span v-if="step.optional" class="uds-stepper__step-optional">(optional)</span>
+      </div>
+      <span
+        v-if="index < steps.length - 1"
+        :class="['uds-stepper__connector', index < activeStep && 'uds-stepper__connector--completed'].filter(Boolean).join(' ')"
+        aria-hidden="true"
+      />
+    </template>
+  </nav>
+</template>

package/src/components/UdsTimePicker.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: string
+  size?: 'md' | 'lg'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  size: 'md',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
+
+const classes = computed(() => ['uds-time-picker', `uds-time-picker--${props.size}`].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <input
+    type="time"
+    :value="modelValue"
+    :class="classes"
+    :disabled="disabled"
+    aria-label="Time"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  >
+</template>

package/src/components/UdsToolbar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  ariaLabel: string
+  orientation?: 'horizontal' | 'vertical'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: 'horizontal',
+})
+
+const classes = computed(() =>
+  [
+    'uds-toolbar',
+    props.orientation === 'vertical' && 'uds-toolbar--vertical',
+    props.class,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="toolbar"
+    :aria-label="ariaLabel"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/UdsTreeView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+export interface TreeNode {
+  id: string
+  label: string
+  children?: TreeNode[]
+}
+
+interface Props {
+  nodes: TreeNode[]
+  selectedIds?: string | string[]
+  selectionMode?: 'single' | 'multi' | 'none'
+  defaultExpandedIds?: string[]
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectionMode: 'single',
+  ariaLabel: 'Tree',
+})
+
+const emit = defineEmits<{
+  select: [ids: string[]]
+  expand: [id: string, expanded: boolean]
+}>()
+
+const expanded = ref<Set<string>>(new Set(props.defaultExpandedIds ?? []))
+
+const selectedArray = computed(() =>
+  Array.isArray(props.selectedIds) ? props.selectedIds : props.selectedIds != null ? [props.selectedIds] : []
+)
+const selectedSet = computed(() => new Set(selectedArray.value))
+
+function toggle(id: string, isExp: boolean) {
+  const next = new Set(expanded.value)
+  if (isExp) next.add(id)
+  else next.delete(id)
+  expanded.value = next
+  emit('expand', id, isExp)
+}
+
+function handleSelect(ids: string[]) {
+  emit('select', ids)
+}
+</script>
+
+<template>
+  <div class="uds-tree" role="tree" :aria-label="ariaLabel" :aria-multiselectable="selectionMode === 'multi'">
+    <template v-for="node in nodes" :key="node.id">
+      <div
+        :class="[
+          'uds-tree__item',
+          node.children?.length && 'uds-tree__item--branch',
+          selectedSet.has(node.id) && 'uds-tree__item--selected',
+        ].filter(Boolean).join(' ')"
+        role="treeitem"
+        :aria-expanded="node.children?.length ? expanded.has(node.id) : undefined"
+        aria-level="1"
+        :aria-selected="selectionMode !== 'none' ? selectedSet.has(node.id) : undefined"
+        tabindex="0"
+        @click="node.children?.length && toggle(node.id, !expanded.has(node.id)); selectionMode !== 'none' && handleSelect(selectionMode === 'single' ? [node.id] : selectedSet.has(node.id) ? [...selectedArray].filter((x) => x !== node.id) : [...selectedArray, node.id])"
+      >
+        <span class="uds-tree__item-label">{{ node.label }}</span>
+        <div v-if="node.children?.length && expanded.has(node.id)" role="group" class="uds-tree__group">
+          <div
+            v-for="child in node.children"
+            :key="child.id"
+            :class="['uds-tree__item', selectedSet.has(child.id) && 'uds-tree__item--selected'].filter(Boolean).join(' ')"
+            role="treeitem"
+            aria-level="2"
+            :aria-selected="selectionMode !== 'none' ? selectedSet.has(child.id) : undefined"
+            tabindex="0"
+            @click="selectionMode !== 'none' && handleSelect(selectionMode === 'single' ? [child.id] : [])"
+          >
+            <span class="uds-tree__item-label">{{ child.label }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/UdsTypography.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Variant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'code'
+
+interface Props {
+  variant?: Variant
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'body',
+})
+
+const tag = computed(() => {
+  const map: Record<Variant, string> = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    body: 'p',
+    caption: 'span',
+    code: 'code',
+  }
+  return map[props.variant]
+})
+
+const classes = computed(() =>
+  ['uds-typography', `uds-typography--${props.variant}`, props.class].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <component :is="tag" :class="classes">
+    <slot />
+  </component>
+</template>

package/src/index.ts

@@ -15,6 +15,13 @@ export { default as UdsRadio } from './components/UdsRadio.vue'
 export { default as UdsToggle } from './components/UdsToggle.vue'
 export { default as UdsAlert } from './components/UdsAlert.vue'
 export { default as UdsBadge } from './components/UdsBadge.vue'
+export { default as UdsBox } from './components/UdsBox.vue'
+export { default as UdsContainer } from './components/UdsContainer.vue'
+export { default as UdsDivider } from './components/UdsDivider.vue'
+export { default as UdsGrid } from './components/UdsGrid.vue'
+export { default as UdsLink } from './components/UdsLink.vue'
+export { default as UdsStack } from './components/UdsStack.vue'
+export { default as UdsTypography } from './components/UdsTypography.vue'
 export { default as UdsTabs } from './components/UdsTabs.vue'
 export { default as UdsAccordion } from './components/UdsAccordion.vue'
 export { default as UdsBreadcrumb } from './components/UdsBreadcrumb.vue'
@@ -30,3 +37,17 @@ export { default as UdsCommandPalette } from './components/UdsCommandPalette.vue
 export { default as UdsProgress } from './components/UdsProgress.vue'
 export { default as UdsSideNav } from './components/UdsSideNav.vue'
 export { default as UdsFileUpload } from './components/UdsFileUpload.vue'
+export { default as UdsToolbar } from './components/UdsToolbar.vue'
+export { default as UdsStepper } from './components/UdsStepper.vue'
+export { default as UdsSegmentedControl } from './components/UdsSegmentedControl.vue'
+export { default as UdsOTPInput } from './components/UdsOTPInput.vue'
+export { default as UdsChipInput } from './components/UdsChipInput.vue'
+export { default as UdsColorPicker } from './components/UdsColorPicker.vue'
+export { default as UdsForm } from './components/UdsForm.vue'
+export { default as UdsNumberInput } from './components/UdsNumberInput.vue'
+export { default as UdsPopover } from './components/UdsPopover.vue'
+export { default as UdsRating } from './components/UdsRating.vue'
+export { default as UdsSlider } from './components/UdsSlider.vue'
+export { default as UdsTimePicker } from './components/UdsTimePicker.vue'
+export { default as UdsCarousel } from './components/UdsCarousel.vue'
+export { default as UdsTreeView } from './components/UdsTreeView.vue'