@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/datepicker/Datepicker.spec.js

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Datepicker from './Datepicker.svelte';
+describe('m-datepicker component', () => {
+    const id = 'my-datepicker';
+    it('renders input with default size "m"', () => {
+        const { container } = render(Datepicker, {
+            props: { id },
+        });
+        const wrapper = container.querySelector('.mc-datepicker');
+        expect(wrapper).toBeTruthy();
+        expect(wrapper?.classList.contains('mc-text-input--m')).toBe(true);
+        const input = container.querySelector('input[type="date"]');
+        expect(input).toBeTruthy();
+        expect(input.id).toBe(id);
+    });
+    it('renders with custom size "s"', () => {
+        const { container } = render(Datepicker, {
+            props: { id, size: 's' },
+        });
+        const wrapper = container.querySelector('.mc-datepicker');
+        expect(wrapper?.classList.contains('mc-text-input--s')).toBe(true);
+        expect(wrapper?.classList.contains('mc-datepicker--s')).toBe(true);
+    });
+    it('renders with pre-filled value', () => {
+        const { container } = render(Datepicker, {
+            props: { id, value: '2025-10-15' },
+        });
+        const input = container.querySelector('input[type="date"]');
+        expect(input.value).toBe('2025-10-15');
+    });
+    it('updates the bound value on user input', async () => {
+        const { container } = render(Datepicker, {
+            props: { id, value: '2025-10-15' },
+        });
+        const input = container.querySelector('input[type="date"]');
+        await fireEvent.input(input, { target: { value: '2025-12-01' } });
+        expect(input.value).toBe('2025-12-01');
+    });
+    it('renders disabled and readonly states correctly', () => {
+        const { container } = render(Datepicker, {
+            props: { id, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+    });
+    it('applies invalid state with aria-invalid', () => {
+        const { container } = render(Datepicker, {
+            props: { id, isinvalid: true },
+        });
+        const input = container.querySelector('input');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        const wrapper = container.querySelector('.mc-datepicker');
+        expect(wrapper.classList.contains('is-invalid')).toBe(true);
+    });
+    it('shows clear button when isclearable is true and value is set', () => {
+        const { getByRole, getByText } = render(Datepicker, {
+            props: {
+                id,
+                value: '2025-10-10',
+                isclearable: true,
+                clearlabel: 'Clear date',
+            },
+        });
+        const clearButton = getByRole('button');
+        expect(clearButton).toBeTruthy();
+        expect(getByText('Clear date')).toBeTruthy();
+    });
+    it('clears value when clear button is clicked', async () => {
+        const { container, getByRole } = render(Datepicker, {
+            props: {
+                id,
+                value: '2025-10-10',
+                isclearable: true,
+            },
+        });
+        const input = container.querySelector('input');
+        expect(input.value).toBe('2025-10-10');
+        const button = getByRole('button');
+        await fireEvent.click(button);
+        expect(input.value).toBe('');
+    });
+    it('does not render clear button if value is not set', () => {
+        const { container } = render(Datepicker, {
+            props: {
+                id,
+                isclearable: true,
+                value: '',
+            },
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeNull();
+    });
+});

package/dist/components/datepicker/Datepicker.stories.d.ts

@@ -1,10 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
+export declare const WithValue: Story;
 export declare const Default: Story;
-export declare const Clearable: Story;
-export declare const Invalid: Story;
-export declare const Readonly: Story;
 export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Datepicker.stories.d.ts.map

package/dist/components/datepicker/Datepicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBAuBtD,IAAI;AAnBT,wBAmBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAmBtB,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}
+{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/datepicker/Datepicker.stories.js

@@ -1,97 +1,80 @@
-import { userEvent, expect } from 'storybook/test';
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-export default {
+const meta = {
     title: 'Form Elements/Datepicker',
-    tags: ['autodocs', 'beta'],
-    args: {
-        id: 'datepicker-id',
-        name: 'my-datepicker',
-        value: '2025-08-19',
-        isinvalid: false,
-        readonly: false,
-        isclearable: true,
-        clearlabel: 'Clear date',
-        size: 'm',
-    },
+    component: 'm-datepicker',
     argTypes: {
-        onblur: {
-            action: 'onblur',
-            table: { category: 'Events' },
+        size: {
+            control: 'radio',
+            options: ['s', 'm'],
         },
     },
-};
-const Template = (args) => {
-    const datepicker = document.createElement('m-datepicker');
-    datepicker.setAttribute('id', args.id);
-    datepicker.setAttribute('name', args.name);
-    datepicker.setAttribute('value', args.value);
-    if (args.isinvalid)
-        datepicker.setAttribute('isinvalid', 'true');
-    if (args.readonly)
-        datepicker.setAttribute('readonly', 'true');
-    if (args.disabled)
-        datepicker.setAttribute('disabled', 'true');
-    if (args.size === 's')
-        datepicker.setAttribute('size', 's');
-    if (args.isclearable)
-        datepicker.setAttribute('isclearable', 'true');
-    if (args.clearlabel)
-        datepicker.setAttribute('clearlabel', args.clearlabel);
-    datepicker.onblur = action('onblur');
-    return datepicker;
-};
-export const Default = {
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const datepicker = canvasElement.querySelector('m-datepicker');
-        const datepickerInput = datepicker?.shadowRoot?.querySelector('input');
-        expect(datepicker).not.toBeNull();
+    args: {
+        id: 'datepickerId',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-datepicker
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        readonly=${ifDefined(args.readonly)}
+        isclearable=${ifDefined(args.isclearable)}
+        clearlabel=${ifDefined(args.clearlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-datepicker>
+    `;
     },
 };
-export const Clearable = {
+export default meta;
+export const WithValue = {
     args: {
-        value: '2025-08-19',
+        id: 'withValueId',
+        value: '2025-07-22',
         isclearable: true,
     },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-datepicker');
-        const button = el?.shadowRoot?.querySelector('button');
-        expect(button).toBeVisible();
-        await userEvent.click(button);
-        const input = el?.shadowRoot?.querySelector('input');
-        expect(input).toHaveValue('');
-    },
 };
-export const Invalid = {
+export const Default = {};
+export const Small = {
     args: {
-        isinvalid: true,
+        id: 'smallId',
+        size: 's',
     },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-datepicker');
-        expect(el).toHaveAttribute('isinvalid', 'true');
+};
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
     },
 };
-export const Readonly = {
+export const ReadOnly = {
     args: {
+        id: 'readonlyId',
         readonly: true,
     },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const input = canvasElement
-            .querySelector('m-datepicker')
-            ?.shadowRoot?.querySelector('input');
-        expect(input).toHaveAttribute('readonly');
-    },
 };
-export const Small = {
+export const Invalid = {
     args: {
-        size: 's',
-    },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-datepicker');
-        expect(el).toHaveAttribute('size', 's');
+        id: 'invalidId',
+        isinvalid: true,
     },
 };

package/dist/components/datepicker/Datepicker.svelte

@@ -1,49 +1,74 @@
-<svelte:options customElement={{ tag: 'm-datepicker' }} />
+<svelte:options
+  customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }}
+/>
 
 <script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
   import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
-
+  /**
+   * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+   */
   interface Props {
+    /**
+     * A unique identifier for the datepicker element, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The name attribute for the datepicker element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the datepicker field.
+     */
     value?: string | number;
+    /**
+     * If `true`, applies an invalid state to the datepicker.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, disables the datepicker, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * Determines the size of the datepicker.
+     */
     size?: 's' | 'm';
+    /**
+     * If `true`, the datepicker is read-only (cannot be edited).
+     */
     readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the datepicker has a value.
+     */
     isclearable?: boolean;
+    /**
+     * The label text for the clear button.
+     */
     clearlabel?: string;
-    [events: string]: string;
   }
 
   let {
     id,
-    name = '',
-    value = '',
-    isinvalid = false,
-    disabled = false,
+    name,
+    value,
+    isinvalid,
+    disabled,
     size = 'm',
-    readonly = false,
-    isclearable = false,
+    readonly,
+    isclearable,
     clearlabel = 'clear content',
-    ...events
   }: Props = $props();
 
-  function onInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    value = target.value;
-  }
-
-  function clearValue() {
-    value = '';
-  }
+  const resetValue = () => (value = '');
 </script>
 
 <div
-  class="mc-datepicker mc-text-input"
-  class:is-invalid={isinvalid}
-  class:mc-text-input--s={size === 's'}
-  class:mc-datepicker--s={size === 's'}
+  class={[
+    'mc-datepicker mc-text-input',
+    `mc-text-input--${size}`,
+    `mc-datepicker--${size}`,
+    isinvalid && 'is-invalid',
+  ]}
 >
   <input
     class="mc-datepicker__control mc-text-input__control"
@@ -54,8 +79,6 @@
     {disabled}
     {readonly}
     aria-invalid={isinvalid}
-    oninput={onInput}
-    {...events}
   />
 
   {#if isclearable && value}
@@ -63,7 +86,7 @@
       <button
         type="button"
         class="mc-controls-options__button"
-        onclick={clearValue}
+        onclick={resetValue}
       >
         <CrossCircleFilled24
           class="mc-controls-options__icon"
@@ -78,17 +101,14 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* stylelint-disable string-no-newline */
 .mc-text-input {
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-radius-border, 0.25rem);
   transition: all ease 200ms;
-  color: #000000;
+  color: var(--forms-color-text-default, #000000);
   display: block;
   width: 100%;
   height: 3rem;
@@ -102,52 +122,56 @@
   border-width: 0;
   font-family: inherit;
   outline: none;
-  padding: 0.75rem 0.6875rem;
-  font-size: 1rem;
-  line-height: 1.3;
-  font-weight: 400;
-  flex-grow: 1;
 }
 .mc-text-input__control[type=number] {
   /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */
-  appearance: textfield;
 }
 .mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
+.mc-text-input__control[type=number] {
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
 .mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
   appearance: none;
 }
+.mc-text-input__control {
+  padding: 0.75rem 0.6875rem;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+  flex-grow: 1;
+}
 .mc-text-input__control::placeholder {
-  color: #666666;
+  color: var(--forms-color-placeholder, #666666);
 }
 .mc-text-input__icon {
-  fill: #666666;
+  fill: var(--forms-color-icon-default, #666666);
   height: 1.5rem;
   width: 1.5rem;
   flex-shrink: 0;
 }
 .mc-text-input:focus-within {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-text-input:hover:not(:focus-within) {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-text-input:has(input:disabled) {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   pointer-events: none;
 }
 .mc-text-input:has(input[readonly]) {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-text-input:has(.mc-text-input__icon) {
@@ -167,8 +191,8 @@
 }
 .mc-text-input--s .mc-text-input__control {
   padding: 0.375rem 0.6875rem;
-  font-size: 0.875rem;
-  line-height: 1.3;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
 }
 .mc-text-input--s:has(.mc-text-input__icon) {
   padding-inline-start: 0.4375rem;
@@ -177,12 +201,12 @@
   padding-inline-end: 0.4375rem;
 }
 .mc-text-input.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-text-input.is-invalid:hover:not(:focus-within) {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-text-input * {
   box-sizing: border-box;
@@ -190,12 +214,12 @@
 
 /* stylelint-enable string-no-newline */
 .mc-datepicker {
-  border-radius: 0.25rem;
+  border-radius: var(--radius-s, 0.25rem);
   position: relative;
 }
 .mc-datepicker__control {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23000000' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
-  font-family: LeroyMerlin, sans-serif;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  font-family: var(--font-family, LeroyMerlin), sans-serif;
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   display: block;
@@ -212,52 +236,52 @@
   transform: scale(2);
 }
 .mc-datepicker__control.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-datepicker__control.is-invalid:hover:not(:focus-within) {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-datepicker__control:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
-  background-color: #d9d9d9;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-datepicker__control:disabled:hover:not(:focus-within) {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-datepicker:has(.mc-controls-options) {
   padding-inline-end: 0;
 }
 .mc-datepicker:has(input:disabled) {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   pointer-events: all;
   cursor: not-allowed;
 }
 .mc-datepicker:has(input:disabled):hover {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-datepicker--s .mc-datepicker__control {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='%23000000' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
 }
 .mc-datepicker--s .mc-datepicker__control:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='%23737373' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
 }
 .mc-datepicker__controls-options {
   position: absolute;
@@ -280,18 +304,18 @@
   appearance: none;
   cursor: pointer;
   padding: 0;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
 }
 .mc-controls-options__button:hover .mc-controls-options__icon {
-  fill: #4d4d4d;
+  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
 }
 .mc-controls-options__button:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-controls-options__icon {
-  fill: #666666;
+  fill: var(--forms-color-icon-clear, #666666);
 }
 .mc-controls-options__button, .mc-controls-options__icon {
   height: 1.5rem;
@@ -308,8 +332,8 @@
   width: 1px;
 }
 .mc-controls-options__unit {
-  font-size: 1rem;
-  line-height: 1.3;
-  font-weight: 600;
-  color: #000000;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--forms-color-text-default, #000000);
 }</style>