@ably/ui 18.3.1 → 18.4.0

package/core/styles/legacy-buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-label2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-label2 font-sans font-semibold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
     @apply focus:text-white focus:bg-cool-black focus-base;
@@ -24,7 +24,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-label2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-white text-label2 font-sans font-semibold inline-block rounded p-btn;
     @apply focus-base;
     @apply inline-flex items-center justify-center;
   }
@@ -40,7 +40,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-label2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-label2 font-sans font-semibold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus-base;
@@ -50,7 +50,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-label2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-label2 font-sans font-semibold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus-base;
@@ -60,7 +60,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-label2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-label2 font-sans font-semibold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus-base;

package/index.d.ts

@@ -369,6 +369,11 @@ type PlainCodeViewProps = {
     language: string;
     icon: IconName | null;
     className?: string;
+    /**
+     * Fired with the copied text once the copy control is used and the text has
+     * actually reached the clipboard.
+     */
+    onCopy?: (text: string) => void;
 };
 const PlainCodeView: React.FC<PlainCodeViewProps>;
 export default PlainCodeView;
@@ -397,6 +402,18 @@ export default TooltipButton;
 //# sourceMappingURL=TooltipButton.d.ts.map
 }
 
+declare module '@ably/ui/core/CodeSnippet/copyToClipboard' {
+/**
+ * Writes `text` to the clipboard and only then reports it to `onCopy`. A failed
+ * write (denied permission, or a non-secure context where `navigator.clipboard`
+ * is absent) leaves nothing on the clipboard, so callers — which use `onCopy` to
+ * record that the user took the snippet — must not be told a copy happened.
+ */
+const copyToClipboard: (text: string, onCopy?: (text: string) => void) => Promise<void>;
+export default copyToClipboard;
+//# sourceMappingURL=copyToClipboard.d.ts.map
+}
+
 declare module '@ably/ui/core/CodeSnippet/languages' {
 import { IconName } from ".@ably/ui/core/Icon/types";
 export interface LanguageInfo {
@@ -476,6 +493,18 @@ export type CodeSnippetProps = {
      * Whether to wrap code content instead of scrolling
      */
     wrapCode?: boolean;
+    /**
+     * Fired when the user takes the snippet with a copy control, receiving the
+     * exact text written to the clipboard. Selecting part of the code and
+     * pressing cmd-C does not fire it — a partial selection isn't the user
+     * taking the snippet, and callers use this to record that they did. A copy
+     * that fails to reach the clipboard does not fire it either.
+     *
+     * The text may contain a live, unmasked API key — `apiKeys` placeholders are
+     * substituted for real before the copy. Do not log it or transmit it to
+     * third-party services.
+     */
+    onCopy?: (text: string) => void;
 };
 /**
  * CodeSnippet component that displays code with language switching capability

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "18.3.1",
+  "version": "18.4.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -21,28 +21,28 @@
     "workerDirectory": "./public"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-themes": "^10.4.0",
-    "@storybook/addon-vitest": "^10.4.0",
-    "@storybook/react-vite": "^10.4.0",
+    "@storybook/addon-docs": "^10.5.0",
+    "@storybook/addon-themes": "^10.5.0",
+    "@storybook/addon-vitest": "^10.5.0",
+    "@storybook/react-vite": "^10.5.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
-    "@swc/cli": "^0.8.0",
+    "@swc/cli": "^0.8.1",
     "@swc/core": "^1.13.5",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^25",
+    "@types/node": "^24",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.61.0",
-    "@typescript-eslint/parser": "^8.61.0",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
     "@vitejs/plugin-react-swc": "^4.3.0",
-    "@vitest/browser": "^4.1.8",
-    "@vitest/browser-playwright": "^4.1.8",
-    "@vitest/coverage-v8": "^4.1.8",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "autoprefixer": "^10.5.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
@@ -50,40 +50,41 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-perf": "^3.3.3",
-    "eslint-plugin-storybook": "^10.4.0",
+    "eslint-plugin-storybook": "^10.5.0",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
     "jsdom": "^29.1.0",
-    "mixpanel-browser": "^2.79.0",
-    "msw": "2.14.3",
+    "mixpanel-browser": "^2.81.0",
+    "msw": "2.15.0",
     "msw-storybook-addon": "^2.0.7",
-    "playwright": "^1.60.0",
-    "posthog-js": "1.383.3",
-    "prettier": "^3.8.0",
-    "storybook": "^10.4.0",
+    "playwright": "^1.61.1",
+    "posthog-js": "1.403.0",
+    "prettier": "^3.9.4",
+    "storybook": "^10.5.0",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.2",
     "typescript": "6.0.2",
-    "vite": "^7.3.2",
-    "vitest": "^4.1.8"
+    "update-browserslist-db": "^1.2.3",
+    "vite": "^8.1.2",
+    "vitest": "^4.1.10"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-navigation-menu": "^1.2.4",
-    "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-switch": "^1.3.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.2.8",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.4.9",
+    "dompurify": "^3.4.12",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "es-toolkit": "^1.46.0",
+    "es-toolkit": "^1.49.0",
     "highlight.js": "^11.11.1",
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.7",