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

package/cjs/src_tokens_web_components_button_button_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \******************************************************/
 (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","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":"{color.transparent.value}","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

@@ -7,7 +7,7 @@
   \**********************************************************/
 (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":{"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"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the calendar view.<br>CSS variable: --wm-calendar-view-background"}},"toolbar-title":{"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of the calendar title. <br>CSS variable: --wm-calendar-toolbar-title-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-size"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the letter spacing of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-letter-spacing"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-line-height"}}},"button":{"background":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-color"}},"border-color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-border-color"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of the button captions in the calendar toolbar.<br>CSS variable: --wm-calendar-button-font-weight"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-size"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the letter spacing of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-letter-spacing"}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-line-height"}},"border-width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-style"}},"border-radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-radius"}},"active":{"background":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-background"}},"border-color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-color"}},"border-width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-style"}},"border-radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-radius"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-color"}}}},"date":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-padding"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-weight"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-size"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-anchor-color"}},"today":{"background":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of current day cell in the calendar.<br>CSS variable: --wm-calendar-daygrid-today-background"}},"text":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of current day cell in the calendar .<br>CSS variable: --wm-calendar-daygrid-today-text-color"}}}}},"toolbar":{"vertical":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-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-toolbar-horizontal-padding"}}}},"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-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-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-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-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-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-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-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-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-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-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-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-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-event-dot-color"}}}},"header":{"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of calendar header columns text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-header-text-font-weight"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-size"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the text color of calendar header columns.<br>CSS variable: --wm-calendar-header-color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of calendar header columns.<br>CSS variable: --wm-calendar-header-background"}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_cards_cards_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \****************************************************/
 (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","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":"elevation","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","excludeFromUI":true,"description":"Controls padding of card footer content.<br>CSS variable: --wm-card-footer-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"excludeFromUI":true,"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":{"excludeFromUI":true,"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":{"excludeFromUI":true,"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":{}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_checkbox_checkbox_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \**********************************************************/
 (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","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":{"color":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Controls the color of the checkbox label text.<br>CSS variable: --wm-checkbox-caption-color"}},"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":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_data-table_data-table_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \**************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"data-table":{"meta":{"mapping":{"selector":{"web":".app-grid"},"states":{"hover":{"selector":{"web":" .table tbody tr:hover"}},"active":{"selector":{"web":" .table tbody tr.active"}}}},"appearances":{"default":{"mapping":{"selector":{"web":" "}}},"condensed":{"mapping":{"selector":{"web":".table-condensed"}}},"striped-even":{"mapping":{"selector":{"web":".striped-even"}}},"striped-odd":{"mapping":{"selector":{"web":".striped-odd"}}}}},"mapping":{"border":{"collapse":{"value":"unset","type":"radius","attributes":{"subtype":"radius","description":"Controls how borders between data table cells are displayed. \'collapse\' makes adjacent cell borders merge into a single line, \'separate\' keeps borders separate with gaps, \'unset\' uses the default browser behavior.<br>CSS variable: --wm-data-table-border-collapse"}},"spacing":{"value":"unset","type":"space","attributes":{"subtype":"space","description":"Controls the space between data table cells when borders are separate. This creates gaps between table cells for better visual separation.<br>CSS variable: --wm-data-table-border-spacing"}}},"overlay":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the loading overlay that appears over data tables while data is being loaded or processed. This creates a semi-transparent layer that covers the table content during loading states.<br>CSS variable: --wm-data-table-overlay-background"}},"color":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the text color of loading messages and indicators that appear in the data table overlay. \'inherit\' uses the same color as the parent element, or you can specify a specific color value.<br>CSS variable: --wm-data-table-overlay-color"}},"opacity":{"value":"90%","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the loading overlay that appears over data tables. Values range from 0% (completely transparent) to 100% (completely opaque). 90% creates a semi-transparent overlay that dims the table content while still showing the loading indicator.<br>CSS variable: --wm-data-table-overlay-opacity"}}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside data table containers (the space between the table content and its borders). This creates breathing room around the entire table area.<br>CSS variable: --wm-data-table-padding"}},"header":{"row":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of data table header rows (the top row that contains column titles like \'Name\', \'Date\', \'Status\'). This determines what color the column header text appears in.<br>CSS variable: --wm-data-table-header-row-color"}},"background":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of data table header rows (the top row that contains column titles). This creates a distinct background color for the header to separate it from the data rows below.<br>CSS variable: --wm-data-table-header-row-background"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in data table header rows (the top row that contains column titles like \'Name\', \'Date\', \'Status\'). This affects the size of the text that users see in the column headers.<br>CSS variable: --wm-data-table-header-row-font-size"}},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in data table header rows (the top row that contains column titles). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-data-table-header-row-font-weight"}},"font-family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for data table header rows (the top row that contains column titles like \'Name\', \'Date\', \'Status\'). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-data-table-header-row-font-family"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when data table header row text wraps to multiple lines. This ensures proper spacing for the header text displayed in the table.<br>CSS variable: --wm-data-table-header-row-line-height"}},"letterspacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in data table header rows (the top row that contains column titles). This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-data-table-header-row-letter-spacing"}}},"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside data table header cells (the space between the column title text and the cell borders). This creates breathing room around the header text.<br>CSS variable: --wm-data-table-header-cell-padding"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around data table header cells. The format is \'top right bottom left\' - this setting creates a bottom border only to separate headers from data rows.<br>CSS variable: --wm-data-table-header-cell-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around data table header cells. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-data-table-header-cell-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around data table header cells. This determines what color the lines separating the header from the data rows appear in.<br>CSS variable: --wm-data-table-header-cell-border-color"}}},"text-overflow":{"value":"ellipsis","type":"radius","attributes":{"subtype":"radius","description":"Controls how long text in data table header cells is displayed when it doesn\'t fit. \'ellipsis\' shows \'...\' at the end of long text, \'clip\' cuts off the text abruptly, \'string\' shows a custom string.<br>CSS variable: --wm-data-table-header-cell-text-overflow"}},"overflow":{"value":"hidden","type":"radius","attributes":{"subtype":"radius","description":"Controls how content that exceeds the header cell boundaries is handled. \'hidden\' hides overflowing content, \'visible\' shows it outside the cell, \'scroll\' adds scrollbars, \'auto\' adds scrollbars only when needed.<br>CSS variable: --wm-data-table-header-cell-overflow"}},"position":{"value":"relative","type":"radius","attributes":{"subtype":"space","description":"Sets the positioning method for data table header cells. \'relative\' positions cells relative to their normal position, \'absolute\' positions them relative to the table, \'sticky\' makes them stick when scrolling.<br>CSS variable: --wm-data-table-header-cell-position"}},"display":{"value":"ruby","type":"radius","attributes":{"subtype":"radius","description":"Controls how data table header cells are displayed. \'ruby\' is a special display type for table cells, \'table-cell\' is the standard table cell display, \'block\' makes them behave like block elements.<br>CSS variable: --wm-data-table-header-cell-display"}},"white-space":{"value":"normal","type":"radius","attributes":{"subtype":"radius","description":"Controls how whitespace and line breaks are handled in data table header cells. \'normal\' wraps text normally, \'nowrap\' prevents text wrapping, \'pre\' preserves all whitespace and line breaks.<br>CSS variable: --wm-data-table-header-cell-white-space"}},"word-break":{"value":"auto-phrase","type":"radius","attributes":{"description":"Controls how long words are broken and wrapped in data table header cells. \'auto-phrase\' automatically breaks words at appropriate points to prevent overflow, \'break-all\' breaks words at any character, \'break-word\' breaks words only when necessary.<br>CSS variable: --wm-data-table-header-cell-word-break"}}}},"body":{"row":{"background-odd":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of odd-numbered data table rows (1st, 3rd, 5th rows, etc.). This creates alternating row colors to improve readability by making it easier to follow data across columns.<br>CSS variable: --wm-data-table-body-row-background-odd"}},"background-even":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of even-numbered data table rows (2nd, 4th, 6th rows, etc.). This creates alternating row colors to improve readability by making it easier to follow data across columns.<br>CSS variable: --wm-data-table-body-row-background-even"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of data table body rows (the rows that contain the actual data, not the header). This determines what color the data text appears in.<br>CSS variable: --wm-data-table-body-row-color"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in data table body rows (the rows that contain the actual data, not the header). This affects the size of the text that users see in the data cells.<br>CSS variable: --wm-data-table-body-row-font-size"}},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in data table body rows (the rows that contain the actual data, not the header). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-data-table-body-row-font-weight"}},"font-family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for data table body rows (the rows that contain the actual data, not the header). This determines whether the data text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-data-table-body-row-font-family"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when data table body row text wraps to multiple lines. This ensures proper spacing for the data text displayed in the table cells.<br>CSS variable: --wm-data-table-body-row-line-height"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in data table body rows (the rows that contain the actual data, not the header). This can help make the data text more readable and properly spaced.<br>CSS variable: --wm-data-table-body-row-letter-spacing"}}},"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside data table body cells (the space between the data content and the cell borders). This creates breathing room around the data text.<br>CSS variable: --wm-data-table-body-cell-padding"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around data table body cells. The format is \'top right bottom left\' - this setting creates a bottom border only to separate rows.<br>CSS variable: --wm-data-table-body-cell-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around data table body cells. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-data-table-body-cell-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around data table body cells. This determines what color the lines separating the data rows appear in.<br>CSS variable: --wm-data-table-body-cell-border-color"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of data table body cells. This makes the cell corners slightly rounded for a softer appearance.<br>CSS variable: --wm-data-table-body-cell-border-radius"}}},"text-overflow":{"value":"ellipsis","type":"radius","attributes":{"subtype":"radius","description":"Controls how long text in data table body cells is displayed when it doesn\'t fit. \'ellipsis\' shows \'...\' at the end of long text, \'clip\' cuts off the text abruptly, \'string\' shows a custom string.<br>CSS variable: --wm-data-table-body-cell-text-overflow"}},"overflow":{"value":"hidden","type":"radius","attributes":{"subtype":"radius","description":"Controls how content that exceeds the data table body cell boundaries is handled. \'hidden\' hides overflowing content, \'visible\' shows it outside the cell, \'scroll\' adds scrollbars, \'auto\' adds scrollbars only when needed.<br>CSS variable: --wm-data-table-body-cell-overflow"}},"vertical-align":{"value":"middle","type":"radius","attributes":{"subtype":"radius","description":"Controls how content is vertically positioned within data table body cells. \'middle\' centers content vertically, \'top\' aligns to the top, \'bottom\' aligns to the bottom, \'baseline\' aligns to the text baseline.<br>CSS variable: --wm-data-table-body-cell-vertical-align"}}},"action":{"display":{"value":"inline-flex","type":"radius","attributes":{"subtype":"radius","description":"Controls how action buttons in data table rows are displayed. \'inline-flex\' arranges buttons in a horizontal line with flexible spacing, \'block\' stacks them vertically, \'none\' hides them completely.<br>CSS variable: --wm-data-table-body-action-display"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside action buttons in data table rows (the space between the button content and its borders). This creates breathing room around the button icons and text.<br>CSS variable: --wm-data-table-body-action-padding"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around action buttons in data table rows (the space between the button and other elements). This creates separation between buttons and other table content.<br>CSS variable: --wm-data-table-body-action-margin"}},"icon-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"space","description":"Controls how large the icons appear in action buttons within data table rows. This affects the size of edit, delete, and other action icons that users can click.<br>CSS variable: --wm-data-table-body-action-icon-size"}}}},"sort":{"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"space","description":"Controls how large the sort icons appear in data table headers (the up/down arrow symbols that indicate sortable columns). This affects the size of the arrows users see when columns can be sorted.<br>CSS variable: --wm-data-table-sort-icon-size"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of sort icons in data table headers (the up/down arrow symbols that indicate sortable columns). This determines what color the sort arrows appear in.<br>CSS variable: --wm-data-table-sort-icon-color"}}}},"layout":{"value":"fixed","type":"space","attributes":{"subtype":"space","description":"Controls how data table columns are sized and arranged. \'fixed\' makes columns maintain consistent widths, \'auto\' lets columns size themselves based on content. Fixed layout provides more predictable table appearance.<br>CSS variable: --wm-data-table-layout"}},"states":{"hover":{"body":{"row":{"background-even":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"background-odd":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"body":{"row":{"background-even":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}},"background-odd":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"appearances":{"default":{"mapping":{"header":{"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}}}},"body":{"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}}}}}},"condensed":{"mapping":{"header":{"cell":{"padding":{"value":"{space.1.value} {space.2.value}","type":"space","attributes":{"subtype":"space"}}}},"body":{"cell":{"padding":{"value":"{space.1.value} {space.2.value}","type":"space","attributes":{"subtype":"space"}}}}}},"striped-even":{"mapping":{"body":{"row":{"background":{"even":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"striped-odd":{"mapping":{"body":{"row":{"background":{"odd":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"data-table":{"meta":{"mapping":{"selector":{"web":".app-grid"},"states":{"hover":{"selector":{"web":" .table > tbody > tr:hover"}},"active":{"selector":{"web":" .table > tbody > tr.active"}},"selected":{"selector":{"web":" .table tbody tr td.selected-column"}}}},"appearances":{"default":{"mapping":{"selector":{"web":" "}}},"condensed":{"mapping":{"selector":{"web":".table-condensed"}}},"striped-even":{"mapping":{"selector":{"web":".striped-even"}}},"striped-odd":{"mapping":{"selector":{"web":".striped-odd"}}}}},"mapping":{"border":{"collapse":{"value":"unset","type":"radius","attributes":{"subtype":"radius","description":"Controls how borders between data table cells are displayed. \'collapse\' makes adjacent cell borders merge into a single line, \'separate\' keeps borders separate with gaps, \'unset\' uses the default browser behavior.<br>CSS variable: --wm-data-table-border-collapse"}},"spacing":{"value":"unset","type":"space","attributes":{"subtype":"space","description":"Controls the space between data table cells when borders are separate. This creates gaps between table cells for better visual separation.<br>CSS variable: --wm-data-table-border-spacing"}}},"overlay":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the loading overlay that appears over data tables while data is being loaded or processed. This creates a semi-transparent layer that covers the table content during loading states.<br>CSS variable: --wm-data-table-overlay-background"}},"color":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the text color of loading messages and indicators that appear in the data table overlay. \'inherit\' uses the same color as the parent element, or you can specify a specific color value.<br>CSS variable: --wm-data-table-overlay-color"}},"opacity":{"value":"90%","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the loading overlay that appears over data tables. Values range from 0% (completely transparent) to 100% (completely opaque). 90% creates a semi-transparent overlay that dims the table content while still showing the loading indicator.<br>CSS variable: --wm-data-table-overlay-opacity"}}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside data table containers (the space between the table content and its borders). This creates breathing room around the entire table area.<br>CSS variable: --wm-data-table-padding"}},"header":{"row":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of data table header rows (the top row that contains column titles like \'Name\', \'Date\', \'Status\'). This determines what color the column header text appears in.<br>CSS variable: --wm-data-table-header-row-color"}},"background":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of data table header rows (the top row that contains column titles). This creates a distinct background color for the header to separate it from the data rows below.<br>CSS variable: --wm-data-table-header-row-background"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in data table header rows (the top row that contains column titles like \'Name\', \'Date\', \'Status\'). This affects the size of the text that users see in the column headers.<br>CSS variable: --wm-data-table-header-row-font-size"}},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in data table header rows (the top row that contains column titles). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-data-table-header-row-font-weight"}},"font-family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for data table header rows (the top row that contains column titles like \'Name\', \'Date\', \'Status\'). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-data-table-header-row-font-family"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when data table header row text wraps to multiple lines. This ensures proper spacing for the header text displayed in the table.<br>CSS variable: --wm-data-table-header-row-line-height"}},"letterspacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in data table header rows (the top row that contains column titles). This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-data-table-header-row-letter-spacing"}}},"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside data table header cells (the space between the column title text and the cell borders). This creates breathing room around the header text.<br>CSS variable: --wm-data-table-header-cell-padding"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around data table header cells. The format is \'top right bottom left\' - this setting creates a bottom border only to separate headers from data rows.<br>CSS variable: --wm-data-table-header-cell-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around data table header cells. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-data-table-header-cell-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around data table header cells. This determines what color the lines separating the header from the data rows appear in.<br>CSS variable: --wm-data-table-header-cell-border-color"}}},"text-overflow":{"value":"ellipsis","type":"radius","attributes":{"subtype":"radius","description":"Controls how long text in data table header cells is displayed when it doesn\'t fit. \'ellipsis\' shows \'...\' at the end of long text, \'clip\' cuts off the text abruptly, \'string\' shows a custom string.<br>CSS variable: --wm-data-table-header-cell-text-overflow"}},"overflow":{"value":"hidden","type":"radius","attributes":{"subtype":"radius","description":"Controls how content that exceeds the header cell boundaries is handled. \'hidden\' hides overflowing content, \'visible\' shows it outside the cell, \'scroll\' adds scrollbars, \'auto\' adds scrollbars only when needed.<br>CSS variable: --wm-data-table-header-cell-overflow"}},"position":{"value":"relative","type":"radius","attributes":{"subtype":"space","description":"Sets the positioning method for data table header cells. \'relative\' positions cells relative to their normal position, \'absolute\' positions them relative to the table, \'sticky\' makes them stick when scrolling.<br>CSS variable: --wm-data-table-header-cell-position"}},"display":{"value":"ruby","type":"radius","attributes":{"subtype":"radius","description":"Controls how data table header cells are displayed. \'ruby\' is a special display type for table cells, \'table-cell\' is the standard table cell display, \'block\' makes them behave like block elements.<br>CSS variable: --wm-data-table-header-cell-display"}},"white-space":{"value":"normal","type":"radius","attributes":{"subtype":"radius","description":"Controls how whitespace and line breaks are handled in data table header cells. \'normal\' wraps text normally, \'nowrap\' prevents text wrapping, \'pre\' preserves all whitespace and line breaks.<br>CSS variable: --wm-data-table-header-cell-white-space"}},"word-break":{"value":"auto-phrase","type":"radius","attributes":{"description":"Controls how long words are broken and wrapped in data table header cells. \'auto-phrase\' automatically breaks words at appropriate points to prevent overflow, \'break-all\' breaks words at any character, \'break-word\' breaks words only when necessary.<br>CSS variable: --wm-data-table-header-cell-word-break"}}}},"body":{"row":{"background-odd":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of odd-numbered data table rows (1st, 3rd, 5th rows, etc.). This creates alternating row colors to improve readability by making it easier to follow data across columns.<br>CSS variable: --wm-data-table-body-row-background-odd"}},"background-even":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of even-numbered data table rows (2nd, 4th, 6th rows, etc.). This creates alternating row colors to improve readability by making it easier to follow data across columns.<br>CSS variable: --wm-data-table-body-row-background-even"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of data table body rows (the rows that contain the actual data, not the header). This determines what color the data text appears in.<br>CSS variable: --wm-data-table-body-row-color"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in data table body rows (the rows that contain the actual data, not the header). This affects the size of the text that users see in the data cells.<br>CSS variable: --wm-data-table-body-row-font-size"}},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in data table body rows (the rows that contain the actual data, not the header). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-data-table-body-row-font-weight"}},"font-family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for data table body rows (the rows that contain the actual data, not the header). This determines whether the data text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-data-table-body-row-font-family"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when data table body row text wraps to multiple lines. This ensures proper spacing for the data text displayed in the table cells.<br>CSS variable: --wm-data-table-body-row-line-height"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in data table body rows (the rows that contain the actual data, not the header). This can help make the data text more readable and properly spaced.<br>CSS variable: --wm-data-table-body-row-letter-spacing"}}},"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside data table body cells (the space between the data content and the cell borders). This creates breathing room around the data text.<br>CSS variable: --wm-data-table-body-cell-padding"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around data table body cells. The format is \'top right bottom left\' - this setting creates a bottom border only to separate rows.<br>CSS variable: --wm-data-table-body-cell-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around data table body cells. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-data-table-body-cell-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around data table body cells. This determines what color the lines separating the data rows appear in.<br>CSS variable: --wm-data-table-body-cell-border-color"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of data table body cells. This makes the cell corners slightly rounded for a softer appearance.<br>CSS variable: --wm-data-table-body-cell-border-radius"}}},"text-overflow":{"value":"ellipsis","type":"radius","attributes":{"subtype":"radius","description":"Controls how long text in data table body cells is displayed when it doesn\'t fit. \'ellipsis\' shows \'...\' at the end of long text, \'clip\' cuts off the text abruptly, \'string\' shows a custom string.<br>CSS variable: --wm-data-table-body-cell-text-overflow"}},"overflow":{"value":"hidden","type":"radius","attributes":{"subtype":"radius","description":"Controls how content that exceeds the data table body cell boundaries is handled. \'hidden\' hides overflowing content, \'visible\' shows it outside the cell, \'scroll\' adds scrollbars, \'auto\' adds scrollbars only when needed.<br>CSS variable: --wm-data-table-body-cell-overflow"}},"vertical-align":{"value":"middle","type":"radius","attributes":{"subtype":"radius","description":"Controls how content is vertically positioned within data table body cells. \'middle\' centers content vertically, \'top\' aligns to the top, \'bottom\' aligns to the bottom, \'baseline\' aligns to the text baseline.<br>CSS variable: --wm-data-table-body-cell-vertical-align"}}},"action":{"display":{"value":"inline-flex","type":"radius","attributes":{"subtype":"radius","description":"Controls how action buttons in data table rows are displayed. \'inline-flex\' arranges buttons in a horizontal line with flexible spacing, \'block\' stacks them vertically, \'none\' hides them completely.<br>CSS variable: --wm-data-table-body-action-display"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside action buttons in data table rows (the space between the button content and its borders). This creates breathing room around the button icons and text.<br>CSS variable: --wm-data-table-body-action-padding"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around action buttons in data table rows (the space between the button and other elements). This creates separation between buttons and other table content.<br>CSS variable: --wm-data-table-body-action-margin"}},"icon-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"space","description":"Controls how large the icons appear in action buttons within data table rows. This affects the size of edit, delete, and other action icons that users can click.<br>CSS variable: --wm-data-table-body-action-icon-size"}}}},"sort":{"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"space","description":"Controls how large the sort icons appear in data table headers (the up/down arrow symbols that indicate sortable columns). This affects the size of the arrows users see when columns can be sorted.<br>CSS variable: --wm-data-table-sort-icon-size"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of sort icons in data table headers (the up/down arrow symbols that indicate sortable columns). This determines what color the sort arrows appear in.<br>CSS variable: --wm-data-table-sort-icon-color"}}}},"layout":{"value":"fixed","type":"space","attributes":{"subtype":"space","description":"Controls how data table columns are sized and arranged. \'fixed\' makes columns maintain consistent widths, \'auto\' lets columns size themselves based on content. Fixed layout provides more predictable table appearance.<br>CSS variable: --wm-data-table-layout"}},"states":{"hover":{"body":{"row":{"background-even":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"background-odd":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"body":{"row":{"background-even":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}},"background-odd":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"selected":{"body":{"row":{"background-even":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}},"background-odd":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"appearances":{"default":{"mapping":{"header":{"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}}}},"body":{"cell":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}}}}}},"condensed":{"mapping":{"header":{"cell":{"padding":{"value":"{space.1.value} {space.2.value}","type":"space","attributes":{"subtype":"space"}}}},"body":{"cell":{"padding":{"value":"{space.1.value} {space.2.value}","type":"space","attributes":{"subtype":"space"}}}}}},"striped-even":{"mapping":{"body":{"row":{"background":{"even":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"striped-odd":{"mapping":{"body":{"row":{"background":{"odd":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"meta":{"mapping":{"selector":{"web":".dropdown"},"states":{"active":{"selector":{"web":" .dropdown-menu .app-menu-item a:active:before, .dropdown-menu li a:active:before"}},"focus":{"selector":{"web":" .dropdown-menu .app-menu-item a:focus:before, .dropdown-menu li a:focus:before"}},"hover":{"selector":{"web":" .dropdown-menu .app-menu-item a:hover:before, .dropdown-menu li a:hover:before"}}}}},"mapping":{"menu":{"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menu containers (the space between the menu content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-padding"}},"inline":{"submenu":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside inline submenu items (nested menu items that appear within the main dropdown). This creates breathing room around the submenu content.<br>CSS variable: --wm-dropdown-menu-inline-submenu-padding"}}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"}},"box-shadow":{"value":"{elevation.shadow.2.value}","type":"shadow","attributes":{"subtype":"shadow","description":"Controls the drop shadow effect around dropdown menus (lists of options that appear when users click on a button or link). This creates a subtle shadow that makes the dropdown appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-dropdown-menu-box-shadow"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius"}}},"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menus appear (lists of options that appear when users click on a button or link). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-width"}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"}}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-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 dropdown menu items. This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-dropdown-menu-item-letter-spacing"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within dropdown menu items (like the space between text and icons). This creates visual separation between different parts of each menu item.<br>CSS variable: --wm-dropdown-menu-item-gap"}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menu items (the space between the menu item content and its borders). This creates breathing room around each menu option.<br>CSS variable: --wm-dropdown-menu-item-padding"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with dropdown menu items. This creates visual feedback to show that the menu item is interactive and responsive to user actions.<br>CSS variable: --wm-dropdown-menu-item-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions with dropdown menu 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-dropdown-menu-item-state-layer-opacity"}}}}}},"states":{"hover":{"menu":{"item":{"state":{"layer":{"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}},"focus":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"meta":{"mapping":{"selector":{"web":".dropdown"},"states":{"active":{"selector":{"web":" .dropdown-menu .app-menu-item a:active:before, .dropdown-menu li a:active:before"}},"focus":{"selector":{"web":" .dropdown-menu .app-menu-item a:focus:before, .dropdown-menu li a:focus:before"}},"hover":{"selector":{"web":" .dropdown-menu .app-menu-item a:hover:before, .dropdown-menu li a:hover:before"}}}}},"mapping":{"menu":{"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menu containers (the space between the menu content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-padding"}},"inline":{"submenu":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside inline submenu items (nested menu items that appear within the main dropdown). This creates breathing room around the submenu content.<br>CSS variable: --wm-dropdown-menu-inline-submenu-padding"}}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"}},"box-shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around dropdown menus (lists of options that appear when users click on a button or link). This creates a subtle shadow that makes the dropdown appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-dropdown-menu-box-shadow"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius"}}},"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menus appear (lists of options that appear when users click on a button or link). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-width"}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"}}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-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 dropdown menu items. This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-dropdown-menu-item-letter-spacing"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within dropdown menu items (like the space between text and icons). This creates visual separation between different parts of each menu item.<br>CSS variable: --wm-dropdown-menu-item-gap"}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menu items (the space between the menu item content and its borders). This creates breathing room around each menu option.<br>CSS variable: --wm-dropdown-menu-item-padding"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with dropdown menu items. This creates visual feedback to show that the menu item is interactive and responsive to user actions.<br>CSS variable: --wm-dropdown-menu-item-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions with dropdown menu 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-dropdown-menu-item-state-layer-opacity"}}}}}},"states":{"hover":{"menu":{"item":{"state":{"layer":{"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}},"focus":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_web_components_form-controls_form-controls_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"form":{"meta":{"mapping":{"selector":{"web":".app-composite-widget"},"states":{"hover":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):hover), .form-control:hover,.form-control:hover"}},"focus":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):focus), .form-control:focus,.form-control:focus"}},"active":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):active), .form-control:active,.form-control:active"}},"error":{"selector":{"web":":has(.form-control.ng-touched.ng-invalid), .form-control.ng-touched.ng-invalid, .form-group .ng-touched.ng-invalid .form-control"}}}}},"mapping":{"group":{"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between form groups (collections of related form fields like a group of address fields or contact information fields). This creates visual separation between different sections of a form.<br>CSS variable: --wm-form-group-gap"}}},"form":{"width":{"value":"1240px","type":"space"},"min-width":{"value":"320px","type":"space"}},"control":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This determines what color the text that users type appears in.<br>CSS variable: --wm-form-control-color"}},"place-holder":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in form controls (the gray text that appears in empty input fields to show users what to enter, like \'Enter your name\' or \'Select an option\'). This determines what color the hint text appears in.<br>CSS variable: --wm-form-control-place-holder-color"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This is the main background color that appears behind the form field content.<br>CSS variable: --wm-form-control-background"}},"border":{"width":{"@":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-control-border-width"}}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-control-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines what color the border lines appear in that outline the form fields.<br>CSS variable: --wm-form-control-border-color"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form controls (input fields, text areas, select boxes, and other form elements). This makes the form field corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-control-border-radius"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls how wide form controls appear (input fields, text areas, select boxes, and other form elements). This determines the horizontal size of the form fields. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-form-control-width"}},"height":{"value":"56px","type":"space","attributes":{"subtype":"space","description":"Controls how tall form controls appear (input fields, text areas, select boxes, and other form elements). This determines the vertical size of the form fields. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-control-height"}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-control-padding"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form controls (input fields, text areas, select boxes, and other form elements). This determines whether the form field text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-control-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in form controls (input fields, text areas, select boxes, and other form elements). This affects the size of the text that users see and type in the form fields.<br>CSS variable: --wm-form-control-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in form controls (input fields, text areas, select boxes, and other form elements). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-control-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when form control text wraps to multiple lines (like in text areas). This ensures proper spacing for the text displayed in the form fields.<br>CSS variable: --wm-form-control-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 form controls (input fields, text areas, select boxes, and other form elements). This can help make the form field text more readable and properly spaced.<br>CSS variable: --wm-form-control-letter-spacing"}}},"caption":{"font":{"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of form captions.<br>CSS variable: --wm-form-caption-font-family"}},"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of form captions.<br>CSS variable: --wm-form-caption-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of form captions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-caption-font-weight"}}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of form captions.<br>CSS variable: --wm-form-caption-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in form captions.<br>CSS variable: --wm-form-caption-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form captions.<br>CSS variable: --wm-form-caption-color"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls margin of form captions.<br>CSS variable: --wm-form-caption-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of form captions.<br>CSS variable: --wm-form-caption-padding"}},"gap":{"value":"~\\"calc({space.1.value} * 0.5)\\"","type":"space","attributes":{"subtype":"space","description":"Controls spacing between form caption elements.<br>CSS variable: --wm-form-caption-gap"}}},"required":{"content":{"value":"\\"*\\"","type":"radius","attributes":{"subtype":"radius","description":"Sets the content for required field indicators.<br>CSS variable: --wm-form-required-content"}},"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of required field indicators.<br>CSS variable: --wm-form-required-color"}},"font-size":{"value":"inherit","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of required field indicators.<br>CSS variable: --wm-form-required-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of required field indicators. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-required-font-weight"}}},"help":{"block":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form help blocks.<br>CSS variable: --wm-form-help-block-color"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of form help blocks.<br>CSS variable: --wm-form-help-block-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of form help blocks.<br>CSS variable: --wm-form-help-block-font-size"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of form help blocks. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-help-block-font-weight"}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of form help blocks.<br>CSS variable: --wm-form-help-block-line-height"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in form help blocks.<br>CSS variable: --wm-form-help-block-letter-spacing"}}}},"input":{"group":{"btn":{"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of input group buttons.<br>CSS variable: --wm-form-input-group-btn-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of input group buttons.<br>CSS variable: --wm-form-input-group-btn-height"}},"font":{"size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the font size of input group button icons.<br>CSS variable: --wm-form-input-group-btn-font-size"}}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of input group buttons.<br>CSS variable: --wm-form-input-group-btn-border-radius"}}}}}},"states":{"hover":{"control":{"border":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}},"focus":{"control":{"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}},"error":{"control":{"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}},"help":{"block":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"control":{"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"form":{"meta":{"mapping":{"selector":{"web":".app-composite-widget"},"states":{"hover":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):hover), .form-control:hover,.form-control:hover"}},"focus":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):focus), .form-control:focus,.form-control:focus"}},"active":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):active), .form-control:active,.form-control:active"}},"error":{"selector":{"web":":has(.form-control.ng-touched.ng-invalid),:has(.input-group.ng-touched.ng-invalid), .form-control.ng-touched.ng-invalid,.form-group .ng-touched.ng-invalid .form-control,:has(.control-label.text-danger)"}}}}},"mapping":{"group":{"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between form groups (collections of related form fields like a group of address fields or contact information fields). This creates visual separation between different sections of a form.<br>CSS variable: --wm-form-group-gap"}}},"form":{"width":{"value":"1240px","type":"space"},"min-width":{"value":"320px","type":"space"}},"field":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space"}}},"control":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This determines what color the text that users type appears in.<br>CSS variable: --wm-form-control-color"}},"place-holder":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in form controls (the gray text that appears in empty input fields to show users what to enter, like \'Enter your name\' or \'Select an option\'). This determines what color the hint text appears in.<br>CSS variable: --wm-form-control-place-holder-color"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This is the main background color that appears behind the form field content.<br>CSS variable: --wm-form-control-background"}},"border":{"width":{"@":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-control-border-width"}}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-control-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines what color the border lines appear in that outline the form fields.<br>CSS variable: --wm-form-control-border-color"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form controls (input fields, text areas, select boxes, and other form elements). This makes the form field corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-control-border-radius"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls how wide form controls appear (input fields, text areas, select boxes, and other form elements). This determines the horizontal size of the form fields. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-form-control-width"}},"height":{"value":"56px","type":"space","attributes":{"subtype":"space","description":"Controls how tall form controls appear (input fields, text areas, select boxes, and other form elements). This determines the vertical size of the form fields. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-control-height"}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-control-padding"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form controls (input fields, text areas, select boxes, and other form elements). This determines whether the form field text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-control-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in form controls (input fields, text areas, select boxes, and other form elements). This affects the size of the text that users see and type in the form fields.<br>CSS variable: --wm-form-control-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in form controls (input fields, text areas, select boxes, and other form elements). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-control-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when form control text wraps to multiple lines (like in text areas). This ensures proper spacing for the text displayed in the form fields.<br>CSS variable: --wm-form-control-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 form controls (input fields, text areas, select boxes, and other form elements). This can help make the form field text more readable and properly spaced.<br>CSS variable: --wm-form-control-letter-spacing"}}},"caption":{"font":{"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of form captions.<br>CSS variable: --wm-form-caption-font-family"}},"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of form captions.<br>CSS variable: --wm-form-caption-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of form captions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-caption-font-weight"}}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of form captions.<br>CSS variable: --wm-form-caption-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in form captions.<br>CSS variable: --wm-form-caption-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form captions.<br>CSS variable: --wm-form-caption-color"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls margin of form captions.<br>CSS variable: --wm-form-caption-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of form captions.<br>CSS variable: --wm-form-caption-padding"}},"display":{"value":"inline-block","type":"other","attributes":{"subtype":"display","description":"Sets the display property of form captions.<br>CSS variable: --wm-form-caption-display"}},"gap":{"value":"~\\"calc({space.1.value} * 0.5)\\"","type":"space","attributes":{"subtype":"space","description":"Controls spacing between form caption elements.<br>CSS variable: --wm-form-caption-gap"}}},"required":{"content":{"value":"\\"*\\"","type":"radius","attributes":{"subtype":"radius","description":"Sets the content for required field indicators.<br>CSS variable: --wm-form-required-content"}},"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of required field indicators.<br>CSS variable: --wm-form-required-color"}},"font-size":{"value":"inherit","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of required field indicators.<br>CSS variable: --wm-form-required-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of required field indicators. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-required-font-weight"}}},"help":{"block":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form help blocks.<br>CSS variable: --wm-form-help-block-color"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of form help blocks.<br>CSS variable: --wm-form-help-block-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of form help blocks.<br>CSS variable: --wm-form-help-block-font-size"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of form help blocks. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-help-block-font-weight"}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of form help blocks.<br>CSS variable: --wm-form-help-block-line-height"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in form help blocks.<br>CSS variable: --wm-form-help-block-letter-spacing"}}}},"input":{"group":{"btn":{"width":{"value":"{space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of input group buttons.<br>CSS variable: --wm-form-input-group-btn-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of input group buttons.<br>CSS variable: --wm-form-input-group-btn-height"}},"font":{"size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the font size of input group button icons.<br>CSS variable: --wm-form-input-group-btn-font-size"}}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of input group buttons.<br>CSS variable: --wm-form-input-group-btn-border-radius"}}}}}},"states":{"hover":{"control":{"border":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}},"focus":{"control":{"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}},"error":{"control":{"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}},"help":{"block":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"control":{"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}}}},"appearances":{}}}');
 
 /***/ }