@livestorm/ui-vue 2.0.5 → 3.0.0

package/src/components/UiInputRadio/index.ts

@@ -0,0 +1,3 @@
+export { default as UiInputRadio } from './UiInputRadio.vue'
+export { default as UiInputRadioGroup } from './UiInputRadioGroup.vue'
+export type { RadioSize, RadioValue, RadioVariant } from './types'

package/src/components/UiInputRadio/types.ts

@@ -0,0 +1,25 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { AcceptableValue } from 'reka-ui'
+
+export type RadioSize = 'sm' | 'md' | 'lg'
+
+export type RadioVariant = 'default' | 'card'
+
+/**
+ * Valid radio option values. `null` is a supported option value;
+ * `undefined` means "no selection". Object values must be reference-stable.
+ */
+export type RadioValue = AcceptableValue
+
+export interface RadioGroupContext {
+  /** Current group value (kept in sync in both controlled and uncontrolled mode) */
+  modelValue: Readonly<Ref<RadioValue | undefined>>
+  error: Readonly<Ref<boolean>>
+  size: Readonly<Ref<RadioSize>>
+  disabled: Readonly<Ref<boolean>>
+  /** id of the group error message, for aria-describedby on items */
+  messageId: Readonly<Ref<string | undefined>>
+}
+
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext> =
+  Symbol('ui-input-radio-group')

package/src/components/UiLoader/UiLoader.vue

@@ -3,7 +3,7 @@
     <svg
       :class="[
         sizeClass,
-        'text-action-neutral-idle animate-spin',
+        'text-actions-neutral-idle animate-spin',
       ]"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
@@ -26,20 +26,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { SIZES, type Size } from '../../constants'
+import { useIconSize } from '../../composables/useIconSize'
 
 const props = defineProps({
   size: {
-    type: String,
+    type: String as () => Size,
     default: 'md',
-    validator: (value: string) => ['sm', 'md', 'lg'].includes(value),
+    validator: (value: Size) => SIZES.includes(value),
   },
 })
 
-const sizeClass = computed(() => {
-  if (props.size === 'sm') return 'size-4'
-  if (props.size === 'md') return 'size-6'
-  if (props.size === 'lg') return 'size-8'
-  return 'size-6'
-})
+// Same ladder as the icons the spinner stands in for, so a button swapping its
+// icon for the loader doesn't resize the content and shift the label.
+const sizeClass = useIconSize(() => props.size)
 </script>

package/src/components/UiLogo/UiLogo.vue

@@ -5,6 +5,7 @@ import PulseVariant from "./variants/PulseVariant.vue";
 
 // CSS/svg remake of the lottie tornado logo (UiAnimatedLogo), with themable
 // colors. Animations live in variants/.
+// The viewBox hugs the badge, so height/width size the visible logo.
 // A variant renders the .badge/.mark paths, keeps its keyframes in its own
 // scoped style, and tags animated elements with .motion — then goes in the
 // VARIANTS map.
@@ -17,10 +18,15 @@ interface Props {
     width: number;
     /** Follow the brand palette (--color-brand-800) instead of the Livestorm navy. */
     themed?: boolean;
-    /** Dark badge + white mark, for light backgrounds. */
-    inverted?: boolean;
+    /**
+     * Dark badge + white mark, for light backgrounds. `"auto"` inverts
+     * whenever the logo sits inside a light `data-colors-semantic` scope.
+     */
+    inverted?: boolean | "auto";
     /** When false, renders the static logo (the resting pose). */
     animated?: boolean;
+    /** Accessible name announced for the logo. */
+    label?: string;
 }
 
 // vue casts absent boolean props to false, hence the explicit defaults
@@ -29,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
     themed: false,
     inverted: false,
     animated: true,
+    label: "Livestorm",
 });
 
 const VARIANTS = {
@@ -39,10 +46,17 @@ const VARIANTS = {
 const variantComponent = computed(() => VARIANTS[props.variant]);
 
 const markColor = computed(() =>
-    props.themed ? "var(--color-brand-800, #112660)" : "#112660",
+    props.themed ? "var(--color-brand-800, #12262B)" : "#12262B",
 );
 
 const colorVars = computed(() => {
+    if (props.inverted === "auto") {
+        // colors live in the scope-aware rules below
+        return props.themed
+            ? { "--ui-logo-auto-mark": "var(--color-brand-800, #12262B)" }
+            : {};
+    }
+
     if (props.inverted) {
         return {
             "--ui-logo-badge": markColor.value,
@@ -63,15 +77,18 @@ const colorVars = computed(() => {
   <div class="ui-logo-loader">
     <svg
       class="ui-logo"
-      :class="{ 'ui-logo--static': !props.animated }"
+      :class="{
+        'ui-logo--static': !props.animated,
+        'ui-logo--invert-auto': props.inverted === 'auto',
+      }"
       :style="{
         height: props.height + 'rem',
         width: props.width + 'rem',
         ...colorVars,
       }"
-      viewBox="0 0 600 600"
+      viewBox="67.5 67.5 465 465"
       role="img"
-      aria-label="Livestorm"
+      :aria-label="props.label"
     >
       <component :is="variantComponent" />
     </svg>
@@ -84,13 +101,30 @@ const colorVars = computed(() => {
 }
 
 .ui-logo :deep(.mark) {
-    fill: var(--ui-logo-mark, #112660);
+    fill: var(--ui-logo-mark, #12262B);
 }
 
 .ui-logo--static :deep(.motion) {
     animation: none;
 }
 
+/* inverted="auto": the nearest data-colors-semantic scope decides.
+   Handles one level of scope nesting — all the app has. */
+.ui-logo--invert-auto {
+    --ui-logo-badge: #ffffff;
+    --ui-logo-mark: var(--ui-logo-auto-mark, #12262B);
+}
+
+[data-colors-semantic="light"] .ui-logo--invert-auto {
+    --ui-logo-badge: var(--ui-logo-auto-mark, #12262B);
+    --ui-logo-mark: #ffffff;
+}
+
+[data-colors-semantic="light"] [data-colors-semantic="dark"] .ui-logo--invert-auto {
+    --ui-logo-badge: #ffffff;
+    --ui-logo-mark: var(--ui-logo-auto-mark, #12262B);
+}
+
 @media (prefers-reduced-motion: reduce) {
     .ui-logo :deep(.motion) {
         animation: none;

package/src/components/UiMenu/UiMenuContent.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(props, emits)
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="{ ...forwarded, ...$attrs }"
-      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1 z-50"
+      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1.5 flex flex-col gap-0.5 z-50"
       data-colors-semantic="light"
     >
       <slot />

package/src/components/UiMenu/UiMenuGroup.vue

@@ -10,7 +10,7 @@ defineProps<{
   <DropdownMenuGroup v-bind="$attrs">
     <DropdownMenuLabel
       v-if="label"
-      class="text-content-legends-bold-md text-text-neutral-tertiary px-3 pt-3 pb-1"
+      class="text-content-legends-bold-md text-text-neutral-secondary px-3 pt-3 pb-1"
     >
       {{ label }}
     </DropdownMenuLabel>

package/src/components/UiMenu/UiMenuItem.vue

@@ -11,7 +11,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 <template>
   <DropdownMenuItem
     v-bind="{ ...forwarded, ...$attrs }"
-    class="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-actions-primary-hover-overlay data-[highlighted]:bg-actions-primary-hover-overlay transition-colors text-left outline-none cursor-pointer text-content-text-md-regular text-text-neutral-base"
+    class="w-full flex items-center gap-2 min-h-10 px-3 py-1.5 rounded-lg hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay transition-colors text-left outline-none cursor-pointer text-content-text-md-regular text-text-neutral-base"
   >
     <slot />
   </DropdownMenuItem>

package/src/components/UiMenu/UiMenuSubContent.vue

@@ -14,7 +14,7 @@ const forwarded = useForwardPropsEmits(props, emits)
   <DropdownMenuPortal>
     <DropdownMenuSubContent
       v-bind="{ ...forwarded, ...$attrs }"
-      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1 z-50"
+      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1.5 flex flex-col gap-0.5 z-50"
       data-colors-semantic="light"
     >
       <slot />

package/src/components/UiMenu/UiMenuSubTrigger.vue

@@ -9,9 +9,9 @@ const forwarded = useForwardProps(props)
 <template>
   <DropdownMenuSubTrigger
     v-bind="{ ...forwarded, ...$attrs }"
-    class="w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg hover:bg-actions-primary-hover-overlay data-[highlighted]:bg-actions-primary-hover-overlay data-[state=open]:bg-actions-primary-hover-overlay transition-colors text-left outline-none cursor-pointer"
+    class="w-full flex items-center justify-between gap-3 min-h-10 px-3 py-1.5 rounded-lg hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay data-[state=open]:bg-actions-neutral-hover-overlay transition-colors text-left outline-none cursor-pointer"
   >
     <slot />
-    <span class="i-ls-chevron-right w-4 h-4 text-text-neutral-tertiary shrink-0" />
+    <span class="i-ph-caret-right w-4 h-4 text-text-neutral-tertiary shrink-0" />
   </DropdownMenuSubTrigger>
 </template>

package/src/components/UiPage/UiPage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch, getCurrentInstance, type Slot } from 'vue'
+import { computed, onBeforeUnmount, ref, watch, getCurrentInstance, type Slot } from 'vue'
 import { BREAKPOINT_LG } from '../../utils/breakpoints'
 import { useResponsive } from '../../utils/responsive'
-import useThemeAndModes from '../../composables/useThemeAndModes'
+import { useContentMode } from '../../composables/useContentMode'
 import { useMobileMenu } from '../../composables/useMobileMenu'
 import UiLoader from '../UiLoader/UiLoader.vue'
 
@@ -36,6 +36,24 @@ import UiLoader from '../UiLoader/UiLoader.vue'
 // │ │ └─────────────────────────────────────────────────┘ │
 // └─┴─────────────────────────────────────────────────────┘
 
+/**
+ * Headroom sizes, in px: the gap above the content card that lets the shell
+ * background show through. One map so the page frame has a single source of
+ * truth — retune here rather than at call sites.
+ */
+const HEADROOM_GAP_PX = {
+  none: 0,
+  sm: 4,
+  md: 10,
+  lg: 16,
+  xl: 24,
+} as const
+
+type HeadroomGap = keyof typeof HEADROOM_GAP_PX
+
+/** Used when the card sits flush at the top and no size is given. */
+const DEFAULT_HEADROOM_GAP: HeadroomGap = 'md'
+
 const props = withDefaults(defineProps<{
   /**
    * Extra classes for the inner content `<section>`. Use to override the
@@ -50,9 +68,30 @@ const props = withDefaults(defineProps<{
    * menu row — e.g. "Home" — without reaching into useMobileMenu directly.
    */
   title?: string
+  /**
+   * The shape of the page inside the content card.
+   * - `document` (default): the card scrolls as a single column. The common
+   *   dashboard page — lists, forms, detail views.
+   * - `app`: the card fills the available height and never scrolls itself;
+   *   the page owns its own scroll regions. For editor-style pages (split
+   *   panes, canvases) that would otherwise opt out of UiPage entirely.
+   */
+  variant?: 'document' | 'app'
+  /**
+   * Headroom above the content card, letting the shell background show
+   * through. Sizes map to px via `HEADROOM_GAP_PX`.
+   *
+   * Left unset, the card gets `DEFAULT_HEADROOM_GAP` only when it sits flush
+   * at the top — i.e. there is no page header or left slot already offsetting
+   * it. Naming a size applies it in either case, and `none` removes the gap
+   * on a page that would otherwise get the default.
+   */
+  headroomGap?: HeadroomGap
 }>(), {
   pageContentClasses: '',
   title: undefined,
+  variant: 'document',
+  headroomGap: undefined,
 })
 
 const slots = defineSlots<{
@@ -65,6 +104,12 @@ const slots = defineSlots<{
   default?(): Slot
 }>()
 
+// An `app` page manages its own scrolling, so every level from the page
+// content down to the card must stop scrolling and stop growing past the
+// viewport — otherwise a split-pane editor gets a second, outer scrollbar.
+const isApp = computed(() => props.variant === 'app')
+const scrollClass = computed(() => (isApp.value ? 'overflow-hidden' : 'overflow-y-auto'))
+
 // Check for slot presence
 const bannerSlot = computed(() => !!slots.banner)
 const pageHeaderSlot = computed(() => !!slots.pageHeader)
@@ -73,6 +118,38 @@ const leftSlot = computed(() => !!slots.leftSlot)
 const headerSlot = computed(() => !!slots.header)
 const footerSlot = computed(() => !!slots.footer)
 
+// Row track for the card grid. An `app` page needs its main row to take the
+// leftover height and be allowed to shrink (minmax(0,1fr)), so nested
+// overflow containers resolve against a real height instead of growing.
+// Spelled out as literals: Tailwind only generates classes it can see as
+// complete strings in the source.
+const cardRowsClass = computed(() => {
+  if (!isApp.value) { return headerSlot.value ? 'grid-rows-[min-content]' : '' }
+  if (headerSlot.value && footerSlot.value) { return 'grid-rows-[min-content_minmax(0,1fr)_min-content]' }
+  if (headerSlot.value) { return 'grid-rows-[min-content_minmax(0,1fr)]' }
+  if (footerSlot.value) { return 'grid-rows-[minmax(0,1fr)_min-content]' }
+  return 'grid-rows-[minmax(0,1fr)]'
+})
+
+// A named size always wins; otherwise fall back to the default, and only when
+// the card is flush at the top (a page header or left slot already provides
+// the offset). Applied as an inline style rather than a utility so the value
+// does not depend on Tailwind's `--spacing` fallback resolving to 0.25rem.
+// A zero gap emits no style at all, so `none` and "already offset" produce
+// identical markup.
+//
+// Padding on the clipping wrapper rather than a margin on the card: the card
+// is `h-full`, so a margin would push a full-height box down inside a fixed
+// height, overflowing by exactly the gap and clipping that much off the
+// bottom. As padding it shrinks the box the card measures itself against.
+const headroomGapStyle = computed(() => {
+  const size = props.headroomGap ?? (
+    !pageHeaderSlot.value && !leftSlot.value ? DEFAULT_HEADROOM_GAP : 'none'
+  )
+  const px = HEADROOM_GAP_PX[size]
+  return px ? { paddingTop: `${px}px` } : undefined
+})
+
 // Feed the page title to UiShell's fallback mobile menu topbar. Watched so a
 // reactive title updates live, and cleared on unmount so it doesn't leak to
 // the next route.
@@ -92,28 +169,9 @@ const displayLeftSlot = computed(() => responsive.value.width >= BREAKPOINT_LG)
 const UiPage = ref<HTMLElement | undefined>()
 const PageContent = ref<HTMLElement | undefined>()
 
-const { addElementToWatch } = useThemeAndModes()
-
-// The page content historically forces light mode. Only lift that pin when
-// the internal theming tooling is enabled, so the stored content mode
-// (driven by the ThemePicker) can apply; for everyone else the content
-// stays light regardless of what localStorage may hold.
-// Read in onMounted, not at setup: setup also runs during SSR (no
-// localStorage), and server + client-hydration markup must be identical —
-// the pin lifts right after mount for the internal tooling instead.
-const isInternalThemingEnabled = ref(false)
-
-onMounted(() => {
-  isInternalThemingEnabled.value = localStorage.getItem('ls-internal-theming') === 'true'
-
-  addElementToWatch(
-    'content',
-    {
-      selector: '[data-name="ui-page-content"]',
-      element: PageContent.value!,
-      ...(isInternalThemingEnabled.value ? {} : { modeOverride: 'light' }),
-    })
-})
+// Follow the stored content mode via the shared composable (also used by the
+// settings shell), so the page content's data-colors-semantic stays in sync.
+const { contentMode } = useContentMode(PageContent, '[data-name="ui-page-content"]')
 
 </script>
 
@@ -137,7 +195,7 @@ onMounted(() => {
         v-if="pageHeaderSlot"
         ref="pageHeader"
         data-name="pageHeader"
-        class="page-header p-4 md:p-8 md:pl-0 relative"
+        class="page-header p-4 md:px-8 md:py-6 md:pl-0 relative"
       >
         <slot name="pageHeader" />
       </section>
@@ -155,8 +213,11 @@ onMounted(() => {
       <section
         ref="PageContent"
         data-name="pageContent"
-        class="page-content flex-1 overflow-y-auto w-full grid has-[>:nth-child(2)]:lg:grid-cols-[1fr_2fr] lg:gap-x-8 min-h-0"
-        :data-colors-semantic="isInternalThemingEnabled ? undefined : 'light'"
+        :class="[
+          'page-content flex-1 w-full grid has-[>:nth-child(2)]:lg:grid-cols-[1fr_2fr] lg:gap-x-8 min-h-0',
+          scrollClass,
+        ]"
+        :data-colors-semantic="contentMode"
       >
         <aside
           v-if="leftSlot && displayLeftSlot"
@@ -166,14 +227,15 @@ onMounted(() => {
           <slot name="leftSlot" />
         </aside>
 
-        <div class="min-w-0 overflow-hidden rounded-tl-xl">
+        <div
+          class="min-w-0 overflow-hidden rounded-tl-xl"
+          :style="headroomGapStyle"
+        >
           <section
             :class="[
-              'content min-w-0 overflow-y-auto h-full bg-surface-neutral-bg-main grid shadow-shadows-drop-shadow-2xl rounded-tl-xl',
-              // Nudge the content down only when it sits flush at the top — i.e.
-              // no page header and no left slot to align against.
-              !pageHeaderSlot && !leftSlot ? 'mt-1' : '',
-              headerSlot ? 'grid-rows-[min-content]' : '',
+              'content min-w-0 h-full bg-surface-neutral-bg-main grid shadow-shadows-drop-shadow-2xl rounded-tl-xl',
+              scrollClass,
+              cardRowsClass,
               props.pageContentClasses,
             ]"
             data-name="ui-shell-content"
@@ -188,7 +250,13 @@ onMounted(() => {
 
             <section
               data-name="main-content"
-              class="route-content w-full min-w-0 flex flex-col"
+              :class="[
+                'route-content w-full min-w-0 flex flex-col',
+                // Let the row shrink so an editor's own overflow containers
+                // resolve against a real height. Scoped to `app` so the 15
+                // existing document pages keep their current growth behaviour.
+                isApp ? 'min-h-0' : '',
+              ]"
             >
               <slot>
                 <UiLoader />

package/src/components/UiPageHeader/UiPageHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, useSlots, watch, type Slot } from 'vue'
-import LivestormLogo from '@livestorm/ui-tokens/output/vectors/logos/livestorm-white.svg'
 import UiButton from '../UiButton/UiButton.vue'
+import UiLogo from '../UiLogo/UiLogo.vue'
 import { useMobileMenu } from '../../composables/useMobileMenu'
 import type { RouteLocationRaw } from 'vue-router'
 
@@ -65,8 +65,15 @@ onBeforeUnmount(() => syncTrigger(false))
 </script>
 
 <template>
+  <!--
+    min-h-10 keeps the header a stable height whether or not a page fills the
+    action slots. Without it the row is sized by its tallest child — a bare
+    title is 32px but an action button is 40px — so the header, and the content
+    card below it, shifted by 8px between pages like Events and People.
+    A floor, not a fixed height: taller or wrapped content still grows.
+  -->
   <div
-    class="flex flex-1 min-w-0 justify-between gap-5 md:gap-8 items-center"
+    class="flex flex-1 min-w-0 justify-between gap-5 md:gap-8 items-center min-h-10"
   >
     <div class="flex min-w-0 items-center gap-2">
       <div v-if="showLogo">
@@ -74,11 +81,13 @@ onBeforeUnmount(() => syncTrigger(false))
           :to="logoTo ? logoTo : '#'"
           class="grid items-center w-8 h-8"
         >
-          <img
-            :src="LivestormLogo"
-            alt="Livestorm logo"
-            class="w-6 h-6"
-          >
+          <UiLogo
+            :height="1.5"
+            :width="1.5"
+            :themed="false"
+            :animated="false"
+            inverted="auto"
+          />
         </router-link>
       </div>
       <div
@@ -88,7 +97,7 @@ onBeforeUnmount(() => syncTrigger(false))
         <UiButton
           color="neutral"
           variant="tertiary"
-          icon="i-ls-menu"
+          icon="i-ph-list"
           @click="toggle"
         />
       </div>
@@ -96,7 +105,7 @@ onBeforeUnmount(() => syncTrigger(false))
         <UiButton
           color="neutral"
           variant="tertiary"
-          icon="i-ls-back"
+          icon="i-ph-arrow-left"
         />
       </div>
       <div
@@ -124,5 +133,16 @@ onBeforeUnmount(() => syncTrigger(false))
     >
       <slot name="slotB" />
     </div>
+
+    <!--
+      Teleport target for page-level actions, so a component deep inside the
+      page content (e.g. a settings section) can surface its primary action
+      here without threading props up. `contents` keeps the empty target out
+      of the flex layout, so pages that don't use it are unaffected.
+    -->
+    <div
+      id="ui-page-header-actions-teleport-target"
+      class="contents"
+    />
   </div>
 </template>

package/src/components/UiRoomButton/UiRoomButton.vue

@@ -57,7 +57,7 @@ const isIconOnly = computed(() => !slots.default);
         >
           <svg
             v-if="loading"
-            class="h-4 w-4 shrink-0 animate-spin"
+            class="size-5 shrink-0 animate-spin"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -78,7 +78,7 @@ const isIconOnly = computed(() => !slots.default);
           </svg>
           <div
             v-else-if="icon"
-            class="h-4 w-4 shrink-0"
+            class="size-5 shrink-0"
             :class="icon"
           />
           <slot />
@@ -117,7 +117,7 @@ const isIconOnly = computed(() => !slots.default);
   >
     <svg
       v-if="loading"
-      class="h-4 w-4 shrink-0 animate-spin"
+      class="size-5 shrink-0 animate-spin"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -138,7 +138,7 @@ const isIconOnly = computed(() => !slots.default);
     </svg>
     <div
       v-else-if="icon"
-      class="h-4 w-4 shrink-0"
+      class="size-5 shrink-0"
       :class="icon"
     />
     <slot />

package/src/components/UiShell/UiShell.vue

@@ -69,7 +69,7 @@ const fallbackLabel = computed(() => menuLabel.value ?? props.openMenuLabel)
           <UiButton
             color="neutral"
             variant="tertiary"
-            icon="i-ls-menu"
+            icon="i-ph-list"
             :aria-label="fallbackLabel"
             @click="toggle"
           />

package/src/components/UiSideMenu/UiSideMenu.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import LivestormLogo from '@livestorm/ui-tokens/output/vectors/logos/livestorm-white.svg'
 import type { Slot } from 'vue'
 import type { SideMenuCollapsedItem, SideMenuItemProps, SideMenuMoreItem } from './types'
 import UiSideMenuItem from './UiSideMenuItem.vue'
+import UiLogo from '../UiLogo/UiLogo.vue'
 import UiButton from '../UiButton/UiButton.vue'
 import UiPopover from '../UiPopover/UiPopover.vue'
 import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
@@ -189,17 +189,20 @@ function handleLogoClick (event: MouseEvent) {
     <!-- Top -->
     <div class="flex flex-col md:items-center gap-8">
       <div class="flex items-center justify-between">
-        <img
+        <UiLogo
           v-if="showLivestormLogo"
-          :src="LivestormLogo"
-          :alt="logoAlt"
-          class="w-10 h-10 ml-4 md:ml-0"
-          role="img"
+          :height="2.5"
+          :width="2.5"
+          :themed="false"
+          :animated="false"
+          inverted="auto"
+          :label="logoAlt"
+          class="ml-4 md:ml-0"
           @click="handleLogoClick"
-        >
+        />
         <div class="md:hidden">
           <UiButton
-            icon="i-ls-x-stream"
+            icon="i-ph-x"
             variant="tertiary"
             color="neutral"
             size="lg"
@@ -289,7 +292,7 @@ function handleLogoClick (event: MouseEvent) {
             <UiPopoverTrigger class="w-full cursor-pointer">
               <UiSideMenuItem
                 :label="translate('room_bottom-bar_controls-label_more')"
-                icon="i-ls-more-horizontal"
+                icon="i-ph-dots-three"
                 :is-active="false"
                 :inside-interactive="true"
                 :badge="moreBadge"
@@ -420,7 +423,7 @@ function handleLogoClick (event: MouseEvent) {
             <UiPopoverTrigger class="cursor-pointer">
               <UiSideMenuItem
                 :label="translate('room_bottom-bar_controls-label_more')"
-                icon="i-ls-more-vertical"
+                icon="i-ph-dots-three-vertical"
                 :is-active="false"
                 :inside-interactive="true"
               />

package/src/components/UiSideMenu/UiSideMenuItemContent.vue

@@ -103,7 +103,7 @@ const textAlignClass = computed(() => {
         isActive ? 'bg-actions-neutral-active-overlay text-actions-neutral-idle' : 'text-actions-neutral-idle-alpha-strong',
         // Avatar box is 40px; on mobile `p-1` makes its total height (48px)
         // match icon items (`p-3` + 24px icon). Both are 40px on desktop.
-        hasAvatarSlot ? 'p-1 md:p-0' : 'p-3',
+        hasAvatarSlot ? 'p-1 md:p-0' : 'p-2.5',
       ]"
     >
       <!-- Icon/avatar wrapper: anchors the notification badge to the icon's
@@ -119,7 +119,7 @@ const textAlignClass = computed(() => {
         <div
           v-if="icon"
           :class="[
-            'w-6 h-6 md:w-4 md:h-4',
+            'w-6 h-6 md:w-5 md:h-5',
             icon
           ]"
           aria-hidden="true"