npm - @wavemaker/foundation-css - Versions diffs - 11.15.1-rc.248 → 11.15.2-rc.249 - Mend

@wavemaker/foundation-css 11.15.1-rc.248 → 11.15.2-rc.249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/cjs/src_tokens_mobile_components_panel_panel_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*******************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"panel":{"meta":{"mapping":{"selector":{"mobile":".app-panel"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-panel.panel-default"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".panel-default"}},"primary":{"selector":{"mobile":".panel-primary"}},"secondary":{"selector":{"mobile":".panel-secondary.root"}},"tertiary":{"selector":{"mobile":".panel-tertiary"}},"success":{"selector":{"mobile":".panel-success"}},"info":{"selector":{"mobile":".panel-info"}},"warning":{"selector":{"mobile":".panel-warning"}},"danger":{"selector":{"mobile":".panel-danger"}}}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panels (containers that group related content with headers and footers). This is the main background color that appears behind the panel content.<br>CSS variable: --wm-panel-background"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of panels. This makes the panels appear with rounded corners for a softer appearance.<br>CSS variable: --wm-panel-radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around panels. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-panel-shadow"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the panel.<br>CSS variable: --wm-panel-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border","description":"Controls the border width of the panel.<br>CSS variable: --wm-panel-border-width"}}},"heading":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between panel heading elements (the gap between the heading text and adjacent elements like icons). This creates breathing room around the heading. Acceptable units: px.<br>CSS variable: --wm-panel-heading-gap"}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) inside panel headings. This creates breathing room above and below the heading content. Acceptable units: px.<br>CSS variable: --wm-panel-heading-padding-block"}},"inline":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside panel headings. This creates breathing room on the left and right sides of the heading content. Acceptable units: px.<br>CSS variable: --wm-panel-heading-padding-inline"}}},"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel heading text. This determines whether the heading text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-heading-font-family"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of panel heading text (the title text that appears at the top of panels). This affects how large the heading text appears.<br>CSS variable: --wm-panel-heading-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold panel heading text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-heading-font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel heading text wraps to multiple lines. This ensures proper spacing for the heading text.<br>CSS variable: --wm-panel-heading-line-height"}},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in panel heading text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-heading-letter-spacing"}},"icon":{"size":{"value":"{icon.size.md.value}","type":"icon","attributes":{"subtype":"size","description":"Controls the size of icons that appear in panel headings (the icon that appears next to the heading text). This determines what size the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-size"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons that appear in panel headings (the icon that appears next to the heading text). This determines what color the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-color"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-text-color"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panel headings (the header section at the top of panels). This is the main background color that appears behind the heading content.<br>CSS variable: --wm-panel-heading-background"}}},"description":{"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel description text (secondary text that appears below the heading). This determines whether the description text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-description-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of panel description text (secondary text that appears below the heading). This affects how large the description text appears.<br>CSS variable: --wm-panel-description-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold panel description text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-description-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel description text wraps to multiple lines. This ensures proper spacing for the description text.<br>CSS variable: --wm-panel-description-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in panel description text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-description-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel descriptions (secondary text that appears below the heading). This determines what color the description text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-description-color"}}},"content":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside panel content sections (the main content area of the panel). This creates breathing room around the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-content-padding"}}}},"appearances":{"default":{"variantGroups":{"status":{"default":{"heading":{"background":{"value":"{color.surface.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"description":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"primary":{"heading":{"background":{"value":"{color.primary.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.primary.@.value}","type":"color"}},"text":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"description":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"heading":{"background":{"value":"{color.secondary.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"text":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"description":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"heading":{"background":{"value":"{color.tertiary.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"text":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"description":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"heading":{"background":{"value":"{color.success.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.success.@.value}","type":"color"}},"text":{"color":{"value":"{color.success.@.value}","type":"color"}}},"description":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"heading":{"background":{"value":"{color.info.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.info.@.value}","type":"color"}},"text":{"color":{"value":"{color.info.@.value}","type":"color"}}},"description":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"heading":{"background":{"value":"{color.warning.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.warning.@.value}","type":"color"}},"text":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"description":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"heading":{"background":{"value":"{color.error.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.error.@.value}","type":"color"}},"text":{"color":{"value":"{color.error.@.value}","type":"color"}}},"description":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"panel":{"meta":{"mapping":{"selector":{"mobile":".app-panel"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-panel.panel-default"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".panel-default"}},"primary":{"selector":{"mobile":".panel-primary"}},"secondary":{"selector":{"mobile":".panel-secondary.root"}},"tertiary":{"selector":{"mobile":".panel-tertiary"}},"success":{"selector":{"mobile":".panel-success"}},"info":{"selector":{"mobile":".panel-info"}},"warning":{"selector":{"mobile":".panel-warning"}},"danger":{"selector":{"mobile":".panel-danger"}}}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panels (containers that group related content with headers and footers). This is the main background color that appears behind the panel content.<br>CSS variable: --wm-panel-background"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of panels. This makes the panels appear with rounded corners for a softer appearance.<br>CSS variable: --wm-panel-radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around panels. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-panel-shadow"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the panel.<br>CSS variable: --wm-panel-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border","description":"Controls the border width of the panel.<br>CSS variable: --wm-panel-border-width"}}},"heading":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between panel heading elements (the gap between the heading text and adjacent elements like icons). This creates breathing room around the heading. Acceptable units: px.<br>CSS variable: --wm-panel-heading-gap"}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) inside panel headings. This creates breathing room above and below the heading content. Acceptable units: px.<br>CSS variable: --wm-panel-heading-padding-block"}},"inline":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside panel headings. This creates breathing room on the left and right sides of the heading content. Acceptable units: px.<br>CSS variable: --wm-panel-heading-padding-inline"}}},"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel heading text. This determines whether the heading text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-heading-font-family"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of panel heading text (the title text that appears at the top of panels). This affects how large the heading text appears.<br>CSS variable: --wm-panel-heading-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold panel heading text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-heading-font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel heading text wraps to multiple lines. This ensures proper spacing for the heading text.<br>CSS variable: --wm-panel-heading-line-height"}},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in panel heading text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-heading-letter-spacing"}},"icon":{"size":{"value":"{icon.size.md.value}","type":"icon","attributes":{"subtype":"size","description":"Controls the size of icons that appear in panel headings (the icon that appears next to the heading text). This determines what size the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-size"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons that appear in panel headings (the icon that appears next to the heading text). This determines what color the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-color"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-text-color"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panel headings (the header section at the top of panels). This is the main background color that appears behind the heading content.<br>CSS variable: --wm-panel-heading-background"}}},"description":{"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel description text (secondary text that appears below the heading). This determines whether the description text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-description-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of panel description text (secondary text that appears below the heading). This affects how large the description text appears.<br>CSS variable: --wm-panel-description-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold panel description text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-description-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel description text wraps to multiple lines. This ensures proper spacing for the description text.<br>CSS variable: --wm-panel-description-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in panel description text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-description-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel descriptions (secondary text that appears below the heading). This determines what color the description text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-description-color"}}}},"appearances":{"default":{"variantGroups":{"status":{"default":{"heading":{"background":{"value":"{color.surface.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"description":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"primary":{"heading":{"background":{"value":"{color.primary.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.primary.@.value}","type":"color"}},"text":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"description":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"heading":{"background":{"value":"{color.secondary.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"text":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"description":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"heading":{"background":{"value":"{color.tertiary.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"text":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"description":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"heading":{"background":{"value":"{color.success.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.success.@.value}","type":"color"}},"text":{"color":{"value":"{color.success.@.value}","type":"color"}}},"description":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"heading":{"background":{"value":"{color.info.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.info.@.value}","type":"color"}},"text":{"color":{"value":"{color.info.@.value}","type":"color"}}},"description":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"heading":{"background":{"value":"{color.warning.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.warning.@.value}","type":"color"}},"text":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"description":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"heading":{"background":{"value":"{color.error.container.@.value}","type":"color"},"icon":{"color":{"value":"{color.error.@.value}","type":"color"}},"text":{"color":{"value":"{color.error.@.value}","type":"color"}}},"description":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_partial-container_partial-container_json.foundation-css.cjs ADDED Viewed

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_partial-container_partial-container_json"],{
+/***/ "./src/tokens/mobile/components/partial-container/partial-container.json"
+/*!*******************************************************************************!*\
+  !*** ./src/tokens/mobile/components/partial-container/partial-container.json ***!
+  \*******************************************************************************/
+(module) {
+module.exports = /*#__PURE__*/JSON.parse('{"partial-container":{"meta":{"mapping":{"selector":{"mobile":".app-partial-container"}}},"mapping":{"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the partial area in navigation. This is the background color for the partial area.<br>CSS variable: --wm-nav-partial-background"}}}}}}');
+/***/ }
+}]);

package/cjs/src_tokens_mobile_components_picture_picture_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"picture":{"meta":{"appearances":{"default":{"mapping":{"selector":{"mobile":".app-picture"}},"variantGroups":{"shape":{"rounded":{"selector":{"mobile":".rounded-image.app-picture"}},"circle":{"selector":{"mobile":".circle-image.app-picture"}}}}},"thumbnail":{"mapping":{"selector":{"mobile":".thumbnail-image.app-picture"}}}}},"mapping":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of pictures (image elements). This makes the pictures appear with rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside pictures. This creates breathing room above the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside pictures. This creates breathing room below the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-bottom"}},"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside pictures. This creates breathing room on the left side of the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside pictures. This creates breathing room on the right side of the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-right"}}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around pictures. This determines the color of the outline that defines the picture container.<br>CSS variable: --wm-picture-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around pictures. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-picture-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around pictures. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-picture-border-width"}}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of pictures (image elements). When transparent, only the image is visible. When filled with a color, the picture appears with a colored background.<br>CSS variable: --wm-picture-background"}}},"appearances":{"default":{"mapping":{"radius":{"value":"{radius.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"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"space"}},"background":{"value":"{color.transparent.@.value}","type":"color"}},"variantGroups":{"shape":{"rounded":{"radius":{"value":"{radius.xs.value}","type":"radius"}},"circle":{"radius":{"value":"{radius.circle.value}","type":"radius"}}}}},"thumbnail":{"mapping":{"radius":{"value":"{radius.xs.value}","type":"radius"},"padding":{"top":{"value":"{space.1.value}","type":"space"},"bottom":{"value":"{space.1.value}","type":"space"},"left":{"value":"{space.1.value}","type":"space"},"right":{"value":"{space.1.value}","type":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"picture":{"meta":{"appearances":{"default":{"mapping":{"selector":{"mobile":".app-picture"}},"variantGroups":{"shape":{"rounded":{"selector":{"mobile":".rounded-image.app-picture"}},"circle":{"selector":{"mobile":".circle-image.app-picture"}}}}},"thumbnail":{"mapping":{"selector":{"mobile":".thumbnail-image.app-picture"}}}}},"mapping":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of pictures (image elements). This makes the pictures appear with rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside pictures. This creates breathing room around the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around pictures. This determines the color of the outline that defines the picture container.<br>CSS variable: --wm-picture-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around pictures. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-picture-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around pictures. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-picture-border-width"}}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of pictures (image elements). When transparent, only the image is visible. When filled with a color, the picture appears with a colored background.<br>CSS variable: --wm-picture-background"}}},"appearances":{"default":{"mapping":{"radius":{"value":"{radius.none.value}","type":"radius"},"padding":{"value":"{space.0.value}","type":"space"},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"space"}},"background":{"value":"{color.transparent.@.value}","type":"color"}},"variantGroups":{"shape":{"rounded":{"radius":{"value":"{radius.xs.value}","type":"radius"}},"circle":{"radius":{"value":"{radius.circle.value}","type":"radius"}}}}},"thumbnail":{"mapping":{"radius":{"value":"{radius.xs.value}","type":"radius"},"padding":{"value":"{space.1.value}","type":"space"},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color"}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_popover_popover_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"popover":{"meta":{"mapping":{"selector":{"mobile":".app-popover"}}},"mapping":{"left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left position offset of popovers (the distance from the left edge of the viewport or parent container). This determines how far from the left the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-left"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom position offset of popovers (the distance from the bottom edge of the viewport or parent container). This determines how far from the bottom the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-bottom"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-width"}},"min-height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"}},"padding-top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-top"}},"padding-left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-left"}},"padding-right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-right"}},"padding-bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-bottom"}},"background-color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background-color"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"}},"border":{"top":{"left":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-left corner of popovers. This makes the popover appear with rounded corners on the top-left for a softer appearance.<br>CSS variable: --wm-popover-border-top-left-radius"}}},"right":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of popovers. This makes the popover appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-popover-border-top-right-radius"}}}}},"header":{"padding-top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-top"}},"padding-bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-bottom"}},"padding-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-left"}},"padding-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-right"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"}},"background-color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover header. This determines what color the title background appears in.<br>CSS variable: --wm-popover-header-background-color"}}},"link":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-color"}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the popover text. When transparent, only the popover text is visible. When filled with a color, the text appears with a colored background.<br>CSS variable: --wm-popover-link-background-color"}}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-link-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around popover. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-popover-link-border-style"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-link-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of link popover components. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-link-radius"}}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-top"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-right"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-bottom"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in popover caption. This affects how large the link text appears.<br>CSS variable: --wm-popover-link-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover caption text appears.<br>CSS variable: --wm-popover-link-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover caption text wraps to multiple lines.<br>CSS variable: --wm-popover-link-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover caption text.<br>CSS variable: --wm-popover-link-letter-spacing"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in popover links.<br>CSS variable: --wm-popover-link-icon-size"}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in popover links.<br>CSS variable: --wm-popover-link-icon-color"}}}},"height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the height of popovers link wrapper. When set to 100%, the popover takes up the full height of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-height"}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers link wrapper. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-width"}},"min-height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components. This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-link-min-height"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"popover":{"meta":{"mapping":{"selector":{"mobile":".app-popover"}}},"mapping":{"left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left position offset of popovers (the distance from the left edge of the viewport or parent container). This determines how far from the left the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-left"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom position offset of popovers (the distance from the bottom edge of the viewport or parent container). This determines how far from the bottom the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-bottom"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-width"}},"min-height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside popovers (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-popover-padding"}},"background-color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background-color"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popovers (top-left, top-right, bottom-right, bottom-left).<br>CSS variable: --wm-popover-border-radius"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around popover. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-popover-border-style"}},"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-border-color"}}},"header":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (top, right, bottom, left).<br>CSS variable: --wm-popover-header-padding"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"}},"background-color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover header. This determines what color the title background appears in.<br>CSS variable: --wm-popover-header-background-color"}}},"link":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-color"}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the popover text. When transparent, only the popover text is visible. When filled with a color, the text appears with a colored background.<br>CSS variable: --wm-popover-link-background-color"}}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-link-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around popover. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-popover-link-border-style"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-link-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of link popover components. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-link-radius"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside popover link wrapper (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-popover-link-padding"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in popover caption. This affects how large the link text appears.<br>CSS variable: --wm-popover-link-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"}},"text-decoration":{"value":"none","type":"font","attributes":{"subtype":"text-decoration","description":"Controls the text decoration (underline, overline, line-through) for popover caption. \'none\' removes all decorations, \'underline\' adds an underline, \'overline\' adds a line above, and \'line-through\' adds a line through the text.<br>CSS variable: --wm-popover-link-text-decoration"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover caption text appears.<br>CSS variable: --wm-popover-link-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover caption text wraps to multiple lines.<br>CSS variable: --wm-popover-link-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover caption text.<br>CSS variable: --wm-popover-link-letter-spacing"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in popover links.<br>CSS variable: --wm-popover-link-icon-size"}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in popover links.<br>CSS variable: --wm-popover-link-icon-color"}}}},"height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the height of popovers link wrapper. When set to 100%, the popover takes up the full height of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-height"}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers link wrapper. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-width"}},"min-height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components. This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-link-min-height"}}},"content":{"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around popover content. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around popover content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-popover-content-border-style"}},"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around popover content. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-content-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of link popover content. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-content-border-radius"}}},"background-color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover content (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-content-background-color"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover content (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-content-shadow"}}},"modal":{"content":{"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover modal content (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-modal-content-shadow"}}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_progress-bar_progress-bar_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*********************************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"progress-bar":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"mobile":".app-progress-bar"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".progress-bar-default"}},"success":{"selector":{"mobile":".progress-bar-success"}},"info":{"selector":{"mobile":".progress-bar-info"}},"warning":{"selector":{"mobile":".progress-bar-warning"}},"danger":{"selector":{"mobile":".progress-bar-danger"}}}}}}},"mapping":{"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height"}},"background":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-background-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-background-active"}}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius"}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the outer spacing around progress bars (the space between the progress bar and surrounding elements). This creates breathing room around the loading indicator.<br>CSS variable: --wm-progress-bar-margin"}},"tooltip":{"background":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of progress bar tooltips (small popup boxes that display additional information when hovering over or interacting with progress bars). This is the main background color that appears behind the tooltip content.<br>CSS variable: --wm-progress-bar-tooltip-background"}},"padding":{"horizontal":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside progress bar tooltips. This creates breathing room on the left and right sides of the tooltip content. Acceptable units: px.<br>CSS variable: --wm-progress-bar-tooltip-padding-horizontal"}},"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) inside progress bar tooltips. This creates breathing room above and below the tooltip content. Acceptable units: px.<br>CSS variable: --wm-progress-bar-tooltip-padding-vertical"}}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of progress bar tooltips. This makes the tooltips appear with rounded corners for a softer appearance.<br>CSS variable: --wm-progress-bar-tooltip-border-radius"}}},"label":{"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of progress bar tooltip labels (the text that appears inside tooltips to show progress information). This determines what color the tooltip text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-progress-bar-tooltip-label-color"}},"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of progress bar tooltip label text. This affects how large the tooltip text appears.<br>CSS variable: --wm-progress-bar-tooltip-label-size"}}},"triangle":{"border":{"bottom-color":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the triangle pointer in progress bar tooltips (the small arrow that points from the tooltip to the progress bar). This determines what color the triangle appears in, typically matching the tooltip background.<br>CSS variable: --wm-progress-bar-tooltip-triangle-border-bottom-color"}}}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"background":{"active":{"value":"{color.primary.@.value}","type":"color"},"inactive":{"value":"{color.primary.container.@.value}","type":"color"}}},"success":{"background":{"active":{"value":"{color.success.@.value}","type":"color"},"inactive":{"value":"{color.success.container.@.value}","type":"color"}}},"info":{"background":{"active":{"value":"{color.info.@.value}","type":"color"},"inactive":{"value":"{color.info.container.@.value}","type":"color"}}},"warning":{"background":{"active":{"value":"{color.warning.@.value}","type":"color"},"inactive":{"value":"{color.warning.container.@.value}","type":"color"}}},"danger":{"background":{"active":{"value":"{color.error.@.value}","type":"color"},"inactive":{"value":"{color.error.container.@.value}","type":"color"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"progress-bar":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"mobile":".app-progress-bar"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".progress-bar-default"}},"success":{"selector":{"mobile":".progress-bar-success"}},"info":{"selector":{"mobile":".progress-bar-info"}},"warning":{"selector":{"mobile":".progress-bar-warning"}},"danger":{"selector":{"mobile":".progress-bar-danger"}}}}}}},"mapping":{"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height"}},"background":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-background-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-background-active"}}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius"}},"tooltip":{"background":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of progress bar tooltips (small popup boxes that display additional information when hovering over or interacting with progress bars). This is the main background color that appears behind the tooltip content.<br>CSS variable: --wm-progress-bar-tooltip-background"}},"padding":{"horizontal":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside progress bar tooltips. This creates breathing room on the left and right sides of the tooltip content. Acceptable units: px.<br>CSS variable: --wm-progress-bar-tooltip-padding-horizontal"}},"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) inside progress bar tooltips. This creates breathing room above and below the tooltip content. Acceptable units: px.<br>CSS variable: --wm-progress-bar-tooltip-padding-vertical"}}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of progress bar tooltips. This makes the tooltips appear with rounded corners for a softer appearance.<br>CSS variable: --wm-progress-bar-tooltip-border-radius"}}},"label":{"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of progress bar tooltip labels (the text that appears inside tooltips to show progress information). This determines what color the tooltip text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-progress-bar-tooltip-label-color"}},"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of progress bar tooltip label text. This affects how large the tooltip text appears.<br>CSS variable: --wm-progress-bar-tooltip-label-size"}}},"triangle":{"border":{"bottom-color":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the triangle pointer in progress bar tooltips (the small arrow that points from the tooltip to the progress bar). This determines what color the triangle appears in, typically matching the tooltip background.<br>CSS variable: --wm-progress-bar-tooltip-triangle-border-bottom-color"}}}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"background":{"active":{"value":"{color.primary.@.value}","type":"color"},"inactive":{"value":"{color.primary.container.@.value}","type":"color"}}},"success":{"background":{"active":{"value":"{color.success.@.value}","type":"color"},"inactive":{"value":"{color.success.container.@.value}","type":"color"}}},"info":{"background":{"active":{"value":"{color.info.@.value}","type":"color"},"inactive":{"value":"{color.info.container.@.value}","type":"color"}}},"warning":{"background":{"active":{"value":"{color.warning.@.value}","type":"color"},"inactive":{"value":"{color.warning.container.@.value}","type":"color"}}},"danger":{"background":{"active":{"value":"{color.error.@.value}","type":"color"},"inactive":{"value":"{color.error.container.@.value}","type":"color"}}}}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_radioset_radioset_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*************************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"radiobutton":{"meta":{"mapping":{"selector":{"mobile":".app-radioset"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"checked":{"selector":{"mobile":"-checked-icon, .app-radioset-selected-label"}}}},"appearances":{}},"mapping":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the radio button (the circular input element) and its label text. This creates visual separation so users can easily distinguish between the clickable radio button and its descriptive text.<br>CSS variable: --wm-radiobutton-gap"}},"label":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the radio button label text appears (the descriptive text that appears next to the radio button). This affects the size of the text that explains what the radio option represents.<br>CSS variable: --wm-radiobutton-label-font-size"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for radio button label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-label-font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold radio button label text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-radiobutton-label-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when radio button label text wraps to multiple lines. This is important when the label text is long and needs to wrap.<br>CSS variable: --wm-radiobutton-label-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in radio button label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-radiobutton-label-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of radio button labels (the descriptive text that appears next to the radio button). This should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-label-color"}}}},"size":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the width and height of radio buttons (the circular input elements that users click to select options). This determines how large the actual radio button appears visually.<br>CSS variable: --wm-radiobutton-size"}},"indicator":{"size":{"value":"16px","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the radio button indicator (the small dot that appears inside the radio button when it\'s selected). This dot is typically smaller than the radio button itself to fit nicely inside.<br>CSS variable: --wm-radiobutton-indicator-size"}}},"color":{"@":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of radio button indicators. When transparent, only the border is visible. When filled with a color, the radio button appears with a colored background.<br>CSS variable: --wm-radiobutton-color"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around radio buttons (the circular input elements). This creates the outline that defines the radio button shape and makes it visible to users.<br>CSS variable: --wm-radiobutton-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around radio buttons (the circular input elements). This determines the color of the outline that defines the radio button shape in its default/unselected state.<br>CSS variable: --wm-radiobutton-border-color"}}},"title":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of radio button group titles (section titles that group related radio button options). When transparent, only the title text is visible. When filled with a color, the title appears with a colored background.<br>CSS variable: --wm-radiobutton-title-background-color"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of radio button group titles (section titles that group related radio button options). This determines what color the title text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-title-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of radio button group title text. This affects how large the title text appears.<br>CSS variable: --wm-radiobutton-title-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for radio button group title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-title-font-family"}}},"line-height":{"value":"40px","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when radio button group title text wraps to multiple lines. This ensures proper spacing for the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-line-height"}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside radio button group titles. This creates breathing room on the left side of the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside radio button group titles. This creates breathing room on the right side of the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding-right"}}}},"set":{"item":{"column":{"gap":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing between radio button options when they are arranged in columns (stacked vertically). This creates visual separation between each radio option in a vertical list.<br>CSS variable: --wm-radiobutton-set-item-column-gap"}}},"row":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between radio button options when they are arranged in rows (side by side horizontally). This creates visual separation between each radio option in a horizontal list.<br>CSS variable: --wm-radiobutton-set-item-row-gap"}}}}},"states":{"checked":{"label":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of checked radio button labels (the text that appears next to selected radio button options). This determines what color the label text appears in when the radio button is selected.<br>CSS variable: --wm-radiobutton-label-color (checked state)"}}}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of checked radio button indicators. This fills the selected radio button with a color to visually indicate it\'s been selected.<br>CSS variable: --wm-radiobutton-color (checked state)"}}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around checked radio button indicators. This determines the color of the outline when the radio button is selected.<br>CSS variable: --wm-radiobutton-border-color (checked state)"}}}},"disabled":{"label":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of disabled radio button labels (the text that appears next to disabled radio button options). This determines what color the label text appears in when the radio button is disabled.<br>CSS variable: --wm-radiobutton-label-color (disabled state)"}}}},"border":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around disabled radio button indicators. This determines the color of the outline when the radio button is disabled.<br>CSS variable: --wm-radiobutton-border-color (disabled state)"}}},"opacity":{"value":"0.8","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled radio buttons. When set to 0.8, disabled radio buttons appear slightly faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-radiobutton-opacity"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"radiobutton":{"meta":{"mapping":{"selector":{"mobile":".app-radioset"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"checked":{"selector":{"mobile":"-checked-icon, .app-radioset-selected-label"}}}},"appearances":{}},"mapping":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the radio button (the circular input element) and its label text. This creates visual separation so users can easily distinguish between the clickable radio button and its descriptive text.<br>CSS variable: --wm-radiobutton-gap"}},"label":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the radio button label text appears (the descriptive text that appears next to the radio button). This affects the size of the text that explains what the radio option represents.<br>CSS variable: --wm-radiobutton-label-font-size"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for radio button label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-label-font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold radio button label text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-radiobutton-label-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when radio button label text wraps to multiple lines. This is important when the label text is long and needs to wrap.<br>CSS variable: --wm-radiobutton-label-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in radio button label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-radiobutton-label-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of radio button labels (the descriptive text that appears next to the radio button). This should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-label-color"}}}},"size":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the width and height of radio buttons (the circular input elements that users click to select options). This determines how large the actual radio button appears visually.<br>CSS variable: --wm-radiobutton-size"}},"indicator":{"size":{"value":"16px","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the radio button indicator (the small dot that appears inside the radio button when it\'s selected). This dot is typically smaller than the radio button itself to fit nicely inside.<br>CSS variable: --wm-radiobutton-indicator-size"}}},"color":{"@":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of radio button indicators. When transparent, only the border is visible. When filled with a color, the radio button appears with a colored background.<br>CSS variable: --wm-radiobutton-color"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around radio buttons (the circular input elements). This creates the outline that defines the radio button shape and makes it visible to users.<br>CSS variable: --wm-radiobutton-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around radio buttons (the circular input elements). This determines the color of the outline that defines the radio button shape in its default/unselected state.<br>CSS variable: --wm-radiobutton-border-color"}}},"title":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of radio button group titles (section titles that group related radio button options). When transparent, only the title text is visible. When filled with a color, the title appears with a colored background.<br>CSS variable: --wm-radiobutton-title-background-color"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of radio button group titles (section titles that group related radio button options). This determines what color the title text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-title-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of radio button group title text. This affects how large the title text appears.<br>CSS variable: --wm-radiobutton-title-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for radio button group title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-title-font-family"}}},"line-height":{"value":"40px","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when radio button group title text wraps to multiple lines. This ensures proper spacing for the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-line-height"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside radio button group titles. This creates breathing room around the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding"}}},"set":{"item":{"column":{"gap":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing between radio button options when they are arranged in columns (stacked vertically). This creates visual separation between each radio option in a vertical list.<br>CSS variable: --wm-radiobutton-set-item-column-gap"}}},"row":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between radio button options when they are arranged in rows (side by side horizontally). This creates visual separation between each radio option in a horizontal list.<br>CSS variable: --wm-radiobutton-set-item-row-gap"}}}}},"states":{"checked":{"label":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of checked radio button labels (the text that appears next to selected radio button options). This determines what color the label text appears in when the radio button is selected.<br>CSS variable: --wm-radiobutton-label-color (checked state)"}}}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of checked radio button indicators. This fills the selected radio button with a color to visually indicate it\'s been selected.<br>CSS variable: --wm-radiobutton-color (checked state)"}}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around checked radio button indicators. This determines the color of the outline when the radio button is selected.<br>CSS variable: --wm-radiobutton-border-color (checked state)"}}}},"disabled":{"label":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of disabled radio button labels (the text that appears next to disabled radio button options). This determines what color the label text appears in when the radio button is disabled.<br>CSS variable: --wm-radiobutton-label-color (disabled state)"}}}},"border":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around disabled radio button indicators. This determines the color of the outline when the radio button is disabled.<br>CSS variable: --wm-radiobutton-border-color (disabled state)"}}},"opacity":{"value":"0.8","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled radio buttons. When set to 0.8, disabled radio buttons appear slightly faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-radiobutton-opacity"}}}}},"appearances":{}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_rating_rating_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"rating":{"meta":{"mapping":{"selector":{"mobile":".app-rating"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"active":{"selector":{"mobile":"-selected-icon"}}}}},"mapping":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-padding"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of rating components (star rating systems where users can rate items with 1-5 stars). When set to 1, the rating is fully opaque. Lower values make the rating more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity"}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"}},"size":{"value":"32px","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"}}},"text":{"size":{"value":"32px","type":"space","attributes":{"subtype":"font-size","description":"Controls how large rating text appears (numeric or text values that appear alongside rating icons). This affects the size of the rating text that users see.<br>CSS variable: --wm-rating-text-size"}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between rating text and icons. This creates visual separation between the text and the rating icons.<br>CSS variable: --wm-rating-text-padding-left"}}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of rating text (numeric or text values that appear alongside rating icons). This is typically a bright color like yellow or orange to match the selected rating stars.<br>CSS variable: --wm-rating-text-color"}}},"states":{"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled rating components. When set to 0.38, the rating appears faded to indicate it cannot be clicked. Lower values make it more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity (disabled state)"}}},"active":{"icon":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-icon-color (active state)"}},"size":{"value":"32px","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large active rating icons appear (the stars that are selected or hovered over). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size (active state)"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"rating":{"meta":{"mapping":{"selector":{"mobile":".app-rating"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"active":{"selector":{"mobile":"-selected-icon"}}}}},"mapping":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-padding"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of rating components (star rating systems where users can rate items with 1-5 stars). When set to 1, the rating is fully opaque. Lower values make the rating more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity"}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"}},"size":{"value":"32px","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"}}},"text":{"size":{"value":"32px","type":"space","attributes":{"subtype":"font-size","description":"Controls how large rating text appears (numeric or text values that appear alongside rating icons). This affects the size of the rating text that users see.<br>CSS variable: --wm-rating-text-size"}},"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) of rating text. This creates visual separation between the text and the rating icons. Acceptable units: px.<br>CSS variable: --wm-rating-text-padding"}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of rating text (numeric or text values that appear alongside rating icons). This is typically a bright color like yellow or orange to match the selected rating stars.<br>CSS variable: --wm-rating-text-color"}}},"states":{"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled rating components. When set to 0.38, the rating appears faded to indicate it cannot be clicked. Lower values make it more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity (disabled state)"}}},"active":{"icon":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-icon-color (active state)"}},"size":{"value":"32px","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large active rating icons appear (the stars that are selected or hovered over). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size (active state)"}}}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_search_search_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"search":{"meta":{"mapping":{"selector":{"mobile":"app-search"}}},"mapping":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of search components (input fields that allow users to search for content). This determines the vertical size of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-height"}},"border":{"radius":{"value":"{space.7.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search components. This determines how rounded the corners of the search input field appear. Acceptable units: px.<br>CSS variable: --wm-search-border-radius"}},"width":{"value":"{border.width.1.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search components. This determines how thick the border around the search input field appears. Acceptable units: px.<br>CSS variable: --wm-search-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search components. This determines what color the border around the search input field appears in.<br>CSS variable: --wm-search-border-color"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search input text (the text that users type into the search field). This determines what color the search input text appears in.<br>CSS variable: --wm-search-text-color"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search input text fields. This determines what color the background of the search input field appears in.<br>CSS variable: --wm-search-text-background-color"}}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search input text. This affects how large the text appears in the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search input text. This determines which font is used for the text in the search input field.<br>CSS variable: --wm-search-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search input text. This affects how bold the text appears in the search input field.<br>CSS variable: --wm-search-text-font-weight"}}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search input text. This creates breathing room at the top of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search input text. This creates breathing room at the bottom of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search input text. This creates breathing room on the left side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search input text. This creates breathing room on the right side of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding-right"}}}},"dropdown":{"width":{"value":"90%","type":"space","attributes":{"subtype":"space","description":"Controls the width of search dropdown menu (autocomplete suggestions that appear below the search input). This determines how wide the dropdown appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-search-dropdown-width"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search dropdown menus. This determines what color the background of the dropdown appears in.<br>CSS variable: --wm-search-dropdown-background-color"}}},"border":{"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search dropdown menus. This determines how rounded the corners of the dropdown appear. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search dropdown menus. This determines what color the border around the dropdown appears in.<br>CSS variable: --wm-search-dropdown-border-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search dropdown menus. This determines how thick the border around the dropdown appears. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-width"}}}},"invalid":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of invalid search input fields (when validation fails). This determines what color the border appears in when the search input is in an invalid state, typically matching the error theme color.<br>CSS variable: --wm-search-invalid-color"}}},"btn":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search button (the button that triggers the search action). This determines what color the background of the search button appears in.<br>CSS variable: --wm-search-btn-background-color"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search button icons (icons that appear on search buttons, such as search or clear icons). This determines what color the button icons appear in.<br>CSS variable: --wm-search-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"icon","attributes":{"subtype":"icon-size","description":"Controls the size of search button icons. This affects how large the button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-btn-icon-size"}}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color of search buttons (the visual feedback when buttons are pressed). This determines what color the ripple effect appears in when the search button is clicked.<br>CSS variable: --wm-search-btn-ripple-color"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-right"}}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-width"}}},"placeholder":{"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in search input fields (hint text that appears when the field is empty). This determines what color the placeholder text appears in.<br>CSS variable: --wm-search-placeholder-color"}}}},"data-complete":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the background of data complete message appears in.<br>CSS variable: --wm-search-data-complete-background"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-right"}}},"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"}},"font":{"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"}},"family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search data complete message text (which appears after the last item or when no results are found in suggestions). This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"}},"weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"}}}}},"item":{"margin-bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of search result items (individual items in the search results list). This creates spacing between search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-margin-bottom"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search result items. This creates breathing room at the top of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search result items. This creates breathing room at the bottom of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-bottom"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search result items. This creates breathing room on the left side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search result items. This creates breathing room on the right side of search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding-right"}}},"separator":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of separators between search result items (dividers that appear between items in the search results list). This determines what color the separators appear in.<br>CSS variable: --wm-search-item-separator-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the width (thickness) of separators between search result items. This determines how thick the separators appear. Acceptable units: px.<br>CSS variable: --wm-search-item-separator-width"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search result items. This determines what color the text in search result items appears in.<br>CSS variable: --wm-search-item-text-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search result item text. This affects how large the text appears in search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search result item text. This determines which font is used for the text in search result items.<br>CSS variable: --wm-search-item-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search result item text. This affects how bold the text appears in search result items.<br>CSS variable: --wm-search-item-text-font-weight"}}}}},"clear-btn":{"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search clear button icons. This determines what color the clear button icons appear in.<br>CSS variable: --wm-search-clear-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of search clear button icons. This affects how large the clear button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-icon-size"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of search clear button. This creates breathing room at the top of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of search clear button. This creates breathing room at the bottom of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-bottom"}},"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of search clear button. This creates breathing room on the left side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of search clear button. This creates breathing room on the right side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-right"}}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of search clear button. This determines the roundness of the corners of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-border-radius"}}},"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search clear button. This determines the color of the clear button.<br>CSS variable: --wm-search-clear-btn-background-color"}}},"width":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of search clear button. This determines the width of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-width"}}}}},"appearances":{}}');
+module.exports = /*#__PURE__*/JSON.parse('{"search":{"meta":{"mapping":{"selector":{"mobile":"app-search"}}},"mapping":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of search components (input fields that allow users to search for content). This determines the vertical size of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-height"}},"border":{"radius":{"value":"{space.7.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search components. This determines how rounded the corners of the search input field appear. Acceptable units: px.<br>CSS variable: --wm-search-border-radius"}},"width":{"value":"{border.width.1.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search components. This determines how thick the border around the search input field appears. Acceptable units: px.<br>CSS variable: --wm-search-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search components. This determines what color the border around the search input field appears in.<br>CSS variable: --wm-search-border-color"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search input text (the text that users type into the search field). This determines what color the search input text appears in.<br>CSS variable: --wm-search-text-color"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search input text fields. This determines what color the background of the search input field appears in.<br>CSS variable: --wm-search-text-background-color"}}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search input text. This affects how large the text appears in the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search input text. This determines which font is used for the text in the search input field.<br>CSS variable: --wm-search-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search input text. This affects how bold the text appears in the search input field.<br>CSS variable: --wm-search-text-font-weight"}}},"padding":{"value":"{space.2.value} {space.3.value} {space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) of search input text. This creates breathing room inside the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding"}}},"dropdown":{"width":{"value":"90%","type":"space","attributes":{"subtype":"space","description":"Controls the width of search dropdown menu (autocomplete suggestions that appear below the search input). This determines how wide the dropdown appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-search-dropdown-width"}},"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search dropdown menus. This determines what color the background of the dropdown appears in.<br>CSS variable: --wm-search-dropdown-background-color"}}},"border":{"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of search dropdown menus. This determines how rounded the corners of the dropdown appear. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of search dropdown menus. This determines what color the border around the dropdown appears in.<br>CSS variable: --wm-search-dropdown-border-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of search dropdown menus. This determines how thick the border around the dropdown appears. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-width"}}}},"invalid":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of invalid search input fields (when validation fails). This determines what color the border appears in when the search input is in an invalid state, typically matching the error theme color.<br>CSS variable: --wm-search-invalid-color"}}},"btn":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search button (the button that triggers the search action). This determines what color the background of the search button appears in.<br>CSS variable: --wm-search-btn-background-color"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search button icons (icons that appear on search buttons, such as search or clear icons). This determines what color the button icons appear in.<br>CSS variable: --wm-search-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"icon","attributes":{"subtype":"icon-size","description":"Controls the size of search button icons. This affects how large the button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-btn-icon-size"}}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color of search buttons (the visual feedback when buttons are pressed). This determines what color the ripple effect appears in when the search button is clicked.<br>CSS variable: --wm-search-btn-ripple-color"}}},"padding":{"value":"{space.0.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding"}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-width"}}},"placeholder":{"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in search input fields (hint text that appears when the field is empty). This determines what color the placeholder text appears in.<br>CSS variable: --wm-search-placeholder-color"}}}},"data-complete":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the background of data complete message appears in.<br>CSS variable: --wm-search-data-complete-background"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding"}},"text":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"}},"font":{"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"}},"family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search data complete message text (which appears after the last item or when no results are found in suggestions). This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"}},"weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"}}}}},"item":{"margin-bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of search result items (individual items in the search results list). This creates spacing between search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-margin-bottom"}},"padding":{"value":"{space.2.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of search result items. This creates breathing room inside search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding"}},"separator":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of separators between search result items (dividers that appear between items in the search results list). This determines what color the separators appear in.<br>CSS variable: --wm-search-item-separator-color"}},"width":{"value":"0","type":"border","attributes":{"subtype":"border-width","description":"Controls the width (thickness) of separators between search result items. This determines how thick the separators appear. Acceptable units: px.<br>CSS variable: --wm-search-item-separator-width"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of search result items. This determines what color the text in search result items appears in.<br>CSS variable: --wm-search-item-text-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of search result item text. This affects how large the text appears in search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-text-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of search result item text. This determines which font is used for the text in search result items.<br>CSS variable: --wm-search-item-text-font-family"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of search result item text. This affects how bold the text appears in search result items.<br>CSS variable: --wm-search-item-text-font-weight"}}}}},"clear-btn":{"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of search clear button icons. This determines what color the clear button icons appear in.<br>CSS variable: --wm-search-clear-btn-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of search clear button icons. This affects how large the clear button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-icon-size"}}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) of search clear button. This creates breathing room inside the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of search clear button. This determines the roundness of the corners of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-border-radius"}}},"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of search clear button. This determines the color of the clear button.<br>CSS variable: --wm-search-clear-btn-background-color"}}},"width":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of search clear button. This determines the width of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-width"}}}}},"appearances":{}}');
 /***/ }

package/cjs/src_tokens_mobile_components_select_select_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"select":{"meta":{"selector":{"mobile":".app-select"},"states":{"active":{"selector":{"mobile":"-active-item"}}}},"mapping":{"arrow":{"button":{"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of select arrow buttons (dropdown arrows that appear in select components). This determines what color the border around the arrow button appears in.<br>CSS variable: --wm-select-arrow-button-border-color"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Controls the border style of select arrow buttons. This determines the style of the border around the arrow button (e.g., solid, dashed, none).<br>CSS variable: --wm-select-arrow-button-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of select arrow buttons. This determines how thick the border around the arrow button appears. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-border-width"}},"radius":{"value":"{radius.base.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of select arrow buttons. This determines how rounded the corners of the arrow button appear. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-border-radius"}}},"height":{"value":"12px","type":"space","attributes":{"subtype":"space","description":"Controls the height of select arrow buttons. This determines the vertical size of the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-height"}}}},"modal":{"content":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select modal content (the dropdown modal that appears when selecting options). This determines what color the background of the modal appears in.<br>CSS variable: --wm-select-modal-content-background"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of select modal content. This determines what color the border around the modal appears in.<br>CSS variable: --wm-select-modal-content-border-color"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Controls the border style of select modal content. This determines the style of the border around the modal (e.g., solid, dashed, none).<br>CSS variable: --wm-select-modal-content-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width (thickness) of select modal content. This determines how thick the border around the modal appears. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"radius":{"value":"{radius.base.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of select modal content. This determines how rounded the corners of the modal appear. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-radius"}}},"width":{"value":"90%","type":"space","attributes":{"subtype":"space","description":"Controls the width of select modal content. This determines how wide the modal appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-select-modal-content-width"}}}},"item":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of select items (individual options that appear in the select dropdown). This determines what color the text in select items appears in, typically matching the primary theme color.<br>CSS variable: --wm-select-item-color"}},"padding":{"vertical":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) of select items. This creates breathing room at the top and bottom of select items. Acceptable units: px.<br>CSS variable: --wm-select-item-padding-vertical"}},"horizontal":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) of select items. This creates breathing room on the left and right sides of select items. Acceptable units: px.<br>CSS variable: --wm-select-item-padding-horizontal"}}},"border":{"bottom":{"value":"1px","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border width (thickness) of select items. This determines how thick the bottom border appears between select items. Acceptable units: px.<br>CSS variable: --wm-select-item-border-bottom"}}}},"states":{"active":{"item":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active/selected select items (options that are currently selected or highlighted). This determines what color the text appears in for active items, typically matching the secondary theme color.<br>CSS variable: --wm-select-active-item-color"}}}}}},"appearance":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"select":{"meta":{"selector":{"mobile":".app-select"},"states":{"active":{"selector":{"mobile":"-active-item"}}}},"mapping":{"arrow-button":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of arrow button This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-padding"}},"background-color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select arrow button This determines what background color the select arrow button appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-arrow-button--background-color"}},"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"}},"height":{"value":"24px","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-selec-icon-height"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"}}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"}}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"}}}},"modal-content":{"background-color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select modal content.This determines what background color the select modal content appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-modal-content-background-color"}},"border":{"radius":{"value":"{radius.base.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"}}}},"modal-text":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"}}},"check":{"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"}},"font-size":{"value":"{icon.size.md.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"}}}}},"appearance":{}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_spinner_spinner_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"spinner":{"meta":{"mapping":{"selector":{"mobile":".app-spinner"}}},"mapping":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of spinner components. This determines how wide the spinner appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-spinner-width"}},"text":{"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of loading data messages (the text that appears with the spinner to explain what\'s loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-text-color"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of loading data messages (the text that appears with the spinner to explain what\'s loading). This affects how large the loading message text appears.<br>CSS variable: --wm-spinner-text-font-size"}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of loading data messages. This creates breathing room on the left side of the loading message text.<br>CSS variable: --wm-spinner-text-padding-left"}}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"icon","attributes":{"subtype":"icon-size","description":"Controls the size of loading spinner icons (animated indicators that show content is loading). This affects how large the spinner icons appear.<br>CSS variable: --wm-spinner-icon-size"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of loading spinner icons (animated indicators that show content is loading). This determines what color the spinner icons appear in.<br>CSS variable: --wm-spinner-icon-color"}}},"lottie":{"width":{"value":"150px","type":"font","attributes":{"subtype":"space","description":"Controls the width of spinner Lottie animations (animated graphics used as loading indicators). This determines how wide the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-width"}},"height":{"value":"150px","type":"font","attributes":{"subtype":"space","description":"Controls the height of spinner Lottie animations (animated graphics used as loading indicators). This determines how tall the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-height"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"spinner":{"meta":{"mapping":{"selector":{"mobile":".app-spinner"}}},"mapping":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of spinner components. This determines how wide the spinner appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-spinner-width"}},"text":{"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of loading data messages (the text that appears with the spinner to explain what\'s loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-text-color"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of loading data messages (the text that appears with the spinner to explain what\'s loading). This affects how large the loading message text appears.<br>CSS variable: --wm-spinner-text-font-size"}},"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) of loading data messages. This creates breathing room around the loading message text. Acceptable units: px.<br>CSS variable: --wm-spinner-text-padding"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"icon","attributes":{"subtype":"icon-size","description":"Controls the size of loading spinner icons (animated indicators that show content is loading). This affects how large the spinner icons appear.<br>CSS variable: --wm-spinner-icon-size"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of loading spinner icons (animated indicators that show content is loading). This determines what color the spinner icons appear in.<br>CSS variable: --wm-spinner-icon-color"}}},"lottie":{"width":{"value":"150px","type":"font","attributes":{"subtype":"space","description":"Controls the width of spinner Lottie animations (animated graphics used as loading indicators). This determines how wide the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-width"}},"height":{"value":"150px","type":"font","attributes":{"subtype":"space","description":"Controls the height of spinner Lottie animations (animated graphics used as loading indicators). This determines how tall the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-height"}}}},"appearances":{}}}');
 /***/ }