@hina-ui/vue 1.2.0 → 1.3.1

package/src/components/highlight/composables/useHighlightMotion.ts

@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import type { MotionProps } from 'motion-v'
+import { TRANSITION, prefersReducedMotion } from '../../../motion'
+
+export function useHighlightMotion(axis: () => 'x' | 'y' | 'both') {
+  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+  const transformTemplate = computed<MotionProps['transformTemplate']>(() => {
+    const direction = axis()
+    if (direction === 'both') return undefined
+
+    return (_, generated) => {
+      if (!generated || generated === 'none' || typeof DOMMatrix === 'undefined') return generated
+
+      const matrix = new DOMMatrix(generated)
+      if (direction === 'x') matrix.m42 = 0
+      else matrix.m41 = 0
+      return matrix.toString()
+    }
+  })
+
+  return { transition, transformTemplate }
+}

package/src/components/image/Image.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-  import { computed, onBeforeUnmount, shallowRef, useId, watch } from 'vue'
+  import { computed, onBeforeUnmount, shallowRef, useId, watch, type StyleValue } from 'vue'
   import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useRequiredLabel } from '../../lib/a11y'
   import Skeleton from '../skeleton/Skeleton.vue'
   import Lightbox from '../lightbox/Lightbox.vue'
   import type { LightboxItem } from '../lightbox/types'
-  import { image, type ImageVariants } from './image.variants'
+  import { image, imageRoot, type ImageVariants } from './image.variants'
   import { useImage } from './composables/useImage'
   import { useImageGroup } from './context'
   import { useImageResolver } from './resolver'
@@ -27,7 +27,9 @@
       preview?: boolean | string
       draggable?: boolean
       class?: string
+      style?: StyleValue
       imageClass?: string
+      imageStyle?: StyleValue
     }>(),
     {
       alt: '',
@@ -93,20 +95,15 @@
     ref="rootEl"
     :as="props.preview ? 'button' : 'span'"
     :type="props.preview ? 'button' : undefined"
-    :class="
-      cn(
-        'relative block overflow-hidden',
-        props.preview && 'hn-focus-ring cursor-zoom-in',
-        props.class,
-      )
-    "
-    :style="props.ratio ? { aspectRatio: String(props.ratio) } : undefined"
+    :class="cn(imageRoot({ preview: !!props.preview }), props.class)"
+    :style="[props.ratio ? { aspectRatio: String(props.ratio) } : undefined, props.style]"
     @click="openPreview"
   >
     <img
       v-if="showImage"
       ref="imageEl"
       v-bind="$attrs"
+      :style="props.imageStyle"
       :src="src"
       :alt="props.alt"
       :decoding="props.eager ? 'sync' : 'async'"
@@ -114,8 +111,8 @@
       :draggable="props.draggable"
       :class="
         cn(
-          image({ fit: props.fit }),
-          props.lazy ? !revealed && 'opacity-0' : 'relative z-10',
+          image({ fit: props.fit, lazy: props.lazy }),
+          props.lazy && !revealed && 'opacity-0',
           props.imageClass,
         )
       "

package/src/components/image/composables/useImage.ts

@@ -75,7 +75,7 @@ export function useImage(
     const style = getComputedStyle(el)
     try {
       return el.animate(frames, {
-        duration: Number.parseFloat(style.getPropertyValue('--hn-duration-base')) || 0,
+        duration: Number.parseFloat(style.getPropertyValue('--hn-duration-fast')) || 0,
         easing: style.getPropertyValue('--hn-ease-enter').trim() || 'linear',
         fill: 'forwards',
       })
@@ -89,16 +89,19 @@ export function useImage(
   }
 
   async function reveal() {
-    revealed.value = true
-
     if (!props.lazy) {
+      revealed.value = true
       skeletonMounted.value = false
       return
     }
 
+    const img = imageEl.value
+    const at = src.value
     await nextTick()
     await afterPaint()
+    if (imageEl.value !== img || src.value !== at) return
 
+    revealed.value = true
     const layer = skeletonEl.value
     const anim = layer && play(layer, [{ opacity: 1 }, { opacity: 0 }])
     if (!anim) {

package/src/components/image/image.variants.ts

@@ -1,8 +1,20 @@
 import { tv, type VariantProps } from '../../lib/tv'
 
+export const imageRoot = tv({
+  base: 'relative block w-full overflow-hidden',
+  variants: {
+    preview: {
+      true: 'hn-focus-ring cursor-zoom-in',
+    },
+  },
+})
+
 export const image = tv({
-  base: 'block size-full',
+  base: 'relative z-10 block size-full',
   variants: {
+    lazy: {
+      true: 'transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none',
+    },
     fit: {
       cover: 'object-cover',
       contain: 'object-contain',

package/src/components/lightbox/LightboxThumbs.vue

@@ -65,6 +65,7 @@
         <Highlight
           v-if="at === props.index"
           :id="highlightId"
+          axis="x"
           class="ring-accent absolute inset-0 rounded-md ring-2 ring-inset"
         />
       </button>

package/src/components/lightbox/composables/useLightboxMotion.ts

@@ -84,7 +84,9 @@ export function useLightboxMotion(stageHeight: () => number, restScale: () => nu
   function leave(to: Pose | null): Promise<void> {
     stop()
     const t = to ? timing(RETURN_SPRING) : transition('exit')
-    const travel = to ? poseTo(to, t) : [animate(scale, FADE_POSE.scale, t), animate(opacity, 0, t)]
+    const travel = to
+      ? poseTo(to, t)
+      : [animate(scale, Math.min(scale.get(), FADE_POSE.scale), t), animate(opacity, 0, t)]
     return settle([...travel, animate(presence, 0, t)])
   }
 

package/src/components/lightbox/composables/useLightboxPose.ts

@@ -1,5 +1,6 @@
 import type { useLightboxFrames } from './useLightboxFrames'
-import { openPose, radiusOf, type Pose, type Rect } from '../utils/pose'
+import { openPose, type Pose, type Rect } from '../utils/pose'
+import { clipOf } from '../utils/clip'
 import type { LightboxItem } from '../types'
 
 export function useLightboxPose(
@@ -28,7 +29,9 @@ export function useLightboxPose(
     const box = sourceBox()
     const natural = frames.naturalOf(item)
     if (!box || !natural) return null
-    return openPose(frames.frameOf(item), box, natural, item?.fit, radiusOf(item?.source?.()))
+    const clip = clipOf(item?.source?.(), box)
+    if (clip.rect.width <= 0 || clip.rect.height <= 0) return null
+    return openPose(frames.frameOf(item), box, natural, item?.fit, clip.corners, clip.rect)
   }
 
   return { fromSource }

package/src/components/lightbox/utils/clip.ts

@@ -0,0 +1,117 @@
+import type { Rect } from './pose'
+
+export interface Corner {
+  x: number
+  y: number
+}
+
+export type Corners = [Corner, Corner, Corner, Corner]
+
+function emptyCorners(): Corners {
+  return [
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+  ]
+}
+
+function length(value: string, size: number): number {
+  const number = Number.parseFloat(value) || 0
+  return value.endsWith('%') ? (number * size) / 100 : number
+}
+
+function cornersOf(style: CSSStyleDeclaration, width: number, height: number): Corners {
+  const corners = [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomRightRadius,
+    style.borderBottomLeftRadius,
+  ].map(value => {
+    const [x = '0', y = x] = value.split(/\s+/)
+    return { x: length(x, width), y: length(y, height) }
+  }) as Corners
+  const [tl, tr, br, bl] = corners
+  const factor = Math.min(
+    1,
+    width / (tl.x + tr.x || 1),
+    width / (bl.x + br.x || 1),
+    height / (tl.y + bl.y || 1),
+    height / (tr.y + br.y || 1),
+  )
+  return corners.map(corner => ({ x: corner.x * factor, y: corner.y * factor })) as Corners
+}
+
+function paddingBox(node: Element, style: CSSStyleDeclaration) {
+  const box = node.getBoundingClientRect()
+  const width = node instanceof HTMLElement ? node.offsetWidth : box.width
+  const height = node instanceof HTMLElement ? node.offsetHeight : box.height
+  const sx = width ? box.width / width : 1
+  const sy = height ? box.height / height : 1
+  const left = Number.parseFloat(style.borderLeftWidth) || 0
+  const right = Number.parseFloat(style.borderRightWidth) || 0
+  const top = Number.parseFloat(style.borderTopWidth) || 0
+  const bottom = Number.parseFloat(style.borderBottomWidth) || 0
+  const corners = cornersOf(style, width, height)
+  const borders = [
+    [left, top],
+    [right, top],
+    [right, bottom],
+    [left, bottom],
+  ]
+  return {
+    rect: {
+      x: box.x + left * sx,
+      y: box.y + top * sy,
+      width: Math.max(0, box.width - (left + right) * sx),
+      height: Math.max(0, box.height - (top + bottom) * sy),
+    },
+    corners: corners.map((corner, index) => ({
+      x: Math.max(0, corner.x - borders[index]![0]!) * sx,
+      y: Math.max(0, corner.y - borders[index]![1]!) * sy,
+    })) as Corners,
+  }
+}
+
+function points(rect: Rect) {
+  return [
+    [rect.x, rect.y],
+    [rect.x + rect.width, rect.y],
+    [rect.x + rect.width, rect.y + rect.height],
+    [rect.x, rect.y + rect.height],
+  ]
+}
+
+export function clipOf(el: Element | null | undefined, box: Rect) {
+  let rect = { x: box.x, y: box.y, width: box.width, height: box.height }
+  const clips: ReturnType<typeof paddingBox>[] = []
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node)
+    const clipX = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowX)
+    const clipY = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowY)
+    if (!clipX && !clipY) continue
+    const clip = paddingBox(node, style)
+    const x = clipX ? Math.max(rect.x, clip.rect.x) : rect.x
+    const y = clipY ? Math.max(rect.y, clip.rect.y) : rect.y
+    const right = clipX
+      ? Math.min(rect.x + rect.width, clip.rect.x + clip.rect.width)
+      : rect.x + rect.width
+    const bottom = clipY
+      ? Math.min(rect.y + rect.height, clip.rect.y + clip.rect.height)
+      : rect.y + rect.height
+    rect = { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) }
+    if (clipX && clipY) clips.push(clip)
+  }
+  const corners = emptyCorners()
+  const visible = points(rect)
+  for (const clip of clips) {
+    const edges = points(clip.rect)
+    for (let index = 0; index < 4; index += 1) {
+      if (visible[index]!.some((value, axis) => Math.abs(value - edges[index]![axis]!) > 0.5))
+        continue
+      corners[index]!.x = Math.max(corners[index]!.x, clip.corners[index]!.x)
+      corners[index]!.y = Math.max(corners[index]!.y, clip.corners[index]!.y)
+    }
+  }
+  return { rect, corners }
+}

package/src/components/lightbox/utils/pose.ts

@@ -1,4 +1,5 @@
 import type { ImageVariants } from '../../image/image.variants'
+import type { Corners } from './clip'
 import { fitSize, rotatedSize, type Size } from './zoom'
 
 export interface Rect {
@@ -21,7 +22,7 @@ export const REST_POSE: Pose = {
   y: 0,
   scale: 1,
   rotate: 0,
-  clipPath: 'inset(0px 0px 0px 0px round 0px)',
+  clipPath: 'inset(0px 0px 0px 0px round 0px 0px 0px 0px / 0px 0px 0px 0px)',
 }
 export const TRAVEL_SPRING = { type: 'spring', visualDuration: 0.3, bounce: 0 } as const
 export const RETURN_SPRING = { ...TRAVEL_SPRING, visualDuration: 0.22 } as const
@@ -79,23 +80,40 @@ export function openPose(
   box: Rect,
   natural: Size,
   fit?: ImageVariants['fit'],
-  radius = 0,
+  radius: number | Corners = 0,
+  clipBox = box,
 ): Pose {
   const rendered = renderedRect(box, natural, fit)
   if (frame.width <= 0 || frame.height <= 0 || rendered.width <= 0) return REST_POSE
   const scale = rendered.width / frame.width
-  const visible = intersect(box, rendered)
+  const visible = intersect(intersect(box, clipBox), rendered)
   const top = (visible.y - rendered.y) / scale
   const left = (visible.x - rendered.x) / scale
   const right = (rendered.x + rendered.width - visible.x - visible.width) / scale
   const bottom = (rendered.y + rendered.height - visible.y - visible.height) / scale
-  const corner = Math.max(0, radius) / scale
+  const corners =
+    typeof radius === 'number'
+      ? Array.from({ length: 4 }, () => ({ x: radius, y: radius }))
+      : radius
+  const leftEdge = Math.abs(visible.x - clipBox.x) <= 0.5
+  const topEdge = Math.abs(visible.y - clipBox.y) <= 0.5
+  const rightEdge = Math.abs(visible.x + visible.width - clipBox.x - clipBox.width) <= 0.5
+  const bottomEdge = Math.abs(visible.y + visible.height - clipBox.y - clipBox.height) <= 0.5
+  const touches = [
+    leftEdge && topEdge,
+    rightEdge && topEdge,
+    rightEdge && bottomEdge,
+    leftEdge && bottomEdge,
+  ]
+  const clipped = corners.map((corner, index) => (touches[index] ? corner : { x: 0, y: 0 }))
+  const horizontal = clipped.map(corner => px(Math.max(0, corner.x) / scale)).join(' ')
+  const vertical = clipped.map(corner => px(Math.max(0, corner.y) / scale)).join(' ')
   return {
     x: rendered.x + rendered.width / 2 - (frame.x + frame.width / 2),
     y: rendered.y + rendered.height / 2 - (frame.y + frame.height / 2),
     scale,
     rotate: 0,
-    clipPath: `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${px(corner)})`,
+    clipPath: `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${horizontal} / ${vertical})`,
   }
 }
 
@@ -106,14 +124,6 @@ export function baseScale(frame: Size, stage: Size, rotation: number): number {
   return Math.min(stage.width / visual.width, stage.height / visual.height)
 }
 
-export function radiusOf(el: Element | null | undefined): number {
-  for (let node = el, depth = 0; node && depth < 2; node = node.parentElement, depth += 1) {
-    const value = Number.parseFloat(getComputedStyle(node).borderTopLeftRadius)
-    if (value > 0) return value
-  }
-  return 0
-}
-
 export function dismissProgress(offsetY: number, stageHeight: number): number {
   if (stageHeight <= 0) return 0
   return Math.min(1, Math.max(0, offsetY) / (stageHeight * DISMISS_TRAVEL))

package/src/components/popover/Popover.vue

@@ -1,23 +1,35 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
+  import { PopoverRoot, PopoverTrigger, PopoverPortal, type PopoverContentEmits } from 'reka-ui'
+  import PopoverContent from './PopoverContent.vue'
+  import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
   import { cn } from '../../lib/cn'
 
-  defineOptions({ name: 'HnPopover' })
+  defineOptions({ name: 'HnPopover', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
+      anchor?: HTMLElement | null
+      modal?: boolean
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
       sideOffset?: number
       padded?: boolean
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8, padded: true },
+    { side: 'bottom', align: 'center', sideOffset: 8, padded: true, modal: true },
   )
 
   const open = defineModel<boolean>('open')
+  const emit = defineEmits<PopoverContentEmits>()
+  defineSlots<{ default?(): unknown; content?(): unknown }>()
+  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit, event =>
+    emit('openAutoFocus', event),
+  )
+
+  const { content, present } = useOverlayPortal(visible)
 
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
@@ -29,18 +41,26 @@
 </script>
 
 <template>
-  <PopoverRoot v-model:open="open" modal>
-    <PopoverTrigger as-child :style="{ transformOrigin: pressOrigin }">
+  <PopoverRoot v-model:open="visible" :modal="props.modal">
+    <PopoverTrigger
+      v-if="$slots.default"
+      :ref="trigger"
+      as-child
+      :style="{ transformOrigin: pressOrigin }"
+    >
       <slot />
     </PopoverTrigger>
-    <PopoverPortal>
+    <PopoverPortal v-if="present">
       <PopoverContent
+        v-bind="{ ...$attrs, ...events }"
+        :reference="reference"
         as-child
         :side="props.side"
         :align="props.align"
         :side-offset="props.sideOffset"
       >
         <Card
+          ref="content"
           :padded="props.padded"
           :class="cn('hn-anim-pop z-(--hn-z-overlay) max-w-sm shadow-md outline-none', props.class)"
         >

package/src/components/popover/PopoverContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import {
+    PopoverContent,
+    useForwardPropsEmits,
+    type PopoverContentProps,
+    type PopoverContentEmits,
+  } from 'reka-ui'
+  import { usePopoverCloseFocus } from './composables/usePopoverCloseFocus'
+
+  defineOptions({ name: 'HnPopoverContent' })
+
+  const props = defineProps<PopoverContentProps>()
+  const emit = defineEmits<PopoverContentEmits>()
+  const forwarded = useForwardPropsEmits(props, emit)
+  const closeAutoFocus = usePopoverCloseFocus(emit)
+</script>
+
+<template>
+  <PopoverContent
+    v-bind="{ ...forwarded, onCloseAutoFocus: closeAutoFocus }"
+    :reference="props.reference"
+  >
+    <slot />
+  </PopoverContent>
+</template>

package/src/components/popover/composables/usePopoverCloseFocus.ts

@@ -0,0 +1,17 @@
+import { nextTick } from 'vue'
+import { injectPopoverRootContext } from 'reka-ui'
+
+export function usePopoverCloseFocus(emit: (event: 'closeAutoFocus', value: Event) => void) {
+  const root = injectPopoverRootContext()
+
+  return (event: Event) => {
+    emit('closeAutoFocus', event)
+    if (!event.defaultPrevented || !root.triggerElement.value) return
+
+    const trigger = root.triggerElement.value
+    root.triggerElement.value = undefined
+    nextTick(() => {
+      root.triggerElement.value ??= trigger
+    })
+  }
+}

package/src/components/scroll-area/ScrollArea.vue

@@ -6,6 +6,7 @@
   import { useEdgeShadow } from './composables/useEdgeShadow'
   import { useWheelRedirect } from './composables/useWheelRedirect'
   import { useLayerLock } from './composables/useLayerLock'
+  import { useScrollFocus } from './composables/useScrollFocus'
 
   defineOptions({ name: 'HnScrollArea', inheritAttrs: false })
 
@@ -59,6 +60,10 @@
   }
 
   const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options)
+  const { hostFocus, viewportFocus } = useScrollFocus(host, viewport, () => ({
+    focusable: props.focusable,
+    label: props.label ?? t.value.scroll.regionLabel,
+  }))
   const { showXStart, showXEnd, showYStart, showYEnd, updateEdges } = useEdgeShadow(
     viewport,
     () => ({ direction: props.direction, shadow: props.shadow }),
@@ -83,14 +88,11 @@
   <div :class="cn('hn-scroll-area relative flex flex-col overflow-hidden', props.class)">
     <div
       ref="host"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...hostFocus }"
       data-overlayscrollbars-initialize
-      :tabindex="props.focusable ? 0 : undefined"
-      :role="props.focusable ? 'region' : undefined"
-      :aria-label="props.focusable ? (props.label ?? t.scroll.regionLabel) : undefined"
       class="w-full min-h-0 grow"
     >
-      <div ref="content" data-overlayscrollbars-contents>
+      <div ref="content" v-bind="viewportFocus" data-overlayscrollbars-contents>
         <slot />
       </div>
     </div>

package/src/components/scroll-area/composables/useLayerLock.ts

@@ -13,10 +13,6 @@ const useBodyPointerLock = createSharedComposable(() => {
   return locked
 })
 
-function block(event: Event) {
-  event.preventDefault()
-}
-
 export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
   const locked = useBodyPointerLock()
   let release: (() => void) | undefined
@@ -25,12 +21,15 @@ export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
     release?.()
     release = undefined
     const el = viewport.value
-    if (!el || !locked.value || getComputedStyle(el).pointerEvents !== 'none') return
-    el.addEventListener('wheel', block, { passive: false })
-    el.addEventListener('touchmove', block, { passive: false })
+    if (!el || !locked.value) return
+    const block = (event: Event) => {
+      if (getComputedStyle(el).pointerEvents === 'none') event.preventDefault()
+    }
+    el.addEventListener('wheel', block, { passive: false, capture: true })
+    el.addEventListener('touchmove', block, { passive: false, capture: true })
     release = () => {
-      el.removeEventListener('wheel', block)
-      el.removeEventListener('touchmove', block)
+      el.removeEventListener('wheel', block, true)
+      el.removeEventListener('touchmove', block, true)
     }
   }
 

package/src/components/scroll-area/composables/useScrollFocus.ts

@@ -0,0 +1,39 @@
+import { computed, nextTick, watch, type ShallowRef } from 'vue'
+
+export function useScrollFocus(
+  host: ShallowRef<HTMLElement | undefined>,
+  viewport: ShallowRef<HTMLElement | undefined>,
+  options: () => { focusable: boolean; label: string },
+) {
+  function attributes(enabled: boolean) {
+    const { focusable, label } = options()
+    return {
+      tabindex: enabled && focusable ? 0 : undefined,
+      role: enabled && focusable ? 'region' : undefined,
+      'aria-label': enabled && focusable ? label : undefined,
+    }
+  }
+
+  const hostFocus = computed(() => attributes(!viewport.value))
+  const viewportFocus = computed(() => attributes(!!viewport.value))
+
+  watch(
+    viewport,
+    async element => {
+      const target = host.value
+      if (!element || !target || !options().focusable) return
+      if (target.ownerDocument.activeElement !== target) return
+      await nextTick()
+      const active = target.ownerDocument.activeElement
+      if (
+        options().focusable &&
+        element.isConnected &&
+        (active === target || active === target.ownerDocument.body)
+      )
+        element.focus({ preventScroll: true })
+    },
+    { flush: 'sync' },
+  )
+
+  return { hostFocus, viewportFocus }
+}

package/src/components/scroll-area/composables/useWheelRedirect.ts

@@ -5,7 +5,7 @@ export function useWheelRedirect(
   enabled: () => boolean,
 ) {
   function onWheel(event: WheelEvent) {
-    if (!enabled()) return
+    if (event.defaultPrevented || !enabled()) return
     const el = viewport.value
     if (!el) return
     if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return

package/src/components/segmented-control/SegmentedControl.vue

@@ -71,7 +71,12 @@
       :aria-label="slots.option ? option.label : undefined"
       :class="segmentedItem({ size: props.size, block: props.block })"
     >
-      <Highlight v-if="option.value === current" :id="highlightId" :class="segmentedThumb()" />
+      <Highlight
+        v-if="option.value === current"
+        :id="highlightId"
+        :axis="props.orientation === 'vertical' ? 'y' : 'x'"
+        :class="segmentedThumb()"
+      />
       <Ripple />
       <slot name="option" :option="option">{{ option.label }}</slot>
     </ToggleGroupItem>

package/src/components/skeleton/LICENSE

@@ -0,0 +1,24 @@
+The skeleton shimmer styles and light/dark opacity values are adapted from PrimeVue / PrimeUIX
+(https://github.com/primefaces/primeuix), using Hina design tokens.
+
+MIT License
+
+Copyright (c) 2025 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/components/tabs/TabsTrigger.vue

@@ -26,7 +26,12 @@
     :disabled="props.disabled"
     :class="cn(tabsTrigger({ variant, size, orientation }), props.class)"
   >
-    <Highlight v-if="active" :id="highlightId" :class="tabsHighlight({ variant, orientation })" />
+    <Highlight
+      v-if="active"
+      :id="highlightId"
+      :axis="orientation === 'vertical' ? 'y' : 'x'"
+      :class="tabsHighlight({ variant, orientation })"
+    />
     <Ripple />
     <slot />
   </TabsTrigger>

package/src/index.ts

@@ -227,6 +227,8 @@ export { default as Spoiler } from './components/spoiler/Spoiler.vue'
 export { default as Skeleton } from './components/skeleton/Skeleton.vue'
 export { default as Image } from './components/image/Image.vue'
 export { default as ImageGroup } from './components/image/ImageGroup.vue'
+export { default as Lightbox } from './components/lightbox/Lightbox.vue'
+export type { LightboxItem } from './components/lightbox/types'
 export { provideImageResolver, useImageResolver } from './components/image/resolver'
 export type { ImageResolver } from './components/image/resolver'
 export type { ImageVariants } from './components/image/image.variants'