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

package/dist/components/statusnotification/StatusNotification.svelte

@@ -86,12 +86,15 @@
   </div>
 
   {#if closable}
-    <button class="mc-status-notification-closable__close" onclick={onclose}>
+    <button 
+      class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost" 
+      aria-label="Close"
+      onclick={onclose}
+    >
       <Cross20
         class="mc-status-notification-closable__icon"
         aria-hidden="true"
       />
-      <span class="mc-status-notification-closable__text">{closelabel}</span>
     </button>
   {/if}
 </section>
@@ -99,41 +102,379 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-button {
+  color: #ffffff;
+  background-color: #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;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button:hover {
+  background-color: #343b4c;
+}
+.mc-button:active {
+  background-color: #242938;
+}
+.mc-button:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button .mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-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: 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--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: #242938;
+  border-color: #8891aa;
+  background-color: #ffffff;
+}
+.mc-button--outlined:hover {
+  background-color: #eff1f6;
+}
+.mc-button--outlined:active {
+  background-color: #c9d0de;
+}
+.mc-button--outlined:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: #242938;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost:hover {
+  background-color: rgba(70, 78, 99, 0.1);
+}
+.mc-button--ghost:active {
+  background-color: rgba(70, 78, 99, 0.2);
+}
+.mc-button--ghost:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: #ffffff;
+  background-color: #117f03;
+}
+.mc-button--accent:hover {
+  background-color: #006902;
+}
+.mc-button--accent:active {
+  background-color: #035010;
+}
+.mc-button--accent:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: #ffffff;
+  background-color: #c61112;
+}
+.mc-button--danger:hover {
+  background-color: #8c0003;
+}
+.mc-button--danger:active {
+  background-color: #530000;
+}
+.mc-button--danger:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: #000000;
+  --focus-color-outer: #ffffff;
+  color: #242938;
+  background-color: #ffffff;
+}
+.mc-button--inverse:hover {
+  background-color: #e6e6e6;
+}
+.mc-button--inverse:active {
+  background-color: #cccccc;
+}
+.mc-button--inverse:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  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: #242938;
+  border-color: #8891aa;
+  background-color: #ffffff;
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: #eff1f6;
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: #c9d0de;
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: #117f03;
+  border-color: #78be20;
+  background-color: #ffffff;
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: #ebf5de;
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: #c5e39e;
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: #c61112;
+  border-color: #ef5f5c;
+  background-color: #ffffff;
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: #fdeaea;
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: #f8bcbb;
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: #ffffff;
+  border-color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: #242938;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: rgba(70, 78, 99, 0.1);
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: rgba(70, 78, 99, 0.2);
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: #117f03;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: rgba(17, 127, 3, 0.1);
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: rgba(17, 127, 3, 0.2);
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: #c61112;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: rgba(198, 17, 18, 0.1);
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: rgba(198, 17, 18, 0.2);
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+
 /* create columns */
 /* create columns */
 /* create custom named columns with custom content */
 .mc-status-notification {
-  border-radius: var(--radius-m, 0.5rem);
+  border-radius: 0.5rem;
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
+  background: #e1f3f9;
+  box-shadow: inset 0 0 0 1px #3facd7;
   position: relative;
   box-sizing: border-box;
-  color: var(--status-notification-color-text, #000000);
+  color: #000000;
 }
 .mc-status-notification__icon {
   width: 2rem;
   height: 2rem;
   margin: 0.75rem;
-  fill: var(--status-notification-color-icon-information, #0b96cc);
+  fill: #0b96cc;
 }
 .mc-status-notification__content {
   flex: 1 1 0;
   padding: 0.75rem 1rem 0.75rem 0;
 }
 .mc-status-notification__title, .mc-status-notification__message {
-  line-height: var(--line-height-s, 1.3);
+  line-height: 1.3;
   margin-block: 0;
 }
 .mc-status-notification__title {
-  font-weight: var(--font-weight-semi-bold, 600);
-  font-size: var(--font-size-150, 1rem);
+  font-weight: 600;
+  font-size: 1rem;
   margin-block-end: 0.25rem;
 }
 .mc-status-notification__message {
-  font-size: var(--font-size-100, 0.875rem);
+  font-size: 0.875rem;
 }
 .mc-status-notification__footer {
   align-items: flex-start;
@@ -144,59 +485,33 @@
   margin-bottom: 0.5rem;
 }
 .mc-status-notification--information {
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
+  background: #e1f3f9;
+  box-shadow: inset 0 0 0 1px #3facd7;
 }
 .mc-status-notification--information .mc-status-notification__icon {
-  fill: var(--status-notification-color-icon-information, #0b96cc);
+  fill: #0b96cc;
 }
 .mc-status-notification--success {
-  background: var(--status-notification-color-background-success, #ebf5de);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);
+  background: #ebf5de;
+  box-shadow: inset 0 0 0 1px #78be20;
 }
 .mc-status-notification--success .mc-status-notification__icon {
-  fill: var(--status-notification-color-icon-success, #3f9e10);
+  fill: #3f9e10;
 }
 .mc-status-notification--warning {
-  background: var(--status-notification-color-background-warning, #fdf1e8);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);
+  background: #fdf1e8;
+  box-shadow: inset 0 0 0 1px #ef934a;
 }
 .mc-status-notification--warning .mc-status-notification__icon {
-  fill: var(--status-notification-color-icon-warning, #ea7315);
+  fill: #ea7315;
 }
 .mc-status-notification--error {
-  background: var(--status-notification-color-background-error, #fdeaea);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);
+  background: #fdeaea;
+  box-shadow: inset 0 0 0 1px #ef5f5c;
 }
 .mc-status-notification--error .mc-status-notification__icon {
-  fill: var(--status-notification-color-icon-error, #ea302d);
+  fill: #ea302d;
 }
 .mc-status-notification-closable__close {
-  border: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
   margin: 0.25rem;
-  outline: 0;
-  background: transparent;
-}
-.mc-status-notification-closable__icon {
-  display: block;
-  height: 1.25rem;
-  width: 1.25rem;
-  fill: currentcolor;
-}
-.mc-status-notification-closable__text {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  padding: 0;
-  width: 1px;
 }</style>

package/dist/components/statusnotification/StatusNotification.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AA8EH,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,kBAAkB;;;;;;;;UAAqF,CAAC;AAC5F,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"StatusNotification.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AA6EH,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,kBAAkB;;;;;;;;UAAqF,CAAC;AAC5F,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/components/tabs/Tab.js

@@ -1,4 +1,7 @@
-import{c as L,p as T,a as B,b as d,f,h as b,i as F,j as u,d as r,r as l,z as G,s as S}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as m}from"../../slot.js";import{a as j,C}from"../../attributes.js";var H=f('<span class="mc-tabs__icon svelte-oup99q"><!></span>'),I=f('<button><!> <span class="mc-tabs__label svelte-oup99q"><!></span></button>'),J=f('<span class="mc-tabs__icon svelte-oup99q"><!></span>'),K=f('<a><!> <span class="mc-tabs__label svelte-oup99q"><!></span></a>'),M=f('<li class="mc-tabs__item" role="presentation"><!></li>');const N={hash:"svelte-oup99q",code:`/**
+import{c as T,p as q,a as B,b as d,f,h as b,i as F,j as _,d as l,r,D as G,s as S}from"../../custom-element.js";import{i as y}from"../../if.js";import{s as v}from"../../slot.js";import{b as j,C}from"../../attributes.js";var H=f('<span class="mc-tabs__icon svelte-hszkxk"><!></span>'),I=f('<button><!> <span class="mc-tabs__label svelte-hszkxk"><!></span></button>'),J=f('<span class="mc-tabs__icon svelte-hszkxk"><!></span>'),K=f('<a><!> <span class="mc-tabs__label svelte-hszkxk"><!></span></a>'),M=f('<li class="mc-tabs__item" role="presentation"><!></li>');const N={hash:"svelte-hszkxk",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-oup99q {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-oup99q {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs__tab.svelte-oup99q {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-oup99q:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-oup99q: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-tabs__tab--selected.svelte-oup99q {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-oup99q:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-oup99q {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-oup99q:hover {background:none;}.mc-tabs__label.svelte-oup99q {pointer-events:none;}.mc-tabs__icon.svelte-oup99q {fill:currentcolor;height:1.5rem;width:1.5rem;}`};function O(x,t){T(t,!0),B(x,N);let n=d(t,"selected",7,!1),p=d(t,"href",7),g=d(t,"tag",7,"button"),v=d(t,"disabled",7,!1),_=d(t,"hasiconslot",7,!1),z=G(t,["$$slots","$$events","$$legacy","$$host","selected","href","tag","disabled","hasiconslot"]);var h=M(),A=r(h);{var D=e=>{var s=I();j(s,a=>({type:"button",role:"tab","aria-selected":n(),class:"mc-tabs__tab",...z,[C]:a}),[()=>({"mc-tabs__tab--selected":n(),"mc-tabs__tab--disabled":v()})],void 0,"svelte-oup99q");var c=r(s);{var q=a=>{var o=H(),y=r(o);m(y,t,"icon",{}),l(o),b(a,o)};w(c,a=>{_()&&a(q)})}var i=S(c,2),k=r(i);m(k,t,"default",{}),l(i),l(s),b(e,s)},E=e=>{var s=K();j(s,a=>({href:p(),role:"tab","aria-selected":n(),class:"mc-tabs__tab",...z,[C]:a}),[()=>({"mc-tabs__tab--selected":n(),"mc-tabs__tab--disabled":v()})],void 0,"svelte-oup99q");var c=r(s);{var q=a=>{var o=J(),y=r(o);m(y,t,"icon",{}),l(o),b(a,o)};w(c,a=>{_()&&a(q)})}var i=S(c,2),k=r(i);m(k,t,"default",{}),l(i),l(s),b(e,s)};w(A,e=>{g()==="button"?e(D):e(E,!1)})}return l(h),b(x,h),F({get selected(){return n()},set selected(e=!1){n(e),u()},get href(){return p()},set href(e){p(e),u()},get tag(){return g()},set tag(e="button"){g(e),u()},get disabled(){return v()},set disabled(e=!1){v(e),u()},get hasiconslot(){return _()},set hasiconslot(e=!1){_(e),u()}})}customElements.define("mc-tab",L(O,{selected:{},href:{},tag:{},disabled:{},hasiconslot:{}},["icon","default"],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tabs.svelte-hszkxk {background-color:#ffffff;position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-hszkxk {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs__tab.svelte-hszkxk {font-size:0.875rem;font-weight:600;align-items:center;background:none;border:none;border-radius:0.25rem;color:#404040;cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-hszkxk:hover {background-color:rgba(0, 0, 0, 0.05);}.mc-tabs__tab.svelte-hszkxk:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tabs__tab--selected.svelte-hszkxk {color:#006902;background-color:#ebf5de;}.mc-tabs__tab--selected.svelte-hszkxk:hover {background-color:#c5e39e;}.mc-tabs__tab--disabled.svelte-hszkxk {color:#b3b3b3;cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-hszkxk:hover {background:none;}.mc-tabs__label.svelte-hszkxk {pointer-events:none;}.mc-tabs__icon.svelte-hszkxk {fill:currentcolor;height:1.5rem;width:1.5rem;}`};function O(w,t){q(t,!0),B(w,N);let n=d(t,"selected",7,!1),u=d(t,"href",7),k=d(t,"tag",7,"button"),m=d(t,"disabled",7,!1),h=d(t,"hasiconslot",7,!1),D=G(t,["$$slots","$$events","$$legacy","$$host","selected","href","tag","disabled","hasiconslot"]);var g=M(),A=l(g);{var E=e=>{var a=I();j(a,s=>({type:"button",role:"tab","aria-selected":n(),class:"mc-tabs__tab",...D,[C]:s}),[()=>({"mc-tabs__tab--selected":n(),"mc-tabs__tab--disabled":m()})],void 0,"svelte-hszkxk");var c=l(a);{var p=s=>{var o=H(),z=l(o);v(z,t,"icon",{}),r(o),b(s,o)};y(c,s=>{h()&&s(p)})}var i=S(c,2),x=l(i);v(x,t,"default",{}),r(i),r(a),b(e,a)},L=e=>{var a=K();j(a,s=>({href:u(),role:"tab","aria-selected":n(),class:"mc-tabs__tab",...D,[C]:s}),[()=>({"mc-tabs__tab--selected":n(),"mc-tabs__tab--disabled":m()})],void 0,"svelte-hszkxk");var c=l(a);{var p=s=>{var o=J(),z=l(o);v(z,t,"icon",{}),r(o),b(s,o)};y(c,s=>{h()&&s(p)})}var i=S(c,2),x=l(i);v(x,t,"default",{}),r(i),r(a),b(e,a)};y(A,e=>{k()==="button"?e(E):e(L,!1)})}return r(g),b(w,g),F({get selected(){return n()},set selected(e=!1){n(e),_()},get href(){return u()},set href(e){u(e),_()},get tag(){return k()},set tag(e="button"){k(e),_()},get disabled(){return m()},set disabled(e=!1){m(e),_()},get hasiconslot(){return h()},set hasiconslot(e=!1){h(e),_()}})}customElements.define("mc-tab",T(O,{selected:{},href:{},tag:{},disabled:{},hasiconslot:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Tab.js.map

package/dist/components/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/components/tabs/Tab.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tab' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    selected?: boolean;\n    href?: string;\n    tag?: 'a' | 'button';\n    disabled?: boolean;\n    hasiconslot?: boolean;\n    [key: string]: any; // pour on:click etc.\n  }\n\n  let {\n    selected = false,\n    href,\n    tag = 'button',\n    disabled = false,\n    hasiconslot = false,\n    ...events\n  }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class=\"mc-tabs__tab\"\n      class:mc-tabs__tab--selected={selected}\n      class:mc-tabs__tab--disabled={disabled}\n      {...events}\n    >\n      {#if hasiconslot}\n        <span class=\"mc-tabs__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class=\"mc-tabs__tab\"\n      class:mc-tabs__tab--selected={selected}\n      class:mc-tabs__tab--disabled={disabled}\n      {...events}\n    >\n      {#if hasiconslot}\n        <span class=\"mc-tabs__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n</style>\n"],"names":["selected","href","$.prop","$$props","tag","disabled","hasiconslot","events","$.rest_props","$$render","consequent","consequent_2","consequent_1","alternate"],"mappings":";;0nDAAA,gBAaI,IAAAA,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EAChBC,EAAAC,EAAAL,EAAA,qLAScH,EAAQ,0BAInBO,0CAF0BP,EAAQ,2BACRK,EAAQ,0GAGjCC,EAAW,GAAAG,EAAAC,CAAA,2HAcDV,EAAQ,0BAInBO,0CAF0BP,EAAQ,2BACRK,EAAQ,0GAGjCC,EAAW,GAAAG,EAAAE,CAAA,sEA9BfP,EAAG,IAAK,SAAQK,EAAAG,CAAA,EAAAH,EAAAI,EAAA,EAAA,oEAVR,GAAK,wFAEV,SAAQ,qDACH,GAAK,2DACF,GAAK,YAGvB"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/tabs/Tab.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tab' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    selected?: boolean;\n    href?: string;\n    tag?: 'a' | 'button';\n    disabled?: boolean;\n    hasiconslot?: boolean;\n    [key: string]: any; // pour on:click etc.\n  }\n\n  let {\n    selected = false,\n    href,\n    tag = 'button',\n    disabled = false,\n    hasiconslot = false,\n    ...events\n  }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class=\"mc-tabs__tab\"\n      class:mc-tabs__tab--selected={selected}\n      class:mc-tabs__tab--disabled={disabled}\n      {...events}\n    >\n      {#if hasiconslot}\n        <span class=\"mc-tabs__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class=\"mc-tabs__tab\"\n      class:mc-tabs__tab--selected={selected}\n      class:mc-tabs__tab--disabled={disabled}\n      {...events}\n    >\n      {#if hasiconslot}\n        <span class=\"mc-tabs__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n</style>\n"],"names":["selected","href","$.prop","$$props","tag","disabled","hasiconslot","events","$.rest_props","$$render","consequent","consequent_2","consequent_1","alternate"],"mappings":";;;;;mvCAAA,gBAaI,IAAAA,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EAChBC,EAAAC,EAAAL,EAAA,qLAScH,EAAQ,0BAInBO,0CAF0BP,EAAQ,2BACRK,EAAQ,0GAGjCC,EAAW,GAAAG,EAAAC,CAAA,2HAcDV,EAAQ,0BAInBO,0CAF0BP,EAAQ,2BACRK,EAAQ,0GAGjCC,EAAW,GAAAG,EAAAE,CAAA,sEA9BfP,EAAG,IAAK,SAAQK,EAAAG,CAAA,EAAAH,EAAAI,EAAA,EAAA,oEAVR,GAAK,wFAEV,SAAQ,qDACH,GAAK,2DACF,GAAK,YAGvB"}

package/dist/components/tabs/Tab.svelte

@@ -66,8 +66,11 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-tabs {
-  background-color: var(--tabs-color-background-default, #ffffff);
+  background-color: #ffffff;
   position: relative;
   width: 100%;
   height: 3.5rem;
@@ -81,13 +84,13 @@
   padding: 0.5rem 0.25rem;
 }
 .mc-tabs__tab {
-  font-size: var(--font-size-100, 0.875rem);
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: 0.875rem;
+  font-weight: 600;
   align-items: center;
   background: none;
   border: none;
-  border-radius: var(--radius-s, 0.25rem);
-  color: var(--tabs-color-text-default, #404040);
+  border-radius: 0.25rem;
+  color: #404040;
   cursor: pointer;
   display: flex;
   gap: 0.25rem;
@@ -100,22 +103,22 @@
   text-decoration: none;
 }
 .mc-tabs__tab:hover {
-  background-color: var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .mc-tabs__tab: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));
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-tabs__tab--selected {
-  color: var(--tabs-color-text-selected, #006902);
-  background-color: var(--tabs-color-background-selected, #ebf5de);
+  color: #006902;
+  background-color: #ebf5de;
 }
 .mc-tabs__tab--selected:hover {
-  background-color: var(--tabs-color-background-selected-hover, #c5e39e);
+  background-color: #c5e39e;
 }
 .mc-tabs__tab--disabled {
-  color: var(--tabs-color-text-disabled, #b3b3b3);
+  color: #b3b3b3;
   cursor: not-allowed;
 }
 .mc-tabs__tab--disabled:hover {

package/dist/components/tabs/Tabs.js

@@ -1,4 +1,7 @@
-import{c as m,p as b,a as f,b as n,C as p,l as g,f as _,t as z,e as y,h as x,i as k,j as h,d,m as w,r as o,D as j}from"../../custom-element.js";import{s as D}from"../../slot.js";var T=_('<nav><ul class="mc-tabs__list svelte-1hhruhz" role="tablist" aria-label="Tabs default"><!></ul> <div class="mc-divider-horizontal svelte-1hhruhz"></div></nav>');const C={hash:"svelte-1hhruhz",code:`/**
+import{c as b,p as u,a as h,b as r,v as g,l as p,f as _,m as y,d as o,t as x,e as w,h as k,i as j,j as d,r as f,E as z}from"../../custom-element.js";import{s as D}from"../../slot.js";var E=_('<nav><ul class="mc-tabs__list svelte-8f33ob" role="tablist" aria-label="Tabs default"><!></ul> <div class="mc-divider-horizontal svelte-8f33ob"></div></nav>');const T={hash:"svelte-8f33ob",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-1hhruhz {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-1hhruhz {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs--centered.svelte-1hhruhz .mc-tabs__list:where(.svelte-1hhruhz) {justify-content:center;}.mc-divider-horizontal.svelte-1hhruhz {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function E(c,t){b(t,!0),f(c,C);let s=n(t,"activeindex",7),r=n(t,"centered",7),u=p(g(s()??0));var a=T();let l;var i=d(a),v=d(i);return D(v,t,"tab",{get active(){return w(u)}}),o(i),j(2),o(a),z(e=>l=y(a,1,"mc-tabs svelte-1hhruhz",null,l,e),[()=>({"mc-tabs--centered":r()})]),x(c,a),k({get activeindex(){return s()},set activeindex(e){s(e),h()},get centered(){return r()},set centered(e){r(e),h()}})}customElements.define("mc-tabs",m(E,{activeindex:{},centered:{}},["tab"],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tabs.svelte-8f33ob {background-color:#ffffff;position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-8f33ob {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs--centered.svelte-8f33ob .mc-tabs__list:where(.svelte-8f33ob) {justify-content:center;}.mc-divider-horizontal.svelte-8f33ob {background:#cccccc;height:0.0625rem;}`};function S(i,t){u(t,!0),h(i,T);let s=r(t,"activeindex",7),n=r(t,"centered",7),v=g(p(s()??0));var a=E();let c;var l=o(a),m=o(l);return D(m,t,"tab",{get active(){return y(v)}}),f(l),z(2),f(a),x(e=>c=w(a,1,"mc-tabs svelte-8f33ob",null,c,e),[()=>({"mc-tabs--centered":n()})]),k(i,a),j({get activeindex(){return s()},set activeindex(e){s(e),d()},get centered(){return n()},set centered(e){n(e),d()}})}customElements.define("mc-tabs",b(S,{activeindex:{},centered:{}},["tab"],[],!0));
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tabs' }} />\n\n<script lang=\"ts\">\n  let { activeindex, centered } = $props();\n\n  let active = $state(activeindex ?? 0);\n</script>\n\n<nav class=\"mc-tabs\" class:mc-tabs--centered={centered}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label=\"Tabs default\">\n    <slot name=\"tab\" {active} />\n  </ul>\n  <div class=\"mc-divider-horizontal\"></div>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n  @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["activeindex","$.prop","$$props","centered","active","$.state","$.proxy"],"mappings":";;8eAAA,oBAGQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAEvBE,EAAMC,EAAAC,EAAUN,EAAW,GAAI,CAAC,CAAA,8KAGQG,EAAQ,CAAA,EAAA,CAAA,6HAFtD"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tabs' }} />\n\n<script lang=\"ts\">\n  let { activeindex, centered } = $props();\n\n  let active = $state(activeindex ?? 0);\n</script>\n\n<nav class=\"mc-tabs\" class:mc-tabs--centered={centered}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label=\"Tabs default\">\n    <slot name=\"tab\" {active} />\n  </ul>\n  <div class=\"mc-divider-horizontal\"></div>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n  @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["activeindex","$.prop","$$props","centered","active","$.state","$.proxy"],"mappings":";;;;;qaAAA,oBAGQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAEvBE,EAAMC,EAAAC,EAAUN,EAAW,GAAI,CAAC,CAAA,6KAGQG,EAAQ,CAAA,EAAA,CAAA,6HAFtD"}

package/dist/components/tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;wBAwBrD,IAAI;AArBT,wBAqBU;AAsCV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAoD1C,eAAO,MAAM,SAAS,KAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AArBT,wBAqBU;AAsCV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAoD1C,eAAO,MAAM,SAAS,KAAwB,CAAC"}

package/dist/components/tabs/Tabs.stories.js

@@ -1,3 +1,4 @@
+import ChevronRight32 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
 import { within, expect } from 'storybook/test';
 export default {
     title: 'Navigation/Tabs',