@govtechsg/sgds-web-component 2.1.0 → 2.1.1

package/react/base/link-element.js

@@ -0,0 +1,53 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import SgdsElement from './sgds-element.js';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+/**
+ * @slot default - Default slot for SgdsMainnavItem anchor element
+ */
+class LinkElement extends SgdsElement {
+    constructor() {
+        // static styles = [...SgdsElement.styles];
+        super(...arguments);
+        /** when true, sets the active stylings of .nav-link */
+        this.active = false;
+        /** Disables the SgdsMainnavItem */
+        this.disabled = false;
+        /** Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute */
+        this.target = "_self";
+    }
+    render() {
+        return html `
+      <a
+        href="${ifDefined(this.href)}"
+        class="nav-link ${classMap({
+            disabled: this.disabled,
+            active: this.active
+        })} "
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        target=${this.target}
+        ><slot></slot
+      ></a>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], LinkElement.prototype, "active", void 0);
+__decorate([
+    property({ type: String })
+], LinkElement.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LinkElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LinkElement.prototype, "target", void 0);
+
+export { LinkElement as default };
+//# sourceMappingURL=link-element.js.map

package/react/base/link-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-element.js","sources":["../../../src/base/link-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"./sgds-element\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\n/**\n * @slot default - Default slot for SgdsMainnavItem anchor element\n */\n\nexport default class LinkElement extends SgdsElement {\n  // static styles = [...SgdsElement.styles];\n\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Href attribute for anchor element in SgdsMainnavItem */\n  @property({ type: String })\n  href: string;\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute */\n  @property({ type: String, reflect: true })\n  target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\" = \"_self\";\n\n  render() {\n    return html`\n      <a\n        href=\"${ifDefined(this.href)}\"\n        class=\"nav-link ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        target=${this.target}\n        ><slot></slot\n      ></a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAMA;;AAEG;AAEkB,MAAA,WAAY,SAAQ,WAAW,CAAA;AAApD,IAAA,WAAA,GAAA;;;;QAKE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAOf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAM,CAAA,MAAA,GAA4C,OAAO,CAAC;KAiB3D;IAfC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACV,wBAAA,EAAA,QAAQ,CAAC;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACU,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACvC,eAAA,EAAA,IAAI,CAAC,MAAM,CAAA;;;KAGvB,CAAC;KACH;AACF,CAAA;AA5BC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACd,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACgB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/base/sgds-element.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-element.cjs.js","sources":["../../../src/base/sgds-element.ts"],"sourcesContent":["import { LitElement, type CSSResult } from \"lit\";\nimport style from \"./sgds-element.css\";\n/**\n * @cssprop --sgds-{stateColor} - State colors in hexadecimal value\n * @cssprop --sgds-{stateColor}-rgb - State colors in rgb value\n * @cssprop --sgds-{stateColor}-{weights} - State colors with different weightage in hexadecimal value\n * @cssprop --sgds-gray-{weights} - State colors with different weightage in hexadecimal value\n * @cssprop --overlay-background-color - The drawer and modal component overlay background color\n * @cssprop --zindex-modal - The drawer and modal component z-index value\n */\n\nexport default class SgdsElement extends LitElement {\n  static styles: CSSResult[] = [style];\n  /** Emits a custom event with more convenient defaults. */\n  emit(name: string, options?: CustomEventInit) {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event;\n  }\n}\n"],"names":["LitElement","style"],"mappings":";;;;;;;;AAEA;;;;;;;AAOG;AAEH,MAAqB,WAAY,SAAQA,cAAU,CAAA;;IAGjD,IAAI,CAAC,IAAY,EAAE,OAAyB,EAAA;QAC1C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,IAAI,EAChC,MAAA,CAAA,MAAA,CAAA,EAAA,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,IAAI,EACd,MAAM,EAAE,EAAE,EAAA,EACP,OAAO,CAAA,CACV,CAAC;AAEH,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1B,QAAA,OAAO,KAAK,CAAC;KACd;;AAdM,WAAA,CAAA,MAAM,GAAgB,CAACC,sBAAK,CAAC;;;;"}

package/react/base/sgds-element.js

@@ -0,0 +1,24 @@
+'use client';
+import { LitElement } from 'lit';
+import css_248z from './sgds-element2.js';
+
+/**
+ * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
+ * @cssprop --sgds-{stateColor}-rgb - State colors in rgb value
+ * @cssprop --sgds-{stateColor}-{weights} - State colors with different weightage in hexadecimal value
+ * @cssprop --sgds-gray-{weights} - State colors with different weightage in hexadecimal value
+ * @cssprop --overlay-background-color - The drawer and modal component overlay background color
+ * @cssprop --zindex-modal - The drawer and modal component z-index value
+ */
+class SgdsElement extends LitElement {
+    /** Emits a custom event with more convenient defaults. */
+    emit(name, options) {
+        const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));
+        this.dispatchEvent(event);
+        return event;
+    }
+}
+SgdsElement.styles = [css_248z];
+
+export { SgdsElement as default };
+//# sourceMappingURL=sgds-element.js.map

package/react/base/sgds-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-element.js","sources":["../../../src/base/sgds-element.ts"],"sourcesContent":["import { LitElement, type CSSResult } from \"lit\";\nimport style from \"./sgds-element.css\";\n/**\n * @cssprop --sgds-{stateColor} - State colors in hexadecimal value\n * @cssprop --sgds-{stateColor}-rgb - State colors in rgb value\n * @cssprop --sgds-{stateColor}-{weights} - State colors with different weightage in hexadecimal value\n * @cssprop --sgds-gray-{weights} - State colors with different weightage in hexadecimal value\n * @cssprop --overlay-background-color - The drawer and modal component overlay background color\n * @cssprop --zindex-modal - The drawer and modal component z-index value\n */\n\nexport default class SgdsElement extends LitElement {\n  static styles: CSSResult[] = [style];\n  /** Emits a custom event with more convenient defaults. */\n  emit(name: string, options?: CustomEventInit) {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event;\n  }\n}\n"],"names":["style"],"mappings":";;;;AAEA;;;;;;;AAOG;AAEH,MAAqB,WAAY,SAAQ,UAAU,CAAA;;IAGjD,IAAI,CAAC,IAAY,EAAE,OAAyB,EAAA;QAC1C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,IAAI,EAChC,MAAA,CAAA,MAAA,CAAA,EAAA,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,IAAI,EACd,MAAM,EAAE,EAAE,EAAA,EACP,OAAO,CAAA,CACV,CAAC;AAEH,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1B,QAAA,OAAO,KAAK,CAAC;KACd;;AAdM,WAAA,CAAA,MAAM,GAAgB,CAACA,QAAK,CAAC;;;;"}

package/react/base/sgds-element2.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--sgds-body-bg);color:var(--sgds-body-color);font-family:var(--sgds-body-font-family);font-size:var(--sgds-body-font-size);font-weight:var(--sgds-body-font-weight);line-height:var(--sgds-body-line-height);margin:0;text-align:var(--sgds-body-text-align)}:host *,:host :after,:host :before{box-sizing:border-box}:host :disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:host :root{scroll-behavior:smooth}}:host ::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}:host ::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}:host ::slotted(a:hover){color:var(--sgds-link-hover-color)}:host ::slotted(svg){vertical-align:middle}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sgds-element2.js.map

package/react/base/sgds-element2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-element2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/breadcrumb/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsBreadcrumb = require('../../components/Breadcrumb/sgds-breadcrumb.cjs.js');
+var sgdsBreadcrumb = require('../components/Breadcrumb/sgds-breadcrumb.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/breadcrumb/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsBreadcrumb } from '../../components/Breadcrumb/sgds-breadcrumb.js';
+import { SgdsBreadcrumb } from '../components/Breadcrumb/sgds-breadcrumb.js';
 
 customElements.define("sgds-breadcrumb", SgdsBreadcrumb);
 var index = createComponent({

package/react/breadcrumb-item/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsBreadcrumbItem = require('../../components/Breadcrumb/sgds-breadcrumb-item.cjs.js');
+var sgdsBreadcrumbItem = require('../components/Breadcrumb/sgds-breadcrumb-item.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/breadcrumb-item/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsBreadcrumbItem } from '../../components/Breadcrumb/sgds-breadcrumb-item.js';
+import { SgdsBreadcrumbItem } from '../components/Breadcrumb/sgds-breadcrumb-item.js';
 
 customElements.define("sgds-breadcrumb-item", SgdsBreadcrumbItem);
 var index = createComponent({

package/react/button/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsButton = require('../../components/Button/sgds-button.cjs.js');
+var sgdsButton = require('../components/Button/sgds-button.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/button/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsButton } from '../../components/Button/sgds-button.js';
+import { SgdsButton } from '../components/Button/sgds-button.js';
 
 customElements.define("sgds-button", SgdsButton);
 var index = createComponent({

package/react/card/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsCard = require('../../components/Card/sgds-card.cjs.js');
+var sgdsCard = require('../components/Card/sgds-card.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/card/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsCard } from '../../components/Card/sgds-card.js';
+import { SgdsCard } from '../components/Card/sgds-card.js';
 
 customElements.define("sgds-card", SgdsCard);
 var index = createComponent({

package/react/checkbox/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsCheckbox = require('../../components/Checkbox/sgds-checkbox.cjs.js');
+var sgdsCheckbox = require('../components/Checkbox/sgds-checkbox.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/checkbox/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsCheckbox } from '../../components/Checkbox/sgds-checkbox.js';
+import { SgdsCheckbox } from '../components/Checkbox/sgds-checkbox.js';
 
 customElements.define("sgds-checkbox", SgdsCheckbox);
 var index = createComponent({

package/react/combo-box/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsComboBox = require('../../components/ComboBox/sgds-combo-box.cjs.js');
+var sgdsComboBox = require('../components/ComboBox/sgds-combo-box.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/combo-box/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsComboBox } from '../../components/ComboBox/sgds-combo-box.js';
+import { SgdsComboBox } from '../components/ComboBox/sgds-combo-box.js';
 
 customElements.define("sgds-combo-box", SgdsComboBox);
 var index = createComponent({

package/react/components/Accordion/accordion-item.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--accordion-item-padding-y:var(--sgds-spacer-3);--accordion-item-padding-x:var(--sgds-spacer-4);--accordion-item-border-radius:var(--sgds-border-radius,0.3125rem);--accordion-item-font-weight:700;--accordion-item-line-height:var(--sgds-body-line-height)}.accordion-btn{align-items:center;background-color:var(--sgds-body-bg);border:0;border-radius:0;color:var(--sgds-body-color);display:flex;font-size:1rem;overflow-anchor:none;padding:var(--accordion-item-padding-y) var(--accordion-item-padding-x);position:relative;text-align:left;width:100%;slot[name=accordion-caret]::slotted(*),svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}}.accordion-btn.collapsed{border-radius:var(--sgds-border-radius)}@media (prefers-reduced-motion:reduce){.accordion-btn{transition:none}}.accordion-btn:not(.collapsed){background-color:none;color:var(--accordion-active-color);slot[name=accordion-caret]::slotted(*),svg.bi-chevron-down{transform:rotate(-180deg)}}@media (prefers-reduced-motion:reduce){.accordion-btn:after{transition:none}}.accordion-btn:hover{z-index:2}.accordion-btn:focus{box-shadow:0 0 0 var(--sgds-focus-width) var(var(--sgds-info-300));outline:0;z-index:3}.accordion-item{background-color:var(--sgds-body-bg);border:var(--sgds-border-width) solid var(--sgds-border-color);border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius);color:var(var(--sgds-body-color))}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-btn{line-height:var(--accordion-item-line-height)}.accordion-btn:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0;.accordion-btn{border-top-left-radius:var(--sgds-border-radius);border-top-right-radius:var(--sgds-border-radius)}}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0;.accordion-btn{border-top-left-radius:0;border-top-right-radius:0}}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0;.accordion-btn.collapsed{border-bottom-left-radius:var(--sgds-border-radius);border-bottom-right-radius:var(--sgds-border-radius)}}.hidden{display:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=accordion-item.js.map

package/react/components/Accordion/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Accordion/accordion.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--accordion-active-color:var(--sgds-primary)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=accordion.js.map

package/react/components/Accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Accordion/sgds-accordion-item.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-accordion-item.cjs.js","sources":["../../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport accordionItemStyle from \"./accordion-item.css\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n * @slot accordion-caret - The caret icon of accordion-item.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-btn when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionItemStyle];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-btn\") header: HTMLElement;\n  /** @internal */\n  @query(\".accordion-body\") body: HTMLElement;\n\n  /** Controls whether accordion-item is open or close */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  firstUpdated() {\n    if (!this.open) this.body.classList.add(\"hidden\");\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.classList.remove(\"hidden\");\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      const animationDuration = options.duration as number;\n      // Workaround to fix GSIB delay after animateTo.\n      //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n      setTimeout(() => {\n        this.body.classList.add(\"hidden\");\n      }, animationDuration - 20);\n\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"sgds accordion-item\": true\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-btn\": true,\n            collapsed: !this.open\n          })}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=\"0\"\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n          <slot name=\"accordion-caret\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-down\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot\n            id=\"content\"\n            name=\"accordion-content\"\n            class=\"accordion-content\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          ></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["SgdsElement","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","accordionItemStyle","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Accordion/sgds-accordion-item.js

@@ -0,0 +1,204 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
+import { waitForEvent } from '../../utils/event.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './accordion-item.js';
+
+/**
+ *
+ * @event sgds-show - Emitted on show.
+ * @event sgds-after-show - Emitted on show after animation has completed.
+ * @event sgds-hide - Emitted on hide.
+ * @event sgds-after-hide - Emitted on hide after animation has completed.
+ *
+ * @csspart base - The accordion-item base wrapper.
+ * @csspart header - The accordion-item button header.
+ * @csspart content - The accordion-item content.
+ *
+ * @slot accordion-header - The accordion-item button header slot.
+ * @slot accordion-content - The accordion-item content slot.
+ * @slot accordion-caret - The caret icon of accordion-item.
+ *
+ * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content
+ * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content
+ * @cssprop --accordion-item-border-radius - The border radius of the accordion item
+ * @cssprop --accordion-item-font-weight - The font weight of accordion-btn when it is not collapsed
+ * @cssprop --accordion-item-line-height - The line height of accordion
+ */
+class SgdsAccordionItem extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Controls whether accordion-item is open or close */
+        this.open = false;
+    }
+    firstUpdated() {
+        if (!this.open)
+            this.body.classList.add("hidden");
+    }
+    handleSummaryClick() {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+        this.header.focus();
+    }
+    handleSummaryKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.hide();
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            this.show();
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            // Show
+            const sgdsShow = this.emit("sgds-show", { cancelable: true });
+            if (sgdsShow.defaultPrevented) {
+                this.open = false;
+                return;
+            }
+            await stopAnimations(this.body);
+            this.body.classList.remove("hidden");
+            const { keyframes, options } = getAnimation(this, "accordion.show");
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.emit("sgds-after-show");
+        }
+        else {
+            // Hide
+            const slHide = this.emit("sgds-hide", { cancelable: true });
+            if (slHide.defaultPrevented) {
+                this.open = true;
+                return;
+            }
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, "accordion.hide");
+            const animationDuration = options.duration;
+            // Workaround to fix GSIB delay after animateTo.
+            //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
+            setTimeout(() => {
+                this.body.classList.add("hidden");
+            }, animationDuration - 20);
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.emit("sgds-after-hide");
+        }
+    }
+    /** Shows the accordion. */
+    async show() {
+        if (this.open) {
+            return;
+        }
+        this.open = true;
+        return waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the accordion */
+    async hide() {
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+        return waitForEvent(this, "sgds-after-hide");
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            "sgds accordion-item": true
+        })}
+      >
+        <button
+          class=${classMap({
+            "accordion-btn": true,
+            collapsed: !this.open
+        })}
+          part="header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          tabindex="0"
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <slot name="accordion-header"></slot>
+          <slot name="accordion-caret">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-chevron-down"
+              viewBox="0 0 16 16"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+              />
+            </svg>
+          </slot>
+        </button>
+        <div class="accordion-body">
+          <slot
+            id="content"
+            name="accordion-content"
+            class="accordion-content"
+            role="region"
+            aria-labelledby="header"
+          ></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    query(".accordion-item")
+], SgdsAccordionItem.prototype, "accordion", void 0);
+__decorate([
+    query(".accordion-btn")
+], SgdsAccordionItem.prototype, "header", void 0);
+__decorate([
+    query(".accordion-body")
+], SgdsAccordionItem.prototype, "body", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsAccordionItem.prototype, "open", void 0);
+__decorate([
+    watch("open", { waitUntilFirstUpdate: true })
+], SgdsAccordionItem.prototype, "handleOpenChange", null);
+setDefaultAnimation("accordion.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 350, easing: "ease-in-out" }
+});
+setDefaultAnimation("accordion.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 350, easing: "ease-in-out" }
+});
+
+export { SgdsAccordionItem, SgdsAccordionItem as default };
+//# sourceMappingURL=sgds-accordion-item.js.map

package/react/components/Accordion/sgds-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-accordion-item.js","sources":["../../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport accordionItemStyle from \"./accordion-item.css\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n * @slot accordion-caret - The caret icon of accordion-item.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-btn when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionItemStyle];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-btn\") header: HTMLElement;\n  /** @internal */\n  @query(\".accordion-body\") body: HTMLElement;\n\n  /** Controls whether accordion-item is open or close */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  firstUpdated() {\n    if (!this.open) this.body.classList.add(\"hidden\");\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.classList.remove(\"hidden\");\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      const animationDuration = options.duration as number;\n      // Workaround to fix GSIB delay after animateTo.\n      //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n      setTimeout(() => {\n        this.body.classList.add(\"hidden\");\n      }, animationDuration - 20);\n\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"sgds accordion-item\": true\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-btn\": true,\n            collapsed: !this.open\n          })}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=\"0\"\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n          <slot name=\"accordion-caret\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-down\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot\n            id=\"content\"\n            name=\"accordion-content\"\n            class=\"accordion-content\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          ></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["accordionItemStyle"],"mappings":"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"}

package/react/components/Accordion/sgds-accordion.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The colour of accordion when it is active\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionStyle];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsAccordionItem[];\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  private async _onToggle(event: Event) {\n    if (this.allowMultiple) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  private async _onKeyboardToggle(event: KeyboardEvent) {\n    if (!VALID_KEYS.includes(event.key)) return;\n    return this._onToggle(event);\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true\n        })}\n      >\n        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","accordionStyle","__decorate","property","queryAssignedElements"],"mappings":";;;;;;;;;;;;AAOA,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;AAEhF;;;;;AAKG;AAEG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAmEnE;;AA7DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAEO,MAAM,SAAS,CAAC,KAAY,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;;YAEtB,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AACrD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAEO,MAAM,iBAAiB,CAAC,KAAoB,EAAA;QAClD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC;YAAE,OAAO;AAC5C,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;SACvB,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,SAAS,CAAa,UAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAEnE,CAAC;KACH;;AArEM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,oBAAc,CAAzC,CAA2C;AAGZC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjCD,gBAAA,CAAA;AAAhC,IAAAE,mCAAqB,EAAE;AAA4C,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Accordion/sgds-accordion.js

@@ -0,0 +1,87 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './accordion.js';
+
+const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
+/**
+ * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
+ * @slot default - slot for accordion-item
+ *
+ * @cssprop --accordion-active-color - The colour of accordion when it is active
+ */
+class SgdsAccordion extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Allows multiple accordion items to be opened at the same time */
+        this.allowMultiple = false;
+    }
+    /** @internal */
+    get items() {
+        return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
+    }
+    firstUpdated() {
+        const items = [...this.items];
+        items.forEach((item, index) => {
+            if (items.length > 1) {
+                switch (index) {
+                    case 0:
+                        item.setAttribute("first-of-type", "");
+                        break;
+                    case items.length - 1:
+                        item.setAttribute("last-of-type", "");
+                        break;
+                    default:
+                        item.setAttribute("nth-of-type", "");
+                }
+            }
+        });
+    }
+    async _onToggle(event) {
+        if (this.allowMultiple) {
+            // No toggling when `allowMultiple` or the user prevents it.
+            return;
+        }
+        const items = [...this.items];
+        if (items && !items.length) {
+            // no toggling when there aren't items.
+            return;
+        }
+        items.forEach(item => {
+            // Covers all elements within accordion-item
+            if (!event.composedPath().includes(item)) {
+                // Close all the items that didn't dispatch the event.
+                item.open = false;
+            }
+        });
+    }
+    async _onKeyboardToggle(event) {
+        if (!VALID_KEYS.includes(event.key))
+            return;
+        return this._onToggle(event);
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            "sgds accordion": true
+        })}
+      >
+        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
+      </div>
+    `;
+    }
+}
+SgdsAccordion.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsAccordion.prototype, "allowMultiple", void 0);
+__decorate([
+    queryAssignedElements()
+], SgdsAccordion.prototype, "defaultNodes", void 0);
+
+export { SgdsAccordion, SgdsAccordion as default };
+//# sourceMappingURL=sgds-accordion.js.map