@portnet/ui 6.0.0 → 6.0.1

package/dist/esm/v2/tokens/colors.js

@@ -0,0 +1,219 @@
+/**
+ * Color tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.1.
+ *
+ * Single source of truth for every colour value used in the library.
+ * Charter R-2.3 / R-AI.1 — magic colours are forbidden outside this file.
+ *
+ * Hue swatches are defined ONCE in `_hues` and reused by both the
+ * semantic palette (success / warning / danger / info) and the workflow
+ * status palette (status.*). This eliminates the previous duplication
+ * where the same hex was hard-coded in two distinct places.
+ */
+
+/* ---------- Internal hue swatches ----------------------------------
+ * Each hue ships {soft, fg}. `soft` is the tinted background, `fg` is
+ * the darker text-grade colour, AA-verified on both white AND its soft.
+ */
+var _hues = {
+  green: {
+    soft: "#E7F7EF",
+    fg: "#0A6E44"
+  },
+  // ~6.3:1 / ~5.7:1
+  amber: {
+    soft: "#FDF4E0",
+    fg: "#7A5200"
+  },
+  // ~7.0:1 / ~6.4:1
+  red: {
+    soft: "#FBEBED",
+    fg: "#9B1F2B"
+  },
+  // ~7.95:1 / ~5.6:1
+  blue: {
+    soft: "#E0F2FE",
+    fg: "#075985"
+  },
+  // ~7.6:1 / ~6.6:1
+  indigo: {
+    soft: "#EEF3FF",
+    fg: "#1A3EA8"
+  },
+  // ~7.8:1 / ~6.4:1
+  slate: {
+    soft: "#F1F2F5",
+    fg: "#3A3F4A"
+  } // ~9.5:1 / ~8.6:1
+};
+
+/* ---------- Brand --------------------------------------------------- */
+export var brand = {
+  accent: "#232F66",
+  // Portnet navy — AAA · ~12.6:1 on white
+  accentHover: "#1A2452",
+  // pressed / hover (darker)
+  accentSoft: "#E9ECF4",
+  // pale tint for soft backgrounds
+  accentFg: "#FFFFFF"
+};
+
+/* ---------- Brand secondary -----------------------------------------
+ * PORTNET teal — used for secondary CTAs / accent layers.
+ *
+ * Promoted from gu-modules/addpe/addpe-fe (was a module-local
+ * constant `PORTNET_TEAL = "#4fb8cf"` in src/common/utils/appearance.js
+ * that overlaid createTheme to inject palette.secondary). Lifted here
+ * as the canonical PORTNET brand secondary so every host inherits it
+ * via createPortnetTheme without re-overlaying.
+ *
+ * Audit note (R-T.2 follow-up): secondaryFg = #FFFFFF on #4FB8CF
+ * is ~1.96:1, which FAILS WCAG AA for body text. Acceptable for
+ * chip/badge surfaces and non-text accent fills, but a darker fg
+ * (e.g. ink.fg) MUST be chosen before this token is used for text-
+ * bearing buttons or alerts.
+ */
+export var brandSecondary = {
+  secondary: "#4FB8CF",
+  secondaryFg: "#FFFFFF"
+};
+
+/* ---------- Ink (text) ---------------------------------------------
+ *
+ * Contrast tiers (all ratios computed against the lib's light surfaces
+ * via WCAG relative-luminance — see colors.js commit log for the math):
+ *
+ *   fg        AAA · 17.40:1   primary body text + headings
+ *   fgMuted   AAA ·  8.43:1   labels, subtitles, chip text, table
+ *                             headers, pagination — every "essential
+ *                             muted text" surface. Elevated to AAA
+ *                             so the bump propagates fleet-wide to
+ *                             every consumer of @portnet/ui.
+ *   fgSubtle  AA  ·  4.81:1   placeholders, helper text, captions,
+ *                             breadcrumb trail. AA-only by design —
+ *                             "incidental text" per WCAG 1.4.6
+ *                             footnote 4, intentionally lighter to
+ *                             preserve the muted/subtle hierarchy.
+ *   fgInverse white on dark surfaces (always paired with dark bgs).
+ */
+export var ink = {
+  fg: "#0F1525",
+  // AAA · 17.40:1 on white
+  fgMuted: "#474C5A",
+  // AAA ·  8.43:1 on white, 7.94:1 on bg, 7.52:1 on bg-subtle
+  fgSubtle: "#6B7280",
+  // AA  ·  4.81:1 on white — incidental text only (WCAG 1.4.6)
+  fgInverse: "#FFFFFF"
+};
+
+/* ---------- Surfaces ------------------------------------------------ */
+export var surface = {
+  bg: "#F7F8FA",
+  bgElev: "#FFFFFF",
+  bgSubtle: "#F1F2F5",
+  bgHover: "#EAECF0",
+  surface: "#FFFFFF"
+};
+
+/* ---------- Borders ------------------------------------------------- */
+export var border = {
+  border: "#E4E6EB",
+  borderStrong: "#9099AA" // WCAG 1.4.11 · ≥ 3:1 against white
+};
+
+/* ---------- Semantic ------------------------------------------------
+ * `<name>`     saturated, used for fills / icons / borders (≥ 3:1).
+ * `<name>Soft` tinted background.
+ * `<name>Fg`   darker text-grade (≥ 4.5:1 on white AND `<name>Soft`).
+ */
+export var semantic = {
+  success: "#10A968",
+  successSoft: _hues.green.soft,
+  successFg: _hues.green.fg,
+  warning: "#C78400",
+  warningSoft: _hues.amber.soft,
+  warningFg: _hues.amber.fg,
+  danger: "#D93644",
+  dangerSoft: _hues.red.soft,
+  dangerFg: _hues.red.fg,
+  info: "#1A7FB8",
+  infoSoft: _hues.blue.soft,
+  infoFg: _hues.blue.fg
+};
+
+/* ---------- Workflow status ----------------------------------------
+ * Six and only six. Any new business status MUST map onto one of these
+ * (R-2.2). New chips with custom colours require a charter amendment.
+ * Charter §02.1 + V2_ARCHITECTURE.md §5.
+ */
+export var status = {
+  "new": _hues.indigo,
+  sent: _hues.blue,
+  pending: _hues.amber,
+  approved: _hues.green,
+  rejected: _hues.red,
+  neutral: _hues.slate
+};
+
+/* ---------- Focus ring (static fallback) ---------------------------
+ * `shadows.focus` references --accent via CSS var. Use these as
+ * static-context fallbacks when CSS custom properties aren't
+ * resolvable (server-rendered emails, raw inline style, etc.).
+ */
+export var focus = {
+  ring: "0 0 0 3px rgba(35, 47, 102, 0.22)",
+  ringDanger: "0 0 0 3px rgba(217, 54, 68, 0.22)",
+  ringSuccess: "0 0 0 3px rgba(16, 169, 104, 0.22)"
+};
+
+/* ---------- Dark mode ----------------------------------------------
+ * Applied when `[data-theme="dark"]` on `<html>`. OLED-optimised
+ * backgrounds (RGESN R-9.5).
+ */
+export var dark = {
+  bg: "#0A0A0F",
+  bgElev: "#111218",
+  bgSubtle: "#181C26",
+  bgHover: "#1E2230",
+  surface: "#111218",
+  border: "#262B36",
+  borderStrong: "#484F60",
+  fg: "#E8EAEE",
+  fgMuted: "#9BA1AD",
+  fgSubtle: "#9CA3AF",
+  fgInverse: "#0A0A0F",
+  accentSoft: "#1A2340",
+  status: {
+    "new": {
+      fg: "#7EA2FF"
+    },
+    sent: {
+      fg: "#5FB5E0"
+    },
+    pending: {
+      fg: "#E5B04A"
+    },
+    approved: {
+      fg: "#4FD49A"
+    },
+    rejected: {
+      fg: "#EF5A68"
+    },
+    neutral: {
+      fg: "#A0A6B0"
+    }
+  }
+};
+var colors = {
+  brand: brand,
+  brandSecondary: brandSecondary,
+  ink: ink,
+  surface: surface,
+  border: border,
+  semantic: semantic,
+  status: status,
+  focus: focus,
+  dark: dark
+};
+export default colors;
+//# sourceMappingURL=colors.js.map

package/dist/esm/v2/tokens/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","names":["_hues","green","soft","fg","amber","red","blue","indigo","slate","brand","accent","accentHover","accentSoft","accentFg","brandSecondary","secondary","secondaryFg","ink","fgMuted","fgSubtle","fgInverse","surface","bg","bgElev","bgSubtle","bgHover","border","borderStrong","semantic","success","successSoft","successFg","warning","warningSoft","warningFg","danger","dangerSoft","dangerFg","info","infoSoft","infoFg","status","sent","pending","approved","rejected","neutral","focus","ring","ringDanger","ringSuccess","dark","colors"],"sources":["../../../../src/lib/v2/tokens/colors.ts"],"sourcesContent":["/**\r\n * Color tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.1.\r\n *\r\n * Single source of truth for every colour value used in the library.\r\n * Charter R-2.3 / R-AI.1 — magic colours are forbidden outside this file.\r\n *\r\n * Hue swatches are defined ONCE in `_hues` and reused by both the\r\n * semantic palette (success / warning / danger / info) and the workflow\r\n * status palette (status.*). This eliminates the previous duplication\r\n * where the same hex was hard-coded in two distinct places.\r\n */\r\n\r\n/* ---------- Internal hue swatches ----------------------------------\r\n * Each hue ships {soft, fg}. `soft` is the tinted background, `fg` is\r\n * the darker text-grade colour, AA-verified on both white AND its soft.\r\n */\r\nconst _hues = {\r\n  green:  { soft: \"#E7F7EF\", fg: \"#0A6E44\" }, // ~6.3:1 / ~5.7:1\r\n  amber:  { soft: \"#FDF4E0\", fg: \"#7A5200\" }, // ~7.0:1 / ~6.4:1\r\n  red:    { soft: \"#FBEBED\", fg: \"#9B1F2B\" }, // ~7.95:1 / ~5.6:1\r\n  blue:   { soft: \"#E0F2FE\", fg: \"#075985\" }, // ~7.6:1 / ~6.6:1\r\n  indigo: { soft: \"#EEF3FF\", fg: \"#1A3EA8\" }, // ~7.8:1 / ~6.4:1\r\n  slate:  { soft: \"#F1F2F5\", fg: \"#3A3F4A\" }, // ~9.5:1 / ~8.6:1\r\n};\r\n\r\n/* ---------- Brand --------------------------------------------------- */\r\nexport const brand = {\r\n  accent:      \"#232F66\", // Portnet navy — AAA · ~12.6:1 on white\r\n  accentHover: \"#1A2452\", // pressed / hover (darker)\r\n  accentSoft:  \"#E9ECF4\", // pale tint for soft backgrounds\r\n  accentFg:    \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Brand secondary -----------------------------------------\r\n * PORTNET teal — used for secondary CTAs / accent layers.\r\n *\r\n * Promoted from gu-modules/addpe/addpe-fe (was a module-local\r\n * constant `PORTNET_TEAL = \"#4fb8cf\"` in src/common/utils/appearance.js\r\n * that overlaid createTheme to inject palette.secondary). Lifted here\r\n * as the canonical PORTNET brand secondary so every host inherits it\r\n * via createPortnetTheme without re-overlaying.\r\n *\r\n * Audit note (R-T.2 follow-up): secondaryFg = #FFFFFF on #4FB8CF\r\n * is ~1.96:1, which FAILS WCAG AA for body text. Acceptable for\r\n * chip/badge surfaces and non-text accent fills, but a darker fg\r\n * (e.g. ink.fg) MUST be chosen before this token is used for text-\r\n * bearing buttons or alerts.\r\n */\r\nexport const brandSecondary = {\r\n  secondary:    \"#4FB8CF\",\r\n  secondaryFg:  \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Ink (text) ---------------------------------------------\r\n *\r\n * Contrast tiers (all ratios computed against the lib's light surfaces\r\n * via WCAG relative-luminance — see colors.js commit log for the math):\r\n *\r\n *   fg        AAA · 17.40:1   primary body text + headings\r\n *   fgMuted   AAA ·  8.43:1   labels, subtitles, chip text, table\r\n *                             headers, pagination — every \"essential\r\n *                             muted text\" surface. Elevated to AAA\r\n *                             so the bump propagates fleet-wide to\r\n *                             every consumer of @portnet/ui.\r\n *   fgSubtle  AA  ·  4.81:1   placeholders, helper text, captions,\r\n *                             breadcrumb trail. AA-only by design —\r\n *                             \"incidental text\" per WCAG 1.4.6\r\n *                             footnote 4, intentionally lighter to\r\n *                             preserve the muted/subtle hierarchy.\r\n *   fgInverse white on dark surfaces (always paired with dark bgs).\r\n */\r\nexport const ink = {\r\n  fg:        \"#0F1525\", // AAA · 17.40:1 on white\r\n  fgMuted:   \"#474C5A\", // AAA ·  8.43:1 on white, 7.94:1 on bg, 7.52:1 on bg-subtle\r\n  fgSubtle:  \"#6B7280\", // AA  ·  4.81:1 on white — incidental text only (WCAG 1.4.6)\r\n  fgInverse: \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Surfaces ------------------------------------------------ */\r\nexport const surface = {\r\n  bg:       \"#F7F8FA\",\r\n  bgElev:   \"#FFFFFF\",\r\n  bgSubtle: \"#F1F2F5\",\r\n  bgHover:  \"#EAECF0\",\r\n  surface:  \"#FFFFFF\",\r\n};\r\n\r\n/* ---------- Borders ------------------------------------------------- */\r\nexport const border = {\r\n  border:       \"#E4E6EB\",\r\n  borderStrong: \"#9099AA\", // WCAG 1.4.11 · ≥ 3:1 against white\r\n};\r\n\r\n/* ---------- Semantic ------------------------------------------------\r\n * `<name>`     saturated, used for fills / icons / borders (≥ 3:1).\r\n * `<name>Soft` tinted background.\r\n * `<name>Fg`   darker text-grade (≥ 4.5:1 on white AND `<name>Soft`).\r\n */\r\nexport const semantic = {\r\n  success:     \"#10A968\",\r\n  successSoft: _hues.green.soft,\r\n  successFg:   _hues.green.fg,\r\n  warning:     \"#C78400\",\r\n  warningSoft: _hues.amber.soft,\r\n  warningFg:   _hues.amber.fg,\r\n  danger:      \"#D93644\",\r\n  dangerSoft:  _hues.red.soft,\r\n  dangerFg:    _hues.red.fg,\r\n  info:        \"#1A7FB8\",\r\n  infoSoft:    _hues.blue.soft,\r\n  infoFg:      _hues.blue.fg,\r\n};\r\n\r\n/* ---------- Workflow status ----------------------------------------\r\n * Six and only six. Any new business status MUST map onto one of these\r\n * (R-2.2). New chips with custom colours require a charter amendment.\r\n * Charter §02.1 + V2_ARCHITECTURE.md §5.\r\n */\r\nexport const status = {\r\n  new:      _hues.indigo,\r\n  sent:     _hues.blue,\r\n  pending:  _hues.amber,\r\n  approved: _hues.green,\r\n  rejected: _hues.red,\r\n  neutral:  _hues.slate,\r\n};\r\n\r\n/* ---------- Focus ring (static fallback) ---------------------------\r\n * `shadows.focus` references --accent via CSS var. Use these as\r\n * static-context fallbacks when CSS custom properties aren't\r\n * resolvable (server-rendered emails, raw inline style, etc.).\r\n */\r\nexport const focus = {\r\n  ring:        \"0 0 0 3px rgba(35, 47, 102, 0.22)\",\r\n  ringDanger:  \"0 0 0 3px rgba(217, 54, 68, 0.22)\",\r\n  ringSuccess: \"0 0 0 3px rgba(16, 169, 104, 0.22)\",\r\n};\r\n\r\n/* ---------- Dark mode ----------------------------------------------\r\n * Applied when `[data-theme=\"dark\"]` on `<html>`. OLED-optimised\r\n * backgrounds (RGESN R-9.5).\r\n */\r\nexport const dark = {\r\n  bg:           \"#0A0A0F\",\r\n  bgElev:       \"#111218\",\r\n  bgSubtle:     \"#181C26\",\r\n  bgHover:      \"#1E2230\",\r\n  surface:      \"#111218\",\r\n  border:       \"#262B36\",\r\n  borderStrong: \"#484F60\",\r\n  fg:           \"#E8EAEE\",\r\n  fgMuted:      \"#9BA1AD\",\r\n  fgSubtle:     \"#9CA3AF\",\r\n  fgInverse:    \"#0A0A0F\",\r\n  accentSoft:   \"#1A2340\",\r\n  status: {\r\n    new:      { fg: \"#7EA2FF\" },\r\n    sent:     { fg: \"#5FB5E0\" },\r\n    pending:  { fg: \"#E5B04A\" },\r\n    approved: { fg: \"#4FD49A\" },\r\n    rejected: { fg: \"#EF5A68\" },\r\n    neutral:  { fg: \"#A0A6B0\" },\r\n  },\r\n};\r\n\r\nconst colors = { brand, brandSecondary, ink, surface, border, semantic, status, focus, dark };\r\nexport default colors;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/v2/tokens/density.js

@@ -0,0 +1,98 @@
+/**
+ * Density & layout tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.7 + §07.
+ *
+ * R-DG.11 — Density togglable, preference persisted.
+ * R-7.4   — Tactile targets ≥ 44 × 44 px (WCAG 2.5.5).
+ *
+ * IMPORTANT: in any density tier, the visual button height
+ * (`density.<tier>.btn`) may be below `layout.tactileMin` (44).
+ * Components MUST extend the hit area to 44 via padding or a
+ * pseudo-element (the FieldHelp / Button pattern), so R-7.4 is
+ * satisfied without altering the visual size.
+ * Icon-only buttons MUST set min-width/min-height to `tactileMin`.
+ *
+ * Tier picker (host opt-in via the `data-density` attribute):
+ *   - default                    → comfortable
+ *   - data-density="spacious"    → spacious      (kiosk / TV / a11y-large)
+ *   - data-density="compact"     → compact       (dense workflows)
+ *   - data-density="ultra-compact" → ultraCompact (audit ledgers, dense lists)
+ *
+ *   The kebab-case attribute is the public contract; the camelCase
+ *   key on this object is the JS-side identifier. Don't rename
+ *   either without coordinating cssVariables.js.
+ *
+ * NOTE (Batch 1 — responsive certification): the breakpoint scale used
+ * to be declared here. It now lives in the dedicated ./breakpoints
+ * module (single source shared by the MUI theme, the mq() helpers and
+ * the --bp-* CSS variables) and is re-exported below so that every
+ * `import { breakpoints } from "@portnet/ui/v2/tokens"` and the
+ * densityLayout default shape are unchanged.
+ */
+
+import breakpoints from "./breakpoints";
+export var density = {
+  spacious: {
+    row: 56,
+    input: 44,
+    btn: 44,
+    fontSize: 15
+  },
+  comfortable: {
+    row: 44,
+    input: 40,
+    btn: 40,
+    fontSize: 14
+  },
+  compact: {
+    row: 36,
+    input: 32,
+    btn: 32,
+    fontSize: 13
+  },
+  ultraCompact: {
+    row: 28,
+    input: 28,
+    btn: 28,
+    fontSize: 12
+  }
+};
+export var layout = {
+  sidebar: 248,
+  sidebarMin: 64,
+  // collapsed icons-only
+  topbar: 56,
+  contentMax: 1440,
+  // wide table layouts
+  formMax: 720,
+  // mono-column form
+  tactileMin: 44,
+  // WCAG 2.5.5 — hard floor for any tactile target
+
+  /**
+   * Modal max-widths (§03 Modal). MUI-bounded dialogs aligned with
+   * the charter spacing system.
+   */
+  modal: {
+    sm: 440,
+    md: 640,
+    lg: 840,
+    xl: 1000
+  },
+  /**
+   * Drawer default width (§03 Drawer). Hosts may override per usage,
+   * but should pull from this scale rather than invent new values.
+   */
+  drawer: 560
+};
+
+/* Re-export the canonical breakpoint scale (now owned by ./breakpoints)
+ * so existing consumers and the densityLayout default keep working. */
+export { breakpoints };
+var densityLayout = {
+  density: density,
+  layout: layout,
+  breakpoints: breakpoints
+};
+export default densityLayout;
+//# sourceMappingURL=density.js.map

package/dist/esm/v2/tokens/density.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.js","names":["breakpoints","density","spacious","row","input","btn","fontSize","comfortable","compact","ultraCompact","layout","sidebar","sidebarMin","topbar","contentMax","formMax","tactileMin","modal","sm","md","lg","xl","drawer","densityLayout"],"sources":["../../../../src/lib/v2/tokens/density.ts"],"sourcesContent":["/**\r\n * Density & layout tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.7 + §07.\r\n *\r\n * R-DG.11 — Density togglable, preference persisted.\r\n * R-7.4   — Tactile targets ≥ 44 × 44 px (WCAG 2.5.5).\r\n *\r\n * IMPORTANT: in any density tier, the visual button height\r\n * (`density.<tier>.btn`) may be below `layout.tactileMin` (44).\r\n * Components MUST extend the hit area to 44 via padding or a\r\n * pseudo-element (the FieldHelp / Button pattern), so R-7.4 is\r\n * satisfied without altering the visual size.\r\n * Icon-only buttons MUST set min-width/min-height to `tactileMin`.\r\n *\r\n * Tier picker (host opt-in via the `data-density` attribute):\r\n *   - default                    → comfortable\r\n *   - data-density=\"spacious\"    → spacious      (kiosk / TV / a11y-large)\r\n *   - data-density=\"compact\"     → compact       (dense workflows)\r\n *   - data-density=\"ultra-compact\" → ultraCompact (audit ledgers, dense lists)\r\n *\r\n *   The kebab-case attribute is the public contract; the camelCase\r\n *   key on this object is the JS-side identifier. Don't rename\r\n *   either without coordinating cssVariables.js.\r\n *\r\n * NOTE (Batch 1 — responsive certification): the breakpoint scale used\r\n * to be declared here. It now lives in the dedicated ./breakpoints\r\n * module (single source shared by the MUI theme, the mq() helpers and\r\n * the --bp-* CSS variables) and is re-exported below so that every\r\n * `import { breakpoints } from \"@portnet/ui/v2/tokens\"` and the\r\n * densityLayout default shape are unchanged.\r\n */\r\n\r\nimport breakpoints from \"./breakpoints\";\r\n\r\nexport const density = {\r\n  spacious:     { row: 56, input: 44, btn: 44, fontSize: 15 },\r\n  comfortable:  { row: 44, input: 40, btn: 40, fontSize: 14 },\r\n  compact:      { row: 36, input: 32, btn: 32, fontSize: 13 },\r\n  ultraCompact: { row: 28, input: 28, btn: 28, fontSize: 12 },\r\n};\r\n\r\nexport const layout = {\r\n  sidebar:    248,\r\n  sidebarMin:  64,    // collapsed icons-only\r\n  topbar:      56,\r\n  contentMax: 1440,   // wide table layouts\r\n  formMax:     720,   // mono-column form\r\n  tactileMin:  44,    // WCAG 2.5.5 — hard floor for any tactile target\r\n\r\n  /**\r\n   * Modal max-widths (§03 Modal). MUI-bounded dialogs aligned with\r\n   * the charter spacing system.\r\n   */\r\n  modal: {\r\n    sm:  440,\r\n    md:  640,\r\n    lg:  840,\r\n    xl: 1000,\r\n  },\r\n\r\n  /**\r\n   * Drawer default width (§03 Drawer). Hosts may override per usage,\r\n   * but should pull from this scale rather than invent new values.\r\n   */\r\n  drawer: 560,\r\n};\r\n\r\n/* Re-export the canonical breakpoint scale (now owned by ./breakpoints)\r\n * so existing consumers and the densityLayout default keep working. */\r\nexport { breakpoints };\r\n\r\nconst densityLayout = { density, layout, breakpoints };\r\nexport default densityLayout;\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,WAAW,MAAM,eAAe;AAEvC,OAAO,IAAMC,OAAO,GAAG;EACrBC,QAAQ,EAAM;IAAEC,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DC,WAAW,EAAG;IAAEJ,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DE,OAAO,EAAO;IAAEL,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC3DG,YAAY,EAAE;IAAEN,GAAG,EAAE,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG;AAC5D,CAAC;AAED,OAAO,IAAMI,MAAM,GAAG;EACpBC,OAAO,EAAK,GAAG;EACfC,UAAU,EAAG,EAAE;EAAK;EACpBC,MAAM,EAAO,EAAE;EACfC,UAAU,EAAE,IAAI;EAAI;EACpBC,OAAO,EAAM,GAAG;EAAI;EACpBC,UAAU,EAAG,EAAE;EAAK;;EAEpB;AACF;AACA;AACA;EACEC,KAAK,EAAE;IACLC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAG,GAAG;IACRC,EAAE,EAAE;EACN,CAAC;EAED;AACF;AACA;AACA;EACEC,MAAM,EAAE;AACV,CAAC;;AAED;AACA;AACA,SAAStB,WAAW;AAEpB,IAAMuB,aAAa,GAAG;EAAEtB,OAAO,EAAPA,OAAO;EAAES,MAAM,EAANA,MAAM;EAAEV,WAAW,EAAXA;AAAY,CAAC;AACtD,eAAeuB,aAAa","ignoreList":[]}

package/dist/esm/v2/tokens/index.js

@@ -0,0 +1,80 @@
+/**
+ * Tokens barrel — single import surface for the whole library.
+ *
+ *   import tokens from "@portnet/ui/v2/tokens";
+ *   import { brand, brandSecondary, status, spacing, transition, state } from "@portnet/ui/v2/tokens";
+ */
+import colors, { brand, brandSecondary, ink, surface, border, semantic, status, focus, dark } from "./colors";
+import typography, { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants } from "./typography";
+import spacing, { spacingBase } from "./spacing";
+import radius from "./radius";
+import shadows, { muiShadows } from "./shadows";
+import motion, { duration, durationCss, easing, ms, transition } from "./motion";
+import zIndex from "./zIndex";
+import densityLayout, { density, layout, breakpoints } from "./density";
+import { mq, bpValue, BREAKPOINT_KEYS } from "./breakpoints";
+import statusPalette, { STATUS_KEYS, statusToken, STATUS_LABELS_FR } from "./statusPalette";
+import state from "./state";
+export {
+// colors
+colors, brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,
+// typography
+typography, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,
+// spacing
+spacing, spacingBase,
+// radius
+radius,
+// shadows
+shadows, muiShadows,
+// motion
+motion, duration, durationCss, easing, ms, transition,
+// z-index
+zIndex,
+// density / layout
+densityLayout, density, layout, breakpoints,
+// responsive — breakpoint scale + media-query helpers (Batch 1)
+mq, bpValue, BREAKPOINT_KEYS,
+// status helpers
+statusPalette, STATUS_KEYS, statusToken, STATUS_LABELS_FR,
+// state overlays
+state };
+
+// `dl` deprecated alias removed in 0.3.0 — see CHANGELOG. Use `densityLayout`.
+
+var tokens = Object.freeze({
+  colors: colors,
+  brand: brand,
+  brandSecondary: brandSecondary,
+  ink: ink,
+  surface: surface,
+  border: border,
+  semantic: semantic,
+  status: status,
+  focus: focus,
+  dark: dark,
+  typography: typography,
+  fontFamily: fontFamily,
+  fontSize: fontSize,
+  fontWeight: fontWeight,
+  lineHeight: lineHeight,
+  letterSpacing: letterSpacing,
+  variants: variants,
+  spacing: spacing,
+  spacingBase: spacingBase,
+  radius: radius,
+  shadows: shadows,
+  muiShadows: muiShadows,
+  motion: motion,
+  duration: duration,
+  durationCss: durationCss,
+  easing: easing,
+  zIndex: zIndex,
+  density: density,
+  layout: layout,
+  breakpoints: breakpoints,
+  mq: mq,
+  statusPalette: statusPalette,
+  state: state
+});
+export default tokens;
+//# sourceMappingURL=index.js.map

package/dist/esm/v2/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["colors","brand","brandSecondary","ink","surface","border","semantic","status","focus","dark","typography","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","variants","spacing","spacingBase","radius","shadows","muiShadows","motion","duration","durationCss","easing","ms","transition","zIndex","densityLayout","density","layout","breakpoints","mq","bpValue","BREAKPOINT_KEYS","statusPalette","STATUS_KEYS","statusToken","STATUS_LABELS_FR","state","tokens","Object","freeze"],"sources":["../../../../src/lib/v2/tokens/index.ts"],"sourcesContent":["/**\r\n * Tokens barrel — single import surface for the whole library.\r\n *\r\n *   import tokens from \"@portnet/ui/v2/tokens\";\r\n *   import { brand, brandSecondary, status, spacing, transition, state } from \"@portnet/ui/v2/tokens\";\r\n */\r\nimport colors, {\r\n  brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,\r\n} from \"./colors\";\r\nimport typography, {\r\n  fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,\r\n} from \"./typography\";\r\nimport spacing, { spacingBase } from \"./spacing\";\r\nimport radius from \"./radius\";\r\nimport shadows, { muiShadows } from \"./shadows\";\r\nimport motion, {\r\n  duration, durationCss, easing, ms, transition,\r\n} from \"./motion\";\r\nimport zIndex from \"./zIndex\";\r\nimport densityLayout, { density, layout, breakpoints } from \"./density\";\r\nimport { mq, bpValue, BREAKPOINT_KEYS } from \"./breakpoints\";\r\nimport statusPalette, {\r\n  STATUS_KEYS, statusToken, STATUS_LABELS_FR,\r\n} from \"./statusPalette\";\r\nimport state from \"./state\";\r\n\r\nexport {\r\n  // colors\r\n  colors, brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,\r\n  // typography\r\n  typography, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,\r\n  // spacing\r\n  spacing, spacingBase,\r\n  // radius\r\n  radius,\r\n  // shadows\r\n  shadows, muiShadows,\r\n  // motion\r\n  motion, duration, durationCss, easing, ms, transition,\r\n  // z-index\r\n  zIndex,\r\n  // density / layout\r\n  densityLayout, density, layout, breakpoints,\r\n  // responsive — breakpoint scale + media-query helpers (Batch 1)\r\n  mq, bpValue, BREAKPOINT_KEYS,\r\n  // status helpers\r\n  statusPalette, STATUS_KEYS, statusToken, STATUS_LABELS_FR,\r\n  // state overlays\r\n  state,\r\n};\r\n\r\n// `dl` deprecated alias removed in 0.3.0 — see CHANGELOG. Use `densityLayout`.\r\n\r\nconst tokens = Object.freeze({\r\n  colors, brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,\r\n  typography, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,\r\n  spacing, spacingBase,\r\n  radius,\r\n  shadows, muiShadows,\r\n  motion, duration, durationCss, easing,\r\n  zIndex,\r\n  density, layout, breakpoints, mq,\r\n  statusPalette,\r\n  state,\r\n});\r\n\r\nexport default tokens;\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,MAAM,IACXC,KAAK,EAAEC,cAAc,EAAEC,GAAG,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,QACrE,UAAU;AACjB,OAAOC,UAAU,IACfC,UAAU,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,aAAa,EAAEC,QAAQ,QAChE,cAAc;AACrB,OAAOC,OAAO,IAAIC,WAAW,QAAQ,WAAW;AAChD,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,OAAO,IAAIC,UAAU,QAAQ,WAAW;AAC/C,OAAOC,MAAM,IACXC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAEC,EAAE,EAAEC,UAAU,QACxC,UAAU;AACjB,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,IAAIC,OAAO,EAAEC,MAAM,EAAEC,WAAW,QAAQ,WAAW;AACvE,SAASC,EAAE,EAAEC,OAAO,EAAEC,eAAe,QAAQ,eAAe;AAC5D,OAAOC,aAAa,IAClBC,WAAW,EAAEC,WAAW,EAAEC,gBAAgB,QACrC,iBAAiB;AACxB,OAAOC,KAAK,MAAM,SAAS;AAE3B;AACE;AACAxC,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAEC,GAAG,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI;AAClF;AACAC,UAAU,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,aAAa,EAAEC,QAAQ;AACjF;AACAC,OAAO,EAAEC,WAAW;AACpB;AACAC,MAAM;AACN;AACAC,OAAO,EAAEC,UAAU;AACnB;AACAC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAEC,EAAE,EAAEC,UAAU;AACrD;AACAC,MAAM;AACN;AACAC,aAAa,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAW;AAC3C;AACAC,EAAE,EAAEC,OAAO,EAAEC,eAAe;AAC5B;AACAC,aAAa,EAAEC,WAAW,EAAEC,WAAW,EAAEC,gBAAgB;AACzD;AACAC,KAAK;;AAGP;;AAEA,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC;EAC3B3C,MAAM,EAANA,MAAM;EAAEC,KAAK,EAALA,KAAK;EAAEC,cAAc,EAAdA,cAAc;EAAEC,GAAG,EAAHA,GAAG;EAAEC,OAAO,EAAPA,OAAO;EAAEC,MAAM,EAANA,MAAM;EAAEC,QAAQ,EAARA,QAAQ;EAAEC,MAAM,EAANA,MAAM;EAAEC,KAAK,EAALA,KAAK;EAAEC,IAAI,EAAJA,IAAI;EAClFC,UAAU,EAAVA,UAAU;EAAEC,UAAU,EAAVA,UAAU;EAAEC,QAAQ,EAARA,QAAQ;EAAEC,UAAU,EAAVA,UAAU;EAAEC,UAAU,EAAVA,UAAU;EAAEC,aAAa,EAAbA,aAAa;EAAEC,QAAQ,EAARA,QAAQ;EACjFC,OAAO,EAAPA,OAAO;EAAEC,WAAW,EAAXA,WAAW;EACpBC,MAAM,EAANA,MAAM;EACNC,OAAO,EAAPA,OAAO;EAAEC,UAAU,EAAVA,UAAU;EACnBC,MAAM,EAANA,MAAM;EAAEC,QAAQ,EAARA,QAAQ;EAAEC,WAAW,EAAXA,WAAW;EAAEC,MAAM,EAANA,MAAM;EACrCG,MAAM,EAANA,MAAM;EACNE,OAAO,EAAPA,OAAO;EAAEC,MAAM,EAANA,MAAM;EAAEC,WAAW,EAAXA,WAAW;EAAEC,EAAE,EAAFA,EAAE;EAChCG,aAAa,EAAbA,aAAa;EACbI,KAAK,EAALA;AACF,CAAC,CAAC;AAEF,eAAeC,MAAM","ignoreList":[]}

package/dist/esm/v2/tokens/motion.js

@@ -0,0 +1,88 @@
+/**
+ * Motion tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.7 + §08.
+ *
+ * R-Mi.1 — Any duration > 200 ms must be justified.
+ * R-Mi.2 — No decorative looping animations (RGESN R-9.2).
+ * R-Mi.3 — Animate transform + opacity only (GPU).
+ * R-7.5  — `prefers-reduced-motion` respected (≤ 0.01 ms).
+ *
+ * Durations ship in two forms:
+ *   - `duration.<key>`    integer milliseconds (for JS / MUI theme).
+ *   - `durationCss.<key>` CSS string with `ms` unit (for sx / raw CSS).
+ * Use `transition(prop, durKey, easeKey)` for the safest path.
+ *
+ * Each duration has TWO names:
+ *   1. Temporal (fast / base / slow) — original Batch 1 vocabulary,
+ *      kept for back-compat with all existing consumers.
+ *   2. Semantic (microinteraction / stateChange / pageTransition) —
+ *      added in Batch 11 (B6) to make component sx more intent-readable.
+ *      Maps onto the SAME numeric values; pick whichever reads better
+ *      at the call site.
+ */
+
+export var duration = {
+  // Temporal vocabulary
+  fast: 80,
+  // hover, focus
+  base: 180,
+  // modal open, drawer slide, toast spawn
+  slow: 280,
+  // optional — justify any usage
+
+  // Semantic aliases (B6) — same values, intent-readable names
+  microinteraction: 80,
+  // hover, focus, button press
+  stateChange: 180,
+  // modal/drawer/toast in/out
+  pageTransition: 280 // route change, view enter
+};
+export var durationCss = {
+  // Temporal
+  fast: "80ms",
+  base: "180ms",
+  slow: "280ms",
+  // Semantic aliases
+  microinteraction: "80ms",
+  stateChange: "180ms",
+  pageTransition: "280ms"
+};
+export var easing = {
+  out: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "in": "cubic-bezier(0.4, 0, 1, 1)",
+  soft: "cubic-bezier(0.16, 1, 0.3, 1)"
+};
+
+/**
+ * `ms(80)` → `"80ms"`. Use when composing custom transitions.
+ */
+export var ms = function ms(n) {
+  return "".concat(Number(n) || 0, "ms");
+};
+
+/**
+ * Compose a CSS `transition` shorthand safely.
+ *
+ *   transition("opacity")                              → "opacity 180ms cubic-bezier(...)"
+ *   transition("transform", "fast", "in")              → "transform 80ms cubic-bezier(...)"
+ *   transition("opacity",   "stateChange")             → "opacity 180ms cubic-bezier(...)"
+ *
+ *   Both temporal ("fast") and semantic ("microinteraction") keys
+ *   resolve through the same durationCss object.
+ */
+export var transition = function transition() {
+  var _durationCss$duration, _easing$easingKey;
+  var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "all";
+  var durationKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "base";
+  var easingKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "out";
+  return "".concat(prop, " ").concat((_durationCss$duration = durationCss[durationKey]) !== null && _durationCss$duration !== void 0 ? _durationCss$duration : durationCss.base, " ").concat((_easing$easingKey = easing[easingKey]) !== null && _easing$easingKey !== void 0 ? _easing$easingKey : easing.out);
+};
+var motion = {
+  duration: duration,
+  durationCss: durationCss,
+  easing: easing,
+  ms: ms,
+  transition: transition
+};
+export default motion;
+//# sourceMappingURL=motion.js.map

package/dist/esm/v2/tokens/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":["duration","fast","base","slow","microinteraction","stateChange","pageTransition","durationCss","easing","out","soft","ms","n","concat","Number","transition","_durationCss$duration","_easing$easingKey","prop","arguments","length","undefined","durationKey","easingKey","motion"],"sources":["../../../../src/lib/v2/tokens/motion.ts"],"sourcesContent":["/**\r\n * Motion tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.7 + §08.\r\n *\r\n * R-Mi.1 — Any duration > 200 ms must be justified.\r\n * R-Mi.2 — No decorative looping animations (RGESN R-9.2).\r\n * R-Mi.3 — Animate transform + opacity only (GPU).\r\n * R-7.5  — `prefers-reduced-motion` respected (≤ 0.01 ms).\r\n *\r\n * Durations ship in two forms:\r\n *   - `duration.<key>`    integer milliseconds (for JS / MUI theme).\r\n *   - `durationCss.<key>` CSS string with `ms` unit (for sx / raw CSS).\r\n * Use `transition(prop, durKey, easeKey)` for the safest path.\r\n *\r\n * Each duration has TWO names:\r\n *   1. Temporal (fast / base / slow) — original Batch 1 vocabulary,\r\n *      kept for back-compat with all existing consumers.\r\n *   2. Semantic (microinteraction / stateChange / pageTransition) —\r\n *      added in Batch 11 (B6) to make component sx more intent-readable.\r\n *      Maps onto the SAME numeric values; pick whichever reads better\r\n *      at the call site.\r\n */\r\n\r\nexport const duration = {\r\n  // Temporal vocabulary\r\n  fast: 80,   // hover, focus\r\n  base: 180,  // modal open, drawer slide, toast spawn\r\n  slow: 280,  // optional — justify any usage\r\n\r\n  // Semantic aliases (B6) — same values, intent-readable names\r\n  microinteraction: 80,   // hover, focus, button press\r\n  stateChange:      180,  // modal/drawer/toast in/out\r\n  pageTransition:   280,  // route change, view enter\r\n};\r\n\r\nexport const durationCss = {\r\n  // Temporal\r\n  fast: \"80ms\",\r\n  base: \"180ms\",\r\n  slow: \"280ms\",\r\n\r\n  // Semantic aliases\r\n  microinteraction: \"80ms\",\r\n  stateChange:      \"180ms\",\r\n  pageTransition:   \"280ms\",\r\n};\r\n\r\nexport const easing = {\r\n  out:  \"cubic-bezier(0.2, 0.8, 0.2, 1)\",\r\n  in:   \"cubic-bezier(0.4, 0, 1, 1)\",\r\n  soft: \"cubic-bezier(0.16, 1, 0.3, 1)\",\r\n};\r\n\r\n/**\r\n * `ms(80)` → `\"80ms\"`. Use when composing custom transitions.\r\n */\r\nexport const ms = (n: number | string): string => `${Number(n) || 0}ms`;\r\n\r\n/**\r\n * Compose a CSS `transition` shorthand safely.\r\n *\r\n *   transition(\"opacity\")                              → \"opacity 180ms cubic-bezier(...)\"\r\n *   transition(\"transform\", \"fast\", \"in\")              → \"transform 80ms cubic-bezier(...)\"\r\n *   transition(\"opacity\",   \"stateChange\")             → \"opacity 180ms cubic-bezier(...)\"\r\n *\r\n *   Both temporal (\"fast\") and semantic (\"microinteraction\") keys\r\n *   resolve through the same durationCss object.\r\n */\r\nexport const transition = (\r\n  prop: string = \"all\",\r\n  durationKey: keyof typeof durationCss = \"base\",\r\n  easingKey: keyof typeof easing = \"out\"\r\n): string =>\r\n  `${prop} ${durationCss[durationKey] ?? durationCss.base} ${easing[easingKey] ?? easing.out}`;\r\n\r\nconst motion = { duration, durationCss, easing, ms, transition };\r\nexport default motion;\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMA,QAAQ,GAAG;EACtB;EACAC,IAAI,EAAE,EAAE;EAAI;EACZC,IAAI,EAAE,GAAG;EAAG;EACZC,IAAI,EAAE,GAAG;EAAG;;EAEZ;EACAC,gBAAgB,EAAE,EAAE;EAAI;EACxBC,WAAW,EAAO,GAAG;EAAG;EACxBC,cAAc,EAAI,GAAG,CAAG;AAC1B,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzB;EACAN,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE,OAAO;EACbC,IAAI,EAAE,OAAO;EAEb;EACAC,gBAAgB,EAAE,MAAM;EACxBC,WAAW,EAAO,OAAO;EACzBC,cAAc,EAAI;AACpB,CAAC;AAED,OAAO,IAAME,MAAM,GAAG;EACpBC,GAAG,EAAG,gCAAgC;EACtC,MAAM,4BAA4B;EAClCC,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,EAAE,GAAG,SAALA,EAAEA,CAAIC,CAAkB;EAAA,UAAAC,MAAA,CAAgBC,MAAM,CAACF,CAAC,CAAC,IAAI,CAAC;AAAA,CAAI;;AAEvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAA;EAAA,IAAAC,qBAAA,EAAAC,iBAAA;EAAA,IACrBC,IAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,IACpBG,WAAqC,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,MAAM;EAAA,IAC9CI,SAA8B,GAAAJ,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,UAAAN,MAAA,CAEnCK,IAAI,OAAAL,MAAA,EAAAG,qBAAA,GAAIT,WAAW,CAACe,WAAW,CAAC,cAAAN,qBAAA,cAAAA,qBAAA,GAAIT,WAAW,CAACL,IAAI,OAAAW,MAAA,EAAAI,iBAAA,GAAIT,MAAM,CAACe,SAAS,CAAC,cAAAN,iBAAA,cAAAA,iBAAA,GAAIT,MAAM,CAACC,GAAG;AAAA,CAAE;AAE9F,IAAMe,MAAM,GAAG;EAAExB,QAAQ,EAARA,QAAQ;EAAEO,WAAW,EAAXA,WAAW;EAAEC,MAAM,EAANA,MAAM;EAAEG,EAAE,EAAFA,EAAE;EAAEI,UAAU,EAAVA;AAAW,CAAC;AAChE,eAAeS,MAAM","ignoreList":[]}

package/dist/esm/v2/tokens/radius.js

@@ -0,0 +1,22 @@
+/**
+ * Border-radius tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.4.
+ *
+ * Values are integers (pixels). For perfect circles / pills on
+ * square containers, use `full` (9999) which collapses correctly
+ * regardless of container size.
+ */
+export var radius = {
+  none: 0,
+  sm: 6,
+  // chips, badges, sort indicators
+  md: 8,
+  // buttons, inputs (default)
+  lg: 12,
+  // cards, datagrid
+  xl: 16,
+  // large modals
+  full: 9999 // pills, status chips, avatars
+};
+export default radius;
+//# sourceMappingURL=radius.js.map

package/dist/esm/v2/tokens/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.js","names":["radius","none","sm","md","lg","xl","full"],"sources":["../../../../src/lib/v2/tokens/radius.ts"],"sourcesContent":["/**\r\n * Border-radius tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.4.\r\n *\r\n * Values are integers (pixels). For perfect circles / pills on\r\n * square containers, use `full` (9999) which collapses correctly\r\n * regardless of container size.\r\n */\r\nexport const radius = {\r\n  none: 0,\r\n  sm:   6,    // chips, badges, sort indicators\r\n  md:   8,    // buttons, inputs (default)\r\n  lg:   12,   // cards, datagrid\r\n  xl:   16,   // large modals\r\n  full: 9999, // pills, status chips, avatars\r\n};\r\n\r\nexport default radius;\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,CAAC;EACPC,EAAE,EAAI,CAAC;EAAK;EACZC,EAAE,EAAI,CAAC;EAAK;EACZC,EAAE,EAAI,EAAE;EAAI;EACZC,EAAE,EAAI,EAAE;EAAI;EACZC,IAAI,EAAE,IAAI,CAAE;AACd,CAAC;AAED,eAAeN,MAAM","ignoreList":[]}

package/dist/esm/v2/tokens/shadows.js

@@ -0,0 +1,40 @@
+/**
+ * Shadow / elevation tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.5.
+ *
+ * All shadows are CSS strings — directly assignable to `boxShadow`
+ * in `sx`, `style`, or CSS custom properties.
+ *
+ * `focus` ships TWO variants:
+ *  - `focus`         uses `var(--accent)`, the runtime-themable
+ *                    custom property set by `<PortnetThemeProvider>`.
+ *  - `focusFallback` is a static rgba string for contexts where
+ *                    CSS custom properties aren't resolvable
+ *                    (server-rendered emails, raw inline style, etc.).
+ */
+export var shadows = {
+  xs: "0 1px 2px rgba(15,21,37,.04)",
+  sm: "0 1px 2px rgba(15,21,37,.04), 0 1px 3px rgba(15,21,37,.06)",
+  md: "0 2px 4px rgba(15,21,37,.04), 0 4px 12px rgba(15,21,37,.08)",
+  lg: "0 4px 8px rgba(15,21,37,.06), 0 12px 32px rgba(15,21,37,.12)",
+  focus: "0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)",
+  focusFallback: "0 0 0 3px rgba(35, 47, 102, 0.22)"
+};
+
+/**
+ * 25-slot MUI shadows array. Index 0 must be "none".
+ *  1–4   → xs   (subtle elevation: AppBar, switches)
+ *  5–8   → sm   (cards, paper)
+ *  9–16  → md   (menus, popovers, dropdowns)
+ * 17–24  → lg   (modals, drawers)
+ *
+ * Padding is intentional — MUI components reference indices
+ * semantically; we provide one canonical level per band.
+ */
+var _xs = shadows.xs;
+var _sm = shadows.sm;
+var _md = shadows.md;
+var _lg = shadows.lg;
+export var muiShadows = ["none", _xs, _xs, _xs, _xs, _sm, _sm, _sm, _sm, _md, _md, _md, _md, _md, _md, _md, _md, _lg, _lg, _lg, _lg, _lg, _lg, _lg, _lg];
+export default shadows;
+//# sourceMappingURL=shadows.js.map

package/dist/esm/v2/tokens/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.js","names":["shadows","xs","sm","md","lg","focus","focusFallback","_xs","_sm","_md","_lg","muiShadows"],"sources":["../../../../src/lib/v2/tokens/shadows.ts"],"sourcesContent":["/**\r\n * Shadow / elevation tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.5.\r\n *\r\n * All shadows are CSS strings — directly assignable to `boxShadow`\r\n * in `sx`, `style`, or CSS custom properties.\r\n *\r\n * `focus` ships TWO variants:\r\n *  - `focus`         uses `var(--accent)`, the runtime-themable\r\n *                    custom property set by `<PortnetThemeProvider>`.\r\n *  - `focusFallback` is a static rgba string for contexts where\r\n *                    CSS custom properties aren't resolvable\r\n *                    (server-rendered emails, raw inline style, etc.).\r\n */\r\nexport const shadows = {\r\n  xs:            \"0 1px 2px rgba(15,21,37,.04)\",\r\n  sm:            \"0 1px 2px rgba(15,21,37,.04), 0 1px 3px rgba(15,21,37,.06)\",\r\n  md:            \"0 2px 4px rgba(15,21,37,.04), 0 4px 12px rgba(15,21,37,.08)\",\r\n  lg:            \"0 4px 8px rgba(15,21,37,.06), 0 12px 32px rgba(15,21,37,.12)\",\r\n  focus:         \"0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)\",\r\n  focusFallback: \"0 0 0 3px rgba(35, 47, 102, 0.22)\",\r\n};\r\n\r\n/**\r\n * 25-slot MUI shadows array. Index 0 must be \"none\".\r\n *  1–4   → xs   (subtle elevation: AppBar, switches)\r\n *  5–8   → sm   (cards, paper)\r\n *  9–16  → md   (menus, popovers, dropdowns)\r\n * 17–24  → lg   (modals, drawers)\r\n *\r\n * Padding is intentional — MUI components reference indices\r\n * semantically; we provide one canonical level per band.\r\n */\r\nconst _xs = shadows.xs;\r\nconst _sm = shadows.sm;\r\nconst _md = shadows.md;\r\nconst _lg = shadows.lg;\r\n\r\nexport const muiShadows = [\r\n  \"none\",\r\n  _xs, _xs, _xs, _xs,\r\n  _sm, _sm, _sm, _sm,\r\n  _md, _md, _md, _md, _md, _md, _md, _md,\r\n  _lg, _lg, _lg, _lg, _lg, _lg, _lg, _lg,\r\n];\r\n\r\nexport default shadows;\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,OAAO,GAAG;EACrBC,EAAE,EAAa,8BAA8B;EAC7CC,EAAE,EAAa,4DAA4D;EAC3EC,EAAE,EAAa,6DAA6D;EAC5EC,EAAE,EAAa,8DAA8D;EAC7EC,KAAK,EAAU,8DAA8D;EAC7EC,aAAa,EAAE;AACjB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,GAAG,GAAGP,OAAO,CAACC,EAAE;AACtB,IAAMO,GAAG,GAAGR,OAAO,CAACE,EAAE;AACtB,IAAMO,GAAG,GAAGT,OAAO,CAACG,EAAE;AACtB,IAAMO,GAAG,GAAGV,OAAO,CAACI,EAAE;AAEtB,OAAO,IAAMO,UAAU,GAAG,CACxB,MAAM,EACNJ,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAClBC,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAClBC,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EACtCC,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,CACvC;AAED,eAAeV,OAAO","ignoreList":[]}