@livestorm/ui-vue 2.0.4 → 3.0.0

package/dist/utils.mjs

@@ -1,36 +1,36 @@
-import { BREAKPOINT_2XL as F, BREAKPOINT_LG as N, BREAKPOINT_MD as X, BREAKPOINT_SM as D, BREAKPOINT_XL as Q, BREAKPOINT_XL_PLUS as U } from "./breakpoints.mjs";
+import { BREAKPOINT_2XL as Y, BREAKPOINT_LG as Z, BREAKPOINT_MD as ee, BREAKPOINT_SM as te, BREAKPOINT_XL as ne, BREAKPOINT_XL_PLUS as oe } from "./breakpoints.mjs";
 import "./bus.mjs";
-import { computed as h, createApp as _, h as f } from "vue";
-import { useClipboard as g, usePermission as x } from "@vueuse/core";
-import { u as R } from "./i18n-Cktw9hIu.mjs";
-import { b as A, _ as C, c as T, a as P } from "./a11y--y7uaY4j.mjs";
-import { f as j, h as G, d as z, u as H } from "./a11y--y7uaY4j.mjs";
-import { useResponsive as Y } from "./responsive.mjs";
-import { useRoute as $, useRouter as S } from "vue-router";
-import { RenderSlot as ee, getSlotAsComponent as te, unwrapFragments as oe, useSlotsAsComponents as ne } from "./slot.mjs";
-let d = null;
-function k(n, c) {
-  d && d();
-  const t = n.getBoundingClientRect(), s = document.createElement("div");
-  document.body.appendChild(s);
-  const a = _({
-    render: () => f(A, null, () => f(C, { open: !0, delayDuration: 0 }, () => [
-      f(T, { asChild: !0 }, () => f("span", {
+import { computed as l, createApp as g, h as y, ref as T, watch as x, onUnmounted as k, getCurrentInstance as S, onMounted as _, nextTick as w } from "vue";
+import { useClipboard as b, usePermission as A, onKeyDown as C } from "@vueuse/core";
+import { u as E } from "./i18n-Cktw9hIu.mjs";
+import { b as I, _ as R, c as B, a as P } from "./a11y-BhF_nl7L.mjs";
+import { f as ie } from "./a11y-BhF_nl7L.mjs";
+import { useResponsive as ue } from "./responsive.mjs";
+import { useRoute as $, useRouter as q } from "vue-router";
+import { RenderSlot as ae, getSlotAsComponent as de, unwrapFragments as le, useSlotsAsComponents as fe } from "./slot.mjs";
+let v = null;
+function L(s, i) {
+  v && v();
+  const e = s.getBoundingClientRect(), t = document.createElement("div");
+  document.body.appendChild(t);
+  const f = g({
+    render: () => y(I, null, () => y(R, { open: !0, delayDuration: 0 }, () => [
+      y(B, { asChild: !0 }, () => y("span", {
         "aria-hidden": "true",
         style: {
           position: "fixed",
-          left: `${t.left}px`,
-          top: `${t.top}px`,
-          width: `${t.width}px`,
-          height: `${t.height}px`,
+          left: `${e.left}px`,
+          top: `${e.top}px`,
+          width: `${e.width}px`,
+          height: `${e.height}px`,
           pointerEvents: "none"
         }
       })),
-      f(P, { side: "top" }, () => c),
+      y(P, { side: "top" }, () => i),
       // The bubble lives in reka's portal where attrs like role are not
       // forwardable; announce the feedback from a visually hidden live
       // region instead so screen readers hear the copy confirmation.
-      f("span", {
+      y("span", {
         role: "status",
         style: {
           position: "absolute",
@@ -39,108 +39,163 @@ function k(n, c) {
           overflow: "hidden",
           clipPath: "inset(50%)"
         }
-      }, c)
+      }, i)
     ]))
   });
-  a.mount(s);
-  let p = !1;
-  const r = () => {
-    p || (p = !0, d === r && (d = null), a.unmount(), s.remove());
+  f.mount(t);
+  let a = !1;
+  const u = () => {
+    a || (a = !0, v === u && (v = null), f.unmount(), t.remove());
   };
-  return d = r, r;
+  return v = u, u;
 }
-function O() {
-  const { isSupported: n, copy: c } = g(), t = x("clipboard-write"), s = R(), a = h(() => n.value && t.value);
-  async function p(r, i, m = s("general_misc_copied-text")) {
-    if (await c(r), i) {
-      i.classList.add("copied");
-      const e = k(i, m);
+function H() {
+  const { isSupported: s, copy: i } = b(), e = A("clipboard-write"), t = E(), f = l(() => s.value && e.value);
+  async function a(u, d, m = t("general_misc_copied-text")) {
+    if (await i(u), d) {
+      d.classList.add("copied");
+      const n = L(d, m);
       setTimeout(() => {
-        i.classList.remove("copied"), e();
+        d.classList.remove("copied"), n();
       }, 600);
     }
   }
   return {
-    canCopy: a,
-    copy: p
+    canCopy: f,
+    copy: a
   };
 }
-function q(n, c = !1) {
-  const t = $(), s = S(), a = `${n}-`;
-  function p() {
-    const e = [];
-    for (const o in t.query)
-      o.startsWith(a) && e.push(o);
-    return e;
+function Q(s, i = !1) {
+  const e = $(), t = q(), f = `${s}-`;
+  function a() {
+    const n = [];
+    for (const r in e.query)
+      r.startsWith(f) && n.push(r);
+    return n;
   }
-  function r(e) {
-    return e === "true" ? !0 : e === "false" ? !1 : e ?? !1;
+  function u(n) {
+    return n === "true" ? !0 : n === "false" ? !1 : n ?? !1;
   }
-  const i = h(() => {
-    if (c) {
-      const e = p();
-      if (e.length === 0)
+  const d = l(() => {
+    if (i) {
+      const n = a();
+      if (n.length === 0)
         return !1;
-      const o = {};
-      for (const u of e)
-        o[u.substring(a.length)] = r(t.query[u]);
-      return o;
+      const r = {};
+      for (const c of n)
+        r[c.substring(f.length)] = u(e.query[c]);
+      return r;
     } else
-      return r(t.query[n]);
-  }), m = !!i.value;
-  return h({
-    get: () => i.value,
-    set: (e) => {
-      if (e === i.value) return;
-      const o = e == null || e === !1;
-      if (o && !m)
-        s.back();
+      return u(e.query[s]);
+  }), m = !!d.value;
+  return l({
+    get: () => d.value,
+    set: (n) => {
+      if (n === d.value) return;
+      const r = n == null || n === !1;
+      if (r && !m)
+        t.back();
       else {
-        let u;
-        if (c)
-          if (u = {}, o) {
-            const l = p();
-            for (const y of l)
-              u[y] = void 0;
+        let c;
+        if (i)
+          if (c = {}, r) {
+            const h = a();
+            for (const o of h)
+              c[o] = void 0;
           } else
-            for (const l in e)
-              u[`${n}-${l}`] = e[l];
+            for (const h in n)
+              c[`${s}-${h}`] = n[h];
         else
-          u = {
-            [n]: o ? void 0 : e
+          c = {
+            [s]: r ? void 0 : n
           };
-        s[o ? "replace" : "push"]({
-          ...t,
+        t[r ? "replace" : "push"]({
+          ...e,
           query: {
-            ...t.query,
-            ...u
+            ...e.query,
+            ...c
           }
         });
       }
     }
   });
 }
-let E = 0;
-function M() {
-  return ++E;
+let K = 0;
+const p = T([]), O = l(() => p.value.length > 0);
+function W(s, i) {
+  const e = K++, t = l(() => p.value.findIndex((o) => o.id === e));
+  function f() {
+    p.value.some((o) => o.id === e) || p.value.push({
+      id: e,
+      type: i
+    });
+  }
+  function a() {
+    t.value !== -1 && p.value.splice(t.value, 1);
+  }
+  x(s, (o) => {
+    o ? f() : a();
+  }, {
+    immediate: !0
+  }), k(() => {
+    a();
+  });
+  const u = l(() => e === p.value[p.value.length - 1]?.id), d = l(() => t.value > 0), m = l(() => p.value.filter((o) => o.type === i)), n = l(() => m.value.findIndex((o) => o.id === e) < m.value.length - 1), r = l(() => m.value.findIndex((o) => o.id === e) > 0), c = [];
+  function h(o) {
+    c.push(o);
+  }
+  return C("Escape", () => {
+    u.value && c.forEach((o) => o());
+  }), {
+    isActiveStacked: u,
+    hasStackedBehind: d,
+    isBehindSameType: n,
+    hasStackedSameTypeBehind: r,
+    stackIndex: t,
+    onClose: h
+  };
+}
+typeof document < "u" && x(O, (s) => {
+  s ? document.documentElement.classList.add("overflow-hidden") : document.documentElement.classList.remove("overflow-hidden");
+}, {
+  immediate: !0
+});
+function j() {
+  const s = S();
+  let i = null;
+  _(async () => {
+    await w();
+    const e = s.proxy.$el;
+    if (!e?.querySelector) return;
+    let t = e.querySelector("[data-stackview-autofocus]");
+    t ? ["INPUT", "A", "BUTTON", "TEXTAREA"].includes(t.tagName) || (t = t.querySelector("input, a, button, textarea") || t) : (t = e.querySelector('button[type="submit"]'), console.warn(
+      "%cDEV",
+      "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
+      "A element should have the data-stackview-autofocus attribute in this component. Fallback to submit button."
+    )), clearTimeout(i), i = setTimeout(() => t?.focus(), 150);
+  });
+}
+let U = 0;
+function G() {
+  return ++U;
 }
 export {
-  F as BREAKPOINT_2XL,
-  N as BREAKPOINT_LG,
-  X as BREAKPOINT_MD,
-  D as BREAKPOINT_SM,
-  Q as BREAKPOINT_XL,
-  U as BREAKPOINT_XL_PLUS,
-  ee as RenderSlot,
-  j as focusFirstMenuItem,
-  te as getSlotAsComponent,
-  M as getUid,
-  G as hasStackedComponents,
-  oe as unwrapFragments,
-  O as useCopyToClipboard,
-  Y as useResponsive,
-  q as useRouteQueryModel,
-  ne as useSlotsAsComponents,
-  z as useStackAutofocus,
-  H as useStackedComponent
+  Y as BREAKPOINT_2XL,
+  Z as BREAKPOINT_LG,
+  ee as BREAKPOINT_MD,
+  te as BREAKPOINT_SM,
+  ne as BREAKPOINT_XL,
+  oe as BREAKPOINT_XL_PLUS,
+  ae as RenderSlot,
+  ie as focusFirstMenuItem,
+  de as getSlotAsComponent,
+  G as getUid,
+  O as hasStackedComponents,
+  le as unwrapFragments,
+  H as useCopyToClipboard,
+  ue as useResponsive,
+  Q as useRouteQueryModel,
+  fe as useSlotsAsComponents,
+  j as useStackAutofocus,
+  W as useStackedComponent
 };

package/index.d.ts

@@ -35,6 +35,9 @@ export { default as UiFieldWrapper } from './src/components/UiFieldWrapper/UiFie
 export { default as UiFormField } from './src/components/UiForm/UiFormField.vue'
 export { default as UiHorizontalSeparator } from './src/components/UiHorizontalSeparator/UiHorizontalSeparator.vue'
 export { default as UiInputCheckbox } from './src/components/UiInputCheckbox/UiInputCheckbox.vue'
+export { default as UiInputEmoji } from './src/components/UiInputEmoji/UiInputEmoji.vue'
+export { default as UiInputRadio } from './src/components/UiInputRadio/UiInputRadio.vue'
+export { default as UiInputRadioGroup } from './src/components/UiInputRadio/UiInputRadioGroup.vue'
 export { default as UiInputSelect } from './src/components/UiInputSelect/UiInputSelect.vue'
 export { default as UiInputTextarea } from './src/components/UiInputTextarea/UiInputTextarea.vue'
 export { default as UiLabel } from './src/components/UiLabel/UiLabel.vue'
@@ -72,6 +75,7 @@ export { default as UiStepperIndicator } from './src/components/UiStepper/UiStep
 export { default as UiStepperItem } from './src/components/UiStepper/UiStepperItem.vue'
 export { default as UiStepperSeparator } from './src/components/UiStepper/UiStepperSeparator.vue'
 export { default as UiStepperTitle } from './src/components/UiStepper/UiStepperTitle.vue'
+export { default as UiSwitch } from './src/components/UiSwitch/UiSwitch.vue'
 export { default as UiTable } from './src/components/UiTable/UiTable.vue'
 export { default as UiTableBody } from './src/components/UiTable/UiTableBody.vue'
 export { default as UiTableCell } from './src/components/UiTable/UiTableCell.vue'

package/index.js

@@ -37,6 +37,9 @@ import UiFieldWrapper from './src/components/UiFieldWrapper/UiFieldWrapper.vue'
 import UiFormField from './src/components/UiForm/UiFormField.vue'
 import UiHorizontalSeparator from './src/components/UiHorizontalSeparator/UiHorizontalSeparator.vue'
 import UiInputCheckbox from './src/components/UiInputCheckbox/UiInputCheckbox.vue'
+import UiInputEmoji from './src/components/UiInputEmoji/UiInputEmoji.vue'
+import UiInputRadio from './src/components/UiInputRadio/UiInputRadio.vue'
+import UiInputRadioGroup from './src/components/UiInputRadio/UiInputRadioGroup.vue'
 import UiInputSelect from './src/components/UiInputSelect/UiInputSelect.vue'
 import UiInputTextarea from './src/components/UiInputTextarea/UiInputTextarea.vue'
 import UiLabel from './src/components/UiLabel/UiLabel.vue'
@@ -74,6 +77,7 @@ import UiStepperIndicator from './src/components/UiStepper/UiStepperIndicator.vu
 import UiStepperItem from './src/components/UiStepper/UiStepperItem.vue'
 import UiStepperSeparator from './src/components/UiStepper/UiStepperSeparator.vue'
 import UiStepperTitle from './src/components/UiStepper/UiStepperTitle.vue'
+import UiSwitch from './src/components/UiSwitch/UiSwitch.vue'
 import UiTable from './src/components/UiTable/UiTable.vue'
 import UiTableBody from './src/components/UiTable/UiTableBody.vue'
 import UiTableCell from './src/components/UiTable/UiTableCell.vue'
@@ -122,6 +126,9 @@ export {
   UiFormField,
   UiHorizontalSeparator,
   UiInputCheckbox,
+  UiInputEmoji,
+  UiInputRadio,
+  UiInputRadioGroup,
   UiInputSelect,
   UiInputTextarea,
   UiLabel,
@@ -159,6 +166,7 @@ export {
   UiStepperItem,
   UiStepperSeparator,
   UiStepperTitle,
+  UiSwitch,
   UiTable,
   UiTableBody,
   UiTableCell,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -11,6 +11,11 @@
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "./index.js",
+    "./style.js"
+  ],
   "files": [
     "dist",
     "src",
@@ -38,11 +43,14 @@
     "i18next": "^26.3.4",
     "mitt": "^3.0.1",
     "reka-ui": "^2.9.10",
-    "@livestorm/ui-tokens": "^2.0.4",
-    "@livestorm/ui-icons": "^2.0.4"
+    "vue-frimousse": "^0.1.4",
+    "@livestorm/ui-tokens": "^3.0.0",
+    "@livestorm/ui-icons": "^3.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify/utils": "^3.1.4",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-coverage": "^3.0.2",
     "@storybook/addon-designs": "^11.1.4",

package/src/components/Toast/ToastMessage.vue

@@ -31,13 +31,13 @@ const modalIcon = computed(() => {
 
   switch (props.type) {
     case 'alert':
-      return 'i-ls-x-circle !text-text-danger-base'
+      return 'i-ph-x-circle !text-text-danger-base'
     case 'warning':
-      return 'i-ls-alert-triangle !text-text-warning-base'
+      return 'i-ph-warning !text-text-warning-base'
     case 'info':
-      return 'i-ls-info text-text-primary-base'
+      return 'i-ph-info text-text-primary-base'
     case 'success':
-      return 'i-ls-check-circle text-text-success-base'
+      return 'i-ph-check-circle text-text-success-base'
     default:
       return undefined
   }
@@ -137,7 +137,7 @@ onMounted(() => {
       <div class="shrink-0">
         <div
           v-if="modalIcon"
-          class="w-4 h-4 mt-0.5 mr-3 shrink-0 mb-2 sm:mb-0"
+          class="size-5 mr-3 shrink-0 mb-2 sm:mb-0"
           :class="modalIcon"
         />
       </div>
@@ -167,7 +167,7 @@ onMounted(() => {
         :data-testid="`toast-close-${String(props.id)}`"
         color="neutral"
         variant="tertiary"
-        icon="i-ls-x"
+        icon="i-ph-x"
         size="md"
         aria-label="close"
         class="-top-[10px] -right-[2px] sm:row-start-1"

package/src/components/UiActionBar/UiActionBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
-import type { ActionBarOrientation, ActionBarPosition, ActionBarSize } from './types'
+import type { ActionBarOrientation, ActionBarPosition, ActionBarSize, ActionBarTooltipSide } from './types'
 import { ACTION_BAR_CONTEXT_KEY } from './types'
 
 interface UiActionBarProps {
@@ -26,6 +26,7 @@ interface UiActionBarProps {
    * Accessible label for the toolbar landmark. Defaults to "Actions".
    */
   ariaLabel?: string
+  tooltipSide?: ActionBarTooltipSide
 }
 
 const props = withDefaults(defineProps<UiActionBarProps>(), {
@@ -34,17 +35,25 @@ const props = withDefaults(defineProps<UiActionBarProps>(), {
   position: undefined,
   offset: 3,
   ariaLabel: 'Actions',
+  tooltipSide: undefined,
 })
 
 provide(ACTION_BAR_CONTEXT_KEY, {
   orientation: computed<ActionBarOrientation>(() => props.orientation),
   size: computed<ActionBarSize>(() => props.size),
+  tooltipSide: computed<ActionBarTooltipSide | undefined>(() => props.tooltipSide),
 })
 
 const isVertical = computed(() => props.orientation === 'vertical')
 
 // Inner padding follows the design tokens (space-0-5 = 2px).
-const sizeClasses = computed(() => (props.size === 'sm' ? 'p-0.5 gap-0.5' : 'p-1 gap-0.5'))
+const SIZE_CLASSES: Record<ActionBarSize, string> = {
+  xs: 'p-0.5 gap-0.5',
+  sm: 'p-0.5 gap-0.5',
+  md: 'p-1 gap-0.5',
+}
+
+const sizeClasses = computed(() => SIZE_CLASSES[props.size])
 
 // When `position` is set, anchor the bar to an edge of its positioned
 // ancestor. Offsets are inline styles (rem) so any `offset` value works

package/src/components/UiActionBar/UiActionBarItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, useAttrs } from 'vue'
 import {
   TooltipProvider,
   TooltipRoot,
@@ -9,16 +9,21 @@ import {
   TooltipArrow,
 } from 'reka-ui'
 import type { RouteLocationRaw } from 'vue-router'
+import { useIconSize } from '../../composables/useIconSize'
+import type { ActionBarSize } from './types'
 import { ACTION_BAR_CONTEXT_KEY } from './types'
 
 interface UiActionBarItemProps {
-  /** Icon class, e.g. `i-ls-trash`. */
+  /**
+   * Icon class, e.g. `i-ph-trash`. Ignored when the `icon` slot is filled —
+   * use the slot for glyphs no icon class covers (emoji, an avatar, a dot).
+   */
   icon?: string
   /** Visible/accessible label. Required so icon-only items stay accessible. */
   label: string
   /**
    * Optional icon class rendered next to the label inside the hover tooltip —
-   * e.g. `i-ls-external-link` to flag that the action opens in a new tab.
+   * e.g. `i-ph-arrow-square-out` to flag that the action opens in a new tab.
    * Only shown for icon-only items (the tooltip is suppressed when
    * `showLabel` is set).
    */
@@ -55,13 +60,20 @@ const props = withDefaults(defineProps<UiActionBarItemProps>(), {
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
+// The trigger is rendered through `TooltipTrigger as-child`, which merges its
+// own props over the child vnode — so normal attribute fallthrough never
+// reaches the button. Read the consumer's `data-testid` explicitly, otherwise
+// every item in a wrapped bar would share one indistinguishable test id.
+const attrs = useAttrs()
+const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'ui-action-bar-item')
+
 const ctx = inject(ACTION_BAR_CONTEXT_KEY, null)
 const size = computed(() => ctx?.size.value ?? 'md')
 const orientation = computed(() => ctx?.orientation.value ?? 'horizontal')
 
 // Icon-only items get a tooltip; labeled items don't need one.
 const showTooltip = computed(() => !props.showLabel)
-const tooltipSide = computed(() => (orientation.value === 'vertical' ? 'right' : 'bottom'))
+const tooltipSide = computed(() => ctx?.tooltipSide.value ?? (orientation.value === 'vertical' ? 'right' : 'bottom'))
 
 const component = computed(() => {
   if (props.disabled) return { is: 'button', props: { type: 'button', disabled: true } }
@@ -70,22 +82,30 @@ const component = computed(() => {
   return { is: 'button', props: { type: 'button' } }
 })
 
-const sizeClasses = computed(() => {
-  const square = size.value === 'sm' ? 'size-8' : 'size-10'
-  // Labeled items grow with their text instead of staying square.
-  const padded = size.value === 'sm' ? 'h-8 px-2.5 gap-1' : 'h-10 px-3 gap-1.5'
-  return props.showLabel ? padded : square
-})
+// Per-size layout classes. `square` sizes icon-only items; labeled items use
+// `padded` and grow with their text instead of staying square. xs reuses the
+// sm text style — the design system defines no xs one.
+const SIZE_CLASSES: Record<ActionBarSize, { square: string, padded: string, text: string }> = {
+  xs: { square: 'size-6', padded: 'h-6 px-2 gap-1', text: 'text-action-button-sm' },
+  sm: { square: 'size-8', padded: 'h-8 px-2.5 gap-1', text: 'text-action-button-sm' },
+  md: { square: 'size-10', padded: 'h-10 px-3 gap-1.5', text: 'text-action-button-md' },
+}
 
-const iconSizeClass = computed(() => (size.value === 'sm' ? 'size-4' : 'size-5'))
-const textClass = computed(() => (size.value === 'sm' ? 'text-action-button-sm' : 'text-action-button-md'))
+const sizeConfig = computed(() => SIZE_CLASSES[size.value])
+const iconSizeClass = useIconSize(size)
 
-// Persistent pressed background when the item is an active toggle. Uses the
-// dedicated neutral "active" token so an active-but-not-hovered toggle stays
-// visually distinct from a merely hovered item.
-const stateClasses = computed(() => ({
-  'bg-actions-neutral-active-overlay': props.active === true,
-}))
+// Everything bound on the item root: per-size layout and text classes, plus
+// the persistent pressed background when the item is an active toggle (the
+// dedicated neutral "active" token keeps an active-but-not-hovered toggle
+// visually distinct from a merely hovered item).
+const itemClasses = computed(() => [
+  props.showLabel ? sizeConfig.value.padded : sizeConfig.value.square,
+  sizeConfig.value.text,
+  {
+    'bg-actions-neutral-active-overlay': props.active === true,
+    'cursor-pointer': !props.disabled,
+  },
+])
 
 function onClick (event: MouseEvent) {
   if (props.disabled) {
@@ -113,20 +133,22 @@ function onClick (event: MouseEvent) {
           v-bind="component.props"
           :aria-label="label"
           :aria-pressed="active"
-          data-testid="ui-action-bar-item"
+          :data-testid="testId"
           class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
                text-actions-neutral-idle
                hover:bg-actions-neutral-hover-overlay
                focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
                disabled:opacity-50 disabled:cursor-not-allowed"
-          :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+          :class="itemClasses"
           @click="onClick"
         >
-          <span
-            v-if="icon"
-            :class="[icon, iconSizeClass]"
-            class="shrink-0"
-          />
+          <slot name="icon">
+            <span
+              v-if="icon"
+              :class="[icon, iconSizeClass]"
+              class="shrink-0"
+            />
+          </slot>
         </component>
       </TooltipTrigger>
       <TooltipPortal>
@@ -160,20 +182,22 @@ function onClick (event: MouseEvent) {
     v-bind="component.props"
     :aria-label="label"
     :aria-pressed="active"
-    data-testid="ui-action-bar-item"
+    :data-testid="testId"
     class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
            text-actions-neutral-idle
            hover:bg-actions-neutral-hover-overlay
            focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
            disabled:opacity-50 disabled:cursor-not-allowed"
-    :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+    :class="itemClasses"
     @click="onClick"
   >
-    <span
-      v-if="icon"
-      :class="[icon, iconSizeClass]"
-      class="shrink-0"
-    />
+    <slot name="icon">
+      <span
+        v-if="icon"
+        :class="[icon, iconSizeClass]"
+        class="shrink-0"
+      />
+    </slot>
     <span class="whitespace-nowrap">{{ label }}</span>
   </component>
 </template>

package/src/components/UiActionBar/types.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, InjectionKey } from 'vue'
 
 export type ActionBarOrientation = 'horizontal' | 'vertical'
-export type ActionBarSize = 'sm' | 'md'
+export type ActionBarSize = 'xs' | 'sm' | 'md'
 export type ActionBarPosition =
   | 'top-left'
   | 'top-right'
@@ -9,10 +9,12 @@ export type ActionBarPosition =
   | 'center-right'
   | 'bottom-left'
   | 'bottom-right'
+export type ActionBarTooltipSide = 'top' | 'right' | 'bottom' | 'left'
 
 export interface ActionBarContext {
   orientation: ComputedRef<ActionBarOrientation>
   size: ComputedRef<ActionBarSize>
+  tooltipSide: ComputedRef<ActionBarTooltipSide | undefined>
 }
 
 /**