Update dependencies

.storybook/manager-head.html

@@ -1,3 +1,6 @@
+<link rel="shortcut icon" href="../public/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href="../public/favicon.svg" sizes="192x192" />
+
 <style lang="css">
   button[data-action='collapse-root'] {
     color: hsl(273, 22%, 18%);

.storybook/preview.css

@@ -14,9 +14,6 @@
 /* Table of Contents Customization */
 .sbdocs.sbdocs-wrapper {
   .sbdocs.sbdocs-toc--custom {
-    background-color: var(--op-color-background);
-    color: var(--op-color-on-background);
-    color-scheme: light;
     inline-size: 15rem;
     min-inline-size: 15rem;
 

package.json

@@ -46,28 +46,28 @@
     "modern-css-reset": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.29.0",
-    "@eslint/js": "^9.39.3",
-    "@storybook/addon-docs": "^10.2.15",
-    "@storybook/html-vite": "^10.2.15",
-    "cssnano": "^7.1.2",
-    "eslint": "^9.39.3",
+    "@babel/preset-env": "^8.0.2",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/html-vite": "^10.4.6",
+    "cssnano": "^8.0.2",
+    "eslint": "^10.5.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.2.15",
+    "eslint-plugin-storybook": "^10.4.6",
     "generate-template-files": "^3.2.1",
-    "globals": "^16.5.0",
-    "postcss": "^8.5.8",
+    "globals": "^17.6.0",
+    "postcss": "^8.5.15",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "prettier": "^3.8.1",
-    "storybook": "^10.2.15",
+    "prettier": "^3.8.4",
+    "storybook": "^10.4.6",
     "storybook-design-token": "^5.0.0",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.26.1",
+    "stylelint": "^17.13.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-prettier": "^5.0.3",
     "stylelint-use-logical": "^2.1.3",
-    "vite": "^7.3.1"
+    "vite": "^8.0.16"
   },
   "peerDependencies": {
     "tom-select": "^2.0.0"

src/components/index.css

@@ -1,26 +1,26 @@
-@import 'accordion';
-@import 'alert';
-@import 'avatar';
-@import 'badge';
-@import 'breadcrumbs';
-@import 'button';
-@import 'button_group';
-@import 'card';
-@import 'confirm-dialog';
-@import 'content-header';
-@import 'divider';
-@import 'form';
-@import 'icon';
-@import 'modal';
-@import 'navbar';
-@import 'pagination';
-@import 'segmented-control';
-@import 'sidebar';
-@import 'side_panel';
-@import 'spinner';
-@import 'switch';
-@import 'tab';
-@import 'table';
-@import 'tag';
-@import 'text_pair';
-@import 'tooltip';
+@import 'accordion.css';
+@import 'alert.css';
+@import 'avatar.css';
+@import 'badge.css';
+@import 'breadcrumbs.css';
+@import 'button.css';
+@import 'button_group.css';
+@import 'card.css';
+@import 'confirm-dialog.css';
+@import 'content-header.css';
+@import 'divider.css';
+@import 'form.css';
+@import 'icon.css';
+@import 'modal.css';
+@import 'navbar.css';
+@import 'pagination.css';
+@import 'segmented-control.css';
+@import 'sidebar.css';
+@import 'side_panel.css';
+@import 'spinner.css';
+@import 'switch.css';
+@import 'tab.css';
+@import 'table.css';
+@import 'tag.css';
+@import 'text_pair.css';
+@import 'tooltip.css';

src/core/fonts/index.css

@@ -4,5 +4,5 @@
   https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
 */
 
-@import 'text_fonts';
-@import 'icon_fonts';
+@import 'text_fonts.css';
+@import 'icon_fonts.css';

src/core/tokens/index.css

@@ -1,2 +1,2 @@
-@import 'base_tokens';
-@import 'scale_color_tokens';
+@import 'base_tokens.css';
+@import 'scale_color_tokens.css';

src/optics+feather_icons.css

@@ -6,12 +6,12 @@
 @import 'addons/fonts/feather_icons.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/optics+lucide_icons.css

@@ -6,12 +6,12 @@
 @import 'addons/fonts/lucide_icons.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/optics+material_outlined_variable.css

@@ -6,12 +6,12 @@
 @import 'addons/fonts/material_symbols_outlined_variable.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/optics+no_icons.css

@@ -5,12 +5,12 @@
 @import 'core/fonts/text_fonts.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/optics+phosphor_icons.css

@@ -6,12 +6,12 @@
 @import 'addons/fonts/phosphor_icons.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/optics+tabler_icons.css

@@ -6,12 +6,12 @@
 @import 'addons/fonts/tabler_icons.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/optics.css

@@ -2,15 +2,15 @@
 @import 'modern-css-reset/dist/reset';
 
 /* Fonts */
-@import 'core/fonts';
+@import 'core/fonts/index.css';
 
 /* Tokens */
-@import 'core/tokens';
+@import 'core/tokens/index.css';
 
 /* Base styles and utilities */
-@import 'core/base';
-@import 'core/layout';
-@import 'core/utilities';
+@import 'core/base.css';
+@import 'core/layout.css';
+@import 'core/utilities.css';
 
 /* Components */
-@import 'components';
+@import 'components/index.css';

src/stories/Overview/Introduction.mdx

@@ -7,7 +7,7 @@ import packageData from '../../../package.json'
 
 <h2>A RoleModel Design System.</h2>
 
-<span>v{packageData.version}</span>
+<p>v{packageData.version}</p>
 
 <div className='flex gap-sm'>