From 40fa1430810359c4139c05efc7db98c6e6c8bb68 Mon Sep 17 00:00:00 2001
From: Chen Hui Jing <1461498+huijing@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:59:09 +0800
Subject: [PATCH] Add classname to codeblock component

---
 package.json                   |  2 +-
 src/components/CodeBlock.astro |  6 +++---
 src/styles/ilf-docs.css        | 10 ++++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 65734db..68264b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {
diff --git a/src/components/CodeBlock.astro b/src/components/CodeBlock.astro
index d2d43c9..30a50fc 100644
--- a/src/components/CodeBlock.astro
+++ b/src/components/CodeBlock.astro
@@ -1,7 +1,7 @@
 ---
-const { title } = Astro.props;
+const { title, id, class: className } = Astro.props;
 ---
-<div class="codeblock">
+<div class:list={['codeblock', className]} id={id}>
   <p>{title}</p>
   <slot />
 </div>
@@ -28,7 +28,7 @@ p {
   font-size: var(--step--1);
   font-weight: bold;
   padding: var(--space-2xs) var(--space-xs);
-  background-color: var(--astro-code-color-background);
+  background-color: var(--sl-color-bg-inline-code);
   border-bottom: 1px solid var(--sl-color-gray-5);
 }
 </style>
diff --git a/src/styles/ilf-docs.css b/src/styles/ilf-docs.css
index 76e7bbd..a1fd06a 100644
--- a/src/styles/ilf-docs.css
+++ b/src/styles/ilf-docs.css
@@ -58,6 +58,16 @@
   border-radius: var(--border-radius);
 }
 
+.visually-hidden:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 /* Main content area styles */
 .main-frame {
   font-size: var(--sl-text-body);