@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/select/Select.stories.d.ts

@@ -3,7 +3,7 @@ import './Select.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 Small: Story;
 export declare const Disabled: Story;

package/dist/components/select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAiEX,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,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAiEX,CAAC;AACF,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,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/select/Select.stories.js

@@ -5,7 +5,7 @@ import './Select.svelte';
 const meta = {
     title: 'Form Elements/Select',
     component: 'm-select',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     argTypes: {
         size: {
             control: 'radio',
@@ -68,7 +68,7 @@ const meta = {
     },
 };
 export default meta;
-export const WithValue = {
+export const Value = {
     args: {
         id: 'withValueId',
         value: 'option1',

package/dist/components/select/Select.svelte

@@ -75,37 +75,60 @@
   }: Props = $props();
 </script>
 
-<select
-  {id}
-  class={[
+<div class={[
     'mc-select',
     `mc-select--${size}`,
-    readonly && 'mc-select--readonly',
-    isinvalid && 'is-invalid',
   ]}
-  {name}
-  {disabled}
-  bind:value
-  {...attrs}
 >
-  {#if placeholder}
-    <option value="" disabled selected>
-      -- {placeholder} --
-    </option>
-  {/if}
+  <select
+    {id}
+    class={[
+      'mc-select__control',
+      readonly && 'mc-select__control--readonly',
+      isinvalid && 'is-invalid',
+    ]}
+    {name}
+    {disabled}
+    bind:value
+    {...attrs}
+  >
+    {#if placeholder}
+      <option value="" disabled selected>
+        -- {placeholder} --
+      </option>
+    {/if}
 
-  {#each options as option, index (index)}
-    <option disabled={option.disabled} value={option.value}>
-      {option.text}
-    </option>
-  {/each}
-</select>
+    {#each options as option, index (index)}
+      <option disabled={option.disabled} value={option.value}>
+        {option.text}
+      </option>
+    {/each}
+  </select>
+</div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
 /* 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;
@@ -114,47 +137,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;

package/dist/components/select/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyDH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/sidebar/README.md

@@ -0,0 +1,28 @@
+# `m-sidebar`
+
+A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `expanded*` | Defines the sidebar state | `boolean` | `$bindable(true)` |
+| `onexpanded` | Callback to trigger when the sidebar state changes. | `(value: boolean) => void` |   |
+| `onclose` | Callback to trigger when the close button is clicked (mobile only). | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header` | Slot for the sidebar header. Should contain an `MSidebarHeader` component. |
+| `shortcuts` | Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component with one or more `MSidebarShortcutItem` components inside. |
+| `nav` | Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components. |
+| `footer` | Slot for the sidebar footer. Should contain an `MSidebarFooter` component. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:expanded` | Emits when the sidebar state changes. | `CustomEvent<void>` |
+| `close` | Emits when the sidebar is closed (mobile only). | `CustomEvent<void>` |
+

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,18 @@
+import{c as M,e as B,a as S,p as v,B as I,s as l,t as q,b as D,d as P,f as Q,h as o,m as u,r as i,j as R,l as A,i as F,w as G}from"../../custom-element.js";import{o as H}from"../../index-client.js";import{s as d}from"../../slot.js";import{b as J}from"../../this.js";import{q as K}from"../../Condition20.js";import{I as N}from"../iconbutton/IconButton.js";import{M as O}from"../../media-query.js";import"../../attributes.js";import"../../if.js";import"../../branches.js";import"../loader/Loader.js";var T=Q('<aside><div class="mc-sidebar__wrapper svelte-l14y5r"><!> <!> <section class="mc-sidebar__container svelte-l14y5r"><nav class="mc-sidebar__menu svelte-l14y5r" aria-label="navigation items"><ul class="mc-sidebar__list svelte-l14y5r"><!></ul></nav></section> <!></div> <span class="mc-sidebar__close-button svelte-l14y5r"><!></span></aside>');const U={hash:"svelte-l14y5r",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-sidebar.svelte-l14y5r {display:flex;align-items:start;font-size:var(--font-size-100, 0.875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));padding-right:4rem;position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar.svelte-l14y5r {display:inline-flex;padding-right:0;}
+}.mc-sidebar__wrapper.svelte-l14y5r {display:flex;flex-direction:column;gap:0.75rem;min-height:100vh;width:100%;padding:0.75rem;background-color:var(--sidebar-color-background-primary, #ffffff);}
+@media screen and (min-width: 680px) {.mc-sidebar__wrapper.svelte-l14y5r {width:17.25rem;}
+}.mc-sidebar__close-button.svelte-l14y5r {position:absolute;top:0.5rem;right:0.5rem;}
+@media screen and (min-width: 680px) {.mc-sidebar__close-button.svelte-l14y5r {display:none;}
+}.mc-sidebar__container.svelte-l14y5r {flex-grow:1;}.mc-sidebar__floating-item.svelte-l14y5r {position:absolute;padding-left:1.25rem;left:3rem;}.mc-sidebar__floating-item--tooltip.svelte-l14y5r {top:0.25rem;}.mc-sidebar__floating-item--expanded.svelte-l14y5r {left:0;padding:0;}
+@media screen and (min-width: 680px) {.mc-sidebar__floating-item--expanded.svelte-l14y5r {left:18.5rem;}
+}.mc-sidebar__floating-item--hidden.svelte-l14y5r {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}.mc-sidebar--expanded.svelte-l14y5r .mc-sidebar__menu:where(.svelte-l14y5r) {padding:0 0.25rem;}.mc-sidebar--collapsed.svelte-l14y5r {width:4rem;}.mc-sidebar--collapsed.svelte-l14y5r .mc-sidebar__menu:where(.svelte-l14y5r) {padding:0;}.mc-sidebar__footer-container.svelte-l14y5r {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;margin-top:0.5rem;}.mc-sidebar__footer-avatar.svelte-l14y5r {width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%);}.mc-sidebar__footer-profile.svelte-l14y5r {display:flex;align-items:center;gap:0.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));cursor:pointer;border:none;}.mc-sidebar__footer-profile.svelte-l14y5r:hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__footer-content.svelte-l14y5r {display:none;}.mc-sidebar__footer-title.svelte-l14y5r {margin:0;text-align:left;color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700);}.mc-sidebar__footer-subtitle.svelte-l14y5r {margin:0;font-size:var(--font-caption, 0.75rem);color:var(--sidebar-color-job-title, #666666);}.mc-sidebar__footer-expand.svelte-l14y5r {display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand.svelte-l14y5r {display:inline-flex;}
+}.mc-sidebar__footer-expand--mobile.svelte-l14y5r {position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand--mobile.svelte-l14y5r {display:none;}
+}.mc-sidebar__footer-menu.svelte-l14y5r {width:19.75rem;box-sizing:border-box;padding:0.5rem 0.75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, 0.5rem);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%));}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-menu.svelte-l14y5r {width:18.75rem;}
+}.mc-sidebar__header.svelte-l14y5r {display:flex;align-items:center;justify-content:center;gap:0.5rem;}.mc-sidebar__header-logo.svelte-l14y5r {width:2.5rem;height:2.5rem;}.mc-sidebar__header-title.svelte-l14y5r {font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none;}.mc-sidebar__listbox.svelte-l14y5r {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;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%));}.mc-sidebar__listbox-title.svelte-l14y5r {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:0.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040);}.mc-sidebar__list.svelte-l14y5r {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-l14y5r {display:flex;align-items:center;gap:0.25rem;height:2.5rem;width:100%;padding-left:0.25rem;text-align:left;text-decoration:none;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, 0.5rem);background:transparent;border:none;cursor:pointer;}.mc-sidebar__link--selected.svelte-l14y5r {color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de);}.mc-sidebar__link--locked.svelte-l14y5r {pointer-events:none;}.mc-sidebar__link.svelte-l14y5r:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-l14y5r: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-sidebar__icon.svelte-l14y5r {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__indicator.svelte-l14y5r {fill:currentcolor;width:1.25rem;height:1.25rem;}.mc-sidebar__text.svelte-l14y5r {display:block;}.mc-sidebar__sub.svelte-l14y5r {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-l14y5r {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-l14y5r {position:relative;}.mc-sidebar__shortcut-wrapper.svelte-l14y5r {width:100%;display:grid;justify-content:center;position:relative;}.mc-sidebar__shortcut-list.svelte-l14y5r {display:flex;margin:0;}.mc-sidebar__shortcut-list--grid.svelte-l14y5r {padding:0;gap:0.5rem;align-items:center;}.mc-sidebar__shortcut-list--stacked.svelte-l14y5r {gap:0.25rem;flex-direction:column;padding:0;}.mc-sidebar__shortcut-list--stacked.svelte-l14y5r:not(.mc-sidebar__shortcut-list--floating) {padding:0 0 0.5rem 1rem;margin-bottom:0.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-sidebar__shortcut-item.svelte-l14y5r {cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, 0.5rem);overflow:hidden;}.mc-sidebar__shortcut-item.svelte-l14y5r:hover {background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));}.mc-sidebar__shortcut-item.svelte-l14y5r:nth-child(n+5) {display:none;}.mc-sidebar__shortcut-item--grid.svelte-l14y5r {justify-content:center;padding:0 0.125rem;height:3rem;width:3.9375rem;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item--stacked.svelte-l14y5r {padding:0.125rem 0.25rem;width:12.5rem;height:2.5rem;}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating.svelte-l14y5r {width:100%;padding:0.125rem 0 0.125rem 0.25rem;}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item.svelte-l14y5r {background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de);}.mc-sidebar__shortcut-item.svelte-l14y5r:is(.mc-sidebar__trigger:where(.svelte-l14y5r)) {width:3rem;height:3rem;justify-content:center;border:none;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item.svelte-l14y5r:is(.mc-sidebar__trigger:where(.svelte-l14y5r)):hover {background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-link.svelte-l14y5r: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-sidebar__shortcut-link.svelte-l14y5r {text-decoration:none;display:flex;align-items:center;justify-content:center;}.mc-sidebar__shortcut-label.svelte-l14y5r {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden;}.mc-sidebar__shortcut-icon.svelte-l14y5r {fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem;}`};function V(f,r){B(r,!0),S(f,U);let t=v(r,"expanded",15,!0),n=v(r,"onexpanded",7),c=v(r,"onclose",7),a;const k=G(()=>new O("(max-width: 780px)").current);function h(){t(!t())}I(()=>{n()?.(t()),a.dispatchEvent(new CustomEvent("update:expanded",{detail:t(),bubbles:!0,composed:!0}))});function z(){c()?.(),a.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}function _(){F(k)&&t(!0)}H(()=>(document.addEventListener("toggle",h),window.addEventListener("resize",_),()=>{document.removeEventListener("toggle",h),window.removeEventListener("resize",_)}));var E={get expanded(){return t()},set expanded(e=!0){t(e),u()},get onexpanded(){return n()},set onexpanded(e){n(e),u()},get onclose(){return c()},set onclose(e){c(e),u()}},s=T(),m=o(s),p=o(m);d(p,r,"header",{},null);var g=l(p,2);d(g,r,"shortcuts",{},null);var b=l(g,2),y=o(b),x=o(y),j=o(x);d(j,r,"nav",{},null),i(x),i(y),i(b);var C=l(b,2);d(C,r,"footer",{},null),i(m);var w=l(m,2),L=o(w);return N(L,{ghost:!0,"aria-label":"Sidebar close button",onclick:z,$$slots:{icon:(e,W)=>{K(e,{slot:"icon"})}}}),i(w),i(s),J(s,e=>a=e,()=>a),q(()=>R(s,1,A(["mc-sidebar",`mc-sidebar--${t()?"expanded":"collapsed"}`]),"svelte-l14y5r")),D(f,s),P(E)}customElements.define("m-sidebar",M(V,{expanded:{attribute:"expanded",reflect:!0,type:"Boolean"},onexpanded:{},onclose:{}},["header","shortcuts","nav","footer"],[],{mode:"open"}));
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar',\n    props: {\n      expanded: { reflect: true, type: 'Boolean', attribute: 'expanded' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { MediaQuery } from 'svelte/reactivity';\n\n  /**\n   * A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.\n   * @slot header - Slot for the sidebar header. Should contain an `MSidebarHeader` component.\n   * @slot shortcuts - Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component with one or more `MSidebarShortcutItem` components inside.\n   * @slot nav - Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components.\n   * @slot footer - Slot for the sidebar footer. Should contain an `MSidebarFooter` component.\n   * @event update:expanded {CustomEvent<void>} - Emits when the sidebar state changes.\n   * @event close {CustomEvent<void>} - Emits when the sidebar is closed (mobile only).\n   */\n\n  interface Props {\n    /**\n     * Defines the sidebar state\n     */\n    expanded: boolean;\n    /**\n     * Callback to trigger when the sidebar state changes.\n     */\n    onexpanded?: (value: boolean) => void;\n    /**\n     * Callback to trigger when the close button is clicked (mobile only).\n     */\n    onclose?: () => void;\n  }\n\n  let { expanded = $bindable(true), onexpanded, onclose }: Props = $props();\n\n  let element: HTMLElement;\n\n  const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);\n\n  function toggle() {\n    expanded = !expanded;\n  }\n\n  $effect(() => {\n    onexpanded?.(expanded);\n\n    element.dispatchEvent(\n      new CustomEvent('update:expanded', {\n        detail: expanded,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  });\n\n  function handleClose() {\n    onclose?.();\n    element.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n\n  function handleResize() {\n    if (isMobile) {\n      expanded = true;\n    }\n  }\n\n  onMount(() => {\n    document.addEventListener('toggle', toggle);\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      document.removeEventListener('toggle', toggle);\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n</script>\n\n<aside\n  bind:this={element}\n  class={['mc-sidebar', `mc-sidebar--${expanded ? 'expanded' : 'collapsed'}`]}\n>\n  <div class=\"mc-sidebar__wrapper\">\n    <slot name=\"header\" />\n\n    <slot name=\"shortcuts\" />\n\n    <section class=\"mc-sidebar__container\">\n      <nav class=\"mc-sidebar__menu\" aria-label=\"navigation items\">\n        <ul class=\"mc-sidebar__list\">\n          <slot name=\"nav\" />\n        </ul>\n      </nav>\n    </section>\n\n    <slot name=\"footer\" />\n  </div>\n\n  <span class=\"mc-sidebar__close-button\">\n    <IconButton ghost aria-label=\"Sidebar close button\" onclick={handleClose}>\n      <Cross24 slot=\"icon\" />\n    </IconButton>\n  </span>\n</aside>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["expanded","onexpanded","$.prop","$$props","onclose","element","isMobile","$.derived","MediaQuery","toggle","$.user_effect","handleClose","handleResize","$.get","onMount","aside","root","div","$.child","section","$.sibling","node_1","nav","ul","span","IconButton","node_4","Cross24","$$anchor","$.reset","$$value","$.append"],"mappings":";;;;;;;;;;;;;;;;s3KASA,gBA+BQ,IAAAA,oBAAqB,EAAI,EAAGC,EAAUC,EAAAC,EAAA,aAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAEjDE,EAEE,MAAAC,EAAQC,EAAA,IAAA,IAAgBC,EAAW,oBAAoB,EAAE,OAAO,EAE7D,SAAAC,GAAS,CAChBT,GAAYA,GAAQ,CACtB,CAEAU,EAAO,IAAO,CACZT,EAAU,IAAGD,GAAQ,EAErBK,EAAQ,cAAa,IACf,YAAY,kBAAiB,CAC/B,OAAQL,EAAQ,EAChB,QAAS,GACT,SAAU,EAAI,CAAA,CAAA,CAGpB,CAAC,EAEQ,SAAAW,GAAc,CACrBP,MAAO,EACPC,EAAQ,cAAa,IAAK,YAAY,QAAO,CAAI,QAAS,GAAM,SAAU,EAAI,CAAA,CAAA,CAChF,CAES,SAAAO,GAAe,CAClBC,EAAAP,CAAQ,GACVN,EAAW,EAAI,CAEnB,CAEAc,EAAO,KACL,SAAS,iBAAiB,SAAUL,CAAM,EAC1C,OAAO,iBAAiB,SAAUG,CAAY,EAEjC,IAAA,CACX,SAAS,oBAAoB,SAAUH,CAAM,EAC7C,OAAO,oBAAoB,SAAUG,CAAY,CACnD,EACD,mDAzC0B,GAAI,wHA4ChCG,EAAAC,EAAA,EAIEC,EAAGC,EAJLH,CAAA,MAIEE,CAAG,sEAKDE,EAAOC,EAAAC,EAAA,CAAA,EACLC,IADFH,CAAO,EAEHI,IADFD,CAAG,MACDC,CAAE,yBAAFA,CAAE,IADJD,CAAG,IADLH,CAAO,UAAPA,EAAO,CAAA,4BALTF,CAAG,EAgBH,IAAAO,IAhBAP,EAAG,CAAA,MAgBHO,CAAI,EACF,OAAAC,EAAUC,EAAA,sDAAkDf,wBAC1DgB,EAAOC,EAAA,CAAA,KAAA,MAAA,CAAA,QAFXJ,CAAI,EApBNK,EAAAd,CAAA,IAAAA,EAAAe,GACYzB,QAAAA,CAAO,UADnBU,OAES,4BAA6Bf,IAAW,WAAa,WAAW,uBAFzE+B,EAAAH,EAAAb,CAAA,MAFO"}

package/dist/components/sidebar/Sidebar.spec.js

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, afterAll, beforeAll } from 'vitest';
+import { render, waitFor, fireEvent } from '@testing-library/svelte';
+import Sidebar from './Sidebar.svelte';
+beforeAll(() => {
+    vi.stubGlobal('matchMedia', (query) => ({
+        matches: query.includes('max-width: 780px'),
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+});
+afterAll(() => {
+    vi.unstubAllGlobals();
+});
+describe('Sidebar component', () => {
+    it('renders expanded by default', () => {
+        const { container } = render(Sidebar);
+        const aside = container.querySelector('aside');
+        expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
+    });
+    it('reflects provided expanded prop and updates when changed', async () => {
+        const { container, rerender } = render(Sidebar, { expanded: false });
+        const aside = container.querySelector('aside');
+        expect(aside.classList.contains('mc-sidebar--collapsed')).toBe(true);
+        await rerender({ expanded: true });
+        await waitFor(() => {
+            expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
+        });
+    });
+    it('toggles on document "toggle" event and calls onexpanded and emits update:expanded', async () => {
+        const onexpanded = vi.fn();
+        const { container } = render(Sidebar, { onexpanded });
+        const aside = container.querySelector('aside');
+        const updateHandler = vi.fn();
+        aside.addEventListener('update:expanded', (e) => {
+            updateHandler(e.detail);
+        });
+        expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
+        document.dispatchEvent(new Event('toggle'));
+        await waitFor(() => {
+            expect(onexpanded).toHaveBeenCalled();
+            expect(updateHandler).toHaveBeenCalled();
+            expect(aside.classList.contains('mc-sidebar--collapsed')).toBe(true);
+        });
+    });
+    it('should call onclose and emit close event on close button click', async () => {
+        const onclose = vi.fn();
+        const { container } = render(Sidebar, { props: { onclose } });
+        const button = container.querySelector('.mc-sidebar__close-button button');
+        expect(button).not.toBeNull();
+        const aside = container.querySelector('aside');
+        const closeEventListener = vi.fn();
+        aside?.addEventListener('close', closeEventListener);
+        await fireEvent.click(button);
+        expect(onclose).toHaveBeenCalled();
+        expect(closeEventListener).toHaveBeenCalled();
+    });
+    it('should set expanded to true on resize when isMobile', async () => {
+        vi.stubGlobal('matchMedia', (query) => ({
+            matches: true, // mobile
+            media: query,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        }));
+        const { container } = render(Sidebar, { props: { expanded: false } });
+        const aside = container.querySelector('aside');
+        expect(aside?.classList.contains('mc-sidebar--collapsed')).toBe(true);
+        window.dispatchEvent(new Event('resize'));
+        await Promise.resolve(); // attendre le $effect
+        expect(aside?.classList.contains('mc-sidebar--expanded')).toBe(true);
+    });
+});

package/dist/components/sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/components/Admin24/Admin24.svelte';
+import '@mozaic-ds/icons-svelte/components/Coffee24/Coffee24.svelte';
+import '@mozaic-ds/icons-svelte/components/Course24/Course24.svelte';
+import '@mozaic-ds/icons-svelte/components/Release24/Release24.svelte';
+import '@mozaic-ds/icons-svelte/components/Sample24/Sample24.svelte';
+import '@mozaic-ds/icons-svelte/components/Palette24/Palette24.svelte';
+import '@mozaic-ds/icons-svelte/components/Pantone24/Pantone24.svelte';
+import './Sidebar.svelte';
+import '../sidebarexpandableitem/SidebarExpandableItem.svelte';
+import '../sidebarfooter/SidebarFooter.svelte';
+import '../sidebarheader/SidebarHeader.svelte';
+import '../sidebarnavitem/SidebarNavItem.svelte';
+import '../sidebarshortcutitem/SidebarShortcutItem.svelte';
+import '../sidebarshortcuts/SidebarShortcuts.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const ExpandFeatureOnly: Story;
+export declare const ProfileInfoOnly: Story;
+export declare const SingleLevelOnly: Story;
+//# sourceMappingURL=Sidebar.stories.d.ts.map

package/dist/components/sidebar/Sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/Sidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,CAAC;AACrE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AACvE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AACvE,OAAO,+DAA+D,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uDAAuD,CAAC;AAC/D,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,6CAA6C,CAAC;AAGrD,QAAA,MAAM,IAAI,EAAE,IAwGX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,iBAAiB,EAAE,KA8D/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoF7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6D7B,CAAC"}