@sebgroup/green-core 2.4.1 → 2.5.0-rc.20250904131812192

package/components/button/button.styles.js

@@ -28,7 +28,7 @@ const style = css`
       block-size: var(--_block-size);
       background-color: var(--gds-sys-color-l3-neutral-01);
       color: var(--gds-sys-color-content-neutral-03);
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       font-family: inherit;
       font: var(--gds-sys-text-detail-book-m);
       gap: var(--gds-sys-space-s);

package/components/calendar/calendar.styles.js

@@ -66,8 +66,8 @@ const style = css`
         border-width: var(--gds-sys-space-3xs);
         border-style: solid;
         border-color: transparent;
-        border-radius: var(--gds-sys-space-max);
-        transition: background 0.2s; //might be removed
+        border-radius: var(--gds-sys-radius-max);
+        transition: background 0.2s;
         outline-style: solid;
         outline-color: transparent;
         outline-width: 0px;
@@ -174,7 +174,7 @@ const style = css`
         position: absolute;
         width: var(--gds-sys-space-xs);
         height: var(--gds-sys-space-xs);
-        border-radius: var(--gds-sys-space-max);
+        border-radius: var(--gds-sys-radius-max);
         background: var(--gds-sys-color-l3-neutral-01);
         inset: calc(100% + var(--gds-sys-space-xs))
           calc(50% - var(--gds-sys-space-xs) / 2) auto auto;

package/components/context-menu/context-menu.component.d.ts

@@ -18,7 +18,7 @@ declare const GdsContextMenu_base: (new (...args: any[]) => import("../../utils/
  */
 export declare class GdsContextMenu extends GdsContextMenu_base {
     #private;
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static styles: import("lit").CSSResult[][];
     static shadowRootOptions: ShadowRootInit;
     /**
      * Whether the context menu popover is open.

package/components/context-menu/context-menu.component.js

@@ -25,7 +25,6 @@ import {
 import { GdsButton } from "../button/button.component.js";
 import { IconDotGridOneHorizontal } from "../icon/icons/dot-grid-one-horizontal.js";
 import { GdsPopover } from "../popover/popover.component.js";
-import ContextMenuStyles from "./context-menu.styles.js";
 import { GdsMenuHeading } from "../../primitives/menu/menu-heading.component.js";
 let GdsContextMenu = class extends withMarginProps(
   withLayoutChildProps(GdsElement)
@@ -111,7 +110,7 @@ _renderPopover = new WeakMap();
 handleItemClick_fn = function() {
   this.open = false;
 };
-GdsContextMenu.styles = [tokens, ContextMenuStyles];
+GdsContextMenu.styles = [tokens];
 GdsContextMenu.shadowRootOptions = {
   mode: "open",
   delegatesFocus: true

package/components/details/details.styles.js

@@ -24,7 +24,7 @@ const style = css`
     }
 
     .summary-icon {
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       background-color: transparent;
       transition: all 280ms;
       aspect-ratio: 1;
@@ -37,7 +37,7 @@ const style = css`
     .summary-icon::after {
       content: '';
       position: absolute;
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       transition: all 280ms;
       inset: 0;
       scale: 0.9;
@@ -89,7 +89,7 @@ const style = css`
     }
 
     .details:focus-visible {
-      border-radius: var(--gds-sys-space-2xs);
+      border-radius: var(--gds-sys-radius-2xs);
     }
 
     .details.open .content {

package/components/dialog/dialog.component.d.ts

@@ -1,5 +1,5 @@
 import { GdsElement } from '../../gds-element';
-declare const GdsDialog_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & typeof GdsElement;
+declare const GdsDialog_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PaddingProps) & typeof GdsElement;
 /**
  * @element gds-dialog
  *
@@ -34,9 +34,13 @@ export declare class GdsDialog extends GdsDialog_base {
      */
     placement: 'initial' | 'top' | 'bottom' | 'left' | 'right';
     /**
-     * The dialog's padding.
+     * Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if
+     * the content exceeds the dialog's height, which can be controlled using the `height` property.
+     *
+     * This property have no effect if the `dialog` slot is used. In that case, you need to add overflow
+     * styles to the content inside the `dialog` slot.
      */
-    padding?: string;
+    scrollable: boolean;
     private _elDialog;
     private _elTriggerSlot;
     /**

package/components/dialog/dialog.component.js

@@ -7,6 +7,7 @@ import {
 } from "../../chunks/chunk.QU3DSPNU.js";
 var _returnValue, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _GdsDialog_instances, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
 import { localized, msg } from "@lit/localize";
+import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -19,6 +20,7 @@ import {
 } from "../../utils/helpers/custom-element-scoping.js";
 import { isIOS } from "../../utils/helpers/platform.js";
 import {
+  withPaddingProps,
   withSizeXProps,
   withSizeYProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
@@ -34,14 +36,16 @@ import {
   unlockBodyScrolling
 } from "./scroll-lock.js";
 registerGlobalScrollLockStyles();
-let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
+let GdsDialog = class extends withSizeXProps(
+  withSizeYProps(withPaddingProps(GdsElement))
+) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _GdsDialog_instances);
     this.open = false;
     this.variant = "default";
     this.placement = "initial";
-    this.padding = "l";
+    this.scrollable = false;
     __privateAdd(this, _returnValue);
     __privateAdd(this, _handleNativeClose, (e) => {
       const dialog = e.target;
@@ -125,13 +129,10 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
           >
             <gds-card
               class="card"
-              display="flex"
               variant="secondary"
               box-shadow="xl"
-              padding=${ifDefined(this.padding)}
               gap="l"
               border-radius="s"
-              min-height="min-content"
             >
               <slot name="dialog">
                 <gds-flex justify-content="space-between">
@@ -145,7 +146,11 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
                     ><gds-icon-cross-small></gds-icon-cross-small
                   ></gds-button>
                 </gds-flex>
-                <gds-div id="content" flex="1">
+                <gds-div
+                  id="content"
+                  flex="1"
+                  overflow=${ifDefined(this.scrollable) ? "auto" : nothing}
+                >
                   <slot></slot>
                 </gds-div>
                 <gds-flex
@@ -210,7 +215,7 @@ handleTriggerSlotChange_fn = function() {
 _handleTriggerClick = new WeakMap();
 _handleClickOutside = new WeakMap();
 GdsDialog.styles = [DialogStyles];
-GdsDialog.styleExpressionBaseSelector = "dialog";
+GdsDialog.styleExpressionBaseSelector = ".card";
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsDialog.prototype, "open", 2);
@@ -224,8 +229,8 @@ __decorateClass([
   property()
 ], GdsDialog.prototype, "placement", 2);
 __decorateClass([
-  property()
-], GdsDialog.prototype, "padding", 2);
+  property({ type: Boolean })
+], GdsDialog.prototype, "scrollable", 2);
 __decorateClass([
   query("dialog")
 ], GdsDialog.prototype, "_elDialog", 2);

package/components/div/div.component.js

@@ -7,6 +7,7 @@ import { tokens } from "../../tokens.style.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import {
   forColorTokens,
+  forRadiusTokens,
   forSpaceTokens,
   parseColorValue
 } from "../../utils/helpers/index.js";
@@ -76,7 +77,7 @@ __decorateClass([
   styleExpressionProperty()
 ], GdsDiv.prototype, "border-style", 2);
 __decorateClass([
-  styleExpressionProperty(forSpaceTokens)
+  styleExpressionProperty(forRadiusTokens)
 ], GdsDiv.prototype, "border-radius", 2);
 __decorateClass([
   styleExpressionProperty({

package/components/dropdown/dropdown.styles.js

@@ -33,7 +33,7 @@ const style = css`
     }
 
     input[type='text'] {
-      border-radius: var(--gds-sys-space-xs);
+      border-radius: var(--gds-sys-radius-xs);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       font-size: inherit;

package/components/flex/flex.component.d.ts

@@ -1,7 +1,6 @@
 import { GdsDiv } from '../div/div.component';
 /**
  * @element gds-flex
- * @status beta
  *
  * The `gds-flex` component extends the `gds-div` and sets the display property to `flex` by default. It is otherwise identical to the `gds-div` component.
  */

package/components/rich-text/rich-text.styles.js

@@ -143,7 +143,7 @@ const style = css`
   */
   img {
     display: block;
-    border-radius: var(--gds-sys-space-xs);
+    border-radius: var(--gds-sys-radius-xs);
   }
 
   figure {
@@ -166,7 +166,7 @@ const style = css`
     border-spacing: 0;
     width: 100%;
     border: var(--default-border);
-    border-radius: var(--gds-sys-space-s);
+    border-radius: var(--gds-sys-radius-s);
     margin-top: var(--gds-sys-space-xl);
   }
 
@@ -225,7 +225,7 @@ const style = css`
   }
 
   summary:focus-visible {
-    border-radius: var(--gds-sys-space-2xs);
+    border-radius: var(--gds-sys-radius-2xs);
   }
 
   details:hover summary {
@@ -282,7 +282,7 @@ const style = css`
   */
   iframe {
     border: var(--gds-sys-space-4xs) solid var(--gds-sys-color-border-subtle-01);
-    border-radius: var(--gds-sys-space-xs);
+    border-radius: var(--gds-sys-radius-xs);
     min-width: 100%;
     margin-bottom: var(--gds-sys-space-l);
   }

package/components/segmented-control/segment/segment.styles.js

@@ -10,7 +10,7 @@ const style = css`
     button {
       appearance: none;
       background: transparent;
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       border-width: 0;
       color: var(--gds-sys-color-content-neutral-01);
       cursor: pointer;

package/components/segmented-control/segmented-control.styles.js

@@ -5,7 +5,7 @@ const style = css`
     :host {
       background-color: var(--gds-sys-color-l3-neutral-02);
       border: 0.25rem solid transparent;
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       box-sizing: border-box;
       contain: layout;
       display: inline-flex;
@@ -42,7 +42,7 @@ const style = css`
       align-items: center;
       appearance: none;
       aspect-ratio: 1;
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       border-width: 0;
       background-color: var(--gds-sys-color-l3-neutral-02);
       color: var(--gds-sys-color-content-neutral-01);
@@ -97,7 +97,7 @@ const style = css`
 
     #indicator {
       background-color: var(--gds-sys-color-l3-neutral-04);
-      border-radius: var(--gds-sys-space-max);
+      border-radius: var(--gds-sys-radius-max);
       height: 100%;
       left: 0;
       position: absolute;

package/components/signal/signal.styles.js

@@ -12,7 +12,7 @@ const style = css`
     position: relative;
     width: 6px;
     height: 6px;
-    border-radius: var(--gds-sys-space-max);
+    border-radius: var(--gds-sys-radius-max);
     background-color: currentColor;
     transition: all 0.4s;
 

package/components/theme/theme.component.js

@@ -65,6 +65,7 @@ GdsTheme.styles = [
       :host {
         display: contents;
         color: var(--gds-sys-color-content-neutral-01);
+        font-family: var(--gds-sys-text-family);
       }
     `
 ];

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.4.1";
+    this.semanticVersion = "2.5.0-rc.20250904131812192";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/dialog/index.d.ts

@@ -5,7 +5,7 @@ export declare const GdsDialog: (props: React.ComponentProps<ReturnType<typeof g
     heading?: string | undefined;
     variant?: "default" | "slide-out" | undefined;
     placement?: "top" | "right" | "bottom" | "left" | "initial" | undefined;
-    padding?: string | undefined;
+    scrollable?: boolean | undefined;
     show?: ((reason?: string) => void) | undefined;
     close?: ((reason: string) => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
@@ -22,6 +22,9 @@ export declare const GdsDialog: (props: React.ComponentProps<ReturnType<typeof g
     'block-size'?: string | undefined;
     'min-block-size'?: string | undefined;
     'max-block-size'?: string | undefined;
+    padding?: string | undefined;
+    'padding-inline'?: string | undefined;
+    'padding-block'?: string | undefined;
     readonly semanticVersion?: "__GDS_SEM_VER__" | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;

package/generated/react/index.d.ts

@@ -41,8 +41,8 @@ export * from './theme/index.js';
 export * from './video/index.js';
 export * from './form-control-footer/index.js';
 export * from './form-control-header/index.js';
-export * from './menu-item/index.js';
 export * from './option/index.js';
+export * from './menu-item/index.js';
 export * from './checkbox-group/index.js';
 export * from './icons/icon-details/index.js';
 export * from './filter-chip/index.js';

package/generated/react/index.js

@@ -41,8 +41,8 @@ export * from "./theme/index.js";
 export * from "./video/index.js";
 export * from "./form-control-footer/index.js";
 export * from "./form-control-header/index.js";
-export * from "./menu-item/index.js";
 export * from "./option/index.js";
+export * from "./menu-item/index.js";
 export * from "./checkbox-group/index.js";
 export * from "./icons/icon-details/index.js";
 export * from "./filter-chip/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "2.4.1",
+  "version": "2.5.0-rc.20250904131812192",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/tokens/variables.base.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n  --gds-sys-state-hover-state-layer-opacity: 0.1;\n  --gds-sys-motion-easing-ease-in: 0.64, 0, 0.78, 0;\n  --gds-sys-motion-easing-ease-in-out: 0.83, 0, 0.17, 1;\n  --gds-sys-motion-easing-ease-out: 0.22, 1, 0.36, 1;\n  --gds-sys-motion-easing-linear: 0, 0, 1, 1;\n  --gds-sys-motion-duration-fastest: .2s;\n  --gds-sys-motion-duration-fast: .4s;\n  --gds-sys-motion-duration-default: .5s;\n  --gds-sys-motion-duration-slow: 1s;\n  --gds-sys-motion-duration-slowest: 1.5s;\n  --gds-sys-viewport-xs: 375;\n  --gds-sys-viewport-s: 430;\n  --gds-sys-viewport-m: 768;\n  --gds-sys-viewport-l: 1024;\n  --gds-sys-viewport-xl: 1440;\n  --gds-sys-viewport-2xl: 2560;\n  --gds-sys-viewport-3xl: 3840;\n  --gds-sys-text-family: SEB SansSerif GDS;\n  --gds-sys-text-weight-light: 300;\n  --gds-sys-text-weight-regular: 400;\n  --gds-sys-text-weight-book: 450;\n  --gds-sys-text-weight-medium: 500;\n  --gds-sys-text-weight-bold: 700;\n  --gds-sys-text-heading-xl: 450 32px/44px SEB SansSerif GDS;\n  --gds-sys-text-heading-l: 450 28px/40px SEB SansSerif GDS;\n  --gds-sys-text-heading-m: 450 24px/32px SEB SansSerif GDS;\n  --gds-sys-text-heading-s: 450 20px/28px SEB SansSerif GDS;\n  --gds-sys-text-heading-xs: 450 16px/24px SEB SansSerif GDS;\n  --gds-sys-text-heading-2xs: 450 14px/20px SEB SansSerif GDS;\n  --gds-sys-text-detail-book-m: 450 16px/20px SEB SansSerif GDS;\n  --gds-sys-text-detail-book-s: 450 14px/18px SEB SansSerif GDS;\n  --gds-sys-text-detail-book-xs: 450 12px/16px SEB SansSerif GDS;\n  --gds-sys-text-detail-regular-m: 400 16px/20px SEB SansSerif GDS;\n  --gds-sys-text-detail-regular-s: 400 14px/18px SEB SansSerif GDS;\n  --gds-sys-text-detail-regular-xs: 400 12px/16px SEB SansSerif GDS;\n  --gds-sys-text-body-book-l: 450 20px/26px SEB SansSerif GDS;\n  --gds-sys-text-body-book-m: 450 16px/24px SEB SansSerif GDS;\n  --gds-sys-text-body-book-s: 450 14px/20px SEB SansSerif GDS;\n  --gds-sys-text-body-regular-l: 400 20px/26px SEB SansSerif GDS;\n  --gds-sys-text-body-regular-m: 400 16px/24px SEB SansSerif GDS;\n  --gds-sys-text-body-regular-s: 400 14px/20px SEB SansSerif GDS;\n  --gds-sys-text-body-italic-l: italic 400 20px/26px SEB SansSerif GDS;\n  --gds-sys-text-body-italic-m: italic 400 16px/24px SEB SansSerif GDS;\n  --gds-sys-text-body-italic-s: italic 400 14px/20px SEB SansSerif GDS;\n  --gds-sys-text-display-2xl: 450 82px/90px SEB SansSerif GDS;\n  --gds-sys-text-display-xl: 450 64px/72px SEB SansSerif GDS;\n  --gds-sys-text-display-l: 450 48px/56px SEB SansSerif GDS;\n  --gds-sys-text-display-m: 450 36px/44px SEB SansSerif GDS;\n  --gds-sys-text-display-s: 450 32px/40px SEB SansSerif GDS;\n  --gds-sys-text-preamble-2xl: 450 32px/40px SEB SansSerif GDS;\n  --gds-sys-text-preamble-xl: 450 28px/36px SEB SansSerif GDS;\n  --gds-sys-text-preamble-l: 450 24px/32px SEB SansSerif GDS;\n  --gds-sys-text-preamble-m: 450 20px/28px SEB SansSerif GDS;\n  --gds-sys-text-preamble-s: 450 18px/26px SEB SansSerif GDS;\n  --gds-sys-text-preamble-xs: 450 16px/24px SEB SansSerif GDS;\n  --gds-sys-space-0: 0px;\n  --gds-sys-space-4xs: 1px;\n  --gds-sys-space-3xs: 2px;\n  --gds-sys-space-2xs: 4px;\n  --gds-sys-space-xs: 8px;\n  --gds-sys-space-s: 12px;\n  --gds-sys-space-m: 16px;\n  --gds-sys-space-l: 24px;\n  --gds-sys-space-xl: 32px;\n  --gds-sys-space-2xl: 40px;\n  --gds-sys-space-3xl: 48px;\n  --gds-sys-space-4xl: 64px;\n  --gds-sys-space-5xl: 80px;\n  --gds-sys-space-6xl: 96px;\n  --gds-sys-space-7xl: 112px;\n  --gds-sys-space-8xl: 120px;\n  --gds-sys-space-max: 999px;\n  --gds-sys-radius-none: 0px;\n  --gds-sys-radius-2xs: 2px;\n  --gds-sys-radius-xs: 4px;\n  --gds-sys-radius-s: 8px;\n  --gds-sys-radius-m: 16px;\n  --gds-sys-radius-l: 24px;\n  --gds-sys-radius-xl: 32px;\n  --gds-sys-radius-2xl: 40px;\n  --gds-sys-radius-max: 999px;";
+const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n  --gds-sys-state-hover-state-layer-opacity: 0.1;\n  --gds-sys-motion-easing-ease-in: 0.64, 0, 0.78, 0;\n  --gds-sys-motion-easing-ease-in-out: 0.83, 0, 0.17, 1;\n  --gds-sys-motion-easing-ease-out: 0.22, 1, 0.36, 1;\n  --gds-sys-motion-easing-linear: 0, 0, 1, 1;\n  --gds-sys-motion-duration-fastest: .2s;\n  --gds-sys-motion-duration-fast: .4s;\n  --gds-sys-motion-duration-default: .5s;\n  --gds-sys-motion-duration-slow: 1s;\n  --gds-sys-motion-duration-slowest: 1.5s;\n  --gds-sys-viewport-xs: 375;\n  --gds-sys-viewport-s: 430;\n  --gds-sys-viewport-m: 768;\n  --gds-sys-viewport-l: 1024;\n  --gds-sys-viewport-xl: 1440;\n  --gds-sys-viewport-2xl: 2560;\n  --gds-sys-viewport-3xl: 3840;\n  --gds-sys-text-family: SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-weight-light: 300;\n  --gds-sys-text-weight-regular: 400;\n  --gds-sys-text-weight-book: 450;\n  --gds-sys-text-weight-medium: 500;\n  --gds-sys-text-weight-bold: 700;\n  --gds-sys-text-heading-xl: 450 32px/44px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-heading-l: 450 28px/40px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-heading-m: 450 24px/32px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-heading-s: 450 20px/28px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-heading-xs: 450 16px/24px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-heading-2xs: 450 14px/20px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-detail-book-m: 450 16px/20px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-detail-book-s: 450 14px/18px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-detail-book-xs: 450 12px/16px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-detail-regular-m: 400 16px/20px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-detail-regular-s: 400 14px/18px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-detail-regular-xs: 400 12px/16px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-book-l: 450 20px/26px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-book-m: 450 16px/24px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-book-s: 450 14px/20px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-regular-l: 400 20px/26px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-regular-m: 400 16px/24px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-regular-s: 400 14px/20px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-italic-l: italic 400 20px/26px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-italic-m: italic 400 16px/24px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-body-italic-s: italic 400 14px/20px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-display-2xl: 450 82px/90px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-display-xl: 450 64px/72px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-display-l: 450 48px/56px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-display-m: 450 36px/44px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-display-s: 450 32px/40px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-preamble-2xl: 450 32px/40px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-preamble-xl: 450 28px/36px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-preamble-l: 450 24px/32px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-preamble-m: 450 20px/28px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-preamble-s: 450 18px/26px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-text-preamble-xs: 450 16px/24px SEB SansSerif, SEB SansSerif GDS, SEBSansSerif;\n  --gds-sys-space-0: 0px;\n  --gds-sys-space-4xs: 1px;\n  --gds-sys-space-3xs: 2px;\n  --gds-sys-space-2xs: 4px;\n  --gds-sys-space-xs: 8px;\n  --gds-sys-space-s: 12px;\n  --gds-sys-space-m: 16px;\n  --gds-sys-space-l: 24px;\n  --gds-sys-space-xl: 32px;\n  --gds-sys-space-2xl: 40px;\n  --gds-sys-space-3xl: 48px;\n  --gds-sys-space-4xl: 64px;\n  --gds-sys-space-5xl: 80px;\n  --gds-sys-space-6xl: 96px;\n  --gds-sys-space-7xl: 112px;\n  --gds-sys-space-8xl: 120px;\n  --gds-sys-space-max: 999px;\n  --gds-sys-radius-none: 0px;\n  --gds-sys-radius-2xs: 2px;\n  --gds-sys-radius-xs: 4px;\n  --gds-sys-radius-s: 8px;\n  --gds-sys-radius-m: 16px;\n  --gds-sys-radius-l: 24px;\n  --gds-sys-radius-xl: 32px;\n  --gds-sys-radius-2xl: 40px;\n  --gds-sys-radius-max: 999px;";
 export default styles;

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-f0000c";
+const VER_SUFFIX = "-dc5b4b";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])

package/utils/helpers/style-expression-helpers.d.ts

@@ -22,6 +22,10 @@ export declare function forColorTokens(context: string): StyleExpressionProperty
  * Create options for style expression properties that expect space tokens.
  */
 export declare const forSpaceTokens: StyleExpressionPropertyOptions;
+/**
+ * Create options for style expression properties that expect radius tokens.
+ */
+export declare const forRadiusTokens: StyleExpressionPropertyOptions;
 /**
  * Create options for style expression properties that expect space tokens.
  */

package/utils/helpers/style-expression-helpers.js

@@ -22,6 +22,9 @@ function forColorTokens(context) {
 const forSpaceTokens = {
   valueTemplate: (value) => `var(--gds-sys-space-${value}, 0)`
 };
+const forRadiusTokens = {
+  valueTemplate: (value) => `var(--gds-sys-radius-${value}, 0)`
+};
 const forSpaceTokensAndCustomValues = {
   valueTemplate: (value) => `var(--gds-sys-space-${sanitizeVariableName(value)}, ${value})`
 };
@@ -45,6 +48,7 @@ function sanitizeVariableName(name) {
 }
 export {
   forColorTokens,
+  forRadiusTokens,
   forSpaceTokens,
   forSpaceTokensAndCustomValues,
   forSpaceTokensSupportingNegative,

package/components/context-menu/context-menu.styles.d.ts

@@ -1,2 +0,0 @@
-declare const style: import("lit").CSSResult;
-export default style;

package/components/context-menu/context-menu.styles.js

@@ -1,41 +0,0 @@
-import "../../chunks/chunk.QU3DSPNU.js";
-import { css } from "lit";
-const style = css`
-  @layer base, reset, transitional-styles;
-  @layer base {
-    :host {
-      display: inline-block;
-    }
-
-    button {
-      display: flex;
-      border-width: 0;
-      background-color: var(--gds-sys-color-l3-neutral-02);
-      border-radius: calc(1px * infinity);
-      padding: 0.4rem 0.8rem;
-      font-family: inherit;
-      cursor: pointer;
-      align-items: center;
-      gap: 0.5rem;
-
-      &:focus-visible {
-        outline-offset: var(--gds-sys-space-3xs);
-        outline-style: solid;
-        outline-width: var(--gds-sys-space-3xs);
-        outline-color: var(--gds-sys-color-content-neutral-01);
-      }
-    }
-
-    button:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--gds-sys-color-l3-neutral-02),
-        var(--gds-sys-color-state-neutral-03)
-      );
-    }
-  }
-`;
-var context_menu_styles_default = style;
-export {
-  context_menu_styles_default as default
-};