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

package/themes/default/_theme.scss

@@ -54,12 +54,12 @@
 
   /* Scrim — modal/drawer backdrop. Derived from inverted surface
      so dark-mode override flips automatically. */
-  --surface-scrim:     hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .55);
+  --surface-scrim:     hsl(var(--shadow-tint-h) var(--shadow-tint-s) var(--shadow-tint-l) / 55%);
 
   /* Visible-on-coloured-fill divider. The split-button right-hand chevron
      sits ON the brand fill, so a transparent white hairline reads correctly
      across any brand hue. Override per theme if the brand is too light. */
-  --btn-split-divider: hsla(0, 0%, 100%, .25);
+  --btn-split-divider: hsl(0deg 0% 100% / 25%);
 
   /* Visited link — derives from --primary-muted by default so it sympathetically
      shifts with the brand hue. Override (e.g. for financial dashboards that
@@ -81,13 +81,15 @@
   --text-muted:        var(--neutral-400);
   --text-disabled:     var(--neutral-400);
   --text-inverted:     var(--neutral-0);
+
   /* Text overlaid on arbitrary imagery (camera feeds, photos) — pairs a
      guaranteed-light colour with a contrast shadow. */
   --text-on-media:        var(--neutral-0);
-  --text-on-media-shadow: 0 1px 3px hsla(0, 0%, 0%, .7);
+  --text-on-media-shadow: 0 1px 3px hsl(0deg 0% 0% / 70%);
   --text-link:         var(--blue-700);
   --text-on-primary:     var(--neutral-0);
   --text-on-success:   var(--neutral-0);
+
   /* Warning fill is yellow (--yellow-400 #F4D43A) — white text on it is only
      ~1.5:1 (fails WCAG). On-warning text is the darkest neutral (~10:1). */
   --text-on-warning:   var(--neutral-900);
@@ -103,8 +105,8 @@
      theme-independent and lives in styles/_tokens.scss). Display + heading
      default to body sans; a brand can mix a serif/display family here without
      touching component code. */
-  --font-sans:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-sans:    "Mulish", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, sfmono-regular, menlo, monospace;
   --font-display: var(--font-sans);
   --font-heading: var(--font-sans);
 
@@ -146,12 +148,12 @@
   --secondary-s:       var(--primary-s);
   --secondary-l:       var(--primary-l);
 
-  --secondary:         hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
+  --secondary:         hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l));
   --secondary-hover:   color-mix(in srgb, var(--secondary) 88%, black);
   --secondary-pressed: color-mix(in srgb, var(--secondary) 76%, black);
-  --secondary-strong:  hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 11%));
-  --secondary-subtitle:  hsl(var(--secondary-h), 100%, 97%);
-  --secondary-muted:   hsl(var(--secondary-h), 95%, 94%);
+  --secondary-strong:  hsl(var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - 11%));
+  --secondary-subtitle:  hsl(var(--secondary-h) 100% 97%);
+  --secondary-muted:   hsl(var(--secondary-h) 95% 94%);
   --secondary-on:      var(--primary-on);
 
   /* Tertiary — third brand hue. Used by the tertiary button variant and
@@ -165,12 +167,12 @@
   --tertiary-s:       var(--primary-s);
   --tertiary-l:       var(--primary-l);
 
-  --tertiary:         hsl(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l));
+  --tertiary:         hsl(var(--tertiary-h) var(--tertiary-s) var(--tertiary-l));
   --tertiary-hover:   color-mix(in srgb, var(--tertiary) 88%, black);
   --tertiary-pressed: color-mix(in srgb, var(--tertiary) 76%, black);
-  --tertiary-strong:  hsl(var(--tertiary-h), var(--tertiary-s), calc(var(--tertiary-l) - 11%));
-  --tertiary-subtitle:  hsl(var(--tertiary-h), 100%, 97%);
-  --tertiary-muted:   hsl(var(--tertiary-h), 95%, 94%);
+  --tertiary-strong:  hsl(var(--tertiary-h) var(--tertiary-s) calc(var(--tertiary-l) - 11%));
+  --tertiary-subtitle:  hsl(var(--tertiary-h) 100% 97%);
+  --tertiary-muted:   hsl(var(--tertiary-h) 95% 94%);
   --tertiary-on:      var(--primary-on);
 
   /* Status roles.
@@ -212,17 +214,18 @@
      brand re-skin moves Confirmed with it. The other lifecycle
      stages are deliberately neutral/green/dark to keep semantic
      distance from brand. */
+
   /* Status pills — canonical (single system).
      Legacy classes `.badge--active` (single) and ad-hoc semantic
      pills are unified in the Badge component to consume these tokens. */
-  --status-planning-bg:   var(--neutral-150);
-  --status-planning-fg:   var(--neutral-700);
-  --status-confirmed-bg:  var(--primary-subtitle);
-  --status-confirmed-fg:  var(--primary-strong);
-  --status-active-bg:     var(--green-50);
-  --status-active-fg:     var(--green-700);
-  --status-completed-bg:  var(--neutral-900);
-  --status-completed-fg:  var(--neutral-0);
+  --status-planning-bg-color:   var(--neutral-150);
+  --status-planning-text-color:   var(--neutral-700);
+  --status-confirmed-bg-color:  var(--primary-subtitle);
+  --status-confirmed-text-color:  var(--primary-strong);
+  --status-active-bg-color:     var(--green-50);
+  --status-active-text-color:     var(--green-700);
+  --status-completed-bg-color:  var(--neutral-900);
+  --status-completed-text-color:  var(--neutral-0);
 
   /* Focus rings.
      Outer halos use hsla() composed from brand/danger HSL channels
@@ -237,22 +240,22 @@
 
   --focus-ring:
     0 0 0 2px var(--focus-ring-inner),
-    0 0 0 4px hsla(var(--focus-ring-outer-h), var(--focus-ring-outer-s), var(--focus-ring-outer-l), var(--focus-ring-outer-alpha));
+    0 0 0 4px hsl(var(--focus-ring-outer-h) var(--focus-ring-outer-s) var(--focus-ring-outer-l) / var(--focus-ring-outer-alpha));
   --focus-ring-inverted:
     0 0 0 2px var(--neutral-900),
     0 0 0 4px var(--blue-300);
   --focus-ring-error:
     0 0 0 2px var(--focus-ring-inner),
-    0 0 0 4px hsla(var(--error-h), var(--error-s), var(--error-l), 1);
+    0 0 0 4px hsl(var(--error-h) var(--error-s) var(--error-l) / 100%);
 
   /* Field focus — coloured halo only (no double-ring). Derived from
      brand HSL so it tracks rebrand. Alpha is a token so dark themes
      can boost it for legibility. */
   --focus-field-alpha: .22;
   --focus-field:
-    0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--focus-field-alpha));
+    0 0 0 3px hsl(var(--primary-h) var(--primary-s) var(--primary-l) / var(--focus-field-alpha));
   --focus-field-error:
-    0 0 0 3px hsla(var(--error-h), var(--error-s), var(--error-l), var(--focus-field-alpha));
+    0 0 0 3px hsl(var(--error-h) var(--error-s) var(--error-l) / var(--focus-field-alpha));
 }
 
 /* Brand-derived neutrals — opt-in family switch (ds-docs tweaks panel sets

package/types/ids-group-ltd-ids-design-system.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider, TemplateRef, ElementRef, OnDestroy } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef, ModelSignal, ElementRef, OnDestroy } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
+import { ControlValueAccessor } from '@angular/forms';
 
 declare const ICONS: {
     readonly search: "<circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3.5-3.5\" />";
@@ -335,10 +336,40 @@ declare class TabsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ds-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; }, ["tabs"], never, true, never>;
 }
 
+/**
+ * Shared `ControlValueAccessor` for DS form controls whose value is a signal
+ * `model()`. Bridges that model with Angular forms (reactive `formControl` /
+ * `formControlName` and template `ngModel`) in both directions, WITHOUT
+ * touching the existing `[(value)]` signal API — both keep working.
+ *
+ * A subclass must expose the `value` model and OR `formDisabled()` into its
+ * effective disabled state so `FormControl.disable()` actually reaches the
+ * control; it should also call `markTouched()` from a blur handler.
+ */
+declare abstract class DsControlValueAccessor<T> implements ControlValueAccessor {
+    /** The component's two-way value model. */
+    abstract readonly value: ModelSignal<T>;
+    /** Driven by the forms API via `setDisabledState`. */
+    protected readonly formDisabled: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    private synced;
+    private hasSynced;
+    constructor();
+    /** Call from a blur handler so the control reports `ng-touched`. */
+    protected markTouched(): void;
+    writeValue(value: T): void;
+    registerOnChange(fn: (value: T) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsControlValueAccessor<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DsControlValueAccessor<any>, never, never, {}, {}, never, never, true, never>;
+}
+
 type InputSize = 'sm' | 'md' | 'lg';
 type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
 
-declare class InputComponent {
+declare class InputComponent extends DsControlValueAccessor<string> {
     readonly value: _angular_core.ModelSignal<string>;
     readonly type: _angular_core.InputSignal<InputType>;
     readonly size: _angular_core.InputSignal<InputSize>;
@@ -383,6 +414,8 @@ declare class InputComponent {
     protected readonly hintId: _angular_core.Signal<string | null>;
     /** Only name via aria-label when there's no visible `<label for>`. */
     protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    /** Effective disabled — own `disabled` input OR the reactive-forms state. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
     protected readonly effectiveType: _angular_core.Signal<InputType>;
     protected togglePassword(): void;
@@ -414,7 +447,7 @@ declare class NumberStepperComponent {
 type TextareaSize = 'sm' | 'md' | 'lg';
 type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 
-declare class TextareaComponent {
+declare class TextareaComponent extends DsControlValueAccessor<string> {
     readonly value: _angular_core.ModelSignal<string>;
     readonly size: _angular_core.InputSignal<TextareaSize>;
     readonly label: _angular_core.InputSignal<string>;
@@ -435,6 +468,8 @@ declare class TextareaComponent {
     protected readonly uid: string;
     protected readonly hintId: _angular_core.Signal<string | null>;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    /** Effective disabled — own `disabled` input OR the reactive-forms state. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly wrapperClasses: _angular_core.Signal<string>;
     protected readonly autosizeMinHeight: _angular_core.Signal<string | null>;
     protected readonly autosizeMaxHeight: _angular_core.Signal<string | null>;
@@ -483,7 +518,7 @@ interface SelectOptionGroup {
 type SelectItem = SelectOption | SelectOptionGroup;
 declare function isSelectOptionGroup(item: SelectItem): item is SelectOptionGroup;
 
-declare class SelectComponent {
+declare class SelectComponent extends DsControlValueAccessor<string> {
     private readonly overlay;
     private readonly vcr;
     protected readonly preview: DsStaticPreview;
@@ -502,10 +537,12 @@ declare class SelectComponent {
     protected readonly uid: string;
     protected readonly labelId: string;
     protected readonly listboxId: string;
-    protected optionId(flatIdx: number): string;
+    protected optionId(flatIndex: number): string;
     /** Active option for `aria-activedescendant` (combobox keeps DOM focus). */
     protected readonly activeDescendant: _angular_core.Signal<string | null>;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    /** Effective disabled — own `disabled` input OR the reactive-forms state. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly trigger: _angular_core.Signal<ElementRef<HTMLButtonElement>>;
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<unknown>>;
     protected readonly panelContentTpl: _angular_core.Signal<TemplateRef<unknown>>;
@@ -1059,14 +1096,18 @@ declare class AccordionItemComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "ds-accordion-item", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["[badge]", "*"], true, never>;
 }
 
+/** Where the step caption sits relative to its node: stacked beneath it
+ *  (`bottom`, full-width wizard) or beside it (`inline`, compact header row). */
+type StepperLabelPosition = 'bottom' | 'inline';
 declare class StepperComponent {
     readonly steps: _angular_core.InputSignal<readonly string[]>;
     readonly current: _angular_core.InputSignal<number>;
+    readonly labelPosition: _angular_core.InputSignal<StepperLabelPosition>;
     protected stepState(i: number): 'completed' | 'current' | 'upcoming';
     protected nodeClass(i: number): string;
-    protected barClass(i: number): string;
+    protected connectorClass(i: number): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "ds-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "ds-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
@@ -1217,6 +1258,7 @@ declare class DrawerComponent {
     protected readonly classes: _angular_core.Signal<"drawer lg" | "drawer">;
     constructor();
     protected onClose(): void;
+    protected onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "ds-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["[drawer-body]", "[drawer-footer]"], true, never>;
 }
@@ -1285,6 +1327,7 @@ declare class PageFooterComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageFooterComponent, "ds-page-footer", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[brand]", "[nav]", "[actions]", "*"], true, never>;
 }
 
+type ComboboxSize = 'sm' | 'md' | 'lg';
 interface ComboboxOption<T = unknown> {
     readonly value: T;
     readonly label: string;
@@ -1296,6 +1339,7 @@ declare class ComboboxComponent<T = unknown> {
     readonly options: _angular_core.InputSignal<readonly ComboboxOption<T>[]>;
     readonly value: _angular_core.ModelSignal<T | readonly T[] | null>;
     readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<ComboboxSize>;
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Accessible name for the combobox input. */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
@@ -1325,7 +1369,7 @@ declare class ComboboxComponent<T = unknown> {
     protected onPick(option: ComboboxOption<T>): void;
     protected remove(target: T): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ds-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ds-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 type DividerVariant = 'default' | 'strong' | 'vertical' | 'label';
@@ -1395,4 +1439,4 @@ declare class SwitchComponent {
 }
 
 export { AccordionComponent, AccordionItemComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BannerComponent, BottomSheetComponent, BreadcrumbsComponent, BreadcrumbsService, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, ComboboxComponent, DS_CONFIG, DS_ICON_REGISTRY, DS_TOAST_POSITION, DS_TOAST_POSITION_DEFAULT, DatePickerComponent, DividerComponent, DrawerComponent, DropdownComponent, DropzoneComponent, DsOverlayCloseRef, DsStaticPreview, EmptyStateComponent, ICONS, IconButtonComponent, IconComponent, InputComponent, MenuComponent, MenuItemComponent, ModalCardComponent, ModalComponent, NumberStepperComponent, PageFooterComponent, PageHeaderComponent, PaginationComponent, PopoverComponent, ProgressComponent, RadioComponent, SearchComponent, SelectComponent, SidenavComponent, SidenavGroupComponent, SidenavItemComponent, SkeletonComponent, SpinnerComponent, StatComponent, StatusDotComponent, StepperComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TextareaComponent, ToastComponent, ToastRegionComponent, ToastService, TooltipDirective, TooltipPanelComponent, TopBarComponent, W3wComponent, isSelectOptionGroup, provideDsConfig, provideDsIcons };
-export type { AvatarSize, BadgeLifecycle, BadgeSemantic, BadgeVariant, BannerVariant, BreadcrumbItem, ButtonSize, ButtonType, ButtonVariant, CardElevation, CardPadding, ComboboxOption, DatePickerMode, DatePickerValue, DateValue, DividerVariant, DrawerSize, DropdownOption, DropdownSize, DropzoneFile, DropzoneFileState, DsConfig, DsIconRegistry, DsToastHorizontalPosition, DsToastPosition, DsToastVerticalPosition, EmptyStateVariant, IconButtonSize, IconButtonType, IconButtonVariant, IconName, InputSize, InputType, ModalSize, NumberStepperSize, PageFooterVariant, ProgressVariant, RangeValue, SelectItem, SelectOption, SelectOptionGroup, SelectSize, SidenavItemModel, SortChangeEvent, SortDir, SpinnerSize, StatusValue, TableColumn, TabsVariant, TagVariant, TextareaResize, TextareaSize, ToastAction, ToastEntry, ToastOptions, ToastRef, ToastVariant, TooltipPlacement };
+export type { AvatarSize, BadgeLifecycle, BadgeSemantic, BadgeVariant, BannerVariant, BreadcrumbItem, ButtonSize, ButtonType, ButtonVariant, CardElevation, CardPadding, ComboboxOption, ComboboxSize, DatePickerMode, DatePickerValue, DateValue, DividerVariant, DrawerSize, DropdownOption, DropdownSize, DropzoneFile, DropzoneFileState, DsConfig, DsIconRegistry, DsToastHorizontalPosition, DsToastPosition, DsToastVerticalPosition, EmptyStateVariant, IconButtonSize, IconButtonType, IconButtonVariant, IconName, InputSize, InputType, ModalSize, NumberStepperSize, PageFooterVariant, ProgressVariant, RangeValue, SelectItem, SelectOption, SelectOptionGroup, SelectSize, SidenavItemModel, SortChangeEvent, SortDir, SpinnerSize, StatusValue, StepperLabelPosition, TableColumn, TabsVariant, TagVariant, TextareaResize, TextareaSize, ToastAction, ToastEntry, ToastOptions, ToastRef, ToastVariant, TooltipPlacement };