@govtechsg/sgds-web-component 2.1.0 → 2.1.1

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

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

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

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.sgds.card[variant*=card-action]{transition-duration:.3s;transition-property:box-shadow,border-color;transition-timing-function:ease-in-out}.card-body{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}slot[name=icon]::slotted(*){margin-right:1rem}.sgds.card[variant*=card-action].is-active,.sgds.card[variant*=card-action]:hover{border-color:transparent;box-shadow:var(--sgds-box-shadow),inset 0 0 0 2.1px var(--sgds-link)}.sgds.card[variant*=card-action] .card-subtitle{align-items:center;display:flex;justify-content:space-between}.sgds.card[variant*=card-action] .card-title{color:var(--sgds-body-color);margin-bottom:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=action-card.js.map

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

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

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

@@ -0,0 +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\";\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/react/components/ActionCard/sgds-action-card.js

@@ -0,0 +1,155 @@
+'use client';
+import { __decorate } from 'tslib';
+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';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { html } from 'lit/static-html.js';
+import { CardElement } from '../../base/card-element.js';
+import genId from '../../utils/generateId.js';
+import { watch } from '../../utils/watch.js';
+import { SgdsCheckbox } from '../Checkbox/sgds-checkbox.js';
+import { SgdsRadio } from '../Radio/sgds-radio.js';
+import css_248z from './action-card.js';
+
+/**
+ * @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
+ * @slot card-subtitle - The subtitle of the card
+ * @slot card-title - The title of the card
+ * @slot card-text - The paragrapher text of the card
+ *
+ * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed
+ *
+ * @csspart base - The action card base wrapper
+ * @csspart body - The action card body
+ * @csspart subtitle - The action card subtitle
+ * @csspart title - The action card title
+ * @csspart text - The action card text
+ */
+class SgdsActionCard extends ScopedElementsMixin(CardElement) {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.inputRef = createRef();
+        /** Disables the input (so the user can't check / uncheck it). */
+        this.disabled = false;
+        /** Draws the input in a checked state. */
+        this.checked = false;
+        /** The type of input of the action card */
+        this.type = "checkbox";
+        /** Controls the active styling of the action card */
+        this.active = false;
+        /** @internal The input's id. */
+        this.inputId = genId("action-card", "input");
+    }
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-checkbox": SgdsCheckbox,
+            "sgds-radio": SgdsRadio
+        };
+    }
+    /** Simulates a click on the input control*/
+    click() {
+        this.inputRef.value.click();
+    }
+    /** @internal Declare the click event listener*/
+    async handleInputChange() {
+        this.inputRef.value.click();
+        this.emit("sgds-change");
+    }
+    /** @internal */
+    async handleRadioCheckedChange() {
+        this.active = this.checked;
+    }
+    /** @internal */
+    async handleDisabledChange() {
+        this.active = !this.disabled;
+    }
+    _handleKeyDown(event) {
+        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+        if (event.key === "Enter" && !hasModifier) {
+            this.handleInputChange();
+        }
+    }
+    render() {
+        const checkbox = html `<sgds-checkbox
+      ${ref(this.inputRef)}
+      ?disabled=${this.disabled}
+      id=${this.inputId}
+      @click=${this.handleInputChange}
+      @keydown=${this._handleKeyDown}
+      .value=${live(this.value)}
+      ?checked=${live(this.checked)}
+      @sgds-change=${(e) => (this.checked = e.detail.checked)}
+    ></sgds-checkbox>`;
+        const radio = html `<sgds-radio
+      ${ref(this.inputRef)}
+      ?disabled=${this.disabled}
+      id=${this.inputId}
+      @click=${this.handleInputChange}
+      @keydown=${this._handleKeyDown}
+      .value=${live(this.value)}
+      ?checked=${live(this.checked)}
+    ></sgds-radio>`;
+        return html `
+      <div
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${this.handleInputChange}
+        @keydown=${this._handleKeyDown}
+        variant="card-action"
+        class="sgds card
+        ${classMap({
+            [`text-${this.textColor}`]: this.textColor,
+            [`bg-${this.bgColor}`]: this.bgColor,
+            [`border-${this.borderColor}`]: this.borderColor,
+            ["is-active"]: this.active
+        })}
+        "
+        part="base"
+      >
+        <div class="card-body" part="body">
+          <h6 class="card-subtitle" part="subtitle">
+            <div>
+              <slot name="icon"></slot>
+              <slot name="card-subtitle"></slot>
+            </div>
+            <div class="card-input">${this.type === "checkbox" ? checkbox : radio}</div>
+          </h6>
+          <h5 class="card-title" part="title"><slot name="card-title"></slot></h5>
+          <p class="card-text" part="text"><slot name="card-text"></slot></p>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsActionCard.styles = [...CardElement.styles, css_248z];
+__decorate([
+    property({ reflect: true })
+], SgdsActionCard.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], SgdsActionCard.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsActionCard.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsActionCard.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsActionCard.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], SgdsActionCard.prototype, "active", void 0);
+__decorate([
+    watch("checked")
+], SgdsActionCard.prototype, "handleRadioCheckedChange", null);
+__decorate([
+    watch("disabled")
+], SgdsActionCard.prototype, "handleDisabledChange", null);
+
+export { SgdsActionCard, SgdsActionCard as default };
+//# sourceMappingURL=sgds-action-card.js.map

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

@@ -0,0 +1 @@
+{"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/react/components/Alert/alert-link.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--alert-link-anchor-color:var(--sgds-gray-600);cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--alert-link-anchor-color);font-weight:700}.alert-link:focus-visible{box-shadow:var(--sgds-focus-box-shadow);outline:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=alert-link.js.map

package/react/components/Alert/alert-link.js.map

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

package/react/components/Alert/alert.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--alert-bg:transparent;--alert-color:var(--sgds-gray-600);--alert-border-color:transparent;--alert-icon-margin-right:var(--sgds-spacer-2)}:host([variant=primary]){--alert-bg:var(--sgds-primary-bg-subtle);--alert-border-color:var(--sgds-primary-border-subtle)}:host([variant=secondary]){--alert-bg:var(--sgds-secondary-bg-subtle);--alert-border-color:var(--sgds-secondary-border-subtle)}:host([variant=warning]){--alert-bg:var(--sgds-warning-bg-subtle);--alert-border-color:var(--sgds-warning-border-subtle)}:host([variant=danger]){--alert-bg:var(--sgds-danger-bg-subtle);--alert-border-color:var(--sgds-danger-border-subtle)}:host([variant=success]){--alert-bg:var(--sgds-success-bg-subtle);--alert-border-color:var(--sgds-success-border-subtle)}:host([variant=info]){--alert-bg:var(--sgds-info-bg-subtle);--alert-border-color:var(--sgds-info-border-subtle)}:host([variant=light]){--alert-bg:var(--sgds-light-bg-subtle);--alert-border-color:var(--sgds-light-border-subtle)}.alert{align-items:center;background-color:var(--alert-bg);border:var(--sgds-border-width) solid var(--alert-border-color);border-radius:var(--sgds-border-radius);color:var(--alert-color);display:flex;gap:var(--alert-icon-margin-right);margin-bottom:var(--sgds-spacer-3);padding:var(--sgds-spacer-3) var(--sgds-spacer-3);position:relative}.alert-dismissible{padding-right:3rem}.alert-dismissible sgds-close-button{--sgds-close-btn-color:var(--alert-color);position:absolute;right:1rem;top:1.25rem;z-index:2}.sgds.alert>i{align-self:flex-start}`;
+
+export { css_248z as default };
+//# sourceMappingURL=alert.js.map

package/react/components/Alert/alert.js.map

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

package/react/components/Alert/sgds-alert-heading.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-alert-heading.cjs.js","sources":["../../../../src/components/Alert/sgds-alert-heading.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport headingStyles from \"../../styles/header-class.css\";\n\n/**\n * @summary Alert heading is the header of the Alert component. Use it in the default slot of `sgds-alert` when required\n *\n * @slot default - The text content of the anchor element\n */\nexport class SgdsAlertHeading extends SgdsElement {\n  static styles = [headingStyles];\n\n  /** The type of header tag style for alert's heading */\n  @property({ type: String, reflect: true }) headerTag: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h4\";\n\n  render() {\n    return html`\n      <span class=${this.headerTag}>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\nexport default SgdsAlertHeading;\n"],"names":["SgdsElement","html","headingStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAKA;;;;AAIG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAI6C,IAAS,CAAA,SAAA,GAA4C,IAAI,CAAC;KAStG;IAPC,MAAM,GAAA;AACJ,QAAA,OAAOC,kBAAI,CAAA,CAAA;AACK,kBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;;KAG7B,CAAC;KACH;;AAXM,gBAAA,CAAA,MAAM,GAAG,CAACC,sBAAa,CAAC,CAAC;AAGWC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA2D,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Alert/sgds-alert-heading.js

@@ -0,0 +1,33 @@
+'use client';
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from '../../styles/header-class.js';
+
+/**
+ * @summary Alert heading is the header of the Alert component. Use it in the default slot of `sgds-alert` when required
+ *
+ * @slot default - The text content of the anchor element
+ */
+class SgdsAlertHeading extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** The type of header tag style for alert's heading */
+        this.headerTag = "h4";
+    }
+    render() {
+        return html `
+      <span class=${this.headerTag}>
+        <slot></slot>
+      </span>
+    `;
+    }
+}
+SgdsAlertHeading.styles = [css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsAlertHeading.prototype, "headerTag", void 0);
+
+export { SgdsAlertHeading, SgdsAlertHeading as default };
+//# sourceMappingURL=sgds-alert-heading.js.map

package/react/components/Alert/sgds-alert-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-alert-heading.js","sources":["../../../../src/components/Alert/sgds-alert-heading.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport headingStyles from \"../../styles/header-class.css\";\n\n/**\n * @summary Alert heading is the header of the Alert component. Use it in the default slot of `sgds-alert` when required\n *\n * @slot default - The text content of the anchor element\n */\nexport class SgdsAlertHeading extends SgdsElement {\n  static styles = [headingStyles];\n\n  /** The type of header tag style for alert's heading */\n  @property({ type: String, reflect: true }) headerTag: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h4\";\n\n  render() {\n    return html`\n      <span class=${this.headerTag}>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\nexport default SgdsAlertHeading;\n"],"names":["headingStyles"],"mappings":";;;;;;;AAKA;;;;AAIG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAI6C,IAAS,CAAA,SAAA,GAA4C,IAAI,CAAC;KAStG;IAPC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACK,kBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;;KAG7B,CAAC;KACH;;AAXM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,CAAC,CAAC;AAGW,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA2D,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Alert/sgds-alert-link.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-alert-link.cjs.js","sources":["../../../../src/components/Alert/sgds-alert-link.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertLinkStyle from \"./alert-link.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n/**\n * @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`\n *\n * @slot default - The text content of the anchor element\n * @cssproperty --alert-link-anchor-color - The margin-right css of icon slot, to position the gap between icon and alert message\n */\nexport class SgdsAlertLink extends SgdsElement {\n  static styles = [anchorStyles, alertLinkStyle];\n  /** Forwards to href attribute of anchor element */\n  @property({ type: String, reflect: true }) href: string;\n  /** Tells the browser where to open the link */\n  @property() target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\";\n\n  render() {\n    return html`\n      <a class=\"alert-link\" href=${ifDefined(this.href)} target=${ifDefined(this.target)} tabindex=\"0\"><slot></slot></a>\n    `;\n  }\n}\n\nexport default SgdsAlertLink;\n"],"names":["SgdsElement","html","ifDefined","anchorStyles","alertLinkStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,aAAc,SAAQA,sBAAW,CAAA;IAO5C,MAAM,GAAA;AACJ,QAAA,OAAOC,kBAAI,CAAA,CAAA;mCACoBC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAW,QAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACnF,CAAC;KACH;;AAVM,aAAA,CAAA,MAAM,GAAG,CAACC,iBAAY,EAAEC,oBAAc,CAAC,CAAC;AAEJC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE5CD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAiD,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Alert/sgds-alert-link.js

@@ -0,0 +1,32 @@
+'use client';
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z$1 from './alert-link.js';
+import css_248z from '../../styles/anchor.js';
+
+/**
+ * @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
+ *
+ * @slot default - The text content of the anchor element
+ * @cssproperty --alert-link-anchor-color - The margin-right css of icon slot, to position the gap between icon and alert message
+ */
+class SgdsAlertLink extends SgdsElement {
+    render() {
+        return html `
+      <a class="alert-link" href=${ifDefined(this.href)} target=${ifDefined(this.target)} tabindex="0"><slot></slot></a>
+    `;
+    }
+}
+SgdsAlertLink.styles = [css_248z, css_248z$1];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsAlertLink.prototype, "href", void 0);
+__decorate([
+    property()
+], SgdsAlertLink.prototype, "target", void 0);
+
+export { SgdsAlertLink, SgdsAlertLink as default };
+//# sourceMappingURL=sgds-alert-link.js.map

package/react/components/Alert/sgds-alert-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-alert-link.js","sources":["../../../../src/components/Alert/sgds-alert-link.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertLinkStyle from \"./alert-link.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n/**\n * @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`\n *\n * @slot default - The text content of the anchor element\n * @cssproperty --alert-link-anchor-color - The margin-right css of icon slot, to position the gap between icon and alert message\n */\nexport class SgdsAlertLink extends SgdsElement {\n  static styles = [anchorStyles, alertLinkStyle];\n  /** Forwards to href attribute of anchor element */\n  @property({ type: String, reflect: true }) href: string;\n  /** Tells the browser where to open the link */\n  @property() target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\";\n\n  render() {\n    return html`\n      <a class=\"alert-link\" href=${ifDefined(this.href)} target=${ifDefined(this.target)} tabindex=\"0\"><slot></slot></a>\n    `;\n  }\n}\n\nexport default SgdsAlertLink;\n"],"names":["anchorStyles","alertLinkStyle"],"mappings":";;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;IAO5C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;mCACoB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAW,QAAA,EAAA,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACnF,CAAC;KACH;;AAVM,aAAA,CAAA,MAAM,GAAG,CAACA,QAAY,EAAEC,UAAc,CAAC,CAAC;AAEJ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE5C,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAiD,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Alert/sgds-alert.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-alert.cjs.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport alertStyle from \"./alert.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\nexport type AlertVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n * @cssproperty --alert-bg - The background color of alert\n * @cssproperty --alert-border-color - The color of the border of alert\n * @cssproperty --alert-icon-margin-right - The margin-right css of icon slot to position the gap between icon and alert message\n *\n */\nexport class SgdsAlert extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"primary\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n  render() {\n    return this.show\n      ? html`\n          <div\n            class=\"${classMap({\n              sgds: true,\n              alert: true,\n              fade: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <i><slot name=\"icon\"></slot></i>\n            <slot></slot>\n            ${this.dismissible\n              ? html`<sgds-close-button aria-label=\"close the alert\" @click=${this.close}></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["ScopedElementsMixin","SgdsElement","SgdsCloseButton","html","classMap","nothing","alertStyle","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;;;;AAWA;;;;;;;;;;;;;AAaG;MACU,SAAU,SAAQA,kCAAmB,CAACC,sBAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAS8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAO,CAAA,OAAA,GAAiB,SAAS,CAAC;KAkC9E;;AA9CC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAEC,+BAAe;SACrC,CAAC;KACH;;IAWM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IACD,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI;cACZC,kBAAI,CAAA,CAAA;;AAES,mBAAA,EAAAC,oBAAQ,CAAC;AAChB,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,IAAI,EAAE,IAAI;gBACV,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;aACxC,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;AAIxC,YAAA,EAAA,IAAI,CAAC,WAAW;AAChB,kBAAED,kBAAI,CAAA,0DAA0D,IAAI,CAAC,KAAK,CAAuB,qBAAA,CAAA;AACjG,kBAAEE,WAAO,CAAA;;AAEd,QAAA,CAAA;cACDA,WAAO,CAAC;KACb;;AA/CM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAGJ,sBAAW,CAAC,MAAM,EAAEK,gBAAU,CAArC,CAAuC;AAQRC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ7ED,gBAAA,CAAA;IADCE,WAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;;"}

package/react/components/Alert/sgds-alert.js

@@ -0,0 +1,90 @@
+'use client';
+import { __decorate } from 'tslib';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './alert.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+
+/**
+ * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
+ *
+ * @slot default - The alert's main content.
+ * @slot icon - An icon to show in the alert. Pass in SVG elements.
+ *
+ * @event sgds-show - Emitted when the alert appears.
+ * @event sgds-hide - Emitted after the alert closes.
+ *
+ * @cssproperty --alert-bg - The background color of alert
+ * @cssproperty --alert-border-color - The color of the border of alert
+ * @cssproperty --alert-icon-margin-right - The margin-right css of icon slot to position the gap between icon and alert message
+ *
+ */
+class SgdsAlert extends ScopedElementsMixin(SgdsElement) {
+    constructor() {
+        super(...arguments);
+        /** Controls the appearance of the alert  */
+        this.show = false;
+        /** Enables a close button that allows the user to dismiss the alert. */
+        this.dismissible = false;
+        /** The alert's theme variant. */
+        this.variant = "primary";
+    }
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-close-button": SgdsCloseButton
+        };
+    }
+    /** Closes the alert  */
+    close() {
+        this.show = false;
+    }
+    /**@internal */
+    _handleShowChange() {
+        this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
+    }
+    render() {
+        return this.show
+            ? html `
+          <div
+            class="${classMap({
+                sgds: true,
+                alert: true,
+                fade: true,
+                show: this.show,
+                [`alert-dismissible`]: this.dismissible
+            })}"
+            role="alert"
+            aria-hidden=${this.show ? "false" : "true"}
+          >
+            <i><slot name="icon"></slot></i>
+            <slot></slot>
+            ${this.dismissible
+                ? html `<sgds-close-button aria-label="close the alert" @click=${this.close}></sgds-close-button>`
+                : nothing}
+          </div>
+        `
+            : nothing;
+    }
+}
+SgdsAlert.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsAlert.prototype, "show", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsAlert.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsAlert.prototype, "variant", void 0);
+__decorate([
+    watch("show")
+], SgdsAlert.prototype, "_handleShowChange", null);
+
+export { SgdsAlert, SgdsAlert as default };
+//# sourceMappingURL=sgds-alert.js.map

package/react/components/Alert/sgds-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-alert.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport alertStyle from \"./alert.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\nexport type AlertVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n * @cssproperty --alert-bg - The background color of alert\n * @cssproperty --alert-border-color - The color of the border of alert\n * @cssproperty --alert-icon-margin-right - The margin-right css of icon slot to position the gap between icon and alert message\n *\n */\nexport class SgdsAlert extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"primary\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n  render() {\n    return this.show\n      ? html`\n          <div\n            class=\"${classMap({\n              sgds: true,\n              alert: true,\n              fade: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <i><slot name=\"icon\"></slot></i>\n            <slot></slot>\n            ${this.dismissible\n              ? html`<sgds-close-button aria-label=\"close the alert\" @click=${this.close}></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["alertStyle"],"mappings":";;;;;;;;;;;;AAWA;;;;;;;;;;;;;AAaG;MACU,SAAU,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAS8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAO,CAAA,OAAA,GAAiB,SAAS,CAAC;KAkC9E;;AA9CC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAE,eAAe;SACrC,CAAC;KACH;;IAWM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IACD,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI;cACZ,IAAI,CAAA,CAAA;;AAES,mBAAA,EAAA,QAAQ,CAAC;AAChB,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,IAAI,EAAE,IAAI;gBACV,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;aACxC,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;AAIxC,YAAA,EAAA,IAAI,CAAC,WAAW;AAChB,kBAAE,IAAI,CAAA,0DAA0D,IAAI,CAAC,KAAK,CAAuB,qBAAA,CAAA;AACjG,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA/CM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAQR,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ7E,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}

package/react/components/Badge/badge.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host([variant=primary]) .badge{--badge-bg:var(--sgds-primary-filled)}:host([variant=secondary]) .badge{--badge-bg:var(--sgds-secondary-filled)}:host([variant=warning]) .badge{--badge-bg:var(--sgds-warning-filled);--badge-color:var(--sgds-dark)}:host([variant=danger]) .badge{--badge-bg:var(--sgds-danger-filled)}:host([variant=success]) .badge{--badge-bg:var(--sgds-success-filled)}:host([variant=info]) .badge{--badge-bg:var(--sgds-info-filled)}:host([variant=light]) .badge{--badge-bg:var(--sgds-light-filled);--badge-color:var(--sgds-gray-600)}:host([variant=dark]) .badge{--badge-bg:var(--sgds-dark-filled)}:host([variant=primary][outlined]) .badge{--badge-color:var(--sgds-primary-text-emphasis);--badge-bg:var(--sgds-primary-bg-subtle);--badge-border-color:var(--sgds-primary-border-subtle)}:host([variant=secondary][outlined]) .badge{--badge-color:var(--sgds-secondary-text-emphasis);--badge-bg:var(--sgds-secondary-bg-subtle);--badge-border-color:var(--sgds-secondary-border-subtle)}:host([variant=warning][outlined]) .badge{--badge-color:var(--sgds-warning-text-emphasis);--badge-bg:var(--sgds-warning-bg-subtle);--badge-border-color:var(--sgds-warning-border-subtle)}:host([variant=danger][outlined]) .badge{--badge-color:var(--sgds-danger-text-emphasis);--badge-bg:var(--sgds-danger-bg-subtle);--badge-border-color:var(--sgds-danger-border-subtle)}:host([variant=success][outlined]) .badge{--badge-color:var(--sgds-success-text-emphasis);--badge-bg:var(--sgds-success-bg-subtle);--badge-border-color:var(--sgds-success-border-subtle)}:host([variant=info][outlined]) .badge{--badge-color:var(--sgds-info-text-emphasis);--badge-bg:var(--sgds-info-bg-subtle);--badge-border-color:var(--sgds-info-border-subtle)}:host([variant=light][outlined]) .badge{--badge-color:var(--sgds-light-text-emphasis);--badge-bg:var(--sgds-light-bg-subtle);--badge-border-color:var(--sgds-light-border-subtle)}:host([variant=dark][outlined]) .badge{--badge-color:var(--sgds-dark-text-emphasis);--badge-bg:var(--sgds-dark-bg-subtle);--badge-border-color:var(--sgds-dark-border-subtle)}.badge{--badge-padding-x:0.571em;--badge-padding-y:0.285em;--badge-font-size:min(0.875em,2rem);--badge-font-weight:700;--badge-border-radius:var(--sgds-border-radius);--badge-border-width:var(--sgds-border-width);--badge-line-height:1.145;--badge-icon-gap:var(--sgds-spacer-2);--badge-color:var(--sgds-white);--badge-bg: ;--badge-border-color:transparent;background-color:var(--badge-bg);border:var(--badge-border-width) solid var(--badge-border-color);border-radius:var(--badge-border-radius);color:var(--badge-color);display:inline-flex;font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);gap:var(--badge-icon-gap);line-height:var(--badge-line-height);padding:var(--badge-padding-y) var(--badge-padding-x);text-align:center;vertical-align:baseline;white-space:nowrap}.rounded-pill{border-radius:var(--sgds-border-radius-pill)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=badge.js.map

package/react/components/Badge/badge.js.map

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

package/react/components/Badge/sgds-badge.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nexport type BadgeVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * @slot default - slot for badge\n *\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`, `light`, `link` */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n  /**  Visually set badge for lesser color emphasis. Renamed from previous `isLight` prop */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n  /** Visually set badge with rounded corners. */\n  @property({ type: Boolean, reflect: true }) roundedPill = false;\n\n  render() {\n    return html`\n      <span\n        class=\"  \n          ${classMap({\n          badge: true,\n          \"rounded-pill\": this.roundedPill\n        })}\n            \"\n      >\n        <slot name=\"leftIcon\"></slot>\n        <slot></slot>\n        <slot name=\"rightIcon\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["SgdsElement","html","classMap","badgeStyle","__decorate","property"],"mappings":";;;;;;;;;;;;AAOA;;;;AAIG;AACG,MAAO,SAAU,SAAQA,sBAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAI+B,IAAO,CAAA,OAAA,GAAiB,SAAS,CAAC;;QAEnB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAEjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KAkBjE;IAhBC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGH,UAAA,EAAAC,oBAAQ,CAAC;AACX,YAAA,KAAK,EAAE,IAAI;YACX,cAAc,EAAE,IAAI,CAAC,WAAW;SACjC,CAAC,CAAA;;;;;;;KAOL,CAAC;KACH;;AAxBM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,gBAAU,CAArC,CAAuC;AAGvBC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Badge/sgds-badge.js

@@ -0,0 +1,53 @@
+'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 SgdsElement from '../../base/sgds-element.js';
+import css_248z from './badge.js';
+
+/**
+ * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+ * @slot default - slot for badge
+ *
+ */
+class SgdsBadge extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`, `light`, `link` */
+        this.variant = "primary";
+        /**  Visually set badge for lesser color emphasis. Renamed from previous `isLight` prop */
+        this.outlined = false;
+        /** Visually set badge with rounded corners. */
+        this.roundedPill = false;
+    }
+    render() {
+        return html `
+      <span
+        class="  
+          ${classMap({
+            badge: true,
+            "rounded-pill": this.roundedPill
+        })}
+            "
+      >
+        <slot name="leftIcon"></slot>
+        <slot></slot>
+        <slot name="rightIcon"></slot>
+      </span>
+    `;
+    }
+}
+SgdsBadge.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ reflect: true })
+], SgdsBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsBadge.prototype, "outlined", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsBadge.prototype, "roundedPill", void 0);
+
+export { SgdsBadge, SgdsBadge as default };
+//# sourceMappingURL=sgds-badge.js.map

package/react/components/Badge/sgds-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nexport type BadgeVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * @slot default - slot for badge\n *\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`, `light`, `link` */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n  /**  Visually set badge for lesser color emphasis. Renamed from previous `isLight` prop */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n  /** Visually set badge with rounded corners. */\n  @property({ type: Boolean, reflect: true }) roundedPill = false;\n\n  render() {\n    return html`\n      <span\n        class=\"  \n          ${classMap({\n          badge: true,\n          \"rounded-pill\": this.roundedPill\n        })}\n            \"\n      >\n        <slot name=\"leftIcon\"></slot>\n        <slot></slot>\n        <slot name=\"rightIcon\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":";;;;;;;;AAOA;;;;AAIG;AACG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAI+B,IAAO,CAAA,OAAA,GAAiB,SAAS,CAAC;;QAEnB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAEjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KAkBjE;IAhBC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGH,UAAA,EAAA,QAAQ,CAAC;AACX,YAAA,KAAK,EAAE,IAAI;YACX,cAAc,EAAE,IAAI,CAAC,WAAW;SACjC,CAAC,CAAA;;;;;;;KAOL,CAAC;KACH;;AAxBM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGvB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Breadcrumb/breadcrumb-item.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{font-size:var(--sgds-body-font-size)}slot[name=separator]::slotted(*){color:var(--sgds-body-color);padding-left:var(--sgds-spacer-3);padding-right:var(--sgds-spacer-3)}:host(:last-of-type) .breadcrumb-item__separator{display:none}.breadcrumb-item.active{color:var(--sgds-body-color)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=breadcrumb-item.js.map

package/react/components/Breadcrumb/breadcrumb-item.js.map

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

package/react/components/Breadcrumb/breadcrumb.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.breadcrumb{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:var(--sgds-spacer-0) var(--sgds-spacer-0)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=breadcrumb.js.map

package/react/components/Breadcrumb/breadcrumb.js.map

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

package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-breadcrumb-item.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport breadcrumbItemStyle from \"./breadcrumb-item.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n/**\n * @summary Breadcrumb Item are navigational links used in Breadcrumb component\n *\n * @slot default - The title of the item\n * @slot separator - The individual separator of breadcrumb item can be changed here.\n *\n * @csspart base - The base wrapper of breadcrumb item which is a HTMLListElement.\n * @csspart label -The label of the breadcrumb item. It is either a span or anchor element depending on href attribute\n *\n */\nexport class SgdsBreadcrumbItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, anchorStyles, breadcrumbItemStyle];\n  /** Specifies the url path of the breadcrumb-item. When defined, the breadcrumb-items is a anchor element. When not defined, indicates that the breadcrumb item is active. In such cases, a span element is rendered. */\n  @property({ type: String, reflect: true }) href: string;\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\";\n\n  /** The `rel` attribute to use on the link. Only used when `href` is set. */\n  @property() rel = \"noreferrer noopener\";\n\n  render() {\n    const isLink = this.href ? true : false;\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"breadcrumb-item\": true,\n          active: !isLink\n        })}\n      >\n        ${isLink\n          ? html`\n              <a\n                part=\"label\"\n                href=\"${this.href}\"\n                rel=${ifDefined(this.target ? this.rel : undefined)}\n                target=${ifDefined(this.target)}\n                ><slot></slot\n              ></a>\n            `\n          : html`<span part=\"label\"><slot></slot></span>`}\n        <slot name=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumbItem;\n"],"names":["SgdsElement","html","classMap","ifDefined","anchorStyles","breadcrumbItemStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,kBAAmB,SAAQA,sBAAW,CAAA;AAAnD,IAAA,WAAA,GAAA;;;QAQc,IAAG,CAAA,GAAA,GAAG,qBAAqB,CAAC;KA2BzC;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,MAAM,EAAE,CAAC,MAAM;SAChB,CAAC,CAAA;;UAEA,MAAM;cACJD,QAAI,CAAA,CAAA;;;AAGQ,sBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACX,oBAAA,EAAAE,sBAAS,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,CAAA;AAC1C,uBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;;AAGlC,YAAA,CAAA;cACDF,QAAI,CAAA,CAAyC,uCAAA,CAAA,CAAA;;;KAGpD,CAAC;KACH;;AAjCM,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEI,iBAAY,EAAEC,yBAAmB,CAA5D,CAA8D;AAEhCC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE5CD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAiD,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhDD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAA6B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}