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

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

@@ -2,56 +2,58 @@
 
 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 constants = require('./constants-4fefc173.js');
+const index = require('./index-1af4880c.js');
+const template = require('./template-b070338f.js');
+const props = require('./props-b8a955b2.js');
+const constants = require('./constants-861428a4.js');
+const utils = require('./utils-d263c5c6.js');
+const sizes = require('./sizes-89f8d3b2.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');
+require('./gov.log-1e8bab6e.js');
+require('./win-587f4614.js');
+require('./colors-976f6dff.js');
 
+const TagSizes = utils.pick(sizes.Sizes, ['_XS', '_S', '_M']);
+var TagType;
+(function (TagType) {
+    TagType["BOLD"] = "bold";
+    TagType["SUBTLE"] = "subtle";
+})(TagType || (TagType = {}));
 const TagClass = {
     root: 'gov-tag',
 };
 
-const govTagCss = ".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-tag .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-tag .element:focus{outline:none}.gov-tag .element .gov-icon{flex:0 0 auto;color:inherit}.gov-tag .element>*{display:flex}[hoverable].gov-tag .element{cursor:pointer}[hoverable].gov-tag .element:focus{outline:none}[hoverable].gov-tag .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-tag .element:focus-visible,[hoverable][type=base].gov-tag .element:focus-visible{outline-offset:0}[hoverable][disabled=\"\"].gov-tag,[hoverable][disabled=true i].gov-tag,[hoverable][disabled=\"1\"].gov-tag{cursor:not-allowed}[hoverable][disabled=\"\"].gov-tag .element,[hoverable][disabled=true i].gov-tag .element,[hoverable][disabled=\"1\"].gov-tag .element{pointer-events:none}[expanded=\"\"].gov-tag,[expanded=true i].gov-tag,[expanded=\"1\"].gov-tag{display:block}[expanded=\"\"].gov-tag .element,[expanded=true i].gov-tag .element,[expanded=\"1\"].gov-tag .element{display:flex;width:100%;margin-right:0;margin-left:0}[type=solid][variant=primary].gov-tag .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-tag .element,[type=solid][variant=primary][inverse=true i].gov-tag .element,[type=solid][variant=primary][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=solid][variant=primary][inverse=true i].gov-tag .element:focus-visible,[type=solid][variant=primary][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-primary-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=primary][disabled=\"\"].gov-tag .element,[type=solid][variant=primary][disabled=true i].gov-tag .element,[type=solid][variant=primary][disabled=\"1\"].gov-tag .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-tag .element,[type=solid][variant=primary][disabled=\"\"][inverse=true i].gov-tag .element,[type=solid][variant=primary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=solid][variant=primary][disabled=true i][inverse=\"\"].gov-tag .element,[type=solid][variant=primary][disabled=true i][inverse=true i].gov-tag .element,[type=solid][variant=primary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=solid][variant=primary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=solid][variant=primary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=solid][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=solid][variant=primary][hoverable][inverse=true i].gov-tag .element:hover,[type=solid][variant=primary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=solid][variant=primary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=solid][variant=primary][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-primary-solid-inverse-active-bg, var(--gov-color-primary-800))}}[type=outlined][variant=primary].gov-tag .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-tag .element,[type=outlined][variant=primary][inverse=true i].gov-tag .element,[type=outlined][variant=primary][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=outlined][variant=primary][inverse=true i].gov-tag .element:focus-visible,[type=outlined][variant=primary][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-primary-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=primary][disabled=\"\"].gov-tag .element,[type=outlined][variant=primary][disabled=true i].gov-tag .element,[type=outlined][variant=primary][disabled=\"1\"].gov-tag .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-tag .element,[type=outlined][variant=primary][disabled=\"\"][inverse=true i].gov-tag .element,[type=outlined][variant=primary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=outlined][variant=primary][disabled=true i][inverse=\"\"].gov-tag .element,[type=outlined][variant=primary][disabled=true i][inverse=true i].gov-tag .element,[type=outlined][variant=primary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=outlined][variant=primary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=outlined][variant=primary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=outlined][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=outlined][variant=primary][hoverable][inverse=true i].gov-tag .element:hover,[type=outlined][variant=primary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=outlined][variant=primary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=outlined][variant=primary][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-primary-outlined-inverse-active-bg, var(--gov-color-primary-400))}}[type=base][variant=primary].gov-tag .element{color:var(--gov-button-primary-base-color, var(--gov-color-primary))}[type=base][variant=primary][inverse=\"\"].gov-tag .element,[type=base][variant=primary][inverse=true i].gov-tag .element,[type=base][variant=primary][inverse=\"1\"].gov-tag .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-tag .element,[type=base][variant=primary][disabled=true i].gov-tag .element,[type=base][variant=primary][disabled=\"1\"].gov-tag .element{color:var(--gov-button-primary-base-disabled-color, var(--gov-color-primary-400))}[type=base][variant=primary][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=base][variant=primary][disabled=\"\"][inverse=true i].gov-tag .element,[type=base][variant=primary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=base][variant=primary][disabled=true i][inverse=\"\"].gov-tag .element,[type=base][variant=primary][disabled=true i][inverse=true i].gov-tag .element,[type=base][variant=primary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=base][variant=primary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=base][variant=primary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=base][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=base][variant=primary][hoverable][inverse=true i].gov-tag .element:hover,[type=base][variant=primary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=base][variant=primary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=base][variant=primary][hoverable][inverse=\"1\"].gov-tag .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-tag .element{color:var(--gov-button-primary-link-color, var(--gov-color-primary))}[type=link][variant=primary][inverse=\"\"].gov-tag .element,[type=link][variant=primary][inverse=true i].gov-tag .element,[type=link][variant=primary][inverse=\"1\"].gov-tag .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-tag .element,[type=link][variant=primary][disabled=true i].gov-tag .element,[type=link][variant=primary][disabled=\"1\"].gov-tag .element{color:var(--gov-button-primary-link-disabled-color, var(--gov-color-primary-400))}[type=link][variant=primary][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=link][variant=primary][disabled=\"\"][inverse=true i].gov-tag .element,[type=link][variant=primary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=link][variant=primary][disabled=true i][inverse=\"\"].gov-tag .element,[type=link][variant=primary][disabled=true i][inverse=true i].gov-tag .element,[type=link][variant=primary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=link][variant=primary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=link][variant=primary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=link][variant=primary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=link][variant=primary][hoverable][inverse=true i].gov-tag .element:hover,[type=link][variant=primary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=link][variant=primary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=link][variant=primary][hoverable][inverse=\"1\"].gov-tag .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-tag .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-tag .element,[type=solid][variant=secondary][inverse=true i].gov-tag .element,[type=solid][variant=secondary][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=solid][variant=secondary][inverse=true i].gov-tag .element:focus-visible,[type=solid][variant=secondary][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-secondary-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=secondary][disabled=\"\"].gov-tag .element,[type=solid][variant=secondary][disabled=true i].gov-tag .element,[type=solid][variant=secondary][disabled=\"1\"].gov-tag .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-tag .element,[type=solid][variant=secondary][disabled=\"\"][inverse=true i].gov-tag .element,[type=solid][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=solid][variant=secondary][disabled=true i][inverse=\"\"].gov-tag .element,[type=solid][variant=secondary][disabled=true i][inverse=true i].gov-tag .element,[type=solid][variant=secondary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=solid][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=solid][variant=secondary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=solid][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=solid][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover,[type=solid][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=solid][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=solid][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .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-tag .element,[type=outlined][variant=secondary][inverse=true i].gov-tag .element,[type=outlined][variant=secondary][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=outlined][variant=secondary][inverse=true i].gov-tag .element:focus-visible,[type=outlined][variant=secondary][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-secondary-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=secondary][disabled=\"\"].gov-tag .element,[type=outlined][variant=secondary][disabled=true i].gov-tag .element,[type=outlined][variant=secondary][disabled=\"1\"].gov-tag .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-tag .element,[type=outlined][variant=secondary][disabled=\"\"][inverse=true i].gov-tag .element,[type=outlined][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=outlined][variant=secondary][disabled=true i][inverse=\"\"].gov-tag .element,[type=outlined][variant=secondary][disabled=true i][inverse=true i].gov-tag .element,[type=outlined][variant=secondary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=outlined][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=outlined][variant=secondary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=outlined][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=outlined][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover,[type=outlined][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=outlined][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=outlined][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .element{color:var(--gov-button-secondary-base-color, var(--gov-color-secondary))}[type=base][variant=secondary][inverse=\"\"].gov-tag .element,[type=base][variant=secondary][inverse=true i].gov-tag .element,[type=base][variant=secondary][inverse=\"1\"].gov-tag .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-tag .element,[type=base][variant=secondary][disabled=true i].gov-tag .element,[type=base][variant=secondary][disabled=\"1\"].gov-tag .element{color:var(--gov-button-secondary-base-disabled-color, var(--gov-color-secondary-600))}[type=base][variant=secondary][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=base][variant=secondary][disabled=\"\"][inverse=true i].gov-tag .element,[type=base][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=base][variant=secondary][disabled=true i][inverse=\"\"].gov-tag .element,[type=base][variant=secondary][disabled=true i][inverse=true i].gov-tag .element,[type=base][variant=secondary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=base][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=base][variant=secondary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=base][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=base][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover,[type=base][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=base][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=base][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .element{color:var(--gov-button-secondary-link-color, var(--gov-color-secondary))}[type=link][variant=secondary][inverse=\"\"].gov-tag .element,[type=link][variant=secondary][inverse=true i].gov-tag .element,[type=link][variant=secondary][inverse=\"1\"].gov-tag .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-tag .element,[type=link][variant=secondary][disabled=true i].gov-tag .element,[type=link][variant=secondary][disabled=\"1\"].gov-tag .element{color:var(--gov-button-secondary-link-disabled-color, var(--gov-color-secondary-600))}[type=link][variant=secondary][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=link][variant=secondary][disabled=\"\"][inverse=true i].gov-tag .element,[type=link][variant=secondary][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=link][variant=secondary][disabled=true i][inverse=\"\"].gov-tag .element,[type=link][variant=secondary][disabled=true i][inverse=true i].gov-tag .element,[type=link][variant=secondary][disabled=true i][inverse=\"1\"].gov-tag .element,[type=link][variant=secondary][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=link][variant=secondary][disabled=\"1\"][inverse=true i].gov-tag .element,[type=link][variant=secondary][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=link][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover,[type=link][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=link][variant=secondary][hoverable][inverse=true i].gov-tag .element:hover:active,[type=link][variant=secondary][hoverable][inverse=\"1\"].gov-tag .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-tag .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-tag .element,[type=solid][variant=error][inverse=true i].gov-tag .element,[type=solid][variant=error][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=solid][variant=error][inverse=true i].gov-tag .element:focus-visible,[type=solid][variant=error][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-error-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=error][disabled=\"\"].gov-tag .element,[type=solid][variant=error][disabled=true i].gov-tag .element,[type=solid][variant=error][disabled=\"1\"].gov-tag .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-tag .element,[type=solid][variant=error][disabled=\"\"][inverse=true i].gov-tag .element,[type=solid][variant=error][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=solid][variant=error][disabled=true i][inverse=\"\"].gov-tag .element,[type=solid][variant=error][disabled=true i][inverse=true i].gov-tag .element,[type=solid][variant=error][disabled=true i][inverse=\"1\"].gov-tag .element,[type=solid][variant=error][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=solid][variant=error][disabled=\"1\"][inverse=true i].gov-tag .element,[type=solid][variant=error][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=solid][variant=error][hoverable][inverse=true i].gov-tag .element:hover,[type=solid][variant=error][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=solid][variant=error][hoverable][inverse=true i].gov-tag .element:hover:active,[type=solid][variant=error][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-error-solid-inverse-active-bg, var(--gov-color-error-600))}}[type=outlined][variant=error].gov-tag .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-tag .element,[type=outlined][variant=error][inverse=true i].gov-tag .element,[type=outlined][variant=error][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=outlined][variant=error][inverse=true i].gov-tag .element:focus-visible,[type=outlined][variant=error][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-error-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=error][disabled=\"\"].gov-tag .element,[type=outlined][variant=error][disabled=true i].gov-tag .element,[type=outlined][variant=error][disabled=\"1\"].gov-tag .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-tag .element,[type=outlined][variant=error][disabled=\"\"][inverse=true i].gov-tag .element,[type=outlined][variant=error][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=outlined][variant=error][disabled=true i][inverse=\"\"].gov-tag .element,[type=outlined][variant=error][disabled=true i][inverse=true i].gov-tag .element,[type=outlined][variant=error][disabled=true i][inverse=\"1\"].gov-tag .element,[type=outlined][variant=error][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=outlined][variant=error][disabled=\"1\"][inverse=true i].gov-tag .element,[type=outlined][variant=error][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=outlined][variant=error][hoverable][inverse=true i].gov-tag .element:hover,[type=outlined][variant=error][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=outlined][variant=error][hoverable][inverse=true i].gov-tag .element:hover:active,[type=outlined][variant=error][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-error-outlined-inverse-active-bg, var(--gov-color-error-400))}}[type=base][variant=error].gov-tag .element{color:var(--gov-button-error-base-color, var(--gov-color-error))}[type=base][variant=error][inverse=\"\"].gov-tag .element,[type=base][variant=error][inverse=true i].gov-tag .element,[type=base][variant=error][inverse=\"1\"].gov-tag .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-tag .element,[type=base][variant=error][disabled=true i].gov-tag .element,[type=base][variant=error][disabled=\"1\"].gov-tag .element{color:var(--gov-button-error-base-disabled-color, var(--gov-color-error-200))}[type=base][variant=error][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=base][variant=error][disabled=\"\"][inverse=true i].gov-tag .element,[type=base][variant=error][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=base][variant=error][disabled=true i][inverse=\"\"].gov-tag .element,[type=base][variant=error][disabled=true i][inverse=true i].gov-tag .element,[type=base][variant=error][disabled=true i][inverse=\"1\"].gov-tag .element,[type=base][variant=error][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=base][variant=error][disabled=\"1\"][inverse=true i].gov-tag .element,[type=base][variant=error][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=base][variant=error][hoverable][inverse=true i].gov-tag .element:hover,[type=base][variant=error][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=base][variant=error][hoverable][inverse=true i].gov-tag .element:hover:active,[type=base][variant=error][hoverable][inverse=\"1\"].gov-tag .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-tag .element{color:var(--gov-button-error-link-color, var(--gov-color-error))}[type=link][variant=error][inverse=\"\"].gov-tag .element,[type=link][variant=error][inverse=true i].gov-tag .element,[type=link][variant=error][inverse=\"1\"].gov-tag .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-tag .element,[type=link][variant=error][disabled=true i].gov-tag .element,[type=link][variant=error][disabled=\"1\"].gov-tag .element{color:var(--gov-button-error-link-disabled-color, var(--gov-color-error-200))}[type=link][variant=error][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=link][variant=error][disabled=\"\"][inverse=true i].gov-tag .element,[type=link][variant=error][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=link][variant=error][disabled=true i][inverse=\"\"].gov-tag .element,[type=link][variant=error][disabled=true i][inverse=true i].gov-tag .element,[type=link][variant=error][disabled=true i][inverse=\"1\"].gov-tag .element,[type=link][variant=error][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=link][variant=error][disabled=\"1\"][inverse=true i].gov-tag .element,[type=link][variant=error][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=link][variant=error][hoverable][inverse=true i].gov-tag .element:hover,[type=link][variant=error][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=link][variant=error][hoverable][inverse=true i].gov-tag .element:hover:active,[type=link][variant=error][hoverable][inverse=\"1\"].gov-tag .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-tag .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-tag .element,[type=solid][variant=success][inverse=true i].gov-tag .element,[type=solid][variant=success][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=solid][variant=success][inverse=true i].gov-tag .element:focus-visible,[type=solid][variant=success][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-success-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=success][disabled=\"\"].gov-tag .element,[type=solid][variant=success][disabled=true i].gov-tag .element,[type=solid][variant=success][disabled=\"1\"].gov-tag .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-tag .element,[type=solid][variant=success][disabled=\"\"][inverse=true i].gov-tag .element,[type=solid][variant=success][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=solid][variant=success][disabled=true i][inverse=\"\"].gov-tag .element,[type=solid][variant=success][disabled=true i][inverse=true i].gov-tag .element,[type=solid][variant=success][disabled=true i][inverse=\"1\"].gov-tag .element,[type=solid][variant=success][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=solid][variant=success][disabled=\"1\"][inverse=true i].gov-tag .element,[type=solid][variant=success][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=solid][variant=success][hoverable][inverse=true i].gov-tag .element:hover,[type=solid][variant=success][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=solid][variant=success][hoverable][inverse=true i].gov-tag .element:hover:active,[type=solid][variant=success][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-success-solid-inverse-active-bg, var(--gov-color-success-800))}}[type=outlined][variant=success].gov-tag .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-tag .element,[type=outlined][variant=success][inverse=true i].gov-tag .element,[type=outlined][variant=success][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=outlined][variant=success][inverse=true i].gov-tag .element:focus-visible,[type=outlined][variant=success][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-success-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=success][disabled=\"\"].gov-tag .element,[type=outlined][variant=success][disabled=true i].gov-tag .element,[type=outlined][variant=success][disabled=\"1\"].gov-tag .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-tag .element,[type=outlined][variant=success][disabled=\"\"][inverse=true i].gov-tag .element,[type=outlined][variant=success][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=outlined][variant=success][disabled=true i][inverse=\"\"].gov-tag .element,[type=outlined][variant=success][disabled=true i][inverse=true i].gov-tag .element,[type=outlined][variant=success][disabled=true i][inverse=\"1\"].gov-tag .element,[type=outlined][variant=success][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=outlined][variant=success][disabled=\"1\"][inverse=true i].gov-tag .element,[type=outlined][variant=success][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=outlined][variant=success][hoverable][inverse=true i].gov-tag .element:hover,[type=outlined][variant=success][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=outlined][variant=success][hoverable][inverse=true i].gov-tag .element:hover:active,[type=outlined][variant=success][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-success-outlined-inverse-active-bg, var(--gov-color-success-400))}}[type=base][variant=success].gov-tag .element{color:var(--gov-button-success-base-color, var(--gov-color-success-500))}[type=base][variant=success][inverse=\"\"].gov-tag .element,[type=base][variant=success][inverse=true i].gov-tag .element,[type=base][variant=success][inverse=\"1\"].gov-tag .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-tag .element,[type=base][variant=success][disabled=true i].gov-tag .element,[type=base][variant=success][disabled=\"1\"].gov-tag .element{color:var(--gov-button-success-base-disabled-color, var(--gov-color-success-300))}[type=base][variant=success][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=base][variant=success][disabled=\"\"][inverse=true i].gov-tag .element,[type=base][variant=success][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=base][variant=success][disabled=true i][inverse=\"\"].gov-tag .element,[type=base][variant=success][disabled=true i][inverse=true i].gov-tag .element,[type=base][variant=success][disabled=true i][inverse=\"1\"].gov-tag .element,[type=base][variant=success][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=base][variant=success][disabled=\"1\"][inverse=true i].gov-tag .element,[type=base][variant=success][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=base][variant=success][hoverable][inverse=true i].gov-tag .element:hover,[type=base][variant=success][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=base][variant=success][hoverable][inverse=true i].gov-tag .element:hover:active,[type=base][variant=success][hoverable][inverse=\"1\"].gov-tag .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-tag .element{color:var(--gov-button-success-link-color, var(--gov-color-success-500))}[type=link][variant=success][inverse=\"\"].gov-tag .element,[type=link][variant=success][inverse=true i].gov-tag .element,[type=link][variant=success][inverse=\"1\"].gov-tag .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-tag .element,[type=link][variant=success][disabled=true i].gov-tag .element,[type=link][variant=success][disabled=\"1\"].gov-tag .element{color:var(--gov-button-success-link-disabled-color, var(--gov-color-success-300))}[type=link][variant=success][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=link][variant=success][disabled=\"\"][inverse=true i].gov-tag .element,[type=link][variant=success][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=link][variant=success][disabled=true i][inverse=\"\"].gov-tag .element,[type=link][variant=success][disabled=true i][inverse=true i].gov-tag .element,[type=link][variant=success][disabled=true i][inverse=\"1\"].gov-tag .element,[type=link][variant=success][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=link][variant=success][disabled=\"1\"][inverse=true i].gov-tag .element,[type=link][variant=success][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=link][variant=success][hoverable][inverse=true i].gov-tag .element:hover,[type=link][variant=success][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=link][variant=success][hoverable][inverse=true i].gov-tag .element:hover:active,[type=link][variant=success][hoverable][inverse=\"1\"].gov-tag .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-tag .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-tag .element,[type=solid][variant=warning][inverse=true i].gov-tag .element,[type=solid][variant=warning][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=solid][variant=warning][inverse=true i].gov-tag .element:focus-visible,[type=solid][variant=warning][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-warning-solid-inverse-focus-bg, var(--gov-color-neutral-white))}[type=solid][variant=warning][disabled=\"\"].gov-tag .element,[type=solid][variant=warning][disabled=true i].gov-tag .element,[type=solid][variant=warning][disabled=\"1\"].gov-tag .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-tag .element,[type=solid][variant=warning][disabled=\"\"][inverse=true i].gov-tag .element,[type=solid][variant=warning][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=solid][variant=warning][disabled=true i][inverse=\"\"].gov-tag .element,[type=solid][variant=warning][disabled=true i][inverse=true i].gov-tag .element,[type=solid][variant=warning][disabled=true i][inverse=\"1\"].gov-tag .element,[type=solid][variant=warning][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=solid][variant=warning][disabled=\"1\"][inverse=true i].gov-tag .element,[type=solid][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=solid][variant=warning][hoverable][inverse=true i].gov-tag .element:hover,[type=solid][variant=warning][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=solid][variant=warning][hoverable][inverse=true i].gov-tag .element:hover:active,[type=solid][variant=warning][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-warning-solid-inverse-active-bg, var(--gov-color-warning-800))}}[type=outlined][variant=warning].gov-tag .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-tag .element,[type=outlined][variant=warning][inverse=true i].gov-tag .element,[type=outlined][variant=warning][inverse=\"1\"].gov-tag .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-tag .element:focus-visible,[type=outlined][variant=warning][inverse=true i].gov-tag .element:focus-visible,[type=outlined][variant=warning][inverse=\"1\"].gov-tag .element:focus-visible{background-color:var(--gov-button-warning-outlined-inverse-focus-bg, transparent)}[type=outlined][variant=warning][disabled=\"\"].gov-tag .element,[type=outlined][variant=warning][disabled=true i].gov-tag .element,[type=outlined][variant=warning][disabled=\"1\"].gov-tag .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-tag .element,[type=outlined][variant=warning][disabled=\"\"][inverse=true i].gov-tag .element,[type=outlined][variant=warning][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=outlined][variant=warning][disabled=true i][inverse=\"\"].gov-tag .element,[type=outlined][variant=warning][disabled=true i][inverse=true i].gov-tag .element,[type=outlined][variant=warning][disabled=true i][inverse=\"1\"].gov-tag .element,[type=outlined][variant=warning][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=outlined][variant=warning][disabled=\"1\"][inverse=true i].gov-tag .element,[type=outlined][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=outlined][variant=warning][hoverable][inverse=true i].gov-tag .element:hover,[type=outlined][variant=warning][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=outlined][variant=warning][hoverable][inverse=true i].gov-tag .element:hover:active,[type=outlined][variant=warning][hoverable][inverse=\"1\"].gov-tag .element:hover:active{background-color:var(--gov-button-warning-outlined-inverse-active-bg, var(--gov-color-warning-400))}}[type=base][variant=warning].gov-tag .element{color:var(--gov-button-warning-base-color, var(--gov-color-warning-500))}[type=base][variant=warning][inverse=\"\"].gov-tag .element,[type=base][variant=warning][inverse=true i].gov-tag .element,[type=base][variant=warning][inverse=\"1\"].gov-tag .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-tag .element,[type=base][variant=warning][disabled=true i].gov-tag .element,[type=base][variant=warning][disabled=\"1\"].gov-tag .element{color:var(--gov-button-warning-base-disabled-color, var(--gov-color-warning))}[type=base][variant=warning][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=base][variant=warning][disabled=\"\"][inverse=true i].gov-tag .element,[type=base][variant=warning][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=base][variant=warning][disabled=true i][inverse=\"\"].gov-tag .element,[type=base][variant=warning][disabled=true i][inverse=true i].gov-tag .element,[type=base][variant=warning][disabled=true i][inverse=\"1\"].gov-tag .element,[type=base][variant=warning][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=base][variant=warning][disabled=\"1\"][inverse=true i].gov-tag .element,[type=base][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=base][variant=warning][hoverable][inverse=true i].gov-tag .element:hover,[type=base][variant=warning][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=base][variant=warning][hoverable][inverse=true i].gov-tag .element:hover:active,[type=base][variant=warning][hoverable][inverse=\"1\"].gov-tag .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-tag .element{color:var(--gov-button-warning-link-color, var(--gov-color-warning-500))}[type=link][variant=warning][inverse=\"\"].gov-tag .element,[type=link][variant=warning][inverse=true i].gov-tag .element,[type=link][variant=warning][inverse=\"1\"].gov-tag .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-tag .element,[type=link][variant=warning][disabled=true i].gov-tag .element,[type=link][variant=warning][disabled=\"1\"].gov-tag .element{color:var(--gov-button-warning-link-disabled-color, var(--gov-color-warning))}[type=link][variant=warning][disabled=\"\"][inverse=\"\"].gov-tag .element,[type=link][variant=warning][disabled=\"\"][inverse=true i].gov-tag .element,[type=link][variant=warning][disabled=\"\"][inverse=\"1\"].gov-tag .element,[type=link][variant=warning][disabled=true i][inverse=\"\"].gov-tag .element,[type=link][variant=warning][disabled=true i][inverse=true i].gov-tag .element,[type=link][variant=warning][disabled=true i][inverse=\"1\"].gov-tag .element,[type=link][variant=warning][disabled=\"1\"][inverse=\"\"].gov-tag .element,[type=link][variant=warning][disabled=\"1\"][inverse=true i].gov-tag .element,[type=link][variant=warning][disabled=\"1\"][inverse=\"1\"].gov-tag .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-tag>.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-tag>.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-tag .element:hover,[type=link][variant=warning][hoverable][inverse=true i].gov-tag .element:hover,[type=link][variant=warning][hoverable][inverse=\"1\"].gov-tag .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-tag .element:hover:active,[type=link][variant=warning][hoverable][inverse=true i].gov-tag .element:hover:active,[type=link][variant=warning][hoverable][inverse=\"1\"].gov-tag .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-tag .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-tag .element .gov-icon{width:var(--gov-button-xs-icon-size, 1rem);height:var(--gov-button-xs-icon-size, 1rem)}[size=s].gov-tag .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-tag .element .gov-icon{width:var(--gov-button-s-icon-size, 1rem);height:var(--gov-button-s-icon-size, 1rem)}[size=m].gov-tag .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-tag .element .gov-icon{width:var(--gov-button-m-icon-size, 1.25rem);height:var(--gov-button-m-icon-size, 1.25rem)}[size=l].gov-tag .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-tag .element .gov-icon{width:var(--gov-button-l-icon-size, 1.5rem);height:var(--gov-button-l-icon-size, 1.5rem)}[size=xl].gov-tag .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-tag .element .gov-icon{width:var(--gov-button-xl-icon-size, 1.75rem);height:var(--gov-button-xl-icon-size, 1.75rem)}.gov-tag[type=solid][variant=warning] .element{background-color:var(--gov-button-warning-solid-bg, var(--gov-color-warning-400));color:var(--gov-button-warning-solid-color, var(--gov-color-neutral-black))}.gov-tag[size=xs] .element{border-radius:var(--gov-tag-radius, 0.25rem);-moz-column-gap:var(--gov-tag-gap, 0.5rem);column-gap:var(--gov-tag-gap, 0.5rem)}.gov-tag[size=s] .element{border-radius:var(--gov-tag-radius, 0.25rem);-moz-column-gap:var(--gov-tag-gap, 0.5rem);column-gap:var(--gov-tag-gap, 0.5rem)}.gov-tag[size=m] .element{border-radius:var(--gov-tag-radius, 0.25rem);-moz-column-gap:var(--gov-tag-gap, 0.5rem);column-gap:var(--gov-tag-gap, 0.5rem)}.gov-tag[size=l] .element{border-radius:var(--gov-tag-radius, 0.25rem);-moz-column-gap:var(--gov-tag-gap, 0.5rem);column-gap:var(--gov-tag-gap, 0.5rem)}.gov-tag[size=xl] .element{border-radius:var(--gov-tag-radius, 0.25rem);-moz-column-gap:var(--gov-tag-gap, 0.5rem);column-gap:var(--gov-tag-gap, 0.5rem)}.gov-tag[variant=primary][inverse=\"\"] .element,.gov-tag[variant=primary][inverse=\"\"] .element .element,.gov-tag[variant=primary][inverse=true i] .element,.gov-tag[variant=primary][inverse=true i] .element .element,.gov-tag[variant=primary][inverse=\"1\"] .element,.gov-tag[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))}.gov-tag[variant=secondary][inverse=\"\"] .element,.gov-tag[variant=secondary][inverse=\"\"] .element .element,.gov-tag[variant=secondary][inverse=true i] .element,.gov-tag[variant=secondary][inverse=true i] .element .element,.gov-tag[variant=secondary][inverse=\"1\"] .element,.gov-tag[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))}.gov-tag[variant=success][inverse=\"\"] .element,.gov-tag[variant=success][inverse=\"\"] .element .element,.gov-tag[variant=success][inverse=true i] .element,.gov-tag[variant=success][inverse=true i] .element .element,.gov-tag[variant=success][inverse=\"1\"] .element,.gov-tag[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))}.gov-tag[variant=warning][inverse=\"\"] .element,.gov-tag[variant=warning][inverse=\"\"] .element .element,.gov-tag[variant=warning][inverse=true i] .element,.gov-tag[variant=warning][inverse=true i] .element .element,.gov-tag[variant=warning][inverse=\"1\"] .element,.gov-tag[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))}.gov-tag[variant=error][inverse=\"\"] .element,.gov-tag[variant=error][inverse=\"\"] .element .element,.gov-tag[variant=error][inverse=true i] .element,.gov-tag[variant=error][inverse=true i] .element .element,.gov-tag[variant=error][inverse=\"1\"] .element,.gov-tag[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))}";
-const GovTagStyle0 = govTagCss;
-
 const GovTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.inverse = false;
         this.iconLeft = undefined;
         this.iconRight = undefined;
-        this.size = constants.ButtonSizes._S;
-        this.variant = constants.ButtonVariants.PRIMARY;
+        this.size = TagSizes._S;
+        this.color = constants.ButtonColors.PRIMARY;
+        this.type = undefined;
         this.h = template.govHost(this.host);
     }
-    validateVariant(newValue) {
-        props.validateProp(constants.ButtonVariants, newValue, TagClass.root);
+    validateColor(newValue) {
+        props.validateProp(constants.ButtonColors, newValue, TagClass.root);
     }
     validateSize(newValue) {
         props.validateProp(constants.ButtonSizes, newValue, TagClass.root);
     }
     componentWillLoad() {
-        this.validateVariant(this.variant);
+        this.validateColor(this.color);
         this.validateSize(this.size);
     }
     render() {
         const iconLeft = helpers.prepareIconFormat(this.iconLeft);
         const iconRight = helpers.prepareIconFormat(this.iconRight);
-        return (index.h(index.Host, { key: '4800146164c64dd35b116de16a82e42dd235edd2', class: this.h.classes(TagClass.root), variant: this.variant, type: this.inverse ? undefined : 'solid', size: this.size, inverse: this.inverse }, index.h("span", { key: '07e3f5a19739a27b5a1421f557ff5f57bb189c02', class: "element" }, this.h.hasSlot('left-icon') && index.h("slot", { key: 'ccf4785752bbd6f6a80341dd88b09e2500742918', name: "left-icon" }), iconLeft && index.h("gov-icon", { key: 'c05889af11116e31e995b94659152ea06ab16077', type: iconLeft.type, name: iconLeft.name }), index.h("slot", { key: 'a2c216c2f5c988eda2239dbe397926b13d01b451' }), iconRight && index.h("gov-icon", { key: '24cf847fbb5b0c0595c748c39ba37d2b10d8a267', type: iconRight.type, name: iconRight.name }), this.h.hasSlot('right-icon') && index.h("slot", { key: '8b923181af811ab2f68b2143059089562bc232f6', name: "right-icon" }))));
+        return (index.h(index.Host, { key: '9a2ca38a6a7e36c17de39532950d1ee0c8033c53', class: this.h.classes(TagClass.root), color: this.color, size: this.size, type: this.type }, index.h("span", { key: '07a79627767e9f805ca755c157f8ba844157efe5', class: "element" }, this.h.hasSlot('left-icon') && index.h("slot", { key: '781c3f1b81ddc56173c3993d20aba35ee51fc341', name: "left-icon" }), iconLeft && index.h("gov-icon", { key: '2cd1fa5991c697ae999706ce4854354eec352af0', type: iconLeft.type, name: iconLeft.name }), index.h("slot", { key: 'bfb0f8c8825426de6b0c782ea9e141bad312ecfa' }), iconRight && index.h("gov-icon", { key: '11f0e49dd28674d708887632b06a7e2db29a3387', type: iconRight.type, name: iconRight.name }), this.h.hasSlot('right-icon') && index.h("slot", { key: '6317a5cf9a8b420000cfb043f2a7adaefec797bc', name: "right-icon" }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "variant": ["validateVariant"],
+        "color": ["validateColor"],
         "size": ["validateSize"]
     }; }
 };
-GovTag.style = GovTagStyle0;
 
 exports.gov_tag = GovTag;
 

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

@@ -1 +1 @@
-{"file":"gov-tag.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,QAAQ,GAAG;IACvB,IAAI,EAAE,SAAS;CACf;;ACFD,MAAM,SAAS,GAAG,o3xEAAo3xE,CAAC;AACv4xE,qBAAe,SAAS;;MCWX,MAAM;IAGlB;;uBASoC,KAAK;;;oBAYeA,qBAAW,CAAC,EAAE;uBAITC,wBAAc,CAAC,OAAO;QAxBlF,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IA0BD,eAAe,CAAC,QAAgB;QAC/BC,kBAAY,CAACF,wBAAc,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;KACrD;IAGD,YAAY,CAAC,QAAgB;QAC5BE,kBAAY,CAACH,qBAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;KAClD;IAED,iBAAiB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC5B;IAED,MAAM;QACL,MAAM,QAAQ,GAAGI,yBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACjD,MAAM,SAAS,GAAGA,yBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACnD,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACxCD,mEAAM,KAAK,EAAC,SAAS,IACnB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAIA,mEAAM,IAAI,EAAC,WAAW,GAAQ,EAC7D,QAAQ,IAAKA,uEAAU,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAa,EAC7EA,oEAAO,EACN,SAAS,IAAKA,uEAAU,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,GAAa,EAC/E,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAIA,mEAAM,IAAI,EAAC,YAAY,GAAQ,CAC1D,CACD,EACP;KACD;;;;;;;;;;;","names":["ButtonSizes","ButtonVariants","govHost","validateProp","prepareIconFormat","h","Host"],"sources":["../../../packages/core/src/components/gov-tag/constants.ts","../../../packages/core/src/components/gov-tag/gov-tag.scss?tag=gov-tag","../../../packages/core/src/components/gov-tag/gov-tag.tsx"],"sourcesContent":["export const TagClass = {\n\troot: 'gov-tag',\n}\n","/*\n *   Tag\n */\n\n// Shared definitions - button & chip & tag\n@import \"../gov-button/button/gov-button-core\";\n\n.gov-tag {\n\t@extend %button-core;\n\n\t// VARIANTS\n\t@each $variant, $types in $tag-variants {\n\t\t@each $type, $definitions in $types {\n\t\t\t&[type=\"#{$type}\"][variant=\"#{$variant}\"] {\n\t\t\t\t.element {\n\t\t\t\t\tbackground-color: deep-map-get($tag-variants, $variant, $type, \"bg\");\n\t\t\t\t\tcolor: deep-map-get($tag-variants, $variant, $type, \"color\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $size, $definitions in $button-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t.element {\n\t\t\t\tborder-radius: $tag-radius;\n\t\t\t\tcolumn-gap: $tag-gap;\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}\n\t\t\t}\n\t\t}\n\t}\n}\n","import {Component, Element, h, Host, Prop, Watch} from '@stencil/core'\nimport {govHost} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {validateProp} from '../../helpers/Validate/props'\nimport {ButtonSizes, ButtonSizesType, ButtonVariants, ButtonVariantType} from '../gov-button/button/constants'\nimport {TagClass} from './constants'\nimport {prepareIconFormat} from \"../gov-icon/helpers\";\n\n@Component({\n\ttag: 'gov-tag',\n\tstyleUrl: 'gov-tag.scss',\n})\nexport class GovTag {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovTagElement\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 * 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 * Tag’s size.\n\t */\n\t@Prop({reflect: true}) readonly size: ButtonSizesType = ButtonSizes._S\n\t/**\n\t * Style variation of the tag.\n\t */\n\t@Prop({reflect: true}) readonly variant: ButtonVariantType = ButtonVariants.PRIMARY\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, TagClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, TagClass.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 iconLeft = prepareIconFormat(this.iconLeft)\n\t\tconst iconRight = prepareIconFormat(this.iconRight)\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TagClass.root)}\n\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\ttype={this.inverse ? undefined : 'solid'}\n\t\t\t\t\t\tsize={this.size} inverse={this.inverse}>\n\t\t\t\t<span class=\"element\">\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{iconRight && \t<gov-icon type={iconRight.type} name={iconRight.name}></gov-icon>}\n\t\t\t\t\t{this.h.hasSlot('right-icon') && <slot name=\"right-icon\"></slot>}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-tag.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAIO,MAAM,QAAQ,GAAGA,UAAI,CAACC,WAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAGxD,IAAY,OAGX;AAHD,WAAY,OAAO;IAClB,wBAAa,CAAA;IACb,4BAAiB,CAAA;AAClB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB;AAGM,MAAM,QAAQ,GAAG;IACvB,IAAI,EAAE,SAAS;CACf;;MCJY,MAAM;IAGlB;;;;oBAiBqD,QAAQ,CAAC,EAAE;qBAIPC,sBAAY,CAAC,OAAO;;QApB5E,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IA0BD,aAAa,CAAC,QAAgB;QAC7BC,kBAAY,CAACF,sBAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;KACnD;IAGD,YAAY,CAAC,QAAgB;QAC5BE,kBAAY,CAACC,qBAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;KAClD;IAED,iBAAiB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC5B;IAED,MAAM;QACL,MAAM,QAAQ,GAAGC,yBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACjD,MAAM,SAAS,GAAGA,yBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACnD,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EACvC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,IAEjBD,mEAAM,KAAK,EAAC,SAAS,IACnB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAIA,mEAAM,IAAI,EAAC,WAAW,GAAQ,EAC7D,QAAQ,IAAKA,uEAAU,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAa,EAC7EA,oEAAO,EACN,SAAS,IAAKA,uEAAU,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,GAAa,EAC/E,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAIA,mEAAM,IAAI,EAAC,YAAY,GAAQ,CAC1D,CACD,EACP;KACD;;;;;;;;;;","names":["pick","Sizes","ButtonColors","govHost","validateProp","ButtonSizes","prepareIconFormat","h","Host"],"sources":["../../../packages/core/src/components/gov-tag/constants.ts","../../../packages/core/src/components/gov-tag/gov-tag.tsx"],"sourcesContent":["import {pick} from \"../../utils/utils\";\nimport {Sizes} from \"../../core/constants/sizes\";\nimport {ValueOf} from \"../../types/interfaces\";\n\nexport const TagSizes = pick(Sizes, ['_XS', '_S', '_M'])\nexport type TagSizesType = `${ValueOf<typeof TagSizes>}`\n\nexport enum TagType {\n\tBOLD = 'bold',\n\tSUBTLE = 'subtle',\n}\nexport type TagTypesType = `${ValueOf<typeof TagType>}`\n\nexport const TagClass = {\n\troot: 'gov-tag',\n}\n","import {Component, Element, h, Host, Prop, Watch} from '@stencil/core'\nimport {govHost} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {validateProp} from '../../helpers/Validate/props'\nimport {ButtonSizes, ButtonColors, ButtonColorType} from '../gov-button/button/constants'\nimport {TagClass, TagSizes, TagSizesType, TagTypesType} from './constants'\nimport {prepareIconFormat} from \"../gov-icon/helpers\";\n\n@Component({\n\ttag: 'gov-tag',\n})\nexport class GovTag {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovTagElement\n\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 * Tag’s size.\n\t */\n\t@Prop({reflect: true}) readonly size: TagSizesType = TagSizes._S\n\t/**\n\t * Style variation of the tag.\n\t */\n\t@Prop({reflect: true}) readonly color: ButtonColorType = ButtonColors.PRIMARY\n\t/**\n\t * Tag’s type\n\t */\n\t@Prop({reflect: true}) readonly type: TagTypesType\n\n\t@Watch('color')\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(ButtonColors, newValue, TagClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, TagClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateColor(this.color)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\tconst iconLeft = prepareIconFormat(this.iconLeft)\n\t\tconst iconRight = prepareIconFormat(this.iconRight)\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TagClass.root)}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={this.type}\n\t\t\t\t>\n\t\t\t\t<span class=\"element\">\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{iconRight && \t<gov-icon type={iconRight.type} name={iconRight.name}></gov-icon>}\n\t\t\t\t\t{this.h.hasSlot('right-icon') && <slot name=\"right-icon\"></slot>}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-theme-switch.cjs.entry.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1af4880c.js');
+const template = require('./template-b070338f.js');
+const win = require('./win-587f4614.js');
+require('./utils-d263c5c6.js');
+
+const ThemeSwitchClass = {
+    root: 'gov-theme-switch'
+};
+const ATTRIBUTE_THEME_NAME = 'data-theme';
+
+var ThemeList;
+(function (ThemeList) {
+    ThemeList["auto"] = "auto";
+    ThemeList["light"] = "light";
+    ThemeList["dark"] = "dark";
+})(ThemeList || (ThemeList = {}));
+
+const GovThemeSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.govChange = index.createEvent(this, "gov-change", 7);
+        this.setThemeState = (state) => {
+            this.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, state);
+            localStorage.setItem(ATTRIBUTE_THEME_NAME, state);
+            this.theme = state;
+            this.govChange.emit({
+                component: ThemeSwitchClass.root,
+                state: this.theme,
+                ref: this.host
+            });
+        };
+        this.theme = ThemeList.auto;
+        this.h = template.govHost(this.host);
+    }
+    get localStorageValue() {
+        return win.isWindow ? localStorage.getItem(ATTRIBUTE_THEME_NAME) : null;
+    }
+    get htmlElement() {
+        return document.documentElement;
+    }
+    componentWillLoad() {
+        this.initDefaultState();
+    }
+    initDefaultState() {
+        const options = Object.keys(ThemeList);
+        let currentState = this.localStorageValue;
+        const htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME);
+        if (currentState && options.includes(currentState)) {
+            this.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, currentState);
+            this.theme = currentState;
+        }
+        else if (htmlState && options.includes(htmlState)) {
+            localStorage.setItem(ATTRIBUTE_THEME_NAME, htmlState);
+            this.theme = htmlState;
+        }
+        else {
+            localStorage.setItem(ATTRIBUTE_THEME_NAME, ThemeList.auto);
+            this.theme = ThemeList.auto;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f9b28a39d5f9fd9203c259e608d8e69c41db8c19', class: this.h.classes(ThemeSwitchClass.root) }, index.h("button", { key: 'b87bf9c3ba487448670fae63a147d80da5e4569c', onClick: () => this.setThemeState(ThemeList.light) }, "light"), index.h("button", { key: '66ae97a5db832ed283e54b0bafda672105507de2', onClick: () => this.setThemeState(ThemeList.dark) }, "dark")));
+    }
+    get host() { return index.getElement(this); }
+};
+
+exports.gov_theme_switch = GovThemeSwitch;
+
+//# sourceMappingURL=gov-theme-switch.cjs.entry.js.map

package/dist/cjs/gov-theme-switch.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-theme-switch.entry.cjs.js","mappings":";;;;;;;;;AAAO,MAAM,gBAAgB,GAAG;IAC/B,IAAI,EAAE,kBAAkB;CACxB,CAAA;AAEM,MAAM,oBAAoB,GAAG,YAAY;;ACFhD,IAAY,SAIX;AAJD,WAAY,SAAS;IACpB,0BAAa,CAAA;IACb,4BAAe,CAAA;IACf,0BAAa,CAAA;AACd,CAAC,EAJW,SAAS,KAAT,SAAS;;MCQR,cAAc;IAG1B;;;QA0CQ,kBAAa,GAAG,CAAC,KAAgB;YACxC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YAC3D,YAAY,CAAC,OAAO,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YAEnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBACnB,SAAS,EAAE,gBAAgB,CAAC,IAAI;gBAChC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,GAAG,EAAE,IAAI,CAAC,IAAI;aACd,CAAC,CAAA;SACF,CAAA;qBAzC2B,SAAS,CAAC,IAAI;QAVzC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAWD,IAAY,iBAAiB;QAC5B,OAAOC,YAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;KACpE;IAED,IAAY,WAAW;QACtB,OAAO,QAAQ,CAAC,eAAe,CAAA;KAC/B;IAED,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACvB;IAEO,gBAAgB;QACvB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;QAErE,IAAI,YAAY,IAAI,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YACnD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;YAClE,IAAI,CAAC,KAAK,GAAG,YAAyB,CAAC;SACvC;aAAM,IAAI,SAAS,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;YACpD,YAAY,CAAC,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;YACtD,IAAI,CAAC,KAAK,GAAG,SAAsB,CAAC;SACpC;aAAM;YACN,YAAY,CAAC,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;YAC3D,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC;SAC5B;KACD;IAcD,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,IACjDD,qEAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,YAAgB,EAC1EA,qEAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,WAAe,CAClE,EACP;KACD;;;;;;","names":["govHost","isWindow","h","Host"],"sources":["../../../packages/core/src/components/gov-theme-switch/constants.ts","../../../packages/core/src/components/gov-theme-switch/gov-theme-switch.types.ts","../../../packages/core/src/components/gov-theme-switch/gov-theme-switch.tsx"],"sourcesContent":["export const ThemeSwitchClass = {\n\troot: 'gov-theme-switch'\n}\n\nexport const ATTRIBUTE_THEME_NAME = 'data-theme'\n","import {GovBaseEvent} from \"../../types/event.types\";\n\nexport enum ThemeList {\n\tauto = 'auto',\n\tlight = 'light',\n\tdark = 'dark'\n}\n\nexport interface ThemeSwitchEvent extends GovBaseEvent {\n\tref: HTMLGovThemeSwitchElement;\n\tstate: ThemeList\n}\n\n","import {Component, Element, Event, EventEmitter, h, Host, State} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\";\nimport {govHost} from \"../../helpers/Dom/template\";\nimport {ATTRIBUTE_THEME_NAME, ThemeSwitchClass} from \"./constants\";\nimport {isWindow} from \"../../helpers/Dom/win\";\nimport {ThemeList, ThemeSwitchEvent} from \"./gov-theme-switch.types\";\n\n@Component({\n\ttag: \"gov-theme-switch\",\n})\nexport class GovThemeSwitch {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovLoadingElement\n\n\t/**\n\t * Called when the theme is changed by the user\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<ThemeSwitchEvent>\n\n\t@State() theme: ThemeList = ThemeList.auto\n\n\tprivate get localStorageValue() {\n\t\treturn isWindow ? localStorage.getItem(ATTRIBUTE_THEME_NAME) : null;\n\t}\n\n\tprivate get htmlElement(): HTMLElement {\n\t\treturn document.documentElement\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.initDefaultState()\n\t}\n\n\tprivate initDefaultState() {\n\t\tconst options = Object.keys(ThemeList);\n\t\tlet currentState = this.localStorageValue;\n\t\tconst htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME)\n\n\t\tif (currentState && options.includes(currentState)) {\n\t\t\tthis.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, currentState);\n\t\t\tthis.theme = currentState as ThemeList;\n\t\t} else if (htmlState && options.includes(htmlState)) {\n\t\t\tlocalStorage.setItem(ATTRIBUTE_THEME_NAME, htmlState);\n\t\t\tthis.theme = htmlState as ThemeList;\n\t\t} else {\n\t\t\tlocalStorage.setItem(ATTRIBUTE_THEME_NAME, ThemeList.auto);\n\t\t\tthis.theme = ThemeList.auto;\n\t\t}\n\t}\n\n\tprivate setThemeState = (state: ThemeList) => {\n\t\tthis.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, state);\n\t\tlocalStorage.setItem(ATTRIBUTE_THEME_NAME, state);\n\t\tthis.theme = state;\n\n\t\tthis.govChange.emit({\n\t\t\tcomponent: ThemeSwitchClass.root,\n\t\t\tstate: this.theme,\n\t\t\tref: this.host\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ThemeSwitchClass.root)}>\n\t\t\t\t<button onClick={() => this.setThemeState(ThemeList.light)}>light</button>\n\t\t\t\t<button onClick={() => this.setThemeState(ThemeList.dark)}>dark</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -2,31 +2,34 @@
 
 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 utils = require('./utils-d263c5c6.js');
+const sizes = require('./sizes-89f8d3b2.js');
+const template = require('./template-b070338f.js');
 
+utils.pick(sizes.Sizes, ['_S', '_M', '_L']);
 const TileClass = {
     root: 'gov-tile',
-    icon: 'gov-tile__icon',
-    arrow: 'gov-tile__arrow',
-    title: 'gov-tile__title',
     link: 'gov-tile__link',
     content: 'gov-tile__content',
-    heading: 'gov-tile__heading',
+    text: 'gov-tile__text',
+    title: 'gov-tile__title',
+    icon: 'gov-tile__icon',
+    annotation: 'gov-tile__annotation',
 };
 
-const govTileCss = ".gov-tile__link::before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.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-tile{position:relative;display:block;width:100%;padding:0.75rem;transition:background-color 150ms}.gov-tile__icon{display:block;margin:0rem 0rem 1.5rem 0rem;color:var(--gov-tile-main-color, var(--gov-color-primary))}.gov-tile__icon .gov-icon{display:block;width:2.5rem;height:2.5rem}.gov-tile__title{display:flex;gap:0.5rem;justify-content:space-between;align-items:flex-start;color:var(--gov-tile-main-color, var(--gov-color-primary));text-decoration:none;margin-bottom:0.5rem}.gov-tile__title [slot=title]{font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing);margin:0}.gov-tile__arrow{flex:0 0 auto;width:1.25rem;height:1.25rem;position:relative;top:0.3125rem;color:inherit}.gov-tile__content{color:var(--gov-tile-text-color, var(--gov-color-secondary-700))}.gov-tile__content>*:last-child{margin-bottom:0}.gov-tile__content a{position:relative;z-index:1}.gov-tile__link{display:block;text-decoration:none}@media not all and (pointer: coarse){.gov-tile[href]:hover{background:var(--gov-tile-hover-bg, var(--gov-color-primary-200))}.gov-tile[href]:hover .gov-tile__title{color:var(--gov-tile-main-color, var(--gov-color-primary))}}@media (min-width: 48em){.gov-tile{padding:1.5rem}.gov-tile__icon .gov-icon{width:3rem;height:3rem}}";
-const GovTileStyle0 = govTileCss;
-
 const GovTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.size = "m";
+        this.orientation = undefined;
+        this.noBorder = false;
         this.href = undefined;
         this.target = undefined;
         this.h = template.govHost(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '2e63a28992ba629ca4127d4e6f537a31570032f6', class: this.h.classes(TileClass.root) }, this.h.hasSlot("icon") && (index.h("span", { key: 'f2d1c3bcef479dfbe6aad214e714484817731398', class: TileClass.icon }, index.h("slot", { key: '1167f157cb8d126878445603743b5cda65ffb4c3', name: "icon" }))), this.href ? (index.h("a", { href: this.href, target: this.target, class: TileClass.link, ref: el => (this.triggerRef = el) }, this.h.hasSlot("title") && (index.h("span", { class: TileClass.title }, index.h("slot", { name: "title" }), index.h("gov-icon", { class: TileClass.arrow, name: "chevron-right" }))))) : (this.h.hasSlot("title") && (index.h("span", { class: TileClass.title }, index.h("slot", { name: "title" })))), index.h("div", { key: '6f571bed52e0bf2961c4bd7d3f6c969866bb98c8', class: TileClass.content }, index.h("slot", { key: '07b4806e406da710e9291bc13d6d95c1d2cead05' }))));
+        return (index.h(index.Host, { key: 'd973b7627ac8ac88a772f9f934e47a2c877ed0e8', class: this.h.classes(TileClass.root), size: this.size, orientation: this.orientation, clickable: this.href ? true : null }, index.h("slot", { key: 'b59cb3c851ea8d4bcf8a4e16289cc47705a3c341', name: "icon" }), index.h("div", { key: 'c73b83b66280e5b977e72713364293e033bea775', class: TileClass.content }, index.h("div", { key: '2301b8814fb4dd910414aae3860f64c1e6f67bba', class: TileClass.text }, index.h("div", { key: '2018bc4f239ca82169396312de4d927353ee4611', class: TileClass.title }, this.href ? (index.h(index.Fragment, null, index.h("a", { href: this.href, target: this.target, class: TileClass.link, ref: el => (this.triggerRef = el) }, index.h("slot", { name: "title" })), index.h("span", { class: TileClass.icon }, index.h("gov-icon", { name: "chevron-right" })))) : (index.h("slot", { name: "title" }))), index.h("div", { key: '5ed46117f4a99de506c9c26d825e11ffb28ce33a', class: `${TileClass.annotation} ${this.href ? `${TileClass.annotation}--padding` : ''}` }, index.h("slot", { key: '6989e7cff2077a60f3171bb025b646e28c259609' }))), index.h("slot", { key: '876b46000cb7bd154d1b3552d13f8472f722c374', name: "button" }))));
     }
     /**
      * Returns a clickable element instance
@@ -36,7 +39,6 @@ const GovTile = class {
     }
     get host() { return index.getElement(this); }
 };
-GovTile.style = GovTileStyle0;
 
 exports.gov_tile = GovTile;
 

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

@@ -1 +1 @@
-{"file":"gov-tile.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,mBAAmB;IAC5B,OAAO,EAAE,mBAAmB;CAC5B;;ACRD,MAAM,UAAU,GAAG,qwDAAqwD,CAAC;AACzxD,sBAAe,UAAU;;MCSZ,OAAO;IAcnB;;;;QACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAED,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IACzC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBD,mEAAM,KAAK,EAAE,SAAS,CAAC,IAAI,IACzBA,mEAAM,IAAI,EAAC,MAAM,GAAE,CACb,CACR,EACA,IAAI,CAAC,IAAI,IACTA,eACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAuC,CAAC,IACrE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KACvBA,kBAAM,KAAK,EAAE,SAAS,CAAC,KAAK,IAC3BA,kBAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,sBAAU,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,IAAI,EAAC,eAAe,GAAY,CAC5D,CACP,CACE,KAEJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KACtBA,kBAAM,KAAK,EAAE,SAAS,CAAC,KAAK,IAC3BA,kBAAM,IAAI,EAAC,OAAO,GAAE,CACd,CACP,CACD,EACDA,kEAAK,KAAK,EAAE,SAAS,CAAC,OAAO,IAC5BA,oEAAO,CACF,CACA,EACP;KACD;;;;IAMD,MAAM,aAAa;QAClB,OAAO,IAAI,CAAC,UAAU,CAAA;KACtB;;;;;;;","names":["govHost","h","Host"],"sources":["../../../packages/core/src/components/gov-tile/constants.ts","../../../packages/core/src/components/gov-tile/gov-tile.scss?tag=gov-tile","../../../packages/core/src/components/gov-tile/gov-tile.tsx"],"sourcesContent":["export const TileClass = {\n\troot: 'gov-tile',\n\ticon: 'gov-tile__icon',\n\tarrow: 'gov-tile__arrow',\n\ttitle: 'gov-tile__title',\n\tlink: 'gov-tile__link',\n\tcontent: 'gov-tile__content',\n\theading: 'gov-tile__heading',\n}\n","/*\n *   Tile\n */\n\n$class: \".gov-tile\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(12);\n\ttransition: background-color $t;\n\t&__icon {\n\t\tdisplay: block;\n\t\tmargin: rem-calc(0 0 24 0);\n\t\tcolor: $tile-main-color;\n\t\t.gov-icon {\n\t\t\tdisplay: block;\n\t\t\twidth: rem-calc(40);\n\t\t\theight: rem-calc(40);\n\t\t}\n\t}\n\t&__title {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n\t\tcolor: $tile-main-color;\n\t\ttext-decoration: none;\n\t\tmargin-bottom: rem-calc(8);\n\t\t& [slot=\"title\"] {\n\t\t\t@include typography($font-size-xl);\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(20);\n\t\theight: rem-calc(20);\n\t\tposition: relative;\n\t\ttop: rem-calc(5);\n\t\tcolor: inherit;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tcolor: $tile-text-color;\n\t\ta {\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t&__link {\n\t\t@extend %link-mask;\n\t\tdisplay: block;\n\t\ttext-decoration: none;\n\t}\n\n\t// HOVERS\n\t&[href] {\n\t\t@include hover() {\n\t\t\tbackground: $tile-hover-bg;\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\tcolor: $tile-main-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(24);\n\t\t&__icon {\n\t\t\t.gov-icon {\n\t\t\t\twidth: rem-calc(48);\n\t\t\t\theight: rem-calc(48);\n\t\t\t}\n\t\t}\n\t}\n}\n","import {Component, Element, h, Host, Method, Prop} from \"@stencil/core\"\nimport {TileClass} from \"./constants\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {ButtonTargetType} from \"../gov-button/button/constants\"\n\n@Component({\n\ttag: \"gov-tile\",\n\tstyleUrl: \"gov-tile.scss\",\n})\nexport class GovTile {\n\t@Element() host: HTMLGovTileElement\n\t/**\n\t * Link on whole tile\n\t */\n\t@Prop({reflect: true}) 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?: ButtonTargetType\n\tprivate triggerRef?: HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TileClass.root)}>\n\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t<span class={TileClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\"/>\n\t\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<a\n\t\t\t\t\t\thref={this.href}\n\t\t\t\t\t\ttarget={this.target}\n\t\t\t\t\t\tclass={TileClass.link}\n\t\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLSpanElement)}>\n\t\t\t\t\t\t{this.h.hasSlot(\"title\") && (\n\t\t\t\t\t\t\t<span class={TileClass.title}>\n\t\t\t\t\t\t\t\t<slot name=\"title\"/>\n\t\t\t\t\t\t\t\t<gov-icon class={TileClass.arrow} name=\"chevron-right\"></gov-icon>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\tthis.h.hasSlot(\"title\") && (\n\t\t\t\t\t\t<span class={TileClass.title}>\n\t\t\t\t\t\t\t<slot name=\"title\"/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t<slot/>\n\t\t\t\t</div>\n\t\t\t</Host>\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"],"version":3}
+{"file":"gov-tile.entry.cjs.js","mappings":";;;;;;;;;AAIyBA,UAAI,CAACC,WAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAC;AAGjD,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,mBAAmB;IAC5B,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,gBAAgB;IACtB,UAAU,EAAE,sBAAsB;CAClC;;MCNY,OAAO;IA0BnB;;oBArBuD,GAAG;;wBAQK,KAAK;;;QAcnE,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAED,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,IAEpCD,mEAAM,IAAI,EAAC,MAAM,GAAE,EACnBA,kEAAK,KAAK,EAAE,SAAS,CAAC,OAAO,IAC5BA,kEAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACzBA,kEAAK,KAAK,EAAE,SAAS,CAAC,KAAK,IACzB,IAAI,CAAC,IAAI,IACTA,QAACE,cAAQ,QACRF,eACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAuC,CAAC,IACtEA,kBAAM,IAAI,EAAC,OAAO,GAAE,CACjB,EACJA,kBAAM,KAAK,EAAE,SAAS,CAAC,IAAI,IAC1BA,sBAAU,IAAI,EAAC,eAAe,GAAE,CAC1B,CACG,KAEXA,kBAAM,IAAI,EAAC,OAAO,GAAE,CACpB,CACI,EACNA,kEAAK,KAAK,EAAE,GAAG,SAAS,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,SAAS,CAAC,UAAU,WAAW,GAAG,EAAE,EAAE,IAC3FA,oEAAO,CACF,CACD,EACNA,mEAAM,IAAI,EAAC,QAAQ,GAAE,CAChB,CACA,EACP;KACD;;;;IAMD,MAAM,aAAa;QAClB,OAAO,IAAI,CAAC,UAAU,CAAA;KACtB;;;;;;","names":["pick","Sizes","govHost","h","Host","Fragment"],"sources":["../../../packages/core/src/components/gov-tile/constants.ts","../../../packages/core/src/components/gov-tile/gov-tile.tsx"],"sourcesContent":["import {pick} from \"../../utils/utils\";\nimport {Sizes} from \"../../core/constants/sizes\";\nimport {ValueOf} from \"../../types/interfaces\";\n\nexport const TileSizes = pick(Sizes, ['_S', '_M', '_L'])\nexport type TileSizesType = `${ValueOf<typeof TileSizes>}`\n\nexport const TileClass = {\n\troot: 'gov-tile',\n\tlink: 'gov-tile__link',\n\tcontent: 'gov-tile__content',\n\ttext: 'gov-tile__text',\n\ttitle: 'gov-tile__title',\n\ticon: 'gov-tile__icon',\n\tannotation: 'gov-tile__annotation',\n}\n","import {Component, Element, Fragment, h, Host, Method, Prop} from \"@stencil/core\"\nimport {TileClass, TileSizesType} from \"./constants\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {ButtonTargetType} from \"../gov-button/button/constants\"\n\n@Component({\n\ttag: \"gov-tile\",\n})\nexport class GovTile {\n\t@Element() host: HTMLGovTileElement\n\t/**\n\t * Tile’s size\n\t */\n\t@Prop({reflect: true}) readonly size?: TileSizesType = \"m\"\n\t/**\n\t * Style variation of the tile.\n\t */\n\t@Prop() readonly orientation: \"vertical\" | \"horizontal\"\n\t/**\n\t * Tiles border\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\t/**\n\t * Link on whole tile\n\t */\n\t@Prop({reflect: true}) 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?: ButtonTargetType\n\tprivate triggerRef?: HTMLLinkElement | HTMLSpanElement\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TileClass.root)}\n\t\t\t\t  size={this.size}\n\t\t\t\t  orientation={this.orientation}\n\t\t\t\t  clickable={this.href ? true : null}\n\t\t\t>\n\t\t\t\t<slot name=\"icon\"/>\n\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t<div class={TileClass.text}>\n\t\t\t\t\t\t<div class={TileClass.title}>\n\t\t\t\t\t\t\t{this.href ? (\n\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\thref={this.href}\n\t\t\t\t\t\t\t\t\t\ttarget={this.target}\n\t\t\t\t\t\t\t\t\t\tclass={TileClass.link}\n\t\t\t\t\t\t\t\t\t\tref={el => (this.triggerRef = el as HTMLLinkElement | HTMLSpanElement)}>\n\t\t\t\t\t\t\t\t\t\t<slot name=\"title\"/>\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t<span class={TileClass.icon}>\n\t\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-right\"/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<slot name=\"title\"/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={`${TileClass.annotation} ${this.href ? `${TileClass.annotation}--padding` : ''}`}>\n\t\t\t\t\t\t\t<slot/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"button\"/>\n\t\t\t\t</div>\n\t\t\t</Host>\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"],"version":3}

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

@@ -2,32 +2,24 @@
 
 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 TilesClass = {
     root: 'gov-tiles',
 };
 
-const govTilesCss = ".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-tiles{overflow:hidden}.gov-tiles>*{margin:0 -0.0625rem -0.0625rem 0;border:0.0625rem solid var(--gov-tiles-border-color, var(--gov-color-secondary-500));border-width:0 0 0.0625rem}.gov-tiles>*:last-child{border-bottom-width:0}.gov-tiles[no-border]>*{border:none}@media (min-width: 48em){.gov-tiles{display:grid}.gov-tiles--x2{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x2>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x2>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x2>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 48em) and (max-width: 63.99em){.gov-tiles--x3,.gov-tiles--x4{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x3>*,.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+3),.gov-tiles--x4>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x3>*:nth-child(2n+2),.gov-tiles--x4>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 64em){.gov-tiles--x3{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x3>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x3>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 64em) and (max-width: 74.99em){.gov-tiles--x4{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x4>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 75em){.gov-tiles--x4{grid-template-columns:repeat(4, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+5){border-top-width:0}.gov-tiles--x4>*:nth-child(4n+4){border-right-width:0}}";
-const GovTilesStyle0 = govTilesCss;
-
 const GovTiles = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.columns = 3;
-        this.noBorder = false;
+        this.columns = 4;
         this.h = template.govHost(this.host);
     }
-    get classNames() {
-        return template.prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns]);
-    }
     render() {
-        return (index.h(index.Host, { key: 'd40e5e036c92e0f68da55d9d9cdbb16ca2d5c366', class: this.h.classes(this.classNames) }, index.h("slot", { key: '79b03146c76ec394c9e22edb823c95acb7467d62' })));
+        return (index.h(index.Host, { key: '399eec38039bf1adddcd9683caa695c3a26f2183', class: this.h.classes(TilesClass.root) }, index.h("slot", { key: '269633bd89e6e0534cc776c782481ebfa3e6b0d2' })));
     }
     get host() { return index.getElement(this); }
 };
-GovTiles.style = GovTilesStyle0;
 
 exports.gov_tiles = GovTiles;
 

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

@@ -1 +1 @@
-{"file":"gov-tiles.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,UAAU,GAAG;IACzB,IAAI,EAAE,WAAW;CACjB;;ACFD,MAAM,WAAW,GAAG,69DAA69D,CAAC;AACl/D,uBAAe,WAAW;;MCSb,QAAQ;IAGpB;;uBAMmC,CAAC;wBAI2B,KAAK;QATnE,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAYD,IAAI,UAAU;QACb,OAAOC,uBAAc,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;KAChG;IAED,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAC3CD,oEAAQ,CACF,EACP;KACD;;;;;;;","names":["govHost","prepareClasses","h","Host"],"sources":["../../../packages/core/src/components/gov-tile/container/constants.ts","../../../packages/core/src/components/gov-tile/container/gov-tiles.scss?tag=gov-tiles","../../../packages/core/src/components/gov-tile/container/gov-tiles.tsx"],"sourcesContent":["export const TilesClass = {\n\troot: 'gov-tiles',\n}\n","/*\n *   Tiles\n */\n\n$class: \".gov-tiles\";\n$line-width: rem-calc(1);\n\n@mixin grid-lines($i) {\n\tgrid-template-columns: repeat(#{$i}, 1fr);\n\t& > * {\n\t\tborder-width: $line-width $line-width $line-width 0;\n\t\t&:nth-child(-n + #{$i + 1}) {\n\t\t\tborder-top-width: 0;\n\t\t}\n\t\t&:nth-child(#{$i}n + #{$i}) {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n}\n\n#{$class} {\n\toverflow: hidden;\n\t& > * {\n\t\tmargin: 0 calc($line-width * -1) calc($line-width * -1) 0;\n\t\tborder: $line-width solid $tiles-border-color;\n\t\tborder-width: 0 0 $line-width;\n\t\t&:last-child {\n\t\t\tborder-bottom-width: 0;\n\t\t}\n\t}\n\t&[no-border] {\n\t\t& > * {\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@include mq($from: md) {\n\t\tdisplay: grid;\n\t\t&--x2 {\n\t\t\t@include grid-lines(2);\n\t\t}\n\t\t@include mq($until: lg) {\n\t\t\t&--x3,\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(2);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t&--x3 {\n\t\t\t@include grid-lines(3);\n\t\t}\n\t\t@include mq($until: xl) {\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(3);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: xl) {\n\t\t&--x4 {\n\t\t\t@include grid-lines(4);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { TilesClass } from './constants'\nimport { prepareClasses } from '../../../helpers/Dom/template'\nimport { govHost } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tiles',\n\tstyleUrl: 'gov-tiles.scss',\n})\nexport class GovTiles {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t/**\n\t * Number of columns between 1-4\n\t */\n\t@Prop() readonly columns: number = 3\n\t/**\n\t * Tiles border\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\n\t@Element() host: HTMLGovTilesElement\n\n\tget classNames(): string {\n\t\treturn prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(this.classNames)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-tiles.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,UAAU,GAAG;IACzB,IAAI,EAAE,WAAW;CACjB;;MCMY,QAAQ;IAGpB;;uBAOkD,CAAC;QANlD,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IASD,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAC3CD,oEAAO,CACD,EACP;KACD;;;;;;","names":["govHost","h","Host"],"sources":["../../../packages/core/src/components/gov-tile/container/constants.ts","../../../packages/core/src/components/gov-tile/container/gov-tiles.tsx"],"sourcesContent":["export const TilesClass = {\n\troot: 'gov-tiles',\n}\n","import {Component, Element, h, Host, Prop} from '@stencil/core'\nimport {TilesClass} from './constants'\nimport {govHost} from '../../../helpers/Dom/template'\nimport {GovHost} from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tiles',\n})\nexport class GovTiles {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Number of columns between 2-6\n\t */\n\t@Prop({reflect: true}) readonly columns: number = 4\n\n\t@Element() host: HTMLGovTilesElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TilesClass.root)}>\n\t\t\t\t<slot/>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}