@gov-design-system-ce/components 0.0.52 → 0.0.54

package/dist/collection/components/gov-accordion/gov-accordion-item.css

@@ -170,7 +170,7 @@
  -  Variables - Toast Message
  */
 /*
- -  Variables - Wizzard
+ -  Variables - Wizard
  */
 /*
  -  Variables - Stepper
@@ -232,6 +232,16 @@
   display: block;
   width: 100%;
 }
+.gov-accordion-item::before {
+  content: "";
+  position: absolute;
+  display: block;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 1px;
+  background-color: var(--gov-color-secondary-500);
+}
 .gov-accordion-item__header {
   display: inline-flex;
   vertical-align: middle;
@@ -245,10 +255,15 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--gov-font-family, "Roboto", sans-serif);
+  font-weight: 400;
+  box-sizing: border-box;
   position: relative;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
   border-radius: 0;
   text-align: left;
@@ -266,24 +281,15 @@
   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:focus-visible::before {
   display: none;
 }
-.gov-accordion-item__header[aria-expanded=""] .gov-accordion-item__arrow, .gov-accordion-item__header[aria-expanded=true i] .gov-accordion-item__arrow, .gov-accordion-item__header[aria-expanded="1"] .gov-accordion-item__arrow {
+.gov-accordion-item__header[aria-expanded=""] .gov-accordion-item__arrow .gov-icon:not([slot=toggle-icon]), .gov-accordion-item__header[aria-expanded=true i] .gov-accordion-item__arrow .gov-icon:not([slot=toggle-icon]), .gov-accordion-item__header[aria-expanded="1"] .gov-accordion-item__arrow .gov-icon:not([slot=toggle-icon]) {
   transform: scale(-1);
 }
 .gov-accordion-item__arrow {
   flex: 0 0 auto;
-  align-self: center;
+  margin-left: auto;
 }
 .gov-accordion-item__icon {
   display: inline-flex;
@@ -299,152 +305,147 @@
   line-height: initial;
 }
 .gov-accordion-item__title {
-  margin: 0;
-  padding: 0;
-  font-family: var(--gov-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__name {
   display: flex;
   flex-direction: column;
 }
-.gov-accordion-item__annot {
+.gov-accordion-item__label * {
+  margin-bottom: 0;
+  transform: translateY(1px);
+}
+.gov-accordion-item__annotation * {
   color: var(--gov-color-secondary);
+  margin-bottom: 0;
 }
 .gov-accordion-item__content > *:last-child {
   margin-bottom: 0;
 }
-.gov-accordion-item[size=xs] .gov-accordion-item__header, .gov-accordion-item .gov-accordion-item[size=xs] .gov-accordion-item__header {
-  gap: var(--gov-accordion-s-headline-gap, 0.5rem);
-  min-height: var(--gov-accordion-s-min-height, 3rem);
-  padding: var(--gov-accordion-s-padding-y, 0.75rem) var(--gov-accordion-s-padding-x, 0.5rem);
-}
-.gov-accordion-item[size=xs] .gov-accordion-item__arrow, .gov-accordion-item .gov-accordion-item[size=xs] .gov-accordion-item__arrow {
-  width: var(--gov-accordion-s-icon-size, 0.75rem);
-  height: var(--gov-accordion-s-icon-size, 0.75rem);
-}
-.gov-accordion-item[size=xs] .gov-accordion-item__icon, .gov-accordion-item .gov-accordion-item[size=xs] .gov-accordion-item__icon {
-  width: calc(var(--gov-text-m-font-size) * 1.2);
-  height: calc(var(--gov-text-m-font-size) * 1.2);
-  transform: translateY(var(--gov-accordion-s-icon-position, 0.0625rem));
+.gov-accordion-item[size=xs] .gov-accordion-item__header {
+  gap: var(--gov-accordion-xs-headline-gap, 0.5rem);
+  min-height: var(--gov-accordion-xs-min-height, 3rem);
+  padding: var(--gov-accordion-xs-padding-y, 0.75rem) var(--gov-accordion-xs-padding-x, 0.5rem);
 }
-.gov-accordion-item[size=xs] .gov-accordion-item__title, .gov-accordion-item .gov-accordion-item[size=xs] .gov-accordion-item__title {
+.gov-accordion-item[size=xs] .gov-accordion-item__label * {
   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: var(--gov-accordion-s-headline-gap, 0.5rem);
 }
-.gov-accordion-item[size=xs] .gov-accordion-item__annot, .gov-accordion-item .gov-accordion-item[size=xs] .gov-accordion-item__annot {
+.gov-accordion-item[size=xs] .gov-accordion-item__arrow {
+  width: var(--gov-accordion-xs-icon-size, 1rem);
+  height: var(--gov-accordion-xs-icon-size, 1rem);
+  transform: translateY(var(--gov-accordion-xs-arrow-position, 0.1875rem));
+}
+.gov-accordion-item[size=xs] .gov-accordion-item__icon {
+  width: calc(var(--gov-text-m-font-size) * 1.2);
+  height: calc(var(--gov-text-m-font-size) * 1.2);
+  transform: translateY(var(--gov-accordion-xs-icon-position, 0.1875rem));
+}
+.gov-accordion-item[size=xs] .gov-accordion-item__annotation {
   font-weight: var(--gov-text-s-font-weight);
   font-size: var(--gov-text-s-font-size);
   line-height: var(--gov-text-s-line-height);
   letter-spacing: var(--gov-text-s-letter-spacing);
 }
-.gov-accordion-item[size=xs] .gov-accordion-item__content, .gov-accordion-item .gov-accordion-item[size=xs] .gov-accordion-item__content {
-  padding: var(--gov-accordion-s-padding-inner, 1rem 0.5rem);
+.gov-accordion-item[size=xs] .gov-accordion-item__content {
+  padding: var(--gov-accordion-xs-padding-inner, 1rem 0.5rem);
 }
-.gov-accordion-item[size=s] .gov-accordion-item__header, .gov-accordion-item .gov-accordion-item[size=s] .gov-accordion-item__header {
+.gov-accordion-item[size=s] .gov-accordion-item__header {
   gap: var(--gov-accordion-s-headline-gap, 0.5rem);
   min-height: var(--gov-accordion-s-min-height, 3rem);
   padding: var(--gov-accordion-s-padding-y, 1.125rem) var(--gov-accordion-s-padding-x, 0.5rem);
 }
-.gov-accordion-item[size=s] .gov-accordion-item__arrow, .gov-accordion-item .gov-accordion-item[size=s] .gov-accordion-item__arrow {
-  width: var(--gov-accordion-s-icon-size, 0.75rem);
-  height: var(--gov-accordion-s-icon-size, 0.75rem);
-}
-.gov-accordion-item[size=s] .gov-accordion-item__icon, .gov-accordion-item .gov-accordion-item[size=s] .gov-accordion-item__icon {
-  width: calc(var(--gov-text-xl-font-size) * 1.2);
-  height: calc(var(--gov-text-xl-font-size) * 1.2);
-  transform: translateY(var(--gov-accordion-s-icon-position, 0.0625rem));
-}
-.gov-accordion-item[size=s] .gov-accordion-item__title, .gov-accordion-item .gov-accordion-item[size=s] .gov-accordion-item__title {
+.gov-accordion-item[size=s] .gov-accordion-item__label * {
   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);
-  gap: var(--gov-accordion-s-headline-gap, 0.5rem);
 }
-.gov-accordion-item[size=s] .gov-accordion-item__annot, .gov-accordion-item .gov-accordion-item[size=s] .gov-accordion-item__annot {
+.gov-accordion-item[size=s] .gov-accordion-item__arrow {
+  width: var(--gov-accordion-s-icon-size, 1rem);
+  height: var(--gov-accordion-s-icon-size, 1rem);
+  transform: translateY(var(--gov-accordion-s-arrow-position, 0.4375rem));
+}
+.gov-accordion-item[size=s] .gov-accordion-item__icon {
+  width: calc(var(--gov-text-xl-font-size) * 1.2);
+  height: calc(var(--gov-text-xl-font-size) * 1.2);
+  transform: translateY(var(--gov-accordion-s-icon-position, 0.1875rem));
+}
+.gov-accordion-item[size=s] .gov-accordion-item__annotation {
   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-accordion-item[size=s] .gov-accordion-item__content, .gov-accordion-item .gov-accordion-item[size=s] .gov-accordion-item__content {
+.gov-accordion-item[size=s] .gov-accordion-item__content {
   padding: var(--gov-accordion-s-padding-inner, 1rem 0.5rem);
 }
-.gov-accordion-item[size=m] .gov-accordion-item__header, .gov-accordion-item .gov-accordion-item[size=m] .gov-accordion-item__header {
+.gov-accordion-item[size=m] .gov-accordion-item__header {
   gap: var(--gov-accordion-m-headline-gap, 1rem);
   min-height: var(--gov-accordion-m-min-height, 4.5rem);
   padding: var(--gov-accordion-m-padding-y, 1.25rem) var(--gov-accordion-m-padding-x, 0.5rem);
 }
-.gov-accordion-item[size=m] .gov-accordion-item__arrow, .gov-accordion-item .gov-accordion-item[size=m] .gov-accordion-item__arrow {
-  width: var(--gov-accordion-m-icon-size, 1rem);
-  height: var(--gov-accordion-m-icon-size, 1rem);
-}
-.gov-accordion-item[size=m] .gov-accordion-item__icon, .gov-accordion-item .gov-accordion-item[size=m] .gov-accordion-item__icon {
-  width: calc(var(--gov-text-2xl-font-size) * 1.2);
-  height: calc(var(--gov-text-2xl-font-size) * 1.2);
-  transform: translateY(var(--gov-accordion-m-icon-position, 0.125rem));
-}
-.gov-accordion-item[size=m] .gov-accordion-item__title, .gov-accordion-item .gov-accordion-item[size=m] .gov-accordion-item__title {
+.gov-accordion-item[size=m] .gov-accordion-item__label * {
   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: var(--gov-accordion-m-headline-gap, 1rem);
 }
-.gov-accordion-item[size=m] .gov-accordion-item__annot, .gov-accordion-item .gov-accordion-item[size=m] .gov-accordion-item__annot {
+.gov-accordion-item[size=m] .gov-accordion-item__arrow {
+  width: var(--gov-accordion-m-icon-size, 1.5rem);
+  height: var(--gov-accordion-m-icon-size, 1.5rem);
+  transform: translateY(var(--gov-accordion-m-arrow-position, 0.25rem));
+}
+.gov-accordion-item[size=m] .gov-accordion-item__icon {
+  width: calc(var(--gov-text-2xl-font-size) * 1.2);
+  height: calc(var(--gov-text-2xl-font-size) * 1.2);
+  transform: translateY(var(--gov-accordion-m-icon-position, 0.25rem));
+}
+.gov-accordion-item[size=m] .gov-accordion-item__annotation {
   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-accordion-item[size=m] .gov-accordion-item__content, .gov-accordion-item .gov-accordion-item[size=m] .gov-accordion-item__content {
+.gov-accordion-item[size=m] .gov-accordion-item__content {
   padding: var(--gov-accordion-m-padding-inner, 1.25rem 0.5rem);
 }
-.gov-accordion-item[size=l] .gov-accordion-item__header, .gov-accordion-item .gov-accordion-item[size=l] .gov-accordion-item__header {
+.gov-accordion-item[size=l] .gov-accordion-item__header {
   gap: var(--gov-accordion-l-headline-gap, 1rem);
   min-height: var(--gov-accordion-l-min-height, 5.5rem);
   padding: var(--gov-accordion-l-padding-y, 1.375rem) var(--gov-accordion-l-padding-x, 0.5rem);
 }
-.gov-accordion-item[size=l] .gov-accordion-item__arrow, .gov-accordion-item .gov-accordion-item[size=l] .gov-accordion-item__arrow {
-  width: var(--gov-accordion-l-icon-size, 1.25rem);
-  height: var(--gov-accordion-l-icon-size, 1.25rem);
-}
-.gov-accordion-item[size=l] .gov-accordion-item__icon, .gov-accordion-item .gov-accordion-item[size=l] .gov-accordion-item__icon {
-  width: calc(var(--gov-text-3xl-font-size) * 1.2);
-  height: calc(var(--gov-text-3xl-font-size) * 1.2);
-  transform: translateY(var(--gov-accordion-l-icon-position, 0.125rem));
-}
-.gov-accordion-item[size=l] .gov-accordion-item__title, .gov-accordion-item .gov-accordion-item[size=l] .gov-accordion-item__title {
+.gov-accordion-item[size=l] .gov-accordion-item__label * {
   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: var(--gov-accordion-l-headline-gap, 1rem);
 }
-.gov-accordion-item[size=l] .gov-accordion-item__annot, .gov-accordion-item .gov-accordion-item[size=l] .gov-accordion-item__annot {
+.gov-accordion-item[size=l] .gov-accordion-item__arrow {
+  width: var(--gov-accordion-l-icon-size, 1.5rem);
+  height: var(--gov-accordion-l-icon-size, 1.5rem);
+  transform: translateY(var(--gov-accordion-l-arrow-position, 0.625rem));
+}
+.gov-accordion-item[size=l] .gov-accordion-item__icon {
+  width: calc(var(--gov-text-3xl-font-size) * 1.2);
+  height: calc(var(--gov-text-3xl-font-size) * 1.2);
+  transform: translateY(var(--gov-accordion-l-icon-position, 0.3125rem));
+}
+.gov-accordion-item[size=l] .gov-accordion-item__annotation {
   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-accordion-item[size=l] .gov-accordion-item__content, .gov-accordion-item .gov-accordion-item[size=l] .gov-accordion-item__content {
+.gov-accordion-item[size=l] .gov-accordion-item__content {
   padding: var(--gov-accordion-l-padding-inner, 1.25rem 0.5rem);
 }
+.gov-accordion-item[variant=primary] .gov-accordion-item::before {
+  background-color: var(--gov-accordion-primary-separator, var(--gov-color-secondary-500));
+}
 .gov-accordion-item[variant=primary] .gov-accordion-item__header {
   background-color: var(--gov-accordion-primary-background, transparent);
   color: var(--gov-accordion-primary-color, var(--gov-color-primary));
 }
-.gov-accordion-item[variant=primary] .gov-accordion-item__header::before {
-  background-color: var(--gov-accordion-primary-separator, 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-accordion-primary-background-hover, var(--gov-color-primary-200));
@@ -459,13 +460,13 @@
     cursor: not-allowed;
   }
 }
+.gov-accordion-item[variant=secondary] .gov-accordion-item::before {
+  background-color: var(--gov-accordion-secondary-separator, var(--gov-color-secondary-500));
+}
 .gov-accordion-item[variant=secondary] .gov-accordion-item__header {
   background-color: var(--gov-accordion-secondary-background, transparent);
   color: var(--gov-accordion-secondary-color, var(--gov-color-secondary));
 }
-.gov-accordion-item[variant=secondary] .gov-accordion-item__header::before {
-  background-color: var(--gov-accordion-secondary-separator, 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-accordion-secondary-background-hover, var(--gov-color-secondary-200));

package/dist/collection/components/gov-accordion/gov-accordion-item.js

@@ -1,39 +1,20 @@
 import { h, Host } from "@stencil/core";
-import { govErrorLog } from "../../helpers/Log/gov.log";
 import { validateProp } from "../../helpers/Validate/props";
-import { AccordionSizes, AccordionItemClass, AccordionVariants, AccordionClass, } from "./constants";
+import { AccordionClass, AccordionItemClass, AccordionSizes, AccordionVariants, } from "./constants";
 import { createID } from "../../utils/string.utils";
-import { booleanString, toBoolAttrIfDefined } from "../../helpers/Dom/template";
-import { govHost } from "../../helpers/Dom/template";
+import { booleanString, govHost, toBoolAttrIfDefined } from "../../helpers/Dom/template";
 export class GovAccordionItem {
   constructor() {
     this.isExpandedState = undefined;
-    this.variant = "primary";
+    this.variant = undefined;
     this.identifier = undefined;
     this.size = undefined;
-    this.label = undefined;
-    this.annotation = undefined;
     this.disabled = false;
     this.isExpanded = false;
-    this.triggerTag = "h3";
-    this.noBorder = false;
     this.h = govHost(this.host);
     this.triggerId = createID("GovAccordionItem");
     this.contentId = createID("GovAccordionContent");
   }
-  validateLabel(newValue) {
-    if (!newValue) {
-      govErrorLog(`[${AccordionItemClass.root}]: Parameter label is required.`);
-    }
-  }
-  validateTriggerTag(newValue) {
-    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "span"];
-    if (newValue) {
-      if (!validTags.includes(newValue)) {
-        govErrorLog(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`);
-      }
-    }
-  }
   validateSize(newValue) {
     validateProp(AccordionSizes, newValue, AccordionItemClass.root);
   }
@@ -42,62 +23,57 @@ export class GovAccordionItem {
   }
   emmitChange() {
     this.govChange.emit({
-      open: this.isExpandedState,
+      open: this.isExpanded,
       component: AccordionItemClass.root,
       ref: this.host,
     });
   }
   componentWillLoad() {
-    this.isExpandedState = this.isExpanded;
     this.getPropsFromParents();
-    this.validateLabel(this.label);
-    this.validateTriggerTag(this.triggerTag);
     this.validateSize(this.size);
     this.validateVariant(this.variant);
   }
   getPropsFromParents() {
     const accordion = this.h.getParent(AccordionClass.root);
     if (accordion) {
-      this.size = accordion.getAttribute('size');
-      this.variant = accordion.getAttribute('variant');
+      this.size = accordion.getAttribute("size");
+      this.variant = accordion.getAttribute("variant");
     }
   }
   render() {
     const triggerId = this.identifier || this.triggerId;
     const contentId = this.contentId;
-    const { isExpandedState, label } = this;
-    const TriggerTag = this.triggerTag;
-    return (h(Host, { class: this.h.classes(AccordionItemClass.root), "no-border": this.noBorder, size: this.size, variant: this.variant, role: "listitem" }, h("button", { id: triggerId, class: AccordionItemClass.header, "aria-expanded": booleanString(isExpandedState), "aria-controls": contentId, disabled: this.disabled, type: 'button', "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
+    return (h(Host, { class: this.h.classes(AccordionItemClass.root), size: this.size, variant: this.variant, role: "listitem" }, h("button", { id: triggerId, class: AccordionItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": contentId, disabled: this.disabled, type: "button", "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
         e.stopPropagation();
         this.toggle().finally();
-      } }, h(TriggerTag, { class: AccordionItemClass.title }, this.h.hasSlot("icon") && (h("span", { class: AccordionItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: AccordionItemClass.name }, h("span", { class: AccordionItemClass.label }, label), this.annotation && h("span", { class: AccordionItemClass.annot }, this.annotation)), this.h.hasSlot("suffix") && (h("span", { class: AccordionItemClass.suffix }, h("slot", { name: "suffix" })))), h("gov-icon", { class: AccordionItemClass.arrow, name: "chevron-down" })), h("div", { class: AccordionItemClass.content, id: contentId, "aria-hidden": booleanString(!isExpandedState), hidden: !isExpandedState, "aria-labelledby": triggerId }, h("slot", null))));
+      } }, this.h.hasSlot("icon") && (h("span", { class: AccordionItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: AccordionItemClass.title }, h("span", { class: AccordionItemClass.label }, h("slot", { name: "label" })), this.h.hasSlot("annotation") && (h("span", { class: AccordionItemClass.annotation }, h("slot", { name: "annotation" })))), this.h.hasSlot("suffix") && (h("span", { class: AccordionItemClass.suffix }, h("slot", { name: "suffix" }))), h("span", { class: AccordionItemClass.arrow }, this.h.hasSlot("toggle-icon") ? (h("slot", { name: "toggle-icon" })) : (h("gov-icon", { name: "chevron-down" })))), h("div", { class: AccordionItemClass.content, id: contentId, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, h("slot", null))));
   }
   /**
    * Opening the accordion
    */
   async open() {
-    this.isExpandedState = true;
+    this.isExpanded = true;
     this.emmitChange();
   }
   /**
    * Closing the accordion
    */
   async close() {
-    this.isExpandedState = false;
+    this.isExpanded = false;
     this.emmitChange();
   }
   /**
    * Accordion switch
    */
   async toggle() {
-    this.isExpandedState = !this.isExpandedState;
+    this.isExpanded = !this.isExpanded;
     this.emmitChange();
   }
   /**
    * Returns the current state of the component
    */
   async currentState() {
-    return this.isExpandedState;
+    return this.isExpanded;
   }
   static get is() { return "gov-accordion-item"; }
   static get originalStyleUrls() {
@@ -114,7 +90,7 @@ export class GovAccordionItem {
     return {
       "variant": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "AccordionVariantType",
           "resolved": "\"custom\" | \"primary\" | \"secondary\"",
@@ -133,8 +109,7 @@ export class GovAccordionItem {
           "text": "Style variation of the button."
         },
         "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"primary\""
+        "reflect": false
       },
       "identifier": {
         "type": "string",
@@ -155,7 +130,7 @@ export class GovAccordionItem {
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "AccordionSizeType",
           "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
@@ -176,40 +151,6 @@ export class GovAccordionItem {
         "attribute": "size",
         "reflect": false
       },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Item name of the accordion"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "annotation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Item annotation of the accordion"
-        },
-        "attribute": "annotation",
-        "reflect": false
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -230,7 +171,7 @@ export class GovAccordionItem {
       },
       "isExpanded": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -245,42 +186,6 @@ export class GovAccordionItem {
         "attribute": "is-expanded",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "triggerTag": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to change the HTML tag in the accordion trigger for correct semantic structure"
-        },
-        "attribute": "trigger-tag",
-        "reflect": false,
-        "defaultValue": "\"h3\""
-      },
-      "noBorder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "To remove the main underline of an item"
-        },
-        "attribute": "no-border",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -388,12 +293,6 @@ export class GovAccordionItem {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "label",
-        "methodName": "validateLabel"
-      }, {
-        "propName": "triggerTag",
-        "methodName": "validateTriggerTag"
-      }, {
         "propName": "size",
         "methodName": "validateSize"
       }, {

package/dist/collection/components/gov-accordion/gov-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-accordion-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAA;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAEN,cAAc,EACd,kBAAkB,EAElB,iBAAiB,EAAE,cAAc,GACjC,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,gBAAgB;EAK5B;;mBAYwD,SAAS;;;;;oBAqB5B,KAAK;sBAIyB,KAAK;sBAIN,IAAI;oBAIP,KAAK;IA5CnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IAC7C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAA;GAChD;EAgDD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,kBAAkB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACzE;EACF,CAAC;EAGD,kBAAkB,CAAC,QAAgB;IAClC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IAC9D,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,kBAAkB,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OAC5E;KACD;EACF,CAAC;EAGD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAA;EAChE,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAA;EACnE,CAAC;EAEO,WAAW;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,eAAe;MAC1B,SAAS,EAAE,kBAAkB,CAAC,IAAI;MAClC,GAAG,EAAE,IAAI,CAAC,IAAI;KACd,CAAC,CAAA;EACH,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAA;IACtC,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAE1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC9B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAEnC,CAAC;EAED,mBAAmB;IAClB,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACvD,IAAG,SAAS,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,YAAY,CAAC,MAAM,CAAsB,CAAA;MAC/D,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,YAAY,CAAC,SAAS,CAAyB,CAAA;KACxE;EACF,CAAC;EAED,MAAM;IACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;IACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;IAChC,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACvC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;IAElC,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAa,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU;MACtI,cACC,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,kBAAkB,CAAC,MAAM,mBACjB,aAAa,CAAC,eAAe,CAAC,mBAC9B,SAAS,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,QAAQ,mBACC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EACjD,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;UACrB,CAAC,CAAC,eAAe,EAAE,CAAA;UACnB,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAA;QACxB,CAAC;QACD,EAAC,UAAU,IAAC,KAAK,EAAE,kBAAkB,CAAC,KAAK;UACzC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,YAAM,KAAK,EAAE,kBAAkB,CAAC,IAAI;YACnC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP;UAED,YAAM,KAAK,EAAE,kBAAkB,CAAC,IAAI;YACnC,YAAM,KAAK,EAAE,kBAAkB,CAAC,KAAK,IAAG,KAAK,CAAQ;YACpD,IAAI,CAAC,UAAU,IAAI,YAAM,KAAK,EAAE,kBAAkB,CAAC,KAAK,IAAG,IAAI,CAAC,UAAU,CAAQ,CAC7E;UAEN,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC5B,YAAM,KAAK,EAAE,kBAAkB,CAAC,MAAM;YACrC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP,CACW;QAEb,gBAAU,KAAK,EAAE,kBAAkB,CAAC,KAAK,EAAE,IAAI,EAAC,cAAc,GAAY,CAClE;MACT,WACC,KAAK,EAAE,kBAAkB,CAAC,OAAO,EACjC,EAAE,EAAE,SAAS,iBACA,aAAa,CAAC,CAAC,eAAe,CAAC,EAC5C,MAAM,EAAE,CAAC,eAAe,qBACP,SAAS;QAC1B,eAAQ,CACH,CACA,CACP,CAAA;EACF,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACT,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,WAAW,EAAE,CAAA;EACnB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;IAC5B,IAAI,CAAC,WAAW,EAAE,CAAA;EACnB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,MAAM;IACX,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAA;IAC5C,IAAI,CAAC,WAAW,EAAE,CAAA;EACnB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;EAC5B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["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 {\n\tAccordionSizeType,\n\tAccordionSizes,\n\tAccordionItemClass,\n\tAccordionVariantType,\n\tAccordionVariants, AccordionClass,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\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\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\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({mutable: true}) variant?: AccordionVariantType = \"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({mutable: true}) size?: AccordionSizeType\n\t/**\n\t * Item name of the accordion\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Item annotation of the accordion\n\t */\n\t@Prop() readonly annotation: 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 HTML tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"trigger-tag\" }) readonly triggerTag: string = \"h3\"\n\t/**\n\t * To remove the main underline of an item\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\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(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpandedState,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.getPropsFromParents()\n\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif(accordion) {\n\t\t\tthis.size = accordion.getAttribute('size') as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute('variant') as AccordionVariantType\n\t\t}\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={this.h.classes(AccordionItemClass.root)} no-border={this.noBorder} size={this.size} variant={this.variant} 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\ttype={'button'}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\t\t\t\t\t<TriggerTag class={AccordionItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.name}>\n\t\t\t\t\t\t\t<span class={AccordionItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation && <span class={AccordionItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TriggerTag>\n\n\t\t\t\t\t<gov-icon class={AccordionItemClass.arrow} name=\"chevron-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"]}
+{"version":3,"file":"gov-accordion-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-accordion/gov-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tAccordionClass,\n\tAccordionItemClass,\n\tAccordionSizes,\n\tAccordionSizeType,\n\tAccordionVariants,\n\tAccordionVariantType,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\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\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\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() variant?: AccordionVariantType\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() size?: AccordionSizeType\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\", mutable: true }) isExpanded = false\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\n\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpanded,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.getPropsFromParents()\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif (accordion) {\n\t\t\tthis.size = accordion.getAttribute(\"size\") as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute(\"variant\") as AccordionVariantType\n\t\t}\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} size={this.size} variant={this.variant} 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(this.isExpanded)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.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\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.title}>\n\t\t\t\t\t\t<span class={AccordionItemClass.label}>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.h.hasSlot(\"annotation\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.annotation}>\n\t\t\t\t\t\t\t\t<slot name=\"annotation\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.arrow}>\n\t\t\t\t\t\t{this.h.hasSlot(\"toggle-icon\") ? (\n\t\t\t\t\t\t\t<slot name=\"toggle-icon\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\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(!this.isExpanded)}\n\t\t\t\t\thidden={!this.isExpanded}\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.isExpanded = 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.isExpanded = 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.isExpanded = !this.isExpanded\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.isExpanded\n\t}\n}\n"]}

package/dist/collection/components/gov-accordion/gov-accordion.css

@@ -170,7 +170,7 @@
  -  Variables - Toast Message
  */
 /*
- -  Variables - Wizzard
+ -  Variables - Wizard
  */
 /*
  -  Variables - Stepper
@@ -232,6 +232,6 @@
   display: block;
   width: 100%;
 }
-.gov-accordion[no-border] .gov-accordion-item__header::before {
+.gov-accordion[no-border] .gov-accordion-item::before {
   background-color: transparent !important;
 }

package/dist/collection/components/gov-accordion/gov-accordion.js

@@ -44,7 +44,7 @@ export class GovAccordion {
     }
   }
   render() {
-    return (h(Host, { class: this.h.classes(AccordionClass.root), size: this.size, variant: this.variant }, h("div", { role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, h("slot", null))));
+    return (h(Host, { class: this.h.classes(AccordionClass.root), size: this.size, variant: this.variant, role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, h("slot", null)));
   }
   /**
    * Validate the WCAG attributes of the component