@ids-group-ltd/ids-design-system 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ids-group-ltd/ids-design-system",
+  "version": "0.1.0",
+  "description": "IDS Group Angular design system: components, tokens, themes",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/itband/ids-design-system.git"
+  },
+  "keywords": [
+    "angular",
+    "design-system",
+    "components",
+    "ui",
+    "ids-group"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./styles/*": "./styles/*",
+    "./themes/*": "./themes/*",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ids-group-ltd-ids-design-system.d.ts",
+      "default": "./fesm2022/ids-group-ltd-ids-design-system.mjs"
+    }
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ids-group-ltd-ids-design-system.mjs",
+  "typings": "types/ids-group-ltd-ids-design-system.d.ts",
+  "type": "module"
+}

package/styles/_dropdown-overlay.scss

@@ -0,0 +1,117 @@
+// Dropdown panel styles — GLOBAL because the panel is portaled via CDK
+// Overlay outside the host component's DOM tree, so emulated encapsulation
+// (and any `:host ::ng-deep` selectors) cannot reach it. The component sets
+// `panelClass: 'ds-dropdown-panel'` on the overlay config; this partial
+// declares the matching rules so the portaled panel renders styled.
+
+.ds-dropdown-panel {
+  .dropdown-panel {
+    // Fill the cdk-overlay-pane width (set from trigger.getBoundingClientRect()
+    // in dropdown.component.ts). Without `width: 100%` the panel is a flex
+    // child of the pane and shrinks to its own option content width.
+    width: 100%;
+    background: var(--surface-overlay);
+    border: var(--border-width-default) solid var(--border-default);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-popover);
+    padding: var(--space-1);
+    max-height: 320px;
+    overflow-y: auto;
+    z-index: var(--layer-popover);
+  }
+
+  .dropdown-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .optgroup {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .optgroup-label {
+    display: block;
+    padding: var(--space-2) var(--space-3) var(--space-1);
+    font: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wide);
+
+    // First group sits flush against the panel padding — no extra top space.
+    &.is-first {
+      padding-top: var(--space-1);
+    }
+  }
+
+  .optgroup-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-2) var(--space-2-5);
+    border: 0;
+    background: transparent;
+    font: var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);
+    color: var(--text-primary);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    text-align: left;
+
+    .option-icon {
+      color: var(--icon-default);
+      flex: 0 0 auto;
+    }
+
+    .option-label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .option-check {
+      color: var(--primary);
+      flex: 0 0 auto;
+    }
+
+    &:hover:not(.is-disabled),
+    &.is-active:not(.is-disabled) {
+      background: var(--surface-secondary);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--focus-ring);
+    }
+
+    &.is-selected {
+      background: var(--primary-subtle);
+      color: var(--primary-strong);
+
+      .option-icon { color: var(--primary-strong); }
+    }
+
+    &.is-disabled {
+      color: var(--text-disabled);
+      cursor: not-allowed;
+      opacity: var(--opacity-muted);
+    }
+  }
+}

package/styles/_fonts.scss

@@ -0,0 +1,59 @@
+// Self-hosted DS default fonts (latin subset). Consumers override --font-sans / --font-mono to swap.
+
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/mulish-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/mulish-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/mulish-latin-600-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/mulish-latin-700-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('./fonts/mulish-latin-800-normal.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
+}

package/styles/_icon-base.scss

@@ -0,0 +1,9 @@
+// Icon-base sizing — `.icon` class is used inside components to size <ds-icon> svg elements.
+// The actual <svg> is rendered by IconComponent; this class sets default size.
+.icon {
+  --_icon-size: var(--ds-icon-size, var(--icon-md));
+
+  width: var(--_icon-size);
+  height: var(--_icon-size);
+  flex-shrink: 0;
+}

package/styles/_layout-utils.scss

@@ -0,0 +1,14 @@
+// Layout utility classes — grid helpers from patterns.css §Grid helpers.
+// (Divider lives in _divider.scss — single canonical source.)
+
+.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
+.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
+.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
+
+@media (max-width: 1100px) {
+  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@media (max-width: 820px) {
+  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}

package/styles/_link.scss

@@ -0,0 +1,77 @@
+/* Global .link helper — pure CSS class (no Angular wrapper) so consumers
+   can apply it to inline anchors inside <p> text without disrupting line
+   flow. Modifiers: .quiet, .inline, .standalone, .xs, .sm, .lg. */
+
+.link {
+  /* Public --ds-link-* are read with fallbacks, never declared — consumer
+     overrides inherit in. Hover/active derive from the resolved color. */
+  --_link-color:        var(--ds-link-color,        var(--text-link));
+  --_link-color-hover:  var(--ds-link-color-hover,  color-mix(in srgb, var(--_link-color) 80%, black));
+  --_link-color-active: var(--ds-link-color-active, color-mix(in srgb, var(--_link-color) 65%, black));
+
+  color: var(--_link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--_link-color);
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
+
+  &:hover {
+    color: var(--_link-color-hover);
+    text-decoration-color: var(--_link-color-hover);
+  }
+
+  &:active {
+    color: var(--_link-color-active);
+    text-decoration-color: var(--_link-color-active);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+    border-radius: var(--radius-sm);
+    text-decoration-color: var(--_link-color);
+  }
+
+  &[aria-disabled="true"] {
+    color: var(--text-disabled);
+    text-decoration-color: var(--text-disabled);
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .icon {
+    color: currentColor;
+    flex-shrink: 0;
+  }
+
+  &.quiet {
+    color: var(--text-secondary);
+    /* Pull the underline down to match the muted text — the base rule sets
+       text-decoration-color to the link color, which would leave a bright
+       underline under grey text at rest. */
+    text-decoration-color: var(--text-secondary);
+    font-weight: var(--font-weight-medium);
+
+    &:hover {
+      color: var(--text-primary);
+      text-decoration-color: var(--text-primary);
+    }
+  }
+
+  &.inline {
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  &.standalone {
+    font-weight: var(--font-weight-bold);
+  }
+
+  &.xs { font-size: var(--font-size-xs); }
+  &.sm { font-size: var(--font-size-s); }
+  &.lg { font-size: var(--font-size-l); }
+}

package/styles/_page-grid.scss

@@ -0,0 +1,68 @@
+// Page grid — four-tier responsive layout grid.
+//
+// One column-count per breakpoint (4 / 8 / 12 / 12), gutters and margins
+// scale with the viewport, content caps at --col-cap-content on the widest
+// tier and stays fluid below. Sub-regions inherit the page grid — never
+// invent a local grid. Sidenav lives OUTSIDE this grid (reserve its rail
+// first, start `.page-grid` in the remaining width).
+//
+//   Tier         | Range          | Cols | Gutter        | Margin        | Cap
+//   ------------ | -------------- | ---- | ------------- | ------------- | ----------------
+//   Mobile       | <= 640px       | 4    | --space-3 (12px)  | --space-4 (16px)  | fluid
+//   Tablet       | 641-1024px     | 8    | --space-4 (16px)  | --space-6 (24px)  | fluid
+//   Desktop      | 1025-1440px    | 12   | --space-5 (20px)  | --space-8 (32px)  | fluid
+//   Desktop wide | >= 1441px      | 12   | --space-6 (24px)  | --space-10 (40px) | --col-cap-content (1280px)
+//
+// Snap to columns, not pixels: 8+4 / 6+6 / 9+3 are canonical splits;
+// 7+5 is forbidden. Prose blocks cap at --col-cap-text (720px) regardless
+// of grid width.
+
+.page-grid {
+  display: grid;
+  gap: var(--page-gutter);
+  padding: 0 var(--page-margin);
+  max-width: var(--col-cap-content);
+  margin: 0 auto;
+
+  // Mobile (default, <= 640px) — 4 columns
+  --page-gutter: var(--page-gutter-mobile);
+  --page-margin: var(--page-margin-mobile);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+
+  // Tablet (641-1024px) — 8 columns
+  @media (min-width: 641px) {
+    --page-gutter: var(--page-gutter-tablet);
+    --page-margin: var(--page-margin-tablet);
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  // Desktop (1025-1440px) — 12 columns, fluid width
+  @media (min-width: 1025px) {
+    --page-gutter: var(--page-gutter-desktop);
+    --page-margin: var(--page-margin-desktop);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  // Desktop wide (>= 1441px) — 12 columns, container capped at --col-cap-content
+  @media (min-width: 1441px) {
+    --page-gutter: var(--page-gutter-wide);
+    --page-margin: var(--page-margin-wide);
+  }
+}
+
+// Column-span helpers. The 12-col base covers every tier — at narrower tiers
+// (8 / 4 cols) a span larger than the active column-count wraps to its own
+// row, which is the intended fallback. Snap to canonical splits (8+4 / 6+6 /
+// 9+3 / 4+4+4) rather than ad-hoc widths.
+.col-span-1  { grid-column: span 1; }
+.col-span-2  { grid-column: span 2; }
+.col-span-3  { grid-column: span 3; }
+.col-span-4  { grid-column: span 4; }
+.col-span-5  { grid-column: span 5; }
+.col-span-6  { grid-column: span 6; }
+.col-span-7  { grid-column: span 7; }
+.col-span-8  { grid-column: span 8; }
+.col-span-9  { grid-column: span 9; }
+.col-span-10 { grid-column: span 10; }
+.col-span-11 { grid-column: span 11; }
+.col-span-12 { grid-column: span 12; }

package/styles/_reset.scss

@@ -0,0 +1,17 @@
+// Reset — ported from CLAUDE_DESIGN_DS/tokens.css §Base.
+
+*, *::before, *::after { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+  background: var(--surface-canvas);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+button, input, select, textarea { font-family: inherit; }
+
+/* Zero the browser's default heading margins (~0.83em) — they otherwise leak
+   into consumers and mangle spacing. Headings get their size from .t-* utils;
+   spacing is owned by the surrounding layout (gap / margin), not the element. */
+h1, h2, h3, h4, h5, h6 { margin: 0; }

package/styles/_scrollbar.scss

@@ -0,0 +1,17 @@
+// Scrollbar — ported verbatim from CLAUDE_DESIGN_DS/components-extras.css §Global scrollbar.
+// Brand-tinted neutral thumb applied globally.
+
+html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
+*::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: var(--radius-pill);
+  border: var(--space-0-5) solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
+*::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-active); background-clip: padding-box; }
+
+// Global text-selection — sourced from components-extras.css line 910.
+::selection { background: var(--select-bg, color-mix(in srgb, var(--primary) 22%, transparent)); color: var(--text-primary); }

package/styles/_skeleton-shimmer.scss

@@ -0,0 +1,32 @@
+// Global skeleton shimmer driver.
+//
+// All <ds-skeleton> instances on the page reveal the same moving slice by
+// reading a shared, viewport-anchored offset (--skeleton-shimmer-x). The
+// offset is animated ONCE on :root so every skeleton stays in lock-step with
+// every other — no per-element animation timers drifting against each other.
+//
+// @property registration is required so the browser can interpolate the
+// custom property continuously instead of treating it as a discrete switch
+// at 0%/100%. Chrome 85+, Edge 85+, Firefox 128+, Safari 16.4+.
+
+@property --skeleton-shimmer-x {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 100vw;
+}
+
+:root {
+  animation: ds-skeleton-shimmer-loop var(--duration-loop-slow, 1400ms) linear infinite;
+}
+
+@keyframes ds-skeleton-shimmer-loop {
+  0%   { --skeleton-shimmer-x:  100vw; }
+  100% { --skeleton-shimmer-x: -100vw; }
+}
+
+// Honour the user's reduced-motion preference — no shimmer travel.
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    animation: none;
+  }
+}

package/styles/_toast-overlay.scss

@@ -0,0 +1,6 @@
+// Toast overlay panel — GLOBAL (portaled via CDK Overlay, outside component DOM).
+// ToastService sets panelClass: 'ds-toast-panel'. CDK overlays stack by DOM
+// insertion order, so lift the toast wrapper above modals/drawers explicitly.
+.cdk-global-overlay-wrapper:has(> .ds-toast-panel) {
+  z-index: var(--layer-toast);
+}

package/styles/_tokens-charts.scss

@@ -0,0 +1,71 @@
+/* ============================================================
+   Boilerplate — Chart / dataviz tokens
+   ------------------------------------------------------------
+   Categorical: 8 hues, ordered by perceptual distance not
+   ramp position. First six are AA against both light and
+   dark surface-default; the last two are reserved for
+   "rest" / "other" buckets where contrast is less critical.
+
+   Sequential: single-hue ramp (blue) for ordinal data —
+   "low → high" magnitudes.
+
+   Divergent: red ↔ neutral ↔ green for signed data —
+   "bad ← zero → good". Used for Excess / Shortage matrix.
+   ============================================================ */
+
+:root {
+  /* CATEGORICAL (8) ----------------------------------------- */
+  --chart-cat-1: hsl(229, 100%, 59%);   /* blue (primary) */
+  --chart-cat-2: hsl(165,  72%, 38%);   /* teal */
+  --chart-cat-3: hsl( 24,  95%, 55%);   /* orange */
+  --chart-cat-4: hsl(330,  82%, 55%);   /* magenta */
+  --chart-cat-5: hsl(45,   95%, 50%);   /* amber */
+  --chart-cat-6: hsl(190,  85%, 45%);   /* cyan */
+  --chart-cat-7: hsl(280,  60%, 60%);   /* lavender */
+  --chart-cat-8: hsl(130,  45%, 50%);   /* moss */
+
+  /* SEQUENTIAL — single-hue, light → dark */
+  --chart-seq-1: var(--blue-100);
+  --chart-seq-2: var(--blue-200);
+  --chart-seq-3: var(--blue-300);
+  --chart-seq-4: var(--blue-500);
+  --chart-seq-5: var(--blue-700);
+  --chart-seq-6: var(--blue-900);
+
+  /* DIVERGENT — red ← neutral → green
+     Values taken verbatim from the source design prototype
+     (CLAUDE_DESIGN_DS/patterns.css) so the Excess/Shortage matrix
+     matches the reference one-for-one. Explicit HSL keeps the ramp
+     independent of palette retunes — re-skinning brand/red/green
+     should not shift the dataviz colour story. */
+  --chart-div--3: hsl(0 70% 40%);       /* large negative (worst) */
+  --chart-div--2: hsl(0 60% 58%);
+  --chart-div--1: hsl(0 50% 80%);
+  --chart-div-0:  hsl(225 8% 92%);      /* zero */
+  --chart-div-1:  hsl(140 35% 80%);
+  --chart-div-2:  hsl(140 45% 55%);
+  --chart-div-3:  hsl(140 55% 35%);     /* large positive (best) */
+
+  /* AXIS / GRID / LEGEND */
+  --chart-axis-line:    var(--neutral-300);
+  --chart-axis-label:   var(--text-tertiary);
+  --chart-axis-title:   var(--text-secondary);
+  --chart-grid-line:    var(--neutral-150);
+  --chart-grid-line-strong: var(--neutral-200);
+  --chart-tick-size:    4px;
+  --chart-axis-fs:      var(--font-size-2xs);
+
+  /* HIGHLIGHT / HOVER */
+  --chart-hover-bg:     hsla(225, 39%, 7%, .04);
+  --chart-cursor-line:  var(--neutral-400);
+  --chart-tooltip-bg:   var(--neutral-900);
+  --chart-tooltip-fg:   var(--neutral-0);
+  --chart-tooltip-border: var(--neutral-700);
+
+  /* DIMENSIONS */
+  --chart-bar-gap:      4px;
+  --chart-line-w:       2px;
+  --chart-line-w-bold:  3px;
+  --chart-dot-r:        4px;
+  --chart-dot-r-active: 6px;
+}