@linto-ai/transcript-ui-ui 0.9.3 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linto-ai/transcript-ui-ui",
-  "version": "0.9.3",
+  "version": "0.9.6",
   "description": "Design-system components and CSS tokens for @linto-ai/transcript-ui",
   "keywords": [
     "vue",

package/src/atoms/Button.vue

@@ -86,11 +86,18 @@ const classes = computed(() => [
   --btn-height: 32px;
   --btn-gap: var(--spacing-xs);
 
+  /* Same reset as every other custom button in this codebase (see
+     EditableText, EditorCheckbox, Tabs, SpeakerPopover, TranscriptionTurn):
+     `all: unset` clears the UA button chrome (margin, appearance, inherited
+     font mismatches on Safari/Firefox, the Firefox ::-moz-focus-inner
+     padding) that the previous per-property overrides below left in place.
+     Every property the button actually needs is re-declared after it. */
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--btn-gap);
-  box-sizing: border-box;
   height: var(--btn-height);
   padding: var(--btn-padding-y) var(--btn-padding-x);
   font-family: var(--font-family);

package/src/atoms/PopoverList.vue

@@ -64,25 +64,25 @@ function keyFor(item: T, index: number): string | number {
     </DropdownMenuTrigger>
     <DropdownMenuPortal disabled>
       <DropdownMenuContent
-        class="popover-list"
+        class="transcript-ui-popover-list"
         position-strategy="absolute"
         :side="side"
         :align="align"
         :side-offset="sideOffset">
-        <ul v-if="items.length > 0" class="popover-list__items">
+        <ul v-if="items.length > 0" class="transcript-ui-popover-list__items">
           <DropdownMenuItem
             v-for="(item, index) in items"
             :key="keyFor(item, index)"
             as="li"
-            class="popover-list__item"
-            :class="{ 'popover-list__item--current': isCurrent?.(item) }"
+            class="transcript-ui-popover-list__item"
+            :class="{ 'transcript-ui-popover-list__item--current': isCurrent?.(item) }"
             @select="emit('select', item)">
             <slot name="item" :item="item" />
           </DropdownMenuItem>
         </ul>
         <template v-if="$slots.footer">
-          <div v-if="items.length > 0" class="popover-list__divider" />
-          <div class="popover-list__footer">
+          <div v-if="items.length > 0" class="transcript-ui-popover-list__divider" />
+          <div class="transcript-ui-popover-list__footer">
             <slot name="footer" />
           </div>
         </template>

package/src/atoms/SelectableListItem.vue

@@ -80,13 +80,17 @@ const emit = defineEmits<{
 
 /* ── The selectable button ── */
 .selectable-list-item__main {
+  /* Full reset (same convention as Button, EditableText, Tabs…): the
+     previous partial reset (background/border/font only) left margin,
+     padding, and appearance to whatever the host page's UA/global styles
+     happened to set. */
+  all: unset;
+  box-sizing: border-box;
   flex: 1;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
-  background: none;
-  border: none;
   font: inherit;
   color: var(--color-text-primary);
   text-align: left;

package/src/styles/base.css

@@ -1,5 +1,5 @@
 /* Utility */
-.sr-only {
+.transcript-ui-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12,16 +12,16 @@
 }
 
 /* Overlay (shared by sidebar drawer + sheet select) */
-.editor-overlay {
+.transcript-ui-overlay {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: var(--z-overlay);
-  animation: overlay-fade-in 200ms ease;
+  animation: transcript-ui-overlay-fade-in 200ms ease;
 }
 
 /* Drawer mobile (sidebar) */
-.sidebar-drawer {
+.transcript-ui-sidebar-drawer {
   position: fixed;
   top: 0;
   right: 0;
@@ -30,13 +30,13 @@
   z-index: var(--z-drawer);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-md);
-  animation: drawer-slide-in 250ms ease;
+  animation: transcript-ui-drawer-slide-in 250ms ease;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
 
-.sidebar-close {
+.transcript-ui-sidebar-close {
   position: absolute;
   top: var(--spacing-sm);
   right: var(--spacing-sm);
@@ -53,13 +53,13 @@
   z-index: 1;
 }
 
-.sidebar-close:hover {
+.transcript-ui-sidebar-close:hover {
   background-color: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
 /* Keyframes */
-@keyframes overlay-fade-in {
+@keyframes transcript-ui-overlay-fade-in {
   from {
     opacity: 0;
   }
@@ -68,7 +68,7 @@
   }
 }
 
-@keyframes drawer-slide-in {
+@keyframes transcript-ui-drawer-slide-in {
   from {
     translate: 100% 0;
   }
@@ -78,8 +78,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .editor-overlay,
-  .sidebar-drawer {
+  .transcript-ui-overlay,
+  .transcript-ui-sidebar-drawer {
     animation: none;
   }
 }
@@ -89,7 +89,7 @@
    transcript), and each backdrop-filter forces a separate WebRender backdrop
    render target — on a multi-hour document this balloons GPU/GTT memory to
    several GB and freezes weaker machines. The border/shadow alone read fine. */
-.waveform-container ::part(region) {
+.transcript-ui-waveform-container ::part(region) {
   border-top: 2px solid var(--region-color, rgba(255, 255, 255, 0.4));
   border-bottom: 1px solid var(--region-color, rgba(255, 255, 255, 0.4));
   box-shadow:

package/src/styles/popover-list.css

@@ -2,7 +2,7 @@
    Kept global because Reka portals render outside the component's scoped
    CSS boundary. */
 
-.popover-list {
+.transcript-ui-popover-list {
   min-width: 180px;
   padding: var(--spacing-xs);
   background-color: var(--color-surface);
@@ -13,7 +13,7 @@
   z-index: 50;
 }
 
-.popover-list__items {
+.transcript-ui-popover-list__items {
   list-style: none;
   display: flex;
   flex-direction: column;
@@ -24,7 +24,7 @@
   overflow-y: auto;
 }
 
-.popover-list__item {
+.transcript-ui-popover-list__item {
   all: unset;
   box-sizing: border-box;
   display: flex;
@@ -38,17 +38,17 @@
   cursor: pointer;
 }
 
-.popover-list__item:hover,
-.popover-list__item[data-highlighted] {
+.transcript-ui-popover-list__item:hover,
+.transcript-ui-popover-list__item[data-highlighted] {
   background-color: var(--color-surface-hover);
 }
 
-.popover-list__item:focus-visible {
+.transcript-ui-popover-list__item:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
 }
 
-.popover-list__item--current {
+.transcript-ui-popover-list__item--current {
   background-color: color-mix(
     in srgb,
     var(--color-primary) 10%,
@@ -56,12 +56,12 @@
   );
 }
 
-.popover-list__divider {
+.transcript-ui-popover-list__divider {
   height: 1px;
   background-color: var(--color-border);
   margin: var(--spacing-xs) 0;
 }
 
-.popover-list__footer {
+.transcript-ui-popover-list__footer {
   padding: var(--spacing-xs);
 }

package/src/styles/variables.css

@@ -22,9 +22,15 @@
  *   --color-border-light     Light borders
  *
  * Typography, spacing, radius, and shadows are also overridable.
+ *
+ * Scoped to .transcript-ui-root (the embedder's root element) instead of
+ * :root — until the web-component wrapper puts this behind a real Shadow
+ * DOM, `:root`/`body`/`*` here would leak straight onto the host app's own
+ * page (its tokens, its font, its box-sizing reset on every element). :host
+ * stays for that future shadow-root case.
  */
 
-:root,
+.transcript-ui-root,
 :host {
   /* Colors — light theme */
   --color-background: #f8f9fa;
@@ -92,8 +98,8 @@
   --glass-border: rgba(255, 255, 255, 0.3);
 }
 
-:host,
-body {
+.transcript-ui-root,
+:host {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   line-height: var(--line-height);
@@ -109,10 +115,12 @@ body {
   overflow: hidden;
 }
 
-/* Reset */
-*,
-*::before,
-*::after {
+/* Reset, scoped to our own subtree so the host app's elements outside
+   .transcript-ui-root keep their own margin/padding/box-sizing. */
+.transcript-ui-root,
+.transcript-ui-root *,
+.transcript-ui-root *::before,
+.transcript-ui-root *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;