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

package/cjs/src_tokens_web_components_iconbutton-toggleable_iconbutton-toggleable_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_iconbutton-toggleable_iconbutton-toggleable_json"],{
+
+/***/ "./src/tokens/web/components/iconbutton-toggleable/iconbutton-toggleable.json"
+/*!************************************************************************************!*\
+  !*** ./src/tokens/web/components/iconbutton-toggleable/iconbutton-toggleable.json ***!
+  \************************************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"iconbutton-toggle":{"meta":{"mapping":{"selector":{"web":".app-iconbutton-toggle"},"states":{"hover":{"selector":{"web":":has(label > input[type=\'checkbox\']:hover)"}},"focus":{"selector":{"web":":has(label > input[type=\'checkbox\']:focus)"}},"selected":{"selector":{"web":":has(label > input[type=\'checkbox\']:checked)"}}}},"appearances":{}},"mapping":{"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}},"appearances":{"default":{"mapping":{"states":{"hover":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}}},"selected":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}}}}},"outlined":{"mapping":{"border":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"states":{"hover":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}},"selected":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"border":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}}}},"variantGroups":{}},"filled":{"mapping":{"border":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}},"states":{"hover":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}},"selected":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}}}}},"variantGroups":{}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_page-content_page-content_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \******************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"page":{"meta":{},"mapping":{"content":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside page content areas (the main content sections of web pages). This creates breathing room around the page content.<br>CSS variable: --wm-page-content-padding"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"page":{"meta":{},"mapping":{"content":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside page content areas (the main content sections of web pages). This creates breathing room around the page content.<br>CSS variable: --wm-page-content-padding"}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_page-left-nav_page-left-nav_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"aside-left":{"meta":{"mapping":{"selector":{"web":".app-left-panel"},"states":{"hover":{"selector":{"web":" .app-nav-item:has(:hover)"}},"active":{"selector":{"web":" .app-nav-item:has(:active),.app-left-panel .app-nav-item:has(.active), .app-nav-item.active"}},"focus":{"selector":{"web":" .app-nav-item:has(:focus)"}}}},"appearances":{"full":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-left-panel.app-nav-drawer.app-nav-full)"}},"nav-rail":{"selector":{"web":":has(.app-left-panel.app-nav-rail.app-nav-full)"}}}}},"clipped":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-left-panel.app-nav-drawer.app-nav-clipped)"}},"nav-rail":{"selector":{"web":":has(.app-left-panel.app-nav-rail.app-nav-clipped)"}}}}}}},"mapping":{"nav":{"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the left navigation panel border (the vertical sidebar that contains navigation menu items). This determines what color the border line appears in that separates the navigation from the main content.<br>CSS variable: --wm-aside-left-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of the left navigation panel border. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes the border completely.<br>CSS variable: --wm-aside-left-border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the left navigation panel. This makes the navigation panel corners slightly rounded for a softer appearance, or keeps them square with \'none\'.<br>CSS variable: --wm-aside-left-border-radius"}},"width":{"value":"{border.width.0.value} {border.width.1.value} {border.width.0.value} {border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the left navigation panel border. The format is \'top right bottom left\' - this setting creates a right border only to separate the navigation from the main content.<br>CSS variable: --wm-aside-left-border-width"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the left navigation panel (the vertical sidebar that contains navigation menu items). This creates a subtle shadow that makes the navigation appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-aside-left-shadow"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the left navigation panel text. This can help make the navigation text more readable and properly spaced.<br>CSS variable: --wm-aside-left-letter-spacing"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside the left navigation panel (the space between the navigation content and its borders). This creates breathing room around the navigation menu items.<br>CSS variable: --wm-aside-left-padding"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the left navigation panel (the vertical sidebar that contains navigation menu items). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-aside-left-background"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the left navigation panel (the vertical sidebar that contains navigation menu items). This determines what color the navigation text appears in.<br>CSS variable: --wm-aside-left-color"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between navigation items in the left navigation panel (the vertical sidebar that contains navigation menu items). This creates visual separation between different menu options.<br>CSS variable: --wm-aside-left-nav-gap"}},"item":{"color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This determines what color the menu item text appears in.<br>CSS variable: --wm-aside-left-nav-item-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This creates the background color behind each menu item.<br>CSS variable: --wm-aside-left-nav-item-background"}},"min":{"height":{"value":"44px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of navigation items in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This ensures each menu item is tall enough to be easily clickable.<br>CSS variable: --wm-aside-left-nav-item-min-height"}}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside navigation items in the left navigation panel (the space between the menu item content and its borders). This creates breathing room around the menu item text and icons.<br>CSS variable: --wm-aside-left-nav-item-padding"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-aside-left-nav-item-font-family"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the navigation item text appears in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-aside-left-nav-item-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the navigation item text appears in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-aside-left-nav-item-font-weight"}}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when navigation item text wraps to multiple lines in the left navigation panel. This ensures proper spacing for the menu item text displayed in the navigation.<br>CSS variable: --wm-aside-left-nav-item-line-height"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation items.<br>CSS variable: --wm-aside-left-nav-item-border-radius"}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements within navigation items.<br>CSS variable: --wm-aside-left-nav-item-gap"}},"icon":{"size":{"value":"24px","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-size"}},"width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the width of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-width"}},"height":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the height of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-height"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-border-radius"}}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-background"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-color"}}},"indicator":{"color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the color of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-color"}},"width":{"value":"1px","type":"space","attributes":{"subtype":"space","description":"Controls the width of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-width"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the height of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-height"}},"position":{"value":" 0 0 0 auto","type":"space","attributes":{"subtype":"space","description":"Controls the positioning of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-position"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-border-radius"}}}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of navigation item caret icons.<br>CSS variable: --wm-aside-left-nav-item-caret-size"}}}},"submenu":{"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-padding"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-background"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-border-radius"}}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-box-shadow"}},"item":{"color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the text color of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-background"}},"height":{"value":"44px","type":"space","attributes":{"subtype":"space","description":"Controls the height of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-height"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-padding"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family for submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-family"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-weight"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Sets the line height for submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-line-height"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-border-radius"}}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements within submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-gap"}}}}},"states":{"hover":{"nav":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}},"focus":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{"full":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"120px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}},"clipped":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"102px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"aside-left":{"meta":{"mapping":{"selector":{"web":".app-left-panel"},"states":{"hover":{"selector":{"web":" .app-nav-item:has(:hover)"}},"active":{"selector":{"web":" .app-nav-item:has(:active), .app-nav-item:has(.active), .app-nav-item.active"}},"focus":{"selector":{"web":" .app-nav-item:has(:focus)"}}}},"appearances":{"full":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-left-panel.app-nav-drawer.app-nav-full)"}},"nav-rail":{"selector":{"web":":has(.app-left-panel.app-nav-rail.app-nav-full)"}}}}},"clipped":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-left-panel.app-nav-drawer.app-nav-clipped)"}},"nav-rail":{"selector":{"web":":has(.app-left-panel.app-nav-rail.app-nav-clipped)"}}}}}}},"mapping":{"nav":{"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the left navigation panel border (the vertical sidebar that contains navigation menu items). This determines what color the border line appears in that separates the navigation from the main content.<br>CSS variable: --wm-aside-left-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of the left navigation panel border. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes the border completely.<br>CSS variable: --wm-aside-left-border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the left navigation panel. This makes the navigation panel corners slightly rounded for a softer appearance, or keeps them square with \'none\'.<br>CSS variable: --wm-aside-left-border-radius"}},"width":{"value":"{border.width.0.value} {border.width.1.value} {border.width.0.value} {border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the left navigation panel border. The format is \'top right bottom left\' - this setting creates a right border only to separate the navigation from the main content.<br>CSS variable: --wm-aside-left-border-width"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the left navigation panel (the vertical sidebar that contains navigation menu items). This creates a subtle shadow that makes the navigation appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-aside-left-shadow"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the left navigation panel text. This can help make the navigation text more readable and properly spaced.<br>CSS variable: --wm-aside-left-letter-spacing"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside the left navigation panel (the space between the navigation content and its borders). This creates breathing room around the navigation menu items.<br>CSS variable: --wm-aside-left-padding"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the left navigation panel (the vertical sidebar that contains navigation menu items). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-aside-left-background"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the left navigation panel (the vertical sidebar that contains navigation menu items). This determines what color the navigation text appears in.<br>CSS variable: --wm-aside-left-color"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between navigation items in the left navigation panel (the vertical sidebar that contains navigation menu items). This creates visual separation between different menu options.<br>CSS variable: --wm-aside-left-nav-gap"}},"item":{"color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This determines what color the menu item text appears in.<br>CSS variable: --wm-aside-left-nav-item-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This creates the background color behind each menu item.<br>CSS variable: --wm-aside-left-nav-item-background"}},"min":{"height":{"value":"44px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of navigation items in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This ensures each menu item is tall enough to be easily clickable.<br>CSS variable: --wm-aside-left-nav-item-min-height"}}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside navigation items in the left navigation panel (the space between the menu item content and its borders). This creates breathing room around the menu item text and icons.<br>CSS variable: --wm-aside-left-nav-item-padding"}},"font":{"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-aside-left-nav-item-font-family"}},"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the navigation item text appears in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-aside-left-nav-item-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the navigation item text appears in the left navigation panel (individual menu options like \'Home\', \'Settings\', \'Profile\'). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-aside-left-nav-item-font-weight"}}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when navigation item text wraps to multiple lines in the left navigation panel. This ensures proper spacing for the menu item text displayed in the navigation.<br>CSS variable: --wm-aside-left-nav-item-line-height"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation items.<br>CSS variable: --wm-aside-left-nav-item-border-radius"}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements within navigation items.<br>CSS variable: --wm-aside-left-nav-item-gap"}},"icon":{"size":{"value":"24px","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-size"}},"width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the width of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-width"}},"height":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the height of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-height"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-border-radius"}}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-background"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-color"}}},"indicator":{"color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the color of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-color"}},"width":{"value":"1px","type":"space","attributes":{"subtype":"space","description":"Controls the width of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-width"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the height of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-height"}},"position":{"value":" 0 0 0 auto","type":"space","attributes":{"subtype":"space","description":"Controls the positioning of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-position"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-border-radius"}}}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of navigation item caret icons.<br>CSS variable: --wm-aside-left-nav-item-caret-size"}}}},"submenu":{"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-padding"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-background"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-border-radius"}}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-box-shadow"}},"item":{"color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the text color of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-background"}},"height":{"value":"44px","type":"space","attributes":{"subtype":"space","description":"Controls the height of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-height"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-padding"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family for submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-family"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-weight"}}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Sets the line height for submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-line-height"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-border-radius"}}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements within submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-gap"}}}}},"states":{"hover":{"nav":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}},"focus":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{"full":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"120px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}},"clipped":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"102px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_page-right-nav_page-right-nav_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \**********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"aside-right":{"meta":{"mapping":{"selector":{"web":".app-right-panel"},"states":{"hover":{"selector":{"web":" .app-nav-item:has(:hover)"}},"active":{"selector":{"web":" .app-nav-item:has(:active),.app-right-panel .app-nav-item:has(.active), .app-nav-item.active"}},"focus":{"selector":{"web":" .app-nav-item:has(:focus)"}}}},"appearances":{"full":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-right-panel.app-nav-drawer.app-nav-full)"}},"nav-rail":{"selector":{"web":":has(.app-right-panel.app-nav-rail.app-nav-full)"}}}}},"clipped":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-right-panel.app-nav-drawer.app-nav-clipped)"}},"nav-rail":{"selector":{"web":":has(.app-right-panel.app-nav-rail.app-nav-clipped)"}}}}}}},"mapping":{"nav":{"border":{"color":{"value":"{aside-left.mapping.nav.border.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the right navigation panel border (the vertical sidebar that contains navigation menu items). This determines what color the border line appears in that separates the navigation from the main content.<br>CSS variable: --wm-aside-right-nav-border-color"}},"style":{"value":"{aside-left.mapping.nav.border.style.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of the right navigation panel border. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes the border completely.<br>CSS variable: --wm-aside-right-nav-border-style"}},"radius":{"value":"{aside-left.mapping.nav.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the right navigation panel. This makes the navigation panel corners slightly rounded for a softer appearance, or keeps them square with \'none\'.<br>CSS variable: --wm-aside-right-nav-border-radius"}},"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.0.value} {border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the right navigation panel border. The format is \'top right bottom left\' - this setting creates a left border only to separate the navigation from the main content.<br>CSS variable: --wm-aside-right-nav-border-width"}}},"shadow":{"value":"{aside-left.mapping.nav.shadow.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the right navigation panel (the vertical sidebar that contains navigation menu items). This creates a subtle shadow that makes the navigation appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-aside-right-nav-shadow"}},"letter-spacing":{"value":"{aside-left.mapping.nav.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the right navigation panel text. This can help make the navigation text more readable and properly spaced.<br>CSS variable: --wm-aside-right-nav-letter-spacing"}},"padding":{"value":"{aside-left.mapping.nav.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside the right navigation panel (the space between the navigation content and its borders). This creates breathing room around the navigation menu items.<br>CSS variable: --wm-aside-right-nav-padding"}},"background":{"value":"{aside-left.mapping.nav.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the right navigation panel (the vertical sidebar that contains navigation menu items). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-aside-right-nav-background"}},"color":{"value":"{aside-left.mapping.nav.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the right navigation panel (the vertical sidebar that contains navigation menu items). This determines what color the navigation text appears in.<br>CSS variable: --wm-aside-right-nav-color"}},"gap":{"value":"{aside-left.mapping.nav.gap.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in right navigation panels.<br>CSS variable: --wm-aside-right-nav-gap"}},"item":{"color":{"value":"{aside-left.mapping.nav.item.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-color"}},"background":{"value":"{aside-left.mapping.nav.item.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-background"}},"min":{"height":{"value":"{aside-left.mapping.nav.item.min.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of right navigation items. Acceptable units: px, em, rem.<br>CSS variable: --wm-aside-right-nav-item-min-height"}}},"padding":{"value":"{aside-left.mapping.nav.item.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-padding"}},"font":{"family":{"value":"{aside-left.mapping.nav.item.font.family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-font-family"}},"size":{"value":"{aside-left.mapping.nav.item.font.size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-font-size"}},"weight":{"value":"{aside-left.mapping.nav.item.font.weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of right navigation items. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-aside-right-nav-item-font-weight"}}},"line-height":{"value":"{aside-left.mapping.nav.item.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-line-height"}},"border":{"radius":{"value":"{aside-left.mapping.nav.item.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-border-radius"}}},"gap":{"value":"{aside-left.mapping.nav.item.gap.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-gap"}},"icon":{"size":{"value":"{aside-left.mapping.nav.item.icon.size.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-size"}},"width":{"value":"{aside-left.mapping.nav.item.icon.width.value}","type":"space","description":"Controls the width of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-width"},"height":{"value":"{aside-left.mapping.nav.item.icon.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-height"}},"border":{"radius":{"value":"{aside-left.mapping.nav.item.icon.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-border-radius"}}},"background":{"value":"{aside-left.mapping.nav.item.icon.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-background"}},"color":{"value":"{aside-left.mapping.nav.item.icon.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-color"}}},"indicator":{"color":{"value":"{aside-left.mapping.nav.item.indicator.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-color"}},"width":{"value":"{aside-left.mapping.nav.item.indicator.width.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-width"}},"height":{"value":"{aside-left.mapping.nav.item.indicator.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-height"}},"position":{"value":" auto 0 0 0","type":"space","attributes":{"subtype":"space","description":"Controls the position of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-position"}},"border":{"radius":{"value":"{aside-left.mapping.nav.item.indicator.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-radius"}}}},"caret":{"size":{"value":"{aside-left.mapping.nav.item.caret.size.value}","type":"space","attributes":{"subtype":"space","description":"Controls the size of caret icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-caret-size"}}}},"submenu":{"padding":{"value":"{aside-left.mapping.nav.submenu.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-padding"}},"background":{"value":"{aside-left.mapping.nav.submenu.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-background"}},"border":{"radius":{"value":"{aside-left.mapping.nav.submenu.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-border-radius"}}},"box-shadow":{"value":"{aside-left.mapping.nav.submenu.box-shadow.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-box-shadow"}},"item":{"color":{"value":"{aside-left.mapping.nav.submenu.item.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-color"}},"background":{"value":"{aside-left.mapping.nav.submenu.item.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-background"}},"height":{"value":"{aside-left.mapping.nav.submenu.item.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-height"}},"padding":{"value":"{aside-left.mapping.nav.submenu.item.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-padding"}},"font":{"size":{"value":"{aside-left.mapping.nav.submenu.item.font.size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-font-size"}},"family":{"value":"{aside-left.mapping.nav.submenu.item.font.family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-font-family"}},"weight":{"value":"{aside-left.mapping.nav.submenu.item.font.weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of right navigation submenu items. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-aside-right-nav-submenu-item-font-weight"}}},"line-height":{"value":"{aside-left.mapping.nav.submenu.item.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-line-height"}},"border":{"radius":{"value":"{aside-left.mapping.nav.submenu.item.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-border-radius"}}},"gap":{"value":"{aside-left.mapping.nav.submenu.item.gap.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-gap"}}}}},"states":{"hover":{"nav":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}},"focus":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{"full":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"102px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}},"clipped":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"102px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"aside-right":{"meta":{"mapping":{"selector":{"web":".app-right-panel"},"states":{"hover":{"selector":{"web":" .app-nav-item:has(:hover)"}},"active":{"selector":{"web":" .app-nav-item:has(:active),.app-right-panel .app-nav-item:has(.active), .app-nav-item.active"}},"focus":{"selector":{"web":" .app-nav-item:has(:focus)"}}}},"appearances":{"full":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-right-panel.app-nav-drawer)"}},"nav-rail":{"selector":{"web":":has(.app-right-panel.app-nav-rail)"}}}}},"clipped":{"mapping":{"selector":{"web":".wm-app"}},"variantGroups":{"status":{"nav-drawer":{"selector":{"web":":has(.app-right-panel.app-nav-drawer)"}},"nav-rail":{"selector":{"web":":has(.app-right-panel.app-nav-rail)"}}}}}}},"mapping":{"nav":{"border":{"color":{"value":"{aside-left.mapping.nav.border.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the right navigation panel border (the vertical sidebar that contains navigation menu items). This determines what color the border line appears in that separates the navigation from the main content.<br>CSS variable: --wm-aside-right-nav-border-color"}},"style":{"value":"{aside-left.mapping.nav.border.style.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of the right navigation panel border. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes the border completely.<br>CSS variable: --wm-aside-right-nav-border-style"}},"radius":{"value":"{aside-left.mapping.nav.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the right navigation panel. This makes the navigation panel corners slightly rounded for a softer appearance, or keeps them square with \'none\'.<br>CSS variable: --wm-aside-right-nav-border-radius"}},"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.0.value} {border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the right navigation panel border. The format is \'top right bottom left\' - this setting creates a left border only to separate the navigation from the main content.<br>CSS variable: --wm-aside-right-nav-border-width"}}},"shadow":{"value":"{aside-left.mapping.nav.shadow.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the right navigation panel (the vertical sidebar that contains navigation menu items). This creates a subtle shadow that makes the navigation appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-aside-right-nav-shadow"}},"letter-spacing":{"value":"{aside-left.mapping.nav.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the right navigation panel text. This can help make the navigation text more readable and properly spaced.<br>CSS variable: --wm-aside-right-nav-letter-spacing"}},"padding":{"value":"{aside-left.mapping.nav.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside the right navigation panel (the space between the navigation content and its borders). This creates breathing room around the navigation menu items.<br>CSS variable: --wm-aside-right-nav-padding"}},"background":{"value":"{aside-left.mapping.nav.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the right navigation panel (the vertical sidebar that contains navigation menu items). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-aside-right-nav-background"}},"color":{"value":"{aside-left.mapping.nav.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the right navigation panel (the vertical sidebar that contains navigation menu items). This determines what color the navigation text appears in.<br>CSS variable: --wm-aside-right-nav-color"}},"gap":{"value":"{aside-left.mapping.nav.gap.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in right navigation panels.<br>CSS variable: --wm-aside-right-nav-gap"}},"item":{"color":{"value":"{aside-left.mapping.nav.item.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-color"}},"background":{"value":"{aside-left.mapping.nav.item.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-background"}},"min":{"height":{"value":"{aside-left.mapping.nav.item.min.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of right navigation items. Acceptable units: px, em, rem.<br>CSS variable: --wm-aside-right-nav-item-min-height"}}},"padding":{"value":"{aside-left.mapping.nav.item.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-padding"}},"font":{"family":{"value":"{aside-left.mapping.nav.item.font.family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-font-family"}},"size":{"value":"{aside-left.mapping.nav.item.font.size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-font-size"}},"weight":{"value":"{aside-left.mapping.nav.item.font.weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of right navigation items. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-aside-right-nav-item-font-weight"}}},"line-height":{"value":"{aside-left.mapping.nav.item.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-line-height"}},"border":{"radius":{"value":"{aside-left.mapping.nav.item.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of right navigation items.<br>CSS variable: --wm-aside-right-nav-item-border-radius"}}},"gap":{"value":"{aside-left.mapping.nav.item.gap.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-gap"}},"icon":{"size":{"value":"{aside-left.mapping.nav.item.icon.size.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-size"}},"width":{"value":"{aside-left.mapping.nav.item.icon.width.value}","type":"space","description":"Controls the width of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-width"},"height":{"value":"{aside-left.mapping.nav.item.icon.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-height"}},"border":{"radius":{"value":"{aside-left.mapping.nav.item.icon.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-border-radius"}}},"background":{"value":"{aside-left.mapping.nav.item.icon.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-background"}},"color":{"value":"{aside-left.mapping.nav.item.icon.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-icon-color"}}},"indicator":{"color":{"value":"{aside-left.mapping.nav.item.indicator.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-color"}},"width":{"value":"{aside-left.mapping.nav.item.indicator.width.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-width"}},"height":{"value":"{aside-left.mapping.nav.item.indicator.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-height"}},"position":{"value":" auto 0 0 0","type":"space","attributes":{"subtype":"space","description":"Controls the position of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-position"}},"border":{"radius":{"value":"{aside-left.mapping.nav.item.indicator.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of indicators in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-indicator-radius"}}}},"caret":{"size":{"value":"{aside-left.mapping.nav.item.caret.size.value}","type":"space","attributes":{"subtype":"space","description":"Controls the size of caret icons in right navigation items.<br>CSS variable: --wm-aside-right-nav-item-caret-size"}}}},"submenu":{"padding":{"value":"{aside-left.mapping.nav.submenu.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-padding"}},"background":{"value":"{aside-left.mapping.nav.submenu.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-background"}},"border":{"radius":{"value":"{aside-left.mapping.nav.submenu.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-border-radius"}}},"box-shadow":{"value":"{aside-left.mapping.nav.submenu.box-shadow.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow of right navigation submenus.<br>CSS variable: --wm-aside-right-nav-submenu-box-shadow"}},"item":{"color":{"value":"{aside-left.mapping.nav.submenu.item.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-color"}},"background":{"value":"{aside-left.mapping.nav.submenu.item.background.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-background"}},"height":{"value":"{aside-left.mapping.nav.submenu.item.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-height"}},"padding":{"value":"{aside-left.mapping.nav.submenu.item.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-padding"}},"font":{"size":{"value":"{aside-left.mapping.nav.submenu.item.font.size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-font-size"}},"family":{"value":"{aside-left.mapping.nav.submenu.item.font.family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-font-family"}},"weight":{"value":"{aside-left.mapping.nav.submenu.item.font.weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of right navigation submenu items. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-aside-right-nav-submenu-item-font-weight"}}},"line-height":{"value":"{aside-left.mapping.nav.submenu.item.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-line-height"}},"border":{"radius":{"value":"{aside-left.mapping.nav.submenu.item.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-border-radius"}}},"gap":{"value":"{aside-left.mapping.nav.submenu.item.gap.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in right navigation submenu items.<br>CSS variable: --wm-aside-right-nav-submenu-item-gap"}}}}},"states":{"hover":{"nav":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}},"focus":{"nav":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"indicator":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"none","type":"radius","attributes":{"subtype":"radius"}},"style":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}},"anchor":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"submenu":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{"full":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"102px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}},"clipped":{"mapping":{},"variantGroups":{"status":{"nav-drawer":{"nav":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space"}}}},"nav-rail":{"nav":{"width":{"value":"102px","type":"space","attributes":{"subtype":"space"}},"submenu":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"item":{"anchor-display":{"value":"block","type":"font","attributes":{"subtype":"font-family"}}}}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_popover_popover_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"popover":{"mapping":{"min-width":{"value":"50px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always wide enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-width"}},"min-height":{"value":"50px","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"}},"z-index":{"value":"1060","type":"radius","attributes":{"subtype":"radius","description":"Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it\'s visible on top of all other content.<br>CSS variable: --wm-popover-z-index"}},"gap":{"value":"~\\"calc({space.1.value} * 2.5)\\"","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap"}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding"}},"background":{"value":"{color.surface.container.@.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":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color"}},"shadow":{"value":"{elevation.shadow.1.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.sm.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"}},"header":{"padding":{"value":"{space.4.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"}},"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":"{h4.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":"{h4.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":"{h4.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":"{h4.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":"{h4.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"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover body content appears (the main content area of popover windows). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-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 body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-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 body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing"}}},"arrow":{"background":{"value":"{color.surface.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background"}},"size":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"popover":{"mapping":{"z-index":{"value":"1060","type":"radius","attributes":{"subtype":"radius","description":"Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it\'s visible on top of all other content.<br>CSS variable: --wm-popover-z-index"}},"gap":{"value":"~\\"calc({space.1.value} * 2.5)\\"","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap"}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding"}},"background":{"value":"{color.surface.container.@.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":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color"}},"shadow":{"value":"{elevation.shadow.1.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.sm.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":{"color":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-popover-border-color"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness.<br>CSS variable: --wm-popover-border-width"}},"style":{"value":"none","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-popover-border-style"}}},"header":{"padding":{"value":"{space.4.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"}},"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":"{h4.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":"{h4.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":"{h4.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":"{h4.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":"{h4.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"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover body content appears (the main content area of popover windows). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-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 body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-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 body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing"}}},"arrow":{"background":{"value":"{color.surface.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background"}},"size":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size"}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_progress-circle_progress-circle_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \************************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"progress-circle":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".app-progress.circle"}},"variantGroups":{"status":{"default":{"selector":{"web":".progress-circle-default"}},"success":{"selector":{"web":".progress-circle-success"}},"info":{"selector":{"web":".progress-circle-info"}},"warning":{"selector":{"web":".progress-circle-warning"}},"danger":{"selector":{"web":".progress-circle-danger"}}}}}}},"mapping":{"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active"}}},"label":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color"}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"success":{"stroke":{"inactive":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}},"info":{"stroke":{"inactive":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"warning":{"stroke":{"inactive":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}}},"danger":{"stroke":{"inactive":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"progress-circle":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".app-progress.circle"}},"variantGroups":{"status":{"default":{"selector":{"web":".progress-circle-default"}},"success":{"selector":{"web":".progress-circle-success"}},"info":{"selector":{"web":".progress-circle-info"}},"warning":{"selector":{"web":".progress-circle-warning"}},"danger":{"selector":{"web":".progress-circle-danger"}}}}}}},"mapping":{"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active"}}},"label":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the label text appears.<br>CSS variable: --wm-progress-circle-label-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-label-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the label text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-progress-circle-label-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when label text wraps to multiple lines.<br>CSS variable: --wm-progress-circle-label-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 label text.<br>CSS variable: --wm-progress-circle-label-letter-spacing"}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"success":{"stroke":{"inactive":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}},"info":{"stroke":{"inactive":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"warning":{"stroke":{"inactive":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}}},"danger":{"stroke":{"inactive":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}},"active":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_rating_rating_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \******************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"rating":{"meta":{"mapping":{"selector":{"web":".app-ratings .ratings-wrapper .rating-style"},"states":{"active":{"selector":{"web":" label:hover, label:hover ~ label,  label.active"}},"disabled":{"selector":{"web":".disabled"}}}}},"mapping":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-gap"}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor style when hovering over rating components. \'pointer\' shows a hand cursor indicating the rating is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled ratings.<br>CSS variable: --wm-rating-cursor"}},"icon":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between individual rating icons (the stars in a star rating system). This creates visual separation between each star so users can easily distinguish between them.<br>CSS variable: --wm-rating-icon-gap"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of rating icons (the stars in a star rating system). Lower values make the stars more transparent, higher values make them more opaque.<br>CSS variable: --wm-rating-icon-opacity"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"}}},"states":{"active":{"icon":{"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of active rating icons (the stars that are selected or hovered over). When set to 1, the stars are fully opaque and clearly visible.<br>CSS variable: --wm-rating-active-icon-opacity"}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-active-icon-color"}}}},"disabled":{"cursor":{"value":"default","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor style for disabled rating components. \'default\' shows an arrow cursor indicating the rating cannot be clicked, \'not-allowed\' shows a blocked cursor.<br>CSS variable: --wm-rating-disabled-cursor"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled rating components. When set to 1, the rating appears fully opaque but non-interactive.<br>CSS variable: --wm-rating-disabled-opacity"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"rating":{"meta":{"mapping":{"selector":{"web":".app-ratings"},"states":{"active":{"selector":{"web":" label:hover, label:hover ~ label, label.active"}},"disabled":{"selector":{"web":".disabled"}}}}},"mapping":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-gap"}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor style when hovering over rating components. \'pointer\' shows a hand cursor indicating the rating is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled ratings.<br>CSS variable: --wm-rating-cursor"}},"icon":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between individual rating icons (the stars in a star rating system). This creates visual separation between each star so users can easily distinguish between them.<br>CSS variable: --wm-rating-icon-gap"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of rating icons (the stars in a star rating system). Lower values make the stars more transparent, higher values make them more opaque.<br>CSS variable: --wm-rating-icon-opacity"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"}}},"states":{"active":{"icon":{"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of active rating icons (the stars that are selected or hovered over). When set to 1, the stars are fully opaque and clearly visible.<br>CSS variable: --wm-rating-active-icon-opacity"}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-active-icon-color"}}}},"disabled":{"cursor":{"value":"default","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor style for disabled rating components. \'default\' shows an arrow cursor indicating the rating cannot be clicked, \'not-allowed\' shows a blocked cursor.<br>CSS variable: --wm-rating-disabled-cursor"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled rating components. When set to 1, the rating appears fully opaque but non-interactive.<br>CSS variable: --wm-rating-disabled-opacity"}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_slider_slider_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_slider_slider_json"],{
+
+/***/ "./src/tokens/web/components/slider/slider.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/slider/slider.json ***!
+  \******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"slider":{"meta":{"mapping":{"selector":{"web":".app-slider"}},"appearances":{}},"mapping":{"height":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"}},"border-radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"}},"track":{"filled":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider filled tracks (the portion of the track from the start to the current value). This determines what color the filled track appears in.<br>CSS variable: --wm-slider-track-filled-background"}}},"unfilled":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider unfilled tracks (the portion of the track from the current value to the end). This determines what color the unfilled track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-track-unfilled-background"}}}},"handle":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider handle (the draggable handle that users interact with to set values). This determines what color the handle appears in.<br>CSS variable: --wm-slider-handle-background"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider handles. This determines the vertical size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-height"}},"width":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of slider handles. This determines the horizontal size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-width"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider handles. This determines how rounded the corners of the handle appear. Acceptable units: px.<br>CSS variable: --wm-slider-handle-border-radius"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"description":"Controls the visual spacing between slider handles and the filled/unfilled track segments. Acceptable units: px.<br>CSS variable: --wm-slider-handle-gap"}}},"range":{"label":{"color":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-slider-range-label-color"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-slider-range-label-padding"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-slider-range-label-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold label text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-slider-range-label-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-slider-range-label-font-family"}},"background-color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of labels (the area behind the label text). When set to \'none\', labels have no background color, making them transparent.<br>CSS variable: --wm-slider-range-label-background-color"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"description":"Controls the visual spacing between slider and the label segments. Acceptable units: px.<br>CSS variable: --wm-slider-range-label-gap"}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_switch_switch_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \******************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"web":".app-switch"},"states":{"selected":{"selector":{"web":" > .btn-group > .btn.selected"}},"hover":{"selector":{"web":" > .btn-group > .btn:hover"}},"focus":{"selector":{"web":" > .btn-group > .btn:focus"}},"active":{"selector":{"web":" > .btn-group > .btn::active"}}}}},"mapping":{"btn":{"height":{"@":{"value":"40px","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-btn-height"}}},"padding":{"value":"{space.1.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.<br>CSS variable: --wm-switch-btn-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","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-btn-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around switch buttons. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-switch-btn-border-style"}},"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-btn-border-color"}}}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to \'pill\', the buttons appear with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-switch-btn-radius"}},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large icons appear in switch buttons (symbols that represent different switch options). This affects the size of any icons used within the switch buttons.<br>CSS variable: --wm-switch-btn-icon-size"}}},"background":{"@":{"value":"none","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-btn-background"}}},"color":{"@":{"value":"{color.on-surface.@.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-btn-color"}}},"text-decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls the text decoration of switch buttons. \'none\' removes any decorative lines, \'underline\' adds a line under the text, \'overline\' adds a line above the text, \'line-through\' adds a line through the middle of the text.<br>CSS variable: --wm-switch-btn-text-decoration"}},"state":{"layer":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions.<br>CSS variable: --wm-switch-btn-state-layer-color"}}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius","description":"Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-switch-btn-state-layer-opacity"}}}}},"states":{"hover":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"selected":{"btn":{"background":{"@":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"color":{"@":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"color":{"@":{"value":"{color.outline.@.value}","type":"color"}}},"state":{"layer":{"color":{"@":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"web":".app-switch"},"states":{"selected":{"selector":{"web":" > .btn-group > .btn.selected"}},"hover":{"selector":{"web":" > .btn-group > .btn:hover"}},"focus":{"selector":{"web":" > .btn-group > .btn:focus"}},"active":{"selector":{"web":" > .btn-group > .btn:active"}}}}},"mapping":{"btn":{"height":{"@":{"value":"40px","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-btn-height"}}},"padding":{"value":"{space.1.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.<br>CSS variable: --wm-switch-btn-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","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-btn-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around switch buttons. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-switch-btn-border-style"}},"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-btn-border-color"}}}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to \'pill\', the buttons appear with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-switch-btn-radius"}},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large icons appear in switch buttons (symbols that represent different switch options). This affects the size of any icons used within the switch buttons.<br>CSS variable: --wm-switch-btn-icon-size"}}},"background":{"@":{"value":"none","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-btn-background"}}},"color":{"@":{"value":"{color.on-surface.@.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-btn-color"}}},"text-decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls the text decoration of switch buttons. \'none\' removes any decorative lines, \'underline\' adds a line under the text, \'overline\' adds a line above the text, \'line-through\' adds a line through the middle of the text.<br>CSS variable: --wm-switch-btn-text-decoration"}},"state":{"layer":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions.<br>CSS variable: --wm-switch-btn-state-layer-color"}}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius","description":"Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-switch-btn-state-layer-opacity"}}}}},"states":{"hover":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"selected":{"btn":{"background":{"@":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"color":{"@":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"color":{"@":{"value":"{color.outline.@.value}","type":"color"}}},"state":{"layer":{"color":{"@":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}}');
 
 /***/ }