@randstad-uca/design-system 1.0.60 → 1.0.62

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "main": "dist/index.js",
   "files": [
     "dist",

package/dist/randstad-design-system.css

@@ -1 +1 @@
-.button{align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;font-family:Graphik,sans-serif;font-weight:400;gap:4px;justify-content:center;padding:16px;transition:background-color .2s,color .2s,box-shadow .2s}.button-lg{font-size:18px;line-height:30px;min-width:48px}.button-md{font-size:14px;line-height:25px}.button-primary{background-color:var(--primary-color);color:var(--white)}.button-primary.hover{background-color:var(--primary-button-hover)}.button-primary.active{background-color:var(--primary-button-active)}.button-primary.focus-visible{background-color:var(--primary-button-focus)}.button-primary.disabled{background-color:var(--secondary-color-20);color:var(--secondary-color-60)}.button-secondary{background:none;border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.hover{border:1px solid var(#175197);color:var(#175197)}.button-secondary.active{border:1px solid var(--secondary-color-80);color:var(--secondary-color-80)}.button-secondary.focus-visible{border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.disabled{border:1px solid var(--secondary-color-60);color:var(--secondary-color-60)}.button-tertiary{background:none;border:none;color:var(--primary-color)}.button-tertiary.hover{background:#2175d90d}.button-tertiary.active{background-color:#2175d91a}.button-tertiary.focus-visible{border:1px solid var(--primary-color)}.button-tertiary.disabled{color:#6f758d}.button-icon-left>.icon,.button-icon-right>.icon{display:inline-block;height:1rem;width:1rem}.button-icon-left>.icon{margin-right:.5rem}.button-icon-right>.icon{margin-left:.5rem}.button-round{align-items:center;background-color:var(--white);border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;width:48px}.button-round img.button-icon{height:24px;-o-object-fit:contain;object-fit:contain;width:24px}.button randstad-icon,.button.button-primary randstad-icon{color:var(--white)}.button.button-secondary randstad-icon,.button.button-tertiary randstad-icon{color:var(--primary-color)}.loader{align-items:center;display:flex;gap:6px;justify-content:center}.dot{animation:growAndFade 1.2s ease-in-out infinite;border-radius:50%;display:inline-block;height:10px;width:10px}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes growAndFade{0%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.4)}to{opacity:.3;transform:scale(.9)}}.button-primary.loader .dot,.button-secondary.loader .dot{background-color:var(--white)}.button-secondary.loader{background-color:var(--primary-color);border:none;color:var(--white)}:root{--primary-color:#2175d9;--primary-color-80:#4e90e1;--primary-color-60:#7aace8;--primary-color-40:#a6c8f0;--primary-color-20:#d3e3f7;--primary-color-10:#2175d91a;--primary-color-5:#2175d90d;--secondary-color:#0f1941;--secondary-color-80:#404767;--secondary-color-60:#6f758d;--secondary-color-40:#9fa3b3;--secondary-color-20:#cfd1d9;--secondary-color-10:#e7e8ec;--brand-randstad-blue:#2175d9;--randstad-blue-10:#e8f1fb;--randstad-blue-40:#a6c8f0;--brand-dark-blue:#0f1941;--brand-light-blue:#00d7ff;--brand-off-white:#f7f5f0;--ui-negative:#e00f0f;--ui-negative-5:#fdf3f3;--ui-negative-pink-shadow:#e00f0f1a;--ui-positive:#257156;--ui-positve-5:#f4f8f6;--ui-warning:#e9a204;--ui-warning-10:#fcf5e5;--ui-informative:#4e90e1;--ui-informative-10:#e8f1fb;--tertiary-shade:#dedcd8;--tertiary-tint:#f9f7f3;--gray-20:#d7d7d7;--gray-10:#f7f7f7;--white:#fff;--primary-button-hover:#175197;--primary-button-active:#124077;--primary-button-focus:#2175d9;--form-hover-shadow:#d1d3db;--randstad-dark-blue-40:#262626;--primary-light-blue:#00d7ff;--primary-light-blue-20:#00d7ff33}@font-face{font-family:Graphik;font-style:normal;font-weight:400;src:url(/src/assets/font/Graphik-Regular.woff2) format("woff2"),url(/src/assets/font/Graphik-Regular.woff) format("woff"),url(/src/assets/font/Graphik-Regular.eot) format("embedded-opentype")}
+:root{--primary-color:#2175d9;--primary-color-80:#4e90e1;--primary-color-60:#7aace8;--primary-color-40:#a6c8f0;--primary-color-20:#d3e3f7;--primary-color-10:#2175d91a;--primary-color-5:#2175d90d;--secondary-color:#0f1941;--secondary-color-80:#404767;--secondary-color-60:#6f758d;--secondary-color-40:#9fa3b3;--secondary-color-20:#cfd1d9;--secondary-color-10:#e7e8ec;--brand-randstad-blue:#2175d9;--randstad-blue-10:#e8f1fb;--randstad-blue-40:#a6c8f0;--brand-dark-blue:#0f1941;--brand-light-blue:#00d7ff;--brand-off-white:#f7f5f0;--ui-negative:#e00f0f;--ui-negative-5:#fdf3f3;--ui-negative-pink-shadow:#e00f0f1a;--ui-positive:#257156;--ui-positve-5:#f4f8f6;--ui-warning:#e9a204;--ui-warning-10:#fcf5e5;--ui-informative:#4e90e1;--ui-informative-10:#e8f1fb;--tertiary-shade:#dedcd8;--tertiary-tint:#f9f7f3;--gray-20:#d7d7d7;--gray-10:#f7f7f7;--white:#fff;--primary-button-hover:#175197;--primary-button-active:#124077;--primary-button-focus:#2175d9;--form-hover-shadow:#d1d3db;--randstad-dark-blue-40:#262626;--primary-light-blue:#00d7ff;--primary-light-blue-20:#00d7ff33}@font-face{font-family:Graphik;font-style:normal;font-weight:400;src:url(/src/assets/font/Graphik-Regular.woff2) format("woff2"),url(/src/assets/font/Graphik-Regular.woff) format("woff"),url(/src/assets/font/Graphik-Regular.eot) format("embedded-opentype")}.button{align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;font-family:Graphik,sans-serif;font-weight:400;gap:4px;justify-content:center;padding:16px;transition:background-color .2s,color .2s,box-shadow .2s}.button-lg{font-size:18px;line-height:30px;min-width:48px}.button-md{font-size:14px;line-height:25px}.button-primary{background-color:var(--primary-color);color:var(--white)}.button-primary.hover{background-color:var(--primary-button-hover)}.button-primary.active{background-color:var(--primary-button-active)}.button-primary.focus-visible{background-color:var(--primary-button-focus)}.button-primary.disabled{background-color:var(--secondary-color-20);color:var(--secondary-color-60)}.button-secondary{background:none;border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.hover{border:1px solid var(#175197);color:var(#175197)}.button-secondary.active{border:1px solid var(--secondary-color-80);color:var(--secondary-color-80)}.button-secondary.focus-visible{border:1px solid var(--primary-color);color:var(--primary-color)}.button-secondary.disabled{border:1px solid var(--secondary-color-60);color:var(--secondary-color-60)}.button-tertiary{background:none;border:none;color:var(--primary-color)}.button-tertiary.hover{background:#2175d90d}.button-tertiary.active{background-color:#2175d91a}.button-tertiary.focus-visible{border:1px solid var(--primary-color)}.button-tertiary.disabled{color:#6f758d}.button-icon-left>.icon,.button-icon-right>.icon{display:inline-block;height:1rem;width:1rem}.button-icon-left>.icon{margin-right:.5rem}.button-icon-right>.icon{margin-left:.5rem}.button-round{align-items:center;background-color:var(--white);border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;width:48px}.button-round img.button-icon{height:24px;-o-object-fit:contain;object-fit:contain;width:24px}.button randstad-icon,.button.button-primary randstad-icon{color:var(--white)}.button.button-secondary randstad-icon,.button.button-tertiary randstad-icon{color:var(--primary-color)}.loader{align-items:center;display:flex;gap:6px;justify-content:center}.dot{animation:growAndFade 1.2s ease-in-out infinite;border-radius:50%;display:inline-block;height:10px;width:10px}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes growAndFade{0%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.4)}to{opacity:.3;transform:scale(.9)}}.button-primary.loader .dot,.button-secondary.loader .dot{background-color:var(--white)}.button-secondary.loader{background-color:var(--primary-color);border:none;color:var(--white)}

package/dist/stories/Accordion.stories.d.ts

@@ -3,4 +3,4 @@ import '../components/Accordion';
 import '../components/AccordionList';
 declare const _default: Meta;
 export default _default;
-export declare const MobileList: StoryFn;
+export declare const Default: StoryFn;

package/dist/stories/Carousel.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryFn, Meta } from '@storybook/web-components';
+import '../components/Carousel';
+import '../components/CarouselCards';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const WithFewerCards: StoryFn;
+export declare const SingleCard: StoryFn;

package/dist/styles/colors.css

@@ -1,50 +1,49 @@
 :root {
-    --primary-color: #2175D9;
-    --primary-color-80: #4E90E1;
-    --primary-color-60: #7AACE8;
-    --primary-color-40: #A6C8F0;
-    --primary-color-20: #D3E3F7;
-    --primary-color-10: #2175D91A;
-    --primary-color-5: #2175D90D;
-
-    --secondary-color: #0F1941;
-    --secondary-color-80: #404767;
-    --secondary-color-60: #6F758D;
-    --secondary-color-40: #9FA3B3;
-    --secondary-color-20: #CFD1D9;
-    --secondary-color-10: #E7E8EC;
-
-    --brand-randstad-blue: #2175D9;
-    --randstad-blue-10: #E8F1FB;
-    --randstad-blue-40: #A6C8F0;
-    --brand-dark-blue: #0F1941;
-    --brand-light-blue: #00D7FF;
-    --brand-off-white: #F7F5F0;
-
-    --ui-negative: #E00F0F;
-    --ui-negative-5: #FDF3F3;
-    --ui-negative-pink-shadow: #E00F0F1A;
-    --ui-positive: #257156;
-    --ui-positve-5: #F4F8F6;
-    --ui-warning: #E9A204;
-    --ui-warning-10: #FCF5E5;
-    --ui-informative: #4E90E1;
-    --ui-informative-10: #E8F1FB;
-
-    --tertiary-shade: #DEDCD8;
-    --tertiary-tint: #F9F7F3;
-    --gray-20: #D7D7D7;
-    --gray-10: #F7F7F7;
-    --white: #FFFFFF;
-
-    --primary-button-hover: #175197;
-    --primary-button-active: #124077;
-    --primary-button-focus: #2175D9;
-
-    --form-hover-shadow: #D1D3DB;
-
-    --randstad-dark-blue-40: #262626;
-    --primary-light-blue: #00D7FF;
-    --primary-light-blue-20: #00D7FF33;
-
-  }
+  --primary-color: #2175D9;
+  --primary-color-80: #4E90E1;
+  --primary-color-60: #7AACE8;
+  --primary-color-40: #A6C8F0;
+  --primary-color-20: #D3E3F7;
+  --primary-color-10: #2175D91A;
+  --primary-color-5: #2175D90D;
+
+  --secondary-color: #0F1941;
+  --secondary-color-80: #404767;
+  --secondary-color-60: #6F758D;
+  --secondary-color-40: #9FA3B3;
+  --secondary-color-20: #CFD1D9;
+  --secondary-color-10: #E7E8EC;
+
+  --brand-randstad-blue: #2175D9;
+  --randstad-blue-10: #E8F1FB;
+  --randstad-blue-40: #A6C8F0;
+  --brand-dark-blue: #0F1941;
+  --brand-light-blue: #00D7FF;
+  --brand-off-white: #F7F5F0;
+
+  --ui-negative: #E00F0F;
+  --ui-negative-5: #FDF3F3;
+  --ui-negative-pink-shadow: #E00F0F1A;
+  --ui-positive: #257156;
+  --ui-positve-5: #F4F8F6;
+  --ui-warning: #E9A204;
+  --ui-warning-10: #FCF5E5;
+  --ui-informative: #4E90E1;
+  --ui-informative-10: #E8F1FB;
+
+  --tertiary-shade: #DEDCD8;
+  --tertiary-tint: #F9F7F3;
+  --gray-20: #D7D7D7;
+  --gray-10: #F7F7F7;
+  --white: #FFFFFF;
+
+  --primary-button-hover: #175197;
+  --primary-button-active: #124077;
+  --primary-button-focus: #2175D9;
+
+  --form-hover-shadow: #D1D3DB;
+
+  --randstad-dark-blue-40: #262626;
+  --primary-light-blue: #00D7FF;
+  --primary-light-blue-20: #00D7FF33;
+}

package/dist/styles/error.d.ts

@@ -1 +1,2 @@
-export declare const errorStyles: import("lit").CSSResult;
+import { CSSResult } from "lit";
+export declare const errorStyles: CSSResult;

package/dist/styles/error.ts

@@ -1,9 +1,9 @@
-import { css } from "lit";
+import { css, CSSResult } from "lit";
 import { bodyM } from "./fontStyles";
 
-export const errorStyles = css `
+export const errorStyles: CSSResult = css `
     :host([error]) .input-wrapper, .form.error .form-input  {
-        border: 1px solid var(--ui-negative, red) !important;
+        border: 1px solid var( --ui-negative, red ) !important;
     }
 
     :host([error]) .input-wrapper:hover, .form.error:hover .form-input:hover {
@@ -11,7 +11,7 @@ export const errorStyles = css `
     }
 
     :host([error]) .input-wrapper.active, .form.error.active .form-input.active {
-        border: 1px solid var(--ui-negative, red) !important;
+        border: 1px solid var( --ui-negative, red ) !important;
         box-shadow: none !important;
     }
 

package/dist/styles/fontStyles.d.ts

@@ -1,7 +1,8 @@
-export declare const bodyXS: import("lit").CSSResult;
-export declare const bodyS: import("lit").CSSResult;
-export declare const bodyM: import("lit").CSSResult;
-export declare const bodyL: import("lit").CSSResult;
-export declare const titleXXS: import("lit").CSSResult;
-export declare const titleXS: import("lit").CSSResult;
-export declare const titleS: import("lit").CSSResult;
+import { CSSResult } from 'lit';
+export declare const bodyXS: CSSResult;
+export declare const bodyS: CSSResult;
+export declare const bodyM: CSSResult;
+export declare const bodyL: CSSResult;
+export declare const titleXXS: CSSResult;
+export declare const titleXS: CSSResult;
+export declare const titleS: CSSResult;

package/dist/styles/fontStyles.ts

@@ -1,6 +1,6 @@
-import { css } from 'lit';
+import { css, CSSResult } from 'lit';
 
-export const bodyXS = css`
+export const bodyXS: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 12px;
@@ -8,7 +8,7 @@ export const bodyXS = css`
   letter-spacing: 0%;
 `;
 
-export const bodyS = css`
+export const bodyS: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -16,7 +16,7 @@ export const bodyS = css`
   letter-spacing: 0%;
 `;
 
-export const bodyM = css`
+export const bodyM: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 16px;
@@ -24,7 +24,7 @@ export const bodyM = css`
   letter-spacing: 0%;
 `;
 
-export const bodyL = css`
+export const bodyL: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
@@ -32,7 +32,7 @@ export const bodyL = css`
   letter-spacing: 0%;
 `;
 
-export const titleXXS = css`
+export const titleXXS: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
@@ -41,7 +41,7 @@ export const titleXXS = css`
   vertical-align: middle;
 `;
 
-export const titleXS = css`
+export const titleXS: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 20px;
@@ -50,7 +50,7 @@ export const titleXS = css`
   vertical-align: middle;
 `;
 
-export const titleS = css`
+export const titleS: CSSResult = css`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 26px;

package/dist/styles/globalStyles.ts

@@ -1,11 +1,11 @@
-const globalStyles = new CSSStyleSheet();
+const globalStyles: CSSStyleSheet = new CSSStyleSheet();
 
 globalStyles.replaceSync(`
   @font-face {
     font-family: 'Graphik';
     src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),
-         url('/src/assets/font/Graphik-Regular.woff') format('woff'),
-         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
+      url('/src/assets/font/Graphik-Regular.woff') format('woff'),
+      url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
     font-weight: normal;
     font-style: normal;
   }

package/dist/styles/mix.d.ts

@@ -1 +1,2 @@
-export declare const mixStyles: import("lit").CSSResult;
+import { CSSResult } from "lit";
+export declare const mixStyles: CSSResult;

package/dist/styles/mix.ts

@@ -1,12 +1,12 @@
 
-import { css } from "lit";
+import { css, CSSResult } from "lit";
 import { bodyL, bodyM, bodyXS } from "./fontStyles";
 
-export const mixStyles = css `
+export const mixStyles: CSSResult = css `
   :host {
     display: block;
     font-family: "Graphik", sans-serif;
-    color: var(--secondary-randstad-dark-blue, #0f1941);
+    color: var( --secondary-randstad-dark-blue, #0f1941 );
     width: 100%;
   }
 
@@ -16,7 +16,7 @@ export const mixStyles = css `
     align-items: baseline;
     flex-direction: row;
     gap: 4px;
-    color: var(--label-color, var(--secondary-color-80));
+    color: var( --label-color, var( --secondary-color-80 ) );
   }
 
   .input-container {
@@ -27,25 +27,25 @@ export const mixStyles = css `
 
   input::placeholder {
     ${ bodyL }
-    color: var(--secondary-color-40);
+    color: var( --secondary-color-40 );
   }
 
   .helper-description {
     ${ bodyM }
-    color: var(--secondary-color-40);
+    color: var( --secondary-color-40 );
     margin: 0;
   }
 
   .required {
-    color: var(--ui-negative);
+    color: var( --ui-negative );
   }
 
   .optional {
-    color: var(--secondary-color-60);
+    color: var( --secondary-color-60 );
     ${ bodyXS }
   }
 
   randstad-icon {
-    color: var(--primary-color);
+    color: var( --primary-color );
   }
 `;

package/dist/styles/progress-bar-upload.d.ts

@@ -1 +1,2 @@
-export declare const progressBarUploadStyles: import("lit").CSSResult;
+import { CSSResult } from 'lit';
+export declare const progressBarUploadStyles: CSSResult;

package/dist/styles/progress-bar-upload.ts

@@ -1,6 +1,6 @@
-import { css } from 'lit';
+import { css, CSSResult } from 'lit';
     
-export const progressBarUploadStyles = css`
+export const progressBarUploadStyles: CSSResult = css`
    .progress-bar-container {
         min-height: 23px;
         display: flex;
@@ -10,14 +10,14 @@ export const progressBarUploadStyles = css`
     .progress-bar {
         min-width: 80px;
         height: 8px;
-        background-color: var(--secondary-color-20);
+        background-color: var( --secondary-color-20 );
         border-radius: 999px;
         overflow: hidden;
     }
 
     .progress-bar-fill {
         height: 100%;
-        background-color: var(--primary-color);
+        background-color: var( --primary-color );
         transition: width 0.1s ease;
     }
 `;

package/dist/styles/scrollbar.d.ts

@@ -0,0 +1 @@
+export declare const scrollbarStyles: CSSStyleSheet;

package/dist/styles/scrollbar.ts

@@ -0,0 +1,25 @@
+import { css } from 'lit';
+
+export const scrollbarStyles: CSSStyleSheet = new CSSStyleSheet();
+
+scrollbarStyles.replaceSync( 
+    css`
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #E8E8E8;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: #7A7A7A;
+            border-radius: 100px;
+        }
+
+        ::-webkit-scrollbar-button {
+            display: none;
+        }
+    `.cssText
+);

package/dist/styles/tooltip.d.ts

@@ -1 +1,2 @@
-export declare const tooltipStyles: import("lit").CSSResult;
+import { CSSResult } from 'lit';
+export declare const tooltipStyles: CSSResult;

package/dist/styles/tooltip.ts

@@ -1,6 +1,6 @@
-import { css } from 'lit';
+import { css, CSSResult } from 'lit';
 
-export const tooltipStyles = css`
+export const tooltipStyles: CSSResult = css`
   .label-container {
     display: flex;
     align-items: center;
@@ -19,7 +19,7 @@ export const tooltipStyles = css`
     top: 160%;
     right: 0;
     
-    background-color: var(--tooltip-background, #0F1941);
+    background-color: var( --tooltip-background, #0F1941 );
     color: var(--tooltip-color, #fff);
 
     padding: 8px 12px;
@@ -46,7 +46,7 @@ export const tooltipStyles = css`
     height: 0;
     border-style: solid;
     border-width: 0 6px 6px 6px; 
-    border-color: transparent transparent var(--tooltip-background, #0F1941) transparent; 
+    border-color: transparent transparent var( --tooltip-background, #0F1941 ) transparent; 
   }
 
   .tooltip-wrapper:hover .tooltip {

package/dist/utils/file-format.d.ts

@@ -1,3 +1,6 @@
+export declare const IMAGE_TYPE_MAPPING: {
+    [key: string]: string;
+};
 export declare const FILE_TYPE_MAPPING: {
     [key: string]: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "main": "dist/index.js",
   "files": [
     "dist",

package/dist/styles/select.css

@@ -1,12 +0,0 @@
-
-.select-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    font-family: "Graphik", sans-serif;
-}
-
-.select {
-    font-family: "Graphik", sans-serif;
-}