@wavemaker/foundation-css 11.14.2-rc.6311 → 11.14.4-rc.647538

package/cjs/src_tokens_web_components_button_button_json.foundation-css.cjs

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

package/cjs/src_tokens_web_components_calendar_calendar_json.foundation-css.cjs

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

package/cjs/src_tokens_web_components_cards_cards_json.foundation-css.cjs

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

package/cjs/src_tokens_web_components_carousel_carousel_json.foundation-css.cjs

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

package/cjs/src_tokens_web_components_checkbox_checkbox_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_checkbox_checkbox_json"],{
 
-/***/ "./src/tokens/web/components/checkbox/checkbox.json":
+/***/ "./src/tokens/web/components/checkbox/checkbox.json"
 /*!**********************************************************!*\
   !*** ./src/tokens/web/components/checkbox/checkbox.json ***!
   \**********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"checkbox":{"meta":{"mapping":{"selector":{"web":".app-checkbox","mobile":".app-checkbox"},"states":{"hover":{"selector":{"web":":has(label > input[type=\'checkbox\']:hover)","mobile":".app-checkbox:hover"}},"focus":{"selector":{"web":":has(label > input[type=\'checkbox\']:focus)","mobile":"> label > input[type=\'checkbox\']:focus"}},"active":{"selector":{"web":":has(label > input[type=\'checkbox\']:active)","mobile":".app-checkbox:active"}},"checked":{"selector":{"web":":has(label > input[type=\'checkbox\']:checked)","mobile":".app-checkbox:checked"}}}},"appearances":{}},"mapping":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the checkbox box (the square input element) and the label text. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkbox-gap"}},"caption":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox label text (the descriptive text that appears next to the checkbox). This text explains what the checkbox option represents, such as \'I agree to terms\' or \'Subscribe to newsletter\'.<br>CSS variable: --wm-checkbox-caption-font-size"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox label text. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-caption-font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the checkbox label text. Acceptable values: normal, bold, 100-900. This affects how prominent the descriptive text appears next to the checkbox.<br>CSS variable: --wm-checkbox-caption-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text in the checkbox label. This is important when the label text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-checkbox-caption-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the checkbox label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-checkbox-caption-letter-spacing"}}},"size":{"value":"18px","type":"space","attributes":{"subtype":"space","description":"Controls the width and height of the checkbox box (the square input element that users click to check/uncheck). This determines how large the actual checkbox appears visually. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-size"}},"icon":{"size":{"value":"10px","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it\'s checked. This icon is typically smaller than the checkbox box itself to fit nicely inside. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-icon-size"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it\'s checked. This is typically a contrasting color to ensure the checkmark is clearly visible against the checkbox background.<br>CSS variable: --wm-checkbox-icon-color"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the checkbox box (the square input element). When transparent, only the border is visible. When filled with a color, the checkbox appears solid. This affects the visual appearance of the unchecked state.<br>CSS variable: --wm-checkbox-background"}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the checkbox box (the square input element). This creates the outline that defines the checkbox shape and makes it visible to users.<br>CSS variable: --wm-checkbox-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the checkbox box (the square input element). This determines the color of the outline that defines the checkbox shape in its default/unchecked state.<br>CSS variable: --wm-checkbox-border-color"}},"radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the checkbox box (the square input element). Small values create slightly rounded corners, while larger values make the checkbox more rounded or even circular.<br>CSS variable: --wm-checkbox-border-radius"}}},"state":{"layer":{"size":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the size of the invisible clickable area around the checkbox (the state layer). This area is larger than the visible checkbox box, making it easier for users to click and interact with the checkbox. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-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 the checkbox. This creates visual feedback to show that the checkbox is interactive and responsive to user actions.<br>CSS variable: --wm-checkbox-state-layer-color"}},"opacity":{"value":"0","type":"color","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-checkbox-state-layer-opacity"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the checkbox. This creates a subtle visual feedback effect to indicate that the checkbox is interactive and ready to be clicked.<br>CSS variable: --wm-checkbox-state-layer-opacity (hover state)"}}}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when the checkbox receives keyboard focus (when users navigate to it using Tab key). This provides visual feedback for keyboard navigation accessibility.<br>CSS variable: --wm-checkbox-state-layer-opacity (focus state)"}}}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users are actively clicking/pressing the checkbox. This provides immediate visual feedback during the click interaction.<br>CSS variable: --wm-checkbox-state-layer-opacity (active state)"}}}}},"checked":{"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer when the checkbox is checked. This creates a colored background effect to emphasize the selected/checked state of the checkbox.<br>CSS variable: --wm-checkbox-state-layer-color (checked state)"}}}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the checkbox box when it\'s checked. This fills the checkbox with a color to visually indicate that the option has been selected.<br>CSS variable: --wm-checkbox-background (checked state)"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the checkbox box when it\'s checked. This changes the outline color to match the checked state, creating a cohesive visual appearance.<br>CSS variable: --wm-checkbox-border-color (checked state)"}}},"icon":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the checkmark icon (✓) when the checkbox is checked. This ensures the checkmark is clearly visible against the colored background of the checked checkbox.<br>CSS variable: --wm-checkbox-icon-color (checked state)"}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"checkbox":{"meta":{"mapping":{"selector":{"web":".app-checkbox","mobile":".app-checkbox"},"states":{"hover":{"selector":{"web":":has(label > input[type=\'checkbox\']:hover)","mobile":".app-checkbox:hover"}},"focus":{"selector":{"web":":has(label > input[type=\'checkbox\']:focus)","mobile":"> label > input[type=\'checkbox\']:focus"}},"active":{"selector":{"web":":has(label > input[type=\'checkbox\']:active)","mobile":".app-checkbox:active"}},"checked":{"selector":{"web":":has(label > input[type=\'checkbox\']:checked)","mobile":".app-checkbox:checked"}}}},"appearances":{}},"mapping":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space"}},"caption":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}},"size":{"value":"18px","type":"space","attributes":{"subtype":"space"}},"icon":{"size":{"value":"10px","type":"space","attributes":{"subtype":"icon-size"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius"}}},"state":{"layer":{"size":{"value":"40px","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"0","type":"color","attributes":{"subtype":"opacity"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"active":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"checked":{"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"icon":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_checkboxset_checkboxset_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_checkboxset_checkboxset_json"],{
 
-/***/ "./src/tokens/web/components/checkboxset/checkboxset.json":
+/***/ "./src/tokens/web/components/checkboxset/checkboxset.json"
 /*!****************************************************************!*\
   !*** ./src/tokens/web/components/checkboxset/checkboxset.json ***!
   \****************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"checkboxset":{"meta":{},"mapping":{"item":{"gap":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual checkbox options in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This creates visual separation between each checkbox option.<br>CSS variable: --wm-checkboxset-item-gap"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"checkboxset":{"meta":{},"mapping":{"item":{"gap":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space"}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_chips_chips_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_chips_chips_json"],{
 
-/***/ "./src/tokens/web/components/chips/chips.json":
+/***/ "./src/tokens/web/components/chips/chips.json"
 /*!****************************************************!*\
   !*** ./src/tokens/web/components/chips/chips.json ***!
   \****************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"chips":{"meta":{"mapping":{"selector":{"web":".app-chips"},"states":{"hover":{"selector":{"web":".app-chips:has(.app-chip-search .form-control:hover)"}},"focus":{"selector":{"web":".app-chips:has(.app-chips .app-chip-search .form-control:focus)"}},"error":{"selector":{"web":".app-chips:has(.app-chip-search .form-control.ng-touched.ng-invalid)"}},"error-focus":{"selector":{"web":".app-chips:has(.app-chip-search .form-control.ng-touched.ng-invalid:focus)"}},"disabled":{"selector":{"web":".app-chips[disabled=\'true\']"}},"item-active":{"selector":{"web":".app-chips .chip-item.active"}},"chip-hover":{"selector":{"web":".app-chips .app-chip:hover :before"}},"chip-focus":{"selector":{"web":".app-chips .app-chip:focus :before"}},"chip-active":{"selector":{"web":".app-chips .app-chip:active :before, .app-chip:active :hover :before, .app-chip:active :focus :before"}}}},"appearances":{"filled":{"mapping":{"selector":{"web":".app-chips.filled"}},"variantGroups":{"status":{"default":{"selector":{"web":".default"}},"primary":{"selector":{"web":".primary"}},"secondary":{"selector":{"web":".secondary"}},"tertiary":{"selector":{"web":".tertiary"}}}}},"elevated":{"mapping":{"selector":{"web":".app-chips.elevated"}}}}},"mapping":{"border":{"width":{"value":"{form.mapping.control.border.width.@.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border width of the main chips container (the wrapper that holds all chips and the input field). This creates the outline around the entire chips component.<br>CSS variable: --wm-chips-border-width"}}},"background":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the main chips container (the wrapper that holds all chips and the input field). When set to \'none\', the container has no background color.<br>CSS variable: --wm-chips-background"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items (the small pill-shaped elements). This affects the color of the text content inside each chip, not the container.<br>CSS variable: --wm-chips-color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component. When set to 1, the component is fully opaque. Lower values make the entire component more transparent.<br>CSS variable: --wm-chips-opacity"}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor style when hovering over the chips component. Acceptable values: pointer (hand cursor), default (arrow), not-allowed (blocked cursor).<br>CSS variable: --wm-chips-cursor"}},"pointer-events":{"value":"all","type":"radius","attributes":{"subtype":"pointer-events","description":"Controls whether the chips component can receive mouse/touch interactions. Acceptable values: all (fully interactive), none (not clickable), auto (browser default).<br>CSS variable: --wm-chips-pointer-events"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the main chips container. This creates a subtle elevation effect that makes the chips component appear to float above the background.<br>CSS variable: --wm-chips-shadow"}},"list":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual chip items (the small pill-shaped elements) within the chips container. This creates visual separation between each chip so users can easily distinguish between them.<br>CSS variable: --wm-chips-list-gap"}},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons that appear within the chips container (like search icons or action icons). This affects icons that are part of the chips component interface, not icons inside individual chips.<br>CSS variable: --wm-chips-list-icon-size"}}},"padding":{"value":"{form.mapping.control.padding.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) around the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside.<br>CSS variable: --wm-chips-list-padding"}},"background":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the chips container (the wrapper that holds all chips and the input field). When set to \'none\', the container has no background color, making it transparent.<br>CSS variable: --wm-chips-list-background"}},"border":{"width":{"value":"{form.mapping.control.border.width.@.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the chips container (the wrapper that holds all chips and the input field). This creates the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-width"}},"style":{"value":"{form.mapping.control.border.style.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the chips container. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-list-border-style"}},"color":{"value":"{form.mapping.control.border.color.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the chips container (the wrapper that holds all chips and the input field). This determines the color of the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-color"}},"radius":{"value":"{form.mapping.control.border.radius.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the chips container (the wrapper that holds all chips and the input field). This makes the container appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-list-border-radius"}}},"height":{"value":"{form.mapping.control.height.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the chips container (the wrapper that holds all chips and the input field). This ensures the container has a consistent height even when empty or with few chips.<br>CSS variable: --wm-chips-list-height"}}},"input":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) around the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding"}}},"item":{"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the height of individual chip items (the small pill-shaped elements). This determines how tall each chip appears visually. Acceptable units: px, em, rem.<br>CSS variable: --wm-chips-item-height"}},"padding":{"value":"{space.1.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) around the content inside each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within individual chip items (like between text and icons, or between text and the remove button). This creates visual separation between different parts of each chip.<br>CSS variable: --wm-chips-item-gap"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around individual chip items (the small pill-shaped elements). This creates the outline that defines each chip\'s shape.<br>CSS variable: --wm-chips-item-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of individual chip items. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-item-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items (the small pill-shaped elements). This determines the color of the outline that defines each chip\'s shape.<br>CSS variable: --wm-chips-item-border-color"}},"radius":{"@":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of individual chip items (the small pill-shaped elements). This makes each chip appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-item-border-radius"}},"with":{"icon":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of chip items that contain icons. This creates a specific rounded appearance for chips with icon content.<br>CSS variable: --wm-chips-item-border-radius-with-icon"}},"avatar":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of chip items that contain user avatars. This creates a pill-shaped appearance for chips with avatar content.<br>CSS variable: --wm-chips-item-border-radius-with-avatar"}}}}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the text content inside individual chip items (the small pill-shaped elements). This determines the visual style of the text that appears within each chip.<br>CSS variable: --wm-chips-item-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the text content inside individual chip items. Acceptable values: normal, bold, 100-900. This affects how prominent the text appears within each chip.<br>CSS variable: --wm-chips-item-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text content inside individual chip items (the small pill-shaped elements). This determines how large the text appears within each chip.<br>CSS variable: --wm-chips-item-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text inside individual chip items. This is important when chip text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-chips-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the text content inside chip items. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-chips-item-letter-spacing"}},"layer":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with individual chip items. This creates visual feedback to show that chips are interactive and responsive to user actions.<br>CSS variable: --wm-chips-item-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions with individual chip items (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-chips-item-layer-opacity"}}},"avatar":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of user avatars that appear inside chip items (the small pill-shaped elements). This determines how large profile pictures or user images appear within each chip.<br>CSS variable: --wm-chips-item-avatar-size"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of user avatars inside chip items. When set to pill, avatars appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-chips-item-avatar-radius"}}}},"states":{"hover":{"list":{"border":{"color":{"value":"{form.mapping.states.hover.control.border.color.value}","type":"color","attributes":{"subtype":"color"}}}}},"focus":{"list":{"border":{"color":{"value":"{form.mapping.states.focus.control.border.color.value}","type":"color","attributes":{"subtype":"color"}}}},"shadow":{"value":"inset 0 0 0 ~\\"calc({form.mapping.states.focus.control.border.width.value} - {form.mapping.control.border.width.@.value})\\" {color.error.@.value}","type":"radius","attributes":{"subtype":"elevation"}}},"error":{"list":{"border":{"color":{"value":"{form.mapping.states.error.control.border.color.value}","type":"color","attributes":{"subtype":"color"}}}}},"error-focus":{"shadow":{"value":"inset 0 0 0 ~\\"calc({form.mapping.states.focus.control.border.width.value} - {form.mapping.states.error.control.border.color.value})\\" {form.mapping.states.error.control.border.color.value}","type":"radius","attributes":{"subtype":"elevation"}}},"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity"}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"subtype":"cursor"}},"pointer-events":{"value":"none","type":"radius","attributes":{"subtype":"pointer-events"}}},"item-active":{"item":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"chip-hover":{"item":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"chip-focus":{"item":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"chip-active":{"item":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"appearances":{"filled":{"mapping":{"border":{"width":{"value":"0","type":"radius","attributes":{"subtype":"border-width"}}}},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"radius","attributes":{"subtype":"elevation"}}},"box-shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"chips":{"meta":{"mapping":{"selector":{"web":".app-chips"},"states":{"hover":{"selector":{"web":".app-chips:has(.app-chip-search .form-control:hover)"}},"focus":{"selector":{"web":".app-chips:has(.app-chips .app-chip-search .form-control:focus)"}},"error":{"selector":{"web":".app-chips:has(.app-chip-search .form-control.ng-touched.ng-invalid)"}},"error-focus":{"selector":{"web":".app-chips:has(.app-chip-search .form-control.ng-touched.ng-invalid:focus)"}},"disabled":{"selector":{"web":".app-chips[disabled=\'true\']"}},"item-active":{"selector":{"web":".app-chips .chip-item.active"}},"chip-hover":{"selector":{"web":".app-chips .app-chip:hover :before"}},"chip-focus":{"selector":{"web":".app-chips .app-chip:focus :before"}},"chip-active":{"selector":{"web":".app-chips .app-chip:active :before, .app-chip:active :hover :before, .app-chip:active :focus :before"}}}},"appearances":{"filled":{"mapping":{"selector":{"web":".app-chips.filled"}},"variantGroups":{"status":{"default":{"selector":{"web":".default"}},"primary":{"selector":{"web":".primary"}},"secondary":{"selector":{"web":".secondary"}},"tertiary":{"selector":{"web":".tertiary"}}}}},"elevated":{"mapping":{"selector":{"web":".app-chips.elevated"}}}}},"mapping":{"border":{"width":{"value":"{form.mapping.control.border.width.@.value}","type":"radius","attributes":{"subtype":"border-width"}}},"background":{"value":"none","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity"}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor"}},"pointer-events":{"value":"all","type":"radius","attributes":{"subtype":"pointer-events"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation"}},"list":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size"}}},"padding":{"value":"{form.mapping.control.padding.value}","type":"space","attributes":{"subtype":"space"}},"background":{"value":"none","type":"color","attributes":{"subtype":"color"}},"border":{"width":{"value":"{form.mapping.control.border.width.@.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{form.mapping.control.border.style.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{form.mapping.control.border.color.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"value":"{form.mapping.control.border.radius.value}","type":"radius","attributes":{"subtype":"radius"}}},"height":{"value":"{form.mapping.control.height.value}","type":"space","attributes":{"subtype":"space"}}},"input":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}}},"item":{"height":{"value":"32px","type":"space","attributes":{"subtype":"space"}},"padding":{"value":"{space.1.value} {space.3.value}","type":"space","attributes":{"subtype":"space"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color"}},"radius":{"@":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}},"with":{"icon":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}},"avatar":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius"}}}}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"layer":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity"}}},"avatar":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius"}}}},"states":{"hover":{"list":{"border":{"color":{"value":"{form.mapping.states.hover.control.border.color.value}","type":"color","attributes":{"subtype":"color"}}}}},"focus":{"list":{"border":{"color":{"value":"{form.mapping.states.focus.control.border.color.value}","type":"color","attributes":{"subtype":"color"}}}},"shadow":{"value":"inset 0 0 0 ~\\"calc({form.mapping.states.focus.control.border.width.value} - {form.mapping.control.border.width.@.value})\\" {color.error.@.value}","type":"radius","attributes":{"subtype":"elevation"}}},"error":{"list":{"border":{"color":{"value":"{form.mapping.states.error.control.border.color.value}","type":"color","attributes":{"subtype":"color"}}}}},"error-focus":{"shadow":{"value":"inset 0 0 0 ~\\"calc({form.mapping.states.focus.control.border.width.value} - {form.mapping.states.error.control.border.color.value})\\" {form.mapping.states.error.control.border.color.value}","type":"radius","attributes":{"subtype":"elevation"}}},"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity"}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"subtype":"cursor"}},"pointer-events":{"value":"none","type":"radius","attributes":{"subtype":"pointer-events"}}},"item-active":{"item":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"chip-hover":{"item":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"chip-focus":{"item":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"chip-active":{"item":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"appearances":{"filled":{"mapping":{"border":{"width":{"value":"0","type":"radius","attributes":{"subtype":"border-width"}}}},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"radius","attributes":{"subtype":"elevation"}}},"box-shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_color-picker_color-picker_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_color-picker_color-picker_json"],{
 
-/***/ "./src/tokens/web/components/color-picker/color-picker.json":
+/***/ "./src/tokens/web/components/color-picker/color-picker.json"
 /*!******************************************************************!*\
   !*** ./src/tokens/web/components/color-picker/color-picker.json ***!
   \******************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"color-picker":{"mapping":{"container":{"width":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how wide the color picker button appears (the small colored square that users click to open the color selection dialog). This determines the size of the color preview button.<br>CSS variable: --wm-color-picker-container-width"}},"height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how tall the color picker button appears (the small colored square that users click to open the color selection dialog). This determines the size of the color preview button.<br>CSS variable: --wm-color-picker-container-height"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"color-picker":{"mapping":{"container":{"width":{"value":"48px","type":"space","attributes":{"subtype":"space"}},"height":{"value":"48px","type":"space","attributes":{"subtype":"space"}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_container_container_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_container_container_json"],{
 
-/***/ "./src/tokens/web/components/container/container.json":
+/***/ "./src/tokens/web/components/container/container.json"
 /*!************************************************************!*\
   !*** ./src/tokens/web/components/container/container.json ***!
   \************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"container":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-container-default"}}},"outlined":{"mapping":{"selector":{"web":".app-outlined-container","mobile":".app-outlined-container"}}},"elevated":{"mapping":{"selector":{"web":".app-elevated-container","mobile":".app-elevated-container"}}}}},"mapping":{"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the outline around container elements (boxes that hold content). This creates a colored border around the container to define its boundaries.<br>CSS variable: --wm-container-border-color"}},"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the outline around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around container elements. \'none\' removes the border, \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-container-border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of container elements. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-container-border-radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around container elements. This creates a subtle shadow that makes the container appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-container-shadow"}}},"appearances":{"default":{"mapping":{"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation"}}}},"outlined":{"mapping":{"border":{"color":{"value":"{color.outline.variant.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"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation"}}}},"elevated":{"mapping":{"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"container":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-container-default"}}},"outlined":{"mapping":{"selector":{"web":".app-outlined-container","mobile":".app-outlined-container"}}},"elevated":{"mapping":{"selector":{"web":".app-elevated-container","mobile":".app-elevated-container"}}}}},"mapping":{"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation"}}},"appearances":{"default":{"mapping":{"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation"}}}},"outlined":{"mapping":{"border":{"color":{"value":"{color.outline.variant.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"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation"}}}},"elevated":{"mapping":{"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color"}},"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width"}},"style":{"value":"{border.style.none.value}","type":"radius","attributes":{"subtype":"border-style"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius"}}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation"}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_web_components_currency_currency_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_web_components_currency_currency_json"],{
 
-/***/ "./src/tokens/web/components/currency/currency.json":
+/***/ "./src/tokens/web/components/currency/currency.json"
 /*!**********************************************************!*\
   !*** ./src/tokens/web/components/currency/currency.json ***!
   \**********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"currency":{"meta":{"mapping":{}},"mapping":{"inputgroup-addon":{"width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls how wide the currency symbol appears in currency input fields (like the \'$\' symbol that appears inside the input box). This determines the space reserved for the currency symbol.<br>CSS variable: --wm-currency-inputgroup-addon-width"}},"font-family":{"value":"{form.mapping.control.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for currency symbols in input fields. This determines whether the currency symbol appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-currency-inputgroup-addon-font-family"}},"font-size":{"value":"{form.mapping.control.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the currency symbol appears in input fields. This affects the size of the \'$\', \'€\', or other currency symbols that users see inside the input box.<br>CSS variable: --wm-currency-inputgroup-addon-font-size"}},"font-weight":{"value":"{form.mapping.control.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the currency symbol appears in input fields. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-currency-inputgroup-addon-font-weight"}},"line-height":{"value":"{form.mapping.control.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing around currency symbols in input fields. This ensures the symbol is properly centered within the input field.<br>CSS variable: --wm-currency-inputgroup-addon-line-height"}},"letter-spacing":{"value":"{form.mapping.control.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing around currency symbols in input fields. This can help make the symbol more readable and properly spaced.<br>CSS variable: --wm-currency-inputgroup-addon-letter-spacing"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"currency":{"meta":{"mapping":{}},"mapping":{"inputgroup-addon":{"width":{"value":"40px","type":"space","attributes":{"subtype":"space"}},"font-family":{"value":"{form.mapping.control.font-family.value}","type":"font","attributes":{"subtype":"font-family"}},"font-size":{"value":"{form.mapping.control.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{form.mapping.control.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{form.mapping.control.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{form.mapping.control.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);