Fix docs sidebar

.github/workflows/linting.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           cache: 'npm'
       - name: Install
         run: yarn install

.github/workflows/publish-storybook.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install 🔧
         run: | # Install npm packages

.github/workflows/release-package.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
       - run: yarn install --immutable
       - run: yarn build
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           registry-url: https://npm.pkg.github.com/
       - run: yarn install --immutable
       - run: yarn build

.storybook/main.js

@@ -11,32 +11,35 @@ function getAbsolutePath(value) {
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
     {
       name: 'storybook-design-token',
       options: {
         preserveCSSVars: true,
       },
     },
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-      },
-    },
+    getAbsolutePath('@storybook/addon-docs'),
   ],
+
   staticDirs: [
     {
       from: './assets',
       to: '/public',
     },
   ],
+
   framework: {
     name: getAbsolutePath('@storybook/html-vite'),
     options: {},
   },
+
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
+
+  features: {
+    backgrounds: false,
+  },
 }
 export default config

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api'
+import { addons } from 'storybook/manager-api'
 import OpticsTheme from './theme'
 
 addons.setConfig({

.storybook/preview.css

@@ -11,46 +11,14 @@
 
 @import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
 
+/* Table of Contents Customization */
 .sbdocs.sbdocs-wrapper {
-  --toc-size: 20rem;
+  .sbdocs.sbdocs-toc--custom {
+    width: 15rem;
+    min-width: 15rem;
 
-  display: grid;
-  grid-template-columns: 1fr var(--toc-size);
-  justify-items: center;
-
-  .sbdocs.sbdocs-content + div {
-    width: 100%;
-    color: var(--op-color-neutral-base);
-
-    > div {
-      width: var(--toc-size);
-    }
-
-    .toc-wrapper {
-      .toc-list {
-        border-left: none;
-
-        .toc-list-item {
-          margin-left: var(--op-space-small);
-
-          > a {
-            color: var(--op-color-primary-plus-one);
-            text-decoration: underline;
-          }
-
-          &.is-active-li > a {
-            color: var(--op-color-primary-minus-one);
-            font-weight: var(--op-font-weight-bold);
-          }
-
-          &::before {
-            border-left: none;
-            content: '-';
-            opacity: 1;
-            transform: translateX(calc(-1 * var(--op-space-small)));
-          }
-        }
-      }
+    > nav {
+      width: 15rem;
     }
   }
 }

.storybook/theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming'
+import { create } from 'storybook/theming'
 
 const theme = create({
   base: 'light',

.storybook/useTheme.js

@@ -1,4 +1,4 @@
-import { makeDecorator } from '@storybook/preview-api'
+import { makeDecorator } from 'storybook/preview-api'
 
 export const useTheme = makeDecorator({
   name: 'useTheme',

package.json

@@ -47,29 +47,23 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.9",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/html": "^8.5.3",
-    "@storybook/html-vite": "^8.5.3",
-    "@storybook/manager-api": "^8.5.3",
-    "@storybook/preview-api": "^8.5.3",
-    "@storybook/test": "^8.5.3",
-    "@storybook/theming": "^8.5.3",
+    "@storybook/addon-docs": "^9.1.0",
+    "@storybook/html-vite": "^9.1.0",
     "cssnano": "^7.0.6",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^9.1.0",
     "generate-template-files": "^3.2.1",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "prettier": "^3.0.0",
-    "storybook": "^8.5.3",
-    "storybook-design-token": "^3.1.0",
+    "storybook": "^9.1.0",
+    "storybook-design-token": "^4.1.0",
     "style-loader": "^3.3.3",
     "stylelint": "^16.2.1",
     "stylelint-config-idiomatic-order": "^10.0.0",

src/stories/Components/Accordion/Accordion.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as AccordionStories from './Accordion.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Components/Alert/Alert.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as AlertStories from './Alert.stories'
 import imageFile from './flash.gif'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'

src/stories/Components/Avatar/Avatar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as AvatarStories from './Avatar.stories'
 import { createAlert } from '../Alert/Alert.js'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'

src/stories/Components/Badge/Badge.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as BadgeStories from './Badge.stories'
 import { createAlert } from '../Alert/Alert.js'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'

src/stories/Components/Breadcrumbs/Breadcrumbs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as BreadcrumbsStories from './Breadcrumbs.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Button/Button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as ButtonStories from './Button.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/ButtonGroup/ButtonGroup.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as ButtonGroupStories from './ButtonGroup.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Components/Card/Card.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as CardStories from './Card.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Components/ConfirmDialog/ConfirmDialog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as ConfirmDialogStories from './ConfirmDialog.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/ContentHeader/ContentHeader.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as ContentHeaderStories from './ContentHeader.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Components/Divider/Divider.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as DividerStories from './Divider.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Form/Form.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as ErrorSummaryStories from './ErrorSummary.stories'
 import * as FormGroupStories from './FormGroup.stories'
 import * as InputStories from './Input.stories'

src/stories/Components/Icon/Icon.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as IconStories from './Icon.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Components/Modal/Modal.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as ModalStories from './Modal.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Navbar/Navbar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as NavbarStories from './Navbar.stories'
 
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Pagination/Pagination.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as PaginationStories from './Pagination.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/SidePanel/SidePanel.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as SidePanelStories from './SidePanel.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Sidebar/Sidebar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as SidebarStories from './Sidebar.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Spinner/Spinner.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as SpinnerStories from './Spinner.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Switch/Switch.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as SwitchStories from './Switch.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Tab/Tab.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as TabStories from './Tab.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Table/Table.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as TableStories from './Table.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Tag/Tag.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as TagStories from './Tag.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/TextPair/TextPair.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as TextPairStories from './TextPair.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Components/Tooltip/Tooltip.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as TooltipStories from './Tooltip.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 import { createAlert } from '../Alert/Alert.js'

src/stories/Overview/Addons.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
 
 <Meta title="Overview/Addons" />

src/stories/Overview/BaseReset.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Overview/Base Reset" />
 

src/stories/Overview/FileOrganization.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Overview/File Organization" />
 

src/stories/Overview/Introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import packageData from '../../../package.json'
 
 <Meta title="Introduction" />

src/stories/Overview/ScaleOverriding.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Overview/Scale Overriding" />
 

src/stories/Overview/SelectiveImports.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import imageFile from '../assets/dependency-graph.svg'
 
 <Meta title="Overview/Selective Imports" />

src/stories/Overview/Themes.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Overview/Themes" />
 

src/stories/Overview/Tokens.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
 
 <Meta title="Overview/Tokens" />

src/stories/Recipes/AlignedHeader/AlignedHeader.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as AlignedHeaderStories from './AlignedHeader.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Recipes/CustomSidebar/CustomSidebar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as CustomSidebarStories from './CustomSidebar.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
 

src/stories/Recipes/Layout/Layout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'
 import * as LayoutStories from './Layout.stories'
 import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'