@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

package/cjs/src_tokens_web_components_tabs_tabs_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_tabs_tabs_json"],{
 
-/***/ "./src/tokens/web/components/tabs/tabs.json":
+/***/ "./src/tokens/web/components/tabs/tabs.json"
 /*!**************************************************!*\
   !*** ./src/tokens/web/components/tabs/tabs.json ***!
   \**************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabs"},"states":{"hover":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:hover:before"}},"focus":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:focus:before"}},"active":{"selector":{"web":" > .nav-tabs > .tab-header.active, > .nav-tabs > .tab-header .tab-heading:active:before"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"nav":{"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}}},"item":{"heading":{"height":{"value":"48px","type":"space","attributes":{"subtype":"space"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space"}},"font-size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"font-family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"color":{"@":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"width":{"value":"0px","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius"}}}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space"}},"width":{"value":"~\\"calc(100% - {space.12.value})\\"","type":"space","attributes":{"subtype":"space"}},"radius":{"value":"{radius.md.value} {radius.md.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}}}},"content":{"background":{"value":"inherit","type":"color","attributes":{"subtype":"color"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space"}},"height":{"value":"100px","type":"space","attributes":{"subtype":"space"}}},"states":{"hover":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"focus":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"item":{"heading":{"indicator":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabs"},"states":{"hover":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:hover:before"}},"focus":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:focus:before"}},"active":{"selector":{"web":" > .nav-tabs > .tab-header.active, > .nav-tabs > .tab-header .tab-heading:active:before"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"}},"nav":{"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tab navigation (the section containing the tab headers). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-nav-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color"}}}},"item":{"heading":{"height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font-size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"font-weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"font-family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family"}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color"}}},"border":{"width":{"value":"0px","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius","description":"Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity"}}}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"width":{"value":"~\\"calc(100% - {space.12.value})\\"","type":"space","attributes":{"subtype":"space","description":"Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width"}},"radius":{"value":"{radius.md.value} {radius.md.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}}},"content":{"background":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding"}},"height":{"value":"100px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height"}}},"states":{"hover":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"focus":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"item":{"heading":{"indicator":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_tile_tile_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_tile_tile_json"],{
 
-/***/ "./src/tokens/web/components/tile/tile.json":
+/***/ "./src/tokens/web/components/tile/tile.json"
 /*!**************************************************!*\
   !*** ./src/tokens/web/components/tile/tile.json ***!
   \**************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-tile","mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default","web":".bg-default"}},"primary":{"selector":{"mobile":".bg-primary","web":".bg-primary"}},"secondary":{"selector":{"mobile":".bg-secondary","web":".bg-secondary"}},"tertiary":{"selector":{"mobile":".bg-tertiary","web":".bg-tertiary"}},"success":{"selector":{"mobile":".bg-success","web":".bg-success"}},"info":{"selector":{"mobile":".bg-info","web":".bg-info"}},"warning":{"selector":{"mobile":".bg-warning","web":".bg-warning"}},"danger":{"selector":{"mobile":".bg-danger","web":".bg-danger"}}}}},"filled":{"mapping":{"selector":{"web":".app-tile","mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled","web":".bg-default-filled"}},"primary":{"selector":{"mobile":".bg-primary-filled","web":".bg-primary-filled"}},"secondary":{"selector":{"mobile":".bg-secondary-filled","web":".bg-secondary-filled"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled","web":".bg-tertiary-filled"}},"success":{"selector":{"mobile":".bg-success-filled","web":".bg-success-filled"}},"info":{"selector":{"mobile":".bg-info-filled","web":".bg-info-filled"}},"warning":{"selector":{"mobile":".bg-warning-filled","web":".bg-warning-filled"}},"danger":{"selector":{"mobile":".bg-danger-filled","web":".bg-danger-filled"}}}}}}},"mapping":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-tile","mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default","web":".bg-default"}},"primary":{"selector":{"mobile":".bg-primary","web":".bg-primary"}},"secondary":{"selector":{"mobile":".bg-secondary","web":".bg-secondary"}},"tertiary":{"selector":{"mobile":".bg-tertiary","web":".bg-tertiary"}},"success":{"selector":{"mobile":".bg-success","web":".bg-success"}},"info":{"selector":{"mobile":".bg-info","web":".bg-info"}},"warning":{"selector":{"mobile":".bg-warning","web":".bg-warning"}},"danger":{"selector":{"mobile":".bg-danger","web":".bg-danger"}}}}},"filled":{"mapping":{"selector":{"web":".app-tile","mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled","web":".bg-default-filled"}},"primary":{"selector":{"mobile":".bg-primary-filled","web":".bg-primary-filled"}},"secondary":{"selector":{"mobile":".bg-secondary-filled","web":".bg-secondary-filled"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled","web":".bg-tertiary-filled"}},"success":{"selector":{"mobile":".bg-success-filled","web":".bg-success-filled"}},"info":{"selector":{"mobile":".bg-info-filled","web":".bg-info-filled"}},"warning":{"selector":{"mobile":".bg-warning-filled","web":".bg-warning-filled"}},"danger":{"selector":{"mobile":".bg-danger-filled","web":".bg-danger-filled"}}}}}}},"mapping":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tile components (rectangular content blocks that hold information). This is the main background color that appears behind the tile content.<br>CSS variable: --wm-tile-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tile components (the color of text content within rectangular content blocks). This should contrast well with the background color for readability.<br>CSS variable: --wm-tile-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tile components (rectangular content blocks). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around tile components (rectangular content blocks). This creates a subtle shadow that makes the tiles appear to float above the background, giving them depth and elevation.<br>CSS variable: --wm-tile-shadow"}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_time_time_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_time_time_json"],{
 
-/***/ "./src/tokens/web/components/time/time.json":
+/***/ "./src/tokens/web/components/time/time.json"
 /*!**************************************************!*\
   !*** ./src/tokens/web/components/time/time.json ***!
   \**************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"timepicker":{"meta":{},"mapping":{"input":{"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-size":{"value":"{h3.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"width":{"value":"60px","type":"space","attributes":{"subtype":"space"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius"}}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"radius"}},"period":{"selector":{"border":{"@":{"value":"{border.width.base.value} {border.style.base.value} {color.outline.@.value}","type":"radius","attributes":{"subtype":"border-width"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}}},"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}}},"btn":{"padding":{"value":"{space.1.value} {space.1.value}","type":"space","attributes":{"subtype":"space"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"timepicker":{"meta":{},"mapping":{"input":{"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for time picker input fields (where users enter hours, minutes, and seconds). This determines whether the time values appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-timepicker-input-font-family"}},"font-size":{"value":"{h3.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the time values appear in time picker input fields (where users enter hours, minutes, and seconds). This affects the size of the time numbers that users see and interact with.<br>CSS variable: --wm-timepicker-input-font-size"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the time values appear in time picker input fields. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-timepicker-input-font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when time picker input text wraps to multiple lines. This ensures proper spacing for time values displayed in the input fields.<br>CSS variable: --wm-timepicker-input-line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in time picker input fields. This can help make time values more readable and properly spaced.<br>CSS variable: --wm-timepicker-input-letter-spacing"}},"width":{"value":"60px","type":"space","attributes":{"subtype":"space","description":"Controls how wide time picker input fields appear (the boxes where users enter hours, minutes, and seconds). This determines the horizontal space available for time values.<br>CSS variable: --wm-timepicker-input-width"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside time picker input fields (the space between the time values and the field borders). This creates breathing room around the time numbers.<br>CSS variable: --wm-timepicker-input-padding"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around time picker input fields. This creates a bottom border to separate the time input from other elements.<br>CSS variable: --wm-timepicker-input-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around time picker input fields. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-timepicker-input-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around time picker input fields. This determines the color of the outline that defines the time input area.<br>CSS variable: --wm-timepicker-input-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker input fields. When set to \'none\', the fields have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-input-border-radius"}}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of time picker components (the dropdown panel that appears when users click to select time). This is the main background color that appears behind the time selection interface.<br>CSS variable: --wm-timepicker-background"}},"border":{"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker components (the dropdown panel that appears when users click to select time). This makes the time picker appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-border-radius"}}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the internal spacing inside time picker components (the space between the time selection interface and the panel borders). This creates breathing room around the time selection controls.<br>CSS variable: --wm-timepicker-padding"}},"period":{"selector":{"border":{"@":{"value":"{border.width.base.value} {border.style.base.value} {color.outline.@.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border styling of time picker period selectors (AM/PM buttons that users click to choose morning or afternoon time). This creates the outline that defines the period selector buttons.<br>CSS variable: --wm-timepicker-period-selector-border"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker period selectors (AM/PM buttons). This makes the period selector buttons appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-period-selector-border-radius"}}},"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of time picker period selectors (AM/PM buttons that users click to choose morning or afternoon time). This is the main background color that appears behind the period selector buttons.<br>CSS variable: --wm-timepicker-period-selector-background"}},"color":{"value":"{color.on-tertiary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of time picker period selectors (the AM/PM text that appears on the period selector buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-timepicker-period-selector-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for time picker period selectors (the AM/PM text). This determines whether the period text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-timepicker-period-selector-font-family"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the period selector text appears (the AM/PM text). This affects the size of the period text that users see and interact with.<br>CSS variable: --wm-timepicker-period-selector-font-size"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the period selector text appears (the AM/PM text). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-timepicker-period-selector-font-weight"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when period selector text wraps to multiple lines. This ensures proper spacing for the AM/PM text displayed on the buttons.<br>CSS variable: --wm-timepicker-period-selector-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in period selector text (the AM/PM text). This can help make the period text more readable and properly spaced.<br>CSS variable: --wm-timepicker-period-selector-letter-spacing"}}}},"btn":{"padding":{"value":"{space.1.value} {space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside time picker buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-timepicker-btn-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker buttons (navigation and control buttons in the time picker interface). This makes the buttons appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-btn-border-radius"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around time picker buttons. This determines the color of the outline that defines the button shape.<br>CSS variable: --wm-timepicker-btn-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around time picker buttons. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-timepicker-btn-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around time picker buttons. When set to 0, there\'s no visible border. Higher values create thicker borders around the buttons.<br>CSS variable: --wm-timepicker-btn-border-width"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of time picker buttons. When set to \'transparent\', the buttons have no background color, making them transparent.<br>CSS variable: --wm-timepicker-btn-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_toast_toast_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_toast_toast_json"],{
 
-/***/ "./src/tokens/web/components/toast/toast.json":
+/***/ "./src/tokens/web/components/toast/toast.json"
 /*!****************************************************!*\
   !*** ./src/tokens/web/components/toast/toast.json ***!
   \****************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"toast":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".toast-container .toast"}},"variantGroups":{"status":{"default":{"selector":{"web":" "}},"success":{"selector":{"web":".toast-success "}},"info":{"selector":{"web":".toast-info "}},"warning":{"selector":{"web":".toast-warning "}},"error":{"selector":{"web":".toast-error "}}}}}}},"mapping":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"344px","type":"space","attributes":{"subtype":"space"}},"shadow":{"value":"{elevation.shadow.3.value}","type":"radius","attributes":{"subtype":"elevation"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space"}},"inline":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space"}}},"title":{"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}},"message":{"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}},"icon":{"@":{"value":"\\"\\\\f2ff\\"","type":"radius","attributes":{"subtype":"icon-size"}},"size":{"value":"{icon.size.md.value}","type":"radius","attributes":{"subtype":"icon-size"}}},"position":{"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}},"left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}},"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f1cf\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f1cf\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f2ff\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f24c\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"error":{"container":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f24d\\"","type":"radius","attributes":{"subtype":"icon-size"}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"toast":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".toast-container .toast"}},"variantGroups":{"status":{"default":{"selector":{"web":" "}},"success":{"selector":{"web":".toast-success "}},"info":{"selector":{"web":".toast-info "}},"warning":{"selector":{"web":".toast-warning "}},"error":{"selector":{"web":".toast-error "}}}}}}},"mapping":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toast notifications (pop-up messages that appear temporarily to inform users about actions or status). This is the main background color that appears behind the toast content.<br>CSS variable: --wm-toast-container-background"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of toast notifications (pop-up messages that appear temporarily to inform users). This should contrast well with the background for readability.<br>CSS variable: --wm-toast-container-color"}},"width":{"value":"344px","type":"space","attributes":{"subtype":"space","description":"Controls how wide toast notifications appear (pop-up messages that appear temporarily to inform users). This determines the horizontal size of the toast message box.<br>CSS variable: --wm-toast-container-width"}},"shadow":{"value":"{elevation.shadow.3.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around toast notifications (pop-up messages that appear temporarily). This creates a subtle shadow that makes the toast appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-toast-container-shadow"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of toast notifications (pop-up messages that appear temporarily). This makes the toast appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-toast-container-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toast notifications (pop-up messages that appear temporarily). This creates the outline that defines the toast shape and makes it visible to users.<br>CSS variable: --wm-toast-container-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around toast notifications. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-toast-container-border-style"}},"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toast notifications (pop-up messages that appear temporarily). This determines the color of the outline that defines the toast shape.<br>CSS variable: --wm-toast-container-border-color"}}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding inside toast notifications (the space between the toast content and the top/bottom borders). This creates breathing room around the toast content vertically.<br>CSS variable: --wm-toast-container-padding-block"}},"inline":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding inside toast notifications (the space between the toast content and the left/right borders). This creates breathing room around the toast content horizontally.<br>CSS variable: --wm-toast-container-padding-inline"}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between different elements within toast notifications (like the space between the title and message text). This creates visual separation between toast content elements.<br>CSS variable: --wm-toast-container-gap"}}},"title":{"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for toast notification titles (the main heading text in pop-up messages). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-title-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the toast notification titles appear (the main heading text in pop-up messages). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-title-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the toast notification titles appear (the main heading text in pop-up messages). This affects the size of the title text that users see in the toast.<br>CSS variable: --wm-toast-title-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when toast notification titles wrap to multiple lines. This ensures proper spacing for the title text displayed in the toast.<br>CSS variable: --wm-toast-title-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in toast notification titles. This can help make the title text more readable and properly spaced.<br>CSS variable: --wm-toast-title-letter-spacing"}}},"message":{"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for toast notification messages (the descriptive text in pop-up messages). This determines whether the message text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-message-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the toast notification messages appear (the descriptive text in pop-up messages). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-message-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the toast notification messages appear (the descriptive text in pop-up messages). This affects the size of the message text that users see in the toast.<br>CSS variable: --wm-toast-message-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when toast notification messages wrap to multiple lines. This ensures proper spacing for the message text displayed in the toast.<br>CSS variable: --wm-toast-message-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in toast notification messages. This can help make the message text more readable and properly spaced.<br>CSS variable: --wm-toast-message-letter-spacing"}}},"icon":{"@":{"value":"\\"\\\\f2ff\\"","type":"radius","attributes":{"subtype":"icon-size","description":"Sets the icon content for toast notifications (the symbol that appears in pop-up messages to indicate the type of notification). This determines which icon symbol is displayed in the toast.<br>CSS variable: --wm-toast-icon"}},"size":{"value":"{icon.size.md.value}","type":"radius","attributes":{"subtype":"icon-size","description":"Controls how large the toast notification icons appear (the symbols that appear in pop-up messages). This affects the size of the icon symbols that users see in the toast.<br>CSS variable: --wm-toast-icon-size"}}},"position":{"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the top of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far down from the top edge the toast will be positioned.<br>CSS variable: --wm-toast-position-top"}},"left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the left edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the left edge the toast will be positioned.<br>CSS variable: --wm-toast-position-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the right edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the right edge the toast will be positioned.<br>CSS variable: --wm-toast-position-right"}},"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the bottom of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far up from the bottom edge the toast will be positioned.<br>CSS variable: --wm-toast-position-bottom"}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f1cf\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f1cf\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f2ff\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f24c\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"error":{"container":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}},"icon":{"@":{"value":"\\"\\\\f24d\\"","type":"radius","attributes":{"subtype":"icon-size"}}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_toggle_toggle_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_toggle_toggle_json"],{
 
-/***/ "./src/tokens/web/components/toggle/toggle.json":
+/***/ "./src/tokens/web/components/toggle/toggle.json"
 /*!******************************************************!*\
   !*** ./src/tokens/web/components/toggle/toggle.json ***!
   \******************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"toggle":{"meta":{"mapping":{"selector":{"web":".app-checkbox"},"states":{"hover":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:hover"}},"focus":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:focus"}},"active":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:active"}},"checked":{"selector":{"web":".app-toggle label:has(>input[type=\'checkbox\']:checked)"}}}}},"mapping":{"width":{"value":"52px","type":"space","attributes":{"subtype":"space"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space"}},"background":{"@":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius"}},"state":{"layer":{"size":{"value":"40px","type":"space","attributes":{"subtype":"space"}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}}},"opacity":{"@":{"value":"0","type":"radius","attributes":{"subtype":"opacity"}}}}},"handle":{"size":{"@":{"value":"16px","type":"space","attributes":{"subtype":"space"}}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"state":{"layer":{"opacity":{"focus":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"state":{"layer":{"opacity":{"active":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"checked":{"handle":{"size":{"@":{"value":"16px","type":"space","attributes":{"subtype":"space"}}},"color":{"@":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"background":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"toggle":{"meta":{"mapping":{"selector":{"web":".app-checkbox"},"states":{"hover":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:hover"}},"focus":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:focus"}},"active":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:active"}},"checked":{"selector":{"web":".app-toggle label:has(>input[type=\'checkbox\']:checked)"}}}}},"mapping":{"width":{"value":"52px","type":"space","attributes":{"subtype":"space","description":"Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height"}},"background":{"@":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around toggle switches. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-toggle-border-style"}}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle switches. When set to \'pill\', the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-radius"}},"state":{"layer":{"size":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the size of the invisible clickable area around toggle switches (the state layer). This area is larger than the visible toggle, making it easier for users to click and interact with the toggle.<br>CSS variable: --wm-toggle-state-layer-size"}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with toggle switches. This creates visual feedback to show that the toggle is interactive and responsive to user actions.<br>CSS variable: --wm-toggle-state-layer-color"}}},"opacity":{"@":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-toggle-state-layer-opacity"}}}}},"handle":{"size":{"@":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the size of toggle handles (the circular element that slides along the toggle track). This determines how large the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-size"}}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"state":{"layer":{"opacity":{"focus":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"state":{"layer":{"opacity":{"active":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"checked":{"handle":{"size":{"@":{"value":"16px","type":"space","attributes":{"subtype":"space"}}},"color":{"@":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"background":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_video_video_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_video_video_json"],{
 
-/***/ "./src/tokens/web/components/video/video.json":
+/***/ "./src/tokens/web/components/video/video.json"
 /*!****************************************************!*\
   !*** ./src/tokens/web/components/video/video.json ***!
   \****************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"video":{"mapping":{"width":{"value":"300px","type":"space","attributes":{"subtype":"space"}},"height":{"value":"150px","type":"space","attributes":{"subtype":"space"}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"video":{"mapping":{"width":{"value":"300px","type":"space","attributes":{"subtype":"space","description":"Controls how wide video players appear on the page. This determines the horizontal size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-width"}},"height":{"value":"150px","type":"space","attributes":{"subtype":"space","description":"Controls how tall video players appear on the page. This determines the vertical size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-height"}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_wizard_wizard_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_wizard_wizard_json"],{
 
-/***/ "./src/tokens/web/components/wizard/wizard.json":
+/***/ "./src/tokens/web/components/wizard/wizard.json"
 /*!******************************************************!*\
   !*** ./src/tokens/web/components/wizard/wizard.json ***!
   \******************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"wizard":{"meta":{"mapping":{"selector":{"web":".app-wizard"},"states":{"current":{"selector":{"web":" .app-wizard-step.current"}},"active":{"selector":{"web":" .app-wizard-step.active"}}}},"appearances":{"number":{"mapping":{"selector":{"web":".app-wizard.number"}}},"iconstepper":{"mapping":{"selector":{"web":".app-wizard.iconstepper"}}},"iconstepper-textinline":{"mapping":{"selector":{"web":".app-wizard.iconstepper.text-inline"}}},"dottedstepper":{"mapping":{"selector":{"web":".app-wizard.dottedstepper"}}},"dottedstepper-textinline":{"mapping":{"selector":{"web":".app-wizard.dottedstepper.text-inline"}}},"classic":{"mapping":{"selector":{"web":".app-wizard.classic"}}},"vertical":{"mapping":{"selector":{"web":".app-wizard.vertical"}}}}},"mapping":{"background":{"value":"{panel.mapping.background.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width"}},"radius":{"value":"{panel.mapping.border.radius.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{panel.mapping.shadow.value}","type":"radius","attributes":{"subtype":"elevation"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space"}},"heading":{"background":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{panel.mapping.border.radius.value} {panel.mapping.border.radius.value} {panel.mapping.border.radius.value} {panel.mapping.border.radius.value}","type":"radius","attributes":{"subtype":"radius"}}},"padding":{"value":"{space.7.value} {space.0.value} {space.7.value}  {space.7.value}","type":"space","attributes":{"subtype":"space"}}},"body":{"min-height":{"value":"50vh","type":"space","attributes":{"subtype":"space"}}},"step":{"display":{"value":"inline-flex","type":"radius","attributes":{"subtype":"radius"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space"}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}},"description":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight"}},"size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size"}}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}},"indicator":{"size":{"value":"33px","type":"space","attributes":{"subtype":"space"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"{border.width.2.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius"}}}},"count":{"color":{"value":"{wizard.mapping.step.title.color}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{wizard.mapping.step.title.font.family.value}","type":"font","attributes":{"subtype":"font-family"}},"size":{"value":"{wizard.mapping.step.title.font.size.value}","type":"font","attributes":{"subtype":"font-size"}},"weight":{"value":"{wizard.mapping.step.title.font.weight.value}","type":"font","attributes":{"subtype":"font-weight"}}},"line-height":{"value":"{wizard.mapping.step.title.line-height.value}","type":"font","attributes":{"subtype":"line-height"}}},"icon":{"font":{"family":{"value":"{wizard.mapping.step.title.font.family.value}","type":"font","attributes":{"subtype":"font-family"}},"size":{"value":"{wizard.mapping.step.title.font.size.value}","type":"font","attributes":{"subtype":"font-size"}},"weight":{"value":"{wizard.mapping.step.title.font.weight.value}","type":"font","attributes":{"subtype":"font-weight"}}},"line-height":{"value":"{wizard.mapping.step.title.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"color":{"value":"{wizard.mapping.step.count.color.value}","type":"color","attributes":{"subtype":"color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size"}}},"connector":{"height":{"value":"100%","type":"space","attributes":{"subtype":"space"}},"width":{"value":"1px","type":"space","attributes":{"subtype":"space"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color"}}}},"states":{"current":{"step":{"indicator":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}}}},"active":{"step":{"indicator":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}}}}}},"appearances":{"number":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"iconstepper":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"iconstepper-textinline":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"dottedstepper":{"mapping":{"step":{"size":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space"}},"indicator":{"background":{"value":"none","type":"color","attributes":{"subtype":"color"}}}}},"variantGroups":{"horizontal":{},"vertical":{}}},"dottedstepper-textinline":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"classic":{"mapping":{"heading":{"padding":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space"}}},"step":{"display":{"value":"table-cell","type":"radius","attributes":{"subtype":"radius"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}},"title":{"height":{"value":"46px","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color"}}}},"states":{"current":{"step":{"title":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"step":{"title":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"variantGroups":{"horizontal":{}}},"vertical":{"mapping":{"heading":{"width":{"value":"200px","type":"space","attributes":{"subtype":"space"}},"border":{"radius":{"value":"{radius.none.value} {radius.none.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"padding":{"value":"{space.7.value} {space.7.value} {space.0.value}  {space.7.value}","type":"space","attributes":{"subtype":"space"}}},"connector":{"height":{"value":"100%","type":"space","attributes":{"subtype":"space"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"wizard":{"meta":{"mapping":{"selector":{"web":".app-wizard"},"states":{"current":{"selector":{"web":" .app-wizard-step.current"}},"active":{"selector":{"web":" .app-wizard-step.active"}}}},"appearances":{"number":{"mapping":{"selector":{"web":".app-wizard.number"}}},"iconstepper":{"mapping":{"selector":{"web":".app-wizard.iconstepper"}}},"iconstepper-textinline":{"mapping":{"selector":{"web":".app-wizard.iconstepper.text-inline"}}},"dottedstepper":{"mapping":{"selector":{"web":".app-wizard.dottedstepper"}}},"dottedstepper-textinline":{"mapping":{"selector":{"web":".app-wizard.dottedstepper.text-inline"}}},"classic":{"mapping":{"selector":{"web":".app-wizard.classic"}}},"vertical":{"mapping":{"selector":{"web":".app-wizard.vertical"}}}}},"mapping":{"background":{"value":"{panel.mapping.background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard components (multi-step forms that guide users through a process like account setup, checkout, or configuration). This is the main background color that appears behind the entire wizard container.<br>CSS variable: --wm-wizard-background"}},"border":{"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around wizard components (multi-step forms that guide users through a process). \'transparent\' removes the border color, or you can specify a specific color value.<br>CSS variable: --wm-wizard-border-color"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around wizard components (multi-step forms). \'none\' removes borders completely, \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-border-style"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around wizard components (multi-step forms that guide users through a process). This determines how thick the border lines appear around the wizard container.<br>CSS variable: --wm-wizard-border-width"}},"radius":{"value":"{panel.mapping.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard components (multi-step forms that guide users through a process). This makes the wizard container corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-border-radius"}}},"shadow":{"value":"{panel.mapping.shadow.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around wizard components (multi-step forms that guide users through a process). This creates a subtle shadow that makes the wizard appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-wizard-shadow"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding"}},"heading":{"background":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard headings (the top section that contains the step navigation and progress indicators). This creates a distinct background color for the wizard header area.<br>CSS variable: --wm-wizard-heading-background"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around wizard headings (the top section that contains the step navigation). This determines how thick the border lines appear around the wizard header area.<br>CSS variable: --wm-wizard-heading-border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around wizard headings (the top section that contains the step navigation). \'none\' removes borders completely, \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-heading-border-style"}},"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around wizard headings (the top section that contains the step navigation). \'transparent\' removes the border color, or you can specify a specific color value.<br>CSS variable: --wm-wizard-heading-border-color"}},"radius":{"value":"{panel.mapping.border.radius.value} {panel.mapping.border.radius.value} {panel.mapping.border.radius.value} {panel.mapping.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard headings (the top section that contains the step navigation). This makes the wizard header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-heading-border-radius"}}},"padding":{"value":"{space.7.value} {space.0.value} {space.7.value}  {space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding"}}},"body":{"min-height":{"value":"50vh","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of wizard body content (the main area where users fill out forms and see step content). This ensures the wizard body is always tall enough to display content properly. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-wizard-body-min-height"}}},"step":{"display":{"value":"inline-flex","type":"radius","attributes":{"subtype":"radius","description":"Controls how wizard steps are displayed (individual steps in the wizard navigation like \'Step 1\', \'Step 2\', \'Step 3\'). \'inline-flex\' arranges steps in a horizontal line with flexible spacing, \'flex\' allows more control over layout, \'block\' stacks them vertically.<br>CSS variable: --wm-wizard-step-display"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-step-gap"}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This determines what color the step title text appears in.<br>CSS variable: --wm-wizard-step-title-color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step titles (the main text labels for each step). \'transparent\' removes the background color, or you can specify a specific color value to create a colored background behind the step titles.<br>CSS variable: --wm-wizard-step-title-background"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear (the main text labels for each step). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This affects the size of the text that users see for each step.<br>CSS variable: --wm-wizard-step-title-font-size"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step titles wrap to multiple lines. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step titles (the main text labels for each step). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing"}}},"description":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step descriptions (the smaller text that provides additional details about each step like \'Enter your personal details\' or \'Review your information\'). This determines what color the step description text appears in.<br>CSS variable: --wm-wizard-step-description-color"}},"font":{"family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of wizard step descriptions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-wizard-step-description-font-weight"}},"size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-font-size"}}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-line-height"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-letter-spacing"}}},"indicator":{"size":{"value":"33px","type":"space","attributes":{"subtype":"space","description":"Controls how large wizard step indicators appear (the circular or numbered indicators that show progress like \'1\', \'2\', \'3\' or checkmark icons). This affects the size of the progress indicators that users see for each step. Acceptable units: px, em, rem.<br>CSS variable: --wm-wizard-step-indicator-size"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators (the circular or numbered indicators that show progress). \'transparent\' removes the background color, or you can specify a specific color value to create a colored background behind the indicators.<br>CSS variable: --wm-wizard-step-indicator-background"}},"border":{"width":{"value":"{border.width.2.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around wizard step indicators (the circular or numbered indicators that show progress). This determines how thick the border lines appear around the step indicators.<br>CSS variable: --wm-wizard-step-indicator-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around wizard step indicators (the circular or numbered indicators that show progress). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-wizard-step-indicator-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around wizard step indicators (the circular or numbered indicators that show progress). This determines what color the border lines appear in that outline the step indicators.<br>CSS variable: --wm-wizard-step-indicator-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard step indicators (the circular or numbered indicators that show progress). This makes the step indicators perfectly circular for a clean, modern appearance.<br>CSS variable: --wm-wizard-step-indicator-border-radius"}}}},"count":{"color":{"value":"{wizard.mapping.step.title.color}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers (the numbers that appear inside step indicators like \'1\', \'2\', \'3\'). This determines what color the step numbers appear in.<br>CSS variable: --wm-wizard-step-count-color"}},"font":{"family":{"value":"{wizard.mapping.step.title.font.family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-font-family"}},"size":{"value":"{wizard.mapping.step.title.font.size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-font-size"}},"weight":{"value":"{wizard.mapping.step.title.font.weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of wizard step count numbers. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-wizard-step-count-font-weight"}}},"line-height":{"value":"{wizard.mapping.step.title.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-line-height"}}},"icon":{"font":{"family":{"value":"{wizard.mapping.step.title.font.family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step icons (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This determines whether the icons appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-icon-font-family"}},"size":{"value":"{wizard.mapping.step.title.font.size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step icons appear (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This affects the size of the icons that users see in the step indicators.<br>CSS variable: --wm-wizard-step-icon-font-size"}},"weight":{"value":"{wizard.mapping.step.title.font.weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step icons appear (the small symbols that appear in step indicators). \'normal\' makes them regular weight, \'bold\' makes them thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-icon-font-weight"}}},"line-height":{"value":"{wizard.mapping.step.title.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step icons wrap to multiple lines. This ensures proper spacing for the icons displayed in the step indicators.<br>CSS variable: --wm-wizard-step-icon-line-height"}},"color":{"value":"{wizard.mapping.step.count.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This determines what color the icons appear in.<br>CSS variable: --wm-wizard-step-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large wizard step icons appear (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This affects the size of the icons that users see in the step indicators.<br>CSS variable: --wm-wizard-step-icon-size"}}},"connector":{"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls how tall wizard step connectors appear (the lines that connect step indicators to show the progression flow). This determines the vertical size of the connecting lines between steps. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-wizard-step-connector-height"}},"width":{"value":"1px","type":"space","attributes":{"subtype":"space","description":"Controls how wide wizard step connectors appear (the lines that connect step indicators to show the progression flow). This determines the horizontal thickness of the connecting lines between steps. Acceptable units: px, em, rem.<br>CSS variable: --wm-wizard-step-connector-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of wizard step connectors (the lines that connect step indicators to show the progression flow). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes the connectors completely.<br>CSS variable: --wm-wizard-step-connector-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step connectors (the lines that connect step indicators to show the progression flow). This determines what color the connecting lines appear in between the step indicators.<br>CSS variable: --wm-wizard-step-connector-color"}}}},"states":{"current":{"step":{"indicator":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}}}},"active":{"step":{"indicator":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}}}}}},"appearances":{"number":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"iconstepper":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"iconstepper-textinline":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"dottedstepper":{"mapping":{"step":{"size":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space"}},"indicator":{"background":{"value":"none","type":"color","attributes":{"subtype":"color"}}}}},"variantGroups":{"horizontal":{},"vertical":{}}},"dottedstepper-textinline":{"mapping":{},"variantGroups":{"horizontal":{},"vertical":{}}},"classic":{"mapping":{"heading":{"padding":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space"}}},"step":{"display":{"value":"table-cell","type":"radius","attributes":{"subtype":"radius"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}},"title":{"height":{"value":"46px","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color"}}}},"states":{"current":{"step":{"title":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"step":{"title":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"variantGroups":{"horizontal":{}}},"vertical":{"mapping":{"heading":{"width":{"value":"200px","type":"space","attributes":{"subtype":"space"}},"border":{"radius":{"value":"{radius.none.value} {radius.none.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"padding":{"value":"{space.7.value} {space.7.value} {space.0.value}  {space.7.value}","type":"space","attributes":{"subtype":"space"}}},"connector":{"height":{"value":"100%","type":"space","attributes":{"subtype":"space"}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/foundation/foundation.css

@@ -6271,10 +6271,10 @@
   height: 100%;
   background: var(--wm-tabs-content-background);
 }
-.wm-app .app-tabs > .tab-content > .tab-pane:not(.active) {
+.wm-app .app-tabs > .tab-content .tab-pane:not(.active) {
   display: none;
 }
-.wm-app .app-tabs > .tab-content > .tab-pane > .tab-body {
+.wm-app .app-tabs > .tab-content .tab-pane > .tab-body {
   padding: var(--wm-tabs-body-padding);
   min-height: var(--wm-tabs-body-height);
 }