@ambita/design-system 6.1.1-531.0 → 6.1.1-551.0

package/README.md

@@ -11,9 +11,9 @@ Generate NPM token (try `npm whoami` to check if configured). If no response, fo
 To get the project up and running locally:
 
 ```sh
-npm i
-npm run build:storybook:prepare
-npm run storybook
+pnpm install
+pnpm run build:storybook:prepare
+pnpm run storybook
 ```
 
 This will install dependencies, build the required theme assets, and start Storybook on port 6006.
@@ -21,12 +21,12 @@ This will install dependencies, build the required theme assets, and start Story
 > [!IMPORTANT]
 > The `build:storybook:prepare` step is **required** before running Storybook for the first time. Storybook needs the compiled theme CSS files in `dist/themes/`. If you see an error about missing `./dist/themes` directory, run this build step first.
 
-You can also run `npm start` to test it running with Vite.
+You can also run `pnpm start` to test it running with Vite.
 
 ### Subsequent Runs
 
 ```sh
-npm run storybook
+pnpm run storybook
 ```
 
 ---
@@ -72,19 +72,19 @@ Recommended front-end template for new Ambita projects, pre-configured with this
 #### Compile and Hot-Reload for Development
 
 ```sh
-npm start
+pnpm start
 ```
 
 #### Documentation and manual testing with [Storybook](https://storybook.js.org/)
 
 ```sh
-npm run storybook
+pnpm run storybook
 ```
 
 #### Type-Check, Compile and Minify for Production
 
 ```sh
-npm run build
+pnpm run build
 ```
 
 #### Run Unit Tests with [Vitest](https://vitest.dev/)
@@ -92,37 +92,37 @@ npm run build
 Once:
 
 ```sh
-npm test
+pnpm test
 ```
 
 Continuously:
 
 ```sh
-npm run test:unit
+pnpm run test:unit
 ```
 
 #### Test coverage with [v8](https://vitest.dev/guide/coverage)
 
 ```sh
-npm run test:coverage
+pnpm run test:coverage
 ```
 
 #### Lint code
 
 ```sh
-npm run lint
+pnpm run lint
 ```
 
 #### Format code with [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html)
 
 ```sh
-npm run format
+pnpm run format
 ```
 
 #### Type Check [TypeScript](https://www.typescriptlang.org/)
 
 ```sh
-npm run type-check
+pnpm run type-check
 ```
 
 ---

package/dist/css/_tokens/_byggesoknaden.scss

@@ -1,7 +1,7 @@
 // Do not edit directly, this file was auto-generated.
 
-$amb-font-family-display-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
-$amb-font-family-sans-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+$amb-font-family-display-serif: "Source Sans Pro", Arial, Helvetica, sans-serif;
+$amb-font-family-sans-serif: "Source Sans Pro", Arial, Helvetica, sans-serif;
 $amb-font-weight-bold: 700;
 $amb-font-weight-medium: 500;
 $amb-font-weight-regular: 400;
@@ -32,7 +32,7 @@ $bs-color-red-3: #b74a40; // For UI
 $bs-color-white: #ffffff; // For marketing and UI
 $bs-color-yellow-1: #fefaed; // For UI
 $bs-color-yellow-2: #dfbb2c; // For UI
-$bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+$bs-font-family-bs-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
 $bs-font-line-height-14: 14px;
 $bs-font-line-height-16: 16px;
 $bs-font-line-height-18: 18px;

package/dist/css/_tokens/byggesoknaden.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
-  --amb-font-family-sans-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: "Source Sans Pro", Arial, Helvetica, sans-serif;
+  --amb-font-family-sans-serif: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/_tokens/component-tokens.css

@@ -28,12 +28,12 @@
      TYPOGRAPHY TOKENS
      Global font settings that can be overridden per theme
      ======================================================================== */
-  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-base: var(--font-family-sans-serif, "Inter", Arial, Helvetica, sans-serif);
   --font-family-display: var(
     --font-family-display-serif,
-    'PT Serif',
+    "PT Serif",
     Georgia,
-    'Times New Roman',
+    "Times New Roman",
     serif
   );
   /* ------------------------------------------------------------------------

package/dist/css/_typography.scss

@@ -36,7 +36,7 @@
    - @ambita/design-system/dist/themes/byggesoknaden.css
 ============================================================================ */
 
-@forward './functions';
+@forward "./functions";
 
 /* ============================================================================
    HEADING MIXINS

package/dist/css/ambita-dark.scss

@@ -12,11 +12,11 @@
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
-@use './colors-css-variables.scss';
-@use './utilities.scss' as *;
+@use "./colors-css-variables.scss";
+@use "./utilities.scss" as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
-@import url('./themes/ambita-dark/semantic-tokens.css');
+@import url("./themes/ambita-dark/semantic-tokens.css");
 
 /* Layer 2: Component Tokens (theme-specific component decisions) */
-@import url('./themes/ambita-dark/component-tokens.css');
+@import url("./themes/ambita-dark/component-tokens.css");

package/dist/css/ambita-light.scss

@@ -14,11 +14,11 @@
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
-@use './colors-css-variables.scss';
-@use './utilities.scss' as *;
+@use "./colors-css-variables.scss";
+@use "./utilities.scss" as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
-@import url('./themes/ambita-light/semantic-tokens.css');
+@import url("./themes/ambita-light/semantic-tokens.css");
 
 /* Layer 2: Component Tokens (theme-specific component decisions) */
-@import url('./themes/ambita-light/component-tokens.css');
+@import url("./themes/ambita-light/component-tokens.css");

package/dist/css/ambita-old.scss

@@ -14,11 +14,11 @@
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
-@use './colors-css-variables.scss';
-@use './utilities.scss' as *;
+@use "./colors-css-variables.scss";
+@use "./utilities.scss" as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
-@import url('./themes/ambita-old/semantic-tokens.css');
+@import url("./themes/ambita-old/semantic-tokens.css");
 
 /* Layer 2: Component Tokens (theme-specific component decisions) */
-@import url('./themes/ambita-old/component-tokens.css');
+@import url("./themes/ambita-old/component-tokens.css");

package/dist/css/base.scss

@@ -10,11 +10,11 @@
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
-@use './colors-css-variables.scss';
-@use './utilities.scss' as *;
+@use "./colors-css-variables.scss";
+@use "./utilities.scss" as *;
 
 /* Layer 1: Semantic Tokens - Using Ambita Light as default */
-@import url('./themes/ambita-light/semantic-tokens.css');
+@import url("./themes/ambita-light/semantic-tokens.css");
 
 /* Layer 2: Component Tokens - Using Ambita Light as default */
-@import url('./themes/ambita-light/component-tokens.css');
+@import url("./themes/ambita-light/component-tokens.css");

package/dist/css/byggesoknaden.scss

@@ -12,11 +12,11 @@
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
-@use './colors-css-variables.scss';
-@use './utilities.scss' as *;
+@use "./colors-css-variables.scss";
+@use "./utilities.scss" as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
-@import url('./themes/byggesoknaden/semantic-tokens.css');
+@import url("./themes/byggesoknaden/semantic-tokens.css");
 
 /* Layer 2: Component Tokens (theme-specific component decisions) */
-@import url('./themes/byggesoknaden/component-tokens.css');
+@import url("./themes/byggesoknaden/component-tokens.css");

package/dist/css/colors-css-variables.scss

@@ -3,7 +3,7 @@
  * Use design tokens from the theme CSS files instead.
  */
 
-@use './colors-scss-variables' as *;
+@use "./colors-scss-variables" as *;
 
 /* Do not use if you need IE11 support */
 :where(:root) {

package/dist/css/functions.scss

@@ -15,7 +15,7 @@
    ```
 ============================================================================ */
 
-@use 'sass:math';
+@use "sass:math";
 
 /**
  * Convert pixel values to rem units

package/dist/css/index.scss

@@ -21,7 +21,7 @@
 ============================================================================ */
 
 /* Forward to default theme (Ambita Light) */
-@forward './ambita-light.scss';
+@forward "./ambita-light.scss";
 
 /* ============================================================================
    GLOBAL FONT FAMILY

package/dist/css/mixins.scss

@@ -1,4 +1,4 @@
-@use './colors-scss-variables' as *;
+@use "./colors-scss-variables" as *;
 
 $aux-focus-indicator-style:
   0 0 0 3px $aux-white,
@@ -93,7 +93,7 @@ $aux-focus-indicator-style:
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     width: 20px;
     height: 20px;
     display: block;

package/dist/css/neo-mixins.scss

@@ -16,8 +16,8 @@
    ```
 ============================================================================ */
 
-@use './neo-tokens' as *;
-@forward './functions';
+@use "./neo-tokens" as *;
+@forward "./functions";
 
 /* ============================================================================
    DROPDOWN/PORTAL CONTENT MIXINS
@@ -63,38 +63,38 @@
  */
 @mixin dropdown-animations {
   // Animation states
-  &[data-state='open'] {
+  &[data-state="open"] {
     animation:
       fadeIn 150ms,
       zoomIn 150ms;
   }
 
-  &[data-state='closed'] {
+  &[data-state="closed"] {
     animation:
       fadeOut 150ms,
       zoomOut 150ms;
   }
 
   // Side-based slide animations
-  &[data-side='bottom'] {
+  &[data-side="bottom"] {
     animation:
       fadeIn 150ms,
       slideInFromTop 150ms;
   }
 
-  &[data-side='top'] {
+  &[data-side="top"] {
     animation:
       fadeIn 150ms,
       slideInFromBottom 150ms;
   }
 
-  &[data-side='left'] {
+  &[data-side="left"] {
     animation:
       fadeIn 150ms,
       slideInFromRight 150ms;
   }
 
-  &[data-side='right'] {
+  &[data-side="right"] {
     animation:
       fadeIn 150ms,
       slideInFromLeft 150ms;
@@ -146,7 +146,7 @@
   transition: background-color 150ms;
 
   // Base selected state styling
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     background-color: $dropdown-item-bg-selected;
     color: $dropdown-item-text-selected;
   }
@@ -158,20 +158,20 @@
   }
 
   // Keyboard navigation highlight (non-selected items)
-  &:not([data-state='checked'])[data-highlighted] {
+  &:not([data-state="checked"])[data-highlighted] {
     background-color: $dropdown-item-bg-hover;
     color: $dropdown-item-text-hover;
   }
 
   // Selected item should maintain selected appearance even when highlighted,
   // unless explicitly hovered with mouse
-  &[data-state='checked'][data-highlighted]:not(:hover) {
+  &[data-state="checked"][data-highlighted]:not(:hover) {
     background-color: $dropdown-item-bg-selected;
     color: $dropdown-item-text-hover;
   }
 
   // Mouse hover always takes priority
-  &[data-state='checked']:hover {
+  &[data-state="checked"]:hover {
     background-color: $dropdown-item-bg-hover;
     color: $dropdown-item-text-hover;
   }

package/dist/css/neo-tokens.scss

@@ -26,7 +26,7 @@
    TYPOGRAPHY TOKENS
    ============================================================================ */
 
-$font-family-sans-serif: var(--font-family-sans-serif) 'sans-serif';
+$font-family-sans-serif: var(--font-family-sans-serif) "sans-serif";
 $font-family-display-serif: var(--font-family-display-serif);
 
 /* ============================================================================

package/dist/css/themes/_base/component-tokens.css

@@ -21,12 +21,12 @@
      Global font settings that can be overridden per theme
      ======================================================================== */
 
-  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-base: var(--font-family-sans-serif, "Inter", Arial, Helvetica, sans-serif);
   --font-family-display: var(
     --font-family-display-serif,
-    'PT Serif',
+    "PT Serif",
     Georgia,
-    'Times New Roman',
+    "Times New Roman",
     serif
   );
 

package/dist/css/themes/ambita-dark/component-tokens.css

@@ -11,12 +11,12 @@
      Global font settings that can be overridden per theme
      ======================================================================== */
 
-  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-base: var(--font-family-sans-serif, "Inter", Arial, Helvetica, sans-serif);
   --font-family-display: var(
     --font-family-display-serif,
-    'PT Serif',
+    "PT Serif",
     Georgia,
-    'Times New Roman',
+    "Times New Roman",
     serif
   );
 

package/dist/css/themes/ambita-dark/semantic-tokens.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
-  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: "PT Serif", Georgia, "Times New Roman", serif;
+  --amb-font-family-sans-serif: "Inter", Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/themes/ambita-light/component-tokens.css

@@ -13,12 +13,12 @@
      Global font settings that can be overridden per theme
      ======================================================================== */
 
-  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-base: var(--font-family-sans-serif, "Inter", Arial, Helvetica, sans-serif);
   --font-family-display: var(
     --font-family-display-serif,
-    'PT Serif',
+    "PT Serif",
     Georgia,
-    'Times New Roman',
+    "Times New Roman",
     serif
   );
 

package/dist/css/themes/ambita-light/semantic-tokens.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
-  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: "PT Serif", Georgia, "Times New Roman", serif;
+  --amb-font-family-sans-serif: "Inter", Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/themes/ambita-old/component-tokens.css

@@ -13,8 +13,8 @@
      Global font settings that can be overridden per theme
      ======================================================================== */
 
-  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
-  --font-family-display: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-base: var(--font-family-sans-serif, "Inter", Arial, Helvetica, sans-serif);
+  --font-family-display: var(--font-family-sans-serif, "Inter", Arial, Helvetica, sans-serif);
 
   /* ========================================================================
      SHADOW TOKENS

package/dist/css/themes/ambita-old/semantic-tokens.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
-  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: "PT Serif", Georgia, "Times New Roman", serif;
+  --amb-font-family-sans-serif: "Inter", Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/themes/byggesoknaden/component-tokens.css

@@ -13,14 +13,14 @@
 
   --font-family-base: var(
     --font-family-sans-serif,
-    'Source Sans Pro',
+    "Source Sans Pro",
     Arial,
     Helvetica,
     sans-serif
   );
   --font-family-display: var(
     --font-family-display-serif,
-    'Source Sans Pro',
+    "Source Sans Pro",
     Arial,
     Helvetica,
     sans-serif

package/dist/css/themes/byggesoknaden/semantic-tokens.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
-  --amb-font-family-sans-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: "Source Sans Pro", Arial, Helvetica, sans-serif;
+  --amb-font-family-sans-serif: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;