diff --git a/docs/_utilities/copy-code-buttons.cjs b/docs/_utilities/copy-code-buttons.cjs
index 306164b2..11b1c8c0 100644
--- a/docs/_utilities/copy-code-buttons.cjs
+++ b/docs/_utilities/copy-code-buttons.cjs
@@ -1,3 +1,5 @@
+let codeBlockId = 0;
+
/**
* Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
* document will be returned with the appropriate DOM manipulations.
@@ -5,19 +7,14 @@
module.exports = function (doc) {
doc.querySelectorAll('pre > code').forEach(code => {
const pre = code.closest('pre');
- const button = doc.createElement('button');
- button.setAttribute('type', 'button');
- button.classList.add('copy-code-button');
- button.setAttribute('aria-label', 'Copy');
- button.innerHTML = `
-
+ const button = doc.createElement('sl-copy-button');
-
- `;
+ if (!code.id) {
+ code.id = `code-block-${++codeBlockId}`;
+ }
+
+ button.classList.add('copy-code-button');
+ button.setAttribute('from', code.id);
pre.append(button);
});
diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js
index 60b1fa8c..a98bc0b3 100644
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -163,32 +163,6 @@
});
})();
-//
-// Copy code buttons
-//
-(() => {
- document.addEventListener('click', event => {
- const button = event.target.closest('.copy-code-button');
- const pre = button?.closest('pre');
- const code = pre?.querySelector('code');
- const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
- const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
-
- if (button && code) {
- navigator.clipboard.writeText(code.innerText);
- copyIcon.style.display = 'none';
- copiedIcon.style.display = 'inline';
- button.classList.add('copy-code-button--copied');
-
- setTimeout(() => {
- copyIcon.style.display = 'inline';
- copiedIcon.style.display = 'none';
- button.classList.remove('copy-code-button--copied');
- }, 1000);
- }
- });
-})();
-
//
// Smooth links
//
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 7b521981..e6ad651e 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -506,31 +506,31 @@ pre .token.italic {
/* Copy code button */
.copy-code-button {
- display: flex;
- align-items: center;
- justify-content: center;
position: absolute;
- top: 0.5rem;
- right: 0.5rem;
- background: var(--sl-color-neutral-0);
- border-radius: calc(var(--docs-border-radius) * 0.875);
- border: solid 1px var(--sl-color-neutral-200);
+ top: 0;
+ right: 0;
+ white-space: normal;
color: var(--sl-color-neutral-800);
- text-transform: uppercase;
- padding: 0.5rem;
- margin: 0;
- cursor: pointer;
- transition: 100ms opacity, 100ms scale;
+ transition: 150ms opacity, 150ms scale;
}
-.copy-code-button svg {
- width: 1rem;
- height: 1rem;
+.copy-code-button::part(button) {
+ background-color: var(--sl-color-neutral-50);
+ border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+ padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+ background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
+}
+
+.copy-code-button::part(button):active {
+ background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
}
pre .copy-code-button {
opacity: 0;
- scale: 0.9;
+ scale: 0.75;
}
pre:hover .copy-code-button,
@@ -539,13 +539,6 @@ pre:hover .copy-code-button,
scale: 1;
}
-pre:hover .copy-code-button:hover,
-pre:hover .copy-code-button--copied {
- background: var(--sl-color-neutral-200);
- border-color: var(--sl-color-neutral-300);
- color: var(--sl-color-neutral-900);
-}
-
/* Callouts */
.callout {
position: relative;