xertica-ui 1.6.2 → 1.7.0

package/CHANGELOG.md

@@ -7,6 +7,20 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.7.0] — 2026-04-23
+
+### Fixed
+- **CLI CSS Theme Import** — Corrected `@theme` → `@theme inline` in both the library's `index.css` and the generated template `src/styles/index.css`. Plain `@theme {}` was causing Tailwind v4 to resolve color tokens statically at build time using the library's defaults, preventing consumer `tokens.css` overrides from propagating into utility classes (`bg-destructive`, `bg-primary`, alert colors, etc.).
+- **Dark Mode `--primary`** — Added missing `--primary: var(--xertica-primary)` in the dark mode block of `tokens.css` (library, template, and generator). Components using `bg-primary` were not picking up the dark mode brand color.
+- **Dark Mode Chart Tokens** — Generator (`bin/generate-tokens.ts`) now includes `--chart-1` through `--chart-5` in the dark mode section for all generated `tokens.css` files.
+
+### Added
+- **CLI `update` command** — `npx xertica-ui@latest update` prompts the user to select a new color theme and overwrites `src/styles/xertica/tokens.css` with the newly generated tokens, preserving all other project files.
+- **Template `@theme inline` mapping** — Generated `src/styles/index.css` now includes a complete `@theme inline {}` block mapping all tokens (sidebar, charts, gradients, brand, radii) to CSS variable aliases, ensuring full theme coverage for consumer projects.
+- **Documentation** — `docs/getting-started.md` updated with CLI `update` command reference and a new "CSS Setup (Critical)" section explaining the `@theme inline` requirement.
+
+---
+
 ## [1.6.0] — 2026-04-20
 
 ### Added

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('1.0.0');
+    .version('1.7.0');
 
 program
     .command('init')
@@ -243,6 +243,7 @@ ${routes.join('\n')}
 
 program
     .command('update')
+    .alias('update-theme')
     .description('Update theme tokens in your project')
     .action(async () => {
         const targetDir = process.cwd();

package/bin/generate-tokens.ts

@@ -66,6 +66,14 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --destructive: rgba(239, 68, 68, 1);
   --destructive-foreground: rgba(250, 250, 250, 1);
   
+  /* Semantic Status Colors */
+  --success: rgba(5, 150, 105, 1);
+  --success-foreground: rgba(250, 250, 250, 1);
+  --info: rgba(37, 99, 235, 1);
+  --info-foreground: rgba(250, 250, 250, 1);
+  --warning: rgba(245, 158, 11, 1);
+  --warning-foreground: rgba(24, 24, 27, 1);
+  
   --border: rgba(228, 228, 231, 1);
   --input: rgba(244, 244, 245, 0.5);
   --input-background: rgba(244, 244, 245, 0.5);
@@ -162,6 +170,7 @@ export const generateTokensCss = (theme: ColorTheme): string => {
 .dark {
   /* Brand Tokens */
   --xertica-primary: ${rgba(colors.primaryDarkMode)};
+  --primary: var(--xertica-primary);
   
   /* Semantic Colors */
   --background: rgba(5, 5, 5, 1);
@@ -189,12 +198,27 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --destructive: rgba(239, 68, 68, 1);
   --destructive-foreground: rgba(250, 250, 250, 1);
   
+  /* Semantic Status Colors */
+  --success: rgba(34, 197, 94, 1);
+  --success-foreground: rgba(5, 5, 5, 1);
+  --info: rgba(96, 165, 250, 1);
+  --info-foreground: rgba(5, 5, 5, 1);
+  --warning: rgba(251, 191, 36, 1);
+  --warning-foreground: rgba(5, 5, 5, 1);
+  
   --border: rgba(63, 63, 70, 1);
   --input: rgba(39, 39, 42, 0.5);
   --input-background: rgba(39, 39, 42, 0.5);
   --ring: ${rgba(colors.primaryDarkMode, 0.5)};
   
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
+
+  /* Charts */
+  --chart-1: ${rgba(colors.chart1)};
+  --chart-2: ${rgba(colors.chart2)};
+  --chart-3: ${rgba(colors.chart3)};
+  --chart-4: ${rgba(colors.chart4)};
+  --chart-5: ${rgba(colors.chart5)};
   
   /* Sidebar */
   --sidebar: ${rgba(colors.sidebarDark)};

package/components/assistant/code-block/CodeBlock.tsx

@@ -229,6 +229,7 @@ export const CodeBlock = ({
           size="icon"
           className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/80 hover:bg-background"
           onClick={handleCopy}
+          aria-label={copied ? "Copiado" : "Copiar código"}
         >
           {copied ? (
             <Check className="w-4 h-4 text-[var(--toast-success-icon)]" />

package/components/assistant/formatted-document/FormattedDocument.tsx

@@ -51,8 +51,8 @@ export function FormattedDocument({ content, maxPreviewLength = 500, className =
     html = html.replace(/^\d+\. (.*$)/gim, '<li class="ml-4 my-0.5">$1</li>');
     
     // Checkboxes
-    html = html.replace(/- \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3 h-3" /> <span class="text-sm">$1</span></div>');
-    html = html.replace(/- \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3 h-3" /> <span class="text-sm">$1</span></div>');
+    html = html.replace(/- \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3 h-3" aria-label="$1" /> <span class="text-sm">$1</span></div>');
+    html = html.replace(/- \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3 h-3" aria-label="$1" /> <span class="text-sm">$1</span></div>');
     
     // Horizontal rule
     html = html.replace(/^---$/gim, '<hr class="my-3 border-border" />');

package/components/assistant/modern-chat-input/ModernChatInput.tsx

@@ -318,6 +318,7 @@ export function ModernChatInput({
                       <button
                         onClick={handleRemoveAction}
                         className="ml-1 hover:bg-white/20 rounded-full p-0.5 transition-colors"
+                        aria-label="Remover ação"
                       >
                         <X className="w-3 h-3" />
                       </button>
@@ -338,6 +339,7 @@ export function ModernChatInput({
               onFocus={handleFocus}
               onBlur={handleBlur}
               placeholder={placeholder}
+              aria-label={placeholder || "Mensagem para o Xertica"}
               disabled={disabled}
               className="w-full bg-transparent border-0 outline-none resize-none text-foreground placeholder-muted-foreground text-sm leading-5 min-h-[20px] max-h-[100px] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent"
               style={{
@@ -363,6 +365,7 @@ export function ModernChatInput({
                       variant="ghost"
                       size="sm"
                       className="h-8 w-8 p-0 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground transition-all duration-200"
+                      aria-label="Ver ações"
                     >
                       <Plus className="w-4 h-4" />
                     </Button>
@@ -431,6 +434,7 @@ export function ModernChatInput({
                   size="sm"
                   onClick={onFileUpload}
                   className="h-8 w-8 p-0 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground transition-all duration-200"
+                  aria-label="Anexar arquivo"
                 >
                   <Paperclip className="w-4 h-4" />
                 </Button>
@@ -453,6 +457,7 @@ export function ModernChatInput({
                       ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
                       : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                   }`}
+                  aria-label={isRecording ? "Parar gravação" : "Sugerir com voz"}
                 >
                   <Mic className="w-4 h-4" />
                 </Button>
@@ -480,6 +485,7 @@ export function ModernChatInput({
                         ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30 hover:shadow-primary/40'
                         : 'bg-muted text-muted-foreground cursor-not-allowed'
                     }`}
+                    aria-label="Enviar mensagem"
                   >
                     <motion.div
                       animate={{

package/components/assistant/xertica-assistant/xertica-assistant.tsx

@@ -846,6 +846,7 @@ export function XerticaAssistant({
             onFileAttach(file);
           }
         }}
+        aria-label="Upload de documento"
       />
       <input
         ref={audioInputRef}
@@ -858,6 +859,7 @@ export function XerticaAssistant({
             onFileAttach(file);
           }
         }}
+        aria-label="Upload de áudio"
       />
 
       {/* Main Assistant Container */}
@@ -895,6 +897,7 @@ export function XerticaAssistant({
                 size="icon"
                 className="h-8 w-8 rounded-full"
                 onClick={() => setEditingDocument(null)}
+                aria-label="Fechar editor de documento"
               >
                 <X className="w-4 h-4" />
               </Button>
@@ -948,6 +951,7 @@ export function XerticaAssistant({
                   onClick={onNavigateFullPage}
                   className="h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full"
                   title="Expandir assistente"
+                  aria-label="Expandir assistente"
                 >
                   <Maximize2 className="w-4 h-4" />
                 </Button>
@@ -961,6 +965,7 @@ export function XerticaAssistant({
                   "h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full",
                   !isExpanded && "w-10 h-10" // Slightly larger touch target when collapsed if desired, or keep consistent
                 )}
+                aria-label={isExpanded ? "Recolher assistente" : "Expandir assistente"}
               >
                 {isExpanded ? (
                   <ChevronRight className="w-4 h-4" />
@@ -981,6 +986,7 @@ export function XerticaAssistant({
                 <button
                   onClick={handleToggle}
                   className="w-10 h-10 rounded-full flex items-center justify-center hover:bg-accent/50 transition-colors duration-200 cursor-pointer mx-auto"
+                  aria-label="Abrir assistente"
                 >
                   <XerticaOrbe size={32} />
                 </button>
@@ -1547,6 +1553,7 @@ export function XerticaAssistant({
                                         )}
                                         onClick={() => handleEvaluationClick(msg.id, 'like')}
                                         title="Gostei"
+                                        aria-label="Gostei"
                                       >
                                         <ThumbsUp className="h-3.5 w-3.5" />
                                       </Button>
@@ -1561,6 +1568,7 @@ export function XerticaAssistant({
                                               msg.evaluation === 'dislike' && "text-red-600 bg-red-100 dark:bg-red-900/20"
                                             )}
                                             title="Não gostei"
+                                            aria-label="Não gostei"
                                           >
                                             <ThumbsDown className="h-3.5 w-3.5" />
                                           </Button>
@@ -1763,6 +1771,7 @@ export function XerticaAssistant({
             <Textarea
               className="min-h-[100px]"
               placeholder={evaluationState.category ? "Comentário adicional..." : "Descreva o motivo..."}
+              aria-label={evaluationState.category ? "Comentário adicional" : "Descreva o motivo"}
               value={evaluationState.reason}
               onChange={(e) => setEvaluationState(prev => ({ ...prev, reason: e.target.value }))}
               rows={4}

package/components/blocks/audio-player/AudioPlayer.tsx

@@ -136,6 +136,7 @@ export function AudioPlayer({
           <button 
             onClick={togglePlay}
             className="text-muted-foreground hover:text-foreground transition-colors focus:outline-none hover:scale-105 active:scale-95 transform duration-100"
+            aria-label={isPlaying ? "Pausar" : "Reproduzir"}
           >
             {isPlaying ? (
               <PauseCircle className="w-10 h-10" strokeWidth={1.5} />
@@ -154,6 +155,7 @@ export function AudioPlayer({
                value={[current]}
                onValueChange={(val) => setCurrent(val[0])}
                className="cursor-pointer"
+               aria-label="Progresso da reprodução"
              />
              <span className="text-xs text-muted-foreground font-mono shrink-0 w-10">
                {formatTime(duration)}
@@ -165,7 +167,7 @@ export function AudioPlayer({
         <div className="flex items-center gap-1 md:gap-3 shrink-0">
             {/* Volume */}
             <div className="hidden lg:flex items-center gap-2 w-28 mr-2 group">
-               <button onClick={toggleMute} className="text-muted-foreground hover:text-foreground">
+               <button onClick={toggleMute} className="text-muted-foreground hover:text-foreground" aria-label={isMuted || volume[0] === 0 ? "Ativar som" : "Desativar som"}>
                  {isMuted || volume[0] === 0 ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
                </button>
                <Slider 
@@ -174,6 +176,7 @@ export function AudioPlayer({
                  value={volume}
                  onValueChange={setVolume}
                  className="w-full opacity-60 group-hover:opacity-100 transition-opacity"
+                 aria-label="Volume"
                />
             </div>
 
@@ -181,7 +184,7 @@ export function AudioPlayer({
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Restart">
                        <RotateCcw className="w-4 h-4" />
                      </Button>
                   </TooltipTrigger>
@@ -192,7 +195,7 @@ export function AudioPlayer({
               <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
-                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Velocidade de reprodução">
                        <Gauge className="w-4 h-4" />
                      </Button>
                    </TooltipTrigger>
@@ -203,7 +206,7 @@ export function AudioPlayer({
               <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
-                     <Button variant="ghost" size="icon" className="text-[var(--chart-3)] hover:text-[var(--chart-3)]/80 hover:bg-accent rounded-full h-9 w-9">
+                     <Button variant="ghost" size="icon" className="text-[var(--chart-3)] hover:text-[var(--chart-3)]/80 hover:bg-accent rounded-full h-9 w-9" aria-label="Informações sobre novas atualizações">
                        <Info className="w-4 h-4 fill-current" />
                      </Button>
                    </TooltipTrigger>
@@ -216,7 +219,7 @@ export function AudioPlayer({
               <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
-                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Atualizar versão">
                        <RefreshCw className="w-4 h-4" />
                      </Button>
                    </TooltipTrigger>
@@ -224,13 +227,13 @@ export function AudioPlayer({
                  </Tooltip>
               </TooltipProvider>
 
-              <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+              <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Baixar áudio">
                 <Download className="w-4 h-4" />
               </Button>
 
               <div className="w-px h-8 bg-border mx-1" />
 
-              <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+              <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Fechar player">
                 <X className="w-5 h-5" />
               </Button>
             </div>

package/components/blocks/document-editor/DocumentEditor.tsx

@@ -292,6 +292,7 @@ export function DocumentEditor({ initialContent, initialTitle = 'Novo Documento'
               onChange={(e) => setTitle(e.target.value)}
               className="flex-1 bg-transparent border-none outline-none text-sm font-medium text-foreground min-w-0"
               placeholder="Título do documento"
+              aria-label="Título do documento"
             />
           </div>
           <div className="flex items-center gap-1 flex-shrink-0 ml-2">
@@ -302,6 +303,7 @@ export function DocumentEditor({ initialContent, initialTitle = 'Novo Documento'
               disabled={!canUndo}
               className="h-8 w-8 p-0"
               title="Desfazer (Ctrl+Z)"
+              aria-label="Desfazer (Ctrl+Z)"
             >
               <Undo className="w-4 h-4" />
             </Button>
@@ -312,6 +314,7 @@ export function DocumentEditor({ initialContent, initialTitle = 'Novo Documento'
               disabled={!canRedo}
               className="h-8 w-8 p-0"
               title="Refazer (Ctrl+Y)"
+              aria-label="Refazer (Ctrl+Y)"
             >
               <Redo className="w-4 h-4" />
             </Button>
@@ -321,6 +324,7 @@ export function DocumentEditor({ initialContent, initialTitle = 'Novo Documento'
               size="sm"
               onClick={onClose}
               className="h-8 w-8 p-0"
+              aria-label="Fechar editor"
             >
               <X className="w-4 h-4" />
             </Button>
@@ -404,6 +408,9 @@ export function DocumentEditor({ initialContent, initialTitle = 'Novo Documento'
         <div
           ref={editorRef}
           contentEditable
+          role="textbox"
+          aria-multiline="true"
+          aria-label={title || "Conteúdo do documento"}
           onInput={handleInput}
           onCompositionStart={handleCompositionStart}
           onCompositionEnd={handleCompositionEnd}

package/components/blocks/podcast-player/PodcastPlayer.tsx

@@ -130,6 +130,7 @@ export function PodcastPlayer({
 
   const playerContent = (
     <div 
+      data-podcast-player
       className={cn(
         "backdrop-blur-md transition-all duration-300 ease-in-out shadow-[var(--elevation-sm)]",
         isFixed 
@@ -144,88 +145,108 @@ export function PodcastPlayer({
           "opacity-100 translate-y-0"
         ]
       )}
-      style={isFixed && isViewport ? {
-        left: isMobile ? 0 : leftOffset,
-        right: isMobile ? 0 : assistantWidth
-      } : {}}
     >
+      {/* Mobile-first: Full width on mobile, offsets on desktop */}
+      <style dangerouslySetInnerHTML={{ __html: `
+        [data-podcast-player] {
+          left: 0 !important;
+          right: 0 !important;
+        }
+        @media (min-width: 768px) {
+          [data-podcast-player] {
+            left: ${leftOffset}px !important;
+            right: ${assistantWidth}px !important;
+          }
+        }
+      `}} />
+
       {/* Desktop Layout: Horizontal */}
       <div className="hidden md:flex h-[72px] px-4 md:px-6 items-center justify-between gap-4">
         
-        {/* Left: Info */}
-        <div className="flex flex-col min-w-0 w-[180px] lg:w-[240px] shrink-0">
-          <div className="flex items-center gap-2 mb-0.5">
-            <Radio className="w-3 h-3 text-[var(--chart-4)] animate-pulse" />
-            <h4 className="text-sm md:text-base truncate font-medium" title={title}>
+        {/* Left: Info - More flexible on smaller screens */}
+        <div className="flex flex-col min-w-0 w-32 lg:w-48 xl:w-60 shrink-0">
+          <div className="flex items-center gap-1.5 mb-0.5">
+            <Radio className="w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" />
+            <h4 className="text-sm md:text-sm lg:text-base truncate font-medium" title={title}>
               {title}
             </h4>
           </div>
           <div className="flex items-center gap-1">
-            <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
-            <ExternalLink className="w-3 h-3 cursor-pointer hover:text-foreground ml-1 opacity-70 hover:opacity-100" />
+            <span className="truncate text-[10px] lg:text-xs text-muted-foreground">{subtitle}</span>
+            <ExternalLink className="w-3 h-3 cursor-pointer hover:text-foreground ml-1 opacity-70 hover:opacity-100 hidden sm:block" />
           </div>
         </div>
 
-        {/* Center: Controls */}
-        <div className="flex-1 flex items-center justify-center gap-4 max-w-3xl">
+        {/* Center: Controls - Flexibly shrinking slider */}
+        <div className="flex-1 flex items-center justify-center gap-2 lg:gap-4 min-w-0">
           <button 
             onClick={togglePlay}
-            className="text-muted-foreground hover:text-foreground transition-colors focus:outline-none hover:scale-105 active:scale-95 transform duration-100"
+            className="text-muted-foreground hover:text-foreground transition-colors focus:outline-none hover:scale-105 active:scale-95 transform duration-100 shrink-0"
             aria-label={isPlaying ? "Pause" : "Play"}
           >
             {isPlaying ? (
-              <PauseCircle className="w-10 h-10" strokeWidth={1.5} />
+              <PauseCircle className="w-8 h-8 lg:w-10 lg:h-10" strokeWidth={1.5} />
             ) : (
-              <PlayCircle className="w-10 h-10" strokeWidth={1.5} />
+              <PlayCircle className="w-8 h-8 lg:w-10 lg:h-10" strokeWidth={1.5} />
             )}
           </button>
           
-          <div className="flex-1 flex items-center gap-3">
-             <span className="text-xs text-muted-foreground font-mono shrink-0 w-10 text-right">
+          <div className="flex-1 flex items-center gap-2 lg:gap-3 min-w-0 max-w-2xl">
+             <span className="text-[10px] lg:text-xs text-muted-foreground font-mono shrink-0 w-8 lg:w-10 text-right">
                {formatTime(current)}
              </span>
-             <Slider 
-               defaultValue={[0]} 
-               max={duration} 
-               value={[current]}
-               onValueChange={(val) => setCurrent(val[0])}
-               className="cursor-pointer"
-               aria-label="Progress bar"
-             />
-             <span className="text-xs text-muted-foreground font-mono shrink-0 w-10">
+             <div className="flex-1 min-w-[40px]">
+               <Slider 
+                 defaultValue={[0]} 
+                 max={duration} 
+                 value={[current]}
+                 onValueChange={(val) => setCurrent(val[0])}
+                 className="cursor-pointer"
+                 aria-label="Progress bar"
+               />
+             </div>
+             <span className="text-[10px] lg:text-xs text-muted-foreground font-mono shrink-0 w-8 lg:w-10">
                {formatTime(duration)}
              </span>
           </div>
         </div>
 
-        {/* Right: Actions */}
-        <div className="flex items-center gap-1 md:gap-3 shrink-0">
-            {/* Volume */}
-            <div className="hidden lg:flex items-center gap-2 w-28 mr-2 group">
+        {/* Right: Actions - Collapsing secondary controls on smaller desktop/inline screens */}
+        <div className="flex items-center gap-1 lg:gap-3 shrink-0">
+            {/* Volume: Hide slider on smaller desktop or inline to save space */}
+            <div className={cn(
+              "flex items-center gap-2 group transition-all",
+              variant === 'inline' ? "w-8 overflow-hidden hover:w-28" : "w-10 lg:w-28"
+            )}>
                <button 
                  onClick={toggleMute} 
-                 className="text-muted-foreground hover:text-foreground"
+                 className="text-muted-foreground hover:text-foreground shrink-0"
                  aria-label={isMuted ? "Unmute" : "Mute"}
                >
-                 {isMuted || volume[0] === 0 ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
+                 {isMuted || volume[0] === 0 ? <VolumeX className="w-4 h-4 lg:w-5 lg:h-5" /> : <Volume2 className="w-4 h-4 lg:w-5 lg:h-5" />}
                </button>
-               <Slider 
-                 defaultValue={[80]} 
-                 max={100} 
-                 value={volume}
-                 onValueChange={setVolume}
-                 className="w-full opacity-60 group-hover:opacity-100 transition-opacity"
-                 aria-label="Volume control"
-               />
+               <div className={cn(
+                 "flex-1 transition-all overflow-hidden",
+                 variant === 'inline' ? "opacity-0 group-hover:opacity-100" : "hidden lg:block"
+               )}>
+                 <Slider 
+                   defaultValue={[80]} 
+                   max={100} 
+                   value={volume}
+                   onValueChange={setVolume}
+                   className="w-full"
+                   aria-label="Volume control"
+                 />
+               </div>
             </div>
 
             <div className="flex items-center gap-1">
-              {/* Desktop: Restart & Speed */}
-              <div className={cn("hidden md:flex items-center gap-1", variant === 'inline' && "!hidden")}>
+              {/* Desktop-only extended actions, hidden on small horizontal or inline */}
+              <div className={cn("hidden xl:flex items-center gap-1", variant === 'inline' && "!hidden")}>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8 lg:h-9 lg:w-9" aria-label="Reiniciar">
                          <RotateCcw className="w-4 h-4" />
                        </Button>
                     </TooltipTrigger>
@@ -236,7 +257,7 @@ export function PodcastPlayer({
                 <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
-                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8 lg:h-9 lg:w-9" aria-label="Velocidade de reprodução">
                          <Gauge className="w-4 h-4" />
                        </Button>
                      </TooltipTrigger>
@@ -249,7 +270,7 @@ export function PodcastPlayer({
               <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
-                     <Button variant="ghost" size="icon" className="text-[var(--chart-4)] hover:text-[var(--chart-4)]/80 hover:bg-accent rounded-full h-9 w-9">
+                     <Button variant="ghost" size="icon" className="text-[var(--chart-4)] hover:text-[var(--chart-4)]/80 hover:bg-accent rounded-full h-9 w-9" aria-label="Mais informações">
                        <Info className="w-4 h-4 fill-current" />
                      </Button>
                    </TooltipTrigger>
@@ -264,7 +285,7 @@ export function PodcastPlayer({
                 <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
-                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Atualizar versão">
                          <RefreshCw className="w-4 h-4" />
                        </Button>
                      </TooltipTrigger>
@@ -272,18 +293,18 @@ export function PodcastPlayer({
                    </Tooltip>
                 </TooltipProvider>
 
-                <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
-                  <Download className="w-4 h-4" />
-                </Button>
+                 <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Baixar áudio">
+                   <Download className="w-4 h-4" />
+                 </Button>
               </div>
 
               {/* Mobile: Menu (containing Restart, Speed, Refresh, Download) */}
               <div className={cn("md:hidden", variant === 'inline' && "!block")}>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
-                      <MoreHorizontal className="w-5 h-5" />
-                    </Button>
+                     <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Mais opções">
+                       <MoreHorizontal className="w-5 h-5" />
+                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="w-48">
                     <DropdownMenuItem className="cursor-pointer">
@@ -308,9 +329,9 @@ export function PodcastPlayer({
 
               <div className="w-px h-8 bg-border mx-1" />
 
-              <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
-                <X className="w-5 h-5" />
-              </Button>
+               <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9" aria-label="Fechar player">
+                 <X className="w-5 h-5" />
+               </Button>
             </div>
         </div>
       </div>
@@ -332,9 +353,9 @@ export function PodcastPlayer({
             </div>
           </div>
           
-          <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8 shrink-0">
-            <X className="w-4 h-4" />
-          </Button>
+           <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8 shrink-0" aria-label="Fechar player">
+             <X className="w-4 h-4" />
+           </Button>
         </div>
 
         {/* Middle: Progress Bar */}
@@ -394,9 +415,9 @@ export function PodcastPlayer({
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="text-[var(--chart-4)] hover:text-[var(--chart-4)]/80 hover:bg-accent rounded-full h-8 w-8">
-                    <Info className="w-4 h-4 fill-current" />
-                  </Button>
+                   <Button variant="ghost" size="icon" className="text-[var(--chart-4)] hover:text-[var(--chart-4)]/80 hover:bg-accent rounded-full h-8 w-8" aria-label="Mais informações">
+                     <Info className="w-4 h-4 fill-current" />
+                   </Button>
                 </TooltipTrigger>
                 <TooltipContent className="max-w-[300px]">
                   <p className="text-xs">We identified new events in this process since the last podcast update.</p>
@@ -406,9 +427,9 @@ export function PodcastPlayer({
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8">
-                  <MoreHorizontal className="w-4 h-4" />
-                </Button>
+                 <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8" aria-label="Mais opções">
+                   <MoreHorizontal className="w-4 h-4" />
+                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-48">
                 <DropdownMenuItem className="cursor-pointer">

package/components/brand/language-selector/LanguageSelector.tsx

@@ -42,7 +42,10 @@ export function LanguageSelector({
 
   return (
     <Select value={language} onValueChange={handleLanguageChange}>
-      <SelectTrigger className={`h-9 gap-2 px-3 border-none shadow-none focus:ring-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}>
+      <SelectTrigger 
+        className={`h-9 gap-2 px-3 border-none shadow-none focus:ring-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
+        aria-label="Selecionar idioma"
+      >
         {showIcon && <Globe className="h-4 w-4 shrink-0" />}
         <SelectValue placeholder="Idioma">
           <span className="text-sm">{getLabel(language)}</span>