@maggioli-design-system/mds-tab 8.2.0 → 8.3.1

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",{"scrollbar":[516],"animation":[513],"sliderWidth":[32],"sliderOffset":[32]},[[0,"mdsTabItemSelect","changeEventHandler"],[0,"mdsTabItemFocus","focusEventHandler"]],{"animation":["handleAnimation"]}]]]], options);
+  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",{"scrollbar":[516],"animation":[513],"fill":[516],"sliderWidth":[32],"sliderOffset":[32]},[[0,"mdsTabItemSelect","changeEventHandler"],[0,"mdsTabItemFocus","focusEventHandler"]],{"animation":["handleAnimation"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mds-tab.cjs.entry.js

@@ -28,7 +28,9 @@ const hashRandomValue = (value) => {
     return hash(randomValue.toString());
 };
 
-const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-item-default-background: Sets the `background-color` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-default-color: Sets the `color` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-default-shadow: Sets the `box-shadow` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-hover-background: Sets the `background-color` when the mouse is over of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-hover-color: Sets the `color` when the mouse is over of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-hover-shadow: Sets the `box-shadow` when the mouse is over of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-radius: Sets the `border-radius` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`.\n * @prop --mds-tab-item-selected-background: Sets the `background-color` when the item is selected of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-selected-color: Sets the `color` when the item is selected of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-selected-shadow: Sets the `box-shadow` when the item is selected of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-transition-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-item-transition-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-scroll-scrollbar-margin: Sets the margin of the browser scroll bar (if supported)\n * @prop --mds-tab-scroll-scrollbar-radius: Sets the border-radius of the browser scroll bar (if supported)\n * @prop --mds-tab-scroll-scrollbar-size: Sets the height and width of the browser scroll bar (if supported)\n * @prop --mds-tab-scroll-scrollbar-thumb-background: Sets the background-color of the browser scroll bar thumb (if supported)\n * @prop --mds-tab-scroll-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)\n * @prop --mds-tab-tabs-background: Sets the `background-color` of `mds-tab::part(tabs)`\n * @prop --mds-tab-tabs-gap: Sets the `gap` of `mds-tab::part(tabs)`\n * @prop --mds-tab-tabs-outline-opacity: Sets the `opacity` of outline border which holds\n * @prop --mds-tab-tabs-padding: Sets the `padding` of `mds-tab::part(tabs)`\n * @prop --mds-tab-tabs-radius: Sets the `border-radius` of `mds-tab::part(tabs)`\n */\n\n:host {\n\n  --mds-tab-item-default-background: transparent;\n  --mds-tab-item-default-color: rgb(var(--tone-neutral-03));\n  --mds-tab-item-default-shadow: transparent;\n  --mds-tab-item-hover-background: transparent;\n  --mds-tab-item-hover-color: rgb(var(--tone-neutral-02));\n  --mds-tab-item-hover-shadow: transparent;\n  --mds-tab-item-radius: 0.5rem;\n  --mds-tab-item-selected-background: rgb(var(--tone-neutral));\n  --mds-tab-item-selected-color: rgb(var(--tone-neutral-02));\n  --mds-tab-item-selected-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --mds-tab-scroll-scrollbar-margin: 0;\n  --mds-tab-scroll-scrollbar-radius: 0;\n  --mds-tab-scroll-scrollbar-size: 0.5rem;\n  --mds-tab-scroll-scrollbar-thumb-background: rgb(var(--tone-neutral-02) 0.3);\n  --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);\n  --mds-tab-tabs-background: rgb(var(--tone-neutral-09));\n  --mds-tab-tabs-gap: 0.5rem;\n  --mds-tab-tabs-outline-opacity: 0.7;\n  --mds-tab-tabs-padding: 0.5rem;\n  --mds-tab-tabs-radius: 1rem;\n  --mds-tab-transition-duration: 0.5s;\n  --mds-tab-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  display: grid;\n}\n\n:host([animation=\"slide\"]) ::slotted( mds-tab-item ) {\n\n  --mds-tab-item-hover-background: transparent;\n  --mds-tab-item-selected-background: transparent;\n  --mds-tab-item-selected-shadow: transparent;\n  --mds-tab-item-default-background: transparent;\n  --mds-tab-item-default-shadow: transparent;\n}\n\n.tabs {\n  background-color: var(--mds-tab-tabs-background);\n  border-radius: var(--mds-tab-tabs-radius);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--mds-tab-tabs-gap);\n  overflow: auto;\n  padding: var(--mds-tab-tabs-padding);\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n}\n\n.tabs-wrapper {\n  display: grid;\n  overflow: hidden;\n  position: relative;\n}\n\n.tabs-wrapper::after {\n  border-radius: var(--mds-tab-tabs-radius);\n  -webkit-box-shadow: 0 0 0 2px var(--mds-tab-tabs-background) inset;\n  box-shadow: 0 0 0 2px var(--mds-tab-tabs-background) inset;\n  content: \"\";\n  inset: 0;\n  opacity: var(--mds-tab-tabs-outline-opacity);\n  pointer-events: none;\n  position: absolute;\n}\n\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: height;\n  transition-property: height;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -ms-flex-preferred-size: 0;\n\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n::slotted( [slot=\"content\"][mds-tab-content-hidden] ) {\n  display: none !important;\n}\n\n.tabs {\n  position: relative;\n}\n\n.slider {\n\n  --mds-tab-slider-offset: 0;\n  --mds-tab-slider-width: 0;\n\n  background-color: var(--mds-tab-item-selected-background);\n  border-radius: var(--mds-tab-item-radius);\n  bottom: var(--mds-tab-tabs-padding);\n  -webkit-box-shadow: var(--mds-tab-item-selected-shadow);\n  box-shadow: var(--mds-tab-item-selected-shadow);\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  top: var(--mds-tab-tabs-padding);\n  -webkit-transform: translateX(var(--mds-tab-slider-offset)) translateZ(0);\n  transform: translateX(var(--mds-tab-slider-offset)) translateZ(0);\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: width, -webkit-transform;\n  transition-property: width, -webkit-transform;\n  transition-property: transform, width;\n  transition-property: transform, width, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n  width: var(--mds-tab-slider-width);\n  will-change: transform, width;\n  z-index: 0;\n}\n\n::slotted( mds-tab-item ) {\n  position: relative;\n  z-index: 1;\n}\n\n@import '~@maggioli-design-system/styles/dist/tailwind/components.css';\n@tailwind components;\n@tailwind utilities;\n\n:host(:not([scrollbar])) .tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n:host(:not([scrollbar])) .tabs::-webkit-scrollbar {\n  display: none;\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar {\n  height: var(--mds-tab-scroll-scrollbar-size);\n  width: var(--mds-tab-scroll-scrollbar-size);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-track {\n  background-color: var(--mds-tab-scroll-scrollbar-track-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n  margin-block: var(--mds-tab-scroll-scrollbar-margin);\n  margin-inline: var(--mds-tab-scroll-scrollbar-margin);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-thumb {\n  background-color: var(--mds-tab-scroll-scrollbar-thumb-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n}\n\n@supports (scrollbar-color: transparent transparent) {\n  .tabs {\n    scrollbar-color: var(--mds-tab-scroll-scrollbar-thumb-background) var(--mds-tab-scroll-scrollbar-track-background);\n    scrollbar-width: thin;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-tab-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-08));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-08));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n\n";
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-item-default-background: Sets the `background-color` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-default-color: Sets the `color` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-default-shadow: Sets the `box-shadow` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-hover-background: Sets the `background-color` when the mouse is over of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-hover-color: Sets the `color` when the mouse is over of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-hover-shadow: Sets the `box-shadow` when the mouse is over of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-radius: Sets the `border-radius` of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`.\n * @prop --mds-tab-item-selected-background: Sets the `background-color` when the item is selected of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-selected-color: Sets the `color` when the item is selected of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-selected-shadow: Sets the `box-shadow` when the item is selected of `mds-tab-item` or `mds-tab::part(slider)` depending on attribute `animation`\n * @prop --mds-tab-item-transition-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-item-transition-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-scroll-scrollbar-margin: Sets the margin of the browser scroll bar (if supported)\n * @prop --mds-tab-scroll-scrollbar-radius: Sets the border-radius of the browser scroll bar (if supported)\n * @prop --mds-tab-scroll-scrollbar-size: Sets the height and width of the browser scroll bar (if supported)\n * @prop --mds-tab-scroll-scrollbar-thumb-background: Sets the background-color of the browser scroll bar thumb (if supported)\n * @prop --mds-tab-scroll-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)\n * @prop --mds-tab-tabs-background: Sets the `background-color` of `mds-tab::part(tabs)`\n * @prop --mds-tab-tabs-gap: Sets the `gap` of `mds-tab::part(tabs)`\n * @prop --mds-tab-tabs-wrapper-outline-opacity: Sets the `opacity` of outline border which holds\n * @prop --mds-tab-tabs-padding: Sets the `padding` of `mds-tab::part(tabs)`\n * @prop --mds-tab-tabs-radius: Sets the `border-radius` of `mds-tab::part(tabs)`\n */\n\n:host {\n\n  --mds-tab-item-default-background: transparent;\n  --mds-tab-item-default-color: rgb(var(--tone-neutral-03));\n  --mds-tab-item-default-shadow: transparent;\n  --mds-tab-item-hover-background: transparent;\n  --mds-tab-item-hover-color: rgb(var(--tone-neutral-02));\n  --mds-tab-item-hover-shadow: transparent;\n  --mds-tab-item-radius: 0.5rem;\n  --mds-tab-item-selected-background: rgb(var(--tone-neutral));\n  --mds-tab-item-selected-color: rgb(var(--tone-neutral-01));\n  --mds-tab-item-selected-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --mds-tab-scroll-behavior: smooth;\n  --mds-tab-scroll-scrollbar-margin: 0;\n  --mds-tab-scroll-scrollbar-radius: 0;\n  --mds-tab-scroll-scrollbar-size: 0.5rem;\n  --mds-tab-scroll-scrollbar-thumb-background: rgb(var(--tone-neutral-02) 0.3);\n  --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);\n  --mds-tab-tabs-background: rgb(var(--tone-neutral-09));\n  --mds-tab-tabs-gap: 0.5rem;\n  --mds-tab-tabs-padding: 0.5rem;\n  --mds-tab-tabs-radius: 1rem;\n  --mds-tab-tabs-wrapper-outline-opacity: 0.7;\n  --mds-tab-tabs-wrapper-shadow-color: var(--mds-tab-tabs-background);\n  --mds-tab-tabs-wrapper-shadow: 0 0 0 2px var(--mds-tab-tabs-wrapper-shadow-color) inset;\n  --mds-tab-transition-duration: 0.5s;\n  --mds-tab-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  display: grid;\n}\n\n:host([animation=\"slide\"]) ::slotted( mds-tab-item ) {\n\n  --mds-tab-item-hover-background: transparent;\n  --mds-tab-item-selected-background: transparent;\n  --mds-tab-item-selected-shadow: transparent;\n  --mds-tab-item-default-background: transparent;\n  --mds-tab-item-default-shadow: transparent;\n}\n\n.tabs {\n  background-color: var(--mds-tab-tabs-background);\n  border-radius: var(--mds-tab-tabs-radius);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--mds-tab-tabs-gap);\n  overflow: auto;\n  padding: var(--mds-tab-tabs-padding);\n  scroll-behavior: var(--mds-tab-scroll-behavior);\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n}\n\n.tabs-wrapper {\n  display: grid;\n  max-width: -moz-max-content;\n  max-width: -webkit-max-content;\n  max-width: max-content;\n  overflow: hidden;\n  position: relative;\n}\n\n.tabs-wrapper--fill {\n  max-width: 100%;\n}\n\n.tabs-wrapper::after {\n  border-radius: var(--mds-tab-tabs-radius);\n  -webkit-box-shadow: var(--mds-tab-tabs-wrapper-shadow);\n  box-shadow: var(--mds-tab-tabs-wrapper-shadow);\n  content: \"\";\n  inset: 0;\n  opacity: var(--mds-tab-tabs-wrapper-outline-opacity);\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: opacity, -webkit-box-shadow;\n  transition-property: opacity, -webkit-box-shadow;\n  transition-property: box-shadow, opacity;\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n\n  /* z-index: 1; */\n}\n\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: var(--mds-tab-scroll-behavior);\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: height;\n  transition-property: height;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n}\n\n.contents:empty {\n  display: none;\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -ms-flex-preferred-size: 0;\n\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n::slotted( [slot=\"content\"][mds-tab-content-hidden] ) {\n  display: none !important;\n}\n\n.tabs {\n  position: relative;\n}\n\n.slider {\n\n  --mds-tab-slider-offset: 0;\n  --mds-tab-slider-width: 0;\n\n  background-color: var(--mds-tab-item-selected-background);\n  border-radius: var(--mds-tab-item-radius);\n  bottom: var(--mds-tab-tabs-padding);\n  -webkit-box-shadow: var(--mds-tab-item-selected-shadow);\n  box-shadow: var(--mds-tab-item-selected-shadow);\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  top: var(--mds-tab-tabs-padding);\n  -webkit-transform: translateX(var(--mds-tab-slider-offset)) translateZ(0);\n  transform: translateX(var(--mds-tab-slider-offset)) translateZ(0);\n  -webkit-transition-duration: var(--mds-tab-transition-duration);\n  transition-duration: var(--mds-tab-transition-duration);\n  -webkit-transition-property: background-color, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, box-shadow, transform, width;\n  transition-property: background-color, box-shadow, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-tab-transition-timing-function);\n  transition-timing-function: var(--mds-tab-transition-timing-function);\n  width: var(--mds-tab-slider-width);\n  will-change: transform, width;\n  z-index: 0;\n}\n\n.slider--no-trantitions {\n  -webkit-transition-property: none;\n  transition-property: none;\n}\n\n::slotted( mds-tab-item ) {\n  position: relative;\n  z-index: 1;\n}\n\n@import '~@maggioli-design-system/styles/dist/tailwind/components.css';\n@tailwind components;\n@tailwind utilities;\n\n:host(:not([scrollbar])) .tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n:host(:not([scrollbar])) .tabs::-webkit-scrollbar {\n  display: none;\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar {\n  height: var(--mds-tab-scroll-scrollbar-size);\n  width: var(--mds-tab-scroll-scrollbar-size);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-track {\n  background-color: var(--mds-tab-scroll-scrollbar-track-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n  margin-block: var(--mds-tab-scroll-scrollbar-margin);\n  margin-inline: var(--mds-tab-scroll-scrollbar-margin);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-thumb {\n  background-color: var(--mds-tab-scroll-scrollbar-thumb-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n}\n\n@supports (scrollbar-color: transparent transparent) {\n  .tabs {\n    scrollbar-color: var(--mds-tab-scroll-scrollbar-thumb-background) var(--mds-tab-scroll-scrollbar-track-background);\n    scrollbar-width: thin;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-scroll-behavior: auto;\n    --mds-tab-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-tab-scroll-behavior: auto;\n      --mds-tab-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tab-tabs-background: rgb(var(--tone-neutral-08));\n    --mds-tab-item-selected-background: rgb(var(--tone-neutral-07));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tab-tabs-background: rgb(var(--tone-neutral-08));\n      --mds-tab-item-selected-background: rgb(var(--tone-neutral-07));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tab-item-selected-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-tab-tabs-wrapper-shadow: 0 0 0 0.125rem var(--mds-tab-tabs-wrapper-shadow-color) inset;\n    --mds-tab-tabs-wrapper-shadow-color: rgb(var(--tone-neutral-07));\n    --mds-tab-tabs-wrapper-outline-opacity: 0.3;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tab-item-selected-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-tab-tabs-wrapper-shadow: 0 0 0 0.125rem var(--mds-tab-tabs-wrapper-shadow-color) inset;\n      --mds-tab-tabs-wrapper-shadow-color: rgb(var(--tone-neutral-07));\n      --mds-tab-tabs-wrapper-outline-opacity: 0.3;\n    }\n  }\n}\n\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
 const MdsTabStyle0 = mdsTabCss;
 
 const MdsTab = class {
@@ -43,13 +45,25 @@ const MdsTab = class {
          */
         this.animation = 'slide';
         this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
-        this.updateSliderPosition = () => {
+        this.startObserver = () => {
+            this.observer = new ResizeObserver(() => {
+                if (this.animation === 'slide') {
+                    this.updateSliderPosition(true);
+                }
+            });
+            this.observer.observe(this.tabsContainer);
+        };
+        this.updateSliderPosition = (disableAnimation) => {
             if (!this.slider) {
                 this.setSlider();
             }
-            if (this.slider) {
+            if (this.slider && this.currentItem >= 0) {
+                if (disableAnimation) {
+                    this.slider.classList.add('slider--no-trantitions');
+                }
                 this.sliderWidth = this.tabItems[this.currentItem].offsetWidth;
                 this.sliderOffset = this.tabItems[this.currentItem].offsetLeft - this.tabsContainer.offsetLeft;
+                this.slider.classList.remove('slider--no-trantitions');
             }
         };
         this.setSlider = () => {
@@ -69,6 +83,9 @@ const MdsTab = class {
             });
         };
     }
+    disonnectedCallback() {
+        this.observer.unobserve(this.tabsContainer);
+    }
     componentWillLoad() {
         this.tabItems = this.element.querySelectorAll('mds-tab-item');
         this.tabItems.forEach((item, key) => {
@@ -84,6 +101,7 @@ const MdsTab = class {
         var _a, _b;
         this.tabs = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tabs');
         this.tabsContainer = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs-wrapper');
+        this.startObserver();
         this.contentItems = this.queryContentItems();
         this.contentItems.forEach((item, key) => {
             setAttributeIfEmpty(item, 'role', 'tabpanel');
@@ -128,12 +146,12 @@ const MdsTab = class {
         this.slider = null;
     }
     render() {
-        return (index.h(index.Host, { key: '6a2434a047dacdb770cf8e623e9f48dd18a53654' }, index.h("div", { key: 'c3b448092c30ca04bb1b42f374edeee4bf7707ba', class: "tabs-wrapper" }, index.h("div", { key: 'c528121d69ea3abf7a7b2ea34654580f3d8bd266', class: "tabs", part: "tabs", role: "tablist" }, index.h("slot", { key: '759fb466c9e0e375460a37cc3a0373ae715b58ed' }), this.animation === 'slide' &&
-            index.h("div", { key: '146d219cd9abbfc5b1080b1e2e81eade9abe4171', class: "slider", part: "slider", style: {
+        return (index.h(index.Host, { key: '6ccc0ea805f77b2753cbb06f27953f8d6ae250e1' }, index.h("div", { key: 'd9a918c74be8f21fa69bf45b35669620c2c2c617', class: clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, index.h("div", { key: 'badfe373f84548486800772c5ad3c6297ea2d3e6', class: "tabs", part: "tabs", role: "tablist" }, index.h("slot", { key: '471e14edea2d58e52cd793fa20a2bc6cb13cd2dd' }), this.animation === 'slide' &&
+            index.h("div", { key: 'bab0c0ae75bbdbc28dc65425565fc06931b22549', class: "slider", part: "slider", style: {
                     '--mds-tab-slider-width': `${this.sliderWidth}px`,
                     '--mds-tab-slider-offset': `${this.sliderOffset}px`,
                 } }))), this.contentItems &&
-            index.h("div", { key: '040876c932e1ab98101a7453846a63e781724bb6', class: "contents", part: "contents" }, index.h("slot", { key: '670782e05aaacf2b1113beffce71bcca87a86b86', name: "content" }))));
+            index.h("div", { key: '8d84d04142c43e66082d201c940c4eaca1749ceb', class: "contents", part: "contents" }, index.h("slot", { key: '7cf3ec2c2fb83fd4a3aebdb5d8149606a8501887', name: "content" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-tab.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",{"scrollbar":[516],"animation":[513],"sliderWidth":[32],"sliderOffset":[32]},[[0,"mdsTabItemSelect","changeEventHandler"],[0,"mdsTabItemFocus","focusEventHandler"]],{"animation":["handleAnimation"]}]]]], options);
+  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",{"scrollbar":[516],"animation":[513],"fill":[516],"sliderWidth":[32],"sliderOffset":[32]},[[0,"mdsTabItemSelect","changeEventHandler"],[0,"mdsTabItemFocus","focusEventHandler"]],{"animation":["handleAnimation"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/floating-controller.js

@@ -143,12 +143,12 @@ export class FloatingController {
 }
 export class Backdrop {
     constructor(backdropId) {
-        this.defaultBackdropId = 'mds-backdrop';
+        this.defaultBackdropId = 'magma-backdrop';
         this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
         this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
         this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
-        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
-        this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
+        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`;
+        this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`;
     }
     attachBackdrop() {
         if (!this.backdropEl) {

package/dist/collection/common/string.js

@@ -0,0 +1,30 @@
+const levenshteinDistance = (a, b) => {
+    const dp = Array.from({ length: a.length + 1 }, (_, i) => 
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)));
+    for (let i = 1; i <= a.length; i++) {
+        for (let j = 1; j <= b.length; j++) {
+            if (a[i - 1] === b[j - 1]) {
+                dp[i][j] = dp[i - 1][j - 1];
+            }
+            else {
+                dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+            }
+        }
+    }
+    return dp[a.length][b.length];
+};
+const closest = (input, validCodes) => {
+    let [closest] = validCodes;
+    let minDistance = levenshteinDistance(input, closest);
+    for (const code of validCodes) {
+        const distance = levenshteinDistance(input, code);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closest = code;
+        }
+    }
+    return closest;
+};
+const firstLetterUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export { closest, firstLetterUppercase, levenshteinDistance, };

package/dist/collection/components/mds-tab/mds-tab.css

@@ -24,7 +24,7 @@
  * @prop --mds-tab-scroll-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)
  * @prop --mds-tab-tabs-background: Sets the `background-color` of `mds-tab::part(tabs)`
  * @prop --mds-tab-tabs-gap: Sets the `gap` of `mds-tab::part(tabs)`
- * @prop --mds-tab-tabs-outline-opacity: Sets the `opacity` of outline border which holds
+ * @prop --mds-tab-tabs-wrapper-outline-opacity: Sets the `opacity` of outline border which holds
  * @prop --mds-tab-tabs-padding: Sets the `padding` of `mds-tab::part(tabs)`
  * @prop --mds-tab-tabs-radius: Sets the `border-radius` of `mds-tab::part(tabs)`
  */
@@ -39,8 +39,9 @@
   --mds-tab-item-hover-shadow: transparent;
   --mds-tab-item-radius: 0.5rem;
   --mds-tab-item-selected-background: rgb(var(--tone-neutral));
-  --mds-tab-item-selected-color: rgb(var(--tone-neutral-02));
+  --mds-tab-item-selected-color: rgb(var(--tone-neutral-01));
   --mds-tab-item-selected-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mds-tab-scroll-behavior: smooth;
   --mds-tab-scroll-scrollbar-margin: 0;
   --mds-tab-scroll-scrollbar-radius: 0;
   --mds-tab-scroll-scrollbar-size: 0.5rem;
@@ -48,9 +49,11 @@
   --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);
   --mds-tab-tabs-background: rgb(var(--tone-neutral-09));
   --mds-tab-tabs-gap: 0.5rem;
-  --mds-tab-tabs-outline-opacity: 0.7;
   --mds-tab-tabs-padding: 0.5rem;
   --mds-tab-tabs-radius: 1rem;
+  --mds-tab-tabs-wrapper-outline-opacity: 0.7;
+  --mds-tab-tabs-wrapper-shadow-color: var(--mds-tab-tabs-background);
+  --mds-tab-tabs-wrapper-shadow: 0 0 0 2px var(--mds-tab-tabs-wrapper-shadow-color) inset;
   --mds-tab-transition-duration: 0.5s;
   --mds-tab-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
@@ -74,7 +77,7 @@
   gap: var(--mds-tab-tabs-gap);
   overflow: auto;
   padding: var(--mds-tab-tabs-padding);
-  scroll-behavior: smooth;
+  scroll-behavior: var(--mds-tab-scroll-behavior);
   scroll-snap-type: x mandatory;
   transition-duration: var(--mds-tab-transition-duration);
   transition-property: background-color;
@@ -83,18 +86,29 @@
 
 .tabs-wrapper {
   display: grid;
+  max-width: -moz-max-content;
+  max-width: max-content;
   overflow: hidden;
   position: relative;
 }
 
+.tabs-wrapper--fill {
+  max-width: 100%;
+}
+
 .tabs-wrapper::after {
   border-radius: var(--mds-tab-tabs-radius);
-  box-shadow: 0 0 0 2px var(--mds-tab-tabs-background) inset;
+  box-shadow: var(--mds-tab-tabs-wrapper-shadow);
   content: "";
   inset: 0;
-  opacity: var(--mds-tab-tabs-outline-opacity);
+  opacity: var(--mds-tab-tabs-wrapper-outline-opacity);
   pointer-events: none;
   position: absolute;
+  transition-duration: var(--mds-tab-transition-duration);
+  transition-property: box-shadow, opacity;
+  transition-timing-function: var(--mds-tab-transition-timing-function);
+
+  /* z-index: 1; */
 }
 
 
@@ -113,13 +127,17 @@
   overflow-x: auto;
   overflow-y: hidden;
   position: relative;
-  scroll-behavior: smooth;
+  scroll-behavior: var(--mds-tab-scroll-behavior);
   scroll-snap-type: x mandatory;
   transition-duration: var(--mds-tab-transition-duration);
   transition-property: height;
   transition-timing-function: var(--mds-tab-transition-timing-function);
 }
 
+.contents:empty {
+  display: none;
+}
+
 ::slotted( [slot="content"] ){
 
   width: 100%;
@@ -154,13 +172,17 @@
   top: var(--mds-tab-tabs-padding);
   transform: translateX(var(--mds-tab-slider-offset)) translateZ(0);
   transition-duration: var(--mds-tab-transition-duration);
-  transition-property: transform, width;
+  transition-property: background-color, box-shadow, transform, width;
   transition-timing-function: var(--mds-tab-transition-timing-function);
   width: var(--mds-tab-slider-width);
   will-change: transform, width;
   z-index: 0;
 }
 
+.slider--no-trantitions {
+  transition-property: none;
+}
+
 ::slotted( mds-tab-item ) {
   position: relative;
   z-index: 1;
@@ -209,6 +231,7 @@
 @container style(--magma-pref-animation: reduce) {
   :host {
 
+    --mds-tab-scroll-behavior: auto;
     --mds-tab-transition-duration: 0s;
   }
 }
@@ -218,6 +241,7 @@
   @media (prefers-reduced-motion) {
     :host {
 
+      --mds-tab-scroll-behavior: auto;
       --mds-tab-transition-duration: 0s;
     }
   }
@@ -226,33 +250,164 @@
 @tailwind utilities;
 
 @container style(--magma-pref-theme: dark) {
-  .tabs {
-    border-color: rgb(var(--tone-neutral-08));
+  :host {
+
+    --mds-tab-tabs-background: rgb(var(--tone-neutral-08));
+    --mds-tab-item-selected-background: rgb(var(--tone-neutral-07));
   }
 }
 
 @container style(--magma-pref-theme: system) {
 
   @media (prefers-color-scheme: dark) {
-    .tabs {
-      border-color: rgb(var(--tone-neutral-08));
+    :host {
+
+      --mds-tab-tabs-background: rgb(var(--tone-neutral-08));
+      --mds-tab-item-selected-background: rgb(var(--tone-neutral-07));
     }
   }
 }
 
 @container style(--magma-pref-contrast: more) {
-  .tabs {
-    border-color: rgb(var(--tone-neutral-06));
+  :host {
+
+    --mds-tab-item-selected-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
+    --mds-tab-tabs-wrapper-shadow: 0 0 0 0.125rem var(--mds-tab-tabs-wrapper-shadow-color) inset;
+    --mds-tab-tabs-wrapper-shadow-color: rgb(var(--tone-neutral-07));
+    --mds-tab-tabs-wrapper-outline-opacity: 0.3;
   }
 }
 
 @container style(--magma-pref-contrast: system) {
 
   @media (prefers-contrast: more) {
-    .tabs {
-      border-color: rgb(var(--tone-neutral-06));
+    :host {
+
+      --mds-tab-item-selected-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
+      --mds-tab-tabs-wrapper-shadow: 0 0 0 0.125rem var(--mds-tab-tabs-wrapper-shadow-color) inset;
+      --mds-tab-tabs-wrapper-shadow-color: rgb(var(--tone-neutral-07));
+      --mds-tab-tabs-wrapper-outline-opacity: 0.3;
     }
   }
 }
 
 
+:host(:not(:is([hydrated], .hydrated))) {
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+
+/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
+
+mds-accordion:not(:is([hydrated], .hydrated)),
+mds-accordion-item:not(:is([hydrated], .hydrated)),
+mds-accordion-timer:not(:is([hydrated], .hydrated)),
+mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
+mds-author:not(:is([hydrated], .hydrated)),
+mds-avatar:not(:is([hydrated], .hydrated)),
+mds-badge:not(:is([hydrated], .hydrated)),
+mds-banner:not(:is([hydrated], .hydrated)),
+mds-benchmark-bar:not(:is([hydrated], .hydrated)),
+mds-bibliography:not(:is([hydrated], .hydrated)),
+mds-breadcrumb:not(:is([hydrated], .hydrated)),
+mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
+mds-button:not(:is([hydrated], .hydrated)),
+mds-card:not(:is([hydrated], .hydrated)),
+mds-card-content:not(:is([hydrated], .hydrated)),
+mds-card-footer:not(:is([hydrated], .hydrated)),
+mds-card-header:not(:is([hydrated], .hydrated)),
+mds-card-media:not(:is([hydrated], .hydrated)),
+mds-chip:not(:is([hydrated], .hydrated)),
+mds-details:not(:is([hydrated], .hydrated)),
+mds-dropdown:not(:is([hydrated], .hydrated)),
+mds-entity:not(:is([hydrated], .hydrated)),
+mds-file:not(:is([hydrated], .hydrated)),
+mds-file-preview:not(:is([hydrated], .hydrated)),
+mds-filter:not(:is([hydrated], .hydrated)),
+mds-filter-item:not(:is([hydrated], .hydrated)),
+mds-header:not(:is([hydrated], .hydrated)),
+mds-header-bar:not(:is([hydrated], .hydrated)),
+mds-help:not(:is([hydrated], .hydrated)),
+mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
+mds-hr:not(:is([hydrated], .hydrated)),
+mds-icon:not(:is([hydrated], .hydrated)),
+mds-img:not(:is([hydrated], .hydrated)),
+mds-input:not(:is([hydrated], .hydrated)),
+mds-input-field:not(:is([hydrated], .hydrated)),
+mds-input-range:not(:is([hydrated], .hydrated)),
+mds-input-select:not(:is([hydrated], .hydrated)),
+mds-input-switch:not(:is([hydrated], .hydrated)),
+mds-input-tip:not(:is([hydrated], .hydrated)),
+mds-input-tip-item:not(:is([hydrated], .hydrated)),
+mds-input-upload:not(:is([hydrated], .hydrated)),
+mds-keyboard:not(:is([hydrated], .hydrated)),
+mds-keyboard-key:not(:is([hydrated], .hydrated)),
+mds-kpi:not(:is([hydrated], .hydrated)),
+mds-kpi-item:not(:is([hydrated], .hydrated)),
+mds-label:not(:is([hydrated], .hydrated)),
+mds-list:not(:is([hydrated], .hydrated)),
+mds-list-item:not(:is([hydrated], .hydrated)),
+mds-modal:not(:is([hydrated], .hydrated)),
+mds-note:not(:is([hydrated], .hydrated)),
+mds-notification:not(:is([hydrated], .hydrated)),
+mds-paginator:not(:is([hydrated], .hydrated)),
+mds-paginator-item:not(:is([hydrated], .hydrated)),
+mds-pref:not(:is([hydrated], .hydrated)),
+mds-pref-animation:not(:is([hydrated], .hydrated)),
+mds-pref-consumption:not(:is([hydrated], .hydrated)),
+mds-pref-contrast:not(:is([hydrated], .hydrated)),
+mds-pref-language:not(:is([hydrated], .hydrated)),
+mds-pref-language-item:not(:is([hydrated], .hydrated)),
+mds-pref-theme:not(:is([hydrated], .hydrated)),
+mds-price-table:not(:is([hydrated], .hydrated)),
+mds-price-table-features:not(:is([hydrated], .hydrated)),
+mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
+mds-price-table-features-row:not(:is([hydrated], .hydrated)),
+mds-price-table-header:not(:is([hydrated], .hydrated)),
+mds-price-table-list:not(:is([hydrated], .hydrated)),
+mds-price-table-list-item:not(:is([hydrated], .hydrated)),
+mds-progress:not(:is([hydrated], .hydrated)),
+mds-push-notification:not(:is([hydrated], .hydrated)),
+mds-push-notifications:not(:is([hydrated], .hydrated)),
+mds-quote:not(:is([hydrated], .hydrated)),
+mds-separator:not(:is([hydrated], .hydrated)),
+mds-spinner:not(:is([hydrated], .hydrated)),
+mds-stepper-bar:not(:is([hydrated], .hydrated)),
+mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab:not(:is([hydrated], .hydrated)),
+mds-tab-bar:not(:is([hydrated], .hydrated)),
+mds-tab-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab-item:not(:is([hydrated], .hydrated)),
+mds-table:not(:is([hydrated], .hydrated)),
+mds-table-body:not(:is([hydrated], .hydrated)),
+mds-table-cell:not(:is([hydrated], .hydrated)),
+mds-table-footer:not(:is([hydrated], .hydrated)),
+mds-table-header:not(:is([hydrated], .hydrated)),
+mds-table-header-cell:not(:is([hydrated], .hydrated)),
+mds-table-row:not(:is([hydrated], .hydrated)),
+mds-text:not(:is([hydrated], .hydrated)),
+mds-toast:not(:is([hydrated], .hydrated)),
+mds-tooltip:not(:is([hydrated], .hydrated)),
+mds-tree:not(:is([hydrated], .hydrated)),
+mds-tree-item:not(:is([hydrated], .hydrated)),
+mds-url-view:not(:is([hydrated], .hydrated)),
+mds-usage:not(:is([hydrated], .hydrated)),
+mds-video-wall:not(:is([hydrated], .hydrated)),
+mds-zero:not(:is([hydrated], .hydrated))
+{
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+

package/dist/collection/components/mds-tab/mds-tab.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { setAttributeIfEmpty } from "../../common/aria";
 import { hashRandomValue } from "../../common/aria";
+import clsx from "clsx";
 /**
  * @part contents - Selects the container of the tabbed contents elements.
  * @part slider - Selects the slider element which is visible when attribute `animation` is set to `slide`.
@@ -18,13 +19,25 @@ export class MdsTab {
          */
         this.animation = 'slide';
         this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
-        this.updateSliderPosition = () => {
+        this.startObserver = () => {
+            this.observer = new ResizeObserver(() => {
+                if (this.animation === 'slide') {
+                    this.updateSliderPosition(true);
+                }
+            });
+            this.observer.observe(this.tabsContainer);
+        };
+        this.updateSliderPosition = (disableAnimation) => {
             if (!this.slider) {
                 this.setSlider();
             }
-            if (this.slider) {
+            if (this.slider && this.currentItem >= 0) {
+                if (disableAnimation) {
+                    this.slider.classList.add('slider--no-trantitions');
+                }
                 this.sliderWidth = this.tabItems[this.currentItem].offsetWidth;
                 this.sliderOffset = this.tabItems[this.currentItem].offsetLeft - this.tabsContainer.offsetLeft;
+                this.slider.classList.remove('slider--no-trantitions');
             }
         };
         this.setSlider = () => {
@@ -44,6 +57,9 @@ export class MdsTab {
             });
         };
     }
+    disonnectedCallback() {
+        this.observer.unobserve(this.tabsContainer);
+    }
     componentWillLoad() {
         this.tabItems = this.element.querySelectorAll('mds-tab-item');
         this.tabItems.forEach((item, key) => {
@@ -59,6 +75,7 @@ export class MdsTab {
         var _a, _b;
         this.tabs = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tabs');
         this.tabsContainer = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs-wrapper');
+        this.startObserver();
         this.contentItems = this.queryContentItems();
         this.contentItems.forEach((item, key) => {
             setAttributeIfEmpty(item, 'role', 'tabpanel');
@@ -103,12 +120,12 @@ export class MdsTab {
         this.slider = null;
     }
     render() {
-        return (h(Host, { key: '6a2434a047dacdb770cf8e623e9f48dd18a53654' }, h("div", { key: 'c3b448092c30ca04bb1b42f374edeee4bf7707ba', class: "tabs-wrapper" }, h("div", { key: 'c528121d69ea3abf7a7b2ea34654580f3d8bd266', class: "tabs", part: "tabs", role: "tablist" }, h("slot", { key: '759fb466c9e0e375460a37cc3a0373ae715b58ed' }), this.animation === 'slide' &&
-            h("div", { key: '146d219cd9abbfc5b1080b1e2e81eade9abe4171', class: "slider", part: "slider", style: {
+        return (h(Host, { key: '6ccc0ea805f77b2753cbb06f27953f8d6ae250e1' }, h("div", { key: 'd9a918c74be8f21fa69bf45b35669620c2c2c617', class: clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, h("div", { key: 'badfe373f84548486800772c5ad3c6297ea2d3e6', class: "tabs", part: "tabs", role: "tablist" }, h("slot", { key: '471e14edea2d58e52cd793fa20a2bc6cb13cd2dd' }), this.animation === 'slide' &&
+            h("div", { key: 'bab0c0ae75bbdbc28dc65425565fc06931b22549', class: "slider", part: "slider", style: {
                     '--mds-tab-slider-width': `${this.sliderWidth}px`,
                     '--mds-tab-slider-offset': `${this.sliderOffset}px`,
                 } }))), this.contentItems &&
-            h("div", { key: '040876c932e1ab98101a7453846a63e781724bb6', class: "contents", part: "contents" }, h("slot", { key: '670782e05aaacf2b1113beffce71bcca87a86b86', name: "content" }))));
+            h("div", { key: '8d84d04142c43e66082d201c940c4eaca1749ceb', class: "contents", part: "contents" }, h("slot", { key: '7cf3ec2c2fb83fd4a3aebdb5d8149606a8501887', name: "content" }))));
     }
     static get is() { return "mds-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -168,6 +185,25 @@ export class MdsTab {
                 "attribute": "animation",
                 "reflect": true,
                 "defaultValue": "'slide'"
+            },
+            "fill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets if the tab area should fill the entire width"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fill",
+                "reflect": true
             }
         };
     }

package/dist/collection/components/mds-tab/test/mds-tab.stories.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { horizontalActionsAnimationDictionary } from "../../../dictionary/animation";
+import clsx from "clsx";
 export default {
     title: 'UI / Tab',
     argTypes: {
@@ -16,6 +17,10 @@ export default {
     },
 };
 const TemplateEmpty = args => h("div", { class: "grid gap-600" }, h("mds-tab", Object.assign({}, args), h("mds-tab-item", { selected: true }, "First Blood"), h("mds-tab-item", { icon: "mdi/alien", id: "button" }, "Double Impact"), h("mds-tab-item", null, "The Third Man")), h("mds-hr", null), h("div", { class: "grid gap-100" }, h("mds-text", { typography: 'h3' }, "Bottom content"), h("mds-text", null, "This content is outside the mds-tab component.")));
+const SectionComponent = ({ id, className, title }) => {
+    return h("div", { id: id, class: clsx('grid gap-100 p-600 min-h-screen auto-rows-min scroll-mt-2000', className) }, h("mds-text", { typography: 'h3' }, title), h("mds-text", null, "This content is outside the mds-tab component."));
+};
+const TemplateScroll = () => h("div", { class: "grid gap-600 pt-[60px]" }, h("div", { class: "fixed top-0 left-0 right-0 p-400 px-600 shadow-sm flex bg-tone-neutral" }, h("mds-tab", null, h("mds-tab-item", { href: "#section-1" }, "Section 1"), h("mds-tab-item", { href: "#section-2" }, "Section 2"), h("mds-tab-item", { href: "#section-3" }, "Section 3"))), h("div", { class: "grid gap-50" }, h(SectionComponent, { id: "section-1", className: "bg-label-amaranth-09", title: "Section 1" }), h(SectionComponent, { id: "section-2", className: "bg-label-blue-09", title: "Section 2" }), h(SectionComponent, { id: "section-3", className: "bg-label-orange-09", title: "Section 3" })));
 const TemplateOverflow = args => h("div", { class: "grid gap-600" }, h("mds-tab", Object.assign({}, args), h("mds-tab-item", { selected: true }, "First Blood"), h("mds-tab-item", null, "Double Impact"), h("mds-tab-item", null, "The Third Man"), h("mds-tab-item", null, "The Fantastic Four"), h("mds-tab-item", null, "The Fifth Element"), h("mds-tab-item", null, "6 Underground"), h("mds-tab-item", null, "Seven Samurai"), h("mds-tab-item", null, "The Hateful Eight"), h("mds-tab-item", null, "Nine Perfect Strangers"), h("mds-tab-item", null, "10 Things I Hate About You")));
 const Template = args => h("div", { class: "grid gap-600" }, h("mds-tab", Object.assign({}, args), h("mds-tab-item", { selected: true }, "First Blood"), h("mds-tab-item", { icon: "mdi/alien", id: "button" }, "Double Impact"), h("mds-tab-item", null, "The Third Man"), h("div", { slot: "content", class: "gap-600 grid px-200 py-600 tablet:grid-cols-[1fr_2fr]" }, h("mds-img", { class: "rounded-lg", src: './movie-first-blood.jpg' }), h("div", { class: "grid gap-100 auto-rows-min" }, h("mds-text", { typography: 'h4' }, "First Blood"), h("mds-text", null, "Vietnam veteran and drifter John J. Rambo (Sylvester Stallone) wanders into a small Washington town in search of an old friend, but is met with intolerance and brutality by the local sheriff, Will Teasle (Brian Dennehy). When Teasle and his deputies restrain and shave Rambo, he flashes back to his time as a prisoner of war and unleashes his fury on the officers. He narrowly escapes the manhunt, but it will take his former commander (Richard Crenna) to save the hunters from the hunted."))), h("div", { slot: "content", class: "py-600 px-200 grid tablet:grid-cols-[1fr_2fr] gap-600" }, h("div", { class: "auto-rows-min grid gap-200" }, h("mds-img", { class: "rounded-lg", src: './movie-double-impact.jpg' }), h("mds-img", { class: "rounded-lg", src: './movie-double-impact-shot-01.jpg' }), h("mds-img", { class: "rounded-lg", src: './movie-double-impact-shot-02.jpg' })), h("div", { class: "grid gap-100 auto-rows-min" }, h("mds-text", { typography: 'h4' }, "Double Impact"), h("mds-text", null, "Nearly 25 years after seeing his father killed by Hong Kong crime boss Raymond Zhang (Philip Chan Yan Kin), Chad Wagner (Jean-Claude Van Damme) is living in Los Angeles as a flourishing yet peaceful martial arts trainer. But Chad has a twin brother, Alex (also Van Damme), who suddenly reunites with his less-aggressive sibling and wants to avenge their father's death. As the pair plan their payback against Zhang, they also struggle to overcome their personal differences."))), h("div", { slot: "content", class: "py-600 px-200 grid tablet:grid-cols-[1fr_2fr] gap-600" }, h("div", { class: "auto-rows-min grid gap-200" }, h("mds-img", { class: "rounded-lg", src: './movie-the-third-man.jpg' }), h("mds-img", { class: "rounded-lg", src: './movie-the-third-man-shot.jpg' })), h("div", { class: "grid gap-100 auto-rows-min" }, h("mds-text", { typography: 'h4' }, "The Third Man"), h("mds-text", null, "Set in postwar Vienna, Austria, \"The Third Man\" stars Joseph Cotten as Holly Martins, a writer of pulp Westerns, who arrives penniless as a guest of his childhood chum Harry Lime (Orson Welles), only to find him dead. Martins develops a conspiracy theory after learning of a \"third man\" present at the time of Harry's death, running into interference from British officer Maj. Calloway (Trevor Howard) and falling head-over-heels for Harry's grief-stricken lover, Anna (Alida Valli).")))), h("mds-hr", null), h("div", { class: "grid gap-100" }, h("mds-text", { typography: 'h3' }, "Bottom content"), h("mds-text", null, "This content is outside the mds-tab component.")));
 const TemplateNoSelected = args => h("div", { class: "grid gap-600" }, h("mds-tab", Object.assign({}, args), h("mds-tab-item", null, "First Blood"), h("mds-tab-item", { icon: "mdi/alien", id: "button" }, "Double Impact"), h("mds-tab-item", null, "The Third Man"), h("div", { slot: "content", class: "py-600 px-200 grid tablet:grid-cols-[1fr_2fr] gap-600" }, h("mds-img", { class: "rounded-lg", src: './movie-first-blood.jpg' }), h("div", { class: "grid gap-100 auto-rows-min" }, h("mds-text", { typography: 'h4' }, "First Blood"), h("mds-text", null, "Vietnam veteran and drifter John J. Rambo (Sylvester Stallone) wanders into a small Washington town in search of an old friend, but is met with intolerance and brutality by the local sheriff, Will Teasle (Brian Dennehy). When Teasle and his deputies restrain and shave Rambo, he flashes back to his time as a prisoner of war and unleashes his fury on the officers. He narrowly escapes the manhunt, but it will take his former commander (Richard Crenna) to save the hunters from the hunted."))), h("div", { slot: "content", class: "py-600 px-200 grid tablet:grid-cols-[1fr_2fr] gap-600" }, h("div", { class: "auto-rows-min grid gap-200" }, h("mds-img", { class: "rounded-lg", src: './movie-double-impact.jpg' }), h("mds-img", { class: "rounded-lg", src: './movie-double-impact-shot-01.jpg' }), h("mds-img", { class: "rounded-lg", src: './movie-double-impact-shot-02.jpg' })), h("div", { class: "grid gap-100 auto-rows-min" }, h("mds-text", { typography: 'h4' }, "Double Impact"), h("mds-text", null, "Nearly 25 years after seeing his father killed by Hong Kong crime boss Raymond Zhang (Philip Chan Yan Kin), Chad Wagner (Jean-Claude Van Damme) is living in Los Angeles as a flourishing yet peaceful martial arts trainer. But Chad has a twin brother, Alex (also Van Damme), who suddenly reunites with his less-aggressive sibling and wants to avenge their father's death. As the pair plan their payback against Zhang, they also struggle to overcome their personal differences."))), h("div", { slot: "content", class: "py-600 px-200 grid tablet:grid-cols-[1fr_2fr] gap-600" }, h("div", { class: "auto-rows-min grid gap-200" }, h("mds-img", { class: "rounded-lg", src: './movie-the-third-man.jpg' }), h("mds-img", { class: "rounded-lg", src: './movie-the-third-man-shot.jpg' })), h("div", { class: "grid gap-100 auto-rows-min" }, h("mds-text", { typography: 'h4' }, "The Third Man"), h("mds-text", null, "Set in postwar Vienna, Austria, \"The Third Man\" stars Joseph Cotten as Holly Martins, a writer of pulp Westerns, who arrives penniless as a guest of his childhood chum Harry Lime (Orson Welles), only to find him dead. Martins develops a conspiracy theory after learning of a \"third man\" present at the time of Harry's death, running into interference from British officer Maj. Calloway (Trevor Howard) and falling head-over-heels for Harry's grief-stricken lover, Anna (Alida Valli).")))), h("mds-hr", null), h("div", { class: "grid gap-100" }, h("mds-text", { typography: 'h3' }, "Bottom content"), h("mds-text", null, "This content is outside the mds-tab component.")));
@@ -34,3 +39,4 @@ ShowScrollbar.args = {
     scrollbar: true,
 };
 export const NoSelectedItem = TemplateNoSelected.bind({});
+export const Scroll = TemplateScroll.bind({});