@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

package/cjs/src_tokens_mobile_components_popover_popover_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"popover":{"meta":{"mapping":{"selector":{"mobile":".app-popover"}}},"mapping":{"position":{"value":"absolute","type":"space","attributes":{"subtype":"space","description":"Controls the positioning method of popovers (overlay menus that appear above other content). When set to \'absolute\', the popover is positioned relative to its nearest positioned ancestor.<br>CSS variable: --wm-popover-position"}},"left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left position offset of popovers (the distance from the left edge of the viewport or parent container). This determines how far from the left the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-left"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom position offset of popovers (the distance from the bottom edge of the viewport or parent container). This determines how far from the bottom the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-bottom"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-width"}},"min-height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"}},"elevation":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popovers. This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-elevation"}},"padding-top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-top"}},"padding-left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-left"}},"padding-right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-right"}},"padding-bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-bottom"}},"background-color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background-color"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"}},"border":{"top":{"left":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-left corner of popovers. This makes the popover appear with rounded corners on the top-left for a softer appearance.<br>CSS variable: --wm-popover-border-top-left-radius"}}},"right":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of popovers. This makes the popover appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-popover-border-top-right-radius"}}}}},"header":{"padding-top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-top"}},"padding-bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-bottom"}},"padding-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-left"}},"padding-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-right"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"}},"background-color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover header. This determines what color the title background appears in.<br>CSS variable: --wm-popover-header-background-color"}}},"link":{"text":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-text-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in popover caption. This affects how large the link text appears.<br>CSS variable: --wm-popover-link-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover caption text appears.<br>CSS variable: --wm-popover-link-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover caption text wraps to multiple lines.<br>CSS variable: --wm-popover-link-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 popover caption text.<br>CSS variable: --wm-popover-link-letter-spacing"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in popover links.<br>CSS variable: --wm-popover-link-icon-size"}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in popover links.<br>CSS variable: --wm-popover-link-icon-color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"popover":{"meta":{"mapping":{"selector":{"mobile":".app-popover"}}},"mapping":{"left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left position offset of popovers (the distance from the left edge of the viewport or parent container). This determines how far from the left the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-left"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom position offset of popovers (the distance from the bottom edge of the viewport or parent container). This determines how far from the bottom the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-bottom"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-width"}},"min-height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"}},"padding-top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-top"}},"padding-left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-left"}},"padding-right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-right"}},"padding-bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-bottom"}},"background-color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background-color"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"}},"border":{"top":{"left":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-left corner of popovers. This makes the popover appear with rounded corners on the top-left for a softer appearance.<br>CSS variable: --wm-popover-border-top-left-radius"}}},"right":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of popovers. This makes the popover appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-popover-border-top-right-radius"}}}}},"header":{"padding-top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-top"}},"padding-bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-bottom"}},"padding-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-left"}},"padding-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-right"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"}},"background-color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover header. This determines what color the title background appears in.<br>CSS variable: --wm-popover-header-background-color"}}},"link":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-color"}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the popover text. When transparent, only the popover text is visible. When filled with a color, the text appears with a colored background.<br>CSS variable: --wm-popover-link-background-color"}}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-link-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around popover. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-popover-link-border-style"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-link-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of link popover components. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-link-radius"}}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-top"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-right"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-bottom"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in popover caption. This affects how large the link text appears.<br>CSS variable: --wm-popover-link-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover caption text appears.<br>CSS variable: --wm-popover-link-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover caption text wraps to multiple lines.<br>CSS variable: --wm-popover-link-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 popover caption text.<br>CSS variable: --wm-popover-link-letter-spacing"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in popover links.<br>CSS variable: --wm-popover-link-icon-size"}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in popover links.<br>CSS variable: --wm-popover-link-icon-color"}}}},"height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the height of popovers link wrapper. When set to 100%, the popover takes up the full height of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-height"}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers link wrapper. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-width"}},"min-height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components. This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-link-min-height"}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_search_search_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"search":{"meta":{"mapping":{"selector":{"mobile":"app-search"}}},"mapping":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of search components (input fields that allow users to search for content). This determines the vertical size of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-height"}},"border":{"radius":{"value":"{space.7.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search components. This determines how rounded the corners of the search input field appear. Acceptable units: px.<br>CSS variable: --wm-search-border-radius"}},"width":{"value":"{border.width.1.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search components. This determines how thick the border around the search input field appears. Acceptable units: px.<br>CSS variable: --wm-search-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search components. This determines what color the border around the search input field appears in.<br>CSS variable: --wm-search-border-color"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search input text (the text that users type into the search field). This determines what color the search input text appears in.<br>CSS variable: --wm-search-text-color"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search input text fields. This determines what color the background of the search input field appears in.<br>CSS variable: --wm-search-text-background-color"}}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search input text. This affects how large the text appears in the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search input text. This determines which font is used for the text in the search input field.<br>CSS variable: --wm-search-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search input text. This affects how bold the text appears in the search input field.<br>CSS variable: --wm-search-text-font-weight"}}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search input text. This creates breathing room at the top of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search input text. This creates breathing room at the bottom of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search input text. This creates breathing room on the left side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search input text. This creates breathing room on the right side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-right"}}}},"dropdown":{"width":{"value":"90%","type":"space","attributes":{"subtype":"space","description":"Controls the width of search dropdown menu (autocomplete suggestions that appear below the search input). This determines how wide the dropdown appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-search-dropdown-width"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search dropdown menus. This determines what color the background of the dropdown appears in.<br>CSS variable: --wm-search-dropdown-background-color"}}},"border":{"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search dropdown menus. This determines how rounded the corners of the dropdown appear. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search dropdown menus. This determines what color the border around the dropdown appears in.<br>CSS variable: --wm-search-dropdown-border-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search dropdown menus. This determines how thick the border around the dropdown appears. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-width"}}}},"invalid":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of invalid search input fields (when validation fails). This determines what color the border appears in when the search input is in an invalid state, typically matching the error theme color.<br>CSS variable: --wm-search-invalid-color"}}},"btn":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search button (the button that triggers the search action). This determines what color the background of the search button appears in.<br>CSS variable: --wm-search-btn-background-color"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search button icons (icons that appear on search buttons, such as search or clear icons). This determines what color the button icons appear in.<br>CSS variable: --wm-search-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"icon","attributes":{"subtype":"icon-size","description":"Controls the size of search button icons. This affects how large the button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-btn-icon-size"}}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color of search buttons (the visual feedback when buttons are pressed). This determines what color the ripple effect appears in when the search button is clicked.<br>CSS variable: --wm-search-btn-ripple-color"}}}},"placeholder":{"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in search input fields (hint text that appears when the field is empty). This determines what color the placeholder text appears in.<br>CSS variable: --wm-search-placeholder-color"}}}},"data-complete":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search autocomplete items (suggestions that appear in the dropdown). This determines what color the background of autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-background"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search autocomplete items. This creates breathing room at the top of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search autocomplete items. This creates breathing room at the bottom of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search autocomplete items. This creates breathing room on the left side of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search autocomplete items. This creates breathing room on the right side of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-right"}}},"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search autocomplete items. This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"}},"font":{"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search autocomplete item text. This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"}},"family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search autocomplete item text. This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"}},"weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search autocomplete item text. This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"}}}}},"item":{"margin-bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of search result items (individual items in the search results list). This creates spacing between search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-margin-bottom"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search result items. This creates breathing room at the top of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search result items. This creates breathing room at the bottom of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-bottom"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search result items. This creates breathing room on the left side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search result items. This creates breathing room on the right side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-right"}}},"separator":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of separators between search result items (dividers that appear between items in the search results list). This determines what color the separators appear in.<br>CSS variable: --wm-search-item-separator-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the width (thickness) of separators between search result items. This determines how thick the separators appear. Acceptable units: px.<br>CSS variable: --wm-search-item-separator-width"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search result items. This determines what color the text in search result items appears in.<br>CSS variable: --wm-search-item-text-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search result item text. This affects how large the text appears in search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search result item text. This determines which font is used for the text in search result items.<br>CSS variable: --wm-search-item-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search result item text. This affects how bold the text appears in search result items.<br>CSS variable: --wm-search-item-text-font-weight"}}}}}}},"appearances":{}}');
+module.exports = /*#__PURE__*/JSON.parse('{"search":{"meta":{"mapping":{"selector":{"mobile":"app-search"}}},"mapping":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of search components (input fields that allow users to search for content). This determines the vertical size of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-height"}},"border":{"radius":{"value":"{space.7.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search components. This determines how rounded the corners of the search input field appear. Acceptable units: px.<br>CSS variable: --wm-search-border-radius"}},"width":{"value":"{border.width.1.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search components. This determines how thick the border around the search input field appears. Acceptable units: px.<br>CSS variable: --wm-search-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search components. This determines what color the border around the search input field appears in.<br>CSS variable: --wm-search-border-color"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search input text (the text that users type into the search field). This determines what color the search input text appears in.<br>CSS variable: --wm-search-text-color"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search input text fields. This determines what color the background of the search input field appears in.<br>CSS variable: --wm-search-text-background-color"}}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search input text. This affects how large the text appears in the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search input text. This determines which font is used for the text in the search input field.<br>CSS variable: --wm-search-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search input text. This affects how bold the text appears in the search input field.<br>CSS variable: --wm-search-text-font-weight"}}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search input text. This creates breathing room at the top of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search input text. This creates breathing room at the bottom of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search input text. This creates breathing room on the left side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search input text. This creates breathing room on the right side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-right"}}}},"dropdown":{"width":{"value":"90%","type":"space","attributes":{"subtype":"space","description":"Controls the width of search dropdown menu (autocomplete suggestions that appear below the search input). This determines how wide the dropdown appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-search-dropdown-width"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search dropdown menus. This determines what color the background of the dropdown appears in.<br>CSS variable: --wm-search-dropdown-background-color"}}},"border":{"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search dropdown menus. This determines how rounded the corners of the dropdown appear. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search dropdown menus. This determines what color the border around the dropdown appears in.<br>CSS variable: --wm-search-dropdown-border-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search dropdown menus. This determines how thick the border around the dropdown appears. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-width"}}}},"invalid":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of invalid search input fields (when validation fails). This determines what color the border appears in when the search input is in an invalid state, typically matching the error theme color.<br>CSS variable: --wm-search-invalid-color"}}},"btn":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search button (the button that triggers the search action). This determines what color the background of the search button appears in.<br>CSS variable: --wm-search-btn-background-color"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search button icons (icons that appear on search buttons, such as search or clear icons). This determines what color the button icons appear in.<br>CSS variable: --wm-search-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"icon","attributes":{"subtype":"icon-size","description":"Controls the size of search button icons. This affects how large the button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-btn-icon-size"}}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color of search buttons (the visual feedback when buttons are pressed). This determines what color the ripple effect appears in when the search button is clicked.<br>CSS variable: --wm-search-btn-ripple-color"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-right"}}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-width"}}},"placeholder":{"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in search input fields (hint text that appears when the field is empty). This determines what color the placeholder text appears in.<br>CSS variable: --wm-search-placeholder-color"}}}},"data-complete":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the background of data complete message appears in.<br>CSS variable: --wm-search-data-complete-background"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-right"}}},"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"}},"font":{"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"}},"family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search data complete message text (which appears after the last item or when no results are found in suggestions). This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"}},"weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"}}}}},"item":{"margin-bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of search result items (individual items in the search results list). This creates spacing between search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-margin-bottom"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search result items. This creates breathing room at the top of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search result items. This creates breathing room at the bottom of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-bottom"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search result items. This creates breathing room on the left side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search result items. This creates breathing room on the right side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-right"}}},"separator":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of separators between search result items (dividers that appear between items in the search results list). This determines what color the separators appear in.<br>CSS variable: --wm-search-item-separator-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the width (thickness) of separators between search result items. This determines how thick the separators appear. Acceptable units: px.<br>CSS variable: --wm-search-item-separator-width"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search result items. This determines what color the text in search result items appears in.<br>CSS variable: --wm-search-item-text-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search result item text. This affects how large the text appears in search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search result item text. This determines which font is used for the text in search result items.<br>CSS variable: --wm-search-item-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search result item text. This affects how bold the text appears in search result items.<br>CSS variable: --wm-search-item-text-font-weight"}}}}},"clear-btn":{"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search clear button icons. This determines what color the clear button icons appear in.<br>CSS variable: --wm-search-clear-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of search clear button icons. This affects how large the clear button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-icon-size"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search clear button. This creates breathing room at the top of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search clear button. This creates breathing room at the bottom of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-bottom"}},"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search clear button. This creates breathing room on the left side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search clear button. This creates breathing room on the right side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-right"}}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of search clear button. This determines the roundness of the corners of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-border-radius"}}},"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search clear button. This determines the color of the clear button.<br>CSS variable: --wm-search-clear-btn-background-color"}}},"width":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of search clear button. This determines the width of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-width"}}}}},"appearances":{}}');
 
 /***/ }
 

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"}},"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"}}},"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":{"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the left side.<br>CSS variable: --wm-switch-button-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the right side.<br>CSS variable: --wm-switch-button-padding-right"}}},"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)"}}}}},"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":{"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the left side.<br>CSS variable: --wm-switch-button-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the right side.<br>CSS variable: --wm-switch-button-padding-right"}}},"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"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_tabbar_tabbar_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tabbar":{"meta":{"mapping":{"selector":{"mobile":".app-tabbar"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabbar-active-icon, .app-tabbar-active-label "}}}}},"mapping":{"height":{"value":"80px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar components (navigation bars with tabs at the bottom of the screen). This determines the vertical size of the tabbar. Acceptable units: px.<br>CSS variable: --wm-tabbar-height"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-tabbar-box-shadow"}},"menu":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar menus (the container that holds tab items). This determines what color the background of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-menu-background"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar menus. This determines the vertical size of the menu container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-menu-height"}}},"more-menu":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menus (overflow menus that appear when there are too many tabs). This determines how wide the more menu appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-width"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar more menus. This determines what color the background of the more menu appears in.<br>CSS variable: --wm-tabbar-more-menu-background"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar more menus. This determines the shadow depth and visual elevation of the more menu above the content.<br>CSS variable: --wm-tabbar-more-menu-box-shadow"}}},"more-menu-row":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menu rows (individual rows in the more menu). This determines how wide each row appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-row-width"}},"padding":{"top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the top of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-top"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the bottom of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-bottom"}}}},"item":{"min":{"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabbar items (individual tabs in the tabbar). This determines the minimum vertical size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-height"}},"width":{"value":"{spacer.7.value}","type":"spacer","attributes":{"subtype":"space","description":"Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"}}},"margin":{"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of tabbar items. This creates spacing below tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom"}}},"border":{"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabbar items. This determines how rounded the corners of tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar items. This determines what color the background of tab items appears in.<br>CSS variable: --wm-tabbar-item-background-color"}}},"opacity":{"value":"1","type":"space","attributes":{"subtype":"opacity","description":"Controls the transparency of tabbar items. When set to 1, items are fully opaque. Lower values make items more transparent, higher values make them more opaque.<br>CSS variable: --wm-tabbar-item-opacity"}}},"icon":{"size":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of tabbar icons (icons that appear in tab items). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-size"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tabbar icons. This determines what color the icons appear in.<br>CSS variable: --wm-tabbar-icon-color"}},"padding":{"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of tabbar icons. This creates breathing room on the right side of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-right"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of tabbar icons. This creates breathing room at the bottom of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-bottom"}}},"border-bottom-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the bottom border color of tabbar icons. This determines what color the bottom border of icons appears in, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-border-bottom-color"}}},"text":{"font":{"size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of tabbar text (labels that appear in tab items). This affects how large the text appears. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of tabbar text. This determines which font is used for the text in tab items.<br>CSS variable: --wm-tabbar-text-font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of tabbar text. This affects how bold the text appears in tab items.<br>CSS variable: --wm-tabbar-text-font-weight"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tabbar labels. This determines what color the text in tab items appears in.<br>CSS variable: --wm-tabbar-text-color"}},"margin":{"top":{"value":"{space.rule.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) of tabbar text. This creates spacing above the text. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-margin-top"}}}},"states":{"active":{"item":{"border":{"radius":{"value":"50px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of active tabbar items. This determines how rounded the corners of active tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius (active state)"}}},"background":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tabbar items (tabs that are currently selected). This determines what color the background appears in for active items, typically matching the primary container theme color.<br>CSS variable: --wm-tabbar-item-background-color (active state)"}}},"margin":{"bottom":{"value":"-2","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of active tabbar items. This creates spacing below active tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom (active state)"}}}},"icon":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tabbar icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-color (active state)"}}},"text":{"font":{"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of active tabbar text. This affects how bold the text appears in active tab items.<br>CSS variable: --wm-tabbar-text-font-weight (active state)"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tabbar labels. This determines what color the text appears in for active tabs.<br>CSS variable: --wm-tabbar-text-color (active state)"}}}}}},"appearences":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tabbar":{"meta":{"mapping":{"selector":{"mobile":".app-tabbar"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabbar-active-icon, .app-tabbar-active-label "}}}}},"mapping":{"height":{"value":"80px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar components (navigation bars with tabs at the bottom of the screen). This determines the vertical size of the tabbar. Acceptable units: px.<br>CSS variable: --wm-tabbar-height"}},"border":{"top":{"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"space","description":"Controls the border top width of tabbar. This determines border top width of the tabbar. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-border-top-width"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border top color of tabbar. This determines what color the border top of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-border-top-color"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border top style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-tabbar-border-top-style"}}}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-tabbar-box-shadow"}},"menu":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar menus (the container that holds tab items). This determines what color the background of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-menu-background"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar menus. This determines the vertical size of the menu container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-menu-height"}}},"more-menu":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menus (overflow menus that appear when there are too many tabs). This determines how wide the more menu appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-width"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar more menus. This determines what color the background of the more menu appears in.<br>CSS variable: --wm-tabbar-more-menu-background"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar more menus. This determines the shadow depth and visual elevation of the more menu above the content.<br>CSS variable: --wm-tabbar-more-menu-box-shadow"}}},"more-menu-row":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menu rows (individual rows in the more menu). This determines how wide each row appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-row-width"}},"padding":{"top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the top of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-top"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the bottom of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-bottom"}}}},"item":{"min":{"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabbar items (individual tabs in the tabbar). This determines the minimum vertical size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-height"}},"width":{"value":"{spacer.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"}}},"border":{"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabbar items. This determines how rounded the corners of tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar items. This determines what color the background of tab items appears in.<br>CSS variable: --wm-tabbar-item-background-color"}}},"opacity":{"value":"1","type":"space","attributes":{"subtype":"opacity","description":"Controls the transparency of tabbar items. When set to 1, items are fully opaque. Lower values make items more transparent, higher values make them more opaque.<br>CSS variable: --wm-tabbar-item-opacity"}}},"icon":{"size":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of tabbar icons (icons that appear in tab items). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-size"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tabbar icons. This determines what color the icons appear in.<br>CSS variable: --wm-tabbar-icon-color"}},"padding":{"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of tabbar icons. This creates breathing room on the right side of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-right"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of tabbar icons. This creates breathing room at the bottom of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-bottom"}}},"border-bottom-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the bottom border color of tabbar icons. This determines what color the bottom border of icons appears in, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-border-bottom-color"}}},"text":{"font":{"size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of tabbar text (labels that appear in tab items). This affects how large the text appears. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of tabbar text. This determines which font is used for the text in tab items.<br>CSS variable: --wm-tabbar-text-font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of tabbar text. This affects how bold the text appears in tab items.<br>CSS variable: --wm-tabbar-text-font-weight"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tabbar labels. This determines what color the text in tab items appears in.<br>CSS variable: --wm-tabbar-text-color"}},"margin":{"top":{"value":"{space.rule.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) of tabbar text. This creates spacing above the text. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-margin-top"}}}},"states":{"active":{"item":{"border":{"radius":{"value":"50px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of active tabbar items. This determines how rounded the corners of active tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius (active state)"}}},"background":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tabbar items (tabs that are currently selected). This determines what color the background appears in for active items, typically matching the primary container theme color.<br>CSS variable: --wm-tabbar-item-background-color (active state)"}}},"margin":{"bottom":{"value":"-2","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of active tabbar items. This creates spacing below active tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom (active state)"}}}},"icon":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tabbar icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-color (active state)"}}},"text":{"font":{"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of active tabbar text. This affects how bold the text appears in active tab items.<br>CSS variable: --wm-tabbar-text-font-weight (active state)"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tabbar labels. This determines what color the text appears in for active tabs.<br>CSS variable: --wm-tabbar-text-color (active state)"}}}}}},"appearences":{}}}');
 
 /***/ }
 

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":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"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"}}},"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":{"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":{"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"}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}},"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"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the font size of tab item icons. This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-font-size (for icons)"}}},"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":{"indicator":{"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":{"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":{"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 (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"}},"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":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"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"}}},"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":"font","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":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}},"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":{"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"}}},"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":{"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":"font","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/cjs/src_tokens_mobile_components_tile_tile_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"mapping":{"selector":{"mobile":".app-tile"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default.app-tile"}},"primary":{"selector":{"mobile":".bg-primary.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary.app-tile"}},"success":{"selector":{"mobile":".bg-success.app-tile"}},"info":{"selector":{"mobile":".bg-info.app-tile"}},"warning":{"selector":{"mobile":".bg-warning.app-tile"}},"danger":{"selector":{"mobile":".bg-danger.app-tile"}}}}},"filled":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled.app-tile"}},"primary":{"selector":{"mobile":".bg-primary-filled.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary-filled.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled.app-tile"}},"success":{"selector":{"mobile":".bg-success-filled.app-tile"}},"info":{"selector":{"mobile":".bg-info-filled.app-tile"}},"warning":{"selector":{"mobile":".bg-warning-filled.app-tile"}},"danger":{"selector":{"mobile":".bg-danger-filled.app-tile"}}}}}}},"mapping":{"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tile components (rectangular content blocks that hold information). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-border-radius"}},"width":{"value":"1px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tile components (rectangular content blocks that hold information). This creates the outline that defines the tile shape and makes it visible to users.<br>CSS variable: --wm-tile-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tile components (rectangular content blocks that hold information). This determines the color of the outline that defines the tile shape. When transparent, no border is visible.<br>CSS variable: --wm-tile-border-color"}}},"padding":{"top":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-top"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-bottom"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-right"}}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.container.@.value}","type":"color"}},"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.container.@.value}","type":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.container.@.value}","type":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.container.@.value}","type":"color"}},"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.container.@.value}","type":"color"}},"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.container.@.value}","type":"color"}},"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.container.@.value}","type":"color"}},"color":{"value":"{color.error.@.value}","type":"color"}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.@.value}","type":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.@.value}","type":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.@.value}","type":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.@.value}","type":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.@.value}","type":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"mapping":{"selector":{"mobile":".app-tile"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default.app-tile"}},"primary":{"selector":{"mobile":".bg-primary.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary.app-tile"}},"success":{"selector":{"mobile":".bg-success.app-tile"}},"info":{"selector":{"mobile":".bg-info.app-tile"}},"warning":{"selector":{"mobile":".bg-warning.app-tile"}},"danger":{"selector":{"mobile":".bg-danger.app-tile"}}}}},"filled":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled.app-tile"}},"primary":{"selector":{"mobile":".bg-primary-filled.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary-filled.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled.app-tile"}},"success":{"selector":{"mobile":".bg-success-filled.app-tile"}},"info":{"selector":{"mobile":".bg-info-filled.app-tile"}},"warning":{"selector":{"mobile":".bg-warning-filled.app-tile"}},"danger":{"selector":{"mobile":".bg-danger-filled.app-tile"}}}}}}},"mapping":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of tile components (rectangular content blocks that hold information). This determines the color of the tile. <br>CSS variable: --wm-tile-background-color"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the template color of tile components (rectangular content blocks that hold information). This determines the color of the tile template. <br>CSS variable: --wm-tile-color"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tile components (rectangular content blocks that hold information). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-border-radius"}},"width":{"value":"1px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tile components (rectangular content blocks that hold information). This creates the outline that defines the tile shape and makes it visible to users.<br>CSS variable: --wm-tile-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tile components (rectangular content blocks that hold information). This determines the color of the outline that defines the tile shape. When transparent, no border is visible.<br>CSS variable: --wm-tile-border-color"}}},"padding":{"top":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-top"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-bottom"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding-right"}}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.container.@.value}","type":"color"}},"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.container.@.value}","type":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.container.@.value}","type":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.container.@.value}","type":"color"}},"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.container.@.value}","type":"color"}},"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.container.@.value}","type":"color"}},"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.container.@.value}","type":"color"}},"color":{"value":"{color.error.@.value}","type":"color"}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.@.value}","type":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.@.value}","type":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.@.value}","type":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.@.value}","type":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.@.value}","type":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color"}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_toggle_toggle_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"toggle":{"meta":{"mapping":{"selector":{"mobile":".app-toggle"},"states":{"on":{"selector":{"mobile":"-on, .app-toggle-handle-on"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"width":{"value":"52px","type":"space","attributes":{"subtype":"space","description":"Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height"}},"background":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background-color"}}},"handle":{"color":{"value":"{color.on-secondary.fixed.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color"}},"width":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the width of toggle handles (the circular element that slides along the toggle track). This determines how wide the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-width"}},"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the height of toggle handles (the circular element that slides along the toggle track). This determines how tall the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-height"}},"radius":{"value":"18px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle handles (the circular element that slides along the toggle track). This makes the handle appear with rounded corners, creating a circular or pill-shaped appearance.<br>CSS variable: --wm-toggle-handle-radius"}},"margin":{"left":{"value":"8px","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of toggle handles (the spacing from the left edge of the toggle track). This determines the initial position of the handle when the toggle is in the off state.<br>CSS variable: --wm-toggle-handle-margin-left"}},"right":{"value":"1px","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of toggle handles (the spacing from the right edge of the toggle track). This affects the positioning of the handle when the toggle is in the on state.<br>CSS variable: --wm-toggle-handle-margin-right"}}}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color"}},"radius":{"value":"18px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle switches. When set to a high value, the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-border-radius"}},"width":{"value":"2px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"}}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of toggle switches. When set to 1, the toggle is fully opaque. Lower values make the toggle more transparent, higher values make it more opaque.<br>CSS variable: --wm-toggle-opacity"}},"states":{"on":{"background":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toggle switches when they are in the on/checked state. This is the color that appears when the toggle is enabled.<br>CSS variable: --wm-toggle-background-color (on state)"}}},"handle":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of toggle handles when the toggle is in the on/checked state. This determines what color the draggable part of the toggle appears in when enabled.<br>CSS variable: --wm-toggle-handle-color (on state)"}}}},"disabled":{"opacity":{"value":"0.5","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled toggle switches. When set to 0.5, disabled toggles appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-toggle-opacity (disabled state)"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"toggle":{"meta":{"mapping":{"selector":{"mobile":".app-toggle"},"states":{"on":{"selector":{"mobile":"-on, .app-toggle-handle-on"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"width":{"value":"52px","type":"space","attributes":{"subtype":"space","description":"Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height"}},"background":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background-color"}}},"handle":{"color":{"value":"{color.on-secondary.fixed.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color"}},"width":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the width of toggle handles (the circular element that slides along the toggle track). This determines how wide the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-width"}},"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the height of toggle handles (the circular element that slides along the toggle track). This determines how tall the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-height"}},"radius":{"value":"18px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle handles (the circular element that slides along the toggle track). This makes the handle appear with rounded corners, creating a circular or pill-shaped appearance.<br>CSS variable: --wm-toggle-handle-radius"}},"margin":{"left":{"value":"8px","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of toggle handles (the spacing from the left edge of the toggle track). This determines the initial position of the handle when the toggle is in the off state.<br>CSS variable: --wm-toggle-handle-margin-left"}},"right":{"value":"1px","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of toggle handles (the spacing from the right edge of the toggle track). This affects the positioning of the handle when the toggle is in the on state.<br>CSS variable: --wm-toggle-handle-margin-right"}}}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color"}},"radius":{"value":"18px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle switches. When set to a high value, the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-border-radius"}},"width":{"value":"2px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"}}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of toggle switches. When set to 1, the toggle is fully opaque. Lower values make the toggle more transparent, higher values make it more opaque.<br>CSS variable: --wm-toggle-opacity"}},"states":{"on":{"background":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toggle switches when they are in the on/checked state. This is the color that appears when the toggle is enabled.<br>CSS variable: --wm-toggle-background-color (on state)"}}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toggle switches when they are in the on/checked state. This determines the color of the outline that defines the toggle switch shape in its on state.<br>CSS variable: --wm-toggle-border-color"}},"radius":{"value":"18px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle switches when they are in the on/checked state. When set to a high value, the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-border-radius"}},"width":{"value":"2px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toggle switches when they are in the on/checked state. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"}}},"handle":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of toggle handles when the toggle is in the on/checked state. This determines what color the draggable part of the toggle appears in when enabled.<br>CSS variable: --wm-toggle-handle-color (on state)"}},"width":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the width of toggle handles when the toggle is in the on/checked state (the circular element that slides along the toggle track). This determines how wide the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-width"}},"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the height of toggle handles when the toggle is in the on/checked state (the circular element that slides along the toggle track). This determines how tall the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-height"}},"radius":{"value":"18px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle handles when the toggle is in the on/checked state (the circular element that slides along the toggle track). This makes the handle appear with rounded corners, creating a circular or pill-shaped appearance.<br>CSS variable: --wm-toggle-handle-radius"}},"margin":{"left":{"value":"8px","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of toggle handles when the toggle is in the on/checked state (the spacing from the left edge of the toggle track). This determines the initial position of the handle when the toggle is in the off state.<br>CSS variable: --wm-toggle-handle-margin-left"}},"right":{"value":"1px","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of toggle handles when the toggle is in the on/checked state (the spacing from the right edge of the toggle track). This affects the positioning of the handle when the toggle is in the on state.<br>CSS variable: --wm-toggle-handle-margin-right"}}}}},"disabled":{"opacity":{"value":"0.5","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled toggle switches. When set to 0.5, disabled toggles appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-toggle-opacity (disabled state)"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_webview_webview_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"webview":{"mapping":{"container":{"min-height":{"value":"100px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of webview containers (embedded web content viewers that display web pages or HTML content). This ensures the webview is always tall enough to be visible and properly display content.<br>CSS variable: --wm-webview-container-min-height"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"webview":{"meta":{"mapping":{"selector":{"mobile":".app-webview"}}},"mapping":{"background":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the webview. When transparent, only the webview is visible. When filled with a color, the webview appears with a colored background.<br>CSS variable: --wm-webview-background-color"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside webview. This creates breathing room above the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside webview. This creates breathing room below the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside webview. This creates breathing room on the left side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside webview. This creates breathing room on the right side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-right"}}}},"appearances":{}}}');
 
 /***/ }