@r2digisolutions/components 0.16.0 → 0.16.2

package/dist/components/molecules/Popover/Popover.svelte

@@ -10,6 +10,8 @@
 		align?: PopoverAlign;
 		strategy?: 'fixed' | 'absolute';
 		offset?: number;
+		/** Solo ancla/posiciona; sin fondo, borde ni padding (el contenido aporta el chrome). */
+		unstyled?: boolean;
 		class?: string;
 		panelClass?: string;
 		trigger?: Snippet;
@@ -23,6 +25,7 @@
 		align = 'center',
 		strategy = 'fixed',
 		offset = 8,
+		unstyled = false,
 		class: className = '',
 		panelClass = '',
 		trigger,
@@ -83,8 +86,8 @@
 		const viewTop = vv?.offsetTop ?? 0;
 		const pad = 8;
 
-		const panelW = Math.max(panelEl.offsetWidth, 280);
-		const panelH = Math.max(panelEl.offsetHeight, 120);
+		const panelW = Math.max(panelEl.offsetWidth || 0, unstyled ? 1 : 280);
+		const panelH = Math.max(panelEl.offsetHeight || 0, unstyled ? 1 : 120);
 
 		let place: PopoverPlacement = placement;
 		if (place === 'top' || place === 'bottom') {
@@ -123,8 +126,15 @@
 			`left:${Math.round(left)}px`,
 			'right:auto',
 			'bottom:auto',
-			`width:${Math.round(panelW)}px`
-		].join(';');
+			unstyled ? 'width:max-content' : `width:${Math.round(panelW)}px`,
+			unstyled ? 'height:max-content' : null,
+			unstyled ? 'background:transparent' : null,
+			unstyled ? 'border:none' : null,
+			unstyled ? 'padding:0' : null,
+			unstyled ? 'overflow:visible' : null
+		]
+			.filter(Boolean)
+			.join(';');
 	}
 
 	function syncNative() {
@@ -229,8 +239,12 @@
 			role="dialog"
 			ontoggle={onToggle}
 			style={panelStyle}
+			data-unstyled={unstyled ? 'true' : undefined}
 			class={[
-				'popover-panel m-0 rounded-xl border-border bg-surface-elevated p-3 shadow-xl max-w-[min(26rem,calc(100vw-1rem))] border outline-none',
+				'popover-panel m-0 outline-none',
+				unstyled
+					? 'border-0 bg-transparent p-0 shadow-none'
+					: 'rounded-xl border border-border bg-surface-elevated p-3 shadow-xl max-w-[min(26rem,calc(100vw-1rem))]',
 				panelClass
 			]}
 		>
@@ -241,7 +255,10 @@
 			bind:this={panelEl}
 			role="dialog"
 			class={[
-				'min-w-48 rounded-xl border-border bg-surface-elevated p-3 shadow-xl absolute z-50 border',
+				'absolute z-50 outline-none',
+				unstyled
+					? 'border-0 bg-transparent p-0 shadow-none'
+					: 'min-w-48 rounded-xl border border-border bg-surface-elevated p-3 shadow-xl',
 				absolutePos[placement],
 				absoluteAlign[align][placement],
 				panelClass
@@ -253,8 +270,19 @@
 </div>
 
 <style>
-	/* UA popover defaults to inset:0 — force anchor via inline style */
+	/* UA popover paints a canvas background — kill it for anchored panels */
+	.popover-panel {
+		background-color: transparent;
+		color: inherit;
+	}
 	.popover-panel:popover-open {
 		inset: unset;
 	}
+	.popover-panel[data-unstyled='true'] {
+		background: transparent !important;
+		border: none !important;
+		padding: 0 !important;
+		box-shadow: none !important;
+		overflow: visible;
+	}
 </style>

package/dist/components/molecules/Popover/Popover.svelte.d.ts

@@ -7,6 +7,8 @@ interface PopoverProps {
     align?: PopoverAlign;
     strategy?: 'fixed' | 'absolute';
     offset?: number;
+    /** Solo ancla/posiciona; sin fondo, borde ni padding (el contenido aporta el chrome). */
+    unstyled?: boolean;
     class?: string;
     panelClass?: string;
     trigger?: Snippet;

package/dist/components/organisms/AssistantChat/AssistantChat.svelte

@@ -248,23 +248,7 @@
 
 	<!-- Footer -->
 	<footer class="shrink-0 border-t border-border px-3 py-2.5">
-		<div class="flex items-center gap-2">
-			{#if voiceEnabled}
-				<IconButton
-					variant="ghost"
-					size="sm"
-					label={listening ? stopMicLabel : micLabel}
-					onclick={() => onmicclick?.()}
-					class={listening ? 'text-red-500 hover:text-red-600' : ''}
-				>
-					{#if listening}
-						<MicOff size={16} strokeWidth={2} />
-					{:else}
-						<Mic size={16} strokeWidth={2} />
-					{/if}
-				</IconButton>
-			{/if}
-
+		<div class="flex items-center gap-1.5">
 			<input
 				type="text"
 				bind:value={draft}
@@ -275,30 +259,45 @@
 				aria-label={placeholder}
 			/>
 
-			{#if voiceEnabled}
+			<div class="flex shrink-0 items-center gap-0.5">
+				{#if voiceEnabled}
+					<IconButton
+						variant="ghost"
+						size="sm"
+						label={listening ? stopMicLabel : micLabel}
+						onclick={() => onmicclick?.()}
+						class={listening ? 'text-red-500 hover:text-red-600' : ''}
+					>
+						{#if listening}
+							<MicOff size={16} strokeWidth={2} />
+						{:else}
+							<Mic size={16} strokeWidth={2} />
+						{/if}
+					</IconButton>
+					<IconButton
+						variant="ghost"
+						size="sm"
+						label={voiceOutput ? voiceOnLabel : voiceOffLabel}
+						onclick={toggleVoice}
+					>
+						{#if voiceOutput}
+							<Volume2 size={16} strokeWidth={2} />
+						{:else}
+							<VolumeX size={16} strokeWidth={2} />
+						{/if}
+					</IconButton>
+				{/if}
+
 				<IconButton
-					variant="ghost"
+					variant={canSend ? 'primary' : 'ghost'}
 					size="sm"
-					label={voiceOutput ? voiceOnLabel : voiceOffLabel}
-					onclick={toggleVoice}
+					label={sendLabel}
+					disabled={!canSend}
+					onclick={handleSend}
 				>
-					{#if voiceOutput}
-						<Volume2 size={16} strokeWidth={2} />
-					{:else}
-						<VolumeX size={16} strokeWidth={2} />
-					{/if}
+					<Send size={16} strokeWidth={2} />
 				</IconButton>
-			{/if}
-
-			<IconButton
-				variant={canSend ? 'primary' : 'ghost'}
-				size="sm"
-				label={sendLabel}
-				disabled={!canSend}
-				onclick={handleSend}
-			>
-				<Send size={16} strokeWidth={2} />
-			</IconButton>
+			</div>
 		</div>
 
 		{#if footerExtra}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.16.0",
+	"version": "0.16.2",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",