@orangesk/orange-design-system 2.0.0-beta.38 → 2.0.0-beta.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.38",
+  "version": "2.0.0-beta.39",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -56,7 +56,7 @@
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@next/mdx": "16.2.1",
-    "@orangesk/accessible-autocomplete": "3.2.0",
+    "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
     "a11y-dialog": "^8.1.5",
@@ -80,7 +80,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "12.1.2",
+    "swiper": "12.1.3",
     "tabbable": "^6.4.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -99,7 +99,7 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.60.0",
+    "@rollup/rollup-darwin-arm64": "^4.60.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -109,11 +109,11 @@
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser": "^4.1.1",
-    "@vitest/browser-playwright": "^4.1.1",
-    "@vitest/coverage-v8": "^4.1.1",
-    "@vitest/ui": "^4.1.1",
-    "canvas": "^3.2.2",
+    "@vitest/browser": "^4.1.2",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "@vitest/ui": "^4.1.2",
+    "canvas": "^3.2.3",
     "fs-extra": "^11.3.4",
     "glob": "13.0.6",
     "html-validate": "10.11.2",
@@ -123,14 +123,14 @@
     "lint-staged": "16.4.0",
     "playwright": "^1.58.2",
     "prettier": "^3.8.1",
-    "rollup": "^4.60.0",
+    "rollup": "^4.60.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.98.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.2",
-    "vitest": "^4.1.1",
+    "vitest": "^4.1.2",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.1.0"
   },

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

@@ -202,6 +202,10 @@
   background-color: var(--color-fill-contrast);
   border-radius: 99px;
   height: convert.to-rem(6px);
+
+  &:hover {
+    background-color: var(--color-fill-secondary) !important;
+  }
 }
 
 @mixin scrollbar-variant {

package/src/components/Dropdown/Dropdown.static.ts

@@ -187,7 +187,8 @@ export default class Dropdown {
   }
 
   destroy() {
-    this.trigger.removeEventListener("click", this.handleVisibility);
+    this.trigger.removeEventListener("click", this.handleVisibility, true);
+    this.hide();
     this.instance.destroy();
     (this.element as any).ODS_Dropdown = null;
     window.onresize = null;

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

@@ -23,16 +23,30 @@
   }
 }
 
-@mixin grid-column-gap($size: "default") {
-  $gap: map.get(config.$column-gap, $size);
-  margin-left: -$gap;
-  margin-right: -$gap;
+@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
+  $gap: map.get($column-gap, $size);
+
+  @if ($size == "default" or $size == "small") {
+    @if ($size == "default") {
+      margin-left: -$gap;
+      margin-right: -$gap;
+    } @else {
+      margin-left: -$gap !important;
+      margin-right: -$gap !important;
+    }
+  } @else {
+    @include breakpoint.get("md") {
+      margin-left: -$gap !important;
+      margin-right: -$gap !important;
+    }
+  }
 }
 
-@mixin grid-column-gap-responsive($size: "default") {
-  $gap: map.get(config.$column-gap, $size);
-  margin-left: -$gap !important;
-  margin-right: -$gap !important;
+@mixin grid-column-gap-responsive(
+  $size: "default",
+  $column-gap: config.$column-gap
+) {
+  @include grid-column-gap($size, $column-gap);
 }
 
 @mixin grid-with-equal-height-content(
@@ -75,16 +89,28 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: "default") {
-  $gap: map.get(config.$column-gap, $size);
-  padding-left: $gap;
-  padding-right: $gap;
+@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
+  $gap: map.get($column-gap, $size);
+
+  @if ($size == "default") {
+    padding-left: $gap;
+    padding-right: $gap;
+  } @else if ($size == "small") {
+    padding-left: $gap !important;
+    padding-right: $gap !important;
+  } @else {
+    @include breakpoint.get("md") {
+      padding-left: $gap !important;
+      padding-right: $gap !important;
+    }
+  }
 }
 
-@mixin grid-col-column-gap-responsive($size: "default") {
-  $gap: map.get(config.$column-gap, $size);
-  padding-left: $gap !important;
-  padding-right: $gap !important;
+@mixin grid-col-column-gap-responsive(
+  $size: "default",
+  $column-gap: config.$column-gap
+) {
+  @include grid-col-column-gap($size, $column-gap);
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {

package/src/components/Preview/PreviewGenerator.tsx

@@ -1,8 +1,17 @@
 "use client";
 
 import cx from "classnames";
-import React, { FunctionComponent, ReactNode, useId, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
 import reactElementToJSXString from "react-element-to-jsx-string";
+import breakpoints from "@/styles/export/breakpoint";
 import { Button } from "../Button";
 import { Card } from "../Card";
 import { Dropdown, DropdownItem } from "../Dropdown";
@@ -85,6 +94,184 @@ interface PreviewRenderContext {
   isDarkMode: boolean;
 }
 
+interface PreviewBreakpoint {
+  key: string;
+  label: string;
+  width: number | null;
+}
+
+const PREVIEW_BREAKPOINTS: PreviewBreakpoint[] = [
+  { key: "auto", label: "Auto", width: null },
+  ...Object.entries(breakpoints).map(([key, value]) => {
+    const tokenWidth = Number.parseInt(value, 10);
+    // `xs` is 0 in tokens (mobile-first min-width), but preview needs a real viewport size.
+    const width = key === "xs" ? 320 : tokenWidth;
+
+    return {
+      key,
+      label: `${key.toUpperCase()} (${width}px)`,
+      width,
+    };
+  }),
+];
+
+const IFRAME_VIEWPORT_GUTTER = 16;
+
+const getScreenLikeMinHeight = (width: number | null): number => {
+  if (width === null) {
+    return 1;
+  }
+
+  if (width <= 480) {
+    return 700;
+  }
+
+  if (width <= 768) {
+    return 640;
+  }
+
+  return 560;
+};
+
+interface PreviewViewportFrameProps {
+  children: ReactNode;
+  className?: string;
+  minHeight?: number;
+}
+
+const PreviewViewportFrame: React.FC<PreviewViewportFrameProps> = ({
+  children,
+  className,
+  minHeight = 1,
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [iframeRoot, setIframeRoot] = useState<HTMLElement | null>(null);
+  const [height, setHeight] = useState(1);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const doc = iframe.contentDocument;
+    if (!doc) return;
+
+    doc.open();
+    doc.write(
+      `<!doctype html><html><head></head><body><div id="preview-iframe-root"></div></body></html>`,
+    );
+    doc.close();
+
+    // Mirror parent styles so components inside iframe have the same look.
+    const stylesToClone = document.querySelectorAll(
+      'link[rel="stylesheet"], style',
+    );
+    stylesToClone.forEach((styleNode) => {
+      const clonedNode = styleNode.cloneNode(true);
+      doc.head.appendChild(clonedNode);
+    });
+
+    doc.body.style.margin = "0";
+    doc.body.style.padding = "0";
+    doc.body.style.background = "transparent";
+    doc.body.style.overflow = "visible";
+    doc.documentElement.style.margin = "0";
+    doc.documentElement.style.padding = "0";
+    doc.documentElement.style.overflow = "visible";
+
+    iframe.setAttribute("scrolling", "no");
+
+    const root = doc.getElementById("preview-iframe-root");
+    if (!root) return;
+
+    root.style.width = "100%";
+    root.style.minHeight = "1px";
+    root.style.boxSizing = "border-box";
+    root.style.paddingInline = `${IFRAME_VIEWPORT_GUTTER}px`;
+    root.style.overflow = "visible";
+    setIframeRoot(root);
+  }, []);
+
+  useEffect(() => {
+    if (!iframeRoot) return;
+
+    const doc = iframeRoot.ownerDocument;
+    const frameWindow = doc.defaultView;
+
+    const updateHeight = () => {
+      const rootRect = iframeRoot.getBoundingClientRect();
+
+      // Include absolutely positioned descendants that may not contribute to
+      // scrollHeight/offsetHeight (e.g. sliders/popovers in docs previews).
+      let maxDescendantBottom = rootRect.bottom;
+      iframeRoot.querySelectorAll("*").forEach((node) => {
+        const nodeRect = node.getBoundingClientRect();
+        if (nodeRect.bottom > maxDescendantBottom) {
+          maxDescendantBottom = nodeRect.bottom;
+        }
+      });
+
+      const nextHeight = Math.max(
+        Math.ceil(iframeRoot.getBoundingClientRect().height),
+        iframeRoot.scrollHeight,
+        Math.ceil(maxDescendantBottom - rootRect.top),
+        minHeight,
+        1,
+      );
+      // Update only when there is a meaningful delta to avoid feedback loops.
+      setHeight((prevHeight) =>
+        Math.abs(prevHeight - nextHeight) <= 1 ? prevHeight : nextHeight,
+      );
+    };
+
+    updateHeight();
+
+    const rafId = frameWindow?.requestAnimationFrame(updateHeight);
+    const timeoutId = frameWindow?.setTimeout(updateHeight, 100);
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(updateHeight)
+        : null;
+    resizeObserver?.observe(iframeRoot);
+
+    const mutationObserver =
+      typeof MutationObserver !== "undefined"
+        ? new MutationObserver(updateHeight)
+        : null;
+    mutationObserver?.observe(iframeRoot, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true,
+    });
+
+    frameWindow?.addEventListener("resize", updateHeight);
+
+    return () => {
+      if (typeof rafId === "number" && frameWindow) {
+        frameWindow.cancelAnimationFrame(rafId);
+      }
+      if (typeof timeoutId === "number" && frameWindow) {
+        frameWindow.clearTimeout(timeoutId);
+      }
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      frameWindow?.removeEventListener("resize", updateHeight);
+    };
+  }, [children, iframeRoot, minHeight]);
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        title="Preview viewport"
+        className={cx("previewViewportFrame", className)}
+        style={{ height }}
+      />
+      {iframeRoot && createPortal(children, iframeRoot)}
+    </>
+  );
+};
+
 interface PreviewProps {
   isDark?: boolean;
   bgTheme?: string | boolean;
@@ -99,6 +286,8 @@ interface PreviewProps {
   hasCodePreview?: boolean;
   html?: string;
   jsxCode?: string; // Pre-generated JSX string (from server component)
+  disableBreakpoints?: boolean;
+  showBreakpointControls?: boolean;
   [key: string]: any;
 }
 
@@ -158,6 +347,8 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   html,
   jsxCode,
   isDark = false,
+  disableBreakpoints = false,
+  showBreakpointControls = true,
   ...other
 }) => {
   const [isCodeShown, setIsCodeShown] = useState(false);
@@ -165,6 +356,10 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   const [isDarkMode, setIsDarkMode] = useState(isDark);
   // Ensure unique dropdown id per Preview instance to avoid id collisions (SSR-safe)
   const backgroundDropdownId = `background-select-${useId()}`;
+  const breakpointDropdownId = `breakpoint-select-${useId()}`;
+  const [previewBreakpoint, setPreviewBreakpoint] = useState<PreviewBreakpoint>(
+    PREVIEW_BREAKPOINTS[0],
+  );
   const [previewBackground, setPreviewBackground] = useState<PreviewBackground>(
     () => {
       if (bgThemeColors && typeof bgTheme === "string") {
@@ -218,6 +413,10 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     setIsDarkMode(!isDarkMode);
   }
 
+  function handlePreviewBreakpoint(previewBreakpoint: PreviewBreakpoint) {
+    setPreviewBreakpoint(previewBreakpoint);
+  }
+
   const themeClass = isDarkMode ? "is-dark" : "is-light";
   const bgClass = getBgClassFromName(previewBackground.label);
 
@@ -274,6 +473,29 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     }
   }
 
+  if (showBreakpointControls && !disableBreakpoints) {
+    actions.push(
+      <Dropdown
+        key="breakpoint-select"
+        id={breakpointDropdownId}
+        button={{
+          children: `Viewport: ${previewBreakpoint.label}`,
+          iconName: "chevron-down",
+          type: "ghost",
+        }}
+      >
+        {PREVIEW_BREAKPOINTS.map((option) => (
+          <DropdownItem
+            key={option.key}
+            onClick={() => handlePreviewBreakpoint(option)}
+          >
+            {option.label}
+          </DropdownItem>
+        ))}
+      </Dropdown>,
+    );
+  }
+
   if (hasCodePreview) {
     actions.push(
       <Button key="code-toggle" onClick={handleToggleCode} type="ghost">
@@ -369,11 +591,45 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   // Use toCode for HTML rendering
   const codeForHTML = toCode;
 
+  const previewViewportWidth = disableBreakpoints
+    ? null
+    : previewBreakpoint.width;
+  const previewViewportMinHeight = getScreenLikeMinHeight(previewViewportWidth);
+  const shouldUseIframeViewport = previewViewportWidth !== null;
+
   return (
     <div className={wrapperClasses}>
       <PreviewTitleBar actions={actions} />
       <Card className={classes} {...other}>
-        <div className="previewLive">{toRender}</div>
+        <div
+          className={cx("previewLiveViewportArea", {
+            hasFixedViewport: shouldUseIframeViewport,
+          })}
+        >
+          <div
+            className={cx("previewLiveViewport", {
+              isAuto: previewViewportWidth === null,
+            })}
+            style={{
+              width:
+                previewViewportWidth === null
+                  ? "100%"
+                  : `${previewViewportWidth}px`,
+            }}
+          >
+            {!shouldUseIframeViewport ? (
+              <div className="previewLive">{toRender}</div>
+            ) : (
+              <PreviewViewportFrame
+                key={previewBreakpoint.key}
+                className={themeClass}
+                minHeight={previewViewportMinHeight}
+              >
+                <div className="previewLive">{toRender}</div>
+              </PreviewViewportFrame>
+            )}
+          </div>
+        </div>
       </Card>
       {isCodeShown && hasCodePreview && toCode && (
         <Card className="codeExample">

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

@@ -56,11 +56,60 @@
     overflow: visible !important;
   }
 
+  // Card defaults to overflow hidden; ensure preview content can escape.
+  .card.preview {
+    overflow: visible !important;
+  }
+
   .previewLive {
     transition: all 200ms ease-in-out;
     overflow: visible;
   }
 
+  .previewLiveViewportArea {
+    overflow: visible;
+    width: 100%;
+
+    &.hasFixedViewport {
+      overflow-x: auto;
+      overflow-y: visible;
+      padding: 1rem 0;
+      background: color-mix(
+        in srgb,
+        var(--color-text-default),
+        transparent 96%
+      );
+
+      .previewLiveViewport {
+        background: var(--color-background-primary);
+        border: 1px solid
+          color-mix(in srgb, var(--color-border-strong), transparent 25%);
+        box-shadow:
+          0 0 0 1px
+            color-mix(in srgb, var(--color-border-strong), transparent 60%),
+          0 12px 28px
+            color-mix(in srgb, var(--color-text-default), transparent 88%);
+      }
+    }
+  }
+
+  .previewLiveViewport {
+    margin: 0 auto;
+    overflow: visible;
+
+    &.isAuto {
+      width: 100%;
+    }
+  }
+
+  .previewViewportFrame {
+    width: 100%;
+    border: 0;
+    display: block;
+    background: transparent;
+    padding-top: 16px;
+  }
+
   .selectWrapper {
     position: relative;
     font-family: inherit;

package/src/styles/typography/config.scss

@@ -67,12 +67,12 @@ $body-text: (
 
 $heading-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"), // font-weight: bold,
+  margin-bottom: space.get("large"),
 );
 
 $display-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"), // font-weight: bold,
+  margin-bottom: space.get("large"),
 );
 
 $headings: (
@@ -120,27 +120,27 @@ $headings: (
     default: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     md: (
       font-size: convert.to-rem(28px),
       line-height: convert.to-rem(32px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
   4: (
     default: (
-      font-size: convert.to-rem(18px),
-      line-height: convert.to-rem(22px),
-      font-weight: 300,
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(20px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.4px),
     ),
   ),
@@ -148,27 +148,27 @@ $headings: (
     default: (
       font-size: convert.to-rem(16px),
       line-height: convert.to-rem(20px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(18px),
       line-height: convert.to-rem(22px),
-      font-weight: 300,
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),
   6: (
     default: (
       font-size: convert.to-rem(16px),
-      line-height: convert.to-rem(24px),
-      font-weight: 400,
+      line-height: convert.to-rem(20px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(18px),
-      line-height: convert.to-rem(26px),
-      font-weight: 400,
+      line-height: convert.to-rem(22px),
+      font-weight: 700,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),

package/src/styles/utilities/horizontal-scroll.scss

@@ -36,7 +36,7 @@
       &:active::-webkit-scrollbar-thumb,
       &::-webkit-scrollbar-thumb:hover,
       &::-webkit-scrollbar-thumb:active {
-        background-color: var(--color-fill-contrast) !important;
+        background-color: var(--color-fill-secondary) !important;
       }
     }