orio-ui 1.20.0 → 1.23.3

package/dist/runtime/components/LocaleSwitcher.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+  locales: { type: Array, required: false, default: () => [
+    { code: "en", flag: "\u{1F1EC}\u{1F1E7}", label: "English" },
+    { code: "uk", flag: "\u{1F1FA}\u{1F1E6}", label: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430" }
+  ] }
+});
+const { locale } = useI18n();
+const selected = computed({
+  get: () => props.locales.find((l) => l.code === locale.value) ?? props.locales[0],
+  set: (val) => {
+    locale.value = val.code;
+  }
+});
+</script>
+
+<template>
+  <orio-selector
+    v-model="selected"
+    :options="locales"
+    field="code"
+    option-name="label"
+  >
+    <template #trigger-label>
+      <span class="locale-trigger">
+        <span class="locale-flag">{{ selected.flag }}</span>
+        <span class="locale-label">{{ selected.label }}</span>
+      </span>
+    </template>
+    <template #option="{ option }">
+      <span class="locale-option">
+        <span class="locale-flag">{{ option.flag }}</span>
+        <span>{{ option.label }}</span>
+      </span>
+    </template>
+  </orio-selector>
+</template>
+
+<style scoped>
+.locale-option,.locale-trigger{align-items:center;display:flex;gap:.5rem}.locale-flag{font-size:1.25em;line-height:1}
+</style>

package/dist/runtime/components/LocaleSwitcher.vue.d.ts

@@ -0,0 +1,13 @@
+export interface LocaleOption {
+    code: string;
+    flag: string;
+    label: string;
+}
+interface Props {
+    locales?: LocaleOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Selector.vue

@@ -2,12 +2,14 @@
 import { computed, ref, toRef, toRefs } from "vue";
 import { useControlTokens } from "../composables/useControlSize";
 import { useListKeyboard } from "../composables/useListKeyboard";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const props = defineProps({
   options: { type: Array, required: true },
   multiple: { type: Boolean, required: false },
   field: { type: String, required: false, default: "id" },
   optionName: { type: String, required: false },
-  placeholder: { type: String, required: false, default: "Select an option" },
+  placeholder: { type: String, required: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
   group: { type: Boolean, required: false },
@@ -17,7 +19,10 @@ const props = defineProps({
   size: { type: String, required: false },
   fill: { type: Boolean, required: false }
 });
-const { field, optionName, placeholder } = toRefs(props);
+const { field, optionName } = toRefs(props);
+const resolvedPlaceholder = computed(
+  () => props.placeholder ?? t("selector.placeholder")
+);
 const modelValue = defineModel({ type: null, ...{
   required: true
 } });
@@ -60,7 +65,7 @@ function isOptionSelected(option) {
   }
 }
 function getOptionLabel(option) {
-  if (!option) return placeholder.value;
+  if (!option) return resolvedPlaceholder.value;
   if (typeof option === "string") return option;
   if (optionName.value) return String(option[label.value]);
   return JSON.stringify(option);
@@ -134,7 +139,11 @@ const {
                     {{ getOptionLabel(modelValue) }}
                   </template>
                   <template v-else-if="Array.isArray(modelValue)">
-                    <span> {{ modelValue.length }} selected </span>
+                    <span>
+                      {{
+                        t("selector.selected", { count: modelValue.length })
+                      }}
+                    </span>
                   </template>
                 </slot>
               </div>
@@ -175,7 +184,7 @@ const {
             </orio-list-item>
           </ul>
           <slot v-else name="no-options">
-            <orio-empty-state title="No options found" size="small" />
+            <orio-empty-state :title="t('selector.noOptions')" size="small" />
           </slot>
           <slot name="options-addon" />
         </div>

package/dist/runtime/components/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, nextTick, toRefs, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 const props = defineProps({
   text: { type: String, required: false, default: void 0 },
@@ -8,6 +8,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   offset: { type: Number, required: false, default: 8 }
 });
+const { disabled } = toRefs(props);
+watch(disabled, () => {
+  if (disabled.value) hideTooltip();
+});
 const isVisible = ref(false);
 const trigger = ref(null);
 const tooltip = ref(null);
@@ -42,7 +46,7 @@ function calculatePosition() {
   position.value = { top, left };
 }
 function showTooltip() {
-  if (props.disabled) return;
+  if (disabled.value) return;
   if (props.delay > 0) {
     showTimeout = setTimeout(() => {
       isVisible.value = true;
@@ -75,7 +79,9 @@ const tooltipStyle = computed(() => ({
   top: `${position.value.top}px`,
   left: `${position.value.left}px`
 }));
-const arrowClass = computed(() => `arrow-${props.placement}`);
+const arrowClass = computed(
+  () => `orio-tooltip-arrow orio-tooltip-arrow-${props.placement}`
+);
 </script>
 
 <template>
@@ -91,22 +97,26 @@ const arrowClass = computed(() => `arrow-${props.placement}`);
     <Teleport v-if="isVisible" to="body">
       <div
         ref="tooltip"
-        class="tooltip"
+        class="orio-tooltip"
         :style="tooltipStyle"
         role="tooltip"
         :aria-hidden="!isVisible"
       >
-        <div class="content">
+        <div class="orio-tooltip-content">
           <slot name="content">
             {{ text }}
           </slot>
         </div>
-        <div :class="['arrow', arrowClass]" />
+        <div :class="arrowClass" />
       </div>
     </Teleport>
   </div>
 </template>
 
 <style scoped>
-.trigger{align-items:center;display:inline-flex;justify-content:center}.tooltip{pointer-events:none;position:absolute;z-index:9999}.content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.arrow{border-style:solid;height:0;position:absolute;width:0}.arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;top:-4px}.arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px}
+.trigger{align-items:center;display:inline-flex;justify-content:center}
+</style>
+
+<style>
+.orio-tooltip{pointer-events:none;position:absolute;z-index:9999}.orio-tooltip-content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.orio-tooltip-arrow{border-style:solid;height:0;position:absolute;width:0}.orio-tooltip-arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px;left:50%;transform:translateX(-50%)}.orio-tooltip-arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;left:50%;top:-4px;transform:translateX(-50%)}.orio-tooltip-arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px;top:50%;transform:translateY(-50%)}.orio-tooltip-arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px;top:50%;transform:translateY(-50%)}
 </style>

package/dist/runtime/components/ZoomableContainer.d.vue.ts

@@ -0,0 +1,48 @@
+export interface ZoomableContainerProps {
+    minScale?: number;
+    maxScale?: number;
+    initialScale?: number;
+    zoomSpeed?: number;
+    wheelPanSpeed?: number;
+}
+declare function setScaleAt(target: number, px: number, py: number): void;
+declare function panBy(dx: number, dy: number): void;
+declare function centerWorld(): void;
+declare function resetView(): void;
+declare var __VLS_1: {
+    scale: number;
+    tx: number;
+    ty: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ZoomableContainerProps, {
+    scale: import("vue").Ref<number, number>;
+    tx: import("vue").Ref<number, number>;
+    ty: import("vue").Ref<number, number>;
+    setScaleAt: typeof setScaleAt;
+    panBy: typeof panBy;
+    resetView: typeof resetView;
+    centerWorld: typeof centerWorld;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:translate": (x: number, y: number) => any;
+}, string, import("vue").PublicProps, Readonly<ZoomableContainerProps> & Readonly<{
+    "onUpdate:scale"?: ((value: number) => any) | undefined;
+    "onUpdate:translate"?: ((x: number, y: number) => any) | undefined;
+}>, {
+    minScale: number;
+    maxScale: number;
+    initialScale: number;
+    zoomSpeed: number;
+    wheelPanSpeed: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ZoomableContainer.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted, useTemplateRef } from "vue";
+import { useResizeObserver, useEventListener } from "@vueuse/core";
+import { usePinchZoom } from "../composables/usePinchZoom";
+import { useInertia } from "../composables/useInertia";
+const props = defineProps({
+  minScale: { type: Number, required: false, default: 0.1 },
+  maxScale: { type: Number, required: false, default: 10 },
+  initialScale: { type: Number, required: false, default: 1 },
+  zoomSpeed: { type: Number, required: false, default: 15e-4 },
+  wheelPanSpeed: { type: Number, required: false, default: 1 }
+});
+const emit = defineEmits(["update:scale", "update:translate"]);
+const viewportEl = useTemplateRef("viewportEl");
+const worldEl = useTemplateRef("worldEl");
+const scale = ref(props.initialScale);
+const tx = ref(0);
+const ty = ref(0);
+const viewport = ref({ w: 0, h: 0 });
+const world = ref({ w: 0, h: 0 });
+const spaceHeld = ref(false);
+let centered = false;
+function clamp(v, a, b) {
+  const lo = Math.min(a, b);
+  const hi = Math.max(a, b);
+  return Math.max(lo, Math.min(hi, v));
+}
+function applyBounds() {
+  const vw = viewport.value.w;
+  const vh = viewport.value.h;
+  const ww = world.value.w * scale.value;
+  const wh = world.value.h * scale.value;
+  tx.value = clamp(tx.value, vw / 2 - ww, vw / 2);
+  ty.value = clamp(ty.value, vh / 2 - wh, vh / 2);
+}
+function emitState() {
+  emit("update:scale", scale.value);
+  emit("update:translate", tx.value, ty.value);
+}
+function setScaleAt(target, px, py) {
+  const next = clamp(target, props.minScale, props.maxScale);
+  const k = next / scale.value;
+  tx.value = px - (px - tx.value) * k;
+  ty.value = py - (py - ty.value) * k;
+  scale.value = next;
+  applyBounds();
+  emitState();
+}
+function panBy(dx, dy) {
+  tx.value += dx;
+  ty.value += dy;
+  applyBounds();
+  emitState();
+}
+function centerWorld() {
+  const { w: vw, h: vh } = viewport.value;
+  const { w: ww, h: wh } = world.value;
+  tx.value = (vw - ww * scale.value) / 2;
+  ty.value = (vh - wh * scale.value) / 2;
+  applyBounds();
+  emitState();
+}
+function resetView() {
+  scale.value = props.initialScale;
+  centerWorld();
+}
+const inertia = useInertia(panBy);
+let pinchBaseScale = 1;
+const pinch = usePinchZoom({
+  onPinchStart() {
+    dragId = null;
+    pinchBaseScale = scale.value;
+  },
+  onPinchMove(scaleFactor, midX, midY, dx, dy) {
+    const rect = viewportEl.value.getBoundingClientRect();
+    setScaleAt(pinchBaseScale * scaleFactor, midX - rect.left, midY - rect.top);
+    if (dx !== 0 || dy !== 0) panBy(dx, dy);
+  },
+  onSingleDown(e) {
+    e.preventDefault();
+    dragId = e.pointerId;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    inertia.resetTime();
+  },
+  onSingleUp(id, x, y) {
+    dragId = id;
+    lastX = x;
+    lastY = y;
+    inertia.resetTime();
+    inertia.stop();
+  }
+});
+function onWheel(e) {
+  e.preventDefault();
+  if (e.ctrlKey || e.metaKey) {
+    const rect = viewportEl.value.getBoundingClientRect();
+    const px = e.clientX - rect.left;
+    const py = e.clientY - rect.top;
+    const factor = Math.exp(-e.deltaY * props.zoomSpeed);
+    setScaleAt(scale.value * factor, px, py);
+    return;
+  }
+  let dx = -e.deltaX * props.wheelPanSpeed;
+  let dy = -e.deltaY * props.wheelPanSpeed;
+  if (e.shiftKey && dx === 0) {
+    dx = dy;
+    dy = 0;
+  }
+  panBy(dx, dy);
+}
+let dragId = null;
+let lastX = 0;
+let lastY = 0;
+function shouldPan(e) {
+  if (e.button === 1) return true;
+  if (spaceHeld.value) return true;
+  if (e.target === viewportEl.value) return true;
+  return false;
+}
+function onPointerDown(e) {
+  inertia.stop();
+  if (e.pointerType === "touch") {
+    pinch.onPointerDown(e);
+    return;
+  }
+  if (!shouldPan(e)) return;
+  e.preventDefault();
+  dragId = e.pointerId;
+  lastX = e.clientX;
+  lastY = e.clientY;
+  inertia.resetTime();
+  e.currentTarget.setPointerCapture(e.pointerId);
+}
+function onPointerMove(e) {
+  if (e.pointerType === "touch") {
+    if (pinch.onPointerMove(e)) return;
+  }
+  if (dragId !== e.pointerId) return;
+  const dx = e.clientX - lastX;
+  const dy = e.clientY - lastY;
+  lastX = e.clientX;
+  lastY = e.clientY;
+  inertia.trackMove(dx, dy);
+  panBy(dx, dy);
+}
+function onPointerUp(e) {
+  if (e.pointerType === "touch") {
+    if (pinch.onPointerUp(e)) return;
+  }
+  if (dragId !== e.pointerId) return;
+  dragId = null;
+  inertia.release();
+  try {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  } catch {
+  }
+}
+useEventListener("keydown", (e) => {
+  if (e.code === "Space") spaceHeld.value = true;
+});
+useEventListener("keyup", (e) => {
+  if (e.code === "Space") spaceHeld.value = false;
+});
+useResizeObserver(viewportEl, (entries) => {
+  const r = entries[0].contentRect;
+  viewport.value = { w: r.width, h: r.height };
+  if (!centered && world.value.w && world.value.h) {
+    centered = true;
+    centerWorld();
+  } else {
+    applyBounds();
+  }
+});
+useResizeObserver(worldEl, (entries) => {
+  const r = entries[0].contentRect;
+  world.value = { w: r.width, h: r.height };
+  if (!centered && viewport.value.w && viewport.value.h) {
+    centered = true;
+    centerWorld();
+  } else {
+    applyBounds();
+  }
+});
+onMounted(() => {
+  const vEl = viewportEl.value;
+  const wEl = worldEl.value;
+  if (!vEl || !wEl) return;
+  viewport.value = { w: vEl.clientWidth, h: vEl.clientHeight };
+  world.value = { w: wEl.offsetWidth, h: wEl.offsetHeight };
+  if (viewport.value.w && world.value.w) {
+    centered = true;
+    centerWorld();
+  }
+});
+onUnmounted(() => {
+  inertia.stop();
+});
+const transform = computed(
+  () => `translate(${tx.value}px, ${ty.value}px) scale(${scale.value})`
+);
+const cursor = computed(() => {
+  if (dragId !== null) return "grabbing";
+  if (spaceHeld.value) return "grab";
+  return "default";
+});
+defineExpose({
+  scale,
+  tx,
+  ty,
+  setScaleAt,
+  panBy,
+  resetView,
+  centerWorld
+});
+</script>
+
+<template>
+  <div
+    ref="viewportEl"
+    class="zoomable-viewport"
+    :style="{ cursor }"
+    @wheel="onWheel"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @contextmenu.prevent
+  >
+    <div ref="worldEl" class="zoomable-world" :style="{ transform }">
+      <slot :scale="scale" :tx="tx" :ty="ty" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.zoomable-viewport{height:100%;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.zoomable-world{left:0;position:absolute;top:0;transform-origin:0 0;will-change:transform}
+</style>

package/dist/runtime/components/ZoomableContainer.vue.d.ts

@@ -0,0 +1,48 @@
+export interface ZoomableContainerProps {
+    minScale?: number;
+    maxScale?: number;
+    initialScale?: number;
+    zoomSpeed?: number;
+    wheelPanSpeed?: number;
+}
+declare function setScaleAt(target: number, px: number, py: number): void;
+declare function panBy(dx: number, dy: number): void;
+declare function centerWorld(): void;
+declare function resetView(): void;
+declare var __VLS_1: {
+    scale: number;
+    tx: number;
+    ty: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ZoomableContainerProps, {
+    scale: import("vue").Ref<number, number>;
+    tx: import("vue").Ref<number, number>;
+    ty: import("vue").Ref<number, number>;
+    setScaleAt: typeof setScaleAt;
+    panBy: typeof panBy;
+    resetView: typeof resetView;
+    centerWorld: typeof centerWorld;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:translate": (x: number, y: number) => any;
+}, string, import("vue").PublicProps, Readonly<ZoomableContainerProps> & Readonly<{
+    "onUpdate:scale"?: ((value: number) => any) | undefined;
+    "onUpdate:translate"?: ((x: number, y: number) => any) | undefined;
+}>, {
+    minScale: number;
+    maxScale: number;
+    initialScale: number;
+    zoomSpeed: number;
+    wheelPanSpeed: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/gallery/Carousel.vue

@@ -157,5 +157,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.carousel-wrapper{display:block;position:relative}.carousel-measure{height:v-bind(measureHeight);left:-9999px;pointer-events:none;position:fixed;visibility:hidden;width:v-bind(measureWidth)}.carousel-measure :deep(>*){display:block;height:100%;width:100%}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item :deep(>*){height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
+.carousel-wrapper{display:block;position:relative}.carousel-measure{height:v-bind(measureHeight);left:-9999px;pointer-events:none;position:fixed;visibility:hidden;width:v-bind(measureWidth)}.carousel-measure :deep(>*){display:block;height:100%;width:100%}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item :deep(>*){height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
 </style>

package/dist/runtime/components/gallery/CarouselPreview.d.vue.ts

@@ -0,0 +1,31 @@
+interface Props {
+    images?: string[];
+    fit?: "fill" | "cover" | "contain" | "scale-down";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    "activeImage"?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    image: string;
+};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeImage": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:activeImage"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    images: string[];
+    fit: "fill" | "cover" | "contain" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/gallery/CarouselPreview.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { toRefs } from "vue";
+const props = defineProps({
+  images: { type: Array, required: false, default: () => [] },
+  fit: { type: String, required: false, default: "cover" }
+});
+const { images, fit } = toRefs(props);
+const activeImage = defineModel("activeImage", { type: String });
+</script>
+
+<template>
+  <div v-if="images.length > 1" class="carousel-preview">
+    <button
+      v-for="(image, index) of images"
+      :key="image"
+      type="button"
+      class="preview-item"
+      :class="{ active: image === activeImage }"
+      :aria-pressed="image === activeImage"
+      :aria-label="`Show image ${index + 1} of ${images.length}`"
+      @click="activeImage = image"
+    >
+      <slot name="image" :image>
+        <img :src="image" alt="" draggable="false" />
+      </slot>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.carousel-preview {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.25rem 0;
+}
+
+.preview-item {
+  flex-shrink: 0;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  border: 2px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0.6;
+  transition: opacity 0.2s ease, border-color 0.2s ease;
+}
+.preview-item:hover {
+  opacity: 0.85;
+}
+.preview-item.active {
+  opacity: 1;
+  border-color: var(--color-accent);
+}
+.preview-item :deep(> *) {
+  width: 100%;
+  height: 100%;
+  object-fit: v-bind(fit);
+  display: block;
+}
+</style>

package/dist/runtime/components/gallery/CarouselPreview.vue.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    images?: string[];
+    fit?: "fill" | "cover" | "contain" | "scale-down";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    "activeImage"?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    image: string;
+};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeImage": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:activeImage"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    images: string[];
+    fit: "fill" | "cover" | "contain" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};