@stachelock/ui 0.3.1 → 0.4.0

package/dist/components/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../src/components/UiBreadcrumb.vue"],"sourcesContent":["<template>\n  <nav class=\"sl-hidden sm:sl-flex\" aria-label=\"Breadcrumb\">\n    <ol role=\"list\" class=\"sl-flex sl-items-center sl-gap-1\">\n      <li \n        v-for=\"(breadcrumb, index) in displayBreadcrumbs\" \n        :key=\"breadcrumb.fullPath\"\n        class=\"sl-flex sl-items-center\"\n      >\n        <!-- Separator -->\n        <ChevronRightIcon \n          v-if=\"index !== 0\" \n          class=\"sl-h-4 sl-w-4 sl-flex-shrink-0 sl-mx-1\" \n          :style=\"{ color: separatorColor }\"\n          aria-hidden=\"true\" \n        />\n        \n        <!-- Breadcrumb Item -->\n        <component\n          :is=\"isLastItem(index) || !isNavigable(breadcrumb) ? 'span' : 'a'\"\n          :href=\"!isLastItem(index) && isNavigable(breadcrumb) ? breadcrumb.fullPath : undefined\"\n          :title=\"breadcrumb.original\"\n          :aria-current=\"isLastItem(index) ? 'page' : undefined\"\n          class=\"sl-text-sm sl-font-medium sl-transition-colors sl-duration-150 sl-px-2 sl-py-1 sl-rounded-md\"\n          :class=\"getBreadcrumbClasses(index, breadcrumb)\"\n          :style=\"getBreadcrumbStyle(index)\"\n          @click=\"(e: MouseEvent) => handleClick(breadcrumb, index, e)\"\n        >\n          <!-- UID indicator badge -->\n          <span \n            v-if=\"breadcrumb.isUid && showUidIndicator\" \n            class=\"sl-inline-flex sl-items-center sl-mr-1.5\"\n          >\n            <span \n              class=\"sl-w-1.5 sl-h-1.5 sl-rounded-full sl-bg-amber-400 dark:sl-bg-amber-500\"\n              title=\"This is an ID\"\n            />\n          </span>\n          \n          <!-- Display text -->\n          <span \n            class=\"sl-truncate\"\n            :class=\"{ 'sl-font-mono sl-text-xs': breadcrumb.isUid && preserveUidFont }\"\n          >\n            {{ breadcrumb.display }}\n          </span>\n          \n          <!-- Loading indicator for async lookups -->\n          <span \n            v-if=\"breadcrumb.loading\" \n            class=\"sl-ml-1.5 sl-inline-block sl-animate-pulse\"\n          >\n            <span class=\"sl-w-2 sl-h-2 sl-rounded-full sl-bg-current sl-opacity-50\" />\n          </span>\n        </component>\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect, computed, type PropType } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport { ChevronRightIcon } from '@heroicons/vue/20/solid';\nimport { useStringTransform, type StringTransformOptions } from '../composables/useStringTransform';\nimport { useTheme } from '../composables/useTheme';\n\ninterface BreadcrumbItem {\n  /** Display text (transformed) */\n  display: string;\n  /** Original segment text */\n  original: string;\n  /** Full path for navigation */\n  fullPath: string;\n  /** Whether this was detected as a UID */\n  isUid: boolean;\n  /** Whether truncation was applied */\n  truncated: boolean;\n  /** Whether async lookup is in progress */\n  loading: boolean;\n}\n\ninterface RouteMeta {\n  isErrorPage?: boolean;\n}\n\nconst props = defineProps({\n  /**\n   * Maximum length for breadcrumb text before truncation\n   * @default 20\n   */\n  maxLength: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * Case transformation to apply\n   * @default 'title'\n   */\n  caseTransform: {\n    type: String as PropType<StringTransformOptions['caseTransform']>,\n    default: 'title',\n  },\n  /**\n   * Whether to detect and specially format UIDs\n   * @default true\n   */\n  detectUids: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * How to format detected UIDs\n   * @default 'ellipsis'\n   */\n  uidFormat: {\n    type: String as PropType<StringTransformOptions['uidFormat']>,\n    default: 'ellipsis',\n  },\n  /**\n   * Number of characters to show for UIDs\n   * @default 4\n   */\n  uidChars: {\n    type: Number,\n    default: 4,\n  },\n  /**\n   * Show visual indicator for UID segments\n   * @default false\n   */\n  showUidIndicator: {\n    type: Boolean,\n    default: false,\n  },\n  /**\n   * Use monospace font for UID segments\n   * @default true\n   */\n  preserveUidFont: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * Custom async lookup function to resolve IDs to display names\n   * Called for segments detected as UIDs\n   */\n  lookupFn: {\n    type: Function as PropType<(id: string) => Promise<string | null> | string | null>,\n    default: undefined,\n  },\n  /**\n   * Custom segment transform function\n   * Overrides default transformation for each segment\n   */\n  segmentTransform: {\n    type: Function as PropType<(segment: string, index: number, fullPath: string) => string | null>,\n    default: undefined,\n  },\n  /**\n   * Segments to exclude from breadcrumbs (by name)\n   */\n  excludeSegments: {\n    type: Array as PropType<string[]>,\n    default: () => [],\n  },\n  /**\n   * Mapping of segment names to display names\n   */\n  segmentLabels: {\n    type: Object as PropType<Record<string, string>>,\n    default: () => ({}),\n  },\n  /**\n   * Home segment configuration\n   */\n  homeSegment: {\n    type: Object as PropType<{ label?: string; path?: string; show?: boolean }>,\n    default: () => ({ show: false }),\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'navigate', path: string, event: MouseEvent): void;\n  (e: 'click', breadcrumb: BreadcrumbItem, event: MouseEvent): void;\n}>();\n\nconst route = useRoute();\nconst router = useRouter();\nconst { isDark } = useTheme();\n\nconst { transform, transformAsync, isUidLike } = useStringTransform({\n  maxLength: props.maxLength,\n  caseTransform: props.caseTransform,\n  detectUids: props.detectUids,\n  uidFormat: props.uidFormat,\n  uidChars: props.uidChars,\n});\n\nconst breadcrumbs = ref<BreadcrumbItem[]>([]);\nconst currentPath = ref<string>('');\n\n// Color configurations\nconst separatorColor = computed(() => \n  isDark.value ? 'rgb(100, 116, 139)' : 'rgb(156, 163, 175)'\n);\n\nconst displayBreadcrumbs = computed(() => breadcrumbs.value);\n\nconst isLastItem = (index: number) => index === breadcrumbs.value.length - 1;\n\nconst isNavigable = (breadcrumb: BreadcrumbItem) => {\n  const resolved = router.resolve(breadcrumb.fullPath);\n  const isErrorPage = resolved.matched.some((route: { meta?: RouteMeta }) => route.meta?.isErrorPage);\n  return resolved && resolved.matched.length > 0 && !isErrorPage;\n};\n\nconst getBreadcrumbClasses = (index: number, breadcrumb: BreadcrumbItem) => {\n  const isLast = isLastItem(index);\n  const navigable = isNavigable(breadcrumb);\n  \n  return [\n    // Hover state for clickable items\n    !isLast && navigable && 'hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700/50',\n    // Cursor\n    isLast ? 'sl-cursor-default' : navigable ? 'sl-cursor-pointer' : 'sl-cursor-not-allowed',\n    // Focus ring\n    !isLast && 'focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-1 focus:sl-ring-blue-500 dark:focus:sl-ring-offset-slate-900',\n  ].filter(Boolean);\n};\n\nconst getBreadcrumbStyle = (index: number) => {\n  const isLast = isLastItem(index);\n  \n  if (isLast) {\n    // Current page - more prominent\n    return {\n      color: isDark.value ? 'rgb(241, 245, 249)' : 'rgb(15, 23, 42)', // slate-100 / slate-900\n      fontWeight: '600',\n    };\n  }\n  \n  // Parent segments - muted\n  return {\n    color: isDark.value ? 'rgb(148, 163, 184)' : 'rgb(100, 116, 139)', // slate-400 / slate-500\n  };\n};\n\nconst processSegments = async () => {\n  const path = route.path;\n  currentPath.value = path;\n  const pathSegments = path.split('/').filter(Boolean);\n  const tempBreadcrumbs: BreadcrumbItem[] = [];\n\n  // Add home segment if configured\n  if (props.homeSegment.show) {\n    tempBreadcrumbs.push({\n      display: props.homeSegment.label || 'Home',\n      original: 'home',\n      fullPath: props.homeSegment.path || '/',\n      isUid: false,\n      truncated: false,\n      loading: false,\n    });\n  }\n\n  // Process each segment\n  for (const [index, segment] of pathSegments.entries()) {\n    // Skip excluded segments\n    if (props.excludeSegments.includes(segment)) continue;\n\n    const fullPath = '/' + pathSegments.slice(0, index + 1).join('/');\n    \n    // Check for custom label mapping first\n    if (props.segmentLabels[segment]) {\n      tempBreadcrumbs.push({\n        display: props.segmentLabels[segment],\n        original: segment,\n        fullPath,\n        isUid: false,\n        truncated: false,\n        loading: false,\n      });\n      continue;\n    }\n\n    // Check for custom segment transform\n    if (props.segmentTransform) {\n      const customResult = props.segmentTransform(segment, index, fullPath);\n      if (customResult !== null) {\n        tempBreadcrumbs.push({\n          display: customResult,\n          original: segment,\n          fullPath,\n          isUid: isUidLike(segment),\n          truncated: customResult.length < segment.length,\n          loading: false,\n        });\n        continue;\n      }\n    }\n\n    // Use string transform composable\n    const result = transform(segment);\n    \n    tempBreadcrumbs.push({\n      display: result.display,\n      original: segment,\n      fullPath,\n      isUid: result.isUid,\n      truncated: result.truncated,\n      loading: false,\n    });\n  }\n\n  breadcrumbs.value = tempBreadcrumbs;\n\n  // Handle async lookups for UIDs\n  if (props.lookupFn) {\n    for (let i = 0; i < breadcrumbs.value.length; i++) {\n      const bc = breadcrumbs.value[i];\n      if (bc.isUid) {\n        // Set loading state\n        breadcrumbs.value[i] = { ...bc, loading: true };\n        \n        try {\n          const result = await transformAsync(bc.original, {\n            lookupFn: props.lookupFn,\n          });\n          \n          breadcrumbs.value[i] = {\n            ...breadcrumbs.value[i],\n            display: result.display,\n            isUid: result.isUid,\n            truncated: result.truncated,\n            loading: false,\n          };\n        } catch {\n          breadcrumbs.value[i] = { ...breadcrumbs.value[i], loading: false };\n        }\n      }\n    }\n  }\n};\n\nconst handleClick = (breadcrumb: BreadcrumbItem, index: number, event: MouseEvent) => {\n  emit('click', breadcrumb, event);\n  \n  if (event.defaultPrevented) return;\n  if (isLastItem(index)) return;\n  if (!isNavigable(breadcrumb)) {\n    event.preventDefault();\n    return;\n  }\n  \n  emit('navigate', breadcrumb.fullPath, event);\n  \n  if (!event.defaultPrevented) {\n    event.preventDefault();\n    router.push(breadcrumb.fullPath);\n  }\n};\n\nwatchEffect(() => {\n  processSegments();\n});\n</script>\n\n<style scoped>\n/* Smooth transitions for breadcrumb items */\na, span {\n  transition: color 0.15s ease, background-color 0.15s ease;\n}\n</style>\n"],"names":["props","__props","emit","__emit","route","useRoute","router","useRouter","isDark","useTheme","transform","transformAsync","isUidLike","useStringTransform","breadcrumbs","ref","currentPath","separatorColor","computed","displayBreadcrumbs","isLastItem","index","isNavigable","breadcrumb","resolved","isErrorPage","getBreadcrumbClasses","isLast","navigable","getBreadcrumbStyle","processSegments","path","pathSegments","tempBreadcrumbs","segment","fullPath","customResult","result","i","bc","handleClick","event","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_Fragment","_renderList","_createBlock","_unref","ChevronRightIcon","_resolveDynamicComponent","_normalizeStyle","e","_hoisted_3","_cache","_toDisplayString","_hoisted_4"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../src/components/UiBreadcrumb.vue"],"sourcesContent":["<template>\n  <nav class=\"sl-hidden sm:sl-flex\" aria-label=\"Breadcrumb\">\n    <ol role=\"list\" class=\"sl-flex sl-items-center sl-gap-1\">\n      <li \n        v-for=\"(breadcrumb, index) in displayBreadcrumbs\" \n        :key=\"breadcrumb.fullPath\"\n        class=\"sl-flex sl-items-center\"\n      >\n        <!-- Separator -->\n        <ChevronRightIcon \n          v-if=\"index !== 0\" \n          class=\"sl-h-4 sl-w-4 sl-flex-shrink-0 sl-mx-1\" \n          :style=\"{ color: separatorColor }\"\n          aria-hidden=\"true\" \n        />\n        \n        <!-- Breadcrumb Item -->\n        <component\n          :is=\"isLastItem(index) || !isNavigable(breadcrumb) ? 'span' : 'a'\"\n          :href=\"!isLastItem(index) && isNavigable(breadcrumb) ? breadcrumb.fullPath : undefined\"\n          :title=\"breadcrumb.original\"\n          :aria-current=\"isLastItem(index) ? 'page' : undefined\"\n          class=\"sl-text-sm sl-font-medium sl-transition-colors sl-duration-150 sl-px-2 sl-py-1 sl-rounded-md\"\n          :class=\"getBreadcrumbClasses(index, breadcrumb)\"\n          :style=\"getBreadcrumbStyle(index)\"\n          @click=\"(e: MouseEvent) => handleClick(breadcrumb, index, e)\"\n        >\n          <!-- UID indicator badge -->\n          <span \n            v-if=\"breadcrumb.isUid && showUidIndicator\" \n            class=\"sl-inline-flex sl-items-center sl-mr-1.5\"\n          >\n            <span \n              class=\"sl-w-1.5 sl-h-1.5 sl-rounded-full sl-bg-amber-400 dark:sl-bg-amber-500\"\n              title=\"This is an ID\"\n            />\n          </span>\n          \n          <!-- Display text -->\n          <span \n            class=\"sl-truncate\"\n            :class=\"{ 'sl-font-mono sl-text-xs': breadcrumb.isUid && preserveUidFont }\"\n          >\n            {{ breadcrumb.display }}\n          </span>\n          \n          <!-- Loading indicator for async lookups -->\n          <span \n            v-if=\"breadcrumb.loading\" \n            class=\"sl-ml-1.5 sl-inline-block sl-animate-pulse\"\n          >\n            <span class=\"sl-w-2 sl-h-2 sl-rounded-full sl-bg-current sl-opacity-50\" />\n          </span>\n        </component>\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect, computed, type PropType } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport { ChevronRightIcon } from '@heroicons/vue/20/solid';\nimport { useStringTransform, type StringTransformOptions } from '../composables/useStringTransform';\nimport { useTheme } from '../composables/useTheme';\n\ninterface BreadcrumbItem {\n  /** Display text (transformed) */\n  display: string;\n  /** Original segment text */\n  original: string;\n  /** Full path for navigation */\n  fullPath: string;\n  /** Whether this was detected as a UID */\n  isUid: boolean;\n  /** Whether truncation was applied */\n  truncated: boolean;\n  /** Whether async lookup is in progress */\n  loading: boolean;\n}\n\ninterface RouteMeta {\n  isErrorPage?: boolean;\n}\n\nconst props = defineProps({\n  /**\n   * Maximum length for breadcrumb text before truncation\n   * @default 20\n   */\n  maxLength: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * Case transformation to apply\n   * @default 'title'\n   */\n  caseTransform: {\n    type: String as PropType<StringTransformOptions['caseTransform']>,\n    default: 'title',\n  },\n  /**\n   * Whether to detect and specially format UIDs\n   * @default true\n   */\n  detectUids: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * How to format detected UIDs\n   * @default 'ellipsis'\n   */\n  uidFormat: {\n    type: String as PropType<StringTransformOptions['uidFormat']>,\n    default: 'ellipsis',\n  },\n  /**\n   * Number of characters to show for UIDs\n   * @default 4\n   */\n  uidChars: {\n    type: Number,\n    default: 4,\n  },\n  /**\n   * Show visual indicator for UID segments\n   * @default false\n   */\n  showUidIndicator: {\n    type: Boolean,\n    default: false,\n  },\n  /**\n   * Use monospace font for UID segments\n   * @default true\n   */\n  preserveUidFont: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * Custom async lookup function to resolve IDs to display names\n   * Called for segments detected as UIDs\n   */\n  lookupFn: {\n    type: Function as PropType<(id: string) => Promise<string | null> | string | null>,\n    default: undefined,\n  },\n  /**\n   * Custom segment transform function\n   * Overrides default transformation for each segment\n   */\n  segmentTransform: {\n    type: Function as PropType<(segment: string, index: number, fullPath: string) => string | null>,\n    default: undefined,\n  },\n  /**\n   * Segments to exclude from breadcrumbs (by name)\n   */\n  excludeSegments: {\n    type: Array as PropType<string[]>,\n    default: () => [],\n  },\n  /**\n   * Mapping of segment names to display names\n   */\n  segmentLabels: {\n    type: Object as PropType<Record<string, string>>,\n    default: () => ({}),\n  },\n  /**\n   * Home segment configuration\n   */\n  homeSegment: {\n    type: Object as PropType<{ label?: string; path?: string; show?: boolean }>,\n    default: () => ({ show: false }),\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'navigate', path: string, event: MouseEvent): void;\n  (e: 'click', breadcrumb: BreadcrumbItem, event: MouseEvent): void;\n}>();\n\nconst route = useRoute();\nconst router = useRouter();\nconst { isDark } = useTheme();\n\nconst { transform, transformAsync, isUidLike } = useStringTransform({\n  maxLength: props.maxLength,\n  caseTransform: props.caseTransform,\n  detectUids: props.detectUids,\n  uidFormat: props.uidFormat,\n  uidChars: props.uidChars,\n});\n\nconst breadcrumbs = ref<BreadcrumbItem[]>([]);\nconst currentPath = ref<string>('');\n\n// Color configurations\nconst separatorColor = computed(() => \n  isDark.value ? 'rgb(100, 116, 139)' : 'rgb(156, 163, 175)'\n);\n\nconst displayBreadcrumbs = computed(() => breadcrumbs.value);\n\nconst isLastItem = (index: number) => index === breadcrumbs.value.length - 1;\n\nconst isNavigable = (breadcrumb: BreadcrumbItem) => {\n  const resolved = router.resolve(breadcrumb.fullPath);\n  const isErrorPage = resolved.matched.some((route: { meta?: RouteMeta }) => route.meta?.isErrorPage);\n  return resolved && resolved.matched.length > 0 && !isErrorPage;\n};\n\nconst getBreadcrumbClasses = (index: number, breadcrumb: BreadcrumbItem) => {\n  const isLast = isLastItem(index);\n  const navigable = isNavigable(breadcrumb);\n  \n  return [\n    // Hover state for clickable items\n    !isLast && navigable && 'hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700/50',\n    // Cursor\n    isLast ? 'sl-cursor-default' : navigable ? 'sl-cursor-pointer' : 'sl-cursor-not-allowed',\n    // Focus ring\n    !isLast && 'focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-1 focus:sl-ring-blue-500 dark:focus:sl-ring-offset-slate-900',\n  ].filter(Boolean);\n};\n\nconst getBreadcrumbStyle = (index: number) => {\n  const isLast = isLastItem(index);\n  \n  if (isLast) {\n    // Current page - more prominent\n    return {\n      color: isDark.value ? 'rgb(241, 245, 249)' : 'rgb(15, 23, 42)', // slate-100 / slate-900\n      fontWeight: '600',\n    };\n  }\n  \n  // Parent segments - muted\n  return {\n    color: isDark.value ? 'rgb(148, 163, 184)' : 'rgb(100, 116, 139)', // slate-400 / slate-500\n  };\n};\n\nconst processSegments = async () => {\n  const path = route.path;\n  currentPath.value = path;\n  const pathSegments = path.split('/').filter(Boolean);\n  const tempBreadcrumbs: BreadcrumbItem[] = [];\n\n  // Add home segment if configured\n  if (props.homeSegment.show) {\n    tempBreadcrumbs.push({\n      display: props.homeSegment.label || 'Home',\n      original: 'home',\n      fullPath: props.homeSegment.path || '/',\n      isUid: false,\n      truncated: false,\n      loading: false,\n    });\n  }\n\n  // Process each segment\n  for (const [index, segment] of pathSegments.entries()) {\n    // Skip excluded segments\n    if (props.excludeSegments.includes(segment)) continue;\n\n    const fullPath = '/' + pathSegments.slice(0, index + 1).join('/');\n    \n    // Check for custom label mapping first\n    if (props.segmentLabels[segment]) {\n      tempBreadcrumbs.push({\n        display: props.segmentLabels[segment],\n        original: segment,\n        fullPath,\n        isUid: false,\n        truncated: false,\n        loading: false,\n      });\n      continue;\n    }\n\n    // Check for custom segment transform\n    if (props.segmentTransform) {\n      const customResult = props.segmentTransform(segment, index, fullPath);\n      if (customResult !== null) {\n        tempBreadcrumbs.push({\n          display: customResult,\n          original: segment,\n          fullPath,\n          isUid: isUidLike(segment),\n          truncated: customResult.length < segment.length,\n          loading: false,\n        });\n        continue;\n      }\n    }\n\n    // Use string transform composable\n    const result = transform(segment);\n    \n    tempBreadcrumbs.push({\n      display: result.display,\n      original: segment,\n      fullPath,\n      isUid: result.isUid,\n      truncated: result.truncated,\n      loading: false,\n    });\n  }\n\n  breadcrumbs.value = tempBreadcrumbs;\n\n  // Handle async lookups for UIDs\n  if (props.lookupFn) {\n    for (let i = 0; i < breadcrumbs.value.length; i++) {\n      const bc = breadcrumbs.value[i];\n      if (bc.isUid) {\n        // Set loading state\n        breadcrumbs.value[i] = { ...bc, loading: true };\n        \n        try {\n          const result = await transformAsync(bc.original, {\n            lookupFn: props.lookupFn,\n          });\n          \n          breadcrumbs.value[i] = {\n            ...breadcrumbs.value[i],\n            display: result.display,\n            isUid: result.isUid,\n            truncated: result.truncated,\n            loading: false,\n          };\n        } catch {\n          breadcrumbs.value[i] = { ...breadcrumbs.value[i], loading: false };\n        }\n      }\n    }\n  }\n};\n\nconst handleClick = (breadcrumb: BreadcrumbItem, index: number, event: MouseEvent) => {\n  emit('click', breadcrumb, event);\n  \n  if (event.defaultPrevented) return;\n  if (isLastItem(index)) return;\n  if (!isNavigable(breadcrumb)) {\n    event.preventDefault();\n    return;\n  }\n  \n  emit('navigate', breadcrumb.fullPath, event);\n  \n  if (!event.defaultPrevented) {\n    event.preventDefault();\n    router.push(breadcrumb.fullPath);\n  }\n};\n\nwatchEffect(() => {\n  processSegments();\n});\n</script>\n\n<style scoped>\n/* Smooth transitions for breadcrumb items */\na, span {\n  transition: color 0.15s ease, background-color 0.15s ease;\n}\n</style>\n"],"names":["props","__props","emit","__emit","route","useRoute","router","useRouter","isDark","useTheme","transform","transformAsync","isUidLike","useStringTransform","breadcrumbs","ref","currentPath","separatorColor","computed","displayBreadcrumbs","isLastItem","index","isNavigable","breadcrumb","resolved","isErrorPage","getBreadcrumbClasses","isLast","navigable","getBreadcrumbStyle","processSegments","path","pathSegments","tempBreadcrumbs","segment","fullPath","customResult","result","i","bc","handleClick","event","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_Fragment","_renderList","_createBlock","_unref","ChevronRightIcon","_resolveDynamicComponent","_normalizeStyle","e","_hoisted_3","_cache","_toDisplayString","_hoisted_4"],"mappings":"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"}

package/dist/components/Button.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiButton'
-import StachelockUI from '../src/components/UiButton'
-export default StachelockUI
+export {}

package/dist/components/Button.js

@@ -1,9 +1,9 @@
-import { defineComponent as G, defineAsyncComponent as H, computed as l, ref as B, onMounted as J, nextTick as L, watch as K, createElementBlock as o, openBlock as t, normalizeStyle as Q, normalizeClass as n, createCommentVNode as d, createElementVNode as X, renderSlot as u, Fragment as Y, createVNode as m, unref as c, toDisplayString as Z } from "vue";
+import { defineComponent as G, defineAsyncComponent as H, computed as l, ref as L, onMounted as J, nextTick as I, watch as K, createElementBlock as t, openBlock as o, normalizeStyle as Q, normalizeClass as n, createCommentVNode as d, createElementVNode as X, renderSlot as u, Fragment as Y, createVNode as m, unref as c, toDisplayString as Z } from "vue";
 import { _ as ee } from "../_plugin-vue_export-helper-CHgC5LLL.js";
 const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2" }, re = {
   key: 0,
   class: "sl-ml-2"
-}, oe = "sl-flex sl-items-center sl-flex-shrink-0", I = "sl-absolute sl-right-2 sl-top-1/2 -sl-translate-y-1/2 sl-flex sl-items-center sl-flex-shrink-0", te = /* @__PURE__ */ G({
+}, te = "sl-flex sl-items-center sl-flex-shrink-0", z = "sl-absolute sl-right-2 sl-top-1/2 -sl-translate-y-1/2 sl-flex sl-items-center sl-flex-shrink-0", oe = /* @__PURE__ */ G({
   __name: "UiButton",
   props: {
     replaceLeadingIconWithLoading: { type: Boolean, default: !1 },
@@ -30,8 +30,8 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
     inlineFlex: { type: Boolean, default: !1 }
   },
   emits: ["button-click", "hover-enter", "hover-leave"],
-  setup(z, { emit: _ }) {
-    const b = H(() => import("./Loading.js")), e = z, h = _, g = l(() => !!e.loading), y = l(() => e.replaceLeadingIconWithLoading || !1), p = B(null), f = B(e.theme ?? "primary"), S = (s) => {
+  setup(p, { emit: S }) {
+    const b = H(() => import("./Loading.js")), e = p, h = S, g = l(() => !!e.loading), y = l(() => e.replaceLeadingIconWithLoading || !1), x = L(null), f = L(e.theme ?? "primary"), _ = (s) => {
       for (; s && s !== document.documentElement; ) {
         const r = window.getComputedStyle(s).backgroundColor;
         if (r && r !== "rgba(0, 0, 0, 0)" && r !== "transparent")
@@ -39,24 +39,24 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
         s = s.parentElement;
       }
       return null;
-    }, x = () => {
+    }, w = () => {
       if (!e.autoContrast) return;
-      const s = p.value;
+      const s = x.value;
       if (!s) return;
-      const r = S(s.parentElement);
+      const r = _(s.parentElement);
       if (!r) return;
       window.getComputedStyle(s).backgroundColor === r && (f.value = f.value === "light" ? "primary" : "light");
     };
     J(() => {
-      L(x);
+      I(w);
     }), K(
       () => e.theme,
       (s) => {
-        f.value = s || "primary", L(x);
+        f.value = s || "primary", I(w);
       },
       { immediate: !1 }
     );
-    const i = l(() => f.value), w = l(() => e.loadingSize || e.size || "md"), v = l(() => {
+    const i = l(() => f.value), C = l(() => e.loadingSize || e.size || "md"), v = l(() => {
       const s = ["primary", "dark", "danger", "success", "warning"];
       return !e.outlined && s.includes(i.value) ? "light" : i.value;
     }), M = l(() => {
@@ -122,7 +122,7 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
         // Consistent spacing between icon and text
       ]];
       if (!a.value && (e.leadingIcon || e.trailingIcon)) {
-        const C = {
+        const B = {
           xs: "!sl-p-1.5",
           sm: "!sl-p-2",
           md: "!sl-p-2.5",
@@ -130,7 +130,7 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
           xl: "!sl-p-3.5",
           "2xl": "!sl-p-4"
         };
-        r.push(C[e.size || "md"] || "!sl-p-2.5");
+        r.push(B[e.size || "md"] || "!sl-p-2.5");
       }
       return e.centerLeadingIcon && !a.value ? r.push("sl-w-full", "sl-h-full") : (e.leadingIcon || e.inlineFlex || e.trailingIcon) && r.push("sl-inline-flex"), r.filter(Boolean);
     }), V = l(() => e.theme === "primary" ? e.outlined ? {
@@ -140,16 +140,16 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
     } : {
       backgroundColor: "var(--sl-color-primary-600, #3e4b9a)",
       "--tw-ring-color": "var(--sl-color-primary-500, #4d5ec0)"
-    } : {}), W = l(() => e.trailingOverlay ? I : oe), A = l(() => e.trailingOverlay ? `${I}` : "sl-flex sl-items-center sl-flex-shrink-0"), k = l(() => e.centerLeadingIcon && !a.value ? "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full" : e.centerLeadingIcon ? "sl-h-full sl-flex sl-items-center sl-justify-center" : a.value ? "sl-flex sl-items-center sl-justify-center sl-flex-shrink-0" : "sl-flex sl-items-center sl-justify-center"), R = () => {
+    } : {}), W = l(() => e.trailingOverlay ? z : te), A = l(() => e.trailingOverlay ? `${z}` : "sl-flex sl-items-center sl-flex-shrink-0"), k = l(() => e.centerLeadingIcon && !a.value ? "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full" : e.centerLeadingIcon ? "sl-h-full sl-flex sl-items-center sl-justify-center" : a.value ? "sl-flex sl-items-center sl-justify-center sl-flex-shrink-0" : "sl-flex sl-items-center sl-justify-center"), R = () => {
       h("button-click");
     }, U = () => {
       h("hover-enter");
     }, q = () => {
       h("hover-leave");
     }, D = e.showLoadingTitle || !1;
-    return (s, r) => (t(), o("button", {
+    return (s, r) => (o(), t("button", {
       ref_key: "buttonRef",
-      ref: p,
+      ref: x,
       type: "button",
       disabled: e.disabled,
       class: n(P.value),
@@ -160,40 +160,40 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
       onMouseenter: U,
       onMouseleave: q
     }, [
-      e.centerLeadingIcon && !a.value ? (t(), o("div", {
+      e.centerLeadingIcon && !a.value ? (o(), t("div", {
         key: 0,
         class: n(k.value)
       }, [
         u(s.$slots, "leading-icon", {}, void 0, !0)
-      ], 2)) : (t(), o(Y, { key: 1 }, [
-        y.value && g.value ? (t(), o("div", {
+      ], 2)) : (o(), t(Y, { key: 1 }, [
+        y.value && g.value ? (o(), t("div", {
           key: 0,
           class: n(["sl-flex sl-items-center sl-justify-center", [k.value, a.value ? "" : "sl-h-full sl-w-full"]])
         }, [
           m(c(b), {
             theme: v.value,
-            size: w.value
+            size: C.value
           }, null, 8, ["theme", "size"])
-        ], 2)) : e.leadingIcon ? (t(), o("div", {
+        ], 2)) : e.leadingIcon ? (o(), t("div", {
           key: 1,
           class: n(k.value)
         }, [
           u(s.$slots, "leading-icon", {}, void 0, !0)
         ], 2)) : d("", !0)
       ], 64)),
-      a.value ? (t(), o("span", {
+      a.value ? (o(), t("span", {
         key: 2,
         class: n(["sl-flex-1 sl-text-center", [
-          { "sl-truncate sl-max-w-[150px]": s.truncateLabel },
+          { "sl-truncate sl-max-w-[150px]": p.truncateLabel },
           { "sl-mx-auto": !e.leadingIcon && !e.trailingIcon }
         ]])
-      }, Z(e.label), 3)) : !N.value && (!y.value || !g.value) && !e.centerLeadingIcon ? (t(), o("span", {
+      }, Z(e.label), 3)) : !N.value && (!y.value || !g.value) && !e.centerLeadingIcon ? (o(), t("span", {
         key: 3,
         class: n(["sl-flex", e.centerLabel || !e.leadingIcon && !e.trailingIcon ? "sl-justify-center sl-items-center sl-flex-1" : "sl-flex-1"])
       }, [
         u(s.$slots, "default", {}, void 0, !0)
       ], 2)) : d("", !0),
-      e.trailingLoading && g.value ? (t(), o("div", {
+      e.trailingLoading && g.value ? (o(), t("div", {
         key: 4,
         class: n(W.value)
       }, [
@@ -201,7 +201,7 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
           theme: v.value,
           size: e.trailingLoadingSize || "sm"
         }, null, 8, ["theme", "size"])
-      ], 2)) : e.trailingIcon ? (t(), o("div", {
+      ], 2)) : e.trailingIcon ? (o(), t("div", {
         key: 5,
         class: n(A.value)
       }, [
@@ -210,19 +210,19 @@ const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolu
       X("div", le, [
         u(s.$slots, "badge", {}, void 0, !0)
       ]),
-      g.value && !y.value && !e.trailingLoading ? (t(), o("div", {
+      g.value && !y.value && !e.trailingLoading ? (o(), t("div", {
         key: 6,
         class: n(["sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-rounded sl-z-10", M.value])
       }, [
         m(c(b), {
           theme: v.value,
-          size: w.value
+          size: C.value
         }, null, 8, ["theme", "size"]),
-        c(D) ? (t(), o("p", re, "Loading...")) : d("", !0)
+        c(D) ? (o(), t("p", re, "Loading...")) : d("", !0)
       ], 2)) : d("", !0)
     ], 46, se));
   }
-}), ie = /* @__PURE__ */ ee(te, [["__scopeId", "data-v-13d7b5df"]]);
+}), ie = /* @__PURE__ */ ee(oe, [["__scopeId", "data-v-13d7b5df"]]);
 export {
   ie as default
 };

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/UiButton.vue"],"sourcesContent":["<!--\n  @component UiButton\n  @description Versatile button component with theme, size, and loading support.\n  \n  @props\n  - theme (Theme, optional): Color theme variant - 'primary', 'secondary', 'success', 'warning', 'danger', 'dark', 'light', 'ghost'\n  - size (Size, optional): Button size - 'xs', 'sm', 'md', 'lg', 'xl', '2xl'\n  - label (string, optional): Text label (alternative to default slot)\n  - disabled (boolean, optional): Disabled state\n  - expanded (boolean, optional): Full width mode\n  - outlined (boolean, optional): Outlined variant\n  - loading (boolean, optional): Loading state with spinner\n  - leadingIcon (boolean, optional): Enable leading icon slot\n  - trailingIcon (boolean, optional): Enable trailing icon slot\n  - rounded (RoundedType, optional): Border radius style\n  \n  @emits\n  - button-click: Emitted when button is clicked\n  - hover-enter: Emitted on mouse enter\n  - hover-leave: Emitted on mouse leave\n  \n  @slots\n  - default: Button content/text\n  - leading-icon: Icon displayed before content\n  - trailing-icon: Icon displayed after content\n  - badge: Badge overlay positioned top-right\n  \n  @example\n  <UiButton theme=\"primary\" @button-click=\"handleClick\">\n    Click Me\n  </UiButton>\n  \n  @example\n  <UiButton leading-icon theme=\"success\">\n    <template #leading-icon><PlusIcon class=\"h-5 w-5\" /></template>\n    Add Item\n  </UiButton>\n-->\n<template>\n  <button\n    ref=\"buttonRef\"\n    type=\"button\"\n    :disabled=\"props.disabled\"\n    :class=\"buttonClasses\"\n    :style=\"buttonStyles\"\n    :data-theme=\"props.theme\"\n    :data-outlined=\"props.outlined || undefined\"\n    @click=\"onClick\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Leading Icon Area (or Loading Replacement) -->\n    <template v-if=\"props.centerLeadingIcon && !isLabelPresent\">\n      <div :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n    <template v-else>\n      <div\n        v-if=\"replaceLeadingIconWithLoading && loading\"\n        class=\"sl-flex sl-items-center sl-justify-center\"\n        :class=\"[leadingIconClasses, !isLabelPresent ? 'sl-h-full sl-w-full' : '']\"\n      >\n        <Loading :theme=\"loadingTheme\" :size=\"loadingSize\" />\n      </div>\n      <div v-else-if=\"props.leadingIcon\" :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n\n    <!-- Button Content (skip for icon-only buttons) -->\n    <span\n      v-if=\"isLabelPresent\"\n      class=\"sl-flex-1 sl-text-center\"\n      :class=\"[\n        { 'sl-truncate sl-max-w-[150px]': truncateLabel },\n        { 'sl-mx-auto': !props.leadingIcon && !props.trailingIcon }\n      ]\"\n    >\n      {{ props.label }}\n    </span>\n    <span\n      v-else-if=\"!isIconOnly && (!replaceLeadingIconWithLoading || !loading) && !props.centerLeadingIcon\"\n      class=\"sl-flex\"\n      :class=\"props.centerLabel || (!props.leadingIcon && !props.trailingIcon) ? 'sl-justify-center sl-items-center sl-flex-1' : 'sl-flex-1'\"\n    >\n      <slot />\n    </span>\n\n    <!-- Trailing Icon or Loading -->\n    <div v-if=\"props.trailingLoading && loading\" :class=\"trailingLoadingClasses\">\n      <Loading :theme=\"loadingTheme\" :size=\"props.trailingLoadingSize || 'sm'\" />\n    </div>\n    <div v-else-if=\"props.trailingIcon\" :class=\"trailingIconClasses\">\n      <slot name=\"trailing-icon\" />\n    </div>\n\n    <!-- Badge Slot -->\n    <div class=\"sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2\">\n      <slot name=\"badge\" />\n    </div>\n\n    <!-- Overlay Loading (if not replacing the leading icon and not using trailing loading) -->\n    <div\n      v-if=\"loading && !replaceLeadingIconWithLoading && !props.trailingLoading\"\n      class=\"sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-rounded sl-z-10\"\n      :class=\"loadingOverlayClasses\"\n    >\n      <Loading :theme=\"loadingTheme\" :size=\"loadingSize\" />\n      <p v-if=\"showLoadingTitle\" class=\"sl-ml-2\">Loading...</p>\n    </div>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\n/**\n * UiButton - Versatile button component with theme, size, and loading support\n * \n * A comprehensive button component supporting multiple themes, sizes, loading states,\n * and icon integration. Uses CSS variables for theming to allow brand customization.\n * \n * ## Features\n * - Multiple theme variants (primary, secondary, success, warning, danger, etc.)\n * - Size options from xs to 2xl\n * - Outlined variant for secondary actions\n * - Loading states with overlay, trailing, or leading replacement options\n * - Leading and trailing icon slots\n * - Badge slot for notifications\n * - Auto-contrast for background adaptation\n * \n * ## Usage\n * ```vue\n * <UiButton theme=\"primary\" size=\"md\" @button-click=\"handleClick\">\n *   Click Me\n * </UiButton>\n * \n * <UiButton leading-icon :loading=\"isLoading\">\n *   <template #leading-icon><PlusIcon /></template>\n *   Add Item\n * </UiButton>\n * ```\n * \n * ## Props\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | theme | Theme | 'primary' | Color theme variant |\n * | size | Size | 'md' | Button size |\n * | label | string | - | Text label (alternative to slot) |\n * | disabled | boolean | false | Disabled state |\n * | loading | boolean | false | Loading state |\n * | outlined | boolean | false | Outlined variant |\n * | expanded | boolean | false | Full width |\n * \n * ## Events\n * | Event | Payload | Description |\n * |-------|---------|-------------|\n * | button-click | void | Emitted on button click |\n * | hover-enter | void | Emitted on mouse enter |\n * | hover-leave | void | Emitted on mouse leave |\n * \n * ## Slots\n * | Slot | Description |\n * |------|-------------|\n * | default | Button content |\n * | leading-icon | Icon before content |\n * | trailing-icon | Icon after content |\n * | badge | Badge overlay (positioned top-right) |\n * \n * @module components/UiButton\n * @see {@link ButtonType} for prop interface\n */\nimport { computed, defineAsyncComponent, ref, onMounted, watch, nextTick } from 'vue';\nimport type { ButtonType } from '../types/ui';\nimport type { RoundedType, Theme } from '../types/core';\n\n// Asynchronously load the Loading component\nconst Loading = defineAsyncComponent(() => import('./UiLoading.vue'));\n\n// Define props using the ButtonType interface\ninterface ButtonProps extends ButtonType {\n  replaceLeadingIconWithLoading?: boolean;\n  centerLeadingIcon?: boolean;\n  /**\n   * When enabled, shows loading indicator in trailing position instead of overlay\n   */\n  trailingLoading?: boolean;\n  /**\n   * Size of the loading indicator when using trailingLoading\n   */\n  trailingLoadingSize?: import('../types/core').Size;\n  /**\n   * Positions trailing loading/icon absolutely at the far right, centered vertically.\n   */\n  trailingOverlay?: boolean;\n  /**\n   * When enabled the button will attempt to automatically choose a contrasting\n   * colour theme if its background matches that of its closest non-transparent\n   * ancestor.\n   */\n  autoContrast?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  theme: 'primary',\n  size: 'md',\n  rounded: 'rounded-md',\n  disabled: false,\n  expanded: false,\n  outlined: false,\n  loading: false,\n  leadingIcon: false,\n  trailingIcon: false,\n  showLoadingTitle: false,\n  truncateLabel: false,\n  centerLabel: false,\n  inlineFlex: false,\n  replaceLeadingIconWithLoading: false,\n  centerLeadingIcon: false,\n  trailingLoading: false,\n  trailingOverlay: false,\n  autoContrast: false,\n});\n\n// Define the emits\nconst emit = defineEmits<{\n  'button-click': []\n  'hover-enter': []\n  'hover-leave': []\n}>();\n\n// Reactive computed properties\nconst loading = computed(() => Boolean(props.loading));\nconst replaceLeadingIconWithLoading = computed(() => props.replaceLeadingIconWithLoading || false);\n\n// Reference to the underlying button element\nconst buttonRef = ref<HTMLElement | null>(null);\n\n// Internal reactive theme value that may be overridden for auto-contrast\nconst resolvedTheme = ref<Theme>(props.theme ?? 'primary');\n\nconst findParentBackground = (node: HTMLElement | null): string | null => {\n  while (node && node !== document.documentElement) {\n    const bg = window.getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n      return bg;\n    }\n    node = node.parentElement as HTMLElement | null;\n  }\n  return null;\n};\n\nconst adjustThemeBasedOnBackground = (): void => {\n  if (!props.autoContrast) return;\n  const el = buttonRef.value;\n  if (!el) return;\n\n  const parentBg = findParentBackground(el.parentElement as HTMLElement | null);\n  if (!parentBg) return;\n\n  const buttonBg = window.getComputedStyle(el).backgroundColor;\n\n  if (buttonBg === parentBg) {\n    resolvedTheme.value = resolvedTheme.value === 'light' ? 'primary' : 'light';\n  }\n};\n\nonMounted(() => {\n  nextTick(adjustThemeBasedOnBackground);\n});\n\nwatch(\n  () => props.theme,\n  (newTheme) => {\n    resolvedTheme.value = newTheme || 'primary';\n    nextTick(adjustThemeBasedOnBackground);\n  },\n  { immediate: false }\n);\n\n// Public computed theme\nconst theme = computed(() => resolvedTheme.value);\n\n// Compute loading size with fallback\nconst loadingSize = computed(() => props.loadingSize || props.size || 'md');\n\n// Determine loading theme based on button theme for proper contrast\nconst loadingTheme = computed(() => {\n  // For filled buttons with dark backgrounds, use light/white spinner\n  const darkBgThemes = ['primary', 'dark', 'danger', 'success', 'warning'];\n  if (!props.outlined && darkBgThemes.includes(theme.value)) {\n    return 'light'; // Light spinner on dark background\n  }\n  // For outlined or light buttons, use the button's theme color\n  return theme.value;\n});\n\n// Loading overlay classes based on button theme\nconst loadingOverlayClasses = computed(() => {\n  // For filled dark buttons, use semi-transparent dark overlay\n  const darkBgThemes = ['primary', 'dark', 'danger', 'success', 'warning'];\n  if (!props.outlined && darkBgThemes.includes(theme.value)) {\n    return 'sl-bg-black/20';\n  }\n  // For light/outlined buttons, use semi-transparent white/dark overlay\n  return 'sl-bg-white/75 dark:sl-bg-slate-900/75';\n});\n\n// Styling computed properties\nconst colorClass = computed(() => {\n  const outlineBaseClasses: Record<string, string> = {\n    primary: 'sl-text-stachelock-600 dark:sl-text-stachelock-400 sl-border sl-border-stachelock-600 dark:sl-border-stachelock-500 hover:sl-bg-stachelock-50 dark:hover:sl-bg-stachelock-900/30 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 dark:focus:sl-ring-stachelock-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    dark: 'sl-text-gray-700 dark:sl-text-gray-300 sl-border sl-border-gray-700 dark:sl-border-gray-500 hover:sl-bg-gray-50 dark:hover:sl-bg-gray-800 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    secondary: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    light: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    warning: 'sl-text-yellow-500 dark:sl-text-yellow-400 sl-border sl-border-yellow-500 dark:sl-border-yellow-500 hover:sl-bg-yellow-50 dark:hover:sl-bg-yellow-900/20 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 dark:focus:sl-ring-yellow-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    danger: 'sl-text-red-500 dark:sl-text-red-400 sl-border sl-border-red-500 dark:sl-border-red-500 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 dark:focus:sl-ring-red-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    success: 'sl-text-green-500 dark:sl-text-green-400 sl-border sl-border-green-500 dark:sl-border-green-500 hover:sl-bg-green-50 dark:hover:sl-bg-green-900/20 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 dark:focus:sl-ring-green-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    ghost: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none',\n  };\n\n  const filledBaseClasses: Record<string, string> = {\n    primary: 'sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    dark: 'sl-border sl-border-transparent sl-bg-gray-700 dark:sl-bg-gray-600 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 dark:hover:sl-bg-gray-500 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    secondary: 'sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600',\n    light: 'sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600',\n    warning: 'sl-border sl-border-transparent sl-bg-yellow-400 dark:sl-bg-yellow-500 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 dark:hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    danger: 'sl-border sl-border-transparent sl-bg-red-500 dark:sl-bg-red-600 sl-text-white sl-shadow-sm hover:sl-bg-red-600 dark:hover:sl-bg-red-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    success: 'sl-border sl-border-transparent sl-bg-green-500 dark:sl-bg-green-600 sl-text-white sl-shadow-sm hover:sl-bg-green-600 dark:hover:sl-bg-green-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    ghost: 'sl-border sl-border-transparent sl-text-gray-800 dark:sl-text-gray-200 sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none',\n  };\n\n  if (props.outlined) {\n    return `${outlineBaseClasses[theme.value] || ''} sl-bg-transparent dark:sl-bg-transparent`;\n  } else {\n    return filledBaseClasses[theme.value] || '';\n  }\n});\n\nconst roundedClassMap: Record<RoundedType, string> = {\n  square: '',\n  rounded: 'sl-rounded',\n  'rounded-md': 'sl-rounded-md',\n  'rounded-lg': 'sl-rounded-lg',\n  'rounded-full': 'sl-rounded-full',\n};\n\nconst roundedClass = computed(() => roundedClassMap[props.rounded || 'rounded-md']);\n\n// Separate horizontal and vertical padding for better control\nconst sizeClass = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-px-2 sl-py-1',\n    sm: 'sl-px-2.5 sl-py-1.5',\n    md: 'sl-px-3 sl-py-1.5',\n    lg: 'sl-px-4 sl-py-2',\n    xl: 'sl-px-5 sl-py-2.5',\n    '2xl': 'sl-px-6 sl-py-3',\n  };\n  return sizeMapping[props.size || 'md'];\n});\n\nconst textClass = computed(() => {\n  const textMapping: Record<string, string> = {\n    xs: 'sl-text-xs sl-font-regular',\n    sm: 'sl-text-sm sl-font-regular',\n    md: 'sl-text-base sl-font-medium',\n    lg: 'sl-text-lg sl-font-medium',\n    xl: 'sl-text-xl sl-font-medium',\n    '2xl': 'sl-text-2xl sl-font-medium',\n  };\n  return textMapping[props.size || 'sm'];\n});\n\nconst expandedClass = computed(() => (props.expanded ? 'sl-w-full' : ''));\n\nconst isLabelPresent = computed(() => !!props.label && props.label.length > 0);\n\n// Determine if this is an icon-only button (leading/trailing icon with no label)\nconst isIconOnly = computed(() => {\n  return !isLabelPresent.value && (props.leadingIcon || props.trailingIcon);\n});\n\nconst buttonClasses = computed(() => {\n  if (props.customClass) {\n    return props.customClass;\n  }\n\n  const coreClasses = [\n    roundedClass.value,\n    sizeClass.value,\n    textClass.value,\n    expandedClass.value,\n    colorClass.value,\n    props.disabled ? 'sl-cursor-not-allowed' : 'sl-cursor-pointer',\n    'focus:sl-ring-0',\n    'sl-relative',\n    'sl-flex',\n    'sl-items-center',\n    'sl-justify-center',\n    'sl-gap-2', // Consistent spacing between icon and text\n  ];\n\n  const finalClasses = [...coreClasses];\n\n  // For icon-only buttons (no label/text), use equal padding for square proportions\n  if (!isLabelPresent.value && (props.leadingIcon || props.trailingIcon)) {\n    // Size-aware square padding for icon-only buttons\n    const iconOnlyPadding: Record<string, string> = {\n      xs: '!sl-p-1.5',\n      sm: '!sl-p-2',\n      md: '!sl-p-2.5',\n      lg: '!sl-p-3',\n      xl: '!sl-p-3.5',\n      '2xl': '!sl-p-4',\n    };\n    finalClasses.push(iconOnlyPadding[props.size || 'md'] || '!sl-p-2.5');\n  }\n\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    finalClasses.push('sl-w-full', 'sl-h-full');\n  } else {\n    if (props.leadingIcon || props.inlineFlex || props.trailingIcon) {\n      finalClasses.push('sl-inline-flex');\n    }\n  }\n\n  return finalClasses.filter(Boolean);\n});\n\nconst buttonStyles = computed(() => {\n  if (props.theme === 'primary') {\n    // Only apply background color for filled primary buttons, not outlined\n    if (props.outlined) {\n      return {\n        color: 'var(--sl-color-primary-600, #3e4b9a)',\n        borderColor: 'var(--sl-color-primary-600, #3e4b9a)',\n        '--tw-ring-color': 'var(--sl-color-primary-500, #4d5ec0)',\n      };\n    }\n    return {\n      backgroundColor: 'var(--sl-color-primary-600, #3e4b9a)',\n      '--tw-ring-color': 'var(--sl-color-primary-500, #4d5ec0)',\n    };\n  }\n  return {};\n});\n\n// Gap on parent handles spacing, no margins needed\nconst trailingBaseClasses = 'sl-flex sl-items-center sl-flex-shrink-0';\nconst trailingAbsoluteClasses = 'sl-absolute sl-right-2 sl-top-1/2 -sl-translate-y-1/2 sl-flex sl-items-center sl-flex-shrink-0';\nconst trailingLoadingClasses = computed(() => props.trailingOverlay ? trailingAbsoluteClasses : trailingBaseClasses);\nconst trailingIconClasses = computed(() => props.trailingOverlay ? `${trailingAbsoluteClasses}` : 'sl-flex sl-items-center sl-flex-shrink-0');\n\nconst leadingIconClasses = computed(() => {\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    return 'sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full';\n  }\n  if (props.centerLeadingIcon) {\n    return 'sl-h-full sl-flex sl-items-center sl-justify-center';\n  }\n  if (!isLabelPresent.value) {\n    return 'sl-flex sl-items-center sl-justify-center';\n  }\n  // Gap on parent handles spacing\n  return 'sl-flex sl-items-center sl-justify-center sl-flex-shrink-0';\n});\n\nconst onClick = (): void => {\n  emit('button-click');\n};\n\nconst onMouseEnter = (): void => {\n  emit('hover-enter');\n};\n\nconst onMouseLeave = (): void => {\n  emit('hover-leave');\n};\n\nconst showLoadingTitle = props.showLoadingTitle || false;\n</script>\n\n<style scoped>\n/* Filled primary button hover */\nbutton[data-theme=\"primary\"]:not([data-outlined]):hover {\n  background-color: var(--sl-color-primary-700, #2e3873) !important;\n}\n\n/* Outlined primary button hover - subtle background */\nbutton[data-theme=\"primary\"][data-outlined]:hover {\n  background-color: rgb(var(--sl-color-primary-50-rgb, 237 239 249) / 0.5) !important;\n}\n\n/* Dark mode: Outlined primary button hover */\n:global(.dark) button[data-theme=\"primary\"][data-outlined]:hover {\n  background-color: rgb(var(--sl-color-primary-900-rgb, 15 19 38) / 0.3) !important;\n}\n</style>\n\n\n"],"names":["trailingBaseClasses","trailingAbsoluteClasses","Loading","defineAsyncComponent","props","__props","emit","__emit","loading","computed","replaceLeadingIconWithLoading","buttonRef","ref","resolvedTheme","findParentBackground","node","bg","adjustThemeBasedOnBackground","el","parentBg","onMounted","nextTick","watch","newTheme","theme","loadingSize","loadingTheme","darkBgThemes","loadingOverlayClasses","colorClass","outlineBaseClasses","filledBaseClasses","roundedClassMap","roundedClass","sizeClass","textClass","expandedClass","isLabelPresent","isIconOnly","buttonClasses","finalClasses","iconOnlyPadding","buttonStyles","trailingLoadingClasses","trailingIconClasses","leadingIconClasses","onClick","onMouseEnter","onMouseLeave","showLoadingTitle","_createElementBlock","_renderSlot","_ctx","_Fragment","_normalizeClass","_createVNode","_unref","truncateLabel","_toDisplayString","_createElementVNode","_hoisted_2","_hoisted_3"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/components/UiButton.vue"],"sourcesContent":["<!--\n  @component UiButton\n  @description Versatile button component with theme, size, and loading support.\n  \n  @props\n  - theme (Theme, optional): Color theme variant - 'primary', 'secondary', 'success', 'warning', 'danger', 'dark', 'light', 'ghost'\n  - size (Size, optional): Button size - 'xs', 'sm', 'md', 'lg', 'xl', '2xl'\n  - label (string, optional): Text label (alternative to default slot)\n  - disabled (boolean, optional): Disabled state\n  - expanded (boolean, optional): Full width mode\n  - outlined (boolean, optional): Outlined variant\n  - loading (boolean, optional): Loading state with spinner\n  - leadingIcon (boolean, optional): Enable leading icon slot\n  - trailingIcon (boolean, optional): Enable trailing icon slot\n  - rounded (RoundedType, optional): Border radius style\n  \n  @emits\n  - button-click: Emitted when button is clicked\n  - hover-enter: Emitted on mouse enter\n  - hover-leave: Emitted on mouse leave\n  \n  @slots\n  - default: Button content/text\n  - leading-icon: Icon displayed before content\n  - trailing-icon: Icon displayed after content\n  - badge: Badge overlay positioned top-right\n  \n  @example\n  <UiButton theme=\"primary\" @button-click=\"handleClick\">\n    Click Me\n  </UiButton>\n  \n  @example\n  <UiButton leading-icon theme=\"success\">\n    <template #leading-icon><PlusIcon class=\"h-5 w-5\" /></template>\n    Add Item\n  </UiButton>\n-->\n<template>\n  <button\n    ref=\"buttonRef\"\n    type=\"button\"\n    :disabled=\"props.disabled\"\n    :class=\"buttonClasses\"\n    :style=\"buttonStyles\"\n    :data-theme=\"props.theme\"\n    :data-outlined=\"props.outlined || undefined\"\n    @click=\"onClick\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Leading Icon Area (or Loading Replacement) -->\n    <template v-if=\"props.centerLeadingIcon && !isLabelPresent\">\n      <div :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n    <template v-else>\n      <div\n        v-if=\"replaceLeadingIconWithLoading && loading\"\n        class=\"sl-flex sl-items-center sl-justify-center\"\n        :class=\"[leadingIconClasses, !isLabelPresent ? 'sl-h-full sl-w-full' : '']\"\n      >\n        <Loading :theme=\"loadingTheme\" :size=\"loadingSize\" />\n      </div>\n      <div v-else-if=\"props.leadingIcon\" :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n\n    <!-- Button Content (skip for icon-only buttons) -->\n    <span\n      v-if=\"isLabelPresent\"\n      class=\"sl-flex-1 sl-text-center\"\n      :class=\"[\n        { 'sl-truncate sl-max-w-[150px]': truncateLabel },\n        { 'sl-mx-auto': !props.leadingIcon && !props.trailingIcon }\n      ]\"\n    >\n      {{ props.label }}\n    </span>\n    <span\n      v-else-if=\"!isIconOnly && (!replaceLeadingIconWithLoading || !loading) && !props.centerLeadingIcon\"\n      class=\"sl-flex\"\n      :class=\"props.centerLabel || (!props.leadingIcon && !props.trailingIcon) ? 'sl-justify-center sl-items-center sl-flex-1' : 'sl-flex-1'\"\n    >\n      <slot />\n    </span>\n\n    <!-- Trailing Icon or Loading -->\n    <div v-if=\"props.trailingLoading && loading\" :class=\"trailingLoadingClasses\">\n      <Loading :theme=\"loadingTheme\" :size=\"props.trailingLoadingSize || 'sm'\" />\n    </div>\n    <div v-else-if=\"props.trailingIcon\" :class=\"trailingIconClasses\">\n      <slot name=\"trailing-icon\" />\n    </div>\n\n    <!-- Badge Slot -->\n    <div class=\"sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2\">\n      <slot name=\"badge\" />\n    </div>\n\n    <!-- Overlay Loading (if not replacing the leading icon and not using trailing loading) -->\n    <div\n      v-if=\"loading && !replaceLeadingIconWithLoading && !props.trailingLoading\"\n      class=\"sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-rounded sl-z-10\"\n      :class=\"loadingOverlayClasses\"\n    >\n      <Loading :theme=\"loadingTheme\" :size=\"loadingSize\" />\n      <p v-if=\"showLoadingTitle\" class=\"sl-ml-2\">Loading...</p>\n    </div>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\n/**\n * UiButton - Versatile button component with theme, size, and loading support\n * \n * A comprehensive button component supporting multiple themes, sizes, loading states,\n * and icon integration. Uses CSS variables for theming to allow brand customization.\n * \n * ## Features\n * - Multiple theme variants (primary, secondary, success, warning, danger, etc.)\n * - Size options from xs to 2xl\n * - Outlined variant for secondary actions\n * - Loading states with overlay, trailing, or leading replacement options\n * - Leading and trailing icon slots\n * - Badge slot for notifications\n * - Auto-contrast for background adaptation\n * \n * ## Usage\n * ```vue\n * <UiButton theme=\"primary\" size=\"md\" @button-click=\"handleClick\">\n *   Click Me\n * </UiButton>\n * \n * <UiButton leading-icon :loading=\"isLoading\">\n *   <template #leading-icon><PlusIcon /></template>\n *   Add Item\n * </UiButton>\n * ```\n * \n * ## Props\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | theme | Theme | 'primary' | Color theme variant |\n * | size | Size | 'md' | Button size |\n * | label | string | - | Text label (alternative to slot) |\n * | disabled | boolean | false | Disabled state |\n * | loading | boolean | false | Loading state |\n * | outlined | boolean | false | Outlined variant |\n * | expanded | boolean | false | Full width |\n * \n * ## Events\n * | Event | Payload | Description |\n * |-------|---------|-------------|\n * | button-click | void | Emitted on button click |\n * | hover-enter | void | Emitted on mouse enter |\n * | hover-leave | void | Emitted on mouse leave |\n * \n * ## Slots\n * | Slot | Description |\n * |------|-------------|\n * | default | Button content |\n * | leading-icon | Icon before content |\n * | trailing-icon | Icon after content |\n * | badge | Badge overlay (positioned top-right) |\n * \n * @module components/UiButton\n * @see {@link ButtonType} for prop interface\n */\nimport { computed, defineAsyncComponent, ref, onMounted, watch, nextTick } from 'vue';\nimport type { ButtonType } from '../types/ui';\nimport type { RoundedType, Theme } from '../types/core';\n\n// Asynchronously load the Loading component\nconst Loading = defineAsyncComponent(() => import('./UiLoading.vue'));\n\n// Define props using the ButtonType interface\ninterface ButtonProps extends ButtonType {\n  replaceLeadingIconWithLoading?: boolean;\n  centerLeadingIcon?: boolean;\n  /**\n   * When enabled, shows loading indicator in trailing position instead of overlay\n   */\n  trailingLoading?: boolean;\n  /**\n   * Size of the loading indicator when using trailingLoading\n   */\n  trailingLoadingSize?: import('../types/core').Size;\n  /**\n   * Positions trailing loading/icon absolutely at the far right, centered vertically.\n   */\n  trailingOverlay?: boolean;\n  /**\n   * When enabled the button will attempt to automatically choose a contrasting\n   * colour theme if its background matches that of its closest non-transparent\n   * ancestor.\n   */\n  autoContrast?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  theme: 'primary',\n  size: 'md',\n  rounded: 'rounded-md',\n  disabled: false,\n  expanded: false,\n  outlined: false,\n  loading: false,\n  leadingIcon: false,\n  trailingIcon: false,\n  showLoadingTitle: false,\n  truncateLabel: false,\n  centerLabel: false,\n  inlineFlex: false,\n  replaceLeadingIconWithLoading: false,\n  centerLeadingIcon: false,\n  trailingLoading: false,\n  trailingOverlay: false,\n  autoContrast: false,\n});\n\n// Define the emits\nconst emit = defineEmits<{\n  'button-click': []\n  'hover-enter': []\n  'hover-leave': []\n}>();\n\n// Reactive computed properties\nconst loading = computed(() => Boolean(props.loading));\nconst replaceLeadingIconWithLoading = computed(() => props.replaceLeadingIconWithLoading || false);\n\n// Reference to the underlying button element\nconst buttonRef = ref<HTMLElement | null>(null);\n\n// Internal reactive theme value that may be overridden for auto-contrast\nconst resolvedTheme = ref<Theme>(props.theme ?? 'primary');\n\nconst findParentBackground = (node: HTMLElement | null): string | null => {\n  while (node && node !== document.documentElement) {\n    const bg = window.getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n      return bg;\n    }\n    node = node.parentElement as HTMLElement | null;\n  }\n  return null;\n};\n\nconst adjustThemeBasedOnBackground = (): void => {\n  if (!props.autoContrast) return;\n  const el = buttonRef.value;\n  if (!el) return;\n\n  const parentBg = findParentBackground(el.parentElement as HTMLElement | null);\n  if (!parentBg) return;\n\n  const buttonBg = window.getComputedStyle(el).backgroundColor;\n\n  if (buttonBg === parentBg) {\n    resolvedTheme.value = resolvedTheme.value === 'light' ? 'primary' : 'light';\n  }\n};\n\nonMounted(() => {\n  nextTick(adjustThemeBasedOnBackground);\n});\n\nwatch(\n  () => props.theme,\n  (newTheme) => {\n    resolvedTheme.value = newTheme || 'primary';\n    nextTick(adjustThemeBasedOnBackground);\n  },\n  { immediate: false }\n);\n\n// Public computed theme\nconst theme = computed(() => resolvedTheme.value);\n\n// Compute loading size with fallback\nconst loadingSize = computed(() => props.loadingSize || props.size || 'md');\n\n// Determine loading theme based on button theme for proper contrast\nconst loadingTheme = computed(() => {\n  // For filled buttons with dark backgrounds, use light/white spinner\n  const darkBgThemes = ['primary', 'dark', 'danger', 'success', 'warning'];\n  if (!props.outlined && darkBgThemes.includes(theme.value)) {\n    return 'light'; // Light spinner on dark background\n  }\n  // For outlined or light buttons, use the button's theme color\n  return theme.value;\n});\n\n// Loading overlay classes based on button theme\nconst loadingOverlayClasses = computed(() => {\n  // For filled dark buttons, use semi-transparent dark overlay\n  const darkBgThemes = ['primary', 'dark', 'danger', 'success', 'warning'];\n  if (!props.outlined && darkBgThemes.includes(theme.value)) {\n    return 'sl-bg-black/20';\n  }\n  // For light/outlined buttons, use semi-transparent white/dark overlay\n  return 'sl-bg-white/75 dark:sl-bg-slate-900/75';\n});\n\n// Styling computed properties\nconst colorClass = computed(() => {\n  const outlineBaseClasses: Record<string, string> = {\n    primary: 'sl-text-stachelock-600 dark:sl-text-stachelock-400 sl-border sl-border-stachelock-600 dark:sl-border-stachelock-500 hover:sl-bg-stachelock-50 dark:hover:sl-bg-stachelock-900/30 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 dark:focus:sl-ring-stachelock-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    dark: 'sl-text-gray-700 dark:sl-text-gray-300 sl-border sl-border-gray-700 dark:sl-border-gray-500 hover:sl-bg-gray-50 dark:hover:sl-bg-gray-800 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    secondary: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    light: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    warning: 'sl-text-yellow-500 dark:sl-text-yellow-400 sl-border sl-border-yellow-500 dark:sl-border-yellow-500 hover:sl-bg-yellow-50 dark:hover:sl-bg-yellow-900/20 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 dark:focus:sl-ring-yellow-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    danger: 'sl-text-red-500 dark:sl-text-red-400 sl-border sl-border-red-500 dark:sl-border-red-500 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 dark:focus:sl-ring-red-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    success: 'sl-text-green-500 dark:sl-text-green-400 sl-border sl-border-green-500 dark:sl-border-green-500 hover:sl-bg-green-50 dark:hover:sl-bg-green-900/20 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 dark:focus:sl-ring-green-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    ghost: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none',\n  };\n\n  const filledBaseClasses: Record<string, string> = {\n    primary: 'sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    dark: 'sl-border sl-border-transparent sl-bg-gray-700 dark:sl-bg-gray-600 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 dark:hover:sl-bg-gray-500 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    secondary: 'sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600',\n    light: 'sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600',\n    warning: 'sl-border sl-border-transparent sl-bg-yellow-400 dark:sl-bg-yellow-500 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 dark:hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    danger: 'sl-border sl-border-transparent sl-bg-red-500 dark:sl-bg-red-600 sl-text-white sl-shadow-sm hover:sl-bg-red-600 dark:hover:sl-bg-red-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    success: 'sl-border sl-border-transparent sl-bg-green-500 dark:sl-bg-green-600 sl-text-white sl-shadow-sm hover:sl-bg-green-600 dark:hover:sl-bg-green-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    ghost: 'sl-border sl-border-transparent sl-text-gray-800 dark:sl-text-gray-200 sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none',\n  };\n\n  if (props.outlined) {\n    return `${outlineBaseClasses[theme.value] || ''} sl-bg-transparent dark:sl-bg-transparent`;\n  } else {\n    return filledBaseClasses[theme.value] || '';\n  }\n});\n\nconst roundedClassMap: Record<RoundedType, string> = {\n  square: '',\n  rounded: 'sl-rounded',\n  'rounded-md': 'sl-rounded-md',\n  'rounded-lg': 'sl-rounded-lg',\n  'rounded-full': 'sl-rounded-full',\n};\n\nconst roundedClass = computed(() => roundedClassMap[props.rounded || 'rounded-md']);\n\n// Separate horizontal and vertical padding for better control\nconst sizeClass = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-px-2 sl-py-1',\n    sm: 'sl-px-2.5 sl-py-1.5',\n    md: 'sl-px-3 sl-py-1.5',\n    lg: 'sl-px-4 sl-py-2',\n    xl: 'sl-px-5 sl-py-2.5',\n    '2xl': 'sl-px-6 sl-py-3',\n  };\n  return sizeMapping[props.size || 'md'];\n});\n\nconst textClass = computed(() => {\n  const textMapping: Record<string, string> = {\n    xs: 'sl-text-xs sl-font-regular',\n    sm: 'sl-text-sm sl-font-regular',\n    md: 'sl-text-base sl-font-medium',\n    lg: 'sl-text-lg sl-font-medium',\n    xl: 'sl-text-xl sl-font-medium',\n    '2xl': 'sl-text-2xl sl-font-medium',\n  };\n  return textMapping[props.size || 'sm'];\n});\n\nconst expandedClass = computed(() => (props.expanded ? 'sl-w-full' : ''));\n\nconst isLabelPresent = computed(() => !!props.label && props.label.length > 0);\n\n// Determine if this is an icon-only button (leading/trailing icon with no label)\nconst isIconOnly = computed(() => {\n  return !isLabelPresent.value && (props.leadingIcon || props.trailingIcon);\n});\n\nconst buttonClasses = computed(() => {\n  if (props.customClass) {\n    return props.customClass;\n  }\n\n  const coreClasses = [\n    roundedClass.value,\n    sizeClass.value,\n    textClass.value,\n    expandedClass.value,\n    colorClass.value,\n    props.disabled ? 'sl-cursor-not-allowed' : 'sl-cursor-pointer',\n    'focus:sl-ring-0',\n    'sl-relative',\n    'sl-flex',\n    'sl-items-center',\n    'sl-justify-center',\n    'sl-gap-2', // Consistent spacing between icon and text\n  ];\n\n  const finalClasses = [...coreClasses];\n\n  // For icon-only buttons (no label/text), use equal padding for square proportions\n  if (!isLabelPresent.value && (props.leadingIcon || props.trailingIcon)) {\n    // Size-aware square padding for icon-only buttons\n    const iconOnlyPadding: Record<string, string> = {\n      xs: '!sl-p-1.5',\n      sm: '!sl-p-2',\n      md: '!sl-p-2.5',\n      lg: '!sl-p-3',\n      xl: '!sl-p-3.5',\n      '2xl': '!sl-p-4',\n    };\n    finalClasses.push(iconOnlyPadding[props.size || 'md'] || '!sl-p-2.5');\n  }\n\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    finalClasses.push('sl-w-full', 'sl-h-full');\n  } else {\n    if (props.leadingIcon || props.inlineFlex || props.trailingIcon) {\n      finalClasses.push('sl-inline-flex');\n    }\n  }\n\n  return finalClasses.filter(Boolean);\n});\n\nconst buttonStyles = computed(() => {\n  if (props.theme === 'primary') {\n    // Only apply background color for filled primary buttons, not outlined\n    if (props.outlined) {\n      return {\n        color: 'var(--sl-color-primary-600, #3e4b9a)',\n        borderColor: 'var(--sl-color-primary-600, #3e4b9a)',\n        '--tw-ring-color': 'var(--sl-color-primary-500, #4d5ec0)',\n      };\n    }\n    return {\n      backgroundColor: 'var(--sl-color-primary-600, #3e4b9a)',\n      '--tw-ring-color': 'var(--sl-color-primary-500, #4d5ec0)',\n    };\n  }\n  return {};\n});\n\n// Gap on parent handles spacing, no margins needed\nconst trailingBaseClasses = 'sl-flex sl-items-center sl-flex-shrink-0';\nconst trailingAbsoluteClasses = 'sl-absolute sl-right-2 sl-top-1/2 -sl-translate-y-1/2 sl-flex sl-items-center sl-flex-shrink-0';\nconst trailingLoadingClasses = computed(() => props.trailingOverlay ? trailingAbsoluteClasses : trailingBaseClasses);\nconst trailingIconClasses = computed(() => props.trailingOverlay ? `${trailingAbsoluteClasses}` : 'sl-flex sl-items-center sl-flex-shrink-0');\n\nconst leadingIconClasses = computed(() => {\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    return 'sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full';\n  }\n  if (props.centerLeadingIcon) {\n    return 'sl-h-full sl-flex sl-items-center sl-justify-center';\n  }\n  if (!isLabelPresent.value) {\n    return 'sl-flex sl-items-center sl-justify-center';\n  }\n  // Gap on parent handles spacing\n  return 'sl-flex sl-items-center sl-justify-center sl-flex-shrink-0';\n});\n\nconst onClick = (): void => {\n  emit('button-click');\n};\n\nconst onMouseEnter = (): void => {\n  emit('hover-enter');\n};\n\nconst onMouseLeave = (): void => {\n  emit('hover-leave');\n};\n\nconst showLoadingTitle = props.showLoadingTitle || false;\n</script>\n\n<style scoped>\n/* Filled primary button hover */\nbutton[data-theme=\"primary\"]:not([data-outlined]):hover {\n  background-color: var(--sl-color-primary-700, #2e3873) !important;\n}\n\n/* Outlined primary button hover - subtle background */\nbutton[data-theme=\"primary\"][data-outlined]:hover {\n  background-color: rgb(var(--sl-color-primary-50-rgb, 237 239 249) / 0.5) !important;\n}\n\n/* Dark mode: Outlined primary button hover */\n:global(.dark) button[data-theme=\"primary\"][data-outlined]:hover {\n  background-color: rgb(var(--sl-color-primary-900-rgb, 15 19 38) / 0.3) !important;\n}\n</style>\n\n\n"],"names":["trailingBaseClasses","trailingAbsoluteClasses","Loading","defineAsyncComponent","props","__props","emit","__emit","loading","computed","replaceLeadingIconWithLoading","buttonRef","ref","resolvedTheme","findParentBackground","node","bg","adjustThemeBasedOnBackground","el","parentBg","onMounted","nextTick","watch","newTheme","theme","loadingSize","loadingTheme","darkBgThemes","loadingOverlayClasses","colorClass","outlineBaseClasses","filledBaseClasses","roundedClassMap","roundedClass","sizeClass","textClass","expandedClass","isLabelPresent","isIconOnly","buttonClasses","finalClasses","iconOnlyPadding","buttonStyles","trailingLoadingClasses","trailingIconClasses","leadingIconClasses","onClick","onMouseEnter","onMouseLeave","showLoadingTitle","_createElementBlock","_renderSlot","_ctx","_Fragment","_normalizeClass","_createVNode","_unref","_toDisplayString","_createElementVNode","_hoisted_2","_hoisted_3"],"mappings":"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"}

package/dist/components/ButtonGroup.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiButtonGroup'
-import StachelockUI from '../src/components/UiButtonGroup'
-export default StachelockUI
+export {}

package/dist/components/ButtonGroup.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js";
+import { _ as f } from "../UiButtonGroup.vue_vue_type_script_setup_true_lang-CVwXB-cb.js";
 export {
   f as default
 };

package/dist/components/Checkbox.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiCheckbox'
-import StachelockUI from '../src/components/UiCheckbox'
-export default StachelockUI
+export {}

package/dist/components/Checkbox.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js";
+import { _ as f } from "../UiCheckbox.vue_vue_type_script_setup_true_lang-BxyM_F-V.js";
 export {
   f as default
 };

package/dist/components/CloudinaryImage.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/CloudinaryImage'
-import StachelockUI from '../src/components/CloudinaryImage'
-export default StachelockUI
+export {}

package/dist/components/Loading.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiLoading'
-import StachelockUI from '../src/components/UiLoading'
-export default StachelockUI
+export {}

package/dist/components/Loading.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiLoading.vue_vue_type_script_setup_true_lang-DldleD-3.js";
+import { _ as f } from "../UiLoading.vue_vue_type_script_setup_true_lang-rNvtzKbq.js";
 export {
   f as default
 };

package/dist/components/LoadingDots.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiLoadingDots'
-import StachelockUI from '../src/components/UiLoadingDots'
-export default StachelockUI
+export {}

package/dist/components/LottieAnimation.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/LottieAnimation'
-import StachelockUI from '../src/components/LottieAnimation'
-export default StachelockUI
+export {}

package/dist/components/LottieAnimation.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js";
+import { _ as f } from "../LottieAnimation.vue_vue_type_script_setup_true_lang-swmHdR0_.js";
 export {
   f as default
 };

package/dist/components/Menu.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiMenu'
-import StachelockUI from '../src/components/UiMenu'
-export default StachelockUI
+export {}

package/dist/components/Menu.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiMenu.vue_vue_type_script_setup_true_lang-aJddpshR.js";
+import { _ as f } from "../UiMenu.vue_vue_type_script_setup_true_lang-bQdfCzk6.js";
 export {
   f as default
 };

package/dist/components/Modal.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiModal'
-import StachelockUI from '../src/components/UiModal'
-export default StachelockUI
+export {}

package/dist/components/Modal.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiModal.vue_vue_type_script_setup_true_lang-CFgLuifQ.js";
+import { _ as f } from "../UiModal.vue_vue_type_script_setup_true_lang-CpwFUDVU.js";
 export {
   f as default
 };

package/dist/components/NavLink.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiNavLink'
-import StachelockUI from '../src/components/UiNavLink'
-export default StachelockUI
+export {}

package/dist/components/NavLink.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiNavLink.vue_vue_type_script_setup_true_lang-C23h6Do0.js";
+import { _ as f } from "../UiNavLink.vue_vue_type_script_setup_true_lang-DnWMn40M.js";
 export {
   f as default
 };

package/dist/components/ProgressBar.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiProgressBar'
-import StachelockUI from '../src/components/UiProgressBar'
-export default StachelockUI
+export {}

package/dist/components/ProgressBar.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiProgressBar.vue_vue_type_script_setup_true_lang-BioTMORv.js";
+import { _ as f } from "../UiProgressBar.vue_vue_type_script_setup_true_lang-BCh4orZW.js";
 export {
   f as default
 };

package/dist/components/RadialProgressBar.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiProgressBar'
-import StachelockUI from '../src/components/UiProgressBar'
-export default StachelockUI
+export {}

package/dist/components/RadialProgressBar.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiProgressBar.vue_vue_type_script_setup_true_lang-BioTMORv.js";
+import { _ as f } from "../UiProgressBar.vue_vue_type_script_setup_true_lang-BCh4orZW.js";
 export {
   f as default
 };

package/dist/components/Table.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiTable'
-import StachelockUI from '../src/components/UiTable'
-export default StachelockUI
+export {}

package/dist/components/Table.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiTable.vue_vue_type_script_setup_true_lang-BuOCaPzi.js";
+import { _ as f } from "../UiTable.vue_vue_type_script_setup_true_lang-xGAiJ9rS.js";
 export {
   f as default
 };

package/dist/components/Transition.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/UiTransition'
-import StachelockUI from '../src/components/UiTransition'
-export default StachelockUI
+export {}

package/dist/components/Transition.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js";
+import { _ as f } from "../UiTransition.vue_vue_type_script_setup_true_lang-C4jb9I-3.js";
 export {
   f as default
 };

package/dist/composables/index.d.ts

@@ -1 +1,2 @@
 export * from '../src/composables/index'
+export {}

package/dist/composables/useCalendar.d.ts

@@ -1,3 +1,6 @@
 export * from '../src/composables/useCalendar'
+export {}
 import StachelockUI from '../src/composables/useCalendar'
 export default StachelockUI
+export * from '../src/composables/useCalendar'
+export {}

package/dist/composables/useCalendar.js

@@ -1,5 +1,5 @@
 import { ref as u, watch as o } from "vue";
-import { g as r, a as s, b as f } from "../calendar-DyIP7WGv.js";
+import { g as r, a as s, b as f } from "../calendar-BlSSD4nO.js";
 function D(v = "month") {
   const a = u(v), t = u(/* @__PURE__ */ new Date()), l = u([]), n = u([]);
   return o([a, t], () => {

package/dist/composables/useFormValidation.d.ts

@@ -1,3 +1,6 @@
 export * from '../src/composables/useFormValidation'
+export {}
 import StachelockUI from '../src/composables/useFormValidation'
 export default StachelockUI
+export * from '../src/composables/useFormValidation'
+export {}