@mozaic-ds/web-components 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/bundle.js

@@ -0,0 +1,31 @@
+
+import Button from './components/button/Button.js';
+import IconButton from './components/button/IconButton.js';
+
+import Checkbox from './components/checkbox/Checkbox.js';
+import CheckboxGroup from './components/checkboxgroup/checkboxGroup.js';
+import Textarea from './components/textarea/Textarea.js';
+import Select from './components/select/Select.js';
+
+import Toggle from './components/toggle/Toggle.js';
+
+import Field from './components/field/Field.js';
+
+import Link from './components/link/Link.js';
+
+import Loader from './components/loader/Loader.js';
+
+import Textinput from './components/textinput/Textinput.js';
+
+import Overlay from './components/overlay/Overlay.js';
+import OverlayLoader from './components/overlay/OverlayLoader.js';
+
+import Radio from './components/radio/Radio.js';
+import RadioGroup from './components/radiogroup/RadioGroup.js';
+
+import QuantitySelector from './components/quantityselector/QuantitySelector.js';
+
+import Badge from './components/badge/Badge.js';
+import StatusBadge from './components/statusbadge/StatusBadge.js';
+import StatusDot from './components/statusbadge/StatusDot.js';
+

package/dist/components/badge/Badge.svelte

@@ -29,6 +29,38 @@
   {label}
 </div>
 
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/badge';
-</style>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-badge {
+  color: var(--badge-color-text-standard, #ffffff);
+  background-color: var(--badge-color-background-standard, #464e63);
+  height: 1rem;
+  min-width: 1rem;
+  padding: 0 0.125rem;
+  font-size: 0.625rem;
+  border-radius: 1rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+}
+.mc-badge--m {
+  height: 1.5rem;
+  min-width: 1.5rem;
+  padding: 0 0.25rem;
+  font-size: 0.75rem;
+}
+.mc-badge--accent {
+  color: var(--badge-color-text-accent, #ffffff);
+  background-color: var(--badge-color-background-accent, #117f03);
+}
+.mc-badge--danger {
+  color: var(--badge-color-text-danger, #ffffff);
+  background-color: var(--badge-color-background-danger, #c61112);
+}
+.mc-badge--inverse {
+  color: var(--badge-color-text-inverse, #464e63);
+  background-color: var(--badge-color-background-inverse, #ffffff);
+}</style>

package/dist/components/badge/Badge.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BadgeStyle, BadgeSize } from './badge.types';
+interface Props {
+    label: string;
+    style: BadgeStyle;
+    size: BadgeSize;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/components/badge/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEzD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;CACjB;AAgCH,QAAA,MAAM,KAAK,2CAAsC,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,3 @@
+export type BadgeStyle = 'danger' | 'accent' | 'inverse' | 'standard';
+export type BadgeSize = 's' | 'm';
+//# sourceMappingURL=badge.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACtE,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/components/badge/badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/button/Button.svelte

@@ -115,19 +115,352 @@
   {/if}
 </button>
 
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/button';
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+  font-weight: 600;
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.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 .mc-button__label {
+  font-size: 1rem;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: 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: 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: 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__label {
+  font-size: 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--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: 100%;
+  padding: 0;
+}
+.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;
+}
 
-  .mc-button__icon {
-    pointer-events: none;
-  }
+.mc-button__icon {
+  pointer-events: none;
+}
 
-  .hidden {
-    visibility: hidden;
-  }
+.hidden {
+  visibility: hidden;
+}
 
-  .loader-style {
-    color: currentColor;
-    position: absolute;
-  }
-</style>
+.loader-style {
+  color: currentColor;
+  position: absolute;
+}</style>

package/dist/components/button/Button.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { ButtonIconMode, ButtonSize, ButtonStyle, ButtonType } from './button.types';
+interface Props {
+    appearance?: ButtonStyle | undefined;
+    size?: ButtonSize;
+    ghost?: boolean;
+    outlined?: boolean;
+    iconname: string | undefined;
+    iconmode: ButtonIconMode | undefined;
+    disabled?: boolean;
+    type?: ButtonType;
+    isloading?: boolean;
+    [key: string]: any;
+}
+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 Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    icon: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}, {}, "">;
+type Button = InstanceType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/components/button/Button.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACX,MAAM,gBAAgB,CAAC;AAKxB,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA2FH,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,MAAM;;;;;;;;UAAmF,CAAC;AAC9E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}