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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ids-group-ltd/ids-design-system",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "IDS Group Angular design system: components, tokens, themes",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://bitbucket.org/itband/ids-design-system.git"
   },
+  "homepage": "https://ids-ds.proto.ids-group.co.uk/",
   "keywords": [
     "angular",
     "design-system",

package/styles/_dropdown-overlay.scss

@@ -1,117 +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);
-    }
-  }
-}
+// 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-subtitle);
+      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

@@ -1,59 +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');
-}
+// 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

@@ -1,9 +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;
-}
+// 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/_link.scss

@@ -1,77 +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); }
-}
+/* 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/_reset.scss

@@ -1,17 +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; }
+// 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

@@ -1,17 +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); }
+// 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/_toast-overlay.scss

@@ -1,6 +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);
-}
+// 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);
+}