@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

package/cjs/src_tokens_mobile_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_mobile_components_wizard_wizard_json"],{
 
-/***/ "./src/tokens/mobile/components/wizard/wizard.json":
+/***/ "./src/tokens/mobile/components/wizard/wizard.json"
 /*!*********************************************************!*\
   !*** ./src/tokens/mobile/components/wizard/wizard.json ***!
   \*********************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"wizard":{"meta":{"mapping":{"selector":{"mobile":".app-wizard"},"states":{"current":{"selector":{"mobile":"-active-step, .app-wizard-active-step-counter"}},"active":{"selector":{"mobile":"-done-step"}}}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-wizard"}}}}},"mapping":{"background-color":{"value":"{color.surface.@.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-color"}},"border-radius":{"value":"{radius.xs.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"}},"box-shadow":{"value":"{elevation.shadow.1.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-box-shadow"}},"padding-top":{"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-top"}},"padding-bottom":{"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-bottom"}},"padding-left":{"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-left"}},"padding-right":{"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-right"}},"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-gap"}},"heading":{"background-color":{"value":"{color.surface.@.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-color"}},"radius":{"value":"{radius.xs.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-radius"}},"padding-top":{"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-top"}},"padding-bottom":{"value":"{space.0.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-bottom"}},"padding-left":{"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-left"}},"padding-right":{"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-right"}}},"body":{"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-height"}},"padding-top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard body content (the main area where users fill out forms and see step content). This creates breathing room around the wizard body content.<br>CSS variable: --wm-wizard-body-padding-top"}}},"step":{"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"}},"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"}},"font-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"}},"font-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 typeface (font style) for wizard step descriptions (the smaller text that provides additional details about each step). This determines whether the step description text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-description-font-family"}},"font-weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step descriptions appear (the smaller text that provides additional details about 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-description-font-weight"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step descriptions appear (the smaller text that provides additional details about each step). This affects the size of the description text that users see for each step.<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 vertical spacing between lines when wizard step descriptions wrap to multiple lines. This ensures proper spacing for the step description text displayed in the wizard navigation.<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 the horizontal spacing between individual characters in wizard step descriptions (the smaller text that provides additional details about each step). This can help make the step description text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-description-letter-spacing"}}},"indicator":{"size":{"value":"33px","type":"space","attributes":{"subtype":"space","description":"Controls the size of wizard step indicators (the circular or numbered badges that show the current step position). This determines how large the step indicator appears.<br>CSS variable: --wm-wizard-step-indicator-size"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators (the circular or numbered badges that show the current step position). When transparent, only the border is visible. When filled with a color, the indicator appears with a colored background.<br>CSS variable: --wm-wizard-step-indicator-background-color"}},"border-width":{"value":"{border.width.2.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around wizard step indicators (the circular or numbered badges that show the current step position). This creates the outline that defines the indicator shape.<br>CSS variable: --wm-wizard-step-indicator-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around wizard step indicators (the circular or numbered badges that show the current step position). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-step-indicator-border-style"}},"border-color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators (the circular or numbered badges that show the current step position). This determines the color of the outline that defines the indicator shape.<br>CSS variable: --wm-wizard-step-indicator-border-color"}},"border-radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard step indicators (the circular or numbered badges that show the current step position). When set to \'circle\', the indicator appears as a perfect circle.<br>CSS variable: --wm-wizard-step-indicator-border-radius"}}},"count":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers (the numeric labels that appear inside step indicators like \'1\', \'2\', \'3\'). This determines what color the step number text appears in.<br>CSS variable: --wm-wizard-step-count-color"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step count numbers (the numeric labels that appear inside step indicators). This determines whether the step number text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-count-font-family"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step count numbers appear (the numeric labels that appear inside step indicators like \'1\', \'2\', \'3\'). This affects the size of the step number text.<br>CSS variable: --wm-wizard-step-count-font-size"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step count numbers appear (the numeric labels that appear inside step indicators). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-count-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step count numbers wrap to multiple lines. This ensures proper spacing for the step number text.<br>CSS variable: --wm-wizard-step-count-line-height"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons (the icon symbols that appear inside step indicators to represent each step). This determines what color the step 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 the size of wizard step icons (the icon symbols that appear inside step indicators to represent each step). This determines how large the step icons appear.<br>CSS variable: --wm-wizard-step-icon-size"}}},"connector":{"width":{"value":"1px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of wizard step connectors (the lines that connect one step indicator to the next, showing the progression through the wizard). This determines how thick the connecting lines appear.<br>CSS variable: --wm-wizard-step-connector-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of wizard step connectors (the lines that connect one step indicator to the next). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<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 one step indicator to the next, showing the progression through the wizard). This determines what color the connecting lines appear in.<br>CSS variable: --wm-wizard-step-connector-color"}}}},"states":{"current":{"step":{"indicator":{"background-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators when they are in the current/active state (the step the user is currently on). This is the color that appears when the step is the active one.<br>CSS variable: --wm-wizard-step-indicator-background-color (current state)"}},"border-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators when they are in the current/active state (the step the user is currently on). This determines the color of the outline when the step is active.<br>CSS variable: --wm-wizard-step-indicator-border-color (current state)"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers when they are in the current/active state (the step the user is currently on). This determines what color the step number text appears in when the step is active.<br>CSS variable: --wm-wizard-step-count-color (current state)"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons when they are in the current/active state (the step the user is currently on). This determines what color the step icons appear in when the step is active.<br>CSS variable: --wm-wizard-step-icon-color (current state)"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles when they are in the current/active state (the step the user is currently on). This determines what color the step title text appears in when the step is active.<br>CSS variable: --wm-wizard-step-title-color (current state)"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles when they are in the current/active state (the step the user is currently on). 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 (current state)"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear when they are in the current/active state (the step the user is currently on). \'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 (current state)"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear when they are in the current/active state (the step the user is currently on). This affects the size of the text that users see for the active step.<br>CSS variable: --wm-wizard-step-title-font-size (current state)"}},"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 in the current/active state. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height (current state)"}},"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 when they are in the current/active state (the step the user is currently on). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing (current state)"}}}}},"active":{"step":{"indicator":{"background-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators when they are in the active/completed state (steps that have been successfully completed). This is the color that appears when the step is done.<br>CSS variable: --wm-wizard-step-indicator-background-color (active state)"}},"border-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators when they are in the active/completed state (steps that have been successfully completed). This determines the color of the outline when the step is done.<br>CSS variable: --wm-wizard-step-indicator-border-color (active state)"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers when they are in the active/completed state (steps that have been successfully completed). This determines what color the step number text appears in when the step is done.<br>CSS variable: --wm-wizard-step-count-color (active state)"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons when they are in the active/completed state (steps that have been successfully completed). This determines what color the step icons appear in when the step is done.<br>CSS variable: --wm-wizard-step-icon-color (active state)"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles when they are in the active/completed state (steps that have been successfully completed). This determines what color the step title text appears in when the step is done.<br>CSS variable: --wm-wizard-step-title-color (active state)"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles when they are in the active/completed state (steps that have been successfully completed). 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 (active state)"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear when they are in the active/completed state (steps that have been successfully completed). \'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 (active state)"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear when they are in the active/completed state (steps that have been successfully completed). This affects the size of the text that users see for completed steps.<br>CSS variable: --wm-wizard-step-title-font-size (active state)"}},"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 in the active/completed state. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height (active state)"}},"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 when they are in the active/completed state (steps that have been successfully completed). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing (active state)"}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_accordion_accordion_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_accordion_accordion_json"],{
 
-/***/ "./src/tokens/web/components/accordion/accordion.json":
+/***/ "./src/tokens/web/components/accordion/accordion.json"
 /*!************************************************************!*\
   !*** ./src/tokens/web/components/accordion/accordion.json ***!
   \************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"accordion":{"meta":{"mapping":{"selector":{"web":".app-accordion.panel"}},"appearances":{"default":{"mapping":{"selector":{"web":".app-accordion.panel"}},"variantGroups":{"status":{"default":{"selector":{"web":".panel-default"}},"primary":{"selector":{"web":".panel-primary"}},"secondary":{"selector":{"web":".panel-secondary"}},"tertiary":{"selector":{"web":".panel-tertiary"}}}}}}},"mapping":{"group":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing between multiple accordion panels when they are stacked together in a group. This creates visual separation between each expandable section.<br>CSS variable: --wm-accordion-group-gap"}}},"background":{"@":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the entire accordion panel container. This is the main background color that appears behind all accordion content.<br>CSS variable: --wm-accordion-background"}}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the accordion panel container. This makes the accordion appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-border-radius"}},"width":{},"color":{}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the drop shadow effect around the accordion panel. This creates a subtle elevation effect that makes the accordion appear to float above the background.<br>CSS variable: --wm-accordion-shadow"}},"heading":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between elements within the accordion header (the clickable area). This includes spacing between the main title, description text, and any action buttons or icons.<br>CSS variable: --wm-accordion-heading-gap"}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top and bottom padding (vertical spacing) inside the accordion header area. This creates breathing room above and below the heading content.<br>CSS variable: --wm-accordion-heading-padding-block"}},"inline":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left and right padding (horizontal spacing) inside the accordion header area. This creates breathing room on the sides of the heading content.<br>CSS variable: --wm-accordion-heading-padding-inline"}}},"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the main title text in the accordion header. This is the primary text that users click to expand/collapse the accordion.<br>CSS variable: --wm-accordion-heading-font-family"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the main title text in the accordion header. Larger values make the heading more prominent and easier to read.<br>CSS variable: --wm-accordion-heading-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the main title text in the accordion header. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-heading-font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text in the accordion header title. Higher values create more space between lines.<br>CSS variable: --wm-accordion-heading-line-height"}},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the accordion header title. Positive values spread letters apart, negative values bring them closer.<br>CSS variable: --wm-accordion-heading-letter-spacing"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the main title in the accordion header. This is the color of the clickable heading text.<br>CSS variable: --wm-accordion-heading-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion header area (the clickable section). This appears behind the title, description, and action elements.<br>CSS variable: --wm-accordion-heading-background"}}},"description":{"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the subtitle/description text that appears under the main accordion heading. This is optional explanatory text that provides more context about the accordion section.<br>CSS variable: --wm-accordion-description-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the subtitle/description text under the accordion heading. This text is typically smaller than the main heading to create a visual hierarchy.<br>CSS variable: --wm-accordion-description-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the subtitle/description text under the accordion heading. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-description-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text in the accordion description/subtitle. Higher values create more space between lines for better readability.<br>CSS variable: --wm-accordion-description-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the accordion description/subtitle text. Positive values spread letters apart, negative values bring them closer.<br>CSS variable: --wm-accordion-description-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the subtitle/description text under the accordion heading. This is typically a muted color to distinguish it from the main heading.<br>CSS variable: --wm-accordion-description-color"}}},"actions":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between action elements (buttons, badges, icons) within the accordion header. These are interactive elements like \'Edit\', \'Delete\', status badges, or expand/collapse icons that appear alongside the heading text.<br>CSS variable: --wm-accordion-actions-gap"}}},"content":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) around the expandable content area of the accordion. This is the space between the content border and the actual content (text, images, forms, etc.) that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-content-padding"}}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"heading":{"background":{"value":"{color.surface.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"primary":{"heading":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"secondary":{"heading":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"tertiary":{"heading":{"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_anchor_anchor_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_anchor_anchor_json"],{
 
-/***/ "./src/tokens/web/components/anchor/anchor.json":
+/***/ "./src/tokens/web/components/anchor/anchor.json"
 /*!******************************************************!*\
   !*** ./src/tokens/web/components/anchor/anchor.json ***!
   \******************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"anchor":{"meta":{"mapping":{"selector":{"web":".app-anchor","mobile":".app-anchor"}}},"mapping":{"color":{"@":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of clickable links (anchor elements) that users can click to navigate to other pages or sections. This is typically a blue color to indicate the text is a link.<br>CSS variable: --wm-anchor-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in clickable links. Larger values make the link text more prominent and easier to read, while smaller values make it more subtle.<br>CSS variable: --wm-anchor-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for clickable links. This determines whether the link text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the link text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-anchor-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when link text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-anchor-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in link text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-anchor-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls how the link text appears in terms of capitalization. \'none\' keeps original case, \'uppercase\' makes all letters big, \'lowercase\' makes all letters small, \'capitalize\' makes first letter of each word big.<br>CSS variable: --wm-anchor-text-transform"}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls whether link text has underlines or other decorative lines. \'none\' removes underlines, \'underline\' adds a line under the text, \'line-through\' adds a line through the middle of the text.<br>CSS variable: --wm-anchor-text-decoration"}}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between icons and text in links. This creates visual separation between any icons (like arrows or symbols) and the link text.<br>CSS variable: --wm-anchor-gap"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large icons appear in links (like arrow icons or symbol icons). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-anchor-icon-size"}}},"image":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large images appear in links (like profile pictures or thumbnails). This determines the width and height of any images used within link elements.<br>CSS variable: --wm-anchor-image-size"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of images in links. When set to \'circle\', images appear as perfect circles. Other values create rounded rectangles with different amounts of rounding.<br>CSS variable: --wm-anchor-image-radius"}}},"states":{"hover":{"color":{"@":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.hover.value})\\"","type":"color","attributes":{"subtype":"color"}}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}}}},"focus":{"color":{"@":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.focus.value})\\"","type":"color","attributes":{"subtype":"color"}}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}}}},"active":{"color":{"@":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\\"","type":"color","attributes":{"subtype":"color"}}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}}}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_audio_audio_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_audio_audio_json"],{
 
-/***/ "./src/tokens/web/components/audio/audio.json":
+/***/ "./src/tokens/web/components/audio/audio.json"
 /*!****************************************************!*\
   !*** ./src/tokens/web/components/audio/audio.json ***!
   \****************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"audio":{"mapping":{"width":{"value":"300px","type":"space","attributes":{"subtype":"space","description":"Controls how wide the audio player appears on the page. This determines the size of the audio controls (play button, progress bar, volume, etc.) that users interact with to play audio files.<br>CSS variable: --wm-audio-width"}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_badge_badge_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_badge_badge_json"],{
 
-/***/ "./src/tokens/web/components/badge/badge.json":
+/***/ "./src/tokens/web/components/badge/badge.json"
 /*!****************************************************!*\
   !*** ./src/tokens/web/components/badge/badge.json ***!
   \****************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"badge":{"meta":{},"mapping":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of notification badges (small circular or pill-shaped elements that show numbers or status indicators). This is typically a bright color like red to grab attention.<br>CSS variable: --wm-badge-background"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of notification badges (the color of the numbers or text inside the badge). This should contrast well with the background color for readability.<br>CSS variable: --wm-badge-color"}},"min-height":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of notification badges to ensure they\'re always tall enough to be visible and clickable, even when they contain small numbers or text.<br>CSS variable: --wm-badge-min-height"}},"inline":{"padding":{"value":"~\\"calc({space.2.value} * 0.75)\\"","type":"space","attributes":{"subtype":"space","description":"Controls the left and right spacing inside notification badges (the horizontal padding). This creates breathing room around the badge content.<br>CSS variable: --wm-badge-inline-padding"}}},"block":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top and bottom spacing inside notification badges (the vertical padding). This creates breathing room above and below the badge content.<br>CSS variable: --wm-badge-block-padding"}}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of notification badges. Larger values make badges more pill-shaped, smaller values make them more rectangular.<br>CSS variable: --wm-badge-radius"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for notification badge text. This determines whether the badge numbers/text appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-badge-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in notification badges. Since badges are small, this is typically a small font size to fit the compact space.<br>CSS variable: --wm-badge-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the badge text appears. Higher values (like 700) make the text thicker and more prominent, which helps badge numbers stand out.<br>CSS variable: --wm-badge-font-weight"}},"line-height":{"value":"1","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines in badge text. A value of 1 keeps lines close together, which is ideal for small badge content.<br>CSS variable: --wm-badge-line-height"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in badge text. This can help make small badge text more readable.<br>CSS variable: --wm-badge-letter-spacing"}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_breadcrumb_breadcrumb_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_breadcrumb_breadcrumb_json"],{
 
-/***/ "./src/tokens/web/components/breadcrumb/breadcrumb.json":
+/***/ "./src/tokens/web/components/breadcrumb/breadcrumb.json"
 /*!**************************************************************!*\
   !*** ./src/tokens/web/components/breadcrumb/breadcrumb.json ***!
   \**************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"breadcrumb":{"meta":{"mapping":{"selector":{"web":".app-breadcrumb"},"states":{"hover":{"selector":{"web":":is(a):hover,:is(i):hover"}},"active":{"selector":{"web":":has(:active)"}},"on-active":{"selector":{"web":" li.active"}},"focus":{"selector":{"web":":has(:focus)"}}}},"appearances":{"classic":{"mapping":{"selector":{"web":".app-breadcrumb.classic"}}},"attribute-based":{"mapping":{"selector":{"web":".app-breadcrumb.attribute-based"}}},"path-based":{"mapping":{"selector":{"web":".app-breadcrumb.path-based"},"states":{"active":{"selector":{"web":" li.active"}}}}}}},"mapping":{"icon":{"font-family":{"value":"wavicon","type":"font","attributes":{"subtype":"font-family"}},"content":{"value":"\'/\\\\00a0\'","type":"font","attributes":{"subtype":"font-family"}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing between breadcrumb navigation rows when they wrap to multiple lines. This creates breathing room between different lines of navigation links.<br>CSS variable: --wm-breadcrumb-gap"}},"item":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between elements within each breadcrumb navigation item (like between icons and text, or between text and separators).<br>CSS variable: --wm-breadcrumb-item-gap"}},"padding":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in breadcrumb navigation links (like \'Home\', \'Products\', \'Category\'). This affects the size of the clickable navigation text.<br>CSS variable: --wm-breadcrumb-item-font-size"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for breadcrumb navigation links. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-breadcrumb-item-font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the breadcrumb navigation text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-breadcrumb-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when breadcrumb navigation text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-breadcrumb-item-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for breadcrumb items. Acceptable values: none, uppercase, lowercase, capitalize.<br>CSS variable: --wm-breadcrumb-item-text-transform"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of breadcrumb items.<br>CSS variable: --wm-breadcrumb-item-color"}},"text":{"decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls text decoration for breadcrumb items. Acceptable values: none, underline, overline, line-through.<br>CSS variable: --wm-breadcrumb-item-text-decoration"}}},"separator":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of breadcrumb separators.<br>CSS variable: --wm-breadcrumb-item-separator-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of breadcrumb separators.<br>CSS variable: --wm-breadcrumb-item-separator-size"}}},"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of breadcrumb item icons.<br>CSS variable: --wm-breadcrumb-item-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of breadcrumb item icons.<br>CSS variable: --wm-breadcrumb-item-icon-size"}}}},"states":{"hover":{"item":{"text":{"decoration":{"value":"underline","type":"radius","attributes":{"subtype":"text-decoration"}}},"color":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.hover.value})\\"","type":"color","attributes":{"subtype":"color"}}}},"active":{"item":{"text":{"decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}},"color":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\\"","type":"color","attributes":{"subtype":"color"}}}},"on-active":{"item":{"text":{"decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}},"color":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\\"","type":"color","attributes":{"subtype":"color"}}}},"focus":{"item":{"text":{"decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}},"color":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.focus.value})\\"","type":"color","attributes":{"subtype":"color"}}}}}}},"appearances":{"classic":{"mapping":{"icon":{"font-family":{"value":"wavicon","type":"font","attributes":{"subtype":"font-family"}},"content":{"value":"\'/\\\\00a0\'","type":"font","attributes":{"subtype":"font-family"}}}}},"attribute-based":{"mapping":{"icon":{"font-family":{"value":"wavicon","type":"font","attributes":{"subtype":"font-family"}},"content":{"value":"\\"\\\\f1d2\\"","type":"font","attributes":{"subtype":"font-family"}}}}},"path-based":{"mapping":{"height":{"value":"46px","type":"space","attributes":{"subtype":"space"}},"background":{"value":"{color.background.@.value}","type":"color","attributes":{"subtype":"color"}},"box-shadow":{"value":"7px 0 14px rgba(0, 0, 0, .07)","type":"shadow","attributes":{"subtype":"elevation"}},"icon":{"font-family":{"value":"FontAwesome","type":"font","attributes":{"subtype":"font-family"}},"content":{"value":"\\"\\\\f101\\"","type":"font","attributes":{"subtype":"font-family"}}},"states":{"active":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"item":{"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_button-group_button-group_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_button-group_button-group_json"],{
 
-/***/ "./src/tokens/web/components/button-group/button-group.json":
+/***/ "./src/tokens/web/components/button-group/button-group.json"
 /*!******************************************************************!*\
   !*** ./src/tokens/web/components/button-group/button-group.json ***!
   \******************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"button-group":{"meta":{"mapping":{"selector":{"web":".app-button-group","mobile":".app-button-group"}}},"mapping":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of button groups (connected buttons that appear as a single unit). This makes the outer corners of the button group rounded while keeping the inner buttons connected.<br>CSS variable: --wm-button-group-radius"}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_button_button_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_button_button_json"],{
 
-/***/ "./src/tokens/web/components/button/button.json":
+/***/ "./src/tokens/web/components/button/button.json"
 /*!******************************************************!*\
   !*** ./src/tokens/web/components/button/button.json ***!
   \******************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"btn":{"meta":{"mapping":{"selector":{"web":".app-button,button,.btn","mobile":".app-button"},"states":{"hover":{"selector":{"mobile":".hover,","web":":hover,:hover::before,:hover::before,.hover::before,.hover::before"}},"focus":{"selector":{"web":":focus,:focus::before,:focus::before,.focus::before,.focus::before","mobile":".focus"}},"active":{"selector":{"web":":active,:active::before,:active::before,:active:focus::before,:active:focus::before,:active:hover::before,:active:hover::before,:active.focus::before,:active.focus::before","mobile":".active"}},"disabled":{"selector":{"mobile":".disabled","web":"[disabled]"}}}},"appearances":{}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button text and icons.<br>CSS variable: --wm-btn-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons (clickable elements that users interact with to perform actions). This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-color"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the button text appears (the text content within clickable buttons). This affects the size of the button text that users see and interact with.<br>CSS variable: --wm-btn-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for button text (the text content within clickable buttons). This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-btn-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the button text appears (the text content within clickable buttons). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-btn-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when button text wraps to multiple lines. This ensures proper spacing for the button text displayed in the button.<br>CSS variable: --wm-btn-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 button text (the text content within clickable buttons). This can help make the button text more readable and properly spaced.<br>CSS variable: --wm-btn-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-btn-text-transform"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-btn-border-color"}},"width":{"value":"1px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness.<br>CSS variable: --wm-btn-border-width"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-btn-border-style"}}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over buttons. \'pointer\' shows a hand cursor indicating the button is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled buttons. This provides visual feedback to users about button interactivity.<br>CSS variable: --wm-btn-cursor"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners.<br>CSS variable: --wm-btn-radius"}},"padding":{"value":"{space.0.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing between content and border.<br>CSS variable: --wm-btn-padding"}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-btn-height"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between icon and text content.<br>CSS variable: --wm-btn-gap"}},"shadow":{"@":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect.<br>CSS variable: --wm-btn-shadow"}}},"icon-size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons.<br>CSS variable: --wm-btn-icon-size"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer (an invisible overlay that provides visual feedback during user interactions like hover, focus, and active states). This color appears when users interact with the button to show it\'s responsive.<br>CSS variable: --wm-btn-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer (the invisible overlay that provides visual feedback during user interactions). When set to 0, the state layer is invisible. Higher values (0-1) make the interaction feedback more visible when users hover, focus, or click the button.<br>CSS variable: --wm-btn-state-layer-opacity"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"disabled":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled buttons. When set to 0.38 (38% opacity), the button appears dimmed to indicate it\'s not interactive. This provides visual feedback that the button cannot be clicked.<br>CSS variable: --wm-btn-opacity (disabled state)"}},"shadow":{"@":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Removes the drop shadow from disabled buttons. This creates a flat appearance that reinforces the disabled state visually.<br>CSS variable: --wm-btn-shadow (disabled state)"}}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"description":"Sets the mouse cursor to \'not-allowed\' (blocked cursor) when hovering over disabled buttons. This provides immediate visual feedback that the button cannot be clicked.<br>CSS variable: --wm-btn-cursor (disabled state)"}}}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.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"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"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"}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"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"}},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"outlined":{"mapping":{"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"secondary":{"color":{"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"}}}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"text":{"mapping":{"background":{"value":"none","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}},"padding":{"value":"{space.2.value} {space.3.value}","type":"space","attributes":{"subtype":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"transparent":{"mapping":{"background":{"value":"none","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"none","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"btn":{"meta":{"mapping":{"selector":{"web":".app-button,button,.btn","mobile":".app-button"},"states":{"hover":{"selector":{"mobile":".hover,","web":":hover,:hover::before,:hover::before,.hover::before,.hover::before"}},"focus":{"selector":{"web":":focus,:focus::before,:focus::before,.focus::before,.focus::before","mobile":".focus"}},"active":{"selector":{"web":":active,:active::before,:active::before,:active:focus::before,:active:focus::before,:active:hover::before,:active:hover::before,:active.focus::before,:active.focus::before","mobile":".active"}},"disabled":{"selector":{"mobile":".disabled","web":"[disabled]"}}}},"appearances":{}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button text and icons.<br>CSS variable: --wm-btn-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons (clickable elements that users interact with to perform actions). This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-color"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the button text appears (the text content within clickable buttons). This affects the size of the button text that users see and interact with.<br>CSS variable: --wm-btn-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for button text (the text content within clickable buttons). This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-btn-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the button text appears (the text content within clickable buttons). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-btn-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when button text wraps to multiple lines. This ensures proper spacing for the button text displayed in the button.<br>CSS variable: --wm-btn-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 button text (the text content within clickable buttons). This can help make the button text more readable and properly spaced.<br>CSS variable: --wm-btn-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-btn-text-transform"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-btn-border-color"}},"width":{"value":"1px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness.<br>CSS variable: --wm-btn-border-width"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-btn-border-style"}}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over buttons. \'pointer\' shows a hand cursor indicating the button is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled buttons. This provides visual feedback to users about button interactivity.<br>CSS variable: --wm-btn-cursor"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners.<br>CSS variable: --wm-btn-radius"}},"padding":{"value":"{space.0.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing between content and border.<br>CSS variable: --wm-btn-padding"}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-btn-height"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between icon and text content.<br>CSS variable: --wm-btn-gap"}},"shadow":{"@":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect.<br>CSS variable: --wm-btn-shadow"}}},"icon-size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons.<br>CSS variable: --wm-btn-icon-size"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer (an invisible overlay that provides visual feedback during user interactions like hover, focus, and active states). This color appears when users interact with the button to show it\'s responsive.<br>CSS variable: --wm-btn-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer (the invisible overlay that provides visual feedback during user interactions). When set to 0, the state layer is invisible. Higher values (0-1) make the interaction feedback more visible when users hover, focus, or click the button.<br>CSS variable: --wm-btn-state-layer-opacity"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"disabled":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled buttons. When set to 0.38 (38% opacity), the button appears dimmed to indicate it\'s not interactive. This provides visual feedback that the button cannot be clicked.<br>CSS variable: --wm-btn-opacity (disabled state)"}},"shadow":{"@":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Removes the drop shadow from disabled buttons. This creates a flat appearance that reinforces the disabled state visually.<br>CSS variable: --wm-btn-shadow (disabled state)"}}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"description":"Sets the mouse cursor to \'not-allowed\' (blocked cursor) when hovering over disabled buttons. This provides immediate visual feedback that the button cannot be clicked.<br>CSS variable: --wm-btn-cursor (disabled state)"}}}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.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"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"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"}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"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"}},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"outlined":{"mapping":{"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"secondary":{"color":{"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"}}}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"text":{"mapping":{"background":{"value":"none","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}},"padding":{"value":"{space.2.value} {space.3.value}","type":"space","attributes":{"subtype":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"state":{"layer":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"transparent":{"mapping":{"background":{"value":"none","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_calendar_calendar_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_calendar_calendar_json"],{
 
-/***/ "./src/tokens/web/components/calendar/calendar.json":
+/***/ "./src/tokens/web/components/calendar/calendar.json"
 /*!**********************************************************!*\
   !*** ./src/tokens/web/components/calendar/calendar.json ***!
   \**********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"calendar":{"meta":{"mapping":{"selector":{"web":".app-calendar"}}},"mapping":{"view":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow"}},"border":{"color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width"}}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius"}}},"fc":{"header":{"vertical":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-fc-header-vertical-padding"}}},"horizontal":{"padding":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-fc-header-horizontal-padding"}}},"text":{"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar header text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight"}}}},"time":{"text":{"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-time-text-font-weight"}}}},"events":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between calendar events.<br>CSS variable: --wm-calendar-fc-events-gap"}}},"daygrid":{"event":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-fc-daygrid-event-radius"}}}},"v":{"event":{"main":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the main color of calendar events.<br>CSS variable: --wm-calendar-fc-v-event-main-color"}}}}},"popover":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-fc-popover-radius"}},"heading":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-fc-popover-heading-padding"}}},"title":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-popover-title-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-font-family"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-line-height"}}}},"event":{"background":{"value":"{color.primary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of calendar events.<br>CSS variable: --wm-calendar-fc-event-background"}},"color":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of calendar events.<br>CSS variable: --wm-calendar-fc-event-color"}},"dot":{"color":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-fc-event-dot-color"}}}},"anchor":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-fc-anchor-color"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"calendar":{"meta":{"mapping":{"selector":{"web":".app-calendar"}}},"mapping":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow"}},"border":{"color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width"}}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the calendar view.<br>CSS variable: --wm-calendar-view-background"}},"toolbar-title":{"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of the calendar title. <br>CSS variable: --wm-calendar-toolbar-title-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-size"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the letter spacing of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-letter-spacing"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-line-height"}}},"button":{"background":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-color"}},"border-color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-border-color"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of the button captions in the calendar toolbar.<br>CSS variable: --wm-calendar-button-font-weight"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-size"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the letter spacing of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-letter-spacing"}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-line-height"}},"border-width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-style"}},"border-radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-radius"}},"active":{"background":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-background"}},"border-color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-color"}},"border-width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-style"}},"border-radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-radius"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-color"}}}},"date":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-padding"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-weight"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-size"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-anchor-color"}},"today":{"background":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of current day cell in the calendar.<br>CSS variable: --wm-calendar-daygrid-today-background"}},"text":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of current day cell in the calendar .<br>CSS variable: --wm-calendar-daygrid-today-text-color"}}}}},"toolbar":{"vertical":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-vertical-padding"}}},"horizontal":{"padding":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-horizontal-padding"}}}},"time":{"text":{"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-time-text-font-weight"}}}},"events":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between calendar events.<br>CSS variable: --wm-calendar-events-gap"}}},"daygrid":{"event":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-daygrid-event-radius"}}}},"v":{"event":{"main":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the main color of calendar events.<br>CSS variable: --wm-calendar-v-event-main-color"}}}}},"popover":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-popover-radius"}},"heading":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-popover-heading-padding"}}},"title":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-popover-title-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-family"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-line-height"}}}},"event":{"background":{"value":"{color.primary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of calendar events.<br>CSS variable: --wm-calendar-event-background"}},"color":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of calendar events.<br>CSS variable: --wm-calendar-event-color"}},"dot":{"color":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-event-dot-color"}}}},"header":{"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar header columns text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-header-text-font-weight"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-size"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of calendar header columns.<br>CSS variable: --wm-calendar-header-color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of calendar header columns.<br>CSS variable: --wm-calendar-header-background"}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_cards_cards_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_cards_cards_json"],{
 
-/***/ "./src/tokens/web/components/cards/cards.json":
+/***/ "./src/tokens/web/components/cards/cards.json"
 /*!****************************************************!*\
   !*** ./src/tokens/web/components/cards/cards.json ***!
   \****************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"card":{"meta":{"mapping":{"selector":{"web":".app-card"}},"appearances":{"default":{"mapping":{"selector":{"web":".app-card.card-default"}}},"filled":{"mapping":{"selector":{"web":".app-card.card-filled"}}},"elevated":{"mapping":{"selector":{"web":".app-card.card-elevated"}}}}},"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of cards.<br>CSS variable: --wm-card-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of cards. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-border-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of cards.<br>CSS variable: --wm-card-border-color"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of cards.<br>CSS variable: --wm-card-border-radius"}}},"list":{"gap":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between card list items.<br>CSS variable: --wm-card-list-gap"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of cards.<br>CSS variable: --wm-card-background"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"radius","description":"Controls the box shadow of cards.<br>CSS variable: --wm-card-shadow"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of card state layers.<br>CSS variable: --wm-card-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of card state layers.<br>CSS variable: --wm-card-state-layer-opacity"}}}},"body":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of card body content.<br>CSS variable: --wm-card-body-padding"}}},"footer":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of card footer content.<br>CSS variable: --wm-card-footer-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of card footers.<br>CSS variable: --wm-card-footer-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of card footers. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-footer-border-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of card footers.<br>CSS variable: --wm-card-footer-border-color"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}}}}},"appearances":{"default":{"mapping":{"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.outline.variant.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius"}}}}},"filled":{"mapping":{"border":{"width":{"value":"0","type":"space","attributes":{"subtype":"border-width"}}},"background":{"@":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color"}}},"shadow":{"@":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}}},"states":{"hover":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"focus":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"active":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}},"variantGroups":{}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"space","attributes":{"subtype":"border-width"}}},"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"states":{"hover":{"shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation"}}},"focus":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"active":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}},"variantGroups":{}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"card":{"meta":{"mapping":{"selector":{"web":".app-card"}},"appearances":{"default":{"mapping":{"selector":{"web":".app-card.card-default"}}},"filled":{"mapping":{"selector":{"web":".app-card.card-filled"}}},"elevated":{"mapping":{"selector":{"web":".app-card.card-elevated"}}}}},"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of cards.<br>CSS variable: --wm-card-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of cards. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-border-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of cards.<br>CSS variable: --wm-card-border-color"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of cards.<br>CSS variable: --wm-card-border-radius"}}},"list":{"gap":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between card list items.<br>CSS variable: --wm-card-list-gap"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of cards.<br>CSS variable: --wm-card-background"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow of cards.<br>CSS variable: --wm-card-shadow"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of card state layers.<br>CSS variable: --wm-card-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of card state layers.<br>CSS variable: --wm-card-state-layer-opacity"}}}},"body":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of card body content.<br>CSS variable: --wm-card-body-padding"}}},"footer":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","excludeFromUI":true,"description":"Controls padding of card footer content.<br>CSS variable: --wm-card-footer-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"excludeFromUI":true,"subtype":"border-width","description":"Controls the border width of card footers.<br>CSS variable: --wm-card-footer-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"excludeFromUI":true,"subtype":"border-style","description":"Controls the border style of card footers. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-footer-border-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"excludeFromUI":true,"subtype":"color","description":"Sets the border color of card footers.<br>CSS variable: --wm-card-footer-border-color"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}}}}},"appearances":{"default":{"mapping":{"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.outline.variant.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius"}}}}},"filled":{"mapping":{"border":{"width":{"value":"0","type":"space","attributes":{"subtype":"border-width"}}},"background":{"@":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color"}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}},"states":{"hover":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"focus":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"active":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}},"variantGroups":{}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"space","attributes":{"subtype":"border-width"}}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"states":{"hover":{"shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation"}}},"focus":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}},"active":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}},"variantGroups":{}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_carousel_carousel_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_carousel_carousel_json"],{
 
-/***/ "./src/tokens/web/components/carousel/carousel.json":
+/***/ "./src/tokens/web/components/carousel/carousel.json"
 /*!**********************************************************!*\
   !*** ./src/tokens/web/components/carousel/carousel.json ***!
   \**********************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"carousel":{"meta":{"mapping":{"selector":{"web":".app-carousel"},"states":{"active":{"selector":{"web":" .carousel-indicators li.active"}}}}},"mapping":{"indicators":{"border":{"@":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel.<br>CSS variable: --wm-carousel-indicators-border"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of carousel indicators. Acceptable values: solid, dashed, dotted, none. This affects the outline appearance of the navigation dots.<br>CSS variable: --wm-carousel-indicators-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel indicators. This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-indicators-border-width"}}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel indicators. When set to circle, the indicators appear as perfect round dots. Other values create rounded rectangles.<br>CSS variable: --wm-carousel-indicators-radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-indicators-background"}},"size":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the diameter of carousel indicators (the navigation dots). Larger values make the dots more prominent and easier to click. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-indicators-size"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-indicators-gap"}},"margin":{"value":"1px","type":"space","attributes":{"subtype":"margin","description":"Controls the outer margin around each carousel indicator. This creates additional space around each navigation dot, affecting the overall spacing and clickable area.<br>CSS variable: --wm-carousel-indicators-margin"}}},"control":{"icon":{"font":{"size":{"value":"48px","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of carousel navigation arrow icons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to click. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-control-icon-font-size"}}}}},"caption":{"padding":{"top":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside the carousel caption area. This creates breathing room above the caption text that appears as an overlay on carousel slides. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-caption-padding-top"}},"bottom":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside the carousel caption area. This creates breathing room below the caption text that appears as an overlay on carousel slides. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-caption-padding-bottom"}}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of carousel captions (the text overlay that appears on top of carousel slides). This is typically white or a light color to ensure good contrast against dark slide backgrounds.<br>CSS variable: --wm-carousel-caption-color"}}},"states":{"active":{"indicators":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-indicators-background (active state)"}},"size":{"value":"~\\"calc(10px * 1.2)\\"","type":"space","attributes":{"subtype":"space","description":"Controls the size of the active carousel indicator. The active dot is typically larger than inactive dots to emphasize which slide is currently being displayed. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-indicators-size (active state)"}},"margin":{"value":"0px","type":"space","attributes":{"subtype":"margin","description":"Controls the outer margin around the active carousel indicator. When set to 0px, the active dot appears flush with other indicators. This affects the overall spacing and visual alignment of the navigation dots.<br>CSS variable: --wm-carousel-indicators-margin (active state)"}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);