@slidev/client 0.49.29 → 0.50.0-beta.10

package/internals/DrawingControls.vue

@@ -1,139 +1,140 @@
-<script setup lang="ts">
-import { Menu } from 'floating-vue'
-import { useDrawings } from '../composables/useDrawings'
-import VerticalDivider from './VerticalDivider.vue'
-import Draggable from './Draggable.vue'
-import IconButton from './IconButton.vue'
-
-const {
-  brush,
-  canClear,
-  canRedo,
-  canUndo,
-  clear,
-  drauu,
-  drawingEnabled,
-  drawingMode,
-  drawingPinned,
-  brushColors,
-} = useDrawings()
-
-function undo() {
-  drauu.undo()
-}
-function redo() {
-  drauu.redo()
-}
-
-let lastDrawingMode: typeof drawingMode.value = 'stylus'
-function setDrawingMode(mode: typeof drawingMode.value) {
-  drawingMode.value = mode
-  drawingEnabled.value = true
-  if (mode !== 'eraseLine')
-    lastDrawingMode = mode
-}
-function setBrushColor(color: typeof brush.color) {
-  brush.color = color
-  drawingEnabled.value = true
-  drawingMode.value = lastDrawingMode
-}
-</script>
-
-<template>
-  <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
-    :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
-    storage-key="slidev-drawing-pos"
-    :initial-x="10"
-    :initial-y="10"
-  >
-    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <carbon:pen />
-    </IconButton>
-    <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
-      <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
-        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
-      </svg>
-    </IconButton>
-    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <carbon:arrow-up-right />
-    </IconButton>
-    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <carbon:radio-button />
-    </IconButton>
-    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <carbon:checkbox />
-    </IconButton>
-    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <carbon:erase />
-    </IconButton>
-
-    <VerticalDivider />
-
-    <Menu>
-      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
-        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
-          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
-          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-        </svg>
-      </IconButton>
-      <template #popper>
-        <div class="flex bg-main p-2">
-          <div class="inline-block w-7 text-center">
-            {{ brush.size }}
-          </div>
-          <div class="pt-.5">
-            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
-          </div>
-        </div>
-      </template>
-    </Menu>
-    <IconButton
-      v-for="color of brushColors"
-      :key="color"
-      title="Set brush color"
-      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
-      @click="setBrushColor(color)"
-    >
-      <div
-        class="w-6 h-6 transition-all transform border"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
-        :style="drawingEnabled ? { background: color } : { borderColor: color }"
-      />
-    </IconButton>
-
-    <VerticalDivider />
-
-    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
-      <carbon:undo />
-    </IconButton>
-    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
-      <carbon:redo />
-    </IconButton>
-    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
-      <carbon:trash-can />
-    </IconButton>
-
-    <VerticalDivider />
-    <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
-      <carbon:pin v-show="!drawingPinned" />
-    </IconButton>
-    <IconButton
-      v-if="drawingEnabled"
-      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
-      :class="{ shallow: !drawingEnabled }"
-      @click="drawingEnabled = !drawingEnabled"
-    >
-      <carbon:error v-show="drawingPinned" />
-      <carbon:close-outline v-show="!drawingPinned" />
-    </IconButton>
-  </Draggable>
-</template>
-
-<style>
-.v-popper--theme-menu .v-popper__arrow-inner {
-  --uno: border-main;
-}
-</style>
+<script setup lang="ts">
+import { Menu } from 'floating-vue'
+import { useDrawings } from '../composables/useDrawings'
+import Draggable from './Draggable.vue'
+import IconButton from './IconButton.vue'
+import VerticalDivider from './VerticalDivider.vue'
+
+const {
+  brush,
+  canClear,
+  canRedo,
+  canUndo,
+  clear,
+  drauu,
+  drawingEnabled,
+  drawingMode,
+  drawingPinned,
+  brushColors,
+} = useDrawings()
+
+function undo() {
+  drauu.undo()
+}
+function redo() {
+  drauu.redo()
+}
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
+function setDrawingMode(mode: typeof drawingMode.value) {
+  drawingMode.value = mode
+  drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
+}
+function setBrushColor(color: typeof brush.color) {
+  brush.color = color
+  drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
+}
+</script>
+
+<template>
+  <Draggable
+    v-if="drawingEnabled || drawingPinned"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
+    :class="!drawingEnabled && drawingPinned ? 'opacity-40 hover:opacity-90' : ''"
+    storage-key="slidev-drawing-pos"
+    :initial-x="10"
+    :initial-y="10"
+  >
+    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
+      <div class="i-carbon:pen" />
+    </IconButton>
+    <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
+      <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
+      </svg>
+    </IconButton>
+    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
+      <div class="i-carbon:arrow-up-right" />
+    </IconButton>
+    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
+      <div class="i-carbon:radio-button" />
+    </IconButton>
+    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
+      <div class="i-carbon:checkbox" />
+    </IconButton>
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+      <div class="i-carbon:erase" />
+    </IconButton>
+
+    <VerticalDivider />
+
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
+    <IconButton
+      v-for="color of brushColors"
+      :key="color"
+      title="Set brush color"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
+      @click="setBrushColor(color)"
+    >
+      <div
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
+        :style="drawingEnabled ? { background: color } : { borderColor: color }"
+      />
+    </IconButton>
+
+    <VerticalDivider />
+
+    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
+      <div class="i-carbon:undo" />
+    </IconButton>
+    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
+      <div class="i-carbon:redo" />
+    </IconButton>
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
+      <div class="i-carbon:trash-can" />
+    </IconButton>
+
+    <VerticalDivider />
+    <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
+      <div v-show="drawingPinned" class="i-carbon:pin-filled transform -rotate-45" />
+      <div v-show="!drawingPinned" class="i-carbon:pin" />
+    </IconButton>
+    <IconButton
+      v-if="drawingEnabled"
+      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
+      :class="{ shallow: !drawingEnabled }"
+      @click="drawingEnabled = !drawingEnabled"
+    >
+      <div v-show="drawingPinned" class="i-carbon:error" />
+      <div v-show="!drawingPinned" class="i-carbon:close-outline" />
+    </IconButton>
+  </Draggable>
+</template>
+
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
+}
+</style>

package/internals/DrawingLayer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useSlideContext } from '../context'
 import { useDrawings } from '../composables/useDrawings'
+import { useSlideContext } from '../context'
 
 const { drauu, drawingEnabled, loadCanvas } = useDrawings()
 

package/internals/Goto.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import TitleRenderer from '#slidev/title-renderer'
 import Fuse from 'fuse.js'
-import { activeElement, showGotoDialog } from '../state'
+import { computed, ref, watch } from 'vue'
 import { useNav } from '../composables/useNav'
-import TitleRenderer from '#slidev/title-renderer'
+import { activeElement, showGotoDialog } from '../state'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()

package/internals/NavControls.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
+import CustomNavControls from '#slidev/custom-nav-controls'
 import { computed, ref, shallowRef } from 'vue'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
+import { configs } from '../env'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { downloadPDF } from '../utils'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
-import { configs } from '../env'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
-import Settings from './Settings.vue'
-import MenuButton from './MenuButton.vue'
-import VerticalDivider from './VerticalDivider.vue'
+import { downloadPDF } from '../utils'
 import IconButton from './IconButton.vue'
+import MenuButton from './MenuButton.vue'
+import Settings from './Settings.vue'
 
-import CustomNavControls from '#slidev/custom-nav-controls'
+import VerticalDivider from './VerticalDivider.vue'
 
 const props = defineProps({
   persist: {
@@ -63,17 +63,17 @@ if (__SLIDEV_FEATURE_RECORD__)
       @mouseleave="onMouseLeave"
     >
       <IconButton v-if="!isEmbedded" :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
-        <carbon:minimize v-if="isFullscreen" />
-        <carbon:maximize v-else />
+        <div v-if="isFullscreen" class="i-carbon:minimize" />
+        <div v-else class="i-carbon:maximize" />
       </IconButton>
       <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prev">
-        <carbon:arrow-left />
+        <div class="i-carbon:arrow-left" />
       </IconButton>
       <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="next">
-        <carbon:arrow-right />
+        <div class="i-carbon:arrow-right" />
       </IconButton>
       <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
-        <carbon:apps />
+        <div class="i-carbon:apps" />
       </IconButton>
       <IconButton
         v-if="!isColorSchemaConfigured"
@@ -104,7 +104,7 @@ if (__SLIDEV_FEATURE_RECORD__)
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
         <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
-          <carbon:pen />
+          <div class="i-carbon:pen" />
           <div
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
@@ -116,10 +116,10 @@ if (__SLIDEV_FEATURE_RECORD__)
 
       <template v-if="!isEmbedded">
         <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
-          <carbon:presentation-file />
+          <div class="i-carbon:presentation-file" />
         </IconButton>
         <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
-          <carbon:user-speaker />
+          <div class="i-carbon:user-speaker" />
         </IconButton>
 
         <IconButton
@@ -128,17 +128,17 @@ if (__SLIDEV_FEATURE_RECORD__)
           class="lt-md:hidden"
           @click="showEditor = !showEditor"
         >
-          <carbon:text-annotation-toggle />
+          <div class="i-carbon:text-annotation-toggle" />
         </IconButton>
 
         <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
-          <carbon:template />
+          <div class="i-carbon:template" />
           {{ presenterLayout }}
         </IconButton>
       </template>
       <template v-if="!__DEV__">
         <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
-          <carbon:download />
+          <div class="i-carbon:download" />
         </IconButton>
       </template>
 
@@ -147,14 +147,14 @@ if (__SLIDEV_FEATURE_RECORD__)
         title="Show info"
         @click="showInfoDialog = !showInfoDialog"
       >
-        <carbon:information />
+        <div class="i-carbon:information" />
       </IconButton>
 
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
             <IconButton title="Adjust settings">
-              <carbon:settings-adjust />
+              <div class="i-carbon:settings-adjust" />
             </IconButton>
           </template>
           <template #menu>

package/internals/NoteDisplay.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import type { ClicksContext } from '@slidev/types'
+import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import { CLICKS_MAX } from '../constants'
 
 const props = withDefaults(

package/internals/NoteEditable.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { ClicksContext } from '@slidev/types'
 import type { PropType } from 'vue'
-import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import type { ClicksContext } from '@slidev/types'
+import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import NoteDisplay from './NoteDisplay.vue'
 

package/internals/PrintContainer.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { parseRangeString } from '@slidev/parser/core'
-import { computed } from 'vue'
+import { parseRangeString } from '@slidev/parser/utils'
 import { provideLocal } from '@vueuse/core'
-import { configs, slideAspect, slideWidth } from '../env'
-import { injectionSlideScale } from '../constants'
+import { computed } from 'vue'
 import { useNav } from '../composables/useNav'
+import { injectionSlideScale } from '../constants'
+import { configs, slideAspect, slideWidth } from '../env'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{

package/internals/PrintSlide.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SlideRoute } from '@slidev/types'
-import { useFixedNav, useNav } from '../composables/useNav'
 import { createFixedClicks } from '../composables/useClicks'
+import { useFixedNav, useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
 import PrintSlideClick from './PrintSlideClick.vue'
 

package/internals/PrintSlideClick.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, reactive, shallowRef } from 'vue'
+import type { SlidevContextNav } from '../composables/useNav'
+import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
+import { computed, reactive, shallowRef } from 'vue'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
-import type { SlidevContextNav } from '../composables/useNav'
 import SlideWrapper from './SlideWrapper.vue'
-import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 
 const { nav } = defineProps<{
   nav: SlidevContextNav

package/internals/QuickOverview.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { breakpoints, showOverview, windowSize } from '../state'
-import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
-import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
-import { pathPrefix } from '../env'
-import SlideContainer from './SlideContainer.vue'
-import SlideWrapper from './SlideWrapper.vue'
+import { CLICKS_MAX } from '../constants'
+import { configs, pathPrefix } from '../env'
+import { currentOverviewPage, overviewRowCount } from '../logic/overview'
+import { breakpoints, showOverview, windowSize } from '../state'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
+import SlideContainer from './SlideContainer.vue'
+import SlideWrapper from './SlideWrapper.vue'
 
 const { currentSlideNo, go: goSlide, slides } = useNav()
 
@@ -109,7 +109,7 @@ watchEffect(() => {
   >
     <div
       v-if="showOverview"
-      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
       @click="close"
     >
       <div
@@ -128,6 +128,8 @@ watchEffect(() => {
           >
             <SlideContainer
               :key="route.no"
+              :no="route.no"
+              :use-snapshot="configs.overviewSnapshots"
               :width="cardWidth"
               class="pointer-events-none"
             >
@@ -157,7 +159,7 @@ watchEffect(() => {
   </Transition>
   <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
-      <carbon:close />
+      <div class="i-carbon:close" />
     </IconButton>
     <IconButton
       v-if="__SLIDEV_FEATURE_PRESENTER__"
@@ -168,7 +170,7 @@ watchEffect(() => {
       tab-index="-1"
       class="text-2xl"
     >
-      <carbon:list-boxes />
+      <div class="i-carbon:list-boxes" />
     </IconButton>
   </div>
 </template>

package/internals/RecordingControls.vue

@@ -4,8 +4,8 @@ import { onMounted, watch } from 'vue'
 import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
-import MenuButton from './MenuButton.vue'
 import IconButton from './IconButton.vue'
+import MenuButton from './MenuButton.vue'
 
 const {
   recording,
@@ -41,7 +41,7 @@ onMounted(() => {
     title="Toggle camera view"
     @click="toggleAvatar"
   >
-    <carbon:user-avatar />
+    <div class="i-carbon:user-avatar" />
   </IconButton>
 
   <IconButton
@@ -49,13 +49,13 @@ onMounted(() => {
     :title="recording ? 'Stop record video' : 'Record video'"
     @click="toggleRecording"
   >
-    <carbon:stop-outline v-if="recording" />
-    <carbon:video v-else />
+    <div v-if="recording" class="i-carbon:stop-outline" />
+    <div v-else class="i-carbon:video" />
   </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
       <IconButton title="Select recording device" class="h-full !text-sm !px-0 aspect-initial">
-        <carbon:chevron-up class="opacity-50" />
+        <div class="i-carbon:chevron-up opacity-50" />
       </IconButton>
     </template>
     <template #menu>

package/internals/RecordingDialog.vue

@@ -2,8 +2,8 @@
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
 import { getFilename, mimeType, recordCamera, recorder, recordingName } from '../logic/recording'
-import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'
+import Modal from './Modal.vue'
 
 const props = defineProps({
   modelValue: {
@@ -34,7 +34,7 @@ async function start() {
 <template>
   <Modal v-model="value" class="px-6 py-4 recording-dialog flex flex-col gap-2">
     <div class="flex gap-2 text-xl">
-      <carbon:video class="my-auto" />Recording
+      <div class="i-carbon:video my-auto" />Recording
     </div>
     <div class="grid grid-cols-2 gap-4">
       <div class="flex flex-col gap-2 py-2">

package/internals/SelectList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
 import type { PropType } from 'vue'
 import type { SelectionItem } from './types'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps({
   modelValue: {
@@ -34,8 +34,10 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
         :class="{ active: value === item.value }"
         @click="() => { value = item.value; item.onClick?.() }"
       >
-        <carbon:checkmark class="text-green-500" :class="{ 'opacity-0': value !== item.value }" />
-        {{ item.display || item.value }}
+        <div class="i-carbon:checkmark text-green-500 mya" :class="{ 'opacity-0': value !== item.value }" />
+        <div :class="{ 'opacity-50': value !== item.value }">
+          {{ item.display || item.value }}
+        </div>
       </div>
     </div>
   </div>
@@ -47,7 +49,7 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .item {
-  @apply flex rounded whitespace-nowrap py-1 px-4 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
+  @apply flex rounded whitespace-nowrap py-1 gap-1 px-2 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
 
   svg {
     @apply mr-1 -ml-2 my-auto;

package/internals/Settings.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { SelectionItem } from './types'
 import { useWakeLock } from '@vueuse/core'
 import { slideScale, wakeLockEnabled } from '../state'
 import SelectList from './SelectList.vue'
-import type { SelectionItem } from './types'
 
 const scaleItems: SelectionItem<number>[] = [
   {