@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/components/textinput/Textinput.svelte

@@ -1,44 +1,56 @@
-<svelte:options tag={null} />
+<svelte:options customElement="m-textinput" />
 
 <script lang="ts">
-  import { afterUpdate } from 'svelte';
-  import { createEventForwarder } from '../../utilities/EventForward';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-
   import type { TextInputSize, TextInputType } from './textinput.types';
 
-  export let name: string;
-  export let value: string;
-  export let placeholder: string;
-  export let inputtype: TextInputType = 'text';
-  export let isvalid: boolean;
-  export let isinvalid: boolean;
-  export let disabled = false;
-  export let size: TextInputSize = 'm';
-  export let iconname: string;
-  export let rightalign: boolean;
-  export let min: string;
-  export let max: string;
-  export let minlength: number;
-  export let maxlength: number;
-  export let required: boolean = false;
-  const forwardEvents = createEventForwarder(get_current_component());
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  $: inputType = inputtype;
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  function generateIconName(iconName: string): string {
-    return `${iconName}`;
+  interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    inputtype?: TextInputType;
+    isvalid: boolean;
+    isinvalid: boolean;
+    disabled?: boolean;
+    size?: TextInputSize;
+    iconname: string;
+    rightalign: boolean;
+    min: string;
+    max: string;
+    minlength: number;
+    maxlength: number;
+    required?: boolean;
+    clearlabel?: string;
+    isclearable?: boolean;
+    hasicon?: boolean;
+    onclear?: (arg: string) => void;
   }
 
+  let {
+    name,
+    value,
+    placeholder,
+    inputtype = 'text',
+    isvalid,
+    isinvalid,
+    disabled = false,
+    size = 'm',
+    iconname,
+    rightalign,
+    min,
+    max,
+    minlength,
+    maxlength,
+    required = false,
+    clearlabel = 'Clear content',
+    isclearable = false,
+    onclear,
+    hasicon = false,
+    ...events
+  }: Props = $props();
+
+  let inputType = $derived(inputtype);
+  let displayClear = $derived(isclearable && value ? true : false);
+
   function getClasses(
     isValid: boolean,
     isInvalid: boolean,
@@ -75,40 +87,27 @@
     node.type = inputType;
   };
 
-  function onInput(e: Event) {
-    let value = (e.target as HTMLInputElement).value;
-    if (maxlength && inputtype === 'number') {
-      (e.target as HTMLInputElement).value = value.slice(0, maxlength);
-    }
+  function resetValue() {
+    value = '';
+    onclear('onclear');
   }
-
-  let component: HTMLDivElement;
-
-  afterUpdate(() => {
-    const input = component.querySelector('.mc-text-input') as HTMLInputElement;
-    input.type = inputType;
-  });
 </script>
 
-<div
-  class="{iconname ? 'mc-left-icon-input' : ''} {userClass}"
-  bind:this={component}
->
-  {#if iconname}
-    <span class="mc-left-icon-input__icon">
-      {@html `<${generateIconName(iconname)} />`}
-    </span>
-  {/if}
-  {#if $$slots.icon}
-    <span class="mc-left-icon-input__icon">
+{#snippet icon()}
+  <span class="mc-text-input__icon">
+    <slot name="icon" />
+  </span>
+{/snippet}
+<div class="{getClasses(isvalid, isinvalid, size, iconname)} ">
+  {#if hasicon}
+    <span class="mc-text-input__icon">
       <slot name="icon" />
     </span>
   {/if}
   <input
-    use:forwardEvents
     bind:value
     use:setType
-    class="{getClasses(isvalid, isinvalid, size, iconname)} {$$props.class}"
+    class="mc-text-input__control"
     aria-invalid={isinvalid}
     {name}
     id={name}
@@ -120,23 +119,189 @@
     {maxlength}
     spellcheck="false"
     {required}
-    {...attributes}
-    on:input={onInput}
-    on:keydown={(event) => {
-      if (event?.key === 'Enter') {
-        eventHandler.dispatch('submit-search', value);
-      }
-    }}
+    {...events}
   />
+  <!-- Control options -->
+  {#if displayClear}
+    <div class="mc-controls-options js-control-options">
+      <!-- Clear Button -->
+      <button
+        type="button"
+        class="mc-controls-options__button"
+        onclick={resetValue}
+      >
+        <svg class="mc-controls-options__icon" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
+          />
+        </svg>
+        <span class="mc-controls-options__label">{clearlabel}</span>
+      </button>
+    </div>
+  {/if}
 </div>
 
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.text-input';
-  @import '@mozaic-ds/styles/components/c.left-icon-input';
-  @import '@mozaic-ds/styles/components/c.fields';
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-controls-options {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-controls-options__button {
+  background-color: transparent;
+  border-width: 0;
+  color: initial;
+  font-family: inherit;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--radius-full, 100%);
+}
+.mc-controls-options__button:hover .mc-controls-options__icon {
+  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, 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: var(--forms-color-icon-clear, #666666);
+}
+.mc-controls-options__button, .mc-controls-options__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-controls-options__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-controls-options__unit {
+  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);
+}
 
-  .right-align {
-    text-align: right;
-  }
-</style>
+/* stylelint-disable string-no-newline */
+.mc-text-input {
+  transition: box-shadow 200ms ease;
+  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: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  height: 3rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-text-input__control {
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  outline: none;
+  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[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=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+}
+.mc-text-input__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-text-input__icon {
+  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, 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: 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: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+  pointer-events: none;
+}
+.mc-text-input:has(input[readonly]) {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-text-input:has(.mc-text-input__icon) {
+  padding-inline-start: 0.6875rem;
+}
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+  padding-inline-start: 0;
+}
+.mc-text-input:has(.mc-controls-options) {
+  padding-inline-end: 0.6875rem;
+}
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+  padding-inline-end: 0;
+}
+.mc-text-input--s {
+  height: 2rem;
+}
+.mc-text-input--s .mc-text-input__control {
+  padding: 0.375rem 0.6875rem;
+  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;
+}
+.mc-text-input--s:has(.mc-controls-options) {
+  padding-inline-end: 0.4375rem;
+}
+.mc-text-input.is-invalid {
+  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: 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;
+}
+
+/* stylelint-enable string-no-newline */
+.right-align {
+  text-align: right;
+}</style>

package/dist/components/textinput/textinput.types.d.ts

@@ -1,3 +1,3 @@
 export type TextInputType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
-export type TextInputSize = 's' | 'm' | 'l';
+export type TextInputSize = 's' | 'm';
 //# sourceMappingURL=textinput.types.d.ts.map

package/dist/components/textinput/textinput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textinput.types.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/textinput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC"}
+{"version":3,"file":"textinput.types.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/textinput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/components/toggle/Toggle.svelte

@@ -1,61 +1,162 @@
-<svelte:options tag={null} />
+<svelte:options customElement="m-toggle" />
 
 <script lang="ts">
   import type { ToggleSize } from './toggle.types';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
+  import { createEventDispatcher } from 'svelte';
 
-  export let name: string;
-  export let checked: boolean;
-  export let disabled = false;
-  export let size: ToggleSize = 'm';
-  export let label: string;
-
-  const forwardEvents = createEventForwarder(get_current_component());
+  interface Props {
+    name: string;
+    checked: boolean;
+    disabled?: boolean;
+    size?: ToggleSize;
+    label: string;
+  }
 
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  let {
+    name,
+    checked = $bindable(),
+    disabled = false,
+    size = 'm',
+    label,
+  }: Props = $props();
 
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
+  let dispatch = createEventDispatcher();
 
   function handleState(): void {
     checked = !checked;
-    eventHandler.dispatch('change', checked);
+    dispatch('change', checked);
   }
 </script>
 
 <div
-  class="mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 's'
-    ? ' mc-toggle--s'
-    : ''} {userClass}"
-  {...attributes}
+  class="mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'
+    ? ' mc-toggle--m'
+    : ''}"
 >
-  <input
-    use:forwardEvents
-    class="mc-toggle__input"
-    id={name}
-    {name}
-    type="checkbox"
-    {checked}
-    {disabled}
-    on:click={handleState}
-  />
-  <label class="mc-toggle__label" for={name}>
+  <label class="mc-toggle__container">
+    <input
+      class="mc-toggle__input"
+      id={name}
+      {name}
+      type="checkbox"
+      {checked}
+      {disabled}
+      onclick={handleState}
+    />
     {#if label}
-      <span class="mc-toggle__content">{label}</span>
+      <span class="mc-toggle__label">{label}</span>
     {/if}
   </label>
 </div>
 
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.toggle';
-</style>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-toggle {
+  width: fit-content;
+}
+.mc-toggle__container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.5rem;
+  position: relative;
+  padding: 0.25rem;
+}
+.mc-toggle__container::before, .mc-toggle__container::after {
+  content: "";
+}
+.mc-toggle__container::before {
+  transition: box-shadow 200ms ease;
+  height: 1.5rem;
+  width: 2.5rem;
+  background-color: var(--forms-color-background-unchecked, #666666);
+  border-radius: var(--radius-l, 1rem);
+  flex-shrink: 0;
+}
+.mc-toggle__container::after {
+  height: 1.25rem;
+  width: 1.25rem;
+  background-color: var(--forms-color-icon-inverse, #ffffff);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  border-radius: var(--radius-full, 100%);
+  background-position: center;
+  left: 0.375rem;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.mc-toggle__input {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-toggle__label {
+  color: var(--forms-color-text-default, #000000);
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-m, 1.5);
+}
+.mc-toggle:has(:checked) .mc-toggle__container::before {
+  background-color: var(--forms-color-background-checked, #117f03);
+}
+.mc-toggle:has(:checked) .mc-toggle__container::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  transform: translate(1rem, -50%);
+}
+.mc-toggle:has(:disabled) .mc-toggle__container {
+  cursor: not-allowed;
+}
+.mc-toggle:has(:disabled) .mc-toggle__container::before {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+}
+.mc-toggle:has(:disabled) .mc-toggle__container::after {
+  background-color: var(--forms-color-icon-disabled, #737373);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+.mc-toggle:has(:disabled) .mc-toggle__label {
+  color: var(--forms-color-text-disabled, #737373);
+}
+.mc-toggle:has(:disabled:checked) .mc-toggle__container::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+.mc-toggle:has(:focus-visible) .mc-toggle__container::before {
+  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-toggle--m .mc-toggle__container::before {
+  height: 2rem;
+  width: 3.5rem;
+}
+.mc-toggle--m .mc-toggle__container::after {
+  height: 1.5rem;
+  width: 1.5rem;
+  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-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  left: 0.5rem;
+}
+.mc-toggle--m:has(:checked) .mc-toggle__container::after {
+  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-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  transform: translate(1.5rem, -50%);
+}
+.mc-toggle--m:has(:disabled) .mc-toggle__container::after {
+  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-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+.mc-toggle--m:has(:disabled:checked) .mc-toggle__container::after {
+  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-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+.mc-toggle--hide-label .mc-toggle__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}</style>

package/dist/documentation/Svelte/usingIcons.mdx

@@ -6,6 +6,9 @@ import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 The **Mozaic Design System** provides a comprehensive set of brand-compliant icons, available as ready-to-use **Svelte components** via the `@mozaic-ds/icons-svelte` package.
 
+👀 [ADS-2 icon's showcase](https://psychic-telegram-3j2oqjk.pages.github.io/) <br/>
+🛠️ [Icon's name mapping](https://github.com/adeo/mozaic-icons/blob/main/MIGRATION.md)
+
 These icons are:
 
 - **Optimized**: Lightweight and scalable SVGs.

package/dist/documentation/WebComponents/usingIcons.mdx

@@ -6,6 +6,9 @@ import { Meta, Source} from '@storybook/addon-docs/blocks';
 
 The **Mozaic Design System** also provides a set of scalable, accessible **Web Component icons**, available via the `@mozaic-ds/web-components` package.
 
+👀 [ADS-2 icon's showcase](https://psychic-telegram-3j2oqjk.pages.github.io/) <br/>
+🛠️ [Icon's name mapping](https://github.com/adeo/mozaic-icons/blob/main/MIGRATION.md)
+
 These icons are:
 
 - **Framework agnostic**: Usable in any front-end stack (React, Vue, Angular, vanilla...).
@@ -35,23 +38,22 @@ or individually
 ```js
 import '@mozaic-ds/icons-svelte/custom-elements/More64/More64.js';
 
-if (!customElements.get('ui-more-64')) {
-  customElements.define('ui-more-64', More64.element);
+if (!customElements.get('more-64')) {
+  customElements.define('more-64', More64.element);
 }
 ```
 
 Then, use any icon in your HTML:
 
-<ui-more-64></ui-more-64>
+<more-64></more-64>
 
 🧩 Icon Naming Convention
 The naming convention for Mozaic icon web components follows a clear pattern:
 
 ```html
-<[icon-category]-[icon-name]-[size]>
+<[icon-name]-[size]>
 ```
 
-- [icon-category]: Lowercase, kebab-case descriptive category name [media, ui, business, product]
 - [icon-name]: Lowercase, kebab-case descriptive name (e.g., search, close, more, trolley...)
 - [size]: Default size suffix → 20, 24, 32, 64
 
@@ -60,8 +62,8 @@ The naming convention for Mozaic icon web components follows a clear pattern:
 Each icon component accepts standard SVG attributes:
 
 ```svelte
-<ui-more-64 width="16" height="16" fill="currentColor" aria-label="Close"
-></ui-more-64>
+<more-64 width="16" height="16" fill="currentColor" aria-label="Close"
+></more-64>
 ```
 
 - width / height: Control size