@ngrr/ds 0.1.31 → 0.1.32

package/AI.md

@@ -80,6 +80,7 @@ These are the most violated rules. Read them first. They apply to every page, ev
 - Never use `--inset-*` for gaps between elements — use `--space-*`.
 - Never use `--space-*` for padding inside components — use `--inset-*`.
 - Never use generic semantic tokens or hardcoded hex for dataviz — always `--color-dataviz-*`.
+- Always look on tokens.css for available tokens. Tokens are descriptive enough to understand the purpose. Use them accordingly. For example: You need a space between fields on a form, use --space-form-vertical. You need a border radius for a card, use  --surface-card-radius. You need a gutter between cards, use --grid-cards-gutter. 
 
 ### Tags
 - Always match Tag `variant` to the semantic meaning. Never use the same variant for all tags in a list.
@@ -255,6 +256,100 @@ Primitives (raw) → Semantic (intent) → Component (usage)
 ✅ `padding: var(--inset-large)` inside a card's content wrapper
 ❌ `gap: var(--inset-standard)` — wrong token family for gaps
 
+**Spacing tokens — Source: Figma size collection**
+
+space/* = gaps between sibling elements
+inset/* = padding inside components
+Rule: same name = same value across both scales.
+
+| Token | Value |
+|---|---|
+| --space-none | 0px |
+| --space-micro | 2px |
+| --space-tiny | 4px |
+| --space-small | 8px |
+| --space-compact | 12px |
+| --space-medium | 16px |
+| --space-large | 24px |
+| --space-spacious | 32px |
+| --space-ample | 48px |
+| --space-grand | 64px |
+| --space-toolbar-standard | 16px (→ space-medium) |
+| --space-form-vertical | 32px (→ space-spacious) |
+
+| Token | Value |
+|---|---|
+| --inset-none | 0px |
+| --inset-micro | 2px |
+| --inset-tiny | 4px |
+| --inset-small | 8px |
+| --inset-compact | 12px |
+| --inset-medium | 16px |
+| --inset-large | 24px |
+| --inset-spacious | 32px |
+
+**Radius tokens — Source: Figma size collection → radius/***
+
+| Token | Value | Use |
+|---|---|---|
+| --radius-none | 0px | Sharp corners |
+| --radius-xsmall | 4px | Tooltips |
+| --radius-small | 12px | Inputs, chips |
+| --radius-standard | 16px | Buttons, tags, controls |
+| --radius-large | 24px | Cards |
+| --radius-xlarge | 32px | Modals |
+| --radius-full | 9999px | Pills, avatars |
+
+Component-specific aliases:
+- --surface-tooltip-radius → --radius-xsmall (4px)
+- --surface-popover-radius → --radius-standard (16px)
+- --surface-card-radius → --radius-large (24px)
+- --surface-modal-radius → --radius-xlarge (32px)
+
+**Z-index tokens — Source: Figma size collection → z-index/***
+
+| Token | Value |
+|---|---|
+| --z-index-sticky | 1020 |
+| --z-index-fixed | 1030 |
+| --z-index-modal-backdrop | 1040 |
+| --z-index-modal | 1050 |
+| --z-index-popover | 1060 |
+| --z-index-tooltip | 1070 |
+
+**Breakpoint tokens — Source: Figma size collection → breakpoints/***
+NOTE: These must always be raw px values. Never use var() for breakpoints —
+CSS custom properties do not resolve inside @media queries.
+
+| Token | Value |
+|---|---|
+| --breakpoint-mobile | 480px |
+| --breakpoint-tablet | 768px |
+| --breakpoint-desktop | 1280px |
+| --breakpoint-desktop-large | 1440px |
+
+**Transition tokens — Source: Figma motion collection → transition/***
+
+| Token | Value | Use |
+|---|---|---|
+| --transition-instant | 0ms ease | No animation |
+| --transition-fast | 150ms ease | General UI |
+| --transition-normal | 250ms ease | General UI |
+| --transition-slow | 400ms ease | General UI |
+| --transition-popover | 150ms ease | Popovers |
+| --transition-switcher | 150ms ease | Toggle switches |
+| --transition-drawer | 250ms ease | Drawers |
+| --transition-modal | 0ms ease | Modals |
+
+**Grid tokens — Source: Figma size collection → grid/***
+
+| Token | Value |
+|---|---|
+| --grid-columns | 12 |
+| --grid-gutter | 16px |
+| --grid-margin-x | 16px |
+| --grid-cards-gutter | 16px |
+
 ### Typography — never override
 ```tsx
 // CORRECT
@@ -270,6 +365,34 @@ Primitives (raw) → Semantic (intent) → Component (usage)
 <div style={{ fontFamily: 'Inter, sans-serif' }}>    // never set font-family
 ```
 
+## Token invention rule
+
+NEVER create CSS custom properties that do not correspond to a variable
+in the Figma size, color, motion, or typography collections.
+
+If a token does not exist in Figma, do not create it — not even as a
+convenience alias or layout helper. If a token is needed, ask the user
+to create it in Figma first, then mirror it in tokens.css.
+
+### Known fabricated token patterns to reject:
+
+The following were invented by AI agents and removed. Never recreate them:
+
+- layout/page-margin-x · layout/section-spacing-* · layout/card-padding
+  → These don't exist in Figma. Use --inset-medium and --space-* instead.
+- space/comfortable · space/generous · space/ample (old names)
+  → Old invented names. Use --space-large, --space-spacious, --space-ample.
+- inset/xlarge
+  → Renamed to --inset-spacious in Figma and CSS.
+- radius/medium (6px) · radius/large (8px)
+  → Were wrong values. Correct scale is radius/small=12, radius/standard=16.
+- font-size/display-s at 1.125rem
+  → Wrong value. Correct is 1.5rem (24px per Figma).
+- --space-comfortable (20px)
+  → Never existed in Figma. Use --space-large (24px).
+- var() inside @media queries using breakpoint tokens
+  → CSS custom properties don't resolve in @media. Always use raw px.
+
 ---
 
 ## Tag semantic mapping — critical

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { LucideIcon } from 'lucide-react';
-export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type AvatarVariant = 'profile' | 'organization';
 export type AvatarFill = 'picture' | 'initials' | 'icon';
 export interface AvatarProps {
-    /** Visual size of the avatar. Default: `'md'` (40×40px). */
+    /** Visual size of the avatar. Default: `'sm'` (32×32px). */
     size?: AvatarSize;
     /** Shape: circle for a person, rounded square for an org. Default: `'profile'`. */
     variant?: AvatarVariant;

package/dist/ds-nagarro.es.js

@@ -662,7 +662,7 @@ function qe({ size: e = "md", variant: t = "secondary", children: n, leadingIcon
 }
 //#endregion
 //#region src/components/atoms/Avatar/Avatar.tsx
-function Je({ size: e = "md", variant: t = "profile", fill: n = "initials", src: r, initials: i, icon: a, name: o, alt: s, className: c, style: l }) {
+function Je({ size: e = "sm", variant: t = "profile", fill: n = "initials", src: r, initials: i, icon: a, name: o, alt: s, className: c, style: l }) {
 	let u = ["dsn-avatar", c].filter(Boolean).join(" "), d = o ?? void 0, f = o ? void 0 : !0, p = i ? i.trim().slice(0, 2).toUpperCase() : void 0;
 	return /* @__PURE__ */ g("div", {
 		className: u,