spoko-design-system 1.36.0 → 1.37.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.37.0](https://github.com/polo-blue/sds/compare/v1.36.1...v1.37.0) (2026-03-26)
+
+### Features
+
+* add updateTooltipContent export and migrate ButtonCopy to SDS tooltip ([#414](https://github.com/polo-blue/sds/issues/414)) ([d6d7f28](https://github.com/polo-blue/sds/commit/d6d7f289c4d8a1ce28b7b00df9dad8d45612f20a))
+
+## [1.36.1](https://github.com/polo-blue/sds/compare/v1.36.0...v1.36.1) (2026-03-24)
+
 ## [1.36.0](https://github.com/polo-blue/sds/compare/v1.35.1...v1.36.0) (2026-03-24)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",

package/src/components/ButtonCopy.astro

@@ -1,14 +1,13 @@
 ---
 interface Props {
   productNumber: string;
-  tooltipClasses?: string;
   texts: {
     copy: string;
     copied: string;
   };
 }
 
-const { productNumber, tooltipClasses = '', texts } = Astro.props;
+const { productNumber, texts } = Astro.props;
 
 // SVG icon as data URL for mask
 const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
@@ -18,33 +17,32 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
 
 <button
   aria-label={texts.copy}
-  class="btn-copy has-tooltip"
+  class="btn-copy"
   data-copy-text={productNumber}
   data-category={Astro.url.pathname.split('/')[1] || ''}
+  data-sds-tooltip={texts.copy}
+  data-copy-original-tooltip={texts.copy}
+  data-copy-copied-tooltip={texts.copied}
 >
-  <span
-    class:list={['tooltip rounded-full btn-copy-text', tooltipClasses]}
-    data-text={texts.copy}
-    data-copied-text={texts.copied}></span>
   <span class="copy-icon" role="img" aria-hidden="true"></span>
 </button>
 
 <script>
+  import { updateTooltipContent } from '../scripts/tooltips';
+
   class ClipboardButton {
     private static readonly COPY_TIMEOUT = 2000;
     private static readonly ANALYTICS_EVENT = 'product_code_copy';
     private readonly originalText: string;
+    private readonly copiedText: string;
     private resetTimer: ReturnType<typeof setTimeout> | null = null;
 
     constructor(private button: HTMLButtonElement) {
-      this.originalText = this.tooltip?.dataset.text || 'Copy';
+      this.originalText = button.dataset.copyOriginalTooltip || 'Copy';
+      this.copiedText = button.dataset.copyCopiedTooltip || 'Copied';
       this.button.addEventListener('click', () => this.handleCopy());
     }
 
-    private get tooltip(): HTMLSpanElement {
-      return this.button.querySelector('.tooltip') as HTMLSpanElement;
-    }
-
     private get copyText(): string {
       return this.button.dataset.copyText || '';
     }
@@ -53,10 +51,6 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
       return this.button.dataset.category || '';
     }
 
-    private get copiedText(): string {
-      return this.tooltip.dataset.copiedText || 'Copied';
-    }
-
     private async handleCopy(): Promise<void> {
       try {
         await this.copyToClipboard();
@@ -89,9 +83,11 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
 
     private updateTooltip(): void {
       if (this.resetTimer) clearTimeout(this.resetTimer);
-      this.tooltip.dataset.text = this.copiedText;
+      updateTooltipContent(this.button, this.copiedText);
+      this.button.setAttribute('aria-label', this.copiedText);
       this.resetTimer = setTimeout(() => {
-        this.tooltip.dataset.text = this.originalText;
+        updateTooltipContent(this.button, this.originalText);
+        this.button.setAttribute('aria-label', this.originalText);
         this.resetTimer = null;
       }, ClipboardButton.COPY_TIMEOUT);
     }
@@ -151,18 +147,6 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
     }
   }
 
-  .tooltip {
-    @apply invisible absolute -top-8 left-1/2 -translate-x-1/2 bg-neutral px-2 py-1 text-xs text-white opacity-0 transition-opacity;
-  }
-
-  .tooltip::before {
-    content: attr(data-text);
-  }
-
-  .has-tooltip:hover .tooltip {
-    @apply visible opacity-100;
-  }
-
   .copy-icon {
     width: 1.2em;
     height: 1.2em;

package/src/scripts/tooltips.ts

@@ -16,7 +16,7 @@ import '../styles/sds-tooltip.css';
 
 const SELECTOR = '[data-sds-tooltip]';
 const OFFSET = 8;
-const ARROW_SIZE = 8;
+const ARROW_SIZE = 13;
 const SHIFT_PADDING = 5;
 const SHOW_DELAY = 80;
 const HIDE_DELAY = 60;
@@ -144,6 +144,17 @@ export function showTooltip(target: HTMLElement) {
   });
 }
 
+/**
+ * Update tooltip content for a target element.
+ * If the tooltip is currently visible for this target, updates the displayed content immediately.
+ */
+export function updateTooltipContent(target: HTMLElement, html: string) {
+  target.setAttribute('data-sds-tooltip', html);
+  if (currentTarget === target && contentEl) {
+    contentEl.innerHTML = html;
+  }
+}
+
 export function hideTooltip() {
   if (!tooltipEl || !currentTarget) return;
 

package/src/styles/sds-tooltip.css

@@ -15,12 +15,12 @@
   color: #1e293b; /* slate-darkest */
   font-size: 0.75rem;
   line-height: 1.5;
-  border-radius: 0.5rem;
+  border-radius: 2px;
   box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
+    0 30px 90px -20px rgba(0, 0, 0, 0.3),
+    0 0 0 1px #eaecf0;
   max-width: 280px;
-  border: 1px solid #e5e7eb; /* neutral-lighter */
+  margin: 3px 0;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.15s ease-out;
@@ -42,10 +42,10 @@
 /* Arrow */
 .sds-tooltip-arrow {
   position: absolute;
-  width: 8px;
-  height: 8px;
-  background-color: #f3f4f6; /* neutral-lightest */
-  border: 1px solid #e5e7eb; /* neutral-lighter */
+  width: 13px;
+  height: 13px;
+  background-color: inherit;
+  border: 1px solid #eaecf0;
   transform: rotate(45deg);
 }
 
@@ -74,7 +74,7 @@
   padding: 0.5rem 0.75rem;
   color: #1e293b; /* slate-darkest */
   overflow: hidden;
-  border-radius: 0.5rem;
+  border-radius: 2px;
 }
 
 /* Remove padding for structured tooltips (with tooltip-header) */
@@ -94,7 +94,7 @@
   gap: 0.5rem;
   padding: 0.375rem 0.5rem;
   background-color: #001e50;
-  border-radius: 0.5rem 0.5rem 0 0;
+  border-radius: 2px 2px 0 0;
   color: white;
 }