@mozaic-ds/web-components 1.3.0 → 1.5.0

package/dist/components/stepperbottombar/StepperBottomBar.stories.js

@@ -0,0 +1,74 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+import './StepperBottomBar.svelte';
+const meta = {
+    title: 'Structure/Stepper Bottom Bar',
+    component: 'm-stepper-bottom-bar',
+    tags: ['v2'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '200px' },
+        },
+    },
+    args: {
+        step: 0,
+        steps: 3,
+    },
+    argTypes: {
+        cancel: {
+            control: false,
+        },
+        change: {
+            control: false,
+        },
+        validate: {
+            control: false,
+        },
+        '--stepper-bottom-bar-z-index': {
+            description: 'Customise the z-index of the stepper bottom bar',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '3' },
+            },
+        },
+    },
+    render: (args) => {
+        const onCancel = action('cancel');
+        const onChange = action('change');
+        const onValidate = action('validate');
+        return html ` <m-stepper-bottom-bar
+      step="${ifDefined(args.step)}"
+      steps="${ifDefined(args.steps)}"
+      ?cancel="${args.cancel}"
+      cancellabel="${ifDefined(args.cancellabel)}"
+      previouslabel="${ifDefined(args.previouslabel)}"
+      nextlabel="${ifDefined(args.nextlabel)}"
+      validatelabel="${ifDefined(args.validatelabel)}"
+      @cancel=${(event) => {
+            onCancel(event);
+        }}
+      @change=${(event) => {
+            onChange(event.detail);
+        }}
+      @validate=${(event) => {
+            onValidate(event);
+        }}
+    ></m-stepper-bottom-bar>`;
+    },
+};
+export default meta;
+export const First = {};
+export const Middle = {
+    args: {
+        step: 2,
+    },
+};
+export const Last = {
+    args: {
+        step: 3,
+    },
+};

package/dist/components/stepperbottombar/StepperBottomBar.svelte

@@ -0,0 +1,535 @@
+<svelte:options
+  customElement={{
+    tag: 'm-stepper-bottom-bar',
+    props: {
+      step: { reflect: true, type: 'Number', attribute: 'step' },
+      steps: { reflect: true, type: 'Number', attribute: 'steps' },
+      cancel: { reflect: true, type: 'Boolean', attribute: 'cancel' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import Button from '../button/Button.svelte';
+  import Divider from '../divider/Divider.svelte';
+  /**
+   * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+   *
+   * @event cancel {CustomEvent<void>} - Emits when the cancel button is clicked.
+   * @event change {CustomEvent<number>} - Emits when the step change.
+   * @event validate {CustomEvent<void>} - Emits when the validate button is clicked.
+   */
+  interface Props {
+    /**
+     * Current step of the stepper bottom bar.
+     */
+    step?: number;
+    /**
+     * Total number of steps of the stepper bottom bar.
+     */
+    steps?: number;
+    /**
+     * If `true`, display the cancel button.
+     */
+    cancel?: boolean;
+    /**
+     * Label for the cancel button.
+     */
+    cancellabel?: string;
+    /**
+     * Label for the previous button.
+     */
+    previouslabel?: string;
+    /**
+     * Label for the next button.
+     */
+    nextlabel?: string;
+    /**
+     * Label for the validate button.
+     */
+    validatelabel?: string;
+  }
+
+  let {
+    step = $bindable(0),
+    steps = $bindable(0),
+    cancel = true,
+    cancellabel = 'Cancel',
+    previouslabel = 'Previous',
+    nextlabel = 'Next',
+    validatelabel = 'Validate',
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  function onCancel(): void {
+    const cencenEvent = new CustomEvent('cancel', {
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(cencenEvent);
+  }
+
+  function onPrevious(): void {
+    if (step > 0) {
+      step--;
+      const event = new CustomEvent('change', {
+        detail: step,
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    }
+  }
+
+  function onNext(): void {
+    if (step < steps) {
+      step++;
+      const event = new CustomEvent('change', {
+        detail: step,
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    } else {
+      const event = new CustomEvent('validate', {
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    }
+  }
+</script>
+
+<div class="mc-stepper-bottom-bar" bind:this={element}>
+  <Divider />
+  <div class="mc-stepper-bottom-bar__left">
+    {#if cancel}
+      <span class="mc-stepper-bottom-bar__button--text">
+        <Button ghost size="s" onclick={onCancel}>
+          <span class="mc-button__label">{cancellabel}</span>
+        </Button>
+      </span>
+    {/if}
+  </div>
+
+  <div class="mc-stepper-bottom-bar__right">
+    {#if step > 0}
+      <span class="mc-stepper-bottom-bar__button">
+        <Button outlined size="s" onclick={onPrevious}>
+          <span class="mc-button__label">{previouslabel}</span>
+        </Button>
+      </span>
+    {/if}
+
+    <span class="mc-stepper-bottom-bar__button">
+      <Button appearance="accent" size="s" onclick={onNext}>
+        <span class="mc-button__label">
+          {step < steps ? nextlabel : validatelabel}
+        </span>
+      </Button>
+    </span>
+  </div>
+</div>
+
+<style scoped>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-stepper-bottom-bar {
+  position: fixed;
+  box-sizing: border-box;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--action-bottom-bar-color-background, #ffffff);
+  z-index: var(--stepper-bottom-bar-z-index, 3);
+}
+.mc-stepper-bottom-bar__divider {
+  width: 100%;
+}
+.mc-stepper-bottom-bar__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__button--icon.mc-button {
+    display: none;
+  }
+}
+.mc-stepper-bottom-bar__button--text.mc-button {
+  display: none;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__button--text.mc-button {
+    display: block;
+  }
+}
+.mc-stepper-bottom-bar__left {
+  padding-left: 1.25rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__left {
+    padding-left: 0.5rem;
+  }
+}
+.mc-stepper-bottom-bar__right {
+  margin-left: auto;
+  padding: 0.25rem 0.5rem 0.25rem 0;
+  display: flex;
+  gap: 0.5rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-stepper-bottom-bar__right {
+    padding: 0.5rem 1rem 0.5rem 0;
+  }
+}
+
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-border-radius-s, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--border-radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading {
+  pointer-events: none;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+
+:global(.mc-divider) {
+  width: 100%;
+}</style>

package/dist/components/stepperbottombar/StepperBottomBar.svelte.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+ *
+ * @event cancel {CustomEvent<void>} - Emits when the cancel button is clicked.
+ * @event change {CustomEvent<number>} - Emits when the step change.
+ * @event validate {CustomEvent<void>} - Emits when the validate button is clicked.
+ */
+interface Props {
+    /**
+     * Current step of the stepper bottom bar.
+     */
+    step?: number;
+    /**
+     * Total number of steps of the stepper bottom bar.
+     */
+    steps?: number;
+    /**
+     * If `true`, display the cancel button.
+     */
+    cancel?: boolean;
+    /**
+     * Label for the cancel button.
+     */
+    cancellabel?: string;
+    /**
+     * Label for the previous button.
+     */
+    previouslabel?: string;
+    /**
+     * Label for the next button.
+     */
+    nextlabel?: string;
+    /**
+     * Label for the validate button.
+     */
+    validatelabel?: string;
+}
+declare const StepperBottomBar: import("svelte").Component<Props, {}, "step" | "steps">;
+type StepperBottomBar = ReturnType<typeof StepperBottomBar>;
+export default StepperBottomBar;
+//# sourceMappingURL=StepperBottomBar.svelte.d.ts.map

package/dist/components/stepperbottombar/StepperBottomBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperBottomBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/stepperbottombar/StepperBottomBar.svelte.ts"],"names":[],"mappings":"AAME;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqGH,QAAA,MAAM,gBAAgB,yDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/steppercompact/StepperCompact.js

@@ -1,4 +1,4 @@
-import{c as E,p as M,a as q,b as p,f as w,n as l,D as m,d as s,s as b,t as f,h as x,i as A,j as n,e as a,g as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
+import{c as E,p as M,a as q,b as p,n as l,s as b,t as f,f as x,g as A,h as w,v as m,d as s,j as n,r as a,e as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../branches.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const z=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),k=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(k)()),t=m(()=>l(z)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),D=s(d,!0);a(d);var P=b(d,2);{var S=e=>{var t=G(),V=s(t,!0);a(t),f(()=>y(V,i())),x(e,t)};B(P,e=>{i()&&e(S)})}return a(u),a(_),f(()=>y(D,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
+ */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const z=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),k=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(k)()),t=m(()=>l(z)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),P=s(d,!0);a(d);var S=b(d,2);{var V=e=>{var t=G(),D=s(t,!0);a(t),f(()=>y(D,i())),x(e,t)};B(S,e=>{i()&&e(V)})}return a(u),a(_),f(()=>y(P,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
 //# sourceMappingURL=StepperCompact.js.map

package/dist/components/steppercompact/StepperCompact.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperCompact.js","sources":["../../../src/components/steppercompact/StepperCompact.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-compact' }} />\n\n<script lang=\"ts\">\n  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.svelte';\n  /**\n   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.\n   */\n  interface Props {\n    /**\n     * Current step of the stepper compact.\n     */\n    value?: number;\n    /**\n     * Maximum number of steps for the stepper compact.\n     */\n    maxsteps?: number;\n    /**\n     * Label of the stepper compact.\n     */\n    label: string;\n    /**\n     * Description displayed below the label of the stepper compact.\n     */\n    description?: string;\n  }\n\n  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();\n\n  const progressValue = $derived(() => {\n    const v = value ?? 0;\n    const m = maxsteps ?? 1;\n    return Math.round((v / m) * 100);\n  });\n\n  const contentValue = $derived(() => {\n    return `${value} / ${maxsteps}`;\n  });\n</script>\n\n<div class=\"mc-stepper-compact\">\n  <div class=\"mc-circular-progressbar mc-stepper-compact__progress\">\n    <CircularProgressbar\n      aria-label=\"Progress bar\"\n      type=\"content\"\n      size=\"m\"\n      contentvalue={contentValue()}\n      value={progressValue()}\n      class=\"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number\"\n    />\n  </div>\n  <div class=\"mc-stepper-compact__label-container\">\n    <p class=\"mc-stepper-compact__label\">{label}</p>\n    {#if description}\n      <p class=\"mc-stepper-compact__description\">{description}</p>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-compact';\n  @use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar' as *;\n\n  .mc-stepper-compact__progress {\n    width: $spacing-600;\n    height: $spacing-600;\n\n    :global(.mc-circular-progressbar__content) {\n      display: block !important;\n      visibility: visible;\n      font-weight: 600;\n      font-size: 0.875rem;\n    }\n\n    :global(.mc-circular-progressbar__number) {\n      display: block;\n      visibility: visible;\n      opacity: 1;\n      color: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :global(.mc-circular-progressbar__indicator) {\n      @include calculate-border-width(4, 48, 100);\n      stroke: $stepper-color-progress-bar-indicator;\n      fill: none;\n      stroke-linecap: round;\n    }\n  }\n</style>\n"],"names":["value","maxsteps","label","$.prop","$$props","description","progressValue","$.derived","v","m","contentValue","$$render","consequent"],"mappings":";;g2CAAA,gBA0BQ,IAAAA,iBAAkB,CAAC,EAAGC,oBAAqB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAEjE,MAAAE,EAAaC,EAAA,IAAA,IAAkB,OAC7BC,EAAIR,EAAK,GAAI,EACbS,EAAIR,EAAQ,GAAI,EACf,OAAA,KAAK,MAAOO,EAAIC,EAAK,GAAG,CACjC,CAAC,EAEKC,EAAYH,EAAA,IAAA,IACN,GAAAP,EAAK,OAAMC,EAAQ,CAAA,EAC9B,6CAVuB,EAAC,qDAAwB,EAAC,yJAmBhCS,CAAY,EAAA,CAAA,YACnBJ,CAAa,EAAA,CAAA,6UAOwBD,EAAW,CAAA,CAAA,kBADpDA,EAAW,GAAAM,EAAAC,CAAA,+BADsBV,EAAK,CAAA,CAAA,aAd/C"}
+{"version":3,"file":"StepperCompact.js","sources":["../../../src/components/steppercompact/StepperCompact.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-compact' }} />\n\n<script lang=\"ts\">\n  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.svelte';\n  /**\n   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.\n   */\n  interface Props {\n    /**\n     * Current step of the stepper compact.\n     */\n    value?: number;\n    /**\n     * Maximum number of steps for the stepper compact.\n     */\n    maxsteps?: number;\n    /**\n     * Label of the stepper compact.\n     */\n    label: string;\n    /**\n     * Description displayed below the label of the stepper compact.\n     */\n    description?: string;\n  }\n\n  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();\n\n  const progressValue = $derived(() => {\n    const v = value ?? 0;\n    const m = maxsteps ?? 1;\n    return Math.round((v / m) * 100);\n  });\n\n  const contentValue = $derived(() => {\n    return `${value} / ${maxsteps}`;\n  });\n</script>\n\n<div class=\"mc-stepper-compact\">\n  <div class=\"mc-circular-progressbar mc-stepper-compact__progress\">\n    <CircularProgressbar\n      aria-label=\"Progress bar\"\n      type=\"content\"\n      size=\"m\"\n      contentvalue={contentValue()}\n      value={progressValue()}\n      class=\"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number\"\n    />\n  </div>\n  <div class=\"mc-stepper-compact__label-container\">\n    <p class=\"mc-stepper-compact__label\">{label}</p>\n    {#if description}\n      <p class=\"mc-stepper-compact__description\">{description}</p>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-compact';\n  @use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar' as *;\n\n  .mc-stepper-compact__progress {\n    width: $spacing-600;\n    height: $spacing-600;\n\n    :global(.mc-circular-progressbar__content) {\n      display: block !important;\n      visibility: visible;\n      font-weight: 600;\n      font-size: 0.875rem;\n    }\n\n    :global(.mc-circular-progressbar__number) {\n      display: block;\n      visibility: visible;\n      opacity: 1;\n      color: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :global(.mc-circular-progressbar__indicator) {\n      @include calculate-border-width(4, 48, 100);\n      stroke: $stepper-color-progress-bar-indicator;\n      fill: none;\n      stroke-linecap: round;\n    }\n  }\n</style>\n"],"names":["value","maxsteps","label","$.prop","$$props","description","progressValue","$.derived","v","m","contentValue","div","root","div_1","CircularProgressbar","node","div_2","p","p_1","root_1","$$render","consequent"],"mappings":";;g2CAEA,gBAwBQ,IAAAA,iBAAkB,CAAC,EAAGC,oBAAqB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAEjE,MAAAE,EAAaC,EAAA,IAAA,IAAkB,OAC7BC,EAAIR,EAAK,GAAI,EACbS,EAAIR,EAAQ,GAAI,EACf,OAAA,KAAK,MAAOO,EAAIC,EAAK,GAAG,CACjC,CAAC,EAEKC,EAAYH,EAAA,IAAA,IACN,GAAAP,EAAK,OAAMC,EAAQ,CAAA,EAC9B,6CAVuB,EAAC,qDAAwB,EAAC,sHAanDU,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,iBAKcH,CAAY,EAAA,CAAA,YACnBJ,CAAa,EAAA,CAAA,EALrBQ,EAAAC,EAAA,sOADFF,CAAG,EAUH,IAAAG,IAVAH,EAAG,CAAA,EAWDI,IADFD,CAAG,MACDC,EAAC,EAAA,IAADA,CAAC,UAADA,EAAC,CAAA,iBAECC,EAACC,EAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAA0Cb,EAAW,CAAA,CAAA,MAAtDa,CAAC,WADCb,EAAW,GAAAe,EAAAC,CAAA,aAFjBL,CAAG,IAXLL,CAAG,YAYsCT,EAAK,CAAA,CAAA,MAZ9CS,CAAG,MAFI"}