@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/react/components/Button/sgds-button.js

@@ -0,0 +1,166 @@
+'use client';
+import { __decorate } from 'tslib';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { literal, html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { FormSubmitController } from '../../utils/form.js';
+import css_248z$1 from './button.js';
+import css_248z from '../../styles/anchor.js';
+
+/**
+ * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
+ *
+ * @slot default - The button's label.
+ * @slot leftIcon - The slot for icon to the left of the button text
+ * @slot rightIcon - The slot for icon to the right of the button text
+ *
+ * @event sgds-blur - Emitted when the button is not focused.
+ * @event sgds-focus - Emitted when the button is focused.
+ *
+ * @cssprop --btn-border-radius - Border radius of the button
+ *
+ */
+class SgdsButton extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.formSubmitController = new FormSubmitController(this, {
+            form: (input) => {
+                // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
+                // the form from the same root using its id
+                if (input.hasAttribute("form")) {
+                    const doc = input.getRootNode();
+                    const formId = input.getAttribute("form");
+                    return doc.getElementById(formId);
+                }
+                // Fall back to the closest containing form
+                return input.closest("form");
+            }
+        });
+        /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `outlined` and `danger`. @deprecated The following variants are deprecated from v2.0 and will be removed from v3 onwards: `secondary`, `success`, `warning`, `info`, `dark`, `light`, `link` as well as those prefixed by `outline-*` */
+        this.variant = "primary";
+        /** Manually set the visual state of the button to `:active` */
+        this.active = false;
+        /** The disabled state of the button */
+        this.disabled = false;
+        /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */
+        this.type = "button";
+        this._clickHandler = () => {
+            if (this.type === "submit") {
+                this.formSubmitController.submit(this);
+            }
+            if (this.type === "reset") {
+                this.formSubmitController.reset(this);
+            }
+        };
+    }
+    /** Sets focus on the button. */
+    focus(options) {
+        this.button.focus(options);
+    }
+    /** Simulates a click on the button. */
+    click() {
+        this.button.click();
+    }
+    /** Removes focus from the button. */
+    blur() {
+        this.button.blur();
+    }
+    handleBlur() {
+        this.emit("sgds-blur");
+    }
+    handleFocus() {
+        this.emit("sgds-focus");
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.removeEventListener("click", this._clickHandler);
+        this.addEventListener("click", this._clickHandler);
+    }
+    render() {
+        const isLink = this.href;
+        const tag = isLink ? literal `a` : literal `button`;
+        return html `
+      <${tag}
+        class="sgds btn ${classMap({
+            disabled: this.disabled,
+            active: this.active,
+            [`btn-${this.size}`]: this.size,
+            "btn-link": this.variant === "link"
+        })}"
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${ifDefined(isLink ? undefined : this.type)}
+        href=${ifDefined(isLink ? this.href : undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink && this.target === "_blank" ? "noreferrer noopener" : undefined)}
+        role=${ifDefined(isLink ? "button" : undefined)}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        aria-label=${ifDefined(this.ariaLabel)}
+      >
+      <slot name="leftIcon"></slot>
+      <slot></slot>
+      <slot name="rightIcon"></slot>
+      </${tag}>
+    `;
+    }
+}
+SgdsButton.styles = [...SgdsElement.styles, css_248z, css_248z$1];
+__decorate([
+    query(".btn")
+], SgdsButton.prototype, "button", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsButton.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsButton.prototype, "target", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsButton.prototype, "download", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsButton.prototype, "form", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "formaction" })
+], SgdsButton.prototype, "formAction", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "formmethod" })
+], SgdsButton.prototype, "formMethod", void 0);
+__decorate([
+    property({ attribute: "formnovalidate", type: Boolean, reflect: true })
+], SgdsButton.prototype, "formNoValidate", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "formtarget" })
+], SgdsButton.prototype, "formTarget", void 0);
+__decorate([
+    property({ type: String })
+], SgdsButton.prototype, "ariaLabel", void 0);
+
+export { SgdsButton, SgdsButton as default };
+//# sourceMappingURL=sgds-button.js.map

package/react/components/Button/sgds-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-button.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport buttonStyles from \"./button.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\"\n  | \"link\"\n  | \"outlined\"\n  | \"outline-primary\"\n  | \"outline-secondary\"\n  | \"outline-success\"\n  | \"outline-danger\"\n  | \"outline-warning\"\n  | \"outline-info\"\n  | \"outline-light\"\n  | \"outline-dark\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is not focused.\n * @event sgds-focus - Emitted when the button is focused.\n *\n * @cssprop --btn-border-radius - Border radius of the button\n *\n */\nexport class SgdsButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, anchorStyles, buttonStyles];\n\n  @query(\".btn\") private button: HTMLButtonElement | HTMLLinkElement;\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `outlined` and `danger`. @deprecated The following variants are deprecated from v2.0 and will be removed from v3 onwards: `secondary`, `success`, `warning`, `info`, `dark`, `light`, `link` as well as those prefixed by `outline-*` */\n  @property({ reflect: true }) variant: ButtonVariant = \"primary\";\n\n  /** Specifies a large or small button */\n  @property({ reflect: true }) size: \"sm\" | \"lg\";\n\n  /** Manually set the visual state of the button to `:active` */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** The disabled state of the button */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property({ type: String, reflect: true }) href: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property({ type: String, reflect: true }) target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\";\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property({ type: String, reflect: true }) download: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** The aria-label attribute to passed to button element when necessary */\n  @property({ type: String }) ariaLabel: string;\n\n  /** Sets focus on the button. */\n  public focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Simulates a click on the button. */\n  public click() {\n    this.button.click();\n  }\n\n  /** Removes focus from the button. */\n  public blur() {\n    this.button.blur();\n  }\n\n  handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"sgds btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          [`btn-${this.size}`]: this.size,\n          \"btn-link\": this.variant === \"link\"\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleClick}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\"></slot>\n      <slot></slot>\n      <slot name=\"rightIcon\"></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["anchorStyles","buttonStyles"],"mappings":"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"}

package/react/components/Card/card.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`::slotted(.stretched-link):before{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}`;
+
+export { css_248z as default };
+//# sourceMappingURL=card.js.map

package/react/components/Card/card.js.map

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

package/react/components/Card/sgds-card.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n * @slot card-image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot card-link - Accepts an anchor element. Only a single element is allowed to be passed in.\n *\n *\n * @csspart base - The card base wrapper\n * @csspart body - The card body\n * @csspart title - The card title\n * @csspart text - The card text\n *\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean }) stretchedLink = false;\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLLinkElement>;\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n    if (this.stretchedLink) {\n      childNodes[0].classList.add(\"stretched-link\");\n    }\n    return;\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n  render() {\n    return html`\n      <div\n        class=\"${classMap({\n          sgds: true,\n          card: true,\n          [`text-${this.textColor}`]: this.textColor,\n          [`bg-${this.bgColor}`]: this.bgColor,\n          [`border-${this.borderColor}`]: this.borderColor\n        })}\n        \"\n        part=\"base\"\n      >\n        <slot name=\"card-image\" @slotchange=${this.handleImgSlotChange}></slot>\n        <div class=\"card-body\" part=\"body\">\n          <h3 class=\"card-title \" part=\"title\"><slot name=\"card-title\"></slot></h3>\n          <p class=\"card-text\" part=\"text\">\n            <slot name=\"card-text\"></slot>\n          </p>\n          <slot name=\"card-link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["CardElement","html","classMap","cardStyle","__decorate","property"],"mappings":";;;;;;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AACG,MAAO,QAAS,SAAQA,uBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAI+B,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KA2CpD;AAzCC,IAAA,oBAAoB,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAA2B,CAAC;AAC5G,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;SAC5E;AACD,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SAC/C;QACD,OAAO;KACR;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAClH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;KACF;IACD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEE,eAAA,EAAAC,oBAAQ,CAAC;AAChB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,IAAI,EAAE,IAAI;YACV,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS;YAC1C,CAAC,CAAA,GAAA,EAAM,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO;YACpC,CAAC,CAAA,OAAA,EAAU,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;SACjD,CAAC,CAAA;;;;AAIoC,4CAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;;;;;;AAMvB,6CAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;;KAGnE,CAAC;KACH;;AA7CM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,uBAAW,CAAC,MAAM,EAAEG,eAAS,CAApC,CAAsC;AAGtBC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAuB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Card/sgds-card.js

@@ -0,0 +1,76 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { CardElement } from '../../base/card-element.js';
+import css_248z from './card.js';
+
+/**
+ * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot card-title - The title of the card
+ * @slot card-text - The paragrapher text of the card
+ * @slot card-image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
+ * @slot card-link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ *
+ *
+ * @csspart base - The card base wrapper
+ * @csspart body - The card body
+ * @csspart title - The card title
+ * @csspart text - The card text
+ *
+ */
+class SgdsCard extends CardElement {
+    constructor() {
+        super(...arguments);
+        /** Extends the link passed in slot[name="link"] to the entire card */
+        this.stretchedLink = false;
+    }
+    handleLinkSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (childNodes.length > 1) {
+            return console.error("Multiple elements passed into SgdsCard's link slot");
+        }
+        if (this.stretchedLink) {
+            childNodes[0].classList.add("stretched-link");
+        }
+        return;
+    }
+    handleImgSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (childNodes.length > 1) {
+            return console.error("Multiple elements passed into SgdsCard's image slot");
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="${classMap({
+            sgds: true,
+            card: true,
+            [`text-${this.textColor}`]: this.textColor,
+            [`bg-${this.bgColor}`]: this.bgColor,
+            [`border-${this.borderColor}`]: this.borderColor
+        })}
+        "
+        part="base"
+      >
+        <slot name="card-image" @slotchange=${this.handleImgSlotChange}></slot>
+        <div class="card-body" part="body">
+          <h3 class="card-title " part="title"><slot name="card-title"></slot></h3>
+          <p class="card-text" part="text">
+            <slot name="card-text"></slot>
+          </p>
+          <slot name="card-link" @slotchange=${this.handleLinkSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsCard.styles = [...CardElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean })
+], SgdsCard.prototype, "stretchedLink", void 0);
+
+export { SgdsCard, SgdsCard as default };
+//# sourceMappingURL=sgds-card.js.map

package/react/components/Card/sgds-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n * @slot card-image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot card-link - Accepts an anchor element. Only a single element is allowed to be passed in.\n *\n *\n * @csspart base - The card base wrapper\n * @csspart body - The card body\n * @csspart title - The card title\n * @csspart text - The card text\n *\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean }) stretchedLink = false;\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLLinkElement>;\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n    if (this.stretchedLink) {\n      childNodes[0].classList.add(\"stretched-link\");\n    }\n    return;\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n  render() {\n    return html`\n      <div\n        class=\"${classMap({\n          sgds: true,\n          card: true,\n          [`text-${this.textColor}`]: this.textColor,\n          [`bg-${this.bgColor}`]: this.bgColor,\n          [`border-${this.borderColor}`]: this.borderColor\n        })}\n        \"\n        part=\"base\"\n      >\n        <slot name=\"card-image\" @slotchange=${this.handleImgSlotChange}></slot>\n        <div class=\"card-body\" part=\"body\">\n          <h3 class=\"card-title \" part=\"title\"><slot name=\"card-title\"></slot></h3>\n          <p class=\"card-text\" part=\"text\">\n            <slot name=\"card-text\"></slot>\n          </p>\n          <slot name=\"card-link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":";;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAI+B,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KA2CpD;AAzCC,IAAA,oBAAoB,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAA2B,CAAC;AAC5G,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;SAC5E;AACD,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SAC/C;QACD,OAAO;KACR;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAClH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;KACF;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEE,eAAA,EAAA,QAAQ,CAAC;AAChB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,IAAI,EAAE,IAAI;YACV,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS;YAC1C,CAAC,CAAA,GAAA,EAAM,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO;YACpC,CAAC,CAAA,OAAA,EAAU,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;SACjD,CAAC,CAAA;;;;AAIoC,4CAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;;;;;;AAMvB,6CAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;;KAGnE,CAAC;KACH;;AA7CM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,CAApC,CAAsC;AAGtB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAuB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Checkbox/checkbox.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host([checked]) .form-check{--sgds-form-border-color:var(--sgds-form-bg);--sgds-form-bg:var(--sgds-info-filled)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:disabled{border-color:var(--sgds-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label-container>.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-flex;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right);vertical-align:text-top}:host([last-of-type]) .form-check{margin-bottom:0}.form-check-input:checked[type=checkbox]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E")}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host([checked]) .form-check{--sgds-form-border-color:var(--sgds-form-bg);--sgds-form-bg:var(--sgds-info-filled)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:disabled{border-color:var(--sgds-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label-container>.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-flex;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right);vertical-align:text-top}:host([last-of-type]) .form-check{margin-bottom:0}.form-check-input:checked[type=checkbox]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E")}`;
+
+export { css_248z as default };
+//# sourceMappingURL=checkbox.js.map

package/react/components/Checkbox/checkbox.js.map

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

package/react/components/Checkbox/sgds-checkbox.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-checkbox.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import FormCheckElement from \"../../base/form-check-element\";\nimport genId from \"../../utils/generateId\";\nimport checkboxStyle from \"./checkbox.css\";\nimport feedbackStyle from \"../../styles/feedback.css\";\nimport formLabelStyle from \"../../styles/form-label.css\";\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsCheckbox extends FormCheckElement {\n  static styles = [...FormCheckElement.styles, feedbackStyle, formLabelStyle, checkboxStyle];\n\n  constructor() {\n    super();\n    /** @internal */\n    this._inputId = genId(\"checkbox\");\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["FormCheckElement","genId","feedbackStyle","formLabelStyle","checkboxStyle"],"mappings":";;;;;;;;;;;AAKA;;;;;;;AAOG;AACG,MAAO,YAAa,SAAQA,iCAAgB,CAAA;AAGhD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;;AAER,QAAA,IAAI,CAAC,QAAQ,GAAGC,qBAAK,CAAC,UAAU,CAAC,CAAC;KACnC;;AANM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,iCAAgB,CAAC,MAAM,EAAEE,mBAAa,EAAEC,oBAAc,EAAEC,mBAAa,CAAC;;;;;"}

package/react/components/Checkbox/sgds-checkbox.js

@@ -0,0 +1,26 @@
+'use client';
+import { FormCheckElement } from '../../base/form-check-element.js';
+import genId from '../../utils/generateId.js';
+import css_248z$2 from './checkbox.js';
+import css_248z from '../../styles/feedback.js';
+import css_248z$1 from '../../styles/form-label.js';
+
+/**
+ * @summary Checkbox component is used when you require users to select multiple items from a list.
+ *
+ * @slot default - The label of checkbox.
+ *
+ * @event sgds-change - Emitted when the checked state changes.
+ *
+ */
+class SgdsCheckbox extends FormCheckElement {
+    constructor() {
+        super();
+        /** @internal */
+        this._inputId = genId("checkbox");
+    }
+}
+SgdsCheckbox.styles = [...FormCheckElement.styles, css_248z, css_248z$1, css_248z$2];
+
+export { SgdsCheckbox, SgdsCheckbox as default };
+//# sourceMappingURL=sgds-checkbox.js.map

package/react/components/Checkbox/sgds-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-checkbox.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import FormCheckElement from \"../../base/form-check-element\";\nimport genId from \"../../utils/generateId\";\nimport checkboxStyle from \"./checkbox.css\";\nimport feedbackStyle from \"../../styles/feedback.css\";\nimport formLabelStyle from \"../../styles/form-label.css\";\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsCheckbox extends FormCheckElement {\n  static styles = [...FormCheckElement.styles, feedbackStyle, formLabelStyle, checkboxStyle];\n\n  constructor() {\n    super();\n    /** @internal */\n    this._inputId = genId(\"checkbox\");\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["feedbackStyle","formLabelStyle","checkboxStyle"],"mappings":";;;;;;;AAKA;;;;;;;AAOG;AACG,MAAO,YAAa,SAAQ,gBAAgB,CAAA;AAGhD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;;AAER,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;KACnC;;AANM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAEA,QAAa,EAAEC,UAAc,EAAEC,UAAa,CAAC;;;;"}

package/react/components/ComboBox/combo-box.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.sgds.combobox .form-control-icon{align-items:center;display:flex;font-size:1rem;height:3rem;justify-content:center;position:absolute;width:3rem;z-index:4}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.sgds.combobox .dropdown-toggle{width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}.form-control-icon{bottom:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=combo-box.js.map

package/react/components/ComboBox/combo-box.js.map

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

package/react/components/ComboBox/sgds-combo-box.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsDropdownItem } from \"../Dropdown/sgds-dropdown-item\";\nimport { SgdsInput } from \"../Input/sgds-input\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\ntype FilterFunction = (inputValue: string, menuItem: string) => boolean;\n\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list.\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n */\nexport class SgdsComboBox extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, comboBoxStyle, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-input\": SgdsInput,\n      \"sgds-dropdown-item\": SgdsDropdownItem\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n  /** Marks the input as invalid. Replace the pseudo :valid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /**The list of items to display in the dropdown. */\n  @property({ type: Array }) menuList: string[] = [];\n\n  /**The function used to determine if a menu item should be shown in the menu list, given the user's input value. */\n  @property()\n  filterFunction: FilterFunction = (inputValue: string, menuItem: string) => {\n    const itemLowerCase = menuItem.toLowerCase();\n    const valueLower = inputValue.toLowerCase();\n    return itemLowerCase.startsWith(valueLower);\n  };\n\n  /**@internal */\n  @state()\n  private filteredMenuList: string[] = [];\n\n  /**@internal */\n  @watch(\"value\")\n  _handleFilterMenu() {\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction.call(null, this.value, item));\n\n    if (!this.myDropdown || !this.bsDropdown) return;\n\n    // To hide dropdown menu when filtered menuList is empty\n    if (this.filteredMenuList.length === 0) {\n      this.hideMenu();\n    } else if (this.menuIsOpen) {\n      this.showMenu();\n    }\n  }\n\n  private _handleInputChange(e: CustomEvent) {\n    this.showMenu();\n    this.value = (e.target as SgdsInput).value;\n  }\n\n  private _handleSelectChange(e: KeyboardEvent | MouseEvent) {\n    this.value = (e.target as HTMLButtonElement).innerText;\n    this.handleSelectSlot(e);\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds combobox dropdown\">\n        <sgds-input\n          class=\"dropdown-toggle\"\n          label=${this.label}\n          hintText=${this.hintText}\n          name=${this.name}\n          ${ref(this.myDropdown)}\n          @click=${() => (this.filteredMenuList.length > 0 ? this.showMenu() : this.hideMenu())}\n          placeholder=${this.placeholder}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          required=${this.required}\n          ?readonly=${this.readonly}\n          ?hasFeedback=${this.hasFeedback}\n          invalidfeedback=${this.invalidFeedback}\n          ?invalid=${this.invalid}\n          ?valid=${this.valid}\n          .value=${this.value}\n          @sgds-input=${this._handleInputChange}\n          role=\"combobox\"\n          aria-expanded=${this.menuIsOpen}\n          aria-autocomplete=\"list\"\n          aria-controls=${this.dropdownMenuId}\n        >\n        </sgds-input>\n        <div class=\"form-control-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this.filteredMenuList.map(\n            item => html`<sgds-dropdown-item @click=${this._handleSelectChange}>${item}</sgds-dropdown-item>`\n          )}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["ScopedElementsMixin","DropdownListElement","SgdsInput","SgdsDropdownItem","html","ref","comboBoxStyle","dropdownStyle","__decorate","property","defaultValue","state","watch"],"mappings":"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"}

package/react/components/ComboBox/sgds-combo-box.js

@@ -0,0 +1,194 @@
+'use client';
+import { __decorate } from 'tslib';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { DropdownListElement } from '../../base/dropdown-list-element.js';
+import { defaultValue } from '../../utils/defaultvalue.js';
+import { watch } from '../../utils/watch.js';
+import { SgdsDropdownItem } from '../Dropdown/sgds-dropdown-item.js';
+import { SgdsInput } from '../Input/sgds-input.js';
+import css_248z from './combo-box.js';
+import css_248z$1 from '../Dropdown/dropdown.js';
+
+/**
+ * @summary ComboBox component is used for users to make one or more selections from a list.
+ *
+ * @slot icon - slot for form control icon to be displayed on the right of the input box.
+ *
+ * @event sgds-select - Emitted when the combo box's selected value changes.
+ * @event sgds-input -  Emitted when user input is received and its value changes.
+ */
+class SgdsComboBox extends ScopedElementsMixin(DropdownListElement) {
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-input": SgdsInput,
+            "sgds-dropdown-item": SgdsDropdownItem
+        };
+    }
+    constructor() {
+        super();
+        /** The input's label  */
+        this.label = "";
+        /** The input's hint text below the label */
+        this.hintText = "";
+        /**The input's placeholder text. */
+        this.placeholder = "placeholder";
+        /**Autofocus the input */
+        this.autofocus = false;
+        /**Disables the input. */
+        this.disabled = false;
+        /**Makes the input a required field. */
+        this.required = false;
+        /**Makes the input readonly. */
+        this.readonly = false;
+        /**The input's value attribute. */
+        this.value = "";
+        /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+        this.defaultValue = "";
+        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+        this.hasFeedback = false;
+        /**Feedback text for error state when validated */
+        this.invalidFeedback = "";
+        /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+        this.invalid = false;
+        /** Marks the input as invalid. Replace the pseudo :valid selector for absent in custom elements */
+        this.valid = false;
+        /**The list of items to display in the dropdown. */
+        this.menuList = [];
+        /**The function used to determine if a menu item should be shown in the menu list, given the user's input value. */
+        this.filterFunction = (inputValue, menuItem) => {
+            const itemLowerCase = menuItem.toLowerCase();
+            const valueLower = inputValue.toLowerCase();
+            return itemLowerCase.startsWith(valueLower);
+        };
+        /**@internal */
+        this.filteredMenuList = [];
+        /**@internal */
+        this.modifierOpt = [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 10]
+                }
+            }
+        ];
+    }
+    /**@internal */
+    _handleFilterMenu() {
+        this.filteredMenuList = this.menuList.filter(item => this.filterFunction.call(null, this.value, item));
+        if (!this.myDropdown || !this.bsDropdown)
+            return;
+        // To hide dropdown menu when filtered menuList is empty
+        if (this.filteredMenuList.length === 0) {
+            this.hideMenu();
+        }
+        else if (this.menuIsOpen) {
+            this.showMenu();
+        }
+    }
+    _handleInputChange(e) {
+        this.showMenu();
+        this.value = e.target.value;
+    }
+    _handleSelectChange(e) {
+        this.value = e.target.innerText;
+        this.handleSelectSlot(e);
+    }
+    render() {
+        return html `
+      <div class="sgds combobox dropdown">
+        <sgds-input
+          class="dropdown-toggle"
+          label=${this.label}
+          hintText=${this.hintText}
+          name=${this.name}
+          ${ref(this.myDropdown)}
+          @click=${() => (this.filteredMenuList.length > 0 ? this.showMenu() : this.hideMenu())}
+          placeholder=${this.placeholder}
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          required=${this.required}
+          ?readonly=${this.readonly}
+          ?hasFeedback=${this.hasFeedback}
+          invalidfeedback=${this.invalidFeedback}
+          ?invalid=${this.invalid}
+          ?valid=${this.valid}
+          .value=${this.value}
+          @sgds-input=${this._handleInputChange}
+          role="combobox"
+          aria-expanded=${this.menuIsOpen}
+          aria-autocomplete="list"
+          aria-controls=${this.dropdownMenuId}
+        >
+        </sgds-input>
+        <div class="form-control-icon">
+          <slot name="icon"></slot>
+        </div>
+        <ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1">
+          ${this.filteredMenuList.map(item => html `<sgds-dropdown-item @click=${this._handleSelectChange}>${item}</sgds-dropdown-item>`)}
+        </ul>
+      </div>
+    `;
+    }
+}
+SgdsComboBox.styles = [...DropdownListElement.styles, css_248z, css_248z$1];
+__decorate([
+    property({ reflect: true })
+], SgdsComboBox.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsComboBox.prototype, "hintText", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsComboBox.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsComboBox.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "readonly", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsComboBox.prototype, "value", void 0);
+__decorate([
+    defaultValue()
+], SgdsComboBox.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsComboBox.prototype, "invalidFeedback", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "valid", void 0);
+__decorate([
+    property({ type: Array })
+], SgdsComboBox.prototype, "menuList", void 0);
+__decorate([
+    property()
+], SgdsComboBox.prototype, "filterFunction", void 0);
+__decorate([
+    state()
+], SgdsComboBox.prototype, "filteredMenuList", void 0);
+__decorate([
+    watch("value")
+], SgdsComboBox.prototype, "_handleFilterMenu", null);
+
+export { SgdsComboBox, SgdsComboBox as default };
+//# sourceMappingURL=sgds-combo-box.js.map