@mozaic-ds/web-components 1.5.1 → 1.7.0

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

@@ -0,0 +1,124 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Popover.svelte';
+import '../button/Button.svelte';
+import '../link/Link.svelte';
+import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
+const meta = {
+    title: 'Overlay/Popover',
+    component: 'm-popover',
+    tags: ['v2'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        position: {
+            control: 'radio',
+            options: ['top', 'left', 'right', 'bottom'],
+        },
+        appearance: {
+            control: 'radio',
+            options: ['standard', 'inverse'],
+        },
+        size: {
+            control: 'radio',
+            options: ['s', 'm', 'l'],
+        },
+    },
+    args: {
+        open: true,
+        title: 'Title',
+        description: 'Description',
+        footer: `
+      <m-button slot="footer" size="s" aria-label="Popover action button">
+        Button label
+      </m-button>
+    `,
+    },
+    render: (args) => {
+        return html `
+      <m-popover
+        ?open="${args.open}"
+        appearance="${ifDefined(args.appearance)}"
+        position="${ifDefined(args.position)}"
+        ?pointer="${args.pointer}"
+        ?closable="${args.closable}"
+        size="${ifDefined(args.size)}"
+        title="${ifDefined(args.title)}"
+        description="${ifDefined(args.description)}"
+      >
+        <m-button
+          slot="activator"
+          @click="${() => {
+            const popover = document.querySelector('m-popover');
+            popover.open = !popover.open;
+        }}"
+        >
+          Activator
+        </m-button>
+        ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.footer))}
+      </m-popover>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Inverse = {
+    args: {
+        appearance: 'inverse',
+        footer: `
+      <m-link slot="footer" appearance="inverse" href="#" size="s" icon-position="right">
+        Stand-alone link
+        <template #icon><ExternalLink24 /></template>
+      </m-link>
+      <m-button slot="footer" appearance="inverse" size="s" aria-label="Popover action button">
+        Button label
+      </m-button>
+    `,
+    },
+};
+export const ValidationOnly = {
+    args: {
+        footer: `
+      <m-button slot="footer" size="s" aria-label="Popover action button">
+        Button label
+      </m-button>
+    `,
+    },
+};
+export const TwoOptions = {
+    args: {
+        footer: `
+      <m-button slot="footer" size="s" outlined aria-label="Popover action button">
+        Button label
+      </m-button>
+      <m-button slot="footer" size="s" aria-label="Popover action button">
+        Button label
+      </m-button>
+    `,
+    },
+};
+export const Link = {
+    args: {
+        footer: `
+      <m-link slot="footer" href="#" size="s" iconposition="right">
+        Stand-alone link
+        <external-link-24 slot="icon"></external-link-24>
+      </m-link>
+      <m-button slot="footer" size="s" aria-label="Popover action button">
+        Button label
+      </m-button>
+    `,
+    },
+};
+export const Navigation = {
+    args: {
+        footer: `
+      <m-link slot="footer" href="#" size="s" iconposition="right">
+        Stand-alone link
+        <external-link-24 slot="icon"></external-link-24>
+      </m-link>
+    `,
+    },
+};

package/dist/components/popover/Popover.svelte

@@ -0,0 +1,348 @@
+<svelte:options
+  customElement={{
+    tag: 'm-popover',
+    props: {
+      open: { reflect: true, type: 'Boolean', attribute: 'open' },
+      pointer: { reflect: true, type: 'Boolean', attribute: 'pointer' },
+      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import { Cross20 } from '@mozaic-ds/icons-svelte';
+
+  /**
+   * 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.
+   * 
+   * @slot default - Main content of the popover.
+   * @slot footer - Use this slot to insert buttons or link in the footer.
+   * @slot activator - Activator element that triggers the popover.
+   */
+
+  interface Props {
+    /**
+     * If `true`, display the popover.
+     */
+    open: boolean;
+    /**
+     * Allows to define the popover appearance.
+     */
+    appearance?: 'standard' | 'inverse';
+    /**
+     * Defines the preferred position of the popover relative to its activator.
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Controls the visibility of the popover pointer (arrow).
+     */
+    pointer?: boolean;
+    /**
+     * Determines the size of the popover.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+    /**
+     * Title displayed at the top of the popover.
+     */
+    title?: string;
+    /**
+     * Supplementary text displayed below the title.
+     */
+    description?: string;
+  }
+
+  let {
+    open = $bindable(),
+    appearance = 'standard',
+    position = 'top',
+    pointer = true,
+    size = 's',
+    closable = true,
+    title,
+    description,
+  }: Props = $props();
+
+  // TODO: Remove when typescript is up to date
+  type PopoverOptions = {
+    source: HTMLElement;
+  };
+
+  type Popover = {
+    showPopover: (options?: PopoverOptions) => void;
+    hidePopover: (options?: PopoverOptions) => void;
+  };
+
+  const id = crypto.randomUUID();
+
+  let element: HTMLElement;
+  let popover: HTMLElement;
+  let activator: HTMLElement;
+
+  function togglePopover() {
+    if (!popover || !activator) return;
+
+    if (open) {
+      (popover as Popover).showPopover({ source: activator });
+      popover.focus();
+    } else {
+      (popover as Popover).hidePopover({ source: activator });
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    const path = event.composedPath ? event.composedPath() : [];
+    if (!path.includes(element) && !path.includes(activator)) {
+      open = false;
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  $effect(togglePopover);
+
+  onMount(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
+</script>
+
+<div
+  bind:this={element}
+  class={{
+    'mc-popover': true,
+    [`mc-popover--${appearance}`]: true,
+    [`mc-popover--${position}`]: true,
+    'mc-popover--no-pointer': !pointer,
+    [`mc-popover--${size}`]: true,
+  }}
+>
+  <div bind:this={activator}>
+    <slot name="activator" />
+  </div>
+
+  <div
+    bind:this={popover}
+    id={`popover-${id}`}
+    role="dialog"
+    tabindex="0"
+    class="mc-popover__wrapper"
+    popover="manual"
+    aria-labelledby={title ? `${id}-title` : undefined}
+    aria-describedby={description ? `${id}-description` : undefined}
+    onkeydown={onKeydown}
+  >
+    <div class="mc-popover__content">
+      {#if title || description}
+        <div class="mc-popover__headings">
+          {#if title}
+            <p id={`${id}-title`} class="mc-popover__title">
+              {title}
+            </p>
+          {/if}
+
+          {#if description}
+            <p id={`${id}-description`} class="mc-popover__description">
+              {description}
+            </p>
+          {/if}
+        </div>
+      {/if}
+
+      <div>
+        <slot />
+      </div>
+
+      {#if closable}
+        {#snippet icon()}
+          <Cross20 />
+        {/snippet}
+        <div class="mc-popover__close">
+          <IconButton
+            ghost
+            {icon}
+            appearance={appearance}
+            iconposition="only"
+            aria-label="Close button"
+            onclick={() => (open = false)}
+          />
+        </div>
+      {/if}
+      
+      <footer class="mc-popover__footer">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-popover__wrapper {
+  border-radius: var(--border-radius-m, 0.5rem);
+}
+.mc-popover__wrapper: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 {
+  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 {
+    width: max-content;
+  }
+}
+.mc-popover__wrapper::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::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 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.mc-popover__headings {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mc-popover__close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+.mc-popover__title {
+  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 {
+  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 {
+  display: flex;
+  justify-content: end;
+  gap: 1rem;
+}
+.mc-popover--inverse .mc-popover__wrapper {
+  background-color: var(--popover-color-background-inverse, #242938);
+  border-color: var(--popover-color-border-inverse, #636d88);
+}
+.mc-popover--inverse .mc-popover__wrapper::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 .mc-popover__wrapper::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 .mc-popover__title, .mc-popover--inverse .mc-popover__description {
+  color: var(--popover-color-text-inverse, #ffffff);
+}
+.mc-popover--s .mc-popover__wrapper {
+  width: 18rem;
+}
+.mc-popover--m .mc-popover__wrapper {
+  width: 27.75rem;
+}
+.mc-popover--l .mc-popover__wrapper {
+  width: 37.5rem;
+}
+.mc-popover--top .mc-popover__wrapper {
+  margin: 0 0 10px;
+  inset: auto;
+  position-area: top;
+}
+.mc-popover--top .mc-popover__wrapper::after, .mc-popover--top .mc-popover__wrapper::before {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%) rotate(-90deg);
+}
+.mc-popover--top .mc-popover__wrapper::before {
+  bottom: -1px;
+}
+.mc-popover--right .mc-popover__wrapper {
+  margin: 0 0 0 10px;
+  inset: auto;
+  position-area: right;
+}
+.mc-popover--right .mc-popover__wrapper::after, .mc-popover--right .mc-popover__wrapper::before {
+  top: 50%;
+  left: 0;
+  transform: translate(-99%, -50%);
+}
+.mc-popover--right .mc-popover__wrapper::before {
+  left: -1px;
+}
+.mc-popover--left .mc-popover__wrapper {
+  margin: 0 10px 0 0;
+  inset: auto;
+  position-area: left;
+}
+.mc-popover--left .mc-popover__wrapper::after, .mc-popover--left .mc-popover__wrapper::before {
+  top: 50%;
+  right: 0;
+  transform: translate(99%, -50%) rotate(180deg);
+}
+.mc-popover--left .mc-popover__wrapper::before {
+  right: -1px;
+}
+.mc-popover--bottom .mc-popover__wrapper {
+  margin: 10px 0 0;
+  inset: auto;
+  position-area: bottom;
+}
+.mc-popover--bottom .mc-popover__wrapper::after, .mc-popover--bottom .mc-popover__wrapper::before {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -100%) rotate(90deg);
+}
+.mc-popover--bottom .mc-popover__wrapper::before {
+  top: -1px;
+}
+.mc-popover--no-pointer .mc-popover__wrapper::after, .mc-popover--no-pointer .mc-popover__wrapper::before {
+  background: none;
+}</style>

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

@@ -0,0 +1,79 @@
+/**
+ * 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.
+ *
+ * @slot default - Main content of the popover.
+ * @slot footer - Use this slot to insert buttons or link in the footer.
+ * @slot activator - Activator element that triggers the popover.
+ */
+interface Props {
+    /**
+     * If `true`, display the popover.
+     */
+    open: boolean;
+    /**
+     * Allows to define the popover appearance.
+     */
+    appearance?: 'standard' | 'inverse';
+    /**
+     * Defines the preferred position of the popover relative to its activator.
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Controls the visibility of the popover pointer (arrow).
+     */
+    pointer?: boolean;
+    /**
+     * Determines the size of the popover.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+    /**
+     * Title displayed at the top of the popover.
+     */
+    title?: string;
+    /**
+     * Supplementary text displayed below the title.
+     */
+    description?: string;
+}
+type PopoverOptions = {
+    source: HTMLElement;
+};
+type Popover = {
+    showPopover: (options?: PopoverOptions) => void;
+    hidePopover: (options?: PopoverOptions) => void;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Popover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    activator: {};
+    default: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    activator: {};
+    default: {};
+    footer: {};
+}, {}, "open">;
+export default Popover;
+//# sourceMappingURL=Popover.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/popover/Popover.svelte.ts"],"names":[],"mappings":"AAQE;;;;;;GAMG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,KAAK,cAAc,GAAG;IACpB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD,CAAC;AA2HJ,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;;;;;cAAqF,CAAC;AAEnF,eAAe,OAAO,CAAC"}

package/dist/components/popover/README.md

@@ -0,0 +1,25 @@
+# `m-popover`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `open*` | If `true`, display the popover. | `boolean` | `$bindable()` |
+| `appearance` | Allows to define the popover appearance. | `'standard'` `'inverse'` | `standard` |
+| `position` | Defines the preferred position of the popover relative to its activator. | `'top'` `'right'` `'bottom'` `'left'` | `top` |
+| `pointer` | Controls the visibility of the popover pointer (arrow). | `boolean` | `true` |
+| `size` | Determines the size of the popover. | `'s'` `'m'` `'l'` | `s` |
+| `closable` | if `true`, display the close button. | `boolean` | `true` |
+| `title` | Title displayed at the top of the popover. | `string` |   |
+| `description` | Supplementary text displayed below the title. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `activator` | Activator element that triggers the popover. |
+| `default` | Main content of the popover. |
+| `footer` | Use this slot to insert buttons or link in the footer. |
+

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,5 +1,5 @@
-import{o as C,c as H,p as J,a as K,b as o,s as h,t as O,f as P,g as R,h as T,i as U,d as n,j as s,r as i,l as W,m as X,e as V}from"../../custom-element.js";import{a as Y,s as B}from"../../attributes.js";import{c as Z}from"../../input.js";import{c as $}from"../../custom-element-forward-events.js";import{M as ee,L as te}from"../../Condition20.js";var re=T('<div><input/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>');const oe={hash:"svelte-ptlds1",code:`/**
+import{o as H,c as J,e as K,a as O,p as o,s as h,t as P,u as V,b as R,d as T,f as U,n as W,h as n,m as s,r as i,j as X,l as Y,k as B}from"../../custom-element.js";import{a as Z,s as E}from"../../attributes.js";import{c as $}from"../../input.js";import{c as ee}from"../../custom-element-forward-events.js";import{M as te,r as re}from"../../Condition20.js";var oe=U('<div><input/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>');const se={hash:"svelte-ptlds1",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-quantity-selector.svelte-ptlds1 {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:100%;height:3rem;box-sizing:border-box;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector__control.svelte-ptlds1 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;}.mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-ptlds1 {
-  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-ptlds1::after {transition:box-shadow 200ms ease;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector.svelte-ptlds1: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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):focus)::after {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-quantity-selector--s.svelte-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {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-quantity-selector.is-invalid.svelte-ptlds1: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);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function se(N,r){J(r,!0),K(N,oe);let d=o(r,"id",7),t=o(r,"value",15,1),l=o(r,"min",7,1),a=o(r,"max",7,100),b=o(r,"step",7,1),y=o(r,"size",7,"m"),u=o(r,"disabled",7),p=o(r,"isinvalid",7,!1),_=o(r,"name",7,"quantity-selector-input"),g=o(r,"readonly",7),q=o(r,"decrementlabel",7,"Decrement"),w=o(r,"incrementlabel",7,"Increment"),E=U(r,["$$slots","$$events","$$legacy","$$host","id","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel"]);const I=()=>{const e=Number(t());e>a()?t(a()):e<l()?t(l()):t(e)},j=()=>{const e=Number(t()),v=Number(b());e+v<=a()?t(e+v):t(a())},F=()=>{const e=Number(t()),v=Number(b());e-v>=l()?t(e-v):t(l())};var L={get id(){return d()},set id(e){d(e),s()},get value(){return t()},set value(e=1){t(e),s()},get min(){return l()},set min(e=1){l(e),s()},get max(){return a()},set max(e=100){a(e),s()},get step(){return b()},set step(e=1){b(e),s()},get size(){return y()},set size(e="m"){y(e),s()},get disabled(){return u()},set disabled(e){u(e),s()},get isinvalid(){return p()},set isinvalid(e=!1){p(e),s()},get name(){return _()},set name(e="quantity-selector-input"){_(e),s()},get readonly(){return g()},set readonly(e){g(e),s()},get decrementlabel(){return q()},set decrementlabel(e="Decrement"){q(e),s()},get incrementlabel(){return w()},set incrementlabel(e="Increment"){w(e),s()}},f=re(),x=n(f);Y(x,()=>({type:"number",id:d(),name:_(),oninput:I,class:"mc-quantity-selector__control","aria-valuemin":l(),"aria-valuemax":a(),"aria-valuenow":t(),"aria-invalid":`${p()}`,readonly:g(),disabled:u(),...E}),void 0,void 0,void 0,"svelte-ptlds1",!0);var c=h(x,2);c.__click=j;var k=n(c),M=n(k);ee(M,{}),i(k);var D=h(k,2),G=n(D,!0);i(D),i(c);var m=h(c,2);m.__click=F;var z=n(m),Q=n(z);te(Q,{}),i(z);var S=h(z,2),A=n(S,!0);return i(S),i(m),i(f),O(()=>{W(f,1,X(["mc-quantity-selector",`mc-quantity-selector--${y()}`,p()&&"is-invalid"]),"svelte-ptlds1"),B(c,"aria-controls",d()),c.disabled=t()===a()||u(),V(G,w()),B(m,"aria-controls",d()),m.disabled=t()===l()||u(),V(A,q())}),Z(x,t),P(N,f),R(L)}C(["click"]);customElements.define("m-quantityselector",H(se,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},value:{},min:{},max:{},step:{},size:{},name:{},decrementlabel:{},incrementlabel:{}},[],[],!0,$));
+ */.mc-quantity-selector.svelte-ptlds1 {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:100%;height:3rem;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;border-radius:var(--border-radius-s, 0.25rem);box-sizing:border-box;}.mc-quantity-selector__control.svelte-ptlds1 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;}.mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-ptlds1 {
+  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #000000);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, 0.05));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-ptlds1::after {transition:box-shadow 200ms ease;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector.svelte-ptlds1: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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):focus)::after {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-quantity-selector--s.svelte-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {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-quantity-selector.is-invalid.svelte-ptlds1: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);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function le(N,r){K(r,!0),O(N,se);let d=o(r,"id",7),t=o(r,"value",15,1),l=o(r,"min",7,1),a=o(r,"max",7,100),b=o(r,"step",7,1),y=o(r,"size",7,"m"),u=o(r,"disabled",7),p=o(r,"isinvalid",7,!1),_=o(r,"name",7,"quantity-selector-input"),g=o(r,"readonly",7),q=o(r,"decrementlabel",7,"Decrement"),w=o(r,"incrementlabel",7,"Increment"),I=W(r,["$$slots","$$events","$$legacy","$$host","id","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel"]);const j=()=>{const e=Number(t());e>a()?t(a()):e<l()?t(l()):t(e)},F=()=>{const e=Number(t()),v=Number(b());e+v<=a()?t(e+v):t(a())},M=()=>{const e=Number(t()),v=Number(b());e-v>=l()?t(e-v):t(l())};var G={get id(){return d()},set id(e){d(e),s()},get value(){return t()},set value(e=1){t(e),s()},get min(){return l()},set min(e=1){l(e),s()},get max(){return a()},set max(e=100){a(e),s()},get step(){return b()},set step(e=1){b(e),s()},get size(){return y()},set size(e="m"){y(e),s()},get disabled(){return u()},set disabled(e){u(e),s()},get isinvalid(){return p()},set isinvalid(e=!1){p(e),s()},get name(){return _()},set name(e="quantity-selector-input"){_(e),s()},get readonly(){return g()},set readonly(e){g(e),s()},get decrementlabel(){return q()},set decrementlabel(e="Decrement"){q(e),s()},get incrementlabel(){return w()},set incrementlabel(e="Increment"){w(e),s()}},f=oe(),x=n(f);Z(x,()=>({type:"number",id:d(),name:_(),oninput:j,class:"mc-quantity-selector__control","aria-valuemin":l(),"aria-valuemax":a(),"aria-valuenow":t(),"aria-invalid":`${p()}`,readonly:g(),disabled:u(),...I}),void 0,void 0,void 0,"svelte-ptlds1",!0);var c=h(x,2),k=n(c),L=n(k);te(L,{}),i(k);var D=h(k,2),Q=n(D,!0);i(D),i(c);var m=h(c,2),z=n(m),A=n(z);re(A,{}),i(z);var S=h(z,2),C=n(S,!0);return i(S),i(m),i(f),P(()=>{X(f,1,Y(["mc-quantity-selector",`mc-quantity-selector--${y()}`,p()&&"is-invalid"]),"svelte-ptlds1"),E(c,"aria-controls",d()),c.disabled=t()===a()||u(),B(Q,w()),E(m,"aria-controls",d()),m.disabled=t()===l()||u(),B(C,q())}),$(x,t),V("click",c,F),V("click",m,M),R(N,f),T(G)}H(["click"]);customElements.define("m-quantityselector",J(le,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},value:{},min:{},max:{},step:{},size:{},name:{},decrementlabel:{},incrementlabel:{}},[],[],{mode:"open"},ee));
 //# sourceMappingURL=QuantitySelector.js.map

package/dist/components/quantityselector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\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    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { More24, Less24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n    ...attrs\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\n    {disabled}\n    {...attrs}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","$.prop","$$props","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","attrs","$.rest_props","onValue","numericValue","onIncrement","numericStep","onDecrement","div","root","input","$.child","button","$.sibling","span","More24","node","span_1","$.reset","button_1","span_2","Less24","node_1","span_3","$.set_attribute","$.bind_value","customElementForwardEvents"],"mappings":";;;svHAYA,qBA2DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,cAAM,CAAC,EACPC,cAAM,GAAG,EACTC,eAAO,CAAC,EACRC,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,EACzBC,EAAAC,EAAAb,EAAA,8JAGC,MAAAc,EAAO,IAAe,OACpBC,EAAe,OAAOd,GAAK,EAC7Bc,EAAeZ,IACjBF,EAAQE,EAAG,CAAA,EACFY,EAAeb,IACxBD,EAAQC,EAAG,CAAA,EAEXD,EAAQc,CAAY,CAExB,EAEMC,EAAW,IAAe,OACxBD,EAAe,OAAOd,GAAK,EAC3BgB,EAAc,OAAOb,GAAI,EAE3BW,EAAeE,GAAed,IAChCF,EAAQc,EAAeE,CAAW,EAElChB,EAAQE,EAAG,CAAA,CAEf,EAEMe,EAAW,IAAe,OACxBH,EAAe,OAAOd,GAAK,EAC3BgB,EAAc,OAAOb,GAAI,EAE3BW,EAAeE,GAAef,IAChCD,EAAQc,EAAeE,CAAW,EAElChB,EAAQC,EAAG,CAAA,CAEf,sFA7CoB,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,YAsC/BiB,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,yBAEEvB,EAAE,OACFU,EAAI,UAEIM,wDAEMZ,EAAG,kBACHC,EAAG,kBACHF,EAAK,oBACHM,EAAS,CAAA,YACzBE,EAAQ,WACRH,EAAQ,KACLM,iDAELW,EAAAC,EAfAH,EAAA,CAAA,EAeAE,EAMC,QAASP,EAER,IAAAS,EAAIH,EARNC,CAAA,MAQEE,CAAI,EACFC,GAAMC,EAAA,EAAA,IADRF,CAAI,EAGJ,IAAAG,IAHAH,EAAI,CAAA,MAGJG,EAAI,EAAA,IAAJA,CAAI,EAXNC,EAAAN,CAAA,MAaAO,EAAAN,EAbAD,EAAA,CAAA,EAaAO,EAMC,QAASZ,EAER,IAAAa,EAAIT,EARNQ,CAAA,MAQEC,CAAI,EACFC,GAAMC,EAAA,EAAA,IADRF,CAAI,EAGJ,IAAAG,IAHAH,EAAI,CAAA,MAGJG,EAAI,EAAA,WAAJA,CAAI,EAXNL,EAAAC,CAAA,IA7BFX,CAAG,WAAHA,OAAY,gDAAiDd,EAAI,CAAA,GAAIE,KAAa,gCAgBhF4B,EAAAZ,EAAA,gBAEgBzB,GAAE,EAFlByB,EAAA,SAKWtB,EAAK,IAAKE,EAAG,GAAIG,EAAQ,MAMQK,GAAc,EAE1DwB,EAAAL,EAAA,gBAEgBhC,GAAE,EAFlBgC,EAAA,SAKW7B,EAAK,IAAKC,EAAG,GAAII,EAAQ,MAMQI,GAAc,IAvC1D0B,EAAAf,EAAApB,CAAA,MADFkB,CAAG,MAFI,kVA9GIkB"}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\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    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { More24, Less24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n    ...attrs\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\n    {disabled}\n    {...attrs}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","$.prop","$$props","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","attrs","$.rest_props","onValue","numericValue","onIncrement","numericStep","onDecrement","div","root","input","$.child","button","$.sibling","span","More24","node","span_1","$.reset","button_1","span_2","Less24","node_1","span_3","$.set_attribute","$.bind_value","$.delegated","customElementForwardEvents"],"mappings":";;;ivHAYA,qBA2DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,cAAM,CAAC,EACPC,cAAM,GAAG,EACTC,eAAO,CAAC,EACRC,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,EACzBC,EAAAC,EAAAb,EAAA,8JAGC,MAAAc,EAAO,IAAe,OACpBC,EAAe,OAAOd,GAAK,EAC7Bc,EAAeZ,IACjBF,EAAQE,EAAG,CAAA,EACFY,EAAeb,IACxBD,EAAQC,EAAG,CAAA,EAEXD,EAAQc,CAAY,CAExB,EAEMC,EAAW,IAAe,OACxBD,EAAe,OAAOd,GAAK,EAC3BgB,EAAc,OAAOb,GAAI,EAE3BW,EAAeE,GAAed,IAChCF,EAAQc,EAAeE,CAAW,EAElChB,EAAQE,EAAG,CAAA,CAEf,EAEMe,EAAW,IAAe,OACxBH,EAAe,OAAOd,GAAK,EAC3BgB,EAAc,OAAOb,GAAI,EAE3BW,EAAeE,GAAef,IAChCD,EAAQc,EAAeE,CAAW,EAElChB,EAAQC,EAAG,CAAA,CAEf,sFA7CoB,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,YAsC/BiB,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,yBAEEvB,EAAE,OACFU,EAAI,UAEIM,wDAEMZ,EAAG,kBACHC,EAAG,kBACHF,EAAK,oBACHM,EAAS,CAAA,YACzBE,EAAQ,WACRH,EAAQ,KACLM,iDAELW,EAAAC,EAfAH,EAAA,CAAA,EAuBEI,EAAIH,EARNC,CAAA,MAQEE,CAAI,EACFC,GAAMC,EAAA,EAAA,IADRF,CAAI,EAGJ,IAAAG,IAHAH,EAAI,CAAA,MAGJG,EAAI,EAAA,IAAJA,CAAI,EAXNC,EAAAN,CAAA,MAaAO,EAAAN,EAbAD,EAAA,CAAA,EAqBEQ,EAAIT,EARNQ,CAAA,MAQEC,CAAI,EACFC,GAAMC,EAAA,EAAA,IADRF,CAAI,EAGJ,IAAAG,IAHAH,EAAI,CAAA,MAGJG,EAAI,EAAA,WAAJA,CAAI,EAXNL,EAAAC,CAAA,IA7BFX,CAAG,WAAHA,OAAY,gDAAiDd,EAAI,CAAA,GAAIE,KAAa,gCAgBhF4B,EAAAZ,EAAA,gBAEgBzB,GAAE,EAFlByB,EAAA,SAKWtB,EAAK,IAAKE,EAAG,GAAIG,EAAQ,MAMQK,GAAc,EAE1DwB,EAAAL,EAAA,gBAEgBhC,GAAE,EAFlBgC,EAAA,SAKW7B,EAAK,IAAKC,EAAG,GAAII,EAAQ,MAMQI,GAAc,IAvC1D0B,EAAAf,EAAApB,CAAA,EAeAoC,EAAA,QAAAd,EAMUP,CAAW,EAOrBqB,EAAA,QAAAP,EAMUZ,CAAW,MAnCvBC,CAAG,MAFI,6VA9GImB"}