@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/phonenumber/PhoneNumber.stories.d.ts

@@ -5,7 +5,7 @@ export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
 export declare const Size: Story;
-export declare const IsInvalid: Story;
+export declare const Invalid: Story;
 export declare const NoPrefix: Story;
 export declare const NoFlag: Story;
 export declare const Disabled: Story;

package/dist/components/phonenumber/PhoneNumber.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAwDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC"}
+{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAwDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC"}

package/dist/components/phonenumber/PhoneNumber.stories.js

@@ -7,7 +7,7 @@ import './PhoneNumber.svelte';
 const meta = {
     title: 'Form Elements/Phone Number',
     component: 'm-phone-number',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     argTypes: {
         size: {
             control: 'inline-radio',
@@ -67,7 +67,7 @@ export const Size = {
         size: 's',
     },
 };
-export const IsInvalid = {
+export const Invalid = {
     args: {
         isinvalid: true,
         value: '1912',

package/dist/components/phonenumber/PhoneNumber.svelte

@@ -174,21 +174,23 @@
       !flag && 'mc-phone-number-input__select-wrapper--hidden',
     ]}
   >
-    <select
-      id="selectComponentId"
-      class={['mc-select', 'mc-phone-number-input__select', size !== 'm' && `mc-select--${size}`]}
-      bind:value={selectedCountry}
-      {disabled}
-      name="country-select"
-    >
-      <option value="" selected hidden></option>
+    <div class={['mc-select', 'mc-phone-number-input__select', size !== 'm' && `mc-select--${size}`]}>
+      <select
+        id="selectComponentId"
+        class="mc-select__control"
+        bind:value={selectedCountry}
+        {disabled}
+        name="country-select"
+      >
+        <option value="" selected hidden></option>
 
-      {#each countries as country, index (index)}
-        <option value={country} data-flag={country.toLowerCase()}>
-          {getCountryName(country)} (+{getCountryCallingCode(country)})
-        </option>
-      {/each}
-    </select>
+        {#each countries as country, index (index)}
+          <option value={country} data-flag={country.toLowerCase()}>
+            {getCountryName(country)} (+{getCountryCallingCode(country)})
+          </option>
+        {/each}
+      </select>
+    </div>
 
     <div class="mc-phone-number-input__select-display">
       <div class="mc-phone-number-input__flag">
@@ -282,11 +284,17 @@
   font-size: var(--font-size-150, 1rem);
   line-height: var(--line-height-s, 1.3);
   font-weight: var(--font-weight-regular, 400);
+  color: var(--forms-color-text-default, #000000);
   flex-grow: 1;
 }
 .mc-text-input__control::placeholder {
   color: var(--forms-color-placeholder, #666666);
 }
+.mc-text-input__addon {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--forms-color-text-default, #000000);
+}
 .mc-text-input__icon {
   fill: var(--forms-color-icon-default, #666666);
   height: 1.5rem;
@@ -314,16 +322,16 @@
   border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
-.mc-text-input:has(.mc-text-input__icon) {
+.mc-text-input:has(.mc-text-input__icon), .mc-text-input:has(.mc-text-input__addon) {
   padding-inline-start: 0.6875rem;
 }
-.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
   padding-inline-start: 0;
 }
-.mc-text-input:has(.mc-controls-options) {
+.mc-text-input:has(.mc-controls-options), .mc-text-input:has(.mc-text-input__addon) {
   padding-inline-end: 0.6875rem;
 }
-.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
   padding-inline-end: 0;
 }
 .mc-text-input--s {
@@ -374,6 +382,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -384,7 +393,6 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -417,6 +425,7 @@
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
   min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
 }
 .mc-button--s .mc-button__label {
   font-size: var(--font-size-100, 0.875rem);
@@ -433,6 +442,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button--m .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -449,6 +459,7 @@
   padding: 0 calc(1.25rem - 0.125rem);
   min-height: 4rem;
   min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
 }
 .mc-button--l .mc-button__label {
   font-size: var(--font-size-200, 1.125rem);
@@ -695,7 +706,7 @@
   cursor: not-allowed;
 }
 
-.mc-listbox {
+.mc-listbox:has(.mc-listbox__content:not([popover])), .mc-listbox:has(.mc-listbox__content:popover-open) {
   position: fixed;
   inset: 0;
   display: flex;
@@ -711,17 +722,17 @@
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
   z-index: var(--overlay-z-index, 2);
 }
-.mc-listbox.is-visible {
+.mc-listbox:has(.mc-listbox__content:not([popover])).is-visible, .mc-listbox:has(.mc-listbox__content:popover-open).is-visible {
   opacity: 1;
   pointer-events: all;
   transition: opacity 0.4s ease, visibility 0ms;
   visibility: visible;
 }
-.mc-listbox {
+.mc-listbox:has(.mc-listbox__content:not([popover])), .mc-listbox:has(.mc-listbox__content:popover-open) {
   opacity: 1;
 }
 @media (width >= 680px) {
-  .mc-listbox {
+  .mc-listbox:has(.mc-listbox__content:not([popover])), .mc-listbox:has(.mc-listbox__content:popover-open) {
     position: relative;
     display: block;
     padding: 0;
@@ -770,9 +781,49 @@
 .mc-listbox__body {
   overflow: hidden;
 }
+@media (width >= 680px) {
+  .mc-listbox--top .mc-listbox__content {
+    margin: 0 0 8px;
+    inset: auto;
+    position-area: span-right top;
+  }
+  .mc-listbox--bottom .mc-listbox__content {
+    margin: 8px 0 0;
+    inset: auto;
+    position-area: span-right bottom;
+  }
+  .mc-listbox--left .mc-listbox__content {
+    margin: 0 8px 0 0;
+    inset: auto;
+    position-area: span-bottom left;
+  }
+  .mc-listbox--right .mc-listbox__content {
+    margin: 0 0 0 8px;
+    inset: auto;
+    position-area: span-bottom right;
+  }
+}
 
 /* stylelint-disable string-no-newline */
 .mc-select {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.mc-select::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--forms-color-icon-interactive, #000000);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-select__control {
   appearance: none;
   font-family: inherit;
   transition: box-shadow 200ms ease;
@@ -781,47 +832,43 @@
   height: 3rem;
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
   border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
   display: block;
   width: 100%;
   color: var(--forms-color-text-default, #000000);
   background-color: var(--forms-color-background-default, #ffffff);
   text-overflow: ellipsis;
-  background-repeat: no-repeat;
-  background-size: 1rem;
   border-radius: var(--border-radius-s, 0.25rem);
 }
-.mc-select:hover {
+.mc-select__control:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
   box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
-.mc-select:focus {
+.mc-select__control:focus {
   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-select:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+.mc-select__control:disabled {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
   border-color: transparent;
   cursor: not-allowed;
   box-shadow: none;
   color: var(--forms-color-text-disabled, #737373);
 }
-.mc-select--readonly {
+.mc-select__control--readonly {
   border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
-.mc-select.is-invalid {
+.mc-select__control.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
   box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
-.mc-select.is-invalid:hover {
+.mc-select__control.is-invalid:hover {
   border-color: var(--forms-color-border-invalid-hover, #c61112);
   box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
-.mc-select--s {
+.mc-select--s .mc-select__control {
   font-size: var(--font-size-100, 0.875rem);
   line-height: var(--line-height-s, 1.3);
   height: 2rem;
@@ -865,18 +912,18 @@
 .mc-phone-number-input__select-wrapper--hidden {
   display: none;
 }
-.mc-phone-number-input__select {
+.mc-phone-number-input .mc-phone-number-input__select {
   width: 5.75rem;
   padding: 0;
   z-index: 2;
   opacity: 0;
   position: relative;
 }
-.mc-phone-number-input__select:hover + .mc-phone-number-input__select-display {
+.mc-phone-number-input .mc-phone-number-input__select:hover + .mc-phone-number-input__select-display {
   border-color: var(--forms-color-border-hover, #4d4d4d);
   box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
-.mc-phone-number-input__select :read-only .mc-phone-number-input__chevron {
+.mc-phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron {
   display: none;
 }
 .mc-phone-number-input__select-display {

package/dist/components/phonenumber/PhoneNumber.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAMH,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAI3B;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;CAC9B;AA0JH,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PhoneNumber.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAMH,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAI3B;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;CAC9B;AA4JH,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/pincode/Pincode.js

@@ -1,6 +1,6 @@
-import{o as S,c as C,p as K,a as O,b as i,u as x,k as D,A as R,q as z,n as o,B as F,f as A,g as G,v as H,h as j,j as d,r as J,t as N,l as Q,m as T}from"../../custom-element.js";import{e as U}from"../../each.js";import{r as V,s as B,d as W}from"../../attributes.js";import{b as I}from"../../this.js";var X=j('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),Y=j('<div class="mc-pincode-input svelte-h63szf"></div>');const Z={hash:"svelte-h63szf",code:`/**
+import{o as S,c as K,e as O,a as R,p as i,v as x,g as D,B as F,q as z,l as o,C as G,b as A,d as H,w as J,f as j,i as d,r as N,t as Q,s as T,h as U,u as B}from"../../custom-element.js";import{e as V}from"../../each.js";import{r as W,s as I,e as X}from"../../attributes.js";import{b as E}from"../../this.js";var Y=j('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),Z=j('<div class="mc-pincode-input svelte-h63szf"></div>');const $={hash:"svelte-h63szf",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pincode-input.svelte-h63szf {display:inline-flex;column-gap:0.5rem;}
 @media screen and (width <= 1024px) {.mc-pincode-input.svelte-h63szf {flex-wrap:wrap;row-gap:0.75rem;}
-}.mc-pincode-input__control.svelte-h63szf {font-size:var(--font-size-400, 1.75rem);transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:var(--line-height-s, 1.3);}.mc-pincode-input__control.svelte-h63szf::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-pincode-input__control.svelte-h63szf: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-pincode-input__control.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-pincode-input__control.svelte-h63szf: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-pincode-input__control.is-invalid.svelte-h63szf {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-pincode-input__control.is-invalid.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function $(k,s){K(s,!0),O(k,Z);let m=i(s,"id",7),c=i(s,"length",7,6),v=i(s,"name",7),p=i(s,"value",7),h=i(s,"isinvalid",7),b=i(s,"disabled",7),g=i(s,"readonly",7);const n=H(()=>typeof c()=="string"?parseInt(c(),10)||6:c());let l=x(D([])),_=x(D([])),y;R(()=>{const e=String(p()??"");z(l,Array(o(n)).fill(""),!0),z(l,Array.from({length:o(n)},(t,r)=>e[r]??""),!0)});const u=e=>{queueMicrotask(()=>o(_)?.[e]?.focus())},w=()=>{const e=o(l).join(""),t=new CustomEvent("input",{detail:{value:e},bubbles:!0,composed:!0});y.dispatchEvent(t)},E=(e,t)=>{const a=e.target.value.replace(/\D/g,"").slice(0,1);o(l)[t]=a,w(),a&&t+1<o(n)&&u(t+1)},q=(e,t)=>{e.key==="ArrowLeft"&&t>0?(e.preventDefault(),u(t-1)):e.key==="ArrowRight"&&t<o(n)-1?(e.preventDefault(),u(t+1)):e.key==="Backspace"&&o(l)[t]===""&&t>0&&(o(l)[t-1]="",w(),u(t-1))},L=e=>{e.preventDefault();const t=(e.clipboardData?.getData("text")??"").replace(/\D/g,"").slice(0,o(n));z(l,Array.from({length:o(n)},(r,a)=>t[a]??""),!0),w(),u(Math.min(t.length,o(n)-1))};var M={get id(){return m()},set id(e){m(e),d()},get length(){return c()},set length(e=6){c(e),d()},get name(){return v()},set name(e){v(e),d()},get value(){return p()},set value(e){p(e),d()},get isinvalid(){return h()},set isinvalid(e){h(e),d()},get disabled(){return b()},set disabled(e){b(e),d()},get readonly(){return g()},set readonly(e){g(e),d()}},f=Y();return U(f,20,()=>[...Array(o(n)).keys()],e=>e,(e,t)=>{var r=X();V(r),r.__input=a=>E(a,t),r.__keydown=a=>q(a,t),I(r,(a,P)=>o(_)[P]=a,a=>o(_)?.[a],()=>[t]),N(()=>{B(r,"id",`pincodeItem${t}`),Q(r,1,T(["mc-pincode-input__control",h()&&"is-invalid"]),"svelte-h63szf"),B(r,"name",v()??`pincode-${m()}`),r.disabled=b(),r.readOnly=g(),W(r,o(l)[t])}),A(e,r)}),J(f),I(f,e=>y=e,()=>y),F("paste",f,L),A(k,f),G(M)}S(["input","keydown"]);customElements.define("m-pincode",C($,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},length:{},name:{},value:{}},[],[],!0));
+}.mc-pincode-input__control.svelte-h63szf {font-size:var(--font-size-400, 1.75rem);transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:var(--line-height-s, 1.3);}.mc-pincode-input__control.svelte-h63szf::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-pincode-input__control.svelte-h63szf: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-pincode-input__control.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-pincode-input__control.svelte-h63szf: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-pincode-input__control.is-invalid.svelte-h63szf {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-pincode-input__control.is-invalid.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function ee(k,s){O(s,!0),R(k,$);let m=i(s,"id",7),c=i(s,"length",7,6),v=i(s,"name",7),p=i(s,"value",7),h=i(s,"isinvalid",7),b=i(s,"disabled",7),g=i(s,"readonly",7);const n=J(()=>typeof c()=="string"?parseInt(c(),10)||6:c());let l=x(D([])),_=x(D([])),y;F(()=>{const e=String(p()??"");z(l,Array(o(n)).fill(""),!0),z(l,Array.from({length:o(n)},(t,r)=>e[r]??""),!0)});const u=e=>{queueMicrotask(()=>o(_)?.[e]?.focus())},w=()=>{const e=o(l).join(""),t=new CustomEvent("input",{detail:{value:e},bubbles:!0,composed:!0});y.dispatchEvent(t)},q=(e,t)=>{const a=e.target.value.replace(/\D/g,"").slice(0,1);o(l)[t]=a,w(),a&&t+1<o(n)&&u(t+1)},C=(e,t)=>{e.key==="ArrowLeft"&&t>0?(e.preventDefault(),u(t-1)):e.key==="ArrowRight"&&t<o(n)-1?(e.preventDefault(),u(t+1)):e.key==="Backspace"&&o(l)[t]===""&&t>0&&(o(l)[t-1]="",w(),u(t-1))},L=e=>{e.preventDefault();const t=(e.clipboardData?.getData("text")??"").replace(/\D/g,"").slice(0,o(n));z(l,Array.from({length:o(n)},(r,a)=>t[a]??""),!0),w(),u(Math.min(t.length,o(n)-1))};var M={get id(){return m()},set id(e){m(e),d()},get length(){return c()},set length(e=6){c(e),d()},get name(){return v()},set name(e){v(e),d()},get value(){return p()},set value(e){p(e),d()},get isinvalid(){return h()},set isinvalid(e){h(e),d()},get disabled(){return b()},set disabled(e){b(e),d()},get readonly(){return g()},set readonly(e){g(e),d()}},f=Z();return V(f,20,()=>[...Array(o(n)).keys()],e=>e,(e,t)=>{var r=Y();W(r),E(r,(a,P)=>o(_)[P]=a,a=>o(_)?.[a],()=>[t]),Q(()=>{I(r,"id",`pincodeItem${t}`),T(r,1,U(["mc-pincode-input__control",h()&&"is-invalid"]),"svelte-h63szf"),I(r,"name",v()??`pincode-${m()}`),r.disabled=b(),r.readOnly=g(),X(r,o(l)[t])}),B("input",r,a=>q(a,t)),B("keydown",r,a=>C(a,t)),A(e,r)}),N(f),E(f,e=>y=e,()=>y),G("paste",f,L),A(k,f),H(M)}S(["input","keydown"]);customElements.define("m-pincode",K(ee,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},length:{},name:{},value:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=Pincode.js.map

package/dist/components/pincode/Pincode.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pincode',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>([]);\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array(L).fill('');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.state","$.proxy","inputs","element","$.user_effect","incoming","$.set","$.get","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","div","root","$$anchor","input","root_1","$.remove_input_defaults","e","$.bind_this","$$value","$.set_attribute","$.set_class","$.clsx","$.append","$.event"],"mappings":"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"}
+{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pincode',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>([]);\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array(L).fill('');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.state","$.proxy","inputs","element","$.user_effect","incoming","$.set","$.get","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","div","root","$$anchor","input","root_1","$.remove_input_defaults","$.bind_this","$$value","$.set_attribute","$.set_class","$.clsx","$.delegated","e","$.append","$.event"],"mappings":"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"}

package/dist/components/pincode/Pincode.stories.d.ts

@@ -3,7 +3,7 @@ import './Pincode.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const WithValue: Story;
+export declare const Value: Story;
 export declare const Default: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;

package/dist/components/pincode/Pincode.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IA8CX,CAAC;AAEF,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,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IA8CX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/pincode/Pincode.stories.js

@@ -5,7 +5,7 @@ import './Pincode.svelte';
 const meta = {
     title: 'Form Elements/Pincode',
     component: 'm-pincode',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     tags: ['v2'],
     argTypes: {
         length: {
@@ -49,7 +49,7 @@ const meta = {
     },
 };
 export default meta;
-export const WithValue = {
+export const Value = {
     args: {
         id: 'valueId',
         value: '123098',

package/dist/components/popover/Popover.js

@@ -0,0 +1,6 @@
+import{o as $,c as ee,e as re,a as oe,p as s,B as te,k as f,t as U,u as pe,b as _,d as ae,f as b,j as o,i as v,r as t,s as se,h as ve,m as J}from"../../custom-element.js";import{o as ie}from"../../index-client.js";import{i as C}from"../../if.js";import{s as K}from"../../slot.js";import{s as y}from"../../attributes.js";import{b as O}from"../../this.js";import{I as ne}from"../iconbutton/IconButton.js";import{C as le}from"../../Condition20.js";import"../../branches.js";import"../loader/Loader.js";var ce=b('<p class="mc-popover__title svelte-yg26u3"> </p>'),me=b('<p class="mc-popover__description svelte-yg26u3"> </p>'),de=b('<div class="mc-popover__headings svelte-yg26u3"><!> <!></div>'),ge=b('<div class="mc-popover__close svelte-yg26u3"><!></div>'),ue=b('<div><div><!></div> <div role="dialog" tabindex="0" class="mc-popover__wrapper svelte-yg26u3" popover="manual"><div class="mc-popover__content svelte-yg26u3"><!> <div><!></div> <!> <footer class="mc-popover__footer svelte-yg26u3"><!></footer></div></div></div>');const we={hash:"svelte-yg26u3",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-popover__wrapper.svelte-yg26u3 {border-radius:var(--border-radius-m, 0.5rem);}.mc-popover__wrapper.svelte-yg26u3: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-popover__wrapper.svelte-yg26u3 {position:relative;padding:1rem;background-color:var(--popover-color-background-standard, #ffffff);box-sizing:border-box;overflow:visible;border:var(--border-width-s, 0.0625rem) solid var(--popover-color-border-standard, #cccccc);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}
+@supports (width: max-content) {.mc-popover__wrapper.svelte-yg26u3 {width:max-content;}
+}.mc-popover__wrapper.svelte-yg26u3::before {background-color:var(--popover-color-border-standard, #cccccc);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";height:0.625rem;position:absolute;width:0.625rem;}.mc-popover__wrapper.svelte-yg26u3::after {background-color:var(--popover-color-background-standard, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";height:0.5rem;position:absolute;width:0.5rem;}.mc-popover__content.svelte-yg26u3 {display:flex;flex-direction:column;gap:1rem;}.mc-popover__headings.svelte-yg26u3 {display:flex;flex-direction:column;gap:0.5rem;}.mc-popover__close.svelte-yg26u3 {position:absolute;top:4px;right:4px;}.mc-popover__title.svelte-yg26u3 {font-size:var(--font-body-s, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--popover-color-text-standard, #000000);margin:0;}.mc-popover__description.svelte-yg26u3 {font-size:var(--font-body-s, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--popover-color-text-standard, #000000);margin:0;}.mc-popover__footer.svelte-yg26u3 {display:flex;justify-content:end;gap:1rem;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {background-color:var(--popover-color-background-inverse, #242938);border-color:var(--popover-color-border-inverse, #636d88);}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {background-color:var(--popover-color-border-inverse, #636d88);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after {background-color:var(--popover-color-background-inverse, #242938);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__title:where(.svelte-yg26u3), .mc-popover--inverse.svelte-yg26u3 .mc-popover__description:where(.svelte-yg26u3) {color:var(--popover-color-text-inverse, #ffffff);}.mc-popover--s.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:18rem;}.mc-popover--m.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:27.75rem;}.mc-popover--l.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:37.5rem;}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 0 10px;inset:auto;position-area:top;}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {bottom:0;left:50%;transform:translate(-50%, 100%) rotate(-90deg);}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {bottom:-1px;}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 0 0 10px;inset:auto;position-area:right;}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:50%;left:0;transform:translate(-99%, -50%);}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {left:-1px;}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 10px 0 0;inset:auto;position-area:left;}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:50%;right:0;transform:translate(99%, -50%) rotate(180deg);}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {right:-1px;}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:10px 0 0;inset:auto;position-area:bottom;}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:0;left:50%;transform:translate(-50%, -100%) rotate(90deg);}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:-1px;}.mc-popover--no-pointer.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--no-pointer.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {background:none;}`};function he(S,r){re(r,!0),oe(S,we);let l=s(r,"open",15),x=s(r,"appearance",7,"standard"),E=s(r,"position",7,"top"),z=s(r,"pointer",7,!0),B=s(r,"size",7,"s"),M=s(r,"closable",7,!0),c=s(r,"title",7),m=s(r,"description",7);const w=crypto.randomUUID();let P,d,g;function N(){!d||!g||(l()?(d.showPopover({source:g}),d.focus()):d.hidePopover({source:g}))}function q(e){const a=e.composedPath?e.composedPath():[];!a.includes(P)&&!a.includes(g)&&l(!1)}function Q(e){e.key==="Escape"&&l(!1)}te(N),ie(()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)}));var R={get open(){return l()},set open(e){l(e),v()},get appearance(){return x()},set appearance(e="standard"){x(e),v()},get position(){return E()},set position(e="top"){E(e),v()},get pointer(){return z()},set pointer(e=!0){z(e),v()},get size(){return B()},set size(e="s"){B(e),v()},get closable(){return M()},set closable(e=!0){M(e),v()},get title(){return c()},set title(e){c(e),v()},get description(){return m()},set description(e){m(e),v()}},h=ue(),k=o(h),T=o(k);K(T,r,"activator",{},null),t(k),O(k,e=>g=e,()=>g);var i=f(k,2),A=o(i),F=o(A);{var V=e=>{var a=de(),u=o(a);{var j=n=>{var p=ce(),L=o(p,!0);t(p),U(()=>{y(p,"id",`${w}-title`),J(L,c())}),_(n,p)};C(u,n=>{c()&&n(j)})}var D=f(u,2);{var Z=n=>{var p=me(),L=o(p,!0);t(p),U(()=>{y(p,"id",`${w}-description`),J(L,m())}),_(n,p)};C(D,n=>{m()&&n(Z)})}t(a),_(e,a)};C(F,e=>{(c()||m())&&e(V)})}var I=f(F,2),W=o(I);K(W,r,"default",{},null),t(I);var G=f(I,2);{var X=e=>{const a=D=>{le(D,{})};var u=ge(),j=o(u);ne(j,{ghost:!0,get icon(){return a},get appearance(){return x()},iconposition:"only","aria-label":"Close button",onclick:()=>l(!1)}),t(u),_(e,u)};C(G,e=>{M()&&e(X)})}var H=f(G,2),Y=o(H);return K(Y,r,"footer",{},null),t(H),t(A),t(i),O(i,e=>d=e,()=>d),t(h),O(h,e=>P=e,()=>P),U(()=>{se(h,1,ve({"mc-popover":!0,[`mc-popover--${x()}`]:!0,[`mc-popover--${E()}`]:!0,"mc-popover--no-pointer":!z(),[`mc-popover--${B()}`]:!0}),"svelte-yg26u3"),y(i,"id",`popover-${w}`),y(i,"aria-labelledby",c()?`${w}-title`:void 0),y(i,"aria-describedby",m()?`${w}-description`:void 0)}),pe("keydown",i,Q),_(S,h),ae(R)}$(["keydown"]);customElements.define("m-popover",ee(he,{open:{attribute:"open",reflect:!0,type:"Boolean"},pointer:{attribute:"pointer",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},appearance:{},position:{},size:{},title:{},description:{}},["activator","default","footer"],[],{mode:"open"}));
+//# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-popover',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      pointer: { reflect: true, type: 'Boolean', attribute: 'pointer' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { Cross20 } from '@mozaic-ds/icons-svelte';\n\n  /**\n   * A popover is a small overlay that appears above other content, typically triggered by a user interaction such as clicking or hovering over an element. It is used to display contextual information, additional actions, or interactive content without navigating away from the main interface. Popovers often include a title, description, and action buttons, and they automatically close when clicking outside or selecting an action.\n   * \n   * @slot default - Main content of the popover.\n   * @slot footer - Use this slot to insert buttons or link in the footer.\n   * @slot activator - Activator element that triggers the popover.\n   */\n\n  interface Props {\n    /**\n     * If `true`, display the popover.\n     */\n    open: boolean;\n    /**\n     * Allows to define the popover appearance.\n     */\n    appearance?: 'standard' | 'inverse';\n    /**\n     * Defines the preferred position of the popover relative to its activator.\n     */\n    position?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Controls the visibility of the popover pointer (arrow).\n     */\n    pointer?: boolean;\n    /**\n     * Determines the size of the popover.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * Title displayed at the top of the popover.\n     */\n    title?: string;\n    /**\n     * Supplementary text displayed below the title.\n     */\n    description?: string;\n  }\n\n  let {\n    open = $bindable(),\n    appearance = 'standard',\n    position = 'top',\n    pointer = true,\n    size = 's',\n    closable = true,\n    title,\n    description,\n  }: Props = $props();\n\n  // TODO: Remove when typescript is up to date\n  type PopoverOptions = {\n    source: HTMLElement;\n  };\n\n  type Popover = {\n    showPopover: (options?: PopoverOptions) => void;\n    hidePopover: (options?: PopoverOptions) => void;\n  };\n\n  const id = crypto.randomUUID();\n\n  let element: HTMLElement;\n  let popover: HTMLElement;\n  let activator: HTMLElement;\n\n  function togglePopover() {\n    if (!popover || !activator) return;\n\n    if (open) {\n      (popover as Popover).showPopover({ source: activator });\n      popover.focus();\n    } else {\n      (popover as Popover).hidePopover({ source: activator });\n    }\n  }\n\n  function handleClickOutside(event: MouseEvent) {\n    const path = event.composedPath ? event.composedPath() : [];\n    if (!path.includes(element) && !path.includes(activator)) {\n      open = false;\n    }\n  }\n\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      open = false;\n    }\n  }\n\n  $effect(togglePopover);\n\n  onMount(() => {\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  });\n</script>\n\n<div\n  bind:this={element}\n  class={{\n    'mc-popover': true,\n    [`mc-popover--${appearance}`]: true,\n    [`mc-popover--${position}`]: true,\n    'mc-popover--no-pointer': !pointer,\n    [`mc-popover--${size}`]: true,\n  }}\n>\n  <div bind:this={activator}>\n    <slot name=\"activator\" />\n  </div>\n\n  <div\n    bind:this={popover}\n    id={`popover-${id}`}\n    role=\"dialog\"\n    tabindex=\"0\"\n    class=\"mc-popover__wrapper\"\n    popover=\"manual\"\n    aria-labelledby={title ? `${id}-title` : undefined}\n    aria-describedby={description ? `${id}-description` : undefined}\n    onkeydown={onKeydown}\n  >\n    <div class=\"mc-popover__content\">\n      {#if title || description}\n        <div class=\"mc-popover__headings\">\n          {#if title}\n            <p id={`${id}-title`} class=\"mc-popover__title\">\n              {title}\n            </p>\n          {/if}\n\n          {#if description}\n            <p id={`${id}-description`} class=\"mc-popover__description\">\n              {description}\n            </p>\n          {/if}\n        </div>\n      {/if}\n\n      <div>\n        <slot />\n      </div>\n\n      {#if closable}\n        {#snippet icon()}\n          <Cross20 />\n        {/snippet}\n        <div class=\"mc-popover__close\">\n          <IconButton\n            ghost\n            {icon}\n            appearance={appearance}\n            iconposition=\"only\"\n            aria-label=\"Close button\"\n            onclick={() => (open = false)}\n          />\n        </div>\n      {/if}\n      \n      <footer class=\"mc-popover__footer\">\n        <slot name=\"footer\" />\n      </footer>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/popover';\n</style>\n"],"names":["open","$.prop","$$props","appearance","position","pointer","size","closable","title","description","id","element","popover","activator","togglePopover","handleClickOutside","event","path","onKeydown","$.user_effect","onMount","div","root","div_1","$.child","$$value","div_2","$.sibling","div_3","div_4","root_1","root_2","$.set_attribute","$$render","consequent","p_1","root_3","consequent_1","consequent_2","div_5","node_1","icon","$$anchor","Cross20","div_6","root_4","IconButton","node_6","consequent_3","footer","node_5","$.reset","$.delegated","$.append"],"mappings":"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"}

package/dist/components/popover/Popover.spec.js

@@ -0,0 +1,69 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import Popover from './Popover.svelte';
+import { vi, describe, it, beforeAll, expect } from 'vitest';
+beforeAll(() => {
+    HTMLElement.prototype.showPopover = vi.fn();
+    HTMLElement.prototype.hidePopover = vi.fn();
+});
+describe('m-popover', () => {
+    it('renders with default props', () => {
+        const { container } = render(Popover, { open: false });
+        const popover = container.querySelector('.mc-popover');
+        expect(popover).not.toBeNull();
+        expect(popover?.classList.contains('mc-popover--standard')).toBe(true);
+        expect(popover?.classList.contains('mc-popover--top')).toBe(true);
+        expect(popover?.classList.contains('mc-popover--s')).toBe(true);
+        expect(popover?.classList.contains('mc-popover--no-pointer')).toBe(false);
+    });
+    it('applies appearance, pointer, closable props', () => {
+        const { container } = render(Popover, {
+            open: true,
+            appearance: 'inverse',
+            pointer: false,
+            closable: true,
+        });
+        const popover = container.querySelector('.mc-popover');
+        expect(popover?.classList.contains('mc-popover--inverse')).toBe(true);
+        expect(popover?.classList.contains('mc-popover--no-pointer')).toBe(true);
+        const closeButton = container.querySelector('.mc-popover__close button');
+        expect(closeButton).not.toBeNull();
+    });
+    it('renders title and description', () => {
+        const { container } = render(Popover, {
+            open: true,
+            title: 'My Title',
+            description: 'My Description',
+        });
+        const titleEl = container.querySelector('.mc-popover__title');
+        const descEl = container.querySelector('.mc-popover__description');
+        expect(titleEl?.textContent).toBe('My Title');
+        expect(descEl?.textContent).toBe('My Description');
+    });
+    it('closes popover when clicking close button', async () => {
+        const { container } = render(Popover, { open: true, closable: true });
+        const popoverWrapper = container.querySelector('.mc-popover__wrapper');
+        popoverWrapper.showPopover = vi.fn();
+        popoverWrapper.hidePopover = vi.fn();
+        const closeButton = container.querySelector('.mc-popover__close button');
+        expect(closeButton).not.toBeNull();
+        await fireEvent.click(closeButton);
+        // L'état open devient false, popover existe toujours
+        expect(popoverWrapper).not.toBeNull();
+    });
+    it('closes popover when pressing Escape', async () => {
+        const { container } = render(Popover, { open: true });
+        const popoverWrapper = container.querySelector('.mc-popover__wrapper');
+        popoverWrapper.showPopover = vi.fn();
+        popoverWrapper.hidePopover = vi.fn();
+        await fireEvent.keyDown(popoverWrapper, { key: 'Escape' });
+        expect(popoverWrapper).not.toBeNull();
+    });
+    it('closes popover when clicking outside', async () => {
+        const { container } = render(Popover, { open: true });
+        const popoverWrapper = container.querySelector('.mc-popover__wrapper');
+        popoverWrapper.showPopover = vi.fn();
+        popoverWrapper.hidePopover = vi.fn();
+        await fireEvent.mouseDown(document.body);
+        expect(popoverWrapper).not.toBeNull();
+    });
+});

package/dist/components/popover/Popover.stories.d.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Popover.svelte';
+import '../button/Button.svelte';
+import '../link/Link.svelte';
+import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Inverse: {
+    args: {
+        appearance: string;
+        footer: string;
+    };
+};
+export declare const ValidationOnly: {
+    args: {
+        footer: string;
+    };
+};
+export declare const TwoOptions: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Link: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Navigation: {
+    args: {
+        footer: string;
+    };
+};
+//# sourceMappingURL=Popover.stories.d.ts.map

package/dist/components/popover/Popover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/components/popover/Popover.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,yEAAyE,CAAC;AAEjF,QAAA,MAAM,IAAI,EAAE,IAyDX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAQ1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAWtB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAStB,CAAC"}