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

package/cjs/src_tokens_mobile_components_button_button_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"btn":{"meta":{"mapping":{"selector":{"web":".app-button","mobile":".app-button"},"states":{"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"}},"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"}},"position":{"@":{"value":"relative","type":"space","attributes":{"description":"Controls the positioning method for buttons. \'relative\' positions the button relative to its normal position, \'absolute\' positions it relative to its nearest positioned ancestor, \'fixed\' positions it relative to the viewport, and \'static\' uses the default flow.<br>CSS variable: --wm-btn-position"}},"bottom":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the bottom edge when buttons are positioned absolutely or fixed. This determines how far from the bottom the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-bottom"}},"right":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the right edge when buttons are positioned absolutely or fixed. This determines how far from the right the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-right"}}},"opacity":{"value":"1","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"}},"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":{"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.<br>CSS variable: --wm-btn-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-btn-border-color"}}},"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":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal top spacing between content and border.<br>CSS variable: --wm-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal bottom spacing between content and border.<br>CSS variable: --wm-btn-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal left spacing between content and border.<br>CSS variable: --wm-btn-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal right spacing between content and border.<br>CSS variable: --wm-btn-padding-right"}}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"height":{"value":"40px","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"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users click or tap buttons (the visual feedback animation that spreads from the point of interaction). This determines what color the ripple animation appears in, typically a semi-transparent overlay.<br>CSS variable: --wm-btn-ripple-color"}}},"skeleton":{"width":{"value":"96px","type":"radius","attributes":{"subtype":"space","description":"Controls the width of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how wide the loading placeholder appears. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-btn-skeleton-width"}},"height":{"value":"{space.12.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the height of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how tall the loading placeholder appears. Acceptable units: px, em, rem.<br>CSS variable: --wm-btn-skeleton-height"}}},"states":{"disabled":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the button text appears in when the button is disabled.<br>CSS variable: --wm-btn-color (disabled state)"}},"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This is the background color that appears when the button is disabled.<br>CSS variable: --wm-btn-background (disabled state)"}},"border-color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the border appears in when the button is disabled.<br>CSS variable: --wm-btn-border-color (disabled state)"}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). A value of 0.38 makes the buttons appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-btn-opacity (disabled state)"}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over disabled buttons (when buttons are not interactive and users cannot click them). \'not-allowed\' shows a blocked cursor indicating the button cannot be clicked, providing visual feedback to users about the button\'s disabled state.<br>CSS variable: --wm-btn-cursor (disabled state)"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). \'none\' removes shadows completely, making disabled buttons appear flat and less prominent.<br>CSS variable: --wm-btn-shadow (disabled state)"}}}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"outlined":{"mapping":{"background":{"value":"transparent","type":"color"}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"color":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"error":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"text":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"standard":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"icon":{"mapping":{"height":{"value":"40px","type":"space"},"min-width":{"value":"40px","type":"space"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"icon-size":{"value":"{icon.size.md.value}","type":"space"}}},"elevated":{"mapping":{"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}},"fab":{"mapping":{"position":{"@":{"value":"absolute","type":"space"},"bottom":{"value":"10px","type":"space"},"right":{"value":"10px","type":"space"}},"height":{"value":"56px","type":"space"},"min-width":{"value":"56px","type":"space"},"border":{"radius":{"value":"16px","type":"radius"}},"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"btn":{"meta":{"mapping":{"selector":{"mobile":".app-button"},"states":{"disabled":{"selector":{"mobile":"-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"}},"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"}},"position":{"@":{"value":"relative","type":"space","attributes":{"description":"Controls the positioning method for buttons. \'relative\' positions the button relative to its normal position, \'absolute\' positions it relative to its nearest positioned ancestor, \'fixed\' positions it relative to the viewport, and \'static\' uses the default flow.<br>CSS variable: --wm-btn-position"}},"bottom":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the bottom edge when buttons are positioned absolutely or fixed. This determines how far from the bottom the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-bottom"}},"right":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the right edge when buttons are positioned absolutely or fixed. This determines how far from the right the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-right"}}},"opacity":{"value":"1","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"}},"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":{"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.<br>CSS variable: --wm-btn-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-btn-border-color"}}},"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":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal top spacing between content and border.<br>CSS variable: --wm-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal bottom spacing between content and border.<br>CSS variable: --wm-btn-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal left spacing between content and border.<br>CSS variable: --wm-btn-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal right spacing between content and border.<br>CSS variable: --wm-btn-padding-right"}}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"height":{"value":"40px","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"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users click or tap buttons (the visual feedback animation that spreads from the point of interaction). This determines what color the ripple animation appears in, typically a semi-transparent overlay.<br>CSS variable: --wm-btn-ripple-color"}}},"skeleton":{"width":{"value":"96px","type":"radius","attributes":{"subtype":"space","description":"Controls the width of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how wide the loading placeholder appears. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-btn-skeleton-width"}},"height":{"value":"{space.12.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the height of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how tall the loading placeholder appears. Acceptable units: px, em, rem.<br>CSS variable: --wm-btn-skeleton-height"}}},"states":{"disabled":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the button text appears in when the button is disabled.<br>CSS variable: --wm-btn-color (disabled state)"}},"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This is the background color that appears when the button is disabled.<br>CSS variable: --wm-btn-background (disabled state)"}},"border-color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the border appears in when the button is disabled.<br>CSS variable: --wm-btn-border-color (disabled state)"}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). A value of 0.38 makes the buttons appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-btn-opacity (disabled state)"}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over disabled buttons (when buttons are not interactive and users cannot click them). \'not-allowed\' shows a blocked cursor indicating the button cannot be clicked, providing visual feedback to users about the button\'s disabled state.<br>CSS variable: --wm-btn-cursor (disabled state)"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). \'none\' removes shadows completely, making disabled buttons appear flat and less prominent.<br>CSS variable: --wm-btn-shadow (disabled state)"}}}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"outlined":{"mapping":{"background":{"value":"transparent","type":"color"}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"color":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"error":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"text":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"standard":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"icon":{"mapping":{"height":{"value":"40px","type":"space"},"min-width":{"value":"40px","type":"space"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"icon-size":{"value":"{icon.size.md.value}","type":"space"}}},"elevated":{"mapping":{"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}},"fab":{"mapping":{"position":{"@":{"value":"absolute","type":"space"},"bottom":{"value":"10px","type":"space"},"right":{"value":"10px","type":"space"}},"height":{"value":"56px","type":"space"},"min-width":{"value":"56px","type":"space"},"border":{"radius":{"value":"16px","type":"radius"}},"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_calendar_calendar_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"calendar":{"meta":{"mapping":{"selector":{"mobile":".app-calendar"}}},"mapping":{"view":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the calendar view. This creates a subtle elevation effect that makes the calendar appear to float above the background.<br>CSS variable: --wm-calendar-view-shadow"}},"border":{"@":{"value":"{color.border.translucent.value}","type":"radius","attributes":{"subtype":"color","description":"Sets the border color of the calendar view. This determines what color the border around the calendar appears in.<br>CSS variable: --wm-calendar-view-border"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the calendar view. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, 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 thickness of the calendar view. This determines how thick the border around the calendar appears.<br>CSS variable: --wm-calendar-view-border-width"}}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the calendar view. This makes the calendar appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-calendar-view-radius"}}},"fc":{"button":{"bg-color":{"value":"#2c3e50","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons in the calendar component. This determines what color appears behind the button content.<br>CSS variable: --wm-calendar-fc-button-bg-color"}},"border-color":{"value":"#2C3E50","type":"color","attributes":{"subtype":"color","description":"Sets the border color of buttons in the calendar component. This determines what color the border around buttons appears in.<br>CSS variable: --wm-calendar-fc-button-border-color"}}},"header":{"vertical-padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the vertical padding (top and bottom) of the calendar header. This creates spacing above and below the header content.<br>CSS variable: --wm-calendar-fc-header-vertical-padding"}},"horizontal-padding":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the horizontal padding (left and right) of the calendar header. This creates spacing on the sides of the header content.<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 thickness/boldness of the text in the calendar header. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight"}}},"events-gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between events in the calendar. This creates visual separation between different calendar events.<br>CSS variable: --wm-calendar-fc-events-gap"}},"event":{"background":{"value":"{color.primary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of calendar events. This determines what color appears behind event content.<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. This determines what color the event text appears in.<br>CSS variable: --wm-calendar-fc-event-color"}},"today":{"background":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for today\'s date in the calendar. This determines what color appears behind today\'s date.<br>CSS variable: --wm-calendar-fc-event-today-background"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color for today\'s date in the calendar. This determines what color today\'s date text appears in.<br>CSS variable: --wm-calendar-fc-event-today-color"}},"dot":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the dot indicator for today\'s date in the calendar. This determines what color the dot appears in.<br>CSS variable: --wm-calendar-fc-event-today-dot"}}}},"anchor-color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of anchor links in the calendar component. This determines what color calendar navigation links appear in.<br>CSS variable: --wm-calendar-fc-anchor-color"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the calendar component. This determines how wide the calendar appears on the screen.<br>CSS variable: --wm-calendar-width"}},"min-height":{"value":"456px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the calendar component. This determines the minimum vertical space the calendar occupies.<br>CSS variable: --wm-calendar-min-height"}},"min-width":{"value":"360px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of the calendar component. This determines the minimum horizontal space the calendar occupies.<br>CSS variable: --wm-calendar-min-width"}},"header":{"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the calendar header. This is the background color that appears behind the header content.<br>CSS variable: --wm-calendar-header-background-color"}},"border":{"bottom-width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of the calendar header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-calendar-header-border-bottom-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the calendar header. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-calendar-header-border-style"}}}},"weekday":{"border":{"bottom-width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of weekday labels in the calendar. This determines how thick the border at the bottom of weekday labels appears.<br>CSS variable: --wm-calendar-weekday-border-bottom-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of weekday labels in the calendar. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-calendar-weekday-border-style"}}},"padding":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Sets the padding of weekday labels in the calendar. This creates spacing around the weekday text.<br>CSS variable: --wm-calendar-weekday-padding"}},"text":{"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for weekday text in the calendar. This determines whether the weekday text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-calendar-weekday-text-font-family"}},"font-size":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"font-size","description":"Controls the size of the weekday text in the calendar. This affects how large the weekday labels appear.<br>CSS variable: --wm-calendar-weekday-text-font-size"}}}},"day-border-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of calendar day cells. This determines what color the border around each day appears in.<br>CSS variable: --wm-calendar-day-border-color"}},"not-day-of-month":{"color":{"value":"#666666","type":"color","attributes":{"subtype":"color","description":"Sets the text color for days that are not in the current month. This determines what color these days appear in.<br>CSS variable: --wm-calendar-not-day-of-month-color"}},"font-weight":{"value":"normal","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of text for days that are not in the current month. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-not-day-of-month-font-weight"}}},"event-day1":{"color1":{"value":"rgb(117, 150, 255)","type":"color","attributes":{"subtype":"color","description":"Sets the first color variant for event days in the calendar. This determines what color appears for the first event indicator.<br>CSS variable: --wm-calendar-event-day1-color1"}},"color2":{"value":"rgb(168, 201, 255)","type":"color","attributes":{"subtype":"color","description":"Sets the second color variant for event days in the calendar. This determines what color appears for the second event indicator.<br>CSS variable: --wm-calendar-event-day1-color2"}},"color3":{"value":"rgb(194, 203, 248)","type":"color","attributes":{"subtype":"color","description":"Sets the third color variant for event days in the calendar. This determines what color appears for the third event indicator.<br>CSS variable: --wm-calendar-event-day1-color3"}}},"prev-month-btn-color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of the previous month button in the calendar. This determines what color the navigation button appears in.<br>CSS variable: --wm-calendar-prev-month-btn-color"}},"header-skeleton":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the calendar header skeleton (loading state). This determines how wide the skeleton loader appears.<br>CSS variable: --wm-calendar-header-skeleton-width"}},"margin-bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin of the calendar header skeleton. This creates spacing below the skeleton loader.<br>CSS variable: --wm-calendar-header-skeleton-margin-bottom"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"calendar":{"meta":{"mapping":{"selector":{"mobile":".app-calendar"}}},"mapping":{"view":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the calendar view. This creates a subtle elevation effect that makes the calendar appear to float above the background.<br>CSS variable: --wm-calendar-view-shadow"}},"border":{"@":{"value":"{color.border.translucent.value}","type":"radius","attributes":{"subtype":"color","description":"Sets the border color of the calendar view. This determines what color the border around the calendar appears in.<br>CSS variable: --wm-calendar-view-border"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the calendar view. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, 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 thickness of the calendar view. This determines how thick the border around the calendar appears.<br>CSS variable: --wm-calendar-view-border-width"}}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the calendar view. This makes the calendar appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-calendar-view-radius"}}},"fc":{"button":{"bg-color":{"value":"#2c3e50","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons in the calendar component. This determines what color appears behind the button content.<br>CSS variable: --wm-calendar-fc-button-bg-color"}},"border-color":{"value":"#2C3E50","type":"color","attributes":{"subtype":"color","description":"Sets the border color of buttons in the calendar component. This determines what color the border around buttons appears in.<br>CSS variable: --wm-calendar-fc-button-border-color"}}},"header":{"vertical-padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the vertical padding (top and bottom) of the calendar header. This creates spacing above and below the header content.<br>CSS variable: --wm-calendar-fc-header-vertical-padding"}},"horizontal-padding":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the horizontal padding (left and right) of the calendar header. This creates spacing on the sides of the header content.<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 thickness/boldness of the text in the calendar header. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight"}}},"events-gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between events in the calendar. This creates visual separation between different calendar events.<br>CSS variable: --wm-calendar-fc-events-gap"}},"event":{"background":{"value":"{color.primary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of calendar events. This determines what color appears behind event content.<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. This determines what color the event text appears in.<br>CSS variable: --wm-calendar-fc-event-color"}},"today":{"background":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for today\'s date in the calendar. This determines what color appears behind today\'s date.<br>CSS variable: --wm-calendar-fc-event-today-background"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color for today\'s date in the calendar. This determines what color today\'s date text appears in.<br>CSS variable: --wm-calendar-fc-event-today-color"}},"dot":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the dot indicator for today\'s date in the calendar. This determines what color the dot appears in.<br>CSS variable: --wm-calendar-fc-event-today-dot"}}}},"anchor-color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of anchor links in the calendar component. This determines what color calendar navigation links appear in.<br>CSS variable: --wm-calendar-fc-anchor-color"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the calendar component. This determines how wide the calendar appears on the screen.<br>CSS variable: --wm-calendar-width"}},"min-height":{"value":"456px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the calendar component. This determines the minimum vertical space the calendar occupies.<br>CSS variable: --wm-calendar-min-height"}},"header":{"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the calendar header. This is the background color that appears behind the header content.<br>CSS variable: --wm-calendar-header-background-color"}},"border":{"bottom-width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of the calendar header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-calendar-header-border-bottom-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the calendar header. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-calendar-header-border-style"}}}},"weekday":{"border":{"bottom-width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of weekday labels in the calendar. This determines how thick the border at the bottom of weekday labels appears.<br>CSS variable: --wm-calendar-weekday-border-bottom-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of weekday labels in the calendar. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-calendar-weekday-border-style"}}},"padding":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Sets the padding of weekday labels in the calendar. This creates spacing around the weekday text.<br>CSS variable: --wm-calendar-weekday-padding"}},"text":{"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for weekday text in the calendar. This determines whether the weekday text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-calendar-weekday-text-font-family"}},"font-size":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"font-size","description":"Controls the size of the weekday text in the calendar. This affects how large the weekday labels appear.<br>CSS variable: --wm-calendar-weekday-text-font-size"}}}},"day-border-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of calendar day cells. This determines what color the border around each day appears in.<br>CSS variable: --wm-calendar-day-border-color"}},"not-day-of-month":{"color":{"value":"#666666","type":"color","attributes":{"subtype":"color","description":"Sets the text color for days that are not in the current month. This determines what color these days appear in.<br>CSS variable: --wm-calendar-not-day-of-month-color"}},"font-weight":{"value":"normal","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of text for days that are not in the current month. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-not-day-of-month-font-weight"}}},"event-day1":{"color1":{"value":"rgb(117, 150, 255)","type":"color","attributes":{"subtype":"color","description":"Sets the first color variant for event days in the calendar. This determines what color appears for the first event indicator.<br>CSS variable: --wm-calendar-event-day1-color1"}},"color2":{"value":"rgb(168, 201, 255)","type":"color","attributes":{"subtype":"color","description":"Sets the second color variant for event days in the calendar. This determines what color appears for the second event indicator.<br>CSS variable: --wm-calendar-event-day1-color2"}},"color3":{"value":"rgb(194, 203, 248)","type":"color","attributes":{"subtype":"color","description":"Sets the third color variant for event days in the calendar. This determines what color appears for the third event indicator.<br>CSS variable: --wm-calendar-event-day1-color3"}}},"prev-month-btn-color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of the previous month button in the calendar. This determines what color the navigation button appears in.<br>CSS variable: --wm-calendar-prev-month-btn-color"}},"header-skeleton":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the calendar header skeleton (loading state). This determines how wide the skeleton loader appears.<br>CSS variable: --wm-calendar-header-skeleton-width"}},"margin-bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin of the calendar header skeleton. This creates spacing below the skeleton loader.<br>CSS variable: --wm-calendar-header-skeleton-margin-bottom"}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_camera_camera_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"camera":{"mapping":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the camera component. This is the main background color that appears behind all camera content.<br>CSS variable: --wm-camera-background"}},"color":{"value":"#151420","type":"color","attributes":{"subtype":"color","description":"Sets the text and icon color of the camera component. This determines what color the text and icons appear in.<br>CSS variable: --wm-camera-color"}},"border":{"color":{"value":"#ccc","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the camera component. This determines what color the border around the camera appears in.<br>CSS variable: --wm-camera-border-color"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the camera component. This determines how thick the border around the camera appears.<br>CSS variable: --wm-camera-border-width"}},"radius":{"value":"20px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the camera component. This makes the camera appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-camera-border-radius"}}},"min-height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the camera component. This determines the minimum vertical space the camera occupies.<br>CSS variable: --wm-camera-min-height"}},"min-width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of the camera component. This determines the minimum horizontal space the camera occupies.<br>CSS variable: --wm-camera-min-width"}},"padding":{"value":"0","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the camera component. This creates breathing room around the camera content.<br>CSS variable: --wm-camera-padding"}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"camera":{"mapping":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the camera component. This is the main background color that appears behind all camera content.<br>CSS variable: --wm-camera-background"}},"color":{"value":"#151420","type":"color","attributes":{"subtype":"color","description":"Sets the text and icon color of the camera component. This determines what color the text and icons appear in.<br>CSS variable: --wm-camera-color"}},"border":{"color":{"value":"#ccc","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the camera component. This determines what color the border around the camera appears in.<br>CSS variable: --wm-camera-border-color"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the camera component. This determines how thick the border around the camera appears.<br>CSS variable: --wm-camera-border-width"}},"radius":{"value":"20px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the camera component. This makes the camera appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-camera-border-radius"}}},"min-height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the camera component. This determines the minimum vertical space the camera occupies.<br>CSS variable: --wm-camera-min-height"}},"min-width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of the camera component. This determines the minimum horizontal space the camera occupies.<br>CSS variable: --wm-camera-min-width"}},"padding":{"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal top spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-top"}},"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal bottom spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-bottom"}},"left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal left spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal right spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-right"}}},"appearances":{}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_cards_cards_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*******************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"card":{"meta":{"mapping":{"selector":{"mobile":".app-card"}},"appearances":{}},"mapping":{"header":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the card header. This creates breathing room around the header content.<br>CSS variable: --wm-card-header-padding"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the card header. This determines how wide the header appears.<br>CSS variable: --wm-card-header-width"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the card header. This is the background color that appears behind the header content.<br>CSS variable: --wm-card-header-background-color"}}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the card component. This determines how thick the border around the card appears.<br>CSS variable: --wm-card-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the card component. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, 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 the card component. This determines what color the border around the card appears in.<br>CSS variable: --wm-card-border-color"}},"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the card component. This makes the card appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-card-border-radius"}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the card component. This creates a subtle elevation effect that makes the card appear to float above the background.<br>CSS variable: --wm-card-shadow"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the card component. This is the main background color that appears behind all card content.<br>CSS variable: --wm-card-background"}},"padding":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the card component. This creates breathing room around the card content.<br>CSS variable: --wm-card-padding"}}},"appearances":{"default":{"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"transparent","type":"color"},"shadow":{"value":"none","type":"radius"}}},"filled":{"mapping":{"border":{"width":{"value":"0","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"{color.surface.bright.@.value}","type":"color"},"shadow":{"value":"none","type":"radius"}},"variantGroups":{}},"elevated":{"mapping":{"border":{"width":{"value":"0px","type":"space"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"background":{"value":"{color.surface.container.lowest.@.value}","type":"color"}},"variantGroups":{}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"card":{"meta":{"mapping":{"selector":{"mobile":".app-card"}},"appearances":{}},"mapping":{"header":{"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside card. This creates breathing room in the left side of the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside card. This creates breathing room in the right side card. Acceptable units: px.<br>CSS variable: --wm-card-padding-right"}},"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside card. This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside card.This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-bottom"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the card header. This determines how wide the header appears.<br>CSS variable: --wm-card-header-width"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the card header. This is the background color that appears behind the header content.<br>CSS variable: --wm-card-header-background-color"}}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the card component. This determines how thick the border around the card appears.<br>CSS variable: --wm-card-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the card component. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, 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 the card component. This determines what color the border around the card appears in.<br>CSS variable: --wm-card-border-color"}},"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the card component. This makes the card appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-card-border-radius"}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the card component. This creates a subtle elevation effect that makes the card appear to float above the background.<br>CSS variable: --wm-card-shadow"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the card component. This is the main background color that appears behind all card content.<br>CSS variable: --wm-card-background"}},"padding":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the card component. This creates breathing room around the card content.<br>CSS variable: --wm-card-padding"}}},"appearances":{"default":{"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"transparent","type":"color"},"shadow":{"value":"none","type":"radius"}}},"filled":{"mapping":{"border":{"width":{"value":"0","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"{color.surface.bright.@.value}","type":"color"},"shadow":{"value":"none","type":"radius"}},"variantGroups":{}},"elevated":{"mapping":{"border":{"width":{"value":"0px","type":"space"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"background":{"value":"{color.surface.container.lowest.@.value}","type":"color"}},"variantGroups":{}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_carousel_carousel_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"carousel":{"meta":{"mapping":{"selector":{"mobile":".app-carousel"},"states":{"active":{"selector":{"mobile":"-active-dot"}}}}},"mapping":{"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the carousel (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-ripple-color"}}},"slide":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of individual carousel slides (the content panels that display images, text, or other content). When set to 100%, each slide takes up the full width of the carousel container. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-carousel-slide-width"}},"padding":{"horizontal":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding-horizontal"}}}},"navigation-arrows":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel navigation arrow buttons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-navigation-arrows-height"}},"width":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel navigation arrow buttons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-navigation-arrows-width"}},"border":{"radius":{"value":"48px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel navigation arrow buttons. When set to 48px, the arrows appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-carousel-navigation-arrows-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel navigation arrow buttons. When transparent, no border is visible. When filled with a color, the arrows have a visible outline.<br>CSS variable: --wm-carousel-navigation-arrows-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel navigation arrow buttons. This creates the outline effect around each arrow button.<br>CSS variable: --wm-carousel-navigation-arrows-border-width"}}},"margin-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) of carousel navigation arrow buttons. This creates space between the arrows and adjacent elements, affecting the overall layout and positioning.<br>CSS variable: --wm-carousel-navigation-arrows-margin-left"}},"font-size":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of carousel navigation arrow icons (the arrow symbols inside the buttons). Larger values make the arrows more prominent and easier to see. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-navigation-arrows-font-size"}},"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of carousel navigation arrow icons (the arrow symbols inside the buttons). This determines what color the arrow icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-carousel-navigation-arrows-color"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel navigation arrow buttons. When transparent, only the arrow icon is visible. When filled with a color, the buttons appear with a solid background.<br>CSS variable: --wm-carousel-navigation-arrows-background"}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users tap carousel navigation arrow buttons. This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-navigation-arrows-ripple-color"}}}},"dots":{"wrapper":{"padding":{"top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room above the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-top"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room below the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-bottom"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the carousel dots container (the wrapper that holds all the navigation dots). When transparent, only the dots are visible. When filled with a color, the container appears with a colored background.<br>CSS variable: --wm-carousel-dots-wrapper-background-color"}}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the carousel dots container (the wrapper that holds all the navigation dots). When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-carousel-dots-wrapper-opacity"}}},"width":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"}},"height":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"}},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"}},"radius":{"value":"5px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-dots-background"}},"margin":{"left":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-left"}},"right":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-right"}}},"opacity":{"value":"0.6px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of inactive carousel indicators (navigation dots). When set to 0.6, the dots appear semi-transparent to indicate they are not the currently active slide. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"}}},"skeleton":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the carousel skeleton loader (the placeholder animation that appears while carousel content is loading). When set to 100%, the skeleton takes up the full width of the carousel container. Acceptable units: %, px.<br>CSS variable: --wm-carousel-skeleton-width"}}},"states":{"active":{"dots":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-active-dots-background"}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-active-dots-opacity"}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"carousel":{"meta":{"mapping":{"selector":{"mobile":".app-carousel"},"states":{"active":{"selector":{"mobile":"-active-dot"}}}}},"mapping":{"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the carousel (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-ripple-color"}}},"slide":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of individual carousel slides (the content panels that display images, text, or other content). When set to 100%, each slide takes up the full width of the carousel container. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-carousel-slide-width"}},"padding":{"horizontal":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding-horizontal"}}}},"navigation-arrows":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel navigation arrow buttons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-navigation-arrows-height"}},"width":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel navigation arrow buttons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-navigation-arrows-width"}},"border":{"radius":{"value":"48px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel navigation arrow buttons. When set to 48px, the arrows appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-carousel-navigation-arrows-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel navigation arrow buttons. When transparent, no border is visible. When filled with a color, the arrows have a visible outline.<br>CSS variable: --wm-carousel-navigation-arrows-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel navigation arrow buttons. This creates the outline effect around each arrow button.<br>CSS variable: --wm-carousel-navigation-arrows-border-width"}}},"margin-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) of carousel navigation arrow buttons. This creates space between the arrows and adjacent elements, affecting the overall layout and positioning.<br>CSS variable: --wm-carousel-navigation-arrows-margin-left"}},"font-size":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of carousel navigation arrow icons (the arrow symbols inside the buttons). Larger values make the arrows more prominent and easier to see. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-navigation-arrows-font-size"}},"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of carousel navigation arrow icons (the arrow symbols inside the buttons). This determines what color the arrow icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-carousel-navigation-arrows-color"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel navigation arrow buttons. When transparent, only the arrow icon is visible. When filled with a color, the buttons appear with a solid background.<br>CSS variable: --wm-carousel-navigation-arrows-background"}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users tap carousel navigation arrow buttons. This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-navigation-arrows-ripple-color"}}}},"dots":{"wrapper":{"padding":{"top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room above the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-top"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room below the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-bottom"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the carousel dots container (the wrapper that holds all the navigation dots). When transparent, only the dots are visible. When filled with a color, the container appears with a colored background.<br>CSS variable: --wm-carousel-dots-wrapper-background-color"}}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the carousel dots container (the wrapper that holds all the navigation dots). When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-carousel-dots-wrapper-opacity"}}},"width":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"}},"height":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"}},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"}},"radius":{"value":"5px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-dots-background"}},"margin":{"left":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-left"}},"right":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-right"}}},"opacity":{"value":"0.6px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of inactive carousel indicators (navigation dots). When set to 0.6, the dots appear semi-transparent to indicate they are not the currently active slide. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"}}},"skeleton":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the carousel skeleton loader (the placeholder animation that appears while carousel content is loading). When set to 100%, the skeleton takes up the full width of the carousel container. Acceptable units: %, px.<br>CSS variable: --wm-carousel-skeleton-width"}}},"states":{"active":{"dots":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-dots-background"}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"}},"width":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"}},"height":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the height of active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"}},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"}},"radius":{"value":"5px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the active carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the active carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"}}},"margin":{"left":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual active carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-left"}},"right":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual active carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-right"}}}},"slide":{"padding":{"horizontal":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside active carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding-horizontal"}}}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_container_container_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"container":{"meta":{"appearances":{"default":{"mapping":{"selector":{"mobile":".app-default-container"}}},"outlined":{"mapping":{"selector":{"mobile":".app-outlined-container"}}},"elevated":{"mapping":{"selector":{"mobile":".app-elevated-container"}}}}},"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around container elements (boxes that hold content). \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots. The default container border styles will not change in Studio. They are dotted for user-experience reasons, so we are not going to modify them. The changes can be seen in the preview. For the outlined and elevated styles, the changes are visible both in Studio and in the preview.<br>CSS variable: --wm-container-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around container elements. This creates a colored border around the container to define its boundaries.<br>CSS variable: --wm-container-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the container elements. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-container-border-radius"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of container elements (boxes that hold content). This is the main background color that appears behind all container content.<br>CSS variable: --wm-container-background-color"}}},"box-shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around container elements. This creates a subtle shadow that makes the container appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-container-box-shadow"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of container elements. When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-container-opacity"}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside container elements. This creates breathing room above the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside container elements. This creates breathing room below the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside container elements. This creates breathing room on the left side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside container elements. This creates breathing room on the right side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-right"}}}},"appearances":{"default":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"value":"{border.width.0.value}","type":"space"},"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.none.value}","type":"radius"}}}},"outlined":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"value":"{border.width.base.value}","type":"border"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"1px","type":"radius"}}}},"elevated":{"mapping":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"border":{"style":{"value":"{border.style.base.value}","type":"border"},"color":{"value":"transparent","type":"color"},"width":{"value":"{border.width.base.value}","type":"border"},"radius":{"value":"{radius.sm.value}","type":"radius"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"container":{"meta":{"appearances":{"default":{"mapping":{"selector":{"mobile":".app-default-container"}}},"outlined":{"mapping":{"selector":{"mobile":".app-outlined-container"}}},"elevated":{"mapping":{"selector":{"mobile":".app-elevated-container"}}}}},"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border","attributes":{"subtype":"border-style","description":"Controls the style of the outline around container elements (boxes that hold content). \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots. The default container border styles will not change in Studio. They are dotted for user-experience reasons, so we are not going to modify them. The changes can be seen in the preview. For the outlined and elevated styles, the changes are visible both in Studio and in the preview.<br>CSS variable: --wm-container-border-style"}},"width":{"top":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the top border around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-top-width"}},"bottom":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the bottom border around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-bottom-width"}},"left":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the left border around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-left-width"}},"right":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the right border around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-right-width"}}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around container elements. This creates a colored border around the container to define its boundaries.<br>CSS variable: --wm-container-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the container elements. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-container-border-radius"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of container elements (boxes that hold content). This is the main background color that appears behind all container content.<br>CSS variable: --wm-container-background-color"}}},"box-shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around container elements. This creates a subtle shadow that makes the container appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-container-box-shadow"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of container elements. When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-container-opacity"}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside container elements. This creates breathing room above the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside container elements. This creates breathing room below the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-bottom"}},"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside container elements. This creates breathing room on the left side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside container elements. This creates breathing room on the right side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-right"}}}},"appearances":{"default":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"top":{"value":"{border.width.0.value}","type":"border"},"bottom":{"value":"{border.width.0.value}","type":"border"},"left":{"value":"{border.width.0.value}","type":"border"},"right":{"value":"{border.width.0.value}","type":"border"}},"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.none.value}","type":"radius"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}}}},"outlined":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"top":{"value":"{border.width.base.value}","type":"border"},"bottom":{"value":"{border.width.base.value}","type":"border"},"left":{"value":"{border.width.base.value}","type":"border"},"right":{"value":"{border.width.base.value}","type":"border"}},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"1px","type":"radius"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}}}},"elevated":{"mapping":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"border":{"style":{"value":"{border.style.base.value}","type":"border"},"color":{"value":"transparent","type":"color"},"width":{"top":{"value":"{border.width.base.value}","type":"border"},"bottom":{"value":"{border.width.base.value}","type":"border"},"left":{"value":"{border.width.base.value}","type":"border"},"right":{"value":"{border.width.base.value}","type":"border"}},"radius":{"value":"{radius.sm.value}","type":"radius"}},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_fileupload_fileupload_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"fileupload":{"meta":{"mapping":{"selector":{"mobile":".app-fileupload"}}},"mapping":{"border":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of file upload area (the container where users can drag and drop or select files). This determines the color of the outline that defines the file upload area.<br>CSS variable: --wm-fileupload-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of file upload area. This creates the outline that defines the file upload area shape.<br>CSS variable: --wm-fileupload-border-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of file upload area. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-fileupload-border-style"}},"radius":{"value":"{radius.xxl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of file upload area. This makes the file upload area appear with rounded corners for a softer appearance.<br>CSS variable: --wm-fileupload-border-radius"}}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of file upload area (the container where users can drag and drop or select files). This is the main background color that appears behind the file upload interface.<br>CSS variable: --wm-fileupload-background"}},"text":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file upload text (the text that appears in the file upload area, such as \'Choose file\' or \'Drag and drop files here\'). This affects how large the text appears.<br>CSS variable: --wm-fileupload-text-font-size"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file upload text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-fileupload-text-font-weight"}}},"align":{"value":"center","type":"text","attributes":{"subtype":"text-align","description":"Controls the text alignment of file upload text. Acceptable values: left, center, right, justify.<br>CSS variable: --wm-fileupload-text-align"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file upload area (the text that appears in the file upload interface). This determines what color the text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-fileupload-text-color"}}},"icon":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of file upload icons (icons that appear in the file upload area, such as upload or file icons). This affects how large the icons appear.<br>CSS variable: --wm-fileupload-icon-font-size"}}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of file upload icons (icons that appear in the file upload area). This determines what color the icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-fileupload-icon-color"}}},"ripple-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the file upload area (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-fileupload-ripple-color"}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"fileupload":{"meta":{"mapping":{"selector":{"mobile":".app-fileupload"}}},"mapping":{"border":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of file upload area (the container where users can drag and drop or select files). This determines the color of the outline that defines the file upload area.<br>CSS variable: --wm-fileupload-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of file upload area. This creates the outline that defines the file upload area shape.<br>CSS variable: --wm-fileupload-border-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of file upload area. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-fileupload-border-style"}},"radius":{"value":"{radius.base.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of file upload area. This makes the file upload area appear with rounded corners for a softer appearance.<br>CSS variable: --wm-fileupload-border-radius"}}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of file upload area (the container where users can drag and drop or select files). This is the main background color that appears behind the file upload interface.<br>CSS variable: --wm-fileupload-background"}},"text":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file upload text (the text that appears in the file upload area, such as \'Choose file\' or \'Drag and drop files here\'). This affects how large the text appears.<br>CSS variable: --wm-fileupload-text-font-size"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file upload text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-fileupload-text-font-weight"}}},"align":{"value":"center","type":"text","attributes":{"subtype":"text-align","description":"Controls the text alignment of file upload text. Acceptable values: left, center, right, justify.<br>CSS variable: --wm-fileupload-text-align"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file upload area (the text that appears in the file upload interface). This determines what color the text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-fileupload-text-color"}}},"icon":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of file upload icons (icons that appear in the file upload area, such as upload or file icons). This affects how large the icons appear.<br>CSS variable: --wm-fileupload-icon-font-size"}}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of file upload icons (icons that appear in the file upload area). This determines what color the icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-fileupload-icon-color"}}},"ripple-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the file upload area (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-fileupload-ripple-color"}}},"appearances":{}}}');
 
 /***/ }
 

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

@@ -7,7 +7,7 @@
   \***********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"form-controls":{"meta":{"mapping":{"selector":{"mobile":".app-input"},"states":{"focused":{"selector":{"mobile":"-focused"}},"disabled":{"selector":{"mobile":"-disabled"}}},"appearances":{}}},"mapping":{"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls (input fields, text areas, select boxes, and other form elements where users enter data). A value of 1 means fully opaque (completely visible), while lower values make the form controls more transparent.<br>CSS variable: --wm-form-controls-opacity"}},"min-height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-height"}},"padding":{"vertical":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form controls (the space between the form field content and its top/bottom borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-vertical"}},"horizontal":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form controls (the space between the form field content and its left/right borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-horizontal"}}},"border":{"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-controls-border-color"}},"radius":{"value":"{radius.sm.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-controls-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","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-controls-border-style"}},"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-controls-border-width"}}},"placeholder":{"color":{"value":"{color.on-surface.@.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-controls-placeholder-color"}}},"background":{"value":"{color.outline.variant.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-controls-background"}},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form control labels (the text labels that appear next to or above input fields). When transparent, only the label text is visible. When filled with a color, the label appears with a colored background.<br>CSS variable: --wm-form-controls-label-background"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form control labels (the space above and below the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form control labels (the space to the left and right of the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-horizontal"}}}},"states":{"focused":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines how thick the border lines appear when the field is active.<br>CSS variable: --wm-form-controls-border-width (focused state)"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"}},"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"}}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the disabled state (when the form field is not interactive). This determines how thick the border lines appear when the field is disabled.<br>CSS variable: --wm-form-controls-border-width (disabled state)"}}},"background":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"}},"opacity":{"value":"0.67","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls when they are in the disabled state (when the form field is not interactive). A value of 0.67 makes the form controls appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-form-controls-opacity (disabled state)"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"form-controls":{"meta":{"mapping":{"selector":{"mobile":".app-input"},"states":{"focused":{"selector":{"mobile":"-focused"}},"disabled":{"selector":{"mobile":"-disabled"}}},"appearances":{}}},"mapping":{"opacity":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls (input fields, text areas, select boxes, and other form elements where users enter data). A value of 1 means fully opaque (completely visible), while lower values make the form controls more transparent.<br>CSS variable: --wm-form-controls-opacity"}},"min-height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-height"}},"min-width":{"value":"160px","type":"space","attributes":{"subtype":"space","description":"Note: The min-width property does not affect form controls when they are placed inside a <form>. Controls the minimum width of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always wide enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-width"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control text appear (the text that appear next to or above input fields). This affects the size of the text that users see.<br>CSS variable: --wm-form-controls-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control text appear (the text that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-font-weight"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"}}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal top spacing inside form controls (the space between the form field content and its top borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-top"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal left spacing inside form controls (the space between the form field content and its left borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal right spacing inside form controls (the space between the form field content and its right borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-right"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal bottom spacing inside form controls (the space between the form field content and its bottom borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-bottom"}}},"border":{"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-controls-border-color"}},"radius":{"value":"{radius.sm.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-controls-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","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-controls-border-style"}},"top":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of top border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width"}}},"left":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of left border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width"}}},"right":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of right border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width"}}},"bottom":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of bottom border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width"}}}},"placeholder":{"color":{"value":"{color.on-surface.@.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-controls-placeholder-color"}}},"background":{"value":"{color.outline.variant.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-controls-background"}},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form control labels (the text labels that appear next to or above input fields). When transparent, only the label text is visible. When filled with a color, the label appears with a colored background.<br>CSS variable: --wm-form-controls-label-background"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form control labels (the space above and below the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form control labels (the space to the left and right of the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-horizontal"}}}},"states":{"focused":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"}},"top":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of top border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width (focused state)"}}},"left":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of left border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width (focused state)"}}},"right":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of right border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width (focused state)"}}},"bottom":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of bottom border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width (focused state)"}}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"}},"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"}}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"}},"top":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of top border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width (disabled state)"}}},"left":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of left border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width (disabled state)"}}},"right":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of right border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width (disabled state)"}}},"bottom":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of bottom border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width (disabled state)"}}}},"background":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"}},"opacity":{"value":"0.67","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls when they are in the disabled state (when the form field is not interactive). A value of 0.67 makes the form controls appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-form-controls-opacity (disabled state)"}}}}},"appearances":{}}}');
 
 /***/ }