@orangesk/orange-design-system 2.0.0-beta.14 → 2.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.16",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -34,7 +34,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.6",
+    "@next/mdx": "16.0.1",
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -46,7 +46,7 @@
     "html-react-parser": "^5.2.7",
     "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
-    "next": "15.5.6",
+    "next": "16.0.1",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "pretty": "^2.0.0",
@@ -66,36 +66,36 @@
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@eslint/eslintrc": "3.3.1",
-    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-alias": "6.0.0",
     "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.2.0",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.9.2",
     "@types/pretty": "^2.0.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "@types/wnumb": "^1.2.3",
     "babel-jest": "30.2.0",
     "eslint": "latest",
-    "eslint-config-next": "^15.5.5",
+    "eslint-config-next": "16.0.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.3.0",
     "fs-extra": "^11.3.2",
     "glob": "^11.0.3",
-    "html-validate": "10.1.2",
+    "html-validate": "10.2.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "30.2.0",

package/src/assets/icons/play.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M40.552 59.6 4 78.8V2l36.552 19.2L76 40.4 40.552 59.6Z" /></svg>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M44.552 59.6L8 78.8V2L44.552 21.2L80 40.4L44.552 59.6Z" fill="currentColor"/>
+</svg>

package/src/components/Accordion/AccordionItem.tsx

@@ -55,6 +55,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       )}
       <div
         id={`${currentId}-section`}
+        role="region"
         aria-labelledby={currentId}
         className={cx("accordion__body", { "is-active": isActive })}
         {...(isActive ? {} : { hidden: true })}

package/src/components/Accordion/styles/config.scss

@@ -1,8 +1,9 @@
 @use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
 
 $spacing: (
   default: convert.to-rem(15px) 0,
-  large: convert.to-rem(20px) 0,
+  large: space.get() 0,
 );
 
-$enclosed-spacing: convert.to-rem(20px);
+$enclosed-spacing: space.get();

package/src/components/Accordion/styles/mixins.scss

@@ -12,7 +12,7 @@
 @mixin base {
   @include typoMixins.list-unstyled;
 
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   padding-left: 0;
 }
 
@@ -63,6 +63,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  text-align: left;
 
   &:hover,
   &:focus-visible {

package/src/components/Alert/styles/config.scss

@@ -5,7 +5,7 @@
 
 $base: (
   max-width: convert.to-rem(590px),
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
   padding: space.get("medium"),
   background: var(--color-fill-information),
   border: 1px solid var(--color-border-information),

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -7,6 +7,7 @@ export default class AnchorNavigation {
   private scrollEndHandler: () => void;
   private resizeHandler: () => void;
   private isAutoScrolling: boolean = false;
+  private scrollTimeout: ReturnType<typeof setTimeout> | null = null;
   private navLinks: NodeListOf<HTMLAnchorElement> | null = null;
   private sections: HTMLElement[] = [];
   private currentPath: string;
@@ -225,17 +226,32 @@ export default class AnchorNavigation {
       if (activeLink) {
         activeLink.classList.add("is-active");
 
-        // Smooth scroll the navigation to center the active link
+        // Scroll the navigation to center the active link
         const contentLeft = this.element.querySelector(
           ".anchor-navigation__content-left",
         ) as HTMLElement;
         if (contentLeft) {
+          const targetScrollLeft =
+            activeLink.offsetLeft -
+            this.element.clientWidth / 2 +
+            activeLink.clientWidth / 2;
+
+          // Check if item is already visible
+          const itemLeft = activeLink.offsetLeft;
+          const itemRight = itemLeft + activeLink.clientWidth;
+          const viewportLeft = contentLeft.scrollLeft;
+          const viewportRight = viewportLeft + contentLeft.clientWidth;
+
+          const isVisible =
+            itemLeft >= viewportLeft && itemRight <= viewportRight;
+
+          // Use instant scroll on mobile for better performance, smooth on desktop
+          const isMobile = window.innerWidth < 768;
+          const behavior = isMobile || !isVisible ? "auto" : "smooth";
+
           contentLeft.scrollTo({
-            left:
-              activeLink.offsetLeft -
-              this.element.clientWidth / 2 +
-              activeLink.clientWidth / 2,
-            behavior: "smooth",
+            left: Math.max(0, targetScrollLeft),
+            behavior: behavior as ScrollBehavior,
           });
         }
       }
@@ -243,12 +259,28 @@ export default class AnchorNavigation {
   }
 
   private handleScrollSpy(): void {
-    if (!this.isAutoScrolling) {
+    if (this.isAutoScrolling) {
+      // Clear existing timeout and set a new one
+      if (this.scrollTimeout) {
+        clearTimeout(this.scrollTimeout);
+      }
+
+      // Set a timeout to detect when scrolling has ended
+      this.scrollTimeout = setTimeout(() => {
+        this.isAutoScrolling = false;
+        this.scrollTimeout = null;
+        this.initScrollSpy();
+      }, 150);
+    } else {
       this.initScrollSpy();
     }
   }
 
   private handleScrollEnd(): void {
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = null;
+    }
     this.isAutoScrolling = false;
     this.initScrollSpy();
   }
@@ -259,6 +291,11 @@ export default class AnchorNavigation {
   }
 
   destroy(): void {
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = null;
+    }
+
     window.removeEventListener("scroll", this.scrollHandler);
     window.removeEventListener("scroll", this.scrollSpyHandler);
     window.removeEventListener("scrollend", this.scrollEndHandler);
@@ -278,6 +315,11 @@ export default class AnchorNavigation {
   }
 
   update(): void {
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = null;
+    }
+
     window.removeEventListener("scroll", this.scrollHandler);
     window.removeEventListener("scroll", this.scrollSpyHandler);
     window.removeEventListener("scrollend", this.scrollEndHandler);

package/src/components/Bar/styles/mixins.scss

@@ -1,12 +1,12 @@
-@use './../../../styles/tokens/space';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './config';
+@use "./../../../styles/tokens/space";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./config";
 
 @mixin bar-base {
   display: flex;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 }
 
 @mixin bar-horizontal() {
@@ -40,19 +40,19 @@
   }
 }
 
-@mixin bar-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
+@mixin bar-spacing($direction: "horizontal", $space) {
+  @if ($direction == "horizontal") {
     margin-top: -($space);
   }
 }
 
-@mixin bar-item-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
+@mixin bar-item-spacing($direction: "horizontal", $space) {
+  @if ($direction == "horizontal") {
     margin-top: $space;
     margin-right: $space;
   }
 
-  @if ($direction == 'vertical') {
+  @if ($direction == "vertical") {
     margin-bottom: $space;
   }
 }

package/src/components/BodyBanner/styles/mixins.scss

@@ -3,13 +3,17 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
-// @use "./config";
 
 @mixin body-banner {
   display: flex;
   color: var(--color-text-default);
   background-color: var(--color-background-primary);
   border: 1px solid var(--color-border-subtle);
+
+  &.grid {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 }
 
 @mixin content {

package/src/components/Button/styles/config.scss

@@ -7,7 +7,6 @@ $base: (
     border: 2px solid transparent,
     font-size: convert.to-rem(18px),
     font-weight: bold,
-    line-height: normal,
     border-radius: convert.to-rem(5px),
   ),
   active: (

package/src/components/Button/styles/mixins.scss

@@ -47,7 +47,7 @@
 
 // Layout rules. Adds space between adjacent buttons and applies vertical spacing after a button.
 @mixin layout {
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 
   &:not(:last-of-type) {
     margin-right: space.get("small");

package/src/components/Buttons/styles/mixins.scss

@@ -10,7 +10,7 @@
   display: flex;
   flex-flow: row wrap;
   max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get() 0;
+  margin: ($spacing * -1) ($spacing * -1) space.get("large") 0;
 
   #{$button-selector},
   #{$button-selector}:last-child,

package/src/components/Card/styles/config.scss

@@ -4,7 +4,7 @@
 
 $card-base: (
   background-color: var(--color-surface-primary),
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
   border-radius: convert.to-rem(10px),
   border: 1px solid var(--color-border-strong),
   overflow: hidden,

package/src/components/Carousel/styles/mixins.scss

@@ -18,7 +18,7 @@
   flex-direction: column;
   margin: 0 auto;
   position: relative;
-  margin-bottom: config.$space;
+  margin-bottom: space.get("large");
 }
 
 @mixin viewport-wrapper {

package/src/components/CarouselHero/styles/mixins.scss

@@ -13,7 +13,7 @@
 @mixin base {
   margin: 0 auto;
   position: relative;
-  margin-bottom: config.$space;
+  margin-bottom: space.get("large");
   background: var(--color-surface-primary);
   border-bottom: 1px solid var(--color-border-subtle);
 }

package/src/components/CarouselPromotions/styles/mixins.scss

@@ -17,7 +17,7 @@
 @mixin base {
   margin: 0 auto;
   position: relative;
-  margin-bottom: config.$space;
+  margin-bottom: space.get("large");
 }
 
 @mixin viewport-wrapper {
@@ -216,8 +216,8 @@
     padding: space.get("medium");
   }
 
-  @include breakpoint.get('md', 'down') {
-    @include generate.css-map(typography-config.$body-text, 'small');
+  @include breakpoint.get("md", "down") {
+    @include generate.css-map(typography-config.$body-text, "small");
   }
 }
 

package/src/components/DocumentationSidebar/styles/style.scss

@@ -161,10 +161,10 @@
 
     &:hover {
       color: var(--color-text-default);
+    }
 
-      &--active {
-        color: var(--color-text-inverse);
-      }
+    &:hover &--active {
+      color: var(--color-text-inverse);
     }
 
     &--active {

package/src/components/Expander/styles/style.scss

@@ -6,7 +6,7 @@
 
 @layer components {
   .expander {
-    margin-bottom: space.get();
+    margin-bottom: space.get("large");
     font-size: convert.to-rem(18px);
 
     summary {
@@ -56,7 +56,7 @@
       }
 
       summary {
-        margin-bottom: space.get();
+        margin-bottom: space.get("large");
       }
 
       .expander__summary:has(+ .expander__summary--opened) {

package/src/components/FeatureAccordion/tests/FeatureAccordion.conformance.test.js

@@ -28,6 +28,7 @@ describe("FeatureAccordion conformance", () => {
     expect(container).toHTMLValidate({
       rules: {
         "attribute-boolean-style": "off",
+        "prefer-native-element": "off",
       },
     });
   });

package/src/components/Forms/Field/styles/config.scss

@@ -1,25 +1,25 @@
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/convert';
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/convert";
 
 $layout: (
-  margin-bottom: space.get('medium'),
+  margin-bottom: space.get("large"),
 );
 
 $description: (
-  margin-bottom: space.get('xsmall'),
+  margin-bottom: space.get("xsmall"),
   max-width: convert.to-rem(350px),
 );
 
 $input-control: (
-  margin-bottom: space.get('xsmall'),
+  margin-bottom: space.get("xsmall"),
 );
 
 $radiocheck-control: (
-  margin-right: space.get('small'),
+  margin-right: space.get("small"),
   margin-bottom: 0,
 );
 
 $hint: (
-  margin-top: space.get('xsmall'),
-  margin-bottom: space.get('xsmall'),
+  margin-top: space.get("xsmall"),
+  margin-bottom: space.get("xsmall"),
 );

package/src/components/Forms/Fieldset/styles/mixins.scss

@@ -1,6 +1,6 @@
-@use '../../../../styles/tokens/space';
+@use "../../../../styles/tokens/space";
 
 @mixin legend-base {
   font-weight: bold;
-  margin-bottom: space.get();
-};
+  margin-bottom: space.get("large");
+}

package/src/components/Gauge/styles/style.scss

@@ -7,7 +7,7 @@
     position: relative;
     width: convert.to-rem(220px);
     padding: 0;
-    margin: 0 0 space.get() 0;
+    margin: 0 0 space.get("large") 0;
     text-align: center;
 
     &__dial {

package/src/components/IconList/styles/mixins.scss

@@ -1,13 +1,13 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 @use "../../../styles/typography/mixins" as typoMixins;
-@use './config';
+@use "./config";
 
 @mixin base() {
   @include typoMixins.list-unstyled;
   @include typoMixins.text-readable;
 
-  margin: 0 0 space.get() 0;
+  margin: 0 0 space.get("large") 0;
   padding: 0;
   font-weight: bold;
 }
@@ -15,7 +15,7 @@
 @mixin item($spacing: config.$spacing) {
   display: flex;
   flex-flow: row;
-  margin-bottom: space.get('small');
+  margin-bottom: space.get("small");
 }
 
 @mixin icon($spacing: config.$spacing) {

package/src/components/Image/styles/mixins.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 @mixin base() {
   display: inline-block;
@@ -8,5 +8,5 @@
 }
 
 @mixin spacing() {
-  margin-bottom: space.get('medium');
+  margin-bottom: space.get("large");
 }

package/src/components/Link/Link.tsx

@@ -18,6 +18,8 @@ export interface LinkProps {
   isUnderline?: boolean;
   /** whether the link should have normal font weight */
   isNormal?: boolean;
+  /** when true, adds the .link--no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
+  noAccent?: boolean;
 }
 
 export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
@@ -26,6 +28,7 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   colorScheme,
   isUnderline,
   isNormal,
+  noAccent,
   tag = "a",
   href,
   ...other
@@ -37,6 +40,7 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
       "is-light": colorScheme === "light",
       underline: isUnderline,
       normal: isNormal,
+      "link--no-accent": noAccent,
     },
     className,
   );

package/src/components/Link/styles/style.scss

@@ -24,7 +24,7 @@
     @include mixins.base-inherit();
 
     &:hover {
-      color: var(--color-text-accent) !important;
+      color: var(--color-text-accent);
       text-decoration: underline;
     }
     &:focus {
@@ -44,3 +44,10 @@
     @include mixins.icon-right;
   }
 }
+
+@layer utilities {
+  .link--no-accent:hover {
+    color: inherit !important;
+    text-decoration: underline;
+  }
+}

package/src/components/List/styles/config.scss

@@ -1,38 +1,38 @@
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 
 $spacing: (
-  'default': space.get(),
-  'small': space.get('small'),
+  "default": space.get(),
+  "small": space.get("small"),
 );
 
 $enclosed-spacing: space.get();
 
-$border: 2px solid;
+$border: 1px solid;
 
 $color-palette: (
   default: (
     background-color: var(--color-background-primary),
-    border-color: var(--color-border-subtle),
+    border-color: var(--color-border-strong),
   ),
 
   gray: (
     background-color: var(--color-surface-subtle),
-    border-color: var(--color-border-subtle),
+    border-color: var(--color-border-strong),
   ),
 );
 
 $control-states: (
-  'default': (
+  "default": (
     font-weight: bold,
     color: var(--color-text-primary),
   ),
-  'hover': (
+  "hover": (
     color: var(--color-surface-secondary),
     text-decoration: none,
   ),
-  'focus': (
+  "focus": (
     outline: base.$focus-outline,
-  )
+  ),
 );