@gov-design-system-ce/components 0.0.1

package/dist/cjs/gov-accordion-item.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const gov_log = require('./gov.log-4527e960.js');
+const props = require('./props-bb89fb59.js');
+const constants = require('./constants-e0d4a186.js');
+const string_utils = require('./string.utils-f9b3501b.js');
+const template = require('./template-26608353.js');
+const variants = require('./variants-04113a72.js');
+require('./sizes-79872c2a.js');
+
+const govAccordionItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-accordion-item{position:relative;display:block;width:100%}.gov-accordion-item__header{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;position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;border-radius:0;text-align:left;text-transform:none;transition:background-color 150ms ease-in-out}.gov-accordion-item__header:focus{outline:none}.gov-accordion-item__header:focus{outline:none}.gov-accordion-item__header: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}.gov-accordion-item__header::before{content:\"\";position:absolute;display:block;right:0;bottom:-1px;left:0;height:1px}.gov-accordion-item__header>.gov-icon{display:inline-block;flex:0 0 auto;align-self:center}.gov-accordion-item__header *[slot=icon]{display:inline-block;vertical-align:middle;flex:0 0 auto}.gov-accordion-item__header *[slot=suffix]{display:inline-block;vertical-align:middle;flex:0 0 auto;margin-left:auto;line-height:initial}.gov-accordion-item__header:focus-visible::before{display:none}.gov-accordion-item__header[aria-expanded=\"\"]>.gov-icon,.gov-accordion-item__header[aria-expanded=true i]>.gov-icon,.gov-accordion-item__header[aria-expanded=\"1\"]>.gov-icon{transform:scale(-1)}.gov-accordion-item__title{margin:0;padding:0;font-family:\"Roboto\", sans-serif;font-weight:400;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:flex-start}.gov-accordion-item__content p:last-child{margin-bottom:0}.gov-accordion-item[size=s] .gov-accordion-item__header{gap:0.5rem;min-height:3rem;padding:0.75rem 0.5rem}.gov-accordion-item[size=s] .gov-accordion-item__header>.gov-icon{width:0.75rem;height:0.75rem}.gov-accordion-item[size=s] .gov-accordion-item__header *[slot=icon]{width:calc(var(--gov-text-m-font-size) * 1.2);height:calc(var(--gov-text-m-font-size) * 1.2);transform:translateY(0.0625rem)}.gov-accordion-item[size=s] .gov-accordion-item__title{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem}.gov-accordion-item[size=s] .gov-accordion-item__content{padding:1rem 0.5rem}.gov-accordion-item[size=m] .gov-accordion-item__header{gap:1rem;min-height:4.5rem;padding:1.25rem 0.5rem}.gov-accordion-item[size=m] .gov-accordion-item__header>.gov-icon{width:1rem;height:1rem}.gov-accordion-item[size=m] .gov-accordion-item__header *[slot=icon]{width:calc(var(--gov-text-2xl-font-size) * 1.2);height:calc(var(--gov-text-2xl-font-size) * 1.2);transform:translateY(0.125rem)}.gov-accordion-item[size=m] .gov-accordion-item__title{font-weight:var(--gov-text-2xl-font-weight);font-size:var(--gov-text-2xl-font-size);line-height:var(--gov-text-2xl-line-height);letter-spacing:var(--gov-text-2xl-letter-spacing);gap:1rem}.gov-accordion-item[size=m] .gov-accordion-item__content{padding:1.25rem 0.5rem}.gov-accordion-item[size=l] .gov-accordion-item__header{gap:1rem;min-height:5.5rem;padding:1.375rem 0.5rem}.gov-accordion-item[size=l] .gov-accordion-item__header>.gov-icon{width:1.25rem;height:1.25rem}.gov-accordion-item[size=l] .gov-accordion-item__header *[slot=icon]{width:calc(var(--gov-text-3xl-font-size) * 1.2);height:calc(var(--gov-text-3xl-font-size) * 1.2);transform:translateY(0.125rem)}.gov-accordion-item[size=l] .gov-accordion-item__title{font-weight:var(--gov-text-3xl-font-weight);font-size:var(--gov-text-3xl-font-size);line-height:var(--gov-text-3xl-line-height);letter-spacing:var(--gov-text-3xl-letter-spacing);gap:1rem}.gov-accordion-item[size=l] .gov-accordion-item__content{padding:1.25rem 0.5rem}.gov-accordion-item[variant=primary] .gov-accordion-item__header{background-color:transparent;color:var(--gov-color-primary)}.gov-accordion-item[variant=primary] .gov-accordion-item__header::before{background-color:var(--gov-color-secondary-500)}@media not all and (pointer: coarse){.gov-accordion-item[variant=primary] .gov-accordion-item__header:hover{background-color:var(--gov-color-primary-200)}}.gov-accordion-item[variant=primary][disabled=\"\"] .gov-accordion-item__header,.gov-accordion-item[variant=primary][disabled=true i] .gov-accordion-item__header,.gov-accordion-item[variant=primary][disabled=\"1\"] .gov-accordion-item__header{color:var(--gov-color-primary-400)}@media not all and (pointer: coarse){.gov-accordion-item[variant=primary][disabled=\"\"] .gov-accordion-item__header:hover,.gov-accordion-item[variant=primary][disabled=true i] .gov-accordion-item__header:hover,.gov-accordion-item[variant=primary][disabled=\"1\"] .gov-accordion-item__header:hover{background:transparent;cursor:not-allowed}}.gov-accordion-item[variant=secondary] .gov-accordion-item__header{background-color:transparent;color:var(--gov-color-secondary)}.gov-accordion-item[variant=secondary] .gov-accordion-item__header::before{background-color:var(--gov-color-secondary-500)}@media not all and (pointer: coarse){.gov-accordion-item[variant=secondary] .gov-accordion-item__header:hover{background-color:var(--gov-color-secondary-200)}}.gov-accordion-item[variant=secondary][disabled=\"\"] .gov-accordion-item__header,.gov-accordion-item[variant=secondary][disabled=true i] .gov-accordion-item__header,.gov-accordion-item[variant=secondary][disabled=\"1\"] .gov-accordion-item__header{color:var(--gov-color-secondary-600)}@media not all and (pointer: coarse){.gov-accordion-item[variant=secondary][disabled=\"\"] .gov-accordion-item__header:hover,.gov-accordion-item[variant=secondary][disabled=true i] .gov-accordion-item__header:hover,.gov-accordion-item[variant=secondary][disabled=\"1\"] .gov-accordion-item__header:hover{background:transparent;cursor:not-allowed}}@media (max-width: 47.99em){.gov-accordion-item__title{flex-wrap:wrap}.gov-accordion-item__label{flex:0 0 auto;max-width:calc(100% - 50px)}}";
+
+const GovAccordionItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govChange = index.createEvent(this, "gov-change", 7);
+    this.isExpandedState = undefined;
+    this.variant = variants.Variants.PRIMARY;
+    this.identifier = undefined;
+    this.size = undefined;
+    this.label = undefined;
+    this.disabled = false;
+    this.isExpanded = false;
+    this.triggerTag = "h3";
+    this.triggerId = string_utils.createID("GovAccordionItem");
+    this.contentId = string_utils.createID("GovAccordionContent");
+  }
+  validateLabel(newValue) {
+    if (!newValue) {
+      gov_log.govErrorLog(`[${constants.AccordionItemClass.root}]: Parameter label is required.`);
+    }
+  }
+  validateTriggerTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "span"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        gov_log.govErrorLog(`[${constants.AccordionItemClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  validateSize(newValue) {
+    props.validateProp(constants.Sizes, newValue, constants.AccordionItemClass.root);
+  }
+  validateVariant(newValue) {
+    props.validateProp(variants.Variants, newValue, constants.AccordionItemClass.root);
+  }
+  emmitChange() {
+    this.govChange.emit({ open: this.isExpandedState, element: this.host });
+  }
+  componentWillLoad() {
+    this.isExpandedState = this.isExpanded;
+    this.validateSize(this.size);
+    this.validateLabel(this.label);
+    this.validateVariant(this.variant);
+    this.validateTriggerTag(this.triggerTag);
+  }
+  render() {
+    const triggerId = this.identifier || this.triggerId;
+    const contentId = this.contentId;
+    const { isExpandedState, label } = this;
+    const TriggerTag = this.triggerTag;
+    return (index.h(index.Host, { class: constants.AccordionItemClass.root, role: "listitem" }, index.h("button", { id: triggerId, class: constants.AccordionItemClass.header, "aria-expanded": template.booleanString(isExpandedState), "aria-controls": contentId, disabled: this.disabled, "aria-disabled": template.toBoolAttrIfDefined(this.disabled), onClick: () => this.toggle() }, index.h(TriggerTag, { class: constants.AccordionItemClass.title }, index.h("slot", { name: "icon" }), index.h("span", { class: constants.AccordionItemClass.label }, label), index.h("slot", { name: "suffix" })), index.h("gov-icon", { name: "arrow-down" })), index.h("div", { class: constants.AccordionItemClass.content, id: contentId, "aria-hidden": template.booleanString(!isExpandedState), hidden: !isExpandedState, "aria-labelledby": triggerId }, index.h("slot", null))));
+  }
+  /**
+   * Opening the accordion
+   */
+  async open() {
+    this.isExpandedState = true;
+    this.emmitChange();
+  }
+  /**
+   * Closing the accordion
+   */
+  async close() {
+    this.isExpandedState = false;
+    this.emmitChange();
+  }
+  /**
+   * Accordion switch
+   */
+  async toggle() {
+    this.isExpandedState = !this.isExpandedState;
+    this.emmitChange();
+  }
+  /**
+   * Returns the current state of the component
+   */
+  async currentState() {
+    return this.isExpandedState;
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["validateLabel"],
+    "triggerTag": ["validateTriggerTag"],
+    "size": ["validateSize"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovAccordionItem.style = govAccordionItemCss;
+
+exports.gov_accordion_item = GovAccordionItem;
+
+//# sourceMappingURL=gov-accordion-item.cjs.entry.js.map

package/dist/cjs/gov-accordion-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-accordion-item.entry.cjs.js","mappings":"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","names":["Variants","createID","govErrorLog","AccordionItemClass","validateProp","Sizes","h","Host","booleanString","toBoolAttrIfDefined"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion-item.scss?tag=gov-accordion-item","../../../packages/core/src/components/gov-accordion/gov-accordion-item.tsx"],"sourcesContent":["/*\n *   Accordion - Item\n */\n\n$class: \".gov-accordion-item\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\t&__header {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttext-transform: none;\n\t\ttransition: background-color $t ease-in-out;\n\t\t&::before {\n\t\t\t@include pseudo();\n\t\t\tright: 0;\n\t\t\tbottom: -1px;\n\t\t\tleft: 0;\n\t\t\theight: 1px;\n\t\t}\n\n\t\t// Arrow\n\t\t& > .gov-icon {\n\t\t\tdisplay: inline-block;\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t// Icon slot\n\t\t*[slot=\"icon\"] {\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t\tflex: 0 0 auto;\n\t\t}\n\n\t\t// Right slot\n\t\t*[slot=\"suffix\"] {\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t\tflex: 0 0 auto;\n\t\t\tmargin-left: auto;\n\t\t\tline-height: initial;\n\t\t}\n\n\t\t// States\n\t\t&:focus-visible {\n\t\t\t&::before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\t& > .gov-icon {\n\t\t\t\ttransform: scale(-1);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__title {\n\t\t@include general;\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\talign-items: flex-start;\n\t}\n\n\t&__content {\n\t\tp:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t// sizes\n\t@each $size, $definitions in $accordion-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t\tmin-height: get(\"min-height\", $definitions);\n\t\t\t\t\tpadding: get(\"padding-y\", $definitions) get(\"padding-x\", $definitions);\n\n\t\t\t\t\t// Arrow\n\t\t\t\t\t& > .gov-icon {\n\t\t\t\t\t\twidth: get(\"icon-size\", $definitions);\n\t\t\t\t\t\theight: get(\"icon-size\", $definitions);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Icon slot\n\t\t\t\t\t*[slot=\"icon\"] {\n\t\t\t\t\t\twidth: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\t\theight: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\t\ttransform: translateY(get(\"icon-position\", $definitions));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"padding-inner\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t// colors\n\t@each $variant, $definitions in $accordion-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tbackground-color: get(\"separator\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tbackground-color: get(\"background-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"disabled\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\tcolor: get(\"disabled-color\", $definitions);\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcursor: not-allowed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($until: md) {\n\t\t&__title {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t\t&__label {\n\t\t\tflex: 0 0 auto;\n\t\t\tmax-width: calc(100% - 50px);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { SizeType, Sizes, AccordionItemClass, VariantType } from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { GovAccordionItemChangeEvent } from \"./gov-accordion-item.d\"\nimport { Variants } from \"../../core/constants/variants\"\n\n@Component({\n\ttag: \"gov-accordion-item\",\n\tstyleUrl: \"gov-accordion-item.scss\",\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.triggerId = createID(\"GovAccordionItem\")\n\t\tthis.contentId = createID(\"GovAccordionContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Custom accordion item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size: SizeType = undefined\n\t/**\n\t * Item name of the accordion\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: \"is-expanded\" }) readonly isExpanded: boolean = false\n\t/**\n\t * Used to change the HMTL tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"trigger-tag\" }) readonly triggerTag: string = \"h3\"\n\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovAccordionItemChangeEvent>\n\n\t@Watch(\"label\")\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${AccordionItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"triggerTag\")\n\tvalidateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateSize(this.size)\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { isExpandedState, label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={AccordionItemClass.root} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(isExpandedState)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={() => this.toggle()}>\n\t\t\t\t\t<TriggerTag class={AccordionItemClass.title}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t<span class={AccordionItemClass.label}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t</TriggerTag>\n\n\t\t\t\t\t<gov-icon name=\"arrow-down\"></gov-icon>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!isExpandedState)}\n\t\t\t\t\thidden={!isExpandedState}\n\t\t\t\t\taria-labelledby={triggerId}>\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 * Opening the accordion\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the accordion\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n\n}\n"],"version":3}

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const props = require('./props-bb89fb59.js');
+const constants = require('./constants-e0d4a186.js');
+const sizes = require('./sizes-79872c2a.js');
+const variants = require('./variants-04113a72.js');
+const win = require('./win-aa54b884.js');
+const utils = require('./utils-a51135ab.js');
+require('./gov.log-4527e960.js');
+require('./string.utils-f9b3501b.js');
+
+const govAccordionCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-accordion{position:relative;display:block;width:100%}";
+
+const GovAccordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govChange = index.createEvent(this, "gov-change", 7);
+    this.size = sizes.Sizes._M;
+    this.variant = variants.Variants.PRIMARY;
+    this.wcagLabel = undefined;
+    this.wcagLabelledBy = undefined;
+  }
+  validateSize(newValue) {
+    props.validateProp(constants.Sizes, newValue, constants.AccordionClass.root);
+  }
+  validateVariant(newValue) {
+    props.validateProp(variants.Variants, newValue, constants.AccordionClass.root);
+  }
+  componentWillLoad() {
+    this.validateSize(this.size);
+    this.validateVariant(this.variant);
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll(constants.AccordionItemClass.root).forEach((child) => {
+      child.setAttribute('size', this.size);
+      child.setAttribute('variant', this.variant);
+      child.addEventListener('gov-change', (e) => {
+        e.stopPropagation();
+        this.govChange.emit(e.detail);
+      });
+    });
+  }
+  async componentDidRender() {
+    if (win.canValidateWcagOnRender()) {
+      await utils.delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: constants.AccordionClass.root, size: this.size, variant: this.variant }, index.h("div", { role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, index.h("slot", null))));
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    win.validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, constants.AccordionClass.root);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "size": ["validateSize"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovAccordion.style = govAccordionCss;
+
+exports.gov_accordion = GovAccordion;
+
+//# sourceMappingURL=gov-accordion.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-accordion.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,oMAAoM;;MCe/M,YAAY;;;;gBAMUA,WAAW,CAAC,EAAE;mBAIRC,iBAAQ,CAAC,OAAO;;;;EAexD,YAAY,CAAC,QAAgB;IAC5BC,kBAAY,CAACC,eAAK,EAAE,QAAQ,EAAEC,wBAAc,CAAC,IAAI,CAAC,CAAA;GAClD;EAGD,eAAe,CAAC,QAAgB;IAC/BF,kBAAY,CAACD,iBAAQ,EAAE,QAAQ,EAAEG,wBAAc,CAAC,IAAI,CAAC,CAAA;GACrD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACC,4BAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC;MAC9F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;MAC3C,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAA2D;QAChG,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAIC,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAEL,wBAAc,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACvEI,iBAAK,IAAI,EAAE,MAAM,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IACpFA,qBAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjBE,qBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAEN,wBAAc,CAAC,IAAI,CAAC,CAAA;GAC3E;;;;;;;;;;;","names":["GlobalSizes","Variants","validateProp","Sizes","AccordionClass","AccordionItemClass","canValidateWcagOnRender","delay","h","Host","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion.scss?tag=gov-accordion","../../../packages/core/src/components/gov-accordion/gov-accordion.tsx"],"sourcesContent":["/*\n *   Accordion\n */\n\n$class: \".gov-accordion\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, Sizes, SizeType, AccordionItemClass, VariantType } from './constants'\nimport { Sizes as GlobalSizes } from '../../core/constants/sizes'\nimport { GovAccordionItemCustomEvent } from '../../components'\nimport { GovAccordionItemChangeEvent } from './gov-accordion-item.d'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\t@Element() readonly host: HTMLGovAccordionElement\n\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size: SizeType = GlobalSizes._M\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.setAttribute('variant', this.variant)\n\t\t\tchild.addEventListener('gov-change', (e: GovAccordionItemCustomEvent<GovAccordionItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={AccordionClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<div role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\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 * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const props = require('./props-bb89fb59.js');
+const variants = require('./variants-04113a72.js');
+const template = require('./template-26608353.js');
+require('./gov.log-4527e960.js');
+
+const AlertClass = {
+  root: "gov-alert",
+  section: "gov-alert__section",
+  icon: "gov-alert__icon",
+  content: "gov-alert__content",
+  close: "gov-alert__close",
+};
+
+const govAlertCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-alert{position:relative;display:flex;width:100%}.gov-alert__section{display:block;width:100%;max-width:var(--gov-container-width, 75rem);margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem);display:flex;gap:1rem;padding-top:1rem;padding-bottom:1rem}@media (min-width: 48em){.gov-alert__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-alert__icon{flex:0 0 auto}.gov-alert__icon>*{width:1.25rem;height:1.25rem}.gov-alert__content{padding-right:3.25rem}.gov-alert__content p{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-alert__content p:last-child{margin-bottom:0 !important}.gov-alert__content a{color:inherit}@media not all and (pointer: coarse){.gov-alert__content a:hover{color:inherit}}.gov-alert__close{position:absolute;top:0.625rem;right:1rem}.gov-alert[variant=warning]{background-color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning] .gov-alert__icon{color:var(--gov-alert-warning-icon-color, var(--gov-color-secondary))}.gov-alert[variant=warning] .gov-alert__content{color:var(--gov-alert-warning-text-color, var(--gov-color-secondary))}.gov-alert[variant=warning][inverse=\"\"],.gov-alert[variant=warning][inverse=true i],.gov-alert[variant=warning][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=warning][inverse=true i] .gov-alert__icon,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__content,.gov-alert[variant=warning][inverse=true i] .gov-alert__content,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=error]{background-color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error] .gov-alert__icon{color:var(--gov-alert-error-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=error] .gov-alert__content{color:var(--gov-alert-error-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=error][inverse=\"\"],.gov-alert[variant=error][inverse=true i],.gov-alert[variant=error][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=error][inverse=true i] .gov-alert__icon,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__content,.gov-alert[variant=error][inverse=true i] .gov-alert__content,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=secondary]{background-color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary] .gov-alert__icon{color:var(--gov-alert-secondary-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=secondary] .gov-alert__content{color:var(--gov-alert-secondary-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=secondary][inverse=\"\"],.gov-alert[variant=secondary][inverse=true i],.gov-alert[variant=secondary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=secondary][inverse=true i] .gov-alert__icon,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=secondary][inverse=true i] .gov-alert__content,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=success]{background-color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success] .gov-alert__icon{color:var(--gov-alert-success-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=success] .gov-alert__content{color:var(--gov-alert-success-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=success][inverse=\"\"],.gov-alert[variant=success][inverse=true i],.gov-alert[variant=success][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=success][inverse=true i] .gov-alert__icon,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__content,.gov-alert[variant=success][inverse=true i] .gov-alert__content,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=primary]{background-color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary] .gov-alert__icon{color:var(--gov-alert-primary-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=primary] .gov-alert__content{color:var(--gov-alert-primary-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=primary][inverse=\"\"],.gov-alert[variant=primary][inverse=true i],.gov-alert[variant=primary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=primary][inverse=true i] .gov-alert__icon,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=primary][inverse=true i] .gov-alert__content,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}@media (min-width: 75em){.gov-alert__content{padding-right:2rem}}";
+
+const GovAlert = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govClose = index.createEvent(this, "gov-close", 7);
+    this.variant = variants.Variants.PRIMARY;
+    this.inverse = false;
+    this.wcagCloseLabel = undefined;
+    this.closable = false;
+    this.h = template.govHost(this.host);
+  }
+  validateVariant(newValue) {
+    props.validateProp(variants.Variants, newValue, AlertClass.root);
+  }
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+  }
+  render() {
+    var inverse = !this.inverse;
+    var variant = this.inverse || this.variant == "warning" ? "secondary" : this.variant;
+    const closeButton = (index.h("div", { class: AlertClass.close }, index.h("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, onClick: (e) => this.govClose.emit(e) }, index.h("gov-icon", { name: "cross" }))));
+    return (index.h(index.Host, { class: AlertClass.root, variant: this.variant }, index.h("section", { class: AlertClass.section, role: "alert" }, this.h.hasSlot('icon') && (index.h("div", { class: AlertClass.icon }, index.h("slot", { name: "icon" }))), index.h("div", { class: AlertClass.content }, index.h("slot", null))), this.closable && closeButton));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "variant": ["validateVariant"]
+  }; }
+};
+GovAlert.style = govAlertCss;
+
+exports.gov_alert = GovAlert;
+
+//# sourceMappingURL=gov-alert.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-alert.entry.cjs.js","mappings":";;;;;;;;;;AAKO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,OAAO,EAAE,oBAAoB;EAC7B,IAAI,EAAE,iBAAiB;EACvB,OAAO,EAAE,oBAAoB;EAC7B,KAAK,EAAE,kBAAkB;CACzB;;ACXD,MAAM,WAAW,GAAG,kzNAAkzN;;MCYzzN,QAAQ;EAGpB;;;mBASwCA,iBAAQ,CAAC,OAAO;mBAIpB,KAAK;;oBAYH,KAAK;IAxB1C,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA2BD,eAAe,CAAC,QAAgB;IAC/BC,kBAAY,CAACF,iBAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;GACjD;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAID,MAAM;IACL,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC5B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAErF,MAAM,WAAW,IAChBG,iBAAK,KAAK,EAAE,UAAU,CAAC,KAAK,IAC3BA,wBAAY,IAAI,EAAC,GAAG,gBAAa,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACxJA,sBAAU,IAAI,EAAC,OAAO,GAAY,CACtB,CACR,CACN,CAAA;IAED,QACCA,QAACC,UAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAClDD,qBAAS,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,iBAAK,KAAK,EAAE,UAAU,CAAC,IAAI,IAC1BA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EAEDA,iBAAK,KAAK,EAAE,UAAU,CAAC,OAAO,IAC7BA,qBAAQ,CACH,CACG,EACT,IAAI,CAAC,QAAQ,IAAI,WAAW,CACvB,EACP;GACD;;;;;;;;;;","names":["Variants","govHost","validateProp","h","Host"],"sources":["../../../packages/core/src/components/gov-alert/constants.ts","../../../packages/core/src/components/gov-alert/gov-alert.scss?tag=gov-alert","../../../packages/core/src/components/gov-alert/gov-alert.tsx"],"sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS] as const\nexport type VariantType = typeof Variants[number]\n\nexport const AlertClass = {\n\troot: \"gov-alert\",\n\tsection: \"gov-alert__section\",\n\ticon: \"gov-alert__icon\",\n\tcontent: \"gov-alert__content\",\n\tclose: \"gov-alert__close\",\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-alert\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\t&__section {\n\t\t@include container();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tpadding-top: rem-calc(16);\n\t\tpadding-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\t& > * {\n\t\t\twidth: rem-calc(20);\n\t\t\theight: rem-calc(20);\n\t\t}\n\t}\n\t&__content {\n\t\tpadding-right: rem-calc(52);\n\t\tp {\n\t\t\t@include typography($font-size-m);\n\t\t}\n\t\tp:last-child {\n\t\t\tmargin-bottom: 0 !important;\n\t\t}\n\t\ta {\n\t\t\tcolor: inherit;\n\t\t\t@include hover() {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(10);\n\t\tright: rem-calc(16);\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $alert-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"icon-color\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tcolor: get(\"text-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t\tbackground-color: $alert-inverse-bg;\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"bg-color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tcolor: $alert-inverse-color;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@include mq($from: xl) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AlertClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { Variants } from '../../core/constants/variants'\nimport { VariantType } from './constants'\n\n@Component({\n\ttag: 'gov-alert',\n\tstyleUrl: 'gov-alert.scss',\n})\nexport class GovAlert {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Aria label for the closing button. It is mandatory if the alert is closable\n\t */\n\t@Prop({ attribute: 'wcag-close-label' }) readonly wcagCloseLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: 'gov-close' }) govClose: EventEmitter<PointerEvent>\n\t/**\n\t * Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AlertClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\n\n\trender() {\n\t\tvar inverse = !this.inverse;\n\t\tvar variant = this.inverse || this.variant == \"warning\" ? \"secondary\" : this.variant;\n\t\t\n\t\tconst closeButton = (\n\t\t\t<div class={AlertClass.close}>\n\t\t\t\t<gov-button size=\"s\" aria-label={this.wcagCloseLabel} type=\"base\" variant={variant} inverse={inverse} onClick={(e: PointerEvent) => this.govClose.emit(e)}>\n\t\t\t\t\t<gov-icon name=\"cross\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={AlertClass.root} variant={this.variant}>\n\t\t\t\t<section class={AlertClass.section} role=\"alert\">\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={AlertClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={AlertClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t\t{this.closable && closeButton}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}