@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/cjs/src_tokens_web_components_page-header_page-header_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_page-header_page-header_json"],{
+
+/***/ "./src/tokens/web/components/page-header/page-header.json"
+/*!****************************************************************!*\
+  !*** ./src/tokens/web/components/page-header/page-header.json ***!
+  \****************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"header":{"meta":{},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of page headers (the top sections of web pages that contain logos, navigation, and search). This is the main background color that appears behind the header content.<br>CSS variable: --wm-header-background"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of page headers (the top sections of web pages that contain logos, navigation, and search). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-header-color"}},"height":{"value":"82px","type":"space","attributes":{"subtype":"space","description":"Controls how tall page headers appear (the top sections of web pages that contain logos, navigation, and search). This determines the vertical size of the header area.<br>CSS variable: --wm-header-height"}},"z-index":{"value":"2","type":"radius","attributes":{"subtype":"elevation","description":"Controls the stacking order of page headers (the top sections of web pages that contain logos, navigation, and search). Higher values make the header appear above other elements, ensuring it\'s visible on top of all other content.<br>CSS variable: --wm-header-z-index"}},"padding":{"value":"{space.2.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside page headers (the top sections of web pages that contain logos, navigation, and search). This creates breathing room around the header content.<br>CSS variable: --wm-header-padding"}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of page headers (the top sections of web pages that contain logos, navigation, and search). This creates the outline that defines the header boundaries.<br>CSS variable: --wm-header-border-color"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of page headers (the top sections of web pages that contain logos, navigation, and search). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-header-border-style"}},"width":{"value":"0px 0px 1px 0px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border width of page headers (the top sections of web pages that contain logos, navigation, and search). This determines how thick the header border appears.<br>CSS variable: --wm-header-border-width"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of page headers (the top sections of web pages that contain logos, navigation, and search). This makes the header appear with rounded corners for a softer appearance.<br>CSS variable: --wm-header-border-radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around page headers (the top sections of web pages that contain logos, navigation, and search). This creates a subtle shadow that makes the header appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-header-shadow"}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_page-left-nav_page-left-nav_json"],{
+
+/***/ "./src/tokens/web/components/page-left-nav/page-left-nav.json"
+/*!********************************************************************!*\
+  !*** ./src/tokens/web/components/page-left-nav/page-left-nav.json ***!
+  \********************************************************************/
+(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-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":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the left navigation panel (the vertical sidebar that contains navigation menu items). This determines how wide the navigation area appears on the left side of the screen.<br>CSS variable: --wm-aside-left-width"}},"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.transparent.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.transparent.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.transparent.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.transparent.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":"{color.transparent.value}","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.transparent.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color"}}}}}},"focus":{"nav":{"item":{"background":{"value":"{color.transparent.value}","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.transparent.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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_page-right-nav_page-right-nav_json"],{
+
+/***/ "./src/tokens/web/components/page-right-nav/page-right-nav.json"
+/*!**********************************************************************!*\
+  !*** ./src/tokens/web/components/page-right-nav/page-right-nav.json ***!
+  \**********************************************************************/
+(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)"}},"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_page-top-nav_page-top-nav_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_page-top-nav_page-top-nav_json"],{
+
+/***/ "./src/tokens/web/components/page-top-nav/page-top-nav.json"
+/*!******************************************************************!*\
+  !*** ./src/tokens/web/components/page-top-nav/page-top-nav.json ***!
+  \******************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"top":{"meta":{"mapping":{"selector":{"web":".app-nav"}}},"mapping":{"height":{"value":"62px","type":"space","attributes":{"subtype":"space","description":"Controls the overall height of the top navigation bar (the horizontal header at the top of the page). Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-top-height"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the top navigation bar (the horizontal header at the top of the page).<br>CSS variable: --wm-top-background"}},"box":{"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow of the top navigation bar to create depth and separation from page content. Use subtle shadows for a refined look.<br>CSS variable: --wm-top-box-shadow"}}},"z":{"index":{"value":"3","type":"radius","attributes":{"subtype":"elevation","description":"Controls the stacking order (z-index) of the top navigation bar relative to other elements. Higher values keep the bar above overlapping content.<br>CSS variable: --wm-top-z-index"}}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the top navigation bar. Commonly used for a bottom divider line.<br>CSS variable: --wm-top-border-color"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the top navigation bar. Allowed values: solid, dashed, dotted, none.<br>CSS variable: --wm-top-border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls corner rounding of the top navigation bar. Use higher values for rounded corners.<br>CSS variable: --wm-top-border-radius"}},"width":{"value":"0px 0px 1px 0px","type":"radius","attributes":{"subtype":"space","description":"Controls the border thickness of the top navigation bar in the order: top right bottom left. The default adds only a bottom divider line.<br>CSS variable: --wm-top-border-width"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_pagination_pagination_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_pagination_pagination_json"],{
+
+/***/ "./src/tokens/web/components/pagination/pagination.json"
+/*!**************************************************************!*\
+  !*** ./src/tokens/web/components/pagination/pagination.json ***!
+  \**************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"pagination":{"meta":{"mapping":{"selector":{"web":".app-datanavigator"},"states":{"active":{"selector":{"web":" .pagination li.active a, .pager li a:active::before"}},"hover":{"selector":{"web":" .pagination li a:hover, .pager li a:hover::before"}},"focus":{"selector":{"web":" .pagination li a:focus, .pager li a:focus::before"}},"disabled":{"selector":{"web":" .pagination .disabled a, .pager .previous.disabled a, .pager .next.disabled a"}}}},"appearances":{"basic":{"mapping":{"selector":{"web":".app-datanavigator .pagination.basic"}}},"pager":{"mapping":{"selector":{"web":".app-datanavigator .pager"}}},"advanced":{"mapping":{"selector":{"web":".app-datanavigator .pagination.advanced"}}}}},"mapping":{"flex-direction":{"value":"row","type":"space","attributes":{"subtype":"space","description":"Controls the layout direction of pagination components (navigation controls that help users move between pages of content). \'row\' arranges pagination items horizontally, \'column\' arranges them vertically, \'row-reverse\' reverses the horizontal order, and \'column-reverse\' reverses the vertical order.<br>CSS variable: --wm-pagination-flex-direction"}},"width":{"value":"unset","type":"space","attributes":{"subtype":"space","description":"Controls how wide pagination components appear (navigation controls that help users move between pages of content). \'unset\' lets the pagination size itself based on its content, while specific values (px, %, em, rem, vw) set a fixed width.<br>CSS variable: --wm-pagination-width"}},"item":{"padding":{"value":"{space.1.value} {space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside pagination items (individual page numbers and navigation buttons). This creates breathing room around each pagination element.<br>CSS variable: --wm-pagination-item-padding"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between pagination items (individual page numbers and navigation buttons). This creates visual separation between each pagination element.<br>CSS variable: --wm-pagination-item-gap"}}},"page-link":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of pagination page links (clickable page numbers and navigation buttons). This determines what color the page link text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-pagination-page-link-color"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how tall pagination page links appear (clickable page numbers and navigation buttons). This determines the vertical size of each page link button.<br>CSS variable: --wm-pagination-page-link-height"}},"width":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how wide pagination page links appear (clickable page numbers and navigation buttons). This determines the horizontal size of each page link button.<br>CSS variable: --wm-pagination-page-link-width"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside pagination page links (clickable page numbers and navigation buttons). This creates breathing room around the page link content.<br>CSS variable: --wm-pagination-page-link-padding"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of pagination page links (clickable page numbers and navigation buttons). This makes the page links appear with rounded corners for a softer appearance.<br>CSS variable: --wm-pagination-page-link-radius"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of pagination page links (clickable page numbers and navigation buttons). When set to 1, the page links are fully opaque. Lower values make the page links more transparent, higher values make them more opaque.<br>CSS variable: --wm-pagination-page-link-opacity"}},"pointer-events":{"value":"all","type":"space","attributes":{"subtype":"cursor","description":"Controls whether pagination page links can receive mouse/touch interactions. \'all\' makes page links fully interactive (clickable, hoverable), \'none\' makes them ignore all mouse/touch events (like they\'re invisible to the mouse), and \'auto\' lets the browser decide. This is useful for enabling/disabling pagination functionality.<br>CSS variable: --wm-pagination-page-link-pointer-events"}},"cursor":{"value":"pointer","type":"space","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over pagination page links. \'pointer\' shows a hand cursor indicating the link is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled links. This provides visual feedback to users about link interactivity.<br>CSS variable: --wm-pagination-page-link-cursor"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of pagination page links (clickable page numbers and navigation buttons). This is the main background color that appears behind the page link content.<br>CSS variable: --wm-pagination-page-link-background"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within pagination page links (like the space between text and icons). This creates visual separation between different parts of each page link.<br>CSS variable: --wm-pagination-page-link-gap"}},"icon-size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large icons appear in pagination page links (clickable page numbers and navigation buttons). This affects the size of any icons that appear within the page links.<br>CSS variable: --wm-pagination-page-link-icon-size"}},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the pagination page links appear (clickable page numbers and navigation buttons). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-pagination-page-link-font-weight"}}},"nav-indicator":{"previous":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the \'Previous\' navigation button in pagination components (the button that takes users to the previous page). This determines what color the \'Previous\' button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-pagination-nav-indicator-previous-color"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the \'Previous\' navigation button in pagination components (the button that takes users to the previous page). This is the main background color that appears behind the \'Previous\' button content.<br>CSS variable: --wm-pagination-nav-indicator-previous-background"}}},"next":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the \'Next\' navigation button in pagination components (the button that takes users to the next page). This is the main background color that appears behind the \'Next\' button content.<br>CSS variable: --wm-pagination-nav-indicator-next-background"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the \'Next\' navigation button in pagination components (the button that takes users to the next page). This determines what color the \'Next\' button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-pagination-nav-indicator-next-color"}}}},"pagecount":{"input":{"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how tall pagination page count input fields appear (text boxes where users can type a specific page number to jump to). This determines the vertical size of the page number input field. Acceptable units: px, em, rem.<br>CSS variable: --wm-pagination-pagecount-input-height"}},"width":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how wide pagination page count input fields appear (text boxes where users can type a specific page number to jump to). This determines the horizontal size of the page number input field. Acceptable units: px, em, rem.<br>CSS variable: --wm-pagination-pagecount-input-width"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside pagination page count input fields (text boxes where users can type a specific page number to jump to). This creates breathing room around the text that users type in the input field.<br>CSS variable: --wm-pagination-pagecount-input-padding"}}}},"horizontal":{"page":{"slider":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside horizontal page sliders (navigation controls that allow users to scroll through pages horizontally). This creates breathing room around the slider content.<br>CSS variable: --wm-horizontal-page-slider-padding"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements in horizontal page sliders (navigation controls that allow users to scroll through pages horizontally). This creates visual separation between different parts of the slider.<br>CSS variable: --wm-horizontal-page-slider-gap"}},"anchor":{"width":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how wide horizontal page slider anchors appear (clickable elements that users can click to navigate to specific pages). This determines the horizontal size of the slider anchor buttons. Acceptable units: px, em, rem.<br>CSS variable: --wm-horizontal-page-slider-anchor-width"}},"icon-size":{"value":"{icon.size.sm.value}","type":"icon-size","attributes":{"description":"Controls how large icons appear in horizontal page slider anchors (clickable elements that users can click to navigate to specific pages). This affects the size of any navigation icons that appear within the slider anchors.<br>CSS variable: --wm-horizontal-page-slider-anchor-icon-size"}}}}}},"states":{"active":{"page-link":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"hover":{"page-link":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"focus":{"page-link":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}},"disabled":{"page-link":{"opacity":{"value":".38","type":"radius","attributes":{"subtype":"opacity"}},"pointer-events":{"value":"none","type":"space","attributes":{"subtype":"cursor","description":"Disables mouse/touch interactions for disabled pagination page links. When set to \'none\', disabled page links ignore all mouse/touch events, making them completely non-interactive. This prevents users from clicking or hovering over disabled pagination elements.<br>CSS variable: --wm-pagination-page-link-pointer-events (disabled state)"}},"cursor":{"value":"not-allowed","type":"space","attributes":{"subtype":"cursor","description":"Sets the mouse cursor to \'not-allowed\' (blocked cursor) when hovering over disabled pagination page links. This provides immediate visual feedback that the pagination element cannot be clicked.<br>CSS variable: --wm-pagination-page-link-cursor (disabled state)"}}}}}},"appearances":{"basic":{"mapping":{"item":{"padding":{"value":"unset","type":"space","attributes":{"subtype":"space"}}}}},"pager":{"mapping":{"page-link":{"elevation":{"value":"0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)","type":"radius","attributes":{"subtype":"elevation"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}}},"min":{"width":{"value":"auto","type":"space","attributes":{"subtype":"space"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space"}}}}}},"advanced":{"mapping":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space"}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_panel_panel_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_panel_panel_json"],{
+
+/***/ "./src/tokens/web/components/panel/panel.json"
+/*!****************************************************!*\
+  !*** ./src/tokens/web/components/panel/panel.json ***!
+  \****************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"panel":{"meta":{"mapping":{"selector":{"web":".app-panel"}},"appearances":{"default":{"mapping":{"selector":{"web":".panel"}},"variantGroups":{"status":{"default":{"selector":{"web":".panel-default"}},"primary":{"selector":{"web":".panel-primary"}},"secondary":{"selector":{"web":".panel-secondary"}},"tertiary":{"selector":{"web":".panel-tertiary"}}}}}}},"mapping":{"background":{"@":{"value":"{color.surface.@.value}","type":"color","attributes":{"description":"Sets the background color of panels (containers that group related content together with headers, content areas, and footers). This is the main background color that appears behind the panel content.<br>CSS variable: --wm-panel-background"}}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"description":"Controls the corner rounding of panels (containers that group related content together with headers, content areas, and footers). This makes the panel appear with rounded corners for a softer appearance.<br>CSS variable: --wm-panel-border-radius"}},"width":{},"color":{}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"description":"Controls the drop shadow effect around panels (containers that group related content together with headers, content areas, and footers). This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-panel-shadow"}},"heading":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"description":"Controls the spacing between heading elements in panels (like the space between the title and action buttons). This creates visual separation between different parts of the panel header.<br>CSS variable: --wm-panel-heading-gap"}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"description":"Controls the vertical padding of panel headings (the space above and below the panel header content). This creates breathing room around the panel header text.<br>CSS variable: --wm-panel-heading-padding-block"}},"inline":{"value":"{space.4.value}","type":"space","attributes":{"description":"Controls the horizontal padding of panel headings (the space to the left and right of the panel header content). This creates breathing room around the panel header text.<br>CSS variable: --wm-panel-heading-padding-inline"}}},"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel headings (the main title text in panel headers). This determines whether the heading text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-heading-font-family"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the panel headings appear (the main title text in panel headers). This affects the size of the heading text that users see in the panel header.<br>CSS variable: --wm-panel-heading-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the panel headings appear (the main title text in panel headers). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-heading-font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel headings wrap to multiple lines. This ensures proper spacing for the heading text displayed in the panel header.<br>CSS variable: --wm-panel-heading-line-height"}},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in panel headings. This can help make the heading text more readable and properly spaced.<br>CSS variable: --wm-panel-heading-letter-spacing"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel headings (the main title text in panel headers). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panel headings (the main title section in panel headers). This is the main background color that appears behind the panel heading content.<br>CSS variable: --wm-panel-heading-background"}}},"description":{"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of panel descriptions.<br>CSS variable: --wm-panel-description-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of panel descriptions.<br>CSS variable: --wm-panel-description-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of panel descriptions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-panel-description-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of panel descriptions.<br>CSS variable: --wm-panel-description-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in panel descriptions.<br>CSS variable: --wm-panel-description-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel descriptions.<br>CSS variable: --wm-panel-description-color"}}},"actions":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between panel action elements.<br>CSS variable: --wm-panel-actions-gap"}}},"content":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of panel content.<br>CSS variable: --wm-panel-content-padding"}}},"help":{"message":{"header":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panel help message headers.<br>CSS variable: --wm-panel-help-message-header-background"}}},"border":{"@":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of panel help messages.<br>CSS variable: --wm-panel-help-message-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of panel help messages.<br>CSS variable: --wm-panel-help-message-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of panel help messages. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-panel-help-message-border-style"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of panel help messages.<br>CSS variable: --wm-panel-help-message-padding"}},"background":{"value":"#fffed0","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panel help messages.<br>CSS variable: --wm-panel-help-message-background"}}}},"footer":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of panel footers.<br>CSS variable: --wm-panel-footer-padding"}},"border":{"color":{"value":"{color.outline.variant.value}","type":"space","attributes":{"subtype":"color","description":"Sets the border color of panel footers.<br>CSS variable: --wm-panel-footer-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of panel footers.<br>CSS variable: --wm-panel-footer-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of panel footers. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-panel-footer-border-style"}}}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"heading":{"background":{"value":"{color.surface.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"primary":{"heading":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"secondary":{"heading":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"tertiary":{"heading":{"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_picture_picture_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_picture_picture_json"],{
+
+/***/ "./src/tokens/web/components/picture/picture.json"
+/*!********************************************************!*\
+  !*** ./src/tokens/web/components/picture/picture.json ***!
+  \********************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"picture":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-picture","mobile":".app-picture"}},"variantGroups":{"shape":{"default":{"selector":{"web":" "}},"rounded":{"selector":{"web":".img-rounded","mobile":".img-rounded"}},"circle":{"selector":{"web":".img-circle","mobile":".img-circle"}}}}},"thumbnail":{"mapping":{"selector":{"web":".app-picture.img-thumbnail","mobile":".app-picture.img-thumbnail"}}}}},"mapping":{"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls how wide images appear on the page. \'auto\' lets the image size itself naturally, while specific values (px, %, em, rem, vw) set a fixed width.<br>CSS variable: --wm-picture-width"}},"height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls how tall images appear on the page. \'auto\' lets the image size itself naturally, while specific values (px, %, em, rem, vh) set a fixed height.<br>CSS variable: --wm-picture-height"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of images. When set to \'none\', images have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing around images (the space between the image and its border). This creates breathing room around the image content.<br>CSS variable: --wm-picture-padding"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the outline around images. This creates a colored border around the image to define its boundaries.<br>CSS variable: --wm-picture-border-color"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around images. \'none\' removes the border, \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-picture-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the outline around images. When set to 0, there\'s no visible border. Higher values create thicker borders around the image.<br>CSS variable: --wm-picture-border-width"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of images (the area behind the image). When set to \'transparent\', images have no background color, making them transparent.<br>CSS variable: --wm-picture-background"}}},"appearances":{"default":{"mapping":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}}},"variantGroups":{"shape":{"rounded":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius"}}},"circle":{"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius"}}}}}},"thumbnail":{"mapping":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width"}}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_popover_popover_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_popover_popover_json"],{
+
+/***/ "./src/tokens/web/components/popover/popover.json"
+/*!********************************************************!*\
+  !*** ./src/tokens/web/components/popover/popover.json ***!
+  \********************************************************/
+(module) {
+
+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-bar_progress-bar_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_progress-bar_progress-bar_json"],{
+
+/***/ "./src/tokens/web/components/progress-bar/progress-bar.json"
+/*!******************************************************************!*\
+  !*** ./src/tokens/web/components/progress-bar/progress-bar.json ***!
+  \******************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"progress-bar":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".app-progress"}},"variantGroups":{"status":{"default":{"selector":{"web":".progress-bar-default"}},"success":{"selector":{"web":".progress-bar-success"}},"info":{"selector":{"web":".progress-bar-info"}},"warning":{"selector":{"web":".progress-bar-warning"}},"danger":{"selector":{"web":".progress-bar-danger"}}}}},"striped":{"mapping":{"selector":{"web":".app-progress.progress-bar-striped"}},"variantGroups":{"status":{"default":{"selector":{"web":".progress-bar-default"}},"success":{"selector":{"web":".progress-bar-success"}},"info":{"selector":{"web":".progress-bar-info"}},"warning":{"selector":{"web":".progress-bar-warning"}},"danger":{"selector":{"web":".progress-bar-danger"}}}}}}},"mapping":{"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius"}},"margin":{"value":"{space.2.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the outer spacing around progress bars (the space between the progress bar and surrounding elements). This creates breathing room around the loading indicator.<br>CSS variable: --wm-progress-bar-margin"}},"transition":{"time":{"value":"0.5s","type":"radius","attributes":{"subtype":"space","description":"Controls how long progress bar animations take to complete (the smooth movement of the progress indicator). Shorter values make animations faster, longer values make them slower.<br>CSS variable: --wm-progress-bar-transition-time"}}},"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-stroke-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-stroke-active"}}},"label":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of progress bar labels (the percentage or text that appears on the progress bar). This should contrast well with the progress bar colors for readability.<br>CSS variable: --wm-progress-bar-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.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"success":{"stroke":{"active":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}}}},"info":{"stroke":{"active":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"warning":{"stroke":{"active":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}}}},"danger":{"stroke":{"active":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"striped":{"mapping":{"stripped":{"size":{"value":"{space.10.value} {space.10.value}","type":"space","attributes":{"subtype":"space"}}}},"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.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"success":{"stroke":{"active":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}}}},"info":{"stroke":{"active":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}}},"warning":{"stroke":{"active":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}}}},"danger":{"stroke":{"active":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"inactive":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"label":{"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
+
+/***/ }
+
+}]);

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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_progress-circle_progress-circle_json"],{
+
+/***/ "./src/tokens/web/components/progress-circle/progress-circle.json"
+/*!************************************************************************!*\
+  !*** ./src/tokens/web/components/progress-circle/progress-circle.json ***!
+  \************************************************************************/
+(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"}},"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_radioset_radioset_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_radioset_radioset_json"],{
+
+/***/ "./src/tokens/web/components/radioset/radioset.json"
+/*!**********************************************************!*\
+  !*** ./src/tokens/web/components/radioset/radioset.json ***!
+  \**********************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"radiobutton":{"meta":{"mapping":{"selector":{"web":".app-radioset"},"states":{"hover":{"selector":{"web":" .app-radio:has(label > input[type=\'radio\']:hover)"}},"focus":{"selector":{"web":" .app-radio:has(abel > input[type=\'radio\']:focus)"}},"active":{"selector":{"web":" .app-radio:has(label > input[type=\'radio\']:active)"}},"checked":{"selector":{"web":" .app-radio:has(label > input[type=\'radio\']:checked)"}}}},"appearances":{}},"mapping":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the radio button (the circular input element) and its label text. This creates visual separation so users can easily distinguish between the clickable radio button and its descriptive text.<br>CSS variable: --wm-radiobutton-gap"}},"label":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the radio button label text appears (the descriptive text that appears next to the radio button). This affects the size of the text that explains what the radio option represents.<br>CSS variable: --wm-radiobutton-label-font-size"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for radio button label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-label-font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the radio button 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-radiobutton-label-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when radio button label text wraps to multiple lines. This is important when the label text is long and needs to wrap.<br>CSS variable: --wm-radiobutton-label-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in radio button label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-radiobutton-label-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of radio button labels (the descriptive text that appears next to the radio button). This should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-label-color"}}}},"size":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the width and height of radio buttons (the circular input elements that users click to select options). This determines how large the actual radio button appears visually.<br>CSS variable: --wm-radiobutton-size"}},"indicator":{"size":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the size of the radio button indicator (the small dot that appears inside the radio button when it\'s selected). This dot is typically smaller than the radio button itself to fit nicely inside.<br>CSS variable: --wm-radiobutton-indicator-size"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around radio buttons (the circular input elements). This creates the outline that defines the radio button shape and makes it visible to users.<br>CSS variable: --wm-radiobutton-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around radio buttons (the circular input elements). This determines the color of the outline that defines the radio button shape in its default/unselected state.<br>CSS variable: --wm-radiobutton-border-color"}}},"state":{"layer":{"size":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the size of the invisible clickable area around radio buttons (the state layer). This area is larger than the visible radio button, making it easier for users to click and interact with the radio button.<br>CSS variable: --wm-radiobutton-state-layer-size"}},"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 radio buttons. This creates visual feedback to show that the radio button is interactive and responsive to user actions.<br>CSS variable: --wm-radiobutton-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-radiobutton-state-layer-opacity"}}}},"set":{"item":{"column":{"gap":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing between radio button options when they are arranged in columns (stacked vertically). This creates visual separation between each radio option in a vertical list.<br>CSS variable: --wm-radiobutton-set-item-column-gap"}}},"row":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between radio button options when they are arranged in rows (side by side horizontally). This creates visual separation between each radio option in a horizontal list.<br>CSS variable: --wm-radiobutton-set-item-row-gap"}}}}},"states":{"checked":{"label":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"state":{"layer":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_rating_rating_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_rating_rating_json"],{
+
+/***/ "./src/tokens/web/components/rating/rating.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/rating/rating.json ***!
+  \******************************************************/
+(module) {
+
+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":" .ratings-wrapper .rating-style.disabled, .ratings-wrapper .rating-style.disabled .label"}}}}},"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":{}}}');
+
+/***/ }
+
+}]);