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

@wavemaker/foundation-css 11.15.1-rc.6451 → 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_label_label_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*******************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"label":{"meta":{"mapping":{"selector":{"mobile":".app-label"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-label"}},"variantGroups":{"size":{"h1":{"selector":{"mobile":".h1"}},"h2":{"selector":{"mobile":".h2"}},"h3":{"selector":{"mobile":".h3"}},"h4":{"selector":{"mobile":".h4"}},"h5":{"selector":{"mobile":".h5"}},"h6":{"selector":{"mobile":".h6"}},"p":{"selector":{"mobile":".p"}},"media-heading":{"selector":{"mobile":".media-heading"}}}}},"text":{"mapping":{"selector":{"mobile":".text"}},"variantGroups":{"status":{"primary":{"selector":{"mobile":".text-primary"}},"secondary":{"selector":{"mobile":".text-secondary"}},"success":{"selector":{"mobile":".text-success"}},"warning":{"selector":{"mobile":".text-warning"}},"danger":{"selector":{"mobile":".text-danger"}},"info":{"selector":{"mobile":".text-info"}},"muted":{"selector":{"mobile":".text-muted"}}}}},"label":{"mapping":{"selector":{"mobile":".label"}},"variantGroups":{"status":{"primary":{"selector":{"mobile":".label-primary"}},"secondary":{"selector":{"mobile":".label-secondary"}},"success":{"selector":{"mobile":".label-success"}},"warning":{"selector":{"mobile":".label-warning"}},"danger":{"selector":{"mobile":".label-danger"}},"info":{"selector":{"mobile":".label-info"}},"muted":{"selector":{"mobile":".label-muted"}}}}}}},"mapping":{"color":{"value":"{color.on-surface.@.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"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when label text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-label-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 label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"}},"margin":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-bottom"}}},"asterisk":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the asterisk symbol (*) that appears in required field labels. This determines what color the asterisk appears in, typically red to indicate required fields.<br>CSS variable: --wm-label-asterisk-color"}}},"padding":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-bottom"}}},"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-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold 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-label-font-weight"}},"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"}},"background-color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of labels (text elements that describe or identify other content). This determines what background color the label appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-background-color"}},"border":{"radius":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of label (alert boxes that display notifications, warnings, or information). This makes the label appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around label. This determines how thick the outline appears around the label. Acceptable units: px.<br>CSS variable: --wm-label-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around label. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-label-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around label. This determines the color of the outline that defines the label.<br>CSS variable: --wm-label-border-color"}}}},"appearances":{"default":{"variantGroups":{"size":{"p":{"font-size":{"value":"{p.font-size.value}","type":"font"},"font-weight":{"value":"{p.font-weight.value}","type":"font"},"font-family":{"value":"{p.font-family.value}","type":"font"},"line-height":{"value":"{p.line-height.value}","type":"font"},"letter-spacing":{"value":"{p.letter-spacing.value}","type":"font"}},"h1":{"font-size":{"value":"{h1.font-size.value}","type":"font"},"font-weight":{"value":"{h1.font-weight.value}","type":"font"},"font-family":{"value":"{h1.font-family.value}","type":"font"},"line-height":{"value":"{h1.line-height.value}","type":"font"},"letter-spacing":{"value":"{h1.letter-spacing.value}","type":"font"}},"h2":{"font-size":{"value":"{h2.font-size.value}","type":"font"},"font-weight":{"value":"{h2.font-weight.value}","type":"font"},"font-family":{"value":"{h2.font-family.value}","type":"font"},"line-height":{"value":"{h2.line-height.value}","type":"font"},"letter-spacing":{"value":"{h2.letter-spacing.value}","type":"font"}},"h3":{"font-size":{"value":"{h3.font-size.value}","type":"font"},"font-weight":{"value":"{h3.font-weight.value}","type":"font"},"font-family":{"value":"{h3.font-family.value}","type":"font"},"line-height":{"value":"{h3.line-height.value}","type":"font"},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font"}},"h4":{"font-size":{"value":"{h4.font-size.value}","type":"font"},"font-weight":{"value":"{h4.font-weight.value}","type":"font"},"font-family":{"value":"{h4.font-family.value}","type":"font"},"line-height":{"value":"{h4.line-height.value}","type":"font"},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font"}},"h5":{"font-size":{"value":"{h5.font-size.value}","type":"font"},"font-weight":{"value":"{h5.font-weight.value}","type":"font"},"font-family":{"value":"{h5.font-family.value}","type":"font"},"line-height":{"value":"{h5.line-height.value}","type":"font"},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font"}},"h6":{"font-size":{"value":"{h6.font-size.value}","type":"font"},"font-weight":{"value":"{h6.font-weight.value}","type":"font"},"font-family":{"value":"{h6.font-family.value}","type":"font"},"line-height":{"value":"{h6.line-height.value}","type":"font"},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font"}},"media-heading":{"font-size":{"value":"{body.large.font-size.value}","type":"font"}}}}},"text":{"variantGroups":{"status":{"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"muted":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}}}},"label":{"mapping":{"padding":{"left":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"right":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-right"}},"top":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-bottom"}}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold label badge text appears. When set to 700, the label text appears bold to emphasize the label badge.<br>CSS variable: --wm-label-font-weight"}},"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of label badges (colored label containers). This makes the label badges appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"}}}},"variantGroups":{"status":{"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background-color":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"}},"warning":{"background-color":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background-color":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"}},"info":{"background-color":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"}},"muted":{"background-color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"color":{"value":"{color.surface.variant.@.value}","type":"color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"label":{"meta":{"mapping":{"selector":{"mobile":".app-label"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-label"}},"variantGroups":{"size":{"h1":{"selector":{"mobile":".h1"}},"h2":{"selector":{"mobile":".h2"}},"h3":{"selector":{"mobile":".h3"}},"h4":{"selector":{"mobile":".h4"}},"h5":{"selector":{"mobile":".h5"}},"h6":{"selector":{"mobile":".h6"}},"p":{"selector":{"mobile":".p"}},"media-heading":{"selector":{"mobile":".media-heading"}}}}},"text":{"mapping":{"selector":{"mobile":".text"}},"variantGroups":{"status":{"primary":{"selector":{"mobile":".text-primary"}},"secondary":{"selector":{"mobile":".text-secondary"}},"success":{"selector":{"mobile":".text-success"}},"warning":{"selector":{"mobile":".text-warning"}},"danger":{"selector":{"mobile":".text-danger"}},"info":{"selector":{"mobile":".text-info"}},"muted":{"selector":{"mobile":".text-muted"}}}}},"label":{"mapping":{"selector":{"mobile":".label"}},"variantGroups":{"status":{"primary":{"selector":{"mobile":".label-primary"}},"secondary":{"selector":{"mobile":".label-secondary"}},"success":{"selector":{"mobile":".label-success"}},"warning":{"selector":{"mobile":".label-warning"}},"danger":{"selector":{"mobile":".label-danger"}},"info":{"selector":{"mobile":".label-info"}},"muted":{"selector":{"mobile":".label-muted"}}}}}}},"mapping":{"color":{"value":"{color.on-surface.@.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"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when label text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-label-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 label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"}},"asterisk":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the asterisk symbol (*) that appears in required field labels. This determines what color the asterisk appears in, typically red to indicate required fields.<br>CSS variable: --wm-label-asterisk-color"}}},"padding":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-bottom"}}},"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-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold 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-label-font-weight"}},"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"}},"background-color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of labels (text elements that describe or identify other content). This determines what background color the label appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-background-color"}},"border":{"radius":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of label (alert boxes that display notifications, warnings, or information). This makes the label appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around label. This determines how thick the outline appears around the label. Acceptable units: px.<br>CSS variable: --wm-label-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around label. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-label-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around label. This determines the color of the outline that defines the label.<br>CSS variable: --wm-label-border-color"}}}},"appearances":{"default":{"variantGroups":{"size":{"p":{"font-size":{"value":"{p.font-size.value}","type":"font"},"font-weight":{"value":"{p.font-weight.value}","type":"font"},"font-family":{"value":"{p.font-family.value}","type":"font"},"line-height":{"value":"{p.line-height.value}","type":"font"},"letter-spacing":{"value":"{p.letter-spacing.value}","type":"font"}},"h1":{"font-size":{"value":"{h1.font-size.value}","type":"font"},"font-weight":{"value":"{h1.font-weight.value}","type":"font"},"font-family":{"value":"{h1.font-family.value}","type":"font"},"line-height":{"value":"{h1.line-height.value}","type":"font"},"letter-spacing":{"value":"{h1.letter-spacing.value}","type":"font"}},"h2":{"font-size":{"value":"{h2.font-size.value}","type":"font"},"font-weight":{"value":"{h2.font-weight.value}","type":"font"},"font-family":{"value":"{h2.font-family.value}","type":"font"},"line-height":{"value":"{h2.line-height.value}","type":"font"},"letter-spacing":{"value":"{h2.letter-spacing.value}","type":"font"}},"h3":{"font-size":{"value":"{h3.font-size.value}","type":"font"},"font-weight":{"value":"{h3.font-weight.value}","type":"font"},"font-family":{"value":"{h3.font-family.value}","type":"font"},"line-height":{"value":"{h3.line-height.value}","type":"font"},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font"}},"h4":{"font-size":{"value":"{h4.font-size.value}","type":"font"},"font-weight":{"value":"{h4.font-weight.value}","type":"font"},"font-family":{"value":"{h4.font-family.value}","type":"font"},"line-height":{"value":"{h4.line-height.value}","type":"font"},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font"}},"h5":{"font-size":{"value":"{h5.font-size.value}","type":"font"},"font-weight":{"value":"{h5.font-weight.value}","type":"font"},"font-family":{"value":"{h5.font-family.value}","type":"font"},"line-height":{"value":"{h5.line-height.value}","type":"font"},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font"}},"h6":{"font-size":{"value":"{h6.font-size.value}","type":"font"},"font-weight":{"value":"{h6.font-weight.value}","type":"font"},"font-family":{"value":"{h6.font-family.value}","type":"font"},"line-height":{"value":"{h6.line-height.value}","type":"font"},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font"}},"media-heading":{"font-size":{"value":"{body.large.font-size.value}","type":"font"}}}}},"text":{"variantGroups":{"status":{"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"muted":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}}}},"label":{"mapping":{"padding":{"left":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"right":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-right"}},"top":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-bottom"}}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold label badge text appears. When set to 700, the label text appears bold to emphasize the label badge.<br>CSS variable: --wm-label-font-weight"}},"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of label badges (colored label containers). This makes the label badges appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"}}}},"variantGroups":{"status":{"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background-color":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"}},"warning":{"background-color":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background-color":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"}},"info":{"background-color":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"}},"muted":{"background-color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"color":{"value":"{color.surface.variant.@.value}","type":"color"}}}}}}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \*****************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"list":{"meta":{"mapping":{"selector":{"mobile":".app-list"}}},"mapping":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list (boxes that hold content). This is the main background color that appears behind all list content.<br>CSS variable: --wm-list-background-color"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside list. This creates breathing room above the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside list. This creates breathing room below the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-bottom"}},"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside list. This creates breathing room on the left side of the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside list. This creates breathing room on the right side of the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-right"}}},"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around list container \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-list-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around list. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-list-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around list. This creates a colored border around the list to define its boundaries.<br>CSS variable: --wm-list-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the list. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-list-border-radius"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"list":{"meta":{"mapping":{"selector":{"mobile":".app-list"}}},"mapping":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list (boxes that hold content). This is the main background color that appears behind all list content.<br>CSS variable: --wm-list-background-color"}}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the list container. This creates breathing room around the list content. Acceptable units: px.<br>CSS variable: --wm-list-padding"}},"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around list container \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-list-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around list. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-list-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around list. This creates a colored border around the list to define its boundaries.<br>CSS variable: --wm-list-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the list. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-list-border-radius"}}}},"appearances":{}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \*******************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"login":{"meta":{"mapping":{"selector":{"mobile":".app-login"}}},"mapping":{"error":{"text":{"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of login error messages (messages that appear when login fails or validation errors occur). This determines what color the error message text appears in, typically a contrasting color to ensure visibility against the error background.<br>CSS variable: --wm-login-error-text-color"}}},"background":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of login error messages (messages that appear when login fails or validation errors occur). This is the main background color that appears behind the error message text.<br>CSS variable: --wm-login-error-background-color"}}},"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around login error messages. This determines the color of the outline that defines the error message container.<br>CSS variable: --wm-login-error-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of login error messages. This makes the error messages appear with rounded corners for a softer appearance.<br>CSS variable: --wm-login-error-border-radius"}}}},"form":{"padding":{"top":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside the login form container. This creates breathing room above the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-top"}},"bottom":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside the login form container. This creates breathing room below the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-bottom"}},"left":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside the login form container. This creates breathing room on the left side of the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-left"}},"right":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside the login form container. This creates breathing room on the right side of the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-right"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"login":{"meta":{"mapping":{"selector":{"mobile":".app-login"}}},"mapping":{"error":{"text":{"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of login error messages (messages that appear when login fails or validation errors occur). This determines what color the error message text appears in, typically a contrasting color to ensure visibility against the error background.<br>CSS variable: --wm-login-error-text-color"}}},"background":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of login error messages (messages that appear when login fails or validation errors occur). This is the main background color that appears behind the error message text.<br>CSS variable: --wm-login-error-background-color"}}},"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around login error messages. This determines the color of the outline that defines the error message container.<br>CSS variable: --wm-login-error-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of login error messages. This makes the error messages appear with rounded corners for a softer appearance.<br>CSS variable: --wm-login-error-border-radius"}}}},"form":{"padding":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the login form container. This creates breathing room around the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding"}}}},"appearances":{}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"lottie":{"meta":{"mapping":{"selector":{"mobile":".app-lottie"}}},"mapping":{"background":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-background-color"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside lottie. This creates breathing room above the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside lottie. This creates breathing room below the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside lottie. This creates breathing room on the left side of the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside lottie. This creates breathing room on the right side of the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-right"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"lottie":{"meta":{"mapping":{"selector":{"mobile":".app-lottie"}}},"mapping":{"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-background-color"}}},"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding around the lottie. First value is for top/bottom, second value is for left/right.<br>CSS variables: --wm-lottie-padding-top, --wm-lottie-padding-right, --wm-lottie-padding-bottom, --wm-lottie-padding-left"}},"content":{"height":{"value":"{spacer.7.value}","type":"space"},"width":{"value":"100%","type":"space"},"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for the content of lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-content-background-color"}}}}},"appearances":{}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"message":{"meta":{"mapping":{"selector":{"mobile":".app-message"}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"selector":{"mobile":".alert-success"}},"info":{"selector":{"mobile":".alert-info"}},"warning":{"selector":{"mobile":".alert-warning"}},"error":{"selector":{"mobile":".alert-error"}},"loading":{"selector":{"mobile":".alert-loading"}}}}}}},"mapping":{"container":{"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of message containers (alert boxes that display notifications, warnings, or information). This makes the message containers appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-container-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around message containers. This determines how thick the outline appears around the message container. Acceptable units: px.<br>CSS variable: --wm-message-container-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around message containers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-message-container-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around message containers. This determines the color of the outline that defines the message container.<br>CSS variable: --wm-message-container-border-color"}}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of message containers (alert boxes that display notifications, warnings, or information). This is the main background color that appears behind the message content.<br>CSS variable: --wm-message-container-background"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside message containers. This creates breathing room above the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside message containers. This creates breathing room below the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside message containers. This creates breathing room on the left side of the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside message containers. This creates breathing room on the right side of the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-right"}}}},"text-wrapper":{"padding":{"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside the message text wrapper (the container that holds the message text). This creates breathing room on the left side of the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding-left"}}}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"}},"title":{"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of message title text (the heading text that appears at the top of message containers). This affects how large the title text appears.<br>CSS variable: --wm-message-title-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold message title text appears. When set to 700, the title text appears bold to emphasize the message heading.<br>CSS variable: --wm-message-title-font-weight"}}},"padding":{"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding-bottom"}}}},"text":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of message text (the main content text that appears in message containers). This affects how large the message text appears.<br>CSS variable: --wm-message-text-size"}}},"icon":{"size":{"value":"20px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of message icons (icons that appear alongside message content to indicate the message type). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-message-icon-size"}}},"close-btn":{"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside the message close button. This creates breathing room on the left side of the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside the message close button. This creates breathing room on the right side of the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding-right"}}},"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the message close button. This makes the close button appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-close-btn-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the message close button. When transparent, no border is visible. When filled with a color, the close button has a visible outline.<br>CSS variable: --wm-message-close-btn-border-color"}}},"icon":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the close button icon (the X or close symbol that appears in the message close button). This affects how large the close icon appears.<br>CSS variable: --wm-message-close-btn-icon-size"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the message close button. When transparent, only the close icon is visible. When filled with a color, the close button appears with a colored background.<br>CSS variable: --wm-message-close-btn-background-color"}}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when the message close button is pressed or tapped. When transparent, no ripple effect is visible. When filled with a color, a ripple animation appears on interaction.<br>CSS variable: --wm-message-close-btn-ripple-color"}}}}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"error":{"container":{"background":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"color":{"value":"{color.on-error.@.value}","type":"color"}},"loading":{"container":{"background":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"color":{"value":"{color.on-primary.@.value}","type":"color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"message":{"meta":{"mapping":{"selector":{"mobile":".app-message"}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"selector":{"mobile":".alert-success"}},"info":{"selector":{"mobile":".alert-info"}},"warning":{"selector":{"mobile":".alert-warning"}},"error":{"selector":{"mobile":".alert-error"}},"loading":{"selector":{"mobile":".alert-loading"}}}}}}},"mapping":{"container":{"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of message containers (alert boxes that display notifications, warnings, or information). This makes the message containers appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-container-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around message containers. This determines how thick the outline appears around the message container. Acceptable units: px.<br>CSS variable: --wm-message-container-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around message containers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-message-container-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around message containers. This determines the color of the outline that defines the message container.<br>CSS variable: --wm-message-container-border-color"}}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of message containers (alert boxes that display notifications, warnings, or information). This is the main background color that appears behind the message content.<br>CSS variable: --wm-message-container-background"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside message containers. This creates breathing room above the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-top"}}},"text-wrapper":{"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) inside the message text wrapper (the container that holds the message text). This creates breathing room around the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding"}}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"}},"title":{"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of message title text (the heading text that appears at the top of message containers). This affects how large the title text appears.<br>CSS variable: --wm-message-title-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold message title text appears. When set to 700, the title text appears bold to emphasize the message heading.<br>CSS variable: --wm-message-title-font-weight"}}},"padding":{"value":"{space.0.value} {space.0.value} {space.1.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"}}},"text":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of message text (the main content text that appears in message containers). This affects how large the message text appears.<br>CSS variable: --wm-message-text-size"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"}}},"icon":{"size":{"value":"20px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of message icons (icons that appear alongside message content to indicate the message type). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-message-icon-size"}}},"close-btn":{"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside the message close button. This creates breathing room around the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding"}},"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the message close button. This makes the close button appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-close-btn-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the message close button. When transparent, no border is visible. When filled with a color, the close button has a visible outline.<br>CSS variable: --wm-message-close-btn-border-color"}}},"icon":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the close button icon (the X or close symbol that appears in the message close button). This affects how large the close icon appears.<br>CSS variable: --wm-message-close-btn-icon-size"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the message close button. When transparent, only the close icon is visible. When filled with a color, the close button appears with a colored background.<br>CSS variable: --wm-message-close-btn-background-color"}}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when the message close button is pressed or tapped. When transparent, no ripple effect is visible. When filled with a color, a ripple animation appears on interaction.<br>CSS variable: --wm-message-close-btn-ripple-color"}}}}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"error":{"container":{"background":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"color":{"value":"{color.on-error.@.value}","type":"color"}},"loading":{"container":{"background":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"color":{"value":"{color.on-primary.@.value}","type":"color"}}}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_modal-dialog_modal-dialog_json.foundation-css.cjs CHANGED Viewed

@@ -7,7 +7,7 @@
   \*********************************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"modal":{"meta":{"mapping":{"selector":{"mobile":".app-dialog.root"}}},"mapping":{"margin":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the outer margin (spacing) around modal dialogs (overlay windows that appear on top of the main content). This creates breathing room around the dialog container. Acceptable units: px.<br>CSS variable: --wm-modal-margin"}},"z-index":{"value":"1000","type":"radius","attributes":{"subtype":"opacity","description":"Controls the stacking order of modal dialogs (determines which elements appear on top when multiple elements overlap). Higher values make the dialog appear above other elements. This ensures modals are always visible above page content.<br>CSS variable: --wm-modal-z-index"}},"min-width":{"value":"320px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of modal dialogs. This ensures the dialog is always wide enough to be visible and properly displayed. Acceptable units: px.<br>CSS variable: --wm-modal-min-width"}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of modal dialogs (overlay windows that appear on top of the main content). This is the main background color that appears behind the dialog content.<br>CSS variable: --wm-modal-background"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of modal dialogs. This makes the dialogs appear with rounded corners for a softer appearance.<br>CSS variable: --wm-modal-radius"}},"header":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog headers (the top section that contains the title and close button). This creates breathing room around the header content. Acceptable units: px.<br>CSS variable: --wm-modal-header-padding"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border at the bottom of modal dialog headers. This determines how thick the separator line appears between the header and body. Acceptable units: px.<br>CSS variable: --wm-modal-header-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border at the bottom of modal dialog headers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-modal-header-border-style"}},"color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border at the bottom of modal dialog headers. This determines the color of the separator line between the header and body.<br>CSS variable: --wm-modal-header-border-color"}}},"close-btn":{"border-width":{"value":"0","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the modal dialog close button. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":" "}},"border-color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":" "}},"font-size":{"value":"14px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the close button icon (the X or close symbol that appears in the modal dialog header). This affects how large the close icon appears. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-font-size"}},"color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of the close button icon in modal dialog headers. This determines what color the close icon appears in.<br>CSS variable: --wm-modal-header-close-btn-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}},"title":{"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of modal dialog title text (the heading text that appears at the top of modal dialogs). This affects how large the title text appears.<br>CSS variable: --wm-modal-title-font-size"}},"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for modal dialog title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-modal-title-font-family"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold modal dialog title text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when modal dialog title text wraps to multiple lines. This ensures proper spacing for the title text.<br>CSS variable: --wm-modal-title-line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in modal dialog title text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-modal-title-letter-spacing"}},"color":{"value":"#000000","type":"color","attributes":{"subtype":"color","description":" "}}},"body":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog body sections (the main content area of the dialog). This creates breathing room around the body content. Acceptable units: px.<br>CSS variable: --wm-modal-body-padding"}}},"footer":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog footers (the bottom section that contains action buttons). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-modal-footer-padding"}}},"icon":{"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of modal dialog icons (icons that appear in the dialog to indicate the dialog type or provide visual context). This affects how large the icons appear.<br>CSS variable: --wm-modal-icon-font-size"}},"color":{"value":"#000000","type":"color","attributes":{"subtype":"color","description":" "}}},"description":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":" "}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":" "}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold modal dialog title text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"}},"color":{"value":"#000000","type":"color","attributes":{"subtype":"color","description":" "}}},"btn":{"ok":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":" "}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}},"cancel":{"background":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":" "}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"modal":{"meta":{"mapping":{"selector":{"mobile":".app-dialog.root"}}},"mapping":{"z-index":{"value":"1000","type":"radius","attributes":{"subtype":"opacity","description":"Controls the stacking order of modal dialogs (determines which elements appear on top when multiple elements overlap). Higher values make the dialog appear above other elements. This ensures modals are always visible above page content.<br>CSS variable: --wm-modal-z-index"}},"dialog":{"overlay":{"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of modal overlay dialog (overlay windows that appear behind of the main content). This is the main background color that appears behind the dialog .<br>CSS variable: --wm-modal-dialog-overlay-background"}}}},"min-width":{"value":"320px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of modal dialogs. This ensures the dialog is always wide enough to be visible and properly displayed. Acceptable units: px.<br>CSS variable: --wm-modal-min-width"}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of modal dialogs (overlay windows that appear on top of the main content). This is the main background color that appears behind the dialog content.<br>CSS variable: --wm-modal-background"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of modal dialogs. This makes the dialogs appear with rounded corners for a softer appearance.<br>CSS variable: --wm-modal-radius"}},"header":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog headers (the top section that contains the title and close button). This creates breathing room around the header content. Acceptable units: px.<br>CSS variable: --wm-modal-header-padding"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border at the bottom of modal dialog headers. This determines how thick the separator line appears between the header and body. Acceptable units: px.<br>CSS variable: --wm-modal-header-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border at the bottom of modal dialog headers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-modal-header-border-style"}},"color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border at the bottom of modal dialog headers. This determines the color of the separator line between the header and body.<br>CSS variable: --wm-modal-header-border-color"}}},"close-btn":{"border-width":{"value":"0","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the modal dialog close button. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":" "}},"border-color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":" "}},"font-size":{"value":"14px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the close button icon (the X or close symbol that appears in the modal dialog header). This affects how large the close icon appears. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-font-size"}},"color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of the close button icon in modal dialog headers. This determines what color the close icon appears in.<br>CSS variable: --wm-modal-header-close-btn-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}},"title":{"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of modal dialog title text (the heading text that appears at the top of modal dialogs). This affects how large the title text appears.<br>CSS variable: --wm-modal-title-font-size"}},"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for modal dialog title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-modal-title-font-family"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold modal dialog title text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when modal dialog title text wraps to multiple lines. This ensures proper spacing for the title text.<br>CSS variable: --wm-modal-title-line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in modal dialog title text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-modal-title-letter-spacing"}},"color":{"value":"#000000","type":"color","attributes":{"subtype":"color","description":" "}}},"body":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog body sections (the main content area of the dialog). This creates breathing room around the body content. Acceptable units: px.<br>CSS variable: --wm-modal-body-padding"}}},"footer":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog footers (the bottom section that contains action buttons). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-modal-footer-padding"}}},"icon":{"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of modal dialog icons (icons that appear in the dialog to indicate the dialog type or provide visual context). This affects how large the icons appear.<br>CSS variable: --wm-modal-icon-font-size"}},"color":{"value":"#000000","type":"color","attributes":{"subtype":"color","description":" "}}},"description":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of modal description. This is the main background color that appears behind the description.<br>CSS variable: --wm-modal-description-background-color"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog description (the top section that contains the title and close button). This creates breathing room around the description content. Acceptable units: px.<br>CSS variable: --wm-modal-description-padding"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border at the bottom of modal dialog description. This determines how thick the separator line appears between the header and body. Acceptable units: px.<br>CSS variable: --wm-modal-description-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border at the bottom of modal dialog description. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-modal-description-border-style"}},"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border at the bottom of modal dialog description. This determines the color of the separator line between the header and body.<br>CSS variable: --wm-modal-description-border-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":" "}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":" "}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold modal dialog title text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"}},"color":{"value":"#000000","type":"color","attributes":{"subtype":"color","description":" "}}},"btn":{"ok":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":" "}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}},"cancel":{"background":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":" "}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":" "}}}}}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \***************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"nav":{"meta":{"mapping":{"selector":{"mobile":".app-navbar"}}},"mapping":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation (the main panel that contains navigation items). This is the main background color that appears behind the navigation items.<br>CSS variable: --wm-nav-background"}},"left-panel":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the left panel in navigation. This is the background color for the navigation panel area.<br>CSS variable: --wm-nav-left-panel-background"}}},"partial":{"background":{"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"}}},"partial-container":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the partial container in navigation. This is the background color for the partial container.<br>CSS variable: --wm-nav-partial-container-background"}}},"navbar":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the navbar in navigation. This is the background color for the navbar.<br>CSS variable: --wm-nav-navbar-background"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"nav":{"meta":{"mapping":{"selector":{"mobile":".app-navbar"}}},"mapping":{}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"navbar":{"meta":{"mapping":{"selector":{"mobile":".app-appnavbar"}}},"mapping":{"height":{"value":"80px","type":"space","attributes":{"subtype":"space","description":"Controls the height of navigation bars (top bars that contain navigation elements, icons, and content). This determines how tall the navbar appears. Acceptable units: px.<br>CSS variable: --wm-navbar-height"}},"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation bars (top bars that contain navigation elements, icons, and content). This is the main background color that appears behind the navbar content.<br>CSS variable: --wm-navbar-background-color"}},"padding":{"left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside navigation bars. This creates breathing room on the left side of the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside navigation bars. This creates breathing room on the right side of the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-right"}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside navigation bars. This creates breathing room above the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-top"}},"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside navigation bars. This creates breathing room below the navbar content. Acceptable units: px.<br>CSS variable: --wm-navbar-padding-bottom"}}},"left-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of left icons in navigation bars (icons that appear on the left side of the navbar). This determines what color the left icons appear in.<br>CSS variable: --wm-navbar-left-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of left icons in navigation bars. This affects how large the left icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-left-icon-size"}}},"back-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of back icons in navigation bars (icons that navigate back to the previous screen). This determines what color the back icons appear in.<br>CSS variable: --wm-navbar-back-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of back icons in navigation bars. This affects how large the back icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-back-icon-size"}}},"menu-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of menu icons in navigation bars (icons that open navigation menus). This determines what color the menu icons appear in.<br>CSS variable: --wm-navbar-menu-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of menu icons in navigation bars. This affects how large the menu icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-menu-icon-size"}}},"popover-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of popover icons in navigation bars (icons that open popover menus). This determines what color the popover icons appear in.<br>CSS variable: --wm-navbar-popover-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of popover icons in navigation bars. This affects how large the popover icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-popover-icon-size"}}},"image":{"width":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the width of images in navigation bars (logos or images that appear in the navbar). This determines how wide the navbar images appear. Acceptable units: px.<br>CSS variable: --wm-navbar-image-width"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the height of images in navigation bars (logos or images that appear in the navbar). This determines how tall the navbar images appear. Acceptable units: px.<br>CSS variable: --wm-navbar-image-height"}}},"content":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation bar content (the main text that appears in the navbar). This determines what color the navbar content text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-content-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation bar content text. This affects how large the navbar content text appears.<br>CSS variable: --wm-navbar-content-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation bar content text. This determines whether the navbar content text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-content-font-family"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation bar content text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-content-font-weight"}}}},"badge":{"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of badges in navigation bars (small indicators that appear on navbar elements). When transparent, only the badge text is visible. When filled with a color, the badge appears with a colored background.<br>CSS variable: --wm-navbar-badge-background-color"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of badges in navigation bars. This determines what color the badge text appears in, typically matching the primary theme color.<br>CSS variable: --wm-navbar-badge-color"}},"margin-left":{"value":"4px","type":"space","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) of badges in navigation bars. This creates spacing to the left of badges, separating them from adjacent content. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-margin-left"}}},"anchor":{"padding":{"right":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside navigation bar anchor elements (clickable links in the navbar). This creates breathing room on the right side of the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-right"}},"left":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside navigation bar anchor elements. This creates breathing room on the left side of the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-left"}},"top":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside navigation bar anchor elements. This creates breathing room above the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-top"}},"bottom":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside navigation bar anchor elements. This creates breathing room below the anchor content. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding-bottom"}}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation bar anchor text (clickable link text in the navbar). This determines what color the anchor text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-anchor-text-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation bar anchor text. This affects how large the anchor text appears.<br>CSS variable: --wm-navbar-anchor-text-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation bar anchor text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-anchor-text-font-family"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation bar anchor text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-anchor-text-font-weight"}}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in navigation bar anchor elements. This determines what color the anchor icons appear in.<br>CSS variable: --wm-navbar-anchor-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in navigation bar anchor elements. This affects how large the anchor icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-icon-size"}}}},"button":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons in navigation bars. This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-button-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of button text in navigation bars. This affects how large the button text appears.<br>CSS variable: --wm-navbar-button-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for button text in navigation bars. This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-button-font-family"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold button text in navigation bars appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-button-font-weight"}}}},"border":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of navigation bars. This determines what color the border appears in.<br>CSS variable: --wm-navbar-border-color"}},"style":{"value":"{border.style.base.value}","type":"border","attributes":{"subtype":"border-style","description":"Controls the style of the border of navigation bars. This determines whether the border appears as solid, dashed, or dotted.<br>CSS variable: --wm-navbar-border-style"}},"radius":{"value":"0px","type":"border","attributes":{"subtype":"border-radius","description":"Controls the radius of the border of navigation bars. This determines how rounded the border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-radius"}},"width":{"top":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the top border width of navigation bars. This determines how thick the top border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-top"}},"bottom":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the bottom border width of navigation bars. This determines how thick the bottom border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-bottom"}},"left":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the left border width of navigation bars. This determines how thick the left border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-left"}},"right":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the right border width of navigation bars. This determines how thick the right border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-right"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"navbar":{"meta":{"mapping":{"selector":{"mobile":".app-appnavbar"}}},"mapping":{"height":{"value":"80px","type":"space","attributes":{"subtype":"space","description":"Controls the height of navigation bars (top bars that contain navigation elements, icons, and content). This determines how tall the navbar appears. Acceptable units: px.<br>CSS variable: --wm-navbar-height"}},"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation bars (top bars that contain navigation elements, icons, and content). This is the main background color that appears behind the navbar content.<br>CSS variable: --wm-navbar-background-color"}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside navigation bars (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-padding"}},"left-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of left icons in navigation bars (icons that appear on the left side of the navbar). This determines what color the left icons appear in.<br>CSS variable: --wm-navbar-left-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of left icons in navigation bars. This affects how large the left icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-left-icon-size"}}},"back-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of back icons in navigation bars (icons that navigate back to the previous screen). This determines what color the back icons appear in.<br>CSS variable: --wm-navbar-back-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of back icons in navigation bars. This affects how large the back icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-back-icon-size"}}},"menu-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of menu icons in navigation bars (icons that open navigation menus). This determines what color the menu icons appear in.<br>CSS variable: --wm-navbar-menu-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of menu icons in navigation bars. This affects how large the menu icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-menu-icon-size"}}},"popover-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of popover icons in navigation bars (icons that open popover menus). This determines what color the popover icons appear in.<br>CSS variable: --wm-navbar-popover-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of popover icons in navigation bars. This affects how large the popover icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-popover-icon-size"}}},"image":{"width":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the width of images in navigation bars (logos or images that appear in the navbar). This determines how wide the navbar images appear. Acceptable units: px.<br>CSS variable: --wm-navbar-image-width"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the height of images in navigation bars (logos or images that appear in the navbar). This determines how tall the navbar images appear. Acceptable units: px.<br>CSS variable: --wm-navbar-image-height"}}},"content":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation bar content (the main text that appears in the navbar). This determines what color the navbar content text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-content-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation bar content text. This affects how large the navbar content text appears.<br>CSS variable: --wm-navbar-content-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation bar content text. This determines whether the navbar content text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-content-font-family"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation bar content text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-content-font-weight"}}}},"badge":{"background-color":{"value":"{color.inverse.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of badges in navigation bars (small indicators that appear on navbar elements). When transparent, only the badge text is visible. When filled with a color, the badge appears with a colored background.<br>CSS variable: --wm-navbar-badge-background-color"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of badges in navigation bars. This determines what color the badge text appears in, typically matching the primary theme color.<br>CSS variable: --wm-navbar-badge-color"}},"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of badges in navigation bars. This determines how tall the badge appears. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-height"}},"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of badges in navigation bars. This determines how wide the badge appears. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-width"}},"font":{"size":{"value":"{p.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of badge text in navigation bars. This affects how large the badge text appears.<br>CSS variable: --wm-navbar-badge-font-size"}}},"line-height":{"value":"{body.large.line-height}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of badge text in navigation bars. This affects the vertical spacing of badge text.<br>CSS variable: --wm-navbar-badge-line-height"}},"border":{"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius. IMPORTANT: border.radius value should always be half of the height & width. This determines how rounded the badge corners appear. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-border-radius"}}},"margin-left":{"value":"4px","type":"space","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) of badges in navigation bars. This creates spacing to the left of badges, separating them from adjacent content. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-margin-left"}}},"anchor":{"padding":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside navigation bar anchor elements (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding"}},"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation bar anchor text (clickable link text in the navbar). This determines what color the anchor text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-anchor-text-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation bar anchor text. This affects how large the anchor text appears.<br>CSS variable: --wm-navbar-anchor-text-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation bar anchor text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-anchor-text-font-family"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation bar anchor text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-anchor-text-font-weight"}}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in navigation bar anchor elements. This determines what color the anchor icons appear in.<br>CSS variable: --wm-navbar-anchor-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in navigation bar anchor elements. This affects how large the anchor icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-icon-size"}}}},"button":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons in navigation bars. This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-button-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of button text in navigation bars. This affects how large the button text appears.<br>CSS variable: --wm-navbar-button-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for button text in navigation bars. This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-button-font-family"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold button text in navigation bars appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-button-font-weight"}}}},"border":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of navigation bars. This determines what color the border appears in.<br>CSS variable: --wm-navbar-border-color"}},"style":{"value":"{border.style.base.value}","type":"border","attributes":{"subtype":"border-style","description":"Controls the style of the border of navigation bars. This determines whether the border appears as solid, dashed, or dotted.<br>CSS variable: --wm-navbar-border-style"}},"radius":{"value":"0px","type":"border","attributes":{"subtype":"border-radius","description":"Controls the radius of the border of navigation bars. This determines how rounded the border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width of navigation bars (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-border-width"}}}}}}');
 /***/ }

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

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
-module.exports = /*#__PURE__*/JSON.parse('{"navitem":{"meta":{"mapping":{"selector":{"mobile":".app-navitem"},"states":{"active":{"selector":{"mobile":"-active,.app-navitem-active.app-navitem-anchor"}}}}},"mapping":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items (individual menu items in navigation menus). This is the main background color that appears behind each navigation item.<br>CSS variable: --wm-nav-item-background"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation item text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-nav-item-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when navigation item text wraps to multiple lines. This ensures proper spacing for the navigation text.<br>CSS variable: --wm-nav-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in navigation item text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-nav-item-letter-spacing"}},"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons within navigation items. This ensures icons are appropriately sized relative to the navigation text for visual balance.<br>CSS variable: --wm-nav-item-icon-size"}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of navigation items (individual menu items in navigation menus). This determines what color the navigation icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-icon-color"}},"padding":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding of the icon in navigation items. This creates breathing room on the left side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding of the icon in navigation items. This creates breathing room on the right side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding of the icon in navigation items. This creates breathing room on the top side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding of the icon in navigation items. This creates breathing room on the bottom side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-bottom"}}}},"padding":{"left":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside navigation items. This creates breathing room on the left side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"}},"right":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside navigation items. This creates breathing room on the right side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"}},"top":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside navigation items. This creates breathing room above the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"}},"bottom":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside navigation items. This creates breathing room below the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"}}},"margin":{"left":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) around navigation items. This creates spacing between the navigation item and the panel edges. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-left"}},"right":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the right margin (horizontal spacing) around navigation items. This creates spacing between the navigation item and the panel edges. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-right"}},"top":{"type":"space","value":"{space.0.value}","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) around navigation items. This creates spacing above the navigation item. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-top"}},"bottom":{"type":"space","value":"{space.0.value}","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) around navigation items. This creates spacing below the navigation item. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-bottom"}}},"border":{"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"border","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"}}},"badge":{"margin":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of the badge within navigation items. This creates spacing between the badge and the navigation text. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-left"}},"right":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of the badge within navigation items. This creates spacing between the badge and the navigation text. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin of the badge within navigation items. This creates spacing above the badge. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin of the badge within navigation items. This creates spacing below the badge. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-bottom"}}},"background":{"value":"{color.secondary.fixed.dim.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the badge within navigation items. This is the background color for the badge element.<br>CSS variable: --wm-nav-item-badge-background"}},"text-align":{"value":"center","type":"font","attributes":{"description":"Sets the horizontal alignment of text within navigation items. This controls how the text is positioned horizontally within the navigation item.<br>CSS variable: --wm-nav-item-badge-text-align"}},"align-self":{"value":"unset","type":"other","attributes":{"subtype":"other","description":"Sets the alignment of the navigation item along the cross axis. This controls how the item is aligned vertically within its container.<br>CSS variable: --wm-nav-item-badge-align-self"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item badge text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of navigation item badge text (the text that appears in each navigation menu item). This affects how bold the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-weight"}}},"border":{"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"border","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"}}},"min":{"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of navigation items. This creates a minimum width for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-width"}},"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of navigation items. This creates a minimum height for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-height"}}},"line-height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the line height of navigation items. This creates a line height for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-line-height"}},"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the color of navigation items. This creates a color for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-color"}}},"text":{"decoration":{"value":"none","type":"font","attributes":{"subtype":"font","description":"Controls the decoration of navigation items. This creates a decoration for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-text-decoration"}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding of navigation items. This creates a left padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding of navigation items. This creates a right padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding of navigation items. This creates a top padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding of navigation items. This creates a bottom padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"}}},"flex":{"value":"1","type":"space","attributes":{"subtype":"space","description":"Controls the flex of navigation items. This creates a flex for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-text-flex"}}},"child":{"background":{"color":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the child navigation in navigation. This is the background color for the child navigation area.<br>CSS variable: --wm-nav-child-background"}}},"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the child navigation in navigation. This is the color for the child navigation area.<br>CSS variable: --wm-nav-child-color"}}},"caret":{"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the caret in navigation. This is the color for the caret area.<br>CSS variable: --wm-nav-item-caret-color"}}},"states":{"active":{"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons within navigation items. This ensures icons are appropriately sized relative to the navigation text for visual balance.<br>CSS variable: --wm-nav-item-icon-size"}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of navigation items (individual menu items in navigation menus). This determines what color the navigation icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-icon-color"}}},"border":{"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"border","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"}}},"background":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items (individual menu items in navigation menus). This determines what color the navigation background appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-background"}},"badge":{"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item badge text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of navigation item badge text (the text that appears in each navigation menu item). This affects how bold the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-weight"}}},"border":{"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"border","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"}}},"background":{"value":"{color.secondary.fixed.dim.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the badge within navigation items. This is the background color for the badge element.<br>CSS variable: --wm-nav-item-badge-background"}}},"caret":{"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the caret in navigation. This is the color for the caret area.<br>CSS variable: --wm-nav-item-caret-color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"navitem":{"meta":{"mapping":{"selector":{"mobile":".app-navitem"},"states":{"active":{"selector":{"mobile":"-active,.app-navitem-active.app-navitem-anchor"}}}}},"mapping":{"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items (individual menu items in navigation menus). This is the main background color that appears behind each navigation item.<br>CSS variable: --wm-nav-item-background"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation item text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-nav-item-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when navigation item text wraps to multiple lines. This ensures proper spacing for the navigation text.<br>CSS variable: --wm-nav-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in navigation item text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-nav-item-letter-spacing"}},"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons within navigation items. This ensures icons are appropriately sized relative to the navigation text for visual balance.<br>CSS variable: --wm-nav-item-icon-size"}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of navigation items (individual menu items in navigation menus). This determines what color the navigation icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-icon-color"}},"padding":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding of the icon in navigation items. This creates breathing room on the left side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding of the icon in navigation items. This creates breathing room on the right side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding of the icon in navigation items. This creates breathing room on the top side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding of the icon in navigation items. This creates breathing room on the bottom side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-bottom"}}}},"padding":{"left":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside navigation items. This creates breathing room on the left side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"}},"right":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside navigation items. This creates breathing room on the right side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"}},"top":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside navigation items. This creates breathing room above the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"}},"bottom":{"type":"space","value":"{space.4.value}","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside navigation items. This creates breathing room below the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"}}},"margin":{"left":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) around navigation items. This creates spacing between the navigation item and the panel edges. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-left"}},"right":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the right margin (horizontal spacing) around navigation items. This creates spacing between the navigation item and the panel edges. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-right"}},"top":{"type":"space","value":"{space.0.value}","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) around navigation items. This creates spacing above the navigation item. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-top"}},"bottom":{"type":"space","value":"{space.0.value}","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) around navigation items. This creates spacing below the navigation item. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-bottom"}}},"border":{"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"}}},"badge":{"margin":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of the badge within navigation items. This creates spacing between the badge and the navigation text. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-left"}},"right":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of the badge within navigation items. This creates spacing between the badge and the navigation text. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin of the badge within navigation items. This creates spacing above the badge. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin of the badge within navigation items. This creates spacing below the badge. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-bottom"}}},"background":{"value":"{color.secondary.fixed.dim.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the badge within navigation items. This is the background color for the badge element.<br>CSS variable: --wm-nav-item-badge-background"}},"text-align":{"value":"center","type":"font","attributes":{"description":"Sets the horizontal alignment of text within navigation items. This controls how the text is positioned horizontally within the navigation item.<br>CSS variable: --wm-nav-item-badge-text-align"}},"align-self":{"value":"unset","type":"other","attributes":{"subtype":"other","description":"Sets the alignment of the navigation item along the cross axis. This controls how the item is aligned vertically within its container.<br>CSS variable: --wm-nav-item-badge-align-self"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item badge text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of navigation item badge text (the text that appears in each navigation menu item). This affects how bold the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-weight"}}},"border":{"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"}}},"min":{"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of navigation items. This creates a minimum width for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-width"}},"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of navigation items. This creates a minimum height for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-height"}}},"line-height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the line height of navigation items. This creates a line height for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-line-height"}},"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the color of navigation items. This creates a color for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-color"}}},"text":{"decoration":{"value":"none","type":"font","attributes":{"subtype":"font","description":"Controls the decoration of navigation items. This creates a decoration for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-text-decoration"}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding of navigation items. This creates a left padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding of navigation items. This creates a right padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"}},"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding of navigation items. This creates a top padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding of navigation items. This creates a bottom padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"}}},"flex":{"value":"1","type":"space","attributes":{"subtype":"space","description":"Controls the flex of navigation items. This creates a flex for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-text-flex"}}},"child":{"background":{"color":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the child navigation in navigation. This is the background color for the child navigation area.<br>CSS variable: --wm-nav-child-background"}}},"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the child navigation in navigation. This is the color for the child navigation area.<br>CSS variable: --wm-nav-child-color"}}},"caret":{"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the caret in navigation. This is the color for the caret area.<br>CSS variable: --wm-nav-item-caret-color"}}},"states":{"active":{"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons within navigation items. This ensures icons are appropriately sized relative to the navigation text for visual balance.<br>CSS variable: --wm-nav-item-icon-size"}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of navigation items (individual menu items in navigation menus). This determines what color the navigation icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-icon-color"}}},"border":{"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"}}},"background":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items (individual menu items in navigation menus). This determines what color the navigation background appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-background"}},"badge":{"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item badge text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of navigation item badge text (the text that appears in each navigation menu item). This affects how bold the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-weight"}}},"border":{"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"}}},"background":{"value":"{color.secondary.fixed.dim.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the badge within navigation items. This is the background color for the badge element.<br>CSS variable: --wm-nav-item-badge-background"}}},"caret":{"color":{"value":"{color.on-secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the caret in navigation. This is the color for the caret area.<br>CSS variable: --wm-nav-item-caret-color"}}}}}}}}');
 /***/ }

package/cjs/src_tokens_mobile_components_page-left-nav_page-left-nav_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_page-left-nav_page-left-nav_json"],{
+/***/ "./src/tokens/mobile/components/page-left-nav/page-left-nav.json"
+/*!***********************************************************************!*\
+  !*** ./src/tokens/mobile/components/page-left-nav/page-left-nav.json ***!
+  \***********************************************************************/
+(module) {
+module.exports = /*#__PURE__*/JSON.parse('{"left-panel":{"mapping":{"background":{"type":"color","value":"{color.surface.container.lowest.@.value}","attributes":{"subtype":"color","description":"Sets the background color of the left navigation panel (the side panel that slides in from the left). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-left-panel-background"}},"elevation":{"type":"radius","value":"{elevation.shadow.1.value}","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the left navigation panel. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-left-panel-elevation"}},"border":{"top":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of the left navigation panel. This makes the panel appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-top-right-radius"}}}},"bottom":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}","attributes":{"subtype":"radius","description":"Controls the corner rounding of the bottom-right corner of the left navigation panel. This makes the panel appear with rounded corners on the bottom-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-bottom-right-radius"}}}}},"max-width":{"type":"space","value":"360px","attributes":{"subtype":"space","description":"Controls the maximum width of the left navigation panel (the side panel that slides in from the left). This determines how wide the panel can be when it\'s open. Acceptable units: px.<br>CSS variable: --wm-left-panel-max-width"}}}}}');
+/***/ }
+}]);