@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/cjs/index.cjs.js

@@ -1,10 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwLFyR5p.js');
+require('./index-Mjp9Y-Sw.js');
 
-const store = require('./store-9bd20f3c.js');
-require('./index-bf84b124.js');
 
 
-
-exports.configure = store.configure;
+exports.configure = index.configure;

package/dist/cjs/{linkUtils-695da37c.js → linkUtils-onlbgKdI.js}

@@ -1,8 +1,10 @@
 'use strict';
 
+var index = require('./index-DwLFyR5p.js');
+
 const opensInNewTab = (target) => target === '_blank';
-const visuallyHiddenAssistiveText = (lang) => {
-    switch (lang) {
+const visuallyHiddenAssistiveText = () => {
+    switch (index.getLanguage()) {
         case 'fi':
             return 'Avautuu uuteen välilehteen';
         case 'sv':

package/dist/cjs/loader.cjs.js

@@ -1,14 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf84b124.js');
-const appGlobals = require('./app-globals-3a1e7e63.js');
+var index = require('./index-Mjp9Y-Sw.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-input-validity.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-text-input.cjs",[[70,"ds-text-input",{"label":[1],"placeholder":[1],"identifier":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-checkbox.cjs",[[65,"ds-checkbox",{"identifier":[1,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[1,"aria-label"],"value":[32],"validationMessage":[32]}]]],["ds-checkbox-group.cjs",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[4],"disabled":[4],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-link.cjs",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]]], options);
+  return index.bootstrapLazy([["ds-card.cjs",[[1,"ds-card",{"dsVariant":[1,"ds-variant"],"dsHeading":[1,"ds-heading"],"dsHeadingLevel":[2,"ds-heading-level"],"dsDescription":[1,"ds-description"],"dsUrl":[1,"ds-url"],"dsUrlTarget":[1,"ds-url-target"],"dsImageUrl":[1,"ds-image-url"],"dsImageAlt":[1,"ds-image-alt"],"dsEyebrow":[1,"ds-eyebrow"],"dsSubtitle":[1,"ds-subtitle"],"dsShowArrow":[4,"ds-show-arrow"]},[[2,"click","handleClick"],[2,"keydown","handleKeydown"]]]]],["ds-input-validity.cjs",[[0,"ds-input-validity",{"dsText":[1,"ds-text"],"dsType":[1,"ds-type"],"dsValidityRole":[1,"ds-validity-role"],"dsAriaLive":[1,"ds-aria-live"],"dsAriaAtomic":[1,"ds-aria-atomic"],"identifier":[32]}]]],["ds-radio-button.cjs",[[65,"ds-radio-button",{"dsId":[1,"ds-id"],"dsErrorsDisabled":[4,"ds-errors-disabled"],"dsValue":[1,"ds-value"],"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsText":[1,"ds-text"],"dsRequired":[4,"ds-required"],"dsDisabled":[4,"ds-disabled"],"dsChecked":[4,"ds-checked"],"dsErrorText":[1,"ds-error-text"],"focusable":[32],"invalid":[32],"initialChecked":[32],"validationMessage":[32],"dsFocus":[64],"setFocusable":[64],"setChecked":[64]},null,{"dsChecked":["dsCheckedObserver"]}]]],["ds-checkbox.cjs",[[65,"ds-checkbox",{"dsId":[1,"ds-id"],"dsChecked":[1028,"ds-checked"],"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsText":[1,"ds-text"],"dsIndeterminate":[4,"ds-indeterminate"],"dsDisabled":[4,"ds-disabled"],"dsErrorText":[1,"ds-error-text"],"dsErrorsDisabled":[4,"ds-errors-disabled"],"dsRequired":[4,"ds-required"],"dsOptional":[4,"ds-optional"],"dsOptionalText":[1,"ds-optional-text"],"dsAriaLabel":[1,"ds-aria-label"],"invalid":[32],"initialChecked":[32],"validationMessage":[32]},null,{"dsChecked":["dsCheckedObserver"]}]]],["ds-checkbox-group.cjs",[[65,"ds-checkbox-group",{"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsDirection":[1,"ds-direction"],"dsErrorText":[1,"ds-error-text"],"dsText":[1,"ds-text"],"dsChecked":[4,"ds-checked"],"dsDisabled":[4,"ds-disabled"],"dsRequired":[4,"ds-required"],"dsAllRequired":[4,"ds-all-required"],"dsOptional":[4,"ds-optional"],"dsOptionalText":[1,"ds-optional-text"],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"showInternalsValidationMessage":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"input","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"dsDisabled":["watchCheckboxDisabledChange"],"dsChecked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"dsErrorText":["errorTextObserver"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-spinner.cjs",[[1,"ds-spinner",{"dsText":[1,"ds-text"],"dsSize":[1,"ds-size"],"dsSpinnerTextPosition":[1,"ds-spinner-text-position"],"dsSpinnerColor":[1,"ds-spinner-color"],"dsUseRoleAlert":[4,"ds-use-role-alert"],"dsUseAriaLive":[4,"ds-use-aria-live"],"dsHiddenAssistiveText":[1,"ds-hidden-assistive-text"]}]]],["ds-icon.cjs",[[1,"ds-icon",{"dsName":[1,"ds-name"],"dsColour":[1,"ds-colour"],"dsSize":[1,"ds-size"],"dsTitle":[1,"ds-title"],"dsRole":[1,"ds-role"],"dsHidden":[4,"ds-hidden"],"message":[32]}]]],["ds-button.cjs",[[6,"ds-button",{"dsValue":[1,"ds-value"],"dsVariant":[1,"ds-variant"],"dsColour":[1,"ds-colour"],"dsSize":[1,"ds-size"],"dsIcon":[1,"ds-icon"],"dsIconPosition":[1,"ds-icon-position"],"dsType":[1,"ds-type"],"dsDisabled":[4,"ds-disabled"],"dsIsLoading":[4,"ds-is-loading"],"dsUseSpinner":[4,"ds-use-spinner"],"dsSpinnerHiddenText":[1,"ds-spinner-hidden-text"],"dsFullWidth":[4,"ds-full-width"],"dsAriaDisabled":[1,"ds-aria-disabled"],"dsFocus":[64]}]]],["ds-text-input.cjs",[[70,"ds-text-input",{"dsLabel":[1,"ds-label"],"dsPlaceholder":[1,"ds-placeholder"],"dsId":[1,"ds-id"],"dsName":[1,"ds-name"],"dsDisabled":[4,"ds-disabled"],"dsOptional":[4,"ds-optional"],"dsRequired":[4,"ds-required"],"dsReadonly":[4,"ds-readonly"],"dsValue":[1,"ds-value"],"dsMin":[2,"ds-min"],"dsMax":[2,"ds-max"],"dsMaxLength":[2,"ds-max-length"],"dsPattern":[1,"ds-pattern"],"dsAutocomplete":[1,"ds-autocomplete"],"dsOptionalText":[1,"ds-optional-text"],"dsErrorText":[1,"ds-error-text"],"dsSuccessText":[1,"ds-success-text"],"dsAssistiveText":[1,"ds-assistive-text"],"dsActionButtonAriaLabel":[1,"ds-action-button-aria-label"],"dsHiddenAssistiveText":[1,"ds-hidden-assistive-text"],"dsPrefixText":[1,"ds-prefix-text"],"dsSuffixText":[1,"ds-suffix-text"],"dsIcon":[1,"ds-icon"],"dsType":[1,"ds-type"],"dsAriaLabel":[1,"ds-aria-label"],"dsAriaLabelledby":[1,"ds-aria-labelledby"],"dsAriaDescribedby":[1,"ds-aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]},null,{"value":["valueObserver"]}]]],["ds-accordion.cjs",[[1,"ds-accordion",{"dsVariant":[1,"ds-variant"],"dsBorderAligned":[4,"ds-border-aligned"],"dsOpenByDefault":[4,"ds-open-by-default"],"dsAccordionId":[1,"ds-accordion-id"],"dsHeadingLevel":[2,"ds-heading-level"],"dsUseCloseButton":[4,"ds-use-close-button"],"dsCloseButtonLabel":[1,"ds-close-button-label"],"dsHideTopBorder":[4,"ds-hide-top-border"],"dsHideBottomBorder":[4,"ds-hide-bottom-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}]]],["ds-link.cjs",[[1,"ds-link",{"dsText":[1,"ds-text"],"dsSize":[1,"ds-size"],"dsVariant":[1,"ds-variant"],"dsWeight":[1,"ds-weight"],"dsIcon":[1025,"ds-icon"],"dsIconPosition":[1025,"ds-icon-position"],"dsIconTitle":[1,"ds-icon-title"],"dsIconHidden":[4,"ds-icon-hidden"],"dsHref":[1,"ds-href"],"dsTarget":[1,"ds-target"],"dsDownload":[4,"ds-download"],"dsAriaLabel":[1,"ds-aria-label"],"dsColour":[1,"ds-colour"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"dsText":[1,"ds-text"],"dsIconPosition":[1,"ds-icon-position"],"dsHref":[1,"ds-href"],"dsTarget":[1,"ds-target"],"dsAriaLabel":[1,"ds-aria-label"]}]]],["ds-radio-button-group.cjs",[[65,"ds-radio-button-group",{"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsValue":[1025,"ds-value"],"dsDirection":[1,"ds-direction"],"dsErrorText":[1,"ds-error-text"],"dsRequired":[4,"ds-required"],"showInternalsValidationMessage":[32],"getValue":[64]},[[0,"dsRadioButtonChecked","onInputChange"],[4,"keydown","onKeyDown"]],{"dsErrorText":["errorTextObserver"],"dsValue":["dsValueObserver"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/utils-BjZTECpy.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const formatAs = (value, suffix) => value.endsWith(suffix) ? value : `${value}${suffix}`;
+const formatAsPx = (value) => formatAs(value, 'px');
+const slugifyText = (text) => {
+    return text
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/[^\w-]+/g, '')
+        .replace(/--+/g, '-')
+        .replace(/^-+/, '')
+        .replace(/-+$/, '');
+};
+const remToPx = (remString) => {
+    const rootFontSize = 16;
+    const rem = parseFloat(remString);
+    return formatAsPx(`${rem * rootFontSize}`);
+};
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+
+exports.idGenerator = idGenerator;
+exports.remToPx = remToPx;
+exports.slugifyText = slugifyText;

package/dist/collection/accessibility/stories/naming.stories.js

@@ -7,14 +7,14 @@ export default meta;
 const howNamingWorksDOM = html `
   <div class="ds-sb-how-naming-works">
     <div>
-      <ds-button value="Continue"></ds-button>
+      <ds-button ds-value="Continue"></ds-button>
       <!The button gets it's accessible name from its text content>
     </div>
 
-    <ds-text-input type="text" label="First name"></ds-text-input>
+    <ds-text-input ds-type="text" ds-label="First name"></ds-text-input>
     <!The text input gets its accessible name from the label/for structure>
 
-    <ds-link href="#" text="Apply to University of Helsinki"></ds-link>
+    <ds-link ds-href="#" ds-text="Apply to University of Helsinki"></ds-link>
     <!The link gets it's accessible name from its text content>
   </div>
 `;

package/dist/collection/collection-manifest.json

@@ -1,21 +1,96 @@
 {
   "entries": [
-    "components/01-base-components/ds-checkbox/ds-checkbox.js",
     "components/01-base-components/ds-checkbox-group/ds-checkbox-group.js",
     "components/01-base-components/ds-text-input/ds-text-input.js",
     "components/01-base-components/ds-accordion/ds-accordion.js",
     "components/01-base-components/ds-button/ds-button.js",
+    "components/01-base-components/ds-card/ds-card.js",
+    "components/01-base-components/ds-checkbox/ds-checkbox.js",
     "components/01-base-components/ds-icon/ds-icon.js",
     "components/01-base-components/ds-input-validity/ds-input-validity.js",
     "components/01-base-components/ds-link/ds-link.js",
     "components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js",
+    "components/01-base-components/ds-radio-button/ds-radio-button.js",
+    "components/01-base-components/ds-radio-button-group/ds-radio-button-group.js",
+    "components/01-base-components/ds-spinner/ds-spinner.js",
     "components/01-base-components/ds-visually-hidden/ds-visually-hidden.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.27.2",
+    "version": "4.30.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],
-  "bundles": []
+  "bundles": [
+    {
+      "components": [
+        "ds-accordion"
+      ]
+    },
+    {
+      "components": [
+        "ds-button"
+      ]
+    },
+    {
+      "components": [
+        "ds-card"
+      ]
+    },
+    {
+      "components": [
+        "ds-checkbox"
+      ]
+    },
+    {
+      "components": [
+        "ds-checkbox-group"
+      ]
+    },
+    {
+      "components": [
+        "ds-icon"
+      ]
+    },
+    {
+      "components": [
+        "ds-input-validity"
+      ]
+    },
+    {
+      "components": [
+        "ds-link"
+      ]
+    },
+    {
+      "components": [
+        "ds-link-with-arrow"
+      ]
+    },
+    {
+      "components": [
+        "ds-radio-button"
+      ]
+    },
+    {
+      "components": [
+        "ds-radio-button-group"
+      ]
+    },
+    {
+      "components": [
+        "ds-spinner"
+      ]
+    },
+    {
+      "components": [
+        "ds-text-input"
+      ]
+    },
+    {
+      "components": [
+        "ds-visually-hidden"
+      ]
+    }
+  ]
 }

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css

@@ -7,9 +7,9 @@
 }
 
 .ds-accordion__open-button {
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
   outline: var(--ds-borderWidth-thick) solid transparent;
-  fill: var(--ds-textColor-default);
+  fill: var(--ds-palette-black-95);
   position: relative;
   all: unset;
   align-items: flex-start;
@@ -21,11 +21,9 @@
   width: 100%;
 }
 .ds-accordion__open-button:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before, .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
   content: "";
@@ -44,10 +42,10 @@
   cursor: pointer;
 }
 .ds-accordion__open-button:hover, .ds-accordion__open-button:hover::before, .ds-accordion__open-button:hover::after {
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
+  background: var(--ds-overlay-black-10);
 }
 .ds-accordion__open-button:active, .ds-accordion__open-button:active::before, .ds-accordion__open-button:active::after {
-  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
+  background: var(--ds-overlay-black-15);
 }
 .ds-accordion__open-button:focus-visible {
   z-index: 1;
@@ -73,13 +71,13 @@
   width: calc(100% - var(--ds-spacing-large));
 }
 :host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border) {
-  border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
+  border-top: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
 }
 :host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible {
   border-top-color: transparent;
 }
-.ds-accordion__open-button[aria-expanded=false] {
-  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
+.ds-accordion__open-button:not(.ds-accordion--hide-bottom-border)[aria-expanded=false] {
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
 }
 
 .ds-accordion__panel--border-aligned {
@@ -92,7 +90,7 @@
   position: absolute;
   bottom: -1px;
   height: 1px;
-  left: 0px;
+  left: 0;
   background: var(--ds-palette-white);
   width: var(--ds-spacing-small);
 }
@@ -102,22 +100,25 @@
   position: absolute;
   bottom: -1px;
   height: 1px;
-  right: 0px;
+  right: 0;
   background: var(--ds-palette-white);
   width: var(--ds-spacing-small);
 }
 .ds-accordion__panel--expanded {
   display: block;
-  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
   padding-inline: var(--ds-spacing-small);
 }
+.ds-accordion__panel--expanded.ds-accordion__panel--hide-bottom-border {
+  border-bottom: 0;
+}
 
 ::slotted([slot=header]) {
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
 }
 
 .ds-accordion__content {
-  color: var(--ds-textColor-default, #1A1A1A);
+  color: var(--ds-palette-black-95);
   font-family: var(--ds-fontFamily-body);
   padding-block: var(--ds-spacing-small);
 }

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -1,20 +1,22 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
 export class DsAccordion {
-    variant = 'default';
-    borderAligned = false;
-    openByDefault = false;
-    accordionId = 'dsaccordion';
-    headingLevel = 2;
-    useCloseButton = false;
-    closeButtonLabel = 'Close';
-    hideTopBorder = false;
+    dsVariant = 'default';
+    dsBorderAligned = false;
+    dsOpenByDefault = false;
+    dsAccordionId = 'dsaccordion';
+    dsHeadingLevel = 2;
+    dsUseCloseButton = false;
+    dsCloseButtonLabel = 'Close';
+    dsHideTopBorder = false;
+    dsHideBottomBorder = false;
     isExpanded = false;
     host;
+    dsToggle;
     headerButtonRef;
     shouldMoveFocus = false;
     componentWillLoad() {
-        if (this.openByDefault) {
+        if (this.dsOpenByDefault) {
             this.isExpanded = true;
         }
     }
@@ -23,6 +25,7 @@ export class DsAccordion {
             this.headerButtonRef.focus();
             this.shouldMoveFocus = false;
         }
+        this.dsToggle.emit(isExpanded);
     }
     handleClick = (event) => {
         const isCloseButton = event.target.closest('.ds-accordion__close-button');
@@ -32,31 +35,31 @@ export class DsAccordion {
     handleKeyDown = (event) => {
         switch (event.key) {
             case 'Enter':
-            case ' ':
+            case ' ': {
                 event.preventDefault();
                 const isCloseButton = event.target.closest('.ds-accordion__close-button');
                 this.shouldMoveFocus = isCloseButton ? true : false;
                 this.isExpanded = !this.isExpanded;
                 break;
+            }
         }
     };
     render() {
-        const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
-        const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        return (h("div", { key: 'aeaa883c8500bda65c480ccea434cbeadc53ce69', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
-                'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: 'a7947fd7784084bcec3a02f2219fa2494366d590', class: "ds-accordion__item" }, h("div", { key: '20532a2d3f109e38341d496ffee0d2d02cfb26f4', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '40513d75b15c4701498b83c9a6afbcd7a322c73c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
-                'ds-accordion--border-aligned': this.borderAligned,
-                'ds-accordion--hide-top-border': this.hideTopBorder
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '883d1cbf50b3cfb0beacd62570a1077aa8bd7a04', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
-            h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a8ddede4cec5ab873fb69ab9963e7f143613fe0f', name: "header" }))), h("div", { key: '76cf35006795136597efd9c424237ac1c48bbc74', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
-                'ds-accordion__panel--border-aligned': this.borderAligned,
-                'ds-accordion__panel--expanded': this.isExpanded
-            }), hidden: !this.isExpanded }, h("div", { key: '6236db88bc5735ec4e5618a63e303d997335e1be', class: "ds-accordion__content" }, h("slot", { key: '4d206253394878b4fba531cea6870aaaa3e63821', name: "content" })), this.useCloseButton &&
-            h("ds-button", { key: 'e5c0f76a802e6046f2872509a4944b72aa376bf1', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
-                    'ds-accordion--border-aligned': this.borderAligned
-                }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
+        const iconSize = this.dsVariant === 'compact' ? '1.5rem' : '2rem';
+        const buttonSize = this.dsVariant === 'compact' ? 'small' : 'medium';
+        return (h("div", { key: '3f11aeec4a4941f0dcce0380b05a515c3b9c89e6', class: classNames('ds-accordion', `ds-accordion--${this.dsVariant}`, {
+                'ds-accordion--border-aligned': this.dsBorderAligned,
+            }) }, h("div", { key: '6a8ca7a66d2f43c970b359972cc5e2830252edb1', class: "ds-accordion__item" }, h("div", { key: '378a67aa57baf72f491370e2e357828d516832d2', role: "heading", "aria-level": this.dsHeadingLevel, class: "ds-accordion__title" }, h("button", { key: '3d495833ea4e1b31ac730947268850d7ba04a15d', class: classNames('ds-accordion__open-button', `ds-accordion--${this.dsVariant}`, {
+                'ds-accordion--border-aligned': this.dsBorderAligned,
+                'ds-accordion--hide-top-border': this.dsHideTopBorder,
+                'ds-accordion--hide-bottom-border': this.dsHideBottomBorder,
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsAccordionId}-panel`, id: this.dsAccordionId, ref: el => (this.headerButtonRef = el) }, h("span", { key: 'e720c9480de197083d4c3c956c6129caeb01a033', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ? h("ds-icon", { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_up" }) : h("ds-icon", { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_down" })), h("slot", { key: 'b406436f9de56d89e343150a19c0d133e8b9e2da', name: "header" }))), h("div", { key: 'a51a019dbc6e9401aaf1552edc127226cecb0b7c', id: `${this.dsAccordionId}-panel`, role: "region", "aria-labelledby": this.dsAccordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.dsVariant}`, {
+                'ds-accordion__panel--border-aligned': this.dsBorderAligned,
+                'ds-accordion__panel--expanded': this.isExpanded,
+                'ds-accordion__panel--hide-bottom-border': this.dsHideBottomBorder,
+            }), hidden: !this.isExpanded }, h("div", { key: 'a7d46ee04bbe43fbfdea6ac0ec3a760aeb17ba64', class: "ds-accordion__content" }, h("slot", { key: '00e8c609cc32ed726226547af724295884e40bb7', name: "content" })), this.dsUseCloseButton && (h("ds-button", { key: '7b03bc58471493bc89501753e35238b770eaf563', "aria-labelledby": `${this.dsAccordionId}-close-button ${this.dsAccordionId}`, id: `${this.dsAccordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.dsVariant}`, {
+                'ds-accordion--border-aligned': this.dsBorderAligned,
+            }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsValue: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -72,8 +75,9 @@ export class DsAccordion {
     }
     static get properties() {
         return {
-            "variant": {
+            "dsVariant": {
                 "type": "string",
+                "attribute": "ds-variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'compact'",
@@ -84,16 +88,16 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Variant of the accordion"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
-            "borderAligned": {
+            "dsBorderAligned": {
                 "type": "boolean",
+                "attribute": "ds-border-aligned",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -104,16 +108,16 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Aligns the border to the position where accordion content starts"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border-aligned",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "openByDefault": {
+            "dsOpenByDefault": {
                 "type": "boolean",
+                "attribute": "ds-open-by-default",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -124,16 +128,16 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Displays the accordion as opened when loaded"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-by-default",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "accordionId": {
+            "dsAccordionId": {
                 "type": "string",
+                "attribute": "ds-accordion-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -144,16 +148,16 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Id of the accordion button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accordion-id",
                 "reflect": false,
                 "defaultValue": "'dsaccordion'"
             },
-            "headingLevel": {
+            "dsHeadingLevel": {
                 "type": "number",
+                "attribute": "ds-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -164,16 +168,16 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Heading level to be used for the accordion"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "2"
             },
-            "useCloseButton": {
+            "dsUseCloseButton": {
                 "type": "boolean",
+                "attribute": "ds-use-close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -184,16 +188,16 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Displays a close button at the end of an opened accordion"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "use-close-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "closeButtonLabel": {
+            "dsCloseButtonLabel": {
                 "type": "string",
+                "attribute": "ds-close-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -204,16 +208,36 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text of the close button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button-label",
                 "reflect": false,
                 "defaultValue": "'Close'"
             },
-            "hideTopBorder": {
+            "dsHideTopBorder": {
+                "type": "boolean",
+                "attribute": "ds-hide-top-border",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the top border"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsHideBottomBorder": {
                 "type": "boolean",
+                "attribute": "ds-hide-bottom-border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -224,11 +248,10 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Removes the bottom border"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-top-border",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -239,6 +262,24 @@ export class DsAccordion {
             "isExpanded": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "dsToggle",
+                "name": "dsToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the accordion is expanded or closed."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{