orio-ui 1.4.1 → 1.6.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.4.1",
+  "version": "1.6.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/assets/css/colors.css

@@ -1 +1 @@
-:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft-base:color-mix(in srgb,var(--color-accent) 15%,#e3e3e3);--color-accent-soft:var(--color-accent-soft-base);--color-accent-soft-darker:color-mix(in srgb,var(--color-accent-soft),#000 70%);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#c7d2fe);--color-accent-hover:color-mix(in srgb,var(--color-accent) 85%,#000 15%);--color-accent-active:color-mix(in srgb,var(--color-accent),#000 60%)}:root[data-mode=light]{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2}:root[data-mode=dark]{--color-bg:#0e1116;--color-surface:#1a1d23;--color-text:#fff;--color-muted:#a2a9b6;--color-border:#2e333d;--color-accent-ink:#fff;--color-accent-soft-base:color-mix(in srgb,var(--color-accent) 12%,#0e1116);--color-accent-soft:var(--color-accent-soft-base);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#0e1116);--color-accent-hover:color-mix(in srgb,var(--color-accent) 30%,#fff 70%);--color-accent-active:color-mix(in srgb,var(--color-accent) 80%,#fff 25%)}:root[data-theme=normal]{--color-accent:#ced1d5;--color-accent-ink:#2a2a2b;--color-accent-hover:color-mix(in srgb,var(--color-accent-ink) 90%,#fff 10%)}:root[data-theme=navy]{--color-accent:#5c80c1;--color-accent-soft-darker:var(--color-accent-soft)}:root[data-theme=teal]{--color-accent:#27b9ab}:root[data-theme=forest]{--color-accent:#5db18b}:root[data-theme=wine]{--color-accent:#862737;--color-accent-soft:color-mix(in srgb,var(--color-accent) 5%,#fff);--color-accent-soft-darker:var(--color-accent-soft)}:root[data-theme=royal]{--color-accent:#293da3;--color-accent-soft:color-mix(in srgb,var(--color-accent) 5%,#fff);--color-accent-soft-darker:var(--color-accent-soft)}
+:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft-base:color-mix(in srgb,var(--color-accent) 15%,#e3e3e3);--color-accent-soft:var(--color-accent-soft-base);--color-accent-soft-darker:color-mix(in srgb,var(--color-accent-soft),#000 70%);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#c7d2fe);--color-accent-hover:color-mix(in srgb,var(--color-accent) 85%,#000 15%);--color-accent-active:color-mix(in srgb,var(--color-accent),#000 60%)}:root[data-mode=light]{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2}:root[data-mode=dark]{--color-bg:#0e1116;--color-surface:#1a1d23;--color-text:#fff;--color-muted:#a2a9b6;--color-border:#2e333d;--color-accent-ink:#fff;--color-accent-soft-base:color-mix(in srgb,var(--color-accent) 12%,#0e1116);--color-accent-soft:var(--color-accent-soft-base);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#0e1116);--color-accent-hover:color-mix(in srgb,var(--color-accent) 30%,#fff 70%);--color-accent-active:color-mix(in srgb,var(--color-accent) 80%,#fff 25%)}:root[data-theme=normal]{--color-accent:#ced1d5;--color-accent-ink:#2a2a2b;--color-accent-hover:color-mix(in srgb,var(--color-accent-ink) 90%,#fff 10%)}:root[data-theme=inverse][data-mode=light]{--color-accent:#000;--color-accent-soft-darker:#fff}:root[data-theme=inverse][data-mode=dark]{--color-accent:#fff;--color-accent-ink:#000;--color-accent-hover:color-mix(in srgb,var(--color-accent),#000 80%)}:root[data-theme=navy]{--color-accent:#5c80c1;--color-accent-soft-darker:var(--color-accent-soft)}:root[data-theme=teal]{--color-accent:#27b9ab}:root[data-theme=forest]{--color-accent:#5db18b}:root[data-theme=wine]{--color-accent:#862737;--color-accent-soft:color-mix(in srgb,var(--color-accent) 5%,#fff);--color-accent-soft-darker:var(--color-accent-soft)}:root[data-theme=royal]{--color-accent:#293da3;--color-accent-soft:color-mix(in srgb,var(--color-accent) 5%,#fff);--color-accent-soft-darker:var(--color-accent-soft)}

package/dist/runtime/components/ControlElement.vue

@@ -3,11 +3,11 @@ export interface ControlProps {
   /**
    * Minimal will reset margin and remove border and box shadow from every element inside the slot
    */
-  appearance?: 'normal' | 'minimal';
+  appearance?: "normal" | "minimal";
 }
 
 withDefaults(defineProps<ControlProps>(), {
-  appearance: 'normal',
+  appearance: "normal",
 });
 </script>
 

package/dist/runtime/components/DashedContainer.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";
 
 interface Props {
   icon?: string;
   text?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
 }
 const props = withDefaults(defineProps<Props>(), {
-  size: 'medium',
+  size: "medium",
 });
-defineEmits(['click']);
+defineEmits(["click"]);
 
 const iconSize = computed(() => {
   switch (props.size) {
-    case 'small':
-      return '2rem';
-    case 'large':
-      return '5rem';
+    case "small":
+      return "2rem";
+    case "large":
+      return "5rem";
     default:
-      return '3rem';
+      return "3rem";
   }
 });
 </script>

package/dist/runtime/components/DatePicker.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { nanoid } from 'nanoid';
+import { computed } from "vue";
+import { nanoid } from "nanoid";
 
 interface Props {
   month?: boolean;
 }
 defineProps<Props>();
 
-const date = defineModel<string | null | undefined>('date', {
+const date = defineModel<string | null | undefined>("date", {
   required: true,
 });
 

package/dist/runtime/components/DateRangePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-import type { ResumeDate } from './view/Dates.vue';
+import { ref, watch, computed } from "vue";
+import type { ResumeDate } from "./view/Dates.vue";
 
 export interface DateRangePickerProps {
   month?: boolean;
@@ -8,15 +8,15 @@ export interface DateRangePickerProps {
 
 defineProps<DateRangePickerProps>();
 
-const dates = defineModel<ResumeDate>('dates', { required: true });
+const dates = defineModel<ResumeDate>("dates", { required: true });
 
-const present = ref(dates.value.endDate !== '' && !dates.value.endDate);
+const present = ref(dates.value.endDate !== "" && !dates.value.endDate);
 
 watch(present, (value) => {
   if (value) {
     dates.value.endDate = null; // Set end date to null when present is checked
   } else {
-    dates.value.endDate = ''; // Reset end date when present is unchecked
+    dates.value.endDate = ""; // Reset end date when present is unchecked
   }
 });
 

package/dist/runtime/components/EmptyState.vue

@@ -3,11 +3,11 @@ interface Props {
   icon?: string;
   title: string;
   description?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'medium',
+  size: "medium",
 });
 </script>
 

package/dist/runtime/components/Icon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { iconRegistry, type IconName } from '../utils/icon-registry';
+import { computed } from "vue";
+import { iconRegistry, type IconName } from "../utils/icon-registry";
 
 export interface IconProps {
   name: IconName | string;
@@ -9,13 +9,13 @@ export interface IconProps {
 }
 
 const props = withDefaults(defineProps<IconProps>(), {
-  size: '1em',
-  color: 'currentColor',
+  size: "1em",
+  color: "currentColor",
 });
 
-const iconSvg = computed(() => iconRegistry[props.name] || '');
+const iconSvg = computed(() => iconRegistry[props.name] || "");
 const sizeValue = computed(() =>
-  typeof props.size === 'number' ? `${props.size}px` : props.size,
+  typeof props.size === "number" ? `${props.size}px` : props.size,
 );
 </script>
 

package/dist/runtime/components/Input.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineEmits<{
-  (e: 'input', value: string): void;
+  (e: "input", value: string): void;
 }>();
 
-const text = defineModel<string>({ default: '' });
+const text = defineModel<string>({ default: "" });
 </script>
 
 <template>

package/dist/runtime/components/Tag.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-export type TagStyle = 'neutral' | 'accent';
+export type TagStyle = "neutral" | "accent";
 
 interface Props {
   text: string;
   variant?: TagStyle;
 }
 withDefaults(defineProps<Props>(), {
-  variant: 'neutral',
+  variant: "neutral",
 });
 </script>
 

package/dist/runtime/components/Textarea.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue';
+import { useAttrs } from "vue";
 
 const attrs = useAttrs();
 defineEmits<{
-  (e: 'input', value: string): void;
+  (e: "input", value: string): void;
 }>();
 
-const modelValue = defineModel<string>({ default: '' });
+const modelValue = defineModel<string>({ default: "" });
 </script>
 
 <template>

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, onMounted, toRefs, useTemplateRef } from "vue";
+import { useElementSize } from "@vueuse/core";
+
+interface CarouselProps {
+  images?: string[];
+  size?: string;
+  fit?: "fill" | "cover" | "contain" | "scale-down";
+}
+
+const props = withDefaults(defineProps<CarouselProps>(), {
+  images: () => [],
+  size: "400:550",
+  fit: "contain",
+});
+
+const { images, size, fit } = toRefs(props);
+
+const rawSizes = computed(() =>
+  size.value.split(":").map((value) => parseFloat(value)),
+);
+
+const carousel = useTemplateRef("carousel");
+const { width: carouselWidth } = useElementSize(carousel);
+
+const calculatedSize = computed(() => {
+  return {
+    width: `${rawSizes.value[0]}px`,
+    height: `${rawSizes.value[1]}px`,
+  };
+});
+
+const maxHeight = computed(() => {
+  const dimensions = rawSizes.value[0] / rawSizes.value[1];
+  if (!carouselWidth.value) return "100%";
+  return `${carouselWidth.value / dimensions}px`;
+});
+
+const activeImage = defineModel<string>("activeImage");
+
+const activeImageIndex = computed(() =>
+  images.value.findIndex((image) => image === activeImage.value),
+);
+
+// Swipe handling with closure
+let pointerStartX = 0;
+
+function onPointerDown(event: PointerEvent) {
+  pointerStartX = event.clientX;
+}
+
+function onPointerUp(event: PointerEvent) {
+  const diffX = pointerStartX - event.clientX;
+  const threshold = 10;
+
+  if (Math.abs(diffX) > threshold) {
+    if (diffX > 0) {
+      nextImage();
+    } else {
+      previousImage();
+    }
+  }
+}
+
+function nextImage() {
+  if (activeImageIndex.value === images.value.length - 1) {
+    activeImage.value = images.value[0];
+    return;
+  }
+  activeImage.value = images.value[activeImageIndex.value + 1];
+}
+
+function previousImage() {
+  if (activeImageIndex.value === 0) {
+    activeImage.value = images.value[images.value.length - 1];
+    return;
+  }
+  activeImage.value = images.value[activeImageIndex.value - 1];
+}
+
+function getItemClasses(image: string) {
+  if (image === activeImage.value) return ["active-image"];
+  if (
+    images.value.findIndex((img) => image === img) ===
+    activeImageIndex.value + 1
+  )
+    return ["next-image"];
+  if (
+    images.value.findIndex((img) => image === img) ===
+    activeImageIndex.value - 1
+  )
+    return ["previous-image"];
+}
+
+onMounted(() => {
+  if (!activeImage.value) activeImage.value = images.value[0];
+});
+</script>
+
+<template>
+  <div ref="carousel" class="carousel">
+    <div
+      class="carousel__track"
+      @pointerdown="onPointerDown"
+      @pointerup="onPointerUp"
+    >
+      <div
+        v-for="image of images"
+        :key="image"
+        class="carousel__item"
+        :class="getItemClasses(image)"
+      >
+        <img :src="image" :alt="image" draggable="false" />
+      </div>
+      <orio-button
+        variant="subdued"
+        icon="chevron-left"
+        class="switch-button previous-button"
+        @click="previousImage"
+      >
+        <template #icon>
+          <orio-icon name="chevron-left" size="40px" />
+        </template>
+      </orio-button>
+      <orio-button
+        variant="subdued"
+        class="switch-button next-button"
+        @click="nextImage"
+      >
+        <template #icon>
+          <orio-icon name="chevron-right" size="40px" />
+        </template>
+      </orio-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");margin:0 auto;max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;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;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 img{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;top:50%}.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}
+</style>

package/dist/runtime/components/view/Dates.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue';
+import { computed, toRefs } from "vue";
 
 export interface ResumeDate {
   startDate: string;
@@ -9,28 +9,28 @@ export interface ResumeDate {
 interface Props {
   dates: ResumeDate;
   month?: boolean; // Optional prop to indicate if the date should be displayed as month/year
-  size?: 'small' | 'medium' | 'large';
-  type?: 'text' | 'title' | 'subtitle' | 'italics';
+  size?: "small" | "medium" | "large";
+  type?: "text" | "title" | "subtitle" | "italics";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'small',
-  type: 'italics',
+  size: "small",
+  type: "italics",
 });
 
 const { dates } = toRefs(props);
 
 function formatMonthYear(value: string) {
-  if (!value) return '';
+  if (!value) return "";
   if (!props.month)
-    return new Intl.DateTimeFormat('en-US', {
-      day: 'numeric',
-      month: 'short',
-      year: 'numeric',
+    return new Intl.DateTimeFormat("en-US", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
     }).format(new Date(value));
-  return new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    year: 'numeric',
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    year: "numeric",
   }).format(new Date(value));
 }
 
@@ -40,7 +40,7 @@ const endDate = computed(() => {
   if (dates.value.endDate === undefined) return null;
   return dates.value.endDate !== null
     ? formatMonthYear(dates.value.endDate)
-    : 'Present';
+    : "Present";
 });
 </script>
 

package/dist/runtime/components/view/Separator.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";
 
 interface Props {
-  style?: 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge';
+  style?: "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge";
   size?: number | string;
   margin?: number | string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  style: 'solid',
+  style: "solid",
   size: 1,
   margin: 1,
 });

package/dist/runtime/components/view/Text.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue';
+import { computed, useAttrs } from "vue";
 
-export type TextTypes = 'text' | 'title' | 'subtitle' | 'italics';
+export type TextTypes = "text" | "title" | "subtitle" | "italics";
 
 export interface TextProps {
   type?: TextTypes;
-  size?: 'small' | 'medium' | 'large' | 'extra-large';
+  size?: "small" | "medium" | "large" | "extra-large";
   uppercase?: boolean;
   icon?: string | null;
   lineClamp?: number | string;
 }
 const props = withDefaults(defineProps<TextProps>(), {
-  type: 'text',
-  size: 'medium',
+  type: "text",
+  size: "medium",
   uppercase: false,
   icon: null,
   lineClamp: undefined,

package/dist/runtime/composables/index.d.ts

@@ -1,4 +1,4 @@
-export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from './useApi.js';
-export { useFuzzySearch } from './useFuzzySearch.js';
-export { useModal, type ModalProps, type OriginRect } from './useModal.js';
-export { useTheme } from './useTheme.js';
+export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from "./useApi.js";
+export { useFuzzySearch } from "./useFuzzySearch.js";
+export { useModal, type ModalProps, type OriginRect } from "./useModal.js";
+export { useTheme } from "./useTheme.js";

package/dist/runtime/composables/useApi.d.ts

@@ -1,5 +1,5 @@
 export type RequestBody = Record<string, unknown>;
-export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+export type RequestMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 export interface ApiOptions {
     method?: RequestMethod;
     body?: RequestBody;

package/dist/runtime/composables/useFuzzySearch.d.ts

@@ -1,5 +1,5 @@
-import { type MaybeRef } from 'vue';
-import { useFuse, type FuseOptions } from '@vueuse/integrations/useFuse';
+import { type MaybeRef } from "vue";
+import { useFuse, type FuseOptions } from "@vueuse/integrations/useFuse";
 /**
  * Search using Fuse.js fuzzy search
  * @param dataSource - Array of strings or objects to search

package/dist/runtime/composables/useModal.d.ts

@@ -7,7 +7,7 @@ export interface OriginRect {
 export interface ModalProps {
     show: boolean;
     origin: OriginRect | null;
-    'onUpdate:show': (state: boolean) => void;
+    "onUpdate:show": (state: boolean) => void;
 }
 export declare function useModal(): {
     modalProps: import("vue").Ref<any, any>;

package/dist/runtime/index.d.ts

@@ -16,6 +16,8 @@ export { default as Tooltip } from "./components/Tooltip.vue.js";
 export { default as EmptyState } from "./components/EmptyState.vue.js";
 export { default as DashedContainer } from "./components/DashedContainer.vue.js";
 export { default as ControlElement } from "./components/ControlElement.vue.js";
+export { default as Gallery } from "./components/gallery/index.vue.js";
+export { default as GalleryCarousel } from "./components/gallery/Carousel.vue.js";
 export { default as ViewText } from "./components/view/Text.vue.js";
 export { default as ViewDates } from "./components/view/Dates.vue.js";
 export { default as ViewSeparator } from "./components/view/Separator.vue.js";

package/dist/runtime/index.js

@@ -16,6 +16,8 @@ export { default as Tooltip } from "./components/Tooltip.vue";
 export { default as EmptyState } from "./components/EmptyState.vue";
 export { default as DashedContainer } from "./components/DashedContainer.vue";
 export { default as ControlElement } from "./components/ControlElement.vue";
+export { default as Gallery } from "./components/gallery/index.vue";
+export { default as GalleryCarousel } from "./components/gallery/Carousel.vue";
 export { default as ViewText } from "./components/view/Text.vue";
 export { default as ViewDates } from "./components/view/Dates.vue";
 export { default as ViewSeparator } from "./components/view/Separator.vue";

package/dist/runtime/utils/icon-registry.js

@@ -1,10 +1,31 @@
 export const iconRegistry = {
   // Loading spinner (line-md:loading-loop)
   "loading-loop": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="2" r="0"><animate attributeName="r" begin="0" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(45 12 12)"><animate attributeName="r" begin="0.125s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(90 12 12)"><animate attributeName="r" begin="0.25s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(135 12 12)"><animate attributeName="r" begin="0.375s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(180 12 12)"><animate attributeName="r" begin="0.5s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(225 12 12)"><animate attributeName="r" begin="0.625s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(270 12 12)"><animate attributeName="r" begin="0.75s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(315 12 12)"><animate attributeName="r" begin="0.875s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle></svg>`,
-  // Chevron down (mdi-light:chevron-down)
+  // ARROWS & NAVIGATION ICONS
+  // Chevrons (angled arrows)
   "chevron-down": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z"/></svg>`,
-  // Chevron up
   "chevron-up": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>`,
+  "chevron-left": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"/></svg>`,
+  "chevron-right": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,
+  // Straight arrows
+  "arrow-up": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 14l5-5l5 5z"/></svg>`,
+  "arrow-down": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5l5-5z"/></svg>`,
+  "arrow-left": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14 7l-5 5l5 5z"/></svg>`,
+  "arrow-right": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 17l5-5l-5-5z"/></svg>`,
+  // Long arrows (with tails)
+  "arrow-back": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z"/></svg>`,
+  "arrow-forward": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`,
+  "arrow-upward": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"/></svg>`,
+  "arrow-downward": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"/></svg>`,
+  // Expand/Collapse
+  "expand-more": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.59 8.59L12 13.17L7.41 8.59L6 10l6 6l6-6z"/></svg>`,
+  "expand-less": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8l-6 6l1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>`,
+  // Double arrows
+  "double-arrow-left": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z"/></svg>`,
+  "double-arrow-right": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zM11.59 7.41L13 6l6 6l-6 6l-1.41-1.41L16.17 12z"/></svg>`,
+  // External & Links
+  "external-link": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3z"/></svg>`,
+  link: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5"/></svg>`,
   // Edit (material-symbols:edit-sharp)
   edit: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 21v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z"/></svg>`,
   // Check / Checkmark
@@ -23,6 +44,47 @@ export const iconRegistry = {
   download: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"/></svg>`,
   // Delete / Trash
   delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>`,
+  // Copy
+  copy: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"/></svg>`,
+  // COMMUNICATION ICONS
+  // Mail & Message
+  mail: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5l-8-5V6l8 5l8-5z"/></svg>`,
+  message: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M6 9h12v2H6zm8 5H6v-2h8zm4-6H6V6h12z"/></svg>`,
+  chat: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-2 12H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"/></svg>`,
+  phone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24c1.12.37 2.33.57 3.57.57c.55 0 1 .45 1 1V20c0 .55-.45 1-1 1c-9.39 0-17-7.61-17-17c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1c0 1.25.2 2.45.57 3.57c.11.35.03.74-.25 1.02z"/></svg>`,
+  // MEDIA ICONS
+  // Playback
+  play: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>`,
+  pause: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19h4V5H6zm8-14v14h4V5z"/></svg>`,
+  stop: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 6h12v12H6z"/></svg>`,
+  "skip-next": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 18l8.5-6L6 6zm10-12v12h2V6z"/></svg>`,
+  "skip-previous": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>`,
+  // Media content
+  image: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"/></svg>`,
+  video: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11z"/></svg>`,
+  camera: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5"/></svg>`,
+  mic: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3m5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72z"/></svg>`,
+  "mic-off": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28m-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3c.22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52c-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21L21 19.73z"/></svg>`,
+  volume: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77"/></svg>`,
+  "volume-off": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63m2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.9 8.9 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71M4.27 3L3 4.27L7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a9 9 0 0 0 3.69-1.81L19.73 21L21 19.73l-9-9zM12 4L9.91 6.09L12 8.18z"/></svg>`,
+  // DOCUMENT ICONS
+  file: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"/></svg>`,
+  folder: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"/></svg>`,
+  "folder-open": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m0 12H4V8h16z"/></svg>`,
+  document: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm2 16H8v-2h8zm0-4H8v-2h8zm-3-5V3.5L18.5 9z"/></svg>`,
+  pdf: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5zm4-3H19v1h1.5V11H19v2h-1.5V7h3zM9 9.5h1v-1H9zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4zm10 5.5h1v-4h-1z"/></svg>`,
+  // UI CONTROLS
+  eye: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3"/></svg>`,
+  "eye-off": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7c2.76 0 5 2.24 5 5c0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28l.46.46A11.8 11.8 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22L21 20.73L3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65c0 1.66 1.34 3 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53c-2.76 0-5-2.24-5-5c0-.79.2-1.53.53-2.2m4.31-.78l3.15 3.15l.02-.16c0-1.66-1.34-3-3-3z"/></svg>`,
+  lock: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2m3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1z"/></svg>`,
+  unlock: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2m6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m0 12H6V10h12z"/></svg>`,
+  // SOCIAL MEDIA
+  github: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>`,
+  twitter: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23"/></svg>`,
+  facebook: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"/></svg>`,
+  instagram: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"/></svg>`,
+  youtube: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73"/></svg>`,
+  linkedin: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"/></svg>`,
   // E-COMMERCE ICONS
   // Shopping & Cart
   "shopping-cart": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"/></svg>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",
@@ -24,7 +24,7 @@
     "test": "vitest",
     "test:unit": "vitest run",
     "test:watch": "vitest watch",
-    "docs:dev": "vitepress dev docs",
+    "docs:dev": "vitepress dev docs --host",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "lint": "eslint .",
@@ -57,6 +57,7 @@
     "nuxt": "^4.2.2",
     "prettier": "^3.7.4",
     "sass": "^1.70.0",
+    "sass-embedded": "^1.92.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.52.0",
     "vitepress": "^1.6.4",