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

package/cjs/src_tokens_web_components_tabs_tabs_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \**************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabs"},"states":{"hover":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:hover:before"}},"focus":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:focus:before"}},"active":{"selector":{"web":" > .nav-tabs > .tab-header.active, > .nav-tabs > .tab-header .tab-heading:active:before"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"}},"nav":{"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tab navigation (the section containing the tab headers). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-nav-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color"}}}},"item":{"heading":{"height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font-size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"font-weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"font-family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family"}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color"}}},"border":{"width":{"value":"0px","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius","description":"Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity"}}}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"width":{"value":"~\\"calc(100% - {space.12.value})\\"","type":"space","attributes":{"subtype":"space","description":"Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width"}},"radius":{"value":"{radius.md.value} {radius.md.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}}},"content":{"background":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding"}},"height":{"value":"100px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height"}}},"states":{"hover":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"focus":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"item":{"heading":{"indicator":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabs"},"states":{"hover":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:hover:before"}},"focus":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:focus:before"}},"active":{"selector":{"web":" > .nav-tabs > .tab-header.active, > .nav-tabs > .tab-header .tab-heading:active:before"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"}},"nav":{"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tab navigation (the section containing the tab headers). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-nav-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color"}}},"alignment":{"value":"flex-start","type":"string","attributes":{"subtype":"string","description":"Controls the alignment of tab navigation (the section containing the tab headers). \'flex-start\' aligns tabs to the left, \'center\' centers them, and \'flex-end\' aligns them to the right.<br>CSS variable: --wm-tabs-nav-alignment"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between individual tab headers within the tab navigation (the section containing the tab headers). This creates visual separation between each tab header.<br>CSS variable: --wm-tabs-nav-gap"}}},"item":{"heading":{"height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font-size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"font-weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"font-family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family"}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item headings (the clickable tab labels that users click to switch between different content sections). This is the color that appears behind the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-background"}},"border":{"width":{"value":"0px","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of tab item headings, determining how rounded the corners appear.<br>CSS variable: --wm-tabs-item-heading-border-radius"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius","description":"Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity"}}}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"width":{"value":"~\\"calc(100% - {space.12.value})\\"","type":"space","attributes":{"subtype":"space","description":"Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width"}},"radius":{"value":"{radius.md.value} {radius.md.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}}},"content":{"background":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding"}},"height":{"value":"100px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height"}}},"states":{"hover":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"focus":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"item":{"heading":{"indicator":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{}}}');
 
 /***/ }