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

package/dist/components/passwordinput/PasswordInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA6DE,IAAI;AA3DT,wBA2DU;AAsBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,eAAe,KAAoB,CAAC;AAmBjD,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"PasswordInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAuCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAMvB,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/passwordinput/PasswordInput.stories.js

@@ -1,132 +1,75 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * A password input is used for entering secure information like passwords.
- * It supports visibility toggle and optional clear functionality.
- *
- * The `MPasswordInput` component is the **Svelte / WebComponent** implementation of the Mozaic Design System password input field.
- * Refer to the full specification in [the Mozaic documentation](https://mozaic.adeo.cloud/components/form/password-input).
- */
-export default {
-    title: 'Form Elements/Password Input',
-    tags: ['autodocs', 'new'],
-    argTypes: {
-        id: {
-            description: 'Unique identifier for the input',
-            control: 'text',
-        },
-        name: {
-            description: 'Name attribute for form submission',
-            control: 'text',
-        },
-        value: {
-            description: 'Value of the password input',
-            control: 'text',
-        },
-        placeholder: {
-            description: 'Placeholder text',
-            control: 'text',
-        },
-        isinvalid: {
-            description: 'Displays input as invalid',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Disables the input field',
-            control: 'boolean',
-        },
-        readonly: {
-            description: 'Makes the input read-only',
-            control: 'boolean',
-        },
-        isclearable: {
-            description: 'Show a clear button when value is set',
-            control: 'boolean',
-        },
-        clearLabel: {
-            description: 'Label for the clear button',
-            control: 'text',
-        },
-        buttonLabel: {
-            description: 'Show/Hide button labels',
-            control: 'object',
-        },
-        onclear: {
-            description: 'Event that occurs when the clear button is clicked',
-            action: 'onclear',
-            table: {
-                category: 'Events',
-            },
-        },
-        ontoggle: {
-            description: 'Event that occurs when the show/hide button is clicked',
-            action: 'ontoggle',
-            table: {
-                category: 'Events',
-            },
-        },
+const meta = {
+    title: 'Form Elements/PasswordInput',
+    component: 'm-password-input',
+    args: {
+        id: 'passwordInputId',
+        placeholder: 'Enter your password',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-password-input
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        placeholder=${ifDefined(args.placeholder)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        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-password-input>
+    `;
     },
 };
-const Template = (args) => {
-    const input = document.createElement('m-password-input');
-    input.setAttribute('id', args.id || 'password-input');
-    if (args.name)
-        input.setAttribute('name', args.name);
-    if (args.placeholder)
-        input.setAttribute('placeholder', args.placeholder || 'Password input');
-    if (args.disabled)
-        input.setAttribute('disabled', args.disabled);
-    if (args.readonly)
-        input.setAttribute('readonly', args.readonly);
-    if (args.isinvalid)
-        input.setAttribute('isinvalid', args.isinvalid);
-    if (args.isclearable)
-        input.setAttribute('isclearable', args.isclearable);
-    if (args.clearlabel)
-        input.setAttribute('clearlabel', args.clearlabel);
-    if (args.buttonlabel)
-        input.setAttribute('buttonlabel', JSON.stringify(args.buttonlabel));
-    if (args.value)
-        input.setAttribute('value', args.value);
-    input.addEventListener('input', action('input'));
-    input.onclear = action('onclear');
-    input.ontoggle = action('ontoggle');
-    return input;
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Enter password',
-};
-Default.play = async ({ canvasElement }) => {
-    const inputEl = canvasElement.querySelector('m-password-input');
-    const input = inputEl?.shadowRoot?.querySelector('input');
-    expect(input).not.toBeNull();
-    await userEvent.type(input, 'supersecret');
-    expect(input).toHaveValue('supersecret');
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'Magic-word-123',
+    },
 };
-export const WithClearButton = Template.bind({});
-WithClearButton.args = {
-    placeholder: 'Enter password',
-    value: '123456',
-    isclearable: true,
-    clearlabel: 'Clear',
+export const Default = {};
+export const Clearable = {
+    args: {
+        id: 'clearableId',
+        value: 'Magic-word-123',
+        isclearable: true,
+    },
 };
-WithClearButton.play = async ({ canvasElement }) => {
-    const el = canvasElement.querySelector('m-password-input');
-    const clearBtn = el?.shadowRoot?.querySelector('.mc-controls-options__button');
-    const input = el?.shadowRoot?.querySelector('input');
-    expect(input).toHaveValue('123456');
-    await userEvent.click(clearBtn);
-    expect(input).toHaveValue('');
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-    placeholder: 'Cannot edit',
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const input = canvasElement
-        .querySelector('m-password-input')
-        ?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };

package/dist/components/passwordinput/PasswordInput.svelte

@@ -1,58 +1,84 @@
 <svelte:options
   customElement={{
     tag: 'm-password-input',
+    extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
-  import Button from '../button/Button.svelte';
+  import { customElementForwardEvents } from '../../utils';
+  /**
+   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+   */
   interface Props {
+    /**
+     * A unique identifier for the password input element, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The name attribute for the password input element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the password input field.
+     */
     value?: string | number;
+    /**
+     * A placeholder text to show in the password input when it is empty.
+     */
     placeholder?: string;
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, disables the password input, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the password input is read-only (cannot be edited).
+     */
     readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the password input has a value.
+     */
     isclearable?: boolean;
+    /**
+     * The label text for the clear button.
+     */
     clearlabel?: string;
+    /**
+     * Labels of the button displayed when showing or hiding the password.
+     */
     buttonlabel?: {
       show: string;
       hide: string;
     };
-    [key: string]: any;
   }
 
   let {
     id,
     name,
-    value = $bindable(''),
-    placeholder = '',
-    isinvalid = false,
-    disabled = false,
-    readonly = false,
-    isclearable = false,
+    value,
+    placeholder,
+    isinvalid,
+    disabled,
+    readonly,
+    isclearable,
     clearlabel = 'Clear content',
     buttonlabel = { show: 'Show', hide: 'Hide' },
-    onclear,
-    ontoggle,
-    ...events
   }: Props = $props();
 
   let isVisible = $state(false);
 
   function toggleVisibility() {
     isVisible = !isVisible;
-    ontoggle(isVisible);
   }
 
-  function clearValue() {
-    value = '';
-    onclear();
-  }
+  const resetValue = () => (value = '');
 </script>
 
-<div class="mc-password-input mc-text-input {isinvalid ? 'is-invalid' : ''}">
+<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>
   <input
     class="mc-password-input__control mc-text-input__control"
     {id}
@@ -63,14 +89,13 @@
     {disabled}
     {readonly}
     aria-invalid={isinvalid}
-    {...events}
   />
   {#if isclearable && value}
     <div class="mc-controls-options">
       <button
         class="mc-controls-options__button"
         type="button"
-        onclick={clearValue}
+        onclick={resetValue}
       >
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
@@ -83,18 +108,17 @@
     </div>
   {/if}
 
-  <Button
+  <button
+    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}
     type="button"
     role="switch"
     tabindex="0"
-    aria-checked={isVisible}
-    size="s"
-    ghost={true}
     {disabled}
+    aria-checked={isVisible}
     onclick={toggleVisibility}
   >
     <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>
-  </Button>
+  </button>
 </div>
 
 <style>/**
@@ -217,6 +241,345 @@
 }
 
 /* stylelint-enable string-no-newline */
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-radius, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  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-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+
 .mc-controls-options {
   align-items: center;
   display: inline-flex;