@wavemaker/foundation-css 11.15.6-rc.647667 → 11.16.0-rc.647821

package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"mobile":".app-switch"},"states":{"selected":{"selector":{"mobile":"-btn-selected, .app-switch-btn-selected-text"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"button":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of switch buttons. When set to \'none\', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-button-background-color"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch 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-switch-button-text-transform"}}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-button-height"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-button-color"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-button-border-color"}},"width":{"value":"1px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-button-border-width"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to a large radius value, the buttons appear with rounded corners, creating a softer, more modern appearance.<br>CSS variable: --wm-switch-button-border-radius"}}},"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons. Acceptable units: px.<br>CSS variable: --wm-switch-button-padding"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions, typically appearing as a subtle overlay when the button is pressed.<br>CSS variable: --wm-switch-button-ripple-color"}}}},"states":{"selected":{"button":{"background":{"color":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of selected switch buttons. When a button is selected, it uses this background color to visually distinguish it from unselected buttons, typically using a secondary container color to indicate the active state.<br>CSS variable: --wm-switch-button-background-color (selected state)"}}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of selected switch buttons. This ensures the text remains readable against the selected button\'s background, typically using a color that contrasts well with the secondary container background.<br>CSS variable: --wm-switch-button-color (selected state)"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch 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-switch-button-text-transform"}}}}},"disabled":{"opacity":{"value":"0.6","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled switch buttons. When set to 0.6, disabled switches appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-switch-opacity"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"mobile":".app-switch"},"states":{"selected":{"selector":{"mobile":"-btn-selected, .app-switch-btn-selected-text"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"button":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of switch buttons. When set to \'none\', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-button-background-color"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch 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-switch-button-text-transform"}}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-button-height"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-button-color"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-button-border-color"}},"width":{"value":"1px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-button-border-width"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to a large radius value, the buttons appear with rounded corners, creating a softer, more modern appearance.<br>CSS variable: --wm-switch-button-border-radius"}}},"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons. Acceptable units: px.<br>CSS variable: --wm-switch-button-padding"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions, typically appearing as a subtle overlay when the button is pressed.<br>CSS variable: --wm-switch-button-ripple-color"}}}},"first-button":{"border":{"radius":{"value":"1px 0px 0px 1px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the first switch button (top-left, top-right, bottom-right, bottom-left). The right corners are squared so it joins seamlessly with the next button. Acceptable units: px.<br>CSS variable: --wm-switch-first-button-border-radius"}}}},"last-button":{"border":{"radius":{"value":"0px 1px 1px 0px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the last switch button (top-left, top-right, bottom-right, bottom-left). The left corners are squared so it joins seamlessly with the previous button. Acceptable units: px.<br>CSS variable: --wm-switch-last-button-border-radius"}}}},"states":{"selected":{"button":{"background":{"color":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of selected switch buttons. When a button is selected, it uses this background color to visually distinguish it from unselected buttons, typically using a secondary container color to indicate the active state.<br>CSS variable: --wm-switch-button-background-color (selected state)"}}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of selected switch buttons. This ensures the text remains readable against the selected button\'s background, typically using a color that contrasts well with the secondary container background.<br>CSS variable: --wm-switch-button-color (selected state)"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch 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-switch-button-text-transform"}}}}},"disabled":{"opacity":{"value":"0.6","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled switch buttons. When set to 0.6, disabled switches appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-switch-opacity"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabheader","mobile":".app-tabheader"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabheader-active-item-text, .app-tabheader-active-item-icon, .app-tabheader-active-indicator"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs components. This determines how rounded the corners of the tabs container appear. Acceptable units: px.<br>CSS variable: --wm-tabs-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs components. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-tabs-border-style"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs components. This determines what color the border around the tabs container appears in.<br>CSS variable: --wm-tabs-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs components. This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-border-width"}}},"heading":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs headings (the header section that contains tab labels). This determines what color the background of the heading appears in.<br>CSS variable: --wm-tabs-heading-background"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (the section containing the tab labels). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}}},"item":{"heading":{"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<br>CSS variable: --wm-tabs-item-heading-font-family"}}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item headings. This determines what color the background of tab headings appears in.<br>CSS variable: --wm-tabs-item-heading-background"}},"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-text"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of tab item heading icons. This determines how large the icons appear in tab headings.<br>CSS variable: --wm-tabs-item-heading-icon-size"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon-color"}}},"indicator":{"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin"}},"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators in Active state only.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}},"icon":{"display":{"value":"inline-flex","type":"text","attributes":{"subtype":"cursor","description":"Controls the display property of tab item icons. This determines how icons are displayed in the layout.<br>CSS variable: --wm-tabs-item-heading-icon-display"}},"height":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the height of tab item icons. This determines the vertical size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-height"}},"width":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the width of tab item icons. This determines the horizontal size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-width"}}}},"min":{"height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabs components. This determines the minimum vertical size of the tabs container. Acceptable units: px.<br>CSS variable: --wm-tabs-min-height"}}},"states":{"active":{"item":{"heading":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<br>CSS variable: --wm-tabs-item-heading-font-family"}}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"indicator":{"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin"}},"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of active tab item heading indicators. This determines the vertical size of the indicator for active tabs. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-indicator-height (active state)"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item heading indicators. This determines what color the indicator appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-indicator-background (active state)"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item headings. This determines what color the background appears in for active tab headings.<br>CSS variable: --wm-tabs-item-heading-background (active state)"}},"text":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of active tab item heading icons. This determines how large the icons appear in active tab headings, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-size (active state)"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-color (active state)"}}}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabheader","mobile":".app-tabheader"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabheader-active-item-text, .app-tabheader-active-item-icon, .app-tabheader-active-indicator"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs components. This determines how rounded the corners of the tabs container appear. Acceptable units: px.<br>CSS variable: --wm-tabs-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs components. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-tabs-border-style"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs components. This determines what color the border around the tabs container appears in.<br>CSS variable: --wm-tabs-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs components. This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-border-width"}}},"heading":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs headings (the header section that contains tab labels). This determines what color the background of the heading appears in.<br>CSS variable: --wm-tabs-heading-background"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the gap of tab header --wm-tabs-heading-gap"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (the section containing the tab labels). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}}},"item":{"heading":{"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"min-height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tab header item This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item--min-height"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the gap of tab header --wm-tabs-item-gap"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<br>CSS variable: --wm-tabs-item-heading-font-family"}}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item headings. This determines what color the background of tab headings appears in.<br>CSS variable: --wm-tabs-item-heading-background"}},"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-text"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of tab item heading icons. This determines how large the icons appear in tab headings.<br>CSS variable: --wm-tabs-item-heading-icon-size"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon-color"}}},"indicator":{"margin-top":{"value":"-2px","type":"space","attributes":{"subtype":"space","description":"Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin-top"}},"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators in Active state only.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}},"icon":{"display":{"value":"inline-flex","type":"text","attributes":{"subtype":"cursor","description":"Controls the display property of tab item icons. This determines how icons are displayed in the layout.<br>CSS variable: --wm-tabs-item-heading-icon-display"}},"height":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the height of tab item icons. This determines the vertical size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-height"}},"width":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the width of tab item icons. This determines the horizontal size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-width"}}}},"min":{"height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabs components. This determines the minimum vertical size of the tabs container. Acceptable units: px.<br>CSS variable: --wm-tabs-min-height"}}},"states":{"active":{"item":{"heading":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<br>CSS variable: --wm-tabs-item-heading-font-family"}}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"indicator":{"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin"}},"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of active tab item heading indicators. This determines the vertical size of the indicator for active tabs. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-indicator-height (active state)"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item heading indicators. This determines what color the indicator appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-indicator-background (active state)"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item headings. This determines what color the background appears in for active tab headings.<br>CSS variable: --wm-tabs-item-heading-background (active state)"}},"text":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of active tab item heading icons. This determines how large the icons appear in active tab headings, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-size (active state)"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-color (active state)"}}}}}}}},"appearances":{}}}');
 
 /***/ }
 

package/foundation/foundation.css

@@ -5215,7 +5215,8 @@
 .wm-app .modal-backdrop.fade {
   opacity: 0;
 }
-.wm-app .modal-backdrop.fade.in {
+.wm-app .modal-backdrop.fade.in,
+.wm-app .modal-backdrop.fade.show {
   opacity: 1;
 }
 .wm-app .modal {
@@ -5230,7 +5231,8 @@
   -o-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
 }
-.wm-app .modal.fade.in {
+.wm-app .modal.fade.in,
+.wm-app .modal.fade.show {
   opacity: 1;
   display: flex !important;
 }