@govtechsg/sgds-web-component 2.0.0-rc.1 → 2.0.0-rc.2

package/components/ActionCard/sgds-action-card.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var litElement_js = require('@open-wc/scoped-elements/lit-element.js');
+var scopedElements = require('@open-wc/scoped-elements');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var live_js = require('lit/directives/live.js');
@@ -31,7 +31,7 @@ var actionCard = require('./action-card.cjs.js');
  * @csspart title - The action card title
  * @csspart text - The action card text
  */
-class SgdsActionCard extends litElement_js.ScopedElementsMixin(cardElement.CardElement) {
+class SgdsActionCard extends scopedElements.ScopedElementsMixin(cardElement.CardElement) {
     constructor() {
         super(...arguments);
         /** @internal */

package/components/ActionCard/sgds-action-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-action-card.cjs.js","sources":["../../../src/components/ActionCard/sgds-action-card.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements/lit-element.js\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport { html } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { SgdsRadio } from \"../Radio/sgds-radio\";\nimport actionCardStyles from \"./action-card.css\";\n\n/**\n * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.\n * @slot icon - Icon content in the card-subtitile\n * @slot card-subtitle - The subtitle of the card\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n *\n * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed\n *\n * @csspart base - The action card base wrapper\n * @csspart body - The action card body\n * @csspart subtitle - The action card subtitle\n * @csspart title - The action card title\n * @csspart text - The action card text\n */\nexport class SgdsActionCard extends ScopedElementsMixin(CardElement) {\n  static styles = [...CardElement.styles, actionCardStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-checkbox\": SgdsCheckbox,\n      \"sgds-radio\": SgdsRadio\n    };\n  }\n  /** @internal */\n  inputRef: Ref<SgdsCheckbox | SgdsRadio> = createRef();\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ reflect: true }) name: string;\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String }) value: string;\n  /** Disables the input (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /** Draws the input in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The type of input of the action card */\n  @property({ type: String, reflect: true }) type: TypeVariant = \"checkbox\";\n\n  /** Controls the active styling of the action card */\n  @property({ reflect: true, type: Boolean })\n  active = false;\n\n  /** Simulates a click on the input control*/\n  public click() {\n    this.inputRef.value.click();\n  }\n  /** @internal Declare the click event listener*/\n  async handleInputChange() {\n    this.inputRef.value.click();\n    this.emit(\"sgds-change\");\n  }\n  /** @internal The input's id. */\n  private inputId: string = genId(\"action-card\", \"input\");\n\n  /** @internal */\n  @watch(\"checked\")\n  async handleRadioCheckedChange() {\n    this.active = this.checked;\n  }\n  /** @internal */\n  @watch(\"disabled\")\n  async handleDisabledChange() {\n    this.active = !this.disabled;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.handleInputChange();\n    }\n  }\n\n  render() {\n    const checkbox = html`<sgds-checkbox\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n      @sgds-change=${(e: CustomEvent) => (this.checked = e.detail.checked)}\n    ></sgds-checkbox>`;\n\n    const radio = html`<sgds-radio\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n    ></sgds-radio>`;\n\n    return html`\n      <div\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleInputChange}\n        @keydown=${this._handleKeyDown}\n        variant=\"card-action\"\n        class=\"sgds card\n        ${classMap({\n          [`text-${this.textColor}`]: this.textColor,\n          [`bg-${this.bgColor}`]: this.bgColor,\n          [`border-${this.borderColor}`]: this.borderColor,\n          [\"is-active\"]: this.active\n        })}\n        \"\n        part=\"base\"\n      >\n        <div class=\"card-body\" part=\"body\">\n          <h6 class=\"card-subtitle\" part=\"subtitle\">\n            <div>\n              <slot name=\"icon\"></slot>\n              <slot name=\"card-subtitle\"></slot>\n            </div>\n            <div class=\"card-input\">${this.type === \"checkbox\" ? checkbox : radio}</div>\n          </h6>\n          <h5 class=\"card-title\" part=\"title\"><slot name=\"card-title\"></slot></h5>\n          <p class=\"card-text\" part=\"text\"><slot name=\"card-text\"></slot></p>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type TypeVariant = \"checkbox\" | \"radio\";\n\nexport default SgdsActionCard;\n"],"names":["ScopedElementsMixin","CardElement","createRef","genId","SgdsCheckbox","SgdsRadio","html","ref","live","classMap","actionCardStyles","__decorate","property","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-action-card.cjs.js","sources":["../../../src/components/ActionCard/sgds-action-card.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport { html } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { SgdsRadio } from \"../Radio/sgds-radio\";\nimport actionCardStyles from \"./action-card.css\";\n\n/**\n * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.\n * @slot icon - Icon content in the card-subtitile\n * @slot card-subtitle - The subtitle of the card\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n *\n * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed\n *\n * @csspart base - The action card base wrapper\n * @csspart body - The action card body\n * @csspart subtitle - The action card subtitle\n * @csspart title - The action card title\n * @csspart text - The action card text\n */\nexport class SgdsActionCard extends ScopedElementsMixin(CardElement) {\n  static styles = [...CardElement.styles, actionCardStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-checkbox\": SgdsCheckbox,\n      \"sgds-radio\": SgdsRadio\n    };\n  }\n  /** @internal */\n  inputRef: Ref<SgdsCheckbox | SgdsRadio> = createRef();\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ reflect: true }) name: string;\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String }) value: string;\n  /** Disables the input (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /** Draws the input in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The type of input of the action card */\n  @property({ type: String, reflect: true }) type: TypeVariant = \"checkbox\";\n\n  /** Controls the active styling of the action card */\n  @property({ reflect: true, type: Boolean })\n  active = false;\n\n  /** Simulates a click on the input control*/\n  public click() {\n    this.inputRef.value.click();\n  }\n  /** @internal Declare the click event listener*/\n  async handleInputChange() {\n    this.inputRef.value.click();\n    this.emit(\"sgds-change\");\n  }\n  /** @internal The input's id. */\n  private inputId: string = genId(\"action-card\", \"input\");\n\n  /** @internal */\n  @watch(\"checked\")\n  async handleRadioCheckedChange() {\n    this.active = this.checked;\n  }\n  /** @internal */\n  @watch(\"disabled\")\n  async handleDisabledChange() {\n    this.active = !this.disabled;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.handleInputChange();\n    }\n  }\n\n  render() {\n    const checkbox = html`<sgds-checkbox\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n      @sgds-change=${(e: CustomEvent) => (this.checked = e.detail.checked)}\n    ></sgds-checkbox>`;\n\n    const radio = html`<sgds-radio\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n    ></sgds-radio>`;\n\n    return html`\n      <div\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleInputChange}\n        @keydown=${this._handleKeyDown}\n        variant=\"card-action\"\n        class=\"sgds card\n        ${classMap({\n          [`text-${this.textColor}`]: this.textColor,\n          [`bg-${this.bgColor}`]: this.bgColor,\n          [`border-${this.borderColor}`]: this.borderColor,\n          [\"is-active\"]: this.active\n        })}\n        \"\n        part=\"base\"\n      >\n        <div class=\"card-body\" part=\"body\">\n          <h6 class=\"card-subtitle\" part=\"subtitle\">\n            <div>\n              <slot name=\"icon\"></slot>\n              <slot name=\"card-subtitle\"></slot>\n            </div>\n            <div class=\"card-input\">${this.type === \"checkbox\" ? checkbox : radio}</div>\n          </h6>\n          <h5 class=\"card-title\" part=\"title\"><slot name=\"card-title\"></slot></h5>\n          <p class=\"card-text\" part=\"text\"><slot name=\"card-text\"></slot></p>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type TypeVariant = \"checkbox\" | \"radio\";\n\nexport default SgdsActionCard;\n"],"names":["ScopedElementsMixin","CardElement","createRef","genId","SgdsCheckbox","SgdsRadio","html","ref","live","classMap","actionCardStyles","__decorate","property","watch"],"mappings":"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"}

package/components/ActionCard/sgds-action-card.d.ts

@@ -2,7 +2,7 @@ import { Ref } from "lit/directives/ref.js";
 import { CardElement } from "../../base/card-element";
 import { SgdsCheckbox } from "../Checkbox/sgds-checkbox";
 import { SgdsRadio } from "../Radio/sgds-radio";
-declare const SgdsActionCard_base: typeof CardElement & import("@open-wc/scoped-elements/lit-element.js").ScopedElementsHostConstructor;
+declare const SgdsActionCard_base: typeof CardElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
  * @slot icon - Icon content in the card-subtitile

package/components/ActionCard/sgds-action-card.js

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';

package/components/ActionCard/sgds-action-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-action-card.js","sources":["../../../src/components/ActionCard/sgds-action-card.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements/lit-element.js\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport { html } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { SgdsRadio } from \"../Radio/sgds-radio\";\nimport actionCardStyles from \"./action-card.css\";\n\n/**\n * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.\n * @slot icon - Icon content in the card-subtitile\n * @slot card-subtitle - The subtitle of the card\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n *\n * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed\n *\n * @csspart base - The action card base wrapper\n * @csspart body - The action card body\n * @csspart subtitle - The action card subtitle\n * @csspart title - The action card title\n * @csspart text - The action card text\n */\nexport class SgdsActionCard extends ScopedElementsMixin(CardElement) {\n  static styles = [...CardElement.styles, actionCardStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-checkbox\": SgdsCheckbox,\n      \"sgds-radio\": SgdsRadio\n    };\n  }\n  /** @internal */\n  inputRef: Ref<SgdsCheckbox | SgdsRadio> = createRef();\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ reflect: true }) name: string;\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String }) value: string;\n  /** Disables the input (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /** Draws the input in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The type of input of the action card */\n  @property({ type: String, reflect: true }) type: TypeVariant = \"checkbox\";\n\n  /** Controls the active styling of the action card */\n  @property({ reflect: true, type: Boolean })\n  active = false;\n\n  /** Simulates a click on the input control*/\n  public click() {\n    this.inputRef.value.click();\n  }\n  /** @internal Declare the click event listener*/\n  async handleInputChange() {\n    this.inputRef.value.click();\n    this.emit(\"sgds-change\");\n  }\n  /** @internal The input's id. */\n  private inputId: string = genId(\"action-card\", \"input\");\n\n  /** @internal */\n  @watch(\"checked\")\n  async handleRadioCheckedChange() {\n    this.active = this.checked;\n  }\n  /** @internal */\n  @watch(\"disabled\")\n  async handleDisabledChange() {\n    this.active = !this.disabled;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.handleInputChange();\n    }\n  }\n\n  render() {\n    const checkbox = html`<sgds-checkbox\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n      @sgds-change=${(e: CustomEvent) => (this.checked = e.detail.checked)}\n    ></sgds-checkbox>`;\n\n    const radio = html`<sgds-radio\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n    ></sgds-radio>`;\n\n    return html`\n      <div\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleInputChange}\n        @keydown=${this._handleKeyDown}\n        variant=\"card-action\"\n        class=\"sgds card\n        ${classMap({\n          [`text-${this.textColor}`]: this.textColor,\n          [`bg-${this.bgColor}`]: this.bgColor,\n          [`border-${this.borderColor}`]: this.borderColor,\n          [\"is-active\"]: this.active\n        })}\n        \"\n        part=\"base\"\n      >\n        <div class=\"card-body\" part=\"body\">\n          <h6 class=\"card-subtitle\" part=\"subtitle\">\n            <div>\n              <slot name=\"icon\"></slot>\n              <slot name=\"card-subtitle\"></slot>\n            </div>\n            <div class=\"card-input\">${this.type === \"checkbox\" ? checkbox : radio}</div>\n          </h6>\n          <h5 class=\"card-title\" part=\"title\"><slot name=\"card-title\"></slot></h5>\n          <p class=\"card-text\" part=\"text\"><slot name=\"card-text\"></slot></p>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type TypeVariant = \"checkbox\" | \"radio\";\n\nexport default SgdsActionCard;\n"],"names":["actionCardStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-action-card.js","sources":["../../../src/components/ActionCard/sgds-action-card.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport { html } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { SgdsRadio } from \"../Radio/sgds-radio\";\nimport actionCardStyles from \"./action-card.css\";\n\n/**\n * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.\n * @slot icon - Icon content in the card-subtitile\n * @slot card-subtitle - The subtitle of the card\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n *\n * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed\n *\n * @csspart base - The action card base wrapper\n * @csspart body - The action card body\n * @csspart subtitle - The action card subtitle\n * @csspart title - The action card title\n * @csspart text - The action card text\n */\nexport class SgdsActionCard extends ScopedElementsMixin(CardElement) {\n  static styles = [...CardElement.styles, actionCardStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-checkbox\": SgdsCheckbox,\n      \"sgds-radio\": SgdsRadio\n    };\n  }\n  /** @internal */\n  inputRef: Ref<SgdsCheckbox | SgdsRadio> = createRef();\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ reflect: true }) name: string;\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String }) value: string;\n  /** Disables the input (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /** Draws the input in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The type of input of the action card */\n  @property({ type: String, reflect: true }) type: TypeVariant = \"checkbox\";\n\n  /** Controls the active styling of the action card */\n  @property({ reflect: true, type: Boolean })\n  active = false;\n\n  /** Simulates a click on the input control*/\n  public click() {\n    this.inputRef.value.click();\n  }\n  /** @internal Declare the click event listener*/\n  async handleInputChange() {\n    this.inputRef.value.click();\n    this.emit(\"sgds-change\");\n  }\n  /** @internal The input's id. */\n  private inputId: string = genId(\"action-card\", \"input\");\n\n  /** @internal */\n  @watch(\"checked\")\n  async handleRadioCheckedChange() {\n    this.active = this.checked;\n  }\n  /** @internal */\n  @watch(\"disabled\")\n  async handleDisabledChange() {\n    this.active = !this.disabled;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.handleInputChange();\n    }\n  }\n\n  render() {\n    const checkbox = html`<sgds-checkbox\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n      @sgds-change=${(e: CustomEvent) => (this.checked = e.detail.checked)}\n    ></sgds-checkbox>`;\n\n    const radio = html`<sgds-radio\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n    ></sgds-radio>`;\n\n    return html`\n      <div\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleInputChange}\n        @keydown=${this._handleKeyDown}\n        variant=\"card-action\"\n        class=\"sgds card\n        ${classMap({\n          [`text-${this.textColor}`]: this.textColor,\n          [`bg-${this.bgColor}`]: this.bgColor,\n          [`border-${this.borderColor}`]: this.borderColor,\n          [\"is-active\"]: this.active\n        })}\n        \"\n        part=\"base\"\n      >\n        <div class=\"card-body\" part=\"body\">\n          <h6 class=\"card-subtitle\" part=\"subtitle\">\n            <div>\n              <slot name=\"icon\"></slot>\n              <slot name=\"card-subtitle\"></slot>\n            </div>\n            <div class=\"card-input\">${this.type === \"checkbox\" ? checkbox : radio}</div>\n          </h6>\n          <h5 class=\"card-title\" part=\"title\"><slot name=\"card-title\"></slot></h5>\n          <p class=\"card-text\" part=\"text\"><slot name=\"card-text\"></slot></p>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type TypeVariant = \"checkbox\" | \"radio\";\n\nexport default SgdsActionCard;\n"],"names":["actionCardStyles"],"mappings":"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"}

package/components/Alert/index.umd.js

@@ -37,12 +37,12 @@
    */
   const NODE_MODE = false;
   // Allows minifiers to rename references to globalThis
-  const global$2 = globalThis;
+  const global$3 = globalThis;
   /**
    * Whether the current browser supports `adoptedStyleSheets`.
    */
-  const supportsAdoptingStyleSheets = global$2.ShadowRoot &&
-      (global$2.ShadyCSS === undefined || global$2.ShadyCSS.nativeShadow) &&
+  const supportsAdoptingStyleSheets$1 = global$3.ShadowRoot &&
+      (global$3.ShadyCSS === undefined || global$3.ShadyCSS.nativeShadow) &&
       'adoptedStyleSheets' in Document.prototype &&
       'replace' in CSSStyleSheet.prototype;
   const constructionToken = Symbol();
@@ -71,7 +71,7 @@
           // constructable.
           let styleSheet = this._styleSheet;
           const strings = this._strings;
-          if (supportsAdoptingStyleSheets && styleSheet === undefined) {
+          if (supportsAdoptingStyleSheets$1 && styleSheet === undefined) {
               const cacheable = strings !== undefined && strings.length === 1;
               if (cacheable) {
                   styleSheet = cssTagCache.get(strings);
@@ -134,15 +134,15 @@
    * will match spec behavior that gives adopted sheets precedence over styles in
    * shadowRoot.
    */
-  const adoptStyles = (renderRoot, styles) => {
-      if (supportsAdoptingStyleSheets) {
+  const adoptStyles$1 = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets$1) {
           renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
       }
       else {
           for (const s of styles) {
               const style = document.createElement('style');
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const nonce = global$2['litNonce'];
+              const nonce = global$3['litNonce'];
               if (nonce !== undefined) {
                   style.setAttribute('nonce', nonce);
               }
@@ -158,7 +158,7 @@
       }
       return unsafeCSS(cssText);
   };
-  const getCompatibleStyle = supportsAdoptingStyleSheets ||
+  const getCompatibleStyle = supportsAdoptingStyleSheets$1 ||
       (NODE_MODE )
       ? (s) => s
       : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
@@ -171,9 +171,9 @@
   // TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
   const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
   // Lets a minifier replace globalThis references with a minified name
-  const global$1 = globalThis;
+  const global$2 = globalThis;
   let issueWarning$3;
-  const trustedTypes$1 = global$1
+  const trustedTypes$1 = global$2
       .trustedTypes;
   // Temporary workaround for https://crbug.com/993268
   // Currently, any attribute starting with "on" is considered to be a
@@ -182,12 +182,12 @@
   const emptyStringForBooleanAttribute = trustedTypes$1
       ? trustedTypes$1.emptyScript
       : '';
-  const polyfillSupport$2 = global$1.reactiveElementPolyfillSupportDevMode
+  const polyfillSupport$2 = global$2.reactiveElementPolyfillSupportDevMode
       ;
   {
       // Ensure warnings are issued only 1x, even if multiple versions of Lit
       // are loaded.
-      const issuedWarnings = (global$1.litIssuedWarnings ??=
+      const issuedWarnings = (global$2.litIssuedWarnings ??=
           new Set());
       // Issue a warning, if we haven't already.
       issueWarning$3 = (code, warning) => {
@@ -199,7 +199,7 @@
       };
       issueWarning$3('dev-mode', `Lit is in dev mode. Not recommended for production!`);
       // Issue polyfill support warning.
-      if (global$1.ShadyDOM?.inUse && polyfillSupport$2 === undefined) {
+      if (global$2.ShadyDOM?.inUse && polyfillSupport$2 === undefined) {
           issueWarning$3('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
               `the \`polyfill-support\` module has not been loaded.`);
       }
@@ -210,12 +210,12 @@
    * Compiled out of prod mode builds.
    */
   const debugLogEvent$1 = (event) => {
-          const shouldEmit = global$1
+          const shouldEmit = global$2
               .emitLitDebugLogEvents;
           if (!shouldEmit) {
               return;
           }
-          global$1.dispatchEvent(new CustomEvent('lit-debug', {
+          global$2.dispatchEvent(new CustomEvent('lit-debug', {
               detail: event,
           }));
       }
@@ -287,7 +287,7 @@
   // Map from a class's metadata object to property options
   // Note that we must use nullish-coalescing assignment so that we only use one
   // map even if we load multiple version of this module.
-  global$1.litPropertyMetadata ??= new WeakMap();
+  global$2.litPropertyMetadata ??= new WeakMap();
   /**
    * Base element class which manages element properties and attributes. When
    * properties change, the `update` method is asynchronously called. This method
@@ -707,7 +707,7 @@
       createRenderRoot() {
           const renderRoot = this.shadowRoot ??
               this.attachShadow(this.constructor.shadowRootOptions);
-          adoptStyles(renderRoot, this.constructor.elementStyles);
+          adoptStyles$1(renderRoot, this.constructor.elementStyles);
           return renderRoot;
       }
       /**
@@ -1214,8 +1214,8 @@
   }
   // IMPORTANT: do not change the property name or the assignment expression.
   // This line will be used in regexes to search for ReactiveElement usage.
-  (global$1.reactiveElementVersions ??= []).push('2.0.4');
-  if (global$1.reactiveElementVersions.length > 1) {
+  (global$2.reactiveElementVersions ??= []).push('2.0.4');
+  if (global$2.reactiveElementVersions.length > 1) {
       issueWarning$3('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
           `is not recommended.`);
   }
@@ -1226,19 +1226,19 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */
   // Allows minifiers to rename references to globalThis
-  const global = globalThis;
+  const global$1 = globalThis;
   /**
    * Useful for visualizing and logging insights into what the Lit template system is doing.
    *
    * Compiled out of prod mode builds.
    */
   const debugLogEvent = (event) => {
-          const shouldEmit = global
+          const shouldEmit = global$1
               .emitLitDebugLogEvents;
           if (!shouldEmit) {
               return;
           }
-          global.dispatchEvent(new CustomEvent('lit-debug', {
+          global$1.dispatchEvent(new CustomEvent('lit-debug', {
               detail: event,
           }));
       }
@@ -1249,24 +1249,24 @@
   let debugLogRenderId = 0;
   let issueWarning$2;
   {
-      global.litIssuedWarnings ??= new Set();
+      global$1.litIssuedWarnings ??= new Set();
       // Issue a warning, if we haven't already.
       issueWarning$2 = (code, warning) => {
           warning += code
               ? ` See https://lit.dev/msg/${code} for more information.`
               : '';
-          if (!global.litIssuedWarnings.has(warning)) {
+          if (!global$1.litIssuedWarnings.has(warning)) {
               console.warn(warning);
-              global.litIssuedWarnings.add(warning);
+              global$1.litIssuedWarnings.add(warning);
           }
       };
       issueWarning$2('dev-mode', `Lit is in dev mode. Not recommended for production!`);
   }
-  const wrap = global.ShadyDOM?.inUse &&
-      global.ShadyDOM?.noPatch === true
-      ? global.ShadyDOM.wrap
+  const wrap = global$1.ShadyDOM?.inUse &&
+      global$1.ShadyDOM?.noPatch === true
+      ? global$1.ShadyDOM.wrap
       : (node) => node;
-  const trustedTypes = global.trustedTypes;
+  const trustedTypes = global$1.trustedTypes;
   /**
    * Our TrustedTypePolicy for HTML which is declared using the html template
    * tag function.
@@ -2527,13 +2527,13 @@
       }
   }
   // Apply polyfills if available
-  const polyfillSupport$1 = global.litHtmlPolyfillSupportDevMode
+  const polyfillSupport$1 = global$1.litHtmlPolyfillSupportDevMode
       ;
   polyfillSupport$1?.(Template, ChildPart);
   // IMPORTANT: do not change the property name or the assignment expression.
   // This line will be used in regexes to search for lit-html usage.
-  (global.litHtmlVersions ??= []).push('3.1.4');
-  if (global.litHtmlVersions.length > 1) {
+  (global$1.litHtmlVersions ??= []).push('3.1.4');
+  if (global$1.litHtmlVersions.length > 1) {
       issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. ` +
           `Loading multiple versions is not recommended.`);
   }
@@ -3224,45 +3224,120 @@
   }
 
   /**
-   * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const global = window;
+  /**
+   * Whether the current browser supports `adoptedStyleSheets`.
+   */
+  const supportsAdoptingStyleSheets = global.ShadowRoot &&
+      (global.ShadyCSS === undefined || global.ShadyCSS.nativeShadow) &&
+      'adoptedStyleSheets' in Document.prototype &&
+      'replace' in CSSStyleSheet.prototype;
+  /**
+   * Applies the given styles to a `shadowRoot`. When Shadow DOM is
+   * available but `adoptedStyleSheets` is not, styles are appended to the
+   * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
+   * Note, when shimming is used, any styles that are subsequently placed into
+   * the shadowRoot should be placed *before* any shimmed adopted styles. This
+   * will match spec behavior that gives adopted sheets precedence over styles in
+   * shadowRoot.
+   */
+  const adoptStyles = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets) {
+          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+      }
+      else {
+          styles.forEach((s) => {
+              const style = document.createElement('style');
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const nonce = global['litNonce'];
+              if (nonce !== undefined) {
+                  style.setAttribute('nonce', nonce);
+              }
+              style.textContent = s.cssText;
+              renderRoot.appendChild(style);
+          });
+      }
+  };
+
+  /**
+   * @typedef {import('./types').RenderOptions} RenderOptions
+   * @typedef {import('./types').ScopedElementsMixin} ScopedElementsMixin
+   * @typedef {import('./types').ScopedElementsHost} ScopedElementsHost
+   * @typedef {import('./types').ScopedElementsMap} ScopedElementsMap
+   * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
    */
 
-  const version = '3.0.0';
-  const versions = window.scopedElementsVersions || (window.scopedElementsVersions = []);
-  if (!versions.includes(version)) {
-    versions.push(version);
-  }
+  // @ts-ignore
+  const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
 
   /**
-   * @template {import('./types.js').Constructor<HTMLElement>} T
+   * @template {import('./types').Constructor<HTMLElement>} T
    * @param {T} superclass
-   * @return {T & import('./types.js').Constructor<ScopedElementsHost>}
+   * @return {T & import('./types').Constructor<ScopedElementsHost>}
    */
-  const ScopedElementsMixinImplementation$1 = superclass =>
+  const ScopedElementsMixinImplementation = superclass =>
     /** @type {ScopedElementsHost} */
     class ScopedElementsHost extends superclass {
       /**
        * Obtains the scoped elements definitions map if specified.
        *
-       * @type {ScopedElementsMap=}
+       * @returns {ScopedElementsMap}
+       */
+      static get scopedElements() {
+        return {};
+      }
+
+      /**
+       * Obtains the ShadowRoot options.
+       *
+       * @type {ShadowRootInit}
        */
-      static scopedElements;
+      static get shadowRootOptions() {
+        return this.__shadowRootOptions;
+      }
 
-      static get scopedElementsVersion() {
-        return version;
+      /**
+       * Set the shadowRoot options.
+       *
+       * @param {ShadowRootInit} value
+       */
+      static set shadowRootOptions(value) {
+        this.__shadowRootOptions = value;
       }
 
-      /** @type {CustomElementRegistry=} */
-      static __registry;
+      /**
+       * Obtains the element styles.
+       *
+       * @returns {CSSResultOrNative[]}
+       */
+      static get elementStyles() {
+        return this.__elementStyles;
+      }
+
+      static set elementStyles(styles) {
+        this.__elementStyles = styles;
+      }
+
+      // either TS or ESLint will complain here
+      // eslint-disable-next-line no-unused-vars
+      constructor(..._args) {
+        super();
+        /** @type {RenderOptions} */
+        this.renderOptions = this.renderOptions || undefined;
+      }
 
       /**
        * Obtains the CustomElementRegistry associated to the ShadowRoot.
        *
-       * @returns {CustomElementRegistry=}
+       * @returns {CustomElementRegistry}
        */
       get registry() {
-        return /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry;
+        // @ts-ignore
+        return this.constructor.__registry;
       }
 
       /**
@@ -3271,15 +3346,13 @@
        * @param {CustomElementRegistry} registry
        */
       set registry(registry) {
-        /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry = registry;
+        // @ts-ignore
+        this.constructor.__registry = registry;
       }
 
-      /**
-       * @param {ShadowRootInit} options
-       * @returns {ShadowRoot}
-       */
-      attachShadow(options) {
-        const { scopedElements } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
+      createRenderRoot() {
+        const { scopedElements, shadowRootOptions, elementStyles } =
+          /** @type {typeof ScopedElementsHost} */ (this.constructor);
 
         const shouldCreateRegistry =
           !this.registry ||
@@ -3291,60 +3364,89 @@
          * Create a new registry if:
          * - the registry is not defined
          * - this class doesn't have its own registry *AND* has no shared registry
-         * This is important specifically for superclasses/inheritance
          */
         if (shouldCreateRegistry) {
-          this.registry = new CustomElementRegistry();
-          for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
-            this.registry.define(tagName, klass);
+          this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+          for (const [tagName, klass] of Object.entries(scopedElements)) {
+            this.defineScopedElement(tagName, klass);
           }
         }
 
-        return super.attachShadow({
-          ...options,
-          // The polyfill currently expects the registry to be passed as `customElements`
+        /** @type {ShadowRootInit} */
+        const options = {
+          mode: 'open',
+          ...shadowRootOptions,
           customElements: this.registry,
-          // But the proposal has moved forward, and renamed it to `registry`
-          // For backwards compatibility, we pass it as both
-          registry: this.registry,
-        });
-      }
-    };
+        };
 
-  const ScopedElementsMixin$1 = dedupeMixin(ScopedElementsMixinImplementation$1);
+        const createdRoot = this.attachShadow(options);
+        if (supportsScopedRegistry) {
+          this.renderOptions.creationScope = createdRoot;
+        }
 
-  /**
-   * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
-   * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
-   * @typedef {import('lit').LitElement} LitElement
-   * @typedef {typeof import('lit').LitElement} TypeofLitElement
-   * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
-   * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
-   */
+        if (createdRoot instanceof ShadowRoot) {
+          adoptStyles(createdRoot, elementStyles);
+          this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
+        }
 
-  /**
-   * @template {LitElementConstructor} T
-   * @param {T} superclass
-   * @return {T & ScopedElementsHostConstructor}
-   */
-  const ScopedElementsMixinImplementation = superclass =>
-    /** @type {ScopedElementsHost} */
-    class ScopedElementsHost extends ScopedElementsMixin$1(superclass) {
-      createRenderRoot() {
-        const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ (
-          this.constructor
-        );
+        return createdRoot;
+      }
 
-        const shadowRoot = this.attachShadow(shadowRootOptions);
-        // @ts-ignore
-        this.renderOptions.creationScope = shadowRoot;
+      createScopedElement(tagName) {
+        const root = supportsScopedRegistry ? this.shadowRoot : document;
+        // @ts-ignore polyfill to support createElement on shadowRoot is loaded
+        return root.createElement(tagName);
+      }
 
-        adoptStyles(shadowRoot, elementStyles);
+      /**
+       * Defines a scoped element.
+       *
+       * @param {string} tagName
+       * @param {typeof HTMLElement} klass
+       */
+      defineScopedElement(tagName, klass) {
+        const registeredClass = this.registry.get(tagName);
+        if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+          // eslint-disable-next-line no-console
+          console.error(
+            [
+              `You are trying to re-register the "${tagName}" custom element with a different class via ScopedElementsMixin.`,
+              'This is only possible with a CustomElementRegistry.',
+              'Your browser does not support this feature so you will need to load a polyfill for it.',
+              'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+              'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+              'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+            ].join('\n'),
+          );
+        }
+        if (!registeredClass) {
+          return this.registry.define(tagName, klass);
+        }
+        return this.registry.get(tagName);
+      }
 
-        this.renderOptions.renderBefore ??= shadowRoot.firstChild;
+      /**
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
+       */
+      // eslint-disable-next-line class-methods-use-this
+      getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.constructor.getScopedTagName(tagName);
+      }
 
-        return shadowRoot;
+      /**
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
+       */
+      // eslint-disable-next-line class-methods-use-this
+      static getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.__registry.get(tagName) ? tagName : undefined;
       }
     };