@ukic/canary-react 3.0.0-canary.15 → 3.0.0-canary.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +23 -1
  2. package/dist/core/core.css +14 -8
  3. package/package.json +8 -8
package/README.md CHANGED
@@ -38,7 +38,7 @@ Add the following into the top level CSS file for your project.
38
38
 
39
39
  In order to be rendered consistently across browsers and in line with modern standards, each of the ICDS components uses styles from a global CSS file based on [Normalize.css](https://necolas.github.io/normalize.css/).
40
40
 
41
- If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
41
+ If you would like to import these styles in order to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
42
42
 
43
43
  ```css
44
44
  @import "@ukic/canary-react/dist/core/normalize.css";
@@ -58,6 +58,28 @@ The `@ukic/canary-react` package will need to be transformed before you can use
58
58
 
59
59
  Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
60
60
 
61
+ ## Typescript
62
+
63
+ If your project is making use of Typescript, you can import the custom types used in the ICDS component library. For details on the types implemented in each component, refer to the Props table on the Code page for each Component on the [Design System Guidance site](https://design.sis.gov.uk/components/select/code)
64
+
65
+ Types can be imported from the @ukic/canary-web-components package as per the below example.
66
+
67
+ > [!NOTE]
68
+ > You do not have to install this package into your project, it is already installed as a dependency of @ukic/canary-react.
69
+
70
+ ```ts
71
+ import { IcPaginationBarOptions } from '@ukic/canary-web-components';
72
+
73
+ let paginationConfig: IcPaginationBarOptions = {
74
+ itemsPerPageOptions: [
75
+ { label: "5", value: "5" },
76
+ { label: "10", value: "10" },
77
+ ],
78
+ showItemsPerPageControl: true,
79
+ selectedItemsPerPage: 5,
80
+ }
81
+ ```
82
+
61
83
  ## Security
62
84
 
63
85
  If you've found a vulnerability, we want to know so that we can fix it. [Our security policy](https://github.com/mi6/ic-ui-kit/blob/main/SECURITY.md) tells you how to do this.
package/dist/core/core.css CHANGED
@@ -190,7 +190,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
190
190
  );--ic-button-secondary-text:var(--ic-color-text-action-light);--ic-button-secondary-text-monochrome:var(--ic-color-text-primary);--ic-button-secondary-text-active:var(--ic-color-text-action-light);--ic-button-secondary-text-hover-active:var(
191
191
  --ic-color-text-action-hover-light
192
192
  );--ic-button-secondary-text-pressed-active:var(
193
- --ic-color-text-action-pressed
193
+ --ic-color-text-action-pressed-light
194
194
  );--ic-button-secondary-text-disabled:var(--ic-color-text-disabled-mid);--ic-button-secondary-text-disabled-monochrome:var(
195
195
  --ic-color-text-disabled-mid
196
196
  );--ic-button-secondary-text-hover-monochrome:var(
@@ -397,6 +397,8 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
397
397
  --ic-atoms-input-select-content-text-cursor
398
398
  );--ic-skeleton-background:var(--ic-state-layer-neutral-light);--ic-skeleton-background-secondary:var(--ic-state-layer-neutral-default);--ic-skip-link-background:var(--ic-color-background-primary);--ic-status-tag-text:var(--ic-color-text-inverted);--ic-status-tag-text-inverted:var(--ic-color-text-primary-light);--ic-status-tag-success:var(--ic-status-success-default);--ic-status-tag-outlined-background-success:var(--ic-status-success-light);--ic-status-tag-outlined-success:var(--ic-status-success-default);--ic-status-tag-error:var(--ic-status-error-default);--ic-status-tag-outlined-background-error:var(--ic-status-error-light);--ic-status-tag-outlined-error:var(--ic-status-error-default);--ic-status-tag-warning:var(--ic-status-warning-contrast);--ic-status-tag-outlined-background-warning:var(--ic-status-warning-light);--ic-status-tag-outlined-warning:var(--ic-status-warning-dark);--ic-status-tag-neutral:var(--ic-status-unknown-mid);--ic-status-tag-outlined-background-neutral:var(
399
399
  --ic-status-unknown-outlined
400
+ );--ic-status-tag-outlined-background-neutral-contrast:var(
401
+ --ic-status-unknown-outlined
400
402
  );--ic-status-tag-outlined-neutral:var(--ic-status-unknown-mid);--ic-status-tag-filled-warning-text:var(--ic-status-tag-text-inverted);--ic-step-title:var(--ic-color-text-primary);--ic-step-title-current:var(--ic-status-info-default);--ic-step-title-success:var(--ic-status-success-default);--ic-step-title-active:var(--ic-color-text-primary);--ic-step-title-disabled:var(--ic-color-text-disabled-mid);--ic-step-title-status-text-current:var(--ic-color-text-primary);--ic-step-title-status-text-inactive:var(--ic-color-text-secondary);--ic-step-title-status-text-disabled:var(--ic-color-text-disabled-mid);--ic-stepper-connector-success:var(--ic-status-success-default);--ic-stepper-connector-current-status:var(--ic-status-info-default);--ic-stepper-connector-remaining-status:var(
401
403
  --ic-color-border-neutral-hover-light
402
404
  );--ic-stepper-connector-disabled:var(--ic-color-border-neutral-disabled);--ic-step-number-background-active:var(--ic-status-info-default);--ic-step-number-background-success:var(--ic-status-success-default);--ic-step-number-text-current:var(--ic-color-text-inverted);--ic-step-number-text-inactive:var(--ic-color-text-primary);--ic-step-number-text-disabled:var(--ic-color-text-disabled-mid);--ic-step-number-icon-success:var(--ic-color-icon-brand);--ic-step-number-inactive:var(--ic-color-background-primary);--ic-step-number-disabled:var(--ic-color-text-disabled-mid);--ic-step-number-inactive-outline:var(
@@ -438,11 +440,11 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
438
440
  );--ic-toggle-button-unselected-border-pressed:var(
439
441
  --ic-color-border-action-pressed
440
442
  );--ic-toggle-button-unselected-text-pressed:var(
441
- --ic-color-text-action-pressed
443
+ --ic-color-text-action-pressed-light
442
444
  );--ic-toggle-button-unselected-icon-pressed:var(
443
445
  --ic-color-icon-action-pressed
444
446
  );--ic-toggle-button-unselected-background-pressed:var(
445
- --ic-action-default-bg-active
447
+ --ic-action-default-bg-pressed
446
448
  );--ic-toggle-button-loading-bar:var(--ic-color-icon-brand);--ic-toggle-button-unselected-text-disabled:var(
447
449
  --ic-color-text-disabled-mid
448
450
  );--ic-toggle-button-unselected-icon-disabled:var(
@@ -913,6 +915,8 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
913
915
  --ic-status-warning-dark-dm
914
916
  );--ic-status-tag-outlined-warning:var(--ic-status-warning-outlined);--ic-status-tag-neutral:var(--ic-status-unknown-contrast);--ic-status-tag-outlined-background-neutral:var(
915
917
  --ic-status-unknown-dark-dm
918
+ );--ic-status-tag-outlined-background-neutral-contrast:var(
919
+ --ic-status-unknown-contrast-dm
916
920
  );--ic-status-tag-outlined-neutral:var(--ic-status-unknown-default);--ic-status-tag-filled-warning-text:var(--ic-status-tag-text);--ic-step-title:var(--ic-color-text-primary-dark);--ic-step-title-current:var(--ic-status-info-contrast);--ic-step-title-success:var(--ic-status-success-contrast);--ic-step-title-active:var(--ic-color-text-primary-dark);--ic-step-title-disabled:var(--ic-color-text-disabled-dark);--ic-step-title-status-text-current:var(--ic-color-text-primary-dark);--ic-step-title-status-text-inactive:var(--ic-color-text-secondary-dark);--ic-step-title-status-text-disabled:var(--ic-color-text-disabled-dark);--ic-stepper-connector-success:var(--ic-status-success-contrast);--ic-stepper-connector-current-status:var(--ic-status-info-contrast);--ic-stepper-connector-remaining-status:var(
917
921
  --ic-color-border-neutral-pressed-default
918
922
  );--ic-stepper-connector-disabled:var(--ic-color-border-neutral-disabled);--ic-step-number-background-active:var(--ic-status-info-contrast);--ic-step-number-background-success:var(--ic-status-success-contrast);--ic-step-number-text-current:var(--ic-color-text-primary-light);--ic-step-number-text-inactive:var(--ic-color-text-primary-dark);--ic-step-number-text-disabled:var(--ic-color-text-disabled-dark);--ic-step-number-icon-success:var(--ic-color-icon-neutral);--ic-step-number-inactive:var(--ic-color-background-neutral);--ic-step-number-disabled:var(--ic-color-text-disabled-dark);--ic-step-number-inactive-outline:var(--ic-color-border-neutral-grey-dark);--ic-step-number-current-outer-fill:var(
@@ -980,7 +984,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
980
984
  );--ic-toggle-button-unselected-icon-pressed:var(
981
985
  --ic-color-icon-action-pressed-dark
982
986
  );--ic-toggle-button-unselected-background-pressed:var(
983
- --ic-action-default-bg-active
987
+ --ic-action-default-bg-pressed
984
988
  );--ic-toggle-button-loading-bar:var(--ic-color-icon-neutral);--ic-toggle-button-unselected-text-disabled:var(
985
989
  --ic-color-text-disabled-dark
986
990
  );--ic-toggle-button-unselected-icon-disabled:var(
@@ -1391,7 +1395,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
1391
1395
  --ic-atoms-input-field-label-subtitle-disabled
1392
1396
  );--ic-select-input-field-text-cursor:var(
1393
1397
  --ic-atoms-input-select-content-text-cursor
1394
- );--ic-skeleton-background:var(--ic-state-layer-neutral-dark);--ic-skeleton-background-secondary:var(--ic-state-layer-neutral-darker);--ic-skip-link-background:var(--ic-color-background-primary);--ic-status-tag-text:var(--ic-color-text-primary-light);--ic-status-tag-text-inverted:var(--ic-color-text-inverted);--ic-status-tag-success:var(--ic-status-success-contrast);--ic-status-tag-outlined-background-success:var(--ic-status-success-dark-dm);--ic-status-tag-outlined-success:var(--ic-status-success-contrast);--ic-status-tag-error:var(--ic-status-error-contrast);--ic-status-tag-outlined-background-error:var(--ic-status-error-dark-dm);--ic-status-tag-outlined-error:var(--ic-status-error-outlined);--ic-status-tag-warning:var(--ic-status-warning-contrast);--ic-status-tag-outlined-background-warning:var(--ic-status-warning-dark-dm);--ic-status-tag-outlined-warning:var(--ic-status-warning-outlined);--ic-status-tag-neutral:var(--ic-status-unknown-contrast);--ic-status-tag-outlined-background-neutral:var(--ic-status-unknown-dark-dm);--ic-status-tag-outlined-neutral:var(--ic-status-unknown-default);--ic-status-tag-filled-warning-text:var(--ic-status-tag-text);--ic-step-title:var(--ic-color-text-primary-dark);--ic-step-title-current:var(--ic-status-info-contrast);--ic-step-title-success:var(--ic-status-success-contrast);--ic-step-title-active:var(--ic-color-text-primary-dark);--ic-step-title-disabled:var(--ic-color-text-disabled-dark);--ic-step-title-status-text-current:var(--ic-color-text-primary-dark);--ic-step-title-status-text-inactive:var(--ic-color-text-secondary-dark);--ic-step-title-status-text-disabled:var(--ic-color-text-disabled-dark);--ic-stepper-connector-success:var(--ic-status-success-contrast);--ic-stepper-connector-current-status:var(--ic-status-info-contrast);--ic-stepper-connector-remaining-status:var(
1398
+ );--ic-skeleton-background:var(--ic-state-layer-neutral-dark);--ic-skeleton-background-secondary:var(--ic-state-layer-neutral-darker);--ic-skip-link-background:var(--ic-color-background-primary);--ic-status-tag-text:var(--ic-color-text-primary-light);--ic-status-tag-text-inverted:var(--ic-color-text-inverted);--ic-status-tag-success:var(--ic-status-success-contrast);--ic-status-tag-outlined-background-success:var(--ic-status-success-dark-dm);--ic-status-tag-outlined-success:var(--ic-status-success-contrast);--ic-status-tag-error:var(--ic-status-error-contrast);--ic-status-tag-outlined-background-error:var(--ic-status-error-dark-dm);--ic-status-tag-outlined-error:var(--ic-status-error-outlined);--ic-status-tag-warning:var(--ic-status-warning-contrast);--ic-status-tag-outlined-background-warning:var(--ic-status-warning-dark-dm);--ic-status-tag-outlined-warning:var(--ic-status-warning-outlined);--ic-status-tag-neutral:var(--ic-status-unknown-contrast);--ic-status-tag-outlined-background-neutral:var(--ic-status-unknown-dark-dm);--ic-status-tag-outlined-background-neutral-contrast:var(
1399
+ --ic-status-unknown-contrast-dm
1400
+ );--ic-status-tag-outlined-neutral:var(--ic-status-unknown-default);--ic-status-tag-filled-warning-text:var(--ic-status-tag-text);--ic-step-title:var(--ic-color-text-primary-dark);--ic-step-title-current:var(--ic-status-info-contrast);--ic-step-title-success:var(--ic-status-success-contrast);--ic-step-title-active:var(--ic-color-text-primary-dark);--ic-step-title-disabled:var(--ic-color-text-disabled-dark);--ic-step-title-status-text-current:var(--ic-color-text-primary-dark);--ic-step-title-status-text-inactive:var(--ic-color-text-secondary-dark);--ic-step-title-status-text-disabled:var(--ic-color-text-disabled-dark);--ic-stepper-connector-success:var(--ic-status-success-contrast);--ic-stepper-connector-current-status:var(--ic-status-info-contrast);--ic-stepper-connector-remaining-status:var(
1395
1401
  --ic-color-border-neutral-pressed-default
1396
1402
  );--ic-stepper-connector-disabled:var(--ic-color-border-neutral-disabled);--ic-step-number-background-active:var(--ic-status-info-contrast);--ic-step-number-background-success:var(--ic-status-success-contrast);--ic-step-number-text-current:var(--ic-color-text-primary-light);--ic-step-number-text-inactive:var(--ic-color-text-primary-dark);--ic-step-number-text-disabled:var(--ic-color-text-disabled-dark);--ic-step-number-icon-success:var(--ic-color-icon-neutral);--ic-step-number-inactive:var(--ic-color-background-neutral);--ic-step-number-disabled:var(--ic-color-text-disabled-dark);--ic-step-number-inactive-outline:var(--ic-color-border-neutral-grey-dark);--ic-step-number-current-outer-fill:var(--ic-color-background-primary-dark);--ic-step-number-current-outline:var(--ic-status-info-contrast);--ic-step-indicator-status-current:var(--ic-status-info-contrast);--ic-step-indicator-text-current:var(--ic-status-info-contrast);--ic-step-indicator-status-remaining:var(
1397
1403
  --ic-color-border-neutral-pressed-default
@@ -1446,7 +1452,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
1446
1452
  );--ic-toggle-button-unselected-icon-pressed:var(
1447
1453
  --ic-color-icon-action-pressed-dark
1448
1454
  );--ic-toggle-button-unselected-background-pressed:var(
1449
- --ic-action-default-bg-active
1455
+ --ic-action-default-bg-pressed
1450
1456
  );--ic-toggle-button-loading-bar:var(--ic-color-icon-neutral);--ic-toggle-button-unselected-text-disabled:var(
1451
1457
  --ic-color-text-disabled-dark
1452
1458
  );--ic-toggle-button-unselected-icon-disabled:var(
@@ -1533,7 +1539,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
1533
1539
  );--ic-status-error-pressed:rgb(
1534
1540
  calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
1535
1541
  calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
1536
- );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-default-dm:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-light-dm:var(--ic-blue-100);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-dark-dm:var(--ic-blue-1700);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-info-contrast-dm:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-default-dm:var(--ic-purple-500);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-light-dm:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-dark-dm:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-anomalous-contrast-dm:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-default-dm:var(--ic-architectural-300);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-light-dm:var(--ic-architectural-100);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-dark-dm:var(--ic-architectural-850);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown-contrast-dm:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-20);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-40);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-mid:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action-light:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover-light:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed-light:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-400);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-850);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-600);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-disabled-selected:var(--ic-blue-1500);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-elevation-level-1:var(--ic-architectural-950);--ic-color-background-elevation-level-2:var(--ic-architectural-900);--ic-color-background-elevation-level-3:var(--ic-architectural-850);--ic-color-background-elevation-level-4:var(--ic-architectural-800);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-600);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-200);--ic-color-background-solid:var(--ic-architectural-white);--ic-color-background-solid-disabled:var(--ic-architectural-100);--ic-color-background-solid-hover:var(--ic-blue-50);--ic-color-background-solid-pressed:var(--ic-blue-100);--ic-color-background-solid-mono:var(--ic-architectural-black);--ic-color-background-solid-mono-disabled:var(--ic-architectural-100);--ic-color-background-solid-mono-hover:var(--ic-architectural-800);--ic-color-background-solid-mono-pressed:var(--ic-architectural-600);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-default-dark:var(--ic-architectural-500);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-200);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-300);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-mid:var(--ic-architectural-300);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-success-default:var(--ic-green-1400);--ic-color-border-success-default-dark:var(--ic-green-1000);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-800);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-700);--ic-color-border-warning-default:var(--ic-yellow-900);--ic-color-border-warning-default-dark:var(--ic-yellow-800);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-600);--ic-color-border-warning-pressed-light:var(--ic-yellow-1200);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-default:var(--ic-red-800);--ic-color-border-error-default-dark:var(--ic-red-900);--ic-color-border-error-hover-light:var(--ic-red-1000);--ic-color-border-error-hover-dark:var(--ic-red-700);--ic-color-border-error-pressed-light:var(--ic-red-1100);--ic-color-border-error-pressed-dark:var(--ic-red-600);--ic-color-border-action-default:var(--ic-blue-800);--ic-color-border-action-default-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-600);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-200);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-action-monochrome:var(--ic-architectural-40);--ic-action-monochrome-dark:var(--ic-architectural-950);--ic-action-monochrome-hover:var(--ic-architectural-200);--ic-action-monochrome-hover-dark:var(--ic-architectural-800);--ic-action-monochrome-pressed:var(--ic-architectural-300);--ic-action-monochrome-pressed-dark:var(--ic-architectural-700);--ic-brand-blue-primary:#1b3c79;--ic-brand-blue-primary-r:27;--ic-brand-blue-primary-g:60;--ic-brand-blue-primary-b:121;--ic-brand-blue-primary-a:1;--ic-brand-darken-20:var(--ic-state-layer-darken-20);--ic-brand-darken-30:var(--ic-state-layer-darken-30);--ic-brand-darken-40:var(--ic-state-layer-darken-40);--ic-brand-lighten-20:var(--ic-state-layer-lighten-20);--ic-brand-lighten-40:var(--ic-state-layer-lighten-40);--ic-brand-color-primary-r:var(--ic-brand-blue-primary-r);--ic-brand-color-primary-g:var(--ic-brand-blue-primary-g);--ic-brand-color-primary-b:var(--ic-brand-blue-primary-b);--ic-brand-color-primary-a:var(--ic-brand-blue-primary-a);--ic-brand-color-primary:rgb(
1542
+ );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-default-dm:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-light-dm:var(--ic-blue-100);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-dark-dm:var(--ic-blue-1700);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-info-contrast-dm:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-default-dm:var(--ic-purple-500);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-light-dm:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-dark-dm:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-anomalous-contrast-dm:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-default-dm:var(--ic-architectural-300);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-light-dm:var(--ic-architectural-100);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-dark-dm:var(--ic-architectural-850);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown-contrast-dm:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-20);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-40);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-mid:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action-light:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover-light:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed-light:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-400);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-850);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-100);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-disabled-selected:var(--ic-blue-1500);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-elevation-level-1:var(--ic-architectural-950);--ic-color-background-elevation-level-2:var(--ic-architectural-900);--ic-color-background-elevation-level-3:var(--ic-architectural-850);--ic-color-background-elevation-level-4:var(--ic-architectural-800);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-600);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-200);--ic-color-background-solid:var(--ic-architectural-white);--ic-color-background-solid-disabled:var(--ic-architectural-100);--ic-color-background-solid-hover:var(--ic-blue-50);--ic-color-background-solid-pressed:var(--ic-blue-100);--ic-color-background-solid-mono:var(--ic-architectural-black);--ic-color-background-solid-mono-disabled:var(--ic-architectural-100);--ic-color-background-solid-mono-hover:var(--ic-architectural-800);--ic-color-background-solid-mono-pressed:var(--ic-architectural-600);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-default-dark:var(--ic-architectural-500);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-200);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-300);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-mid:var(--ic-architectural-300);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-success-default:var(--ic-green-1400);--ic-color-border-success-default-dark:var(--ic-green-1000);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-800);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-700);--ic-color-border-warning-default:var(--ic-yellow-900);--ic-color-border-warning-default-dark:var(--ic-yellow-800);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-600);--ic-color-border-warning-pressed-light:var(--ic-yellow-1200);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-default:var(--ic-red-800);--ic-color-border-error-default-dark:var(--ic-red-900);--ic-color-border-error-hover-light:var(--ic-red-1000);--ic-color-border-error-hover-dark:var(--ic-red-700);--ic-color-border-error-pressed-light:var(--ic-red-1100);--ic-color-border-error-pressed-dark:var(--ic-red-600);--ic-color-border-action-default:var(--ic-blue-800);--ic-color-border-action-default-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-600);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-200);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-action-monochrome:var(--ic-architectural-40);--ic-action-monochrome-dark:var(--ic-architectural-950);--ic-action-monochrome-hover:var(--ic-architectural-200);--ic-action-monochrome-hover-dark:var(--ic-architectural-800);--ic-action-monochrome-pressed:var(--ic-architectural-300);--ic-action-monochrome-pressed-dark:var(--ic-architectural-700);--ic-brand-blue-primary:#1b3c79;--ic-brand-blue-primary-r:27;--ic-brand-blue-primary-g:60;--ic-brand-blue-primary-b:121;--ic-brand-blue-primary-a:1;--ic-brand-darken-20:var(--ic-state-layer-darken-20);--ic-brand-darken-30:var(--ic-state-layer-darken-30);--ic-brand-darken-40:var(--ic-state-layer-darken-40);--ic-brand-lighten-20:var(--ic-state-layer-lighten-20);--ic-brand-lighten-40:var(--ic-state-layer-lighten-40);--ic-brand-color-primary-r:var(--ic-brand-blue-primary-r);--ic-brand-color-primary-g:var(--ic-brand-blue-primary-g);--ic-brand-color-primary-b:var(--ic-brand-blue-primary-b);--ic-brand-color-primary-a:var(--ic-brand-blue-primary-a);--ic-brand-color-primary:rgb(
1537
1543
  var(--ic-brand-color-primary-r) var(--ic-brand-color-primary-g)
1538
1544
  var(--ic-brand-color-primary-b) / var(--ic-brand-color-primary-a)
1539
1545
  );--ic-brand-color-secondary:rgb(
@@ -1771,4 +1777,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
1771
1777
  inset 0 0 0 8px var(--ic-architectural-black);--ic-border-hc:var(--ic-space-1px) solid transparent;--ic-border-keyline-darken:1px solid var(--ic-color-keyline-darken);--ic-border-keyline-lighten:1px solid var(--ic-color-keyline-lighten)}:root{--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
1772
1778
  inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
1773
1779
  cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
1774
- cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}:root,ic-theme,.ic-theme-light{--ic-alert-height:calc(var(--ic-space-xs) + var(--ic-space-xxl))}@media (prefers-color-scheme: dark){:root{--ic-alert-height:calc(var(--ic-space-xxs) + var(--ic-space-xxl))}}.ic-theme-dark{--ic-alert-height:calc(var(--ic-space-xxs) + var(--ic-space-xxl))}
1780
+ cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "sideEffects": [
4
4
  "*.css"
5
5
  ],
6
- "version": "3.0.0-canary.15",
6
+ "version": "3.0.0-canary.17",
7
7
  "description": "React-wrapped web components compiled using StencilJS",
8
8
  "scripts": {
9
9
  "build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
@@ -38,9 +38,9 @@
38
38
  "email": "icds@gchq.gov.uk"
39
39
  },
40
40
  "dependencies": {
41
- "@ukic/canary-web-components": "^3.0.0-canary.15",
42
- "@ukic/react": "^3.0.0-alpha.15",
43
- "@ukic/web-components": "^3.0.0-alpha.15"
41
+ "@ukic/canary-web-components": "^3.0.0-canary.17",
42
+ "@ukic/react": "^3.2.0",
43
+ "@ukic/web-components": "^3.2.0"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@babel/core": "^7.16.0",
@@ -90,9 +90,9 @@
90
90
  "webpack": "^5.76.0"
91
91
  },
92
92
  "peerDependencies": {
93
- "@ukic/fonts": "^2.3.0",
94
- "react": "^16.7.0 || ^17.0.2 || ^18.2.0",
95
- "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0"
93
+ "@ukic/fonts": "^3.1.0",
94
+ "react": "^16.7.0 || ^17.0.2 || ^18.2.0 || ^19.0.0",
95
+ "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0 || ^19.0.0"
96
96
  },
97
97
  "jest": {
98
98
  "preset": "ts-jest",
@@ -104,5 +104,5 @@
104
104
  },
105
105
  "license": "MIT",
106
106
  "packageManager": "^npm@10.9.2",
107
- "gitHead": "0a55d7e265bdf3d5bbf46a26f34dbfb44e3d9670"
107
+ "gitHead": "e084fa80621797c35c5a59446ea6a3e97486a552"
108
108
  }