@gov-design-system-ce/components 4.0.8-rc23 → 4.1.0-rc1

package/dist/cjs/gov-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-card.entry.cjs.js","mappings":"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","names":["govHost","createID","govErrorLog","canValidateWcagOnRender","delay","h","Host","booleanString","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-card/constants.ts","../../../packages/core/src/components/gov-card/gov-card.scss?tag=gov-card","../../../packages/core/src/components/gov-card/gov-card.tsx"],"sourcesContent":["export const CardClass = {\n\troot: 'gov-card',\n\theader: 'gov-card__header',\n\ttitle: 'gov-card__title',\n\tinner: 'gov-card__inner',\n\timg: 'gov-card__img',\n\tmain: 'gov-card__main',\n\tcontent: 'gov-card__content',\n\ticon: 'gov-card__icon',\n\tbtns: 'gov-card__btns',\n\tfooter: 'gov-card__footer',\n\tarrow: 'gov-card__arrow',\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-card\";\n\n#{$class} {\n\t@include base(flex);\n\tflex-direction: column;\n\tborder: $card-border;\n\tborder-radius: $border-radius;\n\tbackground: $card-bg;\n\toverflow: hidden;\n\t&__header {\n\t\tgap: rem-calc(28);\n\t\twidth: 100%;\n\t\tpadding: rem-calc(24);\n\t\tborder-bottom: $card-border;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttext-transform: none;\n\t\ttransition: background-color $t ease-in-out;\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\tcolor: $card-arrow-color;\n\t}\n\t&__title {\n\t\t@include general;\n\t\t@include typography($font-size-xl);\n\t\tcolor: $card-title-color;\n\t\tfont-weight: 700;\n\t}\n\t&__img {\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tline-height: 1;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: auto;\n\t\t}\n\t}\n\t&__inner {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\t\t@include parameter(\"aria-hidden\") {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&__main {\n\t\tdisplay: flex;\n\t\tgap: 16px 24px;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\t\tpadding: rem-calc(24);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(40);\n\t\theight: rem-calc(40);\n\t\tcolor: $card-icon-color;\n\t}\n\t&__btns {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 0 0 auto;\n\t\tflex-wrap: wrap;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__footer {\n\t\t@include reset-last-margin();\n\t\tpadding: rem-calc(16 24);\n\t\tbackground: $card-footer-bg;\n\t\tp {\n\t\t\t@include typography($font-size-s);\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"is-expanded\") {\n\t\theight: 100%;\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"collapsible\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\t@include button-core();\n\t\t\t\t@include focus-outline($border-radius, rem-calc(-2));\n\t\t\t\tjustify-content: space-between;\n\t\t\t\ttext-align: left;\n\t\t\t\t@include hover() {\n\t\t\t\t\tbackground: $card-header-hover-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"is-expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tborder-bottom: $card-border;\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\ttransform: scale(-1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\t#{$class} {\n\t\t\t\t&__main {\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tpadding: rem-calc(32);\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: rem-calc(48);\n\t\t\t\t\theight: rem-calc(48);\n\t\t\t\t}\n\t\t\t\t&__btns {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch, State, Method, Event, EventEmitter } from '@stencil/core'\nimport { CardClass } from './constants'\nimport { govHost, booleanString } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { createID } from '../../utils/string.utils'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { GovCardChangeEvent } from './interfaces'\n\n@Component({\n\ttag: 'gov-card',\n\tstyleUrl: 'gov-card.scss',\n})\nexport class GovCard {\n\tprivate h: GovHost\n\tprivate readonly headlineId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.headlineId = createID('GovCardHeadline')\n\t\tthis.contentId = createID('GovCardContent')\n\t}\n\n\t@Element() host: HTMLGovCardElement\n\n\t/**\n\t * Style variation of the card.\n\t */\n\t@Prop() readonly promotion: boolean = false\n\t/**\n\t * Item label of the card\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Defines wether the card can be collapsible\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Defines whether the card is open or closed by button\n\t */\n\t@Prop() readonly expanded: boolean = false\n\t/**\n\t * Used to change the HMTL tag in the card headline for correct semantic structure\n\t */\n\t@Prop({ attribute: 'headline-tag' }) readonly headlineTag: string = 'h3'\n\t/**\n\t * Adds accessible label for the collapsible button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-trigger-label' }) wcagTriggerLabel: string\n\t/**\n\t * A string of identifiers that indicate alternative label elements for collapsible card\n\t */\n\t@Prop({ attribute: 'wcag-trigger-labelled-by' }) wcagTriggerLabelledBy: string\n\t/**\n\t * Called when the card toggle state changes\n\t */\n\t@Event({ eventName: 'gov-toggle' }) govToggle: EventEmitter<GovCardChangeEvent>\n\t@State() isExpanded: boolean\n\n\t@Watch('headlineTag')\n\tvalidateHeadlineTag(newValue: string): void {\n\t\tconst validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span']\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${CardClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpanded = this.label ? this.expanded : true\n\t\tthis.validateHeadlineTag(this.headlineTag)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govToggle.emit({ open: this.isExpanded, element: this.host })\n\t}\n\n\trender() {\n\t\tconst HeadlineTag = this.headlineTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CardClass.root)} is-expanded={this.isExpanded} collapsible={booleanString(this.collapsible)} promotion={this.promotion}>\n\t\t\t\t{this.label && this.collapsible ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\tid={this.headlineId}\n\t\t\t\t\t\tclass={CardClass.header}\n\t\t\t\t\t\taria-label={this.wcagTriggerLabel}\n\t\t\t\t\t\taria-labelledby={this.wcagTriggerLabelledBy}\n\t\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<HeadlineTag class={CardClass.title}>{this.label}</HeadlineTag>\n\t\t\t\t\t\t<gov-icon class={CardClass.arrow} name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t</button>\n\t\t\t\t) : null}\n\n\t\t\t\t{this.label && !this.collapsible ? (\n\t\t\t\t\t<div class={CardClass.header}>\n\t\t\t\t\t\t<HeadlineTag class={CardClass.title}>{this.label}</HeadlineTag>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t<div\n\t\t\t\t\tclass={CardClass.inner}\n\t\t\t\t\tid={this.contentId}\n\t\t\t\t\taria-hidden={this.collapsible ? booleanString(!this.isExpanded) : undefined}\n\t\t\t\t\thidden={this.collapsible ? !this.isExpanded : undefined}\n\t\t\t\t\taria-labelledby={this.collapsible ? this.headlineId : undefined}\n\t\t\t\t>\n\t\t\t\t\t{this.h.hasSlot('img') && (\n\t\t\t\t\t\t<p class={CardClass.img}>\n\t\t\t\t\t\t\t<slot name=\"img\" />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={CardClass.main}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<div class={CardClass.content}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.h.hasSlot('btn') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.btns}>\n\t\t\t\t\t\t\t\t<slot name=\"btn\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.h.hasSlot('footer') && (\n\t\t\t\t\t\t<div class={CardClass.footer}>\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e) {\n\t\te.stopPropagation()\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = !this.isExpanded\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/**\n\t * Open the card if it is collapsible\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = true\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/**\n\t * Close the card if it is collapsible\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = false\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tvalidateWcagLabel(this.wcagTriggerLabel, this.wcagTriggerLabelledBy, CardClass.root)\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"gov-card.entry.cjs.js","mappings":"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","names":["govHost","createID","canValidateWcagOnRender","delay","h","Host","booleanString","validateAccessibleLabel"],"sources":["../../../packages/core/src/components/gov-card/constants.ts","../../../packages/core/src/components/gov-card/gov-card.tsx"],"sourcesContent":["export const CardClass = {\n\troot: 'gov-card',\n\theader: 'gov-card__header',\n\ttitle: 'gov-card__title',\n\tinner: 'gov-card__inner',\n\timg: 'gov-card__img',\n\tmain: 'gov-card__main',\n\ticon: 'gov-card__icon',\n\tbtns: 'gov-card__btns',\n\tfooter: 'gov-card__footer',\n\tarrow: 'gov-card__arrow',\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Method, Prop} from '@stencil/core'\nimport {CardClass} from './constants'\nimport {booleanString, govHost} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {createID} from '../../utils/string.utils'\nimport {validateAccessibleLabel} from '../../helpers/Validate/wcag'\nimport {canValidateWcagOnRender} from '../../helpers/Dom/win'\nimport {delay} from '../../utils/utils'\nimport {GovCardChangeEvent} from './interfaces'\n\n@Component({\n\ttag: 'gov-card',\n})\nexport class GovCard {\n\tprivate h: GovHost\n\tprivate readonly headlineId: string\n\tprivate readonly contentId: string\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.headlineId = createID('GovCardHeadline')\n\t\tthis.contentId = createID('GovCardContent')\n\t}\n\n\t@Element() host: HTMLGovCardElement\n\n\t/**\n\t * Style variation of the card.\n\t */\n\t@Prop() readonly promotion: boolean = false\n\t/**\n\t * Defines weather the card can be collapsible\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Defines whether the card is open or closed\n\t */\n\t@Prop({reflect: true, mutable: true}) open = true\n\t/**\n\t * Adds accessible label for the collapsible button that is only shown for screen readers.\n\t */\n\t@Prop({attribute: 'accessible-label'}) accessibleTriggerLabel: string\n\t/**\n\t * A string of identifiers that indicate alternative label elements for collapsible card\n\t */\n\t@Prop({attribute: 'accessible-labelledby'}) accessibleTriggerLabelledBy: string\n\t/**\n\t * Called when the card toggle state changes\n\t */\n\t@Event({eventName: 'gov-toggle'}) govToggle: EventEmitter<GovCardChangeEvent>\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateAccessibility()\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CardClass.root)} open={this.open}\n\t\t\t\t  collapsible={booleanString(this.collapsible)} promotion={this.promotion} hydrated={this.hydrated}>\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\tid={this.headlineId}\n\t\t\t\t\t\tclass={CardClass.header}\n\t\t\t\t\t\taria-label={this.accessibleTriggerLabel}\n\t\t\t\t\t\taria-labelledby={this.accessibleTriggerLabelledBy}\n\t\t\t\t\t\taria-expanded={booleanString(this.open)}\n\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"headline\"/>\n\t\t\t\t\t\t<gov-icon class={CardClass.arrow} name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t</button>\n\t\t\t\t) : this.h.hasSlot(\"headline\") ? (\n\t\t\t\t\t<div class={CardClass.header}>\n\t\t\t\t\t\t<slot name=\"headline\"/>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t<div\n\t\t\t\t\tclass={CardClass.inner}\n\t\t\t\t\tid={this.contentId}\n\t\t\t\t\taria-hidden={this.collapsible ? booleanString(!this.open) : undefined}\n\t\t\t\t\thidden={this.collapsible ? !this.open : undefined}\n\t\t\t\t\taria-labelledby={this.collapsible ? this.headlineId : undefined}\n\t\t\t\t>\n\t\t\t\t\t{this.h.hasSlot('img') && (\n\t\t\t\t\t\t<p class={CardClass.img}>\n\t\t\t\t\t\t\t<slot name=\"img\"/>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={CardClass.main}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\"/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<slot/>\n\n\t\t\t\t\t\t{this.h.hasSlot('btn') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.btns}>\n\t\t\t\t\t\t\t\t<slot name=\"btn\"/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.h.hasSlot('footer') && (\n\t\t\t\t\t\t<div class={CardClass.footer}>\n\t\t\t\t\t\t\t<slot name=\"footer\"/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e) {\n\t\te.stopPropagation()\n\t\tif (this.collapsible) {\n\t\t\tthis.open = !this.open\n\t\t\tthis.govToggle.emit({open: this.open, element: this.host})\n\t\t}\n\t}\n\n\t/**\n\t * Validate the accessible attributes of the component\n\t */\n\t@Method()\n\tasync validateAccessibility(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tvalidateAccessibleLabel(this.accessibleTriggerLabel, this.accessibleTriggerLabelledBy, CardClass.root, this.host)\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-chip.cjs.entry.js

@@ -2,18 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f53beed1.js');
-const template = require('./template-431f0737.js');
-const props = require('./props-edd0d46f.js');
-const string_utils = require('./string.utils-b84c81cf.js');
-const constants = require('./constants-4fefc173.js');
+const index = require('./index-1af4880c.js');
+const props = require('./props-b8a955b2.js');
+const template = require('./template-b070338f.js');
+const utils = require('./utils-d263c5c6.js');
+const sizes = require('./sizes-89f8d3b2.js');
+const constants = require('./constants-861428a4.js');
+const string_utils = require('./string.utils-2335838f.js');
 const helpers = require('./helpers-2ee3c9e6.js');
-require('./gov.log-8887c6bc.js');
-require('./win-03714165.js');
-require('./utils-d263c5c6.js');
-require('./sizes-89f8d3b2.js');
-require('./variants-85b514ea.js');
+const accessibility = require('./accessibility-c475826b.js');
+const attribute = require('./attribute-06dc5228.js');
+require('./gov.log-1e8bab6e.js');
+require('./win-587f4614.js');
+require('./colors-976f6dff.js');
 
+const ChipSizes = utils.pick(sizes.Sizes, ['_XS', '_S', '_M']);
+var ChipType;
+(function (ChipType) {
+    ChipType["SOLID"] = "solid";
+    ChipType["OUTLINED"] = "outlined";
+})(ChipType || (ChipType = {}));
 var NativeType;
 (function (NativeType) {
     NativeType["A"] = "a";
@@ -27,50 +35,63 @@ const ChipClass = {
     hasLeft: 'gov-chip--has-left',
 };
 
-const govChipCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-chip .element{margin:0;padding:0;font-family:var(--gov-font-family, \"Roboto\", sans-serif);font-weight:400;box-sizing:border-box;display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--gov-button-border-width, 0.0625rem) solid transparent;transition:background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;cursor:inherit;will-change:background-color, border-color}.gov-chip .element:focus{outline:none}.gov-chip .element .gov-icon{flex:0 0 auto;color:inherit}.gov-chip .element>*{display:flex}[hoverable].gov-chip .element{cursor:pointer}[hoverable].gov-chip .element:focus{outline:none}[hoverable].gov-chip .element:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0.0625rem}[hoverable][type=outlined].gov-chip .element:focus-visible,[hoverable][type=base].gov-chip .element:focus-visible{outline-offset:0}[hoverable][disabled=\"\"].gov-chip,[hoverable][disabled=true i].gov-chip,[hoverable][disabled=\"1\"].gov-chip{cursor:not-allowed}[hoverable][disabled=\"\"].gov-chip .element,[hoverable][disabled=true i].gov-chip .element,[hoverable][disabled=\"1\"].gov-chip .element{pointer-events:none}[expanded=\"\"].gov-chip,[expanded=true i].gov-chip,[expanded=\"1\"].gov-chip{display:block}[expanded=\"\"].gov-chip .element,[expanded=true i].gov-chip .element,[expanded=\"1\"].gov-chip .element{display:flex;width:100%;margin-right:0;margin-left:0}[type=solid][variant=primary].gov-chip .element{background-color:var(--gov-button-primary-solid-bg, var(--gov-color-primary));color:var(--gov-button-primary-solid-color, var(--gov-color-neutral-white))}[type=solid][variant=primary][inverse=\"\"].gov-chip .element,[type=solid][variant=primary][inverse=true i].gov-chip .element,[type=solid][variant=primary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-primary-solid-inverse-color, var(--gov-color-primary));background-color:var(--gov-button-primary-solid-inverse-bg, var(--gov-color-primary-200))}[type=solid][variant=primary][inverse=\"\"].gov-chip .element:focus-visible,[type=solid][variant=primary][inverse=true i].gov-chip .element:focus-visible,[type=solid][variant=primary][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-primary-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=primary][disabled=\"\"].gov-chip .element,[type=solid][variant=primary][disabled=true i].gov-chip .element,[type=solid][variant=primary][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-primary-solid-disabled-bg, var(--gov-color-primary-300));color:var(--gov-button-primary-solid-disabled-color, var(--gov-color-neutral-white))}[type=solid][variant=primary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=solid][variant=primary][disabled=\"\"][inverse=true i].gov-chip .element,[type=solid][variant=primary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=solid][variant=primary][disabled=true i][inverse=\"\"].gov-chip .element,[type=solid][variant=primary][disabled=true i][inverse=true i].gov-chip .element,[type=solid][variant=primary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=solid][variant=primary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=solid][variant=primary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=solid][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-primary-solid-inverse-disabled-bg, var(--gov-color-primary-300));color:var(--gov-button-primary-solid-inverse-disabled-color, var(--gov-color-primary-400))}@media not all and (pointer: coarse){[type=solid][variant=primary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-primary-solid-hover-bg, var(--gov-color-primary-700));color:var(--gov-button-primary-solid-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=primary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-primary-solid-active-bg, var(--gov-color-primary-800))}}@media not all and (pointer: coarse){[type=solid][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=solid][variant=primary][hoverable][inverse=true i].gov-chip .element:hover,[type=solid][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-primary-solid-inverse-hover-bg, var(--gov-color-primary-700));color:var(--gov-button-primary-solid-inverse-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=solid][variant=primary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=solid][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-primary-solid-inverse-active-bg, var(--gov-color-primary-800))}}[type=outlined][variant=primary].gov-chip .element{color:var(--gov-button-primary-outlined-color, var(--gov-color-primary));border-color:var(--gov-button-primary-outlined-border, var(--gov-color-primary))}[type=outlined][variant=primary][inverse=\"\"].gov-chip .element,[type=outlined][variant=primary][inverse=true i].gov-chip .element,[type=outlined][variant=primary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-primary-outlined-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-primary-outlined-inverse-bg, transparent);border-color:var(--gov-button-primary-outlined-inverse-border, var(--gov-color-neutral-white))}[type=outlined][variant=primary][inverse=\"\"].gov-chip .element:focus-visible,[type=outlined][variant=primary][inverse=true i].gov-chip .element:focus-visible,[type=outlined][variant=primary][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-primary-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=primary][disabled=\"\"].gov-chip .element,[type=outlined][variant=primary][disabled=true i].gov-chip .element,[type=outlined][variant=primary][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-primary-outlined-disabled-bg, transparent);color:var(--gov-button-primary-outlined-disabled-color, var(--gov-color-primary-400));border-color:var(--gov-button-primary-outlined-disabled-border, var(--gov-color-primary-300))}[type=outlined][variant=primary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=primary][disabled=\"\"][inverse=true i].gov-chip .element,[type=outlined][variant=primary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=outlined][variant=primary][disabled=true i][inverse=\"\"].gov-chip .element,[type=outlined][variant=primary][disabled=true i][inverse=true i].gov-chip .element,[type=outlined][variant=primary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=outlined][variant=primary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=primary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=outlined][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-primary-outlined-inverse-disabled-bg, var(--gov-color-primary-300));color:var(--gov-button-primary-outlined-inverse-disabled-color, var(--gov-color-primary-400));border-color:var(--gov-button-primary-outlined-inverse-disabled-border-color, var(--gov-color-primary-400))}@media not all and (pointer: coarse){[type=outlined][variant=primary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-primary-outlined-hover-bg, var(--gov-color-primary-100));color:var(--gov-button-primary-outlined-hover-color, var(--gov-color-primary))}[type=outlined][variant=primary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-primary-outlined-active-bg, var(--gov-color-primary-300))}}@media not all and (pointer: coarse){[type=outlined][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=outlined][variant=primary][hoverable][inverse=true i].gov-chip .element:hover,[type=outlined][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-primary-outlined-inverse-hover-bg, var(--gov-color-primary-500));color:var(--gov-button-primary-outlined-inverse-hover-color, var(--gov-color-neutral-white))}[type=outlined][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=outlined][variant=primary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=outlined][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-primary-outlined-inverse-active-bg, var(--gov-color-primary-400))}}[type=base][variant=primary].gov-chip .element{color:var(--gov-button-primary-base-color, var(--gov-color-primary))}[type=base][variant=primary][inverse=\"\"].gov-chip .element,[type=base][variant=primary][inverse=true i].gov-chip .element,[type=base][variant=primary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-primary-base-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-primary-base-inverse-bg, transparent)}[type=base][variant=primary][disabled=\"\"].gov-chip .element,[type=base][variant=primary][disabled=true i].gov-chip .element,[type=base][variant=primary][disabled=\"1\"].gov-chip .element{color:var(--gov-button-primary-base-disabled-color, var(--gov-color-primary-400))}[type=base][variant=primary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=base][variant=primary][disabled=\"\"][inverse=true i].gov-chip .element,[type=base][variant=primary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=base][variant=primary][disabled=true i][inverse=\"\"].gov-chip .element,[type=base][variant=primary][disabled=true i][inverse=true i].gov-chip .element,[type=base][variant=primary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=base][variant=primary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=base][variant=primary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=base][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-primary-base-inverse-disabled-bg, var(--gov-color-primary-300));color:var(--gov-button-primary-base-inverse-disabled-color, var(--gov-color-primary-400))}@media not all and (pointer: coarse){[type=base][variant=primary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-primary-base-hover-bg, var(--gov-color-primary-100));color:var(--gov-button-primary-base-hover-color, var(--gov-color-primary))}[type=base][variant=primary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-primary-base-active-bg, var(--gov-color-primary-300))}}@media not all and (pointer: coarse){[type=base][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=base][variant=primary][hoverable][inverse=true i].gov-chip .element:hover,[type=base][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-primary-base-inverse-hover-bg, var(--gov-color-primary-500));color:var(--gov-button-primary-base-inverse-hover-color, var(--gov-color-neutral-white))}[type=base][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=base][variant=primary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=base][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-primary-base-inverse-active-bg, var(--gov-color-primary-400));color:var(--gov-button-primary-base-inverse-active-color, var(--gov-color-neutral-white))}}[type=link][variant=primary].gov-chip .element{color:var(--gov-button-primary-link-color, var(--gov-color-primary))}[type=link][variant=primary][inverse=\"\"].gov-chip .element,[type=link][variant=primary][inverse=true i].gov-chip .element,[type=link][variant=primary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-primary-link-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-primary-link-inverse-bg, transparent)}[type=link][variant=primary][disabled=\"\"].gov-chip .element,[type=link][variant=primary][disabled=true i].gov-chip .element,[type=link][variant=primary][disabled=\"1\"].gov-chip .element{color:var(--gov-button-primary-link-disabled-color, var(--gov-color-primary-400))}[type=link][variant=primary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=link][variant=primary][disabled=\"\"][inverse=true i].gov-chip .element,[type=link][variant=primary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=link][variant=primary][disabled=true i][inverse=\"\"].gov-chip .element,[type=link][variant=primary][disabled=true i][inverse=true i].gov-chip .element,[type=link][variant=primary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=link][variant=primary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=link][variant=primary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=link][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-primary-link-inverse-disabled-bg, transparent);color:var(--gov-button-primary-link-inverse-disabled-color, var(--gov-color-primary-400))}@media not all and (pointer: coarse){[type=link][variant=primary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-primary-link-hover-bg, transparent);color:var(--gov-button-primary-link-hover-color, var(--gov-color-primary))}[type=link][variant=primary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-primary-link-active-bg, transparent);color:var(--gov-button-primary-link-active-color, var(--gov-color-primary-700))}}@media not all and (pointer: coarse){[type=link][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=link][variant=primary][hoverable][inverse=true i].gov-chip .element:hover,[type=link][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-primary-link-inverse-hover-bg, transparent);color:var(--gov-button-primary-link-inverse-hover-color, var(--gov-color-neutral-white))}[type=link][variant=primary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=link][variant=primary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=link][variant=primary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-primary-link-inverse-active-bg, transparent);color:var(--gov-button-primary-link-inverse-active-color, var(--gov-color-primary-200))}}[type=solid][variant=secondary].gov-chip .element{background-color:var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));color:var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white))}[type=solid][variant=secondary][inverse=\"\"].gov-chip .element,[type=solid][variant=secondary][inverse=true i].gov-chip .element,[type=solid][variant=secondary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-secondary-solid-inverse-color, var(--gov-color-secondary));background-color:var(--gov-button-secondary-solid-inverse-bg, var(--gov-color-neutral-white))}[type=solid][variant=secondary][inverse=\"\"].gov-chip .element:focus-visible,[type=solid][variant=secondary][inverse=true i].gov-chip .element:focus-visible,[type=solid][variant=secondary][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-secondary-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=secondary][disabled=\"\"].gov-chip .element,[type=solid][variant=secondary][disabled=true i].gov-chip .element,[type=solid][variant=secondary][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-secondary-solid-disabled-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-solid-disabled-color, var(--gov-color-secondary-600))}[type=solid][variant=secondary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=solid][variant=secondary][disabled=\"\"][inverse=true i].gov-chip .element,[type=solid][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=solid][variant=secondary][disabled=true i][inverse=\"\"].gov-chip .element,[type=solid][variant=secondary][disabled=true i][inverse=true i].gov-chip .element,[type=solid][variant=secondary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=solid][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=solid][variant=secondary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=solid][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-secondary-solid-inverse-disabled-bg, var(--gov-color-neutral-white));color:var(--gov-button-secondary-solid-inverse-disabled-color, var(--gov-color-secondary-600))}@media not all and (pointer: coarse){[type=solid][variant=secondary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-secondary-solid-hover-bg, var(--gov-color-secondary-900));color:var(--gov-button-secondary-solid-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=secondary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-secondary-solid-active-bg, var(--gov-color-secondary))}}@media not all and (pointer: coarse){[type=solid][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=solid][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover,[type=solid][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-secondary-solid-inverse-hover-bg, var(--gov-color-secondary-600));color:var(--gov-button-secondary-solid-inverse-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=solid][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=solid][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-secondary-solid-inverse-active-bg, var(--gov-color-secondary-700));color:var(--gov-button-secondary-solid-inverse-active-color, var(--gov-color-neutral-white))}}[type=outlined][variant=secondary].gov-chip .element{color:var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));border-color:var(--gov-button-secondary-outlined-border, var(--gov-color-secondary))}[type=outlined][variant=secondary][inverse=\"\"].gov-chip .element,[type=outlined][variant=secondary][inverse=true i].gov-chip .element,[type=outlined][variant=secondary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-secondary-outlined-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-secondary-outlined-inverse-bg, transparent);border-color:var(--gov-button-secondary-outlined-inverse-border, var(--gov-color-neutral-white))}[type=outlined][variant=secondary][inverse=\"\"].gov-chip .element:focus-visible,[type=outlined][variant=secondary][inverse=true i].gov-chip .element:focus-visible,[type=outlined][variant=secondary][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-secondary-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=secondary][disabled=\"\"].gov-chip .element,[type=outlined][variant=secondary][disabled=true i].gov-chip .element,[type=outlined][variant=secondary][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-secondary-outlined-disabled-bg, transparent);color:var(--gov-button-secondary-outlined-disabled-color, var(--gov-color-secondary-500));border-color:var(--gov-button-secondary-outlined-disabled-border, var(--gov-color-secondary-500))}[type=outlined][variant=secondary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=secondary][disabled=\"\"][inverse=true i].gov-chip .element,[type=outlined][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=outlined][variant=secondary][disabled=true i][inverse=\"\"].gov-chip .element,[type=outlined][variant=secondary][disabled=true i][inverse=true i].gov-chip .element,[type=outlined][variant=secondary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=outlined][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=secondary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=outlined][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-secondary-outlined-inverse-disabled-bg, var(--gov-color-secondary-700));color:var(--gov-button-secondary-outlined-inverse-disabled-color, var(--gov-color-secondary-600));border-color:var(--gov-button-secondary-outlined-inverse-disabled-border-color, var(--gov-color-secondary-600))}@media not all and (pointer: coarse){[type=outlined][variant=secondary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary))}[type=outlined][variant=secondary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-secondary-outlined-active-bg, var(--gov-color-secondary-400))}}@media not all and (pointer: coarse){[type=outlined][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=outlined][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover,[type=outlined][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-secondary-outlined-inverse-hover-bg, var(--gov-color-secondary-700));color:var(--gov-button-secondary-outlined-inverse-hover-color, var(--gov-color-neutral-white))}[type=outlined][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=outlined][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=outlined][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-secondary-outlined-inverse-active-bg, var(--gov-color-secondary-600));color:var(--gov-button-secondary-outlined-inverse-active-color, var(--gov-color-secondary))}}[type=base][variant=secondary].gov-chip .element{color:var(--gov-button-secondary-base-color, var(--gov-color-secondary))}[type=base][variant=secondary][inverse=\"\"].gov-chip .element,[type=base][variant=secondary][inverse=true i].gov-chip .element,[type=base][variant=secondary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-secondary-base-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-secondary-base-inverse-bg, transparent)}[type=base][variant=secondary][disabled=\"\"].gov-chip .element,[type=base][variant=secondary][disabled=true i].gov-chip .element,[type=base][variant=secondary][disabled=\"1\"].gov-chip .element{color:var(--gov-button-secondary-base-disabled-color, var(--gov-color-secondary-600))}[type=base][variant=secondary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=base][variant=secondary][disabled=\"\"][inverse=true i].gov-chip .element,[type=base][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=base][variant=secondary][disabled=true i][inverse=\"\"].gov-chip .element,[type=base][variant=secondary][disabled=true i][inverse=true i].gov-chip .element,[type=base][variant=secondary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=base][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=base][variant=secondary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=base][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-secondary-base-inverse-disabled-bg, var(--gov-color-secondary-700));color:var(--gov-button-secondary-base-inverse-disabled-color, var(--gov-color-secondary-600))}@media not all and (pointer: coarse){[type=base][variant=secondary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-secondary-base-hover-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-base-hover-color, var(--gov-color-secondary))}[type=base][variant=secondary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-secondary-base-active-bg, var(--gov-color-secondary-400))}}@media not all and (pointer: coarse){[type=base][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=base][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover,[type=base][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-secondary-base-inverse-hover-bg, var(--gov-color-secondary-700));color:var(--gov-button-secondary-base-inverse-hover-color, var(--gov-color-neutral-white))}[type=base][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=base][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=base][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-secondary-base-inverse-active-bg, var(--gov-color-secondary-600));color:var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary))}}[type=link][variant=secondary].gov-chip .element{color:var(--gov-button-secondary-link-color, var(--gov-color-secondary))}[type=link][variant=secondary][inverse=\"\"].gov-chip .element,[type=link][variant=secondary][inverse=true i].gov-chip .element,[type=link][variant=secondary][inverse=\"1\"].gov-chip .element{color:var(--gov-button-secondary-link-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-secondary-link-inverse-bg, transparent)}[type=link][variant=secondary][disabled=\"\"].gov-chip .element,[type=link][variant=secondary][disabled=true i].gov-chip .element,[type=link][variant=secondary][disabled=\"1\"].gov-chip .element{color:var(--gov-button-secondary-link-disabled-color, var(--gov-color-secondary-600))}[type=link][variant=secondary][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=link][variant=secondary][disabled=\"\"][inverse=true i].gov-chip .element,[type=link][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=link][variant=secondary][disabled=true i][inverse=\"\"].gov-chip .element,[type=link][variant=secondary][disabled=true i][inverse=true i].gov-chip .element,[type=link][variant=secondary][disabled=true i][inverse=\"1\"].gov-chip .element,[type=link][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=link][variant=secondary][disabled=\"1\"][inverse=true i].gov-chip .element,[type=link][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-secondary-link-inverse-disabled-bg, transparent);color:var(--gov-button-secondary-link-inverse-disabled-color, var(--gov-color-secondary-600))}@media not all and (pointer: coarse){[type=link][variant=secondary][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-secondary-link-hover-bg, transparent);color:var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary))}[type=link][variant=secondary][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-secondary-link-active-bg, transparent);color:var(--gov-button-primary-link-active-color, var(--gov-color-secondary))}}@media not all and (pointer: coarse){[type=link][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover,[type=link][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover,[type=link][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-secondary-link-inverse-hover-bg, transparent);color:var(--gov-button-secondary-link-inverse-hover-color, var(--gov-color-neutral-white))}[type=link][variant=secondary][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=link][variant=secondary][hoverable][inverse=true i].gov-chip .element:hover:active,[type=link][variant=secondary][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-secondary-link-inverse-active-bg, transparent);color:var(--gov-button-secondary-link-inverse-active-color, var(--gov-color-secondary-500))}}[type=solid][variant=error].gov-chip .element{background-color:var(--gov-button-error-solid-bg, var(--gov-color-error));color:var(--gov-button-error-solid-color, var(--gov-color-neutral-white))}[type=solid][variant=error][inverse=\"\"].gov-chip .element,[type=solid][variant=error][inverse=true i].gov-chip .element,[type=solid][variant=error][inverse=\"1\"].gov-chip .element{color:var(--gov-button-error-solid-inverse-color, var(--gov-color-error));background-color:var(--gov-button-error-solid-inverse-bg, var(--gov-color-error-200))}[type=solid][variant=error][inverse=\"\"].gov-chip .element:focus-visible,[type=solid][variant=error][inverse=true i].gov-chip .element:focus-visible,[type=solid][variant=error][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-error-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=error][disabled=\"\"].gov-chip .element,[type=solid][variant=error][disabled=true i].gov-chip .element,[type=solid][variant=error][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-error-solid-disabled-bg, var(--gov-color-error-200));color:var(--gov-button-error-solid-disabled-color, var(--gov-color-neutral-white))}[type=solid][variant=error][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=solid][variant=error][disabled=\"\"][inverse=true i].gov-chip .element,[type=solid][variant=error][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=solid][variant=error][disabled=true i][inverse=\"\"].gov-chip .element,[type=solid][variant=error][disabled=true i][inverse=true i].gov-chip .element,[type=solid][variant=error][disabled=true i][inverse=\"1\"].gov-chip .element,[type=solid][variant=error][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=solid][variant=error][disabled=\"1\"][inverse=true i].gov-chip .element,[type=solid][variant=error][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-error-solid-inverse-disabled-bg, var(--gov-color-error-300));color:var(--gov-button-error-solid-inverse-disabled-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){[type=solid][variant=error][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-error-solid-hover-bg, var(--gov-color-error-500));color:var(--gov-button-error-solid-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=error][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-error-solid-active-bg, var(--gov-color-error-600))}}@media not all and (pointer: coarse){[type=solid][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover,[type=solid][variant=error][hoverable][inverse=true i].gov-chip .element:hover,[type=solid][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-error-solid-inverse-hover-bg, var(--gov-color-error-500));color:var(--gov-button-error-solid-inverse-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=solid][variant=error][hoverable][inverse=true i].gov-chip .element:hover:active,[type=solid][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-error-solid-inverse-active-bg, var(--gov-color-error-600))}}[type=outlined][variant=error].gov-chip .element{color:var(--gov-button-error-outlined-color, var(--gov-color-error));border-color:var(--gov-button-error-outlined-border, var(--gov-color-error))}[type=outlined][variant=error][inverse=\"\"].gov-chip .element,[type=outlined][variant=error][inverse=true i].gov-chip .element,[type=outlined][variant=error][inverse=\"1\"].gov-chip .element{color:var(--gov-button-error-outlined-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-error-outlined-inverse-bg, transparent);border-color:var(--gov-button-error-outlined-inverse-border, var(--gov-color-neutral-white))}[type=outlined][variant=error][inverse=\"\"].gov-chip .element:focus-visible,[type=outlined][variant=error][inverse=true i].gov-chip .element:focus-visible,[type=outlined][variant=error][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-error-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=error][disabled=\"\"].gov-chip .element,[type=outlined][variant=error][disabled=true i].gov-chip .element,[type=outlined][variant=error][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-error-outlined-disabled-bg, transparent);color:var(--gov-button-error-outlined-disabled-color, var(--gov-color-error-200));border-color:var(--gov-button-error-outlined-disabled-border, var(--gov-color-error-200))}[type=outlined][variant=error][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=error][disabled=\"\"][inverse=true i].gov-chip .element,[type=outlined][variant=error][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=outlined][variant=error][disabled=true i][inverse=\"\"].gov-chip .element,[type=outlined][variant=error][disabled=true i][inverse=true i].gov-chip .element,[type=outlined][variant=error][disabled=true i][inverse=\"1\"].gov-chip .element,[type=outlined][variant=error][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=error][disabled=\"1\"][inverse=true i].gov-chip .element,[type=outlined][variant=error][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-error-outlined-inverse-disabled-bg, var(--gov-color-error-300));color:var(--gov-button-error-outlined-inverse-disabled-color, var(--gov-color-error-400));border-color:var(--gov-button-error-outlined-inverse-disabled-border-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){[type=outlined][variant=error][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));color:var(--gov-button-error-outlined-hover-color, var(--gov-color-error))}[type=outlined][variant=error][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-error-outlined-active-bg, var(--gov-color-error-200))}}@media not all and (pointer: coarse){[type=outlined][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover,[type=outlined][variant=error][hoverable][inverse=true i].gov-chip .element:hover,[type=outlined][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-error-outlined-inverse-hover-bg, var(--gov-color-error-500));color:var(--gov-button-error-outlined-inverse-hover-color, var(--gov-color-neutral-white))}[type=outlined][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=outlined][variant=error][hoverable][inverse=true i].gov-chip .element:hover:active,[type=outlined][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-error-outlined-inverse-active-bg, var(--gov-color-error-400))}}[type=base][variant=error].gov-chip .element{color:var(--gov-button-error-base-color, var(--gov-color-error))}[type=base][variant=error][inverse=\"\"].gov-chip .element,[type=base][variant=error][inverse=true i].gov-chip .element,[type=base][variant=error][inverse=\"1\"].gov-chip .element{color:var(--gov-button-error-base-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-error-base-inverse-bg, transparent)}[type=base][variant=error][disabled=\"\"].gov-chip .element,[type=base][variant=error][disabled=true i].gov-chip .element,[type=base][variant=error][disabled=\"1\"].gov-chip .element{color:var(--gov-button-error-base-disabled-color, var(--gov-color-error-200))}[type=base][variant=error][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=base][variant=error][disabled=\"\"][inverse=true i].gov-chip .element,[type=base][variant=error][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=base][variant=error][disabled=true i][inverse=\"\"].gov-chip .element,[type=base][variant=error][disabled=true i][inverse=true i].gov-chip .element,[type=base][variant=error][disabled=true i][inverse=\"1\"].gov-chip .element,[type=base][variant=error][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=base][variant=error][disabled=\"1\"][inverse=true i].gov-chip .element,[type=base][variant=error][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-error-base-inverse-disabled-bg, var(--gov-color-error-300));color:var(--gov-button-error-base-inverse-disabled-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){[type=base][variant=error][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-error-base-hover-bg, var(--gov-color-error-100));color:var(--gov-button-error-base-hover-color, var(--gov-color-error))}[type=base][variant=error][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-error-base-active-bg, var(--gov-color-error-200))}}@media not all and (pointer: coarse){[type=base][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover,[type=base][variant=error][hoverable][inverse=true i].gov-chip .element:hover,[type=base][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-error-base-inverse-hover-bg, var(--gov-color-error-500));color:var(--gov-button-error-base-inverse-hover-color, var(--gov-color-neutral-white))}[type=base][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=base][variant=error][hoverable][inverse=true i].gov-chip .element:hover:active,[type=base][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-error-base-inverse-active-bg, var(--gov-color-error-400));color:var(--gov-button-error-base-inverse-active-color, var(--gov-color-neutral-white))}}[type=link][variant=error].gov-chip .element{color:var(--gov-button-error-link-color, var(--gov-color-error))}[type=link][variant=error][inverse=\"\"].gov-chip .element,[type=link][variant=error][inverse=true i].gov-chip .element,[type=link][variant=error][inverse=\"1\"].gov-chip .element{color:var(--gov-button-error-link-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-error-link-inverse-bg, transparent)}[type=link][variant=error][disabled=\"\"].gov-chip .element,[type=link][variant=error][disabled=true i].gov-chip .element,[type=link][variant=error][disabled=\"1\"].gov-chip .element{color:var(--gov-button-error-link-disabled-color, var(--gov-color-error-200))}[type=link][variant=error][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=link][variant=error][disabled=\"\"][inverse=true i].gov-chip .element,[type=link][variant=error][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=link][variant=error][disabled=true i][inverse=\"\"].gov-chip .element,[type=link][variant=error][disabled=true i][inverse=true i].gov-chip .element,[type=link][variant=error][disabled=true i][inverse=\"1\"].gov-chip .element,[type=link][variant=error][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=link][variant=error][disabled=\"1\"][inverse=true i].gov-chip .element,[type=link][variant=error][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-error-link-inverse-disabled-bg, transparent);color:var(--gov-button-error-link-inverse-disabled-color, var(--gov-color-error-200))}@media not all and (pointer: coarse){[type=link][variant=error][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-error-link-hover-bg, transparent);color:var(--gov-button-error-link-hover-color, var(--gov-color-error))}[type=link][variant=error][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-error-link-active-bg, transparent);color:var(--gov-button-primary-link-active-color, var(--gov-color-error-500))}}@media not all and (pointer: coarse){[type=link][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover,[type=link][variant=error][hoverable][inverse=true i].gov-chip .element:hover,[type=link][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-error-link-inverse-hover-bg, transparent);color:var(--gov-button-error-link-inverse-hover-color, var(--gov-color-neutral-white))}[type=link][variant=error][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=link][variant=error][hoverable][inverse=true i].gov-chip .element:hover:active,[type=link][variant=error][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-error-link-inverse-active-bg, transparent);color:var(--gov-button-error-link-inverse-active-color, var(--gov-color-neutral-white))}}[type=solid][variant=success].gov-chip .element{background-color:var(--gov-button-success-solid-bg, var(--gov-color-success-500));color:var(--gov-button-success-solid-color, var(--gov-color-neutral-white))}[type=solid][variant=success][inverse=\"\"].gov-chip .element,[type=solid][variant=success][inverse=true i].gov-chip .element,[type=solid][variant=success][inverse=\"1\"].gov-chip .element{color:var(--gov-button-success-solid-inverse-color, var(--gov-color-success));background-color:var(--gov-button-success-solid-inverse-bg, var(--gov-color-success-200))}[type=solid][variant=success][inverse=\"\"].gov-chip .element:focus-visible,[type=solid][variant=success][inverse=true i].gov-chip .element:focus-visible,[type=solid][variant=success][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-success-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=success][disabled=\"\"].gov-chip .element,[type=solid][variant=success][disabled=true i].gov-chip .element,[type=solid][variant=success][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-success-solid-disabled-bg, var(--gov-color-success-200));color:var(--gov-button-success-solid-disabled-color, var(--gov-color-neutral-white))}[type=solid][variant=success][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=solid][variant=success][disabled=\"\"][inverse=true i].gov-chip .element,[type=solid][variant=success][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=solid][variant=success][disabled=true i][inverse=\"\"].gov-chip .element,[type=solid][variant=success][disabled=true i][inverse=true i].gov-chip .element,[type=solid][variant=success][disabled=true i][inverse=\"1\"].gov-chip .element,[type=solid][variant=success][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=solid][variant=success][disabled=\"1\"][inverse=true i].gov-chip .element,[type=solid][variant=success][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-success-solid-inverse-disabled-bg, var(--gov-color-success-300));color:var(--gov-button-success-solid-inverse-disabled-color, var(--gov-color-success-400))}@media not all and (pointer: coarse){[type=solid][variant=success][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-success-solid-hover-bg, var(--gov-color-success-600));color:var(--gov-button-success-solid-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=success][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-success-solid-active-bg, var(--gov-color-success-700))}}@media not all and (pointer: coarse){[type=solid][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover,[type=solid][variant=success][hoverable][inverse=true i].gov-chip .element:hover,[type=solid][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-success-solid-inverse-hover-bg, var(--gov-color-success-700));color:var(--gov-button-success-solid-inverse-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=solid][variant=success][hoverable][inverse=true i].gov-chip .element:hover:active,[type=solid][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-success-solid-inverse-active-bg, var(--gov-color-success-800))}}[type=outlined][variant=success].gov-chip .element{color:var(--gov-button-success-outlined-color, var(--gov-color-success-500));border-color:var(--gov-button-success-outlined-border, var(--gov-color-success-500))}[type=outlined][variant=success][inverse=\"\"].gov-chip .element,[type=outlined][variant=success][inverse=true i].gov-chip .element,[type=outlined][variant=success][inverse=\"1\"].gov-chip .element{color:var(--gov-button-success-outlined-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-success-outlined-inverse-bg, transparent);border-color:var(--gov-button-success-outlined-inverse-border, var(--gov-color-neutral-white))}[type=outlined][variant=success][inverse=\"\"].gov-chip .element:focus-visible,[type=outlined][variant=success][inverse=true i].gov-chip .element:focus-visible,[type=outlined][variant=success][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-success-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=success][disabled=\"\"].gov-chip .element,[type=outlined][variant=success][disabled=true i].gov-chip .element,[type=outlined][variant=success][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-success-outlined-disabled-bg, transparent);color:var(--gov-button-success-outlined-disabled-color, var(--gov-color-success-300));border-color:var(--gov-button-success-outlined-disabled-border, var(--gov-color-success-300))}[type=outlined][variant=success][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=success][disabled=\"\"][inverse=true i].gov-chip .element,[type=outlined][variant=success][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=outlined][variant=success][disabled=true i][inverse=\"\"].gov-chip .element,[type=outlined][variant=success][disabled=true i][inverse=true i].gov-chip .element,[type=outlined][variant=success][disabled=true i][inverse=\"1\"].gov-chip .element,[type=outlined][variant=success][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=success][disabled=\"1\"][inverse=true i].gov-chip .element,[type=outlined][variant=success][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-success-outlined-inverse-disabled-bg, var(--gov-color-success-300));color:var(--gov-button-success-outlined-inverse-disabled-color, var(--gov-color-success-400));border-color:var(--gov-button-success-outlined-inverse-disabled-border-color, var(--gov-color-success-400))}@media not all and (pointer: coarse){[type=outlined][variant=success][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));color:var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500))}[type=outlined][variant=success][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-success-outlined-active-bg, var(--gov-color-success-200))}}@media not all and (pointer: coarse){[type=outlined][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover,[type=outlined][variant=success][hoverable][inverse=true i].gov-chip .element:hover,[type=outlined][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-success-outlined-inverse-hover-bg, var(--gov-color-success-500));color:var(--gov-button-success-outlined-inverse-hover-color, var(--gov-color-neutral-white))}[type=outlined][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=outlined][variant=success][hoverable][inverse=true i].gov-chip .element:hover:active,[type=outlined][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-success-outlined-inverse-active-bg, var(--gov-color-success-400))}}[type=base][variant=success].gov-chip .element{color:var(--gov-button-success-base-color, var(--gov-color-success-500))}[type=base][variant=success][inverse=\"\"].gov-chip .element,[type=base][variant=success][inverse=true i].gov-chip .element,[type=base][variant=success][inverse=\"1\"].gov-chip .element{color:var(--gov-button-success-base-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-success-base-inverse-bg, transparent)}[type=base][variant=success][disabled=\"\"].gov-chip .element,[type=base][variant=success][disabled=true i].gov-chip .element,[type=base][variant=success][disabled=\"1\"].gov-chip .element{color:var(--gov-button-success-base-disabled-color, var(--gov-color-success-300))}[type=base][variant=success][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=base][variant=success][disabled=\"\"][inverse=true i].gov-chip .element,[type=base][variant=success][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=base][variant=success][disabled=true i][inverse=\"\"].gov-chip .element,[type=base][variant=success][disabled=true i][inverse=true i].gov-chip .element,[type=base][variant=success][disabled=true i][inverse=\"1\"].gov-chip .element,[type=base][variant=success][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=base][variant=success][disabled=\"1\"][inverse=true i].gov-chip .element,[type=base][variant=success][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-success-base-inverse-disabled-bg, var(--gov-color-success-300));color:var(--gov-button-success-base-inverse-disabled-color, var(--gov-color-success-400))}@media not all and (pointer: coarse){[type=base][variant=success][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-success-base-hover-bg, var(--gov-color-success-100));color:var(--gov-button-success-base-hover-color, var(--gov-color-success-500))}[type=base][variant=success][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-success-base-active-bg, var(--gov-color-success-200))}}@media not all and (pointer: coarse){[type=base][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover,[type=base][variant=success][hoverable][inverse=true i].gov-chip .element:hover,[type=base][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-success-base-inverse-hover-bg, var(--gov-color-success-600));color:var(--gov-button-success-base-inverse-hover-color, var(--gov-color-neutral-white))}[type=base][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=base][variant=success][hoverable][inverse=true i].gov-chip .element:hover:active,[type=base][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-success-base-inverse-active-bg, var(--gov-color-success-500));color:var(--gov-button-success-base-inverse-active-color, var(--gov-color-neutral-white))}}[type=link][variant=success].gov-chip .element{color:var(--gov-button-success-link-color, var(--gov-color-success-500))}[type=link][variant=success][inverse=\"\"].gov-chip .element,[type=link][variant=success][inverse=true i].gov-chip .element,[type=link][variant=success][inverse=\"1\"].gov-chip .element{color:var(--gov-button-success-link-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-success-link-inverse-bg, transparent)}[type=link][variant=success][disabled=\"\"].gov-chip .element,[type=link][variant=success][disabled=true i].gov-chip .element,[type=link][variant=success][disabled=\"1\"].gov-chip .element{color:var(--gov-button-success-link-disabled-color, var(--gov-color-success-300))}[type=link][variant=success][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=link][variant=success][disabled=\"\"][inverse=true i].gov-chip .element,[type=link][variant=success][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=link][variant=success][disabled=true i][inverse=\"\"].gov-chip .element,[type=link][variant=success][disabled=true i][inverse=true i].gov-chip .element,[type=link][variant=success][disabled=true i][inverse=\"1\"].gov-chip .element,[type=link][variant=success][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=link][variant=success][disabled=\"1\"][inverse=true i].gov-chip .element,[type=link][variant=success][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-success-link-inverse-disabled-bg, transparent);color:var(--gov-button-success-link-inverse-disabled-color, var(--gov-color-success-400))}@media not all and (pointer: coarse){[type=link][variant=success][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-success-link-hover-bg, transparent);color:var(--gov-button-success-link-hover-color, var(--gov-color-success-500))}[type=link][variant=success][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-success-link-active-bg, transparent);color:var(--gov-button-primary-link-active-color, var(--gov-color-success-600))}}@media not all and (pointer: coarse){[type=link][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover,[type=link][variant=success][hoverable][inverse=true i].gov-chip .element:hover,[type=link][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-success-link-inverse-hover-bg, transparent);color:var(--gov-button-success-link-inverse-hover-color, var(--gov-color-neutral-white))}[type=link][variant=success][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=link][variant=success][hoverable][inverse=true i].gov-chip .element:hover:active,[type=link][variant=success][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-success-link-inverse-active-bg, transparent);color:var(--gov-button-success-link-inverse-active-color, var(--gov-color-neutral-white))}}[type=solid][variant=warning].gov-chip .element{background-color:var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));color:var(--gov-button-warning-solid-color, var(--gov-color-neutral-white))}[type=solid][variant=warning][inverse=\"\"].gov-chip .element,[type=solid][variant=warning][inverse=true i].gov-chip .element,[type=solid][variant=warning][inverse=\"1\"].gov-chip .element{color:var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning));background-color:var(--gov-button-warning-solid-inverse-bg, var(--gov-color-warning-200))}[type=solid][variant=warning][inverse=\"\"].gov-chip .element:focus-visible,[type=solid][variant=warning][inverse=true i].gov-chip .element:focus-visible,[type=solid][variant=warning][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-warning-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=warning][disabled=\"\"].gov-chip .element,[type=solid][variant=warning][disabled=true i].gov-chip .element,[type=solid][variant=warning][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-warning-solid-disabled-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-solid-disabled-color, var(--gov-color-neutral-white))}[type=solid][variant=warning][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=solid][variant=warning][disabled=\"\"][inverse=true i].gov-chip .element,[type=solid][variant=warning][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=solid][variant=warning][disabled=true i][inverse=\"\"].gov-chip .element,[type=solid][variant=warning][disabled=true i][inverse=true i].gov-chip .element,[type=solid][variant=warning][disabled=true i][inverse=\"1\"].gov-chip .element,[type=solid][variant=warning][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=solid][variant=warning][disabled=\"1\"][inverse=true i].gov-chip .element,[type=solid][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-warning-solid-inverse-disabled-bg, var(--gov-color-warning-300));color:var(--gov-button-warning-solid-inverse-disabled-color, var(--gov-color-warning-400))}@media not all and (pointer: coarse){[type=solid][variant=warning][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-warning-solid-hover-bg, var(--gov-color-warning-600));color:var(--gov-button-warning-solid-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=warning][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-warning-solid-active-bg, var(--gov-color-warning-700))}}@media not all and (pointer: coarse){[type=solid][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover,[type=solid][variant=warning][hoverable][inverse=true i].gov-chip .element:hover,[type=solid][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-warning-solid-inverse-hover-bg, var(--gov-color-warning-700));color:var(--gov-button-warning-solid-inverse-hover-color, var(--gov-color-neutral-white))}[type=solid][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=solid][variant=warning][hoverable][inverse=true i].gov-chip .element:hover:active,[type=solid][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-warning-solid-inverse-active-bg, var(--gov-color-warning-800))}}[type=outlined][variant=warning].gov-chip .element{color:var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));border-color:var(--gov-button-warning-outlined-border, var(--gov-color-warning-500))}[type=outlined][variant=warning][inverse=\"\"].gov-chip .element,[type=outlined][variant=warning][inverse=true i].gov-chip .element,[type=outlined][variant=warning][inverse=\"1\"].gov-chip .element{color:var(--gov-button-warning-outlined-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-warning-outlined-inverse-bg, transparent);border-color:var(--gov-button-warning-outlined-inverse-border, var(--gov-color-neutral-white))}[type=outlined][variant=warning][inverse=\"\"].gov-chip .element:focus-visible,[type=outlined][variant=warning][inverse=true i].gov-chip .element:focus-visible,[type=outlined][variant=warning][inverse=\"1\"].gov-chip .element:focus-visible{background-color:var(--gov-button-warning-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=warning][disabled=\"\"].gov-chip .element,[type=outlined][variant=warning][disabled=true i].gov-chip .element,[type=outlined][variant=warning][disabled=\"1\"].gov-chip .element{background-color:var(--gov-button-warning-outlined-disabled-bg, transparent);color:var(--gov-button-warning-outlined-disabled-color, var(--gov-color-warning));border-color:var(--gov-button-warning-outlined-disabled-border, var(--gov-color-warning))}[type=outlined][variant=warning][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=warning][disabled=\"\"][inverse=true i].gov-chip .element,[type=outlined][variant=warning][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=outlined][variant=warning][disabled=true i][inverse=\"\"].gov-chip .element,[type=outlined][variant=warning][disabled=true i][inverse=true i].gov-chip .element,[type=outlined][variant=warning][disabled=true i][inverse=\"1\"].gov-chip .element,[type=outlined][variant=warning][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=outlined][variant=warning][disabled=\"1\"][inverse=true i].gov-chip .element,[type=outlined][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-warning-outlined-inverse-disabled-bg, var(--gov-color-warning-300));color:var(--gov-button-warning-outlined-inverse-disabled-color, var(--gov-color-warning-400));border-color:var(--gov-button-warning-outlined-inverse-disabled-border-color, var(--gov-color-warning-400))}@media not all and (pointer: coarse){[type=outlined][variant=warning][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500))}[type=outlined][variant=warning][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-warning-outlined-active-bg, var(--gov-color-warning-300))}}@media not all and (pointer: coarse){[type=outlined][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover,[type=outlined][variant=warning][hoverable][inverse=true i].gov-chip .element:hover,[type=outlined][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-warning-outlined-inverse-hover-bg, var(--gov-color-warning-500));color:var(--gov-button-warning-outlined-inverse-hover-color, var(--gov-color-neutral-white))}[type=outlined][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=outlined][variant=warning][hoverable][inverse=true i].gov-chip .element:hover:active,[type=outlined][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-warning-outlined-inverse-active-bg, var(--gov-color-warning-400))}}[type=base][variant=warning].gov-chip .element{color:var(--gov-button-warning-base-color, var(--gov-color-warning-500))}[type=base][variant=warning][inverse=\"\"].gov-chip .element,[type=base][variant=warning][inverse=true i].gov-chip .element,[type=base][variant=warning][inverse=\"1\"].gov-chip .element{color:var(--gov-button-warning-base-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-warning-base-inverse-bg, transparent)}[type=base][variant=warning][disabled=\"\"].gov-chip .element,[type=base][variant=warning][disabled=true i].gov-chip .element,[type=base][variant=warning][disabled=\"1\"].gov-chip .element{color:var(--gov-button-warning-base-disabled-color, var(--gov-color-warning))}[type=base][variant=warning][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=base][variant=warning][disabled=\"\"][inverse=true i].gov-chip .element,[type=base][variant=warning][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=base][variant=warning][disabled=true i][inverse=\"\"].gov-chip .element,[type=base][variant=warning][disabled=true i][inverse=true i].gov-chip .element,[type=base][variant=warning][disabled=true i][inverse=\"1\"].gov-chip .element,[type=base][variant=warning][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=base][variant=warning][disabled=\"1\"][inverse=true i].gov-chip .element,[type=base][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-warning-base-inverse-disabled-bg, var(--gov-color-warning-300));color:var(--gov-button-warning-base-inverse-disabled-color, var(--gov-color-warning-400))}@media not all and (pointer: coarse){[type=base][variant=warning][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-warning-base-hover-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-base-hover-color, var(--gov-color-warning-500))}[type=base][variant=warning][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-warning-base-active-bg, var(--gov-color-warning-300))}}@media not all and (pointer: coarse){[type=base][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover,[type=base][variant=warning][hoverable][inverse=true i].gov-chip .element:hover,[type=base][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-warning-base-inverse-hover-bg, var(--gov-color-warning-500));color:var(--gov-button-warning-base-inverse-hover-color, var(--gov-color-neutral-white))}[type=base][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=base][variant=warning][hoverable][inverse=true i].gov-chip .element:hover:active,[type=base][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-warning-base-inverse-active-bg, var(--gov-color-warning-400));color:var(--gov-button-warning-base-inverse-active-color, var(--gov-color-neutral-white))}}[type=link][variant=warning].gov-chip .element{color:var(--gov-button-warning-link-color, var(--gov-color-warning-500))}[type=link][variant=warning][inverse=\"\"].gov-chip .element,[type=link][variant=warning][inverse=true i].gov-chip .element,[type=link][variant=warning][inverse=\"1\"].gov-chip .element{color:var(--gov-button-warning-link-inverse-color, var(--gov-color-neutral-white));background-color:var(--gov-button-warning-link-inverse-bg, transparent)}[type=link][variant=warning][disabled=\"\"].gov-chip .element,[type=link][variant=warning][disabled=true i].gov-chip .element,[type=link][variant=warning][disabled=\"1\"].gov-chip .element{color:var(--gov-button-warning-link-disabled-color, var(--gov-color-warning))}[type=link][variant=warning][disabled=\"\"][inverse=\"\"].gov-chip .element,[type=link][variant=warning][disabled=\"\"][inverse=true i].gov-chip .element,[type=link][variant=warning][disabled=\"\"][inverse=\"1\"].gov-chip .element,[type=link][variant=warning][disabled=true i][inverse=\"\"].gov-chip .element,[type=link][variant=warning][disabled=true i][inverse=true i].gov-chip .element,[type=link][variant=warning][disabled=true i][inverse=\"1\"].gov-chip .element,[type=link][variant=warning][disabled=\"1\"][inverse=\"\"].gov-chip .element,[type=link][variant=warning][disabled=\"1\"][inverse=true i].gov-chip .element,[type=link][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-chip .element{background-color:var(--gov-button-warning-link-inverse-disabled-bg, transparent);color:var(--gov-button-warning-link-inverse-disabled-color, var(--gov-color-warning-400))}@media not all and (pointer: coarse){[type=link][variant=warning][hoverable].gov-chip>.element:hover{background-color:var(--gov-button-warning-link-hover-bg, transparent);color:var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500))}[type=link][variant=warning][hoverable].gov-chip>.element:hover:active{background-color:var(--gov-button-warning-link-active-bg, transparent);color:var(--gov-button-primary-link-active-color, var(--gov-color-warning-600))}}@media not all and (pointer: coarse){[type=link][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover,[type=link][variant=warning][hoverable][inverse=true i].gov-chip .element:hover,[type=link][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover{background-color:var(--gov-button-warning-link-inverse-hover-bg, transparent);color:var(--gov-button-warning-link-inverse-hover-color, var(--gov-color-neutral-white))}[type=link][variant=warning][hoverable][inverse=\"\"].gov-chip .element:hover:active,[type=link][variant=warning][hoverable][inverse=true i].gov-chip .element:hover:active,[type=link][variant=warning][hoverable][inverse=\"1\"].gov-chip .element:hover:active{background-color:var(--gov-button-warning-link-inverse-active-bg, transparent);color:var(--gov-button-warning-link-inverse-active-color, var(--gov-color-neutral-white))}}[size=xs].gov-chip .element{font-weight:var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));font-size:var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));line-height:var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));letter-spacing:var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));-moz-column-gap:var(--gov-button-xs-padding-x, 0.625rem);column-gap:var(--gov-button-xs-padding-x, 0.625rem);min-height:var(--gov-button-xs-min-height, 1.5rem);padding:var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem)}[size=xs].gov-chip .element .gov-icon{width:var(--gov-button-xs-icon-size, 1rem);height:var(--gov-button-xs-icon-size, 1rem)}[size=s].gov-chip .element{font-weight:var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));font-size:var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));line-height:var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));letter-spacing:var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));-moz-column-gap:var(--gov-button-s-padding-x, 0.75rem);column-gap:var(--gov-button-s-padding-x, 0.75rem);min-height:var(--gov-button-s-min-height, 2rem);padding:var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem)}[size=s].gov-chip .element .gov-icon{width:var(--gov-button-s-icon-size, 1rem);height:var(--gov-button-s-icon-size, 1rem)}[size=m].gov-chip .element{font-weight:var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));font-size:var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));line-height:var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));letter-spacing:var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));-moz-column-gap:var(--gov-button-m-padding-x, 0.75rem);column-gap:var(--gov-button-m-padding-x, 0.75rem);min-height:var(--gov-button-m-min-height, 2.5rem);padding:var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem)}[size=m].gov-chip .element .gov-icon{width:var(--gov-button-m-icon-size, 1.25rem);height:var(--gov-button-m-icon-size, 1.25rem)}[size=l].gov-chip .element{font-weight:var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));font-size:var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));line-height:var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));letter-spacing:var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));-moz-column-gap:var(--gov-button-l-padding-x, 1rem);column-gap:var(--gov-button-l-padding-x, 1rem);min-height:var(--gov-button-l-min-height, 3rem);padding:var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem)}[size=l].gov-chip .element .gov-icon{width:var(--gov-button-l-icon-size, 1.5rem);height:var(--gov-button-l-icon-size, 1.5rem)}[size=xl].gov-chip .element{font-weight:var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));font-size:var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));line-height:var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));letter-spacing:var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));-moz-column-gap:var(--gov-button-xl-padding-x, 1.25rem);column-gap:var(--gov-button-xl-padding-x, 1.25rem);min-height:var(--gov-button-xl-min-height, 3.5rem);padding:var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem)}[size=xl].gov-chip .element .gov-icon{width:var(--gov-button-xl-icon-size, 1.75rem);height:var(--gov-button-xl-icon-size, 1.75rem)}.gov-chip a .gov-icon{margin:0}.gov-chip .element{font-family:var(--gov-font-family, \"Roboto\", sans-serif);font-weight:400;letter-spacing:initial}.gov-chip .gov-button .element{border:none}.gov-chip--has-right>.element{padding-top:0 !important;padding-right:0 !important;padding-bottom:0 !important}.gov-chip--has-left>.element{padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}.gov-chip[size=xs] .element{border-radius:calc(var(--gov-button-xs-min-height, 1.5rem) * 0.5)}.gov-chip[size=xs][hoverable] .element:focus{outline:none}.gov-chip[size=xs][hoverable] .element:focus-visible{border-radius:calc(var(--gov-button-xs-min-height, 1.5rem) * 0.5);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0.0625rem}.gov-chip[size=s] .element{border-radius:calc(var(--gov-button-s-min-height, 2rem) * 0.5)}.gov-chip[size=s][hoverable] .element:focus{outline:none}.gov-chip[size=s][hoverable] .element:focus-visible{border-radius:calc(var(--gov-button-s-min-height, 2rem) * 0.5);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0.0625rem}.gov-chip[size=m] .element{border-radius:calc(var(--gov-button-m-min-height, 2.5rem) * 0.5)}.gov-chip[size=m][hoverable] .element:focus{outline:none}.gov-chip[size=m][hoverable] .element:focus-visible{border-radius:calc(var(--gov-button-m-min-height, 2.5rem) * 0.5);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0.0625rem}.gov-chip[size=l] .element{border-radius:calc(var(--gov-button-l-min-height, 3rem) * 0.5)}.gov-chip[size=l][hoverable] .element:focus{outline:none}.gov-chip[size=l][hoverable] .element:focus-visible{border-radius:calc(var(--gov-button-l-min-height, 3rem) * 0.5);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0.0625rem}.gov-chip[size=xl] .element{border-radius:calc(var(--gov-button-xl-min-height, 3.5rem) * 0.5)}.gov-chip[size=xl][hoverable] .element:focus{outline:none}.gov-chip[size=xl][hoverable] .element:focus-visible{border-radius:calc(var(--gov-button-xl-min-height, 3.5rem) * 0.5);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0.0625rem}.gov-chip[variant=primary][inverse=\"\"] .element,.gov-chip[variant=primary][inverse=\"\"] .element .element,.gov-chip[variant=primary][inverse=true i] .element,.gov-chip[variant=primary][inverse=true i] .element .element,.gov-chip[variant=primary][inverse=\"1\"] .element,.gov-chip[variant=primary][inverse=\"1\"] .element .element{border-width:0.0625rem;border-color:var(--gov-chip-inverse-primary-border-color, var(--gov-color-primary-200));background-color:var(--gov-chip-inverse-primary-bg, var(--gov-color-primary-200));color:var(--gov-chip-inverse-primary-color, var(--gov-color-primary))}@media not all and (pointer: coarse){.gov-chip[variant=primary][inverse=\"\"] .element:hover,.gov-chip[variant=primary][inverse=\"\"] .element .element:hover,.gov-chip[variant=primary][inverse=true i] .element:hover,.gov-chip[variant=primary][inverse=true i] .element .element:hover,.gov-chip[variant=primary][inverse=\"1\"] .element:hover,.gov-chip[variant=primary][inverse=\"1\"] .element .element:hover{border-color:var(--gov-chip-inverse-primary-border-color-hover, var(--gov-color-primary-200))}}.gov-chip[variant=secondary][inverse=\"\"] .element,.gov-chip[variant=secondary][inverse=\"\"] .element .element,.gov-chip[variant=secondary][inverse=true i] .element,.gov-chip[variant=secondary][inverse=true i] .element .element,.gov-chip[variant=secondary][inverse=\"1\"] .element,.gov-chip[variant=secondary][inverse=\"1\"] .element .element{border-width:0.0625rem;border-color:var(--gov-chip-inverse-secondary-border-color, var(--gov-color-secondary-400));background-color:var(--gov-chip-inverse-secondary-bg, var(--gov-color-secondary-200));color:var(--gov-chip-inverse-secondary-color, var(--gov-color-secondary-900))}@media not all and (pointer: coarse){.gov-chip[variant=secondary][inverse=\"\"] .element:hover,.gov-chip[variant=secondary][inverse=\"\"] .element .element:hover,.gov-chip[variant=secondary][inverse=true i] .element:hover,.gov-chip[variant=secondary][inverse=true i] .element .element:hover,.gov-chip[variant=secondary][inverse=\"1\"] .element:hover,.gov-chip[variant=secondary][inverse=\"1\"] .element .element:hover{border-color:var(--gov-chip-inverse-secondary-border-color-hover, var(--gov-color-secondary-400))}}.gov-chip[variant=success][inverse=\"\"] .element,.gov-chip[variant=success][inverse=\"\"] .element .element,.gov-chip[variant=success][inverse=true i] .element,.gov-chip[variant=success][inverse=true i] .element .element,.gov-chip[variant=success][inverse=\"1\"] .element,.gov-chip[variant=success][inverse=\"1\"] .element .element{border-width:0.0625rem;border-color:var(--gov-chip-inverse-success-border-color, var(--gov-color-success-200));background-color:var(--gov-chip-inverse-success-bg, var(--gov-color-success-100));color:var(--gov-chip-inverse-success-color, var(--gov-color-success-600))}@media not all and (pointer: coarse){.gov-chip[variant=success][inverse=\"\"] .element:hover,.gov-chip[variant=success][inverse=\"\"] .element .element:hover,.gov-chip[variant=success][inverse=true i] .element:hover,.gov-chip[variant=success][inverse=true i] .element .element:hover,.gov-chip[variant=success][inverse=\"1\"] .element:hover,.gov-chip[variant=success][inverse=\"1\"] .element .element:hover{border-color:var(--gov-chip-inverse-success-border-color-hover, var(--gov-color-success-200))}}.gov-chip[variant=warning][inverse=\"\"] .element,.gov-chip[variant=warning][inverse=\"\"] .element .element,.gov-chip[variant=warning][inverse=true i] .element,.gov-chip[variant=warning][inverse=true i] .element .element,.gov-chip[variant=warning][inverse=\"1\"] .element,.gov-chip[variant=warning][inverse=\"1\"] .element .element{border-width:0.0625rem;border-color:var(--gov-chip-inverse-warning-border-color, var(--gov-color-warning-200));background-color:var(--gov-chip-inverse-warning-bg, var(--gov-color-warning-100));color:var(--gov-chip-inverse-warning-color, var(--gov-color-warning-600))}@media not all and (pointer: coarse){.gov-chip[variant=warning][inverse=\"\"] .element:hover,.gov-chip[variant=warning][inverse=\"\"] .element .element:hover,.gov-chip[variant=warning][inverse=true i] .element:hover,.gov-chip[variant=warning][inverse=true i] .element .element:hover,.gov-chip[variant=warning][inverse=\"1\"] .element:hover,.gov-chip[variant=warning][inverse=\"1\"] .element .element:hover{border-color:var(--gov-chip-inverse-warning-border-color-hover, var(--gov-color-warning-200))}}.gov-chip[variant=error][inverse=\"\"] .element,.gov-chip[variant=error][inverse=\"\"] .element .element,.gov-chip[variant=error][inverse=true i] .element,.gov-chip[variant=error][inverse=true i] .element .element,.gov-chip[variant=error][inverse=\"1\"] .element,.gov-chip[variant=error][inverse=\"1\"] .element .element{border-width:0.0625rem;border-color:var(--gov-chip-inverse-error-border-color, var(--gov-color-error-200));background-color:var(--gov-chip-inverse-error-bg, var(--gov-color-error-100));color:var(--gov-chip-inverse-error-color, var(--gov-color-error-500))}@media not all and (pointer: coarse){.gov-chip[variant=error][inverse=\"\"] .element:hover,.gov-chip[variant=error][inverse=\"\"] .element .element:hover,.gov-chip[variant=error][inverse=true i] .element:hover,.gov-chip[variant=error][inverse=true i] .element .element:hover,.gov-chip[variant=error][inverse=\"1\"] .element:hover,.gov-chip[variant=error][inverse=\"1\"] .element .element:hover{border-color:var(--gov-chip-inverse-error-border-color-hover, var(--gov-color-error-200))}}";
-const GovChipStyle0 = govChipCss;
-
 const GovChip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.govClick = index.createEvent(this, "gov-click", 7);
-        this.inverse = false;
+        this.hydrated = false;
         this.disabled = false;
         this.href = undefined;
         this.target = undefined;
         this.iconLeft = undefined;
         this.iconRight = undefined;
-        this.size = constants.ButtonSizes._M;
+        this.size = ChipSizes._M;
         this.tag = "span";
-        this.variant = constants.ButtonVariants.PRIMARY;
+        this.color = constants.ButtonColors.PRIMARY;
+        this.type = undefined;
         this.focusable = true;
         this.identifier = undefined;
-        this.wcagLabel = undefined;
-        this.wcagControls = undefined;
-        this.wcagSelected = undefined;
+        this.inheritedAttributes = {};
         this.h = template.govHost(this.host);
         this.chipId = string_utils.createID('GovChip');
     }
-    validateVariant(newValue) {
-        props.validateProp(constants.ButtonVariants, newValue, ChipClass.root);
+    validateColor(newValue) {
+        props.validateProp(constants.ButtonColors, newValue, ChipClass.root);
     }
     validateSize(newValue) {
         props.validateProp(constants.ButtonSizes, newValue, ChipClass.root);
     }
     componentWillLoad() {
-        this.validateVariant(this.variant);
+        this.validateColor(this.color);
         this.validateSize(this.size);
+        this.inheritedAttributes = accessibility.inheritAriaAttributes(this.host);
+    }
+    componentDidLoad() {
+        this.attributeObserver = new attribute.AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(attribute.ariaAttributes);
+    }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
+    }
+    connectedCallback() {
+        this.hydrated = true;
+    }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     render() {
         const Tag = this.href ? NativeType.A : this.tag;
         const nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined;
         const iconLeft = helpers.prepareIconFormat(this.iconLeft);
         const iconRight = helpers.prepareIconFormat(this.iconRight);
-        return (index.h(index.Host, { key: 'a762fc72978ddaeef9650f94ce10750ef7339f86', class: this.h.classes([
+        return (index.h(index.Host, { key: '7273e571a906515a35208303f36eb3d2bac4b663', class: this.h.classes([
                 ChipClass.root,
                 this.h.hasSlot("right") ? ChipClass.hasRight : undefined,
                 this.h.hasSlot("left") ? ChipClass.hasLeft : undefined,
-            ]), disabled: this.disabled, href: this.href, variant: this.variant, type: this.inverse ? undefined : "solid", size: this.size, inverse: this.inverse, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON }, index.h(Tag, { key: '278edb0a21fe15e7aa574daad619096e57f2d6a5', class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), "aria-disabled": this.disabled, "aria-controls": this.wcagControls, "aria-selected": template.toBoolAttr(this.wcagSelected), tabindex: this.focusable ? "0" : "-1", id: this.identifier || this.chipId, type: nativeType }, this.h.hasSlot("left") && index.h("slot", { key: '3056115d4e10bd23be18b1f5114ad81fe7063972', name: "left" }), this.h.hasSlot("left-icon") && index.h("slot", { key: '21172846bfc95710974cec7d0d2dd5fe48dd122e', name: "left-icon" }), iconLeft && index.h("gov-icon", { key: '12fdcd9d663f48449ca0c3235e742fda539c4cf9', type: iconLeft.type, name: iconLeft.name }), index.h("slot", { key: 'ce4f6aecc3138306568b50baf4d56bd855d47eb5' }), this.h.hasSlot("right-icon") && index.h("slot", { key: '80899c41df389000947551bc7bb03d6d97b1c675', name: "right-icon" }), this.h.hasSlot("right") && index.h("slot", { key: 'e07dee9e45dc081780112cb60ccacce6123a5df2', name: "right" }), iconRight && index.h("gov-icon", { key: '0ecd33e0d71635e56a5852f5687a77059c3143e4', type: iconRight.type, name: iconRight.name }))));
+            ]), disabled: this.disabled, href: this.href, color: this.color, type: this.type, size: this.size, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON, hydrated: this.hydrated }, index.h(Tag, Object.assign({ key: '8c32f17c36a757d8be7ae813ca113aa505375159', class: "element", href: this.href, target: this.target, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), tabindex: (this.h.hasSlot("left") || this.h.hasSlot("right") || this.disabled) && !this.focusable ? "-1" : "0", id: this.identifier || this.chipId, type: nativeType }, this.inheritedAttributes, { "aria-disabled": this.disabled }), index.h("slot", { key: 'e9fec4f49fbb1b43f73face265bc3c8dfcebc4fe', name: "left" }), index.h("slot", { key: '7fd9b938c44c55e66041d9298e285f34c80a0722', name: "left-icon" }, iconLeft && index.h("gov-icon", { key: '5f1a73b93fdbecfc0fe30ad45d0a86444e1b4703', type: iconLeft.type, name: iconLeft.name })), index.h("slot", { key: 'e63ae004f3c4b5e164e326ca7cff300b68ba02ee' }), index.h("slot", { key: '39da8e323a6623cfb0eb6f6807931f496cfeb867', name: "right-icon" }, iconRight && index.h("gov-icon", { key: '1518485f6d60b515a138dedc142ca7a013dd67bb', type: iconRight.type, name: iconRight.name })), index.h("slot", { key: '20059af90e74b6f8bb68673c56b387fd558eee29', name: "right" }))));
     }
     onClickHandler(e) {
         e.stopPropagation();
@@ -81,15 +102,9 @@ const GovChip = class {
     /**
      * Returns a clickable element instance
      */
-    async getTriggerRef() {
+    async geRef() {
         return this.triggerRef;
     }
-    /**
-     * Returns a unique tab trigger identifier
-     */
-    async getTriggerIdentifier() {
-        return this.identifier || this.chipId;
-    }
     /**
      * Focus button element
      */
@@ -98,11 +113,10 @@ const GovChip = class {
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "variant": ["validateVariant"],
+        "color": ["validateColor"],
         "size": ["validateSize"]
     }; }
 };
-GovChip.style = GovChipStyle0;
 
 exports.gov_chip = GovChip;
 

package/dist/cjs/gov-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-chip.entry.cjs.js","mappings":"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","names":["ButtonSizes","ButtonVariants","govHost","createID","validateProp","prepareIconFormat","h","Host","toBoolAttr"],"sources":["../../../packages/core/src/components/gov-chip/constants.ts","../../../packages/core/src/components/gov-chip/gov-chip.scss?tag=gov-chip","../../../packages/core/src/components/gov-chip/gov-chip.tsx"],"sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nexport enum NativeType {\n\tA = 'a',\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const ChipClass = {\n\troot: 'gov-chip',\n\tinner: 'gov-chip__inner',\n\thasRight: 'gov-chip--has-right',\n\thasLeft: 'gov-chip--has-left',\n}\n","/*\n *   Chip\n */\n\n// Shared definitions - button & chip\n@import \"../gov-button/button/gov-button-core\";\n\n.gov-chip {\n\t@extend %button-core;\n\ta .gov-icon {\n\t\tmargin: 0;\n\t}\n\t.element {\n\t\tfont-family: $font-family-primary;\n\t\tfont-weight: 400;\n\t\tletter-spacing: initial;\n\t}\n\t.gov-button {\n\t\t.element {\n\t\t\tborder: none;\n\t\t}\n\t}\n\t&--has-right > .element {\n\t\tpadding-top: 0 !important;\n\t\tpadding-right: 0 !important;\n\t\tpadding-bottom: 0 !important;\n\t}\n\n\t&--has-left > .element {\n\t\tpadding-top: 0 !important;\n\t\tpadding-bottom: 0 !important;\n\t\tpadding-left: 0 !important;\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $button-sizes {\n\t\t$radius: calc(#{get(\"min-height\", $definitions)} * 0.5);\n\t\t&[size=\"#{$size}\"] {\n\t\t\t.element {\n\t\t\t\tborder-radius: $radius;\n\t\t\t}\n\n\t\t\t// HOVERS\n\t\t\t&[hoverable] .element {\n\t\t\t\t@include focus-outline($radius, $outline-offset);\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $types in $chip-inverse-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\t.element,\n\t\t\t\t.element .element {\n\t\t\t\t\tborder-width: rem-calc(1);\n\t\t\t\t\tborder-color: deep-map-get($chip-inverse-variants, $variant, \"border-color\");\n\t\t\t\t\tbackground-color: deep-map-get($chip-inverse-variants, $variant, \"bg\");\n\t\t\t\t\tcolor: deep-map-get($chip-inverse-variants, $variant, \"color\");\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tborder-color: deep-map-get($chip-inverse-variants, $variant, \"border-color-hover\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\n\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { createID } from \"../../utils/string.utils\"\nimport { ButtonSizes, ButtonSizesType, ButtonVariants, ButtonVariantType } from \"../gov-button/button/constants\"\nimport { prepareIconFormat } from \"../gov-icon/helpers\"\nimport { ChipClass, NativeType, NativeTypesType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-chip\",\n\tstyleUrl: \"gov-chip.scss\",\n})\nexport class GovChip {\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\tprivate readonly chipId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.chipId = createID('GovChip')\n\t}\n\n\t@Element() host: HTMLGovChipElement\n\n\t/**\n\t * Determine if component should have inverse colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the chip component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Definition of the button icon on the left. The icon must be defined in the form \"type/name\".\n\t */\n\t@Prop({attribute: \"icon-left\"}) readonly iconLeft?: string\n\t/**\n\t * Definition of the button icon on the left. The icon must be defined in the form \"type/name\".\n\t */\n\t@Prop({attribute: \"icon-right\"}) readonly iconRight?: string\n\t/**\n\t * Chip’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = ButtonSizes._M\n\t/**\n\t * Used to change the HTML tag in the chip\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the chip.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = ButtonVariants.PRIMARY\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable\n\t */\n\t@Prop() readonly focusable: boolean = true\n\t/**\n\t * Custom chip identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected\n\t */\n\t@Prop({ attribute: \"wcag-selected\" }) readonly wcagSelected: boolean\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, ChipClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, ChipClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\tconst iconLeft = prepareIconFormat(this.iconLeft)\n\t\tconst iconRight = prepareIconFormat(this.iconRight)\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tChipClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? ChipClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? ChipClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.inverse ? undefined : \"solid\"}\n\t\t\t\tsize={this.size}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLButtonElement | HTMLSpanElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\taria-disabled={this.disabled}\n\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\taria-selected={toBoolAttr(this.wcagSelected)}\n\t\t\t\t\ttabindex={this.focusable ? \"0\" : \"-1\"}\n\t\t\t\t\tid={this.identifier || this.chipId}\n\t\t\t\t\ttype={nativeType}>\n\t\t\t\t\t{this.h.hasSlot(\"left\") && <slot name=\"left\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t{iconLeft && \t<gov-icon type={iconLeft.type} name={iconLeft.name}></gov-icon>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && <slot name=\"right-icon\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"right\") && <slot name=\"right\"></slot>}\n\t\t\t\t\t{iconRight && \t<gov-icon type={iconRight.type} name={iconRight.name}></gov-icon>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n\n\t/**\n\t * Returns a clickable element instance\n\t */\n\t@Method()\n\tasync getTriggerRef() {\n\t\treturn this.triggerRef\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.chipId\n\t}\n\n\t/**\n\t * Focus button element\n\t */\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.triggerRef.focus()\n\t}\n}\n"],"version":3}
+{"file":"gov-chip.entry.cjs.js","mappings":"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","names":["pick","Sizes","ButtonColors","govHost","createID","validateProp","ButtonSizes","inheritAriaAttributes","AttributeObserver","ariaAttributes","prepareIconFormat","h","Host"],"sources":["../../../packages/core/src/components/gov-chip/constants.ts","../../../packages/core/src/components/gov-chip/gov-chip.tsx"],"sourcesContent":["import { ValueOf } from '../../types/interfaces'\nimport {pick} from \"../../utils/utils\";\nimport {Sizes} from \"../../core/constants/sizes\";\n\nexport const ChipSizes = pick(Sizes, ['_XS', '_S', '_M'])\nexport type ChipSizesType = `${ValueOf<typeof ChipSizes>}`\n\nexport enum ChipType {\n\tSOLID = 'solid',\n\tOUTLINED = 'outlined',\n}\nexport type ChipTypesType = `${ValueOf<typeof ChipType>}`\n\nexport enum NativeType {\n\tA = 'a',\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const ChipClass = {\n\troot: 'gov-chip',\n\tinner: 'gov-chip__inner',\n\thasRight: 'gov-chip--has-right',\n\thasLeft: 'gov-chip--has-left',\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {validateProp} from \"../../helpers/Validate/props\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {ChipClass, ChipSizes, ChipSizesType, ChipTypesType, NativeType, NativeTypesType} from \"./constants\"\nimport {ButtonColors, ButtonColorType, ButtonSizes} from \"../gov-button/button/constants\"\nimport {createID} from \"../../utils/string.utils\"\nimport {prepareIconFormat} from \"../gov-icon/helpers\";\nimport {inheritAriaAttributes} from \"../../helpers/Accessibility/accessibility\";\nimport {ariaAttributes} from \"../../helpers/Accessibility/attributes\";\nimport {AttributeObserver, Attributes} from \"../../helpers/Dom/attribute\";\n\n@Component({\n\ttag: \"gov-chip\",\n})\nexport class GovChip {\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\tprivate readonly chipId: string\n\tprivate hydrated = false\n\tprivate attributeObserver: AttributeObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.chipId = createID('GovChip')\n\t}\n\n\t@Element() host: HTMLGovChipElement\n\n\t/**\n\t * Makes the chip component disabled.\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Definition of the button icon on the left. The icon must be defined in the form \"type/name\".\n\t */\n\t@Prop({attribute: \"icon-left\"}) readonly iconLeft?: string\n\t/**\n\t * Definition of the button icon on the left. The icon must be defined in the form \"type/name\".\n\t */\n\t@Prop({attribute: \"icon-right\"}) readonly iconRight?: string\n\t/**\n\t * Chip’s size.\n\t */\n\t@Prop() readonly size: ChipSizesType = ChipSizes._M\n\t/**\n\t * Used to change the HTML tag in the chip\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the chip.\n\t */\n\t@Prop() readonly color: ButtonColorType = ButtonColors.PRIMARY\n\t/**\n\t * Chip’s type\n\t */\n\t@Prop({reflect: true}) readonly type: ChipTypesType\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable\n\t */\n\t@Prop() readonly focusable: boolean = true\n\t/**\n\t * Custom chip identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({eventName: \"gov-click\"}) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(ButtonColors, newValue, ChipClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, ChipClass.root)\n\t}\n\n\t@State() inheritedAttributes: Attributes = {}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateColor(this.color)\n\t\tthis.validateSize(this.size)\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {\n\t\t\tthis.onAriaAttributeChange(attributeName, newValue);\n\t\t});\n\n\t\tthis.attributeObserver.startObserving(ariaAttributes);\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver.stopObserving();\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\tonAriaAttributeChange(attributeName: string, newValue: string) {\n\t\tthis.host.removeAttribute(attributeName)\n\t\tthis.inheritedAttributes = {...this.inheritedAttributes, [attributeName]: newValue};\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\tconst iconLeft = prepareIconFormat(this.iconLeft)\n\t\tconst iconRight = prepareIconFormat(this.iconRight)\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tChipClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? ChipClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? ChipClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tcolor={this.color}\n\t\t\t\ttype={this.type}\n\t\t\t\tsize={this.size}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t\thydrated={this.hydrated}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLButtonElement | HTMLSpanElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\ttabindex={(this.h.hasSlot(\"left\") || this.h.hasSlot(\"right\") || this.disabled) && !this.focusable ? \"-1\" : \"0\"}\n\t\t\t\t\tid={this.identifier || this.chipId}\n\t\t\t\t\ttype={nativeType}\n\t\t\t\t\t{...this.inheritedAttributes}\n\t\t\t\t\taria-disabled={this.disabled}>\n\t\t\t\t\t<slot name=\"left\"></slot>\n\t\t\t\t\t<slot name=\"left-icon\">\n\t\t\t\t\t\t{iconLeft && <gov-icon type={iconLeft.type} name={iconLeft.name}></gov-icon>}\n\t\t\t\t\t</slot>\n\t\t\t\t\t<slot/>\n\t\t\t\t\t<slot name=\"right-icon\">\n\t\t\t\t\t\t{iconRight && <gov-icon type={iconRight.type} name={iconRight.name}></gov-icon>}\n\t\t\t\t\t</slot>\n\t\t\t\t\t<slot name=\"right\"></slot>\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n\n\t/**\n\t * Returns a clickable element instance\n\t */\n\t@Method()\n\tasync geRef() {\n\t\treturn this.triggerRef\n\t}\n\n\t/**\n\t * Focus button element\n\t */\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.triggerRef.focus()\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-container.cjs.entry.js

@@ -2,23 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f53beed1.js');
-const template = require('./template-431f0737.js');
+const index = require('./index-1af4880c.js');
+const template = require('./template-b070338f.js');
 
 const ContainerClass = {
     root: 'gov-container',
 };
 
-const govContainerCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-container{display:block;width:100%;max-width:calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem)}@media (min-width: 48em){.gov-container{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}";
-const GovContainerStyle0 = govContainerCss;
-
 const GovContainer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.h = template.govHost(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '35735c7662824c56fe127967c5048d120f27ee67', class: this.h.classes(ContainerClass.root) }, index.h("slot", { key: 'a84f0a0315f583291c722b68a3161b16784d7609' })));
+        return (index.h(index.Host, { key: 'f1a8dda159411bb7eed4db33d408ddd70a2327be', class: this.h.classes(ContainerClass.root) }, index.h("slot", { key: 'afe117ecdcb7bb6225e4612400e1627dcc80bff9' })));
     }
     /**
      * Returns slotted children
@@ -30,7 +27,6 @@ const GovContainer = class {
     }
     get host() { return index.getElement(this); }
 };
-GovContainer.style = GovContainerStyle0;
 
 exports.gov_container = GovContainer;
 

package/dist/cjs/gov-container.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-container.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,eAAe;CACrB;;ACFD,MAAM,eAAe,GAAG,swBAAswB,CAAC;AAC/xB,2BAAe,eAAe;;MCQjB,YAAY;IAGxB;;QACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAID,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/CD,oEAAQ,CACF,EACP;KACD;;;;;;IAQD,MAAM,eAAe;QACpB,OAAO,OAAO,CAAC,OAAO,CAACE,wBAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;KAClD;;;;;;;","names":["govHost","h","Host","slottedChildren"],"sources":["../../../packages/core/src/components/gov-container/constants.tsx","../../../packages/core/src/components/gov-container/gov-container.scss?tag=gov-container","../../../packages/core/src/components/gov-container/gov-container.tsx"],"sourcesContent":["export const ContainerClass = {\n\troot: 'gov-container',\n}\n","/*\n *   Container\n */\n\n$class: \".gov-container\";\n\n#{$class} {\n\t@include container();\n}\n","import { Component, Element, h, Host, Method } from '@stencil/core'\nimport { govHost, slottedChildren } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ContainerClass } from './constants'\n\n@Component({\n\ttag: 'gov-container',\n\tstyleUrl: 'gov-container.scss',\n})\nexport class GovContainer {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovContainerElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ContainerClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns slotted children\n\t *\n\t * @return {Promise<Node[]>}\n\t */\n\t@Method()\n\tasync slottedChildren(): Promise<Node[]> {\n\t\treturn Promise.resolve(slottedChildren(this.host))\n\t}\n}\n"],"version":3}
+{"file":"gov-container.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,eAAe;CACrB;;MCMY,YAAY;IAGxB;;QACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAID,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/CD,oEAAQ,CACF,EACP;KACD;;;;;;IAQD,MAAM,eAAe;QACpB,OAAO,OAAO,CAAC,OAAO,CAACE,wBAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;KAClD;;;;;;","names":["govHost","h","Host","slottedChildren"],"sources":["../../../packages/core/src/components/gov-container/constants.tsx","../../../packages/core/src/components/gov-container/gov-container.tsx"],"sourcesContent":["export const ContainerClass = {\n\troot: 'gov-container',\n}\n","import { Component, Element, h, Host, Method } from '@stencil/core'\nimport { govHost, slottedChildren } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ContainerClass } from './constants'\n\n@Component({\n\ttag: 'gov-container',\n})\nexport class GovContainer {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovContainerElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ContainerClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns slotted children\n\t *\n\t * @return {Promise<Node[]>}\n\t */\n\t@Method()\n\tasync slottedChildren(): Promise<Node[]> {\n\t\treturn Promise.resolve(slottedChildren(this.host))\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-control-group.cjs.entry.js

@@ -2,42 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f53beed1.js');
-const variants = require('./variants-85b514ea.js');
-const template = require('./template-431f0737.js');
-const props = require('./props-edd0d46f.js');
+const index = require('./index-1af4880c.js');
+const colors = require('./colors-976f6dff.js');
+const template = require('./template-b070338f.js');
+const props = require('./props-b8a955b2.js');
 const utils = require('./utils-d263c5c6.js');
-require('./gov.log-8887c6bc.js');
-require('./win-03714165.js');
+require('./gov.log-1e8bab6e.js');
+require('./win-587f4614.js');
 
-utils.pick(variants.Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING']);
+utils.pick(colors.Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', 'WARNING']);
 const ControlGroupClass = {
     root: 'gov-control-group',
 };
 
-const govControlGroupCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-control-group{position:relative;display:flex;width:100%;align-items:center;border-radius:var(--gov-control-group-border-radius, 0.25rem)}.gov-control-group .element *,.gov-control-group .gov-button .element{border:none !important;border-radius:0}.gov-control-group[variant=primary]{border:var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600))}.gov-control-group[variant=primary]>*{border-right:var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600))}.gov-control-group[variant=secondary]{border:var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}.gov-control-group[variant=secondary]>*{border-right:var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}.gov-control-group[variant=success]{border:var(--gov-control-group-border-success, 0.0625rem solid var(--gov-color-success-500))}.gov-control-group[variant=success]>*{border-right:var(--gov-control-group-border-success, 0.0625rem solid var(--gov-color-success-500))}.gov-control-group[variant=warning]{border:var(--gov-control-group-border-warning, 0.0625rem solid var(--gov-color-warning-500))}.gov-control-group[variant=warning]>*{border-right:var(--gov-control-group-border-warning, 0.0625rem solid var(--gov-color-warning-500))}.gov-control-group[variant=error]{border:var(--gov-control-group-border-error, 0.0625rem solid var(--gov-color-error-400))}.gov-control-group[variant=error]>*{border-right:var(--gov-control-group-border-error, 0.0625rem solid var(--gov-color-error-400))}.gov-control-group>*:last-child{border-right:none}.gov-control-group.no-border>*{border-right:none}";
-const GovControlGroupStyle0 = govControlGroupCss;
-
 const GovControlGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.variant = variants.Variants.PRIMARY;
+        this.color = colors.Colors.PRIMARY;
         this.noBorder = false;
+        this.fitContent = false;
         this.h = template.govHost(this.host);
     }
-    validateVariant(newValue) {
-        props.validateProp(variants.Variants, newValue, ControlGroupClass.root);
+    validateColor(newValue) {
+        props.validateProp(colors.Colors, newValue, ControlGroupClass.root);
     }
     render() {
-        const noBorder = this.noBorder === true ? "no-border" : undefined;
-        return (index.h(index.Host, { key: 'bcc85d1e3452c30c4e3e64f26c8cc04645ab1aaf', class: this.h.classes([ControlGroupClass.root, noBorder]), variant: this.variant }, index.h("slot", { key: '21984ed0f64cdae936cdd8fb22615e96c0910bec' })));
+        return (index.h(index.Host, { key: '41426d0763507d60dcf24a6f0fe3d69b54d5131f', class: this.h.classes(ControlGroupClass.root), color: this.color }, index.h("slot", { key: '0c67c4137be61b821e008779210543af73d7984c' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "variant": ["validateVariant"]
+        "color": ["validateColor"]
     }; }
 };
-GovControlGroup.style = GovControlGroupStyle0;
 
 exports.gov_control_group = GovControlGroup;
 

package/dist/cjs/gov-control-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-control-group.entry.cjs.js","mappings":";;;;;;;;;;;;AAIoCA,UAAI,CAACC,iBAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,EAAC;AAGpG,MAAM,iBAAiB,GAAG;IAChC,IAAI,EAAE,mBAAmB;CACzB;;ACTD,MAAM,kBAAkB,GAAG,w+DAAw+D,CAAC;AACpgE,8BAAe,kBAAkB;;MCUpB,eAAe;IAG3B;;uBAQoDA,iBAAQ,CAAC,OAAO;wBAIL,KAAK;QAXnE,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAaD,eAAe,CAAC,QAAgB;QAC/BC,kBAAY,CAACF,iBAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;KACxD;IAED,MAAM;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,WAAW,GAAG,SAAS,CAAA;QACjE,QACCG,QAACC,UAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,OAAO,IACrBD,oEAAQ,CACF,EACP;KACD;;;;;;;;;;","names":["pick","Variants","govHost","validateProp","h","Host"],"sources":["../../../packages/core/src/components/gov-control-group/constants.ts","../../../packages/core/src/components/gov-control-group/gov-control-group.scss?tag=gov-control-group","../../../packages/core/src/components/gov-control-group/gov-control-group.tsx"],"sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const ControlGroupVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING'])\nexport type ControlGroupVariantType = `${ValueOf<typeof ControlGroupVariants>}`\n\nexport const ControlGroupClass = {\n\troot: 'gov-control-group',\n}\n","/*\n *   Control group\n */\n\n$class: \".gov-control-group\";\n\n#{$class} {\n\t@include base(flex);\n\talign-items: center;\n\tborder-radius: $control-group-border-radius;\n\t.element *,\n\t.gov-button .element {\n\t\tborder: none !important;\n\t\tborder-radius: 0;\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $control-group-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder: get(\"border\", $definitions);\n\t\t\t> * {\n\t\t\t\tborder-right: get(\"border\", $definitions);\n\t\t\t}\n\t\t}\n\t}\n\n\t> * {\n\t\t&:last-child {\n\t\t\tborder-right: none;\n\t\t}\n\t}\n\t&.no-border {\n\t\t> * {\n\t\t\tborder-right: none;\n\t\t}\n\t}\n}\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ControlGroupClass, ControlGroupVariantType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-control-group\",\n\tstyleUrl: \"gov-control-group.scss\",\n})\nexport class GovControlGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: ControlGroupVariantType = Variants.PRIMARY\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, ControlGroupClass.root)\n\t}\n\n\trender() {\n\t\tconst noBorder = this.noBorder === true ? \"no-border\" : undefined\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ControlGroupClass.root, noBorder])}\n\t\t\t\tvariant={this.variant}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-control-group.entry.cjs.js","mappings":";;;;;;;;;;;;AAIkCA,UAAI,CAACC,aAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,EAAC;AAG3G,MAAM,iBAAiB,GAAG;IAChC,IAAI,EAAE,mBAAmB;CACzB;;MCCY,eAAe;IAG3B;;qBAQgDA,aAAM,CAAC,OAAO;wBAIC,KAAK;0BAID,KAAK;QAfvE,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAiBD,aAAa,CAAC,QAAgB;QAC7BC,kBAAY,CAACF,aAAM,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;KACtD;IAED,MAAM;QACL,QACCG,QAACC,UAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,IACjBD,oEAAQ,CACF,EACP;KACD;;;;;;;;;","names":["pick","Colors","govHost","validateProp","h","Host"],"sources":["../../../packages/core/src/components/gov-control-group/constants.ts","../../../packages/core/src/components/gov-control-group/gov-control-group.tsx"],"sourcesContent":["import { Colors } from '../../core/constants/colors'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const ControlGroupColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', 'WARNING'])\nexport type ControlGroupColorType = `${ValueOf<typeof ControlGroupColors>}`\n\nexport const ControlGroupClass = {\n\troot: 'gov-control-group',\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { Colors } from \"../../core/constants/colors\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ControlGroupClass, ControlGroupColorType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-control-group\",\n})\nexport class GovControlGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly color: ControlGroupColorType = Colors.PRIMARY\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/**\n\t * Specifies the display of elements to full width\n\t */\n\t@Prop({ attribute: \"fit-content\" }) readonly fitContent: boolean = false\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(Colors, newValue, ControlGroupClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(ControlGroupClass.root)}\n\t\t\t\tcolor={this.color}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}