Add side panel

.changeset/sweet-snails-sneeze.md

@@ -0,0 +1,42 @@
+---
+"@salt-ds/lab": minor
+---
+
+Added `SidePanel`.
+
+`SidePanel` is a collapsible container that slides in from an edge of its parent, providing supplementary content or controls without disrupting the main layout.
+
+Use `SidePanelProvider` to manage open state, `SidePanelTrigger` to toggle the panel, `SidePanelTitle` provides the accessible name for the panel region automatically and `useSidePanel` to access `setOpen` for programmatic close.
+
+```tsx
+const PanelContent = () => {
+  const { CloseIcon } = useIcon();
+  const { setOpen } = useSidePanel();
+  return (
+    <SidePanel>
+      <SidePanelHeader>
+        <SidePanelTitle>
+          <H2>Panel Title</H2>
+        </SidePanelTitle>
+        <Button
+          aria-label="Close"
+          appearance="transparent"
+          onClick={() => setOpen(false)}
+        >
+          <CloseIcon aria-hidden />
+        </Button>
+      </SidePanelHeader>
+      <SidePanelContent>
+        <Text>Panel body content.</Text>
+      </SidePanelContent>
+    </SidePanel>
+  );
+};
+
+<SidePanelProvider>
+  <SidePanelTrigger>
+    <Button>Open Panel</Button>
+  </SidePanelTrigger>
+  <PanelContent />
+</SidePanelProvider>;
+```

docs/components/QAContainer.tsx

@@ -21,13 +21,13 @@ const withBaseName = makePrefixer("saltQAContainer");
 export interface QAContainerProps extends ComponentPropsWithoutRef<"div"> {
   cols?: number;
   densities?: Array<(typeof DensityValues)[number]>;
-  height?: number;
+  height?: number | string;
   enableStyleInjection?: boolean;
   itemPadding?: number;
   itemWidthAuto?: boolean;
   transposeDensity?: boolean;
   vertical?: boolean;
-  width?: number;
+  width?: number | string;
 }
 
 const BackgroundBlock = ({ children }: ComponentPropsWithoutRef<"div">) => (
@@ -82,8 +82,18 @@ export const QAContainer = ({
 }: QAContainerProps) => {
   const style = {
     "--qaContainer-cols": cols,
-    "--qaContainer-height": height === undefined ? undefined : `${height}px`,
-    "--qaContainer-width": width === undefined ? undefined : `${width}px`,
+    "--qaContainer-height":
+      height === undefined
+        ? undefined
+        : typeof height === "number"
+          ? `${height}px`
+          : height,
+    "--qaContainer-width":
+      width === undefined
+        ? undefined
+        : typeof width === "number"
+          ? `${width}px`
+          : width,
     "--qaContainer-item-padding":
       itemPadding === undefined ? undefined : `${itemPadding}px`,
     "--qaContainer-item-width": itemWidthAuto ? "auto" : undefined,