@orangesk/orange-design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "private": false,
   "engines": {
     "node": ">=18.x"
@@ -15,7 +15,8 @@
   "main": "build/components/index.js",
   "scripts": {
     "dev": "next dev",
-    "build": "next build && npm run sprite && npx rollup -c",
+    "build": "next build && npm run sprite",
+    "build:bundle": "npx rollup -c",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
@@ -26,29 +27,35 @@
   },
   "dependencies": {
     "@cloudfour/transition-hidden-element": "^2.0.2",
-    "@lighting-beetle/glider-js": "^1.8.2",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.3.4",
+    "@next/mdx": "^15.4.6",
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
     "a11y-dialog": "^8.1.4",
     "classnames": "^2.5.1",
-    "diff2html": "^3.4.51",
+    "daypickr": "^0.3.4",
+    "diff2html": "^3.4.52",
     "dompurify": "^3.2.6",
-    "next": "15.3.4",
+    "jest-environment-jsdom": "^30.0.5",
+    "next": "15.4.6",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "pretty": "^2.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "prism-react-renderer": "^2.4.1",
+    "query-string": "^9.2.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-element-to-jsx-string": "^17.0.1",
+    "swiper": "^11.2.10",
     "tabbable": "^6.2.0",
+    "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/eslintrc": "3.3.1",
@@ -57,34 +64,34 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.3",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.0.0",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^20",
+    "@types/node": "^24.2.1",
     "@types/pretty": "^2.0.3",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
+    "@types/react": "19.1.10",
+    "@types/react-dom": "19.1.7",
     "@types/wnumb": "^1.2.3",
-    "babel-jest": "^29.7.0",
+    "babel-jest": "30.0.5",
     "eslint": "latest",
-    "eslint-config-next": "^15.3.4",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-next": "^15.4.6",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "fs-extra": "^11.3.0",
+    "fs-extra": "^11.3.1",
     "glob": "^11.0.3",
-    "html-validate": "^7.18.1",
+    "html-validate": "10.0.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-image-snapshot": "^6.5.1",
-    "lint-staged": "^15.5.2",
-    "prettier": "^3.5.3",
+    "jest": "30.0.5",
+    "jest-axe": "10.0.0",
+    "jest-snapshot": "^30.0.5",
+    "lint-staged": "16.1.5",
+    "prettier": "^3.6.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "svg-sprite": "^2.0.4",
-    "typescript": "5.8.3"
+    "typescript": "5.9.2"
   }
 }

package/src/components/Accordion/tests/{data.js → data.ts}

@@ -1,18 +1,20 @@
-export default [
+const data = [
   {
-    title: 'Sed posuere consectetur est at lobortis.',
+    title: "Sed posuere consectetur est at lobortis.",
     children:
-      'Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
+      "Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
   },
   {
-    title: 'Donec sed odio dui.',
+    title: "Donec sed odio dui.",
     children:
-      'Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.',
+      "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.",
   },
   {
     title:
-      'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
+      "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
     children:
-      'Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.',
+      "Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.",
   },
 ];
+
+export default data;

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

@@ -13,7 +13,8 @@ $base: (
 );
 
 $title: (
-  font-size: convert.to-rem(18px),
-  line-height: math.div(20, 18),
-  margin-bottom: space.get("small"),
+  font-size: convert.to-rem(18px) "!important",
+  line-height: math.div(20, 18) "!important",
+  margin-bottom: space.get("small") "!important",
+  font-weight: 700 "!important",
 );

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

@@ -0,0 +1,115 @@
+interface AnchorNavigationConfig {
+  itemSelector: string;
+}
+
+export const defaultConfig: AnchorNavigationConfig = {
+  itemSelector: '.anchor-navigation__item',
+};
+
+export const configDocs = {
+  itemSelector: "Anchor navigation item element selector",
+};
+
+export default class AnchorNavigation {
+  private element: HTMLElement;
+  private config: AnchorNavigationConfig;
+  private items: HTMLElement[];
+  private activeItemIndex: number | null;
+
+  constructor(element: HTMLElement, config?: Partial<AnchorNavigationConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+
+    this.items = [];
+    this.activeItemIndex = null;
+
+    this.handleClick = this.handleClick.bind(this);
+
+    (this.element as any).ODS_AnchorNavigation = this;
+
+    this.init();
+
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): AnchorNavigation | null {
+    return el && (el as any).ODS_AnchorNavigation ? (el as any).ODS_AnchorNavigation : null;
+  }
+
+  private init(): void {
+    this.items = Array.from(
+      this.element.querySelectorAll<HTMLElement>(this.config.itemSelector),
+    );
+
+    this.items.forEach((item, index) => {
+      item.addEventListener("click", this.handleClick);
+
+      if (this.isActive(item)) {
+        this.activeItemIndex = index;
+      }
+    });
+
+    // Ak nie je žiadna položka aktívna, aktivuj prvú
+    if (this.activeItemIndex === null && this.items.length > 0) {
+      this.activateNthItem(0);
+    }
+  }
+
+  destroy(): void {
+    this.items.forEach((item) => {
+      item.removeEventListener("click", this.handleClick);
+    });
+
+    this.items = [];
+    (this.element as any).ODS_AnchorNavigation = null;
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  private isActive = (el: HTMLElement): boolean => {
+    return el.classList.contains('is-active');
+  };
+
+  private handleClick(e: MouseEvent): void {
+    const clickedItem = e.currentTarget as HTMLElement;
+
+    // Najdi index kliknutej položky
+    const clickedIndex = this.items.findIndex(item => item === clickedItem);
+    
+    if (clickedIndex !== -1) {
+      this.activateNthItem(clickedIndex);
+    }
+  }
+
+  private toggleItem(el: HTMLElement, state: "on" | "off"): void {
+    const isActive = this.isActive(el);
+
+    if (state === "on" && !isActive) {
+      el.classList.add('is-active');
+    }
+
+    if (state === "off" && isActive) {
+      el.classList.remove('is-active');
+    }
+  }
+
+  activateNthItem(index: number): void {
+    if (index < 0 || index >= this.items.length) return;
+
+    this.items.forEach((item, i) => {
+      if (i === index) {
+        this.activeItemIndex = i;
+        this.toggleItem(item, "on");
+      } else {
+        this.toggleItem(item, "off");
+      }
+    });
+  }
+
+  getActiveItemIndex(): number | null {
+    return this.activeItemIndex;
+  }
+} 

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import cx from "classnames";
+import { Grid, GridCol } from "../Grid";
+import { Link } from "../Link";
+import { useStatic } from "../../utils/hooks";
+import AnchorNavigationStatic from "./AnchorNavigation.static";
+
+interface AnchorNavigationItem {
+  label: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface AnchorNavigationProps {
+  items: AnchorNavigationItem[];
+  className?: string;
+  colorScheme?: "light" | "dark";
+  children?: React.ReactNode;
+}
+
+const CLASS_ROOT = "anchor-navigation";
+
+const AnchorNavigation = ({
+  items,
+  className,
+  colorScheme,
+  children,
+}: AnchorNavigationProps) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      "is-light": colorScheme === "light",
+      "is-dark": colorScheme === "dark",
+    },
+    className,
+  );
+
+  const [anchorNavRef] = useStatic(AnchorNavigationStatic);
+
+  return (
+    <div className={classes} ref={anchorNavRef}>
+      <div className={`${CLASS_ROOT}__content`}>
+        <Grid
+          className={`list-unstyled list-inline horizontal-scroll mb-none ${CLASS_ROOT}__content-left`}
+        >
+          {items.map((item) => (
+            <GridCol
+              id={item.href.replace("#", "")}
+              size={"auto"}
+              key={item.href}
+              className="pr-none pl-none"
+            >
+              <Link
+                href={item.href}
+                colorScheme={colorScheme}
+                className={cx(
+                  `${CLASS_ROOT}__item`,
+                  {
+                    "is-active": item.isActive,
+                  }
+                )}
+
+              >
+                {item.label}
+              </Link>
+            </GridCol>
+          ))}
+        </Grid>
+        {children && (
+          <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+AnchorNavigation.displayName = "AnchorNavigation";
+
+export { AnchorNavigation };

package/src/components/AnchorNavigation/index.tsx

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { AnchorNavigation } from "./AnchorNavigation";

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

@@ -0,0 +1,126 @@
+@use "./../../../styles/tokens/space";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/color";
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/convert";
+@use "./../../../styles/typography/config" as typography;
+@use "sass:map" as sass-map;
+
+@mixin anchor-navigation() {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: var(--color-background-primary) !important;
+  padding: space.get("large") 0;
+
+  // Štýly pre Grid s horizontal-scroll
+  .horizontal-scroll {
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+      background: transparent !important;
+    }
+
+    // Pre Firefox
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+  }
+}
+
+@mixin anchor-navigation-item() {
+  margin-right: space.get("large") !important;
+  padding: convert.to-rem(25px) 0 !important;
+  white-space: nowrap;
+  border-bottom: 4px solid transparent;
+  text-decoration: none !important;
+  display: inline-block;
+  cursor: pointer;
+
+  &:focus {
+    background-color: var(--color-background-primary) !important;
+    color: var(--color-text-default) !important;
+    outline: none !important;
+  }
+
+  &:hover {
+    text-decoration: none !important;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @include breakpoint.get("xs", "down") {
+    margin-right: space.get("medium") !important;
+    padding: space.get("small") 0 !important;
+  }
+
+  &.is-active {
+    border-bottom-color: var(--color-border-accent);
+    font-weight: 600;
+  }
+}
+
+@mixin anchor-navigation-content() {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px solid var(--color-border-subtle);
+  padding: 0 convert.to-rem(70px);
+
+  @include breakpoint.get("xl", "down") {
+    padding: 0 convert.to-rem(42px);
+  }
+
+  @include breakpoint.get("xs", "down") {
+    padding: 0 convert.to-rem(10px);
+    border-bottom: none;
+    overflow: hidden;
+    flex-direction: column;
+  }
+}
+
+@mixin anchor-navigation-content-left() {
+  @include breakpoint.get("xs", "down") {
+    border-bottom: 1px solid var(--color-border-subtle);
+    width: 100%;
+  }
+}
+
+@mixin anchor-navigation-content-right() {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: space.get("medium");
+  position: relative;
+  padding: 0 convert.to-rem(25px);
+  z-index: 1;
+
+  &:before {
+    z-index: -1;
+    width: 100px;
+    content: "";
+    position: absolute;
+    inset: -10px 0 0 -30px;
+    transform: translate3d(10px, 8px, -1px);
+    background: conic-gradient(
+      from 90deg at 15% -20%,
+      var(--color-background-primary) 2%,
+      var(--color-background-primary) 80%
+    );
+    filter: blur(10px);
+    border-radius: inherit;
+  }
+
+  @include breakpoint.get("xs", "down") {
+    &:before {
+      display: none;
+    }
+    padding: space.get("small") 0;
+    border-bottom: 1px solid var(--color-border-subtle);
+    width: 100%;
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,22 @@
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/color";
+@use "./mixins";
+
+@layer components {
+  .anchor-navigation {
+    @include mixins.anchor-navigation();
+    &__item {
+      @include mixins.anchor-navigation-item();
+    }
+    &__content {
+      @include mixins.anchor-navigation-content();
+
+      &-left {
+        @include mixins.anchor-navigation-content-left();
+      }
+      &-right {
+        @include mixins.anchor-navigation-content-right();
+      }
+    }
+  }
+}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import cx from "classnames";
 
 import { BreadcrumbItem } from "./BreadcrumbItem";
@@ -14,7 +13,7 @@ interface BreadcrumbsProps {
   /** Additional CSS classes */
   className?: string;
   /** Use white breadcrumbs on dark background */
-  darkMode?: boolean;
+  colorScheme?: "dark" | "light";
   /** Breadcrumb items */
   items: BreadcrumbItemData[];
   /** Navigation label */
@@ -29,11 +28,12 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
   className,
   label,
   items,
-  darkMode,
+  colorScheme,
   ...other
 }) => {
   const classes = cx(CLASS_ROOT, className, {
-    "osk-breadcrumbs--dark": darkMode,
+    "is-dark": colorScheme === "dark",
+    "is-light": colorScheme === "light",
   });
 
   // Nájdeme index posledného prvku s URL

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

@@ -1,27 +1,23 @@
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-@use '../../Container/styles/mixins' as container;
-@use '../../../styles/typography/mixins' as typoMixins;
-@use './config';
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "../../Container/styles/mixins" as container;
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
 
 @mixin base {
   @include typoMixins.list-unstyled;
 
-  padding: space.get('small') 0;
-  background-color: color.$white;
+  padding: space.get("small") 0;
+  background-color: var(--color-surface-primary);
   font-weight: bold;
   font-family: base.$font-family;
   font-size: base.$font-size;
   line-height: base.$line-height;
 }
 
-@mixin base-dark {
-  background-color: color.$black;
-}
-
 @mixin container {
   @include container.base;
 
@@ -30,7 +26,7 @@
 }
 
 @mixin separator {
-  content: '';
+  content: "";
   display: inline-block;
   font-family: inherit;
   width: convert.to-rem(20px);
@@ -55,19 +51,19 @@
   }
 
   &:first-child::before {
-    @include breakpoint.get('sm') {
+    @include breakpoint.get("sm") {
       display: none;
     }
   }
 
   &:nth-last-child(2)::before {
-    @include breakpoint.get('xs', 'down') {
+    @include breakpoint.get("xs", "down") {
       transform: rotate(180deg);
     }
   }
 
   &:not(:nth-last-child(2)) {
-    @include breakpoint.get('xs', 'down') {
+    @include breakpoint.get("xs", "down") {
       display: none;
     }
   }
@@ -82,24 +78,16 @@
 }
 
 @mixin link {
-  color: color.$black;
+  color: var(--color-text-default);
   text-decoration: none;
   display: inline-block;
 
   &:hover {
-    color: color.$black;
+    color: var(--color-text-default);
     text-decoration: underline;
   }
 }
 
-@mixin link-dark {
-  color: color.$white;
-}
-
 @mixin link-current {
   color: color.$gray-700;
 }
-
-@mixin link-current-dark {
-  color: color.$gray-600;
-}

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

@@ -4,10 +4,6 @@
   .osk-breadcrumbs {
     @include mixins.base;
 
-    &--dark {
-      @include mixins.base-dark;
-    }
-
     &__container {
       @include mixins.container;
     }
@@ -16,7 +12,8 @@
   .osk-breadcrumbs__item {
     @include mixins.item;
 
-    .osk-breadcrumbs--dark & {
+    .bg-black &,
+    .is-dark & {
       @include mixins.item-dark;
     }
   }
@@ -27,13 +24,5 @@
     &[aria-current="page"] {
       @include mixins.link-current;
     }
-
-    .osk-breadcrumbs--dark & {
-      @include mixins.link-dark;
-
-      &[aria-current="page"] {
-        @include mixins.link-current-dark;
-      }
-    }
   }
 }