Add classname to codeblock component

Author: huijing

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": {

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>

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);