@alfakit/vue 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @alfakit/vue
+
+## 0.1.2
+
+### Patch Changes
+
+- Fixes from end-to-end QA in React, Vue and Svelte: modal field ids, errors in hidden tabs, per-row action spinners, one-time-code paste, RTL fixes (colours, key bindings, calendar), localised file sizes and named upload buttons, select placeholders, single toasts in starter kits, readable tab query values, enum group titles, tenant menu labels, Svelte hydration gate, plugin styles in starter-kit mode, and more (see the AlfaKit changelog for 0.1.2).
+- Updated dependencies
+  - @alfakit/core@0.1.2
+
+## 0.1.1
+
+### Patch Changes
+
+- Vue: icons and lazily loaded components no longer cause hydration mismatches when another app on the page already loaded them. Package READMEs show the Alfa Six logo on npm.
+- Updated dependencies
+  - @alfakit/core@0.1.1

package/dist/components/actions/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["_sfc_main","ActionButton_vue_vue_type_script_setup_true_lang_default","ActionButton_default"],"sources":["../../../src/components/actions/ActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/vue3'\nimport { computed, watchEffect, type HTMLAttributes } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'default',\n  withKeyBindings: true,\n})\n\nconst runner = useActionRunner()\nconst loading = useStoreSelector(runner.store, (state) => state.loading === props.action.name)\nconst processing = useStoreSelector(runner.store, (state) =>\n  state.modals.some((modal) => modal.action.name === props.action.name && modal.processing),\n)\n\nconst variant = computed(\n  () =>\n    props.variant ??\n    (props.action.outlined\n      ? 'outline'\n      : (props.action.variant ??\n        (props.action.hasAction || props.action.hasModal || props.action.url ? 'link' : 'button'))),\n)\nconst isIconOnly = computed(() => variant.value === 'icon-button' || !props.action.label)\nconst busy = computed(() => loading.value || processing.value)\n// A disabled link renders as a disabled button so it cannot navigate.\nconst isPlainLink = computed(() =>\n  Boolean(\n    props.action.url && !props.action.hasAction && !props.action.hasModal && !props.action.disabled,\n  ),\n)\n// Record actions repeat per row: a global shortcut would run them for every record.\nconst bindsKeys = computed(\n  () => props.withKeyBindings && bindsKeyBindings(props.action, props.context),\n)\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (kind) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nconst run = () =>\n  void (props.onTrigger\n    ? props.onTrigger(props.action, props.context)\n    : runner.trigger(props.action, props.context))\n\nwatchEffect((onCleanup) => {\n  if (!bindsKeys.value || !props.action.keyBindings) {\n    return\n  }\n\n  onCleanup(registerKeyBindings([{ keys: props.action.keyBindings, handler: run }]))\n})\n\nconst onClick = (event: MouseEvent) => {\n  if (isPlainLink.value) {\n    return // Plain link: let Inertia Link / anchor handle it.\n  }\n\n  event.preventDefault()\n  run()\n}\n\nconst sizeProp = computed(() => {\n  const size = variant.value === 'badge' ? 'xs' : resolveActionSize(props.action.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\n// `labeledFrom()`: icon only below the breakpoint; the label stays the accessible name.\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\nconst labeledFrom = computed(() =>\n  !isIconOnly.value && props.action.icon && props.action.labeledFrom\n    ? props.action.labeledFrom\n    : null,\n)\nconst labelClass = computed(() => (labeledFrom.value ? LABEL_FROM[labeledFrom.value] : undefined))\nconst classes = computed(() =>\n  cn(\n    buttonClasses(props.action, variant.value),\n    labeledFrom.value && ICON_ONLY_BELOW[labeledFrom.value],\n    props.class,\n  ),\n)\nconst t = useT()\nconst newTabHint = computed(() => t('opens_in_new_tab', {}, '(opens in a new tab)'))\nconst ariaLabel = computed(() => {\n  if (!isIconOnly.value && !labeledFrom.value) return undefined\n\n  const name = props.action.label ?? props.action.tooltip ?? props.action.name\n\n  return isPlainLink.value && props.action.openUrlInNewTab ? `${name} ${newTabHint.value}` : name\n})\nconst tooltip = computed(\n  () => props.action.tooltip ?? (isIconOnly.value ? props.action.label : undefined),\n)\nconst shortcut = computed(() => (bindsKeys.value ? props.action.keyBindings?.[0] : undefined))\nconst disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.value))\n</script>\n\n<template>\n  <Tooltip v-if=\"tooltip || shortcut\">\n    <!-- A disabled button gets no pointer or focus events: a focusable span carries the\n         tooltip (e.g. the reason from `authorizationTooltip()`). -->\n    <TooltipTrigger\n      :as-child=\"!disabledTooltip\"\n      :as=\"disabledTooltip ? 'span' : undefined\"\n      :tabindex=\"disabledTooltip ? 0 : undefined\"\n      :class=\"disabledTooltip ? 'inline-flex' : undefined\"\n      :data-disabled-tooltip=\"disabledTooltip ? '' : undefined\"\n    >\n      <Button\n        v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </a>\n      </Button>\n      <Button\n        v-else-if=\"isPlainLink\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <Link :href=\"props.action.url ?? '#'\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </Link>\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled || busy\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n        @click=\"onClick\"\n      >\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      {{ tooltip }}\n      <kbd v-if=\"shortcut\" class=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\">{{\n        formatKeyBinding(shortcut)\n      }}</kbd>\n    </TooltipContent>\n  </Tooltip>\n  <template v-else>\n    <Button\n      v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </a>\n    </Button>\n    <Button\n      v-else-if=\"isPlainLink\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <Link :href=\"props.action.url ?? '#'\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Link>\n    </Button>\n    <Button\n      v-else\n      type=\"button\"\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled || busy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n      @click=\"onClick\"\n    >\n      <Spinner v-if=\"busy\" />\n      <Icon\n        v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n        :name=\"props.action.icon\"\n      />\n      <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n      <Icon\n        v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n        :name=\"props.action.icon\"\n      />\n      <Badge\n        v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n        variant=\"outline\"\n        :class=\"\n          cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n        \"\n        >{{ props.action.badge }}</Badge\n      >\n    </Button>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ActionButton.js","names":["_sfc_main","ActionButton_vue_vue_type_script_setup_true_lang_default","ActionButton_default"],"sources":["../../../src/components/actions/ActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  isActionLoading,\n  isActionProcessing,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/vue3'\nimport { computed, watchEffect, type HTMLAttributes } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'default',\n  withKeyBindings: true,\n})\n\nconst runner = useActionRunner()\n// Only this run (this record's button), not the same action in every table row.\nconst loading = useStoreSelector(runner.store, (state) =>\n  isActionLoading(state, props.action, props.context),\n)\nconst processing = useStoreSelector(runner.store, (state) =>\n  isActionProcessing(state, props.action, props.context),\n)\n\nconst variant = computed(\n  () =>\n    props.variant ??\n    (props.action.outlined\n      ? 'outline'\n      : (props.action.variant ??\n        (props.action.hasAction || props.action.hasModal || props.action.url ? 'link' : 'button'))),\n)\nconst isIconOnly = computed(() => variant.value === 'icon-button' || !props.action.label)\nconst busy = computed(() => loading.value || processing.value)\n// A disabled link renders as a disabled button so it cannot navigate.\nconst isPlainLink = computed(() =>\n  Boolean(\n    props.action.url && !props.action.hasAction && !props.action.hasModal && !props.action.disabled,\n  ),\n)\n// Record actions repeat per row: a global shortcut would run them for every record.\nconst bindsKeys = computed(\n  () => props.withKeyBindings && bindsKeyBindings(props.action, props.context),\n)\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (kind) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nconst run = () =>\n  void (props.onTrigger\n    ? props.onTrigger(props.action, props.context)\n    : runner.trigger(props.action, props.context))\n\nwatchEffect((onCleanup) => {\n  if (!bindsKeys.value || !props.action.keyBindings) {\n    return\n  }\n\n  onCleanup(registerKeyBindings([{ keys: props.action.keyBindings, handler: run }]))\n})\n\nconst onClick = (event: MouseEvent) => {\n  if (isPlainLink.value) {\n    return // Plain link: let Inertia Link / anchor handle it.\n  }\n\n  event.preventDefault()\n  run()\n}\n\nconst sizeProp = computed(() => {\n  const size = variant.value === 'badge' ? 'xs' : resolveActionSize(props.action.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\n// `labeledFrom()`: icon only below the breakpoint; the label stays the accessible name.\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\nconst labeledFrom = computed(() =>\n  !isIconOnly.value && props.action.icon && props.action.labeledFrom\n    ? props.action.labeledFrom\n    : null,\n)\nconst labelClass = computed(() => (labeledFrom.value ? LABEL_FROM[labeledFrom.value] : undefined))\nconst classes = computed(() =>\n  cn(\n    buttonClasses(props.action, variant.value),\n    labeledFrom.value && ICON_ONLY_BELOW[labeledFrom.value],\n    props.class,\n  ),\n)\nconst t = useT()\nconst newTabHint = computed(() => t('opens_in_new_tab', {}, '(opens in a new tab)'))\nconst ariaLabel = computed(() => {\n  if (!isIconOnly.value && !labeledFrom.value) return undefined\n\n  const name = props.action.label ?? props.action.tooltip ?? props.action.name\n\n  return isPlainLink.value && props.action.openUrlInNewTab ? `${name} ${newTabHint.value}` : name\n})\nconst tooltip = computed(\n  () => props.action.tooltip ?? (isIconOnly.value ? props.action.label : undefined),\n)\nconst shortcut = computed(() => (bindsKeys.value ? props.action.keyBindings?.[0] : undefined))\nconst disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.value))\n</script>\n\n<template>\n  <Tooltip v-if=\"tooltip || shortcut\">\n    <!-- A disabled button gets no pointer or focus events: a focusable span carries the\n         tooltip (e.g. the reason from `authorizationTooltip()`). -->\n    <TooltipTrigger\n      :as-child=\"!disabledTooltip\"\n      :as=\"disabledTooltip ? 'span' : undefined\"\n      :tabindex=\"disabledTooltip ? 0 : undefined\"\n      :class=\"disabledTooltip ? 'inline-flex' : undefined\"\n      :data-disabled-tooltip=\"disabledTooltip ? '' : undefined\"\n    >\n      <Button\n        v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </a>\n      </Button>\n      <Button\n        v-else-if=\"isPlainLink\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <Link :href=\"props.action.url ?? '#'\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </Link>\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled || busy\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n        @click=\"onClick\"\n      >\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      {{ tooltip }}\n      <kbd\n        v-if=\"shortcut\"\n        dir=\"ltr\"\n        class=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\"\n        >{{ formatKeyBinding(shortcut) }}</kbd\n      >\n    </TooltipContent>\n  </Tooltip>\n  <template v-else>\n    <Button\n      v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </a>\n    </Button>\n    <Button\n      v-else-if=\"isPlainLink\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <Link :href=\"props.action.url ?? '#'\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Link>\n    </Button>\n    <Button\n      v-else\n      type=\"button\"\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled || busy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n      @click=\"onClick\"\n    >\n      <Spinner v-if=\"busy\" />\n      <Icon\n        v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n        :name=\"props.action.icon\"\n      />\n      <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n      <Icon\n        v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n        :name=\"props.action.icon\"\n      />\n      <Badge\n        v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n        variant=\"outline\"\n        :class=\"\n          cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n        \"\n        >{{ props.action.badge }}</Badge\n      >\n    </Button>\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/actions/ActionButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/actions/ActionButton.vue"],"names":[],"mappings":"AA+XA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAShE,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAoBhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,qEAAqE;IACrE,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnF;;UARQ,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;qBAKnB,OAAO;;AAkxB3B,wBAOG"}
+{"version":3,"file":"ActionButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/actions/ActionButton.vue"],"names":[],"mappings":"AAuYA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAWhE,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAoBhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,qEAAqE;IACrE,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnF;;UARQ,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;qBAKnB,OAAO;;AAoxB3B,wBAOG"}

package/dist/components/actions/ActionButton.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,29 @@
 import { useActionRunner as e, useT as t } from "../../context.js";
 import { cn as n } from "../../lib/utils.js";
 import { useStoreSelector as r } from "../../composables/use-store.js";
-import { badgeColorClasses as i, colorClass as a, ghostButtonColorClasses as o, outlineButtonColorClasses as ee, solidButtonColorClasses as te, textColorClasses as s } from "../../lib/colors.js";
-import c from "../../lib/Icon.js";
-import l from "../ui/Badge2.js";
-import u from "../ui/Button2.js";
-import d from "../ui/Spinner.js";
-import ne from "../ui/Tooltip.js";
-import re from "../ui/TooltipContent.js";
-import ie from "../ui/TooltipTrigger.js";
-import { bindsKeyBindings as f, formatKeyBinding as p, iconButtonSize as ae, registerKeyBindings as oe, resolveActionSize as m } from "@alfakit/core";
-import { Link as h } from "@inertiajs/vue3";
-import { Fragment as se, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, normalizeClass as T, openBlock as E, toDisplayString as D, unref as O, watchEffect as ce, withCtx as k } from "vue";
+import { badgeColorClasses as i, colorClass as a, ghostButtonColorClasses as o, outlineButtonColorClasses as ee, solidButtonColorClasses as te, textColorClasses as ne } from "../../lib/colors.js";
+import s from "../../lib/Icon.js";
+import c from "../ui/Badge2.js";
+import l from "../ui/Button2.js";
+import u from "../ui/Spinner.js";
+import re from "../ui/Tooltip.js";
+import ie from "../ui/TooltipContent.js";
+import d from "../ui/TooltipTrigger.js";
+import { bindsKeyBindings as f, formatKeyBinding as p, iconButtonSize as ae, isActionLoading as oe, isActionProcessing as se, registerKeyBindings as m, resolveActionSize as h } from "@alfakit/core";
+import { Link as g } from "@inertiajs/vue3";
+import { Fragment as ce, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeProps as T, normalizeClass as E, openBlock as D, toDisplayString as O, unref as k, watchEffect as le, withCtx as A } from "vue";
 //#region src/components/actions/ActionButton.vue?vue&type=script&setup=true&lang.ts
-var A = ["href"], j = {
+var ue = ["href"], de = {
 	key: 3,
 	class: "sr-only"
-}, M = {
+}, fe = {
 	key: 0,
+	dir: "ltr",
 	class: "ms-2 rounded border border-white/20 px-1 font-mono text-[10px]"
-}, N = ["href"], P = {
+}, pe = ["href"], j = {
 	key: 3,
 	class: "sr-only"
-}, F = "h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5", I = /*@__PURE__*/ C({
+}, M = "h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5", N = /*@__PURE__*/ w({
 	__name: "ActionButton",
 	props: {
 		action: {},
@@ -42,129 +43,129 @@ var A = ["href"], j = {
 		},
 		onTrigger: {}
 	},
-	setup(C) {
-		let I = C, L = e(), le = r(L.store, (e) => e.loading === I.action.name), ue = r(L.store, (e) => e.modals.some((e) => e.action.name === I.action.name && e.processing)), R = g(() => I.variant ?? (I.action.outlined ? "outline" : I.action.variant ?? (I.action.hasAction || I.action.hasModal || I.action.url ? "link" : "button"))), z = g(() => R.value === "icon-button" || !I.action.label), B = g(() => le.value || ue.value), V = g(() => !(!I.action.url || I.action.hasAction || I.action.hasModal || I.action.disabled)), H = g(() => I.withKeyBindings && f(I.action, I.context));
-		function de(e, t) {
+	setup(w) {
+		let N = w, P = e(), F = r(P.store, (e) => oe(e, N.action, N.context)), I = r(P.store, (e) => se(e, N.action, N.context)), L = _(() => N.variant ?? (N.action.outlined ? "outline" : N.action.variant ?? (N.action.hasAction || N.action.hasModal || N.action.url ? "link" : "button"))), R = _(() => L.value === "icon-button" || !N.action.label), z = _(() => F.value || I.value), B = _(() => !(!N.action.url || N.action.hasAction || N.action.hasModal || N.action.disabled)), V = _(() => N.withKeyBindings && f(N.action, N.context));
+		function me(e, t) {
 			let r = e.color ?? "primary";
 			switch (t) {
 				case "outline": return n("bg-background border", a(ee, r, "gray"));
 				case "ghost": return a(o, r, "gray");
-				case "link": return n("h-auto p-0 underline-offset-4 hover:underline", a(s, r, "primary"));
+				case "link": return n("h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0", a(ne, r, "primary"));
 				case "icon-button": return a(o, r, "gray");
-				case "badge": return n(F, a(i, r, "primary"));
+				case "badge": return n(M, a(i, r, "primary"));
 				default: return a(te, r, "primary");
 			}
 		}
-		let U = () => void (I.onTrigger ? I.onTrigger(I.action, I.context) : L.trigger(I.action, I.context));
-		ce((e) => {
-			H.value && I.action.keyBindings && e(oe([{
-				keys: I.action.keyBindings,
-				handler: U
+		let H = () => void (N.onTrigger ? N.onTrigger(N.action, N.context) : P.trigger(N.action, N.context));
+		le((e) => {
+			V.value && N.action.keyBindings && e(m([{
+				keys: N.action.keyBindings,
+				handler: H
 			}]));
 		});
-		let W = (e) => {
-			V.value || (e.preventDefault(), U());
-		}, G = g(() => {
-			let e = R.value === "badge" ? "xs" : m(I.action.size, I.size);
-			return z.value ? ae(e) : e;
-		}), fe = {
+		let U = (e) => {
+			B.value || (e.preventDefault(), H());
+		}, W = _(() => {
+			let e = L.value === "badge" ? "xs" : h(N.action.size, N.size);
+			return R.value ? ae(e) : e;
+		}), G = {
 			sm: "hidden sm:inline",
 			md: "hidden md:inline",
 			lg: "hidden lg:inline",
 			xl: "hidden xl:inline",
 			"2xl": "hidden 2xl:inline"
-		}, pe = {
+		}, he = {
 			sm: "max-sm:aspect-square max-sm:px-0",
 			md: "max-md:aspect-square max-md:px-0",
 			lg: "max-lg:aspect-square max-lg:px-0",
 			xl: "max-xl:aspect-square max-xl:px-0",
 			"2xl": "max-2xl:aspect-square max-2xl:px-0"
-		}, K = g(() => !z.value && I.action.icon && I.action.labeledFrom ? I.action.labeledFrom : null), q = g(() => K.value ? fe[K.value] : void 0), J = g(() => n(de(I.action, R.value), K.value && pe[K.value], I.class)), me = t(), Y = g(() => me("opens_in_new_tab", {}, "(opens in a new tab)")), X = g(() => {
-			if (!z.value && !K.value) return;
-			let e = I.action.label ?? I.action.tooltip ?? I.action.name;
-			return V.value && I.action.openUrlInNewTab ? `${e} ${Y.value}` : e;
-		}), Z = g(() => I.action.tooltip ?? (z.value ? I.action.label : void 0)), Q = g(() => H.value ? I.action.keyBindings?.[0] : void 0), $ = g(() => !!(I.action.disabled && Z.value));
-		return (e, t) => Z.value || Q.value ? (E(), _(ne, { key: 0 }, {
-			default: k(() => [S(ie, {
+		}, K = _(() => !R.value && N.action.icon && N.action.labeledFrom ? N.action.labeledFrom : null), q = _(() => K.value ? G[K.value] : void 0), J = _(() => n(me(N.action, L.value), K.value && he[K.value], N.class)), ge = t(), Y = _(() => ge("opens_in_new_tab", {}, "(opens in a new tab)")), X = _(() => {
+			if (!R.value && !K.value) return;
+			let e = N.action.label ?? N.action.tooltip ?? N.action.name;
+			return B.value && N.action.openUrlInNewTab ? `${e} ${Y.value}` : e;
+		}), Z = _(() => N.action.tooltip ?? (R.value ? N.action.label : void 0)), Q = _(() => V.value ? N.action.keyBindings?.[0] : void 0), $ = _(() => !!(N.action.disabled && Z.value));
+		return (e, t) => Z.value || Q.value ? (D(), v(re, { key: 0 }, {
+			default: A(() => [C(d, {
 				"as-child": !$.value,
 				as: $.value ? "span" : void 0,
 				tabindex: $.value ? 0 : void 0,
-				class: T($.value ? "inline-flex" : void 0),
+				class: E($.value ? "inline-flex" : void 0),
 				"data-disabled-tooltip": $.value ? "" : void 0
 			}, {
-				default: k(() => [V.value && I.action.openUrlInNewTab ? (E(), _(u, w({
+				default: A(() => [B.value && N.action.openUrlInNewTab ? (D(), v(l, T({
 					key: 0,
 					"as-child": "",
 					variant: "plain",
-					size: G.value,
+					size: W.value,
 					class: J.value,
-					disabled: I.action.disabled,
+					disabled: N.action.disabled,
 					"aria-label": X.value
-				}, I.action.extraAttributes), {
-					default: k(() => [b("a", {
-						href: I.action.url,
+				}, N.action.extraAttributes), {
+					default: A(() => [x("a", {
+						href: N.action.url,
 						target: "_blank",
 						rel: "noopener noreferrer"
 					}, [
-						B.value ? (E(), _(d, { key: 0 })) : I.action.icon && I.action.iconPosition !== "after" ? (E(), _(O(c), {
+						z.value ? (D(), v(u, { key: 0 })) : N.action.icon && N.action.iconPosition !== "after" ? (D(), v(k(s), {
 							key: 1,
-							name: I.action.icon
-						}, null, 8, ["name"])) : v("", !0),
-						z.value ? v("", !0) : (E(), y("span", {
+							name: N.action.icon
+						}, null, 8, ["name"])) : y("", !0),
+						R.value ? y("", !0) : (D(), b("span", {
 							key: 2,
-							class: T(q.value)
-						}, D(I.action.label), 3)),
-						z.value ? v("", !0) : (E(), y("span", j, D(Y.value), 1)),
-						I.action.icon && I.action.iconPosition === "after" && !B.value ? (E(), _(O(c), {
+							class: E(q.value)
+						}, O(N.action.label), 3)),
+						R.value ? y("", !0) : (D(), b("span", de, O(Y.value), 1)),
+						N.action.icon && N.action.iconPosition === "after" && !z.value ? (D(), v(k(s), {
 							key: 4,
-							name: I.action.icon
-						}, null, 8, ["name"])) : v("", !0),
-						I.action.badge !== void 0 && I.action.badge !== null ? (E(), _(l, {
+							name: N.action.icon
+						}, null, 8, ["name"])) : y("", !0),
+						N.action.badge !== void 0 && N.action.badge !== null ? (D(), v(c, {
 							key: 5,
 							variant: "outline",
-							class: T(O(n)("ms-1 px-1.5 py-0", O(a)(O(i), I.action.badgeColor, "gray")))
+							class: E(k(n)("ms-1 px-1.5 py-0", k(a)(k(i), N.action.badgeColor, "gray")))
 						}, {
-							default: k(() => [x(D(I.action.badge), 1)]),
+							default: A(() => [S(O(N.action.badge), 1)]),
 							_: 1
-						}, 8, ["class"])) : v("", !0)
-					], 8, A)]),
+						}, 8, ["class"])) : y("", !0)
+					], 8, ue)]),
 					_: 1
 				}, 16, [
 					"size",
 					"class",
 					"disabled",
 					"aria-label"
-				])) : V.value ? (E(), _(u, w({
+				])) : B.value ? (D(), v(l, T({
 					key: 1,
 					"as-child": "",
 					variant: "plain",
-					size: G.value,
+					size: W.value,
 					class: J.value,
-					disabled: I.action.disabled,
+					disabled: N.action.disabled,
 					"aria-label": X.value
-				}, I.action.extraAttributes), {
-					default: k(() => [S(O(h), { href: I.action.url ?? "#" }, {
-						default: k(() => [
-							B.value ? (E(), _(d, { key: 0 })) : I.action.icon && I.action.iconPosition !== "after" ? (E(), _(O(c), {
+				}, N.action.extraAttributes), {
+					default: A(() => [C(k(g), { href: N.action.url ?? "#" }, {
+						default: A(() => [
+							z.value ? (D(), v(u, { key: 0 })) : N.action.icon && N.action.iconPosition !== "after" ? (D(), v(k(s), {
 								key: 1,
-								name: I.action.icon
-							}, null, 8, ["name"])) : v("", !0),
-							z.value ? v("", !0) : (E(), y("span", {
+								name: N.action.icon
+							}, null, 8, ["name"])) : y("", !0),
+							R.value ? y("", !0) : (D(), b("span", {
 								key: 2,
-								class: T(q.value)
-							}, D(I.action.label), 3)),
-							I.action.icon && I.action.iconPosition === "after" && !B.value ? (E(), _(O(c), {
+								class: E(q.value)
+							}, O(N.action.label), 3)),
+							N.action.icon && N.action.iconPosition === "after" && !z.value ? (D(), v(k(s), {
 								key: 3,
-								name: I.action.icon
-							}, null, 8, ["name"])) : v("", !0),
-							I.action.badge !== void 0 && I.action.badge !== null ? (E(), _(l, {
+								name: N.action.icon
+							}, null, 8, ["name"])) : y("", !0),
+							N.action.badge !== void 0 && N.action.badge !== null ? (D(), v(c, {
 								key: 4,
 								variant: "outline",
-								class: T(O(n)("ms-1 px-1.5 py-0", O(a)(O(i), I.action.badgeColor, "gray")))
+								class: E(k(n)("ms-1 px-1.5 py-0", k(a)(k(i), N.action.badgeColor, "gray")))
 							}, {
-								default: k(() => [x(D(I.action.badge), 1)]),
+								default: A(() => [S(O(N.action.badge), 1)]),
 								_: 1
-							}, 8, ["class"])) : v("", !0)
+							}, 8, ["class"])) : y("", !0)
 						]),
 						_: 1
 					}, 8, ["href"])]),
@@ -174,36 +175,36 @@ var A = ["href"], j = {
 					"class",
 					"disabled",
 					"aria-label"
-				])) : (E(), _(u, w({
+				])) : (D(), v(l, T({
 					key: 2,
 					type: "button",
 					variant: "plain",
-					size: G.value,
+					size: W.value,
 					class: J.value,
-					disabled: I.action.disabled || B.value,
+					disabled: N.action.disabled || z.value,
 					"aria-label": X.value
-				}, I.action.extraAttributes, { onClick: W }), {
-					default: k(() => [
-						B.value ? (E(), _(d, { key: 0 })) : I.action.icon && I.action.iconPosition !== "after" ? (E(), _(O(c), {
+				}, N.action.extraAttributes, { onClick: U }), {
+					default: A(() => [
+						z.value ? (D(), v(u, { key: 0 })) : N.action.icon && N.action.iconPosition !== "after" ? (D(), v(k(s), {
 							key: 1,
-							name: I.action.icon
-						}, null, 8, ["name"])) : v("", !0),
-						z.value ? v("", !0) : (E(), y("span", {
+							name: N.action.icon
+						}, null, 8, ["name"])) : y("", !0),
+						R.value ? y("", !0) : (D(), b("span", {
 							key: 2,
-							class: T(q.value)
-						}, D(I.action.label), 3)),
-						I.action.icon && I.action.iconPosition === "after" && !B.value ? (E(), _(O(c), {
+							class: E(q.value)
+						}, O(N.action.label), 3)),
+						N.action.icon && N.action.iconPosition === "after" && !z.value ? (D(), v(k(s), {
 							key: 3,
-							name: I.action.icon
-						}, null, 8, ["name"])) : v("", !0),
-						I.action.badge !== void 0 && I.action.badge !== null ? (E(), _(l, {
+							name: N.action.icon
+						}, null, 8, ["name"])) : y("", !0),
+						N.action.badge !== void 0 && N.action.badge !== null ? (D(), v(c, {
 							key: 4,
 							variant: "outline",
-							class: T(O(n)("ms-1 px-1.5 py-0", O(a)(O(i), I.action.badgeColor, "gray")))
+							class: E(k(n)("ms-1 px-1.5 py-0", k(a)(k(i), N.action.badgeColor, "gray")))
 						}, {
-							default: k(() => [x(D(I.action.badge), 1)]),
+							default: A(() => [S(O(N.action.badge), 1)]),
 							_: 1
-						}, 8, ["class"])) : v("", !0)
+						}, 8, ["class"])) : y("", !0)
 					]),
 					_: 1
 				}, 16, [
@@ -219,84 +220,84 @@ var A = ["href"], j = {
 				"tabindex",
 				"class",
 				"data-disabled-tooltip"
-			]), S(re, null, {
-				default: k(() => [x(D(Z.value) + " ", 1), Q.value ? (E(), y("kbd", M, D(O(p)(Q.value)), 1)) : v("", !0)]),
+			]), C(ie, null, {
+				default: A(() => [S(O(Z.value) + " ", 1), Q.value ? (D(), b("kbd", fe, O(k(p)(Q.value)), 1)) : y("", !0)]),
 				_: 1
 			})]),
 			_: 1
-		})) : (E(), y(se, { key: 1 }, [V.value && I.action.openUrlInNewTab ? (E(), _(u, w({
+		})) : (D(), b(ce, { key: 1 }, [B.value && N.action.openUrlInNewTab ? (D(), v(l, T({
 			key: 0,
 			"as-child": "",
 			variant: "plain",
-			size: G.value,
+			size: W.value,
 			class: J.value,
-			disabled: I.action.disabled,
+			disabled: N.action.disabled,
 			"aria-label": X.value
-		}, I.action.extraAttributes), {
-			default: k(() => [b("a", {
-				href: I.action.url,
+		}, N.action.extraAttributes), {
+			default: A(() => [x("a", {
+				href: N.action.url,
 				target: "_blank",
 				rel: "noopener noreferrer"
 			}, [
-				B.value ? (E(), _(d, { key: 0 })) : I.action.icon && I.action.iconPosition !== "after" ? (E(), _(O(c), {
+				z.value ? (D(), v(u, { key: 0 })) : N.action.icon && N.action.iconPosition !== "after" ? (D(), v(k(s), {
 					key: 1,
-					name: I.action.icon
-				}, null, 8, ["name"])) : v("", !0),
-				z.value ? v("", !0) : (E(), y("span", {
+					name: N.action.icon
+				}, null, 8, ["name"])) : y("", !0),
+				R.value ? y("", !0) : (D(), b("span", {
 					key: 2,
-					class: T(q.value)
-				}, D(I.action.label), 3)),
-				z.value ? v("", !0) : (E(), y("span", P, D(Y.value), 1)),
-				I.action.icon && I.action.iconPosition === "after" && !B.value ? (E(), _(O(c), {
+					class: E(q.value)
+				}, O(N.action.label), 3)),
+				R.value ? y("", !0) : (D(), b("span", j, O(Y.value), 1)),
+				N.action.icon && N.action.iconPosition === "after" && !z.value ? (D(), v(k(s), {
 					key: 4,
-					name: I.action.icon
-				}, null, 8, ["name"])) : v("", !0),
-				I.action.badge !== void 0 && I.action.badge !== null ? (E(), _(l, {
+					name: N.action.icon
+				}, null, 8, ["name"])) : y("", !0),
+				N.action.badge !== void 0 && N.action.badge !== null ? (D(), v(c, {
 					key: 5,
 					variant: "outline",
-					class: T(O(n)("ms-1 px-1.5 py-0", O(a)(O(i), I.action.badgeColor, "gray")))
+					class: E(k(n)("ms-1 px-1.5 py-0", k(a)(k(i), N.action.badgeColor, "gray")))
 				}, {
-					default: k(() => [x(D(I.action.badge), 1)]),
+					default: A(() => [S(O(N.action.badge), 1)]),
 					_: 1
-				}, 8, ["class"])) : v("", !0)
-			], 8, N)]),
+				}, 8, ["class"])) : y("", !0)
+			], 8, pe)]),
 			_: 1
 		}, 16, [
 			"size",
 			"class",
 			"disabled",
 			"aria-label"
-		])) : V.value ? (E(), _(u, w({
+		])) : B.value ? (D(), v(l, T({
 			key: 1,
 			"as-child": "",
 			variant: "plain",
-			size: G.value,
+			size: W.value,
 			class: J.value,
-			disabled: I.action.disabled,
+			disabled: N.action.disabled,
 			"aria-label": X.value
-		}, I.action.extraAttributes), {
-			default: k(() => [S(O(h), { href: I.action.url ?? "#" }, {
-				default: k(() => [
-					B.value ? (E(), _(d, { key: 0 })) : I.action.icon && I.action.iconPosition !== "after" ? (E(), _(O(c), {
+		}, N.action.extraAttributes), {
+			default: A(() => [C(k(g), { href: N.action.url ?? "#" }, {
+				default: A(() => [
+					z.value ? (D(), v(u, { key: 0 })) : N.action.icon && N.action.iconPosition !== "after" ? (D(), v(k(s), {
 						key: 1,
-						name: I.action.icon
-					}, null, 8, ["name"])) : v("", !0),
-					z.value ? v("", !0) : (E(), y("span", {
+						name: N.action.icon
+					}, null, 8, ["name"])) : y("", !0),
+					R.value ? y("", !0) : (D(), b("span", {
 						key: 2,
-						class: T(q.value)
-					}, D(I.action.label), 3)),
-					I.action.icon && I.action.iconPosition === "after" && !B.value ? (E(), _(O(c), {
+						class: E(q.value)
+					}, O(N.action.label), 3)),
+					N.action.icon && N.action.iconPosition === "after" && !z.value ? (D(), v(k(s), {
 						key: 3,
-						name: I.action.icon
-					}, null, 8, ["name"])) : v("", !0),
-					I.action.badge !== void 0 && I.action.badge !== null ? (E(), _(l, {
+						name: N.action.icon
+					}, null, 8, ["name"])) : y("", !0),
+					N.action.badge !== void 0 && N.action.badge !== null ? (D(), v(c, {
 						key: 4,
 						variant: "outline",
-						class: T(O(n)("ms-1 px-1.5 py-0", O(a)(O(i), I.action.badgeColor, "gray")))
+						class: E(k(n)("ms-1 px-1.5 py-0", k(a)(k(i), N.action.badgeColor, "gray")))
 					}, {
-						default: k(() => [x(D(I.action.badge), 1)]),
+						default: A(() => [S(O(N.action.badge), 1)]),
 						_: 1
-					}, 8, ["class"])) : v("", !0)
+					}, 8, ["class"])) : y("", !0)
 				]),
 				_: 1
 			}, 8, ["href"])]),
@@ -306,36 +307,36 @@ var A = ["href"], j = {
 			"class",
 			"disabled",
 			"aria-label"
-		])) : (E(), _(u, w({
+		])) : (D(), v(l, T({
 			key: 2,
 			type: "button",
 			variant: "plain",
-			size: G.value,
+			size: W.value,
 			class: J.value,
-			disabled: I.action.disabled || B.value,
+			disabled: N.action.disabled || z.value,
 			"aria-label": X.value
-		}, I.action.extraAttributes, { onClick: W }), {
-			default: k(() => [
-				B.value ? (E(), _(d, { key: 0 })) : I.action.icon && I.action.iconPosition !== "after" ? (E(), _(O(c), {
+		}, N.action.extraAttributes, { onClick: U }), {
+			default: A(() => [
+				z.value ? (D(), v(u, { key: 0 })) : N.action.icon && N.action.iconPosition !== "after" ? (D(), v(k(s), {
 					key: 1,
-					name: I.action.icon
-				}, null, 8, ["name"])) : v("", !0),
-				z.value ? v("", !0) : (E(), y("span", {
+					name: N.action.icon
+				}, null, 8, ["name"])) : y("", !0),
+				R.value ? y("", !0) : (D(), b("span", {
 					key: 2,
-					class: T(q.value)
-				}, D(I.action.label), 3)),
-				I.action.icon && I.action.iconPosition === "after" && !B.value ? (E(), _(O(c), {
+					class: E(q.value)
+				}, O(N.action.label), 3)),
+				N.action.icon && N.action.iconPosition === "after" && !z.value ? (D(), v(k(s), {
 					key: 3,
-					name: I.action.icon
-				}, null, 8, ["name"])) : v("", !0),
-				I.action.badge !== void 0 && I.action.badge !== null ? (E(), _(l, {
+					name: N.action.icon
+				}, null, 8, ["name"])) : y("", !0),
+				N.action.badge !== void 0 && N.action.badge !== null ? (D(), v(c, {
 					key: 4,
 					variant: "outline",
-					class: T(O(n)("ms-1 px-1.5 py-0", O(a)(O(i), I.action.badgeColor, "gray")))
+					class: E(k(n)("ms-1 px-1.5 py-0", k(a)(k(i), N.action.badgeColor, "gray")))
 				}, {
-					default: k(() => [x(D(I.action.badge), 1)]),
+					default: A(() => [S(O(N.action.badge), 1)]),
 					_: 1
-				}, 8, ["class"])) : v("", !0)
+				}, 8, ["class"])) : y("", !0)
 			]),
 			_: 1
 		}, 16, [
@@ -347,6 +348,6 @@ var A = ["href"], j = {
 	}
 });
 //#endregion
-export { I as default };
+export { N as default };
 
 //# sourceMappingURL=ActionButton.vue_vue_type_script_setup_true_lang.js.map